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

---

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

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

旋轉(zhuǎn)工具

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

如果要讓用戶旋轉(zhuǎn)整個(gè)節(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)特定對(duì)象，則需要命名該對(duì)象并分配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)對(duì)象可旋轉(zhuǎn)時(shí)，通常會(huì)嘗試通過更新模型數(shù)據(jù)來記住新角度，以便以后保存和加載該角度。這可以通過在GraphObject.angle屬性上使用TwoWay 綁定來完成。但是請注意，綁定需要在旋轉(zhuǎn)的實(shí)際GraphObject上，而不是在整個(gè)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)對(duì)象（即，其GraphObject.angle為零）時(shí)將旋轉(zhuǎn)手柄置于對(duì)象上方。這可以通過將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時(shí)，RelinkingTool會(huì)在所選鏈接的每個(gè)可重新鏈接端添加一個(gè)或兩個(gè)Adornment，即菱形。用戶可以拖動(dòng)重新鏈接手柄以將鏈接的那一端重新連接到另一個(gè)端口。

該RelinkingTool將自動(dòng)更新節(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)有鏈接的端口對(duì)。鏈接驗(yàn)證涵蓋了此主題。

---

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

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