jsPlumb（1） - 開始使用

jsPlumb

jsPlumb社區版本爲開發者在他們的網頁上提供可視化的元素鏈接。在現代的瀏覽器使用SVG，在IE8和如下版本使用VML。

jsPlumb沒有額外的依賴。

---

加載和配置

幾種jsPlumb實例化的方式

jsPlumb默認是註冊在瀏覽器的窗口（window）的，爲整個頁面提供靜態實例。你也能夠單獨實例化，使用getInstance 模塊，例如

var firstInstance = jsPlumb.getInstance();

變量firstInstance如今和jsPlumb變量同樣使用，你可使用importDefault設置默認參數，調用connect函數：

firstInstance.importDefaults({
 Connector : [ "Bezier", { curviness: 150 } ],
 Anchors : [ "TopCenter", "BottomCenter" ]
});

firstInstance.connect({
  source:"element1", 
  target:"element2", 
  scope:"someScope" 
});

getInstance也能夠帶參數

var secondInstance = jsPlumb.getInstance({
   PaintStyle:{ 
     lineWidth:6, 
     strokeStyle:"#567567", 
     outlineColor:"black", 
     outlineWidth:1 
  },
  Connector:[ "Bezier", { curviness: 30 } ],
  Endpoint:[ "Dot", { radius:5 } ],
  EndpointStyle : { fillStyle: "#567567"  },
  Anchor : [ 0.5, 0.5, 1, 1 ]
});

secondInstance.connect({ 
  source:"element4", 
  target:"element3", 
  scope:"someScope"   
});

建議本身進行實例化。

---

元素ID

jsPlumb經過id和元素交互，若是id沒有設置，jsPlumb會自動設置一個。建議用戶本身設置。

管理元素id

由於jsp經過id管理元素，因此你得通知jsPlumb元素id的變化，

*jsPlumb.setId(el, newId)設置jsPlumb中的元素id
*jsPlumb.setIdChanged(oldId, newId)改變已有jsPlumb中的元素id

---

方法參數

jsPlumb中大多數方法提供多種對指定元素進行操做的格式。

選擇器/節點列表

jQuery中又選擇器的概念，例如$('.myClass')。在jsPlumb中一樣適用。

jsPlumb也提供NodeList，有幾種方式從DOM獲取到NodeList，最好用的方法是document.querySelectorAll("some selector")

元素ids

元素s

數組s

---

關於Z軸

使用jsPlumb時，你須要考慮UI部分的z-indices（Z指數），特別是不要讓jsPlumb添加到DOM上的元素不要遮蓋其餘元素的交互。

jsPlumb爲Endpoint, Connector and Overlay添加一個元素到DOM上。到目前爲止，一個Connection在每一個終點都有Endpoint，在中間有一個標籤（label），jsPlumb添加四個元素，實際添加的元素取決於渲染器使用的是（SVG仍是VML）。

爲了讓你能正確地組織z參數，jsPlumb給每一個元素添加了CSS類，以下

Component Class
Endpoint _jsPlumb_endpoint
Connector _jsPlumb_connector
Overlay _jsPlumb_overlay

另外，不管何時，當鼠標通過Endpoint或Connection上時，都會觸發_jsPlumb_hover這個類。關於jsPlumb CSS更多類的信息，訪問 this page

jsPlumb在哪兒添加元素？

知道jsPlumb把新加的元素放在DOM的哪裏很重要。若是你想要個簡介的版本（TL;DR（too long, didn’t read）），概括以下：

• 強烈建議在使用jsPlumb前設置一個容器（Container）

• 容器就是你用來和jsPlumb添加的元素交互的一個母元素。

• 若是你沒有指定一個容器，jsPlumb會推斷你調用addEndpoint、makeSource、makeTarget的方法的第一個元素的offsetParent，或者connect的source元素的offsetParent做爲容器。

下面是詳情：

早期版本的jsPlumb把body做爲容器，好處是在支持那些能夠鏈接（connect）的元素上很靈活，可是在一些具體案例中結果不是預期的。

設想一下，在標籤裏有幾個鏈接在一塊兒的元素，你想在表單裏添加元素，讓用戶切換表單時當前的能夠隱藏，那樣全部的jsPlumb相關元素都會被隱藏掉。可是當元素都是在body上時，這就不會發生。

還有就是在一些元素裏包含一個圖表，在溢出時會顯示滑動條，把元素添加到body能夠避免這種事自動發生。

容器

你能夠經過setContainer指定做爲jsPlumb添加元素的容器，或者在jsPlumb.getInstance參數中指定。

重要：若是你使用了jsPlumb的draggable方法使你的UI能夠拖拽（不止是經過jsPlumb添加的），會發生意外。建議使用另外一個實例操做，如：

var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");

舉個栗子

• 設置容器，使用jQuery選擇機制，添加一個Endpoint，相關UI將做爲document body的子元素：

  jsPlumb.setContainer($("body"));
      jsPlumb.addEndpoint(someDiv, { endpoint options });

• 經過DOM

  jsPlumb.setContainer(document.getElementById("foo"));
      jsPlumb.addEndpoint(someDiv, { endpoint options });

• 經過元素id

  jsPlumb.setContainer("containerId");
      jsPlumb.connect({ source:someDiv, target:someOtherDiv });`

• 經過實例化

  var j = jsPlumb.getInstance({              
        Container:"foo"
      });
      jsPlumb.addEndpoint(someDiv, { endpoint options });

容器的CSS

你所選擇的容器會有osition:relative,由於jsPlumb經過容器計算新元素添加的位置。

拖拽

使用jsPlumb交互，拖拽很常見，能夠經過下面來實現：

myInstanceOfJsPlumb.draggable("elementId");

若是你不這麼作的話，jsPlumb就不知道元素被拖拽了，就不能從新渲染頁面。

更多信息，請訪問 this page

執行效率

jsPlumb執行速度和處理鏈接的上限取決於你所運行的瀏覽器。目前，速度依次是Chrome,Safari,Firefox,IE版本越低執行越慢。

懸浮拖拉（suspending drawing）

每次調用connect，addEndpoint時都會從新渲染關聯節點，大多數狀況下這就是你想要的。若是你進行大量操做，建議這樣幹：

jsPlumb.setSuspendDrawing(true);
...

• load up all your data here -
  ...
  jsPlumb.setSuspendDrawing(false, true);

setSuspendDrawing通知jsPlumb要進行大量重繪操做，就是repaintEverything。

批處理

這個函數進入懸停繪畫（suspending drawing）模式，而後再進入普通繪畫模式。

jsPlumb.batch(fn, [doNotRepaintAfterwards]);

舉個栗子

jsPlumb.batch(function() {
  // import here
  for (var i = 0, j = connections.length; i < j; i++) {
      jsPlumb.connect(connections[i]);
  }
});

這裏咱們把connections看成一個對象數組，以做爲connect函數的參數，例如：
{ source:"someElement", target:"someOtherElement" }

默認，會在函數末尾執行重繪的，可是你能夠不這麼作，

jsPlumb.batch(function() {
  // import here
}, true);

這個方法之前叫doWhileSuspended，1.7.3版本改了名字。

錨點類型

Continuous 須要最大的計算量
Dynamic and Perimeter是次慢的，Dynamic默認有60個位置可供選擇
Static和Top`Bottom`同樣，是最快的。