1
|
let treeParamas,pathNumber=1,allLinks=[],strokeWidth="5px",strokeColor="#000000";function treeMaker(t,e){let r=document.getElementById(e.id);treeParamas=void 0===e.treeParams?{}:e.treeParams,void 0!==e.link_width&&(strokeWidth=e.link_width),void 0!==e.link_color&&(strokeColor=e.link_color);pathNumber=1;allLinks=[];let n=document.createElement("div");n.id="tree__svg-container",r.appendChild(n);let a=document.createElementNS("http://www.w3.org/2000/svg","svg");a.id="tree__svg-container__svg",n.appendChild(a);let i=document.createElement("div");i.id="tree__container",r.appendChild(i);let s=document.createElement("div");s.classList="tree__container__step__card",s.id="tree__container__step__card__first",i.appendChild(s);let o=void 0!==treeParamas[Object.keys(t)[0]]&&void 0!==treeParamas[Object.keys(t)[0]].trad?treeParamas[Object.keys(t)[0]].trad:Object.keys(t)[0].trad;s.innerHTML='<p class="tree__container__step__card__p" id="card_'+Object.keys(t)[0]+'">'+o+"</p>",addStyleToCard(treeParamas[Object.keys(t)[0]],Object.keys(t)[0]),iterate(t[Object.keys(t)[0]],!0,"tree__container__step__card__first"),connectCard();let d=document.querySelectorAll(".tree__container__step__card__p");for(let t=0;d.length>t;t++)d[t].addEventListener("click",function(t){e.card_click(t.target)});window.onresize=function(){n.setAttribute("height","0"),n.setAttribute("width","0"),connectCard()}}function connectCard(){let t=document.getElementById("tree__svg-container__svg");for(let e=0;allLinks.length>e;e++)connectElements(t,document.getElementById(allLinks[e][0]),document.getElementById(allLinks[e][1]),document.getElementById(allLinks[e][2]))}function iterate(t,e=!1,r=""){let n=document.getElementById("tree__svg-container__svg"),a=document.createElement("div");a.id="from_"+r,a.classList.add("tree__container__branch"),document.getElementById(r).after(a);for(const i in t){let s=void 0!==treeParamas[i]&&void 0!==treeParamas[i].trad?treeParamas[i].trad:i;if(a.innerHTML+='<div class="tree__container__step"><div class="tree__container__step__card" id="'+i+'"><p id="card_'+i+'" class="tree__container__step__card__p">'+s+"</p></div></div>",addStyleToCard(treeParamas[i],i),""!==r&&!e){let t=document.createElementNS("http://www.w3.org/2000/svg","path");t.id="path"+pathNumber,t.setAttribute("stroke",strokeColor),t.setAttribute("fill","none"),t.setAttribute("stroke-width",strokeWidth),n.appendChild(t),allLinks.push(["path"+pathNumber,r,i]),pathNumber++}if(e){let t=document.createElementNS("http://www.w3.org/2000/svg","path");t.id="path"+pathNumber,t.setAttribute("stroke",strokeColor),t.setAttribute("fill","none"),t.setAttribute("stroke-width",strokeWidth),n.appendChild(t),allLinks.push(["path"+pathNumber,"tree__container__step__card__first",i]),pathNumber++}Object.keys(t[i]).length>0&&iterate(t[i],!1,i)}}function addStyleToCard(t,e){if(void 0!==t&&void 0!==t.styles){let r=document.getElementById("card_"+e);for(const n in treeParamas[e].styles)r.style[n]=t.styles[n]}}function signum(t){return t<0?-1:1}function absolute(t){return t<0?-t:t}function drawPath(t,e,r,n,a,i){let s=parseFloat(e.getAttribute("stroke-width"));t.getAttribute("height")<i&&t.setAttribute("height",i),t.getAttribute("width")<r+s&&t.setAttribute("width",r+s),t.getAttribute("width")<a+s&&t.setAttribute("width",a+s);let o=.15*(a-r),d=.15*(i-n),l=d<absolute(o)?d:absolute(o),c=0,_=1;r>a&&(c=1,_=0),e.setAttribute("d","M"+r+" "+n+" V"+(n+l)+" A"+l+" "+l+" 0 0 "+c+" "+(r+l*signum(o))+" "+(n+2*l)+" H"+(a-l*signum(o))+" A"+l+" "+l+" 0 0 "+_+" "+a+" "+(n+3*l)+" V"+i)}function connectElements(t,e,r,n){let a=document.getElementById("tree__svg-container");if(r.offsetTop>n.offsetTop){let t=r;r=n,n=t}let i=a.offsetTop,s=a.offsetLeft;drawPath(t,e,r.offsetLeft+.5*r.offsetWidth-s,r.offsetTop+r.offsetHeight-i,n.offsetLeft+.5*n.offsetWidth-s,n.offsetTop-i)}
|
