流程圖控件GoJS教程：事件

---

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

點擊下載GoJS最新試用版

圖表事件

DiagramEvent表示用戶對圖進行的常規(guī)更改。您可以通過調(diào)用Diagram.addDiagramListener來注冊一個或多個圖表事件處理程序。您還可以在調(diào)用GraphObject.make時在圖初始化中注冊圖事件處理程序。每種圖表事件均以其名稱來區(qū)分。

當前定義的圖事件名稱包括：

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

DiagramEvents不一定與鼠標事件或鍵盤事件或觸摸事件相對應。他們也不一定對應更改圖表的模型-跟蹤這種變化，利用Model.addChangedListener或Diagram.addModelChangedListener。DiagramEvents僅由于用戶做了某事（可能是間接地）而發(fā)生。

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

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

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

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

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

本示例演示如何處理幾個圖事件：“ 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);

輸入事件

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

InputEvent保留InputEvent.key用于鍵盤事件，InputEvent.button用于鼠標事件，InputEvent.viewPoint用于鼠標和觸摸事件，以及InputEvent.modifiers用于鍵盤和鼠標事件。

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

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

一些工具在鼠標指針處找到“當前” GraphObject。這被記住為InputEvent.targetObject。

高層輸入事件

一些工具會檢測一系列輸入事件，以組成更為抽象的用戶事件。示例包括“點擊”（鼠標上下相互非常靠近）和“懸?！保ㄒ欢螘r間不動鼠標）。這些工具將在鼠標指向當前GraphObject的事件處理程序（如果有的話）。事件處理程序被保留為對象上屬性的值。然后，它還會在GraphObject.panel的鏈上“冒泡”事件，直到事件以Part結(jié)尾。這允許在面板上聲明“單擊”事件處理程序，并使該處理程序應用，即使單擊實際上發(fā)生在面板深處的元素上也是如此。如果鼠標指針上沒有任何對象，則該事件將在圖中發(fā)生。

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

類似鼠標懸停的事件屬性包括GraphObject.mouseEnter，GraphObject.mouseOver和GraphObject.mouseLeave。但是只有Diagram.mouseOver適用于該圖。

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

還有一些用于拖動操作的事件屬性：GraphObject.mouseDragEnter，GraphObject.mouseDragLeave和GraphObject.mouseDrop。這些適用于固定對象，而不適用于被拖動的對象。而且，它們在通過觸摸事件（而不僅僅是鼠標事件）拖動時也會發(fā)生。

此示例演示如何處理三個更高級別的輸入事件：單擊節(jié)點并輸入/離開組。

  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)容。請注意GraphObject.click事件屬性和Part.selectionChanged事件屬性之間的區(qū)別。兩者都是在節(jié)點發(fā)生問題時調(diào)用的方法。所述GraphObject.click當用戶點擊的節(jié)點，這恰好選擇的節(jié)點上發(fā)生。但是，即使沒有單擊事件或任何鼠標事件，也會發(fā)生Part.selectionChanged，這是由于節(jié)點的屬性更改所致。

---

溫馨提示：疫情期間返崗上班需戴口罩、勤洗手、常通風，做好防護措施！

想要購買GoJS正版授權(quán)的朋友可以咨詢慧都官方客服