流程圖控件GoJS教程：指令

---

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

點(diǎn)擊下載GoJS最新試用版

指令

諸如Delete或Paste或Undo之類的命令由CommandHandler類實(shí)現(xiàn)。

鍵盤事件（例如鼠標(biāo)和觸摸事件）總是轉(zhuǎn)到Diagram.currentTool。當(dāng)用戶未執(zhí)行某些手勢時(shí)，當(dāng)前工具與Diagram.defaultTool相同，后者通常為Diagram.toolManager。該ToolManager由他們委托給處理鍵盤事件Diagram.commandHandler。

基本上，該圖處理鍵盤事件，創(chuàng)建一個(gè)描述它的InputEvent，然后調(diào)用ToolManager.doKeyDown。依次調(diào)用CommandHandler.doKeyDown。按鍵事件發(fā)生的順序相同。

請注意，鍵盤命令的處理取決于圖表獲得焦點(diǎn)，然后獲得鍵盤事件。請勿使用任何樣式，例如

canvas ：focus { display：none; }

鍵盤命令綁定

該CommandHandler實(shí)現(xiàn)了鍵盤輸入以下命令綁定：

• Del＆Backspace調(diào)用CommandHandler.deleteSelection
• Ctrl-X和Shift-Del調(diào)用CommandHandler.cutSelection
• Ctrl-C和Ctrl-Insert調(diào)用CommandHandler.copySelection
• Ctrl-V和Shift-Insert調(diào)用CommandHandler.pasteSelection
• Ctrl-A調(diào)用CommandHandler.selectAll
• Ctrl-Z和Alt-Backspace調(diào)用CommandHandler.undo
• Ctrl-Y和Alt-Shift-Backspace調(diào)用CommandHandler.redo
• 上，下，左和右（箭頭鍵）調(diào)用Diagram.scroll
• PageUp和PageDown調(diào)用Diagram.scroll
• Home & End調(diào)用Diagram.scroll
• 空格調(diào)用CommandHandler.scrollToPart
• 鍵盤-（減號）調(diào)用CommandHandler.decreaseZoom
• 鍵盤- +（加號）調(diào)用CommandHandler.increaseZoom
• Ctrl-0調(diào)用CommandHandler.resetZoom
• Shift-Z調(diào)用CommandHandler.zoomToFit ; 重復(fù)以返回原始比例和位置
• Ctrl-G調(diào)用CommandHandler.groupSelection
• Ctrl-Shift-G調(diào)用CommandHandler.ungroupSelection
• F2調(diào)用CommandHandler.editTextBlock
• 菜單鍵調(diào)用CommandHandler.showContextMenu
• Esc調(diào)用CommandHandler.stopCommand

在Mac上，Command鍵用作修飾符，而不是Control鍵。

當(dāng)前，沒有諸如CommandHandler.collapseSubGraph， CommandHandler.collapseTree，CommandHandler.expandSubGraph或CommandHandler.expandTree之類的命令的鍵盤綁定。

如果要使箭頭鍵具有不同的行為，請考慮使用CommandHandler： DrawCommandHandler擴(kuò)展的示例類，該示例類實(shí)現(xiàn)了使箭頭鍵移動選擇或更改選擇的選項(xiàng)。

該DrawCommandHandler擴(kuò)展還演示了對“ 復(fù)制”和“ 粘貼”命令的自定義，以自動移動粘貼副本的位置。

命令處理程序

CommandHandler類實(shí)現(xiàn)了成對的方法：用于執(zhí)行命令的方法和在執(zhí)行命令時(shí)為true的謂詞。 例如，對于“復(fù)制”命令，有一個(gè)CommandHandler.copySelection方法和一個(gè)CommandHandler.canCopySelection方法。

鍵盤事件處理始終首先調(diào)用“ can ...”謂詞。 僅當(dāng)返回true時(shí)，它才實(shí)際調(diào)用該方法來執(zhí)行命令。

您可以設(shè)置許多屬性來影響CommandHandler的標(biāo)準(zhǔn)行為。 例如，如果要允許用戶將所選零件與CommandHandler.groupSelection一起分組，則需要將CommandHandler.archetypeGroupData設(shè)置為組節(jié)點(diǎn)數(shù)據(jù)對象：

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

該數(shù)據(jù)對象被CommandHandler.groupSelection復(fù)制并作為新的組數(shù)據(jù)對象添加到模型中。

如果要添加自己的鍵盤綁定，則可以重寫CommandHandler.doKeyDown方法。 例如，為了支持使用“ T”鍵來折疊或展開當(dāng)前選定的組：

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

不要忘記調(diào)用基本方法以處理您的方法無法處理的所有鍵。

請注意，調(diào)用基本方法涉及獲取基類的原型方法。 如果基本方法接受參數(shù)，請確保將參數(shù)傳遞給對基本方法的調(diào)用。

更新命令界面

通常在圖之外具有調(diào)用命令的HTML元素。 您可以使用CommandHandler的“ can ...”謂詞來啟用或禁用將調(diào)用該命令的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" />

每當(dāng)更改選擇或發(fā)生事務(wù)或撤消或重做時(shí)，都會調(diào)用enableAll函數(shù)以更新每個(gè)按鈕的“ disabled”屬性。

輔助功能

由于GoJS基于HTML Canvas元素，因此使屏幕閱讀器或其他可訪問性設(shè)備可訪問的應(yīng)用程序是在GoJS之外生成后備內(nèi)容的問題，就像您將生成與任何HTML Canvas應(yīng)用程序分開的后備內(nèi)容一樣。

盡管可以通過鍵盤命令或默認(rèn)的上下文菜單訪問CommandHandler的許多預(yù)定義功能，但并非全部都能使用，并且Tools的功能主要取決于鼠標(biāo)或觸摸事件。我們建議您為希望用戶在沒有指針設(shè)備的情況下訪問的那些工具實(shí)施特定于應(yīng)用程序的替代機(jī)制。

更多CommandHandler覆蓋示例

停止執(zhí)行撤消/重做操作CTRL + Z / CTRL + Y，但仍允許以編程方式調(diào)用CommandHandler.undo和CommandHandler.redo：

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

想要購買GoJS正版授權(quán)的朋友可以

有關(guān)產(chǎn)品的最新消息和最新資訊，歡迎掃描關(guān)注下方微信公眾號