流程图控件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 来禁用调整任何零件的大小（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正版授权的朋友可以咨询官方客服

标签：

来源：慧都