@ekisa-cdk/graph-drawing/dist/index.mjs

📈 Dynamically draw graphs on SVG elements

import N from"html2canvas";var G={canDrawLines:!1,canRemoveNodes:!1,styles:{node:{shape:"circle",color:"#1d4ed8",hoverColor:"#e11d48",hoverSizeMultiplier:2,width:6,transition:"all ease-out 200ms",cursor:"pointer"},line:{color:"#fde047",width:3}}};var g=class{containerElement=null;config;set wrapperElement(e){this.containerElement=e}get nodes(){var e;return(e=this.containerElement)==null?void 0:e.querySelectorAll('[data-type="node"]')}set node(e){var t,r;if(!this.containerElement)throw new Error("The scoped frame is not properly configured");switch(e.shape){case"circle":(t=this.containerElement.querySelector("svg"))==null||t.append(this.getCircleContext(e));break;case"pathX":(r=this.containerElement.querySelector("svg"))==null||r.append(this.getPathXContext(e));break}}get lines(){var e;return(e=this.containerElement)==null?void 0:e.querySelectorAll("svg line")}set line(e){if(!this.containerElement)throw new Error("The scoped frame is not properly configured");if(!this.getCurrentConfig().canDrawLines)return;let r=document.createElementNS("http://www.w3.org/2000/svg","line");r.setAttribute("x1",e.x1),r.setAttribute("y1",e.y1),r.setAttribute("x2",e.x2),r.setAttribute("y2",e.y2),r.style.stroke=e.color,r.style.strokeWidth=e.width.toString(),this.containerElement.querySelector("svg").prepend(r)}constructor(e){this.config=this.mergeConfig(G,e!=null?e:{})}getCurrentConfig(){return this.config}getContainerElement(){return this.containerElement}getNodes(){return this.nodes}getCoordinates(){let e=this.nodes;return e?Array.from(e).map((t,r)=>({x:+t.getAttribute("cx"),y:+t.getAttribute("cy"),order:r})):[]}loadCoordinates(e){e.sort((t,r)=>t.order-r.order).forEach(t=>{this.node={x:t.x,y:t.y,shape:"circle",width:this.config.styles.node.width,color:this.config.styles.node.color.toString(),hoverColor:this.config.styles.node.hoverColor.toString(),hoverSizeMultiplier:this.config.styles.node.hoverSizeMultiplier,transition:this.config.styles.node.transition,cursor:this.config.styles.node.cursor}}),this.redraw()}async exportAs(e,t){if(!this.containerElement)throw new Error(`Error exporting frame as ${e}: the container element couldn't be found.`);return(await N(this.containerElement,t)).toDataURL(e,1)}enableDrawingLines(){this.config.canDrawLines=!0}disableDrawingLines(){this.config.canDrawLines=!1}enableNodesRemoval(){this.config.canRemoveNodes=!0}disableNodesRemoval(){this.config.canRemoveNodes=!1}compile(e){this.config=this.mergeConfig(this.config,e!=null?e:{})}mergeConfig(e,t){for(let r of Object.keys(t)){let o=r;!Object.prototype.hasOwnProperty.call(e,r)||typeof t[o]!="object"?e[o]=t[o]:this.mergeConfig(e[o],t[o])}return e}getCircleContext(e){let t=document.createElementNS("http://www.w3.org/2000/svg","circle");return t.dataset.type="node",t.dataset.kind="circle",t.dataset.coordX=e.x.toString(),t.dataset.coordY=e.y.toString(),t.setAttribute("cx",e.x.toString()),t.setAttribute("cy",e.y.toString()),t.setAttribute("r",e.width.toString()),t.setAttribute("fill",e.color),t.style.transition=e.transition,t.style.cursor=e.cursor.toString(),t.addEventListener("mouseenter",()=>{this.config.canRemoveNodes&&(t.setAttribute("fill",e.hoverColor),t.setAttribute("r",(e.width*e.hoverSizeMultiplier).toString()))}),t.addEventListener("mouseleave",()=>{this.config.canRemoveNodes&&(t.setAttribute("fill",e.color),t.setAttribute("r",e.width.toString()))}),t.addEventListener("click",r=>{r.stopPropagation(),this.config.canRemoveNodes&&(t.remove(),this.redraw())}),t}getPathXContext(e){let t=document.createElementNS("http://www.w3.org/2000/svg","svg");t.dataset.type="node",t.dataset.kind="path",t.dataset.coordX=e.x.toString(),t.dataset.coordY=e.y.toString(),t.setAttribute("x",(e.x-18).toString()),t.setAttribute("y",(e.y-18).toString()),t.style.width="32px",t.style.height="32px";let r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("d","m19.41 18l8.29-8.29a1 1 0 0 0-1.41-1.41L18 16.59l-8.29-8.3a1 1 0 0 0-1.42 1.42l8.3 8.29l-8.3 8.29A1 1 0 1 0 9.7 27.7l8.3-8.29l8.29 8.29a1 1 0 0 0 1.41-1.41Z"),r.setAttribute("fill",e.color),r.style.transition=e.transition,r.style.cursor=e.cursor.toString(),t.addEventListener("mouseenter",()=>{this.config.canRemoveNodes&&r.setAttribute("fill",e.hoverColor)}),t.addEventListener("mouseleave",()=>{this.config.canRemoveNodes&&r.setAttribute("fill",e.color)}),t.addEventListener("click",o=>{o.stopPropagation(),this.config.canRemoveNodes&&(t.remove(),this.redraw())}),t.append(r),t}};var A=class extends g{isHttpImageUrl;constructor(e){super(e)}mountScopedFrame(e){var n,l,c,d,h,a,m,y,w,f,v,C,b,S,E,x,D;let t=document.createElement("div");t.style.position="relative",t.style.display="inline-block",t.style.width=(c=(l=(n=e==null?void 0:e.container)==null?void 0:n.styles)==null?void 0:l.width)!=null?c:"100%",t.style.height=(a=(h=(d=e==null?void 0:e.container)==null?void 0:d.styles)==null?void 0:h.heigth)!=null?a:"100%",t.style.userSelect="none";let r=document.createElement("img");r.src=e.image.src,r.alt=(m=e.image.alt)!=null?m:"",r.style.display="block",r.style.width="100%",r.style.height="100%",r.style.objectFit=(y=e.image.objectFit)!=null?y:"fill",t.append(r);let o=document.createElementNS("http://www.w3.org/2000/svg","svg");if(o.style.position="absolute",o.style.width="100%",o.style.height="100%",o.style.inset="0",o.innerHTML="Sorry, your browser does not support inline SVG.",(f=(w=e.frame)==null?void 0:w.styles)!=null&&f.cursor&&(o.style.cursor=e.frame.styles.cursor.toString()),(C=(v=e.frame)==null?void 0:v.styles)!=null&&C.backgroundColor&&(o.style.backgroundColor=e.frame.styles.backgroundColor),(S=(b=e.frame)==null?void 0:b.styles)!=null&&S.opacity&&(o.style.opacity=e.frame.styles.opacity.toString()),t.append(o),(E=e.container)!=null&&E.boundaries)for(let s of e.container.boundaries){let i=document.createElement("div");i.style.position="absolute",i.style.width=s.width||"",i.style.height=s.height||"",i.style.inset=s.inset||"",i.style.backgroundColor=s.backgroundColor||"transparent",i.style.opacity=((x=s.opacity)==null?void 0:x.toString())||"0",i.style.cursor=((D=s.cursor)==null?void 0:D.toString())||"",t.append(i)}return this.wrapperElement=t,this}startProcess(){let e=this.getContainerElement();if(!e)throw new Error("The scoped frame is not properly configured");let t=e.querySelector("svg");return t==null||t.addEventListener("click",r=>{r.stopPropagation();let o=this.getCurrentConfig(),n=t.getBoundingClientRect();this.node={x:r.clientX-n.x,y:r.clientY-n.y,shape:o.styles.node.shape,width:o.styles.node.width,color:o.styles.node.color.toString(),hoverColor:o.styles.node.hoverColor.toString(),hoverSizeMultiplier:o.styles.node.hoverSizeMultiplier,transition:o.styles.node.transition,cursor:o.styles.node.cursor},this.redraw()}),this}redraw(){let e=this.nodes,t=this.lines;if(t&&t.forEach(r=>r.remove()),!(!e||e.length<2))for(let r=0;r<e.length;r++){let o=e[r],n=e[r+1];if(n){let l=o.dataset.coordX,c=o.dataset.coordY,d=n.dataset.coordX,h=n.dataset.coordY,a=this.getCurrentConfig();this.line={x1:l,y1:c,x2:d,y2:h,color:a.styles.line.color,width:a.styles.line.width}}}}};export{A as LineGraphDrawing};