增强GoJs节点绘图模板：拖拽、复制、粘贴、多端口连接和手动连线

2023-09-30 16:35:13

GoJs节点绘图模板拓展

引言

在现代网络应用程序开发中，图形化界面扮演着至关重要的角色，可以帮助用户直观地理解复杂信息。GoJs是一个强大的JavaScript库，它能够创建交互式的图表，包括节点和连线。对于需要在网页中展示复杂流程和结构的应用程序，GoJs是一个理想的选择。

拓展

本文档介绍了对GoJs节点绘图模板的拓展，重点在于增强节点操作功能，包括拖拽、复制、粘贴、多端口连接以及手动连线。这些拓展将为开发者提供更丰富的工具，以创建更复杂且实用的GoJs图表。

拖拽

拖拽操作是图表中常见的功能，它允许用户通过鼠标拖拽节点来改变其位置。GoJs内置了拖拽功能，可以通过设置isDraggable属性为true来启用。

在我们的拓展中，我们增强了拖拽功能，使其可以同时拖拽多个节点。这可以通过设置dragManager.isMultipleSelectionDraggingEnabled属性为true来实现。此外，我们还添加了限制节点移动范围的功能，可以通过设置dragManager.isConstrainDragToContainer属性为true来启用。

复制、粘贴

复制和粘贴操作在编辑图表时非常有用。GoJs提供了复制和粘贴功能，可以通过调用commandHandler.copySelection和commandHandler.pasteSelection方法来实现。

我们的拓展对复制和粘贴功能进行了改进，使其支持复制和粘贴带有连线的节点组。这可以通过设置commandHandler.isCutCopyPasteIncludeLinks属性为true来实现。

多端口连接

在某些情况下，需要连接多个节点到同一个端口。GoJs内置了多端口连接功能，可以通过设置linkTemplate.portId属性为一个数组来实现。

我们的拓展在此基础上，提供了手动连接多端口的功能。这可以通过使用Diagram.linkRelinkingTool工具来实现。该工具允许用户通过鼠标拖拽来连接两个节点的端口。

手动连线

除了使用模板定义的自动连线，GoJs还支持手动连线功能。这可以通过使用Diagram.connectionDrawingTool工具来实现。该工具允许用户通过鼠标拖拽来手动绘制连线。

我们的拓展增强了手动连线功能，使其支持多选连线。这可以通过设置connectionDrawingTool.isMultipleSelectionEnabled属性为true来实现。此外，我们还添加了限制连线范围的功能，可以通过设置connectionDrawingTool.isConstrainConnectionToContainer属性为true来启用。

总结

示例

以下是一个使用我们的拓展创建的交互式GoJs图表示例：

// 创建GoJs图实例
var myDiagram = go.Diagram.create('myDiagramDiv', {
  ...
});

// 启用拖拽、复制、粘贴功能
myDiagram.allowDrop = true;
myDiagram.commandHandler.isCutCopyPasteIncludeLinks = true;

// 启用多端口连接功能
myDiagram.linkTemplate.portId = ['fromPort', 'toPort'];
myDiagram.toolManager.linkRelinkingTool.isEnabled = true;

// 启用手动连线功能
myDiagram.toolManager.connectionDrawingTool.isMultipleSelectionEnabled = true;
myDiagram.toolManager.connectionDrawingTool.isConstrainConnectionToContainer = true;

// ...