jsPlumb.js(連線器)API閱讀筆記__js

jsPlumb.js(連線器)API閱讀筆記 jsPlumb DOCS

公司要開始做流程式控制制器，所以先調研下jsPlumb，下文是閱讀jsPlumb提供的document所產生的歸納總結 setup

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

jsPlumb.ready(function(){  ···});//orjsPlumb.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：連續錨 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）。

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

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

在使用過程中，發現其就是指定錨點應該出現在哪個地方。jsPlumb會選取最近的點，來當作錨點。可以設定多個點，來當作可能出現的錨點。
當然，jsPlumb內建了預設的參數，AutoDefault。其實與["Top","Right","Bottom","Left"]相同。 Perimeter Anchors
jsPlumb提供了六種形狀： Circle Ellipse Triangle Diamond Rectangle Square

Continuous Anchors

anchor:"Continuous"//oranchor:["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(),配置元素並隨後從該元素中拖動串連時，將建立並分配一個新的端點 端點的預設類型

Dot：支援三個參數：
radius，預設為10px，定義圓點的半徑
cssClass，附加到Endpoint建立的元素的CSS類
hoverClass，一個CSS類，當滑鼠移至上方在元素或串連的線上時附加到EndPoint建立的元素

Rectangle：支援的參數：
width，預設為20，定義矩形的寬度
height，預設為20，定義矩形的高度
cssClass，附加到Endpoint建立的元素的CSS類
hoverClass，當滑鼠移至上方在元素或串連的線上時附加到EndPoint建立的元素 image：從給定的URL中繪製映像，支援三個參數：
src，必選，指定要使用的映像的URL，
cssClass，附加到Endpoint建立的元素的CSS類
hoverClass，當滑鼠移至上方在元素或串連的線上時附加到EndPoint建立的元素，

Blank：空白 Overlays（疊加層）

jsPlumb有五種類型的疊加：

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

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

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

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

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", { la