文檔首頁>>GoJS教程2020>>流程圖控件GoJS教程：工具（上）

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

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

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

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

預(yù)定義工具

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

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

ToolManager.actionTool，一個ActionTool，允許“按鈕”和其他GraphObject s到從常規(guī)工具抓事件
ToolManager.relinkingTool，一個RelinkingTool，重新連接現(xiàn)有鏈接
ToolManager.linkReshapingTool，一個LinkReshapingTool，用于改變的路線鏈接
ToolManager.resizingTool，一個ResizingTool，用于改變GraphObject.desiredSize一個的部分 A內(nèi)或?qū)ο蟛糠?
ToolManager.rotatingTool，一個RotatingTool，用于改變GraphObject.angle一個的部分 A內(nèi)或?qū)ο蟛糠?

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

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

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

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

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

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

有關(guān)權(quán)限的部分提供了更多詳細信息。

一些常用的設(shè)置屬性包括：

使得能夠經(jīng)由通過雙擊插入部件ClickCreatingTool通過設(shè)置ClickCreatingTool.archetypeNodeData到節(jié)點的數(shù)據(jù)對象。
通過設(shè)置DragSelectingTool.isPartialInclusion來控制DragSelectingTool選擇的零件。
通過設(shè)置LinkingTool.archetypeLinkData來定制LinkingTool繪制新鏈接時復(fù)制的鏈接數(shù)據(jù)。
通過設(shè)置ResizingTool.cellSize， ResizingTool.maxSize或ResizingTool.minSize來限制ResizingTool調(diào)整零件尺寸的方式。
通過設(shè)置RotatingTool.snapAngleEpsilon或 RotatingTool.snapAngleMultiple來限制RotatingTool旋轉(zhuǎn)零件的方式。

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

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

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

  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
      }
    );

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

工具生命周期

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

工具和裝飾品

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

調(diào)整大小工具

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

如果要讓用戶調(diào)整整個節(jié)點的大小，只需將Part.resizable設(shè)置為true。在這種情況下，調(diào)整大小將設(shè)置Node的GraphObject.desiredSize。

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

如果希望用戶在節(jié)點內(nèi)調(diào)整特定對象的大小，則需要命名該對象并分配Part.resizeObjectName。調(diào)整大小將設(shè)置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();

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

  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();

您還可以通過設(shè)置Part.resizeCellSize來將大小調(diào)整為給定大小的倍數(shù)。

  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();

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

當(dāng)對象可調(diào)整大小時，通常會嘗試通過更新模型數(shù)據(jù)來記住新的大小，以便以后進行保存和加載。這可以通過在GraphObject.desiredSize屬性上進行雙向綁定來實現(xiàn)。但是請注意，綁定需要在調(diào)整大小的實際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();

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

  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，因此沒有藍色矩形默認選擇裝飾。

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

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

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服

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

用科技創(chuàng)就卓越

Create excellence with technology