gojs - 添加端口控制器

Question

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

对于每个顶部端口，我想添加一个“控制器”项目 - 一个小的可点击矩形，文本旁边，位于每个端口上方约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的visible属性。

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