html - 如何禁用对jointjs链接的“删除”操作？

Question

使用jointjs库建图，是一个文档很少的好库。

http://jointjs.com/demos/fsa 如上页，当鼠标在链接上移动时，链接上有一个“删除”图标，可以点击删除链接，我想禁用链接上的“删除”操作? 请指教。

Answer 1

最简单的方法是.link-tools .tool-remove { display: none }在你的 CSS 中设置。

Answer 2

您可以修改用于显示链接的标记。该文档列出了所有标记元素。只有“连接”是强制性的。

<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />

例如，以下创建的链接只有一个结束标记和标签，没有工具或悬停轮廓：

var MyLink = joint.dia.Link.extend({
    markup: '<path class="connection"/><path class="marker-target"/><g class="labels" />'
});

Answer 3

这是我在jointjs 1.0.2版上修改这部分css的替代方法。

这个技巧的好处是我们可以有不同风格的不同链接，它也更灵活。

var link = new joint.dia.Link({
    // other attributes 
    attrs: {
    //other attributes
        '.link-tools': {
            display: 'none'
        }
    }
});

我们也可以在论文中将其设置为默认值，这是另一个示例：

var paper  = new joint.dia.Paper({
    // other configs..
    defaultLink: new joint.dia.Link({
        attrs: {
            //other attributes
            '.link-tools': {
                display: 'none'
            }
        }
    })
});

Answer 4

正如 Dave 所指出的，它是在 css 中完成的，但您需要为选项添加额外的内容。CSS的条目是：

.link-tools .tool-remove { display: none }
.link-tools .tool-options { display: none }

Answer 5

我看到箭头有一个带有类的g元素。marker-arrowheads

所以：

.link .marker-arrowheads { display: none; }

应该这样做。

请注意，还有一个带有marker-vertices类的元素。