GoJS是一款功能強(qiáng)大，快速且輕量級的流程圖控件，可幫助你在JavaScript 和HTML5 Canvas程序中創(chuàng)建流程圖，且極大地簡化您的JavaScript / Canvas 程序。

點擊下載GoJS最新版

內(nèi)置GoJS交互性

GoJS實現(xiàn)了許多常見的編輯操作，例如操縱零件（移動，添加，復(fù)制，剪切和刪除）。這些編輯功能默認(rèn)情況下可通過鼠標(biāo)（或觸摸）和鍵盤訪問，也可以在JavaScript中以編程方式調(diào)用。

下圖定義了一個節(jié)點模板，并且在其模型中具有四個節(jié)點：

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" }
]);

• 單擊一個節(jié)點以將其選中。在節(jié)點上按并拖動以將其移動。或者按并拖動圖背景以平移整個圖。
• 常見的鍵盤快捷鍵（例如CTRL-C，，CTRL-V）CTRL-X 將分別復(fù)制，粘貼和剪切圖部分。
• 拖動并按住可創(chuàng)建用于選擇多個節(jié)點的選擇框。按住CTRL鍵并單擊節(jié)點，可以切換它們的選擇。
• 由于圖的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 }
]);      

您可以根據(jù)需要允許用戶執(zhí)行的操作來禁用具有某些屬性的圖交互性的某些部分。有關(guān)更多信息，請參見GoJS權(quán)限的簡介頁面。

上下文菜單

GoJS提供了一種機(jī)制，您可以為任何對象或圖本身定義上下文菜單。在下面的示例中，定義了兩個上下文菜單，一個在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樣品含有更復(fù)雜的上下文菜單的例子。有關(guān)更多信息，請參見GoJS上下文菜單上的“簡介”頁面。

鏈接互動

GoJS允許用戶通過從端口中拖出或選擇鏈接并拖動其手柄來繪制新鏈接并重新鏈接現(xiàn)有鏈接。要啟用這些工具，需要設(shè)置一些屬性：

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