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

---

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

點(diǎn)擊下載GoJS最新試用版

旋轉(zhuǎn)工具

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

如果要讓用戶旋轉(zhuǎn)整個節(jié)點(diǎn)，只需將Part.rotatable設(shè)置為true。旋轉(zhuǎn)將設(shè)置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();

如果希望用戶在節(jié)點(diǎn)內(nèi)旋轉(zhuǎn)特定對象，則需要命名該對象并分配Part.rotateObjectName。旋轉(zhuǎn)將設(shè)置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();

當(dāng)對象可旋轉(zhuǎn)時，通常會嘗試通過更新模型數(shù)據(jù)來記住新角度，以便以后保存和加載該角度。這可以通過在GraphObject.angle屬性上使用TwoWay 綁定來完成。但是請注意，綁定需要在旋轉(zhuǎn)的實(shí)際GraphObject上，而不是在整個Node上。在這種情況下，因?yàn)镻art.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();

另一種常見的自定義方法是在不旋轉(zhuǎn)對象（即，其GraphObject.angle為零）時將旋轉(zhuǎn)手柄置于對象上方。這可以通過將RotatingTool.handleAngle設(shè)置為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();

您可以通過設(shè)置Part.rotateAdornmentTemplate來定制旋轉(zhuǎn)手柄。

  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目錄中定義了一些示例自定義旋轉(zhuǎn)工具： Rotate Multiple Tool（在樓層平面圖編輯器中）和 Horizontal Text Rotating Tool（在座位表中）。

重新鏈接工具

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

該RelinkingTool將自動更新節(jié)點(diǎn)/端口之間的關(guān)系，無論是在圖表和模型中。此類模型更新不需要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]));

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

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

---

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

想要購買GoJS正版授權(quán)的朋友可以