有没有办法将“可拖动链接”与“链接到链接”组合在一起？

Question

我是GoJS的新手，我一直在玩它，我试图在图中添加可以链接到其他链接的链接，同时它们应该在面板中可用。

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

我尝试混合使用文档中的“ Dragabble链接”和“链接到链接”示例，主要是在链接面板中添加“ linkToLink”类别。 我可以拖放链接，但中间没有允许其他链接的“ LinkLabel”。 同样，“ labelKeys”数组属性为空。

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

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”拖动到图中将显示允许链接的链接，而不是常规链接。 你知道我在做什么错吗？

Answer 1

我认为您应该实现一个“ ExternalObjectsDropped” DiagramEvent侦听器（或增加一个已有的），以遍历所有新放置的部件，并确保每个链接都有一个标签节点，如果一个链接没有，则添加这样的标签节点有一个。

该LinkingTool.archetypeLabelNodeData只是指定当用户绘制一个新的连接节点的数据被复制为一个新的标签节点，使物业不包括由DraggingTool创建的任何链接。