CocoRoboDesktop/course-design/main.js

function addNode(parentId, nodeId, nodeLable, position) {
  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', 'openA(\'' + 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')
    .classed('node', true)
    // .attr('data-toggle','modal')
    // .attr('data-target',"#myModal")
    .attr('onclick', 'openA(\'' + nodeId + '\')')
    .text("+");


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

var aaa = 1;

function bbb() {
  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="bbb()"></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 openA(id) {
  $("#myModal").modal('show');
  $("#column").val(id.split("node")[1])
}

function addNodeA(parentId, nodeId, nodeLable, position) {
  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('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);

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

function addNodeB(parentId, nodeId, nodeLable, position) {
  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('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);

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

function SubmitB() {
  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="bbb()"></label></div>'
  $("#bbb").append(str);
  $("#Modal").modal('hide');
}

function SubmitA(instance) {
  var column = $('#column').val();
  if (column == 1) {
    for (var i = 1; i <= aaa; i++) {
      var b = 20 + i * 80;
      var a = addNodeA('flow-panel', 'nodeA' + i.toString(), $('#names' + i.toString()).val(), { x: '80px', y: b.toString() + 'px' });
      addPorts(instance, a, ['out'], 'output');
      $('#names' + i).val('')
    }
  }
  else if (column == 2) {
    for (var i = 1; i <= aaa; i++) {
      var b = 20 + i * 80;
      var a = addNodeB('flow-panel', 'nodeB' + i.toString(), $('#names' + i.toString()).val(), { x: '380px', y: b.toString() + 'px' });
      addPorts(instance, a, ['in'], 'input');
      addPorts(instance, a, ['out'], 'output');
      $('#names' + i).val('')
    }
  }
  else if (column == 3) {
    for (var i = 1; i <= aaa; i++) {
      var b = 20 + i * 80;
      var a = addNodeB('flow-panel', 'nodeC' + i.toString(), $('#names' + i.toString()).val(), { x: '680px', y: b.toString() + 'px' });
      addPorts(instance, a, ['in'], 'input');
      addPorts(instance, a, ['out'], 'output');
      $('#names' + i).val('')
    }
  }
  else {
    for (var i = 1; i <= aaa; i++) {
      var b = 20 + i * 80;
      var a = addNodeA('flow-panel', 'nodeD' + i.toString(), $('#names' + i.toString()).val(), { x: '980px', y: b.toString() + 'px' });
      addPorts(instance, a, ['in'], 'input');
      $('#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');
}

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');
  });

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

  // for (var i = 0;i < 4;i++){
  //   $("#node" + i).on('click', function(){
  //     open(i)
  //   });
  // }


  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'));

  });

  jsPlumb.fire("jsFlowLoaded", instance);

});