npm - @html-graph/html-graph - Versions diffs - 0.0.49 → 0.0.50 - Mend

@html-graph/html-graph 0.0.49 → 0.0.50

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/main.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- (function(w,E){typeof exports=="object"&&typeof module<"u"?E(exports):typeof define=="function"&&define.amd?define(["exports"],E):(w=typeof globalThis<"u"?globalThis:w\|\|self,E(w.HTMLGraph={}))})(this,function(w){"use strict";var rt=Object.defineProperty;var nt=(w,E,N)=>E in w?rt(w,E,{enumerable:!0,configurable:!0,writable:!0,value:N}):w[E]=N;var n=(w,E,N)=>nt(w,typeof E!="symbol"?E+"":E,N);class E{constructor(t,e,s,r,a){n(this,"canvasWrapper",null);n(this,"host");n(this,"nodesContainer");n(this,"connectionsContainer");n(this,"canvas");n(this,"canvasCtx");n(this,"hostResizeObserver");n(this,"nodesResizeObserver");n(this,"nodeElementToIdMap",new Map);n(this,"nodeWrapperElementToIdMap",new Map);n(this,"nodeIdToWrapperElementMap",new Map);n(this,"connectionIdToElementMap",new Map);n(this,"currentZIndex",0);n(this,"layers",{"edges-on-top":{create:()=>{this.host.appendChild(this.nodesContainer),this.host.appendChild(this.connectionsContainer)},update:(t,e,s)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${s})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${s})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}},"edges-follow-node":{create:()=>{this.host.appendChild(this.nodesContainer),this.connectionsContainer=this.nodesContainer},update:(t,e,s)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${s})`},moveOnTop:t=>{const e=this.nodeIdToWrapperElementMap.get(t);this.currentZIndex+=2,e.style.zIndex=`${this.currentZIndex}`,this.graphStore.getNodeAdjacentConnections(t).forEach(r=>{this.connectionIdToElementMap.get(r).style.zIndex=`${this.currentZIndex-1}`})}},"nodes-on-top":{create:()=>{this.host.appendChild(this.connectionsContainer),this.host.appendChild(this.nodesContainer)},update:(t,e,s)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${s})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${s})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}}});this.graphStore=t,this.viewportTransformer=e,this.publicViewportTransformer=s,this.layersMode=r,this.backgroundDrawingFn=a,this.host=this.createHost(),this.canvas=this.createCanvas(),this.nodesContainer=this.createNodesContainer(),this.connectionsContainer=this.createConnectionsContainer();const c=this.canvas.getContext("2d");if(c===null)throw new Error("unable to get canvas context");this.canvasCtx=c,this.host.appendChild(this.canvas),this.layers[this.layersMode].create(),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.connectionIdToElementMap.keys()).forEach(t=>{this.detachConnection(t)}),Array.from(this.nodeElementToIdMap.values()).forEach(t=>{this.detachNode(t)})}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}destroy(){this.hostResizeObserver.disconnect(),this.nodesResizeObserver.disconnect(),this.host.removeChild(this.canvas),this.host.removeChild(this.connectionsContainer),this.host.removeChild(this.nodesContainer),this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const[t,e]=this.viewportTransformer.getViewCoords(0,0),s=this.viewportTransformer.getViewScale();this.layers[this.layersMode].update(s,t,e)}attachNode(t){const e=this.graphStore.getNode(t),s=document.createElement("div");s.appendChild(e.element),s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,s.style.visibility="hidden",this.nodesContainer.appendChild(s),this.nodeElementToIdMap.set(e.element,t),this.nodeWrapperElementToIdMap.set(s,t),this.nodeIdToWrapperElementMap.set(t,s),this.updateNodeCoords(t,e.x,e.y),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(t){const e=this.graphStore.getNode(t);this.nodesResizeObserver.unobserve(e.element),this.nodesContainer.removeChild(e.element);const s=this.nodeIdToWrapperElementMap.get(t);s.removeChild(e.element),this.nodeElementToIdMap.delete(e.element),this.nodeWrapperElementToIdMap.delete(s),this.nodeIdToWrapperElementMap.delete(t)}attachConnection(t){const s=this.graphStore.getConnection(t).controller.svg;s.style.transformOrigin="50% 50%",s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,this.connectionIdToElementMap.set(t,s),this.updateConnectionCoords(t),this.connectionsContainer.appendChild(s)}detachConnection(t){const e=this.connectionIdToElementMap.get(t);this.connectionIdToElementMap.delete(t),this.connectionsContainer.removeChild(e)}moveNodeOnTop(t){this.layers[this.layersMode].moveOnTop(t)}updateNodeCoordinates(t){const e=this.graphStore.getNode(t),s=this.graphStore.getNodeAdjacentConnections(t);this.updateNodeCoords(t,e.x,e.y),s.forEach(r=>{this.updateConnectionCoords(r)})}updatePortConnections(t){this.graphStore.getPortAdjacentConnections(t).forEach(s=>{this.updateConnectionCoords(s)})}getViewportDimensions(){const t=this.host.getBoundingClientRect();return[t.width,t.height]}createHost(){const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t}createCanvas(){const t=document.createElement("canvas");return t.style.position="absolute",t.style.inset="0",t}createNodesContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createConnectionsContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.pointerEvents="none",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(t=>{t.forEach(e=>{const s=e.target,r=this.nodeWrapperElementToIdMap.get(s),a=this.graphStore.getNode(r);this.updateNodeCoords(r,a.x,a.y),this.graphStore.getNodeAdjacentConnections(r).forEach(h=>{this.updateConnectionCoords(h)})})})}updateCanvasDimensions(){const{width:t,height:e}=this.host.getBoundingClientRect();this.canvas.width=t,this.canvas.height=e}updateNodeCoords(t,e,s){const r=this.nodeIdToWrapperElementMap.get(t),{width:a,height:c}=r.getBoundingClientRect(),h=this.viewportTransformer.getAbsScale(),i=this.graphStore.getNode(t),[d,g]=i.centerFn(a,c);r.style.transform=`matrix(1, 0, 0, 1, ${e-hd}, ${s-hg})`}updateConnectionCoords(t){const e=this.graphStore.getConnection(t),s=this.graphStore.getPort(e.from),r=this.graphStore.getPort(e.to),a=s.element.getBoundingClientRect(),c=r.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),[i,d]=this.viewportTransformer.getAbsCoords(a.left-h.left,a.top-h.top),[g,l]=this.viewportTransformer.getAbsCoords(c.left-h.left,c.top-h.top),u=this.viewportTransformer.getAbsScale(),[C,m]=s.centerFn(a.widthu,a.heightu),[v,f]=r.centerFn(c.widthu,c.heightu),y=C+i,b=m+d,$=v+g,S=f+l,T=Math.min(y,$),x=Math.min(b,S),M=Math.abs($-y),O=Math.abs(S-b);e.controller.update(T,x,M,O,s,r)}}class N{constructor(){n(this,"state",{scale:1,x:0,y:0})}getViewCoords(t,e){return[(t-this.state.x)/this.state.scale,(e-this.state.y)/this.state.scale]}getViewScale(){return 1/this.state.scale}getAbsCoords(t,e){return[tthis.state.scale+this.state.x,ethis.state.scale+this.state.y]}getAbsScale(){return this.state.scale}patchState(t,e,s){this.state={scale:t??this.state.scale,x:e??this.state.x,y:s??this.state.y}}}class X{constructor(t){this.transformer=t}getViewCoords(t,e){return this.transformer.getViewCoords(t,e)}getViewScale(){return this.transformer.getViewScale()}getAbsCoords(t,e){return this.transformer.getAbsCoords(t,e)}getAbsScale(){return this.transformer.getAbsScale()}}class U{constructor(){n(this,"nodes",Object.create(null));n(this,"ports",Object.create(null));n(this,"nodePorts",Object.create(null));n(this,"portNodeId",Object.create(null));n(this,"connections",Object.create(null));n(this,"incommingConnections",Object.create(null));n(this,"outcommingConnections",Object.create(null));n(this,"cycleConnections",Object.create(null))}getAllNodes(){return this.nodes}addNode(t,e,s,r,a){this.nodes[t]={element:e,x:s,y:r,centerFn:a},this.nodePorts[t]=Object.create(null)}hasNode(t){return this.nodes[t]!==void 0}getNode(t){return this.nodes[t]}updateNodeCoords(t,e,s){this.nodes[t].x=e,this.nodes[t].y=s}updateConnectionController(t,e){this.connections[t].controller=e}removeNode(t){this.getNodeAdjacentConnections(t).forEach(r=>{this.removeConnection(r)}),delete this.nodes[t];const s=this.nodePorts[t];Object.keys(s).forEach(r=>{delete this.portNodeId[r]}),delete this.nodePorts[t]}addPort(t,e,s,r,a){this.ports[t]={element:e,centerFn:r,direction:a},this.cycleConnections[t]={},this.incommingConnections[t]={},this.outcommingConnections[t]={},this.portNodeId[t]=s;const c=this.nodePorts[s];c!==void 0&&(c[t]=e)}getPort(t){return this.ports[t]}getPortNode(t){return this.portNodeId[t]}hasPort(t){return this.portNodeId[t]!==void 0}removePort(t){Object.keys(this.cycleConnections[t]).forEach(r=>{this.removeConnection(r)}),delete this.cycleConnections[t],Object.keys(this.incommingConnections[t]).forEach(r=>{this.removeConnection(r)}),delete this.incommingConnections[t],Object.keys(this.outcommingConnections[t]).forEach(r=>{this.removeConnection(r)}),delete this.outcommingConnections[t];const e=this.portNodeId[t];delete this.portNodeId[t];const s=this.nodePorts[e];delete s[t],delete this.ports[t]}addConnection(t,e,s,r){this.connections[t]={from:e,to:s,controller:r},e!==s?(this.outcommingConnections[e][t]=!0,this.incommingConnections[s][t]=!0):this.cycleConnections[e][t]=!0}getConnection(t){return this.connections[t]}hasConnection(t){return this.connections[t]!==void 0}removeConnection(t){const e=this.connections[t],s=e.from,r=e.to;delete this.cycleConnections[s][t],delete this.cycleConnections[r][t],delete this.incommingConnections[s][t],delete this.incommingConnections[r][t],delete this.outcommingConnections[s][t],delete this.outcommingConnections[r][t],delete this.connections[t]}getPortAdjacentConnections(t){return[...this.getPortIncomingConnections(t),...this.getPortOutcomingConnections(t),...this.getPortCycleConnections(t)]}getNodeAdjacentConnections(t){return[...this.getNodeIncomingConnections(t),...this.getNodeOutcomingConnections(t),...this.getNodeCycleConnections(t)]}clear(){this.nodes=Object.create(null),this.ports=Object.create(null),this.nodePorts=Object.create(null),this.portNodeId=Object.create(null),this.connections=Object.create(null),this.incommingConnections=Object.create(null),this.outcommingConnections=Object.create(null),this.cycleConnections=Object.create(null)}getPortIncomingConnections(t){return Object.keys(this.incommingConnections[t]??{})}getPortOutcomingConnections(t){return Object.keys(this.outcommingConnections[t]??{})}getPortCycleConnections(t){return Object.keys(this.cycleConnections[t]??{})}getNodeIncomingConnections(t){const e=Object.keys(this.nodePorts[t]);let s=[];return e.forEach(r=>{s=[...s,...this.getPortIncomingConnections(r)]}),s}getNodeOutcomingConnections(t){const e=Object.keys(this.nodePorts[t]);let s=[];return e.forEach(r=>{s=[...s,...this.getPortOutcomingConnections(r)]}),s}getNodeCycleConnections(t){const e=Object.keys(this.nodePorts[t]);let s=[];return e.forEach(r=>{s=[...s,...this.getPortCycleConnections(r)]}),s}}class p{static getPortCenter(t){const{top:e,left:s,width:r,height:a}=t.element.getBoundingClientRect(),c=t.centerFn(r,a);return[s+c[0],e+c[1]]}static rotate(t,e,s){return[e[0]t[0]-e[1]t[1]+((1-e[0])s[0]+e[1]s[1]),e[1]t[0]+e[0]t[1]+((1-e[0])s[1]-e[1]s[0])]}static getDirectionVector(t,e,s){return[eMath.cos(t??0),sMath.sin(t??0)]}static getArrowPath(t,e,s,r,a){const h=[[0,0],[r,a],[r,-a]].map(l=>this.rotate(l,t,[0,0])).map(l=>[l[0]+e,l[1]+s]),i=`M ${h[0][0]} ${h[0][1]}`,d=`L ${h[1][0]} ${h[1][1]}`,g=`L ${h[2][0]} ${h[2][1]}`;return`${i} ${d} ${g}`}static getArrowOffsetPath(t,e,s,r,a){const h=[[r,0],[r+a,0]].map(i=>this.rotate(i,t,[0,0])).map(i=>[i[0]+e,i[1]+s]);return`M ${h[0][0]} ${h[0][1]} L ${h[1][0]} ${h[1][1]}`}static createStraightPath(t){return t.map((e,s)=>`${s===0?"M":"L"} ${e[0]} ${e[1]}`).join(" ")}}class V{constructor(t,e,s,r,a,c,h){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.color=t,this.width=e,this.curvature=s,this.arrowLength=r,this.arrowWidth=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",c&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,s,r,a,c){this.svg.style.width=`${s}px`,this.svg.style.height=`${r}px`;const h=p.getPortCenter(a),i=p.getPortCenter(c),d=h[0]<=i[0]?1:-1,g=h[1]<=i[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${d}, ${g})`;const l=p.getDirectionVector(a.direction,d,g),u=p.getDirectionVector(c.direction,d,g),C=p.rotate([this.arrowLength,0],l,[0,0]),m=p.rotate([s-this.arrowLength,r],u,[s,r]),v=[C[0]+l[0]this.curvature,C[1]+l[1]this.curvature],f=[m[0]-u[0]this.curvature,m[1]-u[1]this.curvature],y=`M ${C[0]} ${C[1]} C ${v[0]} ${v[1]}, ${f[0]} ${f[1]}, ${m[0]} ${m[1]}`,b=this.sourceArrow?"":`M 0 0 L ${C[0]} ${C[1]} `,$=this.targetArrow?"":` M ${m[0]} ${m[1]} L ${s} ${r}`,S=`${b}${y}${$}`;if(this.line.setAttribute("d",S),this.sourceArrow){const T=p.getArrowPath(l,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",T)}if(this.targetArrow){const T=p.getArrowPath(u,s,r,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",T)}}}class D{constructor(t,e,s,r,a,c,h,i){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"roundness");this.color=t,this.width=e,this.arrowLength=s,this.arrowWidth=r,this.minPortOffset=a,this.roundness=Math.min(this.minPortOffset,i),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",c&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,s,r,a,c){this.svg.style.width=`${s}px`,this.svg.style.height=`${r}px`;const h=p.getPortCenter(a),i=p.getPortCenter(c),d=h[0]<=i[0]?1:-1,g=h[1]<=i[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${d}, ${g})`;const l=p.getDirectionVector(a.direction,d,g),u=p.getDirectionVector(c.direction,d,g);console.log(this.roundness);const C=this.arrowLength+this.minPortOffset,m=p.rotate([C,0],l,[0,0]),v=p.rotate([s-C,r],u,[s,r]),[f,y]=[s/2,r/2],$=d(v[0]-m[0])>0?p.createStraightPath([[m[0],m[1]],[f,m[1]],[f,v[1]],[v[0],v[1]]]):p.createStraightPath([[m[0],m[1]],[m[0],y],[v[0],y],[v[0],v[1]]]),S=p.getArrowOffsetPath(l,0,0,this.arrowLength,this.minPortOffset),T=p.getArrowOffsetPath(u,s,r,-this.arrowLength,-this.minPortOffset),x=`M 0 0 L ${m[0]} ${m[1]} `,M=` M ${v[0]} ${v[1]} L ${s} ${r}`,O=this.sourceArrow?S:x,st=this.targetArrow?T:M,ot=`${O}${$}${st}`;if(this.line.setAttribute("d",ot),this.sourceArrow){const L=p.getArrowPath(l,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",L)}if(this.targetArrow){const L=p.getArrowPath(u,s,r,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",L)}}}class F{constructor(t,e,s,r,a,c,h){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);this.color=t,this.width=e,this.arrowLength=s,this.arrowWidth=r,this.radius=c,this.smallRadius=h,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",a&&(this.arrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.arrow.setAttribute("fill",this.color),this.group.appendChild(this.arrow)),this.svg.style.overflow="visible",this.svg.style.width="0px",this.svg.style.height="0px"}update(t,e,s,r,a){this.svg.style.transform=`translate(${t}px, ${e}px)`;const c=p.getDirectionVector(a.direction,1,1),h=this.smallRadius,i=this.radius,d=Math.sqrt(hh+ii),g=h+i,l=this.arrowLength+d(1-i/g),u=hi/g,m=[[this.arrowLength,0],[l,u],[l,-u]].map(b=>p.rotate(b,c,[0,0])),v=[`M ${m[0][0]} ${m[0][1]}`,`A ${h} ${h} 0 0 1 ${m[1][0]} ${m[1][1]}`,`A ${i} ${i} 0 1 0 ${m[2][0]} ${m[2][1]}`,`A ${h} ${h} 0 0 1 ${m[0][0]} ${m[0][1]}`].join(" "),f=`M 0 0 L ${m[0][0]} ${m[0][1]} `,y=`${this.arrow!==null?"":f}${v}`;if(this.line.setAttribute("d",y),this.arrow){const b=p.getArrowPath(c,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",b)}}}class k{constructor(t,e,s,r,a,c,h,i){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);n(this,"roundness");n(this,"points");this.color=t,this.width=e,this.arrowLength=s,this.arrowWidth=r,this.side=c,this.minPortOffset=h,this.roundness=Math.min(i,this.minPortOffset,this.side/2),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",a&&(this.arrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.arrow.setAttribute("fill",this.color),this.group.appendChild(this.arrow)),this.svg.style.overflow="visible",this.svg.style.width="0px",this.svg.style.height="0px";const d=this.minPortOffset,g=this.side,l=this.arrowLength+d,u=this.roundness,C=l-u,m=l+u,v=g-u,f=l+2g,y=f-u;console.log(u),this.points=[[this.arrowLength,0],[C,0],[l,u],[l,v],[m,g],[y,g],[f,v],[f,-v],[y,-g],[m,-g],[l,-v],[l,-u]]}update(t,e,s,r,a){this.svg.style.transform=`translate(${t}px, ${e}px)`;const c=p.getDirectionVector(a.direction,1,1),h=this.roundness,i=this.points.map(u=>p.rotate(u,c,[0,0])),d=[`M ${i[0][0]} ${i[0][1]}`,`L ${i[1][0]} ${i[1][1]}`,`A ${h} ${h} 0 0 1 ${i[2][0]} ${i[2][1]}`,`L ${i[3][0]} ${i[3][1]}`,`A ${h} ${h} 0 0 0 ${i[4][0]} ${i[4][1]}`,`L ${i[5][0]} ${i[5][1]}`,`A ${h} ${h} 0 0 0 ${i[6][0]} ${i[6][1]}`,`L ${i[7][0]} ${i[7][1]}`,`A ${h} ${h} 0 0 0 ${i[8][0]} ${i[8][1]}`,`L ${i[9][0]} ${i[9][1]}`,`A ${h} ${h} 0 0 0 ${i[10][0]} ${i[10][1]}`,`L ${i[11][0]} ${i[11][1]}`,`A ${h} ${h} 0 0 1 ${i[1][0]} ${i[1][1]}`].join(" "),g=`M 0 0 L ${i[0][0]} ${i[0][1]} `,l=`${this.arrow?"":g}${d}`;if(this.line.setAttribute("d",l),this.arrow){const u=p.getArrowPath(c,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",u)}}}var A=(o=>(o.Regular="regular",o.Cycle="cycle",o))(A\|\|{});const j=o=>t=>t==="cycle"?new F(o.color,o.width,o.arrowLength,o.arrowWidth,o.hasSourceArrow\|\|o.hasTargetArrow,o.cycleRadius,o.smallCycleRadius):new V(o.color,o.width,o.curvature,o.arrowLength,o.arrowWidth,o.hasSourceArrow,o.hasTargetArrow),W=o=>t=>t===A.Cycle&&t==="cycle"?new k(o.color,o.width,o.arrowLength,o.arrowWidth,o.hasSourceArrow\|\|o.hasTargetArrow,o.cycleSquareSide,o.minPortOffset,o.roundness):new D(o.color,o.width,o.arrowLength,o.arrowWidth,o.minPortOffset,o.hasSourceArrow,o.hasTargetArrow,o.roundness);class P{constructor(){n(this,"counter",0)}next(){const t=`${this.counter}`;return this.counter++,t}reset(){this.counter=0}}class Z{constructor(t,e,s,r,a){n(this,"nodeIdGenerator",new P);n(this,"portIdGenerator",new P);n(this,"connectionIdGenerator",new P);this.graphStore=t,this.htmlController=e,this.viewportTransformer=s,this.nodesCenterFn=r,this.portsCenterFn=a}moveNodeOnTop(t){if(!this.graphStore.hasNode(t))throw new Error("failed to move on top nonexisting node");this.htmlController.moveNodeOnTop(t)}addNode(t,e,s,r,a,c){if(t===void 0)do t=this.nodeIdGenerator.next();while(this.graphStore.hasNode(t));if(this.graphStore.hasNode(t))throw new Error("failed to add node with existing id");this.graphStore.addNode(t,e,s,r,c??this.nodesCenterFn),this.htmlController.attachNode(t),a!==void 0&&Object.entries(a).forEach(([h,i])=>{i instanceof HTMLElement?this.markPort(h,i,t,this.portsCenterFn,null):this.markPort(h,i.element,t,i.centerFn??this.portsCenterFn,i.direction??null)})}markPort(t,e,s,r,a){if(t===void 0)do t=this.portIdGenerator.next();while(this.graphStore.hasPort(t));if(!this.graphStore.hasNode(s))throw new Error("failed to set port on nonexisting node");if(this.graphStore.hasPort(t))throw new Error("failed to add port with existing id");this.graphStore.addPort(t,e,s,r??this.portsCenterFn,a??null)}updatePortConnections(t){if(!this.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.htmlController.updatePortConnections(t)}unmarkPort(t){if(!this.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.graphStore.getPortAdjacentConnections(t).forEach(e=>{this.removeConnection(e)}),this.graphStore.removePort(t)}addConnection(t,e,s,r){if(t===void 0)do t=this.connectionIdGenerator.next();while(this.graphStore.hasConnection(t));if(!this.graphStore.hasPort(e))throw new Error("failed to add connection from nonexisting port");if(!this.graphStore.hasPort(s))throw new Error("failed to add connection to nonexisting port");let a=A.Regular;e===s&&(a=A.Cycle),this.graphStore.addConnection(t,e,s,r(a)),this.htmlController.attachConnection(t)}removeConnection(t){if(!this.graphStore.hasConnection(t))throw new Error("failed to remove nonexisting connection");this.htmlController.detachConnection(t),this.graphStore.removeConnection(t)}removeNode(t){if(!this.graphStore.hasNode(t))throw new Error("failed to remove nonexisting node");this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportState(t,e,s){this.viewportTransformer.patchState(t,e,s),this.htmlController.applyTransform()}moveToNodes(t){if(t.length===0)return;const e=t.map(u=>this.graphStore.getNode(u)).filter(u=>u!==void 0);if(e.length<t.length)throw new Error("failed to move to nonexisting node");const[s,r]=e.reduce((u,C)=>[u[0]+C.x,u[1]+C.y],[0,0]),a=s/e.length,c=r/e.length,[h,i]=this.htmlController.getViewportDimensions(),d=this.viewportTransformer.getAbsScale(),g=a-dh/2,l=c-di/2;this.patchViewportState(null,g,l)}updateNodeCoordinates(t,e,s){if(!this.graphStore.hasNode(t))throw new Error("failed to update coordinates of nonexisting node");this.graphStore.updateNodeCoords(t,e,s),this.htmlController.updateNodeCoordinates(t)}updateConnectionController(t,e){if(!this.graphStore.hasConnection(t))throw new Error("failed to update nonexisting connection");this.htmlController.detachConnection(t),this.graphStore.updateConnectionController(t,e),this.htmlController.attachConnection(t)}attach(t){this.htmlController.attach(t)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.connectionIdGenerator.reset()}destroy(){this.htmlController.destroy()}}class H{constructor(t,e,s,r){n(this,"publicViewportTransformer");n(this,"canvasController");const a=new N,c=new U;this.publicViewportTransformer=new X(a);const h=new E(c,a,this.publicViewportTransformer,t,e);this.canvasController=new Z(c,h,a,s,r)}}const R=(o,t)=>[o/2,t/2],q=()=>()=>{},_=(o,t,e,s,r,a)=>{o.clearRect(0,0,o.canvas.width,o.canvas.height),o.fillStyle=a,o.fillRect(0,0,o.canvas.width,o.canvas.height);const c=t.getViewCoords(0,0),h=t.getViewScale(),i=sh;let d=0,g=0,l=i/2;do l=2,d=o.canvas.width/l,g=o.canvas.height/l;while(dg>1e4);const u=c[0]-Math.floor(c[0]/l)l,C=c[1]-Math.floor(c[1]/l)l,m=rh,v=2Math.PI,f=u-l,y=C-l,b=o.canvas.width+u,$=o.canvas.height+C;o.fillStyle=e;for(let S=f;S<=b;S+=l)for(let T=y;T<=$;T+=l)o.beginPath(),o.arc(S,T,m,0,v),o.closePath(),o.fill()},J=(o,t,e,s)=>(r,a)=>{_(r,a,o,t,e,s)},K=(o,t)=>{o.fillStyle=t,o.fillRect(0,0,o.canvas.width,o.canvas.height)},Q=o=>t=>{K(t,o)},I=o=>{switch(o==null?void 0:o.type){case"custom":return o.drawingFn;case"dots":return J(o.dotColor??"#d8d8d8",o.dotGap??25,o.dotRadius??1.5,o.color??"#ffffff");case"color":return Q(o.color??"#ffffff");default:return q()}},B=o=>{switch(o==null?void 0:o.type){case"custom":return o.controllerFactory;case"straight":return W({color:o.color??"#5c5c5c",width:o.width??1,arrowLength:o.arrowLength??15,arrowWidth:o.arrowWidth??4,minPortOffset:o.minPortOffset??15,hasSourceArrow:o.hasSourceArrow??!1,hasTargetArrow:o.hasTargetArrow??!1,cycleSquareSide:o.cycleSquareSide??30,roundness:o.roundness??5});default:return j({color:o.color??"#5c5c5c",width:o.width??1,curvature:o.curvature??90,arrowLength:o.arrowLength??15,arrowWidth:o.arrowWidth??4,hasSourceArrow:o.hasSourceArrow??!1,hasTargetArrow:o.hasTargetArrow??!1,cycleRadius:o.cycleRadius??30,smallCycleRadius:o.smallCycleRadius??15})}},tt=o=>{var t,e,s;return{background:{drawingFn:I(o.background??{type:"none"})},nodes:{centerFn:((t=o.nodes)==null?void 0:t.centerFn)??R},ports:{centerFn:((e=o.ports)==null?void 0:e.centerFn)??R},edges:{controllerFactory:B(o.edges??{})},layers:{mode:((s=o.layers)==null?void 0:s.mode)??"edges-follow-node"}}};class z{constructor(t){n(this,"transformation");n(this,"di");n(this,"connectionControllerFactory");this.apiOptions=t;const e=tt(this.apiOptions??{});this.di=new H(e.layers.mode,e.background.drawingFn,e.nodes.centerFn,e.ports.centerFn),this.transformation=this.di.publicViewportTransformer,this.connectionControllerFactory=e.edges.controllerFactory}addNode(t){return this.di.canvasController.addNode(t.id,t.element,t.x,t.y,t.ports,t.centerFn),this}moveNodeOnTop(t){return this.di.canvasController.moveNodeOnTop(t),this}removeNode(t){return this.di.canvasController.removeNode(t),this}markPort(t){return this.di.canvasController.markPort(t.id,t.element,t.nodeId,t.centerFn,t.direction),this}updatePortEdges(t){return this.di.canvasController.updatePortConnections(t),this}unmarkPort(t){return this.di.canvasController.unmarkPort(t),this}addEdge(t){const e=t.options!==void 0?B(t.options):this.connectionControllerFactory;return this.di.canvasController.addConnection(t.id,t.from,t.to,e),this}removeEdge(t){return this.di.canvasController.removeConnection(t),this}patchViewportState(t){return this.di.canvasController.patchViewportState(t.scale??null,t.x??null,t.y??null),this}moveToNodes(t){return this.di.canvasController.moveToNodes(t),this}updateNodeCoordinates(t,e,s){return this.di.canvasController.updateNodeCoordinates(t,e,s),this}updateConnection(t,e){return e.controller!==void 0&&this.di.canvasController.updateConnectionController(t,e.controller),this}clear(){return this.di.canvasController.clear(),this}attach(t){return this.di.canvasController.attach(t),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}class G{constructor(t,e){n(this,"transformation");n(this,"nodes",new Map);n(this,"grabbedNodeId",null);n(this,"onNodeDrag");n(this,"onBeforeNodeDrag");n(this,"nodeIdGenerator",new P);n(this,"element",null);n(this,"onCanvasMouseUp",()=>{this.setCursor(null),this.grabbedNodeId=null});n(this,"onCanvasMouseMove",t=>{this.grabbedNodeId!==null&&(t.stopPropagation(),this.dragNode(this.grabbedNodeId,t.movementX,t.movementY))});n(this,"onCanvasTouchStart",t=>{this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});n(this,"onCanvasTouchMove",t=>{if(this.grabbedNodeId===null\|\|t.touches.length!==1\|\|this.previousTouchCoords===null)return;t.stopImmediatePropagation();const[e,s]=[t.touches[0].clientX-this.previousTouchCoords[0],t.touches[0].clientY-this.previousTouchCoords[1]];this.dragNode(this.grabbedNodeId,e,s),this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});n(this,"onCanvasTouchEnd",t=>{t.touches.length>0?this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]:(this.previousTouchCoords=null,this.grabbedNodeId=null)});n(this,"previousTouchCoords",null);var a,c;this.canvas=t,this.transformation=this.canvas.transformation;const s=()=>{};this.onNodeDrag=((a=e==null?void 0:e.events)==null?void 0:a.onNodeDrag)??s;const r=()=>!0;this.onBeforeNodeDrag=((c=e==null?void 0:e.events)==null?void 0:c.onBeforeNodeDrag)??r}addNode(t){let e=t.id;if(e===void 0)do e=this.nodeIdGenerator.next();while(this.nodes.has(e));this.canvas.addNode(t);const s=a=>{this.onBeforeNodeDrag({nodeId:e,element:t.element,x:t.x,y:t.y})&&(a.stopImmediatePropagation(),this.grabbedNodeId=e,this.setCursor("grab"),this.canvas.moveNodeOnTop(e))},r=a=>{this.onBeforeNodeDrag({nodeId:e,element:t.element,x:t.x,y:t.y})&&a.touches.length===1&&(this.grabbedNodeId=e,this.canvas.moveNodeOnTop(e))};return this.nodes.set(e,{element:t.element,onMouseDown:s,onTouchStart:r,x:t.x,y:t.y}),t.element.addEventListener("mousedown",s),t.element.addEventListener("touchstart",r),this}removeNode(t){const e=this.nodes.get(t);return e!==void 0&&(e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)),this.canvas.removeNode(t),this.nodes.delete(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortEdges(t){return this.canvas.updatePortEdges(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoordinates(t,e,s){return this.canvas.updateNodeCoordinates(t,e,s),this}updateConnection(t,e){return this.canvas.updateConnection(t,e),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this.nodes.forEach(t=>{t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this}attach(t){return this.detach(),this.element=t,this.canvas.attach(this.element),this.element.addEventListener("mouseup",this.onCanvasMouseUp),this.element.addEventListener("mousemove",this.onCanvasMouseMove),this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.element.addEventListener("touchmove",this.onCanvasTouchMove),this.element.addEventListener("touchend",this.onCanvasTouchEnd),this.element.addEventListener("touchcancel",this.onCanvasTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mouseup",this.onCanvasMouseUp),this.element.removeEventListener("mousemove",this.onCanvasMouseMove),this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element.removeEventListener("touchmove",this.onCanvasTouchMove),this.element.removeEventListener("touchend",this.onCanvasTouchEnd),this.element.removeEventListener("touchcancel",this.onCanvasTouchEnd),this.element=null),this}destroy(){this.detach(),this.nodes.forEach(t=>{t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}dragNode(t,e,s){const r=this.nodes.get(t);if(r===void 0)throw new Error("failed to drag nonexisting node");const[a,c]=this.transformation.getViewCoords(r.x,r.y),h=a+e,i=c+s,[d,g]=this.transformation.getAbsCoords(h,i);r.x=d,r.y=g,this.canvas.updateNodeCoordinates(t,d,g),this.onNodeDrag({nodeId:t,element:r.element,x:r.x,y:r.y})}}class Y{constructor(t,e){n(this,"transformation");n(this,"element",null);n(this,"isMoving",!1);n(this,"prevTouches",null);n(this,"onTransform");n(this,"onBeforeTransform");n(this,"isScalable");n(this,"isShiftable");n(this,"minViewScale");n(this,"maxViewScale");n(this,"wheelSensitivity");n(this,"onMouseDown",()=>{this.setCursor("grab"),this.isMoving=!0});n(this,"onMouseMove",t=>{if(!this.isMoving\|\|!this.isShiftable)return;const e=-t.movementX,s=-t.movementY;this.moveViewport(e,s)});n(this,"onMouseUp",()=>{this.setCursor(null),this.isMoving=!1});n(this,"onWheelScroll",t=>{if(this.element===null\|\|this.isScalable===!1)return;t.preventDefault();const{left:e,top:s}=this.element.getBoundingClientRect(),r=t.clientX-e,a=t.clientY-s,h=1/(t.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(h,r,a)});n(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t)});n(this,"onTouchMove",t=>{if(this.prevTouches===null\|\|this.element===null\|\|!this.isShiftable)return;const e=this.getAverageTouch(t);if((e.touchesCnt===1\|\|e.touchesCnt===2)&&this.moveViewport(-(e.x-this.prevTouches.x),-(e.y-this.prevTouches.y)),e.touchesCnt===2&&this.isScalable){const{left:s,top:r}=this.element.getBoundingClientRect(),a=this.prevTouches.x-s,c=this.prevTouches.y-r,i=1/(e.scale/this.prevTouches.scale);this.scaleViewport(i,a,c)}this.prevTouches=e,t.preventDefault()});n(this,"onTouchEnd",t=>{t.touches.length>0?this.prevTouches=this.getAverageTouch(t):this.prevTouches=null});var i,d,g,l,u,C,m,v,f,y,b,$;this.canvas=t,this.options=e,this.transformation=this.canvas.transformation;const s=((d=(i=this.options)==null?void 0:i.scale)==null?void 0:d.min)??null,r=((l=(g=this.options)==null?void 0:g.scale)==null?void 0:l.max)??null;this.isScalable=((C=(u=this.options)==null?void 0:u.scale)==null?void 0:C.enabled)!==!1,this.minViewScale=r!==null?1/r:null,this.maxViewScale=s!==null?1/s:null,this.isShiftable=((v=(m=this.options)==null?void 0:m.shift)==null?void 0:v.enabled)!==!1;const a=(y=(f=this.options)==null?void 0:f.scale)==null?void 0:y.wheelSensitivity;this.wheelSensitivity=a!==void 0?a:1.2;const c=()=>{};this.onTransform=((b=e==null?void 0:e.events)==null?void 0:b.onTransform)??c;const h=()=>!0;this.onBeforeTransform=(($=e==null?void 0:e.events)==null?void 0:$.onBeforeTransform)??h}addNode(t){return this.canvas.addNode(t),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortEdges(t){return this.canvas.updatePortEdges(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoordinates(t,e,s){return this.canvas.updateNodeCoordinates(t,e,s),this}updateConnection(t,e){return this.canvas.updateConnection(t,e),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this}attach(t){return this.detach(),this.element=t,this.canvas.attach(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseup",this.onMouseUp),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.element.addEventListener("touchmove",this.onTouchMove),this.element.addEventListener("touchend",this.onTouchEnd),this.element.addEventListener("touchcancel",this.onTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseup",this.onMouseUp),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("touchmove",this.onTouchMove),this.element.removeEventListener("touchend",this.onTouchEnd),this.element.removeEventListener("touchcancel",this.onTouchEnd),this.element=null),this}destroy(){this.detach(),this.canvas.destroy()}getAverageTouch(t){const e=[],s=t.touches.length;for(let i=0;i<s;i++)e.push([t.touches[i].clientX,t.touches[i].clientY]);const r=e.reduce((i,d)=>[i[0]+d[0],i[1]+d[1]],[0,0]),a=[r[0]/s,r[1]/s],h=e.map(i=>[i[0]-a[0],i[1]-a[1]]).reduce((i,d)=>i+Math.sqrt(d[0]d[0]+d[1]d[1]),0);return{x:a[0],y:a[1],scale:h/s,touchesCnt:s}}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}moveViewport(t,e){const[s,r]=this.transformation.getAbsCoords(0,0),a=this.canvas.transformation.getAbsScale(),c={scale:a,x:s+at,y:r+ae};this.onBeforeTransform({...c})&&(this.canvas.patchViewportState(c),this.onTransform(c))}scaleViewport(t,e,s){const[r,a]=this.canvas.transformation.getAbsCoords(0,0),c=this.canvas.transformation.getAbsScale(),h=ct,i=c(1-t)e+r,d=c(1-t)s+a;if(this.maxViewScale!==null&&h>this.maxViewScale&&h>c\|\|this.minViewScale!==null&&h<this.minViewScale&&h<c)return;const g={scale:h,x:i,y:d};this.onBeforeTransform({...g})&&(this.canvas.patchViewportState(g),this.onTransform(g))}}class et{constructor(){n(this,"coreOptions");n(this,"dragOptions");n(this,"transformOptions");n(this,"isDraggable",!1);n(this,"isTransformable",!1)}setOptions(t){return this.coreOptions=t,this}setUserDraggableNodes(t){return this.isDraggable=!0,this.dragOptions=t,this}setUserTransformableCanvas(t){return this.isTransformable=!0,this.transformOptions=t,this}build(){let t=new z(this.coreOptions);return this.isDraggable&&(t=new G(t,this.dragOptions)),this.isTransformable&&(t=new Y(t,this.transformOptions)),t}}w.BezierEdgeController=V,w.CanvasCore=z,w.CycleCircleEdgeController=F,w.CycleSquareEdgeController=k,w.EdgeType=A,w.EdgeUtils=p,w.HtmlGraphBuilder=et,w.StraightEdgeController=D,w.UserDraggableNodesCanvas=G,w.UserTransformableCanvas=Y,w.createBezierEdgeControllerFactory=j,w.createStraightEdgeControllerFactory=W,Object.defineProperty(w,Symbol.toStringTag,{value:"Module"})});
1	+ (function(v,b){typeof exports=="object"&&typeof module<"u"?b(exports):typeof define=="function"&&define.amd?define(["exports"],b):(v=typeof globalThis<"u"?globalThis:v\|\|self,b(v.HTMLGraph={}))})(this,function(v){"use strict";var ae=Object.defineProperty;var he=(v,b,x)=>b in v?ae(v,b,{enumerable:!0,configurable:!0,writable:!0,value:x}):v[b]=x;var n=(v,b,x)=>he(v,typeof b!="symbol"?b+"":b,x);class b{constructor(e,t,s,r,a){n(this,"canvasWrapper",null);n(this,"host");n(this,"nodesContainer");n(this,"edgesContainer");n(this,"canvas");n(this,"canvasCtx");n(this,"hostResizeObserver");n(this,"nodesResizeObserver");n(this,"nodeElementToIdMap",new Map);n(this,"nodeWrapperElementToIdMap",new Map);n(this,"nodeIdToWrapperElementMap",new Map);n(this,"edgeIdToElementMap",new Map);n(this,"currentZIndex",0);n(this,"layers",{"edges-on-top":{create:()=>{this.host.appendChild(this.nodesContainer),this.host.appendChild(this.edgesContainer)},update:(e,t,s)=>{this.nodesContainer.style.transform=`matrix(${e}, 0, 0, ${e}, ${t}, ${s})`,this.edgesContainer.style.transform=`matrix(${e}, 0, 0, ${e}, ${t}, ${s})`},moveOnTop:e=>{this.currentZIndex+=1;const t=this.nodeIdToWrapperElementMap.get(e);t.style.zIndex=`${this.currentZIndex}`}},"edges-follow-node":{create:()=>{this.host.appendChild(this.nodesContainer),this.edgesContainer=this.nodesContainer},update:(e,t,s)=>{this.nodesContainer.style.transform=`matrix(${e}, 0, 0, ${e}, ${t}, ${s})`},moveOnTop:e=>{const t=this.nodeIdToWrapperElementMap.get(e);this.currentZIndex+=2,t.style.zIndex=`${this.currentZIndex}`,this.graphStore.getNodeAdjacentEdges(e).forEach(r=>{this.edgeIdToElementMap.get(r).style.zIndex=`${this.currentZIndex-1}`})}},"nodes-on-top":{create:()=>{this.host.appendChild(this.edgesContainer),this.host.appendChild(this.nodesContainer)},update:(e,t,s)=>{this.nodesContainer.style.transform=`matrix(${e}, 0, 0, ${e}, ${t}, ${s})`,this.edgesContainer.style.transform=`matrix(${e}, 0, 0, ${e}, ${t}, ${s})`},moveOnTop:e=>{this.currentZIndex+=1;const t=this.nodeIdToWrapperElementMap.get(e);t.style.zIndex=`${this.currentZIndex}`}}});this.graphStore=e,this.viewportTransformer=t,this.publicViewportTransformer=s,this.layersMode=r,this.backgroundDrawingFn=a,this.host=this.createHost(),this.canvas=this.createCanvas(),this.nodesContainer=this.createNodesContainer(),this.edgesContainer=this.createEdgesContainer();const c=this.canvas.getContext("2d");if(c===null)throw new Error("unable to get canvas context");this.canvasCtx=c,this.host.appendChild(this.canvas),this.layers[this.layersMode].create(),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.edgeIdToElementMap.keys()).forEach(e=>{this.detachEdge(e)}),Array.from(this.nodeElementToIdMap.values()).forEach(e=>{this.detachNode(e)})}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}destroy(){this.hostResizeObserver.disconnect(),this.nodesResizeObserver.disconnect(),this.host.removeChild(this.canvas),this.host.removeChild(this.edgesContainer),this.host.removeChild(this.nodesContainer),this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const[e,t]=this.viewportTransformer.getViewCoords(0,0),s=this.viewportTransformer.getViewScale();this.layers[this.layersMode].update(s,e,t)}attachNode(e){const t=this.graphStore.getNode(e),s=document.createElement("div");s.appendChild(t.element),s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,s.style.visibility="hidden",this.nodesContainer.appendChild(s),this.nodeElementToIdMap.set(t.element,e),this.nodeWrapperElementToIdMap.set(s,e),this.nodeIdToWrapperElementMap.set(e,s),this.updateNodeCoords(e,t.x,t.y),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(e){const t=this.graphStore.getNode(e);this.nodesResizeObserver.unobserve(t.element),this.nodesContainer.removeChild(t.element);const s=this.nodeIdToWrapperElementMap.get(e);s.removeChild(t.element),this.nodeElementToIdMap.delete(t.element),this.nodeWrapperElementToIdMap.delete(s),this.nodeIdToWrapperElementMap.delete(e)}attachEdge(e){const s=this.graphStore.getEdge(e).controller.svg;s.style.transformOrigin="50% 50%",s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,this.edgeIdToElementMap.set(e,s),this.updateEdgeCoords(e),this.edgesContainer.appendChild(s)}detachEdge(e){const t=this.edgeIdToElementMap.get(e);this.edgeIdToElementMap.delete(e),this.edgesContainer.removeChild(t)}moveNodeOnTop(e){this.layers[this.layersMode].moveOnTop(e)}updateNodeCoordinates(e){const t=this.graphStore.getNode(e),s=this.graphStore.getNodeAdjacentEdges(e);this.updateNodeCoords(e,t.x,t.y),s.forEach(r=>{this.updateEdgeCoords(r)})}updatePortEdges(e){this.graphStore.getPortAdjacentEdges(e).forEach(s=>{this.updateEdgeCoords(s)})}getViewportDimensions(){const e=this.host.getBoundingClientRect();return[e.width,e.height]}createHost(){const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e}createCanvas(){const e=document.createElement("canvas");return e.style.position="absolute",e.style.inset="0",e}createNodesContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="0",e.style.height="0",e}createEdgesContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.pointerEvents="none",e.style.top="0",e.style.left="0",e.style.width="0",e.style.height="0",e}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(e=>{e.forEach(t=>{const s=t.target,r=this.nodeWrapperElementToIdMap.get(s),a=this.graphStore.getNode(r);this.updateNodeCoords(r,a.x,a.y),this.graphStore.getNodeAdjacentEdges(r).forEach(h=>{this.updateEdgeCoords(h)})})})}updateCanvasDimensions(){const{width:e,height:t}=this.host.getBoundingClientRect();this.canvas.width=e,this.canvas.height=t}updateNodeCoords(e,t,s){const r=this.nodeIdToWrapperElementMap.get(e),{width:a,height:c}=r.getBoundingClientRect(),h=this.viewportTransformer.getAbsScale(),i=this.graphStore.getNode(e),[d,g]=i.centerFn(a,c);r.style.transform=`matrix(1, 0, 0, 1, ${t-hd}, ${s-hg})`}updateEdgeCoords(e){const t=this.graphStore.getEdge(e),s=this.graphStore.getPort(t.from),r=this.graphStore.getPort(t.to),a=s.element.getBoundingClientRect(),c=r.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),[i,d]=this.viewportTransformer.getAbsCoords(a.left-h.left,a.top-h.top),[g,l]=this.viewportTransformer.getAbsCoords(c.left-h.left,c.top-h.top),u=this.viewportTransformer.getAbsScale(),[w,m]=s.centerFn(a.widthu,a.heightu),[f,C]=r.centerFn(c.widthu,c.heightu),E=w+i,y=m+d,T=f+g,S=C+l,$=Math.min(E,T),N=Math.min(y,S),A=Math.abs(T-E),L=Math.abs(S-y);t.controller.update($,N,A,L,s,r)}}class x{constructor(){n(this,"state",{scale:1,x:0,y:0})}getViewCoords(e,t){return[(e-this.state.x)/this.state.scale,(t-this.state.y)/this.state.scale]}getViewScale(){return 1/this.state.scale}getAbsCoords(e,t){return[ethis.state.scale+this.state.x,tthis.state.scale+this.state.y]}getAbsScale(){return this.state.scale}patchState(e,t,s){this.state={scale:e??this.state.scale,x:t??this.state.x,y:s??this.state.y}}}class q{constructor(e){this.transformer=e}getViewCoords(e,t){return this.transformer.getViewCoords(e,t)}getViewScale(){return this.transformer.getViewScale()}getAbsCoords(e,t){return this.transformer.getAbsCoords(e,t)}getAbsScale(){return this.transformer.getAbsScale()}}class _{constructor(){n(this,"nodes",Object.create(null));n(this,"ports",Object.create(null));n(this,"nodePorts",Object.create(null));n(this,"portNodeId",Object.create(null));n(this,"edges",Object.create(null));n(this,"incommingEdges",Object.create(null));n(this,"outcommingEdges",Object.create(null));n(this,"cycleEdges",Object.create(null))}addNode(e,t,s,r,a){this.nodes[e]={element:t,x:s,y:r,centerFn:a},this.nodePorts[e]=Object.create(null)}hasNode(e){return this.nodes[e]!==void 0}getNode(e){return this.nodes[e]}updateNodeCoords(e,t,s){this.nodes[e].x=t,this.nodes[e].y=s}updateEdgeController(e,t){this.edges[e].controller=t}removeNode(e){this.getNodeAdjacentEdges(e).forEach(r=>{this.removeEdge(r)}),delete this.nodes[e];const s=this.nodePorts[e];Object.keys(s).forEach(r=>{delete this.portNodeId[r]}),delete this.nodePorts[e]}addPort(e,t,s,r,a){this.ports[e]={element:t,centerFn:r,direction:a},this.cycleEdges[e]={},this.incommingEdges[e]={},this.outcommingEdges[e]={},this.portNodeId[e]=s;const c=this.nodePorts[s];c!==void 0&&(c[e]=t)}getPort(e){return this.ports[e]}getPortNode(e){return this.portNodeId[e]}hasPort(e){return this.portNodeId[e]!==void 0}removePort(e){Object.keys(this.cycleEdges[e]).forEach(r=>{this.removeEdge(r)}),delete this.cycleEdges[e],Object.keys(this.incommingEdges[e]).forEach(r=>{this.removeEdge(r)}),delete this.incommingEdges[e],Object.keys(this.outcommingEdges[e]).forEach(r=>{this.removeEdge(r)}),delete this.outcommingEdges[e];const t=this.portNodeId[e];delete this.portNodeId[e];const s=this.nodePorts[t];delete s[e],delete this.ports[e]}addEdge(e,t,s,r){this.edges[e]={from:t,to:s,controller:r},t!==s?(this.outcommingEdges[t][e]=!0,this.incommingEdges[s][e]=!0):this.cycleEdges[t][e]=!0}getEdge(e){return this.edges[e]}hasEdge(e){return this.edges[e]!==void 0}removeEdge(e){const t=this.edges[e],s=t.from,r=t.to;delete this.cycleEdges[s][e],delete this.cycleEdges[r][e],delete this.incommingEdges[s][e],delete this.incommingEdges[r][e],delete this.outcommingEdges[s][e],delete this.outcommingEdges[r][e],delete this.edges[e]}getPortAdjacentEdges(e){return[...this.getPortIncomingEdges(e),...this.getPortOutcomingEdges(e),...this.getPortCycleEdges(e)]}getNodeAdjacentEdges(e){return[...this.getNodeIncomingEdges(e),...this.getNodeOutcomingEdges(e),...this.getNodeCycleEdges(e)]}clear(){this.nodes=Object.create(null),this.ports=Object.create(null),this.nodePorts=Object.create(null),this.portNodeId=Object.create(null),this.edges=Object.create(null),this.incommingEdges=Object.create(null),this.outcommingEdges=Object.create(null),this.cycleEdges=Object.create(null)}getPortIncomingEdges(e){return Object.keys(this.incommingEdges[e]??{})}getPortOutcomingEdges(e){return Object.keys(this.outcommingEdges[e]??{})}getPortCycleEdges(e){return Object.keys(this.cycleEdges[e]??{})}getNodeIncomingEdges(e){const t=Object.keys(this.nodePorts[e]);let s=[];return t.forEach(r=>{s=[...s,...this.getPortIncomingEdges(r)]}),s}getNodeOutcomingEdges(e){const t=Object.keys(this.nodePorts[e]);let s=[];return t.forEach(r=>{s=[...s,...this.getPortOutcomingEdges(r)]}),s}getNodeCycleEdges(e){const t=Object.keys(this.nodePorts[e]);let s=[];return t.forEach(r=>{s=[...s,...this.getPortCycleEdges(r)]}),s}}class p{static getPortCenter(e){const{top:t,left:s,width:r,height:a}=e.element.getBoundingClientRect(),c=e.centerFn(r,a);return[s+c[0],t+c[1]]}static rotate(e,t,s){return[t[0]e[0]-t[1]e[1]+((1-t[0])s[0]+t[1]s[1]),t[1]e[0]+t[0]e[1]+((1-t[0])s[1]-t[1]s[0])]}static getDirectionVector(e,t,s){return[tMath.cos(e??0),sMath.sin(e??0)]}static getArrowPath(e,t,s,r,a){const h=[[0,0],[r,a],[r,-a]].map(l=>this.rotate(l,e,[0,0])).map(l=>[l[0]+t,l[1]+s]),i=`M ${h[0][0]} ${h[0][1]}`,d=`L ${h[1][0]} ${h[1][1]}`,g=`L ${h[2][0]} ${h[2][1]}`;return`${i} ${d} ${g}`}static getArrowOffsetPath(e,t,s,r,a){const h=[[r,0],[r+a,0]].map(i=>this.rotate(i,e,[0,0])).map(i=>[i[0]+t,i[1]+s]);return`M ${h[0][0]} ${h[0][1]} L ${h[1][0]} ${h[1][1]}`}static createStraightPath(e){return e.map((t,s)=>`${s===0?"M":"L"} ${t[0]} ${t[1]}`).join(" ")}}class D{constructor(e,t,s,r,a,c,h){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.color=e,this.width=t,this.curvature=s,this.arrowLength=r,this.arrowWidth=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",c&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(e,t,s,r,a,c){this.svg.style.width=`${s}px`,this.svg.style.height=`${r}px`;const h=p.getPortCenter(a),i=p.getPortCenter(c),d=h[0]<=i[0]?1:-1,g=h[1]<=i[1]?1:-1;this.svg.style.transform=`translate(${e}px, ${t}px)`,this.group.style.transform=`scale(${d}, ${g})`;const l=p.getDirectionVector(a.direction,d,g),u=p.getDirectionVector(c.direction,d,g),w=p.rotate([this.arrowLength,0],l,[0,0]),m=p.rotate([s-this.arrowLength,r],u,[s,r]),f=[w[0]+l[0]this.curvature,w[1]+l[1]this.curvature],C=[m[0]-u[0]this.curvature,m[1]-u[1]this.curvature],E=`M ${w[0]} ${w[1]} C ${f[0]} ${f[1]}, ${C[0]} ${C[1]}, ${m[0]} ${m[1]}`,y=this.sourceArrow?"":`M 0 0 L ${w[0]} ${w[1]} `,T=this.targetArrow?"":` M ${m[0]} ${m[1]} L ${s} ${r}`,S=`${y}${E}${T}`;if(this.line.setAttribute("d",S),this.sourceArrow){const $=p.getArrowPath(l,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",$)}if(this.targetArrow){const $=p.getArrowPath(u,s,r,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",$)}}}class F{constructor(e,t,s,r,a,c,h,i){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"roundness");this.color=e,this.width=t,this.arrowLength=s,this.arrowWidth=r,this.arrowOffset=a,this.roundness=Math.min(this.arrowOffset,i),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",c&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),h&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(e,t,s,r,a,c){this.svg.style.width=`${s}px`,this.svg.style.height=`${r}px`;const h=p.getPortCenter(a),i=p.getPortCenter(c),d=h[0]<=i[0]?1:-1,g=h[1]<=i[1]?1:-1;this.svg.style.transform=`translate(${e}px, ${t}px)`,this.group.style.transform=`scale(${d}, ${g})`;const l=p.getDirectionVector(a.direction,d,g),u=p.getDirectionVector(c.direction,d,g),w=this.sourceArrow?p.rotate([this.arrowLength,0],l,[0,0]):[0,0],m=this.targetArrow?p.rotate([s-this.arrowLength,r],u,[s,r]):[s,r],f=this.arrowLength+this.arrowOffset,C=f-this.roundness,E=s-f2d,y=Math.sqrt(EE+rr)/2,T=Math.min(this.roundness,y),S=p.rotate([C,0],l,[0,0]),$=p.rotate([s-C,r],u,[s,r]),N=p.rotate([f,0],l,[0,0]),A=p.rotate([s-f,r],u,[s,r]),L=(A[0]-N[0])/2,U=(A[1]-N[1])/2,O=T/y,Z=[N[0]+LO,N[1]+UO],H=[A[0]-LO,A[1]-UO],ie=[`M ${w[0]} ${w[1]}`,`L ${S[0]} ${S[1]}`,`C ${N[0]} ${N[1]} ${N[0]} ${N[1]} ${Z[0]} ${Z[1]}`,`L ${H[0]} ${H[1]}`,`C ${A[0]} ${A[1]} ${A[0]} ${A[1]} ${$[0]} ${$[1]}`,`L ${m[0]} ${m[1]}`].join(" ");if(this.line.setAttribute("d",ie),this.sourceArrow){const V=p.getArrowPath(l,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",V)}if(this.targetArrow){const V=p.getArrowPath(u,s,r,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",V)}}}class k{constructor(e,t,s,r,a,c,h){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);this.color=e,this.width=t,this.arrowLength=s,this.arrowWidth=r,this.radius=c,this.smallRadius=h,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",a&&(this.arrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.arrow.setAttribute("fill",this.color),this.group.appendChild(this.arrow)),this.svg.style.overflow="visible",this.svg.style.width="0px",this.svg.style.height="0px"}update(e,t,s,r,a){this.svg.style.transform=`translate(${e}px, ${t}px)`;const c=p.getDirectionVector(a.direction,1,1),h=this.smallRadius,i=this.radius,d=Math.sqrt(hh+ii),g=h+i,l=this.arrowLength+d(1-i/g),u=hi/g,m=[[this.arrowLength,0],[l,u],[l,-u]].map(y=>p.rotate(y,c,[0,0])),f=[`M ${m[0][0]} ${m[0][1]}`,`A ${h} ${h} 0 0 1 ${m[1][0]} ${m[1][1]}`,`A ${i} ${i} 0 1 0 ${m[2][0]} ${m[2][1]}`,`A ${h} ${h} 0 0 1 ${m[0][0]} ${m[0][1]}`].join(" "),C=`M 0 0 L ${m[0][0]} ${m[0][1]} `,E=`${this.arrow!==null?"":C}${f}`;if(this.line.setAttribute("d",E),this.arrow){const y=p.getArrowPath(c,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",y)}}}class j{constructor(e,t,s,r,a,c,h,i){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);n(this,"roundness");n(this,"points");this.color=e,this.width=t,this.arrowLength=s,this.arrowWidth=r,this.side=c,this.minPortOffset=h,this.roundness=Math.min(i,this.minPortOffset,this.side/2),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",a&&(this.arrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.arrow.setAttribute("fill",this.color),this.group.appendChild(this.arrow)),this.svg.style.overflow="visible",this.svg.style.width="0px",this.svg.style.height="0px";const d=this.minPortOffset,g=this.side,l=this.arrowLength+d,u=this.roundness,w=l-u,m=l+u,f=g-u,C=l+2g,E=C-u;console.log(u),this.points=[[this.arrowLength,0],[w,0],[l,u],[l,f],[m,g],[E,g],[C,f],[C,-f],[E,-g],[m,-g],[l,-f],[l,-u]]}update(e,t,s,r,a){this.svg.style.transform=`translate(${e}px, ${t}px)`;const c=p.getDirectionVector(a.direction,1,1),h=this.roundness,i=this.points.map(u=>p.rotate(u,c,[0,0])),d=[`M ${i[0][0]} ${i[0][1]}`,`L ${i[1][0]} ${i[1][1]}`,`A ${h} ${h} 0 0 1 ${i[2][0]} ${i[2][1]}`,`L ${i[3][0]} ${i[3][1]}`,`A ${h} ${h} 0 0 0 ${i[4][0]} ${i[4][1]}`,`L ${i[5][0]} ${i[5][1]}`,`A ${h} ${h} 0 0 0 ${i[6][0]} ${i[6][1]}`,`L ${i[7][0]} ${i[7][1]}`,`A ${h} ${h} 0 0 0 ${i[8][0]} ${i[8][1]}`,`L ${i[9][0]} ${i[9][1]}`,`A ${h} ${h} 0 0 0 ${i[10][0]} ${i[10][1]}`,`L ${i[11][0]} ${i[11][1]}`,`A ${h} ${h} 0 0 1 ${i[1][0]} ${i[1][1]}`].join(" "),g=`M 0 0 L ${i[0][0]} ${i[0][1]} `,l=`${this.arrow?"":g}${d}`;if(this.line.setAttribute("d",l),this.arrow){const u=p.getArrowPath(c,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",u)}}}var M=(o=>(o.Regular="regular",o.Cycle="cycle",o))(M\|\|{});const R=o=>e=>e==="cycle"?new k(o.color,o.width,o.arrowLength,o.arrowWidth,o.hasSourceArrow\|\|o.hasTargetArrow,o.cycleRadius,o.smallCycleRadius):new D(o.color,o.width,o.curvature,o.arrowLength,o.arrowWidth,o.hasSourceArrow,o.hasTargetArrow),W=o=>e=>e===M.Cycle&&e==="cycle"?new j(o.color,o.width,o.arrowLength,o.arrowWidth,o.hasSourceArrow\|\|o.hasTargetArrow,o.cycleSquareSide,o.arrowOffset,o.roundness):new F(o.color,o.width,o.arrowLength,o.arrowWidth,o.arrowOffset,o.hasSourceArrow,o.hasTargetArrow,o.roundness);class P{constructor(){n(this,"counter",0)}next(){const e=`${this.counter}`;return this.counter++,e}reset(){this.counter=0}}class J{constructor(e,t,s,r,a){n(this,"nodeIdGenerator",new P);n(this,"portIdGenerator",new P);n(this,"edgeIdGenerator",new P);this.graphStore=e,this.htmlController=t,this.viewportTransformer=s,this.nodesCenterFn=r,this.portsCenterFn=a}moveNodeOnTop(e){if(!this.graphStore.hasNode(e))throw new Error("failed to move on top nonexisting node");this.htmlController.moveNodeOnTop(e)}addNode(e,t,s,r,a,c){if(e===void 0)do e=this.nodeIdGenerator.next();while(this.graphStore.hasNode(e));if(this.graphStore.hasNode(e))throw new Error("failed to add node with existing id");this.graphStore.addNode(e,t,s,r,c??this.nodesCenterFn),this.htmlController.attachNode(e),a!==void 0&&Object.entries(a).forEach(([h,i])=>{i instanceof HTMLElement?this.markPort(h,i,e,this.portsCenterFn,null):this.markPort(h,i.element,e,i.centerFn??this.portsCenterFn,i.direction??null)})}markPort(e,t,s,r,a){if(e===void 0)do e=this.portIdGenerator.next();while(this.graphStore.hasPort(e));if(!this.graphStore.hasNode(s))throw new Error("failed to set port on nonexisting node");if(this.graphStore.hasPort(e))throw new Error("failed to add port with existing id");this.graphStore.addPort(e,t,s,r??this.portsCenterFn,a??null)}updatePortEdges(e){if(!this.graphStore.hasPort(e))throw new Error("failed to unset nonexisting port");this.htmlController.updatePortEdges(e)}unmarkPort(e){if(!this.graphStore.hasPort(e))throw new Error("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdges(e).forEach(t=>{this.removeEdge(t)}),this.graphStore.removePort(e)}addEdge(e,t,s,r){if(e===void 0)do e=this.edgeIdGenerator.next();while(this.graphStore.hasEdge(e));if(!this.graphStore.hasPort(t))throw new Error("failed to add edge from nonexisting port");if(!this.graphStore.hasPort(s))throw new Error("failed to add edge to nonexisting port");let a=M.Regular;t===s&&(a=M.Cycle),this.graphStore.addEdge(e,t,s,r(a)),this.htmlController.attachEdge(e)}removeEdge(e){if(!this.graphStore.hasEdge(e))throw new Error("failed to remove nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.removeEdge(e)}removeNode(e){if(!this.graphStore.hasNode(e))throw new Error("failed to remove nonexisting node");this.htmlController.detachNode(e),this.graphStore.removeNode(e)}patchViewportState(e,t,s){this.viewportTransformer.patchState(e,t,s),this.htmlController.applyTransform()}moveToNodes(e){if(e.length===0)return;const t=e.map(u=>this.graphStore.getNode(u)).filter(u=>u!==void 0);if(t.length<e.length)throw new Error("failed to move to nonexisting node");const[s,r]=t.reduce((u,w)=>[u[0]+w.x,u[1]+w.y],[0,0]),a=s/t.length,c=r/t.length,[h,i]=this.htmlController.getViewportDimensions(),d=this.viewportTransformer.getAbsScale(),g=a-dh/2,l=c-di/2;this.patchViewportState(null,g,l)}updateNodeCoordinates(e,t,s){if(!this.graphStore.hasNode(e))throw new Error("failed to update coordinates of nonexisting node");this.graphStore.updateNodeCoords(e,t,s),this.htmlController.updateNodeCoordinates(e)}updateEdgeController(e,t){if(!this.graphStore.hasEdge(e))throw new Error("failed to update nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.updateEdgeController(e,t),this.htmlController.attachEdge(e)}attach(e){this.htmlController.attach(e)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.htmlController.destroy()}}class K{constructor(e,t,s,r){n(this,"publicViewportTransformer");n(this,"canvasController");const a=new x,c=new _;this.publicViewportTransformer=new q(a);const h=new b(c,a,this.publicViewportTransformer,e,t);this.canvasController=new J(c,h,a,s,r)}}const B=(o,e)=>[o/2,e/2],Q=()=>()=>{},I=(o,e,t,s,r,a)=>{o.clearRect(0,0,o.canvas.width,o.canvas.height),o.fillStyle=a,o.fillRect(0,0,o.canvas.width,o.canvas.height);const c=e.getViewCoords(0,0),h=e.getViewScale(),i=sh;let d=0,g=0,l=i/2;do l=2,d=o.canvas.width/l,g=o.canvas.height/l;while(dg>1e4);const u=c[0]-Math.floor(c[0]/l)l,w=c[1]-Math.floor(c[1]/l)l,m=rh,f=2Math.PI,C=u-l,E=w-l,y=o.canvas.width+u,T=o.canvas.height+w;o.fillStyle=t;for(let S=C;S<=y;S+=l)for(let $=E;$<=T;$+=l)o.beginPath(),o.arc(S,$,m,0,f),o.closePath(),o.fill()},ee=(o,e,t,s)=>(r,a)=>{I(r,a,o,e,t,s)},te=(o,e)=>{o.fillStyle=e,o.fillRect(0,0,o.canvas.width,o.canvas.height)},se=o=>e=>{te(e,o)},re=o=>{switch(o==null?void 0:o.type){case"custom":return o.drawingFn;case"dots":return ee(o.dotColor??"#d8d8d8",o.dotGap??25,o.dotRadius??1.5,o.color??"#ffffff");case"color":return se(o.color??"#ffffff");default:return Q()}},z=o=>{switch(o==null?void 0:o.type){case"custom":return o.controllerFactory;case"straight":return W({color:o.color??"#5c5c5c",width:o.width??1,arrowLength:o.arrowLength??15,arrowWidth:o.arrowWidth??4,arrowOffset:o.arrowOffset??15,hasSourceArrow:o.hasSourceArrow??!1,hasTargetArrow:o.hasTargetArrow??!1,cycleSquareSide:o.cycleSquareSide??30,roundness:o.roundness??5});default:return R({color:o.color??"#5c5c5c",width:o.width??1,curvature:o.curvature??90,arrowLength:o.arrowLength??15,arrowWidth:o.arrowWidth??4,hasSourceArrow:o.hasSourceArrow??!1,hasTargetArrow:o.hasTargetArrow??!1,cycleRadius:o.cycleRadius??30,smallCycleRadius:o.smallCycleRadius??15})}},oe=o=>{var e,t,s;return{background:{drawingFn:re(o.background??{type:"none"})},nodes:{centerFn:((e=o.nodes)==null?void 0:e.centerFn)??B},ports:{centerFn:((t=o.ports)==null?void 0:t.centerFn)??B},edges:{controllerFactory:z(o.edges??{})},layers:{mode:((s=o.layers)==null?void 0:s.mode)??"edges-follow-node"}}};class G{constructor(e){n(this,"transformation");n(this,"di");n(this,"edgeControllerFactory");this.apiOptions=e;const t=oe(this.apiOptions??{});this.di=new K(t.layers.mode,t.background.drawingFn,t.nodes.centerFn,t.ports.centerFn),this.transformation=this.di.publicViewportTransformer,this.edgeControllerFactory=t.edges.controllerFactory}addNode(e){return this.di.canvasController.addNode(e.id,e.element,e.x,e.y,e.ports,e.centerFn),this}moveNodeOnTop(e){return this.di.canvasController.moveNodeOnTop(e),this}removeNode(e){return this.di.canvasController.removeNode(e),this}markPort(e){return this.di.canvasController.markPort(e.id,e.element,e.nodeId,e.centerFn,e.direction),this}updatePortEdges(e){return this.di.canvasController.updatePortEdges(e),this}unmarkPort(e){return this.di.canvasController.unmarkPort(e),this}addEdge(e){const t=e.options!==void 0?z(e.options):this.edgeControllerFactory;return this.di.canvasController.addEdge(e.id,e.from,e.to,t),this}removeEdge(e){return this.di.canvasController.removeEdge(e),this}patchViewportState(e){return this.di.canvasController.patchViewportState(e.scale??null,e.x??null,e.y??null),this}moveToNodes(e){return this.di.canvasController.moveToNodes(e),this}updateNodeCoordinates(e,t,s){return this.di.canvasController.updateNodeCoordinates(e,t,s),this}updateEdge(e,t){return t.controller!==void 0&&this.di.canvasController.updateEdgeController(e,t.controller),this}clear(){return this.di.canvasController.clear(),this}attach(e){return this.di.canvasController.attach(e),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}class Y{constructor(e,t){n(this,"transformation");n(this,"nodes",new Map);n(this,"grabbedNodeId",null);n(this,"onNodeDrag");n(this,"onBeforeNodeDrag");n(this,"nodeIdGenerator",new P);n(this,"element",null);n(this,"onCanvasMouseUp",()=>{this.setCursor(null),this.grabbedNodeId=null});n(this,"onCanvasMouseMove",e=>{this.grabbedNodeId!==null&&(e.stopPropagation(),this.dragNode(this.grabbedNodeId,e.movementX,e.movementY))});n(this,"onCanvasTouchStart",e=>{this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]});n(this,"onCanvasTouchMove",e=>{if(this.grabbedNodeId===null\|\|e.touches.length!==1\|\|this.previousTouchCoords===null)return;e.stopImmediatePropagation();const[t,s]=[e.touches[0].clientX-this.previousTouchCoords[0],e.touches[0].clientY-this.previousTouchCoords[1]];this.dragNode(this.grabbedNodeId,t,s),this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]});n(this,"onCanvasTouchEnd",e=>{e.touches.length>0?this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]:(this.previousTouchCoords=null,this.grabbedNodeId=null)});n(this,"previousTouchCoords",null);var a,c;this.canvas=e,this.transformation=this.canvas.transformation;const s=()=>{};this.onNodeDrag=((a=t==null?void 0:t.events)==null?void 0:a.onNodeDrag)??s;const r=()=>!0;this.onBeforeNodeDrag=((c=t==null?void 0:t.events)==null?void 0:c.onBeforeNodeDrag)??r}addNode(e){let t=e.id;if(t===void 0)do t=this.nodeIdGenerator.next();while(this.nodes.has(t));this.canvas.addNode(e);const s=a=>{this.onBeforeNodeDrag({nodeId:t,element:e.element,x:e.x,y:e.y})&&(a.stopImmediatePropagation(),this.grabbedNodeId=t,this.setCursor("grab"),this.canvas.moveNodeOnTop(t))},r=a=>{this.onBeforeNodeDrag({nodeId:t,element:e.element,x:e.x,y:e.y})&&a.touches.length===1&&(this.grabbedNodeId=t,this.canvas.moveNodeOnTop(t))};return this.nodes.set(t,{element:e.element,onMouseDown:s,onTouchStart:r,x:e.x,y:e.y}),e.element.addEventListener("mousedown",s),e.element.addEventListener("touchstart",r),this}removeNode(e){const t=this.nodes.get(e);return t!==void 0&&(t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)),this.canvas.removeNode(e),this.nodes.delete(e),this}markPort(e){return this.canvas.markPort(e),this}updatePortEdges(e){return this.canvas.updatePortEdges(e),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportState(e){return this.canvas.patchViewportState(e),this}moveToNodes(e){return this.canvas.moveToNodes(e),this}updateNodeCoordinates(e,t,s){return this.canvas.updateNodeCoordinates(e,t,s),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}moveNodeOnTop(e){return this.canvas.moveNodeOnTop(e),this}clear(){return this.canvas.clear(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this}attach(e){return this.detach(),this.element=e,this.canvas.attach(this.element),this.element.addEventListener("mouseup",this.onCanvasMouseUp),this.element.addEventListener("mousemove",this.onCanvasMouseMove),this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.element.addEventListener("touchmove",this.onCanvasTouchMove),this.element.addEventListener("touchend",this.onCanvasTouchEnd),this.element.addEventListener("touchcancel",this.onCanvasTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mouseup",this.onCanvasMouseUp),this.element.removeEventListener("mousemove",this.onCanvasMouseMove),this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element.removeEventListener("touchmove",this.onCanvasTouchMove),this.element.removeEventListener("touchend",this.onCanvasTouchEnd),this.element.removeEventListener("touchcancel",this.onCanvasTouchEnd),this.element=null),this}destroy(){this.detach(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}setCursor(e){this.element!==null&&(e!==null?this.element.style.cursor=e:this.element.style.removeProperty("cursor"))}dragNode(e,t,s){const r=this.nodes.get(e);if(r===void 0)throw new Error("failed to drag nonexisting node");const[a,c]=this.transformation.getViewCoords(r.x,r.y),h=a+t,i=c+s,[d,g]=this.transformation.getAbsCoords(h,i);r.x=d,r.y=g,this.canvas.updateNodeCoordinates(e,d,g),this.onNodeDrag({nodeId:e,element:r.element,x:r.x,y:r.y})}}class X{constructor(e,t){n(this,"transformation");n(this,"element",null);n(this,"isMoving",!1);n(this,"prevTouches",null);n(this,"onTransform");n(this,"onBeforeTransform");n(this,"isScalable");n(this,"isShiftable");n(this,"minViewScale");n(this,"maxViewScale");n(this,"wheelSensitivity");n(this,"onMouseDown",()=>{this.setCursor("grab"),this.isMoving=!0});n(this,"onMouseMove",e=>{if(!this.isMoving\|\|!this.isShiftable)return;const t=-e.movementX,s=-e.movementY;this.moveViewport(t,s)});n(this,"onMouseUp",()=>{this.setCursor(null),this.isMoving=!1});n(this,"onWheelScroll",e=>{if(this.element===null\|\|this.isScalable===!1)return;e.preventDefault();const{left:t,top:s}=this.element.getBoundingClientRect(),r=e.clientX-t,a=e.clientY-s,h=1/(e.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(h,r,a)});n(this,"onTouchStart",e=>{this.prevTouches=this.getAverageTouch(e)});n(this,"onTouchMove",e=>{if(this.prevTouches===null\|\|this.element===null\|\|!this.isShiftable)return;const t=this.getAverageTouch(e);if((t.touchesCnt===1\|\|t.touchesCnt===2)&&this.moveViewport(-(t.x-this.prevTouches.x),-(t.y-this.prevTouches.y)),t.touchesCnt===2&&this.isScalable){const{left:s,top:r}=this.element.getBoundingClientRect(),a=this.prevTouches.x-s,c=this.prevTouches.y-r,i=1/(t.scale/this.prevTouches.scale);this.scaleViewport(i,a,c)}this.prevTouches=t,e.preventDefault()});n(this,"onTouchEnd",e=>{e.touches.length>0?this.prevTouches=this.getAverageTouch(e):this.prevTouches=null});var i,d,g,l,u,w,m,f,C,E,y,T;this.canvas=e,this.options=t,this.transformation=this.canvas.transformation;const s=((d=(i=this.options)==null?void 0:i.scale)==null?void 0:d.min)??null,r=((l=(g=this.options)==null?void 0:g.scale)==null?void 0:l.max)??null;this.isScalable=((w=(u=this.options)==null?void 0:u.scale)==null?void 0:w.enabled)!==!1,this.minViewScale=r!==null?1/r:null,this.maxViewScale=s!==null?1/s:null,this.isShiftable=((f=(m=this.options)==null?void 0:m.shift)==null?void 0:f.enabled)!==!1;const a=(E=(C=this.options)==null?void 0:C.scale)==null?void 0:E.wheelSensitivity;this.wheelSensitivity=a!==void 0?a:1.2;const c=()=>{};this.onTransform=((y=t==null?void 0:t.events)==null?void 0:y.onTransform)??c;const h=()=>!0;this.onBeforeTransform=((T=t==null?void 0:t.events)==null?void 0:T.onBeforeTransform)??h}addNode(e){return this.canvas.addNode(e),this}removeNode(e){return this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePortEdges(e){return this.canvas.updatePortEdges(e),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportState(e){return this.canvas.patchViewportState(e),this}moveToNodes(e){return this.canvas.moveToNodes(e),this}updateNodeCoordinates(e,t,s){return this.canvas.updateNodeCoordinates(e,t,s),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),this}moveNodeOnTop(e){return this.canvas.moveNodeOnTop(e),this}clear(){return this.canvas.clear(),this}attach(e){return this.detach(),this.element=e,this.canvas.attach(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseup",this.onMouseUp),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.element.addEventListener("touchmove",this.onTouchMove),this.element.addEventListener("touchend",this.onTouchEnd),this.element.addEventListener("touchcancel",this.onTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseup",this.onMouseUp),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("touchmove",this.onTouchMove),this.element.removeEventListener("touchend",this.onTouchEnd),this.element.removeEventListener("touchcancel",this.onTouchEnd),this.element=null),this}destroy(){this.detach(),this.canvas.destroy()}getAverageTouch(e){const t=[],s=e.touches.length;for(let i=0;i<s;i++)t.push([e.touches[i].clientX,e.touches[i].clientY]);const r=t.reduce((i,d)=>[i[0]+d[0],i[1]+d[1]],[0,0]),a=[r[0]/s,r[1]/s],h=t.map(i=>[i[0]-a[0],i[1]-a[1]]).reduce((i,d)=>i+Math.sqrt(d[0]d[0]+d[1]d[1]),0);return{x:a[0],y:a[1],scale:h/s,touchesCnt:s}}setCursor(e){this.element!==null&&(e!==null?this.element.style.cursor=e:this.element.style.removeProperty("cursor"))}moveViewport(e,t){const[s,r]=this.transformation.getAbsCoords(0,0),a=this.canvas.transformation.getAbsScale(),c={scale:a,x:s+ae,y:r+at};this.onBeforeTransform({...c})&&(this.canvas.patchViewportState(c),this.onTransform(c))}scaleViewport(e,t,s){const[r,a]=this.canvas.transformation.getAbsCoords(0,0),c=this.canvas.transformation.getAbsScale(),h=ce,i=c(1-e)t+r,d=c(1-e)*s+a;if(this.maxViewScale!==null&&h>this.maxViewScale&&h>c\|\|this.minViewScale!==null&&h<this.minViewScale&&h<c)return;const g={scale:h,x:i,y:d};this.onBeforeTransform({...g})&&(this.canvas.patchViewportState(g),this.onTransform(g))}}class ne{constructor(){n(this,"coreOptions");n(this,"dragOptions");n(this,"transformOptions");n(this,"isDraggable",!1);n(this,"isTransformable",!1)}setOptions(e){return this.coreOptions=e,this}setUserDraggableNodes(e){return this.isDraggable=!0,this.dragOptions=e,this}setUserTransformableCanvas(e){return this.isTransformable=!0,this.transformOptions=e,this}build(){let e=new G(this.coreOptions);return this.isDraggable&&(e=new Y(e,this.dragOptions)),this.isTransformable&&(e=new X(e,this.transformOptions)),e}}v.BezierEdgeController=D,v.CanvasCore=G,v.CycleCircleEdgeController=k,v.CycleSquareEdgeController=j,v.EdgeType=M,v.EdgeUtils=p,v.HtmlGraphBuilder=ne,v.StraightEdgeController=F,v.UserDraggableNodesCanvas=Y,v.UserTransformableCanvas=X,v.createBezierEdgeControllerFactory=R,v.createStraightEdgeControllerFactory=W,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov",
   "private": false,
-  "version": "0.0.49",
+  "version": "0.0.50",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",