为每个对象 JointJS 创建一个 ToolElement

我试图为每个对象创建一种工具菜单 - 当您单击或将鼠标悬停在某个元素上时，它会显示可以执行的几个操作：删除、旋转、放大、链接等。

我用过这个question https://stackoverflow.com/questions/30153345/how-to-give-jointjs-elements-a-remove-tool/作为指导方针 - 并且能够在以下工具的帮助下添加和扩展 ToolElement 本身JFiddle http://jsfiddle.net/kj4bqczd/3/.

然而，在那之后我就陷入了链接的功能。我想做的是绿色箭头。当我单击并拖动绿色箭头时，我希望链接开​​始从对象拖动，就像端口一样，仅从对象本身拖动。

我尝试阅读文档，但它没有关于如何从元素中拖动的痕迹。

有一个解决方案，您可以添加magnet : true属性到文本，这样当您单击该对象时 - 拖动它，当您单击文本时，您开始拖动链接。

在下面的另一个解决方案中，我尝试手动将磁铁添加到圆圈中。从视觉上看，它在某种程度上满足了我的需要，但链接的来源始终是那个绿色圆圈，即使它消失了，并且在调用对象 ti 检查链接时，它不会给我这些链接。

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: ...

});

我认为我的底线问题是弄清楚如何使用绿色箭头上的磁铁属性并将其绑定到对象上。

任何帮助，将不胜感激。