流程圖控件GoJS教程：工具（下）

---

GoJS是一款功能強大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新試用版

旋轉工具

當零件是可旋轉的時，RotatingTool將添加一個裝飾物，該裝飾物包含一個旋轉手柄，該旋轉手柄以距對象角度不遠的距離與對象保持一小段距離。由于默認的GraphObject.angle為零，所以旋轉手柄通常從對象的右側開始。

如果要讓用戶旋轉整個節點，只需將Part.rotatable設置為true。旋轉將設置Node的GraphObject.angle。

  diagram.add(
    $(go.Node, "Auto",
      { rotatable: true, locationSpot: go.Spot.Center },
      $(go.Shape, "RoundedRectangle", { fill: "orange" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));
  diagram.commandHandler.selectAll();

如果希望用戶在節點內旋轉特定對象，則需要命名該對象并分配Part.rotateObjectName。旋轉將設置Part.rotateObject的GraphObject.angle，在這種情況下為Shape的角度。

  diagram.add(
    $(go.Node, "Vertical",
      { rotatable: true, rotateObjectName: "SHAPE",  // rotate the Shape, not the Node
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30 }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

當對象可旋轉時，通常會嘗試通過更新模型數據來記住新角度，以便以后保存和加載該角度。這可以通過在GraphObject.angle屬性上使用TwoWay 綁定來完成。但是請注意，綁定需要在旋轉的實際GraphObject上，而不是在整個Node上。在這種情況下，因為Part.rotateObjectName引用了Shape，這意味著綁定必須位于Shape上。

  diagram.add(
    $(go.Node, "Vertical",
      { rotatable: true, rotateObjectName: "SHAPE",
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30 },
        new go.Binding("angle").makeTwoWay()),  // TwoWay Binding of angle
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

另一種常見的自定義方法是在不旋轉對象（即，其GraphObject.angle為零）時將旋轉手柄置于對象上方。這可以通過將RotatingTool.handleAngle設置為270 來完成。

  diagram.add(
    $(go.Node, "Auto",
      { rotatable: true, locationSpot: go.Spot.Center },
      new go.Binding("angle").makeTwoWay(),  // TwoWay Binding of Node.angle
      $(go.Shape, "RoundedRectangle", { fill: "orange" }),
      $(go.TextBlock, "Hello!", { margin: 5 })
    ));
  diagram.toolManager.rotatingTool.handleAngle = 270;
  diagram.commandHandler.selectAll();

您可以通過設置Part.rotateAdornmentTemplate來定制旋轉手柄。

  diagram.add(
    $(go.Node, "Vertical",
      { rotatable: true, rotateObjectName: "SHAPE",
        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",
        rotateAdornmentTemplate:  // specify appearance of rotation handle
          $(go.Adornment,
            { locationSpot: go.Spot.Center },
            $(go.Shape, "BpmnActivityLoop",
              { width: 12, height: 12, cursor: "pointer",
                background: "transparent", stroke: "dodgerblue", strokeWidth: 2 })),
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30 }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

在sample和extensions目錄中定義了一些示例自定義旋轉工具： Rotate Multiple Tool（在樓層平面圖編輯器中）和 Horizontal Text Rotating Tool（在座位表中）。

重新鏈接工具

當鏈接為Link.relinkableFrom和/或Link.relinkableTo時，RelinkingTool會在所選鏈接的每個可重新鏈接端添加一個或兩個Adornment，即菱形。用戶可以拖動重新鏈接手柄以將鏈接的那一端重新連接到另一個端口。

該RelinkingTool將自動更新節點/端口之間的關系，無論是在圖表和模型中。此類模型更新不需要Binding。

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Rectangle",
        { fill: "lightgray", portId: "", fromLinkable: true, toLinkable: true }),
      $(go.TextBlock, { margin: 5},
        new go.Binding("text", "key"))
    );

  diagram.linkTemplate =
    $(go.Link,
      { relinkableFrom: true, relinkableTo: true },
      $(go.Shape),
      $(go.Shape, { toArrow: "Standard" })
    );

  var nodeDataArray = [
    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Delta" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

  diagram.select(diagram.findLinkForData(linkDataArray[0]));

可以通過設置RelinkingTool.fromHandleArchetype 和RelinkingTool.toHandleArchetype來自定義重新鏈接句柄。當前，無法通過在鏈接上設置屬性來自定義它們。

您可以限制用戶可以繪制新鏈接或重新連接現有鏈接的端口對。鏈接驗證涵蓋了此主題。

---

溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風，做好防護措施！

想要購買GoJS正版授權的朋友可以