流程图控件GoJS教程：如何内置GoJS交互性

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

GoJS最新版

内置GoJS交互性

下图定义了一个节点模板，并且在其模型中具有四个节点：

var $ = go.GraphObject.make;myDiagram =  $(go.Diagram, "myDiagramDiv",    { "undoManager.isEnabled": true });// define a simple Node templatemyDiagram.nodeTemplate =  $(go.Node, "Auto",    $(go.Shape, "Rectangle",      // don't draw any outline      { stroke: null },      // the Shape.fill comes from the Node.data.color property      new go.Binding("fill", "color")),    $(go.TextBlock,      // leave some space around larger-than-normal text      { margin: 6, font: "18px sans-serif" },      // the TextBlock.text comes from the Node.data.key property      new go.Binding("text", "key"))  );myDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" },  { key: "Gamma", color: "lightgreen" },  { key: "Delta", color: "pink" }]);

开箱即用，有几种交互方式可用：

• 单击一个节点以将其选中。在节点上按并拖动以将其移动。或者按并拖动图背景以平移整个图。
• 常见的键盘快捷键（例如CTRL-C，，CTRL-V）CTRL-X 将分别复制，粘贴和剪切图部分。
• 拖动并按住可创建用于选择多个节点的选择框。按住CTRL键并单击节点，可以切换它们的选择。
• 由于图的undoManager已启用，CTRL-Z因此CTRL-Y将撤消和重做操作。平移（滚动）和选择不被视为不可撤消的操作。

通过设置一些属性，您可以向用户公开更多的交互：

var $ = go.GraphObject.make;var myDiagram =  $(go.Diagram, divname,    {      // allow double-click in background to create a new node      "clickCreatingTool.archetypeNodeData": { key: "Node", color: "white" },      // allow Ctrl-G to group      "commandHandler.archetypeGroupData": { text: "Group", isGroup: true },      // have mouse wheel events zoom in and out instead of scroll up and down      "toolManager.mouseWheelBehavior": go.ToolManager.WheelZoom,      "undoManager.isEnabled": true // enable undo & redo    });myDiagram.nodeTemplate =  $(go.Node, "Auto",    $(go.Shape, "Rectangle",      { stroke: null },      new go.Binding("fill", "color")),    $(go.TextBlock,      { margin: 6, font: "18px sans-serif", editable: true },      new go.Binding("text", "key"))  );// allow CTRL-SHIFT-G to ungroup a selected GroupmyDiagram.groupTemplate.ungroupable = true;myDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" },  { key: "Gamma", color: "lightgreen", group: "Group1" },  { key: "Delta", color: "pink", group: "Group1" },  { key: "Group1", isGroup: true }]);      

• ClickCreatingTool.archetypeNodeData 允许在后台双击以创建具有指定数据的新节点。
• CommandHandler.archetypeGroupData允许CTRL-G对选择的节点进行分组。
• Group.ungroupable允许CTRL-SHIFT-G取消组合选定的组。
• ToolManager.mouseWheelBehavior默认情况下允许鼠标滚轮缩放而不是滚动。您可以通过单击鼠标滚轮来切换此属性。在触摸设备上，默认情况下启用捏缩放。

这些交互（以及更多！）都存在于basic.html示例中。确保还查看有关GoJS命令的“简介”页面。

您可以根据需要允许用户执行的操作来禁用具有某些属性的图交互性的某些部分。有关更多信息，请参见GoJS权限的简介页面。

上下文菜单

GoJS提供了一种机制，您可以为任何对象或图本身定义上下文菜单。在下面的示例中，定义了两个上下文菜单，一个在Node模板上（一个按钮），另一个在图上（两个按钮）。

var $ = go.GraphObject.make;var myDiagram =  $(go.Diagram, divname,    { "undoManager.isEnabled": true });// this function is called when the context menu button is clickedfunction nodeClicked(e, obj) {  alert('node ' + obj.part.data.key + ' was clicked');}// defines a context menu to be referenced in the node templatevar contextMenuTemplate =  $(go.Adornment, "Vertical",    $("ContextMenuButton",      $(go.TextBlock, "Click me!"),      { click: nodeClicked })    // more ContextMenuButtons would go here  );myDiagram.nodeTemplate =  $(go.Node, "Auto",    { contextMenu: contextMenuTemplate }, // set the context menu    $(go.Shape, "Rectangle",      { stroke: null },      new go.Binding("fill", "color")),    $(go.TextBlock,      { margin: 6, font: "18px sans-serif" },      new go.Binding("text", "key"))  );// this function alerts the current number of nodes in the Diagramfunction countNodes(e, obj) {  alert('there are ' + e.diagram.nodes.count + ' nodes');}// this function creates a new node and inserts it at the last event's pointfunction addNode(e, obj) {  var data = { key: "Node", color: "white" };  e.diagram.model.addNodeData(data);  var node = e.diagram.findPartForData(data);  node.location = e.diagram.lastInput.documentPoint;}myDiagram.contextMenu =  $(go.Adornment, "Vertical",    $("ContextMenuButton",      $(go.TextBlock, "Count Nodes"),      { click: countNodes }),    $("ContextMenuButton",      $(go.TextBlock, "Add Node"),      { click: addNode })    // more ContextMenuButtons would go here  );myDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" }]);return myDiagram;      

如果在“节点”或“图”上单击鼠标右键（或在触摸设备上长按），您将看到显示带有已定义选项的GoJS上下文菜单。

该basic.html样品含有更复杂的上下文菜单的例子。有关更多信息，请参见GoJS上下文菜单上的“简介”页面。

链接互动

GoJS允许用户通过从端口中拖出或选择链接并拖动其手柄来绘制新链接并重新链接现有链接。要启用这些工具，需要设置一些属性：

myDiagram.nodeTemplate =  $(go.Node, "Auto",    $(go.Shape, "Rectangle",      {        stroke: null,        portId: "",        cursor: "pointer",        fromLinkable: true, fromLinkableSelfNode: true, fromLinkableDuplicates: true,        toLinkable: true, toLinkableSelfNode: true, toLinkableDuplicates: true       },      new go.Binding("fill", "color")),    $(go.TextBlock,      { margin: 6, font: "18px sans-serif" },      new go.Binding("text", "key"))  );myDiagram.linkTemplate =  $(go.Link,    {      // allow the user to relink existing links:      relinkableFrom: true, relinkableTo: true,      // draw the link path shorter than normal,      // so that it does not interfere with the appearance of the arrowhead      toShortLength: 2    },    $(go.Shape,      { strokeWidth: 2 }),    $(go.Shape,      { toArrow: "Standard", stroke: null })  );myDiagram.model = new go.GraphLinksModel([  { key: "Alpha", color: "lightblue" },  { key: "Beta", color: "orange" },  { key: "Gamma", color: "lightgreen" },  { key: "Delta", color: "pink" }],[  { from: 'Alpha', to: 'Beta' },  { from: 'Alpha', to: 'Delta' },]);

想要购买GoJS正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：