半岛权威十大直营(官方)网站

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

点击下载GoJS最新版

内置GoJS交互性

GoJS实现了许多常见的编辑操作，例如操纵零件（移动，添加，复制，剪切和删除）。这些编辑功能默认情况下可通过鼠标（或触摸）和键盘访问，也可以在JavaScript中以编程方式调用。

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

var $ = go.GraphObject.make;
myDiagram =
  $(go.Diagram, "myDiagramDiv",
    { "undoManager.isEnabled": true });

// define a simple Node template
myDiagram.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 Group
myDiagram.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 }
]);      

您可以根据需要允许用户执行的操作来禁用具有某些属性的图交互性的某些部分。有关更多信息，请参见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 clicked
function nodeClicked(e, obj) {
  alert('node ' + obj.part.data.key + ' was clicked');
}

// defines a context menu to be referenced in the node template
var 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 Diagram
function 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 point
function 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;      

该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' },
]
);