流程图控件GoJS教程：工具（下）

工具处理所有输入事件。有许多种预定义的工具类可以实现用户执行的所有常见操作。

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

GoJS最新试用版

旋转工具

当零件是可旋转的时，RotatingTool将添加一个装饰物，该装饰物包含一个旋转手柄，该旋转手柄以距对象角度不远的距离与对象保持一小段距离。由于默认的GraphObject.angle为零，所以旋转手柄通常从对象的右侧开始。

如果要让用户旋转整个节点，只需将Part.rotatable设置为true。旋转将设置Node的GraphObject.angle。

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

如果希望用户在节点内旋转特定对象，则需要命名该对象并分配Part.rotateObjectName。旋转将设置Part.rotateObject的GraphObject.angle，在这种情况下为Shape的角度。

  diagram.add(    $(go.Node, "Vertical",      { rotatable: true, rotateObjectName: "SHAPE",  // rotate the Shape, not the Node        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",        selectionObjectName: "SHAPE" },      $(go.Shape, "RoundedRectangle",        { name: "SHAPE", fill: "orange", width: 50, height: 30 }),      $(go.TextBlock, "Hello!", { margin: 3 })    ));  diagram.commandHandler.selectAll();

当对象可旋转时，通常会尝试通过更新模型数据来记住新角度，以便以后保存和加载该角度。这可以通过在GraphObject.angle属性上使用TwoWay 绑定来完成。但是请注意，绑定需要在旋转的实际GraphObject上，而不是在整个Node上。在这种情况下，因为Part.rotateObjectName引用了Shape，这意味着绑定必须位于Shape上。

  diagram.add(    $(go.Node, "Vertical",      { rotatable: true, rotateObjectName: "SHAPE",        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",        selectionObjectName: "SHAPE" },      $(go.Shape, "RoundedRectangle",        { name: "SHAPE", fill: "orange", width: 50, height: 30 },        new go.Binding("angle").makeTwoWay()),  // TwoWay Binding of angle      $(go.TextBlock, "Hello!", { margin: 3 })    ));  diagram.commandHandler.selectAll();

另一种常见的自定义方法是在不旋转对象（即，其GraphObject.angle为零）时将旋转手柄置于对象上方。这可以通过将RotatingTool.handleAngle设置为270 来完成。

  diagram.add(    $(go.Node, "Auto",      { rotatable: true, locationSpot: go.Spot.Center },      new go.Binding("angle").makeTwoWay(),  // TwoWay Binding of Node.angle      $(go.Shape, "RoundedRectangle", { fill: "orange" }),      $(go.TextBlock, "Hello!", { margin: 5 })    ));  diagram.toolManager.rotatingTool.handleAngle = 270;  diagram.commandHandler.selectAll();

您可以通过设置Part.rotateAdornmentTemplate来定制旋转手柄。

  diagram.add(    $(go.Node, "Vertical",      { rotatable: true, rotateObjectName: "SHAPE",        locationSpot: go.Spot.Center, locationObjectName: "SHAPE",        rotateAdornmentTemplate:  // specify appearance of rotation handle          $(go.Adornment,            { locationSpot: go.Spot.Center },            $(go.Shape, "BpmnActivityLoop",              { width: 12, height: 12, cursor: "pointer",                background: "transparent", stroke: "dodgerblue", strokeWidth: 2 })),        selectionObjectName: "SHAPE" },      $(go.Shape, "RoundedRectangle",        { name: "SHAPE", fill: "orange", width: 50, height: 30 }),      $(go.TextBlock, "Hello!", { margin: 3 })    ));  diagram.commandHandler.selectAll();

重新链接工具

当链接为Link.relinkableFrom和/或Link.relinkableTo时，RelinkingTool会在所选链接的每个可重新链接端添加一个或两个Adornment，即菱形。用户可以拖动重新链接手柄以将链接的那一端重新连接到另一个端口。

该RelinkingTool将自动更新节点/端口之间的关系，无论是在图表和模型中。此类模型更新不需要Binding。

  diagram.nodeTemplate =    $(go.Node, "Auto",      $(go.Shape, "Rectangle",        { fill: "lightgray", portId: "", fromLinkable: true, toLinkable: true }),      $(go.TextBlock, { margin: 5},        new go.Binding("text", "key"))    );  diagram.linkTemplate =    $(go.Link,      { relinkableFrom: true, relinkableTo: true },      $(go.Shape),      $(go.Shape, { toArrow: "Standard" })    );  var nodeDataArray = [    { key: "Alpha" }, { key: "Beta" }, { key: "Gamma" }, { key: "Delta" }  ];  var linkDataArray = [    { from: "Alpha", to: "Delta" }  ];  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);  diagram.select(diagram.findLinkForData(linkDataArray[0]));

可以通过设置RelinkingTool.fromHandleArchetype 和RelinkingTool.toHandleArchetype来自定义重新链接句柄。当前，无法通过在链接上设置属性来自定义它们。

您可以限制用户可以绘制新链接或重新连接现有链接的端口对。链接验证涵盖了此主题。

温馨提示：疫情期间返岗上班需戴口罩、勤洗手、常通风，做好防护措施！

想要购买GoJS正版授权的朋友可以咨询官方客服

标签：