jsplumb综合记录

阅读更多

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

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

Changing Element Id
jsPlumb.setId(el, newId)
jsPlumb.setIdChanged(oldId, newId)

Component	Class
Endpoint	jsplumb-endpoint
Connector	jsplumb-connector
Overlay	jsplumb-overlay

set container
jsPlumb.Defaults.Container
jsPlumb.setContainer($("body"));
jsPlumb.setContainer(document.getElementById("foo"));
jsPlumb.setContainer("containerId");

Also Important If you happen to be using jsPlumb's draggable method to make other parts of your UI draggable (ie. not just things you're plumbing together), 
be careful not to call draggable on the element that is acting as the Container for the current instance, or you will see some odd situations occur when dragging. 
It is suggested that the best thing to do if you wish to use jsPlumb to enable dragging on non-plumbed elements is to create a new instance:
var nonPlumbing = jsPlumb.getInstance();
nonPlumbing.draggable("some element");


jsPlumb.addEndpoint(someDiv, { endpoint options });
jsPlumb.connect({ source:someDiv, target:someOtherDiv });


//挂起绘图
//默认每调用一次connect or addEndpoint就会引起关联元素的重绘(因为要画出anchor、endpoint、connector、overlay)
//这样如果有多个connect or addEndpoint操作就会引出多次绘图，在一些慢浏览器上会造成bad experience
//因此应该在需要多次connect or addEndpoint操作之前声明阻止绘图，在操作完成之后再一次过把全部图画出来（默认第二个参数为true时会调用repaintEverything方法）
jsPlumb.setSuspendDrawing(true);
...
- load up all your data here -
...
jsPlumb.setSuspendDrawing(false, true);
或者使用函数模版
jsPlumb.batch(fn, [doNotRepaintAfterwards]);	//	第二个参数设置为true时，不会把图画出来

------------------------------------------------
Anchor用来设置position和rotation

模版：
jsPlumb.addEndpoint("someElement", {
  endpoint:"Dot",
  anchor:[ 0.5, 1, 0, 1, 0, 50 ]
});

anchor:[ 0.5, 1, 0, 1, 0, 50 ]	
前两个是设置anchor的x、y坐标的（相对于someElement元素），取值范围为0-1，是一个百分比数值，x表示相对于someElement的宽度，y表示相对于someElement的高度
接着的两个参数是设置曲线的发射方向的，取值范围是1、0、-1，例如[-1,0]表示曲线由端点的左方发出，[0,1]表示曲线由端点的下方发出，[-1,1]表示曲线有端点的左下方发出
最后两个参数是设置端点离端点设定位置（就是最开始的两个参数所设定的位置）的远离距离的，也就是端点最后确定展示的位置

jsPlumb.addEndpoint("someDiv", {
    endpoint:"Dot",
    anchor:[ "Perimeter", { shape:"Square", anchorCount:150 }]
});
//anchor:["Continuous", { faces:[ "top", "left" ] } ]
------------------------------------------------

connector
"Straight", {"stub": 10, "gap": 0}  stub与gap都是设置直线离点的偏移距离

You can specify one or more overlays when making a call to jsPlumb.connect, jsPlumb.addEndpoint or 
jsPlumb.makeSource (but not jsPlumb.makeTarget: overlays are always derived from what the source of a Connection defines) 

------------------------------------------------

addEndpoint与makeSource、makeTarget的区别是前者会在元素上生成端点，而后者不会生成端点，只有在真正连接时才生成端点

Note that this does not affect existing Connections. It affects only Connections that are created after you set the new Type(s) on an Endpoint.
为端点添加type，并不会也作用到已有的connection，只会作用到之后从这端点拖拽出的connection

var endpointOptions = { 
  isTarget:true, 
  uniqueEndpoint:true,	//只产生一个端点
  endpoint:"Rectangle", 
  paintStyle:{ fillStyle:"gray" } 
};

connection很多特性默认来自endpoint的属性，而作为有source，则connection和target的特性默认来自source

------------------------------------------------

var arrowCommon = { foldback: 0.7, fillStyle: color, width: 14 },
	overlays = [
		[ "Arrow", { location: 0.7 }, arrowCommon ],
		[ "Arrow", { location: 0.3, direction: -1 }, arrowCommon ]
	];
instance.connect({source:"chartWindow2", target:"chartWindow5", overlays: overlays});	//这种声明了源和目的的只会展示一个arrow（由源点指向目的点的）
instance.connect({uuids: ["chartWindow3-bottom", "chartWindow6-top" ], overlays: overlays, detachable: true, reattach: true});//这种没有声明源和目的，会生成两个arrow

------------------------------------------------

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

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

var c = jsPlumb.connect({
  source:"d1", 
  target:"d2", 
  overlays:[
    [ "Label", {label:"FOO", id:"label"}]
  ] 
});
var label = c.getOverlay("label");
/*	显示隐藏overlay的方法
	// now you can hide this label:
	label.setVisible(false);
	// there are also hide/show methods:
	label.show();
	label.hide();
	//或者
	c.hideOverlay("label");
	c.showOverlay("label");
	c.removeOverlay("label");
*/
console.log("Label is currently", label.getLabel());
label.setLabel("BAR");
console.log("Label is now", label.getLabel());

Both Connections and Endpoints support Label Overlays, and because changing labels is quite a common operation, 
setLabel and getLabel methods have been added to these objects:
var conn = jsPlumb.connect({
  source:"d1", 
  target:"d2",
  label:"FOO"
});
console.log("Label is currently", conn.getLabel());
conn.setLabel("BAR");
console.log("Label is now", conn.getLabel());
//setLabel through function
conn.setLabel(function(c) {
  var s = new Date();
  return s.getTime() + "milliseconds have elapsed since 01/01/1970";
});

//自定义overlay
var conn = jsPlumb.connect({
  source:"d1",
  target:"d2",
  paintStyle:{
    strokeStyle:"red",
    lineWidth:3
  },
  overlays:[
    ["Custom", {
      create:function(component) {
        return $("foobar");                
      },
      location:0.7,
      id:"customOverlay"
    }]
  ]
});

var common = {
    cssClass:"myCssClass"
};
jsPlumb.connect({
  source:"someDiv",
  target:"someOtherDiv",
  anchor:[ "Continuous", { faces:["top","bottom"] }],
  endpoint:[ "Dot", { radius:5, hoverClass:"myEndpointHover" }, common ],
  connector:[ "Bezier", { curviness:100 }, common ],
  overlays: [
        [ "Arrow", { foldback:0.2 }, common ],
        [ "Label", { cssClass:"labelClass" } ]  
    ]
});