流程圖控件GoJS教程：工具（上）
GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。
為了靈活和簡單，所有輸入事件都規(guī)范化為InputEvent，并由圖重定向到Diagram.currentTool。默認(rèn)情況下，Diagram.currentTool是實(shí)例ToolManager舉行的Diagram.toolManager。ToolManager實(shí)現(xiàn)了對所有無模式工具的支持。ToolManager負(fù)責(zé)查找準(zhǔn)備運(yùn)行的另一個工具，然后使其成為新的當(dāng)前工具。這將導(dǎo)致新工具處理所有輸入事件（鼠標(biāo)，鍵盤和觸摸），直到該工具確定完成輸入為止，此時該圖的當(dāng)前工具將返回到Diagram.defaultTool，通常是ToolManager，再次。
盡管術(shù)語中包括“鼠標(biāo)”一詞，但通常同時指鼠標(biāo)事件和觸摸事件。
預(yù)定義工具
每個圖都有大多數(shù)工具類的實(shí)例，所有類均由圖的ToolManager管理。如果要更改交互行為，在很多常見情況下，可以通過在Diagram，Part或單個GraphObject上設(shè)置屬性來進(jìn)行更改。但更一般而言，您可能需要修改一個或多個工具，這些工具可以作為Diagram.toolManager的屬性進(jìn)行訪問。
某些工具希望在鼠標(biāo)按下時運(yùn)行。這些工具包括：
- 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ū)ο蟛糠?
一些工具希望在鼠標(biāo)向下移動后發(fā)生鼠標(biāo)移動時運(yùn)行。這些工具包括：
- ToolManager.linkingTool，一個LinkingTool，繪制了新的鏈接
- ToolManager.draggingTool（一個DraggingTool），用于移動或復(fù)制選定的Part。
- ToolManager.dragSelectingTool，一個DragSelectingTool，對于一些的橡膠頻帶選擇部分是個矩形區(qū)域內(nèi)
- ToolManager.panningTool，一個PanningTool，搖攝/滾動圖
某些工具只希望在鼠標(biāo)按下后在鼠標(biāo)按下事件時運(yùn)行。這些工具包括：
- ToolManager.contextMenuTool，一個ContextMenuTool，用于顯示GraphObject的上下文菜單
- ToolManager.textEditingTool，一個TextEditingTool，用于在選定Part中就地編輯TextBlock。
- ToolManager.clickCreatingTool，一個ClickCreatingTool，插入一個新的部分，當(dāng)用戶點(diǎn)擊
- ToolManager.clickSelectingTool，一個ClickSelectingTool，選擇或取消選擇部分
要更改工具的行為，您可以在工具，圖表，特定零件或特定GraphObject上設(shè)置屬性。
- 例如，要禁用橡皮筋選擇工具（DragSelectingTool），請?jiān)O(shè)置 diagram.toolManager.dragSelectingTool.isEnabled = false;。
- 您可以通過設(shè)置Part.selectionAdornmentTemplate來更改所選零件的外觀（實(shí)際上是其選擇裝飾）。（有關(guān)更多討論，請參見選擇。）
- 通過在節(jié)點(diǎn)的端口對象上設(shè)置GraphObject.fromLinkable和GraphObject.toLinkable，可以使用戶以交互方式繪制新鏈接（LinkingTool）。
- 您可以禁用部分（運(yùn)動DraggingTool通過設(shè)置），包括節(jié)點(diǎn)和組，Part.movable為false。
- 您可以通過設(shè)置Part.minLocation和/或Part.maxLocation來限制Part的移動。對于更一般的限制，請將Part.dragComputation設(shè)置為計(jì)算所需新位置的函數(shù)。
- 您可以通過將Diagram.allowResize設(shè)置為false 來禁用調(diào)整任何零件的大小（ResizingTool）。
- 在ToolTips中討論了由ToolManager實(shí)現(xiàn)的工具提示。
- 在Context Menus中討論了由ContextMenuTool實(shí)現(xiàn)的上下文菜單。
有關(guān)權(quán)限的部分提供了更多詳細(xì)信息。
一些常用的設(shè)置屬性包括：
- 使得能夠經(jīng)由通過雙擊插入部件ClickCreatingTool通過設(shè)置ClickCreatingTool.archetypeNodeData到節(jié)點(diǎn)的數(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)零件的方式。
請記住，所有單獨(dú)的工具都可以通過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收到某些輸入事件的警報(bào)并開始搜索相關(guān)的工具列表時（即，如果注冊了鼠標(biāo)按下事件，ToolManager將開始搜索其ToolManager.mouseDownTools列表），您可以將這一周期視為“開始” 。下面是代表工具一般生命周期的圖表。
裝飾的作用不僅僅表示已選擇零件。ToolManager.mouseDownTools列表中的每個工具（換句話說，任何以鼠標(biāo)按下或手指按下事件啟動的無模式工具）都有機(jī)會根據(jù)自己的目的添加自己的裝飾物已選擇。
調(diào)整大小工具
當(dāng)一個部分是可調(diào)整大小的，則ResizingTool增加了一個裝飾品包含八個大小調(diào)整手柄，四拐角處，四在雙方的中段。
如果要讓用戶調(diào)整整個節(jié)點(diǎn)的大小，只需將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é)點(diǎn)內(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();
當(dāng)對象可調(diào)整大小時，通常會嘗試通過更新模型數(shù)據(jù)來記住新的大小，以便以后進(jìn)行保存和加載。這可以通過在GraphObject.desiredSize屬性上進(jìn)行雙向綁定來實(shí)現(xiàn)。但是請注意，綁定需要在調(diào)整大小的實(shí)際GraphObject上，而不是在整個Node上。在這種情況下，因?yàn)镻art.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é)點(diǎn)中Shape的寬度，裝飾物應(yīng)僅具有兩個調(diào)整大小手柄：一個在左側(cè)，一個在右側(cè)。裝飾物被實(shí)現(xiàn)為一個聚光燈面板，該聚光燈圍繞著占位符（代表裝飾的形狀）和兩個矩形藍(lá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，因此沒有藍(lán)色矩形默認(rèn)選擇裝飾。
在示例和擴(kuò)展目錄中定義了一些自定義大小調(diào)整工具的示例： 多重大小調(diào)整工具（在樓層平面圖編輯器中）， 車道大小調(diào)整工具（在泳道中）和 車道大小調(diào)整工具（在垂直泳道中）。
溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風(fēng)，做好防護(hù)措施！
想要購買GoJS正版授權(quán)的朋友可以
QQ交談
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線