diff --git a/README.md b/README.md index f851151..a753b9f 100644 --- a/README.md +++ b/README.md @@ -202,17 +202,24 @@ Adding a node is simple. ```javascript editor.addNode(name, inputs, outputs, posx, posy, class, data, html); ``` +Parameter | Type | Description +--- |-----------------|------------------------------------------------------------------- +`name` | text | Name of module +`inputs` | number or array | Number of de inputs or Array of Input/Output-Type +`outputs` | number or array | Number of de outputs or Array of Input/Output-Type +`pos_x` | number | Position on start node left +`pos_y` | number | Position on start node top +`class` | text | Added classname to de node. Multiple classnames separated by space +`data` | json | Data passed to node +`html` | text | HTML drawn on node or `name` of register node. +`typenode` | boolean & text | Default `false`, `true` for Object HTML, `vue` for vue + +Input/Output-Type + Parameter | Type | Description ---- | --- | --- -`name` | text | Name of module -`inputs` | number | Number of de inputs -`outputs` | number | Number of de outputs -`pos_x` | number | Position on start node left -`pos_y` | number | Position on start node top -`class` | text | Added classname to de node. Multiple classnames separated by space -`data` | json | Data passed to node -`html` | text | HTML drawn on node or `name` of register node. -`typenode` | boolean & text | Default `false`, `true` for Object HTML, `vue` for vue +---|-------|-------- +`dataTypes` | array of string | Optional list of own data types. On input who's allow, on output which are provided. +`maxConnections` | number | Optional maximum number of connections for this input / output. You can use the attribute `df-*` in **inputs, textarea or select** to synchronize with the node data and **contenteditable**. @@ -264,8 +271,8 @@ Mehtod | Description `getNodesFromName(name)` | Return Array of nodes id. Ex: name: `telegram` `removeNodeId(id)` | Remove node. Ex id: `node-x` `updateNodeDataFromId` | Update data element. Ex: `5, { name: 'Drawflow' }` -`addNodeInput(id)` | Add input to node. Ex id: `5` -`addNodeOutput(id)` | Add output to node. Ex id: `5` +`addNodeInput(id, inputData)` | Add input to node. Ex id: `5`. The second parameter is optional and is an Input/Output-Type +`addNodeOutput(id, outputData)` | Add output to node. Ex id: `5`. The second parameter is optional and is an Input/Output-Type `removeNodeInput(id, input_class)` | Remove input to node. Ex id: `5`, `input_2` `removeNodeOutput(id, output_class)` | Remove output to node. Ex id: `5`, `output_2` `addConnection(id_output, id_input, output_class, input_class)` | Add connection. Ex: `15,16,'output_1','input_1'` diff --git a/dist/drawflow.min.js b/dist/drawflow.min.js index 85555ba..ccc688e 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(i){if(t[i])return t[i].exports;var s=t[i]={i:i,l:!1,exports:{}};return e[i].call(s.exports,s,s.exports,n),s.l=!0,s.exports}return n.m=e,n.c=t,n.d=function(e,t,i){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:i})},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 i=Object.create(null);if(n.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var s in e)n.d(i,s,function(t){return e[t]}.bind(null,s));return i},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 i}));class i{constructor(e,t=null,n=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_x_start=0,this.pos_y=0,this.pos_y_start=0,this.mouse_x=0,this.mouse_y=0,this.line_path=5,this.first_click=null,this.force_first_input=!1,this.draggable_inputs=!0,this.useuuid=!1,this.parent=n,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.zoom_value=.1,this.zoom_last_value=1,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;t100&&(n>this.prevDiff&&this.zoom_in(),n=n&&(n=parseInt(e)+1)}))})),this.nodeId=n}removeReouteConnectionSelected(){this.dispatch("connectionUnselected",!0),this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((e,t)=>{e.classList.remove("selected")})}click(e){if(this.dispatch("click",e),"fixed"===this.editor_mode){if(e.preventDefault(),"parent-drawflow"!==e.target.classList[0]&&"drawflow"!==e.target.classList[0])return!1;this.ele_selected=e.target.closest(".parent-drawflow")}else"view"===this.editor_mode?(null!=e.target.closest(".drawflow")||e.target.matches(".parent-drawflow"))&&(this.ele_selected=e.target.closest(".parent-drawflow"),e.preventDefault()):(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"),this.node_selected!=this.ele_selected&&this.dispatch("nodeUnselected",!0)),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.removeReouteConnectionSelected(),this.connection_selected=null),this.node_selected!=this.ele_selected&&this.dispatch("nodeSelected",this.ele_selected.id.slice(5)),this.node_selected=this.ele_selected,this.node_selected.classList.add("selected"),this.draggable_inputs?"SELECT"!==e.target.tagName&&(this.drag=!0):"INPUT"!==e.target.tagName&&"TEXTAREA"!==e.target.tagName&&"SELECT"!==e.target.tagName&&!0!==e.target.hasAttribute("contenteditable")&&(this.drag=!0);break;case"output":this.connection=!0,null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null,this.dispatch("nodeUnselected",!0)),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,this.dispatch("nodeUnselected",!0)),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,this.dispatch("nodeUnselected",!0)),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");const t=this.connection_selected.parentElement.classList;t.length>1&&(this.dispatch("connectionSelected",{output_id:t[2].slice(14),input_id:t[1].slice(13),output_class:t[3],input_class:t[4]}),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,this.dispatch("nodeUnselected",!0)),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_x_start=e.touches[0].clientX,this.pos_y=e.touches[0].clientY,this.pos_y_start=e.touches[0].clientY):(this.pos_x=e.clientX,this.pos_x_start=e.clientX,this.pos_y=e.clientY,this.pos_y_start=e.clientY),["input","output","main-path"].includes(this.ele_selected.classList[0])&&e.preventDefault(),this.dispatch("clickEnd",e)}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&&(i=this.canvas_x+-(this.pos_x-t),s=this.canvas_y+-(this.pos_y-n),this.dispatch("translate",{x:i,y:s}),this.precanvas.style.transform="translate("+i+"px, "+s+"px) scale("+this.zoom+")"),this.drag){e.preventDefault();var i=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),s=(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-s+"px",this.ele_selected.style.left=this.ele_selected.offsetLeft-i+"px",this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_x=this.ele_selected.offsetLeft-i,this.drawflow.drawflow[this.module].data[this.ele_selected.id.slice(5)].pos_y=this.ele_selected.offsetTop-s,this.updateConnectionNodes(this.ele_selected.id)}if(this.drag_point){i=(this.pos_x-t)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),s=(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)}"touchmove"===e.type&&(this.mouse_x=t,this.mouse_y=n),this.dispatch("mouseMove",{x:t,y:n})}dragEnd(e){if("touchend"===e.type)var t=this.mouse_x,n=this.mouse_y,i=document.elementFromPoint(t,n);else t=e.clientX,n=e.clientY,i=e.target;if(this.drag&&(this.pos_x_start==t&&this.pos_y_start==n||this.dispatch("nodeMoved",this.ele_selected.id.slice(5))),this.drag_point&&(this.ele_selected.classList.remove("selected"),this.pos_x_start==t&&this.pos_y_start==n||this.dispatch("rerouteMoved",this.ele_selected.parentElement.classList[2].slice(14))),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("input"===i.classList[0]||this.force_first_input&&(null!=i.closest(".drawflow_content_node")||"drawflow-node"===i.classList[0])){if(!this.force_first_input||null==i.closest(".drawflow_content_node")&&"drawflow-node"!==i.classList[0])s=i.parentElement.parentElement.id,o=i.classList[1];else{if(null!=i.closest(".drawflow_content_node"))var s=i.closest(".drawflow_content_node").parentElement.id;else var s=i.id;if(0===Object.keys(this.getNodeFromId(s.slice(5)).inputs).length)var o=!1;else var o="input_1"}var l=this.ele_selected.parentElement.parentElement.id,c=this.ele_selected.classList[1];if(l!==s&&!1!==o){if(0===this.container.querySelectorAll(".connection.node_in_"+s+".node_out_"+l+"."+c+"."+o).length){this.connection_ele.classList.add("node_in_"+s),this.connection_ele.classList.add("node_out_"+l),this.connection_ele.classList.add(c),this.connection_ele.classList.add(o);var d=s.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.dispatch("connectionCancel",!0),this.connection_ele.remove();this.connection_ele=null}else this.dispatch("connectionCancel",!0),this.connection_ele.remove(),this.connection_ele=null}else this.dispatch("connectionCancel",!0),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,this.dispatch("mouseUp",e)}contextmenu(e){if(this.dispatch("contextmenu",e),e.preventDefault(),"fixed"===this.editor_mode||"view"===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&&this.connection_selected.parentElement.classList.length>1&&(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(this.dispatch("keydown",e),"fixed"===this.editor_mode||"view"===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.canvas_x=this.canvas_x/this.zoom_last_value*this.zoom,this.canvas_y=this.canvas_y/this.zoom_last_value*this.zoom,this.zoom_last_value=this.zoom,this.precanvas.style.transform="translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")"}zoom_in(){this.zoomthis.zoom_min&&(this.zoom-=this.zoom_value,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}createCurvature(e,t,n,i,s,o){var l=e,c=t,d=n,a=i,r=s;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);var i=e.parentElement.parentElement.id.slice(5),s=e.classList[1];this.dispatch("connectionStart",{output_id:i,output_class:s})}updateConnection(e,t){const n=this.precanvas,i=this.zoom;let s=n.clientWidth/(n.clientWidth*i);s=s||0;let o=n.clientHeight/(n.clientHeight*i);o=o||0;var l=this.connection_ele.children[0],c=this.ele_selected.offsetWidth/2+(this.ele_selected.getBoundingClientRect().x-n.getBoundingClientRect().x)*s,d=this.ele_selected.offsetHeight/2+(this.ele_selected.getBoundingClientRect().y-n.getBoundingClientRect().y)*o,a=e*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),r=t*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),h=this.curvature,u=this.createCurvature(c,d,a,r,h,"openclose");l.setAttributeNS(null,"d",u)}addConnection(e,t,n,i){var s=this.getModuleFromNodeId(e);if(s===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==i&&(l=!0)}if(!1===l){if(this.drawflow.drawflow[s].data[e].outputs[n].connections.push({node:t.toString(),output:i}),this.drawflow.drawflow[s].data[t].inputs[i].connections.push({node:e.toString(),input:n}),this.module===s){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(i),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:i})}}}updateConnectionNodes(e){const t="node_in_"+e,n="node_out_"+e;this.line_path;const i=this.container,s=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;let u=s.clientWidth/(s.clientWidth*h);u=u||0;let p=s.clientHeight/(s.clientHeight*h);p=p||0;const f=i.querySelectorAll("."+n);Object.keys(f).map((function(t,n){if(null===f[t].querySelector(".point")){var g=i.querySelector("#"+e),m=f[t].classList[1].replace("node_in_",""),_=i.querySelector("#"+m).querySelectorAll("."+f[t].classList[4])[0],w=_.offsetWidth/2+(_.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,v=_.offsetHeight/2+(_.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,y=g.querySelectorAll("."+f[t].classList[3])[0],C=y.offsetWidth/2+(y.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,x=y.offsetHeight/2+(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*p;const n=l(C,x,w,v,o,"openclose");f[t].children[0].setAttributeNS(null,"d",n)}else{const n=f[t].querySelectorAll(".point");let o="";const g=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var f=i.querySelector("#"+e),m=((x=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,_=(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,w=(L=f.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,v=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,y=l(w,v,m,_,d,"open");o+=y,g.push(y);f=t;var C=t.parentElement.classList[1].replace("node_in_",""),x=(E=i.querySelector("#"+C)).querySelectorAll("."+t.parentElement.classList[4])[0];m=(R=E.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(R.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,_=R.offsetHeight/2+(R.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,w=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,v=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,y=l(w,v,m,_,d,"close");o+=y,g.push(y)}else if(0===a){var L;f=i.querySelector("#"+e),m=((x=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,_=(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,w=(L=f.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,v=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,y=l(w,v,m,_,d,"open");o+=y,g.push(y);f=t,m=((x=n[a+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,_=(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,w=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,v=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,y=l(w,v,m,_,c,"other");o+=y,g.push(y)}else if(a===n.length-1){var E,R;f=t,C=t.parentElement.classList[1].replace("node_in_",""),x=(E=i.querySelector("#"+C)).querySelectorAll("."+t.parentElement.classList[4])[0],m=(R=E.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(R.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,_=R.offsetHeight/2+(R.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,w=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*h))+r,v=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*h))+r,y=l(w,v,m,_,d,"close");o+=y,g.push(y)}else{f=t,m=((x=n[a+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*h))+r,_=(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*h))+r,w=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*h))+r,v=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*h))+r,y=l(w,v,m,_,c,"other");o+=y,g.push(y)}}),a?g.forEach((e,n)=>{f[t].children[n].setAttributeNS(null,"d",e)}):f[t].children[0].setAttributeNS(null,"d",o)}}));const g=i.querySelectorAll("."+t);Object.keys(g).map((function(t,n){if(null===g[t].querySelector(".point")){var h=i.querySelector("#"+e),f=g[t].classList[2].replace("node_out_",""),m=i.querySelector("#"+f).querySelectorAll("."+g[t].classList[3])[0],_=m.offsetWidth/2+(m.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=m.offsetHeight/2+(m.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,v=(h=h.querySelectorAll("."+g[t].classList[4])[0]).offsetWidth/2+(h.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,y=h.offsetHeight/2+(h.getBoundingClientRect().y-s.getBoundingClientRect().y)*p;const n=l(_,w,v,y,o,"openclose");g[t].children[0].setAttributeNS(null,"d",n)}else{const n=g[t].querySelectorAll(".point");let o="";const h=[];n.forEach((t,a)=>{if(0===a&&n.length-1==0){var f=i.querySelector("#"+e),g=((C=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,m=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,_=(E=f.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,v=l(g,m,_,w,d,"close");o+=v,h.push(v);f=t;var y=t.parentElement.classList[2].replace("node_out_",""),C=(L=i.querySelector("#"+y)).querySelectorAll("."+t.parentElement.classList[3])[0];g=(x=L.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,m=x.offsetHeight/2+(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,_=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,w=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,v=l(g,m,_,w,d,"open");o+=v,h.push(v)}else if(0===a){var x;f=t,y=t.parentElement.classList[2].replace("node_out_",""),C=(L=i.querySelector("#"+y)).querySelectorAll("."+t.parentElement.classList[3])[0],g=(x=L.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,m=x.offsetHeight/2+(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,_=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,w=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,v=l(g,m,_,w,d,"open");o+=v,h.push(v);f=t,_=((C=n[a+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,w=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,g=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,m=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,v=l(g,m,_,w,c,"other");o+=v,h.push(v)}else if(a===n.length-1){var L,E;f=t,y=t.parentElement.classList[1].replace("node_in_",""),C=(L=i.querySelector("#"+y)).querySelectorAll("."+t.parentElement.classList[4])[0],_=(E=L.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*p,g=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,m=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,v=l(g,m,_,w,d,"close");o+=v,h.push(v)}else{f=t,_=((C=n[a+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,w=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,g=(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+r,m=(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*p+r,v=l(g,m,_,w,c,"other");o+=v,h.push(v)}}),a?h.forEach((e,n)=>{g[t].children[n].setAttributeNS(null,"d",e)}):g[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),i=this.connection_selected.parentElement.classList[3],s=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[i].connections.findIndex((function(e,t){return e.node===n&&e.output===s}));void 0===this.drawflow.drawflow[this.module].data[r].outputs[i].connections[h].points&&(this.drawflow.drawflow[this.module].data[r].outputs[i].connections[h].points=[]),this.reroute_fix_curvature?(d>0||this.drawflow.drawflow[this.module].data[r].outputs[i].connections[h].points!==[]?this.drawflow.drawflow[this.module].data[r].outputs[i].connections[h].points.splice(d,0,{pos_x:l,pos_y:c}):this.drawflow.drawflow[this.module].data[r].outputs[i].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[i].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),i=e.parentElement.classList[3],s=e.parentElement.classList[4];let o=Array.from(e.parentElement.children).indexOf(e);const l=t.slice(5),c=this.drawflow.drawflow[this.module].data[l].outputs[i].connections.findIndex((function(e,t){return e.node===n&&e.output===s}));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)}else o--;this.drawflow.drawflow[this.module].data[l].outputs[i].connections[c].points.splice(o,1),e.remove(),this.dispatch("removeReroute",l),this.updateConnectionNodes(t)}registerNode(e,t,n=null,i=null){this.noderegister[e]={html:t,props:n,options:i}}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(i,s){for(var o in n[i].data)n[i].data[o].name==e&&t.push(n[i].data[o].id)})),t}addNode(e,t,n,i,s,o,l,c,d=!1){if(this.useuuid)var a=this.getUuid();else a=this.nodeId;const r=document.createElement("div");r.classList.add("parent-node");const h=document.createElement("div");h.innerHTML="",h.setAttribute("id","node-"+a),h.classList.add("drawflow-node"),""!=o&&h.classList.add(...o.split(" "));const u=document.createElement("div");u.classList.add("inputs");const p=document.createElement("div");p.classList.add("outputs");const f={};for(var g=0;ge(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,i){if(null===t)t=l[n];else t=t[n];null!==t&&Object.entries(t).forEach((function(n,s){if("object"==typeof n[1])e(t,n[0],i+"-"+n[0]);else for(var o=_.querySelectorAll("[df-"+i+"-"+n[0]+"]"),l=0;lt(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,i,s){if(null===n)n=e.data[i];else n=n[i];null!==n&&Object.entries(n).forEach((function(e,i){if("object"==typeof e[1])t(n,e[0],s+"-"+e[0]);else for(var o=c.querySelectorAll("[df-"+s+"-"+e[0]+"]"),l=0;l{const a=e.outputs[s].connections[o].node,r=e.outputs[s].connections[o].output,h=i.querySelector(".connection.node_in_node-"+a+".node_out_node-"+e.id+"."+s+"."+r);if(n&&0===d)for(var u=0;u{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,i)=>{t.connections.forEach((e,t)=>{d.push(e)}),this.drawflow.drawflow[n].data[e].inputs["input_"+(i+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){this.container.querySelectorAll("#node-"+e+" .inputs .input").forEach((e,t)=>{const n=e.classList[1].slice(6);parseInt(c){this.drawflow.drawflow[n].data[t.node].outputs[t.input].connections.forEach((i,s)=>{if(i.node==e){const o=i.output.slice(6);if(parseInt(c){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,i)=>{t.connections.forEach((e,t)=>{d.push({node:e.node,output:e.output})}),this.drawflow.drawflow[n].data[e].outputs["output_"+(i+1)]=t}),d=new Set(d.map(e=>JSON.stringify(e))),d=Array.from(d).map(e=>JSON.parse(e)),this.module===n){this.container.querySelectorAll("#node-"+e+" .outputs .output").forEach((e,t)=>{const n=e.classList[1].slice(7);parseInt(c){this.drawflow.drawflow[n].data[t.node].inputs[t.output].connections.forEach((i,s)=>{if(i.node==e){const o=i.input.slice(7);if(parseInt(c)-1){this.module===s&&this.container.querySelector(".connection.node_in_node-"+t+".node_out_node-"+e+"."+n+"."+i).remove();var o=this.drawflow.drawflow[s].data[e].outputs[n].connections.findIndex((function(e,n){return e.node==t&&e.output===i}));this.drawflow.drawflow[s].data[e].outputs[n].connections.splice(o,1);var l=this.drawflow.drawflow[s].data[t].inputs[i].connections.findIndex((function(t,i){return t.node==e&&t.input===n}));return this.drawflow.drawflow[s].data[t].inputs[i].connections.splice(l,1),this.dispatch("connectionRemoved",{output_id:e,input_id:t,output_class:n,input_class:i}),!0}return!1}return!1}removeConnectionNodeId(e){const t="node_in_"+e,n="node_out_"+e,i=this.container.querySelectorAll("."+n);for(var s=i.length-1;s>=0;s--){var o=i[s].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),i[s].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=this.container.querySelectorAll("."+t);for(s=d.length-1;s>=0;s--){o=d[s].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[s].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(i,s){Object.keys(n[i].data).map((function(n,s){n==e&&(t=i)}))})),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.zoom_last_value=1,this.precanvas.style.transform="",this.import(this.drawflow,!1)}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(){const e=JSON.parse(JSON.stringify(this.drawflow));return this.dispatch("export",e),e}import(e,t=!0){this.clear(),this.drawflow=JSON.parse(JSON.stringify(e)),this.load(),t&&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(!this.events[e])return!1;const n=this.events[e].listeners,i=n.indexOf(t);i>-1&&n.splice(i,1)}dispatch(e,t){if(void 0===this.events[e])return!1;this.events[e].listeners.forEach(e=>{e(t)})}getUuid(){for(var e=[],t=0;t<36;t++)e[t]="0123456789abcdef".substr(Math.floor(16*Math.random()),1);return e[14]="4",e[19]="0123456789abcdef".substr(3&e[19]|8,1),e[8]=e[13]=e[18]=e[23]="-",e.join("")}}}]).default})); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Drawflow=e():t.Drawflow=e()}("undefined"!=typeof self?self:this,(function(){return function(t){var e={};function n(s){if(e[s])return e[s].exports;var i=e[s]={i:s,l:!1,exports:{}};return t[s].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=t,n.c=e,n.d=function(t,e,s){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:s})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var s=Object.create(null);if(n.r(s),Object.defineProperty(s,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)n.d(s,i,function(e){return t[e]}.bind(null,i));return s},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return s}));class s{constructor(t,e=null,n=null){this.events={},this.container=t,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_x_start=0,this.pos_y=0,this.pos_y_start=0,this.mouse_x=0,this.mouse_y=0,this.line_path=5,this.first_click=null,this.force_first_input=!1,this.draggable_inputs=!0,this.useuuid=!1,this.parent=n,this.noderegister={},this.render=e,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.zoom_value=.1,this.zoom_last_value=1,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(t){this.evCache.push(t)}pointermove_handler(t){for(var e=0;e100&&(n>this.prevDiff&&this.zoom_in(),n=n&&(n=parseInt(t)+1)}))})),this.nodeId=n}removeReouteConnectionSelected(){this.dispatch("connectionUnselected",!0),this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((t,e)=>{t.classList.remove("selected")})}click(t){if(this.dispatch("click",t),"fixed"===this.editor_mode){if(t.preventDefault(),"parent-drawflow"!==t.target.classList[0]&&"drawflow"!==t.target.classList[0])return!1;this.ele_selected=t.target.closest(".parent-drawflow")}else"view"===this.editor_mode?(null!=t.target.closest(".drawflow")||t.target.matches(".parent-drawflow"))&&(this.ele_selected=t.target.closest(".parent-drawflow"),t.preventDefault()):(this.first_click=t.target,this.ele_selected=t.target,0===t.button&&this.contextmenuDel(),null!=t.target.closest(".drawflow_content_node")&&(this.ele_selected=t.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"),this.node_selected!=this.ele_selected&&this.dispatch("nodeUnselected",!0)),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.removeReouteConnectionSelected(),this.connection_selected=null),this.node_selected!=this.ele_selected&&this.dispatch("nodeSelected",this.ele_selected.id.slice(5)),this.node_selected=this.ele_selected,this.node_selected.classList.add("selected"),this.draggable_inputs?"SELECT"!==t.target.tagName&&(this.drag=!0):"INPUT"!==t.target.tagName&&"TEXTAREA"!==t.target.tagName&&"SELECT"!==t.target.tagName&&!0!==t.target.hasAttribute("contenteditable")&&(this.drag=!0);break;case"output":this.connection=!0,null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null,this.dispatch("nodeUnselected",!0)),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.removeReouteConnectionSelected(),this.connection_selected=null),this.drawConnection(t.target)||(this.connection=!1);break;case"parent-drawflow":case"drawflow":null!=this.node_selected&&(this.node_selected.classList.remove("selected"),this.node_selected=null,this.dispatch("nodeUnselected",!0)),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,this.dispatch("nodeUnselected",!0)),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");const e=this.connection_selected.parentElement.classList;e.length>1&&(this.dispatch("connectionSelected",{output_id:e[2].slice(14),input_id:e[1].slice(13),output_class:e[3],input_class:e[4]}),this.reroute_fix_curvature&&this.connection_selected.parentElement.querySelectorAll(".main-path").forEach((t,e)=>{t.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,this.dispatch("nodeUnselected",!0)),null!=this.connection_selected&&(this.connection_selected.classList.remove("selected"),this.removeReouteConnectionSelected(),this.connection_selected=null)}"touchstart"===t.type?(this.pos_x=t.touches[0].clientX,this.pos_x_start=t.touches[0].clientX,this.pos_y=t.touches[0].clientY,this.pos_y_start=t.touches[0].clientY):(this.pos_x=t.clientX,this.pos_x_start=t.clientX,this.pos_y=t.clientY,this.pos_y_start=t.clientY),["input","output","main-path"].includes(this.ele_selected.classList[0])&&t.preventDefault(),this.dispatch("clickEnd",t)}position(t){if("touchmove"===t.type)var e=t.touches[0].clientX,n=t.touches[0].clientY;else e=t.clientX,n=t.clientY;if(this.connection&&this.updateConnection(e,n),this.editor_selected&&(s=this.canvas_x+-(this.pos_x-e),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){t.preventDefault();var s=(this.pos_x-e)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=e,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)}if(this.drag_point){s=(this.pos_x-e)*this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom),i=(this.pos_y-n)*this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom);this.pos_x=e,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 t=this.ele_selected.parentElement.classList[2].slice(9),c=this.ele_selected.parentElement.classList[1].slice(13),a=this.ele_selected.parentElement.classList[3],d=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=t.slice(5),u=this.drawflow.drawflow[this.module].data[h].outputs[a].connections.findIndex((function(t,e){return t.node===c&&t.output===d}));this.drawflow.drawflow[this.module].data[h].outputs[a].connections[u].points[r]={pos_x:o,pos_y:l};const p=this.ele_selected.parentElement.classList[2].slice(9);this.updateConnectionNodes(p)}"touchmove"===t.type&&(this.mouse_x=e,this.mouse_y=n),this.dispatch("mouseMove",{x:e,y:n})}dragEnd(t){if("touchend"===t.type)var e=this.mouse_x,n=this.mouse_y,s=document.elementFromPoint(e,n);else e=t.clientX,n=t.clientY,s=t.target;if(this.drag&&(this.pos_x_start==e&&this.pos_y_start==n||this.dispatch("nodeMoved",this.ele_selected.id.slice(5))),this.drag_point&&(this.ele_selected.classList.remove("selected"),this.pos_x_start==e&&this.pos_y_start==n||this.dispatch("rerouteMoved",this.ele_selected.parentElement.classList[2].slice(14))),this.editor_selected&&(this.canvas_x=this.canvas_x+-(this.pos_x-e),this.canvas_y=this.canvas_y+-(this.pos_y-n),this.editor_selected=!1),!0===this.connection)if("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;if(0===Object.keys(this.getNodeFromId(i.slice(5)).inputs).length)var o=!1;else var o="input_1"}for(var l=this.ele_selected.parentElement.parentElement.id,c=this.ele_selected.classList[1],a=!0,d=0,r=2;r2)){for(var h=2;h0&&this.drawflow.drawflow[this.module].data[u].inputs[o].connections.length>=d&&(a=!1)}if(l!==i&&!1!==o&&a){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);u=i.slice(5);var p=l.slice(5);this.drawflow.drawflow[this.module].data[p].outputs[c].connections.push({node:u,output:o}),this.drawflow.drawflow[this.module].data[u].inputs[o].connections.push({node:p,input:c}),this.updateConnectionNodes("node-"+p),this.updateConnectionNodes("node-"+u),this.dispatch("connectionCreated",{output_id:p,input_id:u,output_class:c,input_class:o})}else this.dispatch("connectionCancel",!0),this.connection_ele.remove();this.connection_ele=null}else this.dispatch("connectionCancel",!0),this.connection_ele.remove(),this.connection_ele=null}else this.dispatch("connectionCancel",!0),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,this.dispatch("mouseUp",t)}contextmenu(t){if(this.dispatch("contextmenu",t),t.preventDefault(),"fixed"===this.editor_mode||"view"===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 e=document.createElement("div");e.classList.add("drawflow-delete"),e.innerHTML="x",this.node_selected&&this.node_selected.appendChild(e),this.connection_selected&&this.connection_selected.parentElement.classList.length>1&&(e.style.top=t.clientY*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))+"px",e.style.left=t.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(e))}}contextmenuDel(){this.precanvas.getElementsByClassName("drawflow-delete").length&&this.precanvas.getElementsByClassName("drawflow-delete")[0].remove()}key(t){if(this.dispatch("keydown",t),"fixed"===this.editor_mode||"view"===this.editor_mode)return!1;("Delete"===t.key||"Backspace"===t.key&&t.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(t,e){t.ctrlKey&&(t.preventDefault(),t.deltaY>0?this.zoom_out():this.zoom_in())}zoom_refresh(){this.dispatch("zoom",this.zoom),this.canvas_x=this.canvas_x/this.zoom_last_value*this.zoom,this.canvas_y=this.canvas_y/this.zoom_last_value*this.zoom,this.zoom_last_value=this.zoom,this.precanvas.style.transform="translate("+this.canvas_x+"px, "+this.canvas_y+"px) scale("+this.zoom+")"}zoom_in(){this.zoomthis.zoom_min&&(this.zoom-=this.zoom_value,this.zoom_refresh())}zoom_reset(){1!=this.zoom&&(this.zoom=1,this.zoom_refresh())}createCurvature(t,e,n,s,i,o){var l=t,c=e,a=n,d=s,r=i;switch(o){case"open":if(t>=n)var h=l+Math.abs(a-l)*r,u=a-Math.abs(a-l)*(-1*r);else h=l+Math.abs(a-l)*r,u=a-Math.abs(a-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+d+" "+a+" "+d;case"close":if(t>=n)h=l+Math.abs(a-l)*(-1*r),u=a-Math.abs(a-l)*r;else h=l+Math.abs(a-l)*r,u=a-Math.abs(a-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+d+" "+a+" "+d;case"other":if(t>=n)h=l+Math.abs(a-l)*(-1*r),u=a-Math.abs(a-l)*(-1*r);else h=l+Math.abs(a-l)*r,u=a-Math.abs(a-l)*r;return" M "+l+" "+c+" C "+h+" "+c+" "+u+" "+d+" "+a+" "+d;default:return" M "+l+" "+c+" C "+(h=l+Math.abs(a-l)*r)+" "+c+" "+(u=a-Math.abs(a-l)*r)+" "+d+" "+a+" "+d}}drawConnection(t){var e=t.parentElement.parentElement.id.slice(5),n=t.classList[1],s=0;if(t.classList.value.includes("maxConnections_")){for(var i=2;i0&&this.drawflow.drawflow[this.module].data[e].outputs[n].connections.length>=s)return!1}var o=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=o;var l=document.createElementNS("http://www.w3.org/2000/svg","path");return l.classList.add("main-path"),l.setAttributeNS(null,"d",""),o.classList.add("connection"),o.appendChild(l),this.precanvas.appendChild(o),this.dispatch("connectionStart",{output_id:e,output_class:n}),!0}updateConnection(t,e){const n=this.precanvas,s=this.zoom;let i=n.clientWidth/(n.clientWidth*s);i=i||0;let o=n.clientHeight/(n.clientHeight*s);o=o||0;var l=this.connection_ele.children[0],c=this.ele_selected.offsetWidth/2+(this.ele_selected.getBoundingClientRect().x-n.getBoundingClientRect().x)*i,a=this.ele_selected.offsetHeight/2+(this.ele_selected.getBoundingClientRect().y-n.getBoundingClientRect().y)*o,d=t*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom))-this.precanvas.getBoundingClientRect().x*(this.precanvas.clientWidth/(this.precanvas.clientWidth*this.zoom)),r=e*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom))-this.precanvas.getBoundingClientRect().y*(this.precanvas.clientHeight/(this.precanvas.clientHeight*this.zoom)),h=this.curvature,u=this.createCurvature(c,a,d,r,h,"openclose");l.setAttributeNS(null,"d",u)}addConnection(t,e,n,s){var i=this.getModuleFromNodeId(t);if(i===this.getModuleFromNodeId(e)){var o=this.getNodeFromId(t),l=!1;for(var c in o.outputs[n].connections){var a=o.outputs[n].connections[c];a.node==e&&a.output==s&&(l=!0)}if(!1===l){if(this.drawflow.drawflow[i].data[t].outputs[n].connections.push({node:e.toString(),output:s}),this.drawflow.drawflow[i].data[e].inputs[s].connections.push({node:t.toString(),input:n}),this.module===i){var d=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",""),d.classList.add("connection"),d.classList.add("node_in_node-"+e),d.classList.add("node_out_node-"+t),d.classList.add(n),d.classList.add(s),d.appendChild(r),this.precanvas.appendChild(d),this.updateConnectionNodes("node-"+t),this.updateConnectionNodes("node-"+e)}this.dispatch("connectionCreated",{output_id:t,input_id:e,output_class:n,input_class:s})}}}updateConnectionNodes(t){const e="node_in_"+t,n="node_out_"+t;this.line_path;const s=this.container,i=this.precanvas,o=this.curvature,l=this.createCurvature,c=this.reroute_curvature,a=this.reroute_curvature_start_end,d=this.reroute_fix_curvature,r=this.reroute_width,h=this.zoom;let u=i.clientWidth/(i.clientWidth*h);u=u||0;let p=i.clientHeight/(i.clientHeight*h);p=p||0;const f=s.querySelectorAll("."+n);Object.keys(f).map((function(e,n){if(null===f[e].querySelector(".point")){var m=s.querySelector("#"+t),_=f[e].classList[1].replace("node_in_",""),g=s.querySelector("#"+_).querySelectorAll("."+f[e].classList[4])[0],w=g.offsetWidth/2+(g.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,v=g.offsetHeight/2+(g.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,y=m.querySelectorAll("."+f[e].classList[3])[0],C=y.offsetWidth/2+(y.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,x=y.offsetHeight/2+(y.getBoundingClientRect().y-i.getBoundingClientRect().y)*p;const n=l(C,x,w,v,o,"openclose");f[e].children[0].setAttributeNS(null,"d",n)}else{const n=f[e].querySelectorAll(".point");let o="";const m=[];n.forEach((e,d)=>{if(0===d&&n.length-1==0){var f=s.querySelector("#"+t),_=((x=e).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,g=(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,w=(L=f.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,v=L.offsetHeight/2+(L.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,y=l(w,v,_,g,a,"open");o+=y,m.push(y);f=e;var C=e.parentElement.classList[1].replace("node_in_",""),x=(E=s.querySelector("#"+C)).querySelectorAll("."+e.parentElement.classList[4])[0];_=(R=E.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(R.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,g=R.offsetHeight/2+(R.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,w=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,v=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,y=l(w,v,_,g,a,"close");o+=y,m.push(y)}else if(0===d){var L;f=s.querySelector("#"+t),_=((x=e).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,g=(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,w=(L=f.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,v=L.offsetHeight/2+(L.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,y=l(w,v,_,g,a,"open");o+=y,m.push(y);f=e,_=((x=n[d+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,g=(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,w=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,v=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,y=l(w,v,_,g,c,"other");o+=y,m.push(y)}else if(d===n.length-1){var E,R;f=e,C=e.parentElement.classList[1].replace("node_in_",""),x=(E=s.querySelector("#"+C)).querySelectorAll("."+e.parentElement.classList[4])[0],_=(R=E.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(R.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,g=R.offsetHeight/2+(R.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,w=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,v=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,y=l(w,v,_,g,a,"close");o+=y,m.push(y)}else{f=e,_=((x=n[d+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,g=(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,w=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*(i.clientWidth/(i.clientWidth*h))+r,v=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*(i.clientHeight/(i.clientHeight*h))+r,y=l(w,v,_,g,c,"other");o+=y,m.push(y)}}),d?m.forEach((t,n)=>{f[e].children[n].setAttributeNS(null,"d",t)}):f[e].children[0].setAttributeNS(null,"d",o)}}));const m=s.querySelectorAll("."+e);Object.keys(m).map((function(e,n){if(null===m[e].querySelector(".point")){var h=s.querySelector("#"+t),f=m[e].classList[2].replace("node_out_",""),_=s.querySelector("#"+f).querySelectorAll("."+m[e].classList[3])[0],g=_.offsetWidth/2+(_.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,w=_.offsetHeight/2+(_.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,v=(h=h.querySelectorAll("."+m[e].classList[4])[0]).offsetWidth/2+(h.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,y=h.offsetHeight/2+(h.getBoundingClientRect().y-i.getBoundingClientRect().y)*p;const n=l(g,w,v,y,o,"openclose");m[e].children[0].setAttributeNS(null,"d",n)}else{const n=m[e].querySelectorAll(".point");let o="";const h=[];n.forEach((e,d)=>{if(0===d&&n.length-1==0){var f=s.querySelector("#"+t),m=((C=e).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,_=(C.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,g=(E=f.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,w=E.offsetHeight/2+(E.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,v=l(m,_,g,w,a,"close");o+=v,h.push(v);f=e;var y=e.parentElement.classList[2].replace("node_out_",""),C=(L=s.querySelector("#"+y)).querySelectorAll("."+e.parentElement.classList[3])[0];m=(x=L.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,_=x.offsetHeight/2+(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,g=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,w=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,v=l(m,_,g,w,a,"open");o+=v,h.push(v)}else if(0===d){var x;f=e,y=e.parentElement.classList[2].replace("node_out_",""),C=(L=s.querySelector("#"+y)).querySelectorAll("."+e.parentElement.classList[3])[0],m=(x=L.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,_=x.offsetHeight/2+(x.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,g=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,w=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,v=l(m,_,g,w,a,"open");o+=v,h.push(v);f=e,g=((C=n[d+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,w=(C.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,m=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,_=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,v=l(m,_,g,w,c,"other");o+=v,h.push(v)}else if(d===n.length-1){var L,E;f=e,y=e.parentElement.classList[1].replace("node_in_",""),C=(L=s.querySelector("#"+y)).querySelectorAll("."+e.parentElement.classList[4])[0],g=(E=L.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-i.getBoundingClientRect().x)*u,w=E.offsetHeight/2+(E.getBoundingClientRect().y-i.getBoundingClientRect().y)*p,m=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,_=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,v=l(m,_,g,w,a,"close");o+=v,h.push(v)}else{f=e,g=((C=n[d+1]).getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,w=(C.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,m=(f.getBoundingClientRect().x-i.getBoundingClientRect().x)*u+r,_=(f.getBoundingClientRect().y-i.getBoundingClientRect().y)*p+r,v=l(m,_,g,w,c,"other");o+=v,h.push(v)}}),d?h.forEach((t,n)=>{m[e].children[n].setAttributeNS(null,"d",t)}):m[e].children[0].setAttributeNS(null,"d",o)}}))}dblclick(t){null!=this.connection_selected&&this.reroute&&this.createReroutePoint(this.connection_selected),"point"===t.target.classList[0]&&this.removeReroutePoint(t.target)}createReroutePoint(t){this.connection_selected.classList.remove("selected");const e=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 a=0;if(this.reroute_fix_curvature){const e=t.parentElement.querySelectorAll(".main-path").length;var d=document.createElementNS("http://www.w3.org/2000/svg","path");if(d.classList.add("main-path"),d.setAttributeNS(null,"d",""),t.parentElement.insertBefore(d,t.parentElement.children[e]),1===e)t.parentElement.appendChild(o);else{const n=Array.from(t.parentElement.children).indexOf(t);a=n,t.parentElement.insertBefore(o,t.parentElement.children[n+e+1])}}else t.parentElement.appendChild(o);const r=e.slice(5),h=this.drawflow.drawflow[this.module].data[r].outputs[s].connections.findIndex((function(t,e){return t.node===n&&t.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?(a>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.splice(a,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}),t.parentElement.querySelectorAll(".main-path").forEach((t,e)=>{t.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(e)}removeReroutePoint(t){const e=t.parentElement.classList[2].slice(9),n=t.parentElement.classList[1].slice(13),s=t.parentElement.classList[3],i=t.parentElement.classList[4];let o=Array.from(t.parentElement.children).indexOf(t);const l=e.slice(5),c=this.drawflow.drawflow[this.module].data[l].outputs[s].connections.findIndex((function(t,e){return t.node===n&&t.output===i}));if(this.reroute_fix_curvature){const e=t.parentElement.querySelectorAll(".main-path").length;t.parentElement.children[e-1].remove(),o-=e,o<0&&(o=0)}else o--;this.drawflow.drawflow[this.module].data[l].outputs[s].connections[c].points.splice(o,1),t.remove(),this.dispatch("removeReroute",l),this.updateConnectionNodes(e)}registerNode(t,e,n=null,s=null){this.noderegister[t]={html:e,props:n,options:s}}getNodeFromId(t){var e=this.getModuleFromNodeId(t);return JSON.parse(JSON.stringify(this.drawflow.drawflow[e].data[t]))}getNodesFromName(t){var e=[];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==t&&e.push(n[s].data[o].id)})),e}addNode(t,e,n,s,i,o,l,c,a=!1){if(this.useuuid)var d=this.getUuid();else d=this.nodeId;const r=document.createElement("div");r.classList.add("parent-node");const h=document.createElement("div");h.innerHTML="",h.setAttribute("id","node-"+d),h.classList.add("drawflow-node"),""!=o&&h.classList.add(...o.split(" "));const u=document.createElement("div");u.classList.add("inputs");const p=document.createElement("div");p.classList.add("outputs");const f={};if("number"==typeof e)for(var m=0;mt(this.noderegister[c].html,{props:this.noderegister[c].props}),...this.noderegister[c].options}).$mount();w.appendChild(t.$el)}Object.entries(l).forEach((function(t,e){if("object"==typeof t[1])!function t(e,n,s){if(null===e)e=l[n];else e=e[n];null!==e&&Object.entries(e).forEach((function(n,i){if("object"==typeof n[1])t(e,n[0],s+"-"+n[0]);else for(var o=w.querySelectorAll("[df-"+s+"-"+n[0]+"]"),l=0;le(this.noderegister[t.html].html,{props:this.noderegister[t.html].props}),...this.noderegister[t.html].options}).$mount();a.appendChild(e.$el)}t.data&&Object.entries(t.data).forEach((function(e,n){if("object"==typeof e[1])!function e(n,s,i){if(null===n)n=t.data[s];else n=n[s];null!==n&&Object.entries(n).forEach((function(t,s){if("object"==typeof t[1])e(n,t[0],i+"-"+t[0]);else for(var o=a.querySelectorAll("[df-"+i+"-"+t[0]+"]"),l=0;l{const d=t.outputs[i].connections[o].node,r=t.outputs[i].connections[o].output,h=s.querySelector(".connection.node_in_node-"+d+".node_out_node-"+t.id+"."+i+"."+r);if(n&&0===a)for(var u=0;u{this.removeSingleConnection(t.id_output,t.id,t.output_class,t.input_class)}),delete this.drawflow.drawflow[n].data[t].inputs[e];const o=[],l=this.drawflow.drawflow[n].data[t].inputs;Object.keys(l).map((function(t,e){o.push(l[t])})),this.drawflow.drawflow[n].data[t].inputs={};const c=e.slice(6);let a=[];if(o.forEach((e,s)=>{e.connections.forEach((t,e)=>{a.push(t)}),this.drawflow.drawflow[n].data[t].inputs["input_"+(s+1)]=e}),a=new Set(a.map(t=>JSON.stringify(t))),a=Array.from(a).map(t=>JSON.parse(t)),this.module===n){this.container.querySelectorAll("#node-"+t+" .inputs .input").forEach((t,e)=>{const n=t.classList[1].slice(6);parseInt(c){this.drawflow.drawflow[n].data[e.node].outputs[e.input].connections.forEach((s,i)=>{if(s.node==t){const o=s.output.slice(6);if(parseInt(c){this.removeSingleConnection(t.id,t.id_input,t.output_class,t.input_class)}),delete this.drawflow.drawflow[n].data[t].outputs[e];const o=[],l=this.drawflow.drawflow[n].data[t].outputs;Object.keys(l).map((function(t,e){o.push(l[t])})),this.drawflow.drawflow[n].data[t].outputs={};const c=e.slice(7);let a=[];if(o.forEach((e,s)=>{e.connections.forEach((t,e)=>{a.push({node:t.node,output:t.output})}),this.drawflow.drawflow[n].data[t].outputs["output_"+(s+1)]=e}),a=new Set(a.map(t=>JSON.stringify(t))),a=Array.from(a).map(t=>JSON.parse(t)),this.module===n){this.container.querySelectorAll("#node-"+t+" .outputs .output").forEach((t,e)=>{const n=t.classList[1].slice(7);parseInt(c){this.drawflow.drawflow[n].data[e.node].inputs[e.output].connections.forEach((s,i)=>{if(s.node==t){const o=s.input.slice(7);if(parseInt(c)-1){this.module===i&&this.container.querySelector(".connection.node_in_node-"+e+".node_out_node-"+t+"."+n+"."+s).remove();var o=this.drawflow.drawflow[i].data[t].outputs[n].connections.findIndex((function(t,n){return t.node==e&&t.output===s}));this.drawflow.drawflow[i].data[t].outputs[n].connections.splice(o,1);var l=this.drawflow.drawflow[i].data[e].inputs[s].connections.findIndex((function(e,s){return e.node==t&&e.input===n}));return this.drawflow.drawflow[i].data[e].inputs[s].connections.splice(l,1),this.dispatch("connectionRemoved",{output_id:t,input_id:e,output_class:n,input_class:s}),!0}return!1}return!1}removeConnectionNodeId(t){const e="node_in_"+t,n="node_out_"+t,s=this.container.querySelectorAll("."+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(t,e){return t.node===o[2].slice(14)&&t.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(t,e){return t.node===o[1].slice(13)&&t.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 a=this.container.querySelectorAll("."+e);for(i=a.length-1;i>=0;i--){o=a[i].classList,c=this.drawflow.drawflow[this.module].data[o[2].slice(14)].outputs[o[3]].connections.findIndex((function(t,e){return t.node===o[1].slice(13)&&t.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(t,e){return t.node===o[2].slice(14)&&t.input===o[3]}));this.drawflow.drawflow[this.module].data[o[1].slice(13)].inputs[o[4]].connections.splice(l,1),a[i].remove(),this.dispatch("connectionRemoved",{output_id:o[2].slice(14),input_id:o[1].slice(13),output_class:o[3],input_class:o[4]})}}getModuleFromNodeId(t){var e;const n=this.drawflow.drawflow;return Object.keys(n).map((function(s,i){Object.keys(n[s].data).map((function(n,i){n==t&&(e=s)}))})),e}addModule(t){this.drawflow.drawflow[t]={data:{}},this.dispatch("moduleCreated",t)}changeModule(t){this.dispatch("moduleChanged",t),this.module=t,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.zoom_last_value=1,this.precanvas.style.transform="",this.import(this.drawflow,!1)}removeModule(t){this.module===t&&this.changeModule("Home"),delete this.drawflow.drawflow[t],this.dispatch("moduleRemoved",t)}clearModuleSelected(){this.precanvas.innerHTML="",this.drawflow.drawflow[this.module]={data:{}}}clear(){this.precanvas.innerHTML="",this.drawflow={drawflow:{Home:{data:{}}}}}export(){const t=JSON.parse(JSON.stringify(this.drawflow));return this.dispatch("export",t),t}import(t,e=!0){this.clear(),this.drawflow=JSON.parse(JSON.stringify(t)),this.load(),e&&this.dispatch("import","import")}on(t,e){return"function"!=typeof e?(console.error("The listener callback must be a function, the given type is "+typeof e),!1):"string"!=typeof t?(console.error("The event name must be a string, the given type is "+typeof t),!1):(void 0===this.events[t]&&(this.events[t]={listeners:[]}),void this.events[t].listeners.push(e))}removeListener(t,e){if(!this.events[t])return!1;const n=this.events[t].listeners,s=n.indexOf(e);s>-1&&n.splice(s,1)}dispatch(t,e){if(void 0===this.events[t])return!1;this.events[t].listeners.forEach(t=>{t(e)})}getUuid(){for(var t=[],e=0;e<36;e++)t[e]="0123456789abcdef".substr(Math.floor(16*Math.random()),1);return t[14]="4",t[19]="0123456789abcdef".substr(3&t[19]|8,1),t[8]=t[13]=t[18]=t[23]="-",t.join("")}}}]).default})); \ No newline at end of file diff --git a/index.html b/index.html index d67eb62..aad62f2 100644 --- a/index.html +++ b/index.html @@ -59,6 +59,15 @@

Drawflow

DBClick!
+
+ Dog +
+
+ Bone +
+
+ Cat +
@@ -390,6 +399,33 @@

Drawflow

`; editor.addNode('dbclick', 1, 1, pos_x, pos_y, 'dbclick', { name: ''}, dbclick ); break; + case 'dog': + var dog = ` +
+
Dog
+
+ `; + editor.addNode('dog', 0, [{dataTypes: ['dog'], maxConnections: 1}], pos_x, pos_y, 'dog', {}, dog ); + break; + case 'bone': + var bone = ` +
+
Bone
+
+ Can eat from one dog +
+
+ `; + editor.addNode('bone', [{dataTypes: ['dog'], maxConnections: 1}], 0, pos_x, pos_y, 'bone', {}, bone ); + break; + case 'cat': + var cat = ` +
+
Cat
+
+ `; + editor.addNode('cat', 0, [{dataTypes: ['cat']}], pos_x, pos_y, 'cat', {}, cat ); + break; default: } diff --git a/src/drawflow.js b/src/drawflow.js index bcd70bf..1de5083 100644 --- a/src/drawflow.js +++ b/src/drawflow.js @@ -239,7 +239,8 @@ export default class Drawflow { this.removeReouteConnectionSelected(); this.connection_selected = null; } - this.drawConnection(e.target); + if (!this.drawConnection(e.target)) + this.connection = false; break; case 'parent-drawflow': if(this.node_selected != null) { @@ -468,8 +469,40 @@ export default class Drawflow { } var output_id = this.ele_selected.parentElement.parentElement.id; var output_class = this.ele_selected.classList[1]; + // Check allow datatype + var dataTypeAllow = true; + var maxConnections = 0; + for (var d = 2; d < ele_last.classList.length; d++) { + if (ele_last.classList[d].startsWith('dataType_')) { + dataTypeAllow = false; + if (this.ele_selected.classList.length > 2) { + for (var o = 2; o < this.ele_selected.classList.length; o++) { + if (ele_last.classList[d] === this.ele_selected.classList[o]) { + dataTypeAllow = true; + break; + } + } + if (dataTypeAllow) + break; + } + } + } + if (dataTypeAllow) { + if (ele_last.classList.value.includes("maxConnections_")) { + for (var d = 2; d < ele_last.classList.length; d++) { + if (ele_last.classList[d].startsWith('maxConnections_')) { + maxConnections = parseInt(ele_last.classList[d].substring(ele_last.classList[d].lastIndexOf('_') + 1), 10); + break; + } + } + var id_input = input_id.slice(5); + if (maxConnections > 0 && this.drawflow.drawflow[this.module].data[id_input].inputs[input_class].connections.length >= maxConnections) + dataTypeAllow = false; + } + } + - if(output_id !== input_id && input_class !== false) { + if(output_id !== input_id && input_class !== false && dataTypeAllow) { if(this.container.querySelectorAll('.connection.node_in_'+input_id+'.node_out_'+output_id+'.'+output_class+'.'+input_class).length === 0) { // Conection no exist save connection @@ -655,6 +688,19 @@ export default class Drawflow { } drawConnection(ele) { + var id_output = ele.parentElement.parentElement.id.slice(5); + var output_class = ele.classList[1]; + var maxConnections = 0; + if (ele.classList.value.includes("maxConnections_")) { + for (var d = 2; d < ele.classList.length; d++) { + if (ele.classList[d].startsWith('maxConnections_')) { + maxConnections = parseInt(ele.classList[d].substring(ele.classList[d].lastIndexOf('_') + 1), 10); + break; + } + } + if (maxConnections > 0 && this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].connections.length >= maxConnections) + return false; + } var connection = document.createElementNS('http://www.w3.org/2000/svg',"svg"); this.connection_ele = connection; var path = document.createElementNS('http://www.w3.org/2000/svg',"path"); @@ -664,10 +710,8 @@ export default class Drawflow { connection.classList.add("connection"); connection.appendChild(path); this.precanvas.appendChild(connection); - var id_output = ele.parentElement.parentElement.id.slice(5); - var output_class = ele.classList[1]; this.dispatch('connectionStart', { output_id: id_output, output_class: output_class }); - + return true; } updateConnection(eX, eY) { @@ -1202,21 +1246,57 @@ export default class Drawflow { outputs.classList.add("outputs"); const json_inputs = {} - for(var x = 0; x < num_in; x++) { - const input = document.createElement('div'); - input.classList.add("input"); - input.classList.add("input_"+(x+1)); - json_inputs["input_"+(x+1)] = { "connections": []}; - inputs.appendChild(input); + if (typeof num_in === 'number') { + for (var x = 0; x < num_in; x++) { + const input = document.createElement('div'); + input.classList.add("input"); + input.classList.add("input_" + (x + 1)); + json_inputs["input_" + (x + 1)] = {"connections": []}; + inputs.appendChild(input); + } + } else { + for (var x = 0; x < num_in.length; x++) { + const row = num_in[x]; + const input = document.createElement('div'); + input.classList.add("input"); + input.classList.add("input_" + (x + 1)); + if (row.dataTypes) { + for (var d of row.dataTypes) + input.classList.add("dataType_" + d); + } + if (row.maxConnections) { + input.classList.add("maxConnections_" + row.maxConnections); + } + json_inputs["input_" + (x + 1)] = {"connections": [], "dataTypes": row.dataTypes, "maxConnections": row.maxConnections}; + inputs.appendChild(input); + } } const json_outputs = {} - for(var x = 0; x < num_out; x++) { - const output = document.createElement('div'); - output.classList.add("output"); - output.classList.add("output_"+(x+1)); - json_outputs["output_"+(x+1)] = { "connections": []}; - outputs.appendChild(output); + if (typeof num_out === 'number') { + for (var x = 0; x < num_out; x++) { + const output = document.createElement('div'); + output.classList.add("output"); + output.classList.add("output_" + (x + 1)); + json_outputs["output_" + (x + 1)] = {"connections": []}; + outputs.appendChild(output); + } + } else { + for (var x = 0; x < num_out.length; x++) { + const row = num_out[x]; + const output = document.createElement('div'); + output.classList.add("output"); + output.classList.add("output_" + (x + 1)); + if (row.dataTypes) { + for (var d of row.dataTypes) + output.classList.add("dataType_" + d); + } + if (row.maxConnections) { + output.classList.add("maxConnections_" + row.maxConnections); + } + json_outputs["output_" + (x + 1)] = {"connections": [], "dataTypes": row.dataTypes, "maxConnections": row.maxConnections}; + outputs.appendChild(output); + } } const content = document.createElement('div'); @@ -1325,35 +1405,53 @@ export default class Drawflow { const outputs = document.createElement('div'); outputs.classList.add("outputs"); - Object.keys(dataNode.inputs).map(function(input_item, index) { - const input = document.createElement('div'); - input.classList.add("input"); - input.classList.add(input_item); - inputs.appendChild(input); - Object.keys(dataNode.inputs[input_item].connections).map(function(output_item, index) { + if (dataNode.inputs) { + Object.keys(dataNode.inputs).map(function (input_item, index) { + const input = document.createElement('div'); + input.classList.add("input"); + input.classList.add(input_item); + if (dataNode.inputs[input_item].dataTypes) { + for (var d of dataNode.inputs[input_item].dataTypes) + input.classList.add("dataType_" + d); + } + if (dataNode.inputs[input_item].maxConnections) { + input.classList.add("maxConnections_" + dataNode.inputs[input_item].maxConnections); + } + inputs.appendChild(input); + Object.keys(dataNode.inputs[input_item].connections).map(function (output_item, index) { - var connection = document.createElementNS('http://www.w3.org/2000/svg',"svg"); - var path = document.createElementNS('http://www.w3.org/2000/svg',"path"); - path.classList.add("main-path"); - path.setAttributeNS(null, 'd', ''); - // path.innerHTML = 'a'; - connection.classList.add("connection"); - connection.classList.add("node_in_node-"+dataNode.id); - connection.classList.add("node_out_node-"+dataNode.inputs[input_item].connections[output_item].node); - connection.classList.add(dataNode.inputs[input_item].connections[output_item].input); - connection.classList.add(input_item); + var connection = document.createElementNS('http://www.w3.org/2000/svg', "svg"); + var path = document.createElementNS('http://www.w3.org/2000/svg', "path"); + path.classList.add("main-path"); + path.setAttributeNS(null, 'd', ''); + // path.innerHTML = 'a'; + connection.classList.add("connection"); + connection.classList.add("node_in_node-" + dataNode.id); + connection.classList.add("node_out_node-" + dataNode.inputs[input_item].connections[output_item].node); + connection.classList.add(dataNode.inputs[input_item].connections[output_item].input); + connection.classList.add(input_item); - connection.appendChild(path); - precanvas.appendChild(connection); + connection.appendChild(path); + precanvas.appendChild(connection); + }); }); - }); + } - for(var x = 0; x < Object.keys(dataNode.outputs).length; x++) { - const output = document.createElement('div'); - output.classList.add("output"); - output.classList.add("output_"+(x+1)); - outputs.appendChild(output); + if (dataNode.outputs) { + for (var x = 0; x < Object.keys(dataNode.outputs).length; x++) { + const output = document.createElement('div'); + output.classList.add("output"); + output.classList.add("output_" + (x + 1)); + if (dataNode.outputs["output_" + (x + 1)].dataTypes) { + for (var d of dataNode.outputs["output_" + (x + 1)].dataTypes) + output.classList.add("dataType_" + d); + } + if (dataNode.outputs["output_" + (x + 1)].maxConnections) { + output.classList.add("maxConnections_" + dataNode.outputs["output_" + (x + 1)].maxConnections); + } + outputs.appendChild(output); + } } const content = document.createElement('div'); @@ -1381,19 +1479,21 @@ export default class Drawflow { } } - Object.entries(dataNode.data).forEach(function (key, value) { - if(typeof key[1] === "object") { - insertObjectkeys(null, key[0], key[0]); - } else { - var elems = content.querySelectorAll('[df-'+key[0]+']'); - for(var i = 0; i < elems.length; i++) { + if (dataNode.data) { + Object.entries(dataNode.data).forEach(function (key, value) { + if (typeof key[1] === "object") { + insertObjectkeys(null, key[0], key[0]); + } else { + var elems = content.querySelectorAll('[df-' + key[0] + ']'); + for (var i = 0; i < elems.length; i++) { elems[i].value = key[1]; - if(elems[i].isContentEditable) { + if (elems[i].isContentEditable) { elems[i].innerText = key[1]; } } - } - }) + } + }); + } function insertObjectkeys(object, name, completname) { if(object === null) { @@ -1430,42 +1530,44 @@ export default class Drawflow { const reroute_width = this.reroute_width const reroute_fix_curvature = this.reroute_fix_curvature const container = this.container; - Object.keys(dataNode.outputs).map(function(output_item, index) { - Object.keys(dataNode.outputs[output_item].connections).map(function(input_item, index) { - const points = dataNode.outputs[output_item].connections[input_item].points - if(points !== undefined) { - - points.forEach((item, i) => { - const input_id = dataNode.outputs[output_item].connections[input_item].node; - const input_class = dataNode.outputs[output_item].connections[input_item].output; - const ele = container.querySelector('.connection.node_in_node-'+input_id+'.node_out_node-'+dataNode.id+'.'+output_item+'.'+input_class); - - if(reroute_fix_curvature) { - if(i === 0) { - for (var z = 0; z < points.length; z++) { - var path = document.createElementNS('http://www.w3.org/2000/svg',"path"); - path.classList.add("main-path"); - path.setAttributeNS(null, 'd', ''); - ele.appendChild(path); + if (dataNode.outputs) { + Object.keys(dataNode.outputs).map(function (output_item, index) { + Object.keys(dataNode.outputs[output_item].connections).map(function (input_item, index) { + const points = dataNode.outputs[output_item].connections[input_item].points + if (points !== undefined) { + + points.forEach((item, i) => { + const input_id = dataNode.outputs[output_item].connections[input_item].node; + const input_class = dataNode.outputs[output_item].connections[input_item].output; + const ele = container.querySelector('.connection.node_in_node-' + input_id + '.node_out_node-' + dataNode.id + '.' + output_item + '.' + input_class); + + if (reroute_fix_curvature) { + if (i === 0) { + for (var z = 0; z < points.length; z++) { + var path = document.createElementNS('http://www.w3.org/2000/svg', "path"); + path.classList.add("main-path"); + path.setAttributeNS(null, 'd', ''); + ele.appendChild(path); + } } } - } - const point = document.createElementNS('http://www.w3.org/2000/svg',"circle"); - point.classList.add("point"); - var pos_x = item.pos_x; - var pos_y = item.pos_y; + const point = document.createElementNS('http://www.w3.org/2000/svg', "circle"); + point.classList.add("point"); + var pos_x = item.pos_x; + var pos_y = item.pos_y; - point.setAttributeNS(null, 'cx', pos_x); - point.setAttributeNS(null, 'cy', pos_y); - point.setAttributeNS(null, 'r', reroute_width); + point.setAttributeNS(null, 'cx', pos_x); + point.setAttributeNS(null, 'cy', pos_y); + point.setAttributeNS(null, 'r', reroute_width); - ele.appendChild(point); - }); - }; + ele.appendChild(point); + }); + } + }); }); - }); + } } updateNodeValue(event) { @@ -1535,7 +1637,7 @@ export default class Drawflow { } } - addNodeInput(id) { + addNodeInput(id, inputData) { var moduleName = this.getModuleFromNodeId(id) const infoNode = this.getNodeFromId(id) const numInputs = Object.keys(infoNode.inputs).length; @@ -1544,15 +1646,29 @@ export default class Drawflow { const input = document.createElement('div'); input.classList.add("input"); input.classList.add("input_"+(numInputs+1)); + if (inputData && inputData.dataTypes) { + for (var d of inputData.dataTypes) + input.classList.add("dataType_" + d); + } + if (inputData && inputData.maxConnections) { + input.classList.add("maxConnections_" + inputData.maxConnections); + } const parent = this.container.querySelector('#node-'+id+' .inputs'); parent.appendChild(input); this.updateConnectionNodes('node-'+id); } - this.drawflow.drawflow[moduleName].data[id].inputs["input_"+(numInputs+1)] = { "connections": []}; + const doc = { "connections": []}; + if (inputData) { + if (inputData.dataTypes) + doc.dataTypes = inputData.dataTypes; + if (inputData.maxConnections) + doc.maxConnections = inputData.maxConnections; + } + this.drawflow.drawflow[moduleName].data[id].inputs["input_"+(numInputs+1)] = doc; } - addNodeOutput(id) { + addNodeOutput(id, outputData) { var moduleName = this.getModuleFromNodeId(id) const infoNode = this.getNodeFromId(id) const numOutputs = Object.keys(infoNode.outputs).length; @@ -1561,12 +1677,26 @@ export default class Drawflow { const output = document.createElement('div'); output.classList.add("output"); output.classList.add("output_"+(numOutputs+1)); + if (outputData && outputData.dataTypes) { + for (var d of outputData.dataTypes) + output.classList.add("dataType_" + d); + } + if (outputData && outputData.maxConnections) { + output.classList.add("maxConnections_" + outputData.maxConnections); + } const parent = this.container.querySelector('#node-'+id+' .outputs'); parent.appendChild(output); this.updateConnectionNodes('node-'+id); } - this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = { "connections": []}; + const doc = { "connections": []}; + if (outputData) { + if (outputData.dataTypes) + doc.dataTypes = outputData.dataTypes; + if (outputData.maxConnections) + doc.maxConnections = outputData.maxConnections; + } + this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = doc; } removeNodeInput(id, input_class) {