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 來禁用調整任何零件的大小（ResizingTool）。
-
在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正版授權的朋友可以
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線