2. 程式人生 > >gojs Diagram Events（圖表事件）

gojs Diagram Events（圖表事件）

阿新 • • 發佈：2018-12-02

事件（Events）

 

GoJS涵蓋了三種基本事件：DiagramEvents（圖表事件）、InputEvents（輸入事件）以及ChangedEvents（變更事件）。這一頁我們討論前兩種事件；至於最後一種事件請見 Changed Events。

 

1、圖表事件（Diagram Events）

 

DiagramEvent（圖表事件）表示一般使用者發起的對圖表的改變。你可以通過呼叫Diagram.addDiagramListener註冊圖表事件處理程式。各個圖表事件以名字區分。

 

目前定義了的圖表事件名稱包括：

 

 

 

更多詳細內容，請見文件DiagramEvent。

圖表事件並不一定與滑鼠/鍵盤或者觸控事件相對應。它們也不一定與圖表模型的變化相對應——要跟蹤這些變化，使用Model.addChangedListener或者Diagram.addModelChangedListener。當用戶做了什麼或者間接做了什麼時，圖表事件才會產生。

 

除了圖表事件監聽器之外，還有一些情況是，當發現一些變動足以表明一些屬性是事件處理程式。由於這些事件並不一定需要與任何特殊的輸入或者圖表事件對應，座椅這些事件處理程式就會有特定於情況的自定義引數。

 

一個非常常見的事件屬性是GraphObject.click，它指的是無論何時使用者點選一個物件時呼叫的一個非空的函式。它最常用於為按鈕指定行為，但是它與其他的點選事件屬性，雙擊和右鍵點選，對於任何GraphObject都是有用的。

 

另外一個常見的事件屬性是Part.selectionChanged，它指的是當Part.isSelected改變時呼叫的一個非空函式。在下面的示例中，事件處理函式有一個引數，該Part。由於函式能夠檢查Part.isSelected的當前值從而決定要做什麼，所以不需要其餘的引數。

 

模型的ChangedEvent事件比基於DiagramEvent更完成可靠。例如，當在程式碼裡為圖表增加一條連線線時，"LinkDrawn" 圖表事件不會被呼叫。圖表事件只有在使用者用 LinkingTool 新增一條新的連線線時才被呼叫。另外，連線線沒有被改變路線，因此Link.points不會被計算。事實上，建立一條新的連線線可能會使一個Layout失效，因此，所有的節點都可能會在不久後被移動。

有時候使用者對圖示做了一些改動，你需要更新資料庫。 通常，你會想要執行一個Model ChangedEvent監聽器, 通過呼叫Model.addChangedListener或者Diagram.addModelChangedListener, 然後把這些改變通知給模型層，再決定把哪些記錄到資料庫裡。請檢視關於Changed Events和Update Demo的討論.

 

這個示例展示了幾個圖表事件："ObjectSingleClicked"（單機物件）,"BackgroundDoubleClicked"（雙擊背景）, 和"ClipboardPasted"（剪貼簿複製）。

例子：

 

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

// 為diagram新增一個“物件單機”事件
diagram.addDiagramListener("ObjectSingleClicked",      
    function(e) {
        var part = e.subject.part;
        //如果滑鼠單機的不是連線線，則顯示資訊："Clicked on" +  滑鼠點選的目標的key值      
        if (!(part instanceof go.Link)) showMessage("Clicked on " + part.data.key);
    }
);

//為diagram新增“背景雙擊”事件
diagram.addDiagramListener("BackgroundDoubleClicked",      
    function(e) { 
        //顯示資訊： “Double-clicked at” + 點選的點的座標值
        showMessage("Double-clicked at " + e.diagram.lastInput.documentPoint); 
    }
);

//為diagram新增“剪貼簿複製貼上”事件
diagram.addDiagramListener("ClipboardPasted",      
    function(e) {
        //複製某個節點Part後，貼上時，顯示資訊：“Pasted” + 複製貼上的節點數量
        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" },  // 從Group外指向Group內
    { from: "Beta", to: "Gamma" },  // 這條連線線是Group內部的
    { from: "Omega", to: "Delta" }  // 從Group指向一個節點
];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

 

2、輸入事件

當發生低階HTML DOM事件時，GoJS會將鍵盤/滑鼠/觸控事件資訊規範化轉換為一個能夠被傳遞給各種事件處理方法且為後面的檢查而儲存的新的 InputEvent（輸入事件）。

 

一個輸入事件，用InputEvent.key存放鍵盤事件, 用InputEvent.button存放滑鼠事件, 用InputEvent.viewPoint存放滑鼠和觸控事件, 用InputEvent.modifiers存放鍵盤和滑鼠事件。

 

圖表的事件處理程式同時也記錄InputEvent.documentPoint，也就是滑鼠事件發生時的文件座標 InputEvent.viewPoint ，以及事件發生時的以毫秒為單位的時間戳 InputEvent.timestamp。

 

輸入事件類還未特定型別的事件提供了很多很便利的屬性。比如，InputEvent.control (如果按下控制鍵)和InputEvent.left (如果按下左/主滑鼠按鈕)。

 

一些工具在滑鼠點選的點可以找到當前的GraphObject（圖形物件）。這些圖形物件就被記為InputEvent.targetObject。

 

3、高階輸入事件

 

一些工具能檢測一系列的輸入事件以組成一些更抽象的使用者事件。比如說，“點選”（滑鼠迅速的按下並放開）和“懸停”（滑鼠靜止不動一段時間）。這些工具會為當前滑鼠所在的點對應的GrapgObject呼叫一個事件處理程式（如果有的話）。這個事件處理程式被當做物件的一個屬性值。它還會沿著 GraphObject.panel的鏈向上冒泡知道這個Part結束。這允許了一個“點選”事件在一個Panel上被申明並應用，即使實際的點選是發生在Panel內部的元素上的。如果滑鼠所在的點沒有物件，那時間就會發生在最外層的圖表上。

 

類似的點選事件屬性包括 GraphObject.click, GraphObject.doubleClick, 和 GraphObject.contextClick。即便沒有GraphObject時，這些事件也會發生——事件會發生在圖表的背景上發生：Diagram.click, Diagram.doubleClick, 和 Diagram.contextClick。這些都是你可以設定為事件處理程式的函式。這些事件是由滑鼠事件和觸控事件引起的。

 

類似的滑鼠移入事件屬性包括GraphObject.mouseEnter, GraphObject.mouseOver和GraphObject.mouseLeave。但是隻有Diagram.mouseOver會被應用到圖表上。

 

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

 

拖拽操作也有對應的事件屬性：GraphObject.mouseDragEnter, GraphObject.mouseDragLeave, 和GraphObject.mouseDrop. 他們適用於靜止的物件，而不是被拖動中的物件。同時，他們也適用於觸控事件的拖拽，而不僅僅是滑鼠事件的拖拽。

 

下面的示例展示了三個高階輸入事件：點選節點、進入/離開group（組）。

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) {  // 改變group的背景畫筆
            var shape = obj.part.findObject("SHAPE");            
            if (shape) shape.fill = "red";
          },
        mouseLeave: function(e, obj, next) {  // 回覆原始的畫筆
            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" },  // 從Group外指向Group內
    { from: "Beta", to: "Gamma" },  // 這條連線線是Group內部的
    { from: "Omega", to: "Delta" }  // 從Group指向一個節點
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

 

3、點選與選中

這個示例同時展示了“點選”和“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”可以全選所有的物件。注意 GraphObject.click事件屬性與Part.selectionChanged事件屬性的區別。當節點上發生什麼事情時，兩個方法都能被呼叫。GraphObject.click事件會在使用者點選節點時發生，選中了節點。但是Part.selectionChanged事件在沒有點選事件（或者任何滑鼠事件）時就會發生——這是由於節點的一個屬性值變了

 

相關推薦

gojs Diagram Events（圖表事件）

事件（Events）   GoJS涵蓋了三種基本事件：DiagramEvents（圖表事件）、InputEvents（輸入事件）以及ChangedEvents（變更事件）。這一頁我們討論前兩種事件；至於最後一種事件請見 Changed Events。  

DOM事件第二彈（UIEvent事件）

復合 綁定 階段 posit 5.1 ble pat fun 出錯 此文章主要總結UIEvent相關的事件，如有不對的地方，歡迎指正。 一、uitls.js(綁定事件公共類) var fixs = { ‘focusin‘: { stand

I/O模型（非同步事件）

非同步事件    WSAEventSelect模型是WindowsSockets提供的另外一個有用的非同步I/O模型。該模型允許一個或多個套接字上接收以事件為基礎的網路事件通知。Windows Sockets應用程式在建立套接字後，呼叫WSAEventSlect()函式，將一

Java的GUI的學習五（窗體事件）

主要是學習來自博主 https://www.cnblogs.com/xingyunblog/p/3842252.html 不過是希望跟著博主寫跟著敲嘿嘿 具體就看這個博主的感覺很棒 窗體是無法直接關閉的，我們需要通過工作管理員或者是那個紅色的點點來結果 事件源就是窗體，frame

webpack Async（非同步事件）使用callback報錯

最近在學習用webpack4構建資源，按照慣例在對html-webpack-plugin擴充套件寫外掛的時候，發現非同步函式裡面 **callback(null, htmlPluginData)**報錯 如下圖： 錯誤 webpack Async（非同步事件）

jQuery中的事件委派（代理事件）delegate

jQuery給我們提供了強大的js庫。我們可以用jQuery指令碼向頁面新增元素，隨著程式進行新增的元素怎麼新增事件呢？就需要使用delegate了。 delegate() 方法可以為已有或新新增的頁面元素繫結已定義的事件：如下：html: <body><div><spa

C# 通俗說 委託（和事件）

1.閒聊 　　編碼一兩年, 　　我走過了欄位, 　　我跑過了類, 　　卻翻不過方法。（不能靈活使用方法吧） 　　(寫這篇部落格全程聽將夜中《永夜》歌曲寫完的，一氣呵成,安利一下) 2.敘事 　　我們在編碼中，經常搗鼓來搗鼓去的無非就是 “ 欄位，方法 ，類這三種。像欄位，類的使用（引用）很簡單，

安卓Tv開發（一）移動智慧電視之焦點控制（觸控事件）

      前言：移動智慧裝置的發展，推動了安卓另一個領域，包括智慧電視和智慧家居，以及可穿戴裝置的大量使用，但是這些裝置上的開發並不是和傳統手機開發一樣，特別是焦點控制和使用者操作體驗風格上有很大的區

一步一步教你寫股票走勢圖——K線圖二（圖表聯動）

K線圖越做發現坑越多，跟之前做的分時圖完全不是一個重量級的啊，分時圖不需要滾動，少走了很多彎路，K線圖因為滾動的問題，會導致很多其他問題，比如： 多個圖表之間滾動時怎麼聯動 高亮滾動衝突 放縮聯動 … 表對齊 下面我們就開始介紹本

canvas學習2（click事件）

這次實現了canvas內部元件的click事件 因為繫結事件只能給canvas本身繫結，所以在判斷是那個元件觸發click要根據滑鼠的座標來判斷。 程式碼如下 <!DOCTYPE html> <html> <head> <met

【iOS開發】如何給字串新增超連線（響應事件）

首先，我們在開發的過程中，會遇到這樣的問題。比如：點選某一部分的文字跳轉到另一介面。無論是登入協議，保險協議等等吧。 點選使用者協議——》跳轉協議介面 但是UITextView提供了新增超連線的方法，ios7.0之後使用。或許你可以使用UILabel屬性字串和UIButt

Android 簡單EventBus登入介面與傳值（粘性事件）

展示效果 新增EventBus匯入依賴 compile 'org.greenrobot:eventbus:3.0.0'11 主MainActivity方法 public classMainAc

react虛擬事件（合成事件）與dom原生事件的混用

react合成事件如果DOM上綁定了過多的事件處理函式，整個頁面響應以及記憶體佔用可能都會受到影響。React為了避免這類DOM事件濫用，同時遮蔽底層不同瀏覽器之間的事件系統差異，實現了一箇中間層——SyntheticEvent。原理React中，如果需要繫結事件，我們常常在

Python35 events（事件）、隊列

python事件（events） 基於event實現綠燈舉例的多線程 程序 def lighter(): count = 0 event.set() ##先設置標誌位為真，表示初始狀態就是綠燈。否則當下面的if count > 5之前，標誌位都是沒有被設置的 while

Backbone入門指南（三）：Events（事件管理）

6. Events (事件管理) 從這一章開始，我將正式介紹Backbone的內容，過程中會有許多例子和程式碼，你應該將這些程式碼複製到你的頁面，並檢視它們的執行效果。 我介紹的第一個模組是Ba

深入解密.NET（Windows事件日誌）

深入 get dex eventlog logs clas per windows ces 測試 using System; using System.Diagnostics; namespace WindowsConsoleApp { //測試

通用事件對象（跨瀏覽器）

方式 veh element and false 使用 n) 如果 event對象 var EventUtil = { addHander: function(element, type, handler) { if (elemen

事件總線（Event Bus）知多少（轉）

分享 gas upd 2.3 pre ict 需要 不同的 lin 1. 引言 事件總線這個概念對你來說可能很陌生，但提到觀察者（發布-訂閱）模式，你也許就很熟悉。事件總線是對發布-訂閱模式的一種實現。它是一種集中式事件處理機制，允許不同的組件之間進行彼此通信而又不需要相互

AngularJs-destroy事件 （頁面離開事件）

userinfo telephone on() function 監聽 user detail ddr troy AngularJs-destroy事件 $scope.$on("$destroy", function() { //清除配置,不

組件之間的通訊：兄弟組件之間的相互通訊（中央事件總線）

temp logs created str 總線 復雜 log 做的 ted 組件之間的通訊： 父->子:通過props,data屬性， 子->父：通過派發事件 兄弟組件：中央事件總線（......data{ Bus:new Vue()}.....） 更為復雜