JointJS - GitHub Discussion 2548

2-color links https://github.com/clientIO/joint/discussions/2548

by Roman Bruckner

HTML

<script src="https://cdn.jsdelivr.net/npm/@joint/[email protected]/dist/joint.min.js"></script>
<div id="paper"></div>

JavaScript

const { util, dia, shapes: defaultShapes } = joint;

const SplitLink = dia.Link.define('SplitLink', {
    attrs: {
        line: {
            connection: true,
            strokeWidth: 3,
        },
        first: {
            stroke: 'red',
            index: 0,
            
        },
        second: {
            stroke: 'blue',
            index: 1,
            targetMarker: {
                'type': 'path',
                'd': 'M 10 -5 0 0 10 5 z'
            }            
        }
    }
}, {
    markup: util.svg/* xml */`
        <path @selector="first" @group-selector="line" fill="none" />
        <path @selector="second" @group-selector="line" fill="none" />
    `
}, {
    attributes: {
        index: {
            set: function(index, refBBox, node, attrs, linkView) {
                const length = linkView.getConnectionLength() / 2;
                if (index === 0) {
                    return { 'stroke-dasharray': `${length}` };
                } else {
                    return { 'stroke-dasharray': `0 ${length} ${length}` };
                }
            }
        }
    }
});

const shapes = {
    SplitLink,
    ...defaultShapes,
};

const graph = new dia.Graph({}, {
    cellNamespace: shapes
});

const paper = new joint.dia.Paper({
    el: document.getElementById('paper'),
    width: 400,
    height: 400,
    overflow: true,
    model: graph,
    cellViewNamespace: shapes,
    gridSize: 10,
    async: true,
    sorting: joint.dia.Paper.sorting.APPROX,
});


const link = new SplitLink({
    source: { x: 20, y: 20 },
    target: { x: 350, y: 20 }
});

link.addTo(graph);

const tools = new joint.dia.ToolsView({
    tools: [
        new joint.linkTools.Vertices(),
        new joint.linkTools.SourceArrowhead(),
        new joint.linkTools.TargetArrowhead(),
    ]
});

link.findView(paper).addTools(tools);