GoJS限制出站链接数

时间:2017-09-29 11:56:50

标签: gojs

我们正在使用GoJS to draw workflows

我想限制来自"步骤"的链接数量。 1和1" IF"到2。

enter image description here

例如,我试过这个(对于start元素,只允许一个退出链接):

    myDiagram.nodeTemplateMap.add("Start",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto", {toMaxLinks: 1},
      $(go.Shape, "Circle",
        { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
      $(go.TextBlock, "Start",
        { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:
    makePort("L", go.Spot.Left, true, false),
    makePort("R", go.Spot.Right, true, false),
    makePort("B", go.Spot.Bottom, true, false)
  ));

但它忽略了我。

我也试过这个变种:

    myDiagram.nodeTemplateMap.add("Start",
  $(go.Node, "Spot", nodeStyle(),
    $(go.Panel, "Auto", 
      $(go.Shape, "Circle", {toMaxLinks: 1},
        { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null }),
      $(go.TextBlock, "Start",
        { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:
    makePort("L", go.Spot.Left, true, false),
    makePort("R", go.Spot.Right, true, false),
    makePort("B", go.Spot.Bottom, true, false)
  ));

我能够做的是为每个端口设置fromMaxLinks为1,这很好(但不足以满足我的需要):

    function makePort(name, spot, output, input) {
  // the port is basically just a small circle that has a white stroke when it is made visible
  return $(go.Shape, "Circle",
           {
              fill: "transparent",
              stroke: null,  // this is changed to "white" in the showPorts function
              desiredSize: new go.Size(8, 8),
              alignment: spot, alignmentFocus: spot,  // align the port on the main Shape
              portId: name,  // declare this object to be a "port"
              fromSpot: spot, toSpot: spot,  // declare where links may connect at this port
              fromLinkable: output, toLinkable: input,  // declare whether the user may draw links to/from here
              cursor: "pointer",  // show a different cursor to indicate potential link point
              fromMaxLinks: 1, // Limits the number of links coming out of this port
           });
}

在这里,我尝试过"疯狂模式"在所有级别设置属性:

    myDiagram.nodeTemplateMap.add("Start",
  $(go.Node, "Spot", nodeStyle(), {fromMaxLinks: 1},
    $(go.Panel, "Auto", {fromMaxLinks: 1},

      $(go.Shape, "Circle", {fromMaxLinks: 1},
        { minSize: new go.Size(40, 40), fill: "#79C900", stroke: null, fromMaxLinks: 1 }),
      $(go.TextBlock, "Start",
        { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: lightText },
        new go.Binding("text"))
    ),
    // three named ports, one on each side except the top, all output only:
    makePort("L", go.Spot.Left, true, false),
    makePort("R", go.Spot.Right, true, false),
    makePort("B", go.Spot.Bottom, true, false)
  ));

我认为我不得不use the doNotLink method

1 个答案:

答案 0 :(得分:0)

好的,我明白了。我必须执行自定义验证:

myDiagram.nodeTemplateMap.add("Start",
      $(go.Node, "Spot", nodeStyle(), {
          linkValidation: function(fromNode, fromGraphObject, toNode, toGraphObject, link){
                            return performLinkValidation(fromNode, fromGraphObject, toNode, toGraphObject, link, 1)
                        }
                    },
        $(go.Panel, "Auto",
          $(go.Shape, "Circle",
            { minSize: new go.Size(40, 40), fill: "#55ccFF", stroke: null }),
          $(go.TextBlock, "Start",
            { font: "bold 9pt Helvetica, Arial, sans-serif", stroke: lightText },
            new go.Binding("text"))
        ),
        // three named ports, one on each side except the top, all output only:
        makePort("L", go.Spot.Left, true, false),
        makePort("R", go.Spot.Right, true, false),
        makePort("B", go.Spot.Bottom, true, false)
      ));

    function performLinkValidation(fromNode, fromGraphObject, toNode, toGraphObject, link, maxOutboundLinks){
        var childrenLinks = fromNode.findTreeChildrenLinks();
            if (childrenLinks.count>maxOutboundLinks-1){
              return false;
            } else {
              return true;
            }
        }
相关问题