CocoRoboDesktop/course-design/main.js

/*
 添加节点类别
*/
function addNode(parentId, nodeId, nodeLable, position, isDisplay) {
  var panel = d3.select("#" + parentId);
  panel.append('div')
    .style('position', 'absolute')
    .style('top', position.y).style('left', position.x)
    .style('border', 'none').attr('align', 'center')
    // .style('background','#4169E1')
    .style('border-radius', '9px')
    // .style('cursor', 'pointer')
    .style('color', '#4169E1')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId).classed('node', true)
    // .attr('data-toggle','modal')
    // .attr('data-target',"#myModal")
    // .attr('onclick', 'openMyModal(\'' + nodeId + '\')')
    .text(nodeLable);

  panel.append('div')
    .style('position', 'absolute')
    .style('top', (parseInt(position.y.split("px")[0]) + 40).toString() + 'px').style('left', position.x)
    .style('border', 'none').attr('align', 'center')
    // .style('background','#4169E1')
    .style('width', (document.getElementById(nodeId).offsetWidth).toString() + 'px')
    .style('text-align', 'center')
    .style('border-radius', '9px')
    .style('cursor', 'pointer')
    .style('color', '#4169E1')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId + "btn")
    .classed('node', true)
    // .attr('data-toggle','modal')
    // .attr('data-target',"#myModal")
    .attr('onclick', 'openMyModal(\'' + nodeId + '\')')
    .text("+");


  return jsPlumb.getSelector('#' + nodeId)[0];
}

/*
 添加两侧节点
*/
function addSideNode(parentId, nodeId, nodeLable, position, isDisplay) {
  var panel = d3.select("#" + parentId);
  panel.append('div')
    .style('position', 'absolute')
    .style('top', position.y).style('left', position.x)
    .style('border', '1px #4169E1 solid').attr('align', 'center')
    .style('background', '#4169E1')
    .style('cursor', 'pointer')
    .style('border-radius', '9px')
    .style('color', 'white')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId).classed('node', true)
    .text(nodeLable);

  isDisplay ? panel.append('div')
    .style('position', 'absolute')
    .style('top', (parseInt(position.y.split("px")[0]) + 40).toString() + 'px').style('left', position.x)
    .style('border', 'none').attr('align', 'center')
    // .style('background','#4169E1')
    .style('width', (document.getElementById(nodeId).offsetWidth).toString() + 'px')
    .style('text-align', 'center')
    .style('border-radius', '9px')
    .style('cursor', 'pointer')
    .style('color', '#4169E1')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId + "btn")
    .classed('node', true)
    // .attr('data-toggle','modal')
    // .attr('data-target',"#myModal")
    .attr('onclick', 'openAppendModal(\'' + nodeId + '\')')
    .text("+") : "";

  return jsPlumb.getSelector('#' + nodeId)[0];
}

/*
 添加中间节点
*/
function addMiddleNode(parentId, nodeId, nodeLable, position, isDisplay) {
  var panel = d3.select("#" + parentId);
  panel.append('div')
    .style('position', 'absolute')
    .style('top', position.y).style('left', position.x)
    .style('border', '1px #4169E1 solid').attr('align', 'center')
    .style('background', '#ffffff')
    .style('cursor', 'pointer')
    .style('border-radius', '9px')
    .style('color', '#4169E1')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId).classed('node', true)
    .text(nodeLable);

  isDisplay ? panel.append('div')
    .style('position', 'absolute')
    .style('top', (parseInt(position.y.split("px")[0]) + 40).toString() + 'px').style('left', position.x)
    .style('border', 'none').attr('align', 'center')
    // .style('background','#4169E1')
    .style('width', (document.getElementById(nodeId).offsetWidth).toString() + 'px')
    .style('text-align', 'center')
    .style('border-radius', '9px')
    .style('cursor', 'pointer')
    .style('color', '#4169E1')
    .style('font-size', '25px')
    .style('padding-left', '10px')
    .style('padding-right', '10px')
    .style('padding-top', '5px')
    .style('padding-bottom', '5px')
    .style("margin", '0 auto')
    .attr('id', nodeId + "btn")
    .classed('node', true)
    // .attr('data-toggle','modal')
    // .attr('data-target',"#myModal")
    .attr('onclick', 'openAppendModal(\'' + nodeId + '\')')
    .text("+") : "";

  return jsPlumb.getSelector('#' + nodeId)[0];
}

var aaa = 1;

/*
 添加节点类别输入
*/
function addTypeInput() {
  if (event.keyCode == 13) {
    aaa = aaa + 1;
    var name = "types" + aaa.toString();
    var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">' + aaa + '<input type="text" id="' + name + '" class="form-control" placeholder="请输入节点类别名字" style="width: 92%;display:inline-block;margin-left: 5px;" onkeydown="addTypeInput()"></label></div>'
    $("#bbb").append(str);
    var inputs = document.getElementById("bbb").getElementsByTagName("input");
    inputs[inputs.length - 1].focus();
  }
}

/*
 添加节点名字输入
*/
function addInput() {
  if (event.keyCode == 13) {
    aaa = aaa + 1;
    var name = "names" + aaa.toString();
    var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">' + aaa + '<input type="text" id="' + name + '" class="form-control" placeholder="请输入节点名字" style="width: 92%;display:inline-block;margin-left: 5px;" onkeydown="addInput()"></label></div>';
    $("#aaa").append(str);
    var inputs = document.getElementById("aaa").getElementsByTagName("input");
    inputs[inputs.length - 1].focus();
  }
}

/*
 追加节点名字输入
*/
function addAppendInput() {
  if (event.keyCode == 13) {
    aaa = aaa + 1;
    var name = "appendnames" + aaa.toString();
    var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">' + aaa + '<input type="text" id="' + name + '" class="form-control" placeholder="请输入节点名字" style="width: 92%;display:inline-block;margin-left: 5px;" onkeydown="addAppendInput()"></label></div>';
    $("#ccc").append(str);
    var inputs = document.getElementById("ccc").getElementsByTagName("input");
    inputs[inputs.length - 1].focus();
  }
}

/*
 手动打开添加节点模态框
*/
function openMyModal(id) {
  $("#myModal").modal('show');
  $("#column").val(id.split("node")[1])
}

/*
 手动打开追加节点模态框
*/
function openAppendModal(id) {
  $("#appendModal").modal('show');
  $("#appendNode").val(id)
}

/*
 提交节点类别
*/
function SubmitType() {
  for (var i = 1; i <= aaa; i++) {
    if (i == 1) {
      var b = 20;
      var a = addNode('flow-panel', 'node1', $('#types' + i).val(), { x: '80px', y: b.toString() + 'px' });
    }
    else if (i == 2) {
      var b = 20;
      var a = addNode('flow-panel', 'node2', $('#types' + i).val(), { x: '380px', y: b.toString() + 'px' });
    }
    else if (i == 3) {
      var b = 20;
      var a = addNode('flow-panel', 'node3', $('#types' + i).val(), { x: '680px', y: b.toString() + 'px' });
    }
    else {
      var b = 20;
      var a = addNode('flow-panel', 'node4', $('#types' + i).val(), { x: '980px', y: b.toString() + 'px' });
    }
    $('#types' + i).val('');
  }
  $("#bbb").html("");
  aaa = 1;
  var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">1<input type="text" id="types1" class="form-control" placeholder="请输入节点类别名字" style="width: 92%;display:inline-block;" onkeydown="addTypeInput()"></label></div>'
  $("#bbb").append(str);
  $("#Modal").modal('hide');
}

var globalInstance;

/*
 提交添加节点
*/
function SubmitNode(instance) {
  var column = $('#column').val();
  $('#node' + column.toString() + "btn").remove();
  if (column == 1) {
    for (var i = 1; i <= aaa; i++) {
      if (i == aaa) {
        var b = 20 + i * 80;
        var a = addSideNode('flow-panel', 'nodeA' + i.toString(), $('#names' + i.toString()).val(), { x: '80px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = 20 + i * 80;
        var a = addSideNode('flow-panel', 'nodeA' + i.toString(), $('#names' + i.toString()).val(), { x: '80px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#names' + i).val('')
    }
  }
  else if (column == 2) {
    for (var i = 1; i <= aaa; i++) {
      if (i == aaa) {
        var b = 20 + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeB' + i.toString(), $('#names' + i.toString()).val(), { x: '380px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = 20 + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeB' + i.toString(), $('#names' + i.toString()).val(), { x: '380px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#names' + i).val('')
    }
  }
  else if (column == 3) {
    for (var i = 1; i <= aaa; i++) {
      if (i == aaa) {
        var b = 20 + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeC' + i.toString(), $('#names' + i.toString()).val(), { x: '680px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = 20 + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeC' + i.toString(), $('#names' + i.toString()).val(), { x: '680px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#names' + i).val('')
    }
  }
  else {
    for (var i = 1; i <= aaa; i++) {
      if (i == aaa) {
        var b = 20 + i * 80;
        var a = addSideNode('flow-panel', 'nodeD' + i.toString(), $('#names' + i.toString()).val(), { x: '980px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = 20 + i * 80;
        var a = addSideNode('flow-panel', 'nodeD' + i.toString(), $('#names' + i.toString()).val(), { x: '980px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#names' + i).val('')
    }
  }
  $('#column').val('');
  $("#aaa").html("");
  aaa = 1;
  var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">1 <input type="text" id="names1" class="form-control" placeholder="请输入节点名字" style="width: 92%;display:inline-block;" onkeydown="addInput()"></label></div>'
  $("#aaa").append(str);
  $("#myModal").modal('hide');
  globalInstance = instance;
}


/*
 提交追加节点
*/
function SubmitAppendNode(instance, id) {
  var column = id.split("node")[1];
  if (column.indexOf("A") != -1) {
    $('#' + id + 'btn').remove();
    for (var i = 1; i <= aaa; i++) {
      var j = i + parseInt(column.split("A")[1]);
      if (i == aaa) {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addSideNode('flow-panel', 'nodeA' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '80px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addSideNode('flow-panel', 'nodeA' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '80px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#appendnames' + i).val('')
    }
  }
  else if (column.indexOf("B") != -1) {
    $('#' + id + 'btn').remove();
    for (var i = 1; i <= aaa; i++) {
      var j = i + parseInt(column.split("B")[1]);
      if (i == aaa) {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeB' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '380px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeB' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '380px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#appendnames' + i).val('')
    }
  }
  else if (column.indexOf("C") != -1) {
    $('#' + id + 'btn').remove();
    for (var i = 1; i <= aaa; i++) {
      var j = i + parseInt(column.split("C")[1]);
      if (i == aaa) {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeC' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '680px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addMiddleNode('flow-panel', 'nodeC' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '680px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        addPorts(instance, a, ['out'], 'output');
        // instance.makeSource(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })

        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#appendnames' + i).val('')
    }
  }
  else {
    $('#' + id + 'btn').remove();
    for (var i = 1; i <= aaa; i++) {
      var j = i + parseInt(column.split("D")[1]);
      if (i == aaa) {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addSideNode('flow-panel', 'nodeD' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '980px', y: b.toString() + 'px' }, true);
        addPorts(instance, a, ['in'], 'input');
        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      else {
        var b = parseInt(document.getElementById(id).style.top.split("px")[0]) + i * 80;
        var a = addSideNode('flow-panel', 'nodeD' + j.toString(), $('#appendnames' + i.toString()).val(), { x: '980px', y: b.toString() + 'px' }, false);
        addPorts(instance, a, ['in'], 'input');
        // instance.makeTarget(a, {
        //   endpoint: "Dot",
        //   anchor: ["Perimeter", { shape: "Circle" }],
        //   MaxConnections: -1
        // })
      }
      $('#appendnames' + i).val('')
    }
  }
  $('#appendNode').val('');
  $("#ccc").html("");
  aaa = 1;
  var str = '<div class="form-group"><label style="vertical-align: middle;display:inline-block;width: 100%;">1 <input type="text" id="appendnames1" class="form-control" placeholder="请输入节点名字" style="width: 92%;display:inline-block;" onkeydown="addAppendInput()"></label></div>'
  $("#ccc").append(str);
  $("#appendModal").modal('hide');
  globalInstance = instance;
}

function modifyNode(text, id) {
  var left = document.getElementById(id).style.left;
  var top = document.getElementById(id).style.top;
  document.getElementById(id).nextElementSibling.remove();
  $("#" + id).remove();
  if (id.indexOf("nodeA") != -1) {
    var a = addSideNode('flow-panel', 'nodeA' + id.split("nodeA")[1], text, { x: left, y: top });
    addPorts(globalInstance, a, ['out'], 'output');
    // globalInstance.makeSource(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })
    // document.getElementById(id).nextElementSibling.style.left = (parseInt(document.getElementById(id).style.left.split("px")[0]) + parseInt((parseInt((document.getElementById(id).offsetWidth)) / 10)) * 10).toString() + "px";
  }
  else if (id.indexOf("nodeB") != -1) {
    var a = addMiddleNode('flow-panel', 'nodeB' + id.split("nodeB")[1], text, { x: left, y: top });
    addPorts(globalInstance, a, ['in'], 'input');
    addPorts(globalInstance, a, ['out'], 'output');
    // globalInstance.makeSource(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })

    // globalInstance.makeTarget(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })
  }
  else if (id.indexOf("nodeC") != -1) {
    var a = addMiddleNode('flow-panel', 'nodeC' + id.split("nodeC")[1], text, { x: left, y: top });
    addPorts(globalInstance, a, ['in'], 'input');
    addPorts(globalInstance, a, ['out'], 'output');
    // globalInstance.makeSource(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })

    // globalInstance.makeTarget(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })
  }
  else {
    var a = addSideNode('flow-panel', 'nodeD' + id.split("nodeD")[1], text, { x: left, y: top });
    addPorts(globalInstance, a, ['in'], 'input');
    // globalInstance.makeTarget(a, {
    //   endpoint: "Dot",
    //   anchor: ["Perimeter", { shape: "Circle" }],
    //   MaxConnections: -1
    // })
  }
}

/*
 添加连接点
*/
function addPorts(instance, node, ports, type) {
  //Assume horizental 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;

  var connectorStyle = {
    // 端点的样式
    // paintStyle: {
    //     fill: '#7AB02C',
    //     radius: 7
    // },
    // endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
    // // // 鼠标移上样式
    // // hoverPaintStyle: {
    // //     fill: '#216477',
    // //     stroke: '#216477'
    // // },

    // // // 连线类型
    // connector: ['Straight', {
    //     stub: [40, 60],
    //     gap: 10,
    //     cornerRadius: 5,
    //     alwaysRespectStubs: true
    // }],
    // // // 连线样式
    // connectorStyle: {
    //     strokeWidth: 3,
    //     stroke: '#4169E1',
    //     // joinstyle: 'round',
    //     // outlineStroke: 'none',
    //     // // 线外边的宽，值越大，线的点击范围越大
    //     // outlineWidth: 10
    // },
    // connectorHoverStyle: {
    //     stroke: 'green'
    // },
    connectorOverlays: [
      // 箭头
      ['Arrow', { width: 12, length: 12, location: 1 }]
    ]
  }

  for (; i < number_of_ports; i++) {
    var anchor = [0, 0, 0, 0];
    var paintStyle = { radius: 4, fillStyle: '#7FFFAA' };
    var isSource = false, isTarget = false;
    if (type === 'output') {
      anchor[0] = 1;
      paintStyle.fillStyle = '#7FFFAA';
      isSource = true;
    } else {
      isTarget = true;
    }

    anchor[1] = y + y_offset;
    y = anchor[1];

    instance.addEndpoint(node, {
      uuid: node.getAttribute("id") + "-" + ports[i],
      paintStyle: paintStyle,
      anchor: anchor,
      maxConnections: -1,
      isSource: isSource,
      isTarget: isTarget
    }, connectorStyle);
  }
}

/*
 连接连接点
*/
function connectPorts(instance, node1, port1, node2, port2) {
  // declare some common values:
  var color = "gray";
  var arrowCommon = { foldback: 0.8, fillStyle: color, width: 5 },
    // use three-arg spec to create two different arrows with the common values:
    overlays = [
      ["Arrow", { location: 0.8 }, arrowCommon],
      ["Arrow", { location: 0.2, direction: -1 }, arrowCommon]
    ];

  var uuid_source = node1.getAttribute("id") + "-" + port1;
  var uuid_target = node2.getAttribute("id") + "-" + port2;

  instance.connect({ uuids: [uuid_source, uuid_target] });
}

// function getTreeData() {
//   var tree = [
//     {
//       text: "Nodes",
//       nodes: [
//         {
//           text: "Node1",
//         },
//         {
//           text: "Node2"
//         }
//       ]
//     }
//   ];

//   return tree;
// }

jsPlumb.ready(function () {
  console.log("jsPlumb is ready to use");

  //Initialize JsPlumb
  var color = "#4169E1";
  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: ["Straight", { curviness: 50 }],
    DragOptions: { cursor: "pointer", zIndex: 2000 },
    PaintStyle: { strokeStyle: color, lineWidth: 2 },
    EndpointStyle: { radius: 4, fillStyle: color },
    HoverPaintStyle: { strokeStyle: "#4169E1" },
    EndpointHoverStyle: { fillStyle: "#7FFFAA" },
    Container: "flow-panel"
  });

  //Initialize Control Tree View
  // $('#control-panel').treeview({ data: getTreeData() });

  //Handle drag and drop
  // $('.list-group-item').attr('draggable', 'true').on('dragstart', function (ev) {
  //   //ev.dataTransfer.setData("text", ev.target.id);
  //   ev.originalEvent.dataTransfer.setData('text', ev.target.textContent);
  //   console.log('drag start');
  // });

  // $('#flow-panel').on('drop', function (ev) {

  //   //avoid event conlict for jsPlumb
  //   if (ev.target.className.indexOf('_jsPlumb') >= 0) {
  //     return;
  //   }

  //   ev.preventDefault();
  //   var mx = '' + ev.originalEvent.offsetX + 'px';
  //   var my = '' + ev.originalEvent.offsetY + 'px';

  //   console.log('on drop : ' + ev.originalEvent.dataTransfer.getData('text'));
  //   var uid = new Date().getTime();
  //   var node = addNode('flow-panel', 'node' + uid, 'node', { x: mx, y: my });
  //   addPorts(instance, node, ['out'], 'output');
  //   addPorts(instance, node, ['in1', 'in2'], 'input');
  //   instance.draggable($(node));
  // }).on('dragover', function (ev) {
  //   ev.preventDefault();
  //   console.log('on drag over');
  // });

  $("#SubmitNode").on('click', function () {
    SubmitNode(instance)
  });

  $("#SubmitType").on('click', function () {
    SubmitType()
  });

  $("#SubmitModify").on('click', function () {
    modifyNode($("#Node").val(), $("#modifyNode").val());
    $("#modifyModal").modal('hide');
  });

  $("#SubmitAppend").on('click', function () {
    SubmitAppendNode(instance, $("#appendNode").val());
    $("#appendModal").modal('hide');
  });

  var touchtime = new Date().getTime();

  $(document).on("click", function (e) {
    if ((new Date()).getTime() - touchtime < 500) {
      console.log("dblclick");
      e.preventDefault();
      if ($(e.target).attr('id') && $(e.target).attr('id').indexOf("node") != -1 && $(e.target).attr('id').indexOf("btn") == -1) {
        var v_id = $(e.target).attr('id');
        $("#modifyModal").modal('show');
        $("#modifyNode").val(v_id);
        var str = $("#" + v_id).text();
        $("#Node").val(str);
      }
    } else {
      touchtime = new Date().getTime();
      // console.log("click")
    }
  });

  $(document).on("mousedown", function (e) {
    time = setTimeout(() => {
      if ($(e.target).attr('id') && $(e.target).attr('id').indexOf("node") != -1 && $(e.target).attr('id').indexOf("btn") == -1) {
        instance.remove($(e.target).attr('id'))
      }
    }, 1000)
  });

  $(document).on("touchstart", function (e) {
    time = setTimeout(() => {
      if ($(e.target).attr('id') && $(e.target).attr('id').indexOf("node") != -1 && $(e.target).attr('id').indexOf("btn") == -1) {
        instance.remove($(e.target).attr('id'))
      }
    }, 1000)
  });

  $(document).on("mouseup", function (e) {
    clearTimeout(time);
  });

  $(document).on("touchend", function (e) {
    clearTimeout(time);
  });

  instance.doWhileSuspended(function () {

    // declare some common values:
    // var arrowCommon = { foldback:0.8, fillStyle:color, width:5 },
    // // use three-arg spec to create two different arrows with the common values:
    // overlays = [
    //   [ "Arrow", { location:0.8 }, arrowCommon ],
    //   [ "Arrow", { location:0.2, direction:-1 }, arrowCommon ]
    // ];

    // var node1 = addNode('flow-panel','node1', 'node1', {x:'80px',y:'20px'});
    // var node2 = addNode('flow-panel','node2', 'node2', {x:'280px',y:'20px'});
    // var node3 = addNode('flow-panel','node3', 'node3', {x:'500px',y:'20px'});
    // var node4 = addNode('flow-panel','node4', 'node4', {x:'700px',y:'20px'});
    // var node5 = addNode('flow-panel','node5', 'node5', {x:'80px',y:'100px'});
    // var node6 = addNode('flow-panel','node6', 'node6', {x:'700px',y:'100px'});

    // addPorts(instance, node1, ['out'],'output');
    // addPorts(instance, node2, ['in'],'input');
    // addPorts(instance, node2, ['out'],'output');
    // addPorts(instance, node3, ['in'],'input');
    // addPorts(instance, node3, ['out'],'output');
    // addPorts(instance, node4, ['in'],'input');
    // addPorts(instance, node5, ['out'],'output');
    // addPorts(instance, node6, ['in'],'input');

    // connectPorts(instance, node1, 'out', node2, 'in');


    instance.draggable($('.node'));

  });

  instance.bind('click', function (conn, originalEvent) {
    if (confirm('确定删除所点击的连接吗？')) {
      instance.detach(conn);
    }
  })

  jsPlumb.fire("jsFlowLoaded", instance);

});