有没有办法将 "Draggable links" 与 "Links to links" 结合起来？

Question

我是 GoJS 的新手，我一直在玩它，我试图在我的图表中 links 可以 linked 到其他 links，同时它们应该在调色板中可用。

这个想法是在调色板中有不同类型的 link（具有不同的颜色和含义），可以拖放到图表中。

我尝试混合文档中的 "Dragabble Link" and "Links to links" 示例，主要是将 "linkToLink" 类别添加到 link 选项板。我可以拖放 link 但中间没有 "LinkLabel" 以允许其他 link。 "labelKeys" 数组属性也是空的。

这是我用于 links 初始化的代码：

diagram.nodeTemplateMap.add("LinkLabel",
  $("Node",
    {
      selectable: false, avoidable: false,
      layerName: "Foreground"
    },
    $("Shape", "Ellipse",
      {
        width: 5, height: 5, stroke: null,
        portId: "", fromLinkable: true, toLinkable: true, cursor: "pointer"
      })
  ));

diagram.linkTemplate = $(
  go.Link, // the whole link panel
  { 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, // the link path shape
    { isPanelMain: true, strokeWidth: 2 },
    new go.Binding('stroke', 'color')
  ),
  $(
    go.Shape, // the arrowhead
    { toArrow: '', stroke: null },
    new go.Binding('fill', 'color')
  )
);

diagram.linkTemplateMap.add(
  'Regular',
  $(
    go.Link, // the whole link panel
    { 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, // the link path shape
      { isPanelMain: true, strokeWidth: 2, stroke: 'black' }
    ),
    $(
      go.Shape, // the arrowhead
      { toArrow: '', stroke: null, fill: 'black' }
    )
  )
);

myDiagram.linkTemplateMap.add("linkToLink",
  $("Link",
    { relinkableFrom: true, relinkableTo: true },
    $("Shape", { stroke: "#2D9945", strokeWidth: 2 }),
    new go.Binding('points').makeTwoWay(),
  ));

diagram.linkTemplateMap.add(
  'Marriage',
  $(
    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,
      { isPanelMain: true, strokeWidth: 2, stroke: 'red' }
    ),
    $(
      go.Shape,
      { toArrow: '', stroke: null, fill: 'red' }
    )
  )
);

diagram.model =
  $(go.GraphLinksModel,
    { linkLabelKeysProperty: "labelKeys" });

diagram.toolManager.linkingTool.archetypeLabelNodeData =
  { category: "LinkLabel" };

这是调色板：

$(
  go.Palette,
  'myPaletteDiv',
  {
    nodeTemplateMap: diagram.nodeTemplateMap,
    linkTemplateMap: diagram.linkTemplateMap,
    model: new go.GraphLinksModel(
      [...],
      [
        {
          category: 'linkToLink',
          points: new go.List().addAll([
            new go.Point(0, 0),
            new go.Point(30, 0),
            new go.Point(30, 40),
            new go.Point(60, 40)
          ])
        },
        {
          category: 'Marriage',
          points: new go.List().addAll([
            new go.Point(0, 0),
            new go.Point(30, 0),
            new go.Point(30, 40),
            new go.Point(60, 40)
          ])
        }
      ]
    )
  }
);

我预计将 "linkToLinks" 或 "Marriage" 拖入图表会显示 links 允许 linked 而不是常规 links。你知道我做错了什么吗？

Answer 1

我认为你应该实现一个 "ExternalObjectsDropped" DiagramEvent 侦听器（或增加你已有的侦听器）来迭代所有新放置的部分并确保每个Link有标签节点，如果Link没有标签节点，则添加这样的标签节点。

LinkingTool.archetypeLabelNodeData只是在用户绘制新的Link时指定要复制的节点数据作为新标签Node，所以属性不涵盖由 DraggingTool.

创建的任何 Link

有没有办法将 "Draggable links" 与 "Links to links" 结合起来？

Is there a way to combine "Draggable links" with "Links to links"?

gojs