Display remove button above and vertex tool below the link labels

[dsrdh]

Introduction

I have a label that opens a pop-up when clicked. This link has two tools - vertex tool & remove tool.
The vertex tool shouldn't work on areas overlapping the labels - so that it doesn't prevent the pop-up from opening.
Additionally, the remove tool should be placed above the label in case it overlaps the label.

How can I achieve this functionality in JointJs v4?

Steps to reproduce

No response

Restrictions & Constraints

No response

Does your question relate to JointJS or JointJS+. Select both if applicable.

JointJS

[kumilingus]

Currently, this is not possible. However, it turns out that the current solution with the extra path overlay does not meet all requirements.

Here is a workaround for now. Something similar will soon turn into a feature.

const Vertices = joint.linkTools.Vertices.extend({
    pathNode: null,
    renderChildren: function() {
        const { pathSelector = 'wrapper' } = this.options;
        const el = this.relatedView.findNode(pathSelector);
        if (!el) return;
        this.delegateElementEvents(el, {
            mousedown:  'onLinkPointerDown',
            touchstart: 'onLinkPointerDown',
        });
        this.pathNode = el;
    },
    onLinkPointerDown: function(evt) {
        this.relatedView.preventDefaultInteraction(evt);
        this.onPathPointerDown(evt);
    },
    onRemove: function() {
        joint.linkTools.Vertices.prototype.onRemove.apply(this, arguments);
        this.undelegateElementEvents(this.pathNode);
    },
    updatePath: function() {
        // noop
    },
});

The value of pathSelector may vary depending on the type of link with which this tool is used. The pathSelector should point to an SVG path of the link.

new Vertices({ stopPropagation: false, pathSelector: 'outline' }),

[dsrdh]

Thanks a lot! @kumilingus