Styling the link removal tool

Matt Mahan

unread,

Oct 23, 2015, 8:45:23 PM10/23/15

to JointJS

I really like JointJS's link removal tool (the red circle icon with a x-mark in it that removes the link when clicked). However, the visual design is not consistent with the rest of my web site - my HTML components use a very different icon for their removal button. Is there an easy way to use the removal tool's behavior while supplying my own icon?

David Durman

unread,

Oct 24, 2015, 3:36:22 PM10/24/15

to joi...@googlegroups.com

Yes, it is possible. You can set 'toolMarkup' either on your link models (which is not exactly optimal as that would mean that JSON export will be much bigger) or Globally with joint.dia.Link.prototype.toolMarkup = '[YOUR_SVG_STRING]'

Currently, the 'toolMarkup' is defined as:

toolMarkup: [

'<g class="link-tool">',

'<g class="tool-remove" event="remove">',

'<circle r="11" />',

'<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" />',

'<title>Remove link.</title>',

'</g>',

'<g class="tool-options" event="link:options">',

'<circle r="11" transform="translate(25)"/>',

'<path fill="white" transform="scale(.55) translate(29, -16)" d="M31.229,17.736c0.064-0.571,0.104-1.148,0.104-1.736s-0.04-1.166-0.104-1.737l-4.377-1.557c-0.218-0.716-0.504-1.401-0.851-2.05l1.993-4.192c-0.725-0.91-1.549-1.734-2.458-2.459l-4.193,1.994c-0.647-0.347-1.334-0.632-2.049-0.849l-1.558-4.378C17.165,0.708,16.588,0.667,16,0.667s-1.166,0.041-1.737,0.105L12.707,5.15c-0.716,0.217-1.401,0.502-2.05,0.849L6.464,4.005C5.554,4.73,4.73,5.554,4.005,6.464l1.994,4.192c-0.347,0.648-0.632,1.334-0.849,2.05l-4.378,1.557C0.708,14.834,0.667,15.412,0.667,16s0.041,1.165,0.105,1.736l4.378,1.558c0.217,0.715,0.502,1.401,0.849,2.049l-1.994,4.193c0.725,0.909,1.549,1.733,2.459,2.458l4.192-1.993c0.648,0.347,1.334,0.633,2.05,0.851l1.557,4.377c0.571,0.064,1.148,0.104,1.737,0.104c0.588,0,1.165-0.04,1.736-0.104l1.558-4.377c0.715-0.218,1.399-0.504,2.049-0.851l4.193,1.993c0.909-0.725,1.733-1.549,2.458-2.458l-1.993-4.193c0.347-0.647,0.633-1.334,0.851-2.049L31.229,17.736zM16,20.871c-2.69,0-4.872-2.182-4.872-4.871c0-2.69,2.182-4.872,4.872-4.872c2.689,0,4.871,2.182,4.871,4.872C20.871,18.689,18.689,20.871,16,20.871z"/>',

'<title>Link options.</title>',

'</g>',

'</g>'

].join(''),

You can change it to any SVG you want (or even include the SVG <image/> element if you plan to use raster image instead). Only keep the classes and 'even't attributes so that JointJS knows what to do when these elements are clicked ('link-tool', 'tool-remove', event="remove", 'tool-options', event="link:options").

ᐧ

---

David Durman

client IO

http://client.io

+420 774 346 225

On Sat, Oct 24, 2015 at 2:45 AM, Matt Mahan <mattm...@gmail.com> wrote:

I really like JointJS's link removal tool (the red circle icon with a x-mark in it that removes the link when clicked). However, the visual design is not consistent with the rest of my web site - my HTML components use a very different icon for their removal button. Is there an easy way to use the removal tool's behavior while supplying my own icon?

--

---
You received this message because you are subscribed to the Google Groups "JointJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jointjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Yasachandra Bansal

unread,

Feb 19, 2018, 1:32:24 AM2/19/18

to JointJS

Sorry, I still don't get it.

I am trying the things you just mentioned like this:

joint.dia.Link.prototype.toolMarkup = [

'<g class="link-tool">',

'<g class="tool-remove" event="remove">',

'<circle r="11" />',

'<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" />',

'<title>Remove link.</title>',

'</g>'].join('');

But then I get the error "Invalid XML" inside rappid.min.js in the same code.

Al I want to do is remove the "link options' icon from the link.

Roman Bruckner

unread,

Feb 19, 2018, 8:10:17 AM2/19/18

to joi...@googlegroups.com

Hi,

it seems you are missing a closing SVGGElement tag in your markup. The message you experience says the parser could not read the provided XML (in this case SVG Markup).

joint.dia.Link.prototype.toolMarkup = [

'<g class="link-tool">',

'<g class="tool-remove" event="remove">',

'<circle r="11" />',

'<path transform="scale(.8) translate(-16, -16)" d="M24.778,21.419 19.276,15.917 24.777,10.415 21.949,7.585 16.447,13.087 10.945,7.585 8.117,10.415 13.618,15.917 8.116,21.419 10.946,24.248 16.447,18.746 21.948,24.248z" />',

'<title>Remove link.</title>',

'</g>',

'</g>' // <-- missing

].join('');

Best,

Roman