123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856 |
- 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('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);
- 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('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('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('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('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('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('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');
-
-
-
-
-
- }
- 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');
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
- }
- 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');
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
- }
- 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');
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
- }
- 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');
-
-
-
-
-
- }
- $('#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');
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- 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');
-
-
-
-
-
-
-
-
-
-
- }
- else {
- var a = addSideNode('flow-panel', 'nodeD' + id.split("nodeD")[1], text, { x: left, y: top });
- addPorts(globalInstance, a, ['in'], 'input');
-
-
-
-
-
- }
- }
- function addPorts(instance, node, ports, type) {
-
- var number_of_ports = ports.length;
- var i = 0;
- var height = $(node).height();
- var y_offset = 1 / (number_of_ports + 1);
- var y = 0;
- var connectorStyle = {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 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) {
-
- var color = "gray";
- var arrowCommon = { foldback: 0.8, fillStyle: color, width: 5 },
-
- 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] });
- }
- jsPlumb.ready(function () {
- console.log("jsPlumb is ready to use");
-
- var color = "#4169E1";
- var instance = jsPlumb.getInstance({
-
-
- 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"
- });
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- $("#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();
-
- }
- });
- $(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 () {
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- instance.draggable($('.node'));
- });
- instance.bind('click', function (conn, originalEvent) {
- if (confirm('确定删除所点击的连接吗?')) {
- instance.detach(conn);
- }
- })
- jsPlumb.fire("jsFlowLoaded", instance);
- });
|