diff --git a/dist/drawflow.min.js b/dist/drawflow.min.js
index f86102d..db0c02c 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()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(s,i,function(t){return e[t]}.bind(null,i));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));class s{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.reroute=!1,this.reroute_fix_curvature=!1,this.curvature=.5,this.reroute_curvature_start_end=.5,this.reroute_curvature=.5,this.reroute_width=6,this.drag_point=!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.force_first_input=!1,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.addEventListener("dblclick",this.dblclick.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;t<this.evCache.length;t++)if(e.pointerId==this.evCache[t].pointerId){this.evCache[t]=e;break}if(2==this.evCache.length){var n=Math.abs(this.evCache[0].clientX-this.evCache[1].clientX);this.prevDiff>100&&(n>this.prevDiff&&this.zoom_in(),n<this.prevDiff&&this.zoom_out()),this.prevDiff=n}}pointerup_handler(e){this.remove_event(e),this.evCache.length<2&&(this.prevDiff=-1)}remove_event(e){for(var t=0;t<this.evCache.length;t++)if(this.evCache[t].pointerId==e.pointerId){this.evCache.splice(t,1);break}}load(){for(var e in this.drawflow.drawflow[this.module].data)this.addNodeImport(this.drawflow.drawflow[this.module].data[e],this.precanvas);if(this.reroute)for(var e in this.drawflow.drawflow[this.module].data)this.addRerouteImport(this.drawflow.drawflow[this.module].data[e]);for(var e in this.drawflow.drawflow[this.module].data)this.updateConnectionNodes("node-"+e);const t=this.drawflow.drawflow;let n=1;Object.keys(t).map((function(e,s){Object.keys(t[e].data).map((function(e,t){parseInt(e)>=n&&(n=parseInt(e)+1)}))})),this.nodeId=n}removeReouteConnectionSelected(){this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.remove("selected")})}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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),this.connection_selected=null),this.connection_selected=this.ele_selected,this.connection_selected.classList.add("selected"),this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.add("selected")});break;case"point":this.drag_point=!0,this.ele_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.removeReouteConnectionSelected(),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,n=e.touches[0].clientY;else t=e.clientX,n=e.clientY;if(this.connection&&this.updateConnection(t,n),this.editor_selected&&(s=this.canvas_x+-(this.pos_x-t),i=this.canvas_y+-(this.pos_y-n),this.dispatch("translate",{x:s,y:i}),this.precanvas.style.transform="translate("+s+"px, "+i+"px) scale("+this.zoom+")"),this.drag){var s=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=n,this.ele_selected.style.top=this.ele_selected.offsetTop-i+"px",this.ele_selected.style.left=this.ele_selected.offsetLeft-s+"px",this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_x=this.ele_selected.offsetLeft-s,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,n)}if(this.drag_point){s=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=n;var o=this.pos_x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),l=this.pos_y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom));this.ele_selected.setAttributeNS(null,"cx",o),this.ele_selected.setAttributeNS(null,"cy",l);const e=this.ele_selected.parentElement.classList[2].slice(9),c=this.ele_selected.parentElement.classList[1].slice(13),d=this.ele_selected.parentElement.classList[3],a=this.ele_selected.parentElement.classList[4];let r=Array.from(this.ele_selected.parentElement.children).indexOf(this.ele_selected)-1;if(this.reroute_fix_curvature){r-=this.ele_selected.parentElement.querySelectorAll(".main-path").length-1,r<0&&(r=0)}const h=e.slice(5),u=this.drawflow.drawflow[this.module].data[h].outputs[d].connections.findIndex((function(e,t){return e.node===c&&e.output===a}));this.drawflow.drawflow[this.module].data[h].outputs[d].connections[u].points[r]={pos_x:o,pos_y:l};const p=this.ele_selected.parentElement.classList[2].slice(9);this.updateConnectionNodes(p,t,n)}"touchmove"===e.type&&(this.mouse_x=t,this.mouse_y=n),this.dispatch("mouseMove",{x:t,y:n})}dragEnd(e){if(null!=this.select_elements&&(this.select_elements.remove(),this.select_elements=null),"touchend"===e.type)var t=this.mouse_x,n=this.mouse_y,s=document.elementFromPoint(t,n);else t=e.clientX,n=e.clientY,s=e.target;if(this.drag&&this.dispatch("nodeMoved",this.ele_selected.id.slice(5)),this.drag_point&&this.ele_selected.classList.remove("selected"),this.editor_selected&&(this.canvas_x=this.canvas_x+-(this.pos_x-t),this.canvas_y=this.canvas_y+-(this.pos_y-n),this.editor_selected=!1),!0===this.connection)if(console.log(s),"input"===s.classList[0]||this.force_first_input&&(null!=s.closest(".drawflow_content_node")||"drawflow-node"===s.classList[0])){if(!this.force_first_input||null==s.closest(".drawflow_content_node")&&"drawflow-node"!==s.classList[0])i=s.parentElement.parentElement.id,o=s.classList[1];else{if(null!=s.closest(".drawflow_content_node"))var i=s.closest(".drawflow_content_node").parentElement.id;else var i=s.id;var o="input_1"}var l=this.ele_selected.parentElement.parentElement.id,c=this.ele_selected.classList[1];if(l!==i){if(0===this.container.querySelectorAll(".connection.node_in_"+i+".node_out_"+l+"."+c+"."+o).length){this.connection_ele.classList.add("node_in_"+i),this.connection_ele.classList.add("node_out_"+l),this.connection_ele.classList.add(c),this.connection_ele.classList.add(o);var d=i.slice(5),a=l.slice(5);this.drawflow.drawflow[this.module].data[a].outputs[c].connections.push({node:d,output:o}),this.drawflow.drawflow[this.module].data[d].inputs[o].connections.push({node:a,input:c}),this.updateConnectionNodes("node-"+a),this.updateConnectionNodes("node-"+d),this.dispatch("connectionCreated",{output_id:a,input_id:d,output_class:c,input_class:o})}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.drag_point=!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.zoom<this.zoom_max&&(this.zoom+=.1,this.zoom_refresh())}zoom_out(){this.zoom>this.zoom_min&&(this.zoom-=.1,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}createCurvature(e,t,n,s,i,o){var l=e,c=t,d=n,a=s,r=i;switch(o){case"open":if(e>=n)var h=l+Math.abs(d-l)*r,u=d-Math.abs(d-l)*(-1*r);else h=l+Math.abs(d-l)*r,u=d-Math.abs(d-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+a+" "+d+"  "+a;case"close":if(e>=n)h=l+Math.abs(d-l)*(-1*r),u=d-Math.abs(d-l)*r;else h=l+Math.abs(d-l)*r,u=d-Math.abs(d-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+a+" "+d+"  "+a;case"other":if(e>=n)h=l+Math.abs(d-l)*(-1*r),u=d-Math.abs(d-l)*(-1*r);else h=l+Math.abs(d-l)*r,u=d-Math.abs(d-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+a+" "+d+"  "+a;default:return" M "+l+" "+c+" C "+(h=l+Math.abs(d-l)*r)+" "+c+" "+(u=d-Math.abs(d-l)*r)+" "+a+" "+d+"  "+a}}drawConnection(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=t;var n=document.createElementNS("http://www.w3.org/2000/svg","path");n.classList.add("main-path"),n.setAttributeNS(null,"d",""),t.classList.add("connection"),t.appendChild(n),this.precanvas.appendChild(t)}updateConnection(e,t){var n=this.connection_ele.children[0],s=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)),l=t*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),c=this.curvature,d=this.createCurvature(s,i,o,l,c,"openclose");n.setAttributeNS(null,"d",d)}addConnection(e,t,n,s){var i=this.getModuleFromNodeId(e);if(i===this.getModuleFromNodeId(t)){var o=this.getNodeFromId(e),l=!1;for(var c in o.outputs[n].connections){var d=o.outputs[n].connections[c];d.node==t&&d.output==s&&(l=!0)}if(!1===l){if(this.drawflow.drawflow[i].data[e].outputs[n].connections.push({node:t,output:s}),this.drawflow.drawflow[i].data[t].inputs[s].connections.push({node:e,input:n}),this.module===i){var a=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",""),a.classList.add("connection"),a.classList.add("node_in_node-"+t),a.classList.add("node_out_node-"+e),a.classList.add(n),a.classList.add(s),a.appendChild(r),this.precanvas.appendChild(a),this.updateConnectionNodes("node-"+e),this.updateConnectionNodes("node-"+t)}this.dispatch("connectionCreated",{output_id:e,input_id:t,output_class:n,input_class:s})}}}updateConnectionNodes(e){const t="node_in_"+e,n="node_out_"+e;var s=this.line_path/2;const i=this.precanvas,o=this.curvature,l=this.createCurvature,c=this.reroute_curvature,d=this.reroute_curvature_start_end,a=this.reroute_fix_curvature,r=this.reroute_width,h=this.zoom,u=document.getElementsByClassName(n);Object.keys(u).map((function(t,n){if(null===u[t].querySelector(".point")){var p=document.getElementById(e),f=u[t].classList[1].replace("node_in_",""),m=document.getElementById(f).querySelectorAll("."+u[t].classList[4])[0],_=m.offsetWidth/2+s+m.parentElement.parentElement.offsetLeft+m.offsetLeft,w=m.offsetHeight/2+s+m.parentElement.parentElement.offsetTop+m.offsetTop,g=p.offsetLeft+p.querySelectorAll("."+u[t].classList[3])[0].offsetLeft+p.querySelectorAll("."+u[t].classList[3])[0].offsetWidth/2+s,v=p.offsetTop+p.querySelectorAll("."+u[t].classList[3])[0].offsetTop+p.querySelectorAll("."+u[t].classList[3])[0].offsetHeight/2+s;const n=l(g,v,_,w,o,"openclose");u[t].children[0].setAttributeNS(null,"d",n)}else{const n=u[t].querySelectorAll(".point");let o="";const p=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var u=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=u.offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetWidth/2+s,w=u.offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetHeight/2+s,g=l(_,w,f,m,d,"open");o+=g,p.push(g);u=t;var v=t.parentElement.classList[1].replace("node_in_","");f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,d,"close");o+=g,p.push(g)}else if(0===a){u=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=u.offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetWidth/2+s,w=u.offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetHeight/2+s,g=l(_,w,f,m,d,"open");o+=g,p.push(g);u=t,f=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,c,"other");o+=g,p.push(g)}else if(a===n.length-1){u=t,v=t.parentElement.classList[1].replace("node_in_",""),f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,d,"close");o+=g,p.push(g)}else{var y;u=t,f=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,c,"other");o+=g,p.push(g)}}),a?p.forEach((e,n)=>{u[t].children[n].setAttributeNS(null,"d",e)}):u[t].children[0].setAttributeNS(null,"d",o)}}));const p=document.getElementsByClassName(t);Object.keys(p).map((function(t,n){if(null===p[t].querySelector(".point")){var u=document.getElementById(e),f=p[t].classList[2].replace("node_out_",""),m=document.getElementById(f).querySelectorAll("."+p[t].classList[3])[0],_=m.offsetWidth/2+s+m.parentElement.parentElement.offsetLeft+m.offsetLeft,w=m.offsetHeight/2+s+m.parentElement.parentElement.offsetTop+m.offsetTop,g=u.offsetLeft+u.querySelectorAll("."+p[t].classList[4])[0].offsetLeft+u.querySelectorAll("."+p[t].classList[4])[0].offsetWidth/2+s,v=u.offsetTop+u.querySelectorAll("."+p[t].classList[4])[0].offsetTop+u.querySelectorAll("."+p[t].classList[4])[0].offsetHeight/2+s;const n=l(_,w,g,v,o,"openclose");p[t].children[0].setAttributeNS(null,"d",n)}else{const n=p[t].querySelectorAll(".point");let o="";const u=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var p=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=p.offsetLeft+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetLeft+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetWidth/2+s,w=p.offsetTop+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetTop+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetHeight/2+s,g=l(f,m,_,w,d,"close");o+=g,u.push(g);p=t;var v=t.parentElement.classList[2].replace("node_out_","");f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"open");o+=g,u.push(g)}else if(0===a){p=t,v=t.parentElement.classList[2].replace("node_out_",""),f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"open");o+=g,u.push(g);p=t,_=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,c,"other");o+=g,u.push(g)}else if(a===n.length-1){p=t,v=t.parentElement.classList[1].replace("node_in_",""),_=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,w=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"close");o+=g,u.push(g)}else{var y;p=t,_=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,c,"other");o+=g,u.push(g)}}),a?u.forEach((e,n)=>{p[t].children[n].setAttributeNS(null,"d",e)}):p[t].children[0].setAttributeNS(null,"d",o)}}))}dblclick(e){null!=this.connection_selected&&this.reroute&&this.createReroutePoint(this.connection_selected),"point"===e.target.classList[0]&&this.removeReroutePoint(e.target)}createReroutePoint(e){this.connection_selected.classList.remove("selected");const t=this.connection_selected.parentElement.classList[2].slice(9),n=this.connection_selected.parentElement.classList[1].slice(13),s=this.connection_selected.parentElement.classList[3],i=this.connection_selected.parentElement.classList[4];this.connection_selected=null;const o=document.createElementNS("http://www.w3.org/2000/svg","circle");o.classList.add("point");var l=this.pos_x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),c=this.pos_y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom));o.setAttributeNS(null,"cx",l),o.setAttributeNS(null,"cy",c),o.setAttributeNS(null,"r",this.reroute_width);let d=0;if(this.reroute_fix_curvature){const t=e.parentElement.querySelectorAll(".main-path").length;var a=document.createElementNS("http://www.w3.org/2000/svg","path");if(a.classList.add("main-path"),a.setAttributeNS(null,"d",""),e.parentElement.insertBefore(a,e.parentElement.children[t]),1===t)e.parentElement.appendChild(o);else{const n=Array.from(e.parentElement.children).indexOf(e);d=n,e.parentElement.insertBefore(o,e.parentElement.children[n+t+1])}}else e.parentElement.appendChild(o);const r=t.slice(5),h=this.drawflow.drawflow[this.module].data[r].outputs[s].connections.findIndex((function(e,t){return e.node===n&&e.output===i}));void 0===this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points&&(this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points=[]),this.reroute_fix_curvature?(d>0?this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.splice(d,0,{pos_x:l,pos_y:c}):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.push({pos_x:l,pos_y:c}),e.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.remove("selected")})):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.push({pos_x:l,pos_y:c}),this.dispatch("addReroute",r),this.updateConnectionNodes(t)}removeReroutePoint(e){const t=e.parentElement.classList[2].slice(9),n=e.parentElement.classList[1].slice(13),s=e.parentElement.classList[3],i=e.parentElement.classList[4];let o=Array.from(e.parentElement.children).indexOf(e)-1;const l=t.slice(5),c=this.drawflow.drawflow[this.module].data[l].outputs[s].connections.findIndex((function(e,t){return e.node===n&&e.output===i}));if(this.reroute_fix_curvature){const t=e.parentElement.querySelectorAll(".main-path").length;e.parentElement.children[t-1].remove(),o-=t,o<0&&(o=0)}this.drawflow.drawflow[this.module].data[l].outputs[s].connections[c].points.splice(o,1),e.remove(),this.dispatch("removeReroute",l),this.updateConnectionNodes(t)}registerNode(e,t,n=null,s=null){this.noderegister[e]={html:t,props:n,options:s}}getNodeFromId(e){var t=this.getModuleFromNodeId(e);return JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e]))}getNodesFromName(e){var t=[];const n=this.drawflow.drawflow;return Object.keys(n).map((function(s,i){for(var o in n[s].data)n[s].data[o].name==e&&t.push(n[s].data[o].id)})),t}addNode(e,t,n,s,i,o,l,c,d=!1){const a=document.createElement("div");a.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;f<t;f++){const e=document.createElement("div");e.classList.add("input"),e.classList.add("input_"+(f+1)),p["input_"+(f+1)]={connections:[]},h.appendChild(e)}const m={};for(f=0;f<n;f++){const e=document.createElement("div");e.classList.add("output"),e.classList.add("output_"+(f+1)),m["output_"+(f+1)]={connections:[]},u.appendChild(e)}const _=document.createElement("div");if(_.classList.add("drawflow_content_node"),!1===d)_.innerHTML=c;else if(!0===d)_.appendChild(this.noderegister[c].html.cloneNode(!0));else{let e=new this.render({render:e=>e(this.noderegister[c].html,{props:this.noderegister[c].props}),...this.noderegister[c].options}).$mount();_.appendChild(e.$el)}Object.entries(l).forEach((function(e,t){if("object"==typeof e[1])!function e(t,n,s){if(null===t)t=l[n];else t=t[n];Object.entries(t).forEach((function(i,o){if("object"==typeof i[1])e(t,i[0],n+"-"+i[0]);else for(var l=_.querySelectorAll("[df-"+s+"-"+i[0]+"]"),c=0;c<l.length;c++)l[c].value=i[1]}))}(null,e[0],e[0]);else for(var n=_.querySelectorAll("[df-"+e[0]+"]"),s=0;s<n.length;s++)n[s].value=e[1]})),r.appendChild(h),r.appendChild(_),r.appendChild(u),r.style.top=i+"px",r.style.left=s+"px",a.appendChild(r),this.precanvas.appendChild(a);var w={id:this.nodeId,name:e,data:l,class:o,html:c,typenode:d,inputs:p,outputs:m,pos_x:s,pos_y:i};this.drawflow.drawflow[this.module].data[this.nodeId]=w,this.dispatch("nodeCreated",this.nodeId);var g=this.nodeId;return this.nodeId++,g}addNodeImport(e,t){const n=document.createElement("div");n.classList.add("parent-node");const s=document.createElement("div");s.innerHTML="",s.setAttribute("id","node-"+e.id),s.classList.add("drawflow-node"),""!=e.class&&s.classList.add(e.class);const i=document.createElement("div");i.classList.add("inputs");const o=document.createElement("div");o.classList.add("outputs"),Object.keys(e.inputs).map((function(n,s){const o=document.createElement("div");o.classList.add("input"),o.classList.add(n),i.appendChild(o),Object.keys(e.inputs[n].connections).map((function(s,i){var o=document.createElementNS("http://www.w3.org/2000/svg","svg"),l=document.createElementNS("http://www.w3.org/2000/svg","path");l.classList.add("main-path"),l.setAttributeNS(null,"d",""),o.classList.add("connection"),o.classList.add("node_in_node-"+e.id),o.classList.add("node_out_node-"+e.inputs[n].connections[s].node),o.classList.add(e.inputs[n].connections[s].input),o.classList.add(n),o.appendChild(l),t.appendChild(o)}))}));for(var l=0;l<Object.keys(e.outputs).length;l++){const e=document.createElement("div");e.classList.add("output"),e.classList.add("output_"+(l+1)),o.appendChild(e)}const c=document.createElement("div");if(c.classList.add("drawflow_content_node"),!1===e.typenode)c.innerHTML=e.html;else if(!0===e.typenode)c.appendChild(this.noderegister[e.html].html.cloneNode(!0));else{let t=new this.render({render:t=>t(this.noderegister[e.html].html,{props:this.noderegister[e.html].props}),...this.noderegister[e.html].options}).$mount();c.appendChild(t.$el)}Object.entries(e.data).forEach((function(t,n){if("object"==typeof t[1])!function t(n,s,i){if(null===n)n=e.data[s];else n=n[s];Object.entries(n).forEach((function(e,o){if("object"==typeof e[1])t(n,e[0],s+"-"+e[0]);else for(var l=c.querySelectorAll("[df-"+i+"-"+e[0]+"]"),d=0;d<l.length;d++)l[d].value=e[1]}))}(null,t[0],t[0]);else for(var s=c.querySelectorAll("[df-"+t[0]+"]"),i=0;i<s.length;i++)s[i].value=t[1]})),s.appendChild(i),s.appendChild(c),s.appendChild(o),s.style.top=e.pos_y+"px",s.style.left=e.pos_x+"px",n.appendChild(s),this.precanvas.appendChild(n)}addRerouteImport(e){const t=this.reroute_width,n=this.reroute_fix_curvature;Object.keys(e.outputs).map((function(s,i){Object.keys(e.outputs[s].connections).map((function(i,o){const l=e.outputs[s].connections[i].points;void 0!==l&&l.forEach((o,c)=>{const d=e.outputs[s].connections[i].node,a=e.outputs[s].connections[i].output,r=document.querySelector(".connection.node_in_node-"+d+".node_out_node-"+e.id+"."+s+"."+a);if(n&&0===c)for(var h=0;h<l.length;h++){var u=document.createElementNS("http://www.w3.org/2000/svg","path");u.classList.add("main-path"),u.setAttributeNS(null,"d",""),r.appendChild(u)}const p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.classList.add("point");var f=o.pos_x,m=o.pos_y;p.setAttributeNS(null,"cx",f),p.setAttributeNS(null,"cy",m),p.setAttributeNS(null,"r",t),r.appendChild(p)})}))}))}updateNodeValue(e){for(var t=e.target.attributes,n=0;n<t.length;n++)t[n].nodeName.startsWith("df-")&&(this.drawflow.drawflow[this.module].data[e.target.closest(".drawflow_content_node").parentElement.id.slice(5)].data[t[n].nodeName.slice(3)]=e.target.value)}addNodeInput(e){var t=this.getModuleFromNodeId(e);const n=this.getNodeFromId(e),s=Object.keys(n.inputs).length;if(this.module===t){const t=document.createElement("div");t.classList.add("input"),t.classList.add("input_"+(s+1)),document.querySelector("#node-"+e+" .inputs").appendChild(t),this.updateConnectionNodes("node-"+e)}this.drawflow.drawflow[t].data[e].inputs["input_"+(s+1)]={connections:[]}}addNodeOutput(e){var t=this.getModuleFromNodeId(e);const n=this.getNodeFromId(e),s=Object.keys(n.outputs).length;if(this.module===t){const t=document.createElement("div");t.classList.add("output"),t.classList.add("output_"+(s+1)),document.querySelector("#node-"+e+" .outputs").appendChild(t),this.updateConnectionNodes("node-"+e)}this.drawflow.drawflow[t].data[e].outputs["output_"+(s+1)]={connections:[]}}removeNodeInput(e,t){var n=this.getModuleFromNodeId(e);const s=this.getNodeFromId(e);this.module===n&&document.querySelector("#node-"+e+" .inputs .input."+t).remove();const i=[];Object.keys(s.inputs[t].connections).map((function(n,o){const l=s.inputs[t].connections[o].node,c=s.inputs[t].connections[o].input;i.push({id_output:l,id:e,output_class:c,input_class:t})})),i.forEach((e,t)=>{this.removeSingleConnection(e.id_output,e.id,e.output_class,e.input_class)}),delete this.drawflow.drawflow[n].data[e].inputs[t];const o=[],l=this.drawflow.drawflow[n].data[e].inputs;Object.keys(l).map((function(e,t){o.push(l[e])})),this.drawflow.drawflow[n].data[e].inputs={};const c=t.slice(6);let d=[];if(o.forEach((t,s)=>{t.connections.forEach((e,t)=>{d.push(e)}),this.drawflow.drawflow[n].data[e].inputs["input_"+(s+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){document.querySelectorAll("#node-"+e+" .inputs .input").forEach((e,t)=>{const n=e.classList[1].slice(6);c<n&&(e.classList.remove("input_"+n),e.classList.add("input_"+(n-1)))})}d.forEach((t,s)=>{this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections.forEach((s,i)=>{if(s.node==e){const o=s.output.slice(6);if(c<o){if(this.module===n){const n=document.querySelector(".connection.node_in_node-"+e+".node_out_node-"+t.node+"."+t.input+".input_"+o);n.classList.remove("input_"+o),n.classList.add("input_"+(o-1))}s.points?this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections[i]={node:s.node,output:"input_"+(o-1),points:s.points}:this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections[i]={node:s.node,output:"input_"+(o-1)}}}})}),this.updateConnectionNodes("node-"+e)}removeNodeOutput(e,t){var n=this.getModuleFromNodeId(e);const s=this.getNodeFromId(e);this.module===n&&document.querySelector("#node-"+e+" .outputs .output."+t).remove();const i=[];Object.keys(s.outputs[t].connections).map((function(n,o){const l=s.outputs[t].connections[o].node,c=s.outputs[t].connections[o].output;i.push({id:e,id_input:l,output_class:t,input_class:c})})),i.forEach((e,t)=>{this.removeSingleConnection(e.id,e.id_input,e.output_class,e.input_class)}),delete this.drawflow.drawflow[n].data[e].outputs[t];const o=[],l=this.drawflow.drawflow[n].data[e].outputs;Object.keys(l).map((function(e,t){o.push(l[e])})),this.drawflow.drawflow[n].data[e].outputs={};const c=t.slice(7);let d=[];if(o.forEach((t,s)=>{t.connections.forEach((e,t)=>{d.push({node:e.node,output:e.output})}),this.drawflow.drawflow[n].data[e].outputs["output_"+(s+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){document.querySelectorAll("#node-"+e+" .outputs .output").forEach((e,t)=>{const n=e.classList[1].slice(7);c<n&&(e.classList.remove("output_"+n),e.classList.add("output_"+(n-1)))})}d.forEach((t,s)=>{this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections.forEach((s,i)=>{if(s.node==e){const o=s.input.slice(7);if(c<o){if(this.module===n){const n=document.querySelector(".connection.node_in_node-"+t.node+".node_out_node-"+e+".output_"+o+"."+t.output);n.classList.remove("output_"+o),n.classList.remove(t.output),n.classList.add("output_"+(o-1)),n.classList.add(t.output)}s.points?this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections[i]={node:s.node,input:"output_"+(o-1),points:s.points}:this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections[i]={node:s.node,input:"output_"+(o-1)}}}})}),this.updateConnectionNodes("node-"+e)}removeNodeId(e){this.removeConnectionNodeId(e);var t=this.getModuleFromNodeId(e.slice(5));this.module===t&&document.getElementById(e).remove(),delete this.drawflow.drawflow[t].data[e.slice(5)],this.dispatch("nodeRemoved",e.slice(5))}removeConnection(){if(null!=this.connection_selected){var e=this.connection_selected.parentElement.classList;this.connection_selected.parentElement.remove(),console.log(e);var t=this.drawflow.drawflow[this.module].data[e[2].slice(14)].outputs[e[3]].connections.findIndex((function(t,n){return t.node===e[1].slice(13)&&t.output===e[4]}));this.drawflow.drawflow[this.module].data[e[2].slice(14)].outputs[e[3]].connections.splice(t,1);var n=this.drawflow.drawflow[this.module].data[e[1].slice(13)].inputs[e[4]].connections.findIndex((function(t,n){return t.node===e[2].slice(14)&&t.input===e[3]}));this.drawflow.drawflow[this.module].data[e[1].slice(13)].inputs[e[4]].connections.splice(n,1),this.dispatch("connectionRemoved",{output_id:e[2].slice(14),input_id:e[1].slice(13),output_class:e[3],input_class:e[4]}),this.connection_selected=null}}removeSingleConnection(e,t,n,s){var i=this.getModuleFromNodeId(e);if(i===this.getModuleFromNodeId(t)){if(this.drawflow.drawflow[i].data[e].outputs[n].connections.findIndex((function(e,n){return e.node==t&&e.output===s}))>-1){this.module===i&&document.querySelector(".connection.node_in_node-"+t+".node_out_node-"+e+"."+n+"."+s).remove();var o=this.drawflow.drawflow[i].data[e].outputs[n].connections.findIndex((function(e,n){return e.node==t&&e.output===s}));this.drawflow.drawflow[i].data[e].outputs[n].connections.splice(o,1);var l=this.drawflow.drawflow[i].data[t].inputs[s].connections.findIndex((function(t,s){return t.node==e&&t.input===n}));return this.drawflow.drawflow[i].data[t].inputs[s].connections.splice(l,1),this.dispatch("connectionRemoved",{output_id:e,input_id:t,output_class:n,input_class:s}),!0}return!1}return!1}removeConnectionNodeId(e){const t="node_in_"+e,n="node_out_"+e,s=document.getElementsByClassName(n);for(var i=s.length-1;i>=0;i--){var o=s[i].classList,l=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(l,1);var c=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(c,1),s[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 d=document.getElementsByClassName(t);for(i=d.length-1;i>=0;i--){o=d[i].classList,c=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(c,1);l=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(l,1),d[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 n=this.drawflow.drawflow;return Object.keys(n).map((function(s,i){Object.keys(n[s].data).map((function(n,i){n==e&&(t=s)}))})),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()}("undefined"!=typeof self?self:this,(function(){return function(e){var t={};function n(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,s){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(s,i,function(t){return e[t]}.bind(null,i));return s},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=0)}([function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return s}));class s{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.reroute=!1,this.reroute_fix_curvature=!1,this.curvature=.5,this.reroute_curvature_start_end=.5,this.reroute_curvature=.5,this.reroute_width=6,this.drag_point=!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.force_first_input=!1,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.addEventListener("dblclick",this.dblclick.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;t<this.evCache.length;t++)if(e.pointerId==this.evCache[t].pointerId){this.evCache[t]=e;break}if(2==this.evCache.length){var n=Math.abs(this.evCache[0].clientX-this.evCache[1].clientX);this.prevDiff>100&&(n>this.prevDiff&&this.zoom_in(),n<this.prevDiff&&this.zoom_out()),this.prevDiff=n}}pointerup_handler(e){this.remove_event(e),this.evCache.length<2&&(this.prevDiff=-1)}remove_event(e){for(var t=0;t<this.evCache.length;t++)if(this.evCache[t].pointerId==e.pointerId){this.evCache.splice(t,1);break}}load(){for(var e in this.drawflow.drawflow[this.module].data)this.addNodeImport(this.drawflow.drawflow[this.module].data[e],this.precanvas);if(this.reroute)for(var e in this.drawflow.drawflow[this.module].data)this.addRerouteImport(this.drawflow.drawflow[this.module].data[e]);for(var e in this.drawflow.drawflow[this.module].data)this.updateConnectionNodes("node-"+e);const t=this.drawflow.drawflow;let n=1;Object.keys(t).map((function(e,s){Object.keys(t[e].data).map((function(e,t){parseInt(e)>=n&&(n=parseInt(e)+1)}))})),this.nodeId=n}removeReouteConnectionSelected(){this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.remove("selected")})}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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),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.removeReouteConnectionSelected(),this.connection_selected=null),this.connection_selected=this.ele_selected,this.connection_selected.classList.add("selected"),this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.add("selected")});break;case"point":this.drag_point=!0,this.ele_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.removeReouteConnectionSelected(),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,n=e.touches[0].clientY;else t=e.clientX,n=e.clientY;if(this.connection&&this.updateConnection(t,n),this.editor_selected&&(s=this.canvas_x+-(this.pos_x-t),i=this.canvas_y+-(this.pos_y-n),this.dispatch("translate",{x:s,y:i}),this.precanvas.style.transform="translate("+s+"px, "+i+"px) scale("+this.zoom+")"),this.drag){var s=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=n,this.ele_selected.style.top=this.ele_selected.offsetTop-i+"px",this.ele_selected.style.left=this.ele_selected.offsetLeft-s+"px",this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_x=this.ele_selected.offsetLeft-s,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,n)}if(this.drag_point){s=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=t,this.pos_y=n;var o=this.pos_x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),l=this.pos_y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom));this.ele_selected.setAttributeNS(null,"cx",o),this.ele_selected.setAttributeNS(null,"cy",l);const e=this.ele_selected.parentElement.classList[2].slice(9),c=this.ele_selected.parentElement.classList[1].slice(13),d=this.ele_selected.parentElement.classList[3],a=this.ele_selected.parentElement.classList[4];let r=Array.from(this.ele_selected.parentElement.children).indexOf(this.ele_selected)-1;if(this.reroute_fix_curvature){r-=this.ele_selected.parentElement.querySelectorAll(".main-path").length-1,r<0&&(r=0)}const h=e.slice(5),u=this.drawflow.drawflow[this.module].data[h].outputs[d].connections.findIndex((function(e,t){return e.node===c&&e.output===a}));this.drawflow.drawflow[this.module].data[h].outputs[d].connections[u].points[r]={pos_x:o,pos_y:l};const p=this.ele_selected.parentElement.classList[2].slice(9);this.updateConnectionNodes(p,t,n)}"touchmove"===e.type&&(this.mouse_x=t,this.mouse_y=n),this.dispatch("mouseMove",{x:t,y:n})}dragEnd(e){if(null!=this.select_elements&&(this.select_elements.remove(),this.select_elements=null),"touchend"===e.type)var t=this.mouse_x,n=this.mouse_y,s=document.elementFromPoint(t,n);else t=e.clientX,n=e.clientY,s=e.target;if(this.drag&&this.dispatch("nodeMoved",this.ele_selected.id.slice(5)),this.drag_point&&this.ele_selected.classList.remove("selected"),this.editor_selected&&(this.canvas_x=this.canvas_x+-(this.pos_x-t),this.canvas_y=this.canvas_y+-(this.pos_y-n),this.editor_selected=!1),!0===this.connection)if(console.log(s),"input"===s.classList[0]||this.force_first_input&&(null!=s.closest(".drawflow_content_node")||"drawflow-node"===s.classList[0])){if(!this.force_first_input||null==s.closest(".drawflow_content_node")&&"drawflow-node"!==s.classList[0])i=s.parentElement.parentElement.id,o=s.classList[1];else{if(null!=s.closest(".drawflow_content_node"))var i=s.closest(".drawflow_content_node").parentElement.id;else var i=s.id;var o="input_1"}var l=this.ele_selected.parentElement.parentElement.id,c=this.ele_selected.classList[1];if(l!==i){if(0===this.container.querySelectorAll(".connection.node_in_"+i+".node_out_"+l+"."+c+"."+o).length){this.connection_ele.classList.add("node_in_"+i),this.connection_ele.classList.add("node_out_"+l),this.connection_ele.classList.add(c),this.connection_ele.classList.add(o);var d=i.slice(5),a=l.slice(5);this.drawflow.drawflow[this.module].data[a].outputs[c].connections.push({node:d,output:o}),this.drawflow.drawflow[this.module].data[d].inputs[o].connections.push({node:a,input:c}),this.updateConnectionNodes("node-"+a),this.updateConnectionNodes("node-"+d),this.dispatch("connectionCreated",{output_id:a,input_id:d,output_class:c,input_class:o})}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.drag_point=!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.zoom<this.zoom_max&&(this.zoom+=.1,this.zoom_refresh())}zoom_out(){this.zoom>this.zoom_min&&(this.zoom-=.1,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}createCurvature(e,t,n,s,i,o,l="unknown",c="unknown"){var d=e,a=t,r=n,h=s,u=i;switch(o){case"open":if(e>=n)var p=d+Math.abs(r-d)*u,f=r-Math.abs(r-d)*(-1*u);else p=d+Math.abs(r-d)*u,f=r-Math.abs(r-d)*u;return" M "+d+" "+a+" C "+p+" "+a+" "+f+" "+h+" "+r+"  "+h;case"close":if(e>=n)p=d+Math.abs(r-d)*(-1*u),f=r-Math.abs(r-d)*u;else p=d+Math.abs(r-d)*u,f=r-Math.abs(r-d)*u;return" M "+d+" "+a+" C "+p+" "+a+" "+f+" "+h+" "+r+"  "+h;case"other":if(e>=n)p=d+Math.abs(r-d)*(-1*u),f=r-Math.abs(r-d)*(-1*u);else p=d+Math.abs(r-d)*u,f=r-Math.abs(r-d)*u;return" M "+d+" "+a+" C "+p+" "+a+" "+f+" "+h+" "+r+"  "+h;default:p=d+Math.abs(r-d)*u,f=r-Math.abs(r-d)*u;var m=a+Math.abs(h-a)*u,_=h-Math.abs(h-a)*u;if("top"==l)m=a+Math.abs(h-a)*(-1*u),p=d;else if("bottom"==l){m=a+Math.abs(h-a)*u,p=d;console.log(m)}else if("left"==l)m=a,p=d+Math.abs(r-d)*(-1*u);else if("right"==l)m=a,p=d+Math.abs(r-d)*u;if("top"==c)_=h+Math.abs(h-a)*(-1*u),f=r;else if("bottom"==c)_=h+Math.abs(h-a)*u,f=r;else if("left"==c)_=h,f=r+Math.abs(r-d)*(-1*u);else if("right"==c)_=h,f=r+Math.abs(r-d)*u;return" M "+d+" "+a+" C "+p+" "+m+" "+f+" "+_+" "+r+" "+h}}drawConnection(e){var t=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=t;var n=document.createElementNS("http://www.w3.org/2000/svg","path");n.classList.add("main-path"),n.setAttributeNS(null,"d",""),t.classList.add("connection"),t.appendChild(n),this.precanvas.appendChild(t)}updateConnection(e,t){var n=this.connection_ele.children[0],s=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)),l=t*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),c=this.curvature,d=this.createCurvature(s,i,o,l,c,"openclose");n.setAttributeNS(null,"d",d)}addConnection(e,t,n,s){var i=this.getModuleFromNodeId(e);if(i===this.getModuleFromNodeId(t)){var o=this.getNodeFromId(e),l=!1;for(var c in o.outputs[n].connections){var d=o.outputs[n].connections[c];d.node==t&&d.output==s&&(l=!0)}if(!1===l){if(this.drawflow.drawflow[i].data[e].outputs[n].connections.push({node:t,output:s}),this.drawflow.drawflow[i].data[t].inputs[s].connections.push({node:e,input:n}),this.module===i){var a=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",""),a.classList.add("connection"),a.classList.add("node_in_node-"+t),a.classList.add("node_out_node-"+e),a.classList.add(n),a.classList.add(s),a.appendChild(r),this.precanvas.appendChild(a),this.updateConnectionNodes("node-"+e),this.updateConnectionNodes("node-"+t)}this.dispatch("connectionCreated",{output_id:e,input_id:t,output_class:n,input_class:s})}}}updateConnectionNodes(e){const t="node_in_"+e,n="node_out_"+e;var s=this.line_path/2;const i=this.precanvas,o=this.curvature,l=this.createCurvature,c=this.reroute_curvature,d=this.reroute_curvature_start_end,a=this.reroute_fix_curvature,r=this.reroute_width,h=this.zoom,u=document.getElementsByClassName(n);Object.keys(u).map((function(t,n){if(null===u[t].querySelector(".point")){var p=document.getElementById(e),f=u[t].classList[1].replace("node_in_",""),m=document.getElementById(f),_=m.querySelectorAll("."+u[t].classList[4])[0],w=p.querySelectorAll("."+u[t].classList[3])[0],g=w.parentElement.offsetHeight/2,v=w.parentElement.offsetLeft+g+w.parentElement.offsetWidth,y=w.parentElement.offsetTop+g;if(Math.abs(v)<=g)var E="left";else if(Math.abs(y)<=g)E="top";else if(0!=v&&Math.abs(y-p.offsetHeight)<=g)E="bottom";else if(0!=y&&Math.abs(v-p.offsetWidth)<=g)E="right";else E="unknown";var L=_.parentElement.offsetLeft+g+_.parentElement.offsetWidth,C=_.parentElement.offsetTop+g;if(Math.abs(L)<=g)var b="left";else if(Math.abs(C)<=g)b="top";else if(0!=L&&Math.abs(C-m.offsetHeight)<=g)b="bottom";else if(0!=C&&Math.abs(L-m.offsetWidth)<=g)b="right";else b="unknown";var x=L+_.parentElement.parentElement.offsetLeft-g,S=C+_.parentElement.parentElement.offsetTop,N=v+w.parentElement.parentElement.offsetLeft-g,B=y+w.parentElement.parentElement.offsetTop;const n=l(N,B,x,S,o,"openclose",E,b);u[t].children[0].setAttributeNS(null,"d",n)}else{const n=u[t].querySelectorAll(".point");let o="";const p=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var u=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=u.offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetWidth/2+s,w=u.offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetHeight/2+s,g=l(_,w,f,m,d,"open");o+=g,p.push(g);u=t;var v=t.parentElement.classList[1].replace("node_in_","");f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,d,"close");o+=g,p.push(g)}else if(0===a){u=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=u.offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetLeft+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetWidth/2+s,w=u.offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetTop+u.querySelectorAll("."+t.parentElement.classList[3])[0].offsetHeight/2+s,g=l(_,w,f,m,d,"open");o+=g,p.push(g);u=t,f=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,c,"other");o+=g,p.push(g)}else if(a===n.length-1){u=t,v=t.parentElement.classList[1].replace("node_in_",""),f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,d,"close");o+=g,p.push(g)}else{var y;u=t,f=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=(u.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(u.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(_,w,f,m,c,"other");o+=g,p.push(g)}}),a?p.forEach((e,n)=>{u[t].children[n].setAttributeNS(null,"d",e)}):u[t].children[0].setAttributeNS(null,"d",o)}}));const p=document.getElementsByClassName(t);Object.keys(p).map((function(t,n){if(null===p[t].querySelector(".point")){var u=document.getElementById(e),f=p[t].classList[2].replace("node_out_",""),m=document.getElementById(f),_=m.querySelectorAll("."+p[t].classList[3])[0],w=u.querySelectorAll("."+p[t].classList[4])[0],g=_.parentElement.offsetHeight/2,v=_.parentElement.offsetLeft+g+_.parentElement.offsetWidth,y=_.parentElement.offsetTop+g;if(Math.abs(v)<=g)var E="left";else if(Math.abs(y)<=g)E="top";else if(0!=v&&Math.abs(y-m.offsetHeight)<=g)E="bottom";else if(0!=y&&Math.abs(v-m.offsetWidth)<=g)E="right";else E="unknown";var L=w.parentElement.offsetLeft+g+w.parentElement.offsetWidth,C=w.parentElement.offsetTop+g;if(Math.abs(L)<=g)var b="left";else if(Math.abs(C)<=g)b="top";else if(0!=L&&Math.abs(C-u.offsetHeight)<=g)b="bottom";else if(0!=C&&Math.abs(L-u.offsetWidth)<=g)b="right";else b="unknown";var x=v+_.parentElement.parentElement.offsetLeft-g,S=y+_.parentElement.parentElement.offsetTop,N=L+u.offsetLeft-g,B=C+u.offsetTop;const n=l(x,S,N,B,o,"openclose",E,b);p[t].children[0].setAttributeNS(null,"d",n)}else{const n=p[t].querySelectorAll(".point");let o="";const u=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var p=document.getElementById(e),f=((y=t).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,_=p.offsetLeft+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetLeft+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetWidth/2+s,w=p.offsetTop+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetTop+p.querySelectorAll("."+t.parentElement.classList[4])[0].offsetHeight/2+s,g=l(f,m,_,w,d,"close");o+=g,u.push(g);p=t;var v=t.parentElement.classList[2].replace("node_out_","");f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"open");o+=g,u.push(g)}else if(0===a){p=t,v=t.parentElement.classList[2].replace("node_out_",""),f=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,m=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,_=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"open");o+=g,u.push(g);p=t,_=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,c,"other");o+=g,u.push(g)}else if(a===n.length-1){p=t,v=t.parentElement.classList[1].replace("node_in_",""),_=(y=document.getElementById(v).querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+s+y.parentElement.parentElement.offsetLeft+y.offsetLeft,w=y.offsetHeight/2+s+y.parentElement.parentElement.offsetTop+y.offsetTop,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,d,"close");o+=g,u.push(g)}else{var y;p=t,_=((y=n[a+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,w=(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,f=(p.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,m=(p.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,g=l(f,m,_,w,c,"other");o+=g,u.push(g)}}),a?u.forEach((e,n)=>{p[t].children[n].setAttributeNS(null,"d",e)}):p[t].children[0].setAttributeNS(null,"d",o)}}))}dblclick(e){null!=this.connection_selected&&this.reroute&&this.createReroutePoint(this.connection_selected),"point"===e.target.classList[0]&&this.removeReroutePoint(e.target)}createReroutePoint(e){this.connection_selected.classList.remove("selected");const t=this.connection_selected.parentElement.classList[2].slice(9),n=this.connection_selected.parentElement.classList[1].slice(13),s=this.connection_selected.parentElement.classList[3],i=this.connection_selected.parentElement.classList[4];this.connection_selected=null;const o=document.createElementNS("http://www.w3.org/2000/svg","circle");o.classList.add("point");var l=this.pos_x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),c=this.pos_y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom));o.setAttributeNS(null,"cx",l),o.setAttributeNS(null,"cy",c),o.setAttributeNS(null,"r",this.reroute_width);let d=0;if(this.reroute_fix_curvature){const t=e.parentElement.querySelectorAll(".main-path").length;var a=document.createElementNS("http://www.w3.org/2000/svg","path");if(a.classList.add("main-path"),a.setAttributeNS(null,"d",""),e.parentElement.insertBefore(a,e.parentElement.children[t]),1===t)e.parentElement.appendChild(o);else{const n=Array.from(e.parentElement.children).indexOf(e);d=n,e.parentElement.insertBefore(o,e.parentElement.children[n+t+1])}}else e.parentElement.appendChild(o);const r=t.slice(5),h=this.drawflow.drawflow[this.module].data[r].outputs[s].connections.findIndex((function(e,t){return e.node===n&&e.output===i}));void 0===this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points&&(this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points=[]),this.reroute_fix_curvature?(d>0?this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.splice(d,0,{pos_x:l,pos_y:c}):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.push({pos_x:l,pos_y:c}),e.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.remove("selected")})):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[h].points.push({pos_x:l,pos_y:c}),this.dispatch("addReroute",r),this.updateConnectionNodes(t)}removeReroutePoint(e){const t=e.parentElement.classList[2].slice(9),n=e.parentElement.classList[1].slice(13),s=e.parentElement.classList[3],i=e.parentElement.classList[4];let o=Array.from(e.parentElement.children).indexOf(e)-1;const l=t.slice(5),c=this.drawflow.drawflow[this.module].data[l].outputs[s].connections.findIndex((function(e,t){return e.node===n&&e.output===i}));if(this.reroute_fix_curvature){const t=e.parentElement.querySelectorAll(".main-path").length;e.parentElement.children[t-1].remove(),o-=t,o<0&&(o=0)}this.drawflow.drawflow[this.module].data[l].outputs[s].connections[c].points.splice(o,1),e.remove(),this.dispatch("removeReroute",l),this.updateConnectionNodes(t)}registerNode(e,t,n=null,s=null){this.noderegister[e]={html:t,props:n,options:s}}getNodeFromId(e){var t=this.getModuleFromNodeId(e);return JSON.parse(JSON.stringify(this.drawflow.drawflow[t].data[e]))}getNodesFromName(e){var t=[];const n=this.drawflow.drawflow;return Object.keys(n).map((function(s,i){for(var o in n[s].data)n[s].data[o].name==e&&t.push(n[s].data[o].id)})),t}addNode(e,t,n,s,i,o,l,c,d=!1){const a=document.createElement("div");a.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;f<t;f++){const e=document.createElement("div");e.classList.add("input"),e.classList.add("input_"+(f+1)),p["input_"+(f+1)]={connections:[]},h.appendChild(e)}const m={};for(f=0;f<n;f++){const e=document.createElement("div");e.classList.add("output"),e.classList.add("output_"+(f+1)),m["output_"+(f+1)]={connections:[]},u.appendChild(e)}const _=document.createElement("div");if(_.classList.add("drawflow_content_node"),!1===d)_.innerHTML=c;else if(!0===d)_.appendChild(this.noderegister[c].html.cloneNode(!0));else{let e=new this.render({render:e=>e(this.noderegister[c].html,{props:this.noderegister[c].props}),...this.noderegister[c].options}).$mount();_.appendChild(e.$el)}Object.entries(l).forEach((function(e,t){if("object"==typeof e[1])!function e(t,n,s){if(null===t)t=l[n];else t=t[n];Object.entries(t).forEach((function(i,o){if("object"==typeof i[1])e(t,i[0],n+"-"+i[0]);else for(var l=_.querySelectorAll("[df-"+s+"-"+i[0]+"]"),c=0;c<l.length;c++)l[c].value=i[1]}))}(null,e[0],e[0]);else for(var n=_.querySelectorAll("[df-"+e[0]+"]"),s=0;s<n.length;s++)n[s].value=e[1]})),r.appendChild(h),r.appendChild(_),r.appendChild(u),r.style.top=i+"px",r.style.left=s+"px",a.appendChild(r),this.precanvas.appendChild(a);var w={id:this.nodeId,name:e,data:l,class:o,html:c,typenode:d,inputs:p,outputs:m,pos_x:s,pos_y:i};this.drawflow.drawflow[this.module].data[this.nodeId]=w,this.dispatch("nodeCreated",this.nodeId);var g=this.nodeId;return this.nodeId++,g}addNodeImport(e,t){const n=document.createElement("div");n.classList.add("parent-node");const s=document.createElement("div");s.innerHTML="",s.setAttribute("id","node-"+e.id),s.classList.add("drawflow-node"),""!=e.class&&s.classList.add(e.class);const i=document.createElement("div");i.classList.add("inputs");const o=document.createElement("div");o.classList.add("outputs"),Object.keys(e.inputs).map((function(n,s){const o=document.createElement("div");o.classList.add("input"),o.classList.add(n),i.appendChild(o),Object.keys(e.inputs[n].connections).map((function(s,i){var o=document.createElementNS("http://www.w3.org/2000/svg","svg"),l=document.createElementNS("http://www.w3.org/2000/svg","path");l.classList.add("main-path"),l.setAttributeNS(null,"d",""),o.classList.add("connection"),o.classList.add("node_in_node-"+e.id),o.classList.add("node_out_node-"+e.inputs[n].connections[s].node),o.classList.add(e.inputs[n].connections[s].input),o.classList.add(n),o.appendChild(l),t.appendChild(o)}))}));for(var l=0;l<Object.keys(e.outputs).length;l++){const e=document.createElement("div");e.classList.add("output"),e.classList.add("output_"+(l+1)),o.appendChild(e)}const c=document.createElement("div");if(c.classList.add("drawflow_content_node"),!1===e.typenode)c.innerHTML=e.html;else if(!0===e.typenode)c.appendChild(this.noderegister[e.html].html.cloneNode(!0));else{let t=new this.render({render:t=>t(this.noderegister[e.html].html,{props:this.noderegister[e.html].props}),...this.noderegister[e.html].options}).$mount();c.appendChild(t.$el)}Object.entries(e.data).forEach((function(t,n){if("object"==typeof t[1])!function t(n,s,i){if(null===n)n=e.data[s];else n=n[s];Object.entries(n).forEach((function(e,o){if("object"==typeof e[1])t(n,e[0],s+"-"+e[0]);else for(var l=c.querySelectorAll("[df-"+i+"-"+e[0]+"]"),d=0;d<l.length;d++)l[d].value=e[1]}))}(null,t[0],t[0]);else for(var s=c.querySelectorAll("[df-"+t[0]+"]"),i=0;i<s.length;i++)s[i].value=t[1]})),s.appendChild(i),s.appendChild(c),s.appendChild(o),s.style.top=e.pos_y+"px",s.style.left=e.pos_x+"px",n.appendChild(s),this.precanvas.appendChild(n)}addRerouteImport(e){const t=this.reroute_width,n=this.reroute_fix_curvature;Object.keys(e.outputs).map((function(s,i){Object.keys(e.outputs[s].connections).map((function(i,o){const l=e.outputs[s].connections[i].points;void 0!==l&&l.forEach((o,c)=>{const d=e.outputs[s].connections[i].node,a=e.outputs[s].connections[i].output,r=document.querySelector(".connection.node_in_node-"+d+".node_out_node-"+e.id+"."+s+"."+a);if(n&&0===c)for(var h=0;h<l.length;h++){var u=document.createElementNS("http://www.w3.org/2000/svg","path");u.classList.add("main-path"),u.setAttributeNS(null,"d",""),r.appendChild(u)}const p=document.createElementNS("http://www.w3.org/2000/svg","circle");p.classList.add("point");var f=o.pos_x,m=o.pos_y;p.setAttributeNS(null,"cx",f),p.setAttributeNS(null,"cy",m),p.setAttributeNS(null,"r",t),r.appendChild(p)})}))}))}updateNodeValue(e){for(var t=e.target.attributes,n=0;n<t.length;n++)t[n].nodeName.startsWith("df-")&&(this.drawflow.drawflow[this.module].data[e.target.closest(".drawflow_content_node").parentElement.id.slice(5)].data[t[n].nodeName.slice(3)]=e.target.value)}addNodeInput(e){var t=this.getModuleFromNodeId(e);const n=this.getNodeFromId(e),s=Object.keys(n.inputs).length;if(this.module===t){const t=document.createElement("div");t.classList.add("input"),t.classList.add("input_"+(s+1)),document.querySelector("#node-"+e+" .inputs").appendChild(t),this.updateConnectionNodes("node-"+e)}this.drawflow.drawflow[t].data[e].inputs["input_"+(s+1)]={connections:[]}}addNodeOutput(e){var t=this.getModuleFromNodeId(e);const n=this.getNodeFromId(e),s=Object.keys(n.outputs).length;if(this.module===t){const t=document.createElement("div");t.classList.add("output"),t.classList.add("output_"+(s+1)),document.querySelector("#node-"+e+" .outputs").appendChild(t),this.updateConnectionNodes("node-"+e)}this.drawflow.drawflow[t].data[e].outputs["output_"+(s+1)]={connections:[]}}removeNodeInput(e,t){var n=this.getModuleFromNodeId(e);const s=this.getNodeFromId(e);this.module===n&&document.querySelector("#node-"+e+" .inputs .input."+t).remove();const i=[];Object.keys(s.inputs[t].connections).map((function(n,o){const l=s.inputs[t].connections[o].node,c=s.inputs[t].connections[o].input;i.push({id_output:l,id:e,output_class:c,input_class:t})})),i.forEach((e,t)=>{this.removeSingleConnection(e.id_output,e.id,e.output_class,e.input_class)}),delete this.drawflow.drawflow[n].data[e].inputs[t];const o=[],l=this.drawflow.drawflow[n].data[e].inputs;Object.keys(l).map((function(e,t){o.push(l[e])})),this.drawflow.drawflow[n].data[e].inputs={};const c=t.slice(6);let d=[];if(o.forEach((t,s)=>{t.connections.forEach((e,t)=>{d.push(e)}),this.drawflow.drawflow[n].data[e].inputs["input_"+(s+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){document.querySelectorAll("#node-"+e+" .inputs .input").forEach((e,t)=>{const n=e.classList[1].slice(6);c<n&&(e.classList.remove("input_"+n),e.classList.add("input_"+(n-1)))})}d.forEach((t,s)=>{this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections.forEach((s,i)=>{if(s.node==e){const o=s.output.slice(6);if(c<o){if(this.module===n){const n=document.querySelector(".connection.node_in_node-"+e+".node_out_node-"+t.node+"."+t.input+".input_"+o);n.classList.remove("input_"+o),n.classList.add("input_"+(o-1))}s.points?this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections[i]={node:s.node,output:"input_"+(o-1),points:s.points}:this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections[i]={node:s.node,output:"input_"+(o-1)}}}})}),this.updateConnectionNodes("node-"+e)}removeNodeOutput(e,t){var n=this.getModuleFromNodeId(e);const s=this.getNodeFromId(e);this.module===n&&document.querySelector("#node-"+e+" .outputs .output."+t).remove();const i=[];Object.keys(s.outputs[t].connections).map((function(n,o){const l=s.outputs[t].connections[o].node,c=s.outputs[t].connections[o].output;i.push({id:e,id_input:l,output_class:t,input_class:c})})),i.forEach((e,t)=>{this.removeSingleConnection(e.id,e.id_input,e.output_class,e.input_class)}),delete this.drawflow.drawflow[n].data[e].outputs[t];const o=[],l=this.drawflow.drawflow[n].data[e].outputs;Object.keys(l).map((function(e,t){o.push(l[e])})),this.drawflow.drawflow[n].data[e].outputs={};const c=t.slice(7);let d=[];if(o.forEach((t,s)=>{t.connections.forEach((e,t)=>{d.push({node:e.node,output:e.output})}),this.drawflow.drawflow[n].data[e].outputs["output_"+(s+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){document.querySelectorAll("#node-"+e+" .outputs .output").forEach((e,t)=>{const n=e.classList[1].slice(7);c<n&&(e.classList.remove("output_"+n),e.classList.add("output_"+(n-1)))})}d.forEach((t,s)=>{this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections.forEach((s,i)=>{if(s.node==e){const o=s.input.slice(7);if(c<o){if(this.module===n){const n=document.querySelector(".connection.node_in_node-"+t.node+".node_out_node-"+e+".output_"+o+"."+t.output);n.classList.remove("output_"+o),n.classList.remove(t.output),n.classList.add("output_"+(o-1)),n.classList.add(t.output)}s.points?this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections[i]={node:s.node,input:"output_"+(o-1),points:s.points}:this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections[i]={node:s.node,input:"output_"+(o-1)}}}})}),this.updateConnectionNodes("node-"+e)}removeNodeId(e){this.removeConnectionNodeId(e);var t=this.getModuleFromNodeId(e.slice(5));this.module===t&&document.getElementById(e).remove(),delete this.drawflow.drawflow[t].data[e.slice(5)],this.dispatch("nodeRemoved",e.slice(5))}removeConnection(){if(null!=this.connection_selected){var e=this.connection_selected.parentElement.classList;this.connection_selected.parentElement.remove(),console.log(e);var t=this.drawflow.drawflow[this.module].data[e[2].slice(14)].outputs[e[3]].connections.findIndex((function(t,n){return t.node===e[1].slice(13)&&t.output===e[4]}));this.drawflow.drawflow[this.module].data[e[2].slice(14)].outputs[e[3]].connections.splice(t,1);var n=this.drawflow.drawflow[this.module].data[e[1].slice(13)].inputs[e[4]].connections.findIndex((function(t,n){return t.node===e[2].slice(14)&&t.input===e[3]}));this.drawflow.drawflow[this.module].data[e[1].slice(13)].inputs[e[4]].connections.splice(n,1),this.dispatch("connectionRemoved",{output_id:e[2].slice(14),input_id:e[1].slice(13),output_class:e[3],input_class:e[4]}),this.connection_selected=null}}removeSingleConnection(e,t,n,s){var i=this.getModuleFromNodeId(e);if(i===this.getModuleFromNodeId(t)){if(this.drawflow.drawflow[i].data[e].outputs[n].connections.findIndex((function(e,n){return e.node==t&&e.output===s}))>-1){this.module===i&&document.querySelector(".connection.node_in_node-"+t+".node_out_node-"+e+"."+n+"."+s).remove();var o=this.drawflow.drawflow[i].data[e].outputs[n].connections.findIndex((function(e,n){return e.node==t&&e.output===s}));this.drawflow.drawflow[i].data[e].outputs[n].connections.splice(o,1);var l=this.drawflow.drawflow[i].data[t].inputs[s].connections.findIndex((function(t,s){return t.node==e&&t.input===n}));return this.drawflow.drawflow[i].data[t].inputs[s].connections.splice(l,1),this.dispatch("connectionRemoved",{output_id:e,input_id:t,output_class:n,input_class:s}),!0}return!1}return!1}removeConnectionNodeId(e){const t="node_in_"+e,n="node_out_"+e,s=document.getElementsByClassName(n);for(var i=s.length-1;i>=0;i--){var o=s[i].classList,l=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(l,1);var c=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(c,1),s[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 d=document.getElementsByClassName(t);for(i=d.length-1;i>=0;i--){o=d[i].classList,c=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(c,1);l=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(l,1),d[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 n=this.drawflow.drawflow;return Object.keys(n).map((function(s,i){Object.keys(n[s].data).map((function(n,i){n==e&&(t=s)}))})),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/package-lock.json b/package-lock.json
index 2462526..2f74e64 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "drawflow",
-  "version": "0.0.16",
+  "version": "0.0.21",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/drawflow.js b/src/drawflow.js
index 62694ea..83e25bd 100644
--- a/src/drawflow.js
+++ b/src/drawflow.js
@@ -567,7 +567,7 @@ export default class Drawflow {
     }
   }
 
-  createCurvature(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type) {
+  createCurvature(start_pos_x, start_pos_y, end_pos_x, end_pos_y, curvature_value, type, out_dir='unknown', in_dir='unknown') {
     var line_x = start_pos_x;
     var line_y = start_pos_y;
     var x = end_pos_x;
@@ -610,8 +610,38 @@ export default class Drawflow {
 
         var hx1 = line_x + Math.abs(x - line_x) * curvature;
         var hx2 = x - Math.abs(x - line_x) * curvature;
+        var hy1 = line_y + Math.abs(y - line_y) * curvature;
+        var hy2 = y - Math.abs(y - line_y) * curvature;
+        if (out_dir == 'top') {
+          var hy1 = line_y + Math.abs(y - line_y) * (curvature*-1);
+          var hx1 = line_x;
+        } else if (out_dir == 'bottom') {
+          var hy1 = line_y + Math.abs(y - line_y) * curvature;
+          var hx1 = line_x;
+          console.log(hy1);
+        } else if (out_dir == 'left') {
+          var hy1 = line_y;
+          var hx1 = line_x + Math.abs(x - line_x) * (curvature*-1);
+        } else if (out_dir == 'right') {
+          var hy1 = line_y;
+          var hx1 = line_x + Math.abs(x - line_x) * curvature;
+        }
 
-        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y;
+        if (in_dir == 'top') {
+          var hy2 = y + Math.abs(y - line_y) * (curvature * -1);
+          var hx2 = x;
+        } else if (in_dir == 'bottom') {
+          var hy2 = y + Math.abs(y - line_y) * curvature;
+          var hx2 = x;
+        } else if (in_dir == 'left') {
+          var hy2 = y;
+          var hx2 = x + Math.abs(x - line_x) * (curvature  * -1);
+        } else if (in_dir == 'right') {
+          var hy2 = y;
+          var hx2 = x + Math.abs(x - line_x) * curvature;
+        }
+
+        return ' M '+ line_x +' '+ line_y +' C '+ hx1 +' ' + hy1 +' '+ hx2 +' ' + hy2 +' ' + x +' ' + y;
     }
 
   }
@@ -721,15 +751,48 @@ export default class Drawflow {
         var elemtsearchId = document.getElementById(id_search);
 
         var elemtsearch = elemtsearchId.querySelectorAll('.'+elemsOut[item].classList[4])[0]
+        var elemtsearch_out = elemtsearchId_out.querySelectorAll('.'+elemsOut[item].classList[3])[0]
+        
+        // Set the first delta
+        var delta = elemtsearch_out.parentElement.offsetHeight / 2;
+
+        // Calculate out direction
+        var pos_x = elemtsearch_out.parentElement.offsetLeft + delta + elemtsearch_out.parentElement.offsetWidth;
+        var pos_y = elemtsearch_out.parentElement.offsetTop + delta;
+        // console.log(elemtsearch.parentElement, pos_x, pos_y, elemtsearch_in, elemtsearchId, elemtsearchId.offsetWidth, elemtsearchId.offsetHeight);
+        if (Math.abs(pos_x) <= delta) {
+          var out_dir = 'left';
+        } else if (Math.abs(pos_y) <= delta) {
+          var out_dir = 'top';
+        } else if (pos_x != 0 && Math.abs(pos_y - elemtsearchId_out.offsetHeight) <= delta) {
+          var out_dir = 'bottom';
+        } else if (pos_y != 0 && Math.abs(pos_x - elemtsearchId_out.offsetWidth) <= delta) {
+          var out_dir = 'right';
+        } else {
+          var out_dir = 'unknown';
+        }
+        // Calculate in direction
+        var in_x = elemtsearch.parentElement.offsetLeft + delta + elemtsearch.parentElement.offsetWidth;
+        var in_y = elemtsearch.parentElement.offsetTop + delta;
+        if (Math.abs(in_x) <= delta) {
+          var in_dir = 'left';
+        } else if (Math.abs(in_y) <= delta) {
+          var in_dir = 'top';
+        } else if (in_x != 0 && Math.abs(in_y - elemtsearchId.offsetHeight) <= delta) {
+          var in_dir = 'bottom';
+        } else if (in_y != 0 && Math.abs(in_x - elemtsearchId.offsetWidth) <= delta) {
+          var in_dir = 'right';
+        } else {
+          var in_dir = 'unknown';
+        }
 
-        var eX = elemtsearch.offsetWidth/2 + line_path + elemtsearch.parentElement.parentElement.offsetLeft + elemtsearch.offsetLeft;
-        var eY = elemtsearch.offsetHeight/2 + line_path + elemtsearch.parentElement.parentElement.offsetTop + elemtsearch.offsetTop;
-
-        var line_x = elemtsearchId_out.offsetLeft + elemtsearchId_out.querySelectorAll('.'+elemsOut[item].classList[3])[0].offsetLeft + elemtsearchId_out.querySelectorAll('.'+elemsOut[item].classList[3])[0].offsetWidth/2 + line_path;
-        var line_y = elemtsearchId_out.offsetTop + elemtsearchId_out.querySelectorAll('.'+elemsOut[item].classList[3])[0].offsetTop + elemtsearchId_out.querySelectorAll('.'+elemsOut[item].classList[3])[0].offsetHeight/2 + line_path;
-
+        
+        var eX = in_x + elemtsearch.parentElement.parentElement.offsetLeft - delta;
+        var eY = in_y + elemtsearch.parentElement.parentElement.offsetTop;
+        var line_x = pos_x + elemtsearch_out.parentElement.parentElement.offsetLeft - delta;
+        var line_y = pos_y + elemtsearch_out.parentElement.parentElement.offsetTop;
         var x = eX;
-        var y = eY;
+        var y = eY; 
         /*
         var curvature = 0.5;
         var hx1 = line_x + Math.abs(x - line_x) * curvature;
@@ -738,7 +801,7 @@ export default class Drawflow {
         elemsOut[item].children[0].setAttributeNS(null, 'd', 'M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y );
         */
 
-        const lineCurve = createCurvature(line_x, line_y, x, y, curvature, 'openclose');
+        const lineCurve = createCurvature(line_x, line_y, x, y, curvature, 'openclose', out_dir, in_dir);
         elemsOut[item].children[0].setAttributeNS(null, 'd', lineCurve );
       } else {
         const points = elemsOut[item].querySelectorAll('.point');
@@ -897,12 +960,44 @@ export default class Drawflow {
         var elemtsearchId = document.getElementById(id_search);
 
         var elemtsearch = elemtsearchId.querySelectorAll('.'+elems[item].classList[3])[0]
-
-        var line_x = elemtsearch.offsetWidth/2 + line_path + elemtsearch.parentElement.parentElement.offsetLeft + elemtsearch.offsetLeft;
-        var line_y = elemtsearch.offsetHeight/2 + line_path + elemtsearch.parentElement.parentElement.offsetTop + elemtsearch.offsetTop;
-
-        var x = elemtsearchId_in.offsetLeft + elemtsearchId_in.querySelectorAll('.'+elems[item].classList[4])[0].offsetLeft + elemtsearchId_in.querySelectorAll('.'+elems[item].classList[4])[0].offsetWidth/2 + line_path;
-        var y = elemtsearchId_in.offsetTop + elemtsearchId_in.querySelectorAll('.'+elems[item].classList[4])[0].offsetTop + elemtsearchId_in.querySelectorAll('.'+elems[item].classList[4])[0].offsetHeight/2 + line_path;
+        var elemtsearch_in = elemtsearchId_in.querySelectorAll('.'+elems[item].classList[4])[0]
+
+        var delta = elemtsearch.parentElement.offsetHeight / 2;
+
+        // Calculate out direction
+        var pos_x = elemtsearch.parentElement.offsetLeft + delta + elemtsearch.parentElement.offsetWidth;
+        var pos_y = elemtsearch.parentElement.offsetTop + delta;
+        // console.log("posX:", pos_x);
+        // console.log(elemtsearch.parentElement, pos_x, pos_y, elemtsearch_in, elemtsearchId, elemtsearchId.offsetWidth, elemtsearchId.offsetHeight);
+        if (Math.abs(pos_x) <= delta) {
+          var out_dir = 'left';
+        } else if (Math.abs(pos_y) <= delta) {
+          var out_dir = 'top';
+        } else if (pos_x != 0 && Math.abs(pos_y - elemtsearchId.offsetHeight) <= delta) {
+          var out_dir = 'bottom';
+        } else if (pos_y != 0 && Math.abs(pos_x - elemtsearchId.offsetWidth) <= delta) {
+          var out_dir = 'right';
+        } else {
+          var out_dir = 'unknown';
+        }
+        // Calculate in direction
+        var in_x = elemtsearch_in.parentElement.offsetLeft + delta + elemtsearch_in.parentElement.offsetWidth;
+        var in_y = elemtsearch_in.parentElement.offsetTop + delta;
+        if (Math.abs(in_x) <= delta) {
+          var in_dir = 'left';
+        } else if (Math.abs(in_y) <= delta) {
+          var in_dir = 'top';
+        } else if (in_x != 0 && Math.abs(in_y - elemtsearchId_in.offsetHeight) <= delta) {
+          var in_dir = 'bottom';
+        } else if (in_y != 0 && Math.abs(in_x - elemtsearchId_in.offsetWidth) <= delta) {
+          var in_dir = 'right';
+        } else {
+          var in_dir = 'unknown';
+        }
+        var line_x = pos_x + elemtsearch.parentElement.parentElement.offsetLeft - delta;
+        var line_y = pos_y + elemtsearch.parentElement.parentElement.offsetTop;
+        var x = in_x + elemtsearchId_in.offsetLeft - delta;
+        var y = in_y + elemtsearchId_in.offsetTop;
         /*
         var curvature = 0.5;
         var hx1 = line_x + Math.abs(x - line_x) * curvature;
@@ -910,7 +1005,7 @@ export default class Drawflow {
         // console.log('M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y );
         elems[item].children[0].setAttributeNS(null, 'd', 'M '+ line_x +' '+ line_y +' C '+ hx1 +' '+ line_y +' '+ hx2 +' ' + y +' ' + x +'  ' + y );*/
 
-        const lineCurve = createCurvature(line_x, line_y, x, y, curvature, 'openclose');
+        const lineCurve = createCurvature(line_x, line_y, x, y, curvature, 'openclose', out_dir, in_dir);
         elems[item].children[0].setAttributeNS(null, 'd', lineCurve );
 
       } else {