Add hover to vertices and be able to remove vertex by click on hover icon

[AlexBezmoshchuk]

Introduction

Initially I used JointJS 3.7.5 with fsa.Arrow as links between elements. They had pretty useful feature to remove vertices by clicking to close button in hover.

In version 4 fsa package is removed, so I replaced my links by using custom links (defined by shapes.standard.Link) and they work great, but I lost a feature to remove vertices by clicking on hover. Double click event is used by another feature, so I turned off vertexRemoving.

Is it possible to add hover to vertices or improve markup of vertices to create element with hover tooltip? I tried to extend VertexHandle using

const customVertices = new linkTools.Vertices({
  handleClass: linkTools.Vertices.VertexHandle.extend({
    options: { markup: util.svg`<rect fill="red" width="10" height="20" x="-10" y="-10"/>` }, // some test markup to see if it works
  }),
  vertexAdding: false,
  vertexRemoving: false,
});

but vertex shape is the same

Steps to reproduce

No response

Restrictions & Constraints

• Cannot use standard way to remove vertices (by double click on them) due to business restrictions.

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

JointJS

[kumilingus]

The VertexHandle does not read markup option. You can do it this way:

const customVertices = new linkTools.Vertices({
    handleClass: linkTools.Vertices.VertexHandle.extend({
        tagName: 'g',
        children: util.svg`<rect fill="red" width="10" height="20" x="-10" y="-10"/>`,
        onRender() {
            this.renderChildren();
        }
    }),
    vertexAdding: false,
    vertexRemoving: false,
});

[AlexBezmoshchuk]

Thanks a lot. I changed the markup to have a standard shape of vertices with remove tooltip.

const handleClick = (event: MouseEvent) => {
    if (!event.currentTarget) {
      return;
    }

    const lineElement = event.currentTarget.parentElement.parentElement;
    const [x, y] = lineElement.getAttribute('transform').replace('matrix(1,0,0,1,', '').replace(')', '').split(',');
    const linkId = lineElement.getAttribute('model-id');

    onRemove(linkId, x, y);
};

return new linkTools.Vertices({
    vertexAdding: false,
    vertexRemoving: false,
    handleClass: linkTools.Vertices.VertexHandle.extend({
      tagName: 'g',
      children: util.svg`
<circle r="6" stroke="#FFFFFF" stroke-width="2" cursor="move"></circle>
<g class="vertex-tooltip__remove">
        <g class="vertex-tooltip__remove-btn" cursor="pointer">
            <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>
`,
      onRender() {
        this.renderChildren();

        const removeBtns = this.el.querySelectorAll('.vertex-tooltip__remove-btn');
        removeBtns.forEach((btn: HTMLElement) => {
          btn.addEventListener('click', handleClick);
        });
      },

      onRemove() {
        const removeBtns = this.el.querySelectorAll('.vertex-tooltip__remove-btn');
        removeBtns.forEach((btn: HTMLElement) => {
          btn.removeEventListener('click', handleClick);
        });
      },
    }),
});

The only concern is I haven't found a way to get a vertex properties such as lineId, x and y without getting it from line element (with class .joint-marker-vertex). Is there a way to get such data from this in method onRender?

[kumilingus]

It's easier to use the same mechanisms that were used in the original VertexHandle class.
Would this work? https://jsfiddle.net/kumilingus/ke60L73q/

[AlexBezmoshchuk]

This is great. Thanks a lot.