Creating a ToolElement for every object JointJS

问题

I am trying to create a sort of a Tool menu for every object - when you click or hover over an element, it shows several actions that could be done: delete, rotate, enlarge, link, etc.

I have used this question as the guideline - and was able to add and extend the ToolElement itself, with the help of the JFiddle.

However, after that I got stuck on the functionality of linking. What I want to do is the green arrow. And when I click and drag the green arrow, I want the link to start dragging from the object, just like a port, only from the object itself.

I tried reading the documentation, but it had no traces of how to drag from the element.

There was a solution where you could add the magnet : true attribute to text, and that way when you click on the object - you drag it, and when you click on the text, you start dragging the link.

In another solution below, I tried manually adding the magnet to the circle. Visually, it somewhat does what I need, but source of the link is always that green circle, even when it disappears, and when calling the object ti check for links, it does not give me those links.

joint.shapes.tm.toolElement = joint.shapes.basic.Generic.extend({

    toolMarkup: ['<g class="element-tools">',
        '<g class="element-tool-remove"><circle fill="red" 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 this element from the model</title>',
        '</g>',

        '<g class="element-tool-link"><circle magnet="true" fill="green" r="11" cx="25" />',
        '<path transform="scale(.8) translate(15, -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>Link element</title>',
        '</g>',

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

   defaults: ...

});

I think my bottomline question is to figure out how to use the magnet property on the green arrow and tie it to the object.

Any help would be appreciated.

来源：https://stackoverflow.com/questions/30504323/creating-a-toolelement-for-every-object-jointjs

标签

javascript

jquery

jointjs