jsplumb事件 easy-flow

 

參考 https://www.jianshu.com/p/c2c4f7fdffa1

 

jsPlumb支持綁定到Connections，Endpoints和Overlays上的幾個不同事件，以及jsPlumb對象本身。

jsPlumb事件

要在jsPlumb本身（或jsPlumb實例）上綁定事件，請使用jsPlumb.bind(event, callback)

jsPlumb.bind("connection", function(info) {
   .. update your model in here, maybe.
});

可以在jsPlumb類上綁定的事件：

connection（info, originalEvent）- 通知連接建立

info具有的屬性：

• connection: 新連接，可以註冊監聽
• sourceId: 連接的源元素id
• targetId: 連接的目標元素id
• source: 連接的源元素
• target: 連接的目標元素
• sourceEndpoint: 連接的源端點
• targetEndpoint: 連接的目標端點

originalEvent：建立連接的原始鼠標事件。
注： jsPlumb.connect或者鼠標連線時觸發此事件

connectionDetached（info，originalEvent）- 通知連接斷開

info具有的屬性：

• connection: 已分離的連接
• sourceId: 分離之前連接的源元素id
• targetId: 分離之前連接的目標元素id
• source: 分離之前連接的源元素
• target: 分離之前連接的目標元素
• sourceEndpoint: 分離之前連接的源端點
• targetEndpoint: 分離之前連接的目標端點

連接到某個節點之前放棄新拖動的Connection時不會觸發此事件，可以使用connectionAborted捕獲。

originalEvent：斷開連接的原始鼠標事件。

connectionMoved（info，originalEvent）- 通知已將現有連接的源或目標端點拖動到某個新位置

info具有的屬性：

• index: 源端點爲0，目標端點爲1
• originalSourceId: 移動前連接的源元素id
• newSourceId: 移動後連接的源元素id
• originalTargetId: 移動前連接的目標元素id
• newTargetId: 移動後連接的目標元素id
• originalSourceEndpoint: 移動前的源端點
• newSourceEndpoint: 移動後的源端點
• originalTargetEndpoint: 移動前的目標端點
• newTargetEndpoint: 移動後的目標端點

connectionAborted（connection，originalEvent）在連接到端點或目標元素之前放棄拖動連接時觸發

connectionDrag（connection）- 正在拖動現有連接

注：當此事件觸發時，連接的目標端點是jsPlumb用於拖動的瞬態元素，隨後在建立或中止連接時將從DOM中刪除。

connectionDragStop（connection）- 連接拖動結束

click（connection, originalEvent）- 單擊連接

dblclick（connection, originalEvent）- 雙擊連接

endpointClick（connection, originalEvent）- 單擊端點

endpointDblClick（connection, originalEvent）- 雙擊端點

contextmenu（connection, originalEvent）- 右鍵單擊某個給定組件jsPlumb將報告對Connections和Endpoints的右鍵單擊

beforeDrop（info）- 刪除新連接或現有連接時觸發此事件

info具有的屬性：

• index: 源端點爲0，目標端點爲1
• sourceId: 連接的源元素id
• targetId: 連接的目標元素id
• scope: 連接的範圍
• connection: 實際的Connection對象。可以訪問Connection中的“端點”數組，以獲取連接中涉及的端點，但注意，在拖動連接時，目標端點將始終是僅在拖動的生命週期內存在的瞬態端點。要獲取正在刪除的連接端點，請使用dropEndpoint。
• dropEndpoint: 這是刪除連接的實際端點。可能爲null，因爲如果在已調用makeTarget的元素上刪除Connection，則不會設置它
• targetEndpoint: 分離之前Connection中的目標端點

beforeDetach（connection）- 斷開連接時觸發此事件。connection參數爲剛斷開的Connection。如果此攔截器返回false將會中止連接斷開。

beforeDrag（connection）- 開始拖動新連接時觸發此事件。

• endpoint: 拖動連接的端點
• source: 端點所屬的源
• sourceId: 端點所屬的源ID

beforeDrag與其他攔截器的操作略有不同：從攔截器函數返回false將取消當前拖動，也可以從攔截器返回一個對象，此對象將作爲data被傳進新連接的構造函數中:

jsPlumbInstance.bind("beforeDrag", function(params) {
  return {
   foo:"bar"
  }
});

如果已定義參數化連接類型，此功能特別有用。使用此機制，可以使用選擇的數據填充新拖動的連接。
注: 1.7.6之前的所有jsPlumb版本，新的連接拖動以及拖動現有的連接都會觸發beforeDetach。從1.7.6開始，後一種行爲已被移至 beforeStartDetach攔截器。

beforeStartDetach（connection）- 開始拖動現有連接時觸發此事件。

• endpoint: 拖動連接的端點
• source: 端點所屬的源
• sourceId: 端點所屬的源ID
• connection: 即將被拖動的連接

返回false，取消拖動。

連接事件

綁定到Connection上的事件，還可以使用以下bind方法：

var connection = jsPlumb.connect({source:"d1", target:"d2"});
connection.bind("click", function(conn) {
    console.log("you clicked on ", conn);
});

這些是可以綁定到連線事件：

• click(connection, originalEvent) - 單擊連接。
• dblclick(connection, originalEvent) - 雙擊連接。
• contextmenu(connection, originalEvent) - 右鍵單擊​​連線。
• mouseover(connection, originalEvent) - 鼠標放在連線上。
• mouseout(connection, originalEvent) - 鼠標移出連線。
• mousedown(connection, originalEvent) - 連接上的鼠標按鈕被按下。
• mouseup(connection, originalEvent) - 連接上的鼠標按鈕被釋放。

端點事件

綁定到端點上的事件，使用以下bind方法：

var endpoint = jsPlumb.addEndpoint("d1", { someOptions } );
endpoint.bind("click", function(endpoint) {
    console.log("you clicked on ", endpoint);
});

這些是可以綁定到端點的事件：

• click(endpoint, originalEvent) - 單擊端點。
• dblclick(endpoint, originalEvent) - 雙擊端點。
• contextmenu(endpoint, originalEvent) - 右鍵單擊​​端點。
• mouseover(endpoint, originalEvent) - 鼠標放在端點上。
• mouseout(endpoint, originalEvent) - 鼠標移出端點。
• mousedown(endpoint, originalEvent) - 端點上的鼠標按鈕被按下。
• mouseup(endpoint, originalEvent) - 端點上鼠標按鈕被釋放。
• maxConnections(info, originalEvent) - 在已具有最大連接數的端點上刪除連接。
  info具有的屬性：
  • endpoint：刪除連線的端點
  • connection：刪除的連接
  • maxConnections：端點的maxConnections值

覆蓋事件

在Overlay上註冊事件偵聽器是一個稍微不同的過程 - 將它們作爲Overlay構造函數的參數。

以下是在Overlay上註冊點擊監聽器的方法：

jsPlumb.connect({
    source:"el1",
    target:"el2",
    overlays:[
      [ "Label", {
        events:{
          click:function(labelOverlay, originalEvent) { 
            console.log("click on label overlay for :" + labelOverlay.component); 
          }
        }
      }],
      [ "Diamond", {
        events:{
          dblclick:function(diamondOverlay, originalEvent) { 
            console.log("double click on diamond overlay for : " + diamondOverlay.component); 
          }
        }
      }]    
    ]
  });

解除綁定事件

在jsPlumb對象以及Connections和Endpoints上，可以使用unbind方法刪除監聽器。

//取消綁定事件
jsPlumb.unbind("click");

或者

//解除所有事件
var e = jsPlumb.addEndpoint("someDiv");
e.bind("click", function() { ... });
e.bind("dblclick", function() { ... });

...

e.unbind("click");