gojs - 添加端口控制器

Question

我在 go.js 中有一个带有“topArray”的节点模板，它可能包含多个端口，例如 this 示例。

对于每个顶部端口，我想添加一个“控制器”项 - 一个可点击的小矩形，旁边有一个文本，位于每个端口上方约 10 像素处。控制器对象有一些要求：

1. 与其对应的端口（和节点）一起移动
2. 可以向上拖动到其端口上方约 100 像素，向下拖动至其端口上方约 10 像素。然而，应该随着它的节点移动。
3. 不包括在 fromSpot 计算中。端口的 fromSpot 只能是端口 Shape 的顶部尺寸。
4. 当链路连接到端口时 - 控制器消失，但保留其属性。
5. 控制器文本是可编辑的

这是一个带有几个端口和控制器的节点的样子（这个例子来自 Virtools 的脚本编辑器）

如何实现这样的部分？

谢谢

Answer 1

我认为您希望将每个 itemTemplate 实现为包含端口（具有 GraphObject.portId 绑定）和虚线 Shape 和 TextBlock 的 Spot Panel。您需要使包含面板强制项目面板重叠，以便在决定如何将这些项目面板彼此相邻放置时忽略 TextBlock 的宽度。

您将需要调整http://gojs.net/latest/extensions/PortShiftingTool.js，使其适用于那些项目面板中的那些文本块，并且只允许在所需范围内进行垂直移动。该工具还应该调整 TextBlock 和端口 Shape 之间的虚线长度。

实现 Node.linkConnected 和 Node.linkDisconnected 事件处理程序来计算连接的链接数，然后适当地设置 visible 的属性TextBlock 和虚线Shape。

可编辑文本自然而然——只需将 TextBlock.editable 设置为 true 并使用双向绑定。