如何在JointJS中禁用链接上的“删除”操作？

Question

使用JointJS库构建图形，这是一个很好的库，但文档很少。 http://jointjs.com/demos/fsa 如上页面，当鼠标移动到链接上时，链接上会有一个“删除”图标，可以单击该图标删除链接，我想禁用链接上的“删除”操作，请指教。

- Cooper.Wu

Answer 1

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

- dave

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" />'
});

- Ian Horwill

---

这应该是答案。 - Sam

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'
            }
        }
    })
});

- haudoing

Answer 4

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

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

- user3784515

---

我仍然在悬停时看到箭头，有没有办法避免它？谢谢！ - ppareja

希望我的回答中的 .link .mark-errors { display: none; } 能够帮到你。 - Michael Vashchinsky

Answer 5

经过一段时间后，我认为在这篇文章中添加一个更新的答案会很有用。

我们需要做的是将ToolsView定义为链接视图。

const verticesTool = new joint.linkTools.Vertices();
const segmentsTool = new joint.linkTools.Segments();
const sourceArrowheadTool = new joint.linkTools.SourceArrowhead();
const targetArrowheadTool = new joint.linkTools.TargetArrowhead();
const sourceAnchorTool = new joint.linkTools.SourceAnchor();
const targetAnchorTool = new joint.linkTools.TargetAnchor();
const boundaryTool = new joint.linkTools.Boundary();
const removeButton = new joint.linkTools.Remove();

const toolsView = new joint.dia.ToolsView({
    tools: [
        verticesTool, segmentsTool,
        sourceArrowheadTool, targetArrowheadTool,
        sourceAnchorTool, targetAnchorTool,
        boundaryTool, removeButton
    ]
});

接下来，您需要在悬停或离开链接时添加或删除此工具视图；例如如下所示。当然，您可以使用其他逻辑根据需要显示工具视图，而不是在悬停时。

paper.on({
  'blank:mouseover': ()=>{
    paper.removeTools();
  },

  'link:mouseenter': (linkView)=>{
    linkView.addTools(toolsView);
  }
});

为了满足原始问题的要求，我们需要从工具视图中删除"removeButton"。

另外，如果您想覆盖Paper在添加新链接时使用的默认链接，您需要按照以下方式覆盖您的Paper init参数。

new joint.dia.paper({
   defaultLink: function (cellView, magnet) {
        return new joint.shapes.standard.Link();
      },
});

更多信息请参考： [JointJS链接工具] [1]: https://resources.jointjs.com/tutorial/link-tools

- orabis

Answer 6

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

所以：

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

应该这样做。

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

- Michael Vashchinsky