npm - @html-graph/html-graph - Versions diffs - 0.0.56 → 0.0.57 - Mend

@html-graph/html-graph 0.0.56 → 0.0.57

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

Files changed (5) hide show

package/dist/main.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- (function(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 Tt=Object.defineProperty;var $t=(f,M,V)=>M in f?Tt(f,M,{enumerable:!0,configurable:!0,writable:!0,value:V}):f[M]=V;var h=(f,M,V)=>$t(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},at=()=>{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 ct{constructor(t,r,s,o){h(this,"canvasWrapper",null);h(this,"host",M());h(this,"canvas",V());h(this,"container",at());h(this,"canvasCtx");h(this,"hostResizeObserver");h(this,"nodesResizeObserver");h(this,"nodeElementToIdMap",new Map);h(this,"nodeWrapperElementToIdMap",new Map);h(this,"nodeIdToWrapperElementMap",new Map);h(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;this.edgeIdToElementMap.set(t,s),this.container.appendChild(s),this.updateEdgeCoords(t),this.updateEdgePriority(t)}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:a}=n.centerFn(s,o),l=n.x-ic,d=n.y-ia;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(),a=this.viewportTransformer.getViewportMatrix(),l=a.scale(i.left-c.left)+a.dx,d=a.scale(i.top-c.top)+a.dy,g=a.scale(n.left-c.left)+a.dx,u=a.scale(n.top-c.top)+a.dy,{x:y,y:w}=s.centerFn(i.widtha.scale,i.heighta.scale),{x:v,y:p}=o.centerFn(n.widtha.scale,n.heighta.scale),x=y+l,m=w+d,E=v+g,C=p+u,S=Math.min(x,E),$=Math.min(m,C),D=Math.abs(E-x),F=Math.abs(C-m);r.shape.update(S,$,D,F,s,o)}}const U={scale:1,dx:0,dy:0};class lt{constructor(){h(this,"viewportMatrix",U);h(this,"contentMatrix",U)}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 dt{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class gt{constructor(){h(this,"nodes",new Map);h(this,"ports",new Map);h(this,"nodePorts",new Map);h(this,"portNodeId",new Map);h(this,"edges",new Map);h(this,"incommingEdges",new Map);h(this,"outcommingEdges",new Map);h(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 ut{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 T=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}},A=(e,t,r)=>({x:t.xe.x-t.ye.y+((1-t.x)r.x+t.yr.y),y:t.ye.x+t.xe.y+((1-t.x)r.y-t.yr.x)}),b=(e,t,r)=>({x:tMath.cos(e),y:rMath.sin(e)}),N=(e,t,r,s,o)=>{const n=[{x:0,y:0},{x:s,y:o},{x:s,y:-o}].map(d=>A(d,e,{x:0,y:0})).map(d=>({x:d.x+t,y:d.y+r})),c=`M ${n[0].x} ${n[0].y}`,a=`L ${n[1].x} ${n[1].y}`,l=`L ${n[2].x} ${n[2].y}`;return`${c} ${a} ${l}`},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,a)=>{let l=0,d=0,g=0;const u=a>0,y=a<s,w=u&&y;if(u&&(l=-o,d=-i,g=n),y){const S=e[a+1];o=S.x-c.x,i=S.y-c.y,n=Math.sqrt(oo+ii)}const p=Math.min((w?t:0)/n,a<s-1?.5:1),x=w?{x:c.x+op,y:c.y+ip}:c,E=Math.min((w?t:0)/g,a>1?.5:1),C=w?{x:c.x+lE,y:c.y+dE}:c;a>0&&r.push(`L ${C.x} ${C.y}`),w&&r.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${x.x} ${x.y}`)})}return r.join(" ")};class _{constructor(t,r,s,o,i,n,c){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(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.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.y?1:-1;this.group.style.transform=`scale(${l}, ${d})`;const g=b(i.direction,l,d),u=b(n.direction,l,d),y=A({x:this.arrowLength,y:0},g,{x:0,y:0}),w=A({x:s-this.arrowLength,y:o},u,{x:s,y:o}),v={x:y.x+g.xthis.curvature,y:y.y+g.ythis.curvature},p={x:w.x-u.xthis.curvature,y:w.y-u.ythis.curvature},x=`M ${y.x} ${y.y} C ${v.x} ${v.y}, ${p.x} ${p.y}, ${w.x} ${w.y}`,m=this.sourceArrow?"":`M 0 0 L ${y.x} ${y.y} `,E=this.targetArrow?"":` M ${w.x} ${w.y} L ${s} ${o}`,C=`${m}${x}${E}`;if(this.line.setAttribute("d",C),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)}}}class J{constructor(t,r,s,o,i,n,c,a){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.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?A({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?A({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,p=A({x:v,y:0},g,{x:0,y:0}),x=A({x:s-v,y:o},u,{x:s,y:o}),m=W([y,p,x,w],this.roundness);if(this.line.setAttribute("d",m),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 K{constructor(t,r,s,o,i,n,c,a){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.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?A({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?A({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,p=A({x:v,y:0},g,{x:0,y:0}),x=A({x:s-v,y:o},u,{x:s,y:o}),m=Math.max((p.x+x.x)/2,v),E=o/2,C={x:l>0?m:-v,y:p.y},S={x:C.x,y:E},$={x:l>0?s-m:s+v,y:x.y},D={x:$.x,y:E},F=W([y,p,C,S,D,$,x,w],this.roundness);if(this.line.setAttribute("d",F),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 Q{constructor(t,r,s,o,i,n,c,a){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(this,"targetArrow",null);this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.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?A({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?A({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,p=A({x:v,y:0},g,{x:0,y:0}),x=A({x:s-v,y:o},u,{x:s,y:o}),m=Math.max((p.y+x.y)/2,v),E=s/2,C={x:p.x,y:d>0?m:-v},S={x:E,y:C.y},$={x:x.x,y:d>0?o-m:o+v},D={x:E,y:$.y},F=W([y,p,C,S,D,$,x,w],this.roundness);if(this.line.setAttribute("d",F),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 Z{constructor(t,r,s,o,i,n,c){h(this,"svg");h(this,"group");h(this,"line");h(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.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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,a=this.radius,l=Math.sqrt(cc+aa),d=c+a,g=this.arrowLength+l(1-a/d),u=ca/d,w=[{x:this.arrowLength,y:0},{x:g,y:u},{x:g,y:-u}].map(m=>A(m,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 ${a} ${a} 0 1 0 ${w[2].x} ${w[2].y}`,`A ${c} ${c} 0 0 1 ${w[0].x} ${w[0].y}`].join(" "),p=`M 0 0 L ${w[0].x} ${w[0].y} `,x=`${this.arrow!==null?"":p}${v}`;if(this.line.setAttribute("d",x),this.arrow){const m=N(n,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",m)}}}class O{constructor(t,r,s,o,i,n,c,a){h(this,"svg");h(this,"group");h(this,"line");h(this,"arrow",null);h(this,"roundness");h(this,"linePoints");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.side=n,this.minPortOffset=c,this.roundness=Math.min(a,this.minPortOffset,this.side/2),this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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+2d;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=>A(d,n,{x:0,y:0})),a=`M 0 0 L ${c[0].x} ${c[0].y} `,l=`${this.arrow?"":a}${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,a,l,d){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(this,"targetArrow",null);h(this,"detourX");h(this,"detourY");this.color=t,this.width=r,this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,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.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.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?A({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?A({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength+this.arrowOffset,p=A({x:v,y:0},g,{x:0,y:0}),x={x:p.x+this.detourX,y:p.y+this.detourY},m=A({x:s-v,y:o},u,{x:s,y:o}),E={x:m.x+this.detourX,y:m.y+this.detourY},C=W([y,p,x,E,m,w],this.roundness);if(this.line.setAttribute("d",C),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 wt{constructor(t,r,s,o,i,n,c,a,l){h(this,"svg");h(this,"group");h(this,"line");h(this,"sourceArrow",null);h(this,"targetArrow",null);h(this,"detourX");h(this,"detourY");this.color=t,this.width=r,this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(l)a,this.detourY=Math.sin(l)a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.svg.style.position="absolute",this.svg.style.top="0",this.svg.style.left="0",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=T(i),a=T(n),l=c.x<=a.x?1:-1,d=c.y<=a.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?A({x:this.arrowLength,y:0},g,{x:0,y:0}):{x:0,y:0},w=this.targetArrow?A({x:s-this.arrowLength,y:o},u,{x:s,y:o}):{x:s,y:o},v=this.arrowLength,p=A({x:v,y:0},g,{x:0,y:0}),x={x:p.x+this.detourX,y:p.y+this.detourY},m=A({x:s-v,y:o},u,{x:s,y:o}),E={x:m.x+this.detourX,y:m.y+this.detourY},C={x:(x.x+E.x)/2,y:(x.y+E.y)/2},S={x:p.x-this.curvatureMath.cos(i.direction),y:p.y-this.curvatureMath.sin(i.direction)},$={x:m.x+this.curvatureMath.cos(n.direction),y:m.y+this.curvatureMath.sin(n.direction)},D={x:p.x+this.detourX,y:p.y+this.detourY},F={x:m.x+this.detourX,y:m.y+this.detourY},L=[`M ${y.x} ${y.y}`,`L ${p.x} ${p.y}`,`C ${S.x} ${S.y} ${D.x} ${D.y} ${C.x} ${C.y}`,`C ${F.x} ${F.y} ${$.x} ${$.y} ${m.x} ${m.y}`,`L ${w.x} ${w.y}`].join(" ");if(this.line.setAttribute("d",L),this.sourceArrow){const H=N(g,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",H)}if(this.targetArrow){const H=N(u,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",H)}}}const q=e=>t=>t===P.PortCycle?new Z(e.color,e.width,e.arrowLength,e.arrowWidth,e.hasSourceArrow\|\|e.hasTargetArrow,e.cycleRadius,e.smallCycleRadius):t===P.NodeCycle?new wt(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow,e.detourDistance,e.detourDirection):new _(e.color,e.width,e.curvature,e.arrowLength,e.arrowWidth,e.hasSourceArrow,e.hasTargetArrow),I=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),tt=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 K(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness),et=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 Q(e.color,e.width,e.arrowLength,e.arrowWidth,e.arrowOffset,e.hasSourceArrow,e.hasTargetArrow,e.roundness);class R{constructor(){h(this,"counter",0)}create(){const t=this.counter;return this.counter++,t}reset(){this.counter=0}}class pt{constructor(t,r,s,o,i,n,c,a){h(this,"nodeIdGenerator",new R);h(this,"portIdGenerator",new R);h(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=a}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),Array.from(i??[]).forEach(a=>{this.markPort(a.id??this.generatePortId(),a.element,t,a.centerFn??this.portsCenterFn,a.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");const n=this.resolveEdgeType(r,s);this.graphStore.addEdge(t,r,s,o(n),i??this.edgesPriorityFn()),this.htmlController.attachEdge(t)}updateEdge(t,r,s){const o=this.graphStore.getEdge(t);if(o===void 0)throw new Error("failed to update nonexisting edge");if(r!==void 0){const i=this.resolveEdgeType(o.from,o.to);this.htmlController.detachEdge(t),o.shape=r(i),this.htmlController.attachEdge(t)}s!==void 0&&(o.priority=s,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()}generatePortId(){let t;do t=this.nodeIdGenerator.create();while(this.graphStore.getPort(t)!==void 0);return t}resolveEdgeType(t,r){let s=P.Regular;const o=this.graphStore.getPortNode(t),i=this.graphStore.getPortNode(r);return t===r?s=P.PortCycle:o===i&&(s=P.NodeCycle),s}}class mt{constructor(t,r,s,o,i,n){h(this,"publicViewportTransformer");h(this,"publicGraphStore");h(this,"canvasController");const c=new lt,a=new gt;this.publicGraphStore=new ut(a),this.publicViewportTransformer=new dt(c);const l=new ct(a,c,this.publicViewportTransformer,t);this.canvasController=new pt(a,l,c,r,s,o,i,n)}}const rt=(e,t)=>({x:e/2,y:t/2}),vt=()=>()=>{},yt=(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=sn.scale;let a=0,l=0,d=c/2;do d=2,a=e.canvas.width/d,l=e.canvas.height/d;while(al>1e4);const g=n.dx-Math.floor(n.dx/d)d,u=n.dy-Math.floor(n.dy/d)d,y=on.scale,w=2Math.PI,v=g-d,p=u-d,x=e.canvas.width+g,m=e.canvas.height+u;e.fillStyle=r;for(let E=v;E<=x;E+=d)for(let C=p;C<=m;C+=d)e.beginPath(),e.arc(E,C,y,0,w),e.closePath(),e.fill()},ft=(e,t,r,s)=>(o,i)=>{yt(o,i,e,t,r,s)},xt=e=>{switch(e==null?void 0:e.type){case"custom":return e.drawingFn;case"dots":return ft(e.dotColor??"#d8d8d8",e.dotGap??25,e.dotRadius??1.5,e.color??"#ffffff");default:return vt()}},B=e=>{switch(e==null?void 0:e.type){case"custom":return e.factory;case"straight":return I({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 tt({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 et({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 q({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})}},G=e=>()=>e,st=G(0),j=()=>{let e=0;return()=>e++},Et=(e,t)=>{const r=[st,st];e==="incremental"&&(r[0]=j()),t==="incremental"&&(r[1]=j());const s=j();return e==="shared-incremental"&&(r[0]=s),t==="shared-incremental"&&(r[1]=s),typeof e=="number"&&(r[0]=G(e)),typeof t=="number"&&(r[1]=G(t)),typeof e=="function"&&(r[0]=e),typeof t=="function"&&(r[1]=t),r},At=e=>{var s,o,i,n,c,a;const[t,r]=Et((s=e.nodes)==null?void 0:s.priority,(o=e.edges)==null?void 0:o.priority);return{background:{drawingFn:xt(e.background??{type:"none"})},nodes:{centerFn:((i=e.nodes)==null?void 0:i.centerFn)??rt,priorityFn:t},ports:{centerFn:((n=e.ports)==null?void 0:n.centerFn)??rt,direction:((c=e.ports)==null?void 0:c.direction)??0},edges:{shapeFactory:B(((a=e.edges)==null?void 0:a.shape)??{}),priorityFn:r}}};class ot{constructor(t){h(this,"transformation");h(this,"model");h(this,"di");h(this,"edgeShapeFactory");this.apiOptions=t;const r=At(this.apiOptions??{});this.di=new mt(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.shape!==void 0?B(t.shape):this.edgeShapeFactory;return this.di.canvasController.addEdge(t.id,t.from,t.to,r,t.priority),this}updateEdge(t,r){const s=r.shape!==void 0?B(r.shape):void 0;return this.di.canvasController.updateEdge(t,s,r.priority),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()}}const Y=(e,t,r)=>{const{x:s,y:o,width:i,height:n}=e.getBoundingClientRect();return t>=s&&t<s+i&&r>=o&&r<=o+n},X=(e,t,r)=>t>=0&&t<e.innerWidth&&r>=0&&r<=e.innerHeight,z=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")};class it{constructor(t,r){h(this,"model");h(this,"transformation");h(this,"maxNodePriority",0);h(this,"nodes",new Map);h(this,"grabbedNodeId",null);h(this,"onNodeDrag");h(this,"onBeforeNodeDrag");h(this,"nodeIdGenerator",new R);h(this,"element",null);h(this,"onCanvasMouseUp",()=>{this.cancelMouseDrag()});h(this,"onCanvasMouseMove",t=>{if(this.element!==null&&(!Y(this.element,t.clientX,t.clientY)\|\|!X(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});h(this,"onCanvasTouchStart",t=>{this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});h(this,"onCanvasTouchMove",t=>{if(t.touches.length===1){const r=t.touches[0];if(this.element!==null&&(!Y(this.element,r.clientX,r.clientY)\|\|!X(this.window,r.clientX,r.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){t.stopImmediatePropagation();const s=r.clientX-this.previousTouchCoords[0],o=r.clientY-this.previousTouchCoords[1];this.dragNode(this.grabbedNodeId,s,o),this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]}}});h(this,"onCanvasTouchEnd",t=>{t.touches.length>0?this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]:this.cancelTouchDrag()});h(this,"previousTouchCoords",null);h(this,"freezePriority");h(this,"window",window);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=>{if(this.element===null)return;const n=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:t.element,x:n.x,y:n.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=r,z(this.element,"grab"),this.moveNodeOnTop(r),this.window.addEventListener("mouseup",this.onCanvasMouseUp),this.window.addEventListener("mousemove",this.onCanvasMouseMove))},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),this.window.addEventListener("touchmove",this.onCanvasTouchMove),this.window.addEventListener("touchend",this.onCanvasTouchEnd),this.window.addEventListener("touchcancel",this.onCanvasTouchEnd))};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.element.addEventListener("touchstart",this.onCanvasTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.nodes.forEach(t=>{t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}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.scaleo.x+i.dx,c=i.scaleo.y+i.dy,a=n+r,l=c+s,d=this.canvas.transformation.getViewportMatrix(),g=d.scalea+d.dx,u=d.scalel+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})})}cancelMouseDrag(){this.grabbedNodeId=null,this.element!==null&&z(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onCanvasMouseUp),this.window.removeEventListener("mousemove",this.onCanvasMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null,this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onCanvasTouchMove),this.window.removeEventListener("touchend",this.onCanvasTouchEnd),this.window.removeEventListener("touchcancel",this.onCanvasTouchEnd)}}const Ct=()=>{},St=(e,t)=>t,bt=(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},Nt=(e,t,r,s)=>(o,i,n,c)=>{let a=i.dx,l=i.dy;e!==null&&a<e&&a<o.dx&&(a=o.dx);const d=no.scale;t!==null&&a>t-d&&a>o.dx&&(a=o.dx),r!==null&&l<r&&l<o.dy&&(l=o.dy);const g=co.scale;return s!==null&&l>s-g&&l>o.dy&&(l=o.dy),{scale:i.scale,dx:a,dy:l}},nt=e=>{switch(e.type){case"scale-limit":return bt(e.minContentScale??null,e.maxContentScale??null);case"shift-limit":return Nt(e.minX??null,e.maxX??null,e.minY??null,e.maxY??null);default:return e.preprocessorFn}},Mt=e=>(t,r,s,o)=>e.reduce((i,n)=>n(t,i,s,o),r);class ht{constructor(t,r){h(this,"model");h(this,"transformation");h(this,"element",null);h(this,"prevTouches",null);h(this,"onTransformFinished");h(this,"transformPreprocessor");h(this,"isScalable");h(this,"isShiftable");h(this,"wheelSensitivity");h(this,"window",window);h(this,"onMouseDown",()=>{this.element!==null&&(z(this.element,"grab"),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseup",this.onMouseUp))});h(this,"onMouseMove",t=>{if(!this.isShiftable\|\|this.element===null)return;if(!Y(this.element,t.clientX,t.clientY)\|\|!X(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const r=-t.movementX,s=-t.movementY;this.moveViewport(r,s)});h(this,"onMouseUp",()=>{this.stopMouseDrag()});h(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)});h(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t),this.window.addEventListener("touchmove",this.onTouchMove),this.window.addEventListener("touchend",this.onTouchEnd),this.window.addEventListener("touchcancel",this.onTouchEnd)});h(this,"onTouchMove",t=>{if(this.prevTouches===null\|\|!this.isShiftable\|\|this.element===null)return;const r=this.getAverageTouch(t);if(!r.touches.every(o=>Y(this.element,o[0],o[1])&&X(this.window,o[0],o[1]))){this.stopTouchDrag();return}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:o,top:i}=this.element.getBoundingClientRect(),n=this.prevTouches.x-o,c=this.prevTouches.y-i,l=1/(r.scale/this.prevTouches.scale);this.scaleViewport(l,n,c)}this.prevTouches=r});h(this,"onTouchEnd",t=>{t.touches.length>0?this.prevTouches=this.getAverageTouch(t):this.stopTouchDrag()});h(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,a,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=((a=(c=this.options)==null?void 0:c.shift)==null?void 0:a.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)??Ct;const o=r==null?void 0:r.transformPreprocessor;o!==void 0?Array.isArray(o)?this.transformPreprocessor=Mt(o.map(u=>nt(u))):this.transformPreprocessor=nt(o):this.transformPreprocessor=St}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.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}getAverageTouch(t){const r=[],s=t.touches.length;for(let a=0;a<s;a++)r.push([t.touches[a].clientX,t.touches[a].clientY]);const o=r.reduce((a,l)=>[a[0]+l[0],a[1]+l[1]],[0,0]),i=[o[0]/s,o[1]/s],c=r.map(a=>[a[0]-i[0],a[1]-i[1]]).reduce((a,l)=>a+Math.sqrt(l[0]l[0]+l[1]l[1]),0);return{x:i[0],y:i[1],scale:c/s,touchesCnt:s,touches:r}}moveViewport(t,r){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,dx:s.dx+s.scalet,dy:s.dy+s.scaler};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){if(this.element===null)return;const o=this.canvas.transformation.getViewportMatrix(),i={scale:o.scalet,dx:o.scale(1-t)r+o.dx,dy:o.scale(1-t)*s+o.dy},{width:n,height:c}=this.element.getBoundingClientRect(),a=this.transformPreprocessor(o,i,n,c);this.canvas.patchViewportMatrix(a),this.onTransformFinished(a)}stopMouseDrag(){this.element!==null&&z(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseup",this.onMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onTouchMove),this.window.removeEventListener("touchend",this.onTouchEnd),this.window.removeEventListener("touchcancel",this.onTouchEnd)}}class Pt{constructor(){h(this,"coreOptions");h(this,"dragOptions");h(this,"transformOptions");h(this,"isDraggable",!1);h(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 ot(this.coreOptions);return this.isDraggable&&(t=new it(t,this.dragOptions)),this.isTransformable&&(t=new ht(t,this.transformOptions)),t}}f.BezierEdgeShape=_,f.CanvasCore=ot,f.CycleCircleEdgeShape=Z,f.CycleSquareEdgeShape=O,f.DetourStraightEdgeShape=k,f.EdgeType=P,f.HorizontalEdgeShape=K,f.HtmlGraphBuilder=Pt,f.StraightEdgeShape=J,f.UserDraggableNodesCanvas=it,f.UserTransformableCanvas=ht,f.VerticalEdgeShape=Q,f.createBezierEdgeShapeFactory=q,f.createHorizontalEdgeShapeFactory=tt,f.createStraightEdgeShareFactory=I,f.createVerticalEdgeShapeFactory=et,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});
1	+ (function(f,N){typeof exports=="object"&&typeof module<"u"?N(exports):typeof define=="function"&&define.amd?define(["exports"],N):(f=typeof globalThis<"u"?globalThis:f\|\|self,N(f.HTMLGraph={}))})(this,function(f){"use strict";var Ye=Object.defineProperty;var ke=(f,N,z)=>N in f?Ye(f,N,{enumerable:!0,configurable:!0,writable:!0,value:z}):f[N]=z;var n=(f,N,z)=>ke(f,typeof N!="symbol"?N+"":N,z);const N=t=>({scale:1/t.scale,dx:-t.dx/t.scale,dy:-t.dy/t.scale}),z={scale:1,dx:0,dy:0};class ge{constructor(){n(this,"viewportMatrix",z);n(this,"contentMatrix",z)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e,r,s){this.viewportMatrix={scale:e??this.viewportMatrix.scale,dx:r??this.viewportMatrix.dx,dy:s??this.viewportMatrix.dy},this.contentMatrix=N(this.viewportMatrix)}patchContentMatrix(e,r,s){this.contentMatrix={scale:e??this.contentMatrix.scale,dx:r??this.contentMatrix.dx,dy:s??this.contentMatrix.dy},this.viewportMatrix=N(this.contentMatrix)}}class we{constructor(e){this.transformer=e}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class pe{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(e,r,s,o,i,h){this.nodes.set(e,{element:r,x:s,y:o,centerFn:i,priority:h}),this.nodePorts.set(e,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}removeNode(e){this.nodes.delete(e),this.nodePorts.delete(e)}addPort(e,r,s,o,i){this.ports.set(e,{element:r,centerFn:o,direction:i}),this.cycleEdges.set(e,new Set),this.incommingEdges.set(e,new Set),this.outcommingEdges.set(e,new Set),this.portNodeId.set(e,s),this.nodePorts.get(s).set(e,r)}getPort(e){return this.ports.get(e)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(e){const r=this.nodePorts.get(e);if(r!==void 0)return Array.from(r.keys())}getPortNodeId(e){return this.portNodeId.get(e)}removePort(e){const r=this.portNodeId.get(e);this.portNodeId.delete(e),this.nodePorts.get(r).delete(e),this.ports.delete(e)}addEdge(e,r,s,o,i){this.edges.set(e,{from:r,to:s,shape:o,priority:i}),r!==s?(this.outcommingEdges.get(r).add(e),this.incommingEdges.get(s).add(e)):this.cycleEdges.get(r).add(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){const r=this.edges.get(e),s=r.from,o=r.to;this.cycleEdges.get(s).delete(e),this.cycleEdges.get(o).delete(e),this.incommingEdges.get(s).delete(e),this.incommingEdges.get(o).delete(e),this.outcommingEdges.get(s).delete(e),this.outcommingEdges.get(o).delete(e),this.edges.delete(e)}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()}getPortIncomingEdgeIds(e){return Array.from(this.incommingEdges.get(e))}getPortOutcomingEdgeIds(e){return Array.from(this.outcommingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const r=Array.from(this.nodePorts.get(e).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortIncomingEdgeIds(o)]}),s}getNodeOutcomingEdgeIds(e){const r=Array.from(this.nodePorts.get(e).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortOutcomingEdgeIds(o)]}),s}getNodeCycleEdgeIds(e){const r=Array.from(this.nodePorts.get(e).keys());let s=[];return r.forEach(o=>{s=[...s,...this.getPortCycleEdgeIds(o)]}),s}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}}class ye{constructor(e){this.graphStore=e}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getAllPortIds(){return this.graphStore.getAllPortIds()}getNode(e){const r=this.graphStore.getNode(e);return r===void 0?null:{element:r.element,x:r.x,y:r.y,centerFn:r.centerFn,priority:r.priority}}getNodePortIds(e){return this.graphStore.getNodePortIds(e)}getPort(e){const r=this.graphStore.getPort(e);return r===void 0?null:{element:r.element,centerFn:r.centerFn,direction:r.direction}}getPortNodeId(e){return this.graphStore.getPortNodeId(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const r=this.graphStore.getEdge(e);return r===void 0?null:{from:r.from,to:r.to,priority:r.priority}}getPortAdjacentEdgeIds(e){return this.graphStore.getPortAdjacentEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNodeAdjacentEdgeIds(e)}getPortIncomingEdgeIds(e){return this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPortCycleEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNodeCycleEdgeIds(e)}}const D=t=>{const{top:e,left:r,width:s,height:o}=t.element.getBoundingClientRect(),i=t.centerFn(s,o);return{x:r+i.x,y:e+i.y}},A=(t,e,r)=>({x:e.xt.x-e.yt.y+((1-e.x)r.x+e.yr.y),y:e.yt.x+e.xt.y+((1-e.x)r.y-e.yr.x)}),b=(t,e,r)=>({x:eMath.cos(t),y:rMath.sin(t)}),T=(t,e,r,s,o)=>{const h=[{x:0,y:0},{x:s,y:o},{x:s,y:-o}].map(l=>A(l,t,{x:0,y:0})).map(l=>({x:l.x+e,y:l.y+r})),c=`M ${h[0].x} ${h[0].y}`,a=`L ${h[1].x} ${h[1].y}`,d=`L ${h[2].x} ${h[2].y}`;return`${c} ${a} ${d}`},X=(t,e)=>{const r=[];if(t.length>0&&r.push(`M ${t[0].x} ${t[0].y}`),t.length===2&&r.push(`L ${t[1].x} ${t[1].y}`),t.length>2){const s=t.length-1;let o=0,i=0,h=0;t.forEach((c,a)=>{let d=0,l=0,u=0;const w=a>0,v=a<s,p=w&&v;if(w&&(d=-o,l=-i,u=h),v){const M=t[a+1];o=M.x-c.x,i=M.y-c.y,h=Math.sqrt(oo+ii)}const m=Math.min((p?e:0)/h,a<s-1?.5:1),E=p?{x:c.x+om,y:c.y+im}:c,C=Math.min((p?e:0)/u,a>1?.5:1),S=p?{x:c.x+dC,y:c.y+lC}:c;a>0&&r.push(`L ${S.x} ${S.y}`),p&&r.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${E.x} ${E.y}`)})}return r.join(" ")},V=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.pointerEvents="none",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.overflow="visible",t},O=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},R=(t,e)=>{const r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("stroke",t),r.setAttribute("stroke-width",`${e}`),r.setAttribute("fill","none"),r},L=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",t),e};class Z{constructor(e,r,s,o,i,h,c){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=A({x:this.arrowLength,y:0},u,{x:0,y:0}),p=A({x:s-this.arrowLength,y:o},w,{x:s,y:o}),x={x:v.x+u.xthis.curvature,y:v.y+u.ythis.curvature},m={x:p.x-w.xthis.curvature,y:p.y-w.ythis.curvature},E=`M ${v.x} ${v.y} C ${x.x} ${x.y}, ${m.x} ${m.y}, ${p.x} ${p.y}`,y=this.sourceArrow?"":`M 0 0 L ${v.x} ${v.y} `,C=this.targetArrow?"":` M ${p.x} ${p.y} L ${s} ${o}`,S=`${y}${E}${C}`;if(this.line.setAttribute("d",S),this.sourceArrow){const M=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",M)}if(this.targetArrow){const M=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",M)}}}class q{constructor(e,r,s,o,i,h,c,a){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=this.sourceArrow?A({x:this.arrowLength,y:0},u,{x:0,y:0}):{x:0,y:0},p=this.targetArrow?A({x:s-this.arrowLength,y:o},w,{x:s,y:o}):{x:s,y:o},x=this.arrowLength+this.arrowOffset,m=A({x,y:0},u,{x:0,y:0}),E=A({x:s-x,y:o},w,{x:s,y:o}),y=X([v,m,E,p],this.roundness);if(this.line.setAttribute("d",y),this.sourceArrow){const C=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",C)}if(this.targetArrow){const C=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",C)}}}class ee{constructor(e,r,s,o,i,h,c,a){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=this.sourceArrow?A({x:this.arrowLength,y:0},u,{x:0,y:0}):{x:0,y:0},p=this.targetArrow?A({x:s-this.arrowLength,y:o},w,{x:s,y:o}):{x:s,y:o},x=this.arrowLength+this.arrowOffset,m=x-this.roundness,E=A({x:m,y:0},u,{x:0,y:0}),y=A({x:s-m,y:o},w,{x:s,y:o}),C=Math.max((E.x+y.x)/2,x),S=o/2,M={x:d>0?C:-x,y:E.y},Y={x:M.x,y:S},W={x:d>0?s-C:s+x,y:y.y},k={x:W.x,y:S},B=X([v,E,M,Y,k,W,y,p],this.roundness);if(this.line.setAttribute("d",B),this.sourceArrow){const F=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",F)}if(this.targetArrow){const F=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",F)}}}class te{constructor(e,r,s,o,i,h,c,a){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=this.sourceArrow?A({x:this.arrowLength,y:0},u,{x:0,y:0}):{x:0,y:0},p=this.targetArrow?A({x:s-this.arrowLength,y:o},w,{x:s,y:o}):{x:s,y:o},x=this.arrowLength+this.arrowOffset,m=x-this.roundness,E=A({x:m,y:0},u,{x:0,y:0}),y=A({x:s-m,y:o},w,{x:s,y:o}),C=Math.max((E.y+y.y)/2,x),S=s/2,M={x:E.x,y:l>0?C:-x},Y={x:S,y:M.y},W={x:y.x,y:l>0?o-C:o+x},k={x:S,y:W.y},B=X([v,E,M,Y,k,W,y,p],this.roundness);if(this.line.setAttribute("d",B),this.sourceArrow){const F=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",F)}if(this.targetArrow){const F=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",F)}}}class re{constructor(e,r,s,o,i,h,c){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"arrow",null);this.arrowLength=s,this.arrowWidth=o,this.radius=h,this.smallRadius=c,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),i&&(this.arrow=L(e),this.group.appendChild(this.arrow)),this.svg.style.width="0px",this.svg.style.height="0px"}update(e,r,s,o,i){this.svg.style.transform=`translate(${e}px, ${r}px)`;const h=b(i.direction,1,1),c=this.smallRadius,a=this.radius,d=Math.sqrt(cc+aa),l=c+a,u=this.arrowLength+d(1-a/l),w=ca/l,p=[{x:this.arrowLength,y:0},{x:u,y:w},{x:u,y:-w}].map(y=>A(y,h,{x:0,y:0})),x=[`M ${p[0].x} ${p[0].y}`,`A ${c} ${c} 0 0 1 ${p[1].x} ${p[1].y}`,`A ${a} ${a} 0 1 0 ${p[2].x} ${p[2].y}`,`A ${c} ${c} 0 0 1 ${p[0].x} ${p[0].y}`].join(" "),m=`M 0 0 L ${p[0].x} ${p[0].y} `,E=`${this.arrow!==null?"":m}${x}`;if(this.line.setAttribute("d",E),this.arrow){const y=T(h,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",y)}}}class I{constructor(e,r,s,o,i,h,c,a){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"arrow",null);n(this,"roundness");n(this,"linePoints");this.arrowLength=s,this.arrowWidth=o,this.side=h,this.minPortOffset=c,this.roundness=Math.min(a,this.minPortOffset,this.side/2),this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),i&&(this.arrow=L(e),this.group.appendChild(this.arrow)),this.svg.style.width="0px",this.svg.style.height="0px";const d=this.minPortOffset,l=this.side,u=this.arrowLength+d,w=this.roundness,v=u+2l;console.log(w),this.linePoints=[{x:this.arrowLength,y:0},{x:u,y:0},{x:u,y:this.side},{x:v,y:this.side},{x:v,y:-this.side},{x:u,y:-this.side},{x:u,y:0},{x:this.arrowLength,y:0}]}update(e,r,s,o,i){this.svg.style.transform=`translate(${e}px, ${r}px)`;const h=b(i.direction,1,1),c=this.linePoints.map(l=>A(l,h,{x:0,y:0})),a=`M 0 0 L ${c[0].x} ${c[0].y} `,d=`${this.arrow?"":a}${X(c,this.roundness)}`;if(this.line.setAttribute("d",d),this.arrow){const l=T(h,0,0,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",l)}}}class G{constructor(e,r,s,o,i,h,c,a,d,l){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"detourX");n(this,"detourY");this.arrowLength=s,this.arrowWidth=o,this.arrowOffset=i,this.roundness=a,this.detourX=Math.cos(l)d,this.detourY=Math.sin(l)d,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=this.sourceArrow?A({x:this.arrowLength,y:0},u,{x:0,y:0}):{x:0,y:0},p=this.targetArrow?A({x:s-this.arrowLength,y:o},w,{x:s,y:o}):{x:s,y:o},x=this.arrowLength+this.arrowOffset,m=A({x,y:0},u,{x:0,y:0}),E={x:m.x+this.detourX,y:m.y+this.detourY},y=A({x:s-x,y:o},w,{x:s,y:o}),C={x:y.x+this.detourX,y:y.y+this.detourY},S=X([v,m,E,C,y,p],this.roundness);if(this.line.setAttribute("d",S),this.sourceArrow){const M=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",M)}if(this.targetArrow){const M=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",M)}}}var $=(t=>(t.Regular="regular",t.PortCycle="port-cycle",t.NodeCycle="node-cycle",t))($\|\|{});class me{constructor(e,r,s,o,i,h,c,a,d){n(this,"svg",V());n(this,"group",O());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"detourX");n(this,"detourY");this.curvature=s,this.arrowLength=o,this.arrowWidth=i,this.detourX=Math.cos(d)a,this.detourY=Math.sin(d)a,this.svg.appendChild(this.group),this.line=R(e,r),this.group.appendChild(this.line),h&&(this.sourceArrow=L(e),this.group.appendChild(this.sourceArrow)),c&&(this.targetArrow=L(e),this.group.appendChild(this.targetArrow))}update(e,r,s,o,i,h){this.svg.style.width=`${s}px`,this.svg.style.height=`${o}px`,this.svg.style.transform=`translate(${e}px, ${r}px)`;const c=D(i),a=D(h),d=c.x<=a.x?1:-1,l=c.y<=a.y?1:-1;this.group.style.transform=`scale(${d}, ${l})`;const u=b(i.direction,d,l),w=b(h.direction,d,l),v=this.sourceArrow?A({x:this.arrowLength,y:0},u,{x:0,y:0}):{x:0,y:0},p=this.targetArrow?A({x:s-this.arrowLength,y:o},w,{x:s,y:o}):{x:s,y:o},x=this.arrowLength,m=A({x,y:0},u,{x:0,y:0}),E={x:m.x+this.detourX,y:m.y+this.detourY},y=A({x:s-x,y:o},w,{x:s,y:o}),C={x:y.x+this.detourX,y:y.y+this.detourY},S={x:(E.x+C.x)/2,y:(E.y+C.y)/2},M={x:m.x-this.curvatureMath.cos(i.direction),y:m.y-this.curvatureMath.sin(i.direction)},Y={x:y.x+this.curvatureMath.cos(h.direction),y:y.y+this.curvatureMath.sin(h.direction)},W={x:m.x+this.detourX,y:m.y+this.detourY},k={x:y.x+this.detourX,y:y.y+this.detourY},B=[`M ${v.x} ${v.y}`,`L ${m.x} ${m.y}`,`C ${M.x} ${M.y} ${W.x} ${W.y} ${S.x} ${S.y}`,`C ${k.x} ${k.y} ${Y.x} ${Y.y} ${y.x} ${y.y}`,`L ${p.x} ${p.y}`].join(" ");if(this.line.setAttribute("d",B),this.sourceArrow){const F=T(u,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",F)}if(this.targetArrow){const F=T(w,s,o,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",F)}}}const se=t=>e=>e===$.PortCycle?new re(t.color,t.width,t.arrowLength,t.arrowWidth,t.hasSourceArrow\|\|t.hasTargetArrow,t.cycleRadius,t.smallCycleRadius):e===$.NodeCycle?new me(t.color,t.width,t.curvature,t.arrowLength,t.arrowWidth,t.hasSourceArrow,t.hasTargetArrow,t.detourDistance,t.detourDirection):new Z(t.color,t.width,t.curvature,t.arrowLength,t.arrowWidth,t.hasSourceArrow,t.hasTargetArrow),oe=t=>e=>e===$.PortCycle?new I(t.color,t.width,t.arrowLength,t.arrowWidth,t.hasSourceArrow\|\|t.hasTargetArrow,t.cycleSquareSide,t.arrowOffset,t.roundness):e===$.NodeCycle?new G(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness,t.detourDistance,t.detourDirection):new q(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness),ie=t=>e=>e===$.PortCycle?new I(t.color,t.width,t.arrowLength,t.arrowWidth,t.hasSourceArrow\|\|t.hasTargetArrow,t.cycleSquareSide,t.arrowOffset,t.roundness):e===$.NodeCycle?new G(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness,t.detourDistance,t.detourDirection):new ee(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness),ne=t=>e=>e===$.PortCycle?new I(t.color,t.width,t.arrowLength,t.arrowWidth,t.hasSourceArrow\|\|t.hasTargetArrow,t.cycleSquareSide,t.arrowOffset,t.roundness):e===$.NodeCycle?new G(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness,t.detourDistance,t.detourDirection):new te(t.color,t.width,t.arrowLength,t.arrowWidth,t.arrowOffset,t.hasSourceArrow,t.hasTargetArrow,t.roundness);class j{constructor(e){n(this,"counter",0);this.checkExists=e}create(e){if(e!==void 0)return e;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class P extends Error{constructor(){super(...arguments);n(this,"name","HtmlGraphError")}}class ve{constructor(e,r,s,o,i,h,c,a){n(this,"nodeIdGenerator",new j(e=>this.graphStore.getNode(e)!==void 0));n(this,"portIdGenerator",new j(e=>this.graphStore.getPort(e)!==void 0));n(this,"edgeIdGenerator",new j(e=>this.graphStore.getEdge(e)!==void 0));this.graphStore=e,this.htmlController=r,this.viewportTransformer=s,this.defaultNodesCenterFn=o,this.defaultPortsCenterFn=i,this.defaultPortsDirection=h,this.defaultNodesPriorityFn=c,this.defaultEdgesPriorityFn=a}addNode(e,r,s,o,i,h,c){if(e=this.nodeIdGenerator.create(e),this.graphStore.getNode(e)!==void 0)throw new P("failed to add node with existing id");this.graphStore.addNode(e,r,s,o,h??this.defaultNodesCenterFn,c??this.defaultNodesPriorityFn()),this.htmlController.attachNode(e),Array.from(i??[]).forEach(a=>{this.markPort(a.id,a.element,e,a.centerFn??this.defaultPortsCenterFn,a.direction??this.defaultPortsDirection)})}updateNode(e,r,s,o,i){const h=this.graphStore.getNode(e);if(h===void 0)throw new P("failed to update nonexisting node");h.x=r??h.x,h.y=s??h.y,h.centerFn=i??h.centerFn,this.htmlController.updateNodeCoordinates(e),o!==void 0&&(h.priority=o,this.htmlController.updateNodePriority(e))}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new P("failed to remove nonexisting node");(this.graphStore.getNodePortIds(e)??[]).forEach(r=>{this.unmarkPort(r)}),this.htmlController.detachNode(e),this.graphStore.removeNode(e)}markPort(e,r,s,o,i){if(e=this.portIdGenerator.create(e),this.graphStore.getNode(s)===void 0)throw new P("failed to set port on nonexisting node");if(this.graphStore.getPort(e)!==void 0)throw new P("failed to add port with existing id");this.graphStore.addPort(e,r,s,o??this.defaultPortsCenterFn,i??this.defaultPortsDirection)}updatePort(e,r,s){const o=this.graphStore.getPort(e);if(o===void 0)throw new P("failed to unset nonexisting port");o.direction=r??o.direction,o.centerFn=s??o.centerFn,this.htmlController.updatePortEdges(e)}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new P("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(e).forEach(r=>{this.removeEdge(r)}),this.graphStore.removePort(e)}addEdge(e,r,s,o,i){if(e=this.edgeIdGenerator.create(e),this.graphStore.getPort(r)===void 0)throw new P("failed to add edge from nonexisting port");if(this.graphStore.getPort(s)===void 0)throw new P("failed to add edge to nonexisting port");if(this.graphStore.getEdge(e)!==void 0)throw new P("failed to add edge with existing id");const h=this.resolveEdgeType(r,s);this.graphStore.addEdge(e,r,s,o(h),i??this.defaultEdgesPriorityFn()),this.htmlController.attachEdge(e)}updateEdge(e,r,s){const o=this.graphStore.getEdge(e);if(o===void 0)throw new P("failed to update nonexisting edge");if(r!==void 0){const i=this.resolveEdgeType(o.from,o.to);o.shape=r(i),this.htmlController.updateEdgeShape(e)}s!==void 0&&(o.priority=s,this.htmlController.updateEdgePriority(e))}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new P("failed to remove nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.removeEdge(e)}patchViewportMatrix(e,r,s){this.viewportTransformer.patchViewportMatrix(e,r,s),this.htmlController.applyTransform()}patchContentMatrix(e,r,s){this.viewportTransformer.patchContentMatrix(e,r,s),this.htmlController.applyTransform()}attach(e){this.htmlController.attach(e)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.htmlController.destroy()}resolveEdgeType(e,r){if(e===r)return $.PortCycle;const s=this.graphStore.getPortNodeId(e),o=this.graphStore.getPortNodeId(r);return s===o?$.NodeCycle:$.Regular}}const fe=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},xe=()=>{const t=document.createElement("canvas");return t.style.position="absolute",t.style.inset="0",t},Ee=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t},Ce=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden",t};class Ae{constructor(){n(this,"keyMap",new Map);n(this,"valueMap",new Map)}set(e,r){this.keyMap.set(e,r),this.valueMap.set(r,e)}getByKey(e){return this.keyMap.get(e)}getByValue(e){return this.valueMap.get(e)}deleteByKey(e){const r=this.keyMap.get(e);r!==void 0&&this.valueMap.delete(r),this.keyMap.delete(e)}deleteByValue(e){const r=this.valueMap.get(e);r!==void 0&&this.keyMap.delete(r),this.valueMap.delete(e)}forEach(e){this.keyMap.forEach((r,s)=>{e(r,s)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class Se{constructor(e,r,s,o){n(this,"canvasWrapper",null);n(this,"host",fe());n(this,"canvas",xe());n(this,"container",Ee());n(this,"canvasCtx");n(this,"canvasResizeObserver");n(this,"nodesResizeObserver");n(this,"nodeElementToIdMap",new Map);n(this,"nodeIdToWrapperElementMap",new Ae);n(this,"edgeIdToElementMap",new Map);this.graphStore=e,this.viewportTransformer=r,this.publicViewportTransformer=s,this.backgroundDrawingFn=o;const i=this.canvas.getContext("2d");if(i===null)throw new P("unable to get canvas context");this.canvasCtx=i,this.host.appendChild(this.canvas),this.host.appendChild(this.container),this.canvasResizeObserver=this.createHostResizeObserver(),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){this.edgeIdToElementMap.forEach((e,r)=>{this.detachEdge(r)}),this.nodeIdToWrapperElementMap.forEach((e,r)=>{this.detachNode(r)})}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host),this.canvasResizeObserver.observe(this.canvasWrapper)}detach(){this.canvasWrapper!==null&&(this.canvasResizeObserver.unobserve(this.canvasWrapper),this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}destroy(){this.canvasResizeObserver.disconnect(),this.nodesResizeObserver.disconnect(),this.host.removeChild(this.canvas),this.host.removeChild(this.container),this.clear(),this.detach()}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const e=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.dx}, ${e.dy})`}attachNode(e){const r=this.graphStore.getNode(e),s=Ce();s.appendChild(r.element),this.container.appendChild(s),this.nodeElementToIdMap.set(r.element,e),this.nodeIdToWrapperElementMap.set(e,s),this.updateNodeCoords(e),this.updateNodePriority(e),this.nodesResizeObserver.observe(s),s.style.visibility="visible"}detachNode(e){const r=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);this.nodesResizeObserver.unobserve(s),s.removeChild(r.element),this.container.removeChild(s),this.nodeElementToIdMap.delete(r.element),this.nodeIdToWrapperElementMap.deleteByKey(e)}attachEdge(e){const r=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,r.shape.svg),this.container.appendChild(r.shape.svg),this.updateEdgeCoords(e),this.updateEdgePriority(e)}detachEdge(e){const r=this.graphStore.getEdge(e);this.container.removeChild(r.shape.svg),this.edgeIdToElementMap.delete(e)}updateNodeCoordinates(e){const r=this.graphStore.getNodeAdjacentEdgeIds(e);this.updateNodeCoords(e),r.forEach(s=>{this.updateEdgeCoords(s)})}updateNodePriority(e){const r=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.getByKey(e);s.style.zIndex=`${r.priority}`}updateEdgeShape(e){const r=this.edgeIdToElementMap.get(e);this.container.removeChild(r);const s=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,s.shape.svg),this.container.appendChild(s.shape.svg),this.updateEdgeCoords(e),this.updateEdgePriority(e)}updateEdgePriority(e){const r=this.graphStore.getEdge(e);r.shape.svg.style.zIndex=`${r.priority}`}updatePortEdges(e){this.graphStore.getPortAdjacentEdgeIds(e).forEach(s=>{this.updateEdgeCoords(s)})}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(e=>{e.forEach(r=>{const s=r.target,o=this.nodeIdToWrapperElementMap.getByValue(s);this.updateNodeCoords(o),this.graphStore.getNodeAdjacentEdgeIds(o).forEach(h=>{this.updateEdgeCoords(h)})})})}updateCanvasDimensions(){const{width:e,height:r}=this.host.getBoundingClientRect();this.canvas.width=e,this.canvas.height=r}updateNodeCoords(e){const r=this.nodeIdToWrapperElementMap.getByKey(e),{width:s,height:o}=r.getBoundingClientRect(),i=this.viewportTransformer.getViewportMatrix().scale,h=this.graphStore.getNode(e),{x:c,y:a}=h.centerFn(s,o),d=h.x-ic,l=h.y-ia;r.style.transform=`matrix(1, 0, 0, 1, ${d}, ${l})`}updateEdgeCoords(e){const r=this.graphStore.getEdge(e),s=this.graphStore.getPort(r.from),o=this.graphStore.getPort(r.to),i=s.element.getBoundingClientRect(),h=o.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),a=this.viewportTransformer.getViewportMatrix(),d=a.scale(i.left-c.left)+a.dx,l=a.scale(i.top-c.top)+a.dy,u=a.scale(h.left-c.left)+a.dx,w=a.scale(h.top-c.top)+a.dy,{x:v,y:p}=s.centerFn(i.widtha.scale,i.heighta.scale),{x,y:m}=o.centerFn(h.widtha.scale,h.heighta.scale),E=v+d,y=p+l,C=x+u,S=m+w,M=Math.min(E,C),Y=Math.min(y,S),W=Math.abs(C-E),k=Math.abs(S-y);r.shape.update(M,Y,W,k,s,o)}}class Me{constructor(e,r,s,o,i,h){n(this,"publicViewportTransformer");n(this,"publicGraphStore");n(this,"canvasController");const c=new ge,a=new pe;this.publicGraphStore=new ye(a),this.publicViewportTransformer=new we(c);const d=new Se(a,c,this.publicViewportTransformer,e);this.canvasController=new ve(a,d,c,r,s,o,i,h)}}const ae=(t,e)=>({x:t/2,y:e/2}),Pe=()=>()=>{},Ne=(t,e,r,s,o,i,h)=>{t.clearRect(0,0,t.canvas.width,t.canvas.height),t.fillStyle=i,t.fillRect(0,0,t.canvas.width,t.canvas.height);const c=e.getContentMatrix(),a=sc.scale,d=t.canvas.width/a,l=t.canvas.height/a;if(dl>h)return;const u=c.dx-Math.floor(c.dx/a)a,w=c.dy-Math.floor(c.dy/a)a,v=oc.scale,p=2Math.PI,x=u-a,m=w-a,E=t.canvas.width+u,y=t.canvas.height+w;t.fillStyle=r;for(let C=x;C<=E;C+=a)for(let S=m;S<=y;S+=a)t.beginPath(),t.arc(C,S,v,0,p),t.closePath(),t.fill()},be=(t,e,r,s,o)=>(i,h)=>{Ne(i,h,t,e,r,s,o)},Te=t=>{switch(t==null?void 0:t.type){case"custom":return t.drawingFn;case"dots":return be(t.dotColor??"#d8d8d8",t.dotGap??25,t.dotRadius??1.5,t.color??"#ffffff",t.limit??1e4);default:return Pe()}},g={edgeColor:"#5c5c5c",edgeWidth:1,edgeArrowLength:15,edgeArrowWidth:4,edgeArrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleSize:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,smallCycleSize:15,curvature:90},K=t=>{switch(t==null?void 0:t.type){case"custom":return t.factory;case"straight":return oe({color:t.color??g.edgeColor,width:t.width??g.edgeWidth,arrowLength:t.arrowLength??g.edgeArrowLength,arrowWidth:t.arrowWidth??g.edgeArrowWidth,arrowOffset:t.arrowOffset??g.edgeArrowOffset,hasSourceArrow:t.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:t.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:t.cycleSquareSide??g.cycleSize,roundness:t.roundness??g.roundness,detourDistance:t.detourDistance??g.detourDistance,detourDirection:t.detourDirection??g.detourDirection});case"horizontal":return ie({color:t.color??g.edgeColor,width:t.width??g.edgeWidth,arrowLength:t.arrowLength??g.edgeArrowLength,arrowWidth:t.arrowWidth??g.edgeArrowWidth,arrowOffset:t.arrowOffset??g.edgeArrowOffset,hasSourceArrow:t.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:t.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:t.cycleSquareSide??g.cycleSize,roundness:t.roundness??g.roundness,detourDistance:t.detourDistance??g.detourDistance,detourDirection:t.detourDirection??g.detourDirection});case"vertical":return ne({color:t.color??g.edgeColor,width:t.width??g.edgeWidth,arrowLength:t.arrowLength??g.edgeArrowLength,arrowWidth:t.arrowWidth??g.edgeArrowWidth,arrowOffset:t.arrowOffset??g.edgeArrowOffset,hasSourceArrow:t.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:t.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:t.cycleSquareSide??g.cycleSize,roundness:t.roundness??g.roundness,detourDistance:t.detourDistance??g.detourDistance,detourDirection:t.detourDirection??g.detourDirection});default:return se({color:t.color??g.edgeColor,width:t.width??g.edgeWidth,arrowLength:t.arrowLength??g.edgeArrowLength,arrowWidth:t.arrowWidth??g.edgeArrowWidth,hasSourceArrow:t.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:t.hasTargetArrow??g.hasTargetArrow,cycleRadius:t.cycleRadius??g.cycleSize,detourDistance:t.detourDistance??g.detourDistance,detourDirection:t.detourDirection??g.detourDirection,smallCycleRadius:t.smallCycleRadius??g.smallCycleSize,curvature:t.curvature??g.curvature})}},J=t=>()=>t,he=J(0),Q=()=>{let t=0;return()=>t++},Le=(t,e)=>{const r=[he,he];t==="incremental"&&(r[0]=Q()),e==="incremental"&&(r[1]=Q());const s=Q();return t==="shared-incremental"&&(r[0]=s),e==="shared-incremental"&&(r[1]=s),typeof t=="number"&&(r[0]=J(t)),typeof e=="number"&&(r[1]=J(e)),typeof t=="function"&&(r[0]=t),typeof e=="function"&&(r[1]=e),r},$e=t=>{var s,o,i,h,c,a;const[e,r]=Le((s=t.nodes)==null?void 0:s.priority,(o=t.edges)==null?void 0:o.priority);return{background:{drawingFn:Te(t.background??{type:"none"})},nodes:{centerFn:((i=t.nodes)==null?void 0:i.centerFn)??ae,priorityFn:e},ports:{centerFn:((h=t.ports)==null?void 0:h.centerFn)??ae,direction:((c=t.ports)==null?void 0:c.direction)??0},edges:{shapeFactory:K(((a=t.edges)==null?void 0:a.shape)??{}),priorityFn:r}}};class ce{constructor(e){n(this,"transformation");n(this,"model");n(this,"di");n(this,"edgeShapeFactory");this.apiOptions=e;const r=$e(this.apiOptions??{});this.di=new Me(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(e){return this.di.canvasController.addNode(e.id,e.element,e.x,e.y,e.ports,e.centerFn,e.priority),this}updateNode(e,r){return this.di.canvasController.updateNode(e,r.x,r.y,r.priority,r.centerFn),this}removeNode(e){return this.di.canvasController.removeNode(e),this}markPort(e){return this.di.canvasController.markPort(e.id,e.element,e.nodeId,e.centerFn,e.direction),this}updatePort(e,r){return this.di.canvasController.updatePort(e,r.direction,r.centerFn),this}unmarkPort(e){return this.di.canvasController.unmarkPort(e),this}addEdge(e){const r=e.shape!==void 0?K(e.shape):this.edgeShapeFactory;return this.di.canvasController.addEdge(e.id,e.from,e.to,r,e.priority),this}updateEdge(e,r){const s=r.shape!==void 0?K(r.shape):void 0;return this.di.canvasController.updateEdge(e,s,r.priority),this}removeEdge(e){return this.di.canvasController.removeEdge(e),this}patchViewportMatrix(e){return this.di.canvasController.patchViewportMatrix(e.scale??null,e.dx??null,e.dy??null),this}patchContentMatrix(e){return this.di.canvasController.patchContentMatrix(e.scale??null,e.dx??null,e.dy??null),this}clear(){return this.di.canvasController.clear(),this}attach(e){return this.di.canvasController.attach(e),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}const H=(t,e,r)=>{const{x:s,y:o,width:i,height:h}=t.getBoundingClientRect();return e>=s&&e<s+i&&r>=o&&r<=o+h},U=(t,e,r)=>e>=0&&e<t.innerWidth&&r>=0&&r<=t.innerHeight,_=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")};class de{constructor(e,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 j(e=>this.nodes.has(e)));n(this,"element",null);n(this,"onCanvasMouseUp",()=>{this.cancelMouseDrag()});n(this,"onCanvasMouseMove",e=>{if(this.element!==null&&(!H(this.element,e.clientX,e.clientY)\|\|!U(this.window,e.clientX,e.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});n(this,"onCanvasTouchStart",e=>{this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]});n(this,"onCanvasTouchMove",e=>{if(e.touches.length===1){const r=e.touches[0];if(this.element!==null&&(!H(this.element,r.clientX,r.clientY)\|\|!U(this.window,r.clientX,r.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){e.stopImmediatePropagation();const s=r.clientX-this.previousTouchCoords[0],o=r.clientY-this.previousTouchCoords[1];this.dragNode(this.grabbedNodeId,s,o),this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]}}});n(this,"onCanvasTouchEnd",e=>{e.touches.length>0?this.previousTouchCoords=[e.touches[0].clientX,e.touches[0].clientY]:this.cancelTouchDrag()});n(this,"previousTouchCoords",null);n(this,"freezePriority");n(this,"window",window);n(this,"dragCursor");var i,h;this.canvas=e,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=((h=r==null?void 0:r.events)==null?void 0:h.onBeforeNodeDrag)??o,this.freezePriority=(r==null?void 0:r.grabPriorityStrategy)==="freeze",this.dragCursor=(r==null?void 0:r.dragCursor)!==void 0?r.dragCursor:"grab"}addNode(e){const r=this.nodeIdGenerator.create(e.id);this.canvas.addNode({...e,id:r}),this.updateMaxNodePriority(r);const s=i=>{if(this.element===null)return;const h=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:e.element,x:h.x,y:h.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=r,_(this.element,this.dragCursor),this.moveNodeOnTop(r),this.window.addEventListener("mouseup",this.onCanvasMouseUp),this.window.addEventListener("mousemove",this.onCanvasMouseMove))},o=i=>{const h=this.model.getNode(r);this.onBeforeNodeDrag({nodeId:r,element:e.element,x:h.x,y:h.y})&&i.touches.length===1&&(this.grabbedNodeId=r,this.moveNodeOnTop(r),this.window.addEventListener("touchmove",this.onCanvasTouchMove),this.window.addEventListener("touchend",this.onCanvasTouchEnd),this.window.addEventListener("touchcancel",this.onCanvasTouchEnd))};return this.nodes.set(r,{element:e.element,onMouseDown:s,onTouchStart:o}),e.element.addEventListener("mousedown",s),e.element.addEventListener("touchstart",o),this}updateNode(e,r){return this.canvas.updateNode(e,r),this.updateMaxNodePriority(e),this}removeNode(e){const r=this.nodes.get(e);return r!==void 0&&(r.element.removeEventListener("mousedown",r.onMouseDown),r.element.removeEventListener("touchstart",r.onTouchStart)),this.canvas.removeNode(e),this.nodes.delete(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,r){return this.canvas.updatePort(e,r),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,r){return this.canvas.updateEdge(e,r),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}attach(e){return this.detach(),this.element=e,this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.canvas.destroy()}dragNode(e,r,s){const o=this.model.getNode(e);if(o===null)throw new P("failed to drag nonexisting node");const i=this.canvas.transformation.getContentMatrix(),h=i.scaleo.x+i.dx,c=i.scaleo.y+i.dy,a=h+r,d=c+s,l=this.canvas.transformation.getViewportMatrix(),u=l.scalea+l.dx,w=l.scaled+l.dy;this.canvas.updateNode(e,{x:u,y:w}),this.onNodeDrag({nodeId:e,element:o.element,x:o.x,y:o.y})}updateMaxNodePriority(e){const r=this.model.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,r)}moveNodeOnTop(e){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const r=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(e).forEach(o=>{this.updateEdge(o,{priority:r})})}cancelMouseDrag(){this.grabbedNodeId=null,this.element!==null&&_(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onCanvasMouseUp),this.window.removeEventListener("mousemove",this.onCanvasMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null,this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onCanvasTouchMove),this.window.removeEventListener("touchend",this.onCanvasTouchEnd),this.window.removeEventListener("touchcancel",this.onCanvasTouchEnd)}}const De=()=>{},Fe=(t,e)=>e,We=(t,e)=>{const r=e!==null?1/e:null,s=t!==null?1/t:null;return(o,i)=>s!==null&&i.scale>s&&i.scale>o.scale\|\|r!==null&&i.scale<r&&i.scale<o.scale?o:i},Ve=(t,e,r,s)=>(o,i,h,c)=>{let a=i.dx,d=i.dy;t!==null&&a<t&&a<o.dx&&(a=o.dx);const l=ho.scale;e!==null&&a>e-l&&a>o.dx&&(a=o.dx),r!==null&&d<r&&d<o.dy&&(d=o.dy);const u=co.scale;return s!==null&&d>s-u&&d>o.dy&&(d=o.dy),{scale:i.scale,dx:a,dy:d}},le=t=>{switch(t.type){case"scale-limit":return We(t.minContentScale??null,t.maxContentScale??null);case"shift-limit":return Ve(t.minX??null,t.maxX??null,t.minY??null,t.maxY??null);default:return t.preprocessorFn}},Oe=t=>(e,r,s,o)=>t.reduce((i,h)=>h(e,i,s,o),r);class ue{constructor(e,r){n(this,"model");n(this,"transformation");n(this,"element",null);n(this,"prevTouches",null);n(this,"onTransformFinished");n(this,"transformPreprocessor");n(this,"isScalable");n(this,"isShiftable");n(this,"wheelSensitivity");n(this,"window",window);n(this,"onMouseDown",()=>{this.element!==null&&(_(this.element,this.shiftCursor),this.window.addEventListener("mousemove",this.onMouseMove),this.window.addEventListener("mouseup",this.onMouseUp))});n(this,"onMouseMove",e=>{if(!this.isShiftable\|\|this.element===null)return;if(!H(this.element,e.clientX,e.clientY)\|\|!U(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const r=-e.movementX,s=-e.movementY;this.moveViewport(r,s)});n(this,"onMouseUp",()=>{this.stopMouseDrag()});n(this,"onWheelScroll",e=>{if(this.element===null\|\|this.isScalable===!1)return;e.preventDefault();const{left:r,top:s}=this.element.getBoundingClientRect(),o=e.clientX-r,i=e.clientY-s,c=1/(e.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity);this.scaleViewport(c,o,i)});n(this,"onTouchStart",e=>{this.prevTouches=this.getAverageTouch(e),this.window.addEventListener("touchmove",this.onTouchMove),this.window.addEventListener("touchend",this.onTouchEnd),this.window.addEventListener("touchcancel",this.onTouchEnd)});n(this,"onTouchMove",e=>{if(this.prevTouches===null\|\|!this.isShiftable\|\|this.element===null)return;const r=this.getAverageTouch(e);if(!r.touches.every(o=>H(this.element,o[0],o[1])&&U(this.window,o[0],o[1]))){this.stopTouchDrag();return}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:o,top:i}=this.element.getBoundingClientRect(),h=this.prevTouches.x-o,c=this.prevTouches.y-i,d=1/(r.scale/this.prevTouches.scale);this.scaleViewport(d,h,c)}this.prevTouches=r});n(this,"onTouchEnd",e=>{e.touches.length>0?this.prevTouches=this.getAverageTouch(e):this.stopTouchDrag()});n(this,"observer",new ResizeObserver(()=>{if(this.element!==null){const e=this.canvas.transformation.getViewportMatrix(),{width:r,height:s}=this.element.getBoundingClientRect(),o=this.transformPreprocessor(e,e,r,s);this.canvas.patchViewportMatrix(o),this.onTransformFinished(o)}}));n(this,"shiftCursor");var i,h,c,a,d,l,u,w;this.canvas=e,this.options=r,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((h=(i=this.options)==null?void 0:i.scale)==null?void 0:h.enabled)!==!1,this.isShiftable=((a=(c=this.options)==null?void 0:c.shift)==null?void 0:a.enabled)!==!1;const s=(l=(d=this.options)==null?void 0:d.scale)==null?void 0:l.wheelSensitivity;this.wheelSensitivity=s!==void 0?s:1.2,this.onTransformFinished=((u=r==null?void 0:r.events)==null?void 0:u.onTransformFinished)??De;const o=r==null?void 0:r.transformPreprocessor;o!==void 0?Array.isArray(o)?this.transformPreprocessor=Oe(o.map(v=>le(v))):this.transformPreprocessor=le(o):this.transformPreprocessor=Fe,this.shiftCursor=((w=r==null?void 0:r.shift)==null?void 0:w.cursor)!==void 0?r.shift.cursor:"grab"}addNode(e){return this.canvas.addNode(e),this}updateNode(e,r){return this.canvas.updateNode(e,r),this}removeNode(e){return this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePort(e,r){return this.canvas.updatePort(e,r),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,r){return this.canvas.updateEdge(e,r),this}removeEdge(e){return this.canvas.removeEdge(e),this}patchViewportMatrix(e){return this.canvas.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvas.patchContentMatrix(e),this}clear(){return this.canvas.clear(),this}attach(e){return this.detach(),this.element=e,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element=null),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}getAverageTouch(e){const r=[],s=e.touches.length;for(let a=0;a<s;a++)r.push([e.touches[a].clientX,e.touches[a].clientY]);const o=r.reduce((a,d)=>[a[0]+d[0],a[1]+d[1]],[0,0]),i=[o[0]/s,o[1]/s],c=r.map(a=>[a[0]-i[0],a[1]-i[1]]).reduce((a,d)=>a+Math.sqrt(d[0]d[0]+d[1]d[1]),0);return{x:i[0],y:i[1],scale:c/s,touchesCnt:s,touches:r}}moveViewport(e,r){const s=this.transformation.getViewportMatrix(),o={scale:s.scale,dx:s.dx+s.scalee,dy:s.dy+s.scaler};if(this.element!==null){const{width:i,height:h}=this.element.getBoundingClientRect(),c=this.transformPreprocessor(s,o,i,h);this.canvas.patchViewportMatrix(c),this.onTransformFinished(c)}}scaleViewport(e,r,s){if(this.element===null)return;const o=this.canvas.transformation.getViewportMatrix(),i={scale:o.scalee,dx:o.scale(1-e)r+o.dx,dy:o.scale(1-e)s+o.dy},{width:h,height:c}=this.element.getBoundingClientRect(),a=this.transformPreprocessor(o,i,h,c);this.canvas.patchViewportMatrix(a),this.onTransformFinished(a)}stopMouseDrag(){this.element!==null&&_(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onMouseMove),this.window.removeEventListener("mouseup",this.onMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onTouchMove),this.window.removeEventListener("touchend",this.onTouchEnd),this.window.removeEventListener("touchcancel",this.onTouchEnd)}}class Re{constructor(){n(this,"coreOptions");n(this,"dragOptions");n(this,"transformOptions");n(this,"isDraggable",!1);n(this,"isTransformable",!1)}setOptions(e){return this.coreOptions=e,this}setUserDraggableNodes(e){return this.isDraggable=!0,this.dragOptions=e,this}setUserTransformableCanvas(e){return this.isTransformable=!0,this.transformOptions=e,this}build(){let e=new ce(this.coreOptions);return this.isDraggable&&(e=new de(e,this.dragOptions)),this.isTransformable&&(e=new ue(e,this.transformOptions)),e}}f.BezierEdgeShape=Z,f.CanvasCore=ce,f.CycleCircleEdgeShape=re,f.CycleSquareEdgeShape=I,f.DetourStraightEdgeShape=G,f.EdgeType=$,f.HorizontalEdgeShape=ee,f.HtmlGraphBuilder=Re,f.HtmlGraphError=P,f.StraightEdgeShape=q,f.UserDraggableNodesCanvas=de,f.UserTransformableCanvas=ue,f.VerticalEdgeShape=te,f.createBezierEdgeShapeFactory=se,f.createHorizontalEdgeShapeFactory=ie,f.createStraightEdgeShareFactory=oe,f.createVerticalEdgeShapeFactory=ne,Object.defineProperty(f,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

@@ -2,14 +2,14 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov <d.marov94@gmail.com>",
   "private": false,
-  "version": "0.0.56",
+  "version": "0.0.57",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
   "files": [
     "dist"
   ],
-  "homepape": "https://github.com/html-graph/html-graph#readme",
+  "homepape": "https://html-graph.github.io",
   "bugs": {
     "url": "https://github.com/html-graph/html-graph/issues"
   },
@@ -34,12 +34,14 @@
     "lint": "eslint .",
     "fix-lint": "eslint . --fix",
     "build": "tsc --p ./tsconfig-build-library.json && vite build",
+    "build-docs": "tsc && vite build --config ./vite-docs.config.ts",
     "preview": "vite preview",
-    "before-build": "npm run lint && npm run check-formatting",
+    "before-build": "npm run check-formatting && npm run lint && npm run test:ci",
     "release-next-version": "tsx ./scripts/release-next-version.ts",
     "make-deps-graph": "npx depcruise lib --include-only \"^lib\" --output-type dot > ./deps-graph/deps-graph.dot",
     "test": "jest",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "test:ci": "jest --config=./jest-ci.config.ts"
   },
   "engines": {
     "npm": ">=7.0.0",
@@ -51,8 +53,10 @@
     "@types/node": "^22.5.0",
     "dependency-cruiser": "^16.7.0",
     "eslint": "^9.9.1",
+    "glob": "^11.0.1",
     "globals": "^15.9.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.3.3",
     "ts-jest": "^29.2.5",
     "ts-node": "^10.9.2",