流程图控件GoJS教程：指令

---

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

点击下载GoJS最新试用版

指令

诸如Delete或Paste或Undo之类的命令由CommandHandler类实现。

 键盘事件（例如鼠标和触摸事件）总是转到Diagram.currentTool。当用户未执行某些手势时，当前工具与Diagram.defaultTool相同，后者通常为Diagram.toolManager。该ToolManager由他们委托给处理键盘事件Diagram.commandHandler。

基本上，该图处理键盘事件，创建一个描述它的InputEvent，然后调用ToolManager.doKeyDown。依次调用CommandHandler.doKeyDown。按键事件发生的顺序相同。

请注意，键盘命令的处理取决于图表获得焦点，然后获得键盘事件。请勿使用任何样式，例如

canvas ：focus { display：none; }

键盘命令绑定

该CommandHandler实现了键盘输入以下命令绑定：

• Del＆Backspace调用CommandHandler.deleteSelection
• Ctrl-X和Shift-Del调用CommandHandler.cutSelection
• Ctrl-C和Ctrl-Insert调用CommandHandler.copySelection
• Ctrl-V和Shift-Insert调用CommandHandler.pasteSelection
• Ctrl-A调用CommandHandler.selectAll
• Ctrl-Z和Alt-Backspace调用CommandHandler.undo
• Ctrl-Y和Alt-Shift-Backspace调用CommandHandler.redo
• 上，下，左和右（箭头键）调用Diagram.scroll
• PageUp和PageDown调用Diagram.scroll
• Home & End调用Diagram.scroll
• 空格调用CommandHandler.scrollToPart
• 键盘-（减号）调用CommandHandler.decreaseZoom
• 键盘- +（加号）调用CommandHandler.increaseZoom
• Ctrl-0调用CommandHandler.resetZoom
• Shift-Z调用CommandHandler.zoomToFit ; 重复以返回原始比例和位置
• Ctrl-G调用CommandHandler.groupSelection
• Ctrl-Shift-G调用CommandHandler.ungroupSelection
• F2调用CommandHandler.editTextBlock
• 菜单键调用CommandHandler.showContextMenu
• Esc调用CommandHandler.stopCommand

在Mac上，Command键用作修饰符，而不是Control键。

 当前，没有诸如CommandHandler.collapseSubGraph， CommandHandler.collapseTree，CommandHandler.expandSubGraph或CommandHandler.expandTree之类的命令的键盘绑定。

如果要使箭头键具有不同的行为，请考虑使用CommandHandler： DrawCommandHandler扩展的示例类，该示例类实现了使箭头键移动选择或更改选择的选项。

该DrawCommandHandler扩展还演示了对“ 复制”和“ 粘贴”命令的自定义，以自动移动粘贴副本的位置。

命令处理程序

CommandHandler类实现了成对的方法：用于执行命令的方法和在执行命令时为true的谓词。 例如，对于“复制”命令，有一个CommandHandler.copySelection方法和一个CommandHandler.canCopySelection方法。

键盘事件处理始终首先调用“ can ...”谓词。 仅当返回true时，它才实际调用该方法来执行命令。

您可以设置许多属性来影响CommandHandler的标准行为。 例如，如果要允许用户将所选零件与CommandHandler.groupSelection一起分组，则需要将CommandHandler.archetypeGroupData设置为组节点数据对象：

  diagram.commandHandler.archetypeGroupData =
    { key: "Group", isGroup: true, color: "blue" };

该数据对象被CommandHandler.groupSelection复制并作为新的组数据对象添加到模型中。

如果要添加自己的键盘绑定，则可以重写CommandHandler.doKeyDown方法。 例如，为了支持使用“ T”键来折叠或展开当前选定的组：

    myDiagram.commandHandler.doKeyDown = function() {
      var e = myDiagram.lastInput;
      var cmd = myDiagram.commandHandler;
      if (e.key === "T") {  // could also check for e.control or e.shift
        if (cmd.canCollapseSubGraph()) {
          cmd.collapseSubGraph();
        } else if (cmd.canExpandSubGraph()) {
          cmd.expandSubGraph();
        }
      } else {
        // call base method with no arguments
        go.CommandHandler.prototype.doKeyDown.call(cmd);
      }
    };

不要忘记调用基本方法以处理您的方法无法处理的所有键。

请注意，调用基本方法涉及获取基类的原型方法。 如果基本方法接受参数，请确保将参数传递给对基本方法的调用。

更新命令界面

通常在图之外具有调用命令的HTML元素。 您可以使用CommandHandler的“ can ...”谓词来启用或禁用将调用该命令的UI。

  // allow the group command to execute
  diagram.commandHandler.archetypeGroupData =
    { key: "Group", isGroup: true, color: "blue" };
  // modify the default group template to allow ungrouping
  diagram.groupTemplate.ungroupable = true;

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta" },
    { key: "Delta", group: "Epsilon" },
    { key: "Gamma", group: "Epsilon" },
    { key: "Epsilon", isGroup: true }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },
    { from: "Beta", to: "Beta" },
    { from: "Gamma", to: "Delta" },
    { from: "Delta", to: "Alpha" }
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

  // enable or disable a particular button
  function enable(name, ok) {
    var button = document.getElementById(name);
    if (button) button.disabled = !ok;
  }
  // enable or disable all command buttons
  function enableAll() {
    var cmdhnd = diagram.commandHandler;
    enable("SelectAll", cmdhnd.canSelectAll());
    enable("Cut", cmdhnd.canCutSelection());
    enable("Copy", cmdhnd.canCopySelection());
    enable("Paste", cmdhnd.canPasteSelection());
    enable("Delete", cmdhnd.canDeleteSelection());
    enable("Group", cmdhnd.canGroupSelection());
    enable("Ungroup", cmdhnd.canUngroupSelection());
    enable("Undo", cmdhnd.canUndo());
    enable("Redo", cmdhnd.canRedo());
  }
  // notice whenever the selection may have changed
  diagram.addDiagramListener("ChangedSelection", function(e) {
    enableAll();
  });
  // notice when the Paste command may need to be reenabled
  diagram.addDiagramListener("ClipboardChanged", function(e) {
    enableAll();
  });
  // notice whenever a transaction or undo/redo has occurred
  diagram.addModelChangedListener(function(e) {
    if (e.isTransactionFinished) enableAll();
  });
  // perform initial enablements after everything has settled down
  setTimeout(enableAll, 1);

  myDiagram = diagram;  // make the diagram accessible to button onclick handlers

<input id="SelectAll" type="button"
       onclick="myDiagram.commandHandler.selectAll()" value="Select All" />

每当更改选择或发生事务或撤消或重做时，都会调用enableAll函数以更新每个按钮的“ disabled”属性。

辅助功能

由于GoJS基于HTML Canvas元素，因此使屏幕阅读器或其他可访问性设备可访问的应用程序是在GoJS之外生成后备内容的问题，就像您将生成与任何HTML Canvas应用程序分开的后备内容一样。

尽管可以通过键盘命令或默认的上下文菜单访问CommandHandler的许多预定义功能，但并非全部都能使用，并且Tools的功能主要取决于鼠标或触摸事件。我们建议您为希望用户在没有指针设备的情况下访问的那些工具实施特定于应用程序的替代机制。

更多CommandHandler覆盖示例

停止执行撤消/重做操作CTRL + Z / CTRL + Y，但仍允许以编程方式调用CommandHandler.undo和CommandHandler.redo：

====================================================

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯，欢迎扫描关注下方微信公众号