dia.LinkView: snap arrowhead to the anchor and vertices

This issue has been tracked since 2022-04-20.

As user I want to the link's arrowhead (as being dragged) to be automatically aligned with the other end of the link or the existing vertices.

Here's an example of possible implementation.

const paper = new joint.dia.Paper({
    /* ... */
    linkView: joint.dia.LinkView.extend({
        snapDistance: 20,
        snapToAnchor(x, y, endType) {
            const { snapDistance } = this;
            const anchor = this.getEndAnchor(endType === 'source' ? 'target' : 'source');
            if (Math.abs(anchor.x - x) < snapDistance) {
                x = anchor.x;
            }
            if (Math.abs(anchor.y - y) < snapDistance) {
                y = anchor.y;
            }
            return { x, y };
        },
        dragArrowhead: function(evt, x0, y0) {
            const { x, y } = this.snapToAnchor(x0, y0, this.eventData(evt).arrowhead);
            return joint.dia.LinkView.prototype.dragArrowhead.call(this, evt, x, y);
        },
        dragArrowheadEnd: function(evt, x0, y0) {
            const { x, y } = this.snapToAnchor(x0, y0, this.eventData(evt).arrowhead);
            return joint.dia.LinkView.prototype.dragArrowheadEnd.call(this, evt, x, y);
        }
    })
});
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