logo GoJS教程2020 我也要发布文档

流程图控件GoJS教程:工具(上)


GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新试用版

为了灵活和简单,所有输入事件都规范化为InputEvent,并由图重定向到Diagram.currentTool默认情况下,Diagram.currentTool是实例ToolManager举行的Diagram.toolManagerToolManager实现了对所有无模式工具的支持。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();

流程图控件GoJS教程:工具(上)

当对象可调整大小时,通常会尝试通过更新模型数据来记住新的大小,以便以后进行保存和加载。这可以通过在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正版授权的朋友可以咨询慧都官方客服