diff --git a/dist/drawflow.min.css b/dist/drawflow.min.css index 821ba26..7f026db 100644 --- a/dist/drawflow.min.css +++ b/dist/drawflow.min.css @@ -1 +1 @@ -.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none}.drawflow .drawflow-node{display:flex;align-items:center;position:absolute;background:#0ff;width:160px;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;padding:15px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node .inputs,.drawflow .drawflow-node .outputs{width:0}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-27px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-3px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;transform:translate(9999px,9999px)}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;transform:translate(-9999px,-9999px)}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;transform:translate(-9999px,-9999px)}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow .selectbox{z-index:3;position:absolute;transform:translate(9999px,9999px)}.drawflow .selectbox rect{fill:#00f;opacity:.5;stroke:#ff0;stroke-width:5;stroke-opacity:.5;transform:translate(-9999px,-9999px)}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px} \ No newline at end of file +.drawflow,.drawflow .parent-node{position:relative}.parent-drawflow{display:flex;overflow:hidden;touch-action:none;outline:0}.drawflow{width:100%;height:100%;user-select:none}.drawflow .drawflow-node{display:inline-flex;flex-direction:column;position:absolute;background:#0ff;min-height:40px;border-radius:4px;border:2px solid #000;color:#000;z-index:2;min-width:200px}.drawflow .drawflow-node.selected{background:red}.drawflow .drawflow-node:hover{cursor:move}.drawflow .drawflow-node.collapsed-head .drawflow-node-header{position:absolute;width:100%;height:100%;display:grid;align-items:center;background-color:#0ff}.drawflow .drawflow-node .drawflow-node-content{display:inline-flex;flex-grow:2;max-width:600px}.drawflow .drawflow-node .drawflow-node-content .inputs{text-align:left;padding:10px 0;display:grid;grid-template-columns:15px auto}.drawflow .drawflow-node .drawflow-node-content .outputs{text-align:right;padding:10px 0;display:grid;grid-template-columns:auto 15px}.drawflow .drawflow-node .drawflow_content_node{width:100%;display:block}.drawflow .drawflow-node .input-label{width:max-content;z-index:1;padding-left:5px}.drawflow .drawflow-node .output-label{width:max-content;z-index:1;padding-right:5px;justify-self:end}.drawflow .drawflow-node .input-dummy,.drawflow .drawflow-node .output-dummy{min-width:15px}.drawflow .drawflow-node .input,.drawflow .drawflow-node .output{position:relative;width:20px;height:20px;background:#fff;border-radius:50%;border:2px solid #000;cursor:crosshair;z-index:1;margin-bottom:5px}.drawflow .drawflow-node .input{left:-10px;top:2px;background:#ff0}.drawflow .drawflow-node .output{right:-10px;top:2px}.drawflow svg{z-index:0;position:absolute;overflow:visible!important}.drawflow .connection{position:absolute;transform:translate(9999px,9999px)}.drawflow .connection .main-path{fill:none;stroke-width:5px;stroke:#4682b4;transform:translate(-9999px,-9999px)}.drawflow .connection .main-path:hover{stroke:#1266ab;cursor:pointer}.drawflow .connection .main-path.selected{stroke:#43b993}.drawflow .connection .point{cursor:move;stroke:#000;stroke-width:2;fill:#fff;transform:translate(-9999px,-9999px)}.drawflow .connection .point.selected,.drawflow .connection .point:hover{fill:#1266ab}.drawflow .main-path{fill:none;stroke-width:5px;stroke:#4682b4}.drawflow .selectbox{z-index:3;position:absolute;transform:translate(9999px,9999px)}.drawflow .selectbox rect{fill:#00f;opacity:.5;stroke:#ff0;stroke-width:5;stroke-opacity:.5;transform:translate(-9999px,-9999px)}.drawflow-delete{position:absolute;display:block;width:30px;height:30px;background:#000;color:#fff;z-index:4;border:2px solid #fff;line-height:30px;font-weight:700;text-align:center;border-radius:50%;font-family:monospace;cursor:pointer}.drawflow>.drawflow-delete{margin-left:-15px;margin-top:15px}.parent-node .drawflow-delete{right:-15px;top:-15px} \ No newline at end of file diff --git a/dist/drawflow.min.js b/dist/drawflow.min.js index cb3572a..c3a2113 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_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.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.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("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"),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;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),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&&(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)}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)}"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.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.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"===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"}var l=this.ele_selected.parentElement.parentElement.id,c=this.ele_selected.classList[1];if(l!==i&&!1!==o){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.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}contextmenu(e){if(this.dispatch("contextmenu",e),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(this.dispatch("keydown",e),"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.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,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);var s=e.parentElement.parentElement.id.slice(5),i=e.classList[1];this.dispatch("connectionStart",{output_id:s,output_class:i})}updateConnection(e,t){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,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,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.toString(),output:s}),this.drawflow.drawflow[i].data[t].inputs[s].connections.push({node:e.toString(),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;this.line_path;const s=this.precanvas,i=this.curvature,o=this.createCurvature,l=this.reroute_curvature,c=this.reroute_curvature_start_end,d=this.reroute_fix_curvature,a=this.reroute_width,r=this.zoom;let h=s.clientWidth/(s.clientWidth*r);h=h||0;let u=s.clientHeight/(s.clientHeight*r);u=u||0;const p=document.getElementsByClassName(n);Object.keys(p).map((function(t,n){if(null===p[t].querySelector(".point")){var f=document.getElementById(e),m=p[t].classList[1].replace("node_in_",""),g=document.getElementById(m).querySelectorAll("."+p[t].classList[4])[0],_=g.offsetWidth/2+(g.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,w=g.offsetHeight/2+(g.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,v=f.querySelectorAll("."+p[t].classList[3])[0],y=v.offsetWidth/2+(v.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,C=v.offsetHeight/2+(v.getBoundingClientRect().y-s.getBoundingClientRect().y)*u;const n=o(y,C,_,w,i,"openclose");p[t].children[0].setAttributeNS(null,"d",n)}else{const n=p[t].querySelectorAll(".point");let i="";const f=[];n.forEach((t,d)=>{if(0===d&&n.length-1==0){var p=document.getElementById(e),m=((C=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,_=(x=p.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,w=x.offsetHeight/2+(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,v=o(_,w,m,g,c,"open");i+=v,f.push(v);p=t;var y=t.parentElement.classList[1].replace("node_in_",""),C=(E=document.getElementById(y)).querySelectorAll("."+t.parentElement.classList[4])[0];m=(L=E.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,g=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,v=o(_,w,m,g,c,"close");i+=v,f.push(v)}else if(0===d){var x;p=document.getElementById(e),m=((C=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,_=(x=p.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(x.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,w=x.offsetHeight/2+(x.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,v=o(_,w,m,g,c,"open");i+=v,f.push(v);p=t,m=((C=n[d+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,v=o(_,w,m,g,l,"other");i+=v,f.push(v)}else if(d===n.length-1){var E,L;p=t,y=t.parentElement.classList[1].replace("node_in_",""),C=(E=document.getElementById(y)).querySelectorAll("."+t.parentElement.classList[4])[0],m=(L=E.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,g=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,v=o(_,w,m,g,c,"close");i+=v,f.push(v)}else{p=t,m=((C=n[d+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,v=o(_,w,m,g,l,"other");i+=v,f.push(v)}}),d?f.forEach((e,n)=>{p[t].children[n].setAttributeNS(null,"d",e)}):p[t].children[0].setAttributeNS(null,"d",i)}}));const f=document.getElementsByClassName(t);Object.keys(f).map((function(t,n){if(null===f[t].querySelector(".point")){var r=document.getElementById(e),p=f[t].classList[2].replace("node_out_",""),m=document.getElementById(p).querySelectorAll("."+f[t].classList[3])[0],g=m.offsetWidth/2+(m.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,_=m.offsetHeight/2+(m.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,w=(r=r.querySelectorAll("."+f[t].classList[4])[0]).offsetWidth/2+(r.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,v=r.offsetHeight/2+(r.getBoundingClientRect().y-s.getBoundingClientRect().y)*u;const n=o(g,_,w,v,i,"openclose");f[t].children[0].setAttributeNS(null,"d",n)}else{const n=f[t].querySelectorAll(".point");let i="";const r=[];n.forEach((t,d)=>{if(0===d&&n.length-1==0){var p=document.getElementById(e),f=((y=t).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,m=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,g=(E=p.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,_=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,w=o(f,m,g,_,c,"close");i+=w,r.push(w);p=t;var v=t.parentElement.classList[2].replace("node_out_",""),y=(x=document.getElementById(v)).querySelectorAll("."+t.parentElement.classList[3])[0];f=(C=x.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(C.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,m=C.offsetHeight/2+(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,g=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,_=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,w=o(f,m,g,_,c,"open");i+=w,r.push(w)}else if(0===d){var C;p=t,v=t.parentElement.classList[2].replace("node_out_",""),y=(x=document.getElementById(v)).querySelectorAll("."+t.parentElement.classList[3])[0],f=(C=x.querySelectorAll("."+t.parentElement.classList[3])[0]).offsetWidth/2+(C.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,m=C.offsetHeight/2+(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,g=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,_=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,w=o(f,m,g,_,c,"open");i+=w,r.push(w);p=t,g=((y=n[d+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,_=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,f=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,m=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,w=o(f,m,g,_,l,"other");i+=w,r.push(w)}else if(d===n.length-1){var x,E;p=t,v=t.parentElement.classList[1].replace("node_in_",""),y=(x=document.getElementById(v)).querySelectorAll("."+t.parentElement.classList[4])[0],g=(E=x.querySelectorAll("."+t.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*h,_=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*u,f=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,m=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,w=o(f,m,g,_,c,"close");i+=w,r.push(w)}else{p=t,g=((y=n[d+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,_=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,f=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*h+a,m=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*u+a,w=o(f,m,g,_,l,"other");i+=w,r.push(w)}}),d?r.forEach((e,n)=>{f[t].children[n].setAttributeNS(null,"d",e)}):f[t].children[0].setAttributeNS(null,"d",i)}}))}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){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);const u=document.createElement("div");u.classList.add("inputs");const p=document.createElement("div");p.classList.add("outputs");const f={};for(var m=0;mthis.render.h(this.noderegister[c].html,this.noderegister[c].props,this.noderegister[c].options)}).mount(_)}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];null!==t&&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;cthis.render.h(this.noderegister[e.html].html,this.noderegister[e.html].props,this.noderegister[e.html].options)}).mount(c)}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];null!==n&&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{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{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);parseInt(c){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(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,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);parseInt(c){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(parseInt(c)-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.zoom_last_value=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(){const e=JSON.parse(JSON.stringify(this.drawflow));return this.dispatch("export",e),e}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)})}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 +export default class Drawflow{constructor(t,e=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.checkInOutType=!1,this.singleConnectionForTypedInput=!1,this.select_elements=null,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("parent-drawflow"!==t.target.classList[0]&&"drawflow"!==t.target.classList[0])return!1;this.ele_selected=t.target.closest(".parent-drawflow")}else this.first_click=t.target,this.ele_selected=t.target,0===t.button&&this.contextmenuDel(),null==t.target.closest(".output")&&null==t.target.closest(".input")&&null==t.target.closest(".connection")&&null!=t.target.closest(".drawflow-node")&&(this.ele_selected=t.target.closest(".drawflow-node"));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);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;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),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){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),d=this.ele_selected.parentElement.classList[1].slice(13),c=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)<0&&(r=0)}const u=t.slice(5),h=this.drawflow.drawflow[this.module].data[u].outputs[c].connections.findIndex(function(t,e){return t.node===d&&t.output===a});this.drawflow.drawflow[this.module].data[u].outputs[c].connections[h].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(null!=this.select_elements&&(this.select_elements.remove(),this.select_elements=null),"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.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.closest(".drawflow-node").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"}var l=this.ele_selected.closest(".drawflow-node").id,d=this.ele_selected.classList[1];if(l!==i&&!1!==o){if(0===this.container.querySelectorAll(".connection.node_in_"+i+".node_out_"+l+"."+d+"."+o).length){var c=i.slice(5),a=l.slice(5);if(this.checkInOutType&&this.checkConnectionTypes(c,o,a,d)||!this.checkInOutType){var r=!1;if(this.drawflow.drawflow[this.module].data[c].inputs[o].type&&this.singleConnectionForTypedInput&&this.container.querySelectorAll(".node_in_"+i+"."+o).length>0&&(r=!0),r)console.log("There is already an output linked to the input: "+o+" for node: "+c),this.dispatch("connectionCancel",!0),this.connection_ele.remove();else{this.connection_ele.classList.add("node_in_"+i),this.connection_ele.classList.add("node_out_"+l),this.connection_ele.classList.add(d),this.connection_ele.classList.add(o),this.connection_ele.setAttribute("type",this.drawflow.drawflow[this.module].data[a].outputs[d].type),this.drawflow.drawflow[this.module].data[a].outputs[d].connections.push({node:c,output:o}),this.drawflow.drawflow[this.module].data[c].inputs[o].connections.push({node:a,input:d});var u=document.querySelector("#"+l+" ."+d);u&&!u.classList.contains("linked")&&u.classList.add("linked");var h=document.querySelector("#"+i+" ."+o);h&&!h.classList.contains("linked")&&h.classList.add("linked"),this.updateConnectionNodes("node-"+a),this.updateConnectionNodes("node-"+c),this.dispatch("connectionCreated",{output_id:a,input_id:c,output_class:d,input_class:o})}}else console.log("Input and output type don't match"),this.dispatch("connectionCancel",!0),this.connection_ele.remove()}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}checkConnectionTypes(t,e,n,s){return this.drawflow.drawflow[this.module].data[n].outputs[s].type==this.drawflow.drawflow[this.module].data[t].inputs[e].type}contextmenu(t){if(this.dispatch("contextmenu",t),t.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 e=document.createElement("div");e.classList.add("drawflow-delete"),e.innerHTML="x",this.node_selected&&this.node_selected.appendChild(e),this.connection_selected&&(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)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,d=e,c=n,a=s,r=i;switch(o){case"open":if(t>=n)var u=l+Math.abs(c-l)*r,h=c-Math.abs(c-l)*(-1*r);else u=l+Math.abs(c-l)*r,h=c-Math.abs(c-l)*r;return" M "+l+" "+d+" C "+u+" "+d+" "+h+" "+a+" "+c+" "+a;case"close":if(t>=n)u=l+Math.abs(c-l)*(-1*r),h=c-Math.abs(c-l)*r;else u=l+Math.abs(c-l)*r,h=c-Math.abs(c-l)*r;return" M "+l+" "+d+" C "+u+" "+d+" "+h+" "+a+" "+c+" "+a;case"other":if(t>=n)u=l+Math.abs(c-l)*(-1*r),h=c-Math.abs(c-l)*(-1*r);else u=l+Math.abs(c-l)*r,h=c-Math.abs(c-l)*r;return" M "+l+" "+d+" C "+u+" "+d+" "+h+" "+a+" "+c+" "+a;default:return" M "+l+" "+d+" C "+(u=l+Math.abs(c-l)*r)+" "+d+" "+(h=c-Math.abs(c-l)*r)+" "+a+" "+c+" "+a}}drawConnection(t){var e=document.createElementNS("http://www.w3.org/2000/svg","svg");this.connection_ele=e;var n=document.createElementNS("http://www.w3.org/2000/svg","path");n.classList.add("main-path"),n.setAttributeNS(null,"d",""),e.classList.add("connection"),e.appendChild(n),this.precanvas.appendChild(e);var s=t.closest(".drawflow-node").id.slice(5),i=t.classList[1];e.setAttribute("type",this.drawflow.drawflow[this.module].data[s].outputs[i].type),this.dispatch("connectionStart",{output_id:s,output_class:i})}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],d=this.ele_selected.offsetWidth/2+(this.ele_selected.getBoundingClientRect().x-n.getBoundingClientRect().x)*i,c=this.ele_selected.offsetHeight/2+(this.ele_selected.getBoundingClientRect().y-n.getBoundingClientRect().y)*o,a=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)),u=this.curvature,h=this.createCurvature(d,c,a,r,u,"openclose");l.setAttributeNS(null,"d",h)}addConnection(t,e,n,s){var i=this.getModuleFromNodeId(t);if(i===this.getModuleFromNodeId(e)){var o=this.getNodeFromId(t),l=!1;for(var d in o.outputs[n].connections){var c=o.outputs[n].connections[d];c.node==e&&c.output==s&&(l=!0)}if(!1===l&&(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))if(this.checkInOutType&&this.checkConnectionTypes(e,s,t,n)||!this.checkInOutType){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-"+e),a.classList.add("node_out_node-"+t),a.classList.add(n),a.classList.add(s),a.setAttribute("type",this.drawflow.drawflow[this.module].data[t].outputs[n].type),a.appendChild(r);var u=document.querySelector("#node-"+t+" ."+n);u&&!u.classList.contains("linked")&&u.classList.add("linked");var h=document.querySelector("#node-"+e+" ."+s);h&&!h.classList.contains("linked")&&h.classList.add("linked"),this.precanvas.appendChild(a),this.updateConnectionNodes("node-"+t),this.updateConnectionNodes("node-"+e),this.dispatch("connectionCreated",{output_id:t,input_id:e,output_class:n,input_class:s})}else console.log("Input "+e+s+" and ouput "+t+n+" types don't match")}}updateConnectionNodes(t){const e="node_in_"+t,n="node_out_"+t;this.line_path;const s=this.precanvas,i=this.curvature,o=this.createCurvature,l=this.reroute_curvature,d=this.reroute_curvature_start_end,c=this.reroute_fix_curvature,a=this.reroute_width,r=this.zoom;let u=s.clientWidth/(s.clientWidth*r);u=u||0;let h=s.clientHeight/(s.clientHeight*r);h=h||0;const p=document.getElementsByClassName(n);Object.keys(p).map(function(e,n){if(null===p[e].querySelector(".point")){var m=document.getElementById(t),f=p[e].classList[1].replace("node_in_",""),g=document.getElementById(f).querySelectorAll("."+p[e].classList[4])[0],_=g.offsetWidth/2+(g.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=g.offsetHeight/2+(g.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,v=m.querySelectorAll("."+p[e].classList[3])[0],y=v.offsetWidth/2+(v.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,C=v.offsetHeight/2+(v.getBoundingClientRect().y-s.getBoundingClientRect().y)*h;const n=o(y,C,_,w,i,"openclose");p[e].children[0].setAttributeNS(null,"d",n)}else{const n=p[e].querySelectorAll(".point");let i="";const m=[];n.forEach((e,c)=>{if(0===c&&n.length-1==0){var p=document.getElementById(t),f=((C=e).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,_=(L=p.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,v=o(_,w,f,g,d,"open");i+=v,m.push(v);p=e;var y=e.parentElement.classList[1].replace("node_in_",""),C=(E=document.getElementById(y)).querySelectorAll("."+e.parentElement.classList[4])[0];f=(b=E.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(b.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,g=b.offsetHeight/2+(b.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,v=o(_,w,f,g,d,"close");i+=v,m.push(v)}else if(0===c){var L;p=document.getElementById(t),f=((C=e).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,_=(L=p.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(L.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,w=L.offsetHeight/2+(L.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,v=o(_,w,f,g,d,"open");i+=v,m.push(v);p=e,f=((C=n[c+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,v=o(_,w,f,g,l,"other");i+=v,m.push(v)}else if(c===n.length-1){var E,b;p=e,y=e.parentElement.classList[1].replace("node_in_",""),C=(E=document.getElementById(y)).querySelectorAll("."+e.parentElement.classList[4])[0],f=(b=E.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(b.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,g=b.offsetHeight/2+(b.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,v=o(_,w,f,g,d,"close");i+=v,m.push(v)}else{p=e,f=((C=n[c+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,g=(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,_=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*(s.clientWidth/(s.clientWidth*r))+a,w=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*(s.clientHeight/(s.clientHeight*r))+a,v=o(_,w,f,g,l,"other");i+=v,m.push(v)}}),c?m.forEach((t,n)=>{p[e].children[n].setAttributeNS(null,"d",t)}):p[e].children[0].setAttributeNS(null,"d",i)}});const m=document.getElementsByClassName(e);Object.keys(m).map(function(e,n){if(null===m[e].querySelector(".point")){var r=document.getElementById(t),p=m[e].classList[2].replace("node_out_",""),f=document.getElementById(p).querySelectorAll("."+m[e].classList[3])[0],g=f.offsetWidth/2+(f.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,_=f.offsetHeight/2+(f.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,w=(r=r.querySelectorAll("."+m[e].classList[4])[0]).offsetWidth/2+(r.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,v=r.offsetHeight/2+(r.getBoundingClientRect().y-s.getBoundingClientRect().y)*h;const n=o(g,_,w,v,i,"openclose");m[e].children[0].setAttributeNS(null,"d",n)}else{const n=m[e].querySelectorAll(".point");let i="";const r=[];n.forEach((e,c)=>{if(0===c&&n.length-1==0){var p=document.getElementById(t),m=((y=e).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,f=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,g=(E=p.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,_=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,w=o(m,f,g,_,d,"close");i+=w,r.push(w);p=e;var v=e.parentElement.classList[2].replace("node_out_",""),y=(L=document.getElementById(v)).querySelectorAll("."+e.parentElement.classList[3])[0];m=(C=L.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(C.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,f=C.offsetHeight/2+(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,g=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,_=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,w=o(m,f,g,_,d,"open");i+=w,r.push(w)}else if(0===c){var C;p=e,v=e.parentElement.classList[2].replace("node_out_",""),y=(L=document.getElementById(v)).querySelectorAll("."+e.parentElement.classList[3])[0],m=(C=L.querySelectorAll("."+e.parentElement.classList[3])[0]).offsetWidth/2+(C.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,f=C.offsetHeight/2+(C.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,g=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,_=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,w=o(m,f,g,_,d,"open");i+=w,r.push(w);p=e,g=((y=n[c+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,_=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,m=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,f=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,w=o(m,f,g,_,l,"other");i+=w,r.push(w)}else if(c===n.length-1){var L,E;p=e,v=e.parentElement.classList[1].replace("node_in_",""),y=(L=document.getElementById(v)).querySelectorAll("."+e.parentElement.classList[4])[0],g=(E=L.querySelectorAll("."+e.parentElement.classList[4])[0]).offsetWidth/2+(E.getBoundingClientRect().x-s.getBoundingClientRect().x)*u,_=E.offsetHeight/2+(E.getBoundingClientRect().y-s.getBoundingClientRect().y)*h,m=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,f=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,w=o(m,f,g,_,d,"close");i+=w,r.push(w)}else{p=e,g=((y=n[c+1]).getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,_=(y.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,m=(p.getBoundingClientRect().x-s.getBoundingClientRect().x)*u+a,f=(p.getBoundingClientRect().y-s.getBoundingClientRect().y)*h+a,w=o(m,f,g,_,l,"other");i+=w,r.push(w)}}),c?r.forEach((t,n)=>{m[e].children[n].setAttributeNS(null,"d",t)}):m[e].children[0].setAttributeNS(null,"d",i)}})}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)),d=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",d),o.setAttributeNS(null,"r",this.reroute_width);let c=0;if(this.reroute_fix_curvature){const e=t.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",""),t.parentElement.insertBefore(a,t.parentElement.children[e]),1===e)t.parentElement.appendChild(o);else{const n=Array.from(t.parentElement.children).indexOf(t);c=n,t.parentElement.insertBefore(o,t.parentElement.children[n+e+1])}}else t.parentElement.appendChild(o);const r=e.slice(5),u=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[u].points&&(this.drawflow.drawflow[this.module].data[r].outputs[s].connections[u].points=[]),this.reroute_fix_curvature?(c>0?this.drawflow.drawflow[this.module].data[r].outputs[s].connections[u].points.splice(c,0,{pos_x:l,pos_y:d}):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[u].points.push({pos_x:l,pos_y:d}),t.parentElement.querySelectorAll(".main-path").forEach((t,e)=>{t.classList.remove("selected")})):this.drawflow.drawflow[this.module].data[r].outputs[s].connections[u].points.push({pos_x:l,pos_y:d}),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)-1;const l=e.slice(5),d=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)<0&&(o=0)}this.drawflow.drawflow[this.module].data[l].outputs[s].connections[d].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,d,c=!1){const a=[];for(var r=0;rthis.render.h(this.noderegister[d.html].html,this.noderegister[d.html].props,this.noderegister[d.html].options)}).mount(v)}else{let t=new this.render({render:t=>t(this.noderegister[d.html].html,{props:this.noderegister[d.html].props}),...this.noderegister[d.html].options}).$mount();v.appendChild(t.$el)}Object.entries(l).forEach(function(t,e){if("object"==typeof t[1])!function t(e,n,s){if(null===e)var e=l[n];else var e=e[n];null!==e&&Object.entries(e).forEach(function(i,o){if("object"==typeof i[1])t(e,i[0],n+"-"+i[0]);else for(var l=v.querySelectorAll("[df-"+s+"-"+i[0]+"]"),d=0;d0&&i.classList.add("linked"),l.appendChild(i);const o=document.createElement("div");o.classList.add("input-label"),o.classList.add("input-label_input_"+s++),t.inputs[n].type&&o.setAttribute("type",t.inputs[n].type),t.inputs[n].label&&(o.innerHTML=t.inputs[n].label),l.appendChild(o),Object.keys(t.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-"+t.id),o.classList.add("node_out_node-"+t.inputs[n].connections[s].node),o.classList.add(t.inputs[n].connections[s].input),o.classList.add(n),o.setAttribute("type",t.inputs[n].type),o.appendChild(l),e.appendChild(o)})});const c=document.createElement("div");c.classList.add("input-dummy"),l.appendChild(c),Object.keys(t.outputs).map(function(e,n){const s=document.createElement("div");s.classList.add("output-label"),s.classList.add("output-label_output_"+n++),t.outputs[e].type&&s.setAttribute("type",t.outputs[e].type),t.outputs[e].label&&(s.innerHTML=t.outputs[e].label),d.appendChild(s);const i=document.createElement("div");i.classList.add("output"),i.classList.add(e),t.outputs[e].type&&i.setAttribute("type",t.outputs[e].type),t.outputs[e].connections.length>0&&i.classList.add("linked"),d.appendChild(i)});const a=document.createElement("div");a.classList.add("output-dummy"),d.appendChild(a);const r=document.createElement("div");if(r.classList.add("drawflow_content_node"),!1===t.typenode)r.innerHTML=t.html;else if(!0===t.typenode)r.appendChild(this.noderegister[t.html].html.cloneNode(!0));else if(3===parseInt(this.render.version)){this.render.createApp({render:e=>this.render.h(this.noderegister[t.html].html,this.noderegister[t.html].props,this.noderegister[t.html].options)}).mount(r)}else{let e=new this.render({render:e=>e(this.noderegister[t.html].html,{props:this.noderegister[t.html].props}),...this.noderegister[t.html].options}).$mount();r.appendChild(e.$el)}Object.entries(t.data).forEach(function(e,n){if("object"==typeof e[1])!function e(n,s,i){if(null===n)var n=t.data[s];else var n=n[s];null!==n&&Object.entries(n).forEach(function(t,o){if("object"==typeof t[1])e(n,t[0],s+"-"+t[0]);else for(var l=r.querySelectorAll("[df-"+i+"-"+t[0]+"]"),d=0;d{const c=t.outputs[s].connections[i].node,a=t.outputs[s].connections[i].output,r=document.querySelector(".connection.node_in_node-"+c+".node_out_node-"+t.id+"."+s+"."+a);if(n&&0===d)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 d=e.slice(6);let c=[];if(o.forEach((e,s)=>{e.connections.forEach((t,e)=>{c.push(t)}),this.drawflow.drawflow[n].data[t].inputs["input_"+(s+1)]=e}),c=new Set(c.map(t=>JSON.stringify(t))),c=Array.from(c).map(t=>JSON.parse(t)),this.module===n){document.querySelectorAll("#node-"+t+" .inputs .input").forEach((t,e)=>{const n=t.classList[1].slice(6);parseInt(d){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(d){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 d=e.slice(7);let c=[];if(o.forEach((e,s)=>{e.connections.forEach((t,e)=>{c.push({node:t.node,output:t.output})}),this.drawflow.drawflow[n].data[t].outputs["output_"+(s+1)]=e}),c=new Set(c.map(t=>JSON.stringify(t))),c=Array.from(c).map(t=>JSON.parse(t)),this.module===n){document.querySelectorAll("#node-"+t+" .outputs .output").forEach((t,e)=>{const n=t.classList[1].slice(7);parseInt(d){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(d)-1){this.module===i&&document.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=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(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 d=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(d,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 c=document.getElementsByClassName(e);for(i=c.length-1;i>=0;i--){o=c[i].classList,d=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(d,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),c[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)}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){this.clear(),this.drawflow=JSON.parse(JSON.stringify(t)),this.load(),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(void 0===this.events[t])return!1;this.events[t].listeners=this.events[t].listeners.filter(t=>t.toString()!==e.toString())}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("")}} \ No newline at end of file diff --git a/docs/beautiful.css b/docs/beautiful.css index ae652dc..2d3bd1f 100644 --- a/docs/beautiful.css +++ b/docs/beautiful.css @@ -323,6 +323,25 @@ cursor: pointer; fill: #4ea9ff; } +/* This aligns the input/content/output on top of the nodeHeader */ +.drawflow-node.collapsed-head .drawflow-node-header { + position: absolute; + height: 100%; + width: 100%; +} + +.drawflow-node.collapsed-head .title-box { + height: 100%; + display: flex; + align-items: center; +} + +.drawflow-node.collapsed-head .outputs, +.drawflow-node.collapsed-head .inputs { + display: grid; + align-items: center; + min-height: 50px; +} /* Modal */ .modal { diff --git a/docs/index.html b/docs/index.html index bdf27bc..c7de429 100644 --- a/docs/index.html +++ b/docs/index.html @@ -94,7 +94,7 @@

Drawflow

var id = document.getElementById("drawflow"); const editor = new Drawflow(id); editor.reroute = true; - editor.drawflow = {"drawflow":{"Home":{"data":{"1":{"id":1,"name":"welcome","data":{},"class":"welcome","html":"\n
\n
👏 Welcome!!
\n
\n

Simple flow library demo\n Drawflow by Jero Soler


\n\n

Multiple input / outputs
\n Data sync nodes
\n Import / export
\n Modules support
\n Simple use
\n Type: Fixed or Edit
\n Events: view console
\n Pure Javascript
\n

\n
\n

Shortkeys:

\n

🎹 Delete for remove selected
\n 💠 Mouse Left Click == Move
\n ❌ Mouse Right == Delete Option
\n 🔍 Ctrl + Wheel == Zoom
\n 📱 Mobile support
\n ...

\n
\n
\n ","typenode": false, "inputs":{},"outputs":{},"pos_x":50,"pos_y":50},"2":{"id":2,"name":"slack","data":{},"class":"slack","html":"\n
\n
Slack chat message
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1028,"pos_y":87},"3":{"id":3,"name":"telegram","data":{"channel":"channel_2"},"class":"telegram","html":"\n
\n
Telegram bot
\n
\n

Send to telegram

\n

select channel

\n \n
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1032,"pos_y":184},"4":{"id":4,"name":"email","data":{},"class":"email","html":"\n
\n
Send Email
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"}]}},"outputs":{},"pos_x":1033,"pos_y":439},"5":{"id":5,"name":"template","data":{"template":"Write your template"},"class":"template","html":"\n
\n
Template
\n
\n Ger Vars\n \n Output template with vars\n
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"4","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":607,"pos_y":304},"6":{"id":6,"name":"github","data":{"name":"https://github.com/jerosoler/Drawflow"},"class":"github","html":"\n
\n
Github Stars
\n
\n

Enter repository url

\n \n
\n
\n ","typenode": false, "inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":341,"pos_y":191},"7":{"id":7,"name":"facebook","data":{},"class":"facebook","html":"\n
\n
Facebook Message
\n
\n ","typenode": false, "inputs":{},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_1"},{"node":"3","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":347,"pos_y":87},"11":{"id":11,"name":"log","data":{},"class":"log","html":"\n
\n
Save log file
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"},{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1031,"pos_y":363}}},"Other":{"data":{"8":{"id":8,"name":"personalized","data":{},"class":"personalized","html":"\n
\n Personalized\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"12","input":"output_1"},{"node":"12","input":"output_2"},{"node":"12","input":"output_3"},{"node":"12","input":"output_4"}]}},"outputs":{"output_1":{"connections":[{"node":"9","output":"input_1"}]}},"pos_x":764,"pos_y":227},"9":{"id":9,"name":"dbclick","data":{"name":"Hello World!!"},"class":"dbclick","html":"\n
\n
Db Click
\n
\n Db Click here\n
\n
\n ×\n Change your variable {name} !\n \n
\n\n
\n
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[{"node":"8","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"12","output":"input_2"}]}},"pos_x":209,"pos_y":38},"12":{"id":12,"name":"multiple","data":{},"class":"multiple","html":"\n
\n
\n Multiple!\n
\n
\n ","typenode": false, "inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"9","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"}]},"output_2":{"connections":[{"node":"8","output":"input_1"}]},"output_3":{"connections":[{"node":"8","output":"input_1"}]},"output_4":{"connections":[{"node":"8","output":"input_1"}]}},"pos_x":179,"pos_y":272}}}}} + editor.drawflow = {"drawflow":{"Home":{"data":{"1":{"id":1,"name":"welcome","data":{},"class":"welcome","headerContent":"
👏 Welcome!!
","html":"\n
\n \n
\n

Simple flow library demo\n Drawflow by Jero Soler


\n\n

Multiple input / outputs
\n Data sync nodes
\n Import / export
\n Modules support
\n Simple use
\n Type: Fixed or Edit
\n Events: view console
\n Pure Javascript
\n

\n
\n

Shortkeys:

\n

🎹 Delete for remove selected
\n 💠 Mouse Left Click == Move
\n ❌ Mouse Right == Delete Option
\n 🔍 Ctrl + Wheel == Zoom
\n 📱 Mobile support
\n ...

\n
\n
\n ","footerContent":"","typenode":false,"inputs":{},"outputs":{},"pos_x":50,"pos_y":50},"2":{"id":2,"name":"slack","data":{},"class":"collapsed-head","headerContent":"
Slack chat message
","html":"\n
\n \n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1028,"pos_y":87},"3":{"id":3,"name":"telegram","data":{"channel":"channel_2"},"class":"","headerContent":"
Telegram bot
","html":"\n
\n \n
\n

Send to telegram

\n

select channel

\n \n
\n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1032,"pos_y":184},"4":{"id":4,"name":"email","data":{},"class":"collapsed-head","headerContent":"
Send Email
\n ","html":"\n
\n \n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"}]}},"outputs":{},"pos_x":1033,"pos_y":439},"5":{"id":5,"name":"template","data":{"template":"Write your template"},"class":"","headerContent":"
Template
","html":"\n
\n \n
\n

Ger Vars

\n \n

Output template with vars

\n
\n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"6","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"4","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":607,"pos_y":304},"6":{"id":6,"name":"github","data":{"name":"https://github.com/jerosoler/Drawflow"},"class":"","headerContent":"
Github Stars
","html":"\n
\n \n
\n

Enter repository url

\n \n
\n
\n ","footerContent":"","typenode":false,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"5","output":"input_1"}]}},"pos_x":341,"pos_y":191},"7":{"id":7,"name":"facebook","data":{},"class":"collapsed-head","headerContent":"
Facebook Message
","html":"\n
\n \n
\n ","footerContent":"","typenode":false,"inputs":{},"outputs":{"output_1":{"connections":[{"node":"2","output":"input_1"},{"node":"3","output":"input_1"},{"node":"11","output":"input_1"}]}},"pos_x":347,"pos_y":87},"11":{"id":11,"name":"log","data":{},"class":"collapsed-head","headerContent":"
Save log file
","html":"\n
\n \n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"5","input":"output_1"},{"node":"7","input":"output_1"}]}},"outputs":{},"pos_x":1031,"pos_y":363}}},"Other":{"data":{"8":{"id":8,"name":"personalized","data":{},"class":"personalized","headerContent":"","html":"\n
\n Personalized\n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"12","input":"output_1"},{"node":"12","input":"output_2"},{"node":"12","input":"output_3"},{"node":"12","input":"output_4"}]}},"outputs":{"output_1":{"connections":[{"node":"9","output":"input_1"}]}},"pos_x":764,"pos_y":227},"9":{"id":9,"name":"dbclick","data":{"name":"Hello World!!"},"class":"collapsed-head","headerContent":"
Db Click
","html":"\n
\n \n
\n Db Click here\n
\n
\n ×\n Change your variable {name} !\n \n
\n\n
\n
\n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[{"node":"8","input":"output_1"}]}},"outputs":{"output_1":{"connections":[{"node":"12","output":"input_2"}]}},"pos_x":209,"pos_y":38},"12":{"id":12,"name":"multiple","data":{},"class":"collapsed-head","headerContent":"","html":"\n
\n
\n Multiple!\n
\n
\n ","footerContent":"","typenode":false,"inputs":{"input_1":{"connections":[]},"input_2":{"connections":[{"node":"9","input":"output_1"}]},"input_3":{"connections":[]}},"outputs":{"output_1":{"connections":[{"node":"8","output":"input_1"}]},"output_2":{"connections":[{"node":"8","output":"input_1"}]},"output_3":{"connections":[{"node":"8","output":"input_1"}]},"output_4":{"connections":[{"node":"8","output":"input_1"}]}},"pos_x":179,"pos_y":272}}}}}; editor.start(); @@ -245,36 +245,30 @@

Drawflow

switch (name) { case 'facebook': var facebook = ` -
Facebook Message
-
`; - editor.addNode('facebook', 0, 1, pos_x, pos_y, 'facebook', {}, facebook ); + editor.addNode('facebook', [], [{'type': undefined, 'label': ''}], pos_x, pos_y, 'facebook', {}, {'headerContent':facebook, 'html':'', 'footerContent':''} ); break; case 'slack': var slackchat = ` -
Slack chat message
-
- ` - editor.addNode('slack', 1, 0, pos_x, pos_y, 'slack', {}, slackchat ); + `; + editor.addNode('slack', [{'type': undefined, 'label': ''}], [], pos_x, pos_y, 'collapsed-head', {}, {'headerContent':slackchat, 'html':'', 'footerContent':''} ); break; case 'github': var githubtemplate = `
-
Github Stars
-

Enter repository url

- +

Enter repository url

+
`; - editor.addNode('github', 0, 1, pos_x, pos_y, 'github', { "name": ''}, githubtemplate ); + editor.addNode('github', [], [{'type': undefined, 'label': ''}], pos_x, pos_y, 'github', { "name": ''}, {'headerContent':'
Github Stars
', 'html':githubtemplate, 'footerContent':''} ); break; case 'telegram': var telegrambot = `
-
Telegram bot

Send to telegram

select channel

@@ -287,12 +281,11 @@

Drawflow

`; - editor.addNode('telegram', 1, 0, pos_x, pos_y, 'telegram', { "channel": 'channel_3'}, telegrambot ); + editor.addNode('telegram', [{'type': undefined, 'label': ''}], [], pos_x, pos_y, 'telegram', { "channel": 'channel_3'}, {'headerContent':'
Telegram bot
', 'html':telegrambot, 'footerContent':''} ); break; case 'aws': var aws = `
-
Aws Save

Save in aws



@@ -301,37 +294,30 @@

Drawflow

`; - editor.addNode('aws', 1, 1, pos_x, pos_y, 'aws', { "db": { "dbname": '', "key": '' }}, aws ); + editor.addNode('aws', [{'type': undefined, 'label': ''}], [{'type': undefined, 'label': ''}], pos_x, pos_y, 'aws', { "db": { "dbname": '', "key": '' }}, {'headerContent':'
Aws Save
', 'html':aws, 'footerContent':''} ); break; case 'log': var log = ` -
Save log file
-
`; - editor.addNode('log', 1, 0, pos_x, pos_y, 'log', {}, log ); + editor.addNode('log', [{'type': undefined, 'label': ''}], [], pos_x, pos_y, 'collapsed-head', {}, {'headerContent':log, 'html':'', 'footerContent':''} ); break; case 'google': var google = ` -
Google Drive save
-
`; - editor.addNode('google', 1, 0, pos_x, pos_y, 'google', {}, google ); + editor.addNode('google', [{'type': undefined, 'label': ''}], [], pos_x, pos_y, 'collapsed-head', {}, {'headerContent':google, 'html':'', 'footerContent':''} ); break; case 'email': var email = ` -
Send Email
-
`; - editor.addNode('email', 1, 0, pos_x, pos_y, 'email', {}, email ); + editor.addNode('email', [{'type': undefined, 'label': ''}], [], pos_x, pos_y, 'collapsed-head', {}, {'headerContent':email, 'html':'', 'footerContent':''} ); break; case 'template': var template = `
-
Template
Ger Vars @@ -339,7 +325,7 @@

Drawflow

`; - editor.addNode('template', 1, 1, pos_x, pos_y, 'template', { "template": 'Write your template'}, template ); + editor.addNode('template', [{'type': undefined, 'label': ''}], [{'type': undefined, 'label': ''}], pos_x, pos_y, 'template', { "template": 'Write your template'}, {'headerContent':'
Template
', 'html':template, 'footerContent':''} ); break; case 'multiple': var multiple = ` @@ -349,7 +335,8 @@

Drawflow

`; - editor.addNode('multiple', 3, 4, pos_x, pos_y, 'multiple', {}, multiple ); + editor.addNode('multiple', [{'type': undefined, 'label': ''},{'type': undefined, 'label': ''},{'type': undefined, 'label': ''}], [{'type': undefined, 'label': ''},{'type': undefined, 'label': ''},{'type': undefined, 'label': ''},{'type': undefined, 'label': ''}], + pos_x, pos_y, 'collapsed-head', {}, {'headerContent':'', 'html':multiple, 'footerContent':''} ); break; case 'personalized': var personalized = ` @@ -357,12 +344,11 @@

Drawflow

Personalized `; - editor.addNode('personalized', 1, 1, pos_x, pos_y, 'personalized', {}, personalized ); + editor.addNode('personalized', [{'type': undefined, 'label': ''}], [{'type': undefined, 'label': ''}], pos_x, pos_y, 'personalized', {}, {'headerContent':'', 'html':personalized, 'footerContent':''} ); break; case 'dbclick': var dbclick = `
-
Db Click
Db Click here
`; - editor.addNode('dbclick', 1, 1, pos_x, pos_y, 'dbclick', { name: ''}, dbclick ); + editor.addNode('dbclick', 1, 1, pos_x, pos_y, 'dbclick', { name: ''}, {'headerContent':'
Db Click
', 'html':dbclick, 'footerContent':''} ); break; default: diff --git a/docs/node-layout.html b/docs/node-layout.html new file mode 100644 index 0000000..1550db0 --- /dev/null +++ b/docs/node-layout.html @@ -0,0 +1,265 @@ + + + + + + + Flexbox Node + + + + + + +
+

Classic node layout

+
+
+
+

Node Header (.drawflow-node-header)

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ (.drawflow_content_node)

+

Python is a dynamic, high level, + open-source programming language. + It is relatively a newer language + in the world of programming + languages and in AWS environment + as well. This is the simplest + language and beginners friendly. +

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Node Footer (.drawflow-node-footer) +
+
+
+
+
+

Vertical node layout example

+
+
+
+
+

Node Header (.drawflow-node-header)

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+ (.drawflow_content_node)

+

Python is a dynamic, high level, + open-source programming language. + It is relatively a newer language + in the world of programming + languages and in AWS environment + as well. This is the simplest + language and beginners friendly. +

+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+ Node Footer (.drawflow-node-footer) +
+
+
+
+
+

Collapsed classic node layout

+

Mean the header is on top of everything else (useful for small node)

+
+
+
+

Node Header (.drawflow-node-header)

+
+ +
+
+
+
+
+ +
+ (.drawflow_content_node)

+

Node Header (.drawflow-node-header) +

+
+ +
+
+
+
+
+ +
+
+
+
+
+ + + diff --git a/gulpfile.js b/gulpfile.js index 7631348..7a1f72a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -3,9 +3,6 @@ const minify = require('gulp-minify'); const concat = require('gulp-concat'); const minifyCSS = require('gulp-minify-css'); - - -/* gulp.task('js', done => { return gulp.src('src/*.js') .pipe(minify({noSource: true})) @@ -13,8 +10,6 @@ gulp.task('js', done => { .pipe(gulp.dest('dist/')) }); -*/ - gulp.task('css', done => { return gulp.src('src/*.css') @@ -24,7 +19,7 @@ gulp.task('css', done => { }); gulp.task('default', gulp.parallel( - /*'js',*/ + 'js', 'css' ) ); diff --git a/package-lock.json b/package-lock.json index 251844f..a12f72d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,22 +1,15 @@ { "name": "drawflow", - "version": "0.0.23", + "version": "0.0.37", "lockfileVersion": 1, "requires": true, "dependencies": { - "@types/events": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/@types/events/-/events-3.0.0.tgz", - "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", - "dev": true - }, "@types/glob": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", - "integrity": "sha512-1Bh06cbWJUHMC97acuD6UMG29nMt0Aqz1vF3guLfG+kHHJhy3AyohZFFxYk2f7Q1SQIrNwvncxAE0N/9s70F2w==", + "version": "7.1.3", + "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.3.tgz", + "integrity": "sha512-SEYeGAIQIQX8NN6LDKprLjbrd5dARM5EXsd8GI/A5l0apYI1fGMWgPHSe4ZKL4eozlAyI+doUE9XbYS4xCkQ1w==", "dev": true, "requires": { - "@types/events": "*", "@types/minimatch": "*", "@types/node": "*" } @@ -28,9 +21,9 @@ "dev": true }, "@types/node": { - "version": "13.13.4", - "resolved": "https://registry.npmjs.org/@types/node/-/node-13.13.4.tgz", - "integrity": "sha512-x26ur3dSXgv5AwKS0lNfbjpCakGIduWU1DU91Zz58ONRWrIKGunmZBNv4P7N+e27sJkiGDsw/3fT4AtsqQBrBA==", + "version": "14.14.31", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.31.tgz", + "integrity": "sha512-vFHy/ezP5qI0rFgJ7aQnjDXwAMrG0KqqIH7tQG5PPv3BWBayOPIQNBjVc/P6hhdZfMx51REc6tfDNXHUio893g==", "dev": true }, "@webassemblyjs/ast": { @@ -1591,6 +1584,16 @@ "unset-value": "^1.0.0" } }, + "call-bind": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz", + "integrity": "sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "get-intrinsic": "^1.0.2" + } + }, "camelcase": { "version": "5.3.1", "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz", @@ -2429,36 +2432,6 @@ "is-arrayish": "^0.2.1" } }, - "es-abstract": { - "version": "1.17.5", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.5.tgz", - "integrity": "sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.1.5", - "is-regex": "^1.0.5", - "object-inspect": "^1.7.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.0", - "string.prototype.trimleft": "^2.1.1", - "string.prototype.trimright": "^2.1.1" - } - }, - "es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", - "dev": true, - "requires": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" - } - }, "es5-ext": { "version": "0.10.53", "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.53.tgz", @@ -2550,9 +2523,9 @@ "dev": true }, "eventemitter3": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz", - "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==", + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.7.tgz", + "integrity": "sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==", "dev": true }, "events": { @@ -2690,9 +2663,9 @@ }, "dependencies": { "type": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/type/-/type-2.0.0.tgz", - "integrity": "sha512-KBt58xCHry4Cejnc2ISQAF7QY+ORngsWfxezO68+12hKV6lQY8P/psIkcbjeHWn7MqcgciWJyCCevFMJdIXpow==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/type/-/type-2.3.0.tgz", + "integrity": "sha512-rgPIqOdfK/4J9FhiVrZ3cveAjRRo5rsQBAIhnylX874y1DX/kEKSVdLsnuHB6l1KTjHyU01VjiMBHgU2adejyg==", "dev": true } } @@ -2803,10 +2776,16 @@ "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz", "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==" }, + "fast-levenshtein": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz", + "integrity": "sha1-5qdUzI8V5YmHqpy9J69m/W9OWvk=", + "dev": true + }, "faye-websocket": { - "version": "0.10.0", - "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz", - "integrity": "sha1-TkkvjQTftviQA1B/btvy1QHnxvQ=", + "version": "0.11.3", + "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz", + "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==", "dev": true, "requires": { "websocket-driver": ">=0.5.1" @@ -2918,30 +2897,10 @@ } }, "follow-redirects": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz", - "integrity": "sha512-KZm0V+ll8PfBrKwMzdo5D13b1bur9Iq9Zd/RMmAoQQcl2PxxFml8cxXPaaPYVbV0RjNjq1CU7zIzAOqtUPudmA==", - "dev": true, - "requires": { - "debug": "^3.0.0" - }, - "dependencies": { - "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", - "dev": true, - "requires": { - "ms": "^2.1.1" - } - }, - "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", - "dev": true - } - } + "version": "1.13.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz", + "integrity": "sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==", + "dev": true }, "for-in": { "version": "1.0.2", @@ -3508,6 +3467,17 @@ "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==", "dev": true }, + "get-intrinsic": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.1.tgz", + "integrity": "sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==", + "dev": true, + "requires": { + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1" + } + }, "get-stream": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz", @@ -3573,9 +3543,9 @@ } }, "glob-watcher": { - "version": "5.0.3", - "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.3.tgz", - "integrity": "sha512-8tWsULNEPHKQ2MR4zXuzSmqbdyV5PtwwCaWSGQ1WwHsJ07ilNeN1JB8ntxhckbnpSHaf9dXFUHzIWvm1I13dsg==", + "version": "5.0.5", + "resolved": "https://registry.npmjs.org/glob-watcher/-/glob-watcher-5.0.5.tgz", + "integrity": "sha512-zOZgGGEHPklZNjZQaZ9f41i7F2YwE+tS5ZHrDhbBCk3stwahn5vQxnFmBJZHoYdusR6R1bLSXeGUy/BhctwKzw==", "dev": true, "requires": { "anymatch": "^2.0.0", @@ -3583,6 +3553,7 @@ "chokidar": "^2.0.0", "is-negated-glob": "^1.0.0", "just-debounce": "^1.0.0", + "normalize-path": "^3.0.0", "object.defaults": "^1.1.0" } }, @@ -3719,9 +3690,9 @@ "dev": true }, "gulp-cli": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.2.0.tgz", - "integrity": "sha512-rGs3bVYHdyJpLqR0TUBnlcZ1O5O++Zs4bA0ajm+zr3WFCfiSLjGwoCBqFs18wzN+ZxahT9DkOK5nDf26iDsWjA==", + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/gulp-cli/-/gulp-cli-2.3.0.tgz", + "integrity": "sha512-zzGBl5fHo0EKSXsHzjspp3y5CONegCm8ErO5Qh0UzFzk2y4tMvzLWhoDokADbarfZRL2pGpRp7yt6gfJX4ph7A==", "dev": true, "requires": { "ansi-colors": "^1.0.1", @@ -3732,7 +3703,7 @@ "copy-props": "^2.0.1", "fancy-log": "^1.3.2", "gulplog": "^1.0.0", - "interpret": "^1.1.0", + "interpret": "^1.4.0", "isobject": "^3.0.1", "liftoff": "^3.1.0", "matchdep": "^2.0.0", @@ -3740,10 +3711,16 @@ "pretty-hrtime": "^1.0.0", "replace-homedir": "^1.0.0", "semver-greatest-satisfied-range": "^1.1.0", - "v8flags": "^3.0.1", + "v8flags": "^3.2.0", "yargs": "^7.1.0" } }, + "interpret": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz", + "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", + "dev": true + }, "invert-kv": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/invert-kv/-/invert-kv-1.0.0.tgz", @@ -3820,15 +3797,15 @@ } }, "y18n": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.1.tgz", - "integrity": "sha1-bRX7qITAhnnA136I53WegR4H+kE=", + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-3.2.2.tgz", + "integrity": "sha512-uGZHXkHnhF0XeeAPgnKfPv1bgKAYyVvmNL1xlKsPYZPaIHxGti2hHqvOCQv71XMsLxu1QjergkqogUnms5D3YQ==", "dev": true }, "yargs": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.0.tgz", - "integrity": "sha1-a6MY6xaWFyf10oT46gA+jWFU0Mg=", + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-7.1.1.tgz", + "integrity": "sha512-huO4Fr1f9PmiJJdll5kwoS2e4GqzGSsMT3PPMpOwoVkOK8ckqAewMTZyA6LXVQWflleb/Z8oPBEvNsMft0XE+g==", "dev": true, "requires": { "camelcase": "^3.0.0", @@ -3843,16 +3820,17 @@ "string-width": "^1.0.2", "which-module": "^1.0.0", "y18n": "^3.2.1", - "yargs-parser": "^5.0.0" + "yargs-parser": "5.0.0-security.0" } }, "yargs-parser": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0.tgz", - "integrity": "sha1-J17PDX/+Bcd+ZOfIbkzZS/DhIoo=", + "version": "5.0.0-security.0", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-5.0.0-security.0.tgz", + "integrity": "sha512-T69y4Ps64LNesYxeYGYPvfoMTt/7y1XtfpIslUeK4um+9Hu7hlGoRtaDLvdXb7+/tfq4opVa2HRY5xGip022rQ==", "dev": true, "requires": { - "camelcase": "^3.0.0" + "camelcase": "^3.0.0", + "object.assign": "^4.1.0" } } } @@ -4184,9 +4162,9 @@ } }, "html-entities": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz", - "integrity": "sha512-rhE/4Z3hIhzHAUKbW8jVcCyuT5oJCXXqhN/6mXXVCpzTmvJnoH2HL/bt3EZ6p55jbFJBeAe1ZNpL5BugLujxNA==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.4.0.tgz", + "integrity": "sha512-8nxjcBcd8wovbeKx7h3wTji4e6+rhaVuPNpMqwWgnHh+N9ToqsCs6XztWRBPQ+UtzsoMAdKZtUENoVzU/EMtZA==", "dev": true }, "http-deceiver": { @@ -4217,9 +4195,9 @@ } }, "http-parser-js": { - "version": "0.4.10", - "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz", - "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q=", + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.5.3.tgz", + "integrity": "sha512-t7hjvef/5HEK7RWTdUzVUhl8zkEu+LlaE0IYzdMuvbSDipxBRpOn4Uhw8ZyECEa808iVT8XCjzo6xmYt4CiLZg==", "dev": true }, "http-proxy": { @@ -4319,9 +4297,9 @@ "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==" }, "ini": { - "version": "1.3.5", - "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz", - "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==", + "version": "1.3.8", + "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz", + "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==", "dev": true }, "internal-ip": { @@ -4408,10 +4386,13 @@ } }, "is-arguments": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz", - "integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==", - "dev": true + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz", + "integrity": "sha512-1Ij4lOMPl/xB5kBDn7I+b2ttPMKa8szhEIrXDuXQD/oe3HJLTLhqhgGspwgyGd6MOywBUqVvYicF72lkgDnIHg==", + "dev": true, + "requires": { + "call-bind": "^1.0.0" + } }, "is-arrayish": { "version": "0.2.1", @@ -4432,11 +4413,14 @@ "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz", "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==" }, - "is-callable": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", - "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", - "dev": true + "is-core-module": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", + "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", + "dev": true, + "requires": { + "has": "^1.0.3" + } }, "is-data-descriptor": { "version": "0.1.4", @@ -4572,12 +4556,13 @@ } }, "is-regex": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", - "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz", + "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==", "dev": true, "requires": { - "has": "^1.0.3" + "call-bind": "^1.0.2", + "has-symbols": "^1.0.1" } }, "is-relative": { @@ -4595,15 +4580,6 @@ "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=", "dev": true }, - "is-symbol": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.3.tgz", - "integrity": "sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==", - "dev": true, - "requires": { - "has-symbols": "^1.0.1" - } - }, "is-unc-path": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz", @@ -4694,9 +4670,9 @@ } }, "just-debounce": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.0.0.tgz", - "integrity": "sha1-h/zPrv/AtozRnVX2cilD+SnqNeo=", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/just-debounce/-/just-debounce-1.1.0.tgz", + "integrity": "sha512-qpcRocdkUmf+UTNBYx5w6dexX5J31AKK1OmPwH630a83DdVVUIngk55RSAiIGpQyoH0dlr872VHfPjnQnK1qDQ==", "dev": true }, "killable": { @@ -4934,9 +4910,9 @@ } }, "loglevel": { - "version": "1.6.8", - "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.8.tgz", - "integrity": "sha512-bsU7+gc9AJ2SqpzxwU3+1fedl8zAntbtC5XYlt3s2j1hJcn2PsXSmgN8TaLG/J1/2mod4+cE/3vNL70/c1RNCA==", + "version": "1.7.1", + "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz", + "integrity": "sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==", "dev": true }, "loose-envify": { @@ -5115,18 +5091,18 @@ "dev": true }, "mime-db": { - "version": "1.44.0", - "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.44.0.tgz", - "integrity": "sha512-/NOTfLrsPBVeH7YtFPgsVWveuL+4SjjYxaQ1xtM1KMFj7HdxlBlxeyNLzhyJVx7r4rZGJAZ/6lkKCitSc/Nmpg==", + "version": "1.46.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz", + "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==", "dev": true }, "mime-types": { - "version": "2.1.27", - "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.27.tgz", - "integrity": "sha512-JIhqnCasI9yD+SsmkquHBxTSEuZdQX5BuQnS2Vc7puQQQ+8yiP5AY5uWhpdv4YL4VM5c6iliiYWPgJ/nJQLp7w==", + "version": "2.1.29", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz", + "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==", "dev": true, "requires": { - "mime-db": "1.44.0" + "mime-db": "1.46.0" } }, "mimic-fn": { @@ -5311,9 +5287,9 @@ "dev": true }, "node-forge": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz", - "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==", + "version": "0.10.0", + "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz", + "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==", "dev": true }, "node-libs-browser": { @@ -5439,20 +5415,14 @@ } } }, - "object-inspect": { - "version": "1.7.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.7.0.tgz", - "integrity": "sha512-a7pEHdh1xKIAgTySUGgLMx/xwDZskN1Ud6egYYN3EdRW4ZMPNEDUTF+hwy2LUC+Bl+SyLXANnwz/jyh/qutKUw==", - "dev": true - }, "object-is": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz", - "integrity": "sha512-5lHCz+0uufF6wZ7CRFWJN3hp8Jqblpgve06U5CMQ3f//6iDjPr2PEo9MWCjEssDsa+UZEL4PkFpr+BMop6aKzQ==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.4.tgz", + "integrity": "sha512-1ZvAZ4wlF7IyPVOcE1Omikt7UpaFlOQq0HlSti+ZvDH3UiD2brwGMwDbyV43jao2bKJ+4+WdPJHSd7kgzKYVqg==", "dev": true, "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5" + "call-bind": "^1.0.0", + "define-properties": "^1.1.3" } }, "object-keys": { @@ -5470,15 +5440,15 @@ } }, "object.assign": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz", - "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz", + "integrity": "sha512-ixT2L5THXsApyiUPYKmW+2EHpXXe5Ii3M+f4e+aJFAHao5amFRW6J0OO6c/LU8Be47utCx2GL89hxGB6XSmKuQ==", "dev": true, "requires": { - "define-properties": "^1.1.2", - "function-bind": "^1.1.1", - "has-symbols": "^1.0.0", - "object-keys": "^1.0.11" + "call-bind": "^1.0.0", + "define-properties": "^1.1.3", + "has-symbols": "^1.0.1", + "object-keys": "^1.1.1" } }, "object.defaults": { @@ -5820,6 +5790,12 @@ "sha.js": "^2.4.8" } }, + "picomatch": { + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.2.2.tgz", + "integrity": "sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==", + "optional": true + }, "pify": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz", @@ -5901,29 +5877,29 @@ } }, "portfinder": { - "version": "1.0.25", - "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.25.tgz", - "integrity": "sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==", + "version": "1.0.28", + "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz", + "integrity": "sha512-Se+2isanIcEqf2XMHjyUKskczxbPH7dQnlMjXX6+dybayyHvAf/TCgyMRlzf/B6QDhAEFOGes0pzRo3by4AbMA==", "dev": true, "requires": { "async": "^2.6.2", "debug": "^3.1.1", - "mkdirp": "^0.5.1" + "mkdirp": "^0.5.5" }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "requires": { "ms": "^2.1.1" } }, "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true } } @@ -6133,9 +6109,9 @@ "integrity": "sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=" }, "querystringify": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.1.1.tgz", - "integrity": "sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz", + "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ==", "dev": true }, "randombytes": { @@ -6289,13 +6265,13 @@ } }, "regexp.prototype.flags": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz", - "integrity": "sha512-2+Q0C5g951OlYlJz6yu5/M33IcsESLlLfsyIaLJaG4FA2r4yP8MvVMJUUP/fVBkSpbbbZlS5gynbEWLipiiXiQ==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz", + "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==", "dev": true, "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1" + "call-bind": "^1.0.2", + "define-properties": "^1.1.3" } }, "regexpu-core": { @@ -6413,11 +6389,12 @@ "dev": true }, "resolve": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", - "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==", + "version": "1.20.0", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz", + "integrity": "sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==", "dev": true, "requires": { + "is-core-module": "^2.2.0", "path-parse": "^1.0.6" } }, @@ -6545,12 +6522,12 @@ "dev": true }, "selfsigned": { - "version": "1.10.7", - "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz", - "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==", + "version": "1.10.8", + "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz", + "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==", "dev": true, "requires": { - "node-forge": "0.9.0" + "node-forge": "^0.10.0" } }, "semver": { @@ -6596,11 +6573,6 @@ } } }, - "serialize-javascript": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-2.1.2.tgz", - "integrity": "sha512-rs9OggEUF0V4jUSecXazOYsLfu7OGK2qIn3c7IPBiffz32XniEp/TX9Xmc9LQfK2nQ2QKHvZ2oygKUGU0lG4jQ==" - }, "serve-index": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.1.tgz", @@ -6826,51 +6798,43 @@ } }, "sockjs": { - "version": "0.3.19", - "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz", - "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==", + "version": "0.3.21", + "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.21.tgz", + "integrity": "sha512-DhbPFGpxjc6Z3I+uX07Id5ZO2XwYsWOrYjaSeieES78cq+JaJvVe5q/m1uvjIQhXinhIeCFRH6JgXe+mvVMyXw==", "dev": true, "requires": { - "faye-websocket": "^0.10.0", - "uuid": "^3.0.1" + "faye-websocket": "^0.11.3", + "uuid": "^3.4.0", + "websocket-driver": "^0.7.4" } }, "sockjs-client": { - "version": "1.4.0", - "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz", - "integrity": "sha512-5zaLyO8/nri5cua0VtOrFXBPK1jbL4+1cebT/mmKA1E1ZXOvJrII75bPu0l0k843G/+iAbhEqzyKr0w/eCCj7g==", + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.5.0.tgz", + "integrity": "sha512-8Dt3BDi4FYNrCFGTL/HtwVzkARrENdwOUf1ZoW/9p3M8lZdFT35jVdrHza+qgxuG9H3/shR4cuX/X9umUrjP8Q==", "dev": true, "requires": { - "debug": "^3.2.5", + "debug": "^3.2.6", "eventsource": "^1.0.7", - "faye-websocket": "~0.11.1", - "inherits": "^2.0.3", - "json3": "^3.3.2", - "url-parse": "^1.4.3" + "faye-websocket": "^0.11.3", + "inherits": "^2.0.4", + "json3": "^3.3.3", + "url-parse": "^1.4.7" }, "dependencies": { "debug": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz", - "integrity": "sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==", + "version": "3.2.7", + "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz", + "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==", "dev": true, "requires": { "ms": "^2.1.1" } }, - "faye-websocket": { - "version": "0.11.3", - "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz", - "integrity": "sha512-D2y4bovYpzziGgbHYtGCMjlJM36vAl/y+xUyn1C+FVx8szd1E+86KwVw6XvYSzOP8iMpm1X0I4xJD+QtUb36OA==", - "dev": true, - "requires": { - "websocket-driver": ">=0.5.1" - } - }, "ms": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", - "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==", "dev": true } } @@ -6934,9 +6898,9 @@ "dev": true }, "spdx-correct": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz", - "integrity": "sha512-lr2EZCctC2BNR7j7WzJ2FpDznxky1sjfxvvYEyzxNyb6lZXHODmEoJeFu4JupYlkfha1KZpJyoqiJ7pgA1qq8Q==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz", + "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==", "dev": true, "requires": { "spdx-expression-parse": "^3.0.0", @@ -6950,9 +6914,9 @@ "dev": true }, "spdx-expression-parse": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz", - "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==", + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz", + "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==", "dev": true, "requires": { "spdx-exceptions": "^2.1.0", @@ -6960,9 +6924,9 @@ } }, "spdx-license-ids": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz", - "integrity": "sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz", + "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==", "dev": true }, "spdy": { @@ -6979,12 +6943,12 @@ }, "dependencies": { "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "2.1.2" } }, "ms": { @@ -7010,12 +6974,12 @@ }, "dependencies": { "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "2.1.2" } }, "ms": { @@ -7142,48 +7106,6 @@ "strip-ansi": "^5.1.0" } }, - "string.prototype.trimend": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.1.tgz", - "integrity": "sha512-LRPxFUaTtpqYsTeNKaFOw3R4bxIzWOnbQ837QfBylo8jIxtcbK/A/sMV7Q+OAV/vWo+7s25pOE10KYSjaSO06g==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5" - } - }, - "string.prototype.trimleft": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimleft/-/string.prototype.trimleft-2.1.2.tgz", - "integrity": "sha512-gCA0tza1JBvqr3bfAIFJGqfdRTyPae82+KTnm3coDXkZN9wnuW3HjGgN386D7hfv5CHQYCI022/rJPVlqXyHSw==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5", - "string.prototype.trimstart": "^1.0.0" - } - }, - "string.prototype.trimright": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimright/-/string.prototype.trimright-2.1.2.tgz", - "integrity": "sha512-ZNRQ7sY3KroTaYjRS6EbNiiHrOkjihL9aQE/8gfQ4DtAC/aEBRHFJa44OmoWxGGqXuJlfKkZW4WcXErGr+9ZFg==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5", - "string.prototype.trimend": "^1.0.0" - } - }, - "string.prototype.trimstart": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.1.tgz", - "integrity": "sha512-XxZn+QpvrBI1FOcg6dIpxUPgWCPuNXvMD72aaRaUQv1eD4e/Qy8i/hFTe0BUmD60p/QA6bh1avmuPTfNjqVWRw==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.5" - } - }, "string_decoder": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz", @@ -7258,21 +7180,29 @@ } }, "terser-webpack-plugin": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz", - "integrity": "sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA==", + "version": "1.4.5", + "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-1.4.5.tgz", + "integrity": "sha512-04Rfe496lN8EYruwi6oPQkG0vo8C+HT49X687FZnpPF0qMAIHONI6HEXYPKDOE8e5HjXTyKfqRd/agHtH0kOtw==", "requires": { "cacache": "^12.0.2", "find-cache-dir": "^2.1.0", "is-wsl": "^1.1.0", "schema-utils": "^1.0.0", - "serialize-javascript": "^2.1.2", + "serialize-javascript": "^4.0.0", "source-map": "^0.6.1", "terser": "^4.1.2", "webpack-sources": "^1.4.0", "worker-farm": "^1.7.0" }, "dependencies": { + "serialize-javascript": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", + "integrity": "sha512-GaNA54380uFefWghODBWEGisLZFj00nS5ACs6yHa9nLqlLpVLO8ChDGeKRjZnV4Nh4n0Qi7nhYZD/9fCPzEqkw==", + "requires": { + "randombytes": "^2.1.0" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -7437,9 +7367,9 @@ "dev": true }, "undertaker": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.2.1.tgz", - "integrity": "sha512-71WxIzDkgYk9ZS+spIB8iZXchFhAdEo2YU8xYqBYJ39DIUIqziK78ftm26eecoIY49X0J2MLhG4hr18Yp6/CMA==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/undertaker/-/undertaker-1.3.0.tgz", + "integrity": "sha512-/RXwi5m/Mu3H6IHQGww3GNt1PNXlbeCuclF2QYR14L/2CHPz3DFZkvB5hZ0N/QUkiXWCACML2jXViIQEQc2MLg==", "dev": true, "requires": { "arr-flatten": "^1.0.1", @@ -7447,6 +7377,7 @@ "bach": "^1.0.0", "collection-map": "^1.0.0", "es6-weak-map": "^2.0.1", + "fast-levenshtein": "^1.0.0", "last-run": "^1.1.0", "object.defaults": "^1.0.0", "object.reduce": "^1.0.0", @@ -7579,9 +7510,9 @@ } }, "url-parse": { - "version": "1.4.7", - "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz", - "integrity": "sha512-d3uaVyzDB9tQoSXFvuSUNFibTd9zxd2bkVrDRvF5TmvWWQwqE4lgYJ5m+x1DbecWkw+LK4RNl2CU1hHuOKPVlg==", + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.1.tgz", + "integrity": "sha512-HOfCOUJt7iSYzEx/UqgtwKRMC6EU91NFhsCHMv9oM03VJcVo2Qrp8T8kI9D7amFf1cu+/3CEhgb3rF9zL7k85Q==", "dev": true, "requires": { "querystringify": "^2.1.1", @@ -7632,9 +7563,9 @@ "dev": true }, "v8flags": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.1.3.tgz", - "integrity": "sha512-amh9CCg3ZxkzQ48Mhcb8iX7xpAfYJgePHxWMQCBWECpOSqJUXgY26ncA61UTV0BkPqfhcy6mzwCIoP4ygxpW8w==", + "version": "3.2.0", + "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-3.2.0.tgz", + "integrity": "sha512-mH8etigqMfiGWdeXpaaqGfs6BndypxusHHcv2qSHyZkGEznCd/qAXCWWRzeowtL54147cktFOC4P5y+kl8d8Jg==", "dev": true, "requires": { "homedir-polyfill": "^1.0.1" @@ -7751,13 +7682,123 @@ "integrity": "sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==" }, "watchpack": { - "version": "1.6.1", - "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz", - "integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==", + "version": "1.7.5", + "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz", + "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==", "requires": { - "chokidar": "^2.1.8", + "chokidar": "^3.4.1", "graceful-fs": "^4.1.2", - "neo-async": "^2.5.0" + "neo-async": "^2.5.0", + "watchpack-chokidar2": "^2.0.1" + }, + "dependencies": { + "anymatch": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz", + "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==", + "optional": true, + "requires": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + } + }, + "binary-extensions": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz", + "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", + "optional": true + }, + "braces": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz", + "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==", + "optional": true, + "requires": { + "fill-range": "^7.0.1" + } + }, + "chokidar": { + "version": "3.5.1", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz", + "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==", + "optional": true, + "requires": { + "anymatch": "~3.1.1", + "braces": "~3.0.2", + "fsevents": "~2.3.1", + "glob-parent": "~5.1.0", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.5.0" + } + }, + "fill-range": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz", + "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==", + "optional": true, + "requires": { + "to-regex-range": "^5.0.1" + } + }, + "fsevents": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz", + "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==", + "optional": true + }, + "glob-parent": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz", + "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==", + "optional": true, + "requires": { + "is-glob": "^4.0.1" + } + }, + "is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "optional": true, + "requires": { + "binary-extensions": "^2.0.0" + } + }, + "is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "optional": true + }, + "readdirp": { + "version": "3.5.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz", + "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==", + "optional": true, + "requires": { + "picomatch": "^2.2.1" + } + }, + "to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "optional": true, + "requires": { + "is-number": "^7.0.0" + } + } + } + }, + "watchpack-chokidar2": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz", + "integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==", + "optional": true, + "requires": { + "chokidar": "^2.1.8" } }, "wbuf": { @@ -7819,9 +7860,9 @@ } }, "webpack-dev-middleware": { - "version": "3.7.2", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz", - "integrity": "sha512-1xC42LxbYoqLNAhV6YzTYacicgMZQTqRd27Sim9wn5hJrX3I5nxYy1SxSd4+gjUFsz1dQFj+yEe6zEVmSkeJjw==", + "version": "3.7.3", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.3.tgz", + "integrity": "sha512-djelc/zGiz9nZj/U7PTBi2ViorGJXEWo/3ltkPbDyxCXhhEXkW0ce99falaok4TPj+AsxLiXJR0EBOb0zh9fKQ==", "dev": true, "requires": { "memory-fs": "^0.4.1", @@ -7832,17 +7873,17 @@ }, "dependencies": { "mime": { - "version": "2.4.4", - "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.4.tgz", - "integrity": "sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==", + "version": "2.5.2", + "resolved": "https://registry.npmjs.org/mime/-/mime-2.5.2.tgz", + "integrity": "sha512-tqkh47FzKeCPD2PUiPB6pkbMzsCasjxAfC62/Wap5qrUWcb+sFasXUC5I3gYM5iBM8v/Qpn4UK0x+j0iHyFPDg==", "dev": true } } }, "webpack-dev-server": { - "version": "3.10.3", - "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz", - "integrity": "sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==", + "version": "3.11.2", + "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-3.11.2.tgz", + "integrity": "sha512-A80BkuHRQfCiNtGBS1EMf2ChTUs0x+B3wGDFmOeT4rmJOHhHTCH2naNxIHhmkr0/UillP4U3yeIyv1pNp+QDLQ==", "dev": true, "requires": { "ansi-html": "0.0.7", @@ -7853,31 +7894,31 @@ "debug": "^4.1.1", "del": "^4.1.1", "express": "^4.17.1", - "html-entities": "^1.2.1", + "html-entities": "^1.3.1", "http-proxy-middleware": "0.19.1", "import-local": "^2.0.0", "internal-ip": "^4.3.0", "ip": "^1.1.5", "is-absolute-url": "^3.0.3", "killable": "^1.0.1", - "loglevel": "^1.6.6", + "loglevel": "^1.6.8", "opn": "^5.5.0", "p-retry": "^3.0.1", - "portfinder": "^1.0.25", + "portfinder": "^1.0.26", "schema-utils": "^1.0.0", - "selfsigned": "^1.10.7", + "selfsigned": "^1.10.8", "semver": "^6.3.0", "serve-index": "^1.9.1", - "sockjs": "0.3.19", - "sockjs-client": "1.4.0", - "spdy": "^4.0.1", + "sockjs": "^0.3.21", + "sockjs-client": "^1.5.0", + "spdy": "^4.0.2", "strip-ansi": "^3.0.1", "supports-color": "^6.1.0", "url": "^0.11.0", "webpack-dev-middleware": "^3.7.2", "webpack-log": "^2.0.0", "ws": "^6.2.1", - "yargs": "12.0.5" + "yargs": "^13.3.2" }, "dependencies": { "ansi-regex": { @@ -7886,94 +7927,27 @@ "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=", "dev": true }, - "cliui": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.1.0.tgz", - "integrity": "sha512-4FG+RSG9DL7uEwRUZXZn3SS34DiDPfzP0VOiEwtUWlE+AR2EIg+hSyvrIgUUfhdgR/UkAeW2QHgeP+hWrXs7jQ==", - "dev": true, - "requires": { - "string-width": "^2.1.1", - "strip-ansi": "^4.0.0", - "wrap-ansi": "^2.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } - } - }, "debug": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "dev": true, "requires": { - "ms": "^2.1.1" + "ms": "2.1.2" } }, - "get-caller-file": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz", - "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w==", - "dev": true - }, "ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", "dev": true }, - "require-main-filename": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz", - "integrity": "sha1-l/cXtp1IeE9fUmpsWqj/3aBVpNE=", - "dev": true - }, "semver": { "version": "6.3.0", "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", "dev": true }, - "string-width": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz", - "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==", - "dev": true, - "requires": { - "is-fullwidth-code-point": "^2.0.0", - "strip-ansi": "^4.0.0" - }, - "dependencies": { - "ansi-regex": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz", - "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=", - "dev": true - }, - "strip-ansi": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz", - "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=", - "dev": true, - "requires": { - "ansi-regex": "^3.0.0" - } - } - } - }, "strip-ansi": { "version": "3.0.1", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz", @@ -7983,66 +7957,22 @@ "ansi-regex": "^2.0.0" } }, - "wrap-ansi": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-2.1.0.tgz", - "integrity": "sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU=", - "dev": true, - "requires": { - "string-width": "^1.0.1", - "strip-ansi": "^3.0.1" - }, - "dependencies": { - "is-fullwidth-code-point": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz", - "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=", - "dev": true, - "requires": { - "number-is-nan": "^1.0.0" - } - }, - "string-width": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz", - "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=", - "dev": true, - "requires": { - "code-point-at": "^1.0.0", - "is-fullwidth-code-point": "^1.0.0", - "strip-ansi": "^3.0.0" - } - } - } - }, "yargs": { - "version": "12.0.5", - "resolved": "https://registry.npmjs.org/yargs/-/yargs-12.0.5.tgz", - "integrity": "sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==", + "version": "13.3.2", + "resolved": "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz", + "integrity": "sha512-AX3Zw5iPruN5ie6xGRIDgqkT+ZhnRlZMLMHAs8tg7nRruy2Nb+i5o9bwghAogtM08q1dpr2LVoS8KSTMYpWXUw==", "dev": true, "requires": { - "cliui": "^4.0.0", - "decamelize": "^1.2.0", + "cliui": "^5.0.0", "find-up": "^3.0.0", - "get-caller-file": "^1.0.1", - "os-locale": "^3.0.0", + "get-caller-file": "^2.0.1", "require-directory": "^2.1.1", - "require-main-filename": "^1.0.1", + "require-main-filename": "^2.0.0", "set-blocking": "^2.0.0", - "string-width": "^2.0.0", + "string-width": "^3.0.0", "which-module": "^2.0.0", - "y18n": "^3.2.1 || ^4.0.0", - "yargs-parser": "^11.1.1" - } - }, - "yargs-parser": { - "version": "11.1.1", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-11.1.1.tgz", - "integrity": "sha512-C6kB/WJDiaxONLJQnF8ccx9SEeoTTLek8RVbaOIsrAUS8VrBEXfmeSnCZxygc+XC2sNMBIwOOnfcxiynjHsVSQ==", - "dev": true, - "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" + "y18n": "^4.0.0", + "yargs-parser": "^13.1.2" } } } @@ -8074,12 +8004,12 @@ } }, "websocket-driver": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.3.tgz", - "integrity": "sha512-bpxWlvbbB459Mlipc5GBzzZwhoZgGEZLuqPaR0INBGnPAY1vdBX6hPnoFXiw+3yWxDuHyQjO2oXTMyS8A5haFg==", + "version": "0.7.4", + "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz", + "integrity": "sha512-b17KeDIQVjvb0ssuSDF2cYXSg2iztliJ4B9WdsuB6J952qCPKmnVq4DyW5motImXHDC1cBT/1UezrJVsKw5zjg==", "dev": true, "requires": { - "http-parser-js": ">=0.4.0 <0.4.11", + "http-parser-js": ">=0.5.1", "safe-buffer": ">=5.1.0", "websocket-extensions": ">=0.1.1" } diff --git a/package.json b/package.json index 4314cc4..e426003 100644 --- a/package.json +++ b/package.json @@ -37,7 +37,7 @@ "gulp-minify-css": "^1.2.4", "mini-css-extract-plugin": "^0.9.0", "webpack-cli": "^3.3.11", - "webpack-dev-server": "^3.10.3" + "webpack-dev-server": "^3.11.2" }, "dependencies": { "webpack": "^4.42.1" diff --git a/src/drawflow.css b/src/drawflow.css index 7144a1b..a3137d8 100644 --- a/src/drawflow.css +++ b/src/drawflow.css @@ -19,17 +19,16 @@ } .drawflow .drawflow-node { - display: flex; - align-items: center; + display: inline-flex; + flex-direction: column; position: absolute; background: cyan; - width: 160px; min-height: 40px; border-radius:4px; border: 2px solid black; color: black; z-index: 2; - padding: 15px; + min-width: 200px; } .drawflow .drawflow-node.selected { @@ -39,8 +38,34 @@ cursor: move; } -.drawflow .drawflow-node .inputs, .drawflow .drawflow-node .outputs { - width: 0px; +/* Collapse header over content */ +.drawflow .drawflow-node.collapsed-head .drawflow-node-header { + position: absolute; + width: 100%; + height: 100%; + display: grid; + align-items: center; + background-color: aqua; +} + +.drawflow .drawflow-node .drawflow-node-content { + display: inline-flex; + flex-grow: 2; + max-width: 600px; +} + +.drawflow .drawflow-node .drawflow-node-content .inputs { + text-align: left; + padding: 10px 0 10px 0; + display: grid; + grid-template-columns: 15px auto; +} + +.drawflow .drawflow-node .drawflow-node-content .outputs { + text-align: right; + padding: 10px 0 10px 0; + display: grid; + grid-template-columns: auto 15px; } .drawflow .drawflow-node .drawflow_content_node { @@ -48,8 +73,24 @@ display: block; } -.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { +.drawflow .drawflow-node .input-label { + width: max-content; + z-index: 1; + padding-left: 5px; +} + +.drawflow .drawflow-node .output-label { + width: max-content; + z-index: 1; + padding-right: 5px; + justify-self: end; +} + +.drawflow .drawflow-node .input-dummy, .drawflow .drawflow-node .output-dummy { + min-width: 15px; +} +.drawflow .drawflow-node .input, .drawflow .drawflow-node .output { position: relative; width: 20px; height: 20px; @@ -62,12 +103,12 @@ } .drawflow .drawflow-node .input { - left: -27px; + left: -10px; top: 2px; background: yellow; } .drawflow .drawflow-node .output { - right: -3px; + right: -10px; top: 2px; } diff --git a/src/drawflow.js b/src/drawflow.js index e5470c0..11e6627 100644 --- a/src/drawflow.js +++ b/src/drawflow.js @@ -31,8 +31,8 @@ export default class Drawflow { this.force_first_input = false; this.draggable_inputs = true; this.useuuid = false; - - + this.checkInOutType = false; + this.singleConnectionForTypedInput = false; this.select_elements = null; this.noderegister = {}; @@ -194,8 +194,9 @@ export default class Drawflow { this.contextmenuDel(); } - if(e.target.closest(".drawflow_content_node") != null) { - this.ele_selected = e.target.closest(".drawflow_content_node").parentElement; + // Closest element not output/input or connection, then select the node + if((e.target.closest(".output") == null && e.target.closest(".input") == null && e.target.closest(".connection") == null) && e.target.closest(".drawflow-node") != null) { + this.ele_selected = e.target.closest(".drawflow-node"); } } switch (this.ele_selected.classList[0]) { @@ -470,35 +471,68 @@ export default class Drawflow { } else { - // Fix connection; - var input_id = ele_last.parentElement.parentElement.id; + // Fix connection (get input node id if none) + var input_id = ele_last.closest('.drawflow-node').id; var input_class = ele_last.classList[1]; } - var output_id = this.ele_selected.parentElement.parentElement.id; + // Get ouput node id + var output_id = this.ele_selected.closest('.drawflow-node').id; var output_class = this.ele_selected.classList[1]; if(output_id !== input_id && input_class !== false) { - + // This checks if there is already a connection between the same ouput/input if(this.container.querySelectorAll('.connection.node_in_'+input_id+'.node_out_'+output_id+'.'+output_class+'.'+input_class).length === 0) { - // Conection no exist save connection - - this.connection_ele.classList.add("node_in_"+input_id); - this.connection_ele.classList.add("node_out_"+output_id); - this.connection_ele.classList.add(output_class); - this.connection_ele.classList.add(input_class); - var id_input = input_id.slice(5); - var id_output = output_id.slice(5); - - this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].connections.push( {"node": id_input, "output": input_class}); - this.drawflow.drawflow[this.module].data[id_input].inputs[input_class].connections.push( {"node": id_output, "input": output_class}); - this.updateConnectionNodes('node-'+id_output); - this.updateConnectionNodes('node-'+id_input); - this.dispatch('connectionCreated', { output_id: id_output, input_id: id_input, output_class: output_class, input_class: input_class}); - - } else { - this.dispatch('connectionCancel', true); - this.connection_ele.remove(); - } + var id_input = input_id.slice(5); + var id_output = output_id.slice(5); + // Test connection type matches between input and output + if((this.checkInOutType && this.checkConnectionTypes(id_input, input_class, id_output, output_class)) || !this.checkInOutType) { + var alreadyLinked = false; + // If there is a type and singleConnectionForTypedInput = true, then we must check if there is already a link here + if(this.drawflow.drawflow[this.module].data[id_input].inputs[input_class].type && this.singleConnectionForTypedInput) { + if(this.container.querySelectorAll('.node_in_'+input_id+'.'+input_class).length > 0) + alreadyLinked = true; + } + // If not already linked to something, we can add the connection + if(!alreadyLinked) { + // Conection no exist save connection + this.connection_ele.classList.add("node_in_"+input_id); + this.connection_ele.classList.add("node_out_"+output_id); + this.connection_ele.classList.add(output_class); + this.connection_ele.classList.add(input_class); + this.connection_ele.setAttribute("type", this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].type); + + this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].connections.push( {"node": id_input, "output": input_class}); + this.drawflow.drawflow[this.module].data[id_input].inputs[input_class].connections.push( {"node": id_output, "input": output_class}); + + // Add "linked" style to both input/output element + var output = document.querySelector('#'+output_id+' .'+output_class); + if(output && !output.classList.contains('linked')) + output.classList.add("linked"); + var input = document.querySelector('#'+input_id+' .'+input_class); + if(input && !input.classList.contains('linked')) + input.classList.add("linked"); + + this.updateConnectionNodes('node-'+id_output); + this.updateConnectionNodes('node-'+id_input); + this.dispatch('connectionCreated', { output_id: id_output, input_id: id_input, output_class: output_class, input_class: input_class}); + } + else { + console.log("There is already an output linked to the input: " + input_class + " for node: " + id_input); + this.dispatch('connectionCancel', true); + this.connection_ele.remove(); + } + } + else { + console.log("Input and output type don't match"); + this.dispatch('connectionCancel', true); + this.connection_ele.remove(); + } + + } + else { + this.dispatch('connectionCancel', true); + this.connection_ele.remove(); + } this.connection_ele = null; } else { @@ -521,8 +555,13 @@ export default class Drawflow { this.connection = false; this.ele_selected = null; this.editor_selected = false; - } + + // Can be overriden with custom logic in order to constraint connection between outputs/inputs + checkConnectionTypes(input_id, input_class, output_id, output_class) { + return this.drawflow.drawflow[this.module].data[output_id].outputs[output_class].type == this.drawflow.drawflow[this.module].data[input_id].inputs[input_class].type; + } + contextmenu(e) { this.dispatch('contextmenu', e); e.preventDefault(); @@ -672,8 +711,11 @@ export default class Drawflow { connection.classList.add("connection"); connection.appendChild(path); this.precanvas.appendChild(connection); - var id_output = ele.parentElement.parentElement.id.slice(5); + // Retrieve output node Id + var id_output = ele.closest('.drawflow-node').id.slice(5); var output_class = ele.classList[1]; + // Apply same type to connection from 'output' + connection.setAttribute("type", this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].type); this.dispatch('connectionStart', { output_id: id_output, output_class: output_class }); } @@ -729,24 +771,40 @@ export default class Drawflow { this.drawflow.drawflow[nodeOneModule].data[id_input].inputs[input_class].connections.push( {"node": id_output.toString(), "input": output_class}); if(this.module === nodeOneModule) { - //Draw connection - 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-"+id_input); - connection.classList.add("node_out_node-"+id_output); - connection.classList.add(output_class); - connection.classList.add(input_class); - connection.appendChild(path); - this.precanvas.appendChild(connection); - this.updateConnectionNodes('node-'+id_output); - this.updateConnectionNodes('node-'+id_input); - } - - this.dispatch('connectionCreated', { output_id: id_output, input_id: id_input, output_class: output_class, input_class: input_class}); + // Check type matches + if((this.checkInOutType && this.checkConnectionTypes(id_input, input_class, id_output, output_class)) || !this.checkInOutType) { + //Draw connection + 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-"+id_input); + connection.classList.add("node_out_node-"+id_output); + connection.classList.add(output_class); + connection.classList.add(input_class); + // Apply output type to connection + connection.setAttribute("type", this.drawflow.drawflow[this.module].data[id_output].outputs[output_class].type); + connection.appendChild(path); + + // Add "linked" style to both input/output element + var output = document.querySelector('#node-'+id_output+' .'+output_class); + if(output && !output.classList.contains('linked')) + output.classList.add("linked"); + var input = document.querySelector('#node-'+id_input+' .'+input_class); + if(input && !input.classList.contains('linked')) + input.classList.add("linked"); + + this.precanvas.appendChild(connection); + this.updateConnectionNodes('node-'+id_output); + this.updateConnectionNodes('node-'+id_input); + + this.dispatch('connectionCreated', { output_id: id_output, input_id: id_input, output_class: output_class, input_class: input_class}); + } + else + console.log("Input " + id_input + input_class + " and ouput " + id_output + output_class + " types don't match"); + } } } } @@ -1323,8 +1381,33 @@ export default class Drawflow { }); return nodes; } - + + // DEPRECATED - please use the addNode below to use array of inputs/outputs and separated nodeContents addNode (name, num_in, num_out, ele_pos_x, ele_pos_y, classoverride, data, html, typenode = false) { + const json_inputs = []; + for(var x = 0; x < num_in; x++) { + json_inputs.push({'label' : '', 'type': undefined}); + } + + const json_outputs = []; + for(var x = 0; x < num_out; x++) { + json_outputs.push({'label' : '', 'type': undefined}); + } + + const nodeContents = {}; + nodeContents['headerContent'] = ''; + nodeContents['html'] = html; + nodeContents['footerContent'] = ''; + addNode(name, json_inputs, json_outputs, ele_pos_x, ele_pos_y, classoverride, data, nodeContents, typenode); + } + + // New addNode that use array to define inputs/outputs + Array to defined individual node contents (header/middle content/footer) + // Inputs/Outputs data should be arrays using this data struct [{'keyname': 'test_input', 'label': '

Test input

', 'type': 'number'}, {...}] + // 'keyname' is a keyname that can be used for exemple to link a data value to an input inside the 'middle content' of the node + // 'label' is the label shown next to the input, + // 'type' can be whatever you want in to order to constraint connections from output to input only to same type (see checkConnectionTypes() and checkInOutType bool) + // nodeContents should follow this data struct {'headerContent': '

Node title

', 'html': '
It s content
', 'footerContent': '

Node footer content

'} + addNode (name, inputsData, outputsData, ele_pos_x, ele_pos_y, classoverride, data, nodeContents, typenode = false) { if (this.useuuid) { var newNodeId = this.getUuid(); } else { @@ -1341,56 +1424,95 @@ export default class Drawflow { node.classList.add(classoverride); } + // HEADER - Can be used to define a node header + const nodeHeader = document.createElement('div'); + nodeHeader.innerHTML = nodeContents.headerContent ? nodeContents.headerContent : ""; + nodeHeader.classList.add("drawflow-node-header"); + + // CONTENT - flex column that contains inputs/outputs and content divs + const nodeContent = document.createElement('div'); + nodeContent.classList.add("drawflow-node-content"); + // Inputs div const inputs = document.createElement('div'); inputs.classList.add("inputs"); + // Outputs div const outputs = document.createElement('div'); outputs.classList.add("outputs"); - - const json_inputs = {} - for(var x = 0; x < num_in; x++) { + for(var x = 0; x < inputsData.length; x++) { + const inputData = inputsData[x]; + // Input hook div const input = document.createElement('div'); input.classList.add("input"); input.classList.add("input_"+(x+1)); - json_inputs["input_"+(x+1)] = { "connections": []}; + if(inputData.type != "") + input.setAttribute("type", inputData.type); + json_inputs["input_"+(x+1)] = { "label": inputData.label, "type": inputData.type, "connections": []}; inputs.appendChild(input); + + // Input label div + const inputLabel = document.createElement('div'); + inputLabel.classList.add("input-label"); + inputLabel.classList.add("input-label_input_"+(x+1)); + if(inputData.type) + inputLabel.setAttribute("type", inputData.type); + if(inputData.label) + inputLabel.innerHTML = inputData.label; + inputs.appendChild(inputLabel); } const json_outputs = {} - for(var x = 0; x < num_out; x++) { + for(var x = 0; x < outputsData.length; x++) { + const outputData = outputsData[x]; + // Output label div + const outputLabel = document.createElement('div'); + outputLabel.classList.add("output-label"); + outputLabel.classList.add("output-label_output_"+(x+1)); + if(outputData.type) + outputLabel.setAttribute("type", outputData.type); + if(outputData.label) + outputLabel.innerHTML = outputData.label; + outputs.appendChild(outputLabel); + + // Output hook div const output = document.createElement('div'); output.classList.add("output"); output.classList.add("output_"+(x+1)); - json_outputs["output_"+(x+1)] = { "connections": []}; + if(outputData.type) + output.setAttribute("type", outputData.type); + json_outputs["output_"+(x+1)] = { "label": outputData.label, "type": outputData.type, "connections": []}; outputs.appendChild(output); } + // Content in between inputs and outputs const content = document.createElement('div'); content.classList.add("drawflow_content_node"); + if(typenode === false) { - content.innerHTML = html; + content.innerHTML = nodeContents.html; } else if (typenode === true) { - content.appendChild(this.noderegister[html].html.cloneNode(true)); + content.appendChild(this.noderegister[nodeContents.html].html.cloneNode(true)); } else { if(parseInt(this.render.version) === 3 ) { //Vue 3 let wrapper = this.render.createApp({ - render: h => this.render.h(this.noderegister[html].html, this.noderegister[html].props, this.noderegister[html].options) + render: h => this.render.h(this.noderegister[nodeContents.html].html, this.noderegister[nodeContents.html].props, this.noderegister[nodeContents.html].options) }).mount(content) } else { // Vue 2 let wrapper = new this.render({ - render: h => h(this.noderegister[html].html, { props: this.noderegister[html].props }), - ...this.noderegister[html].options + render: h => h(this.noderegister[nodeContents.html].html, { props: this.noderegister[nodeContents.html].props }), + ...this.noderegister[nodeContents.html].options }).$mount() // content.appendChild(wrapper.$el); } } + // Handle any values that need to be assigned Object.entries(data).forEach(function (key, value) { if(typeof key[1] === "object") { insertObjectkeys(null, key[0], key[0]); @@ -1401,7 +1523,6 @@ export default class Drawflow { } } }) - function insertObjectkeys(object, name, completname) { if(object === null) { var object = data[name]; @@ -1421,19 +1542,43 @@ export default class Drawflow { }); } } - node.appendChild(inputs); - node.appendChild(content); - node.appendChild(outputs); + + // FOOTER - Can be used to define a node header + const nodeFooter = document.createElement('div'); + nodeFooter.innerHTML = nodeContents.footerContent ? nodeContents.footerContent : ""; + nodeFooter.classList.add("drawflow-node-footer"); + + // Add header to node + node.appendChild(nodeHeader); + + // Add content to node + node.appendChild(nodeContent); + // Add inputs/ouputs and middle content to content div + nodeContent.appendChild(inputs); + nodeContent.appendChild(content); + nodeContent.appendChild(outputs); + + // Add footer to node + node.appendChild(nodeFooter); + + // Position node node.style.top = ele_pos_y + "px"; node.style.left = ele_pos_x + "px"; + + // Add node to parent-node div parent.appendChild(node); + // Add parent-node to drawflow div this.precanvas.appendChild(parent); + + // Save the node data in drawflow json var json = { id: newNodeId, name: name, data: data, class: classoverride, - html: html, + headerContent: nodeContents.headerContent, + html: nodeContents.html, + footerContent: nodeContents.footerContent, typenode: typenode, inputs: json_inputs, outputs: json_outputs, @@ -1460,19 +1605,47 @@ export default class Drawflow { node.classList.add(dataNode.class); } + // HEADER - Can be used to define a node header + const nodeHeader = document.createElement('div'); + nodeHeader.innerHTML = dataNode.headerContent ? dataNode.headerContent : ""; + nodeHeader.classList.add("drawflow-node-header"); + + // CONTENT - flex column that contains inputs/outputs and content divs + const nodeContent = document.createElement('div'); + nodeContent.classList.add("drawflow-node-content"); + + // Inputs div const inputs = document.createElement('div'); inputs.classList.add("inputs"); + // Outputs div const outputs = document.createElement('div'); outputs.classList.add("outputs"); + // Inputs parsing Object.keys(dataNode.inputs).map(function(input_item, index) { + // Input hook div const input = document.createElement('div'); input.classList.add("input"); input.classList.add(input_item); + if(dataNode.inputs[input_item].type) + input.setAttribute("type", dataNode.inputs[input_item].type); + // Test is there is a connection then add the "linked" class + if(dataNode.inputs[input_item].connections.length > 0) + input.classList.add("linked"); inputs.appendChild(input); + + // Input label div + const inputLabel = document.createElement('div'); + inputLabel.classList.add("input-label"); + inputLabel.classList.add("input-label_input_"+(index++)); + if(dataNode.inputs[input_item].type) + inputLabel.setAttribute("type", dataNode.inputs[input_item].type); + if(dataNode.inputs[input_item].label) + inputLabel.innerHTML = dataNode.inputs[input_item].label; + inputs.appendChild(inputLabel); + 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"); @@ -1483,24 +1656,50 @@ export default class Drawflow { 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.setAttribute("type", dataNode.inputs[input_item].type); + 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); - } - + // Add a dummy div to inputs to have min width on inputs grid + const inputDummy = document.createElement('div'); + inputDummy.classList.add("input-dummy"); + inputs.appendChild(inputDummy); + + // Outputs parsing + Object.keys(dataNode.outputs).map((function (output_item, i) { + // Output label div + const outputLabel = document.createElement('div'); + outputLabel.classList.add("output-label"); + outputLabel.classList.add("output-label_output_"+(i++)); + if(dataNode.outputs[output_item].type) + outputLabel.setAttribute("type", dataNode.outputs[output_item].type); + if(dataNode.outputs[output_item].label) + outputLabel.innerHTML = dataNode.outputs[output_item].label; + outputs.appendChild(outputLabel); + + // Output hook div + const output = document.createElement("div"); + output.classList.add("output"); + output.classList.add(output_item); + //Making sure to add the type + if(dataNode.outputs[output_item].type) + output.setAttribute("type", dataNode.outputs[output_item].type); + // Test is there is a connection then add the "linked" class + if(dataNode.outputs[output_item].connections.length > 0) + output.classList.add("linked"); + outputs.appendChild(output); + })); + // Add a dummy div to outputs to have min width on outputs grid + const outputDummy = document.createElement('div'); + outputDummy.classList.add("output-dummy"); + outputs.appendChild(outputDummy); + + // Content in between inputs and outputs const content = document.createElement('div'); content.classList.add("drawflow_content_node"); - //content.innerHTML = dataNode.html; if(dataNode.typenode === false) { content.innerHTML = dataNode.html; @@ -1522,8 +1721,7 @@ export default class Drawflow { } } - - + // Handle any data values registered for this node Object.entries(dataNode.data).forEach(function (key, value) { if(typeof key[1] === "object") { insertObjectkeys(null, key[0], key[0]); @@ -1534,7 +1732,6 @@ export default class Drawflow { } } }) - function insertObjectkeys(object, name, completname) { if(object === null) { var object = dataNode.data[name]; @@ -1554,12 +1751,32 @@ export default class Drawflow { }); } } - node.appendChild(inputs); - node.appendChild(content); - node.appendChild(outputs); + + // FOOTER - Can be used to define a node header + const nodeFooter = document.createElement('div'); + nodeFooter.innerHTML = dataNode.footerContent ? dataNode.footerContent : ""; + nodeFooter.classList.add("drawflow-node-footer"); + + // Add header to node + node.appendChild(nodeHeader); + + // Add content to node + node.appendChild(nodeContent); + // Add inputs/ouputs and middle content to content div + nodeContent.appendChild(inputs); + nodeContent.appendChild(content); + nodeContent.appendChild(outputs); + + // Add footer to node + node.appendChild(nodeFooter); + + // Move node to right positions node.style.top = dataNode.pos_y + "px"; node.style.left = dataNode.pos_x + "px"; + + // Add node to parent-node div parent.appendChild(node); + // Add parent-node to drawflow this.precanvas.appendChild(parent); } @@ -1659,37 +1876,93 @@ export default class Drawflow { } addNodeInput(id) { + addNodeInput(id, undefined); + } + addNodeInput(id, type) { + addNodeInput(id, type, ''); + } + addNodeInput(id, type, label) { var moduleName = this.getModuleFromNodeId(id) const infoNode = this.getNodeFromId(id) const numInputs = Object.keys(infoNode.inputs).length; if(this.module === moduleName) { - //Draw input - const input = document.createElement('div'); - input.classList.add("input"); - input.classList.add("input_"+(numInputs+1)); - const parent = document.querySelector('#node-'+id+' .inputs'); - parent.appendChild(input); - this.updateConnectionNodes('node-'+id); - + //Draw input + const input = document.createElement('div'); + input.classList.add("input"); + input.classList.add("input_"+(numInputs+1)); + if(type) + input.setAttribute("type", type); + + // Input label div + const inputLabel = document.createElement('div'); + inputLabel.classList.add("input-label"); + inputLabel.classList.add("input-label_input_"+(numInputs+1)); + if(type) + inputLabel.setAttribute("type", type); + if(label) + inputLabel.innerHTML = label; + + const parent = document.querySelector('#node-'+id+' .inputs'); + parent.appendChild(input); + parent.appendChild(inputLabel); + this.updateConnectionNodes('node-'+id); } - this.drawflow.drawflow[moduleName].data[id].inputs["input_"+(numInputs+1)] = { "connections": []}; + this.drawflow.drawflow[moduleName].data[id].inputs["input_"+(numInputs+1)] = { + "label": label, + "type": type, + "connections": [] + }; + } + + changeNodeInputType(module, node_id, input_class, newType) { + this.drawflow.drawflow[module].data[node_id].inputs[input_class].type = newType; + var divInput = document.querySelector("#node-" + node_id + " ." + input_class); + divInput.setAttribute("type", newType); } addNodeOutput(id) { + addNodeOutput(id, undefined); + } + addNodeOutput(id, type) { + addNodeOutput(id, type, ''); + } + addNodeOutput(id, type, label) { var moduleName = this.getModuleFromNodeId(id) const infoNode = this.getNodeFromId(id) const numOutputs = Object.keys(infoNode.outputs).length; if(this.module === moduleName) { - //Draw output - const output = document.createElement('div'); - output.classList.add("output"); - output.classList.add("output_"+(numOutputs+1)); - const parent = document.querySelector('#node-'+id+' .outputs'); - parent.appendChild(output); - this.updateConnectionNodes('node-'+id); - + // Output label div + const outputLabel = document.createElement('div'); + outputLabel.classList.add("output-label"); + outputLabel.classList.add("output-label_output_"+(numOutputs+1)); + if(type) + outputLabel.setAttribute("type", type); + if(label) + outputLabel.innerHTML = label; + + //Draw output + const output = document.createElement('div'); + output.classList.add("output"); + output.classList.add("output_"+(numOutputs+1)); + if(type) + output.setAttribute("type", type); + + const parent = document.querySelector('#node-'+id+' .outputs'); + parent.appendChild(outputLabel); + parent.appendChild(output); + this.updateConnectionNodes('node-'+id); } - this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = { "connections": []}; + this.drawflow.drawflow[moduleName].data[id].outputs["output_"+(numOutputs+1)] = { + "label": label, + "type": type, + "connections": [] + }; + } + + changeNodeOutputType(module, node_id, output_class, newType) { + this.drawflow.drawflow[module].data[node_id].outputs[output_class].type = newType; + var divOutput = document.querySelector("#node-" + node_id + " ." + output_class); + divOutput.setAttribute("type", newType); } removeNodeInput(id, input_class) { @@ -1865,6 +2138,15 @@ export default class Drawflow { return item.node === listclass[2].slice(14) && item.input === listclass[3] }); this.drawflow.drawflow[this.module].data[listclass[1].slice(13)].inputs[listclass[4]].connections.splice(index_in,1); + + // Retrieve output/input linked to the connection and remove "linked" class + var output = document.querySelector('#node-'+ listclass[2].slice(14) + ' .' + listclass[3]); + if(output && output.classList.contains('linked') && document.querySelectorAll('.node_out_node-'+ listclass[2].slice(14) + '.' + listclass[3]).length == 0) + output.classList.remove("linked"); + var input = document.querySelector('#node-' + listclass[1].slice(13) + ' .' + listclass[4]); + if(input && input.classList.contains('linked') && document.querySelectorAll('.node_in_node-'+ listclass[1].slice(13) + '.' + listclass[4]).length == 0) + input.classList.remove("linked"); + this.dispatch('connectionRemoved', { output_id: listclass[2].slice(14), input_id: listclass[1].slice(13), output_class: listclass[3], input_class: listclass[4] } ); this.connection_selected = null; }