|
|
@@ -1,4 +1,7 @@
|
|
|
-function addNode(parentId, nodeId, nodeLable, position) {
|
|
|
+/*
|
|
|
+ 添加节点类别
|
|
|
+*/
|
|
|
+function addNode(parentId, nodeId, nodeLable, position, isDisplay) {
|
|
|
var panel = d3.select("#" + parentId);
|
|
|
panel.append('div')
|
|
|
.style('position', 'absolute')
|
|
|
@@ -17,7 +20,7 @@ function addNode(parentId, nodeId, nodeLable, position) {
|
|
|
.attr('id', nodeId).classed('node', true)
|
|
|
// .attr('data-toggle','modal')
|
|
|
// .attr('data-target',"#myModal")
|
|
|
- // .attr('onclick', 'openA(\'' + nodeId + '\')')
|
|
|
+ // .attr('onclick', 'openMyModal(\'' + nodeId + '\')')
|
|
|
.text(nodeLable);
|
|
|
|
|
|
panel.append('div')
|
|
|
@@ -36,52 +39,28 @@ function addNode(parentId, nodeId, nodeLable, position) {
|
|
|
.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', 'openA(\'' + nodeId + '\')')
|
|
|
+ .attr('onclick', 'openMyModal(\'' + 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) {
|
|
|
+/*
|
|
|
+ 添加两侧节点
|
|
|
+*/
|
|
|
+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')
|
|
|
@@ -93,16 +72,43 @@ function addNodeA(parentId, nodeId, nodeLable, position) {
|
|
|
.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 addNodeB(parentId, nodeId, nodeLable, position) {
|
|
|
+/*
|
|
|
+ 添加中间节点
|
|
|
+*/
|
|
|
+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')
|
|
|
@@ -114,10 +120,96 @@ function addNodeB(parentId, nodeId, nodeLable, position) {
|
|
|
.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 SubmitB() {
|
|
|
+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;
|
|
|
@@ -139,44 +231,144 @@ function SubmitB() {
|
|
|
}
|
|
|
$("#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>'
|
|
|
+ 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');
|
|
|
}
|
|
|
|
|
|
-function SubmitA(instance) {
|
|
|
+var globalInstance;
|
|
|
+
|
|
|
+/*
|
|
|
+ 提交添加节点
|
|
|
+*/
|
|
|
+function SubmitNode(instance) {
|
|
|
var column = $('#column').val();
|
|
|
+ $('#node' + column.toString() + "btn").remove();
|
|
|
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');
|
|
|
+ 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++) {
|
|
|
- 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');
|
|
|
+ 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++) {
|
|
|
- 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');
|
|
|
+ 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++) {
|
|
|
- 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');
|
|
|
+ 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('')
|
|
|
}
|
|
|
}
|
|
|
@@ -186,8 +378,221 @@ function SubmitA(instance) {
|
|
|
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;
|
|
|
@@ -260,6 +665,9 @@ function addPorts(instance, node, ports, type) {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+/*
|
|
|
+ 连接连接点
|
|
|
+*/
|
|
|
function connectPorts(instance, node1, port1, node2, port2) {
|
|
|
// declare some common values:
|
|
|
var color = "gray";
|
|
|
@@ -276,23 +684,23 @@ function connectPorts(instance, node1, port1, node2, port2) {
|
|
|
instance.connect({ uuids: [uuid_source, uuid_target] });
|
|
|
}
|
|
|
|
|
|
-function getTreeData() {
|
|
|
- var tree = [
|
|
|
- {
|
|
|
- text: "Nodes",
|
|
|
- nodes: [
|
|
|
- {
|
|
|
- text: "Node1",
|
|
|
- },
|
|
|
- {
|
|
|
- text: "Node2"
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- ];
|
|
|
-
|
|
|
- return tree;
|
|
|
-}
|
|
|
+// function getTreeData() {
|
|
|
+// var tree = [
|
|
|
+// {
|
|
|
+// text: "Nodes",
|
|
|
+// nodes: [
|
|
|
+// {
|
|
|
+// text: "Node1",
|
|
|
+// },
|
|
|
+// {
|
|
|
+// text: "Node2"
|
|
|
+// }
|
|
|
+// ]
|
|
|
+// }
|
|
|
+// ];
|
|
|
+
|
|
|
+// return tree;
|
|
|
+// }
|
|
|
|
|
|
jsPlumb.ready(function () {
|
|
|
console.log("jsPlumb is ready to use");
|
|
|
@@ -312,50 +720,97 @@ jsPlumb.ready(function () {
|
|
|
});
|
|
|
|
|
|
//Initialize Control Tree View
|
|
|
- $('#control-panel').treeview({ data: getTreeData() });
|
|
|
+ // $('#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');
|
|
|
+ // $('.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)
|
|
|
});
|
|
|
|
|
|
- $('#flow-panel').on('drop', function (ev) {
|
|
|
+ $("#SubmitType").on('click', function () {
|
|
|
+ SubmitType()
|
|
|
+ });
|
|
|
|
|
|
- //avoid event conlict for jsPlumb
|
|
|
- if (ev.target.className.indexOf('_jsPlumb') >= 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
+ $("#SubmitModify").on('click', function () {
|
|
|
+ modifyNode($("#Node").val(), $("#modifyNode").val());
|
|
|
+ $("#modifyModal").modal('hide');
|
|
|
+ });
|
|
|
+
|
|
|
+ $("#SubmitAppend").on('click', function () {
|
|
|
+ SubmitAppendNode(instance, $("#appendNode").val());
|
|
|
+ $("#appendModal").modal('hide');
|
|
|
+ });
|
|
|
|
|
|
- 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');
|
|
|
+ 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")
|
|
|
+ }
|
|
|
});
|
|
|
|
|
|
- $("#SubmitA").on('click', function () {
|
|
|
- SubmitA(instance)
|
|
|
+ $(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)
|
|
|
});
|
|
|
- $("#SubmitB").on('click', function () {
|
|
|
- SubmitB()
|
|
|
+
|
|
|
+ $(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)
|
|
|
});
|
|
|
|
|
|
- // for (var i = 0;i < 4;i++){
|
|
|
- // $("#node" + i).on('click', function(){
|
|
|
- // open(i)
|
|
|
- // });
|
|
|
- // }
|
|
|
+ $(document).on("mouseup", function (e) {
|
|
|
+ clearTimeout(time);
|
|
|
+ });
|
|
|
|
|
|
+ $(document).on("touchend", function (e) {
|
|
|
+ clearTimeout(time);
|
|
|
+ });
|
|
|
|
|
|
instance.doWhileSuspended(function () {
|
|
|
|
|
|
@@ -390,6 +845,12 @@ jsPlumb.ready(function () {
|
|
|
|
|
|
});
|
|
|
|
|
|
+ instance.bind('click', function (conn, originalEvent) {
|
|
|
+ if (confirm('确定删除所点击的连接吗？')) {
|
|
|
+ instance.detach(conn);
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
jsPlumb.fire("jsFlowLoaded", instance);
|
|
|
|
|
|
});
|
