流程圖控件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正版授權的朋友可以

有關產品的最新消息和最新資訊，歡迎掃描關注下方微信公眾號