forked from alyssaxuu/flowy
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathflowy.min.js
More file actions
1 lines (1 loc) · 19.9 KB
/
flowy.min.js
File metadata and controls
1 lines (1 loc) · 19.9 KB
1
var flowy=function(e,t,l,i,o,n,r){t||(t=function(){}),l||(l=function(){}),i||(i=function(){return!0}),o||(o=function(){return!1}),n||(n=20),r||(r=80),Element.prototype.matches||(Element.prototype.matches=Element.prototype.msMatchesSelector||Element.prototype.webkitMatchesSelector),Element.prototype.closest||(Element.prototype.closest=function(e){var t=this;do{if(Element.prototype.matches.call(t,e))return t;t=t.parentElement||t.parentNode}while(null!==t&&1===t.nodeType);return null});var d=!1;function c(e,t,l){return i(e,t,l)}function a(e,t){return o(e,t)}flowy.load=function(){if(!d){d=!0;var i,o,s,p,u,w,f=[],g=[],h=e,y=!1,v=n,m=r,C=0,x=0,S=!1,b=!1,B=!1,k=0,L=document.createElement("DIV");L.classList.add("indicator"),L.classList.add("invisible"),h.appendChild(L),flowy.import=function(e){h.innerHTML=e.html;for(var t=0;t<e.blockarr.length;t++){var l={childwidth:parseFloat(e.blockarr[t].childwidth),parent:parseFloat(e.blockarr[t].parent),id:parseFloat(e.blockarr[t].id),x:parseFloat(e.blockarr[t].x),y:parseFloat(e.blockarr[t].y),width:parseFloat(e.blockarr[t].width),height:parseFloat(e.blockarr[t].height)};f.push(l)}f.length>1&&N()},flowy.output=function(){var e={html:h.innerHTML,blockarr:f,blocks:[]};if(f.length>0){for(var t=0;t<f.length;t++){e.blocks.push({id:f[t].id,parent:f[t].parent,data:[],attr:[]});var l=document.querySelector(".blockid[value='"+f[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(){f=[],h.innerHTML="<div class='indicator invisible'></div>"},flowy.beginDrag=function(e){if(e.targetTouches?(u=e.changedTouches[0].clientX,w=e.changedTouches[0].clientY):(u=e.clientX,w=e.clientY),3!=e.which&&e.target.closest(".create-flowy")){p=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===f.length?(l.innerHTML+="<input type='hidden' name='blockid' class='blockid' value='"+f.length+"'>",document.body.appendChild(l),i=document.querySelector(".blockid[value='"+f.length+"']").parentNode):(l.innerHTML+="<input type='hidden' name='blockid' class='blockid' value='"+(Math.max.apply(Math,f.map(e=>e.id))+1)+"'>",document.body.appendChild(l),i=document.querySelector(".blockid[value='"+(parseInt(Math.max.apply(Math,f.map(e=>e.id)))+1)+"']").parentNode),n=e.target.closest(".create-flowy"),t(n),i.classList.add("dragging"),y=!0,o=u-e.target.closest(".create-flowy").getBoundingClientRect().left,s=w-e.target.closest(".create-flowy").getBoundingClientRect().top,i.style.left=u-o+"px",i.style.top=w-s+"px"}var n},document.addEventListener("mousedown",q,!1),document.addEventListener("touchstart",q,!1),document.addEventListener("mouseup",q,!1),flowy.touchDone=function(){B=!1},document.addEventListener("mousedown",flowy.beginDrag),document.addEventListener("touchstart",flowy.beginDrag),flowy.endDrag=function(e){if(3!=e.which&&(y||S))if(B=!1,l(),document.querySelector(".indicator").classList.contains("invisible")||document.querySelector(".indicator").classList.add("invisible"),y&&(p.classList.remove("dragnow"),i.classList.remove("dragging")),0===parseInt(i.querySelector(".blockid").value)&&S){i.classList.remove("dragging"),S=!1;for(var t=0;t<g.length;t++)if(g[t].id!=parseInt(i.querySelector(".blockid").value)){const e=document.querySelector(".blockid[value='"+g[t].id+"']").parentNode,l=document.querySelector(".arrowid[value='"+g[t].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft-1+"px",e.style.top=e.getBoundingClientRect().top+window.scrollY-(h.getBoundingClientRect().top+window.scrollY)+h.scrollTop-1+"px",l.style.left=l.getBoundingClientRect().left+window.scrollX-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft-1+"px",l.style.top=l.getBoundingClientRect().top+window.scrollY-(h.getBoundingClientRect().top+h.scrollTop)-1+"px",h.appendChild(e),h.appendChild(l),g[t].x=e.getBoundingClientRect().left+window.scrollX+parseInt(e.offsetWidth)/2+h.scrollLeft-1,g[t].y=e.getBoundingClientRect().top+window.scrollY+parseInt(e.offsetHeight)/2+h.scrollTop-1}g.filter(e=>0==e.id)[0].x=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2,g.filter(e=>0==e.id)[0].y=i.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(i).height)/2,f=f.concat(g),g=[]}else if(y&&0==f.length&&i.getBoundingClientRect().top+window.scrollY>h.getBoundingClientRect().top+window.scrollY&&i.getBoundingClientRect().left+window.scrollX>h.getBoundingClientRect().left+window.scrollX)c(i,!0,void 0),y=!1,i.style.top=i.getBoundingClientRect().top+window.scrollY-(h.getBoundingClientRect().top+window.scrollY)+h.scrollTop+"px",i.style.left=i.getBoundingClientRect().left+window.scrollX-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px",h.appendChild(i),f.push({parent:-1,childwidth:0,id:parseInt(i.querySelector(".blockid").value),x:i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+h.scrollLeft,y:i.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(i).height)/2+h.scrollTop,width:parseInt(window.getComputedStyle(i).width),height:parseInt(window.getComputedStyle(i).height)});else if(y&&0==f.length)h.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i);else if(y)for(var o=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+h.scrollLeft,n=i.getBoundingClientRect().top+window.scrollY+h.scrollTop,r=f.map(e=>e.id),d=0;d<f.length;d++){if(o>=f.filter(e=>e.id==r[d])[0].x-f.filter(e=>e.id==r[d])[0].width/2-v&&o<=f.filter(e=>e.id==r[d])[0].x+f.filter(e=>e.id==r[d])[0].width/2+v&&n>=f.filter(e=>e.id==r[d])[0].y-f.filter(e=>e.id==r[d])[0].height/2&&n<=f.filter(e=>e.id==r[d])[0].y+f.filter(e=>e.id==r[d])[0].height){y=!1,c(i,!1,document.querySelector(".blockid[value='"+r[d]+"']").parentNode)?R(i,d,r):(y=!1,h.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i));break}d==f.length-1&&(y=!1,h.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i))}else if(S)for(o=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+h.scrollLeft,n=i.getBoundingClientRect().top+window.scrollY+h.scrollTop,r=f.map(e=>e.id),d=0;d<f.length;d++){if(o>=f.filter(e=>e.id==r[d])[0].x-f.filter(e=>e.id==r[d])[0].width/2-v&&o<=f.filter(e=>e.id==r[d])[0].x+f.filter(e=>e.id==r[d])[0].width/2+v&&n>=f.filter(e=>e.id==r[d])[0].y-f.filter(e=>e.id==r[d])[0].height/2&&n<=f.filter(e=>e.id==r[d])[0].y+f.filter(e=>e.id==r[d])[0].height){y=!1,i.classList.remove("dragging"),R(i,d,r);break}if(d==f.length-1){if(a(i,f.filter(e=>e.id==r[d])[0])){y=!1,i.classList.remove("dragging"),R(i,r.indexOf(k),r);break}S=!1,g=[],y=!1,h.appendChild(document.querySelector(".indicator")),i.parentNode.removeChild(i);break}}},document.addEventListener("mouseup",flowy.endDrag,!1),document.addEventListener("touchend",flowy.endDrag,!1),flowy.moveBlock=function(e){if(e.targetTouches?(u=e.targetTouches[0].clientX,w=e.targetTouches[0].clientY):(u=e.clientX,w=e.clientY),B){S=!0,i.classList.add("dragging");var t=parseInt(i.querySelector(".blockid").value);k=f.filter(e=>e.id==t)[0].parent,g.push(f.filter(e=>e.id==t)[0]),f=f.filter(function(e){return e.id!=t}),0!=t&&document.querySelector(".arrowid[value='"+t+"']").parentNode.remove();for(var l=f.filter(e=>e.parent==t),n=!1,r=[],d=[];!n;){for(var c=0;c<l.length;c++)if(l[c]!=t){g.push(f.filter(e=>e.id==l[c].id)[0]);const e=document.querySelector(".blockid[value='"+l[c].id+"']").parentNode,t=document.querySelector(".arrowid[value='"+l[c].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(i.getBoundingClientRect().left+window.scrollX)+"px",e.style.top=e.getBoundingClientRect().top+window.scrollY-(i.getBoundingClientRect().top+window.scrollY)+"px",t.style.left=t.getBoundingClientRect().left+window.scrollX-(i.getBoundingClientRect().left+window.scrollX)+"px",t.style.top=t.getBoundingClientRect().top+window.scrollY-(i.getBoundingClientRect().top+window.scrollY)+"px",i.appendChild(e),i.appendChild(t),r.push(l[c].id),d.push(l[c].id)}0==r.length?n=!0:(l=f.filter(e=>r.includes(e.parent)),r=[])}for(c=0;c<f.filter(e=>e.parent==t).length;c++){var a=f.filter(e=>e.parent==t)[c];f=f.filter(function(e){return e.id!=a})}for(c=0;c<d.length;c++){a=d[c];f=f.filter(function(e){return e.id!=a})}f.length>1&&N(),b&&function(){if(x<h.getBoundingClientRect().left+window.scrollX){b=!1;for(var e=f.map(e=>e.id),t=0;t<f.length;t++)if(document.querySelector(".blockid[value='"+f.filter(l=>l.id==e[t])[0].id+"']").parentNode.style.left=f.filter(l=>l.id==e[t])[0].x-f.filter(l=>l.id==e[t])[0].width/2-x-20+"px",f.filter(l=>l.id==e[t])[0].x=document.querySelector(".blockid[value='"+f.filter(l=>l.id==e[t])[0].id+"']").parentNode.getBoundingClientRect().left+window.scrollX+f.filter(l=>l.id==e[t])[0].width/2,-1!=f.filter(l=>l.id==e[t])[0].parent){var l=f.filter(l=>l.id==e[t])[0],i=l.x-f.filter(l=>l.id==f.filter(l=>l.id==e[t])[0].parent)[0].x;document.querySelector('.arrowid[value="'+e[t]+'"]').parentNode.style.left=i<0?l.x-5-(h.getBoundingClientRect().left+window.scrollX)+"px":f.filter(l=>l.id==f.filter(l=>l.id==e[t])[0].parent)[0].x-20-(h.getBoundingClientRect().left+window.scrollX)+"px"}x=0}}(),B=!1}if(y?(i.style.left=u-o+"px",i.style.top=w-s+"px"):S&&(i.style.left=u-o-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px",i.style.top=w-s-(h.getBoundingClientRect().top+window.scrollY)+h.scrollTop+"px",g.filter(e=>e.id==parseInt(i.querySelector(".blockid").value)).x=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+h.scrollLeft,g.filter(e=>e.id==parseInt(i.querySelector(".blockid").value)).y=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).height)/2+h.scrollTop),y||S){var p=i.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(i).width)/2+h.scrollLeft,m=i.getBoundingClientRect().top+window.scrollY+h.scrollTop,C=f.map(e=>e.id);for(c=0;c<f.length;c++){if(p>=f.filter(e=>e.id==C[c])[0].x-f.filter(e=>e.id==C[c])[0].width/2-v&&p<=f.filter(e=>e.id==C[c])[0].x+f.filter(e=>e.id==C[c])[0].width/2+v&&m>=f.filter(e=>e.id==C[c])[0].y-f.filter(e=>e.id==C[c])[0].height/2&&m<=f.filter(e=>e.id==C[c])[0].y+f.filter(e=>e.id==C[c])[0].height){document.querySelector(".blockid[value='"+C[c]+"']").parentNode.appendChild(document.querySelector(".indicator")),document.querySelector(".indicator").style.left=parseInt(window.getComputedStyle(document.querySelector(".blockid[value='"+C[c]+"']").parentNode).width)/2-5+"px",document.querySelector(".indicator").style.top=window.getComputedStyle(document.querySelector(".blockid[value='"+C[c]+"']").parentNode).height+"px",document.querySelector(".indicator").classList.remove("invisible");break}c==f.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){S||h.appendChild(e);for(var i=0,o=0,n=0;n<f.filter(e=>e.parent==l[t]).length;n++){(u=f.filter(e=>e.parent==l[t])[n]).childwidth>u.width?i+=u.childwidth+v:i+=u.width+v}i+=parseInt(window.getComputedStyle(e).width);for(n=0;n<f.filter(e=>e.parent==l[t]).length;n++){(u=f.filter(e=>e.parent==l[t])[n]).childwidth>u.width?(document.querySelector(".blockid[value='"+u.id+"']").parentNode.style.left=f.filter(e=>e.id==l[t])[0].x-i/2+o+u.childwidth/2-u.width/2+"px",u.x=f.filter(e=>e.parent==l[t])[0].x-i/2+o+u.childwidth/2,o+=u.childwidth+v):(document.querySelector(".blockid[value='"+u.id+"']").parentNode.style.left=f.filter(e=>e.id==l[t])[0].x-i/2+o+"px",u.x=f.filter(e=>e.parent==l[t])[0].x-i/2+o+u.width/2,o+=u.width+v)}if(e.style.left=f.filter(e=>e.id==l[t])[0].x-i/2+o-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px",e.style.top=f.filter(e=>e.id==l[t])[0].y+f.filter(e=>e.id==l[t])[0].height/2+m-(h.getBoundingClientRect().top+window.scrollY)+"px",S){g.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0].x=e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+h.scrollLeft,g.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0].y=e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+h.scrollTop,g.filter(t=>t.id==e.querySelector(".blockid").value)[0].parent=l[t];for(n=0;n<g.length;n++)if(g[n].id!=parseInt(e.querySelector(".blockid").value)){const e=document.querySelector(".blockid[value='"+g[n].id+"']").parentNode,t=document.querySelector(".arrowid[value='"+g[n].id+"']").parentNode;e.style.left=e.getBoundingClientRect().left+window.scrollX-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px",e.style.top=e.getBoundingClientRect().top+window.scrollY-(h.getBoundingClientRect().top+window.scrollY)+h.scrollTop+"px",t.style.left=t.getBoundingClientRect().left+window.scrollX-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+20+"px",t.style.top=t.getBoundingClientRect().top+window.scrollY-(h.getBoundingClientRect().top+window.scrollY)+h.scrollTop+"px",h.appendChild(e),h.appendChild(t),g[n].x=e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+h.scrollLeft,g[n].y=e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+h.scrollTop}f=f.concat(g),g=[]}else f.push({childwidth:0,parent:l[t],id:parseInt(e.querySelector(".blockid").value),x:e.getBoundingClientRect().left+window.scrollX+parseInt(window.getComputedStyle(e).width)/2+h.scrollLeft,y:e.getBoundingClientRect().top+window.scrollY+parseInt(window.getComputedStyle(e).height)/2+h.scrollTop,width:parseInt(window.getComputedStyle(e).width),height:parseInt(window.getComputedStyle(e).height)});var r=f.filter(t=>t.id==parseInt(e.querySelector(".blockid").value))[0],d=r.x-f.filter(e=>e.id==l[t])[0].x+20,c=parseFloat(r.y-r.height/2-(f.filter(e=>e.parent==l[t])[0].y+f.filter(e=>e.parent==l[t])[0].height/2)+h.scrollTop);if(d<0?(h.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'+(f.filter(e=>e.id==l[t])[0].x-r.x+5)+" 0L"+(f.filter(e=>e.id==l[t])[0].x-r.x+5)+" "+m/2+"L5 "+m/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-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px"):(h.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 '+m/2+"L"+d+" "+m/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=f.filter(e=>e.id==l[t])[0].x-20-(h.getBoundingClientRect().left+window.scrollX)+h.scrollLeft+"px"),document.querySelector('.arrowid[value="'+parseInt(e.querySelector(".blockid").value)+'"]').parentNode.style.top=f.filter(e=>e.id==l[t])[0].y+f.filter(e=>e.id==l[t])[0].height/2+"px",-1!=f.filter(e=>e.id==l[t])[0].parent){for(var a=!1,s=l[t];!a;)if(-1==f.filter(e=>e.id==s)[0].parent)a=!0;else{var p=0;for(n=0;n<f.filter(e=>e.parent==s).length;n++){var u;(u=f.filter(e=>e.parent==s)[n]).childwidth>u.width?n==f.filter(e=>e.parent==s).length-1?p+=u.childwidth:p+=u.childwidth+v:n==f.filter(e=>e.parent==s).length-1?p+=u.width:p+=u.width+v}f.filter(e=>e.id==s)[0].childwidth=p,s=f.filter(e=>e.id==s)[0].parent}f.filter(e=>e.id==s)[0].childwidth=i}S&&(S=!1,e.classList.remove("dragging")),N(),function(){C=f.map(e=>e.x);var e=f.map(e=>e.width),t=C.map(function(t,l){return t-e[l]/2});if((C=Math.min.apply(Math,t))<h.getBoundingClientRect().left+window.scrollX){b=!0;for(var l=f.map(e=>e.id),i=0;i<f.length;i++)if(document.querySelector(".blockid[value='"+f.filter(e=>e.id==l[i])[0].id+"']").parentNode.style.left=f.filter(e=>e.id==l[i])[0].x-f.filter(e=>e.id==l[i])[0].width/2-C+20+"px",-1!=f.filter(e=>e.id==l[i])[0].parent){var o=f.filter(e=>e.id==l[i])[0],n=o.x-f.filter(e=>e.id==f.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":f.filter(e=>e.id==f.filter(e=>e.id==l[i])[0].parent)[0].x-20-C+20+"px"}for(var i=0;i<f.length;i++)f[i].x=document.querySelector(".blockid[value='"+f[i].id+"']").parentNode.getBoundingClientRect().left+window.scrollX+(h.getBoundingClientRect().left+h.scrollLeft)-parseInt(window.getComputedStyle(document.querySelector(".blockid[value='"+f[i].id+"']").parentNode).width)/2-40;x=C}}()}function q(e){if(B=!1,X(e.target,"block")){var t=e.target.closest(".block");e.targetTouches?(u=e.targetTouches[0].clientX,w=e.targetTouches[0].clientY):(u=e.clientX,w=e.clientY),"mouseup"!==e.type&&X(e.target,"block")&&3!=e.which&&(y||S||(B=!0,o=u-((i=t).getBoundingClientRect().left+window.scrollX),s=w-(i.getBoundingClientRect().top+window.scrollY)))}}function X(e,t){return!!(e.className&&e.className.split(" ").indexOf(t)>=0)||e.parentNode&&X(e.parentNode,t)}function N(){for(var e=f.map(e=>e.parent),t=0;t<e.length;t++){-1==e[t]&&t++;for(var l=0,i=0,o=0;o<f.filter(l=>l.parent==e[t]).length;o++){var n=f.filter(l=>l.parent==e[t])[o];0==f.filter(e=>e.parent==n.id).length&&(n.childwidth=0),n.childwidth>n.width?o==f.filter(l=>l.parent==e[t]).length-1?l+=n.childwidth:l+=n.childwidth+v:o==f.filter(l=>l.parent==e[t]).length-1?l+=n.width:l+=n.width+v}-1!=e[t]&&(f.filter(l=>l.id==e[t])[0].childwidth=l);for(o=0;o<f.filter(l=>l.parent==e[t]).length;o++){n=f.filter(l=>l.parent==e[t])[o];const a=document.querySelector(".blockid[value='"+n.id+"']").parentNode,s=f.filter(l=>l.id==e[t]);a.style.top=s.y+m+"px",s.y=s.y+m,n.childwidth>n.width?(a.style.left=s[0].x-l/2+i+n.childwidth/2-n.width/2-(h.getBoundingClientRect().left+window.scrollX)+"px",n.x=s[0].x-l/2+i+n.childwidth/2,i+=n.childwidth+v):(a.style.left=s[0].x-l/2+i-(h.getBoundingClientRect().left+window.scrollX)+"px",n.x=s[0].x-l/2+i+n.width/2,i+=n.width+v);var r=f.filter(e=>e.id==n.id)[0],d=r.x-f.filter(e=>e.id==n.parent)[0].x+20,c=r.y-r.height/2-(f.filter(e=>e.id==n.parent)[0].y+f.filter(e=>e.id==n.parent)[0].height/2);document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.style.top=f.filter(e=>e.id==n.parent)[0].y+f.filter(e=>e.id==n.parent)[0].height/2-(h.getBoundingClientRect().top+window.scrollY)+"px",d<0?(document.querySelector('.arrowid[value="'+n.id+'"]').parentNode.style.left=r.x-5-(h.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'+(f.filter(e=>e.id==n.parent)[0].x-r.x+5)+" 0L"+(f.filter(e=>e.id==n.parent)[0].x-r.x+5)+" "+m/2+"L5 "+m/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=f.filter(e=>e.id==n.parent)[0].x-20-(h.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 '+m/2+"L"+d+" "+m/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()};