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

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

圖表事件

DiagramEvent表示用戶(hù)對(duì)圖進(jìn)行的常規(guī)更改。您可以通過(guò)調(diào)用Diagram.addDiagramListener來(lái)注冊(cè)一個(gè)或多個(gè)圖表事件處理程序。您還可以在調(diào)用GraphObject.make時(shí)在圖初始化中注冊(cè)圖事件處理程序。每種圖表事件均以其名稱(chēng)來(lái)區(qū)分。

當(dāng)前定義的圖事件名稱(chēng)包括：

• “ InitialAnimationStarting ”，初始默認(rèn)動(dòng)畫(huà)即將開(kāi)始；不要在事件偵聽(tīng)器中修改圖或其模型。這對(duì)于修改AnimationManager.defaultAnimation以制作自定義初始動(dòng)畫(huà)很有用。
• “ AnimationStarting ”，一個(gè)默認(rèn)動(dòng)畫(huà)（AnimationManager.defaultAnimation）將要開(kāi)始；不要在事件偵聽(tīng)器中修改圖或其模型。
• “ AnimationFinished ”，剛剛完成的默認(rèn)動(dòng)畫(huà)（AnimationManager.defaultAnimation）；不要在事件偵聽(tīng)器中修改圖或其模型。
• “ BackgroundSingleClicked ”，當(dāng)鼠標(biāo)左鍵單擊發(fā)生在圖的背景中而不是零件上時(shí)；如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ BackgroundDoubleClicked ”，當(dāng)鼠標(biāo)左鍵雙擊發(fā)生在圖表的背景中而不是零件上時(shí)；如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ BackgroundContextClicked ”，當(dāng)在圖的背景中而不是在零件的背景中發(fā)生鼠標(biāo)右鍵單擊時(shí)；如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ ChangeingSelection ”，一個(gè)操作即將更改Diagram.selection集合，該集合也是DiagramEvent.subject的值；不要在事件偵聽(tīng)器中對(duì)選擇或圖表或模型進(jìn)行任何更改；請(qǐng)注意，僅設(shè)置Part.isSelected不會(huì)引發(fā)此事件，但是工具和命令將引發(fā)此事件。
• “ ChangedSelection ”，一個(gè)操作剛剛更改了Diagram.selection集合，該集合也是DiagramEvent.subject的值；不要在事件偵聽(tīng)器中對(duì)選擇或圖表或模型進(jìn)行任何更改；請(qǐng)注意，僅設(shè)置Part.isSelected不會(huì)引發(fā)此事件，但是工具和命令將引發(fā)此事件。
• “ ClipboardChanged ”，零件已通過(guò)CommandHandler.copySelection復(fù)制到剪貼板; 所述DiagramEvent.subject是零件的集合; 如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ ClipboardPasted ”，CommandHandler.pasteSelection已將零件從剪貼板復(fù)制到圖表中; 該DiagramEvent.subject是Diagram.selection，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ DocumentBoundsChanged ”，圖的部件的區(qū)域Diagram.documentBounds已更改；該DiagramEvent.parameter是舊的矩形。
• “ ExternalObjectsDropped ”，通過(guò)從圖的外部拖放將零件復(fù)制到圖中；該DiagramEvent.subject是一套零件被丟棄的（這也是Diagram.selection），該DiagramEvent.parameter是源圖，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交您的自己的交易。
• “ GainedFocus ”，該圖已獲得鍵盤(pán)焦點(diǎn)，諸如一個(gè)呼叫后Diagram.focus。
• “ InitialLayoutCompleted ”，自從對(duì)圖進(jìn)行重大更改（例如替換模型）以來(lái)，整個(gè)圖布局首次更新。如果進(jìn)行任何更改，則無(wú)需執(zhí)行交易。
• “ LayoutCompleted ”，整個(gè)圖的布局剛剛更新；如果進(jìn)行任何更改，則無(wú)需執(zhí)行交易。
• “ LinkDrawn ”，用戶(hù)剛剛使用LinkingTool創(chuàng)建了一個(gè)新的Link ；該DiagramEvent.subject是新的鏈接，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)..
• “ LinkRelinked ”，用戶(hù)剛剛重新連接使用現(xiàn)有鏈路RelinkingTool或DraggingTool ; 該DiagramEvent.subject是修改后的鏈接，該DiagramEvent.parameter是GraphObject端口的鏈接從斷開(kāi)連接，這就是所謂的事務(wù)中，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)..
• “ LinkReshaped ”，用戶(hù)剛剛使用LinkReshapingTool重新路由了現(xiàn)有的Link ；該DiagramEvent.subject是修改后的鏈接，該DiagramEvent.parameter是鏈接的原始路線(xiàn)點(diǎn)的列表，這就是所謂的事務(wù)中，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)..
• “ LostFocus ”，該圖失去了鍵盤(pán)焦點(diǎn)（“模糊”）。
• Diagram.isModified屬性 “ Modified ” 已設(shè)置為新值-用于將窗口標(biāo)記為自上次保存以來(lái)已被修改；不要在事件偵聽(tīng)器中修改邏輯示意圖或其模型。
• “ ObjectSingleClicked ”，發(fā)生在GraphObject上的點(diǎn)擊；該DiagramEvent.subject是GraphObject; 如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ ObjectDoubleClicked ”，發(fā)生在GraphObject上的雙擊；該DiagramEvent.subject是GraphObject; 如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ ObjectContextClicked ”，發(fā)生在GraphObject上的上下文單擊；該DiagramEvent.subject是GraphObject; 如果進(jìn)行任何更改，請(qǐng)啟動(dòng)并提交自己的事務(wù)。
• “ PartCreated ”，用戶(hù)通過(guò)ClickCreatingTool插入了一個(gè)新的Part ；該DiagramEvent.subject是新的部分，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ PartResized ”，用戶(hù)已通過(guò)ResizingTool更改了GraphObject的大??；該DiagramEvent.subject是GraphObject，該DiagramEvent.parameter是原來(lái)的大小，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ PartRotated ”，用戶(hù)通過(guò)RotatingTool改變了GraphObject的角度; 該DiagramEvent.subject是GraphObject，該DiagramEvent.parameter是度原來(lái)的角度，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionMoved ”，用戶(hù)已通過(guò)DraggingTool移動(dòng)了選定的零件；該DiagramEvent.subject是一套移動(dòng)零件，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionCopied ”，用戶(hù)已通過(guò)DraggingTool復(fù)制了選定的零件；該DiagramEvent.subject是新復(fù)制件的設(shè)置，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionDeleting ”，用戶(hù)將通過(guò)CommandHandler.deleteSelection刪除選定的部件；該DiagramEvent.subject是Diagram.selection零件的集合被刪除，這就是所謂的事務(wù)中，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionDeleted ”，用戶(hù)已通過(guò)CommandHandler.deleteSelection刪除了選定的部件；該DiagramEvent.subject是被刪除的零件的集合，這就是所謂的事務(wù)中，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionGrouped ”，用戶(hù)已通過(guò)CommandHandler.groupSelection從選定的零件中創(chuàng)建了一個(gè)新的組；該DiagramEvent.subject是新的集團(tuán)，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SelectionUngrouped ”，用戶(hù)已刪除選定的組，但通過(guò)CommandHandler.ungroupSelection保留了其成員；該DiagramEvent.subject是被取消組合組的集合，該DiagramEvent.parameter是被取消組合的前成員零件的集合，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SubGraphCollapsed ”，用戶(hù)已通過(guò)CommandHandler.collapseSubGraph折疊了選定的組；該DiagramEvent.subject是被壓塌的是群體的集合，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ SubGraphExpanded ”，用戶(hù)已通過(guò)CommandHandler.expandSubGraph擴(kuò)展了選定的組；該DiagramEvent.subject是被擴(kuò)展組的集合，這就是所謂的事務(wù)中，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ TextEdited ”，用戶(hù)已通過(guò)TextEditingTool更改了TextBlock的字符串值；該DiagramEvent.subject是編輯的TextBlock時(shí)，DiagramEvent.parameter是原始的字符串，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ TreeCollapsed ”，用戶(hù)已通過(guò)CommandHandler.collapseTree折疊了帶有子樹(shù)的選定節(jié)點(diǎn)；該DiagramEvent.subject是被壓塌的是節(jié)點(diǎn)的集合，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ TreeExpanded ”，用戶(hù)已通過(guò)CommandHandler.expandTree用子樹(shù)擴(kuò)展了選定的Nodes 。該DiagramEvent.subject是被擴(kuò)展節(jié)點(diǎn)的集合，這是一個(gè)事務(wù)中調(diào)用，這樣你就不必從頭開(kāi)始，并提交自己的事務(wù)。
• “ ViewportBoundsChanged ”，圖的可見(jiàn)區(qū)域Diagram.viewportBounds已更改；所述DiagramEvent.subject是一個(gè)對(duì)象，其“規(guī)?！睂傩允桥fDiagram.scale值，其“位置”屬性是舊Diagram.position值，其“范圍”屬性是舊Diagram.viewportBounds值; 該DiagramEvent.parameter也是老viewportBounds矩形。不要在偵聽(tīng)器中修改圖的位置或比例（即視口范圍）。

除了DiagramEvent偵聽(tīng)器之外，在某些情況下，檢測(cè)到此類(lèi)更改很常見(jiàn)，足以保證具有作為事件處理程序的屬性。因?yàn)檫@些事件不一定與任何特定的輸入或圖表事件相對(duì)應(yīng)，所以這些事件處理程序具有特定于情況的自定義參數(shù)。

GraphObject.click 是一個(gè)非常常見(jiàn)的事件屬性，如果非null，則它是一個(gè)在用戶(hù)單擊該對(duì)象時(shí)調(diào)用的函數(shù)。這最常用于指定“按鈕”的行為，但是它以及其他“單擊”事件屬性“ doubleClick”和“ contextClick”在任何GraphObject上都可以使用。

另一個(gè)常見(jiàn)事件屬性是Part.selectionChanged，只要Part.isSelected發(fā)生更改，就會(huì)調(diào)用該屬性（如果為非null）。在這種情況下，事件處理函數(shù)將傳遞給單個(gè)參數(shù)Part。不需要其他參數(shù)，因?yàn)樵摵瘮?shù)可以檢查Part.isSelected的當(dāng)前值來(lái)確定要執(zhí)行的操作。

與依賴(lài)DiagramEvent相比， Model ChangedEvent更加完整和可靠。例如，當(dāng)代碼向圖中添加鏈接時(shí)，不會(huì)引發(fā)“ LinkDrawn” DiagramEvent。僅當(dāng)用戶(hù)使用LinkingTool繪制新鏈接時(shí)，才會(huì)引發(fā)DiagramEvent 。此外，鏈接尚未路由，因此將不會(huì)計(jì)算Link.points。實(shí)際上，創(chuàng)建新鏈接可能會(huì)使Layout無(wú)效，因此所有節(jié)點(diǎn)都可能在不久的將來(lái)被移動(dòng)。

有時(shí)您想在用戶(hù)更改圖時(shí)更新數(shù)據(jù)庫(kù)。通常你會(huì)想實(shí)現(xiàn)一個(gè)型號(hào) ChangedEvent監(jiān)聽(tīng)器，通過(guò)調(diào)用Model.addChangedListener或Diagram.addModelChangedListener，即注意到了更改模型，并決定如何在數(shù)據(jù)庫(kù)中記錄。

本示例演示如何處理幾個(gè)圖事件：“ ObjectSingleClicked”， “ BackgroundDoubleClicked”和“ ClipboardPasted”。

  function showMessage(s) {
    document.getElementById("diagramEventsMsg").textContent = s;
  }

  diagram.addDiagramListener("ObjectSingleClicked",
      function(e) {
        var part = e.subject.part;
        if (!(part instanceof go.Link)) showMessage("Clicked on " + part.data.key);
      });

  diagram.addDiagramListener("BackgroundDoubleClicked",
      function(e) { showMessage("Double-clicked at " + e.diagram.lastInput.documentPoint); });

  diagram.addDiagramListener("ClipboardPasted",
      function(e) { showMessage("Pasted " + e.diagram.selection.count + " parts"); });

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", group: "Omega" },
    { key: "Gamma", group: "Omega" },
    { key: "Omega", isGroup: true },
    { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
    { from: "Omega", to: "Delta" }  // from the Group to a Node
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

輸入事件

當(dāng)發(fā)生低級(jí)HTML DOM事件時(shí)，GoJS會(huì)將鍵盤(pán)/鼠標(biāo)/觸摸事件信息規(guī)范化為新的InputEvent，該InputEvent可以傳遞給各種事件處理方法并保存以供以后檢查。

InputEvent保留InputEvent.key用于鍵盤(pán)事件，InputEvent.button用于鼠標(biāo)事件，InputEvent.viewPoint用于鼠標(biāo)和觸摸事件，以及InputEvent.modifiers用于鍵盤(pán)和鼠標(biāo)事件。

該圖的事件處理程序也記錄InputEvent.documentPoint，這是InputEvent.viewPoint在鼠標(biāo)事件發(fā)生時(shí)在文件坐標(biāo)，InputEvent.timestamp，記錄了事件發(fā)生的時(shí)間（毫秒）。

InputEvent類(lèi)還為特定類(lèi)型的事件提供了許多方便的屬性。示例包括InputEvent.control（如果已按下控制鍵）和InputEvent.left（如果已按下 鼠標(biāo)左/主按鈕）。

一些工具在鼠標(biāo)指針處找到“當(dāng)前” GraphObject。這被記住為InputEvent.targetObject。

高層輸入事件

一些工具會(huì)檢測(cè)一系列輸入事件，以組成更為抽象的用戶(hù)事件。示例包括“點(diǎn)擊”（鼠標(biāo)上下相互非?？拷┖汀皯彝！保ㄒ欢螘r(shí)間不動(dòng)鼠標(biāo)）。這些工具將在鼠標(biāo)指向當(dāng)前GraphObject的事件處理程序（如果有的話(huà)）。事件處理程序被保留為對(duì)象上屬性的值。然后，它還會(huì)在GraphObject.panel的鏈上“冒泡”事件，直到事件以Part結(jié)尾。這允許在面板上聲明“單擊”事件處理程序，并使該處理程序應(yīng)用，即使單擊實(shí)際上發(fā)生在面板深處的元素上也是如此。如果鼠標(biāo)指針上沒(méi)有任何對(duì)象，則該事件將在圖中發(fā)生。

類(lèi)似于單擊的事件屬性包括GraphObject.click，GraphObject.doubleClick和GraphObject.contextClick。當(dāng)沒(méi)有GraphObject時(shí)，它們也會(huì)發(fā)生-事件發(fā)生在圖的背景中： Diagram.click，Diagram.doubleClick和Diagram.contextClick。這些都是可以設(shè)置為事件處理程序的函數(shù)的屬性。這些事件是由鼠標(biāo)事件和觸摸事件引起的。

類(lèi)似鼠標(biāo)懸停的事件屬性包括GraphObject.mouseEnter，GraphObject.mouseOver和GraphObject.mouseLeave。但是只有Diagram.mouseOver適用于該圖。

 類(lèi)似懸停的事件屬性包括GraphObject.mouseHover和GraphObject.mouseHold。等效的圖屬性是Diagram.mouseHover和Diagram.mouseHold。

還有一些用于拖動(dòng)操作的事件屬性：GraphObject.mouseDragEnter，GraphObject.mouseDragLeave和GraphObject.mouseDrop。這些適用于固定對(duì)象，而不適用于被拖動(dòng)的對(duì)象。而且，它們?cè)谕ㄟ^(guò)觸摸事件（而不僅僅是鼠標(biāo)事件）拖動(dòng)時(shí)也會(huì)發(fā)生。

此示例演示如何處理三個(gè)更高級(jí)別的輸入事件：?jiǎn)螕艄?jié)點(diǎn)并輸入/離開(kāi)組。

  function showMessage(s) {
    document.getElementById("inputEventsMsg").textContent = s;
  }

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key")),
      { click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); } }
    );

  diagram.groupTemplate =
    $(go.Group, "Vertical",
      $(go.TextBlock,
        { alignment: go.Spot.Left, font: "Bold 12pt Sans-Serif" },
        new go.Binding("text", "key")),
      $(go.Panel, "Auto",
        $(go.Shape, "RoundedRectangle",
          { name: "SHAPE",
            parameter1: 14,
            fill: "rgba(128,128,128,0.33)" }),
        $(go.Placeholder, { padding: 5 })
      ),
      { mouseEnter: function(e, obj, prev) {  // change group's background brush
            var shape = obj.part.findObject("SHAPE");
            if (shape) shape.fill = "red";
          },
        mouseLeave: function(e, obj, next) {  // restore to original brush
            var shape = obj.part.findObject("SHAPE");
            if (shape) shape.fill = "rgba(128,128,128,0.33)";
          } });

  var nodeDataArray = [
    { key: "Alpha" },
    { key: "Beta", group: "Omega" },
    { key: "Gamma", group: "Omega" },
    { key: "Omega", isGroup: true },
    { key: "Delta" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" },  // from outside the Group to inside it
    { from: "Beta", to: "Gamma" },  // this link is a member of the Group
    { from: "Omega", to: "Delta" }  // from the Group to a Node
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

單擊并選擇

此示例演示了“ click”事件和“ selectionChanged”事件：

  function showMessage(s) {
    document.getElementById("changeMethodsMsg").textContent = s;
  }

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      { selectionAdorned: false },
      $(go.Shape, "Ellipse", { fill: "white" }),
      $(go.TextBlock,
        new go.Binding("text", "key")),
      {
        click: function(e, obj) { showMessage("Clicked on " + obj.part.data.key); },
        selectionChanged: function(part) {
            var shape = part.elt(0);
            shape.fill = part.isSelected ? "red" : "white";
          }
      }
    );

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

嘗試按Ctrl-A選擇所有內(nèi)容。請(qǐng)注意GraphObject.click事件屬性和Part.selectionChanged事件屬性之間的區(qū)別。兩者都是在節(jié)點(diǎn)發(fā)生問(wèn)題時(shí)調(diào)用的方法。所述GraphObject.click當(dāng)用戶(hù)點(diǎn)擊的節(jié)點(diǎn)，這恰好選擇的節(jié)點(diǎn)上發(fā)生。但是，即使沒(méi)有單擊事件或任何鼠標(biāo)事件，也會(huì)發(fā)生Part.selectionChanged，這是由于節(jié)點(diǎn)的屬性更改所致。

想要購(gòu)買(mǎi)GoJS正版授權(quán)的朋友可以