ETL平台搭建跳坑系列之jsplumb.js使用

目前已经实现基于jsplumb.js的部分功能：拖拽生成节点（含anchor），设置节点可动，删除节点，删除链接，获取所有链接信息等
之后会对功能进行完善。

//添加节点

 function addNode(parentId, nodeId, nodeLable, position) {
    var panel= d3.select("#" +parentId);
    panel.append('div').style('width','120px').style('height','50px')
      .style('position','absolute')
      .style('top',position.y).style('left',position.x)
      .style('border','2px#9DFFCA solid').attr('align','center')
      .attr('id',nodeId).classed('node',true)
      .text(nodeLable);
    return jsPlumb.getSelector('#' + nodeId);//不能为纯数字
  }

//添加端口

function addPorts(instance,node, ports, type) {
    //Assumehorizental layout
    var number_of_ports= ports.length;
    var i = 0;
    var height =$(node).height();  //Note, jquery does not include border for height
    var y_offset = 1 / ( number_of_ports + 1);
    var y = 0;
    for ( ; i < number_of_ports; i++ ) {
      var anchor = [0,0,0,0];
      var paintStyle = { radius:5, fill:'#CC0000' };
      var isSource = false, isTarget = false;
      if ( type === 'output' )
      {
        anchor[0] = 1;
        paintStyle.fill = '#00FF00';
        isSource = true;
      }
      else {
        isTarget=true;
      }
     anchor[1] = y + y_offset;
      y = anchor[1];
      // console.log(node.id)
      // var lin=[];
      var common = {
        // connector: 'Straight',
        endpoint: 'Dot',
        // paintStyle: {
        //   fill: 'white',
        //   outlineStroke: 'blue',
        //   strokeWidth: 2
        // },
        hoverPaintStyle: {
          outlineStroke: 'lightblue'
        },
        connectorStyle: {
          outlineStroke: 'green',
          strokeWidth: 1
        },
        connectorHoverStyle: {
          strokeWidth: 2
        }
      }
      instance.addEndpoint(node, {      
        uuid:node.id + "-" + ports[i], 
        paintStyle: paintStyle,
        anchor:anchor,
        maxConnections:-1,//最大连接个数,数字为几就为几,当数字为-1时代表任意个
        isSource:isSource,
        isTarget:isTarget
      }, common);
    }
  }

//准备jsplumb

 jsPlumb.ready(function() {
    var color= "#E8C870";
    var instance = jsPlumb.getInstance({
      // notice the 'curviness' argument to this Bezier curve.  the curves on this page are far smoother
      // than the curves on the first demo, which use the default curviness value.      
      Connector : [ "Bezier", { curviness:50 } ],
      DragOptions : { cursor: "pointer", zIndex:2000 },
      PaintStyle : { strokeStyle:color, lineWidth:2 },  
      EndpointStyle : { radius:5, fillStyle:color },
      HoverPaintStyle: {strokeStyle:"#7073EB" },
      EndpointHoverStyle: {fillStyle:"#7073EB" },
      // anchor:"Continuous",
      Container:"workplace"
    });

//捕获链接信息

let init = function(connection) {
      list[l++]=connection
    };

//暂停渲染，执行以下操作

instance.batch(function() {
  // listen for new connections;
  instance.bind("connection", function(connInfo, originalEvent) {
    init(connInfo.connection);
    // console.log(connection)
  });

//删除链接

  instance.bind("click", function(conn, originalEvent) {
    if (confirm("确定删除从 " + conn.sourceId + " 到 " + conn.targetId + " 的链接吗?")){
      instance.deleteConnection(conn)
    }
  });

//删除节点 节点不提供点击事件，因此通过点击anchor实现

  instance.bind("endpointClick", function(endpoint,originalEvent) {
    if (confirm("确定删除节点 " + endpoint.elementId + " 吗?")){
      instance.remove(endpoint.elementId)
    }
  });

//监控页面操作（主要是从节点树上获取节点并创建anchor）

$('.box-card .chart-item').attr('draggable','true').on('dragstart', function(ev){
      ev.originalEvent.dataTransfer.setData('text',ev.target.textContent);
    });
    $('#workplace').on('drop',function(ev){
      if (ev.target.className.indexOf('_jsPlumb') >= 0 ) {
        return;
      }
      ev.preventDefault();
      var mx = '' + ev.originalEvent.offsetX + 'px';
      var my = '' + ev.originalEvent.offsetY + 'px';
      var node = addNode('workplace',"node"+'_'+pid.parent_id+'_'+pid.id, pid.parent_name+' '+pid.name,{x:mx,y:my});

      if(pid.parent_id<500){
        var port =addPorts(instance,node[0], ['out1'],'output');
      }else if(pid.parent_id>=700){
        addPorts(instance,node[0], ['out1'],'output');
        addPorts(instance,node[0], ['in1'],'input');
      }
      else{
        addPorts(instance,node[0], ['in1'],'input');
      }

//设置结点可动

    instance.draggable($(node));
          // instance.setContainer('workplace');
        }).on('dragover',
          function(ev){
            ev.preventDefault();
        })
        // list2=jsPlumb.getAllConnections();//获取所有的链接
      jsPlumb.fire("jsPlumbDemoLoaded", instance);
    });
   }

//设置workplace

补充：
删除单条连线时，很多资料显示可调用

jsPlumb.bind("click", function(c) {
      if(confirm("你确定取消连接吗?"))
        jsPlumb.detach(c);
  });

但是我会报错，除非删掉所有anchor