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

---

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

點擊下載GoJS最新試用版

為了靈活和簡單，所有輸入事件都規范化為InputEvent，并由圖重定向到Diagram.currentTool。默認情況下，Diagram.currentTool是實例ToolManager舉行的Diagram.toolManager。ToolManager實現了對所有無模式工具的支持。ToolManager負責查找準備運行的另一個工具，然后使其成為新的當前工具。這將導致新工具處理所有輸入事件（鼠標，鍵盤和觸摸），直到該工具確定完成輸入為止，此時該圖的當前工具將返回到Diagram.defaultTool，通常是ToolManager，再次。

盡管術語中包括“鼠標”一詞，但通常同時指鼠標事件和觸摸事件。

預定義工具

每個圖都有大多數工具類的實例，所有類均由圖的ToolManager管理。如果要更改交互行為，在很多常見情況下，可以通過在Diagram，Part或單個GraphObject上設置屬性來進行更改。但更一般而言，您可能需要修改一個或多個工具，這些工具可以作為Diagram.toolManager的屬性進行訪問。

某些工具希望在鼠標按下時運行。這些工具包括：

• ToolManager.actionTool，一個ActionTool，允許“按鈕”和其他GraphObject s到從常規工具抓事件
• ToolManager.relinkingTool，一個RelinkingTool，重新連接現有鏈接
• ToolManager.linkReshapingTool，一個LinkReshapingTool，用于改變的路線鏈接
• ToolManager.resizingTool，一個ResizingTool，用于改變GraphObject.desiredSize一個的部分 A內或對象部分
• ToolManager.rotatingTool，一個RotatingTool，用于改變GraphObject.angle一個的部分 A內或對象部分

一些工具希望在鼠標向下移動后發生鼠標移動時運行。這些工具包括：

• ToolManager.linkingTool，一個LinkingTool，繪制了新的鏈接
• ToolManager.draggingTool（一個DraggingTool），用于移動或復制選定的Part。
• ToolManager.dragSelectingTool，一個DragSelectingTool，對于一些的橡膠頻帶選擇部分是個矩形區域內
• ToolManager.panningTool，一個PanningTool，搖攝/滾動圖

某些工具只希望在鼠標按下后在鼠標按下事件時運行。這些工具包括：

• ToolManager.contextMenuTool，一個ContextMenuTool，用于顯示GraphObject的上下文菜單
• ToolManager.textEditingTool，一個TextEditingTool，用于在選定Part中就地編輯TextBlock。
• ToolManager.clickCreatingTool，一個ClickCreatingTool，插入一個新的部分，當用戶點擊
• ToolManager.clickSelectingTool，一個ClickSelectingTool，選擇或取消選擇部分

要更改工具的行為，您可以在工具，圖表，特定零件或特定GraphObject上設置屬性。

• 例如，要禁用橡皮筋選擇工具（DragSelectingTool），請設置 diagram.toolManager.dragSelectingTool.isEnabled = false;。
• 您可以通過設置Part.selectionAdornmentTemplate來更改所選零件的外觀（實際上是其選擇裝飾）。（有關更多討論，請參見選擇。）
• 通過在節點的端口對象上設置GraphObject.fromLinkable和GraphObject.toLinkable，可以使用戶以交互方式繪制新鏈接（LinkingTool）。
• 您可以禁用部分（運動DraggingTool通過設置），包括節點和組，Part.movable為false。
• 您可以通過設置Part.minLocation和/或Part.maxLocation來限制Part的移動。對于更一般的限制，請將Part.dragComputation設置為計算所需新位置的函數。
• 您可以通過將Diagram.allowResize設置為false 來禁用調整任何零件的大?。≧esizingTool）。
• 在ToolTips中討論了由ToolManager實現的工具提示。
• 在Context Menus中討論了由ContextMenuTool實現的上下文菜單。

有關權限的部分提供了更多詳細信息。

一些常用的設置屬性包括：

• 使得能夠經由通過雙擊插入部件ClickCreatingTool通過設置ClickCreatingTool.archetypeNodeData到節點的數據對象。
• 通過設置DragSelectingTool.isPartialInclusion來控制DragSelectingTool選擇的零件。
• 通過設置LinkingTool.archetypeLinkData來定制LinkingTool繪制新鏈接時復制的鏈接數據。
• 通過設置ResizingTool.cellSize， ResizingTool.maxSize或ResizingTool.minSize來限制ResizingTool調整零件尺寸的方式。
• 通過設置RotatingTool.snapAngleEpsilon或 RotatingTool.snapAngleMultiple來限制RotatingTool旋轉零件的方式。

請記住，所有單獨的工具都可以通過Diagram.toolManager獲得。例如，啟用ClickCreatingTool：

  myDiagram.toolManager.clickCreatingTool.archetypeNodeData =
    { key: "Node", text: "some description", color: "green" };

您還可以在使用GraphObject.make定義圖時設置工具屬性：

  var diagram =
    $(go.Diagram, "myDiagramDiv",
      {
        allowCopy: false,
        "grid.visible": true,
        "grid.gridCellSize": new go.Size(30, 20),
        "clickCreatingTool.archetypeNodeData":  // a node data JavaScript object
          { key: "Node", text: "some description", color: "green" },
        "dragSelectingTool.box":  // an unbound Part
          $(go.Part, { layerName: "Tool" },
            $(go.Shape, { name: "SHAPE", fill: null, stroke: "blue", strokeWidth: 3 }) ),
        "draggingTool.isGridSnapEnabled": true,
        "linkReshapingTool.handleArchetype":  // a GraphObject that is copied for each handle
          $(go.Shape, { width: 10, height: 10, fill: "yellow" }),
        "resizingTool.isGridSnapEnabled": true,
        "rotatingTool.snapAngleMultiple": 90,
        "rotatingTool.snapAngleEpsilon": 45
      }
    );

目前，用于在預定義子對象上設置屬性的語法僅適用于Diagram類。

工具生命周期

雖然GoJS中的每個預構建工具都有不同的用途，但可以保證所有工具都共享某些功能和屬性。所有工具共享一個通用的“生命周期”，即這些通用功能的調用順序。當ToolManager收到某些輸入事件的警報并開始搜索相關的工具列表時（即，如果注冊了鼠標按下事件，ToolManager將開始搜索其ToolManager.mouseDownTools列表），您可以將這一周期視為“開始” 。下面是代表工具一般生命周期的圖表。

工具和裝飾品

裝飾的作用不僅僅表示已選擇零件。ToolManager.mouseDownTools列表中的每個工具（換句話說，任何以鼠標按下或手指按下事件啟動的無模式工具）都有機會根據自己的目的添加自己的裝飾物已選擇。

調整大小工具

當一個部分是可調整大小的，則ResizingTool增加了一個裝飾品包含八個大小調整手柄，四拐角處，四在雙方的中段。

如果要讓用戶調整整個節點的大小，只需將Part.resizable設置為true。在這種情況下，調整大小將設置Node的GraphObject.desiredSize。

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

如果希望用戶在節點內調整特定對象的大小，則需要命名該對象并分配Part.resizeObjectName。調整大小將設置Part.resizeObject的GraphObject.desiredSize，在這種情況下為Shape的期望尺寸。

  diagram.add(
    $(go.Node, "Vertical",
      { resizable: true, resizeObjectName: "SHAPE",  // resize the Shape, not the Node
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30 }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

您可以通過設置GraphObject.maxSize和GraphObject.minSize來限制調整大小后的對象的最小和最大大小 。請注意，這些GraphObject屬性是在Part.resizeObject上設置的，而不是在Part本身上設置的。

  diagram.add(
    $(go.Node, "Vertical",
      { resizable: true, resizeObjectName: "SHAPE",
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30,
          // limit size by setting or binding maxSize and/or minSize
          maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20) }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

您還可以通過設置Part.resizeCellSize來將大小調整為給定大小的倍數。

  diagram.add(
    $(go.Node, "Vertical",
      { resizable: true, resizeObjectName: "SHAPE",
        resizeCellSize: new go.Size(10, 10),  // new size will be multiples of resizeCellSize
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30,
          maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20) }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

當對象可調整大小時，通常會嘗試通過更新模型數據來記住新的大小，以便以后進行保存和加載。這可以通過在GraphObject.desiredSize屬性上進行雙向綁定來實現。但是請注意，綁定需要在調整大小的實際GraphObject上，而不是在整個Node上。在這種情況下，因為Part.resizeObjectName引用了Shape，這意味著綁定必須位于Shape上。

  diagram.add(
    $(go.Node, "Vertical",
      { resizable: true, resizeObjectName: "SHAPE",
        selectionObjectName: "SHAPE" },
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30 },
        // TwoWay Binding of the desiredSize
        new go.Binding("desiredSize", "size", go.Size.parse).makeTwoWay(go.Size.stringify)),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

您可以通過設置Part.resizeAdornmentTemplate來自定義大小調整手柄。例如，要允許用戶僅更改節點中Shape的寬度，裝飾物應僅具有兩個調整大小手柄：一個在左側，一個在右側。裝飾物被實現為一個聚光燈面板，該聚光燈圍繞著占位符（代表裝飾的形狀）和兩個矩形藍色形狀（每個代表一個手柄）圍繞著占位符。在裝飾形狀上方還有一個TextBlock，顯示了該形狀的當前寬度。

  diagram.add(
    $(go.Node, "Vertical",
      { resizable: true, resizeObjectName: "SHAPE",
        resizeAdornmentTemplate:  // specify what resize handles there are and how they look
          $(go.Adornment, "Spot",
            $(go.Placeholder),  // takes size and position of adorned object
            $(go.Shape, "Circle",  // left resize handle
              { alignment: go.Spot.Left, cursor: "col-resize",
                desiredSize: new go.Size(9, 9), fill: "lightblue", stroke: "dodgerblue" }),
            $(go.Shape, "Circle",  // right resize handle
              { alignment: go.Spot.Right, cursor: "col-resize",
                desiredSize: new go.Size(9, 9), fill: "lightblue", stroke: "dodgerblue" }),
            $(go.TextBlock, // show the width as text
              { alignment: go.Spot.Top, alignmentFocus: new go.Spot(0.5, 1, 0, -2),
                stroke: "dodgerblue" },
              new go.Binding("text", "adornedObject",
                             function(shp) { return shp.naturalBounds.width.toFixed(0); })
                  .ofObject())
          ),
        selectionAdorned: false },  // don't show selection Adornment, a rectangle
      $(go.Shape, "RoundedRectangle",
        { name: "SHAPE", fill: "orange", width: 50, height: 30,
          maxSize: new go.Size(100, 40), minSize: new go.Size(20, 20) }),
      $(go.TextBlock, "Hello!", { margin: 3 })
    ));
  diagram.commandHandler.selectAll();

還要注意，由于Part.selectionAdorned為false，因此沒有藍色矩形默認選擇裝飾。

在示例和擴展目錄中定義了一些自定義大小調整工具的示例： 多重大小調整工具（在樓層平面圖編輯器中）， 車道大小調整工具（在泳道中）和 車道大小調整工具（在垂直泳道中）。

---

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

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