GoJS中如何组合“可拖拽链接”与“链接到链接”功能?
解决GoJS中拖拽Palette链接后无法被其他链接连接的问题
看起来你已经走对了大部分路,核心问题在于从Palette拖拽到Diagram的链接没有自动创建并关联用于接受连接的LinkLabel节点。当你直接拖拽Palette里的链接时,只会复制链接本身的数据,不会自动生成对应的Label节点,也不会把Label的key添加到链接的labelKeys数组中——而这正是让链接能被其他链接连接的关键。
下面是具体的修复步骤和代码调整:
1. 补充拖拽完成事件监听
在Diagram初始化代码中,添加ExternalObjectsDropped事件监听,当从Palette拖拽链接进来后,自动为需要支持link-to-link的链接创建LinkLabel节点并关联:
// 在你的diagram初始化代码末尾添加这个监听 myDiagram.addDiagramListener("ExternalObjectsDropped", function(e) { // 遍历所有被拖拽进来的元素 e.subject.each(function(part) { // 只处理链接类型的元素 if (part instanceof go.Link) { const link = part; // 针对需要支持link-to-link的链接类别(linkToLink、Marriage) if (link.category === "linkToLink" || link.category === "Marriage") { const linkData = link.data; // 如果链接还没有关联Label节点 if (!linkData.labelKeys || linkData.labelKeys.length === 0) { // 在model事务中修改数据,保证Undo/Redo正常工作 myDiagram.model.commit(function(m) { // 创建LinkLabel节点数据 const labelNodeData = { category: "LinkLabel" }; // 添加节点到model并获取其key const labelKey = m.addNodeData(labelNodeData); // 将Label节点的key绑定到链接的labelKeys数组 m.setLinkDataProperty(linkData, "labelKeys", [labelKey]); }, "add link label for dropped link"); } } } }); });
2. 优化链接模板(可选但推荐)
你的linkToLink模板缺少路由、曲线等配置,建议和其他链接模板保持一致,让拖拽后的链接行为统一:
myDiagram.linkTemplateMap.add("linkToLink", $(go.Link, { relinkableFrom: true, relinkableTo: true, reshapable: true, routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 5, toShortLength: 4 }, new go.Binding('points').makeTwoWay(), $(go.Shape, { stroke: "#2D9945", strokeWidth: 2 }) ) );
修复原理说明
- 当你从Palette拖拽链接时,
ExternalObjectsDropped事件会被触发,我们在事件处理中检查链接类别,为需要支持link-to-link的链接自动创建LinkLabel节点。 - 通过
model.commit包裹修改操作,确保GoJS的数据一致性和Undo/Redo功能正常。 - 把Label节点的key添加到链接的
labelKeys数组后,GoJS会自动将Label节点放置在链接的路径上,其他链接就可以连接到这个Label节点的port上了。
现在你再拖拽linkToLink或Marriage链接到图中,就能看到链接上出现小椭圆的Label节点,其他链接也可以正常连接到这个节点上啦。
内容的提问来源于stack exchange,提问作者FNK
相关产品推荐
相关产品推荐

