jsPlumb筆記

setup

如果不使用jQuery或者類jQuery庫，則傳入的節點得用id的形式,否則jsPlumb會爲元素設置一個id。

jsPlumb.ready(function(){
  ···
});
//or
jsPlumb.bind("ready",function(){
  ···
});

最好確認jsPlumb加載完畢之後，再開始使用相關功能。

默認情況下，jsPlumb在瀏覽器的窗口中註冊，爲整個頁面提供一個靜態實例，所以也可以把它看成一個類，來實例化jsPlumb：

var firstInstance = jsPlumb.getInstance();

如果在使用過程中，元素的id產生了新的變化（多是生成了新的節點，舊的節點被刪除了）。則可以：

• jsPlumb.setId(el,newId)
• jsPlumb.setIdChanged(oldId,newId)


在使用過程中，每個部分的z-index需要注意，否則連線可能會被覆蓋，jsPlumb會爲每個節點設置端點，用於定位端點。

jsPlumb也提供了拖動方法：

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

重繪，每次使用連線時，都會導致相關聯的元素重繪，但當加載大量數據時，可以使用：

jsPlumb.setSuspendDrawing(true);

jsPlumb.setSuspendDrawing(false,true);

這裏第二個參數的true，會使整個jsPlumb立即重繪。

也可以使用batch：

jsPlumb.batch(fn,[doNotRepaintAfterwards]);

這個函數也是一樣，可以先將所有的連接全部註冊好，再一次重繪。

這個方法在1.7.3版本之前名稱爲doWhileSuspended.

config defaults

當然，jsPlumb會有一些默認的參數：
分爲全局默認參數和連線默認參數，

Anchor : "BottomCenter",//端點的定位點的位置聲明（錨點）：left，top，bottom等
Anchors : [ null, null ],//多個錨點的位置聲明
ConnectionsDetachable   : true,//連接是否可以使用鼠標默認分離
ConnectionOverlays  : [],//附加到每個連接的默認重疊
Connector : "Bezier",//要使用的默認連接器的類型：折線，流程等
Container : null,//設置父級的元素，一個容器
DoNotThrowErrors  : false,//如果請求不存在的Anchor，Endpoint或Connector，是否會拋出
DragOptions : { },//用於配置拖拽元素的參數
DropOptions : { },//用於配置元素的drop行爲的參數
Endpoint : "Dot",//端點（錨點）的樣式聲明（Dot）
Endpoints : [ null, null ],//多個端點的樣式聲明（Dot）
EndpointOverlays : [ ],//端點的重疊
EndpointStyle : { fill : "#456" },//端點的css樣式聲明
EndpointStyles : [ null, null ],//同上
EndpointHoverStyle : null,//鼠標經過樣式
EndpointHoverStyles : [ null, null ],//同上
HoverPaintStyle : null,//鼠標經過線的樣式
LabelStyle : { color : "black" },／／標籤的默認樣式。
LogEnabled : false,//是否打開jsPlumb的內部日誌記錄
Overlays : [ ],//重疊
MaxConnections : 1,//最大連接數
PaintStyle : { lineWidth : 8, stroke : "#456" },//連線樣式
ReattachConnections : false,//是否重新連接使用鼠標分離的線
RenderMode : "svg",//默認渲染模式
Scope : "jsPlumb_DefaultScope"//範圍，標識

如果是全局則可以使用jsPlumb.importDefaults({···})，
也可以在實例化時，重新定義jsPlumb.getInstance({···})，

Basic Concepts

jsPlumb關鍵點就是連接線，從上面也可以看出，大部分的配置項都是爲了線而設。
其分爲五個方面：

• Anchor：錨點位置
• Endpoint：端點，連接的起點或終點
• Connector：連線，連接兩個節點的直觀表現，有四種默認類型：Bezier（貝塞爾曲線），Straight（直線），Flowchart（流程圖），State machine（狀態機）
• Overlay：裝飾連接器的組件，類似箭頭之類
• Group：包含在某個其他元素中的一組元素，可以摺疊，導致與所有組成員的連接被合併到摺疊的組容器上。

Anchor

錨點位置有四種類型：

• Static：靜態，會固定到元素上的某個點，不會移動
• Dynamic：動態，是靜態錨的集合，就是jsPlumb每次連接時選擇最合適的錨
• Perimeter anchors：周邊錨，動態錨的應用。
• Continuous anchors：連續錨

1. Static
jsPlumb有九個默認位置，元素的四個角，元素的中心，元素的每個邊的中點。

• Top(TopCenter),TopRight,TopLeft
• Right(RightMiddle)
• Bottom(BottomCenter),BottomRight,BottomLeft
• Left(LeftMiddle)
• center
  可以使用基於數組的形式來定義錨點位置：[x,y,dx,dy,offsetX,offsetY]。
  [0,0]表示節點的左上角。
  x表示錨點在橫軸上的距離，y表示錨點在縱軸上的距離，這兩個值可以從0到1來設置，0.5爲center。
  而dx表示錨點向橫軸射出線，dy表示錨點向縱軸射出線，有0，-1，1三個值來設置。0爲不放射線。
  offsetX表示錨點偏移量x（px），offsetY表示錨點偏移量y（px）。

2. Dynamic Anchors

選擇每當某物移動或在UI中繪製時最合適的位置。

var dynamicAnchors = [ [0.2,0,0,0],"Top","Bottom" ]

在使用過程中，發現其就是指定錨點應該出現在哪個地方。jsPlumb會選取最近的點，來當作錨點。可以設置多個點，來當作可能出現的錨點。

當然，jsPlumb自帶了默認的參數，AutoDefault。其實與["Top","Right","Bottom","Left"]相同。

3. Perimeter Anchors

jsPlumb提供了六種形狀：

• Circle
• Ellipse
• Triangle
• Diamond
• Rectangle
• Square

4. Continuous Anchors

anchor:"Continuous"
//or
anchor:["Continuous",{faces:["top","left"]}]

faces同樣有四個值：top,left,right,bottom。

將CSS類與Anchors相關聯

var ep = jsPlumb.addEndpoint("ele1",{
  anchor:[0,0,0,0,0,0,"test"]
});

也可以修改前綴：

jsPlumb.endpointAnchorClass="anchor_";

Connectors

連接器是實際連接UI元素的線，默認連接器是貝塞爾曲線，也就是默認值是"Bezier";
這裏纔是畫線的地方，

• Bezier：它有一個配置項，curviness（彎曲度），默認爲150.這定義了Bezier的控制點與錨點的距離
• Straight：在兩個端點之間繪製一條直線，支持兩個配置參數：stub，默認爲0。gap，默認爲0
• Flowchart：由一系列垂直或水平段組成的連接。支持四個參數，stub，默認爲30；alwaysRespectStubs，默認爲false；gap，默認爲0；midpoint，默認爲0.5；cornerRadius，默認爲0；
• StateMachine：狀態器，支持在同一元素上開始和結束的連接，支持的參數有：margin，默認爲5；curviness，默認爲10；proximityLimit，默認爲80；

Endpoints

端點的配置和外觀參數。
jsPlumb帶有四個端點實現-點，矩形，空白和圖像，可以在使用connect(),addEndpoint(),makeSource()或jsPlumb.makeTarget時使用endpoint參數指定Endpoint屬性。

給端點進行配置

• jsPlumb.connect(),創建連接的時候可以配置端點的屬性
• jsPlumb.addEndpoint(),創建一個新的端點時配置屬性
• jsPlumb.makeSource(),配置元素並隨後從該元素中拖動連接時，將創建並分配一個新的端點

端點的預設類型

1. Dot：支持三個參數：
   radius，默認爲10px，定義圓點的半徑
   cssClass，附加到Endpoint創建的元素的CSS類
   hoverClass，一個CSS類，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素

2. Rectangle：支持的參數：
   width，默認爲20，定義矩形的寬度
   height，默認爲20，定義矩形的高度
   cssClass，附加到Endpoint創建的元素的CSS類
   hoverClass，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素

3. image：從給定的URL中繪製圖像，支持三個參數：
   src，必選，指定要使用的圖像的URL，
   cssClass，附加到Endpoint創建的元素的CSS類
   hoverClass，當鼠標懸停在元素或連接的線上時附加到EndPoint創建的元素，

4. Blank：空白

Overlays（疊加層）

jsPlumb有五種類型的疊加：

1. Arrow：箭頭，在連接器的某個點繪製的可配置箭頭，可以控制箭頭的長度和寬度,參數有：
   width，箭頭尾部的寬度
   length，從箭頭的尾部到頭部的距離
   location，位置，建議使用0～1之間，當作百分比，便於理解
   direction，方向，默認值爲1（表示向前），可選-1（表示向後）
   foldback，折回，也就是尾翼的角度，默認0.623，當爲1時，爲正三角
   paintStyle，樣式對象

2. Label：在連接點的可配置標籤，參數有
   label，要顯示的文本
   cssClass，Label的可選css
   labelStyle，標籤外觀的可選參數：font，適應canvas的字體大小參數；color，標籤文本的顏色；padding，標籤的可選填充，比例而不是px；borderWidth，標籤邊框的可選參數，默認爲0；borderStyle，顏色等邊框參數
   location，位置，默認0.5
   也可以使用getLabel，和setLabel，來獲取和設置label的文本,可傳函數

3. PlainArrow：箭頭形狀爲三角形
   只是Arrow的foldback爲1時的例子，參數與Arrow相同

4. Diamond：棱形
   同樣是Arrow的foldback爲2時的例子，參數與Arrow相同

5. Custom：自定義
   允許創建自定義的疊加層，需要使用create(),來返回DOM元素或者有效的選擇器（ID）
   
   

   var conn = jsPlumb.connect({ source:"d1", target:"d2", paintStyle:{ stroke:"red", strokeWidth:3 }, overlays:[ ["Custom", { create:function(component) { return $("<select id='myDropDown'><option value='foo'>foo</option><option value='bar'>bar</option></select>"); }, location:0.7, id:"customOverlay" }] ] });

   
   

作爲[0,1]的小數，其表示沿着由連接器內接的路徑的一些成比例的行程，默認值爲0.5。
作爲大於1的整數，表示從起點沿連接器行進的某些絕對像素數。等於1時，在終點。
作爲小於零的整數，其指示沿着連接器從端點向後行進的一些絕對值的像素。等於0時，在起點。

所有疊加層都支持：
getLocation-返回當前位置
setLocation-設置當前位置

添加疊加層

例子：

jsPlumb.connect({
  overlays:[
    "Arrow",
      [ "Label", { label:"foo", location:0.25, id:"myLabel" } ]
    ]
});

而在addEndpoint和makeSource方法中，則不能使用overlays,需要使用connectOverlays.

也可以使用addOverlay:

var e = jsPlumb.addEndpoint("someElement");
e.addOverlay([ "Arrow", { width:10, height:10, id:"arrow" }]);

當然還有獲取疊加層的方法：getOverlay(id)這裏的id與元素中的id不同，只是組件在jsPlumb中的唯一標識而已，在控制檯打印之後，能看到內部提供了很多方法,另外注意原型鏈中的方法。

在官方的Hiding/Showing Overlays中，向我們展示了setVisible,showOverlay(id),hideOverlay(id)，removeOverlay(id)等方法，當然，因爲對象中有DOM元素，我們也可以使用其他方法來控制DOM元素。

Groups

相當於給節點之間加入了分組的概念，一旦分組，那麼就可以使用組來控制組下的所有元素。
但這裏的分組仍然是在jsPlumb中建立索引，當有相關事例時，再進行介紹。

Drag

如果不使用jsPlumb提供的拖動，則需要使用repaint()來對拖動之後的連線進行重繪。
而當修改了節點的層級，或者偏移則需要使用revalidate(container)來刷新。

Establishing Connections

在上面的例子中，已經介紹了基本的連接方式jsPlumb.connect({source:"element1",target:"element2"})。
這種方式創建的連接線一旦移除，則創建的端點也會自動移除。如果不想端點被移除，則可以繼續加參數，將
deleteEndpointsOnDetach設爲false。如果不想鼠標能夠移除連接線，則可以在局部配置中將ConnectionsDetachable設爲false，或者在connect時，加入detachable:false。

拖放連接

一開始就要創建一個端點來作爲源點

var endpoint = jsPlumb.addEndpoint('elementId',{isSource:true})

這樣就可以從該端點拉線出去。

如果給另一個創建的點加入isTarget:true，則就可以用上面的點連入這個點。

或者使用makeSource或者makeTarget：

jsPlumb.makeSource("ele1",{
  anchor:"Continuous",
  maxConnections:1
  ···
})

上述例子中，如果配置了maxConnections，則最多隻能出現這個參數的連線，一旦多於這個數目的連線，就可以用onMaxConnections(params,originalEvent)這個回調函數來做其他事.
connect與makeSource，makeTarget，都可以配置第三個參數，相當於公共配置參數，與第二個參數類似。
-----------------------------------------------------------------------

在connect中如果使用newConnection：true參數，則會取消makeTarget，makeSoucr，addEndpoint中所添加的配置項,重繪連接線。

而makeTarget也有onMaxConnections方法。
因爲makeTarget包括上面介紹的isTarget都可以指向源點元素，所以，如果不想造成迴環（自己連自己），則可以在makeTarget中設置allowLoopback：false.如果只想產生一個端點，而不是多個端點，則需要使用uniqueEndpoint:true.
默認情況下，使用makeTarget創建的端點將deleteEndpointsOnDetach設置爲true，即刪除連線，端點刪除；如果不要刪除，則需要手動改爲false。
--------------------------------------------------------

如果既配置了元素可拖動，又設置了元素可拖放連接，那jsPlumb沒有辦法區分拖動元素和從元素中拖動連接，所以它提供了filter方法。

jsPlumb.makeSource("foo",{
  filter:"span",
  filterExclude:true
});

則除span元素的其他元素都可以創建拖放連接，filter也接受函數。filter:function(event,element).

也可以使用isTarget("id"),isSource("id")來判斷節點是否成爲了源點。
如果配置了source和target之後，想切換源的激活狀態，則可以使用setTargetEnabled(id),setSourceEnabled(id)。
如果想取消makeTarget和makeSource所創建的源點，可以使用：

• unmakeTarget("id")
• unmakeSource("id")
• unmakeEveryTarget
• unmakeEverySource

Drag and Drop scope

如果使用了jsPlumb自帶的drag或者drop，那麼給端點配置scope是很有必要的，這意味着之後創建端點只能連接到對應scope的端點。如果不設置scope，其默認的scope是一樣的。

Removeing Nodes

移除節點沒什麼好說的，關鍵還是要移除與之關聯的端點和連接線。

Removeing Connections／Endpoints

Connections

1. detach

   var conn = jsPlumb.connect({...});
   jsPlumb.detach(conn);

   如果使用該方法來刪除連接線，那麼會有幾種情況：
   

• 如果使用jsPlumb.connect創建的線，而且沒有設置deleteEndpointsOnDetach:false,則使用detach時，端點也會一起被移除。
• 如果通過makeSource配置的元素創建了連接線，而且沒有設置deleteEndpointsOnDetach:false,則使用detach時，端點也會一起被移除。
• 如果使用addEndpoint註冊的元素通過鼠標創建了連接線，則不會刪除端點。

1. detachAllConnections(el,[params])
   用於刪除元素上的所有連接線。

2. detachEveryConnection()
   刪除所有連接線。

Endpoints

1. deleteEndpoint
   刪除一個端點。
2. deleteEveryEndpoint
   刪除所有的端點

Connection and Endpoint Types

可以通過提供的方法來動態的修改連接線或端點的樣式。

Connection Type

jsPlumb.registerConnectionType("example",{
  paintStyle:{stroke:"blue",strokeWidth:5},
});
var c = jsPlumb.connect({source:"someDiv",target:"someOtherDiv"});
c.bind("click",function(){
  c.setType("example")
});

當點擊連接線時，會替換連接線的樣式

也可以使用：

jsPlumb.registerConnectionTypes({
  "basic":{
    paintStyle:{stroke:"blue",strokeWidth:7}
  },
  "selected":{
    paintStyle:{stroke:"red",strokeWidth:5}
  }
});

c.bind("click",function(){
  c.toggleType("selected");
});

而type支持的屬性都和css相關：

• anchor
• anchors
• detachable
• paintStyle
• hoverPaintStyle
• scope
• cssClass
• parameters
• overlays
• endpoint

Endpoint type

jsPlumb.registerEndpointTypes({
  "basic":{
    paintStyle:{fill:"blue"}
  }
});

端點的type支持的參數：

• paintStyle
• endpointStyle
• hoverPaintStyle
• endpointHoverStyle
• maxConnections
• connectorStyle
• connectorHoverStyle
• connector
• connectionType
• scope
• cssClass
• parameters
• overlays

Events

首先看個小例子：

jsPlumb.bind("connection",function(info){
  console.log(info);
});

connection(info,originalEvent)即監聽所有的連接事件。info包含的信息有：

• connection
• sourceId
• targetId
• source
• target
• sourceEndpoint
• targetEndpoint

connectionDetached(info,originalEvent)即監聽當連接斷掉時的事件。info類似connection.

右鍵點擊也有相應的contextmenu方法。

關於connection和endpoint的事件方法，請參考官網api。

記錄下overlay的事件。

jsPlumb.connect({
  source:"el1",
  target:"el2",
  overlays:[
    ["Label",{
      events:{
        click:function(labelOverlay,originalEvent){
          console.log(labelOverlay);
        }
      }
      }
    }],
  ]
})

同樣，使用unbind方法，可以移除上面所添加的監聽。

篩選jsPlumb

使用jsPlumb.select()方法，用於在Connections列表上做篩選，打印一下值：

就可以使用這些方法對於連接線來進行獲取（get）和修改（set）。
還有getConnections,getAllConnections()等方法也可以獲取到連接線，只不過這兩個方法沒有上面slect的方法，相當於靜態屬性

使用jsPlumb.selectEndpoints()方法，用於在Endpoints上做篩選，同樣有相應的方法。

select()和selectEndpoints()都有一個each方法，用於對篩選出的方法進行操作。

Repainting an element or elements

當需要對修改過後的元素重新計算端點和連接線時，則可以使用

jsPlumb.repaint(el,[ui])

或

jsPlumb.repaintEverything()

Element Ids

當元素上的id也被改變時，可以使用

jsPlumb.setId(el,newId);
//or
jsPlumb.setIdChanged(oldId,newId);

來重新對之前註冊的節點進行修改。