overriding defaultLink ignores interactive settings

This issue has been tracked since 2021-11-11.

With the code below, any defaultLink will ignore the the paper.interactive settings and the arrowhead cannot be moved, etc.

var CustomLink = joint.dia.Link.define('examples.CustomLink', {
        attrs: {
            line: {
                connection: true,
                fill: 'none',
                stroke: 'orange',
                strokeWidth: 2,
                sourceMarker: {
                    'type': 'circle',
                    'r': 4,
                    'fill': 'white',
                    'stroke': 'orange',
                    'stroke-width': '2'
                },
                targetMarker: {
                    'type': 'circle',
                    'r': 4,
                    'fill': 'white',
                    'stroke': 'orange',
                    'stroke-width': '2'
                }
            },
            arrowhead: {
                d: 'M -20 -10 0 0 -20 10 Z',
                fill: 'orange',
                stroke: 'none'
            },
            symbol: {
                d: 'M -20 -20 20 20',
                stroke: 'black',
                targetMarker: {
                    'type': 'path',
                    'd': 'M 0 0 10 -5 10 5 Z',
                    'fill': 'black',
                    'stroke': 'none'
                }
            }
        }
    }, {
        markup: [{
            tagName: 'path',
            selector: 'line'
        }, {
            tagName: 'path',
            selector: 'arrowhead'
        }, {
            tagName: 'path',
            selector: 'symbol'
        }]
    });
new joint.dia.Paper({
    el: document.getElementById('paper'),
    background: {
        color: '#434343'
    },
    width: 800,
    height: 600,
    drawGrid: { name: 'mesh', args: { color: 'grey' } },
    gridSize: 20,
    model: graph,
    interactive: function (cellView) {
        if (cellView.model.isLink()) {
            return {
                remove: true,
                vertexAdd: true,
                vertexRemove: false,
                arrowheadMove: true
            }
        }
        return true;
    },
    defaultLink: function (cellView, magnet) {
        return new CustomLink(); 
    },
    linkPinning: false,
    snapLinks: true,
});`
kumilingus wrote this answer on 2021-11-11

This option is valid only for legacy joint.dia.Link (links that contain the tools in its markup). For any custom link (or built-in standard.Link) use linkTools (https://resources.jointjs.com/tutorial/link-tools). Either add them to the link (interactive) or not (non-interactive).

meticulous22 wrote this answer on 2021-11-11

Thanks, I had actually tried that, but the the sample code from (https://resources.jointjs.com/tutorial/link-tools) fails (at least when used within the defaultLink override). How do you get the linkview here? (I tried link.findView(paper), link.findView('paper'), and this.findViewByModel(link)).

Am I missing something or is there really no way to style the default link and have still have it interactive?

    var verticesTool = new joint.linkTools.Vertices({
        redundancyRemoval: false,
        snapRadius: 10,
        vertexAdding: true,
    });

    var segmentsTool = new joint.linkTools.Segments();
    var sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
    var targetArrowheadTool = new joint.linkTools.TargetArrowhead();
    var sourceAnchorTool = new joint.linkTools.SourceAnchor();
    var targetAnchorTool = new joint.linkTools.TargetAnchor();
    var boundaryTool = new joint.linkTools.Boundary();
    var removeButton = new joint.linkTools.Remove();

    var toolsView = new joint.dia.ToolsView({
        tools: [
            verticesTool, segmentsTool,
            sourceArrowheadTool, targetArrowheadTool,
            sourceAnchorTool, targetAnchorTool,
            boundaryTool, removeButton
        ]
    });

    var paper = new joint.dia.Paper({
        el: document.getElementById('paper'),
        background: {
            color: '#434343'
        },
        width: 800,
        height: 600,
        drawGrid: { name: 'mesh', args: { color: 'grey' } },
        gridSize: 20,
        model: graph,
        defaultLink: function (cellView, magnet) {
            var link = new joint.shapes.standard.Link();

            var linkView = link.findView('paper');
            linkView.addTools(toolsView);

            return link;
        },
        linkPinning: false,
        snapLinks: true,
    });

Capture

kumilingus wrote this answer on 2021-11-12

The link has no view yet here (since it has not been added to the graph). If you want to show the arrowhead on hover you can add the tools on paper's link:mouseenter (as shown is the tutorial). Or add the tools when the link is added to the graph (on graph's add).

meticulous22 wrote this answer on 2021-11-12

That works, I should have read that more carefully. Thanks

More Details About Repo
Owner Name clientIO
Repo Name joint
Full Name clientIO/joint
Language JavaScript
Created Date 2009-09-11
Updated Date 2022-12-03
Star Count 3715
Watcher Count 155
Fork Count 817
Issue Count 51

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date