@html-graph/html-graph 0.0.54 → 0.0.55

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(S,P){typeof exports=="object"&&typeof module<"u"?P(exports):typeof define=="function"&&define.amd?define(["exports"],P):(S=typeof globalThis<"u"?globalThis:S||self,P(S.HTMLGraph={}))})(this,function(S){"use strict";var yt=Object.defineProperty;var St=(S,P,D)=>P in S?yt(S,P,{enumerable:!0,configurable:!0,writable:!0,value:D}):S[P]=D;var n=(S,P,D)=>St(S,typeof P!="symbol"?P+"":P,D);const P=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},D=()=>{const e=document.createElement("canvas");return e.style.position="absolute",e.style.inset="0",e},ot=()=>{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};class it{constructor(t,r,s,o){n(this,"canvasWrapper",null);n(this,"host",P());n(this,"canvas",D());n(this,"container",ot());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);this.graphStore=t,this.viewportTransformer=r,this.publicViewportTransformer=s,this.backgroundDrawingFn=o;const i=this.canvas.getContext("2d");if(i===null)throw new Error("unable to get canvas context");this.canvasCtx=i,this.host.appendChild(this.canvas),this.host.appendChild(this.container),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.edgeIdToElementMap.keys()).forEach(t=>{this.detachEdge(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.container),this.detach()}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`}attachNode(t){const r=this.graphStore.getNode(t),s=document.createElement("div");s.appendChild(r.element),s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.visibility="hidden",this.container.appendChild(s),this.nodeElementToIdMap.set(r.element,t),this.nodeWrapperElementToIdMap.set(s,t),this.nodeIdToWrapperElementMap.set(t,s),this.updateNodeCoords(t),this.updateNodePriority(t),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(t){const r=this.graphStore.getNode(t);this.nodesResizeObserver.unobserve(r.element);const s=this.nodeIdToWrapperElementMap.get(t);s.removeChild(r.element),this.container.removeChild(s),this.nodeElementToIdMap.delete(r.element),this.nodeWrapperElementToIdMap.delete(s),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const s=this.graphStore.getEdge(t).shape.svg;s.style.position="absolute",s.style.top="0",s.style.left="0",this.edgeIdToElementMap.set(t,s),this.updateEdgeCoords(t),this.updateEdgePriority(t),this.container.appendChild(s)}detachEdge(t){const r=this.edgeIdToElementMap.get(t);this.edgeIdToElementMap.delete(t),this.container.removeChild(r)}updateNodePriority(t){const r=this.graphStore.getNode(t),s=this.nodeIdToWrapperElementMap.get(t);s.style.zIndex=`${r.priority}`}updateEdgePriority(t){const r=this.graphStore.getEdge(t);this.edgeIdToElementMap.get(t).style.zIndex=`${r.priority}`}updateNodeCoordinates(t){const r=this.graphStore.getNodeAdjacentEdges(t);this.updateNodeCoords(t),r.forEach(s=>{this.updateEdgeCoords(s)})}updatePortEdges(t){this.graphStore.getPortAdjacentEdges(t).forEach(s=>{this.updateEdgeCoords(s)})}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(t=>{t.forEach(r=>{const s=r.target,o=this.nodeWrapperElementToIdMap.get(s);this.updateNodeCoords(o),this.graphStore.getNodeAdjacentEdges(o).forEach(a=>{this.updateEdgeCoords(a)})})})}updateCanvasDimensions(){const{width:t,height:r}=this.host.getBoundingClientRect();this.canvas.width=t,this.canvas.height=r}updateNodeCoords(t){const r=this.nodeIdToWrapperElementMap.get(t),{width:s,height:o}=r.getBoundingClientRect(),i=this.viewportTransformer.getViewportMatrix().scale,a=this.graphStore.getNode(t),[c,h]=a.centerFn(s,o),d=a.x-i*c,l=a.y-i*h;r.style.transform=`matrix(1, 0, 0, 1, ${d}, ${l})`}updateEdgeCoords(t){const r=this.graphStore.getEdge(t),s=this.graphStore.getPort(r.from),o=this.graphStore.getPort(r.to),i=s.element.getBoundingClientRect(),a=o.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix(),d=h.scale*(i.left-c.left)+h.x,l=h.scale*(i.top-c.top)+h.y,g=h.scale*(a.left-c.left)+h.x,u=h.scale*(a.top-c.top)+h.y,[f,w]=s.centerFn(i.width*h.scale,i.height*h.scale),[v,m]=o.centerFn(a.width*h.scale,a.height*h.scale),E=f+d,p=w+l,y=v+g,A=m+u,b=Math.min(E,y),$=Math.min(p,A),F=Math.abs(y-E),V=Math.abs(A-p);r.shape.update(b,$,F,V,s,o)}}const B={scale:1,x:0,y:0};class nt{constructor(){n(this,"viewportMatrix",B);n(this,"contentMatrix",B)}getViewportMatrix(){return{...this.viewportMatrix}}getContentMatrix(){return{...this.contentMatrix}}patchViewportState(t,r,s){this.viewportMatrix={scale:t??this.viewportMatrix.scale,x:r??this.viewportMatrix.x,y:s??this.viewportMatrix.y},this.contentMatrix=this.calculateReverseMatrix(this.viewportMatrix)}patchContentState(t,r,s){this.contentMatrix={scale:t??this.contentMatrix.scale,x:r??this.contentMatrix.x,y:s??this.contentMatrix.y},this.viewportMatrix=this.calculateReverseMatrix(this.contentMatrix)}calculateReverseMatrix(t){return{scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}}}class at{constructor(t){this.transformer=t}getViewportMatrix(){return this.transformer.getViewportMatrix()}getContentMatrix(){return this.transformer.getContentMatrix()}}class ht{constructor(){n(this,"nodes",new Map);n(this,"ports",new Map);n(this,"nodePorts",new Map);n(this,"portNodeId",new Map);n(this,"edges",new Map);n(this,"incommingEdges",new Map);n(this,"outcommingEdges",new Map);n(this,"cycleEdges",new Map)}addNode(t,r,s,o,i,a){this.nodes.set(t,{element:r,x:s,y:o,centerFn:i,priority:a}),this.nodePorts.set(t,new Map)}getNode(t){return this.nodes.get(t)}removeNode(t){this.getNodeAdjacentEdges(t).forEach(o=>{this.removeEdge(o)}),this.nodes.delete(t),this.nodePorts.get(t).forEach((o,i)=>{this.portNodeId.delete(i)}),this.nodePorts.delete(t)}addPort(t,r,s,o,i){this.ports.set(t,{element:r,centerFn:o,direction:i}),this.cycleEdges.set(t,new Set),this.incommingEdges.set(t,new Set),this.outcommingEdges.set(t,new Set),this.portNodeId.set(t,s),this.nodePorts.get(s).set(t,r)}getPort(t){return this.ports.get(t)}getPortNode(t){return this.portNodeId.get(t)}removePort(t){this.cycleEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.cycleEdges.delete(t),this.incommingEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.incommingEdges.delete(t),this.outcommingEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.outcommingEdges.get(t);const r=this.portNodeId.get(t);this.portNodeId.delete(t),this.nodePorts.get(r).delete(t),this.ports.delete(t)}addEdge(t,r,s,o,i){this.edges.set(t,{from:r,to:s,shape:o,priority:i}),r!==s?(this.outcommingEdges.get(r).add(t),this.incommingEdges.get(s).add(t)):this.cycleEdges.get(r).add(t)}getEdge(t){return this.edges.get(t)}removeEdge(t){const r=this.edges.get(t),s=r.from,o=r.to;this.cycleEdges.get(s).delete(t),this.cycleEdges.get(o).delete(t),this.incommingEdges.get(s).delete(t),this.incommingEdges.get(o).delete(t),this.outcommingEdges.get(s).delete(t),this.outcommingEdges.get(o).delete(t),this.edges.delete(t)}getPortAdjacentEdges(t){return[...this.getPortIncomingEdges(t),...this.getPortOutcomingEdges(t),...this.getPortCycleEdges(t)]}getNodeAdjacentEdges(t){return[...this.getNodeIncomingEdges(t),...this.getNodeOutcomingEdges(t),...this.getNodeCycleEdges(t)]}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdges(t){return Array.from(this.incommingEdges.get(t))}getPortOutcomingEdges(t){return Array.from(this.outcommingEdges.get(t))}getPortCycleEdges(t){return Array.from(this.cycleEdges.get(t))}getNodeIncomingEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortIncomingEdges(o)]}),s}getNodeOutcomingEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortOutcomingEdges(o)]}),s}getNodeCycleEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortCycleEdges(o)]}),s}}class ct{constructor(t){this.graphStore=t}getNode(t){const r=this.graphStore.getNode(t);return r===void 0?null:{element:r.element,x:r.x,y:r.y,centerFn:r.centerFn,priority:r.priority}}getPort(t){const r=this.graphStore.getPort(t);return r===void 0?null:{element:r.element,centerFn:r.centerFn,direction:r.direction}}getPortNode(t){return this.graphStore.getPortNode(t)??null}getEdge(t){const r=this.graphStore.getEdge(t);return r===void 0?null:{from:r.from,to:r.to,priority:r.priority}}getPortAdjacentEdges(t){return this.graphStore.getPortAdjacentEdges(t)}getNodeAdjacentEdges(t){return this.graphStore.getNodeAdjacentEdges(t)}getPortIncomingEdges(t){return this.graphStore.getPortIncomingEdges(t)}getPortOutcomingEdges(t){return this.graphStore.getPortOutcomingEdges(t)}getPortCycleEdges(t){return this.graphStore.getPortCycleEdges(t)}getNodeIncomingEdges(t){return this.graphStore.getNodeIncomingEdges(t)}getNodeOutcomingEdges(t){return this.graphStore.getNodeOutcomingEdges(t)}getNodeCycleEdges(t){return this.graphStore.getNodeCycleEdges(t)}}const x=e=>{const{top:t,left:r,width:s,height:o}=e.element.getBoundingClientRect(),i=e.centerFn(s,o);return[r+i[0],t+i[1]]},C=(e,t,r)=>[t[0]*e[0]-t[1]*e[1]+((1-t[0])*r[0]+t[1]*r[1]),t[1]*e[0]+t[0]*e[1]+((1-t[0])*r[1]-t[1]*r[0])],N=(e,t,r)=>[t*Math.cos(e),r*Math.sin(e)],M=(e,t,r,s,o)=>{const a=[[0,0],[s,o],[s,-o]].map(l=>C(l,e,[0,0])).map(l=>[l[0]+t,l[1]+r]),c=`M ${a[0][0]} ${a[0][1]}`,h=`L ${a[1][0]} ${a[1][1]}`,d=`L ${a[2][0]} ${a[2][1]}`;return`${c} ${h} ${d}`};class G{constructor(t,r,s,o,i,a,c){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.color=t,this.width=r,this.curvature=s,this.arrowLength=o,this.arrowWidth=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%",a&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=C([this.arrowLength,0],g,[0,0]),w=C([s-this.arrowLength,o],u,[s,o]),v=[f[0]+g[0]*this.curvature,f[1]+g[1]*this.curvature],m=[w[0]-u[0]*this.curvature,w[1]-u[1]*this.curvature],E=`M ${f[0]} ${f[1]} C ${v[0]} ${v[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`,p=this.sourceArrow?"":`M 0 0 L ${f[0]} ${f[1]} `,y=this.targetArrow?"":` M ${w[0]} ${w[1]} L ${s} ${o}`,A=`${p}${E}${y}`;if(this.line.setAttribute("d",A),this.sourceArrow){const b=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",b)}if(this.targetArrow){const b=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",b)}}}const W=(e,t)=>{const r=[];if(e.length>0&&r.push(`M ${e[0][0]} ${e[0][1]}`),e.length===2&&r.push(`L ${e[1][0]} ${e[1][1]}`),e.length>2){const s=e.length-1;let o=0,i=0,a=0;e.forEach((c,h)=>{let d=0,l=0,g=0;const u=h>0,f=h<s,w=u&&f;if(u&&(d=-o,l=-i,g=a),f){const b=e[h+1];o=b[0]-c[0],i=b[1]-c[1],a=Math.sqrt(o*o+i*i)}const m=Math.min((w?t:0)/a,h<s-1?.5:1),E=w?[c[0]+o*m,c[1]+i*m]:c,y=Math.min((w?t:0)/g,h>1?.5:1),A=w?[c[0]+d*y,c[1]+l*y]:c;h>0&&r.push(`L ${A[0]} ${A[1]}`),w&&r.push(`C ${c[0]} ${c[1]} ${c[0]} ${c[1]} ${E[0]} ${E[1]}`)})}return r.join(" ")};class j{constructor(t,r,s,o,i,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=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=this.sourceArrow?C([this.arrowLength,0],g,[0,0]):[0,0],w=this.targetArrow?C([s-this.arrowLength,o],u,[s,o]):[s,o],v=this.arrowLength+this.arrowOffset,m=C([v,0],g,[0,0]),E=C([s-v,o],u,[s,o]),p=W([f,m,E,w],this.roundness);if(this.line.setAttribute("d",p),this.sourceArrow){const y=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class H{constructor(t,r,s,o,i,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=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=this.sourceArrow?C([this.arrowLength,0],g,[0,0]):[0,0],w=this.targetArrow?C([s-this.arrowLength,o],u,[s,o]):[s,o],v=this.arrowLength+this.arrowOffset,m=C([v,0],g,[0,0]),E=C([s-v,o],u,[s,o]),p=Math.max((m[0]+E[0])/2,v),y=o/2,A=[d>0?p:-v,m[1]],b=[A[0],y],$=[d>0?s-p:s+v,E[1]],F=[$[0],y],V=W([f,m,A,b,F,$,E,w],this.roundness);if(this.line.setAttribute("d",V),this.sourceArrow){const L=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",L)}if(this.targetArrow){const L=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",L)}}}class U{constructor(t,r,s,o,i,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=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=this.sourceArrow?C([this.arrowLength,0],g,[0,0]):[0,0],w=this.targetArrow?C([s-this.arrowLength,o],u,[s,o]):[s,o],v=this.arrowLength+this.arrowOffset,m=C([v,0],g,[0,0]),E=C([s-v,o],u,[s,o]),p=Math.max((m[1]+E[1])/2,v),y=s/2,A=[m[0],l>0?p:-v],b=[y,A[1]],$=[E[0],l>0?o-p:o+v],F=[y,$[1]],V=W([f,m,A,b,F,$,E,w],this.roundness);if(this.line.setAttribute("d",V),this.sourceArrow){const L=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",L)}if(this.targetArrow){const L=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",L)}}}class _{constructor(t,r,s,o,i,a,c){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.radius=a,this.smallRadius=c,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%",i&&(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,r,s,o,i){this.svg.style.transform=`translate(${t}px, ${r}px)`;const a=N(i.direction,1,1),c=this.smallRadius,h=this.radius,d=Math.sqrt(c*c+h*h),l=c+h,g=this.arrowLength+d*(1-h/l),u=c*h/l,w=[[this.arrowLength,0],[g,u],[g,-u]].map(p=>C(p,a,[0,0])),v=[`M ${w[0][0]} ${w[0][1]}`,`A ${c} ${c} 0 0 1 ${w[1][0]} ${w[1][1]}`,`A ${h} ${h} 0 1 0 ${w[2][0]} ${w[2][1]}`,`A ${c} ${c} 0 0 1 ${w[0][0]} ${w[0][1]}`].join(" "),m=`M 0 0 L ${w[0][0]} ${w[0][1]} `,E=`${this.arrow!==null?"":m}${v}`;if(this.line.setAttribute("d",E),this.arrow){const p=M(a,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",p)}}}class O{constructor(t,r,s,o,i,a,c,h){n(this,"svg");n(this,"group");n(this,"line");n(this,"arrow",null);n(this,"roundness");n(this,"linePoints");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.side=a,this.minPortOffset=c,this.roundness=Math.min(h,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%",i&&(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,l=this.side,g=this.arrowLength+d,u=this.roundness,f=g+2*l;console.log(u),this.linePoints=[[this.arrowLength,0],[g,0],[g,this.side],[f,this.side],[f,-this.side],[g,-this.side],[g,0],[this.arrowLength,0]]}update(t,r,s,o,i){this.svg.style.transform=`translate(${t}px, ${r}px)`;const a=N(i.direction,1,1),c=this.linePoints.map(l=>C(l,a,[0,0])),h=`M 0 0 L ${c[0][0]} ${c[0][1]} `,d=`${this.arrow?"":h}${W(c,this.roundness)}`;if(this.line.setAttribute("d",d),this.arrow){const l=M(a,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",l)}}}class k{constructor(t,r,s,o,i,a,c,h,d,l){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"detourX");n(this,"detourY");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=h,this.detourX=Math.cos(l)*d,this.detourY=Math.sin(l)*d,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.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=this.sourceArrow?C([this.arrowLength,0],g,[0,0]):[0,0],w=this.targetArrow?C([s-this.arrowLength,o],u,[s,o]):[s,o],v=this.arrowLength+this.arrowOffset,m=C([v,0],g,[0,0]),E=[m[0]+this.detourX,m[1]+this.detourY],p=C([s-v,o],u,[s,o]),y=[p[0]+this.detourX,p[1]+this.detourY],A=W([f,m,E,y,p,w],this.roundness);if(this.line.setAttribute("d",A),this.sourceArrow){const b=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",b)}if(this.targetArrow){const b=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",b)}}}var T=(e=>(e.Regular="regular",e.PortCycle="port-cycle",e.NodeCycle="node-cycle",e))(T||{});class lt{constructor(t,r,s,o,i,a,c,h,d){n(this,"svg");n(this,"group");n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"detourX");n(this,"detourY");this.color=t,this.width=r,this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(d)*h,this.detourY=Math.sin(d)*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.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,a){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`;const c=x(i),h=x(a),d=c[0]<=h[0]?1:-1,l=c[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${r}px)`,this.group.style.transform=`scale(${d}, ${l})`;const g=N(i.direction,d,l),u=N(a.direction,d,l),f=this.sourceArrow?C([this.arrowLength,0],g,[0,0]):[0,0],w=this.targetArrow?C([s-this.arrowLength,o],u,[s,o]):[s,o],v=this.arrowLength,m=C([v,0],g,[0,0]),E=[m[0]+this.detourX,m[1]+this.detourY],p=C([s-v,o],u,[s,o]),y=[p[0]+this.detourX,p[1]+this.detourY],A=[(E[0]+y[0])/2,(E[1]+y[1])/2],b=[m[0]-this.curvature*Math.cos(i.direction),m[1]-this.curvature*Math.sin(i.direction)],$=[p[0]+this.curvature*Math.cos(a.direction),p[1]+this.curvature*Math.sin(a.direction)],F=[m[0]+this.detourX,m[1]+this.detourY],V=[p[0]+this.detourX,p[1]+this.detourY],L=[`M ${f[0]} ${f[1]}`,`L ${m[0]} ${m[1]}`,`C ${b[0]} ${b[1]} ${F[0]} ${F[1]} ${A[0]} ${A[1]}`,`C ${V[0]} ${V[1]} ${$[0]} ${$[1]} ${p[0]} ${p[1]}`,`L ${w[0]} ${w[1]}`].join(" ");if(this.line.setAttribute("d",L),this.sourceArrow){const z=M(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",z)}if(this.targetArrow){const z=M(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",z)}}}const J=e=>t=>t===T.PortCycle?new _(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleRadius,e.smallCycleRadius):t===T.NodeCycle?new lt(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow,e.detourDistance,e.detourDirection):new G(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow),K=e=>t=>t===T.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===T.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new j(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness),Q=e=>t=>t===T.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===T.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new H(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness),Z=e=>t=>t===T.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===T.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new U(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness);class R{constructor(){n(this,"counter",0)}create(){const t=this.counter;return this.counter++,t}reset(){this.counter=0}}class dt{constructor(t,r,s,o,i,a,c,h){n(this,"nodeIdGenerator",new R);n(this,"portIdGenerator",new R);n(this,"edgeIdGenerator",new R);this.graphStore=t,this.htmlController=r,this.viewportTransformer=s,this.nodesCenterFn=o,this.portsCenterFn=i,this.portsDirection=a,this.nodesPriorityFn=c,this.edgesPriorityFn=h}addNode(t,r,s,o,i,a,c){if(t===void 0)do t=this.nodeIdGenerator.create();while(this.graphStore.getNode(t)!==void 0);if(this.graphStore.getNode(t)!==void 0)throw new Error("failed to add node with existing id");this.graphStore.addNode(t,r,s,o,a??this.nodesCenterFn,c??this.nodesPriorityFn()),this.htmlController.attachNode(t),new Map(i??[]).forEach((d,l)=>{d instanceof HTMLElement?this.markPort(l,d,t,this.portsCenterFn,this.portsDirection):this.markPort(l,d.element,t,d.centerFn??this.portsCenterFn,d.direction??this.portsDirection)})}updateNode(t,r,s,o,i){const a=this.graphStore.getNode(t);if(a===void 0)throw new Error("failed to update nonexisting node");a.x=r??a.x,a.y=s??a.y,a.centerFn=i??a.centerFn,this.htmlController.updateNodeCoordinates(t),o!==void 0&&(a.priority=o,this.htmlController.updateNodePriority(t))}markPort(t,r,s,o,i){if(t===void 0)do t=this.portIdGenerator.create();while(this.graphStore.getPort(t)!==void 0);if(this.graphStore.getNode(s)===void 0)throw new Error("failed to set port on nonexisting node");if(this.graphStore.getPort(t)!==void 0)throw new Error("failed to add port with existing id");this.graphStore.addPort(t,r,s,o??this.portsCenterFn,i??0)}updatePort(t,r){const s=this.graphStore.getPort(t);if(s===void 0)throw new Error("failed to unset nonexisting port");s.direction=(r==null?void 0:r.direction)??s.direction,s.centerFn=(r==null?void 0:r.centerFn)??s.centerFn,this.htmlController.updatePortEdges(t)}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new Error("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdges(t).forEach(r=>{this.removeEdge(r)}),this.graphStore.removePort(t)}addEdge(t,r,s,o,i){if(t===void 0)do t=this.edgeIdGenerator.create();while(this.graphStore.getEdge(t)!==void 0);if(this.graphStore.getPort(r)===void 0)throw new Error("failed to add edge from nonexisting port");if(this.graphStore.getPort(s)===void 0)throw new Error("failed to add edge to nonexisting port");if(this.graphStore.getEdge(t)!==void 0)throw new Error("failed to add edge with existing id");let a=T.Regular;const c=this.graphStore.getPortNode(r),h=this.graphStore.getPortNode(s);r===s?a=T.PortCycle:c===h&&(a=T.NodeCycle),this.graphStore.addEdge(t,r,s,o(a),i??this.edgesPriorityFn()),this.htmlController.attachEdge(t)}updateEdge(t,r){const s=this.graphStore.getEdge(t);if(s===void 0)throw new Error("failed to update nonexisting edge");r.controller!==void 0&&(this.htmlController.detachEdge(t),s.shape=r.controller,this.htmlController.attachEdge(t)),r.priority!==void 0&&(s.priority=r.priority,this.htmlController.updateEdgePriority(t))}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new Error("failed to remove nonexisting edge");this.htmlController.detachEdge(t),this.graphStore.removeEdge(t)}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new Error("failed to remove nonexisting node");this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportState(t,r,s){this.viewportTransformer.patchViewportState(t,r,s),this.htmlController.applyTransform()}patchContentState(t,r,s){this.viewportTransformer.patchContentState(t,r,s),this.htmlController.applyTransform()}attach(t){this.htmlController.attach(t)}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 gt{constructor(t,r,s,o,i,a){n(this,"publicViewportTransformer");n(this,"publicGraphStore");n(this,"canvasController");const c=new nt,h=new ht;this.publicGraphStore=new ct(h),this.publicViewportTransformer=new at(c);const d=new it(h,c,this.publicViewportTransformer,t);this.canvasController=new dt(h,d,c,r,s,o,i,a)}}const q=(e,t)=>[e/2,t/2],ut=()=>()=>{},wt=(e,t,r,s,o,i)=>{e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillStyle=i,e.fillRect(0,0,e.canvas.width,e.canvas.height);const a=t.getContentMatrix(),c=s*a.scale;let h=0,d=0,l=c/2;do l*=2,h=e.canvas.width/l,d=e.canvas.height/l;while(h*d>1e4);const g=a.x-Math.floor(a.x/l)*l,u=a.y-Math.floor(a.y/l)*l,f=o*a.scale,w=2*Math.PI,v=g-l,m=u-l,E=e.canvas.width+g,p=e.canvas.height+u;e.fillStyle=r;for(let y=v;y<=E;y+=l)for(let A=m;A<=p;A+=l)e.beginPath(),e.arc(y,A,f,0,w),e.closePath(),e.fill()},mt=(e,t,r,s)=>(o,i)=>{wt(o,i,e,t,r,s)},pt=e=>{switch(e==null?void 0:e.type){case"custom":return e.drawingFn;case"dots":return mt(e.dotColor??"#d8d8d8",e.dotGap??25,e.dotRadius??1.5,e.color??"#ffffff");default:return ut()}},I=e=>{switch(e==null?void 0:e.type){case"custom":return e.controllerFactory;case"straight":return K({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});case"horizontal":return Q({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});case"vertical":return Z({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});default:return J({color:e.color??"#5c5c5c",width:e.width??1,curvature:e.curvature??90,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleRadius:e.cycleRadius??30,smallCycleRadius:e.smallCycleRadius??15,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2})}},Y=e=>()=>e,tt=Y(0),X=()=>{let e=0;return()=>e++},vt=(e,t)=>{const r=[tt,tt];e==="incremental"&&(r[0]=X()),t==="incremental"&&(r[1]=X());const s=X();return e==="shared-incremental"&&(r[0]=s),t==="shared-incremental"&&(r[1]=s),typeof e=="number"&&(r[0]=Y(e)),typeof t=="number"&&(r[1]=Y(t)),typeof e=="function"&&(r[0]=e),typeof t=="function"&&(r[1]=t),r},ft=e=>{var s,o,i,a,c,h;const[t,r]=vt((s=e.nodes)==null?void 0:s.priority,(o=e.edges)==null?void 0:o.priority);return{background:{drawingFn:pt(e.background??{type:"none"})},nodes:{centerFn:((i=e.nodes)==null?void 0:i.centerFn)??q,priorityFn:t},ports:{centerFn:((a=e.ports)==null?void 0:a.centerFn)??q,direction:((c=e.ports)==null?void 0:c.direction)??0},edges:{shapeFactory:I(((h=e.edges)==null?void 0:h.shape)??{}),priorityFn:r}}};class et{constructor(t){n(this,"transformation");n(this,"model");n(this,"di");n(this,"edgeShapeFactory");this.apiOptions=t;const r=ft(this.apiOptions??{});this.di=new gt(r.background.drawingFn,r.nodes.centerFn,r.ports.centerFn,r.ports.direction,r.nodes.priorityFn,r.edges.priorityFn),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore,this.edgeShapeFactory=r.edges.shapeFactory}addNode(t){return this.di.canvasController.addNode(t.id,t.element,t.x,t.y,t.ports,t.centerFn,t.priority),this}updateNode(t,r){return this.di.canvasController.updateNode(t,r.x,r.y,r.priority,r.centerFn),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}updatePort(t,r){return this.di.canvasController.updatePort(t,r),this}unmarkPort(t){return this.di.canvasController.unmarkPort(t),this}addEdge(t){const r=t.options!==void 0?I(t.options):this.edgeShapeFactory;return this.di.canvasController.addEdge(t.id,t.from,t.to,r,t.priority),this}updateEdge(t,r){return this.di.canvasController.updateEdge(t,r),this}removeEdge(t){return this.di.canvasController.removeEdge(t),this}patchViewportState(t){return this.di.canvasController.patchViewportState(t.scale??null,t.x??null,t.y??null),this}patchContentState(t){return this.di.canvasController.patchContentState(t.scale??null,t.x??null,t.y??null),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 rt{constructor(t,r){n(this,"model");n(this,"transformation");n(this,"maxNodePriority",0);n(this,"nodes",new Map);n(this,"grabbedNodeId",null);n(this,"onNodeDrag");n(this,"onBeforeNodeDrag");n(this,"nodeIdGenerator",new R);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[r,s]=[t.touches[0].clientX-this.previousTouchCoords[0],t.touches[0].clientY-this.previousTouchCoords[1]];this.dragNode(this.grabbedNodeId,r,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);n(this,"freezePriority");var i,a;this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model;const s=()=>{};this.onNodeDrag=((i=r==null?void 0:r.events)==null?void 0:i.onNodeDrag)??s;const o=()=>!0;this.onBeforeNodeDrag=((a=r==null?void 0:r.events)==null?void 0:a.onBeforeNodeDrag)??o,this.freezePriority=(r==null?void 0:r.grabPriorityStrategy)==="freeze"}addNode(t){let r=t.id;if(r===void 0)do r=this.nodeIdGenerator.create();while(this.nodes.has(r));this.canvas.addNode({...t,id:r}),this.updateMaxNodePriority(r);const s=i=>{const a=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:t.element,x:a.x,y:a.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=r,this.setCursor("grab"),this.moveNodeOnTop(r))},o=i=>{const a=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:t.element,x:a.x,y:a.y})&&i.touches.length===1&&(this.grabbedNodeId=r,this.moveNodeOnTop(r))};return this.nodes.set(r,{element:t.element,onMouseDown:s,onTouchStart:o}),t.element.addEventListener("mousedown",s),t.element.addEventListener("touchstart",o),this}updateNode(t,r){return this.canvas.updateNode(t,r),this.updateMaxNodePriority(t),this}removeNode(t){const r=this.nodes.get(t);return r!==void 0&&(r.element.removeEventListener("mousedown",r.onMouseDown),r.element.removeEventListener("touchstart",r.onTouchStart)),this.canvas.removeNode(t),this.nodes.delete(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,r){return this.canvas.updatePort(t,r),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,r){return this.canvas.updateEdge(t,r),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}patchContentState(t){return this.canvas.patchContentState(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.maxNodePriority=0,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,r,s){const o=this.model.getNode(t);if(o===null)throw new Error("failed to drag nonexisting node");const i=this.canvas.transformation.getContentMatrix(),a=i.scale*o.x+i.x,c=i.scale*o.y+i.y,h=a+r,d=c+s,l=this.canvas.transformation.getViewportMatrix(),g=l.scale*h+l.x,u=l.scale*d+l.y;this.canvas.updateNode(t,{x:g,y:u}),this.onNodeDrag({nodeId:t,element:o.element,x:o.x,y:o.y})}updateMaxNodePriority(t){const r=this.model.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,r)}moveNodeOnTop(t){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const r=this.maxNodePriority-1;this.model.getNodeAdjacentEdges(t).forEach(o=>{this.updateEdge(o,{priority:r})})}}class st{constructor(t,r){n(this,"model");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 r=-t.movementX,s=-t.movementY;this.moveViewport(r,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:r,top:s}=this.element.getBoundingClientRect(),o=t.clientX-r,i=t.clientY-s,c=1/(t.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(c,o,i)});n(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t)});n(this,"onTouchMove",t=>{if(this.prevTouches===null||this.element===null||!this.isShiftable)return;const r=this.getAverageTouch(t);if((r.touchesCnt===1||r.touchesCnt===2)&&this.moveViewport(-(r.x-this.prevTouches.x),-(r.y-this.prevTouches.y)),r.touchesCnt===2&&this.isScalable){const{left:s,top:o}=this.element.getBoundingClientRect(),i=this.prevTouches.x-s,a=this.prevTouches.y-o,h=1/(r.scale/this.prevTouches.scale);this.scaleViewport(h,i,a)}this.prevTouches=r,t.preventDefault()});n(this,"onTouchEnd",t=>{t.touches.length>0?this.prevTouches=this.getAverageTouch(t):this.prevTouches=null});var h,d,l,g,u,f,w,v,m,E,p,y;this.canvas=t,this.options=r,this.transformation=this.canvas.transformation,this.model=this.canvas.model;const s=((d=(h=this.options)==null?void 0:h.scale)==null?void 0:d.min)??null,o=((g=(l=this.options)==null?void 0:l.scale)==null?void 0:g.max)??null;this.isScalable=((f=(u=this.options)==null?void 0:u.scale)==null?void 0:f.enabled)!==!1,this.minViewScale=o!==null?1/o:null,this.maxViewScale=s!==null?1/s:null,this.isShiftable=((v=(w=this.options)==null?void 0:w.shift)==null?void 0:v.enabled)!==!1;const i=(E=(m=this.options)==null?void 0:m.scale)==null?void 0:E.wheelSensitivity;this.wheelSensitivity=i!==void 0?i:1.2;const a=()=>{};this.onTransform=((p=r==null?void 0:r.events)==null?void 0:p.onTransform)??a;const c=()=>!0;this.onBeforeTransform=((y=r==null?void 0:r.events)==null?void 0:y.onBeforeTransform)??c}addNode(t){return this.canvas.addNode(t),this}updateNode(t,r){return this.canvas.updateNode(t,r),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,r){return this.canvas.updatePort(t,r),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,r){return this.canvas.updateEdge(t,r),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}patchContentState(t){return this.canvas.patchContentState(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 r=[],s=t.touches.length;for(let h=0;h<s;h++)r.push([t.touches[h].clientX,t.touches[h].clientY]);const o=r.reduce((h,d)=>[h[0]+d[0],h[1]+d[1]],[0,0]),i=[o[0]/s,o[1]/s],c=r.map(h=>[h[0]-i[0],h[1]-i[1]]).reduce((h,d)=>h+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:i[0],y:i[1],scale:c/s,touchesCnt:s}}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}moveViewport(t,r){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,x:s.x+s.scale*t,y:s.y+s.scale*r};this.onBeforeTransform({...o})&&(this.canvas.patchViewportState(o),this.onTransform(o))}scaleViewport(t,r,s){const o=this.canvas.transformation.getViewportMatrix(),i=o.scale*t,a=o.scale*(1-t)*r+o.x,c=o.scale*(1-t)*s+o.y;if(this.maxViewScale!==null&&i>this.maxViewScale&&i>o.scale||this.minViewScale!==null&&i<this.minViewScale&&i<o.scale)return;const h={scale:i,x:a,y:c};this.onBeforeTransform({...h})&&(this.canvas.patchViewportState(h),this.onTransform(h))}}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 et(this.coreOptions);return this.isDraggable&&(t=new rt(t,this.dragOptions)),this.isTransformable&&(t=new st(t,this.transformOptions)),t}}S.BezierEdgeShape=G,S.CanvasCore=et,S.CycleCircleEdgeShape=_,S.CycleSquareEdgeShape=O,S.DetourStraightEdgeShape=k,S.EdgeType=T,S.HorizontalEdgeShape=H,S.HtmlGraphBuilder=Et,S.StraightEdgeShape=j,S.UserDraggableNodesCanvas=rt,S.UserTransformableCanvas=st,S.VerticalEdgeShape=U,S.createBezierEdgeShapeFactory=J,S.createHorizontalEdgeShapeFactory=Q,S.createStraightEdgeShareFactory=K,S.createVerticalEdgeShapeFactory=Z,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});
+(function(f,M){typeof exports=="object"&&typeof module<"u"?M(exports):typeof define=="function"&&define.amd?define(["exports"],M):(f=typeof globalThis<"u"?globalThis:f||self,M(f.HTMLGraph={}))})(this,function(f){"use strict";var Nt=Object.defineProperty;var Mt=(f,M,V)=>M in f?Nt(f,M,{enumerable:!0,configurable:!0,writable:!0,value:V}):f[M]=V;var a=(f,M,V)=>Mt(f,typeof M!="symbol"?M+"":M,V);const M=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},V=()=>{const e=document.createElement("canvas");return e.style.position="absolute",e.style.inset="0",e},it=()=>{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};class nt{constructor(t,r,s,o){a(this,"canvasWrapper",null);a(this,"host",M());a(this,"canvas",V());a(this,"container",it());a(this,"canvasCtx");a(this,"hostResizeObserver");a(this,"nodesResizeObserver");a(this,"nodeElementToIdMap",new Map);a(this,"nodeWrapperElementToIdMap",new Map);a(this,"nodeIdToWrapperElementMap",new Map);a(this,"edgeIdToElementMap",new Map);this.graphStore=t,this.viewportTransformer=r,this.publicViewportTransformer=s,this.backgroundDrawingFn=o;const i=this.canvas.getContext("2d");if(i===null)throw new Error("unable to get canvas context");this.canvasCtx=i,this.host.appendChild(this.canvas),this.host.appendChild(this.container),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.edgeIdToElementMap.keys()).forEach(t=>{this.detachEdge(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.container),this.detach()}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`}attachNode(t){const r=this.graphStore.getNode(t),s=document.createElement("div");s.appendChild(r.element),s.style.position="absolute",s.style.top="0",s.style.left="0",s.style.visibility="hidden",this.container.appendChild(s),this.nodeElementToIdMap.set(r.element,t),this.nodeWrapperElementToIdMap.set(s,t),this.nodeIdToWrapperElementMap.set(t,s),this.updateNodeCoords(t),this.updateNodePriority(t),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(t){const r=this.graphStore.getNode(t);this.nodesResizeObserver.unobserve(r.element);const s=this.nodeIdToWrapperElementMap.get(t);s.removeChild(r.element),this.container.removeChild(s),this.nodeElementToIdMap.delete(r.element),this.nodeWrapperElementToIdMap.delete(s),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const s=this.graphStore.getEdge(t).shape.svg;s.style.position="absolute",s.style.top="0",s.style.left="0",this.edgeIdToElementMap.set(t,s),this.updateEdgeCoords(t),this.updateEdgePriority(t),this.container.appendChild(s)}detachEdge(t){const r=this.edgeIdToElementMap.get(t);this.edgeIdToElementMap.delete(t),this.container.removeChild(r)}updateNodePriority(t){const r=this.graphStore.getNode(t),s=this.nodeIdToWrapperElementMap.get(t);s.style.zIndex=`${r.priority}`}updateEdgePriority(t){const r=this.graphStore.getEdge(t);this.edgeIdToElementMap.get(t).style.zIndex=`${r.priority}`}updateNodeCoordinates(t){const r=this.graphStore.getNodeAdjacentEdges(t);this.updateNodeCoords(t),r.forEach(s=>{this.updateEdgeCoords(s)})}updatePortEdges(t){this.graphStore.getPortAdjacentEdges(t).forEach(s=>{this.updateEdgeCoords(s)})}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(t=>{t.forEach(r=>{const s=r.target,o=this.nodeWrapperElementToIdMap.get(s);this.updateNodeCoords(o),this.graphStore.getNodeAdjacentEdges(o).forEach(n=>{this.updateEdgeCoords(n)})})})}updateCanvasDimensions(){const{width:t,height:r}=this.host.getBoundingClientRect();this.canvas.width=t,this.canvas.height=r}updateNodeCoords(t){const r=this.nodeIdToWrapperElementMap.get(t),{width:s,height:o}=r.getBoundingClientRect(),i=this.viewportTransformer.getViewportMatrix().scale,n=this.graphStore.getNode(t),{x:c,y:h}=n.centerFn(s,o),l=n.x-i*c,d=n.y-i*h;r.style.transform=`matrix(1, 0, 0, 1, ${l}, ${d})`}updateEdgeCoords(t){const r=this.graphStore.getEdge(t),s=this.graphStore.getPort(r.from),o=this.graphStore.getPort(r.to),i=s.element.getBoundingClientRect(),n=o.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix(),l=h.scale*(i.left-c.left)+h.dx,d=h.scale*(i.top-c.top)+h.dy,g=h.scale*(n.left-c.left)+h.dx,u=h.scale*(n.top-c.top)+h.dy,{x:y,y:w}=s.centerFn(i.width*h.scale,i.height*h.scale),{x:v,y:m}=o.centerFn(n.width*h.scale,n.height*h.scale),x=y+l,p=w+d,E=v+g,A=m+u,S=Math.min(x,E),T=Math.min(p,A),F=Math.abs(E-x),D=Math.abs(A-p);r.shape.update(S,T,F,D,s,o)}}const B={scale:1,dx:0,dy:0};class at{constructor(){a(this,"viewportMatrix",B);a(this,"contentMatrix",B)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t,r,s){this.viewportMatrix={scale:t??this.viewportMatrix.scale,dx:r??this.viewportMatrix.dx,dy:s??this.viewportMatrix.dy},this.contentMatrix=this.calculateReverseMatrix(this.viewportMatrix)}patchContentMatrix(t,r,s){this.contentMatrix={scale:t??this.contentMatrix.scale,dx:r??this.contentMatrix.dx,dy:s??this.contentMatrix.dy},this.viewportMatrix=this.calculateReverseMatrix(this.contentMatrix)}calculateReverseMatrix(t){return{scale:1/t.scale,dx:-t.dx/t.scale,dy:-t.dy/t.scale}}}class ht{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class ct{constructor(){a(this,"nodes",new Map);a(this,"ports",new Map);a(this,"nodePorts",new Map);a(this,"portNodeId",new Map);a(this,"edges",new Map);a(this,"incommingEdges",new Map);a(this,"outcommingEdges",new Map);a(this,"cycleEdges",new Map)}addNode(t,r,s,o,i,n){this.nodes.set(t,{element:r,x:s,y:o,centerFn:i,priority:n}),this.nodePorts.set(t,new Map)}getAllNodes(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}getNodePorts(t){const r=this.nodePorts.get(t);if(r!==void 0)return Array.from(r.keys())}removeNode(t){this.getNodeAdjacentEdges(t).forEach(o=>{this.removeEdge(o)}),this.nodes.delete(t),this.nodePorts.get(t).forEach((o,i)=>{this.portNodeId.delete(i)}),this.nodePorts.delete(t)}addPort(t,r,s,o,i){this.ports.set(t,{element:r,centerFn:o,direction:i}),this.cycleEdges.set(t,new Set),this.incommingEdges.set(t,new Set),this.outcommingEdges.set(t,new Set),this.portNodeId.set(t,s),this.nodePorts.get(s).set(t,r)}getAllPorts(){return Array.from(this.ports.keys())}getPort(t){return this.ports.get(t)}getPortNode(t){return this.portNodeId.get(t)}removePort(t){this.cycleEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.cycleEdges.delete(t),this.incommingEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.incommingEdges.delete(t),this.outcommingEdges.get(t).forEach(s=>{this.removeEdge(s)}),this.outcommingEdges.get(t);const r=this.portNodeId.get(t);this.portNodeId.delete(t),this.nodePorts.get(r).delete(t),this.ports.delete(t)}addEdge(t,r,s,o,i){this.edges.set(t,{from:r,to:s,shape:o,priority:i}),r!==s?(this.outcommingEdges.get(r).add(t),this.incommingEdges.get(s).add(t)):this.cycleEdges.get(r).add(t)}getAllEdges(){return Array.from(this.edges.keys())}getEdge(t){return this.edges.get(t)}removeEdge(t){const r=this.edges.get(t),s=r.from,o=r.to;this.cycleEdges.get(s).delete(t),this.cycleEdges.get(o).delete(t),this.incommingEdges.get(s).delete(t),this.incommingEdges.get(o).delete(t),this.outcommingEdges.get(s).delete(t),this.outcommingEdges.get(o).delete(t),this.edges.delete(t)}getPortAdjacentEdges(t){return[...this.getPortIncomingEdges(t),...this.getPortOutcomingEdges(t),...this.getPortCycleEdges(t)]}getNodeAdjacentEdges(t){return[...this.getNodeIncomingEdges(t),...this.getNodeOutcomingEdges(t),...this.getNodeCycleEdges(t)]}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdges(t){return Array.from(this.incommingEdges.get(t))}getPortOutcomingEdges(t){return Array.from(this.outcommingEdges.get(t))}getPortCycleEdges(t){return Array.from(this.cycleEdges.get(t))}getNodeIncomingEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortIncomingEdges(o)]}),s}getNodeOutcomingEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortOutcomingEdges(o)]}),s}getNodeCycleEdges(t){const r=Array.from(this.nodePorts.get(t).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortCycleEdges(o)]}),s}}class lt{constructor(t){this.graphStore=t}getAllNodes(){return this.graphStore.getAllNodes()}getAllPorts(){return this.graphStore.getAllPorts()}getNode(t){const r=this.graphStore.getNode(t);return r===void 0?null:{element:r.element,x:r.x,y:r.y,centerFn:r.centerFn,priority:r.priority}}getNodePorts(t){return this.graphStore.getNodePorts(t)}getPort(t){const r=this.graphStore.getPort(t);return r===void 0?null:{element:r.element,centerFn:r.centerFn,direction:r.direction}}getPortNode(t){return this.graphStore.getPortNode(t)??null}getAllEdges(){return this.graphStore.getAllEdges()}getEdge(t){const r=this.graphStore.getEdge(t);return r===void 0?null:{from:r.from,to:r.to,priority:r.priority}}getPortAdjacentEdges(t){return this.graphStore.getPortAdjacentEdges(t)}getNodeAdjacentEdges(t){return this.graphStore.getNodeAdjacentEdges(t)}getPortIncomingEdges(t){return this.graphStore.getPortIncomingEdges(t)}getPortOutcomingEdges(t){return this.graphStore.getPortOutcomingEdges(t)}getPortCycleEdges(t){return this.graphStore.getPortCycleEdges(t)}getNodeIncomingEdges(t){return this.graphStore.getNodeIncomingEdges(t)}getNodeOutcomingEdges(t){return this.graphStore.getNodeOutcomingEdges(t)}getNodeCycleEdges(t){return this.graphStore.getNodeCycleEdges(t)}}const $=e=>{const{top:t,left:r,width:s,height:o}=e.element.getBoundingClientRect(),i=e.centerFn(s,o);return{x:r+i.x,y:t+i.y}},C=(e,t,r)=>({x:t.x*e.x-t.y*e.y+((1-t.x)*r.x+t.y*r.y),y:t.y*e.x+t.x*e.y+((1-t.x)*r.y-t.y*r.x)}),b=(e,t,r)=>({x:t*Math.cos(e),y:r*Math.sin(e)}),N=(e,t,r,s,o)=>{const n=[{x:0,y:0},{x:s,y:o},{x:s,y:-o}].map(d=>C(d,e,{x:0,y:0})).map(d=>({x:d.x+t,y:d.y+r})),c=`M ${n[0].x} ${n[0].y}`,h=`L ${n[1].x} ${n[1].y}`,l=`L ${n[2].x} ${n[2].y}`;return`${c} ${h} ${l}`};class G{constructor(t,r,s,o,i,n,c){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.color=t,this.width=r,this.curvature=s,this.arrowLength=o,this.arrowWidth=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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=C({x:this.arrowLength,y:0},g,{x:0,y:0}),w=C({x:s-this.arrowLength,y:o},u,{x:s,y:o}),v={x:y.x+g.x*this.curvature,y:y.y+g.y*this.curvature},m={x:w.x-u.x*this.curvature,y:w.y-u.y*this.curvature},x=`M ${y.x} ${y.y} C ${v.x} ${v.y}, ${m.x} ${m.y}, ${w.x} ${w.y}`,p=this.sourceArrow?"":`M 0 0 L ${y.x} ${y.y} `,E=this.targetArrow?"":` M ${w.x} ${w.y} L ${s} ${o}`,A=`${p}${x}${E}`;if(this.line.setAttribute("d",A),this.sourceArrow){const S=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",S)}if(this.targetArrow){const S=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",S)}}}const W=(e,t)=>{const r=[];if(e.length>0&&r.push(`M ${e[0].x} ${e[0].y}`),e.length===2&&r.push(`L ${e[1].x} ${e[1].y}`),e.length>2){const s=e.length-1;let o=0,i=0,n=0;e.forEach((c,h)=>{let l=0,d=0,g=0;const u=h>0,y=h<s,w=u&&y;if(u&&(l=-o,d=-i,g=n),y){const S=e[h+1];o=S.x-c.x,i=S.y-c.y,n=Math.sqrt(o*o+i*i)}const m=Math.min((w?t:0)/n,h<s-1?.5:1),x=w?{x:c.x+o*m,y:c.y+i*m}:c,E=Math.min((w?t:0)/g,h>1?.5:1),A=w?{x:c.x+l*E,y:c.y+d*E}:c;h>0&&r.push(`L ${A.x} ${A.y}`),w&&r.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${x.x} ${x.y}`)})}return r.join(" ")};class j{constructor(t,r,s,o,i,n,c,h){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=this.sourceArrow?C({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?C({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,m=C({x:v,y:0},g,{x:0,y:0}),x=C({x:s-v,y:o},u,{x:s,y:o}),p=W([y,m,x,w],this.roundness);if(this.line.setAttribute("d",p),this.sourceArrow){const E=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",E)}if(this.targetArrow){const E=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",E)}}}class H{constructor(t,r,s,o,i,n,c,h){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=this.sourceArrow?C({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?C({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,m=C({x:v,y:0},g,{x:0,y:0}),x=C({x:s-v,y:o},u,{x:s,y:o}),p=Math.max((m.x+x.x)/2,v),E=o/2,A={x:l>0?p:-v,y:m.y},S={x:A.x,y:E},T={x:l>0?s-p:s+v,y:x.y},F={x:T.x,y:E},D=W([y,m,A,S,F,T,x,w],this.roundness);if(this.line.setAttribute("d",D),this.sourceArrow){const L=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",L)}if(this.targetArrow){const L=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",L)}}}class U{constructor(t,r,s,o,i,n,c,h){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=this.sourceArrow?C({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?C({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,m=C({x:v,y:0},g,{x:0,y:0}),x=C({x:s-v,y:o},u,{x:s,y:o}),p=Math.max((m.y+x.y)/2,v),E=s/2,A={x:m.x,y:d>0?p:-v},S={x:E,y:A.y},T={x:x.x,y:d>0?o-p:o+v},F={x:E,y:T.y},D=W([y,m,A,S,F,T,x,w],this.roundness);if(this.line.setAttribute("d",D),this.sourceArrow){const L=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",L)}if(this.targetArrow){const L=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",L)}}}class _{constructor(t,r,s,o,i,n,c){a(this,"svg");a(this,"group");a(this,"line");a(this,"arrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.radius=n,this.smallRadius=c,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%",i&&(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,r,s,o,i){this.svg.style.transform=`translate(${t}px, ${r}px)`;const n=b(i.direction,1,1),c=this.smallRadius,h=this.radius,l=Math.sqrt(c*c+h*h),d=c+h,g=this.arrowLength+l*(1-h/d),u=c*h/d,w=[{x:this.arrowLength,y:0},{x:g,y:u},{x:g,y:-u}].map(p=>C(p,n,{x:0,y:0})),v=[`M ${w[0].x} ${w[0].y}`,`A ${c} ${c} 0 0 1 ${w[1].x} ${w[1].y}`,`A ${h} ${h} 0 1 0 ${w[2].x} ${w[2].y}`,`A ${c} ${c} 0 0 1 ${w[0].x} ${w[0].y}`].join(" "),m=`M 0 0 L ${w[0].x} ${w[0].y} `,x=`${this.arrow!==null?"":m}${v}`;if(this.line.setAttribute("d",x),this.arrow){const p=N(n,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",p)}}}class O{constructor(t,r,s,o,i,n,c,h){a(this,"svg");a(this,"group");a(this,"line");a(this,"arrow",null);a(this,"roundness");a(this,"linePoints");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.side=n,this.minPortOffset=c,this.roundness=Math.min(h,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%",i&&(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 l=this.minPortOffset,d=this.side,g=this.arrowLength+l,u=this.roundness,y=g+2*d;console.log(u),this.linePoints=[{x:this.arrowLength,y:0},{x:g,y:0},{x:g,y:this.side},{x:y,y:this.side},{x:y,y:-this.side},{x:g,y:-this.side},{x:g,y:0},{x:this.arrowLength,y:0}]}update(t,r,s,o,i){this.svg.style.transform=`translate(${t}px, ${r}px)`;const n=b(i.direction,1,1),c=this.linePoints.map(d=>C(d,n,{x:0,y:0})),h=`M 0 0 L ${c[0].x} ${c[0].y} `,l=`${this.arrow?"":h}${W(c,this.roundness)}`;if(this.line.setAttribute("d",l),this.arrow){const d=N(n,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",d)}}}class k{constructor(t,r,s,o,i,n,c,h,l,d){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=h,this.detourX=Math.cos(d)*l,this.detourY=Math.sin(d)*l,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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=this.sourceArrow?C({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?C({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,m=C({x:v,y:0},g,{x:0,y:0}),x={x:m.x+this.detourX,y:m.y+this.detourY},p=C({x:s-v,y:o},u,{x:s,y:o}),E={x:p.x+this.detourX,y:p.y+this.detourY},A=W([y,m,x,E,p,w],this.roundness);if(this.line.setAttribute("d",A),this.sourceArrow){const S=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",S)}if(this.targetArrow){const S=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",S)}}}var P=(e=>(e.Regular="regular",e.PortCycle="port-cycle",e.NodeCycle="node-cycle",e))(P||{});class dt{constructor(t,r,s,o,i,n,c,h,l){a(this,"svg");a(this,"group");a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.color=t,this.width=r,this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(l)*h,this.detourY=Math.sin(l)*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%",n&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),c&&(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,r,s,o,i,n){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${t}px, ${r}px)`;const c=$(i),h=$(n),l=c.x<=h.x?1:-1,d=c.y<=h.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=this.sourceArrow?C({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?C({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength,m=C({x:v,y:0},g,{x:0,y:0}),x={x:m.x+this.detourX,y:m.y+this.detourY},p=C({x:s-v,y:o},u,{x:s,y:o}),E={x:p.x+this.detourX,y:p.y+this.detourY},A={x:(x.x+E.x)/2,y:(x.y+E.y)/2},S={x:m.x-this.curvature*Math.cos(i.direction),y:m.y-this.curvature*Math.sin(i.direction)},T={x:p.x+this.curvature*Math.cos(n.direction),y:p.y+this.curvature*Math.sin(n.direction)},F={x:m.x+this.detourX,y:m.y+this.detourY},D={x:p.x+this.detourX,y:p.y+this.detourY},L=[`M ${y.x} ${y.y}`,`L ${m.x} ${m.y}`,`C ${S.x} ${S.y} ${F.x} ${F.y} ${A.x} ${A.y}`,`C ${D.x} ${D.y} ${T.x} ${T.y} ${p.x} ${p.y}`,`L ${w.x} ${w.y}`].join(" ");if(this.line.setAttribute("d",L),this.sourceArrow){const z=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",z)}if(this.targetArrow){const z=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",z)}}}const J=e=>t=>t===P.PortCycle?new _(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleRadius,e.smallCycleRadius):t===P.NodeCycle?new dt(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow,e.detourDistance,e.detourDirection):new G(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow),K=e=>t=>t===P.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===P.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new j(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness),Q=e=>t=>t===P.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===P.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new H(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness),Z=e=>t=>t===P.PortCycle?new O(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow||e.hasTargetArrow,e.cycleSquareSide,e.arrowOffset,e.roundness):t===P.NodeCycle?new k(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness,e.detourDistance,e.detourDirection):new U(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness);class R{constructor(){a(this,"counter",0)}create(){const t=this.counter;return this.counter++,t}reset(){this.counter=0}}class gt{constructor(t,r,s,o,i,n,c,h){a(this,"nodeIdGenerator",new R);a(this,"portIdGenerator",new R);a(this,"edgeIdGenerator",new R);this.graphStore=t,this.htmlController=r,this.viewportTransformer=s,this.nodesCenterFn=o,this.portsCenterFn=i,this.portsDirection=n,this.nodesPriorityFn=c,this.edgesPriorityFn=h}addNode(t,r,s,o,i,n,c){if(t===void 0)do t=this.nodeIdGenerator.create();while(this.graphStore.getNode(t)!==void 0);if(this.graphStore.getNode(t)!==void 0)throw new Error("failed to add node with existing id");this.graphStore.addNode(t,r,s,o,n??this.nodesCenterFn,c??this.nodesPriorityFn()),this.htmlController.attachNode(t),new Map(i??[]).forEach((l,d)=>{l instanceof HTMLElement?this.markPort(d,l,t,this.portsCenterFn,this.portsDirection):this.markPort(d,l.element,t,l.centerFn??this.portsCenterFn,l.direction??this.portsDirection)})}updateNode(t,r,s,o,i){const n=this.graphStore.getNode(t);if(n===void 0)throw new Error("failed to update nonexisting node");n.x=r??n.x,n.y=s??n.y,n.centerFn=i??n.centerFn,this.htmlController.updateNodeCoordinates(t),o!==void 0&&(n.priority=o,this.htmlController.updateNodePriority(t))}markPort(t,r,s,o,i){if(t===void 0)do t=this.portIdGenerator.create();while(this.graphStore.getPort(t)!==void 0);if(this.graphStore.getNode(s)===void 0)throw new Error("failed to set port on nonexisting node");if(this.graphStore.getPort(t)!==void 0)throw new Error("failed to add port with existing id");this.graphStore.addPort(t,r,s,o??this.portsCenterFn,i??0)}updatePort(t,r){const s=this.graphStore.getPort(t);if(s===void 0)throw new Error("failed to unset nonexisting port");s.direction=(r==null?void 0:r.direction)??s.direction,s.centerFn=(r==null?void 0:r.centerFn)??s.centerFn,this.htmlController.updatePortEdges(t)}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new Error("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdges(t).forEach(r=>{this.removeEdge(r)}),this.graphStore.removePort(t)}addEdge(t,r,s,o,i){if(t===void 0)do t=this.edgeIdGenerator.create();while(this.graphStore.getEdge(t)!==void 0);if(this.graphStore.getPort(r)===void 0)throw new Error("failed to add edge from nonexisting port");if(this.graphStore.getPort(s)===void 0)throw new Error("failed to add edge to nonexisting port");if(this.graphStore.getEdge(t)!==void 0)throw new Error("failed to add edge with existing id");let n=P.Regular;const c=this.graphStore.getPortNode(r),h=this.graphStore.getPortNode(s);r===s?n=P.PortCycle:c===h&&(n=P.NodeCycle),this.graphStore.addEdge(t,r,s,o(n),i??this.edgesPriorityFn()),this.htmlController.attachEdge(t)}updateEdge(t,r){const s=this.graphStore.getEdge(t);if(s===void 0)throw new Error("failed to update nonexisting edge");r.controller!==void 0&&(this.htmlController.detachEdge(t),s.shape=r.controller,this.htmlController.attachEdge(t)),r.priority!==void 0&&(s.priority=r.priority,this.htmlController.updateEdgePriority(t))}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new Error("failed to remove nonexisting edge");this.htmlController.detachEdge(t),this.graphStore.removeEdge(t)}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new Error("failed to remove nonexisting node");this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportMatrix(t,r,s){this.viewportTransformer.patchViewportMatrix(t,r,s),this.htmlController.applyTransform()}patchContentMatrix(t,r,s){this.viewportTransformer.patchContentMatrix(t,r,s),this.htmlController.applyTransform()}attach(t){this.htmlController.attach(t)}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 ut{constructor(t,r,s,o,i,n){a(this,"publicViewportTransformer");a(this,"publicGraphStore");a(this,"canvasController");const c=new at,h=new ct;this.publicGraphStore=new lt(h),this.publicViewportTransformer=new ht(c);const l=new nt(h,c,this.publicViewportTransformer,t);this.canvasController=new gt(h,l,c,r,s,o,i,n)}}const q=(e,t)=>({x:e/2,y:t/2}),wt=()=>()=>{},mt=(e,t,r,s,o,i)=>{e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillStyle=i,e.fillRect(0,0,e.canvas.width,e.canvas.height);const n=t.getContentMatrix(),c=s*n.scale;let h=0,l=0,d=c/2;do d*=2,h=e.canvas.width/d,l=e.canvas.height/d;while(h*l>1e4);const g=n.dx-Math.floor(n.dx/d)*d,u=n.dy-Math.floor(n.dy/d)*d,y=o*n.scale,w=2*Math.PI,v=g-d,m=u-d,x=e.canvas.width+g,p=e.canvas.height+u;e.fillStyle=r;for(let E=v;E<=x;E+=d)for(let A=m;A<=p;A+=d)e.beginPath(),e.arc(E,A,y,0,w),e.closePath(),e.fill()},pt=(e,t,r,s)=>(o,i)=>{mt(o,i,e,t,r,s)},vt=e=>{switch(e==null?void 0:e.type){case"custom":return e.drawingFn;case"dots":return pt(e.dotColor??"#d8d8d8",e.dotGap??25,e.dotRadius??1.5,e.color??"#ffffff");default:return wt()}},I=e=>{switch(e==null?void 0:e.type){case"custom":return e.controllerFactory;case"straight":return K({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});case"horizontal":return Q({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});case"vertical":return Z({color:e.color??"#5c5c5c",width:e.width??1,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,arrowOffset:e.arrowOffset??15,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleSquareSide:e.cycleSquareSide??30,roundness:e.roundness??10,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2});default:return J({color:e.color??"#5c5c5c",width:e.width??1,curvature:e.curvature??90,arrowLength:e.arrowLength??15,arrowWidth:e.arrowWidth??4,hasSourceArrow:e.hasSourceArrow??!1,hasTargetArrow:e.hasTargetArrow??!1,cycleRadius:e.cycleRadius??30,smallCycleRadius:e.smallCycleRadius??15,detourDistance:e.detourDistance??100,detourDirection:e.detourDirection??-Math.PI/2})}},Y=e=>()=>e,tt=Y(0),X=()=>{let e=0;return()=>e++},yt=(e,t)=>{const r=[tt,tt];e==="incremental"&&(r[0]=X()),t==="incremental"&&(r[1]=X());const s=X();return e==="shared-incremental"&&(r[0]=s),t==="shared-incremental"&&(r[1]=s),typeof e=="number"&&(r[0]=Y(e)),typeof t=="number"&&(r[1]=Y(t)),typeof e=="function"&&(r[0]=e),typeof t=="function"&&(r[1]=t),r},ft=e=>{var s,o,i,n,c,h;const[t,r]=yt((s=e.nodes)==null?void 0:s.priority,(o=e.edges)==null?void 0:o.priority);return{background:{drawingFn:vt(e.background??{type:"none"})},nodes:{centerFn:((i=e.nodes)==null?void 0:i.centerFn)??q,priorityFn:t},ports:{centerFn:((n=e.ports)==null?void 0:n.centerFn)??q,direction:((c=e.ports)==null?void 0:c.direction)??0},edges:{shapeFactory:I(((h=e.edges)==null?void 0:h.shape)??{}),priorityFn:r}}};class et{constructor(t){a(this,"transformation");a(this,"model");a(this,"di");a(this,"edgeShapeFactory");this.apiOptions=t;const r=ft(this.apiOptions??{});this.di=new ut(r.background.drawingFn,r.nodes.centerFn,r.ports.centerFn,r.ports.direction,r.nodes.priorityFn,r.edges.priorityFn),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore,this.edgeShapeFactory=r.edges.shapeFactory}addNode(t){return this.di.canvasController.addNode(t.id,t.element,t.x,t.y,t.ports,t.centerFn,t.priority),this}updateNode(t,r){return this.di.canvasController.updateNode(t,r.x,r.y,r.priority,r.centerFn),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}updatePort(t,r){return this.di.canvasController.updatePort(t,r),this}unmarkPort(t){return this.di.canvasController.unmarkPort(t),this}addEdge(t){const r=t.options!==void 0?I(t.options):this.edgeShapeFactory;return this.di.canvasController.addEdge(t.id,t.from,t.to,r,t.priority),this}updateEdge(t,r){return this.di.canvasController.updateEdge(t,r),this}removeEdge(t){return this.di.canvasController.removeEdge(t),this}patchViewportMatrix(t){return this.di.canvasController.patchViewportMatrix(t.scale??null,t.dx??null,t.dy??null),this}patchContentMatrix(t){return this.di.canvasController.patchContentMatrix(t.scale??null,t.dx??null,t.dy??null),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 rt{constructor(t,r){a(this,"model");a(this,"transformation");a(this,"maxNodePriority",0);a(this,"nodes",new Map);a(this,"grabbedNodeId",null);a(this,"onNodeDrag");a(this,"onBeforeNodeDrag");a(this,"nodeIdGenerator",new R);a(this,"element",null);a(this,"onCanvasMouseUp",()=>{this.setCursor(null),this.grabbedNodeId=null});a(this,"onCanvasMouseMove",t=>{this.grabbedNodeId!==null&&(t.stopPropagation(),this.dragNode(this.grabbedNodeId,t.movementX,t.movementY))});a(this,"onCanvasTouchStart",t=>{this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});a(this,"onCanvasTouchMove",t=>{if(this.grabbedNodeId===null||t.touches.length!==1||this.previousTouchCoords===null)return;t.stopImmediatePropagation();const[r,s]=[t.touches[0].clientX-this.previousTouchCoords[0],t.touches[0].clientY-this.previousTouchCoords[1]];this.dragNode(this.grabbedNodeId,r,s),this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});a(this,"onCanvasTouchEnd",t=>{t.touches.length>0?this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]:(this.previousTouchCoords=null,this.grabbedNodeId=null)});a(this,"previousTouchCoords",null);a(this,"freezePriority");var i,n;this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model;const s=()=>{};this.onNodeDrag=((i=r==null?void 0:r.events)==null?void 0:i.onNodeDrag)??s;const o=()=>!0;this.onBeforeNodeDrag=((n=r==null?void 0:r.events)==null?void 0:n.onBeforeNodeDrag)??o,this.freezePriority=(r==null?void 0:r.grabPriorityStrategy)==="freeze"}addNode(t){let r=t.id;if(r===void 0)do r=this.nodeIdGenerator.create();while(this.nodes.has(r));this.canvas.addNode({...t,id:r}),this.updateMaxNodePriority(r);const s=i=>{const n=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:t.element,x:n.x,y:n.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=r,this.setCursor("grab"),this.moveNodeOnTop(r))},o=i=>{const n=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:t.element,x:n.x,y:n.y})&&i.touches.length===1&&(this.grabbedNodeId=r,this.moveNodeOnTop(r))};return this.nodes.set(r,{element:t.element,onMouseDown:s,onTouchStart:o}),t.element.addEventListener("mousedown",s),t.element.addEventListener("touchstart",o),this}updateNode(t,r){return this.canvas.updateNode(t,r),this.updateMaxNodePriority(t),this}removeNode(t){const r=this.nodes.get(t);return r!==void 0&&(r.element.removeEventListener("mousedown",r.onMouseDown),r.element.removeEventListener("touchstart",r.onTouchStart)),this.canvas.removeNode(t),this.nodes.delete(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,r){return this.canvas.updatePort(t,r),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,r){return this.canvas.updateEdge(t,r),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(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.maxNodePriority=0,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,r,s){const o=this.model.getNode(t);if(o===null)throw new Error("failed to drag nonexisting node");const i=this.canvas.transformation.getContentMatrix(),n=i.scale*o.x+i.dx,c=i.scale*o.y+i.dy,h=n+r,l=c+s,d=this.canvas.transformation.getViewportMatrix(),g=d.scale*h+d.dx,u=d.scale*l+d.dy;this.canvas.updateNode(t,{x:g,y:u}),this.onNodeDrag({nodeId:t,element:o.element,x:o.x,y:o.y})}updateMaxNodePriority(t){const r=this.model.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,r)}moveNodeOnTop(t){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const r=this.maxNodePriority-1;this.model.getNodeAdjacentEdges(t).forEach(o=>{this.updateEdge(o,{priority:r})})}}const xt=()=>{},Et=(e,t)=>t,Ct=(e,t)=>{const r=t!==null?1/t:null,s=e!==null?1/e:null;return(o,i)=>s!==null&&i.scale>s&&i.scale>o.scale||r!==null&&i.scale<r&&i.scale<o.scale?o:i},At=(e,t,r,s)=>(o,i,n,c)=>{let h=i.dx,l=i.dy;e!==null&&h<e&&h<o.dx&&(h=o.dx);const d=n*o.scale;t!==null&&h>t-d&&h>o.dx&&(h=o.dx),r!==null&&l<r&&l<o.dy&&(l=o.dy);const g=c*o.scale;return s!==null&&l>s-g&&l>o.dy&&(l=o.dy),{scale:i.scale,dx:h,dy:l}},st=e=>{switch(e.type){case"scale-limit":return Ct(e.minContentScale??null,e.maxContentScale??null);case"shift-limit":return At(e.minX??null,e.maxX??null,e.minY??null,e.maxY??null);default:return e.preprocessorFn}},St=e=>(t,r,s,o)=>e.reduce((i,n)=>n(t,i,s,o),r);class ot{constructor(t,r){a(this,"model");a(this,"transformation");a(this,"element",null);a(this,"isMoving",!1);a(this,"prevTouches",null);a(this,"onTransformFinished");a(this,"transformPreprocessor");a(this,"isScalable");a(this,"isShiftable");a(this,"wheelSensitivity");a(this,"onMouseDown",()=>{this.setCursor("grab"),this.isMoving=!0});a(this,"onMouseMove",t=>{if(!this.isMoving||!this.isShiftable)return;const r=-t.movementX,s=-t.movementY;this.moveViewport(r,s)});a(this,"onMouseUp",()=>{this.setCursor(null),this.isMoving=!1});a(this,"onWheelScroll",t=>{if(this.element===null||this.isScalable===!1)return;t.preventDefault();const{left:r,top:s}=this.element.getBoundingClientRect(),o=t.clientX-r,i=t.clientY-s,c=1/(t.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(c,o,i)});a(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t)});a(this,"onTouchMove",t=>{if(this.prevTouches===null||this.element===null||!this.isShiftable)return;const r=this.getAverageTouch(t);if((r.touchesCnt===1||r.touchesCnt===2)&&this.moveViewport(-(r.x-this.prevTouches.x),-(r.y-this.prevTouches.y)),r.touchesCnt===2&&this.isScalable){const{left:s,top:o}=this.element.getBoundingClientRect(),i=this.prevTouches.x-s,n=this.prevTouches.y-o,h=1/(r.scale/this.prevTouches.scale);this.scaleViewport(h,i,n)}this.prevTouches=r,t.preventDefault()});a(this,"onTouchEnd",t=>{t.touches.length>0?this.prevTouches=this.getAverageTouch(t):this.prevTouches=null});a(this,"observer",new ResizeObserver(()=>{if(this.element!==null){const t=this.canvas.transformation.getViewportMatrix(),{width:r,height:s}=this.element.getBoundingClientRect(),o=this.transformPreprocessor(t,t,r,s);this.canvas.patchViewportMatrix(o),this.onTransformFinished(o)}}));var i,n,c,h,l,d,g;this.canvas=t,this.options=r,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((n=(i=this.options)==null?void 0:i.scale)==null?void 0:n.enabled)!==!1,this.isShiftable=((h=(c=this.options)==null?void 0:c.shift)==null?void 0:h.enabled)!==!1;const s=(d=(l=this.options)==null?void 0:l.scale)==null?void 0:d.wheelSensitivity;this.wheelSensitivity=s!==void 0?s:1.2,this.onTransformFinished=((g=r==null?void 0:r.events)==null?void 0:g.onTransformFinished)??xt;const o=r==null?void 0:r.transformPreprocessor;o!==void 0?Array.isArray(o)?this.transformPreprocessor=St(o.map(u=>st(u))):this.transformPreprocessor=st(o):this.transformPreprocessor=Et}addNode(t){return this.canvas.addNode(t),this}updateNode(t,r){return this.canvas.updateNode(t,r),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,r){return this.canvas.updatePort(t,r),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,r){return this.canvas.updateEdge(t,r),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this}attach(t){return this.detach(),this.element=t,this.observer.observe(this.element),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.observer.unobserve(this.element),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 r=[],s=t.touches.length;for(let h=0;h<s;h++)r.push([t.touches[h].clientX,t.touches[h].clientY]);const o=r.reduce((h,l)=>[h[0]+l[0],h[1]+l[1]],[0,0]),i=[o[0]/s,o[1]/s],c=r.map(h=>[h[0]-i[0],h[1]-i[1]]).reduce((h,l)=>h+Math.sqrt(l[0]*l[0]+l[1]*l[1]),0);return{x:i[0],y:i[1],scale:c/s,touchesCnt:s}}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}moveViewport(t,r){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,dx:s.dx+s.scale*t,dy:s.dy+s.scale*r};if(this.element!==null){const{width:i,height:n}=this.element.getBoundingClientRect(),c=this.transformPreprocessor(s,o,i,n);this.canvas.patchViewportMatrix(c),this.onTransformFinished(c)}}scaleViewport(t,r,s){const o=this.canvas.transformation.getViewportMatrix(),i={scale:o.scale*t,dx:o.scale*(1-t)*r+o.dx,dy:o.scale*(1-t)*s+o.dy};if(this.element!==null){const{width:n,height:c}=this.element.getBoundingClientRect(),h=this.transformPreprocessor(o,i,n,c);this.canvas.patchViewportMatrix(h),this.onTransformFinished(h)}}}class bt{constructor(){a(this,"coreOptions");a(this,"dragOptions");a(this,"transformOptions");a(this,"isDraggable",!1);a(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 et(this.coreOptions);return this.isDraggable&&(t=new rt(t,this.dragOptions)),this.isTransformable&&(t=new ot(t,this.transformOptions)),t}}f.BezierEdgeShape=G,f.CanvasCore=et,f.CycleCircleEdgeShape=_,f.CycleSquareEdgeShape=O,f.DetourStraightEdgeShape=k,f.EdgeType=P,f.HorizontalEdgeShape=H,f.HtmlGraphBuilder=bt,f.StraightEdgeShape=j,f.UserDraggableNodesCanvas=rt,f.UserTransformableCanvas=ot,f.VerticalEdgeShape=U,f.createBezierEdgeShapeFactory=J,f.createHorizontalEdgeShapeFactory=Q,f.createStraightEdgeShareFactory=K,f.createVerticalEdgeShapeFactory=Z,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "0.0.54",
+  "version": "0.0.55",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",