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, linkTools } = joint;

const shapes = {
    ...defaultShapes,
};

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

const paper = new dia.Paper({
    el: document.getElementById('paper'),
    width: 800,
    height: 900,
    model: graph,
    cellViewNamespace: shapes,
    async: true,
});

const link = new shapes.standard.Link({
    source: { x: 20, y: 20 },
    target: { x: 350, y: 20 }
});

link.addTo(graph);

const customVertices = new linkTools.Vertices({
    vertexAdding: true,
    vertexRemoving: true,
    handleClass: linkTools.Vertices.VertexHandle.extend({
        tagName: 'g',
        children: util.svg/* xml */`
            <circle r="6" stroke="#FFFFFF" stroke-width="2" cursor="move"/>
            <g class="vertex-tooltip__remove">
                <g class="vertex-tooltip__remove-btn" cursor="pointer" transform="translate(10,10)">
                    <circle r="5" stroke="red" fill="red" stroke-width="2" />
                    <line x1="-3" y1="-3" x2="3" y2="3" stroke="#fff" stroke-width="2" />
                    <line x1="3" y1="-3" x2="-3" y2="3" stroke="#fff" stroke-width="2" />
                </g>
            </g>
        `,
        events: {
            ...linkTools.Vertices.VertexHandle.prototype.events,
            'mousedown .vertex-tooltip__remove-btn': 'onRemoveButtonPointerDown',
        },
        onRender() {
            this.renderChildren();
        },
        onRemoveButtonPointerDown(evt) {
            this.trigger('remove', this, evt);
            evt.stopPropagation();
        },
        onDoubleClick(evt) {
            // noop
        }
    }),
});
const tools = new joint.dia.ToolsView({
    tools: [
        customVertices,
        new joint.linkTools.SourceArrowhead(),
        new joint.linkTools.TargetArrowhead(),
    ]
});

link.findView(paper).addTools(tools);
link.insertVertex(0, { x: 200, y: 20 });