flowy.min.js

var flowy=function(e,t,l,i,o,n){t||(t=function(){}),l||(l=function(){}),i||(i=function(){return!0}),o||(o=20),n||(n=80);var r=!1;function d(e,t,l){return i(e,t,l)}flowy.load=function(){if(!r){r=!0;var i,c,a,s,u,p,w=[],f=[],g=e,h=!1,y=o,v=n,C=0,m=0,x=!1,S=!1,B=!1,L=document.createElement("DIV");L.classList.add("indicator"),L.classList.add("invisible"),g.appendChild(L),flowy.import=function(e){g.innerHTML=JSON.parse(e.html),w=e.blockarr},flowy.output=function(){var e={html:JSON.stringify(g.innerHTML),blockarr:w,blocks:[]};if(w.length>0){for(var t=0;t<w.length;t++){e.blocks.push({id:w[t].id,parent:w[t].parent,data:[],attr:[]});var l=document.querySelector(".blockid[value='"+w[t].id+"']").parentNode;l.querySelectorAll("input").forEach(function(l){var i=l.getAttribute("name"),o=l.value;e.blocks[t].data.push({name:i,value:o})}),Array.prototype.slice.call(l.attributes).forEach(function(l){var i={};i[l.name]=l.value,e.blocks[t].attr.push(i)})}return e}},flowy.deleteBlocks=function(){w=[],g.innerHTML="<div class='indicator invisible'></div>"},flowy.beginDrag=function(e){if(e.targetTouches?(u=e.changedTouches[0].clientX,p=e.changedTouches[0].clientY):(u=e.clientX,p=e.clientY),3!=e.which&&e.target.closest(".create-flowy")){s=e.target.closest(".create-flowy");var l=e.target.closest(".create-flowy").cloneNode(!0);e.target.closest(".create-flowy").classList.add("dragnow"),l.classList.add("block"),l.classList.remove("create-flowy"),0===w.length?(l.innerHTML+="<input type='hidden' name='blockid' class='blockid' value='"+w.length+"'>",document.body.appendChild(l),i=document.querySelector(".blockid[value='"+w.length+"']").parentNode):(l.innerHTML+="<input type='hidden' name='blockid' class='blockid' value='"+(Math.max.apply(Math,w.map(e=>e.id))+1)+"'>",document.body.appendChild(l),i=document.querySelector(".blockid[value='"+(parseInt(Math.max.apply(Math,w.map(e=>e.id)))+1)+"']").parentNode),o=e.target.closest(".create-flowy"),t(o),i.classList.add("dragging"),h=!0,c=u-e.target.closest(".create-flowy").offsetLeft,a=p-e.target.closest(".create-flowy").offsetTop,i.style.left=u-c+"px",i.style.top=p-a+"px"}var o},document.addEventListener("mousedown",b,!1),document.addEventListener("touchstart",b,!1),document.addEventListener("mouseup",b,!1),flowy.touchDone=function(){B=!1},document.addEventListener("mousedown",flowy.beginDrag),document.addEventListener("touchstart",flowy.beginDrag),flowy.endDrag=function(e){if(3!=e.which&&(h||x))if(B=!1,l(),document.querySelector(".indicator").classList.contains("invisible")||document.querySelector(".indicator").classList.add("invisible"),h&&(s.classList.remove("dragnow"),i.classList.remove("dragging")),0===parseInt(i.querySelector(".blockid").value)&&x){i.classList.remove("dragging"),x=!1;for(var t=0;t<f.length;t++)if(f[t].id!=parseInt(i.querySelector(".blockid").value)){const e=document.querySelector(".blockid[value='"+f[t].id+"']").parentNode,l=document.querySelector(".arrowid[value='"+f[t].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft,e.style.top=e.getBoundingClientRect().top+window.scrollY-(g.getBoundingClientRect().top+window.scrollY)+g.scrollTop,l.style.left=l.getBoundingClientRect().left+window.scrollX-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft,l.style.top=l.getBoundingClientRect().top+window.scrollY-(g.getBoundingClientRect().top+g.scrollTop)+"px",g.appendChild(e),g.appendChild(l),f[t].x=e.getBoundingClientRect().left+window.scrollX+parseInt(e.offsetWidth)/2+g.scrollLeft,f[t].y=e.getBoundingClientRect().top+window.scrollY+parseInt(e.offsetHeight)/2+g.scrollTop}f.filter(e=>0==e.id)[0].x=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2,f.filter(e=>0==e.id)[0].y=i.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(i).height)/2,w=w.concat(f),f=[]}else if(h&&0==w.length&&i.getBoundingClientRect().top+window.scrollY>g.getBoundingClientRect().top+window.scrollY&&i.getBoundingClientRect().left+window.scrollX>g.getBoundingClientRect().left+window.scrollX)d(i,!0,void 0),h=!1,i.style.top=i.getBoundingClientRect().top+window.scrollY-(g.getBoundingClientRect().top+window.scrollY)+g.scrollTop+"px",i.style.left=i.getBoundingClientRect().left+window.scrollX-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+"px",g.appendChild(i),w.push({parent:-1,childwidth:0,id:parseInt(i.querySelector(".blockid").value),x:i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+g.scrollLeft,y:i.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(i).height)/2+g.scrollTop,width:parseInt(window.getComputedStyle(i).width),height:parseInt(window.getComputedStyle(i).height)});else if(h&&0==w.length)g.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i);else if(h||x)for(var o=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+g.scrollLeft,n=i.getBoundingClientRect().top+window.scrollY+g.scrollTop,r=w.map(e=>e.id),c=0;c<w.length;c++){if(o>=w.filter(e=>e.id==r[c])[0].x-w.filter(e=>e.id==r[c])[0].width/2-y&&o<=w.filter(e=>e.id==r[c])[0].x+w.filter(e=>e.id==r[c])[0].width/2+y&&n>=w.filter(e=>e.id==r[c])[0].y-w.filter(e=>e.id==r[c])[0].height/2&&n<=w.filter(e=>e.id==r[c])[0].y+w.filter(e=>e.id==r[c])[0].height){h=!1,!x&&d(i,!1,w.filter(e=>e.id==r[c])[0])?R(i,c,r):x&&R(i,c,r);break}c==w.length-1&&(x&&(x=!1,f=[]),h=!1,g.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i))}},document.addEventListener("mouseup",flowy.endDrag,!1),document.addEventListener("touchend",flowy.endDrag,!1),flowy.moveBlock=function(e){if(e.targetTouches?(u=e.targetTouches[0].clientX,p=e.targetTouches[0].clientY):(u=e.clientX,p=e.clientY),B){x=!0,i.classList.add("dragging");var t=parseInt(i.querySelector(".blockid").value);f.push(w.filter(e=>e.id==t)[0]),w=w.filter(function(e){return e.id!=t}),0!=t&&document.querySelector(".arrowid[value='"+t+"']").parentNode.remove();for(var l=w.filter(e=>e.parent==t),o=!1,n=[],r=[];!o;){for(var d=0;d<l.length;d++)if(l[d]!=t){f.push(w.filter(e=>e.id==l[d].id)[0]);const e=document.querySelector(".blockid[value='"+l[d].id+"']").parentNode,t=document.querySelector(".arrowid[value='"+l[d].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(i.getBoundingClientRect().left+window.scrollX),e.style.top=e.getBoundingClientRect().top+window.scrollY-(i.getBoundingClientRect().top+window.scrollY),t.style.left=t.getBoundingClientRect().left+window.scrollX-(i.getBoundingClientRect().left+window.scrollX),t.style.top=t.getBoundingClientRect().top+window.scrollY-(i.getBoundingClientRect().top+window.scrollY),i.appendChild(e),i.appendChild(t),n.push(l[d].id),r.push(l[d].id)}0==n.length?o=!0:(l=w.filter(e=>n.includes(e.parent)),n=[])}for(d=0;d<w.filter(e=>e.parent==t).length;d++){var s=w.filter(e=>e.parent==t)[d];w=w.filter(function(e){return e.id!=s})}for(d=0;d<r.length;d++){s=r[d];w=w.filter(function(e){return e.id!=s})}w.length>1&&q(),S&&function(){if(m<g.getBoundingClientRect().left+window.scrollX){S=!1;for(var e=w.map(e=>e.id),t=0;t<w.length;t++)if(document.querySelector(".blockid[value='"+w.filter(l=>l.id==e[t])[0].id+"']").parentNode.style.left=w.filter(l=>l.id==e[t])[0].x-w.filter(l=>l.id==e[t])[0].width/2-m-20,w.filter(l=>l.id==e[t])[0].x=document.querySelector(".blockid[value='"+w.filter(l=>l.id==e[t])[0].id+"']").parentNode.getBoundingClientRect().left+window.scrollX+w.filter(l=>l.id==e[t])[0].width/2,-1!=w.filter(l=>l.id==e[t])[0].parent){var l=w.filter(l=>l.id==e[t])[0],i=l.x-w.filter(l=>l.id==w.filter(l=>l.id==e[t])[0].parent)[0].x;document.querySelector('.arrowid[value="'+e[t]+'"]').parentNode.style.left=i<0?l.x-5-(g.getBoundingClientRect().left+window.scrollX)+"px":w.filter(l=>l.id==w.filter(l=>l.id==e[t])[0].parent)[0].x-20-(g.getBoundingClientRect().left+window.scrollX)+"px"}m=0}}(),B=!1}if(h?(i.style.left=u-c+"px",i.style.top=p-a+"px"):x&&(i.style.left=u-c-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+"px",i.style.top=p-a-(g.getBoundingClientRect().top+window.scrollY)+g.scrollTop+"px",f.filter(e=>e.id==parseInt(i.querySelector(".blockid").value)).x=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+g.scrollLeft,f.filter(e=>e.id==parseInt(i.querySelector(".blockid").value)).y=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).height)/2+g.scrollTop),h||x){var v=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+g.scrollLeft,C=i.getBoundingClientRect().top+window.scrollY+g.scrollTop,L=w.map(e=>e.id);for(d=0;d<w.length;d++){if(v>=w.filter(e=>e.id==L[d])[0].x-w.filter(e=>e.id==L[d])[0].width/2-y&&v<=w.filter(e=>e.id==L[d])[0].x+w.filter(e=>e.id==L[d])[0].width/2+y&&C>=w.filter(e=>e.id==L[d])[0].y-w.filter(e=>e.id==L[d])[0].height/2&&C<=w.filter(e=>e.id==L[d])[0].y+w.filter(e=>e.id==L[d])[0].height){document.querySelector(".blockid[value='"+L[d]+"']").parentNode.appendChild(document.querySelector(".indicator")),document.querySelector(".indicator").style.left=parseInt(window.getComputedStyle(document.querySelector(".blockid[value='"+L[d]+"']").parentNode).width)/2-5+"px",document.querySelector(".indicator").style.top=window.getComputedStyle(document.querySelector(".blockid[value='"+L[d]+"']").parentNode).height,document.querySelector(".indicator").classList.remove("invisible");break}d==w.length-1&&(document.querySelector(".indicator").classList.contains("invisible")||document.querySelector(".indicator").classList.add("invisible"))}}},document.addEventListener("mousemove",flowy.moveBlock,!1),document.addEventListener("touchmove",flowy.moveBlock,!1)}function R(e,t,l){x||g.appendChild(e);for(var i=0,o=0,n=0;n<w.filter(e=>e.parent==l[t]).length;n++){(p=w.filter(e=>e.parent==l[t])[n]).childwidth>p.width?i+=p.childwidth+y:i+=p.width+y}i+=parseInt(window.getComputedStyle(e).width);for(n=0;n<w.filter(e=>e.parent==l[t]).length;n++){(p=w.filter(e=>e.parent==l[t])[n]).childwidth>p.width?(document.querySelector(".blockid[value='"+p.id+"']").parentNode.style.left=w.filter(e=>e.id==l[t])[0].x-i/2+o+p.childwidth/2-p.width/2+"px",p.x=w.filter(e=>e.parent==l[t])[0].x-i/2+o+p.childwidth/2,o+=p.childwidth+y):(document.querySelector(".blockid[value='"+p.id+"']").parentNode.style.left=w.filter(e=>e.id==l[t])[0].x-i/2+o+"px",p.x=w.filter(e=>e.parent==l[t])[0].x-i/2+o+p.width/2,o+=p.width+y)}if(e.style.left=w.filter(e=>e.id==l[t])[0].x-i/2+o-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+"px",e.style.top=w.filter(e=>e.id==l[t])[0].y+w.filter(e=>e.id==l[t])[0].height/2+v-(g.getBoundingClientRect().top+window.scrollY)+"px",x){f.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0].x=e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+g.scrollLeft+g.scrollLeft,f.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0].y=e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+g.scrollTop,f.filter(t=>t.id==e.querySelector(".blockid").value)[0].parent=l[t];for(n=0;n<f.length;n++)if(f[n].id!=parseInt(e.querySelector(".blockid").value)){const e=document.querySelector(".blockid[value='"+f[n].id+"']").parentNode,t=document.querySelector(".arrowid[value='"+f[n].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft,e.style.top=e.getBoundingClientRect().top+window.scrollY-(g.getBoundingClientRect().top+window.scrollY)+g.scrollTop,t.style.left=t.getBoundingClientRect().left+window.scrollX-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+20,t.style.top=t.getBoundingClientRect().top+window.scrollY-(g.getBoundingClientRect().top+window.scrollY)+g.scrollTop,g.appendChild(e),g.appendChild(t),f[n].x=e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+g.scrollLeft,f[n].y=e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+g.scrollTop}w=w.concat(f),f=[]}else w.push({childwidth:0,parent:l[t],id:parseInt(e.querySelector(".blockid").value),x:e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+g.scrollLeft,y:e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+g.scrollTop,width:parseInt(window.getComputedStyle(e).width),height:parseInt(window.getComputedStyle(e).height)});var r=w.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0],d=r.x-w.filter(e=>e.id==l[t])[0].x+20,c=parseFloat(r.y-r.height/2-(w.filter(e=>e.parent==l[t])[0].y+w.filter(e=>e.parent==l[t])[0].height/2)+g.scrollTop);if(d<0?(g.innerHTML+='<div class="arrowblock"><input type="hidden" class="arrowid" value="'+e.querySelector(".blockid").value+'"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M'+(w.filter(e=>e.id==l[t])[0].x-r.x+5)+" 0L"+(w.filter(e=>e.id==l[t])[0].x-r.x+5)+" "+v/2+"L5 "+v/2+"L5 "+c+'" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 '+(c-5)+"H10L5 "+c+"L0 "+(c-5)+'Z" fill="#C5CCD0"/></svg></div>',document.querySelector('.arrowid[value="'+e.querySelector(".blockid").value+'"]').parentNode.style.left=r.x-5-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+"px"):(g.innerHTML+='<div class="arrowblock"><input type="hidden" class="arrowid" value="'+e.querySelector(".blockid").value+'"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 '+v/2+"L"+d+" "+v/2+"L"+d+" "+c+'" stroke="#C5CCD0" stroke-width="2px"/><path d="M'+(d-5)+" "+(c-5)+"H"+(d+5)+"L"+d+" "+c+"L"+(d-5)+" "+(c-5)+'Z" fill="#C5CCD0"/></svg></div>',document.querySelector('.arrowid[value="'+parseInt(e.querySelector(".blockid").value)+'"]').parentNode.style.left=w.filter(e=>e.id==l[t])[0].x-20-(g.getBoundingClientRect().left+window.scrollX)+g.scrollLeft+"px"),document.querySelector('.arrowid[value="'+parseInt(e.querySelector(".blockid").value)+'"]').parentNode.style.top=w.filter(e=>e.id==l[t])[0].y+w.filter(e=>e.id==l[t])[0].height/2+"px",-1!=w.filter(e=>e.id==l[t])[0].parent){for(var a=!1,s=l[t];!a;)if(-1==w.filter(e=>e.id==s)[0].parent)a=!0;else{var u=0;for(n=0;n<w.filter(e=>e.parent==s).length;n++){var p;(p=w.filter(e=>e.parent==s)[n]).childwidth>p.width?n==w.filter(e=>e.parent==s).length-1?u+=p.childwidth:u+=p.childwidth+y:n==w.filter(e=>e.parent==s).length-1?u+=p.width:u+=p.width+y}w.filter(e=>e.id==s)[0].childwidth=u,s=w.filter(e=>e.id==s)[0].parent}w.filter(e=>e.id==s)[0].childwidth=i}x&&(x=!1,e.classList.remove("dragging")),q(),function(){C=w.map(e=>e.x);var e=w.map(e=>e.width),t=C.map(function(t,l){return t-e[l]/2});if((C=Math.min.apply(Math,t))<g.getBoundingClientRect().left+window.scrollX){S=!0;for(var l=w.map(e=>e.id),i=0;i<w.length;i++)if(document.querySelector(".blockid[value='"+w.filter(e=>e.id==l[i])[0].id+"']").parentNode.style.left=w.filter(e=>e.id==l[i])[0].x-w.filter(e=>e.id==l[i])[0].width/2-C+20,-1!=w.filter(e=>e.id==l[i])[0].parent){var o=w.filter(e=>e.id==l[i])[0],n=o.x-w.filter(e=>e.id==w.filter(e=>e.id==l[i])[0].parent)[0].x;document.querySelector('.arrowid[value="'+l[i]+'"]').parentNode.style.left=n<0?o.x-C+20-5+"px":w.filter(e=>e.id==w.filter(e=>e.id==l[i])[0].parent)[0].x-20-C+20+"px"}for(var i=0;i<w.length;i++)w[i].x=document.querySelector(".blockid[value='"+w[i].id+"']").parentNode.getBoundingClientRect().left+window.scrollX+(g.getBoundingClientRect().left+g.scrollLeft)-parseInt(window.getComputedStyle(document.querySelector(".blockid[value='"+w[i].id+"']").parentNode).width)/2-40;m=C}}()}function b(e){if(B=!1,k(e.target,"block")){var t=e.target.closest(".block");e.targetTouches?(u=e.targetTouches[0].clientX,p=e.targetTouches[0].clientY):(u=e.clientX,p=e.clientY),"mouseup"!==e.type&&k(e.target,"block")&&3!=e.which&&(h||x||(B=!0,c=u-((i=t).getBoundingClientRect().left+window.scrollX),a=p-(i.getBoundingClientRect().top+window.scrollY)))}}function k(e,t){return!!(e.className&&e.className.split(" ").indexOf(t)>=0)||e.parentNode&&k(e.parentNode,t)}function q(){for(var e=w.map(e=>e.parent),t=0;t<e.length;t++){-1==e[t]&&t++;for(var l=0,i=0,o=0;o<w.filter(l=>l.parent==e[t]).length;o++){var n=w.filter(l=>l.parent==e[t])[o];0==w.filter(e=>e.parent==n.id).length&&(n.childwidth=0),n.childwidth>n.width?o==w.filter(l=>l.parent==e[t]).length-1?l+=n.childwidth:l+=n.childwidth+y:o==w.filter(l=>l.parent==e[t]).length-1?l+=n.width:l+=n.width+y}-1!=e[t]&&(w.filter(l=>l.id==e[t])[0].childwidth=l);for(o=0;o<w.filter(l=>l.parent==e[t]).length;o++){n=w.filter(l=>l.parent==e[t])[o];const a=document.querySelector(".blockid[value='"+n.id+"']").parentNode,s=w.filter(l=>l.id==e[t]);a.style.top=s.y+v+"px",s.y=s.y+v,n.childwidth>n.width?(a.style.left=s[0].x-l/2+i+n.childwidth/2-n.width/2-(g.getBoundingClientRect().left+window.scrollX)+"px",n.x=s[0].x-l/2+i+n.childwidth/2,i+=n.childwidth+y):(a.style.left=s[0].x-l/2+i-(g.getBoundingClientRect().left+window.scrollX)+"px",n.x=s[0].x-l/2+i+n.width/2,i+=n.width+y);var r=w.filter(e=>e.id==n.id)[0],d=r.x-w.filter(e=>e.id==n.parent)[0].x+20,c=r.y-r.height/2-(w.filter(e=>e.id==n.parent)[0].y+w.filter(e=>e.id==n.parent)[0].height/2);document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.style.top=w.filter(e=>e.id==n.parent)[0].y+w.filter(e=>e.id==n.parent)[0].height/2-(g.getBoundingClientRect().top+window.scrollY)+"px",d<0?(document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.style.left=r.x-5-(g.getBoundingClientRect().left+window.scrollX)+"px",document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.innerHTML='<input type="hidden" class="arrowid" value="'+n.id+'"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M'+(w.filter(e=>e.id==n.parent)[0].x-r.x+5)+" 0L"+(w.filter(e=>e.id==n.parent)[0].x-r.x+5)+" "+v/2+"L5 "+v/2+"L5 "+c+'" stroke="#C5CCD0" stroke-width="2px"/><path d="M0 '+(c-5)+"H10L5 "+c+"L0 "+(c-5)+'Z" fill="#C5CCD0"/></svg>'):(document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.style.left=w.filter(e=>e.id==n.parent)[0].x-20-(g.getBoundingClientRect().left+window.scrollX)+"px",document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.innerHTML='<input type="hidden" class="arrowid" value="'+n.id+'"><svg preserveaspectratio="none" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 0L20 '+v/2+"L"+d+" "+v/2+"L"+d+" "+c+'" stroke="#C5CCD0" stroke-width="2px"/><path d="M'+(d-5)+" "+(c-5)+"H"+(d+5)+"L"+d+" "+c+"L"+(d-5)+" "+(c-5)+'Z" fill="#C5CCD0"/></svg>')}}}},flowy.load()};