详解jsPlumb这个javascript的可拖动连线库

由于项目需要，要做一个类似于Asure的machine learning类似的界面，这就需要用到一个可以拖动的连线javascript库类。找了半天，发现jsPlumb应该是开源里面比较好的一个了，所以这里一边摸索，一边和大家分享。

首先在git上下载jsPlumb的源码:

git clone https://github.com/sporritt/jsPlumb.git

然后打开目录statemachine里的demo.js：

首先上图：

请大家耐心的看下去，我会逐行解释

jsPlumb.ready(function () {    // setup some defaults for jsPlumb.    var instance = jsPlumb.getInstance({        Endpoint: ["Dot", {radius: 2}], //这个是控制连线终端那个小点的半径        Connector:"StateMachine", //这个就是大类了        HoverPaintStyle: {strokeStyle: "#1e8151", lineWidth: 2 },//这个是鼠标放在连线上显示的效果宽度        ConnectionOverlays: [            [ "Arrow", {                location: 1,                id: "arrow",                length: 14,                foldback: 0.8 //这些都是控制箭头的形状的            } ],            [ "Label", { label: "FOO", id: "label", cssClass: "aLabel" }]//这个是鼠标拉出来的线的属性        ],        Container: "canvas"    });    instance.registerConnectionType("basic", { anchor:"Continuous", connector:"StateMachine" });    window.jsp = instance;    var canvas = document.getElementById("canvas"); //获取画布    var windows = jsPlumb.getSelector(".statemachine-demo .w"); //获取所有的实体    // bind a click listener to each connection; the connection is deleted. you could of course    // just do this: jsPlumb.bind("click", jsPlumb.detach), but I wanted to make it clear what was    // happening.    instance.bind("click", function (c) {        instance.detach(c); //如果单击箭头，连接就会中断    });    // bind a connection listener. note that the parameter passed to this function contains more than    // just the new connection - see the documentation for a full list of what is included in 'info'.    // this listener sets the connection's internal    // id as the label overlay's text.    instance.bind("connection", function (info) {        info.connection.getOverlay("label").setLabel(info.connection.id);//当连接成功后，将箭头上的label改为连接ID    });    // bind a double click listener to "canvas"; add new node when this occurs.    jsPlumb.on(canvas, "dblclick", function(e) {        newNode(e.offsetX, e.offsetY); //如果双击会产生一个new实体    });    //    // initialise element as connection targets and source.    //    var initNode = function(el) {        // initialise draggable elements.        instance.draggable(el);        instance.makeSource(el, { //设置连接的源实体，就是这一头            filter: ".ep",            anchor: "Continuous",            connectorStyle: { strokeStyle: "#5c96bc", lineWidth: 2, outlineColor: "transparent", outlineWidth: 4 },            connectionType:"basic",            extract:{                "action":"the-action"            },            maxConnections: 2,            onMaxConnections: function (info, e) {                alert("Maximum connections (" + info.maxConnections + ") reached");            }        });        instance.makeTarget(el, { //设置连接的目标，就是那一头            dropOptions: { hoverClass: "dragHover" },            anchor: "Continuous",            allowLoopback: true        });        // this is not part of the core demo functionality; it is a means for the Toolkit edition's wrapped        // version of this demo to find out about new nodes being added.        //        instance.fire("jsPlumbDemoNodeAdded", el); //立即生效    };    var newNode = function(x, y) { //这个就是刚才双击调用的函数了，作用是添加一个新实体        var d = document.createElement("div");        var id = jsPlumbUtil.uuid();        d.className = "w";        d.id = id;        d.innerHTML = id.substring(0, 7) + "<div class=\"ep\"></div>";        d.style.left = x + "px";        d.style.top = y + "px";        instance.getContainer().appendChild(d);        initNode(d);        return d;    };    // suspend drawing and initialise.    instance.batch(function () { //暂停渲染，执行下面的动作        for (var i = 0; i < windows.length; i++) {            initNode(windows[i], true);        }        // and finally, make a few connections        instance.connect({ source: "opened", target: "phone1", type:"basic" }); //这都是一些初始化的设置了        instance.connect({ source: "phone1", target: "phone1", type:"basic" });        instance.connect({ source: "phone1", target: "inperson", type:"basic" });        instance.connect({            source:"phone2",            target:"rejected",            type:"basic"        });    });    jsPlumb.fire("jsPlumbDemoLoaded", instance);});