Question

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

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

我尝试混合使用文档中的"Dragabble Link"和"Links to links"示例，主要是在链接面板中添加“ 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 侦听器（或增加您已经拥有的侦听器）以遍历所有新删除的部件，并确保每个链接都有一个标签Node，添加这样的标签节点（如果链接没有链接）。

LinkingTool.archetypeLabelNodeData 仅在用户绘制新链接时指定要复制为新标签Node的节点数据，因此该属性不会覆盖 DraggingTool创建的任何链接。

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

1 个答案: