gojs - 添加端口控制器

Question

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

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

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

这是具有少量端口和控制器的节点的样子（此示例来自Virtools的脚本编辑器）



我如何实施这样的部分？

由于

Answer 1

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

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

实施 Node.linkConnected 和 Node.linkDisconnected 事件处理程序，以计算已连接链接的数量，然后适当设置可见属性TextBlock和虚线Shape。

可编辑文字很自然 - 只需将 TextBlock.editable 设置为true并使用TwoWay绑定。