jsPlumb（2）-配置

感覺jsPlumb最容易最直觀是重寫jsPlumb的默認配置。若是你沒這麼作，你不得不每次調用都得重寫這些值。connect和addEndpoint的每一個參數都和jsPlumb的默認值有關。

默認設置存儲在jsPlumb.Defaults，是個javascript對象。有效健，初始值以下：

Anchor : "BottomCenter",
Anchors : [ null, null ],
ConnectionsDetachable   : true,
ConnectionOverlays  : [],
Connector : "Bezier",
Container : null,
DoNotThrowErrors  : false,
DragOptions : { },
DropOptions : { },
Endpoint : "Dot",
Endpoints : [ null, null ],
EndpointOverlays : [ ],
EndpointStyle : { fillStyle : "#456" },
EndpointStyles : [ null, null ],
EndpointHoverStyle : null,
EndpointHoverStyles : [ null, null ],
HoverPaintStyle : null,
LabelStyle : { color : "black" },
LogEnabled : false,
Overlays : [ ],
MaxConnections : 1,
PaintStyle : { lineWidth : 8, strokeStyle : "#456" },
ReattachConnections : false,
RenderMode : "svg",
Scope : "jsPlumb_DefaultScope"

注意：EndpointHoverStyle 的fillStyle是null
。也就是說jsPlumb使用來自Connector的hover style的strokeStyle來填充Endpoint。

EndpointStyle和EndpointStyles你均可以定製，你能夠讓每一個鏈接的Endpoint都不同。Endpoint和Endpoints也同樣。jsPlumb會先檢查用戶的Endpoint和EndpointStyle數組，而後再檢查默認的。

你能夠經過importDefaults方法覆蓋默認值：

jsPlumb.importDefaults({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: 'rgba(200,0,0,0.5)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [{ fillStyle:"#225588" }, { fillStyle:"#558822" }]
});

加載並執行這段代碼後，就會獲得效果。

每條默認設置的解釋

• Anchor 對於那些沒有聲明Anchor的Endpoint，對Connection的source和target也適用。

• Anchors 全部Connection的source和target的Anchors

• Connector 給默認Connector使用

• ConnectionsDetachable Connections是否可經過鼠標分離

• Container

• DoNotThrowErrors 當Anchor, Endpoint or Connector被請求卻不存在時是否報錯

• ConnectionOverlays 默認Connection的遮罩

• DragOptions 可經過jsPlumb.draggable配置

• DropOptions 配置Endpoint是否能夠drop鏈接

• Endpoint Endpoint的定義

• Endpoints jsPlumb.connect的source 和 target

• EndpointOverlays 默認全部的Overlays

• EndpointStyle

• EndpointStyles

• EndpointHoverStyle

• EndpointHoverStyles

• HoverPaintStyle

• LabelStyle

• LogEnabled

• Overlays

• MaxConnections

• PaintStyle

• ReattachConnections

• RenderMode

• Scope

jsPlumb.getInstance

經過 jsPlumb.getInstance

jsPlumb.getInstance({
  PaintStyle : {
    lineWidth:13,
    strokeStyle: 'rgba(200,0,0,100)'
  },
  DragOptions : { cursor: "crosshair" },
  Endpoints : [ [ "Dot", { radius:7 } ], [ "Dot", { radius:11 } ] ],
  EndpointStyles : [
    { fillStyle:"#225588" }, 
    { fillStyle:"#558822" }
  ]
});