From 619364e7ca1e52f2038b7338bc54807aca1af101 Mon Sep 17 00:00:00 2001 From: Jero Soler Date: Wed, 29 Jul 2020 22:25:32 +0200 Subject: [PATCH] Update version 0.0.15 --- dist/drawflow.min.js | 2 +- dist/index.js | 140 +++++++++++++++++++++++++++++++++++++++++++ package.json | 2 +- 3 files changed, 142 insertions(+), 2 deletions(-) diff --git a/dist/drawflow.min.js b/dist/drawflow.min.js index b0f9864..dacae71 100644 --- a/dist/drawflow.min.js +++ b/dist/drawflow.min.js @@ -1 +1 @@ -!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Drawflow=t():e.Drawflow=t()}(window,(function(){return function(e){var t={};function s(n){if(t[n])return t[n].exports;var i=t[n]={i:n,l:!1,exports:{}};return e[n].call(i.exports,i,i.exports,s),i.l=!0,i.exports}return s.m=e,s.c=t,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)s.d(n,i,function(t){return e[t]}.bind(null,i));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=0)}([function(e,t,s){"use strict";s.r(t),s.d(t,"default",(function(){return n}));class n{constructor(e,t=null){this.events={},this.container=e,this.precanvas=null,this.nodeId=1,this.ele_selected=null,this.node_selected=null,this.drag=!1,this.editor_selected=!1,this.connection=!1,this.connection_ele=null,this.connection_selected=null,this.canvas_x=0,this.canvas_y=0,this.pos_x=0,this.pos_y=0,this.mouse_x=0,this.mouse_y=0,this.line_path=5,this.first_click=null,this.select_elements=null,this.noderegister={},this.render=t,this.drawflow={drawflow:{Home:{data:{}}}},this.module="Home",this.editor_mode="edit",this.zoom=1,this.zoom_max=1.6,this.zoom_min=.5,this.evCache=new Array,this.prevDiff=-1}start(){this.container.classList.add("parent-drawflow"),this.container.tabIndex=0,this.precanvas=document.createElement("div"),this.precanvas.classList.add("drawflow"),this.container.appendChild(this.precanvas),this.container.addEventListener("mouseup",this.dragEnd.bind(this)),this.container.addEventListener("mousemove",this.position.bind(this)),this.container.addEventListener("mousedown",this.click.bind(this)),this.container.addEventListener("touchend",this.dragEnd.bind(this)),this.container.addEventListener("touchmove",this.position.bind(this)),this.container.addEventListener("touchstart",this.click.bind(this)),this.container.addEventListener("contextmenu",this.contextmenu.bind(this)),this.container.addEventListener("keydown",this.key.bind(this)),this.container.addEventListener("wheel",this.zoom_enter.bind(this)),this.container.addEventListener("input",this.updateNodeValue.bind(this)),this.container.onpointerdown=this.pointerdown_handler.bind(this),this.container.onpointermove=this.pointermove_handler.bind(this),this.container.onpointerup=this.pointerup_handler.bind(this),this.container.onpointercancel=this.pointerup_handler.bind(this),this.container.onpointerout=this.pointerup_handler.bind(this),this.container.onpointerleave=this.pointerup_handler.bind(this),this.load()}pointerdown_handler(e){this.evCache.push(e)}pointermove_handler(e){for(var t=0;t100&&(s>this.prevDiff&&this.zoom_in(),s=s&&(s=parseInt(e)+1)}))})),this.nodeId=s}click(e){if("fixed"===this.editor_mode){if("parent-drawflow"!==e.target.classList[0]&&"drawflow"!==e.target.classList[0])return!1;this.ele_selected=e.target.closest(".parent-drawflow")}else this.first_click=e.target,this.ele_selected=e.target,0===e.button&&this.contextmenuDel(),null!=e.target.closest(".drawflow_content_node")&&(this.ele_selected=e.target.closest(".drawflow_content_node").parentElement);switch(this.ele_selected.classList[0]){case"drawflow-node":null!=this.node_selected&&this.node_selected.classList.remove("selected"),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.dispatch("nodeSelected",this.ele_selected.id.slice(5)),this.node_selected=this.ele_selected,this.node_selected.classList.add("selected"),this.drag=!0;break;case"output":this.connection=!0,null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.drawConnection(e.target);break;case"parent-drawflow":case"drawflow":null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.editor_selected=!0;break;case"main-path":null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.connection_selected=this.ele_selected,this.connection_selected.classList.add("selected");break;case"drawflow-delete":this.node_selected&&this.removeNodeId(this.node_selected.id),this.connection_selected&&this.removeConnection(),null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null)}"touchstart"===e.type?(this.pos_x=e.touches[0].clientX,this.pos_y=e.touches[0].clientY):(this.pos_x=e.clientX,this.pos_y=e.clientY)}position(e){if("touchmove"===e.type)var t=e.touches[0].clientX,s=e.touches[0].clientY;else t=e.clientX,s=e.clientY;if(this.connection&&this.updateConnection(t,s),this.editor_selected&&(n=this.canvas_x+-(this.pos_x-t),i=this.canvas_y+-(this.pos_y-s),this.dispatch("translate",{x:n,y:i}),this.precanvas.style.transform="translate("+n+"px, "+i+"px) scale("+this.zoom+")"),this.drag){var n=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-s)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=s,this.ele_selected.style.top=this.ele_selected.offsetTop-i+"px",this.ele_selected.style.left=this.ele_selected.offsetLeft-n+"px",this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_x=this.ele_selected.offsetLeft-n,this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_y=this.ele_selected.offsetTop-i,this.updateConnectionNodes(this.ele_selected.id,t,s)}"touchmove"===e.type&&(this.mouse_x=t,this.mouse_y=s),this.dispatch("mouseMove",{x:t,y:s})}dragEnd(e){if(null!=this.select_elements&&(this.select_elements.remove(),this.select_elements=null),"touchend"===e.type)var t=this.mouse_x,s=this.mouse_y,n=document.elementFromPoint(t,s);else t=e.clientX,s=e.clientY,n=e.target;if(this.drag&&this.dispatch("nodeMoved",this.ele_selected.id.slice(5)),this.editor_selected&&(this.canvas_x=this.canvas_x+-(this.pos_x-t),this.canvas_y=this.canvas_y+-(this.pos_y-s),this.editor_selected=!1),!0===this.connection)if("input"===n.classList[0]){var i=this.ele_selected.parentElement.parentElement.id,o=this.ele_selected.classList[1],d=n.parentElement.parentElement.id,l=n.classList[1];if(i!==d){if(0===this.container.querySelectorAll(".connection.node_in_"+d+".node_out_"+i+"."+o+"."+l).length){this.connection_ele.classList.add("node_in_"+d),this.connection_ele.classList.add("node_out_"+i),this.connection_ele.classList.add(o),this.connection_ele.classList.add(l);var a=d.slice(5),c=i.slice(5);this.drawflow.drawflow[this.module].data[c].outputs[o].connections.push({node:a,output:l}),this.drawflow.drawflow[this.module].data[a].inputs[l].connections.push({node:c,input:o}),this.updateConnectionNodes("node-"+c),this.updateConnectionNodes("node-"+a),this.dispatch("connectionCreated",{output_id:c,input_id:a,output_class:o,input_class:l})}else this.connection_ele.remove();this.connection_ele=null}else this.connection_ele.remove(),this.connection_ele=null}else this.connection_ele.remove(),this.connection_ele=null;this.drag=!1,this.connection=!1,this.ele_selected=null,this.editor_selected=!1}contextmenu(e){if(e.preventDefault(),"fixed"===this.editor_mode)return!1;if(this.precanvas.getElementsByClassName("drawflow-delete").length&&this.precanvas.getElementsByClassName("drawflow-delete")[0].remove(),this.node_selected||this.connection_selected){var t=document.createElement("div");t.classList.add("drawflow-delete"),t.innerHTML="x",this.node_selected&&this.node_selected.appendChild(t),this.connection_selected&&(t.style.top=e.clientY*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))+"px",t.style.left=e.clientX*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))+"px",this.precanvas.appendChild(t))}}contextmenuDel(){this.precanvas.getElementsByClassName("drawflow-delete").length&&this.precanvas.getElementsByClassName("drawflow-delete")[0].remove()}key(e){if("fixed"===this.editor_mode)return!1;("Delete"===e.key||"Backspace"===e.key&&e.metaKey)&&(null!=this.node_selected&&"INPUT"!==this.first_click.tagName&&"TEXTAREA"!==this.first_click.tagName&&!0!==this.first_click.hasAttribute("contenteditable")&&this.removeNodeId(this.node_selected.id),null!=this.connection_selected&&this.removeConnection())}zoom_enter(e,t){e.ctrlKey&&(e.preventDefault(),e.deltaY>0?this.zoom_out():this.zoom_in())}zoom_refresh(){this.dispatch("zoom",this.zoom),this.precanvas.style.transform="translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")"}zoom_in(){this.zoomthis.zoom_min&&(this.zoom-=.1,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}drawConnection(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=t;var s=document.createElementNS("http://www.w3.org/2000/svg","path");s.classList.add("main-path"),s.setAttributeNS(null,"d",""),t.classList.add("connection"),t.appendChild(s),this.precanvas.appendChild(t)}updateConnection(e,t){var s=this.connection_ele.children[0],n=this.ele_selected.offsetWidth/2+this.line_path/2+this.ele_selected.parentElement.parentElement.offsetLeft+this.ele_selected.offsetLeft,i=this.ele_selected.offsetHeight/2+this.line_path/2+this.ele_selected.parentElement.parentElement.offsetTop+this.ele_selected.offsetTop,o=e*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),d=t*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),l=n+.5*Math.abs(o-n),a=o-.5*Math.abs(o-n);s.setAttributeNS(null,"d","M "+n+" "+i+" C "+l+" "+i+" "+a+" "+d+" "+o+" "+d)}addConnection(e,t,s,n){var i=this.getModuleFromNodeId(e);if(i===this.getModuleFromNodeId(t)){var o=this.getNodeFromId(e),d=!1;for(var l in o.outputs[s].connections){var a=o.outputs[s].connections[l];a.node==t&&a.output==n&&(d=!0)}if(!1===d){if(this.drawflow.drawflow[i].data[e].outputs[s].connections.push({node:t,output:n}),this.drawflow.drawflow[i].data[t].inputs[n].connections.push({node:e,input:s}),this.module===i){var c=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElementNS("http://www.w3.org/2000/svg","path");r.classList.add("main-path"),r.setAttributeNS(null,"d",""),c.classList.add("connection"),c.classList.add("node_in_node-"+t),c.classList.add("node_out_node-"+e),c.classList.add(s),c.classList.add(n),c.appendChild(r),this.precanvas.appendChild(c),this.updateConnectionNodes("node-"+e),this.updateConnectionNodes("node-"+t)}this.dispatch("connectionCreated",{output_id:e,input_id:t,output_class:s,input_class:n})}}}updateConnectionNodes(e){const t="node_in_"+e,s="node_out_"+e;var n=this.line_path/2;const i=document.getElementsByClassName(s);Object.keys(i).map((function(t,s){var o=document.getElementById(e),d=i[t].classList[1].replace("node_in_",""),l=document.getElementById(d).querySelectorAll("."+i[t].classList[4])[0],a=l.offsetWidth/2+n+l.parentElement.parentElement.offsetLeft+l.offsetLeft,c=l.offsetHeight/2+n+l.parentElement.parentElement.offsetTop+l.offsetTop,r=o.offsetLeft+o.querySelectorAll("."+i[t].classList[3])[0].offsetLeft+o.querySelectorAll("."+i[t].classList[3])[0].offsetWidth/2+n,h=o.offsetTop+o.querySelectorAll("."+i[t].classList[3])[0].offsetTop+o.querySelectorAll("."+i[t].classList[3])[0].offsetHeight/2+n,u=a,p=c,f=r+.5*Math.abs(u-r),m=u-.5*Math.abs(u-r);i[t].children[0].setAttributeNS(null,"d","M "+r+" "+h+" C "+f+" "+h+" "+m+" "+p+" "+u+" "+p)}));const o=document.getElementsByClassName(t);Object.keys(o).map((function(t,s){var i=document.getElementById(e),d=o[t].classList[2].replace("node_out_",""),l=document.getElementById(d).querySelectorAll("."+o[t].classList[3])[0],a=l.offsetWidth/2+n+l.parentElement.parentElement.offsetLeft+l.offsetLeft,c=l.offsetHeight/2+n+l.parentElement.parentElement.offsetTop+l.offsetTop,r=i.offsetLeft+i.querySelectorAll("."+o[t].classList[4])[0].offsetLeft+i.querySelectorAll("."+o[t].classList[4])[0].offsetWidth/2+n,h=i.offsetTop+i.querySelectorAll("."+o[t].classList[4])[0].offsetTop+i.querySelectorAll("."+o[t].classList[4])[0].offsetHeight/2+n,u=a+.5*Math.abs(r-a),p=r-.5*Math.abs(r-a);o[t].children[0].setAttributeNS(null,"d","M "+a+" "+c+" C "+u+" "+c+" "+p+" "+h+" "+r+" "+h)}))}registerNode(e,t,s=null,n=null){this.noderegister[e]={html:t,props:s,options:n}}getNodeFromId(e){var t=this.getModuleFromNodeId(e);return JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e]))}getNodesFromName(e){var t=[];const s=this.drawflow.drawflow;return Object.keys(s).map((function(n,i){for(var o in s[n].data)s[n].data[o].name==e&&t.push(s[n].data[o].id)})),t}addNode(e,t,s,n,i,o,d,l,a=!1){const c=document.createElement("div");c.classList.add("parent-node");const r=document.createElement("div");r.innerHTML="",r.setAttribute("id","node-"+this.nodeId),r.classList.add("drawflow-node"),""!=o&&r.classList.add(o);const h=document.createElement("div");h.classList.add("inputs");const u=document.createElement("div");u.classList.add("outputs");const p={};for(var f=0;fe(this.noderegister[l].html,{props:this.noderegister[l].props}),...this.noderegister[l].options}).$mount();_.appendChild(e.$el)}Object.entries(d).forEach((function(e,t){if("object"==typeof e[1])!function e(t,s,n){if(null===t)t=d[s];else t=t[s];Object.entries(t).forEach((function(i,o){if("object"==typeof i[1])e(t,i[0],s+"-"+i[0]);else for(var d=_.querySelectorAll("[df-"+n+"-"+i[0]+"]"),l=0;lt(this.noderegister[e.html].html,{props:this.noderegister[e.html].props}),...this.noderegister[e.html].options}).$mount();l.appendChild(t.$el)}Object.entries(e.data).forEach((function(t,s){if("object"==typeof t[1])!function t(s,n,i){if(null===s)s=e.data[n];else s=s[n];Object.entries(s).forEach((function(e,o){if("object"==typeof e[1])t(s,e[0],n+"-"+e[0]);else for(var d=l.querySelectorAll("[df-"+i+"-"+e[0]+"]"),a=0;a-1){this.module===i&&document.querySelector(".connection.node_in_node-"+t+".node_out_node-"+e+"."+s+"."+n).remove();var o=this.drawflow.drawflow[i].data[e].outputs[s].connections.findIndex((function(e,s){return e.node==t&&e.output===n}));this.drawflow.drawflow[i].data[e].outputs[s].connections.splice(o,1);var d=this.drawflow.drawflow[i].data[t].inputs[n].connections.findIndex((function(t,n){return t.node==e&&t.input===s}));return this.drawflow.drawflow[i].data[t].inputs[n].connections.splice(d,1),this.dispatch("connectionRemoved",{output_id:e,input_id:t,output_class:s,input_class:n}),!0}return!1}return!1}removeConnectionNodeId(e){const t="node_in_"+e,s="node_out_"+e,n=document.getElementsByClassName(s);for(var i=n.length-1;i>=0;i--){var o=n[i].classList,d=this.drawflow.drawflow[this.module].data[o[1].slice(13)].inputs[o[4]].connections.findIndex((function(e,t){return e.node===o[2].slice(14)&&e.input===o[3]}));this.drawflow.drawflow[this.module].data[o[1].slice(13)].inputs[o[4]].connections.splice(d,1);var l=this.drawflow.drawflow[this.module].data[o[2].slice(14)].outputs[o[3]].connections.findIndex((function(e,t){return e.node===o[1].slice(13)&&e.output===o[4]}));this.drawflow.drawflow[this.module].data[o[2].slice(14)].outputs[o[3]].connections.splice(l,1),n[i].remove(),this.dispatch("connectionRemoved",{output_id:o[2].slice(14),input_id:o[1].slice(13),output_class:o[3],input_class:o[4]})}const a=document.getElementsByClassName(t);for(i=a.length-1;i>=0;i--){o=a[i].classList,l=this.drawflow.drawflow[this.module].data[o[2].slice(14)].outputs[o[3]].connections.findIndex((function(e,t){return e.node===o[1].slice(13)&&e.output===o[4]}));this.drawflow.drawflow[this.module].data[o[2].slice(14)].outputs[o[3]].connections.splice(l,1);d=this.drawflow.drawflow[this.module].data[o[1].slice(13)].inputs[o[4]].connections.findIndex((function(e,t){return e.node===o[2].slice(14)&&e.input===o[3]}));this.drawflow.drawflow[this.module].data[o[1].slice(13)].inputs[o[4]].connections.splice(d,1),a[i].remove(),this.dispatch("connectionRemoved",{output_id:o[2].slice(14),input_id:o[1].slice(13),output_class:o[3],input_class:o[4]})}}getModuleFromNodeId(e){var t;const s=this.drawflow.drawflow;return Object.keys(s).map((function(n,i){Object.keys(s[n].data).map((function(s,i){s==e&&(t=n)}))})),t}addModule(e){this.drawflow.drawflow[e]={data:{}},this.dispatch("moduleCreated",e)}changeModule(e){this.dispatch("moduleChanged",e),this.module=e,this.precanvas.innerHTML="",this.canvas_x=0,this.canvas_y=0,this.pos_x=0,this.pos_y=0,this.mouse_x=0,this.mouse_y=0,this.zoom=1,this.precanvas.style.transform="",this.import(this.drawflow)}removeModule(e){this.module===e&&this.changeModule("Home"),delete this.drawflow.drawflow[e],this.dispatch("moduleRemoved",e)}clearModuleSelected(){this.precanvas.innerHTML="",this.drawflow.drawflow[this.module]={data:{}}}clear(){this.precanvas.innerHTML="",this.drawflow={drawflow:{Home:{data:{}}}}}export(){return JSON.parse(JSON.stringify(this.drawflow))}import(e){this.clear(),this.drawflow=JSON.parse(JSON.stringify(e)),this.load(),this.dispatch("import","import")}on(e,t){return"function"!=typeof t?(console.error("The listener callback must be a function, the given type is "+typeof t),!1):"string"!=typeof e?(console.error("The event name must be a string, the given type is "+typeof e),!1):(void 0===this.events[e]&&(this.events[e]={listeners:[]}),void this.events[e].listeners.push(t))}removeListener(e,t){if(void 0===this.events[e])return!1;this.events[e].listeners=this.events[e].listeners.filter(e=>e.toString()!==t.toString())}dispatch(e,t){if(void 0===this.events[e])return!1;this.events[e].listeners.forEach(e=>{e(t)})}}}]).default})); \ No newline at end of file +!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Drawflow=t():e.Drawflow=t()}(window,(function(){return function(e){var t={};function s(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,s),o.l=!0,o.exports}return s.m=e,s.c=t,s.d=function(e,t,n){s.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},s.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},s.t=function(e,t){if(1&t&&(e=s(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(s.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)s.d(n,o,function(t){return e[t]}.bind(null,o));return n},s.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return s.d(t,"a",t),t},s.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},s.p="",s(s.s=0)}([function(e,t,s){"use strict";s.r(t),s.d(t,"default",(function(){return n}));class n{constructor(e,t=null){this.events={},this.container=e,this.precanvas=null,this.nodeId=1,this.ele_selected=null,this.node_selected=null,this.drag=!1,this.editor_selected=!1,this.connection=!1,this.connection_ele=null,this.connection_selected=null,this.canvas_x=0,this.canvas_y=0,this.pos_x=0,this.pos_y=0,this.mouse_x=0,this.mouse_y=0,this.line_path=5,this.first_click=null,this.select_elements=null,this.noderegister={},this.render=t,this.drawflow={drawflow:{Home:{data:{}}}},this.module="Home",this.editor_mode="edit",this.zoom=1,this.zoom_max=1.6,this.zoom_min=.5,this.evCache=new Array,this.prevDiff=-1}start(){this.container.classList.add("parent-drawflow"),this.container.tabIndex=0,this.precanvas=document.createElement("div"),this.precanvas.classList.add("drawflow"),this.container.appendChild(this.precanvas),this.container.addEventListener("mouseup",this.dragEnd.bind(this)),this.container.addEventListener("mousemove",this.position.bind(this)),this.container.addEventListener("mousedown",this.click.bind(this)),this.container.addEventListener("touchend",this.dragEnd.bind(this)),this.container.addEventListener("touchmove",this.position.bind(this)),this.container.addEventListener("touchstart",this.click.bind(this)),this.container.addEventListener("contextmenu",this.contextmenu.bind(this)),this.container.addEventListener("keydown",this.key.bind(this)),this.container.addEventListener("wheel",this.zoom_enter.bind(this)),this.container.addEventListener("input",this.updateNodeValue.bind(this)),this.container.onpointerdown=this.pointerdown_handler.bind(this),this.container.onpointermove=this.pointermove_handler.bind(this),this.container.onpointerup=this.pointerup_handler.bind(this),this.container.onpointercancel=this.pointerup_handler.bind(this),this.container.onpointerout=this.pointerup_handler.bind(this),this.container.onpointerleave=this.pointerup_handler.bind(this),this.load()}pointerdown_handler(e){this.evCache.push(e)}pointermove_handler(e){for(var t=0;t100&&(s>this.prevDiff&&this.zoom_in(),s=s&&(s=parseInt(e)+1)}))})),this.nodeId=s}click(e){if("fixed"===this.editor_mode){if("parent-drawflow"!==e.target.classList[0]&&"drawflow"!==e.target.classList[0])return!1;this.ele_selected=e.target.closest(".parent-drawflow")}else this.first_click=e.target,this.ele_selected=e.target,0===e.button&&this.contextmenuDel(),null!=e.target.closest(".drawflow_content_node")&&(this.ele_selected=e.target.closest(".drawflow_content_node").parentElement);switch(this.ele_selected.classList[0]){case"drawflow-node":null!=this.node_selected&&this.node_selected.classList.remove("selected"),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.dispatch("nodeSelected",this.ele_selected.id.slice(5)),this.node_selected=this.ele_selected,this.node_selected.classList.add("selected"),this.drag=!0;break;case"output":this.connection=!0,null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.drawConnection(e.target);break;case"parent-drawflow":case"drawflow":null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.editor_selected=!0;break;case"main-path":null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null),this.connection_selected=this.ele_selected,this.connection_selected.classList.add("selected");break;case"drawflow-delete":this.node_selected&&this.removeNodeId(this.node_selected.id),this.connection_selected&&this.removeConnection(),null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.connection_selected=null)}"touchstart"===e.type?(this.pos_x=e.touches[0].clientX,this.pos_y=e.touches[0].clientY):(this.pos_x=e.clientX,this.pos_y=e.clientY)}position(e){if("touchmove"===e.type)var t=e.touches[0].clientX,s=e.touches[0].clientY;else t=e.clientX,s=e.clientY;if(this.connection&&this.updateConnection(t,s),this.editor_selected&&(n=this.canvas_x+-(this.pos_x-t),o=this.canvas_y+-(this.pos_y-s),this.dispatch("translate",{x:n,y:o}),this.precanvas.style.transform="translate("+n+"px, "+o+"px) scale("+this.zoom+")"),this.drag){var n=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),o=(this.pos_y-s)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=s,this.ele_selected.style.top=this.ele_selected.offsetTop-o+"px",this.ele_selected.style.left=this.ele_selected.offsetLeft-n+"px",this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_x=this.ele_selected.offsetLeft-n,this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_y=this.ele_selected.offsetTop-o,this.updateConnectionNodes(this.ele_selected.id,t,s)}"touchmove"===e.type&&(this.mouse_x=t,this.mouse_y=s),this.dispatch("mouseMove",{x:t,y:s})}dragEnd(e){if(null!=this.select_elements&&(this.select_elements.remove(),this.select_elements=null),"touchend"===e.type)var t=this.mouse_x,s=this.mouse_y,n=document.elementFromPoint(t,s);else t=e.clientX,s=e.clientY,n=e.target;if(this.drag&&this.dispatch("nodeMoved",this.ele_selected.id.slice(5)),this.editor_selected&&(this.canvas_x=this.canvas_x+-(this.pos_x-t),this.canvas_y=this.canvas_y+-(this.pos_y-s),this.editor_selected=!1),!0===this.connection)if("input"===n.classList[0]){var o=this.ele_selected.parentElement.parentElement.id,i=this.ele_selected.classList[1],d=n.parentElement.parentElement.id,l=n.classList[1];if(o!==d){if(0===this.container.querySelectorAll(".connection.node_in_"+d+".node_out_"+o+"."+i+"."+l).length){this.connection_ele.classList.add("node_in_"+d),this.connection_ele.classList.add("node_out_"+o),this.connection_ele.classList.add(i),this.connection_ele.classList.add(l);var a=d.slice(5),c=o.slice(5);this.drawflow.drawflow[this.module].data[c].outputs[i].connections.push({node:a,output:l}),this.drawflow.drawflow[this.module].data[a].inputs[l].connections.push({node:c,input:i}),this.updateConnectionNodes("node-"+c),this.updateConnectionNodes("node-"+a),this.dispatch("connectionCreated",{output_id:c,input_id:a,output_class:i,input_class:l})}else this.connection_ele.remove();this.connection_ele=null}else this.connection_ele.remove(),this.connection_ele=null}else this.connection_ele.remove(),this.connection_ele=null;this.drag=!1,this.connection=!1,this.ele_selected=null,this.editor_selected=!1}contextmenu(e){if(e.preventDefault(),"fixed"===this.editor_mode)return!1;if(this.precanvas.getElementsByClassName("drawflow-delete").length&&this.precanvas.getElementsByClassName("drawflow-delete")[0].remove(),this.node_selected||this.connection_selected){var t=document.createElement("div");t.classList.add("drawflow-delete"),t.innerHTML="x",this.node_selected&&this.node_selected.appendChild(t),this.connection_selected&&(t.style.top=e.clientY*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))+"px",t.style.left=e.clientX*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))+"px",this.precanvas.appendChild(t))}}contextmenuDel(){this.precanvas.getElementsByClassName("drawflow-delete").length&&this.precanvas.getElementsByClassName("drawflow-delete")[0].remove()}key(e){if("fixed"===this.editor_mode)return!1;("Delete"===e.key||"Backspace"===e.key&&e.metaKey)&&(null!=this.node_selected&&"INPUT"!==this.first_click.tagName&&"TEXTAREA"!==this.first_click.tagName&&!0!==this.first_click.hasAttribute("contenteditable")&&this.removeNodeId(this.node_selected.id),null!=this.connection_selected&&this.removeConnection())}zoom_enter(e,t){e.ctrlKey&&(e.preventDefault(),e.deltaY>0?this.zoom_out():this.zoom_in())}zoom_refresh(){this.dispatch("zoom",this.zoom),this.precanvas.style.transform="translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")"}zoom_in(){this.zoomthis.zoom_min&&(this.zoom-=.1,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}drawConnection(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=t;var s=document.createElementNS("http://www.w3.org/2000/svg","path");s.classList.add("main-path"),s.setAttributeNS(null,"d",""),t.classList.add("connection"),t.appendChild(s),this.precanvas.appendChild(t)}updateConnection(e,t){var s=this.connection_ele.children[0],n=this.ele_selected.offsetWidth/2+this.line_path/2+this.ele_selected.parentElement.parentElement.offsetLeft+this.ele_selected.offsetLeft,o=this.ele_selected.offsetHeight/2+this.line_path/2+this.ele_selected.parentElement.parentElement.offsetTop+this.ele_selected.offsetTop,i=e*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),d=t*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),l=n+.5*Math.abs(i-n),a=i-.5*Math.abs(i-n);s.setAttributeNS(null,"d","M "+n+" "+o+" C "+l+" "+o+" "+a+" "+d+" "+i+" "+d)}addConnection(e,t,s,n){var o=this.getModuleFromNodeId(e);if(o===this.getModuleFromNodeId(t)){var i=this.getNodeFromId(e),d=!1;for(var l in i.outputs[s].connections){var a=i.outputs[s].connections[l];a.node==t&&a.output==n&&(d=!0)}if(!1===d){if(this.drawflow.drawflow[o].data[e].outputs[s].connections.push({node:t,output:n}),this.drawflow.drawflow[o].data[t].inputs[n].connections.push({node:e,input:s}),this.module===o){var c=document.createElementNS("http://www.w3.org/2000/svg","svg"),r=document.createElementNS("http://www.w3.org/2000/svg","path");r.classList.add("main-path"),r.setAttributeNS(null,"d",""),c.classList.add("connection"),c.classList.add("node_in_node-"+t),c.classList.add("node_out_node-"+e),c.classList.add(s),c.classList.add(n),c.appendChild(r),this.precanvas.appendChild(c),this.updateConnectionNodes("node-"+e),this.updateConnectionNodes("node-"+t)}this.dispatch("connectionCreated",{output_id:e,input_id:t,output_class:s,input_class:n})}}}updateConnectionNodes(e){const t="node_in_"+e,s="node_out_"+e;var n=this.line_path/2;const o=document.getElementsByClassName(s);Object.keys(o).map((function(t,s){var i=document.getElementById(e),d=o[t].classList[1].replace("node_in_",""),l=document.getElementById(d).querySelectorAll("."+o[t].classList[4])[0],a=l.offsetWidth/2+n+l.parentElement.parentElement.offsetLeft+l.offsetLeft,c=l.offsetHeight/2+n+l.parentElement.parentElement.offsetTop+l.offsetTop,r=i.offsetLeft+i.querySelectorAll("."+o[t].classList[3])[0].offsetLeft+i.querySelectorAll("."+o[t].classList[3])[0].offsetWidth/2+n,h=i.offsetTop+i.querySelectorAll("."+o[t].classList[3])[0].offsetTop+i.querySelectorAll("."+o[t].classList[3])[0].offsetHeight/2+n,u=a,p=c,f=r+.5*Math.abs(u-r),m=u-.5*Math.abs(u-r);o[t].children[0].setAttributeNS(null,"d","M "+r+" "+h+" C "+f+" "+h+" "+m+" "+p+" "+u+" "+p)}));const i=document.getElementsByClassName(t);Object.keys(i).map((function(t,s){var o=document.getElementById(e),d=i[t].classList[2].replace("node_out_",""),l=document.getElementById(d).querySelectorAll("."+i[t].classList[3])[0],a=l.offsetWidth/2+n+l.parentElement.parentElement.offsetLeft+l.offsetLeft,c=l.offsetHeight/2+n+l.parentElement.parentElement.offsetTop+l.offsetTop,r=o.offsetLeft+o.querySelectorAll("."+i[t].classList[4])[0].offsetLeft+o.querySelectorAll("."+i[t].classList[4])[0].offsetWidth/2+n,h=o.offsetTop+o.querySelectorAll("."+i[t].classList[4])[0].offsetTop+o.querySelectorAll("."+i[t].classList[4])[0].offsetHeight/2+n,u=a+.5*Math.abs(r-a),p=r-.5*Math.abs(r-a);i[t].children[0].setAttributeNS(null,"d","M "+a+" "+c+" C "+u+" "+c+" "+p+" "+h+" "+r+" "+h)}))}registerNode(e,t,s=null,n=null){this.noderegister[e]={html:t,props:s,options:n}}getNodeFromId(e){var t=this.getModuleFromNodeId(e);return JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e]))}getNodesFromName(e){var t=[];const s=this.drawflow.drawflow;return Object.keys(s).map((function(n,o){for(var i in s[n].data)s[n].data[i].name==e&&t.push(s[n].data[i].id)})),t}addNode(e,t,s,n,o,i,d,l,a=!1){const c=document.createElement("div");c.classList.add("parent-node");const r=document.createElement("div");r.innerHTML="",r.setAttribute("id","node-"+this.nodeId),r.classList.add("drawflow-node"),""!=i&&r.classList.add(i);const h=document.createElement("div");h.classList.add("inputs");const u=document.createElement("div");u.classList.add("outputs");const p={};for(var f=0;fe(this.noderegister[l].html,{props:this.noderegister[l].props}),...this.noderegister[l].options}).$mount();w.appendChild(e.$el)}Object.entries(d).forEach((function(e,t){if("object"==typeof e[1])!function e(t,s,n){if(null===t)t=d[s];else t=t[s];Object.entries(t).forEach((function(o,i){if("object"==typeof o[1])e(t,o[0],s+"-"+o[0]);else for(var d=w.querySelectorAll("[df-"+n+"-"+o[0]+"]"),l=0;lt(this.noderegister[e.html].html,{props:this.noderegister[e.html].props}),...this.noderegister[e.html].options}).$mount();l.appendChild(t.$el)}Object.entries(e.data).forEach((function(t,s){if("object"==typeof t[1])!function t(s,n,o){if(null===s)s=e.data[n];else s=s[n];Object.entries(s).forEach((function(e,i){if("object"==typeof e[1])t(s,e[0],n+"-"+e[0]);else for(var d=l.querySelectorAll("[df-"+o+"-"+e[0]+"]"),a=0;a{this.removeSingleConnection(e.id_output,e.id,e.output_class,e.input_class)}),delete this.drawflow.drawflow[s].data[e].inputs[t];const i=[],d=this.drawflow.drawflow[s].data[e].inputs;Object.keys(d).map((function(e,t){i.push(d[e])})),this.drawflow.drawflow[s].data[e].inputs={};const l=t.slice(6);let a=[];if(i.forEach((t,n)=>{t.connections.forEach((e,t)=>{a.push(e)}),this.drawflow.drawflow[s].data[e].inputs["input_"+(n+1)]=t}),a=new Set(a.map(e=>JSON.stringify(e))),a=Array.from(a).map(e=>JSON.parse(e)),this.module===s){document.querySelectorAll("#node-"+e+" .inputs .input").forEach((e,t)=>{const s=e.classList[1].slice(6);l{this.drawflow.drawflow[s].data[t.node].outputs[t.input].connections.forEach((n,o)=>{if(n.node==e){const i=n.output.slice(6);if(l{this.removeSingleConnection(e.id,e.id_input,e.output_class,e.input_class)}),delete this.drawflow.drawflow[s].data[e].outputs[t];const i=[],d=this.drawflow.drawflow[s].data[e].outputs;Object.keys(d).map((function(e,t){i.push(d[e])})),this.drawflow.drawflow[s].data[e].outputs={};const l=t.slice(7);let a=[];if(i.forEach((t,n)=>{t.connections.forEach((e,t)=>{a.push(e)}),this.drawflow.drawflow[s].data[e].outputs["output_"+(n+1)]=t}),a=new Set(a.map(e=>JSON.stringify(e))),a=Array.from(a).map(e=>JSON.parse(e)),this.module===s){document.querySelectorAll("#node-"+e+" .outputs .output").forEach((e,t)=>{const s=e.classList[1].slice(7);l{this.drawflow.drawflow[s].data[t.node].inputs[t.output].connections.forEach((n,o)=>{if(n.node==e){const i=n.input.slice(7);if(l-1){this.module===o&&document.querySelector(".connection.node_in_node-"+t+".node_out_node-"+e+"."+s+"."+n).remove();var i=this.drawflow.drawflow[o].data[e].outputs[s].connections.findIndex((function(e,s){return e.node==t&&e.output===n}));this.drawflow.drawflow[o].data[e].outputs[s].connections.splice(i,1);var d=this.drawflow.drawflow[o].data[t].inputs[n].connections.findIndex((function(t,n){return t.node==e&&t.input===s}));return this.drawflow.drawflow[o].data[t].inputs[n].connections.splice(d,1),this.dispatch("connectionRemoved",{output_id:e,input_id:t,output_class:s,input_class:n}),!0}return!1}return!1}removeConnectionNodeId(e){const t="node_in_"+e,s="node_out_"+e,n=document.getElementsByClassName(s);for(var o=n.length-1;o>=0;o--){var i=n[o].classList,d=this.drawflow.drawflow[this.module].data[i[1].slice(13)].inputs[i[4]].connections.findIndex((function(e,t){return e.node===i[2].slice(14)&&e.input===i[3]}));this.drawflow.drawflow[this.module].data[i[1].slice(13)].inputs[i[4]].connections.splice(d,1);var l=this.drawflow.drawflow[this.module].data[i[2].slice(14)].outputs[i[3]].connections.findIndex((function(e,t){return e.node===i[1].slice(13)&&e.output===i[4]}));this.drawflow.drawflow[this.module].data[i[2].slice(14)].outputs[i[3]].connections.splice(l,1),n[o].remove(),this.dispatch("connectionRemoved",{output_id:i[2].slice(14),input_id:i[1].slice(13),output_class:i[3],input_class:i[4]})}const a=document.getElementsByClassName(t);for(o=a.length-1;o>=0;o--){i=a[o].classList,l=this.drawflow.drawflow[this.module].data[i[2].slice(14)].outputs[i[3]].connections.findIndex((function(e,t){return e.node===i[1].slice(13)&&e.output===i[4]}));this.drawflow.drawflow[this.module].data[i[2].slice(14)].outputs[i[3]].connections.splice(l,1);d=this.drawflow.drawflow[this.module].data[i[1].slice(13)].inputs[i[4]].connections.findIndex((function(e,t){return e.node===i[2].slice(14)&&e.input===i[3]}));this.drawflow.drawflow[this.module].data[i[1].slice(13)].inputs[i[4]].connections.splice(d,1),a[o].remove(),this.dispatch("connectionRemoved",{output_id:i[2].slice(14),input_id:i[1].slice(13),output_class:i[3],input_class:i[4]})}}getModuleFromNodeId(e){var t;const s=this.drawflow.drawflow;return Object.keys(s).map((function(n,o){Object.keys(s[n].data).map((function(s,o){s==e&&(t=n)}))})),t}addModule(e){this.drawflow.drawflow[e]={data:{}},this.dispatch("moduleCreated",e)}changeModule(e){this.dispatch("moduleChanged",e),this.module=e,this.precanvas.innerHTML="",this.canvas_x=0,this.canvas_y=0,this.pos_x=0,this.pos_y=0,this.mouse_x=0,this.mouse_y=0,this.zoom=1,this.precanvas.style.transform="",this.import(this.drawflow)}removeModule(e){this.module===e&&this.changeModule("Home"),delete this.drawflow.drawflow[e],this.dispatch("moduleRemoved",e)}clearModuleSelected(){this.precanvas.innerHTML="",this.drawflow.drawflow[this.module]={data:{}}}clear(){this.precanvas.innerHTML="",this.drawflow={drawflow:{Home:{data:{}}}}}export(){return JSON.parse(JSON.stringify(this.drawflow))}import(e){this.clear(),this.drawflow=JSON.parse(JSON.stringify(e)),this.load(),this.dispatch("import","import")}on(e,t){return"function"!=typeof t?(console.error("The listener callback must be a function, the given type is "+typeof t),!1):"string"!=typeof e?(console.error("The event name must be a string, the given type is "+typeof e),!1):(void 0===this.events[e]&&(this.events[e]={listeners:[]}),void this.events[e].listeners.push(t))}removeListener(e,t){if(void 0===this.events[e])return!1;this.events[e].listeners=this.events[e].listeners.filter(e=>e.toString()!==t.toString())}dispatch(e,t){if(void 0===this.events[e])return!1;this.events[e].listeners.forEach(e=>{e(t)})}}}]).default})); \ No newline at end of file diff --git a/dist/index.js b/dist/index.js index 3b9ef50..3bd4b11 100644 --- a/dist/index.js +++ b/dist/index.js @@ -890,6 +890,146 @@ export default class Drawflow { this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = { "connections": []}; } + removeNodeInput(id, input_class) { + var moduleName = this.getModuleFromNodeId(id) + const infoNode = this.getNodeFromId(id) + if(this.module === moduleName) { + document.querySelector('#node-'+id+' .inputs .input.'+input_class).remove(); + } + const removeInputs = []; + Object.keys(infoNode.inputs[input_class].connections).map(function(key, index) { + const id_output = infoNode.inputs[input_class].connections[index].node; + const output_class = infoNode.inputs[input_class].connections[index].input; + removeInputs.push({id_output, id, output_class, input_class}) + }) + // Remove connections + removeInputs.forEach((item, i) => { + this.removeSingleConnection(item.id_output, item.id, item.output_class, item.input_class); + }); + + delete this.drawflow.drawflow[moduleName].data[id].inputs[input_class]; + + // Update connection + const connections = []; + const connectionsInputs = this.drawflow.drawflow[moduleName].data[id].inputs + Object.keys(connectionsInputs).map(function(key, index) { + connections.push(connectionsInputs[key]); + }); + this.drawflow.drawflow[moduleName].data[id].inputs = {}; + const input_class_id = input_class.slice(6); + let nodeUpdates = []; + connections.forEach((item, i) => { + item.connections.forEach((itemx, f) => { + nodeUpdates.push(itemx); + }); + this.drawflow.drawflow[moduleName].data[id].inputs['input_'+ (i+1)] = item; + }); + nodeUpdates = new Set(nodeUpdates.map(e => JSON.stringify(e))); + nodeUpdates = Array.from(nodeUpdates).map(e => JSON.parse(e)); + + if(this.module === moduleName) { + const eles = document.querySelectorAll("#node-"+id +" .inputs .input"); + eles.forEach((item, i) => { + const id_class = item.classList[1].slice(6); + if(input_class_id < id_class) { + item.classList.remove('input_'+id_class); + item.classList.add('input_'+(id_class-1)); + } + }); + + } + + nodeUpdates.forEach((itemx, i) => { + this.drawflow.drawflow[moduleName].data[itemx.node].outputs[itemx.input].connections.forEach((itemz, g) => { + if(itemz.node == id) { + const output_id = itemz.output.slice(6); + if(input_class_id < output_id) { + if(this.module === moduleName) { + const ele = document.querySelector(".connection.node_in_node-"+id+".node_out_node-"+itemx.node+"."+itemx.input+".input_"+output_id); + ele.classList.remove('input_'+output_id); + ele.classList.add('input_'+(output_id-1)); + } + this.drawflow.drawflow[moduleName].data[itemx.node].outputs[itemx.input].connections[g] = { node: itemz.node, output: 'input_'+(output_id-1)} + } + } + }); + }); + this.updateConnectionNodes('node-'+id); + } + + removeNodeOutput(id, output_class) { + var moduleName = this.getModuleFromNodeId(id) + const infoNode = this.getNodeFromId(id) + if(this.module === moduleName) { + document.querySelector('#node-'+id+' .outputs .output.'+output_class).remove(); + } + const removeOutputs = []; + Object.keys(infoNode.outputs[output_class].connections).map(function(key, index) { + const id_input = infoNode.outputs[output_class].connections[index].node; + const input_class = infoNode.outputs[output_class].connections[index].output; + removeOutputs.push({id, id_input, output_class, input_class}) + }) + // Remove connections + removeOutputs.forEach((item, i) => { + this.removeSingleConnection(item.id, item.id_input, item.output_class, item.input_class); + }); + + delete this.drawflow.drawflow[moduleName].data[id].outputs[output_class]; + + // Update connection + const connections = []; + const connectionsOuputs = this.drawflow.drawflow[moduleName].data[id].outputs + Object.keys(connectionsOuputs).map(function(key, index) { + connections.push(connectionsOuputs[key]); + }); + this.drawflow.drawflow[moduleName].data[id].outputs = {}; + const output_class_id = output_class.slice(7); + let nodeUpdates = []; + connections.forEach((item, i) => { + item.connections.forEach((itemx, f) => { + nodeUpdates.push(itemx); + }); + this.drawflow.drawflow[moduleName].data[id].outputs['output_'+ (i+1)] = item; + }); + nodeUpdates = new Set(nodeUpdates.map(e => JSON.stringify(e))); + nodeUpdates = Array.from(nodeUpdates).map(e => JSON.parse(e)); + + if(this.module === moduleName) { + const eles = document.querySelectorAll("#node-"+id +" .outputs .output"); + eles.forEach((item, i) => { + const id_class = item.classList[1].slice(7); + if(output_class_id < id_class) { + item.classList.remove('output_'+id_class); + item.classList.add('output_'+(id_class-1)); + } + }); + + } + + nodeUpdates.forEach((itemx, i) => { + this.drawflow.drawflow[moduleName].data[itemx.node].inputs[itemx.output].connections.forEach((itemz, g) => { + if(itemz.node == id) { + const input_id = itemz.input.slice(7); + if(output_class_id < input_id) { + if(this.module === moduleName) { + const ele = document.querySelector(".connection.node_in_node-"+itemx.node+".node_out_node-"+id+".output_"+input_id+"."+itemx.output); + ele.classList.remove('output_'+input_id); + ele.classList.remove(itemx.output); + ele.classList.add('output_'+(input_id-1)); + ele.classList.add(itemx.output); + } + this.drawflow.drawflow[moduleName].data[itemx.node].inputs[itemx.output].connections[g] = { node: itemz.node, input: 'output_'+(input_id-1)} + } + } + }); + }); + + this.updateConnectionNodes('node-'+id); + + } + + + removeNodeId(id) { this.removeConnectionNodeId(id); var moduleName = this.getModuleFromNodeId(id.slice(5)) diff --git a/package.json b/package.json index b843ce8..28ad3fd 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "drawflow", - "version": "0.0.14", + "version": "0.0.15", "description": "Simple flow library", "main": "dist/index.js", "scripts": {