@html-graph/html-graph 1.2.0 → 2.0.0

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 (6) hide show
  1. package/README.md +14 -7
  2. package/dist/{main.js → html-graph.js} +1117 -1217
  3. package/dist/html-graph.umd.cjs +1 -0
  4. package/dist/main.d.ts +65 -365
  5. package/package.json +1 -1
  6. package/dist/main.umd.cjs +0 -1
package/dist/main.umd.cjs DELETED
@@ -1 +0,0 @@
1
- (function(E,x){typeof exports=="object"&&typeof module<"u"?x(exports):typeof define=="function"&&define.amd?define(["exports"],x):(E=typeof globalThis<"u"?globalThis:E||self,x(E.HtmlGraph={}))})(this,function(E){"use strict";var Ge=Object.defineProperty;var je=(E,x,y)=>x in E?Ge(E,x,{enumerable:!0,configurable:!0,writable:!0,value:y}):E[x]=y;var i=(E,x,y)=>je(E,typeof x!="symbol"?x+"":x,y);const x=(t,e)=>({x:t/2,y:e/2}),y=(t,e,r)=>({x:e.x*t.x-e.y*t.y+((1-e.x)*r.x+e.y*r.y),y:e.y*t.x+e.x*t.y+((1-e.x)*r.y-e.y*r.x)}),b=(t,e,r)=>({x:e*Math.cos(t),y:r*Math.sin(t)}),u={x:0,y:0},C=(t,e,r,o)=>{const d=[u,{x:r,y:o},{x:r,y:-o}].map(a=>y(a,t,u)).map(a=>({x:a.x+e.x,y:a.y+e.y})),n=`M ${d[0].x} ${d[0].y}`,h=`L ${d[1].x} ${d[1].y}`,c=`L ${d[2].x} ${d[2].y}`;return`${n} ${h} ${c}`},D=(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 o=t.length-1;let s=0,d=0,n=0;t.forEach((h,c)=>{let a=0,l=0,g=0;const f=c>0,A=c<o,v=f&&A;if(f&&(a=-s,l=-d,g=n),A){const W=t[c+1];s=W.x-h.x,d=W.y-h.y,n=Math.sqrt(s*s+d*d)}const N=n!==0?Math.min((v?e:0)/n,c<o-1?.5:1):0,T=v?{x:h.x+s*N,y:h.y+d*N}:h,U=g!==0?Math.min((v?e:0)/g,c>1?.5:1):0,I=v?{x:h.x+a*U,y:h.y+l*U}:h;c>0&&r.push(`L ${I.x} ${I.y}`),v&&r.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${T.x} ${T.y}`)})}return r.join(" ")},R=()=>{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},F=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},B=(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},P=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",t),e},k=(t,e)=>{const r={x:t.x+t.width/2,y:t.y+t.height/2},o={x:e.x+e.width/2,y:e.y+e.height/2},s=Math.min(r.x,o.x),d=Math.min(r.y,o.y),n=Math.abs(o.x-r.x),h=Math.abs(o.y-r.y),c=r.x<=o.x?1:-1,a=r.y<=o.y?1:-1;return{x:s,y:d,width:n,height:h,flipX:c,flipY:a}},we=t=>{const e=y({x:t.arrowLength,y:u.y},t.fromVect,u),r=y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to),o={x:e.x+t.fromVect.x*t.curvature,y:e.y+t.fromVect.y*t.curvature},s={x:r.x-t.toVect.x*t.curvature,y:r.y-t.toVect.y*t.curvature},d=`M ${e.x} ${e.y} C ${o.x} ${o.y}, ${s.x} ${s.y}, ${r.x} ${r.y}`,n=t.hasSourceArrow?"":`M ${u.x} ${u.y} L ${e.x} ${e.y} `,h=t.hasTargetArrow?"":` M ${r.x} ${r.y} L ${t.to.x} ${t.to.y}`;return`${n}${d}${h}`},fe=t=>{const e=t.hasSourceArrow?y({x:t.arrowLength,y:u.y},t.fromVect,u):u,r=t.hasTargetArrow?y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,o=t.arrowLength,s=Math.cos(t.detourDirection)*t.detourDistance,d=Math.sin(t.detourDirection)*t.detourDistance,n=s*t.flipX,h=d*t.flipY,c=y({x:o,y:u.y},t.fromVect,u),a={x:c.x+n,y:c.y+h},l=y({x:t.to.x-o,y:t.to.y},t.toVect,t.to),g={x:l.x+n,y:l.y+h},f={x:(a.x+g.x)/2,y:(a.y+g.y)/2},A={x:c.x+t.curvature*t.fromVect.x,y:c.y+t.curvature*t.fromVect.y},v={x:l.x-t.curvature*t.toVect.x,y:l.y-t.curvature*t.toVect.y},p={x:c.x+n,y:c.y+h},N={x:l.x+n,y:l.y+h};return[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${A.x} ${A.y} ${p.x} ${p.y} ${f.x} ${f.y}`,`C ${N.x} ${N.y} ${v.x} ${v.y} ${l.x} ${l.y}`,`L ${r.x} ${r.y}`].join(" ")},ye=t=>{const e=t.hasSourceArrow?y({x:t.arrowLength,y:u.y},t.fromVect,u):u,r=t.hasTargetArrow?y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,o=t.arrowLength+t.arrowOffset,s=o-t.roundness,d=y({x:s,y:u.y},t.fromVect,u),n=y({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.x+n.x)/2,o),c=t.to.y/2,a={x:t.flipX>0?h:-o,y:d.y},l={x:a.x,y:c},g={x:t.flipX>0?t.to.x-h:t.to.x+o,y:n.y},f={x:g.x,y:c};return D([e,d,a,l,f,g,n,r],t.roundness)},j=t=>{const e=t.hasSourceArrow?y({x:t.arrowLength,y:u.y},t.fromVect,u):u,r=t.hasTargetArrow?y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,o=t.arrowLength+t.arrowOffset,s=y({x:o,y:u.y},t.fromVect,u),d=Math.cos(t.detourDirection)*t.detourDistance,n=Math.sin(t.detourDirection)*t.detourDistance,h=d*t.flipX,c=n*t.flipY,a={x:s.x+h,y:s.y+c},l=y({x:t.to.x-o,y:t.to.y},t.toVect,t.to),g={x:l.x+h,y:l.y+c};return D([e,s,a,g,l,r],t.roundness)},ve=t=>{const e=t.hasSourceArrow?y({x:t.arrowLength,y:u.y},t.fromVect,u):u,r=t.hasTargetArrow?y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,o=t.arrowLength+t.arrowOffset,s=y({x:o,y:u.y},t.fromVect,u),d=y({x:t.to.x-o,y:t.to.y},t.toVect,t.to);return D([e,s,d,r],t.roundness)},Ee=t=>{const e=t.hasSourceArrow?y({x:t.arrowLength,y:u.y},t.fromVect,u):u,r=t.hasTargetArrow?y({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,o=t.arrowLength+t.arrowOffset,s=o-t.roundness,d=y({x:s,y:u.y},t.fromVect,u),n=y({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.y+n.y)/2,o),c=t.to.x/2,a={x:d.x,y:t.flipY>0?h:-o},l={x:c,y:a.y},g={x:n.x,y:t.flipY>0?t.to.y-h:t.to.y+o},f={x:c,y:g.y};return D([e,d,a,l,f,g,n,r],t.roundness)},H=t=>{const e=t.arrowOffset,r=t.side,o=t.arrowLength+e,s=o+2*r,n=[{x:t.arrowLength,y:u.y},{x:o,y:u.y},{x:o,y:t.side},{x:s,y:t.side},{x:s,y:-t.side},{x:o,y:-t.side},{x:o,y:u.y},{x:t.arrowLength,y:u.y}].map(c=>y(c,t.fromVect,u)),h=`M ${u.x} ${u.y} L ${n[0].x} ${n[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":h}${D(n,t.roundness)}`},Ae=t=>{const e=t.smallRadius,r=t.radius,o=Math.sqrt(e*e+r*r),s=e+r,d=t.arrowLength+o*(1-r/s),n=e*r/s,c=[{x:t.arrowLength,y:u.y},{x:d,y:n},{x:d,y:-n}].map(g=>y(g,t.fromVect,u)),a=[`M ${c[0].x} ${c[0].y}`,`A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${r} ${r} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),l=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":l}${a}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class K{constructor(e){i(this,"svg",R());i(this,"group",F());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"curvature");i(this,"portCycleRadius");i(this,"portCycleSmallRadius");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.curvature=(e==null?void 0:e.curvature)??w.curvature,this.portCycleRadius=(e==null?void 0:e.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(e==null?void 0:e.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,o=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=B(r,o),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(e){const{x:r,y:o,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${r}px, ${o}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,A=-this.arrowLength;if(e.from.portId===e.to.portId?(g=Ae({fromVect:c,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,A=this.arrowLength):e.from.nodeId===e.to.nodeId?g=fe({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=we({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=C(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=C(f,l,A,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class _{constructor(e){i(this,"svg",R());i(this,"group",F());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const r=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(r,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const o=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=B(o,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(o),this.group.appendChild(this.targetArrow))}render(e){const{x:r,y:o,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${r}px, ${o}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,A=-this.arrowLength;if(e.from.portId===e.to.portId?(g=H({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,A=this.arrowLength):e.from.nodeId===e.to.nodeId?g=j({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=ye({to:l,fromVect:c,toVect:a,flipX:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=C(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=C(f,l,A,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class J{constructor(e){i(this,"svg",R());i(this,"group",F());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const r=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(r,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const o=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=B(o,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(o),this.group.appendChild(this.targetArrow))}render(e){const{x:r,y:o,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${r}px, ${o}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,A=-this.arrowLength;if(e.from.portId===e.to.portId?(g=H({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,A=this.arrowLength):e.from.nodeId===e.to.nodeId?g=j({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=ve({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=C(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=C(f,l,A,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class Q{constructor(e){i(this,"svg",R());i(this,"group",F());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const r=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(r,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirectionVertical,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const o=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=B(o,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(o),this.group.appendChild(this.targetArrow))}render(e){const{x:r,y:o,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${r}px, ${o}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,A=-this.arrowLength;if(e.from.portId===e.to.portId?(g=H({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,A=this.arrowLength):e.from.nodeId===e.to.nodeId?g=j({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Ee({to:l,fromVect:c,toVect:a,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=C(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=C(f,l,A,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const xe=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new J({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new _({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new Q({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});default:return()=>new K({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},L=t=>()=>t,Y=L(0),V=()=>{let t=0;return()=>t++},Se=(t,e)=>{let r=Y,o=Y;t==="incremental"&&(r=V()),e==="incremental"&&(o=V());const s=V();return t==="shared-incremental"&&(r=s),e==="shared-incremental"&&(o=s),typeof t=="number"&&(r=L(t)),typeof e=="number"&&(o=L(e)),typeof t=="function"&&(r=t),typeof e=="function"&&(o=e),{nodesPriorityFn:r,edgesPriorityFn:o}},me=t=>{var r,o,s,d,n;const e=Se((r=t==null?void 0:t.nodes)==null?void 0:r.priority,(o=t==null?void 0:t.edges)==null?void 0:o.priority);return{nodes:{centerFn:((s=t==null?void 0:t.nodes)==null?void 0:s.centerFn)??x,priorityFn:e.nodesPriorityFn},ports:{direction:((d=t==null?void 0:t.ports)==null?void 0:d.direction)??0},edges:{shapeFactory:xe(((n=t==null?void 0:t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class te{constructor(){i(this,"nodes",new Map);i(this,"ports",new Map);i(this,"nodePorts",new Map);i(this,"portNodeId",new Map);i(this,"edges",new Map);i(this,"incommingEdges",new Map);i(this,"outcommingEdges",new Map);i(this,"cycleEdges",new Map)}addNode(e){this.nodes.set(e.nodeId,{element:e.element,x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority}),this.nodePorts.set(e.nodeId,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){this.ports.set(e.portId,{element:e.element,direction:e.direction}),this.cycleEdges.set(e.portId,new Set),this.incommingEdges.set(e.portId,new Set),this.outcommingEdges.set(e.portId,new Set),this.portNodeId.set(e.portId,e.nodeId),this.nodePorts.get(e.nodeId).set(e.portId,e.element)}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){this.edges.set(e.edgeId,{from:e.from,to:e.to,shape:e.shape,priority:e.priority}),e.from!==e.to?(this.outcommingEdges.get(e.from).add(e.edgeId),this.incommingEdges.get(e.to).add(e.edgeId)):this.cycleEdges.get(e.from).add(e.edgeId)}updateEdgeFrom(e,r){const o=this.edges.get(e);this.removeEdge(e),this.addEdge({edgeId:e,from:r,to:o.to,shape:o.shape,priority:o.priority})}updateEdgeTo(e,r){const o=this.edges.get(e);this.removeEdge(e),this.addEdge({edgeId:e,from:o.from,to:r,shape:o.shape,priority:o.priority})}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){const r=this.edges.get(e),o=r.from,s=r.to;this.cycleEdges.get(o).delete(e),this.cycleEdges.get(s).delete(e),this.incommingEdges.get(o).delete(e),this.incommingEdges.get(s).delete(e),this.outcommingEdges.get(o).delete(e),this.outcommingEdges.get(s).delete(e),this.edges.delete(e)}clear(){this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.nodes.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 o=[];return r.forEach(s=>{o=[...o,...this.getPortIncomingEdgeIds(s)]}),o}getNodeOutcomingEdgeIds(e){const r=Array.from(this.nodePorts.get(e).keys());let o=[];return r.forEach(s=>{o=[...o,...this.getPortOutcomingEdgeIds(s)]}),o}getNodeCycleEdgeIds(e){const r=Array.from(this.nodePorts.get(e).keys());let o=[];return r.forEach(s=>{o=[...o,...this.getPortCycleEdgeIds(s)]}),o}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}}class re{constructor(){i(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(r=>{r(e)})}}const m=()=>{const t=new re;return[t,t]},oe=t=>({scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}),ie={scale:1,x:0,y:0};class ne{constructor(){i(this,"viewportMatrix",ie);i(this,"contentMatrix",ie);i(this,"emitter");i(this,"onAfterUpdate");[this.emitter,this.onAfterUpdate]=m()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=oe(this.viewportMatrix),this.emitter.emit()}patchContentMatrix(e){this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=oe(this.contentMatrix),this.emitter.emit()}}class se{constructor(e){this.transformer=e}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}const Ne=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},pe=()=>{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},Te=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden",t};class Z{constructor(e,r){i(this,"canvasWrapper",null);i(this,"host",Ne());i(this,"container",pe());i(this,"nodeIdToWrapperElementMap",new Map);i(this,"edgeIdToElementMap",new Map);i(this,"applyTransform",()=>{const e=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`});this.graphStore=e,this.viewportTransformer=r,this.host.appendChild(this.container),this.viewportTransformer.onAfterUpdate.subscribe(this.applyTransform)}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}attachNode(e){const r=this.graphStore.getNode(e),o=Te();o.appendChild(r.element),this.container.appendChild(o),this.nodeIdToWrapperElementMap.set(e,o),this.updateNodeCoordinates(e),this.updateNodePriority(e),o.style.visibility="visible"}detachNode(e){const r=this.graphStore.getNode(e),o=this.nodeIdToWrapperElementMap.get(e);o.removeChild(r.element),this.container.removeChild(o),this.nodeIdToWrapperElementMap.delete(e)}attachEdge(e){const r=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,r.shape.svg),this.container.appendChild(r.shape.svg),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const r=this.graphStore.getEdge(e);this.container.removeChild(r.shape.svg),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,r)=>{this.detachEdge(r)}),this.nodeIdToWrapperElementMap.forEach((e,r)=>{this.detachNode(r)})}destroy(){this.clear(),this.detach(),this.viewportTransformer.onAfterUpdate.unsubscribe(this.applyTransform),this.host.removeChild(this.container)}updateNodeCoordinates(e){const r=this.nodeIdToWrapperElementMap.get(e),o=this.graphStore.getNode(e),{width:s,height:d}=o.element.getBoundingClientRect(),n=this.viewportTransformer.getViewportMatrix().scale,h=o.centerFn(s,d),c=o.x-n*h.x,a=o.y-n*h.y;r.style.transform=`translate(${c}px, ${a}px)`}updateNodePriority(e){const r=this.graphStore.getNode(e),o=this.nodeIdToWrapperElementMap.get(e);o.style.zIndex=`${r.priority}`}updateEdgeShape(e){const r=this.edgeIdToElementMap.get(e);this.container.removeChild(r);const o=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,o.shape.svg),this.container.appendChild(o.shape.svg)}renderEdge(e){const r=this.graphStore.getEdge(e),o=this.graphStore.getPort(r.from),s=this.graphStore.getPort(r.to),d=o.element.getBoundingClientRect(),n=s.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),c=this.viewportTransformer.getViewportMatrix(),a={x:c.scale*(d.left-h.left)+c.x,y:c.scale*(d.top-h.top)+c.y},l={x:c.scale*(n.left-h.left)+c.x,y:c.scale*(n.top-h.top)+c.y},g={x:a.x,y:a.y,width:d.width*c.scale,height:d.height*c.scale,direction:o.direction,portId:r.from,nodeId:this.graphStore.getPortNodeId(r.from)},f={x:l.x,y:l.y,width:n.width*c.scale,height:n.height*c.scale,direction:s.direction,portId:r.to,nodeId:this.graphStore.getPortNodeId(r.to)};r.shape.render({from:g,to:f})}updateEdgePriority(e){const r=this.graphStore.getEdge(e);r.shape.svg.style.zIndex=`${r.priority}`}}class be{constructor(e){i(this,"xFrom",1/0);i(this,"yFrom",1/0);i(this,"xTo",1/0);i(this,"yTo",1/0);this.graphStore=e}setRenderingBox(e){this.xFrom=e.x,this.xTo=e.x+e.width,this.yFrom=e.y,this.yTo=e.y+e.height}hasNode(e){const r=this.graphStore.getNode(e);return r.x>=this.xFrom&&r.x<=this.xTo&&r.y>=this.yFrom&&r.y<=this.yTo}hasEdge(e){const r=this.graphStore.getEdge(e),o=this.graphStore.getPortNodeId(r.from),s=this.graphStore.getPortNodeId(r.to),d=this.graphStore.getNode(o),n=this.graphStore.getNode(s),h=Math.min(d.x,n.x),c=Math.max(d.x,n.x),a=Math.min(d.y,n.y),l=Math.max(d.y,n.y);return h<=this.xTo&&c>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class Ce{constructor(e,r,o){i(this,"attachedNodes",new Set);i(this,"attachedEdges",new Set);i(this,"renderingBox");i(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const r=new Set,o=new Set,s=new Set,d=new Set;this.graphStore.getAllNodeIds().forEach(n=>{const h=this.renderingBox.hasNode(n),c=this.attachedNodes.has(n);h&&!c?r.add(n):!h&&c&&o.add(n)}),this.graphStore.getAllEdgeIds().forEach(n=>{const h=this.renderingBox.hasEdge(n),c=this.attachedEdges.has(n),a=this.graphStore.getEdge(n),l=this.graphStore.getPortNodeId(a.from),g=this.graphStore.getPortNodeId(a.to);h&&(this.renderingBox.hasNode(l)||(r.add(l),o.delete(l)),this.renderingBox.hasNode(g)||(r.add(g),o.delete(g))),h&&!c?s.add(n):!h&&c&&d.add(n)}),d.forEach(n=>{this.handleDetachEdge(n)}),o.forEach(n=>{this.handleDetachNode(n)}),r.forEach(n=>{this.handleAttachNode(n)}),s.forEach(n=>{this.handleAttachEdge(n)})});this.htmlView=e,this.graphStore=r,this.trigger=o,this.renderingBox=new be(this.graphStore),this.trigger.subscribe(this.updateViewport)}attach(e){this.htmlView.attach(e)}detach(){this.htmlView.detach()}attachNode(e){this.renderingBox.hasNode(e)&&this.handleAttachNode(e)}detachNode(e){this.attachedNodes.has(e)&&this.handleDetachNode(e)}attachEdge(e){this.renderingBox.hasEdge(e)&&this.attachSingleEdge(e)}detachEdge(e){this.attachedEdges.has(e)&&this.handleDetachEdge(e)}updateNodeCoordinates(e){this.attachedNodes.has(e)?this.htmlView.updateNodeCoordinates(e):this.renderingBox.hasNode(e)&&(this.handleAttachNode(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(r=>{this.attachSingleEdge(r)}))}updateNodePriority(e){this.attachedNodes.has(e)&&this.htmlView.updateNodePriority(e)}updateEdgeShape(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgeShape(e)}renderEdge(e){this.attachedEdges.has(e)&&this.htmlView.renderEdge(e)}updateEdgePriority(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgePriority(e)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachSingleEdge(e){const r=this.graphStore.getEdge(e),o=this.graphStore.getPortNodeId(r.from),s=this.graphStore.getPortNodeId(r.to);this.attachedNodes.has(o)||this.handleAttachNode(o),this.attachedNodes.has(s)||this.handleAttachNode(s),this.handleAttachEdge(e)}handleAttachNode(e){this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class ${constructor(e){i(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 S extends Error{constructor(){super(...arguments);i(this,"name","HtmlGraphError")}}class he{constructor(e,r){i(this,"nodeIdGenerator",new $(e=>this.graphStore.getNode(e)!==void 0));i(this,"portIdGenerator",new $(e=>this.graphStore.getPort(e)!==void 0));i(this,"edgeIdGenerator",new $(e=>this.graphStore.getEdge(e)!==void 0));i(this,"onAfterNodeAdded");i(this,"onAfterNodeAddedEmitter");i(this,"onAfterEdgeAdded");i(this,"onAfterEdgeAddedEmitter");i(this,"onAfterEdgeShapeUpdated");i(this,"onAfterEdgeShapeUpdatedEmitter");i(this,"onAfterEdgePriorityUpdated");i(this,"onAfterEdgePriorityUpdatedEmitter");i(this,"onAfterEdgeUpdated");i(this,"onAfterEdgeUpdatedEmitter");i(this,"onAfterPortUpdated");i(this,"onAfterPortUpdatedEmitter");i(this,"onAfterNodePriorityUpdated");i(this,"onAfterNodePriorityUpdatedEmitter");i(this,"onAfterNodeUpdated");i(this,"onAfterNodeUpdatedEmitter");i(this,"onBeforeEdgeRemoved");i(this,"onBeforeEdgeRemovedEmitter");i(this,"onBeforeNodeRemoved");i(this,"onBeforeNodeRemovedEmitter");this.graphStore=e,this.options=r,[this.onAfterNodeAddedEmitter,this.onAfterNodeAdded]=m(),[this.onAfterEdgeAddedEmitter,this.onAfterEdgeAdded]=m(),[this.onAfterEdgeShapeUpdatedEmitter,this.onAfterEdgeShapeUpdated]=m(),[this.onAfterEdgePriorityUpdatedEmitter,this.onAfterEdgePriorityUpdated]=m(),[this.onAfterEdgeUpdatedEmitter,this.onAfterEdgeUpdated]=m(),[this.onAfterPortUpdatedEmitter,this.onAfterPortUpdated]=m(),[this.onAfterNodePriorityUpdatedEmitter,this.onAfterNodePriorityUpdated]=m(),[this.onAfterNodeUpdatedEmitter,this.onAfterNodeUpdated]=m(),[this.onBeforeEdgeRemovedEmitter,this.onBeforeEdgeRemoved]=m(),[this.onBeforeNodeRemovedEmitter,this.onBeforeNodeRemoved]=m()}addNode(e){const r=this.nodeIdGenerator.create(e.id);if(this.graphStore.getNode(r)!==void 0)throw new S("failed to add node with existing id");this.graphStore.addNode({nodeId:r,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.options.nodes.centerFn,priority:e.priority??this.options.nodes.priorityFn()}),this.onAfterNodeAddedEmitter.emit(r),Array.from(e.ports??[]).forEach(o=>{this.markPort({id:o.id,element:o.element,nodeId:r,direction:o.direction})})}markPort(e){const r=this.portIdGenerator.create(e.id);if(this.graphStore.getPort(r)!==void 0)throw new S("failed to add port with existing id");if(this.graphStore.getNode(e.nodeId)===void 0)throw new S("failed to set port on nonexisting node");this.graphStore.addPort({portId:r,element:e.element,nodeId:e.nodeId,direction:e.direction??this.options.ports.direction})}addEdge(e){const r=this.edgeIdGenerator.create(e.id);if(this.graphStore.getEdge(r)!==void 0)throw new S("failed to add edge with existing id");if(this.graphStore.getPort(e.from)===void 0)throw new S("failed to add edge from nonexisting port");if(this.graphStore.getPort(e.to)===void 0)throw new S("failed to add edge to nonexisting port");this.graphStore.addEdge({edgeId:r,from:e.from,to:e.to,shape:e.shape??this.options.edges.shapeFactory(),priority:e.priority??this.options.edges.priorityFn()}),this.onAfterEdgeAddedEmitter.emit(r)}updateEdge(e,r){const o=this.graphStore.getEdge(e);if(o===void 0)throw new S("failed to update nonexisting edge");r.shape!==void 0&&(o.shape=r.shape,this.onAfterEdgeShapeUpdatedEmitter.emit(e)),r.from!==void 0&&this.graphStore.updateEdgeFrom(e,r.from),r.to!==void 0&&this.graphStore.updateEdgeTo(e,r.to),this.onAfterEdgeUpdatedEmitter.emit(e),r.priority!==void 0&&(o.priority=r.priority,this.onAfterEdgePriorityUpdatedEmitter.emit(e))}updatePort(e,r){const o=this.graphStore.getPort(e);if(o===void 0)throw new S("failed to unset nonexisting port");o.direction=r.direction??o.direction,this.onAfterPortUpdatedEmitter.emit(e)}updateNode(e,r){const o=this.graphStore.getNode(e);if(o===void 0)throw new S("failed to update nonexisting node");o.x=(r==null?void 0:r.x)??o.x,o.y=(r==null?void 0:r.y)??o.y,o.centerFn=r.centerFn??o.centerFn,this.onAfterNodeUpdatedEmitter.emit(e),r.priority!==void 0&&(o.priority=r.priority,this.onAfterNodePriorityUpdatedEmitter.emit(e))}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new S("failed to remove nonexisting edge");this.onBeforeEdgeRemovedEmitter.emit(e),this.graphStore.removeEdge(e)}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new S("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(e).forEach(r=>{this.removeEdge(r)}),this.graphStore.removePort(e)}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new S("failed to remove nonexisting node");this.graphStore.getNodePortIds(e).forEach(r=>{this.unmarkPort(r)}),this.onBeforeNodeRemovedEmitter.emit(e),this.graphStore.removeNode(e)}clear(){this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}}class de{constructor(e){this.graphStore=e}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}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const r=this.graphStore.getPort(e);return r===void 0?null:{element:r.element,direction:r.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodePortIds(e)}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}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(e)}}class Pe{constructor(e){i(this,"transformation");i(this,"model");i(this,"internalTransformation");i(this,"internalModel");i(this,"graphStoreController");i(this,"htmlView");i(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});i(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});i(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});i(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});i(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});i(this,"onAfterPortUpdated",e=>{this.internalModel.getPortAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});i(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});i(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodeCoordinates(e),this.internalModel.getNodeAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});i(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});i(this,"onBeforeNodeRemoved",e=>{this.htmlView.detachNode(e)});this.internalModel=new te,this.model=new de(this.internalModel),this.internalTransformation=new ne,this.transformation=new se(this.internalTransformation),this.htmlView=new Z(this.internalModel,this.internalTransformation),this.graphStoreController=new he(this.internalModel,me(e)),this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded),this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(this.onAfterEdgeShapeUpdated),this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(this.onAfterEdgePriorityUpdated),this.graphStoreController.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated),this.graphStoreController.onAfterPortUpdated.subscribe(this.onAfterPortUpdated),this.graphStoreController.onAfterNodePriorityUpdated.subscribe(this.onAfterNodePriorityUpdated),this.graphStoreController.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated),this.graphStoreController.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved),this.graphStoreController.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved)}attach(e){return this.htmlView.attach(e),this}detach(){return this.htmlView.detach(),this}addNode(e){return this.graphStoreController.addNode(e),this}updateNode(e,r){return this.graphStoreController.updateNode(e,r??{}),this}removeNode(e){return this.graphStoreController.removeNode(e),this}addEdge(e){return this.graphStoreController.addEdge(e),this}updateEdge(e,r){return this.graphStoreController.updateEdge(e,r??{}),this}removeEdge(e){return this.graphStoreController.removeEdge(e),this}markPort(e){return this.graphStoreController.markPort(e),this}updatePort(e,r){return this.graphStoreController.updatePort(e,r??{}),this}unmarkPort(e){return this.graphStoreController.unmarkPort(e),this}patchViewportMatrix(e){return this.internalTransformation.patchViewportMatrix(e),this}patchContentMatrix(e){return this.internalTransformation.patchContentMatrix(e),this}clear(){return this.htmlView.clear(),this.graphStoreController.clear(),this}destroy(){this.htmlView.destroy(),this.graphStoreController.clear(),this.graphStoreController.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graphStoreController.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded),this.graphStoreController.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated),this.graphStoreController.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated),this.graphStoreController.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated),this.graphStoreController.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated),this.graphStoreController.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated),this.graphStoreController.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graphStoreController.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved),this.graphStoreController.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved)}}class Me{constructor(e){i(this,"transformation");i(this,"model");i(this,"internalTransformation");i(this,"internalModel");i(this,"graphStoreController");i(this,"htmlView");i(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});i(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});i(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});i(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});i(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});i(this,"onAfterPortUpdated",e=>{this.internalModel.getPortAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});i(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});i(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodeCoordinates(e),this.internalModel.getNodeAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});i(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});i(this,"onBeforeNodeRemoved",e=>{this.htmlView.detachNode(e)});this.model=e.publicGraphStore,this.internalModel=e.graphStore,this.internalTransformation=e.viewportTransformer,this.transformation=e.publicViewportTransformer,this.htmlView=e.htmlView,this.graphStoreController=e.graphStoreController,this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded),this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(this.onAfterEdgeShapeUpdated),this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(this.onAfterEdgePriorityUpdated),this.graphStoreController.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated),this.graphStoreController.onAfterPortUpdated.subscribe(this.onAfterPortUpdated),this.graphStoreController.onAfterNodePriorityUpdated.subscribe(this.onAfterNodePriorityUpdated),this.graphStoreController.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated),this.graphStoreController.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved),this.graphStoreController.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved)}attach(e){return this.htmlView.attach(e),this}detach(){return this.htmlView.detach(),this}addNode(e){return this.graphStoreController.addNode(e),this}updateNode(e,r){return this.graphStoreController.updateNode(e,r??{}),this}removeNode(e){return this.graphStoreController.removeNode(e),this}addEdge(e){return this.graphStoreController.addEdge(e),this}updateEdge(e,r){return this.graphStoreController.updateEdge(e,r??{}),this}removeEdge(e){return this.graphStoreController.removeEdge(e),this}markPort(e){return this.graphStoreController.markPort(e),this}updatePort(e,r){return this.graphStoreController.updatePort(e,r??{}),this}unmarkPort(e){return this.graphStoreController.unmarkPort(e),this}patchViewportMatrix(e){return this.internalTransformation.patchViewportMatrix(e),this}patchContentMatrix(e){return this.internalTransformation.patchContentMatrix(e),this}clear(){return this.htmlView.clear(),this.graphStoreController.clear(),this}destroy(){this.htmlView.destroy(),this.graphStoreController.clear(),this.graphStoreController.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graphStoreController.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded),this.graphStoreController.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated),this.graphStoreController.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated),this.graphStoreController.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated),this.graphStoreController.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated),this.graphStoreController.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated),this.graphStoreController.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graphStoreController.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved),this.graphStoreController.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved)}}const Ve=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new J({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new _({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new Q({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});default:return()=>new K({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},De=(t,e)=>{let r=Y,o=Y;t==="incremental"&&(r=V()),e==="incremental"&&(o=V());const s=V();return t==="shared-incremental"&&(r=s),e==="shared-incremental"&&(o=s),typeof t=="number"&&(r=L(t)),typeof e=="number"&&(o=L(e)),typeof t=="function"&&(r=t),typeof e=="function"&&(o=e),{nodesPriorityFn:r,edgesPriorityFn:o}},Le=t=>{var r,o,s,d,n;const e=De((r=t==null?void 0:t.nodes)==null?void 0:r.priority,(o=t==null?void 0:t.edges)==null?void 0:o.priority);return{nodes:{centerFn:((s=t==null?void 0:t.nodes)==null?void 0:s.centerFn)??x,priorityFn:e.nodesPriorityFn},ports:{direction:((d=t==null?void 0:t.ports)==null?void 0:d.direction)??0},edges:{shapeFactory:Ve(((n=t==null?void 0:t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class $e{constructor(e,r){i(this,"publicViewportTransformer");i(this,"publicGraphStore");i(this,"viewportTransformer");i(this,"graphStore");i(this,"htmlView");i(this,"graphStoreController");this.graphStore=new te,this.publicGraphStore=new de(this.graphStore),this.viewportTransformer=new ne,this.publicViewportTransformer=new se(this.viewportTransformer),this.htmlView=r(this.graphStore,this.viewportTransformer),this.graphStoreController=new he(this.graphStore,Le(e))}}const Ue=(t,e)=>new Z(t,e),Ie=t=>(e,r)=>new Ce(new Z(e,r),e,t),X=(t,e,r)=>{const{x:o,y:s,width:d,height:n}=t.getBoundingClientRect();return e>=o&&e<=o+d&&r>=s&&r<=s+n},z=(t,e,r)=>e>=0&&e<=t.innerWidth&&r>=0&&r<=t.innerHeight,G=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")},We=t=>{var g,f,A,v,p,N;const e=((g=t==null?void 0:t.events)==null?void 0:g.onNodeDrag)??(()=>{}),r=((f=t==null?void 0:t.events)==null?void 0:f.onBeforeNodeDrag)??(()=>!0),o=((A=t==null?void 0:t.events)==null?void 0:A.onNodeDragFinished)??(()=>{}),s=(t==null?void 0:t.moveOnTop)===!1,d=(v=t==null?void 0:t.mouse)==null?void 0:v.dragCursor,n=d!==void 0?d:"grab",h=(p=t==null?void 0:t.mouse)==null?void 0:p.mouseDownEventVerifier,c=h!==void 0?h:T=>T.button===0,a=(N=t==null?void 0:t.mouse)==null?void 0:N.mouseUpEventVerifier;return{freezePriority:s,dragCursor:n,mouseDownEventVerifier:c,mouseUpEventVerifier:a!==void 0?a:T=>T.button===0,onNodeDrag:e,onBeforeNodeDrag:r,onNodeDragFinished:o}};class ce{constructor(e,r){i(this,"model");i(this,"transformation");i(this,"maxNodePriority",0);i(this,"nodes",new Map);i(this,"grabbedNodeId",null);i(this,"nodeIdGenerator",new $(e=>this.nodes.has(e)));i(this,"element",null);i(this,"onWindowMouseMove",e=>{if(this.element!==null&&(!X(this.element,e.clientX,e.clientY)||!z(this.window,e.clientX,e.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});i(this,"onWindowMouseUp",e=>{this.options.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});i(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const r=e.touches[0];if(this.element!==null&&(!X(this.element,r.clientX,r.clientY)||!z(this.window,r.clientX,r.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const o=r.clientX-this.previousTouchCoords.x,s=r.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,o,s),this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY}}});i(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});i(this,"previousTouchCoords",null);i(this,"window",window);i(this,"options");this.canvas=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.options=We(r??{})}attach(e){return this.detach(),this.element=e,this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element=null),this}addNode(e){const r=this.nodeIdGenerator.create(e.id);this.canvas.addNode({...e,id:r}),this.updateMaxNodePriority(r);const o=d=>{if(this.element===null||!this.options.mouseDownEventVerifier(d))return;const n=this.model.getNode(r);this.options.onBeforeNodeDrag({nodeId:r,element:e.element,x:n.x,y:n.y})&&(d.stopImmediatePropagation(),this.grabbedNodeId=r,G(this.element,this.options.dragCursor),this.moveNodeOnTop(r),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},s=d=>{if(d.touches.length!==1)return;d.stopImmediatePropagation(),this.previousTouchCoords={x:d.touches[0].clientX,y:d.touches[0].clientY};const n=this.model.getNode(r);this.options.onBeforeNodeDrag({nodeId:r,element:e.element,x:n.x,y:n.y})&&(this.grabbedNodeId=r,this.moveNodeOnTop(r),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};return this.nodes.set(r,{element:e.element,onMouseDown:o,onTouchStart:s}),e.element.addEventListener("mousedown",o),e.element.addEventListener("touchstart",s),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.nodes.delete(e),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.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(e,r,o){const s=this.model.getNode(e);if(s===null)return;const d=this.canvas.transformation.getContentMatrix(),n=d.scale*s.x+d.x,h=d.scale*s.y+d.y,c=n+r,a=h+o,l=this.canvas.transformation.getViewportMatrix(),g=l.scale*c+l.x,f=l.scale*a+l.y;this.canvas.updateNode(e,{x:g,y:f}),this.options.onNodeDrag({nodeId:e,element:s.element,x:g,y:f})}updateMaxNodePriority(e){const r=this.model.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,r)}moveNodeOnTop(e){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const r=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(e).forEach(s=>{this.updateEdge(s,{priority:r})})}cancelMouseDrag(){const e=this.model.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.element!==null&&G(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const e=this.model.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}const Re=t=>{const e=t.minX!==null?t.minX:-1/0,r=t.maxX!==null?t.maxX:1/0,o=t.minY!==null?t.minY:-1/0,s=t.maxY!==null?t.maxY:1/0;return d=>{let n=d.nextTransform.x,h=d.nextTransform.y;n<e&&n<d.prevTransform.x&&(n=Math.min(d.prevTransform.x,e));const c=d.canvasWidth*d.prevTransform.scale,a=r-c;n>a&&n>d.prevTransform.x&&(n=Math.max(d.prevTransform.x,a)),h<o&&h<d.prevTransform.y&&(h=Math.min(d.prevTransform.y,o));const l=d.canvasHeight*d.prevTransform.scale,g=s-l;return h>g&&h>d.prevTransform.y&&(h=Math.max(d.prevTransform.y,g)),{scale:d.nextTransform.scale,x:n,y:h}}},Fe=t=>{const e=t.maxContentScale,r=t.minContentScale,o=e!==null?1/e:0,s=r!==null?1/r:1/0;return d=>{const n=d.prevTransform,h=d.nextTransform;let c=h.scale,a=h.x,l=h.y;if(h.scale>s&&h.scale>n.scale){c=Math.max(n.scale,s),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)*g,l=n.y+(h.y-n.y)*g}if(h.scale<o&&h.scale<n.scale){c=Math.min(n.scale,o),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)*g,l=n.y+(h.y-n.y)*g}return{scale:c,x:a,y:l}}},Be=t=>e=>t.reduce((r,o)=>o({prevTransform:e.prevTransform,nextTransform:r,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),ae=t=>{if(typeof t=="function")return t;switch(t.type){case"scale-limit":return Fe({minContentScale:t.minContentScale??0,maxContentScale:t.maxContentScale??1/0});case"shift-limit":return Re({minX:t.minX??-1/0,maxX:t.maxX??1/0,minY:t.minY??-1/0,maxY:t.maxY??1/0})}},ke=t=>{var v,p,N,T,ee,U,I,W,ue;const e=(v=t==null?void 0:t.scale)==null?void 0:v.mouseWheelSensitivity,r=e!==void 0?e:1.2,o=t==null?void 0:t.transformPreprocessor;let s;o!==void 0?Array.isArray(o)?s=Be(o.map(M=>ae(M))):s=ae(o):s=M=>M.nextTransform;const d=((p=t==null?void 0:t.shift)==null?void 0:p.cursor)!==void 0?t.shift.cursor:"grab",n=((N=t==null?void 0:t.events)==null?void 0:N.onBeforeTransformChange)??(()=>{}),h=((T=t==null?void 0:t.events)==null?void 0:T.onTransformChange)??(()=>{}),c=(ee=t==null?void 0:t.shift)==null?void 0:ee.mouseDownEventVerifier,a=c!==void 0?c:M=>M.button===0,l=(U=t==null?void 0:t.shift)==null?void 0:U.mouseUpEventVerifier,g=l!==void 0?l:M=>M.button===0,f=(I=t==null?void 0:t.scale)==null?void 0:I.mouseWheelEventVerifier,A=f!==void 0?f:()=>!0;return{wheelSensitivity:r,onTransformStarted:((W=t==null?void 0:t.events)==null?void 0:W.onTransformStarted)??(()=>{}),onTransformFinished:((ue=t==null?void 0:t.events)==null?void 0:ue.onTransformFinished)??(()=>{}),onBeforeTransformChange:n,onTransformChange:h,transformPreprocessor:s,shiftCursor:d,mouseDownEventVerifier:a,mouseUpEventVerifier:g,mouseWheelEventVerifier:A}},q=t=>{const e=[],r=t.touches.length;for(let h=0;h<r;h++)e.push([t.touches[h].clientX,t.touches[h].clientY]);const o=e.reduce((h,c)=>[h[0]+c[0],h[1]+c[1]],[0,0]),s=[o[0]/r,o[1]/r],n=e.map(h=>[h[0]-s[0],h[1]-s[1]]).reduce((h,c)=>h+Math.sqrt(c[0]*c[0]+c[1]*c[1]),0);return{x:s[0],y:s[1],scale:n/r,touchesCnt:r,touches:e}},Ye=(t,e,r)=>({scale:t.scale,x:t.x+t.scale*e,y:t.y+t.scale*r}),Xe=(t,e,r,o)=>({scale:t.scale*e,x:t.scale*(1-e)*r+t.x,y:t.scale*(1-e)*o+t.y});class O{constructor(e,r){i(this,"model");i(this,"transformation");i(this,"element",null);i(this,"prevTouches",null);i(this,"window",window);i(this,"onMouseDown",e=>{this.element===null||!this.options.mouseDownEventVerifier(e)||(G(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});i(this,"onWindowMouseMove",e=>{if(this.element===null||!X(this.element,e.clientX,e.clientY)||!z(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const r=-e.movementX,o=-e.movementY;this.moveViewport(this.element,r,o)});i(this,"onWindowMouseUp",e=>{this.element===null||!this.options.mouseUpEventVerifier(e)||this.stopMouseDrag()});i(this,"onWheelScroll",e=>{if(!this.options.mouseWheelEventVerifier(e))return;e.preventDefault(),this.options.onTransformStarted();const{left:r,top:o}=this.element.getBoundingClientRect(),s=e.clientX-r,d=e.clientY-o,h=1/(e.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.scaleViewport(this.element,h,s,d),this.options.onTransformFinished()});i(this,"onTouchStart",e=>{this.prevTouches=q(e),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});i(this,"onWindowTouchMove",e=>{const r=this.element;if(r===null)return;const o=q(e);if(!o.touches.every(d=>X(r,d[0],d[1])&&z(this.window,d[0],d[1]))){this.stopTouchDrag();return}if((o.touchesCnt===1||o.touchesCnt===2)&&this.moveViewport(r,-(o.x-this.prevTouches.x),-(o.y-this.prevTouches.y)),o.touchesCnt===2){const{left:d,top:n}=r.getBoundingClientRect(),h=this.prevTouches.x-d,c=this.prevTouches.y-n,l=1/(o.scale/this.prevTouches.scale);this.scaleViewport(r,l,h,c)}this.prevTouches=o});i(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=q(e):this.stopTouchDrag()});i(this,"observer",new ResizeObserver(()=>{const e=this.canvas.transformation.getViewportMatrix(),{width:r,height:o}=this.element.getBoundingClientRect(),s=this.options.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:r,canvasHeight:o});this.canvas.patchViewportMatrix(s),this.options.onTransformChange()}));i(this,"options");this.canvas=e,this.options=ke(r),this.transformation=this.canvas.transformation,this.model=this.canvas.model}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}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}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(e,r,o){this.options.onBeforeTransformChange();const s=this.transformation.getViewportMatrix(),d=Ye(s,r,o),{width:n,height:h}=e.getBoundingClientRect(),c=this.options.transformPreprocessor({prevTransform:s,nextTransform:d,canvasWidth:n,canvasHeight:h});this.canvas.patchViewportMatrix(c),this.options.onTransformChange()}scaleViewport(e,r,o,s){this.options.onBeforeTransformChange();const d=this.canvas.transformation.getViewportMatrix(),n=Xe(d,r,o,s),{width:h,height:c}=e.getBoundingClientRect(),a=this.options.transformPreprocessor({prevTransform:d,nextTransform:n,canvasWidth:h,canvasHeight:c});this.canvas.patchViewportMatrix(a),this.options.onTransformChange()}stopMouseDrag(){this.element!==null&&G(this.element,null),this.removeMouseDragListeners(),this.options.onTransformFinished()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.options.onTransformFinished()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class ze{constructor(){i(this,"keyMap",new Map);i(this,"valueMap",new Map)}set(e,r){this.keyMap.set(e,r),this.valueMap.set(r,e)}hasKey(e){return this.keyMap.has(e)}hasValue(e){return this.valueMap.has(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,o)=>{e(r,o)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class le{constructor(e){i(this,"transformation");i(this,"model");i(this,"nodes",new ze);i(this,"nodeIdGenerator",new $(e=>this.nodes.hasKey(e)));i(this,"nodesResizeObserver");this.canvas=e,this.nodesResizeObserver=new window.ResizeObserver(r=>{r.forEach(o=>{const s=o.target;this.handleNodeResize(s)})}),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(e){return this.canvas.attach(e),this}detach(){return this.canvas.detach(),this}addNode(e){const r=this.nodeIdGenerator.create(e.id);return this.canvas.addNode({...e,id:r}),this.nodes.set(r,e.element),this.nodesResizeObserver.observe(e.element),this}updateNode(e,r){return this.canvas.updateNode(e,r),this}removeNode(e){this.canvas.removeNode(e);const r=this.nodes.getByKey(e);return this.nodes.deleteByKey(e),this.nodesResizeObserver.unobserve(r),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.nodesResizeObserver.disconnect(),this.nodes.clear(),this}destroy(){this.clear(),this.canvas.destroy()}handleNodeResize(e){const r=this.nodes.getByValue(e);this.canvas.updateNode(r),this.model.getNodeAdjacentEdgeIds(r).forEach(s=>{this.canvas.updateEdge(s)})}}class ge{constructor(){i(this,"coreOptions",{});i(this,"dragOptions");i(this,"transformOptions");i(this,"hasDraggableNode",!1);i(this,"hasTransformableViewport",!1);i(this,"hasResizeReactiveNodes",!1);i(this,"boxRenderingTrigger",null)}setOptions(e){return this.coreOptions=e,this}setUserDraggableNodes(e){return this.hasDraggableNode=!0,this.dragOptions=e,this}setUserTransformableCanvas(e){return this.setUserTransformableViewport(e)}setUserTransformableViewport(e){return this.hasTransformableViewport=!0,this.transformOptions=e,this}setResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}setBoxRenderingTrigger(e){return this.boxRenderingTrigger=e,this}build(){const e=this.boxRenderingTrigger!==null?Ie(this.boxRenderingTrigger):Ue,r=new $e(this.coreOptions,e);let o=new Me(r);return this.hasResizeReactiveNodes&&(o=new le(o)),this.hasDraggableNode&&(o=new ce(o,this.dragOptions)),this.hasTransformableViewport&&(o=new O(o,this.transformOptions)),o}}E.BezierEdgeShape=K,E.CanvasBuilder=ge,E.CanvasCore=Pe,E.EventSubject=re,E.HorizontalEdgeShape=_,E.HtmlGraphBuilder=ge,E.HtmlGraphError=S,E.ResizeReactiveNodesCanvas=le,E.StraightEdgeShape=J,E.UserDraggableNodesCanvas=ce,E.UserTransformableCanvas=O,E.UserTransformableViewportCanvas=O,E.VerticalEdgeShape=Q,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});