add removal tool in vectorizer

[slvamegestic]

Hi I am using jointjs 3.6.5,

var line = V("rect", { x: 20, y: 20 width: 100, height: 100, "stroke-width": 3, fill: "transparent", stroke: "#142f5a", }); V(this.bgPaper.viewport).append(line);

The above code draws a rectangle as a line(the image shows multiple rectangle lines in black). When hovering over the lines, I want a removal tool to appear. How can I do that ?

[kumilingus]

If you choose to use low-level APIs (Vectorizer or native SVG) to draw objects, you can't expect high-level classes (elementTools, linkTools) to work with them (they only work with ElementView and LinkView).

You need to attach event listeners using DOM API and render the button using Vectorizer or DOM API.

[slvamegestic]

My best efforts were made. But the mouseenter event is not even triggered while hovering over my SVG rectangle. Can you please explain more about this with a snippet/fiddle?

[kumilingus]

Please try to create the fiddle and we'll look at what is wrong.

Note that this is not a question for JointJS, but a general question about working with DOM.

[slvamegestic]

Noted on the above @kumilingus
Please see the simple fiddle I have done regarding removing a Vectorizer line here click here.
I have removed the rect line when clicking it, but I need to append the x icon when hovering over the line. Once the X has been clicked, the line needs to be removed.

Thanks for you time to read this

[kumilingus]

Please see updated jsfiddle.

[slvamegestic]

That's great 👍. My gratitude goes out to you @kumilingus.