@html-graph/html-graph 0.1.0 → 0.1.2

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(y,x){typeof exports=="object"&&typeof module<"u"?x(exports):typeof define=="function"&&define.amd?define(["exports"],x):(y=typeof globalThis<"u"?globalThis:y||self,x(y.HTMLGraph={}))})(this,function(y){"use strict";var be=Object.defineProperty;var Ie=(y,x,m)=>x in y?be(y,x,{enumerable:!0,configurable:!0,writable:!0,value:m}):y[x]=m;var a=(y,x,m)=>Ie(y,typeof x!="symbol"?x+"":x,m);const x=(r,e)=>({x:r/2,y:e/2}),m=(r,e,t)=>({x:e.x*r.x-e.y*r.y+((1-e.x)*t.x+e.y*t.y),y:e.y*r.x+e.x*r.y+((1-e.x)*t.y-e.y*t.x)}),E=(r,e,t)=>({x:e*Math.cos(r),y:t*Math.sin(r)}),l={x:0,y:0},A=(r,e,t,s)=>{const o=[l,{x:t,y:s},{x:t,y:-s}].map(c=>m(c,r,l)).map(c=>({x:c.x+e.x,y:c.y+e.y})),h=`M ${o[0].x} ${o[0].y}`,i=`L ${o[1].x} ${o[1].y}`,d=`L ${o[2].x} ${o[2].y}`;return`${h} ${i} ${d}`},F=(r,e)=>{const t=[];if(r.length>0&&t.push(`M ${r[0].x} ${r[0].y}`),r.length===2&&t.push(`L ${r[1].x} ${r[1].y}`),r.length>2){const s=r.length-1;let n=0,o=0,h=0;r.forEach((i,d)=>{let c=0,u=0,w=0;const f=d>0,v=d<s,p=f&&v;if(f&&(c=-n,u=-o,w=h),v){const ce=r[d+1];n=ce.x-i.x,o=ce.y-i.y,h=Math.sqrt(n*n+o*o)}const T=h!==0?Math.min((p?e:0)/h,d<s-1?.5:1):0,b=p?{x:i.x+n*T,y:i.y+o*T}:i,I=w!==0?Math.min((p?e:0)/w,d>1?.5:1):0,G=p?{x:i.x+c*I,y:i.y+u*I}:i;d>0&&t.push(`L ${G.x} ${G.y}`),p&&t.push(`C ${i.x} ${i.y} ${i.x} ${i.y} ${b.x} ${b.y}`)})}return t.join(" ")},N=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.style.pointerEvents="none",r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.overflow="visible",r},$=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.transformOrigin="50% 50%",r},L=(r,e)=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke",r),t.setAttribute("stroke-width",`${e}`),t.setAttribute("fill","none"),t},C=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",r),e};class U{constructor(e,t,s,n,o,h,i){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.curvature=s,this.arrowLength=n,this.arrowWidth=o,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s){const n=m({x:this.arrowLength,y:l.y},t,l),o=m({x:e.x-this.arrowLength,y:e.y},s,e),h={x:n.x+t.x*this.curvature,y:n.y+t.y*this.curvature},i={x:o.x-s.x*this.curvature,y:o.y-s.y*this.curvature},d=`M ${n.x} ${n.y} C ${h.x} ${h.y}, ${i.x} ${i.y}, ${o.x} ${o.y}`,c=this.sourceArrow?"":`M ${l.x} ${l.y} L ${n.x} ${n.y} `,u=this.targetArrow?"":` M ${o.x} ${o.y} L ${e.x} ${e.y}`;return`${c}${d}${u}`}}class K{constructor(e,t,s,n,o,h,i,d){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=n,this.arrowOffset=o,this.roundness=d,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s){const n=this.sourceArrow?m({x:this.arrowLength,y:l.y},t,l):l,o=this.targetArrow?m({x:e.x-this.arrowLength,y:e.y},s,e):e,h=this.arrowLength+this.arrowOffset,i=m({x:h,y:l.y},t,l),d=m({x:e.x-h,y:e.y},s,e);return F([n,i,d,o],this.roundness)}}class _{constructor(e,t,s,n,o,h,i,d){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=n,this.arrowOffset=o,this.roundness=d,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i,t);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s,n){const o=this.sourceArrow?m({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?m({x:e.x-this.arrowLength,y:e.y},s,e):e,i=this.arrowLength+this.arrowOffset,d=i-this.roundness,c=m({x:d,y:l.y},t,l),u=m({x:e.x-d,y:e.y},s,e),w=Math.max((c.x+u.x)/2,i),f=e.y/2,v={x:n>0?w:-i,y:c.y},p={x:v.x,y:f},P={x:n>0?e.x-w:e.x+i,y:u.y},T={x:P.x,y:f};return F([o,c,v,p,T,P,u,h],this.roundness)}}class J{constructor(e,t,s,n,o,h,i,d){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);this.arrowLength=s,this.arrowWidth=n,this.arrowOffset=o,this.roundness=d,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i,s);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s,n){const o=this.sourceArrow?m({x:this.arrowLength,y:l.y},t,l):l,h=this.targetArrow?m({x:e.x-this.arrowLength,y:e.y},s,e):e,i=this.arrowLength+this.arrowOffset,d=i-this.roundness,c=m({x:d,y:l.y},t,l),u=m({x:e.x-d,y:e.y},s,e),w=Math.max((c.y+u.y)/2,i),f=e.x/2,v={x:c.x,y:n>0?w:-i},p={x:f,y:v.y},P={x:u.x,y:n>0?e.y-w:e.y+i},T={x:f,y:P.y};return F([o,c,v,p,T,P,u,h],this.roundness)}}class Q{constructor(e,t,s,n,o,h,i){a(this,"svg",N());a(this,"line");a(this,"arrow",null);this.arrowLength=s,this.arrowWidth=n,this.radius=h,this.smallRadius=i,this.line=L(e,t),this.svg.appendChild(this.line),o&&(this.arrow=C(e),this.svg.appendChild(this.arrow))}update(e,t,s,n){const o=E(n,t,s),h=this.createLinePath(o);if(this.line.setAttribute("d",h),this.arrow){const i=A(o,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",i)}}createLinePath(e){const t=this.smallRadius,s=this.radius,n=Math.sqrt(t*t+s*s),o=t+s,h=this.arrowLength+n*(1-s/o),i=t*s/o,c=[{x:this.arrowLength,y:l.y},{x:h,y:i},{x:h,y:-i}].map(f=>m(f,e,l)),u=[`M ${c[0].x} ${c[0].y}`,`A ${t} ${t} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${s} ${s} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${t} ${t} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),w=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${this.arrow!==null?"":w}${u}`}}class k{constructor(e,t,s,n,o,h,i,d){a(this,"svg",N());a(this,"line");a(this,"arrow",null);a(this,"roundness");a(this,"linePoints");this.arrowLength=s,this.arrowWidth=n,this.side=h,this.minPortOffset=i,this.roundness=Math.min(d,this.minPortOffset,this.side/2),this.line=L(e,t),this.svg.appendChild(this.line),o&&(this.arrow=C(e),this.svg.appendChild(this.arrow));const c=this.minPortOffset,u=this.side,w=this.arrowLength+c,f=w+2*u;this.linePoints=[{x:this.arrowLength,y:l.y},{x:w,y:l.y},{x:w,y:this.side},{x:f,y:this.side},{x:f,y:-this.side},{x:w,y:-this.side},{x:w,y:l.y},{x:this.arrowLength,y:l.y}]}update(e,t,s,n){const o=E(n,t,s),h=this.createLinePath(o);if(this.line.setAttribute("d",h),this.arrow){const i=A(o,l,this.arrowLength,this.arrowWidth);this.arrow.setAttribute("d",i)}}createLinePath(e){const t=this.linePoints.map(n=>m(n,e,l)),s=`M ${l.x} ${l.y} L ${t[0].x} ${t[0].y} `;return`${this.arrow?"":s}${F(t,this.roundness)}`}}class Z{constructor(e,t,s,n,o,h,i,d,c){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.curvature=s,this.arrowLength=n,this.arrowWidth=o,this.detourX=Math.cos(c)*d,this.detourY=Math.sin(c)*d,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i,t,s);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s,n,o){const h=this.sourceArrow?m({x:this.arrowLength,y:l.y},t,l):l,i=this.targetArrow?m({x:e.x-this.arrowLength,y:e.y},s,e):e,d=this.arrowLength,c=this.detourX*n,u=this.detourY*o,w=m({x:d,y:l.y},t,l),f={x:w.x+c,y:w.y+u},v=m({x:e.x-d,y:e.y},s,e),p={x:v.x+c,y:v.y+u},P={x:(f.x+p.x)/2,y:(f.y+p.y)/2},T={x:w.x+this.curvature*t.x,y:w.y+this.curvature*t.y},b={x:v.x-this.curvature*s.x,y:v.y-this.curvature*s.y},W={x:w.x+c,y:w.y+u},I={x:v.x+c,y:v.y+u};return[`M ${h.x} ${h.y}`,`L ${w.x} ${w.y}`,`C ${T.x} ${T.y} ${W.x} ${W.y} ${P.x} ${P.y}`,`C ${I.x} ${I.y} ${b.x} ${b.y} ${v.x} ${v.y}`,`L ${i.x} ${i.y}`].join(" ")}}class V{constructor(e,t,s,n,o,h,i,d,c,u){a(this,"svg",N());a(this,"group",$());a(this,"line");a(this,"sourceArrow",null);a(this,"targetArrow",null);a(this,"detourX");a(this,"detourY");this.arrowLength=s,this.arrowWidth=n,this.arrowOffset=o,this.roundness=d,this.detourX=Math.cos(u)*c,this.detourY=Math.sin(u)*c,this.svg.appendChild(this.group),this.line=L(e,t),this.group.appendChild(this.line),h&&(this.sourceArrow=C(e),this.group.appendChild(this.sourceArrow)),i&&(this.targetArrow=C(e),this.group.appendChild(this.targetArrow))}update(e,t,s,n,o){this.group.style.transform=`scale(${t}, ${s})`;const h=E(n,t,s),i=E(o,t,s),d=this.createLinePath(e,h,i,t,s);if(this.line.setAttribute("d",d),this.sourceArrow){const c=A(h,l,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",c)}if(this.targetArrow){const c=A(i,e,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",c)}}createLinePath(e,t,s,n,o){const h=this.sourceArrow?m({x:this.arrowLength,y:l.y},t,l):l,i=this.targetArrow?m({x:e.x-this.arrowLength,y:e.y},s,e):e,d=this.arrowLength+this.arrowOffset,c=m({x:d,y:l.y},t,l),u=this.detourX*n,w=this.detourY*o,f={x:c.x+u,y:c.y+w},v=m({x:e.x-d,y:e.y},s,e),p={x:v.x+u,y:v.y+w};return F([h,c,f,p,v,i],this.roundness)}}var S=(r=>(r.Regular="regular",r.PortCycle="port-cycle",r.NodeCycle="node-cycle",r))(S||{});const O=r=>e=>e===S.PortCycle?new Q(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleRadius,r.smallCycleRadius):e===S.NodeCycle?new Z(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow,r.detourDistance,r.detourDirection):new U(r.color,r.width,r.curvature,r.arrowLength,r.arrowWidth,r.hasSourceArrow,r.hasTargetArrow),q=r=>e=>e===S.PortCycle?new k(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===S.NodeCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new K(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),ee=r=>e=>e===S.PortCycle?new k(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===S.NodeCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new J(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),te=r=>e=>e===S.PortCycle?new k(r.color,r.width,r.arrowLength,r.arrowWidth,r.hasSourceArrow||r.hasTargetArrow,r.cycleSquareSide,r.arrowOffset,r.roundness):e===S.NodeCycle?new V(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness,r.detourDistance,r.detourDirection):new _(r.color,r.width,r.arrowLength,r.arrowWidth,r.arrowOffset,r.hasSourceArrow,r.hasTargetArrow,r.roundness),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},Y=r=>{switch(r==null?void 0:r.type){case"custom":return r.factory;case"straight":return q({color:r.color??g.edgeColor,width:r.width??g.edgeWidth,arrowLength:r.arrowLength??g.edgeArrowLength,arrowWidth:r.arrowWidth??g.edgeArrowWidth,arrowOffset:r.arrowOffset??g.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??g.cycleSize,roundness:r.roundness??g.roundness,detourDistance:r.detourDistance??g.detourDistance,detourDirection:r.detourDirection??g.detourDirection});case"horizontal":return te({color:r.color??g.edgeColor,width:r.width??g.edgeWidth,arrowLength:r.arrowLength??g.edgeArrowLength,arrowWidth:r.arrowWidth??g.edgeArrowWidth,arrowOffset:r.arrowOffset??g.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??g.cycleSize,roundness:r.roundness??g.roundness,detourDistance:r.detourDistance??g.detourDistance,detourDirection:r.detourDirection??g.detourDirection});case"vertical":return ee({color:r.color??g.edgeColor,width:r.width??g.edgeWidth,arrowLength:r.arrowLength??g.edgeArrowLength,arrowWidth:r.arrowWidth??g.edgeArrowWidth,arrowOffset:r.arrowOffset??g.edgeArrowOffset,hasSourceArrow:r.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??g.hasTargetArrow,cycleSquareSide:r.cycleSquareSide??g.cycleSize,roundness:r.roundness??g.roundness,detourDistance:r.detourDistance??g.detourDistance,detourDirection:r.detourDirection??g.detourDirection});default:return O({color:r.color??g.edgeColor,width:r.width??g.edgeWidth,arrowLength:r.arrowLength??g.edgeArrowLength,arrowWidth:r.arrowWidth??g.edgeArrowWidth,hasSourceArrow:r.hasSourceArrow??g.hasSourceArrow,hasTargetArrow:r.hasTargetArrow??g.hasTargetArrow,cycleRadius:r.cycleRadius??g.cycleSize,smallCycleRadius:r.smallCycleRadius??g.smallCycleSize,curvature:r.curvature??g.curvature,detourDistance:r.detourDistance??g.detourDistance,detourDirection:r.detourDirection??g.detourDirection})}},X=r=>()=>r,re=X(0),H=()=>{let r=0;return()=>r++},le=(r,e)=>{let t=re,s=re;r==="incremental"&&(t=H()),e==="incremental"&&(s=H());const n=H();return r==="shared-incremental"&&(t=n),e==="shared-incremental"&&(s=n),typeof r=="number"&&(t=X(r)),typeof e=="number"&&(s=X(e)),typeof r=="function"&&(t=r),typeof e=="function"&&(s=e),{nodesPriorityFn:t,edgesPriorityFn:s}},ge=r=>{var t,s,n,o,h,i;const e=le((t=r==null?void 0:r.nodes)==null?void 0:t.priority,(s=r==null?void 0:r.edges)==null?void 0:s.priority);return{nodes:{centerFn:((n=r==null?void 0:r.nodes)==null?void 0:n.centerFn)??x,priorityFn:e.nodesPriorityFn},ports:{centerFn:((o=r==null?void 0:r.ports)==null?void 0:o.centerFn)??x,direction:((h=r==null?void 0:r.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:Y(((i=r==null?void 0:r.edges)==null?void 0:i.shape)??{}),priorityFn:e.edgesPriorityFn}}};class ue{constructor(){a(this,"nodes",new Map);a(this,"ports",new Map);a(this,"nodePorts",new Map);a(this,"portNodeId",new Map);a(this,"edges",new Map);a(this,"incommingEdges",new Map);a(this,"outcommingEdges",new Map);a(this,"cycleEdges",new Map)}addNode(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,centerFn:e.centerFn,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 t=this.nodePorts.get(e);if(t!==void 0)return Array.from(t.keys())}getPortNodeId(e){return this.portNodeId.get(e)}removePort(e){const t=this.portNodeId.get(e);this.portNodeId.delete(e),this.nodePorts.get(t).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)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){const t=this.edges.get(e),s=t.from,n=t.to;this.cycleEdges.get(s).delete(e),this.cycleEdges.get(n).delete(e),this.incommingEdges.get(s).delete(e),this.incommingEdges.get(n).delete(e),this.outcommingEdges.get(s).delete(e),this.outcommingEdges.get(n).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 t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(n=>{s=[...s,...this.getPortIncomingEdgeIds(n)]}),s}getNodeOutcomingEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(n=>{s=[...s,...this.getPortOutcomingEdgeIds(n)]}),s}getNodeCycleEdgeIds(e){const t=Array.from(this.nodePorts.get(e).keys());let s=[];return t.forEach(n=>{s=[...s,...this.getPortCycleEdgeIds(n)]}),s}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}}class we{constructor(e){this.graphStore=e}getNode(e){const t=this.graphStore.getNode(e);return t===void 0?null:{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const t=this.graphStore.getPort(e);return t===void 0?null:{element:t.element,centerFn:t.centerFn,direction:t.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)}getPortNodeId(e){return this.graphStore.getPortNodeId(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const t=this.graphStore.getEdge(e);return t===void 0?null:{from:t.from,to:t.to,priority:t.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNodeAdjacentEdgeIds(e)}}const se=r=>({scale:1/r.scale,dx:-r.dx/r.scale,dy:-r.dy/r.scale}),oe={scale:1,dx:0,dy:0};class ye{constructor(){a(this,"viewportMatrix",oe);a(this,"contentMatrix",oe)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,dx:e.dx??this.viewportMatrix.dx,dy:e.dy??this.viewportMatrix.dy},this.contentMatrix=se(this.viewportMatrix)}patchContentMatrix(e){this.contentMatrix={scale:e.scale??this.contentMatrix.scale,dx:e.dx??this.contentMatrix.dx,dy:e.dy??this.contentMatrix.dy},this.viewportMatrix=se(this.contentMatrix)}}class me{constructor(e){this.transformer=e}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}const ve=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r.style.overflow="hidden",r},fe=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="0",r.style.height="0",r},pe=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.visibility="hidden",r};class xe{constructor(e,t){a(this,"canvasWrapper",null);a(this,"host",ve());a(this,"container",fe());a(this,"nodeIdToWrapperElementMap",new Map);a(this,"edgeIdToElementMap",new Map);this.graphStore=e,this.viewportTransformer=t,this.host.appendChild(this.container)}attach(e){this.detach(),this.canvasWrapper=e,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const e=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.dx}, ${e.dy})`}attachNode(e){const t=this.graphStore.getNode(e),s=pe();s.appendChild(t.element),this.container.appendChild(s),this.nodeIdToWrapperElementMap.set(e,s),this.updateNodeCoordinates(e),this.updateNodePriority(e),s.style.visibility="visible"}detachNode(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.get(e);s.removeChild(t.element),this.container.removeChild(s),this.nodeIdToWrapperElementMap.delete(e)}attachEdge(e){const t=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,t.shape.svg),this.container.appendChild(t.shape.svg),this.updateEdge(e),this.updateEdgePriority(e)}detachEdge(e){const t=this.graphStore.getEdge(e);this.container.removeChild(t.shape.svg),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,t)=>{this.detachEdge(t)}),this.nodeIdToWrapperElementMap.forEach((e,t)=>{this.detachNode(t)})}destroy(){this.clear(),this.detach(),this.host.removeChild(this.container)}updateNodeCoordinates(e){const t=this.nodeIdToWrapperElementMap.get(e),s=this.graphStore.getNode(e),{width:n,height:o}=s.element.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix().scale,i=s.centerFn(n,o),d=s.x-h*i.x,c=s.y-h*i.y;t.style.transform=`translate(${d}px, ${c}px)`}updateNodePriority(e){const t=this.graphStore.getNode(e),s=this.nodeIdToWrapperElementMap.get(e);s.style.zIndex=`${t.priority}`}updateEdgeShape(e){const t=this.edgeIdToElementMap.get(e);this.container.removeChild(t);const s=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,s.shape.svg),this.container.appendChild(s.shape.svg)}updateEdge(e){const t=this.graphStore.getEdge(e),s=this.graphStore.getPort(t.from),n=this.graphStore.getPort(t.to),o=s.element.getBoundingClientRect(),h=n.element.getBoundingClientRect(),i=this.host.getBoundingClientRect(),d=this.viewportTransformer.getViewportMatrix(),c={x:d.scale*(o.left-i.left)+d.dx,y:d.scale*(o.top-i.top)+d.dy},u={x:d.scale*(h.left-i.left)+d.dx,y:d.scale*(h.top-i.top)+d.dy},w=s.centerFn(o.width*d.scale,o.height*d.scale),f=n.centerFn(h.width*d.scale,h.height*d.scale),v={x:c.x+w.x,y:c.y+w.y},p={x:u.x+f.x,y:u.y+f.y},P=Math.min(v.x,p.x),T=Math.min(v.y,p.y),b=Math.abs(p.x-v.x),W=Math.abs(p.y-v.y);t.shape.svg.style.width=`${b}px`,t.shape.svg.style.height=`${W}px`,t.shape.svg.style.transform=`translate(${P}px, ${T}px)`;const I=v.x<=p.x?1:-1,G=v.y<=p.y?1:-1;t.shape.update({x:b,y:W},I,G,s.direction,n.direction)}updateEdgePriority(e){const t=this.graphStore.getEdge(e);t.shape.svg.style.zIndex=`${t.priority}`}}class D{constructor(e){a(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 M extends Error{constructor(){super(...arguments);a(this,"name","HtmlGraphError")}}class Ee{constructor(e,t,s,n,o,h,i,d){a(this,"nodeIdGenerator",new D(e=>this.graphStore.getNode(e)!==void 0));a(this,"portIdGenerator",new D(e=>this.graphStore.getPort(e)!==void 0));a(this,"edgeIdGenerator",new D(e=>this.graphStore.getEdge(e)!==void 0));this.graphStore=e,this.htmlController=t,this.viewportTransformer=s,this.defaultNodesCenterFn=n,this.defaultPortsCenterFn=o,this.defaultPortsDirection=h,this.defaultNodesPriorityFn=i,this.defaultEdgesPriorityFn=d}attach(e){this.htmlController.attach(e)}detach(){this.htmlController.detach()}addNode(e){const t=this.nodeIdGenerator.create(e.nodeId);if(this.graphStore.getNode(t)!==void 0)throw new M("failed to add node with existing id");this.graphStore.addNode({nodeId:t,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.defaultNodesCenterFn,priority:e.priority??this.defaultNodesPriorityFn()}),this.htmlController.attachNode(t),Array.from(e.ports??[]).forEach(s=>{this.markPort({portId:s.id,element:s.element,nodeId:t,centerFn:s.centerFn,direction:s.direction})})}markPort(e){const t=this.portIdGenerator.create(e.portId);if(this.graphStore.getPort(t)!==void 0)throw new M("failed to add port with existing id");if(this.graphStore.getNode(e.nodeId)===void 0)throw new M("failed to set port on nonexisting node");this.graphStore.addPort({portId:t,element:e.element,nodeId:e.nodeId,centerFn:e.centerFn??this.defaultPortsCenterFn,direction:e.direction??this.defaultPortsDirection})}addEdge(e){const t=this.edgeIdGenerator.create(e.edgeId);if(this.graphStore.getEdge(t)!==void 0)throw new M("failed to add edge with existing id");if(this.graphStore.getPort(e.from)===void 0)throw new M("failed to add edge from nonexisting port");if(this.graphStore.getPort(e.to)===void 0)throw new M("failed to add edge to nonexisting port");const s=this.resolveEdgeType(e.from,e.to);this.graphStore.addEdge({edgeId:t,from:e.from,to:e.to,shape:e.shapeFactory(s),priority:e.priority??this.defaultEdgesPriorityFn()}),this.htmlController.attachEdge(t)}updateEdge(e){const t=this.graphStore.getEdge(e.edgeId);if(t===void 0)throw new M("failed to update nonexisting edge");if(e.shape!==void 0){const s=this.resolveEdgeType(t.from,t.to);t.shape=e.shape(s),this.htmlController.updateEdgeShape(e.edgeId)}e.priority!==void 0&&(t.priority=e.priority,this.htmlController.updateEdgePriority(e.edgeId)),this.htmlController.updateEdge(e.edgeId)}updatePort(e,t){const s=this.graphStore.getPort(e);if(s===void 0)throw new M("failed to unset nonexisting port");s.direction=t.direction??s.direction,s.centerFn=t.centerFn??s.centerFn,this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.htmlController.updateEdge(o)})}updateNode(e,t){const s=this.graphStore.getNode(e);if(s===void 0)throw new M("failed to update nonexisting node");s.x=(t==null?void 0:t.x)??s.x,s.y=(t==null?void 0:t.y)??s.y,s.centerFn=(t==null?void 0:t.centerFn)??s.centerFn,s.priority=(t==null?void 0:t.priority)??s.priority,this.htmlController.updateNodeCoordinates(e),this.htmlController.updateNodePriority(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.htmlController.updateEdge(o)})}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new M("failed to remove nonexisting edge");this.htmlController.detachEdge(e),this.graphStore.removeEdge(e)}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new M("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(e).forEach(t=>{this.removeEdge(t)}),this.graphStore.removePort(e)}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new M("failed to remove nonexisting node");this.graphStore.getNodePortIds(e).forEach(t=>{this.unmarkPort(t)}),this.htmlController.detachNode(e),this.graphStore.removeNode(e)}patchViewportMatrix(e){this.viewportTransformer.patchViewportMatrix(e),this.htmlController.applyTransform()}patchContentMatrix(e){this.viewportTransformer.patchContentMatrix(e),this.htmlController.applyTransform()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.clear(),this.htmlController.destroy()}resolveEdgeType(e,t){if(e===t)return S.PortCycle;const s=this.graphStore.getPortNodeId(e),n=this.graphStore.getPortNodeId(t);return s===n?S.NodeCycle:S.Regular}}class ne{constructor(e){a(this,"transformation");a(this,"model");a(this,"canvasController");a(this,"edgeShapeFactory");this.apiOptions=e;const t=ge(this.apiOptions),s=new ye,n=new ue;this.model=new we(n),this.transformation=new me(s);const o=new xe(n,s);this.canvasController=new Ee(n,o,s,t.nodes.centerFn,t.ports.centerFn,t.ports.direction,t.nodes.priorityFn,t.edges.priorityFn),this.edgeShapeFactory=t.edges.shapeFactory}attach(e){return this.canvasController.attach(e),this}detach(){return this.canvasController.detach(),this}addNode(e){return this.canvasController.addNode({nodeId:e.id,element:e.element,x:e.x,y:e.y,ports:e.ports,centerFn:e.centerFn,priority:e.priority}),this}updateNode(e,t){return this.canvasController.updateNode(e,{x:t==null?void 0:t.x,y:t==null?void 0:t.y,priority:t==null?void 0:t.priority,centerFn:t==null?void 0:t.centerFn}),this}removeNode(e){return this.canvasController.removeNode(e),this}addEdge(e){const t=e.shape!==void 0?Y(e.shape):this.edgeShapeFactory;return this.canvasController.addEdge({edgeId:e.id,from:e.from,to:e.to,shapeFactory:t,priority:e.priority}),this}updateEdge(e,t){const s=(t==null?void 0:t.shape)!==void 0?Y(t.shape):void 0;return this.canvasController.updateEdge({edgeId:e,shape:s,priority:t==null?void 0:t.priority}),this}removeEdge(e){return this.canvasController.removeEdge(e),this}markPort(e){return this.canvasController.markPort({portId:e.id,element:e.element,nodeId:e.nodeId,centerFn:e.centerFn,direction:e.direction}),this}updatePortMark(e,t){return this.canvasController.updatePort(e,{direction:t==null?void 0:t.direction,centerFn:t==null?void 0:t.centerFn}),this}unmarkPort(e){return this.canvasController.unmarkPort(e),this}patchViewportMatrix(e){return this.canvasController.patchViewportMatrix(e),this}patchContentMatrix(e){return this.canvasController.patchContentMatrix(e),this}clear(){return this.canvasController.clear(),this}destroy(){this.clear(),this.canvasController.destroy()}}const R=(r,e,t)=>{const{x:s,y:n,width:o,height:h}=r.getBoundingClientRect();return e>=s&&e<=s+o&&t>=n&&t<=n+h},z=(r,e,t)=>e>=0&&e<=r.innerWidth&&t>=0&&t<=r.innerHeight,B=(r,e)=>{e!==null?r.style.cursor=e:r.style.removeProperty("cursor")};class ie{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"maxNodePriority",0);a(this,"nodes",new Map);a(this,"grabbedNodeId",null);a(this,"onNodeDrag");a(this,"onBeforeNodeDrag");a(this,"nodeIdGenerator",new D(e=>this.nodes.has(e)));a(this,"element",null);a(this,"onWindowMouseMove",e=>{if(this.element!==null&&(!R(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)});a(this,"onWindowMouseUp",e=>{e.button===0&&this.cancelMouseDrag()});a(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const t=e.touches[0];if(this.element!==null&&(!R(this.element,t.clientX,t.clientY)||!z(this.window,t.clientX,t.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const s=t.clientX-this.previousTouchCoords.x,n=t.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,s,n),this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY}}});a(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY}:this.cancelTouchDrag()});a(this,"previousTouchCoords",null);a(this,"freezePriority");a(this,"window",window);a(this,"dragCursor");var s,n;this.canvas=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.onNodeDrag=((s=t==null?void 0:t.events)==null?void 0:s.onNodeDrag)??(()=>{}),this.onBeforeNodeDrag=((n=t==null?void 0:t.events)==null?void 0:n.onBeforeNodeDrag)??(()=>!0),this.freezePriority=(t==null?void 0:t.moveOnTop)===!1,this.dragCursor=(t==null?void 0:t.dragCursor)!==void 0?t.dragCursor:"grab"}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 t=this.nodeIdGenerator.create(e.id);this.canvas.addNode({...e,id:t}),this.updateMaxNodePriority(t);const s=o=>{if(this.element===null||o.button!==0)return;const h=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:h.x,y:h.y})&&(o.stopImmediatePropagation(),this.grabbedNodeId=t,B(this.element,this.dragCursor),this.moveNodeOnTop(t),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},n=o=>{o.stopImmediatePropagation(),this.previousTouchCoords={x:o.touches[0].clientX,y:o.touches[0].clientY};const h=this.model.getNode(t);this.onBeforeNodeDrag({nodeId:t,element:e.element,x:h.x,y:h.y})&&o.touches.length===1&&(this.grabbedNodeId=t,this.moveNodeOnTop(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};return this.nodes.set(t,{element:e.element,onMouseDown:s,onTouchStart:n}),e.element.addEventListener("mousedown",s),e.element.addEventListener("touchstart",n),this}updateNode(e,t){return this.canvas.updateNode(e,t),this.updateMaxNodePriority(e),this}removeNode(e){const t=this.nodes.get(e);return t!==void 0&&(t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)),this.nodes.delete(e),this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePortMark(e,t){return this.canvas.updatePortMark(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),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,t,s){const n=this.model.getNode(e);if(n===null)return;const o=this.canvas.transformation.getContentMatrix(),h=o.scale*n.x+o.dx,i=o.scale*n.y+o.dy,d=h+t,c=i+s,u=this.canvas.transformation.getViewportMatrix(),w=u.scale*d+u.dx,f=u.scale*c+u.dy;this.canvas.updateNode(e,{x:w,y:f}),this.onNodeDrag({nodeId:e,element:n.element,x:n.x,y:n.y})}updateMaxNodePriority(e){const t=this.model.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,t)}moveNodeOnTop(e){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const t=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(e).forEach(n=>{this.updateEdge(n,{priority:t})})}cancelMouseDrag(){this.grabbedNodeId=null,this.element!==null&&B(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null,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 Ae=r=>{const e=r.maxContentScale,t=r.minContentScale,s=e!==null?1/e:0,n=t!==null?1/t:1/0;return o=>{let h=o.nextTransform.scale,i=o.nextTransform.dx,d=o.nextTransform.dy;return o.nextTransform.scale>n&&o.nextTransform.scale>o.prevTransform.scale&&(h=Math.max(o.prevTransform.scale,n),i=o.prevTransform.dx,d=o.prevTransform.dy),o.nextTransform.scale<s&&o.nextTransform.scale<o.prevTransform.scale&&(h=Math.min(o.prevTransform.scale,s),i=o.prevTransform.dx,d=o.prevTransform.dy),{scale:h,dx:i,dy:d}}},Ce=r=>{const e=r.minX!==null?r.minX:-1/0,t=r.maxX!==null?r.maxX:1/0,s=r.minY!==null?r.minY:-1/0,n=r.maxY!==null?r.maxY:1/0;return o=>{let h=o.nextTransform.dx,i=o.nextTransform.dy;h<e&&h<o.prevTransform.dx&&(h=Math.min(o.prevTransform.dx,e));const d=o.canvasWidth*o.prevTransform.scale;h>t-d&&h>o.prevTransform.dx&&(h=Math.max(o.prevTransform.dx,t-d)),i<s&&i<o.prevTransform.dy&&(i=Math.min(o.prevTransform.dy,s));const c=o.canvasHeight*o.prevTransform.scale;return i>n-c&&i>o.prevTransform.dy&&(i=Math.max(o.prevTransform.dy,n-c)),{scale:o.nextTransform.scale,dx:h,dy:i}}},ae=r=>{if(typeof r=="function")return r;switch(r.type){case"scale-limit":return Ae({minContentScale:r.minContentScale??0,maxContentScale:r.maxContentScale??1/0});case"shift-limit":return Ce({minX:r.minX??-1/0,maxX:r.maxX??1/0,minY:r.minY??-1/0,maxY:r.maxY??1/0})}},Se=r=>e=>r.reduce((t,s)=>s({prevTransform:e.prevTransform,nextTransform:t,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),Me=r=>{var d,c,u,w;const e=(d=r==null?void 0:r.scale)==null?void 0:d.wheelSensitivity,t=e!==void 0?e:1.2,s=r==null?void 0:r.transformPreprocessor;let n;s!==void 0?Array.isArray(s)?n=Se(s.map(f=>ae(f))):n=ae(s):n=f=>f.nextTransform;const o=((c=r==null?void 0:r.shift)==null?void 0:c.cursor)!==void 0?r.shift.cursor:"grab",h=((u=r==null?void 0:r.events)==null?void 0:u.onBeforeTransformStarted)??(()=>{}),i=((w=r==null?void 0:r.events)==null?void 0:w.onTransformFinished)??(()=>{});return{wheelSensitivity:t,onBeforeTransformStarted:h,onTransformFinished:i,transformPreprocessor:n,shiftCursor:o}},j=r=>{const e=[],t=r.touches.length;for(let i=0;i<t;i++)e.push([r.touches[i].clientX,r.touches[i].clientY]);const s=e.reduce((i,d)=>[i[0]+d[0],i[1]+d[1]],[0,0]),n=[s[0]/t,s[1]/t],h=e.map(i=>[i[0]-n[0],i[1]-n[1]]).reduce((i,d)=>i+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:n[0],y:n[1],scale:h/t,touchesCnt:t,touches:e}},Pe=(r,e,t)=>({scale:r.scale,dx:r.dx+r.scale*e,dy:r.dy+r.scale*t}),Te=(r,e,t,s)=>({scale:r.scale*e,dx:r.scale*(1-e)*t+r.dx,dy:r.scale*(1-e)*s+r.dy});class he{constructor(e,t){a(this,"model");a(this,"transformation");a(this,"element",null);a(this,"prevTouches",null);a(this,"window",window);a(this,"onMouseDown",e=>{this.element===null||e.button!==0||(B(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp))});a(this,"onWindowMouseMove",e=>{if(this.element===null||!R(this.element,e.clientX,e.clientY)||!z(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const t=-e.movementX,s=-e.movementY;this.moveViewport(this.element,t,s)});a(this,"onWindowMouseUp",e=>{this.element===null||e.button!==0||this.stopMouseDrag()});a(this,"onWheelScroll",e=>{e.preventDefault();const{left:t,top:s}=this.element.getBoundingClientRect(),n=e.clientX-t,o=e.clientY-s,i=1/(e.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.scaleViewport(this.element,i,n,o)});a(this,"onTouchStart",e=>{this.prevTouches=j(e),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish)});a(this,"onWindowTouchMove",e=>{const t=this.element;if(t===null)return;const s=j(e);if(!s.touches.every(o=>R(t,o[0],o[1])&&z(this.window,o[0],o[1]))){this.stopTouchDrag();return}if((s.touchesCnt===1||s.touchesCnt===2)&&this.moveViewport(t,-(s.x-this.prevTouches.x),-(s.y-this.prevTouches.y)),s.touchesCnt===2){const{left:o,top:h}=t.getBoundingClientRect(),i=this.prevTouches.x-o,d=this.prevTouches.y-h,u=1/(s.scale/this.prevTouches.scale);this.scaleViewport(t,u,i,d)}this.prevTouches=s});a(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=j(e):this.stopTouchDrag()});a(this,"observer",new ResizeObserver(()=>{const e=this.canvas.transformation.getViewportMatrix(),{width:t,height:s}=this.element.getBoundingClientRect(),n=this.options.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:t,canvasHeight:s});this.canvas.patchViewportMatrix(n),this.options.onTransformFinished()}));a(this,"options");this.canvas=e,this.options=Me(t),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,t){return this.canvas.updateNode(e,t),this}removeNode(e){return this.canvas.removeNode(e),this}markPort(e){return this.canvas.markPort(e),this}updatePortMark(e,t){return this.canvas.updatePortMark(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),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,t,s){this.options.onBeforeTransformStarted();const n=this.transformation.getViewportMatrix(),o=Pe(n,t,s),{width:h,height:i}=e.getBoundingClientRect(),d=this.options.transformPreprocessor({prevTransform:n,nextTransform:o,canvasWidth:h,canvasHeight:i});this.canvas.patchViewportMatrix(d),this.options.onTransformFinished()}scaleViewport(e,t,s,n){this.options.onBeforeTransformStarted();const o=this.canvas.transformation.getViewportMatrix(),h=Te(o,t,s,n),{width:i,height:d}=e.getBoundingClientRect(),c=this.options.transformPreprocessor({prevTransform:o,nextTransform:h,canvasWidth:i,canvasHeight:d});this.canvas.patchViewportMatrix(c),this.options.onTransformFinished()}stopMouseDrag(){this.element!==null&&B(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class Ne{constructor(){a(this,"keyMap",new Map);a(this,"valueMap",new Map)}set(e,t){this.keyMap.set(e,t),this.valueMap.set(t,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 t=this.keyMap.get(e);t!==void 0&&this.valueMap.delete(t),this.keyMap.delete(e)}deleteByValue(e){const t=this.valueMap.get(e);t!==void 0&&this.keyMap.delete(t),this.valueMap.delete(e)}forEach(e){this.keyMap.forEach((t,s)=>{e(t,s)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class de{constructor(e){a(this,"transformation");a(this,"model");a(this,"nodes",new Ne);a(this,"nodeIdGenerator",new D(e=>this.nodes.hasKey(e)));a(this,"nodesResizeObserver");this.canvas=e,this.nodesResizeObserver=new window.ResizeObserver(t=>{t.forEach(s=>{const n=s.target;this.reactNodeChange(n)})}),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 t=this.nodeIdGenerator.create(e.id);return this.canvas.addNode({...e,id:t}),this.nodes.set(t,e.element),this.nodesResizeObserver.observe(e.element),this}updateNode(e,t){return this.canvas.updateNode(e,t),this}removeNode(e){this.canvas.removeNode(e);const t=this.nodes.getByKey(e);return this.nodes.deleteByKey(e),this.nodesResizeObserver.unobserve(t),this}markPort(e){return this.canvas.markPort(e),this}updatePortMark(e,t){return this.canvas.updatePortMark(e,t),this}unmarkPort(e){return this.canvas.unmarkPort(e),this}addEdge(e){return this.canvas.addEdge(e),this}updateEdge(e,t){return this.canvas.updateEdge(e,t),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()}reactNodeChange(e){const t=this.nodes.getByValue(e);this.canvas.updateNode(t),this.model.getNodeAdjacentEdgeIds(t).forEach(n=>{this.canvas.updateEdge(n)})}}class Le{constructor(){a(this,"coreOptions");a(this,"dragOptions");a(this,"transformOptions");a(this,"isDraggable",!1);a(this,"isTransformable",!1);a(this,"hasResizeReactiveNodes",!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}setResizableReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}build(){let e=new ne(this.coreOptions);return this.hasResizeReactiveNodes&&(e=new de(e)),this.isDraggable&&(e=new ie(e,this.dragOptions)),this.isTransformable&&(e=new he(e,this.transformOptions)),e}}y.BezierEdgeShape=U,y.CanvasCore=ne,y.CycleCircleEdgeShape=Q,y.CycleSquareEdgeShape=k,y.DetourBezierEdgeShape=Z,y.DetourStraightEdgeShape=V,y.EdgeType=S,y.HorizontalEdgeShape=_,y.HtmlGraphBuilder=Le,y.HtmlGraphError=M,y.ResizeReactiveNodesCanvas=de,y.StraightEdgeShape=K,y.UserDraggableNodesCanvas=ie,y.UserTransformableCanvas=he,y.VerticalEdgeShape=J,y.createBezierEdgeShapeFactory=O,y.createHorizontalEdgeShapeFactory=te,y.createStraightEdgeShareFactory=q,y.createVerticalEdgeShapeFactory=ee,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+(function(x,E){typeof exports=="object"&&typeof module<"u"?E(exports):typeof define=="function"&&define.amd?define(["exports"],E):(x=typeof globalThis<"u"?globalThis:x||self,E(x.HTMLGraph={}))})(this,function(x){"use strict";var It=Object.defineProperty;var mt=(x,E,y)=>E in x?It(x,E,{enumerable:!0,configurable:!0,writable:!0,value:y}):x[E]=y;var s=(x,E,y)=>mt(x,typeof E!="symbol"?E+"":E,y);const E=(e,t)=>({x:e/2,y:t/2}),y=(e,t,o)=>({x:t.x*e.x-t.y*e.y+((1-t.x)*o.x+t.y*o.y),y:t.y*e.x+t.x*e.y+((1-t.x)*o.y-t.y*o.x)}),T=(e,t,o)=>({x:t*Math.cos(e),y:o*Math.sin(e)}),g={x:0,y:0},M=(e,t,o,r)=>{const i=[g,{x:o,y:r},{x:o,y:-r}].map(l=>y(l,e,g)).map(l=>({x:l.x+t.x,y:l.y+t.y})),c=`M ${i[0].x} ${i[0].y}`,d=`L ${i[1].x} ${i[1].y}`,h=`L ${i[2].x} ${i[2].y}`;return`${c} ${d} ${h}`},N=(e,t)=>{const o=[];if(e.length>0&&o.push(`M ${e[0].x} ${e[0].y}`),e.length===2&&o.push(`L ${e[1].x} ${e[1].y}`),e.length>2){const r=e.length-1;let n=0,i=0,c=0;e.forEach((d,h)=>{let l=0,a=0,w=0;const f=h>0,S=h<r,v=f&&S;if(f&&(l=-n,a=-i,w=c),S){const ot=e[h+1];n=ot.x-d.x,i=ot.y-d.y,c=Math.sqrt(n*n+i*i)}const L=c!==0?Math.min((v?t:0)/c,h<r-1?.5:1):0,q=v?{x:d.x+n*L,y:d.y+i*L}:d,tt=w!==0?Math.min((v?t:0)/w,h>1?.5:1):0,et=v?{x:d.x+l*tt,y:d.y+a*tt}:d;h>0&&o.push(`L ${et.x} ${et.y}`),v&&o.push(`C ${d.x} ${d.y} ${d.x} ${d.y} ${q.x} ${q.y}`)})}return o.join(" ")},D=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.style.pointerEvents="none",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.overflow="visible",e},I=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g");return e.style.transformOrigin="50% 50%",e},m=(e,t)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",e),o.setAttribute("stroke-width",`${t}`),o.setAttribute("fill","none"),o},C=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",e),t},$=(e,t)=>{const o={x:e.x+e.width/2,y:e.y+e.height/2},r={x:t.x+t.width/2,y:t.y+t.height/2},n=Math.min(o.x,r.x),i=Math.min(o.y,r.y),c=Math.abs(r.x-o.x),d=Math.abs(r.y-o.y),h=o.x<=r.x?1:-1,l=o.y<=r.y?1:-1;return{x:n,y:i,width:c,height:d,flipX:h,flipY:l}},rt=e=>{const t=y({x:e.arrowLength,y:g.y},e.fromVect,g),o=y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to),r={x:t.x+e.fromVect.x*e.curvature,y:t.y+e.fromVect.y*e.curvature},n={x:o.x-e.toVect.x*e.curvature,y:o.y-e.toVect.y*e.curvature},i=`M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`,c=e.hasSourceArrow?"":`M ${g.x} ${g.y} L ${t.x} ${t.y} `,d=e.hasTargetArrow?"":` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;return`${c}${i}${d}`},it=e=>{const t=e.hasSourceArrow?y({x:e.arrowLength,y:g.y},e.fromVect,g):g,o=e.hasTargetArrow?y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength,n=Math.cos(e.detourDirection)*e.detourDistance,i=Math.sin(e.detourDirection)*e.detourDistance,c=n*e.flipX,d=i*e.flipY,h=y({x:r,y:g.y},e.fromVect,g),l={x:h.x+c,y:h.y+d},a=y({x:e.to.x-r,y:e.to.y},e.toVect,e.to),w={x:a.x+c,y:a.y+d},f={x:(l.x+w.x)/2,y:(l.y+w.y)/2},S={x:h.x+e.curvature*e.fromVect.x,y:h.y+e.curvature*e.fromVect.y},v={x:a.x-e.curvature*e.toVect.x,y:a.y-e.curvature*e.toVect.y},k={x:h.x+c,y:h.y+d},L={x:a.x+c,y:a.y+d};return[`M ${t.x} ${t.y}`,`L ${h.x} ${h.y}`,`C ${S.x} ${S.y} ${k.x} ${k.y} ${f.x} ${f.y}`,`C ${L.x} ${L.y} ${v.x} ${v.y} ${a.x} ${a.y}`,`L ${o.x} ${o.y}`].join(" ")},nt=e=>{const t=e.hasSourceArrow?y({x:e.arrowLength,y:g.y},e.fromVect,g):g,o=e.hasTargetArrow?y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=r-e.roundness,i=y({x:n,y:g.y},e.fromVect,g),c=y({x:e.to.x-n,y:e.to.y},e.toVect,e.to),d=Math.max((i.x+c.x)/2,r),h=e.to.y/2,l={x:e.flipX>0?d:-r,y:i.y},a={x:l.x,y:h},w={x:e.flipX>0?e.to.x-d:e.to.x+r,y:c.y},f={x:w.x,y:h};return N([t,i,l,a,f,w,c,o],e.roundness)},W=e=>{const t=e.hasSourceArrow?y({x:e.arrowLength,y:g.y},e.fromVect,g):g,o=e.hasTargetArrow?y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=y({x:r,y:g.y},e.fromVect,g),i=Math.cos(e.detourDirection)*e.detourDistance,c=Math.sin(e.detourDirection)*e.detourDistance,d=i*e.flipX,h=c*e.flipY,l={x:n.x+d,y:n.y+h},a=y({x:e.to.x-r,y:e.to.y},e.toVect,e.to),w={x:a.x+d,y:a.y+h};return N([t,n,l,w,a,o],e.roundness)},st=e=>{const t=e.hasSourceArrow?y({x:e.arrowLength,y:g.y},e.fromVect,g):g,o=e.hasTargetArrow?y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=y({x:r,y:g.y},e.fromVect,g),i=y({x:e.to.x-r,y:e.to.y},e.toVect,e.to);return N([t,n,i,o],e.roundness)},ht=e=>{const t=e.hasSourceArrow?y({x:e.arrowLength,y:g.y},e.fromVect,g):g,o=e.hasTargetArrow?y({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=r-e.roundness,i=y({x:n,y:g.y},e.fromVect,g),c=y({x:e.to.x-n,y:e.to.y},e.toVect,e.to),d=Math.max((i.y+c.y)/2,r),h=e.to.x/2,l={x:i.x,y:e.flipY>0?d:-r},a={x:h,y:l.y},w={x:c.x,y:e.flipY>0?e.to.y-d:e.to.y+r},f={x:h,y:w.y};return N([t,i,l,a,f,w,c,o],e.roundness)},F=e=>{const t=e.arrowOffset,o=e.side,r=e.arrowLength+t,n=r+2*o,c=[{x:e.arrowLength,y:g.y},{x:r,y:g.y},{x:r,y:e.side},{x:n,y:e.side},{x:n,y:-e.side},{x:r,y:-e.side},{x:r,y:g.y},{x:e.arrowLength,y:g.y}].map(h=>y(h,e.fromVect,g)),d=`M ${g.x} ${g.y} L ${c[0].x} ${c[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":d}${N(c,e.roundness)}`},dt=e=>{const t=e.smallRadius,o=e.radius,r=Math.sqrt(t*t+o*o),n=t+o,i=e.arrowLength+r*(1-o/n),c=t*o/n,h=[{x:e.arrowLength,y:g.y},{x:i,y:c},{x:i,y:-c}].map(w=>y(w,e.fromVect,g)),l=[`M ${h[0].x} ${h[0].y}`,`A ${t} ${t} 0 0 1 ${h[1].x} ${h[1].y}`,`A ${o} ${o} 0 1 0 ${h[2].x} ${h[2].y}`,`A ${t} ${t} 0 0 1 ${h[0].x} ${h[0].y}`].join(" "),a=`M 0 0 L ${h[0].x} ${h[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":a}${l}`},u=Object.freeze({color:"#5c5c5c",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 B{constructor(t){s(this,"svg",D());s(this,"group",I());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"arrowLength");s(this,"arrowWidth");s(this,"curvature");s(this,"portCycleRadius");s(this,"portCycleSmallRadius");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??u.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??u.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??u.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??u.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??u.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??u.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??u.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??u.hasTargetArrow;const o=(t==null?void 0:t.color)??u.color,r=(t==null?void 0:t.width)??u.width;this.svg.appendChild(this.group),this.line=m(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=C(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=C(o),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:i,flipX:c,flipY:d}=$(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${i}px`,this.group.style.transform=`scale(${c}, ${d})`;const h=T(t.source.direction,c,d),l=T(t.target.direction,c,d),a={x:n,y:i};let w,f=l,S=-this.arrowLength;if(t.source.portId===t.target.portId?(w=dt({fromVect:h,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=h,S=this.arrowLength):t.source.nodeId===t.target.nodeId?w=it({to:a,fromVect:h,toVect:l,flipX:c,flipY:d,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):w=rt({to:a,fromVect:h,toVect:l,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",w),this.sourceArrow){const v=M(h,g,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=M(f,a,S,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class z{constructor(t){s(this,"svg",D());s(this,"group",I());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"arrowLength");s(this,"arrowWidth");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??u.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??u.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??u.cycleSquareSide;const o=(t==null?void 0:t.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??u.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??u.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??u.hasTargetArrow;const r=(t==null?void 0:t.color)??u.color,n=(t==null?void 0:t.width)??u.width;this.svg.appendChild(this.group),this.line=m(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=C(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=C(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:i,flipX:c,flipY:d}=$(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${i}px`,this.group.style.transform=`scale(${c}, ${d})`;const h=T(t.source.direction,c,d),l=T(t.target.direction,c,d),a={x:n,y:i};let w,f=l,S=-this.arrowLength;if(t.source.portId===t.target.portId?(w=F({fromVect:h,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=h,S=this.arrowLength):t.source.nodeId===t.target.nodeId?w=W({to:a,fromVect:h,toVect:l,flipX:c,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):w=nt({to:a,fromVect:h,toVect:l,flipX:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",w),this.sourceArrow){const v=M(h,g,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=M(f,a,S,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class G{constructor(t){s(this,"svg",D());s(this,"group",I());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"arrowLength");s(this,"arrowWidth");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??u.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??u.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??u.cycleSquareSide;const o=(t==null?void 0:t.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??u.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??u.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??u.hasTargetArrow;const r=(t==null?void 0:t.color)??u.color,n=(t==null?void 0:t.width)??u.width;this.svg.appendChild(this.group),this.line=m(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=C(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=C(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:i,flipX:c,flipY:d}=$(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${i}px`,this.group.style.transform=`scale(${c}, ${d})`;const h=T(t.source.direction,c,d),l=T(t.target.direction,c,d),a={x:n,y:i};let w,f=l,S=-this.arrowLength;if(t.source.portId===t.target.portId?(w=F({fromVect:h,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=h,S=this.arrowLength):t.source.nodeId===t.target.nodeId?w=W({to:a,fromVect:h,toVect:l,flipX:c,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):w=st({to:a,fromVect:h,toVect:l,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",w),this.sourceArrow){const v=M(h,g,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=M(f,a,S,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class H{constructor(t){s(this,"svg",D());s(this,"group",I());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"arrowLength");s(this,"arrowWidth");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??u.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??u.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??u.cycleSquareSide;const o=(t==null?void 0:t.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??u.detourDirectionVertical,this.detourDistance=(t==null?void 0:t.detourDistance)??u.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??u.hasTargetArrow;const r=(t==null?void 0:t.color)??u.color,n=(t==null?void 0:t.width)??u.width;this.svg.appendChild(this.group),this.line=m(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=C(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=C(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:i,flipX:c,flipY:d}=$(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${i}px`,this.group.style.transform=`scale(${c}, ${d})`;const h=T(t.source.direction,c,d),l=T(t.target.direction,c,d),a={x:n,y:i};let w,f=l,S=-this.arrowLength;if(t.source.portId===t.target.portId?(w=F({fromVect:h,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=h,S=this.arrowLength):t.source.nodeId===t.target.nodeId?w=W({to:a,fromVect:h,toVect:l,flipX:c,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):w=ht({to:a,fromVect:h,toVect:l,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",w),this.sourceArrow){const v=M(h,g,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=M(f,a,S,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const ct=e=>{if(typeof e=="function")return e;switch(e==null?void 0:e.type){case"straight":return()=>new G({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"horizontal":return()=>new z({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"vertical":return()=>new H({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});default:return()=>new B({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleRadius:e.cycleRadius,smallCycleRadius:e.smallCycleRadius,curvature:e.curvature,detourDistance:e.detourDistance,detourDirection:e.detourDirection})}},R=e=>()=>e,j=R(0),Y=()=>{let e=0;return()=>e++},lt=(e,t)=>{let o=j,r=j;e==="incremental"&&(o=Y()),t==="incremental"&&(r=Y());const n=Y();return e==="shared-incremental"&&(o=n),t==="shared-incremental"&&(r=n),typeof e=="number"&&(o=R(e)),typeof t=="number"&&(r=R(t)),typeof e=="function"&&(o=e),typeof t=="function"&&(r=t),{nodesPriorityFn:o,edgesPriorityFn:r}},at=e=>{var o,r,n,i,c;const t=lt((o=e==null?void 0:e.nodes)==null?void 0:o.priority,(r=e==null?void 0:e.edges)==null?void 0:r.priority);return{nodes:{centerFn:((n=e==null?void 0:e.nodes)==null?void 0:n.centerFn)??E,priorityFn:t.nodesPriorityFn},ports:{direction:((i=e==null?void 0:e.ports)==null?void 0:i.direction)??0},edges:{shapeFactory:ct(((c=e==null?void 0:e.edges)==null?void 0:c.shape)??{}),priorityFn:t.edgesPriorityFn}}};class gt{constructor(){s(this,"nodes",new Map);s(this,"ports",new Map);s(this,"nodePorts",new Map);s(this,"portNodeId",new Map);s(this,"edges",new Map);s(this,"incommingEdges",new Map);s(this,"outcommingEdges",new Map);s(this,"cycleEdges",new Map)}addNode(t){this.nodes.set(t.nodeId,{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}),this.nodePorts.set(t.nodeId,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}removeNode(t){this.nodes.delete(t),this.nodePorts.delete(t)}addPort(t){this.ports.set(t.portId,{element:t.element,direction:t.direction}),this.cycleEdges.set(t.portId,new Set),this.incommingEdges.set(t.portId,new Set),this.outcommingEdges.set(t.portId,new Set),this.portNodeId.set(t.portId,t.nodeId),this.nodePorts.get(t.nodeId).set(t.portId,t.element)}getPort(t){return this.ports.get(t)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(t){const o=this.nodePorts.get(t);if(o!==void 0)return Array.from(o.keys())}getPortNodeId(t){return this.portNodeId.get(t)}removePort(t){const o=this.portNodeId.get(t);this.portNodeId.delete(t),this.nodePorts.get(o).delete(t),this.ports.delete(t)}addEdge(t){this.edges.set(t.edgeId,{from:t.from,to:t.to,shape:t.shape,priority:t.priority}),t.from!==t.to?(this.outcommingEdges.get(t.from).add(t.edgeId),this.incommingEdges.get(t.to).add(t.edgeId)):this.cycleEdges.get(t.from).add(t.edgeId)}updateEdgeFrom(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:o,to:r.to,shape:r.shape,priority:r.priority})}updateEdgeTo(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:r.from,to:o,shape:r.shape,priority:r.priority})}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(t){return this.edges.get(t)}removeEdge(t){const o=this.edges.get(t),r=o.from,n=o.to;this.cycleEdges.get(r).delete(t),this.cycleEdges.get(n).delete(t),this.incommingEdges.get(r).delete(t),this.incommingEdges.get(n).delete(t),this.outcommingEdges.get(r).delete(t),this.outcommingEdges.get(n).delete(t),this.edges.delete(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()}getPortIncomingEdgeIds(t){return Array.from(this.incommingEdges.get(t))}getPortOutcomingEdgeIds(t){return Array.from(this.outcommingEdges.get(t))}getPortCycleEdgeIds(t){return Array.from(this.cycleEdges.get(t))}getPortAdjacentEdgeIds(t){return[...this.getPortIncomingEdgeIds(t),...this.getPortOutcomingEdgeIds(t),...this.getPortCycleEdgeIds(t)]}getNodeIncomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(n=>{r=[...r,...this.getPortIncomingEdgeIds(n)]}),r}getNodeOutcomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(n=>{r=[...r,...this.getPortOutcomingEdgeIds(n)]}),r}getNodeCycleEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(n=>{r=[...r,...this.getPortCycleEdgeIds(n)]}),r}getNodeAdjacentEdgeIds(t){return[...this.getNodeIncomingEdgeIds(t),...this.getNodeOutcomingEdgeIds(t),...this.getNodeCycleEdgeIds(t)]}}class ut{constructor(t){this.graphStore=t}getNode(t){const o=this.graphStore.getNode(t);return o===void 0?null:{element:o.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(t){const o=this.graphStore.getPort(t);return o===void 0?null:{element:o.element,direction:o.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(t){return this.graphStore.getNodePortIds(t)}getPortNodeId(t){return this.graphStore.getPortNodeId(t)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(t){const o=this.graphStore.getEdge(t);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(t){return this.graphStore.getPortIncomingEdgeIds(t)}getPortOutcomingEdgeIds(t){return this.graphStore.getPortOutcomingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutcomingEdgeIds(t){return this.graphStore.getNodeOutcomingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNodeAdjacentEdgeIds(t)}}const U=e=>({scale:1/e.scale,dx:-e.dx/e.scale,dy:-e.dy/e.scale}),O={scale:1,dx:0,dy:0};class wt{constructor(){s(this,"viewportMatrix",O);s(this,"contentMatrix",O)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,dx:t.dx??this.viewportMatrix.dx,dy:t.dy??this.viewportMatrix.dy},this.contentMatrix=U(this.viewportMatrix)}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,dx:t.dx??this.contentMatrix.dx,dy:t.dy??this.contentMatrix.dy},this.viewportMatrix=U(this.contentMatrix)}}class yt{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}const ft=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},vt=()=>{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},xt=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.visibility="hidden",e};class St{constructor(t,o){s(this,"canvasWrapper",null);s(this,"host",ft());s(this,"container",vt());s(this,"nodeIdToWrapperElementMap",new Map);s(this,"edgeIdToElementMap",new Map);this.graphStore=t,this.viewportTransformer=o,this.host.appendChild(this.container)}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`}attachNode(t){const o=this.graphStore.getNode(t),r=xt();r.appendChild(o.element),this.container.appendChild(r),this.nodeIdToWrapperElementMap.set(t,r),this.updateNodeCoordinates(t),this.updateNodePriority(t),r.style.visibility="visible"}detachNode(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.removeChild(o.element),this.container.removeChild(r),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const o=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,o.shape.svg),this.container.appendChild(o.shape.svg),this.renderEdge(t),this.updateEdgePriority(t)}detachEdge(t){const o=this.graphStore.getEdge(t);this.container.removeChild(o.shape.svg),this.edgeIdToElementMap.delete(t)}clear(){this.edgeIdToElementMap.forEach((t,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((t,o)=>{this.detachNode(o)})}destroy(){this.clear(),this.detach(),this.host.removeChild(this.container)}updateNodeCoordinates(t){const o=this.nodeIdToWrapperElementMap.get(t),r=this.graphStore.getNode(t),{width:n,height:i}=r.element.getBoundingClientRect(),c=this.viewportTransformer.getViewportMatrix().scale,d=r.centerFn(n,i),h=r.x-c*d.x,l=r.y-c*d.y;o.style.transform=`translate(${h}px, ${l}px)`}updateNodePriority(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.style.zIndex=`${o.priority}`}updateEdgeShape(t){const o=this.edgeIdToElementMap.get(t);this.container.removeChild(o);const r=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,r.shape.svg),this.container.appendChild(r.shape.svg)}renderEdge(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPort(o.from),n=this.graphStore.getPort(o.to),i=r.element.getBoundingClientRect(),c=n.element.getBoundingClientRect(),d=this.host.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix(),l={x:h.scale*(i.left-d.left)+h.dx,y:h.scale*(i.top-d.top)+h.dy},a={x:h.scale*(c.left-d.left)+h.dx,y:h.scale*(c.top-d.top)+h.dy},w={x:l.x,y:l.y,width:i.width*h.scale,height:i.height*h.scale,direction:r.direction,portId:o.from,nodeId:this.graphStore.getPortNodeId(o.from)},f={x:a.x,y:a.y,width:c.width*h.scale,height:c.height*h.scale,direction:n.direction,portId:o.to,nodeId:this.graphStore.getPortNodeId(o.to)};o.shape.render({source:w,target:f})}updateEdgePriority(t){const o=this.graphStore.getEdge(t);o.shape.svg.style.zIndex=`${o.priority}`}}class P{constructor(t){s(this,"counter",0);this.checkExists=t}create(t){if(t!==void 0)return t;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class A extends Error{constructor(){super(...arguments);s(this,"name","HtmlGraphError")}}class Et{constructor(t,o,r,n,i,c,d){s(this,"nodeIdGenerator",new P(t=>this.graphStore.getNode(t)!==void 0));s(this,"portIdGenerator",new P(t=>this.graphStore.getPort(t)!==void 0));s(this,"edgeIdGenerator",new P(t=>this.graphStore.getEdge(t)!==void 0));this.graphStore=t,this.htmlController=o,this.viewportTransformer=r,this.defaultNodesCenterFn=n,this.defaultPortsDirection=i,this.defaultNodesPriorityFn=c,this.defaultEdgesPriorityFn=d}attach(t){this.htmlController.attach(t)}detach(){this.htmlController.detach()}addNode(t){const o=this.nodeIdGenerator.create(t.nodeId);if(this.graphStore.getNode(o)!==void 0)throw new A("failed to add node with existing id");this.graphStore.addNode({nodeId:o,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.defaultNodesCenterFn,priority:t.priority??this.defaultNodesPriorityFn()}),this.htmlController.attachNode(o),Array.from(t.ports??[]).forEach(r=>{this.markPort({portId:r.id,element:r.element,nodeId:o,direction:r.direction})})}markPort(t){const o=this.portIdGenerator.create(t.portId);if(this.graphStore.getPort(o)!==void 0)throw new A("failed to add port with existing id");if(this.graphStore.getNode(t.nodeId)===void 0)throw new A("failed to set port on nonexisting node");this.graphStore.addPort({portId:o,element:t.element,nodeId:t.nodeId,direction:t.direction??this.defaultPortsDirection})}addEdge(t){const o=this.edgeIdGenerator.create(t.edgeId);if(this.graphStore.getEdge(o)!==void 0)throw new A("failed to add edge with existing id");if(this.graphStore.getPort(t.from)===void 0)throw new A("failed to add edge from nonexisting port");if(this.graphStore.getPort(t.to)===void 0)throw new A("failed to add edge to nonexisting port");this.graphStore.addEdge({edgeId:o,from:t.from,to:t.to,shape:t.shape,priority:t.priority??this.defaultEdgesPriorityFn()}),this.htmlController.attachEdge(o)}updateEdge(t){const o=this.graphStore.getEdge(t.edgeId);if(o===void 0)throw new A("failed to update nonexisting edge");t.shape!==void 0&&(o.shape=t.shape,this.htmlController.updateEdgeShape(t.edgeId)),t.priority!==void 0&&(o.priority=t.priority,this.htmlController.updateEdgePriority(t.edgeId)),t.from!==void 0&&this.graphStore.updateEdgeFrom(t.edgeId,t.from),t.to!==void 0&&this.graphStore.updateEdgeTo(t.edgeId,t.to),this.htmlController.renderEdge(t.edgeId)}updatePort(t,o){const r=this.graphStore.getPort(t);if(r===void 0)throw new A("failed to unset nonexisting port");r.direction=o.direction??r.direction,this.graphStore.getPortAdjacentEdgeIds(t).forEach(i=>{this.htmlController.renderEdge(i)})}updateNode(t,o){const r=this.graphStore.getNode(t);if(r===void 0)throw new A("failed to update nonexisting node");r.x=(o==null?void 0:o.x)??r.x,r.y=(o==null?void 0:o.y)??r.y,r.centerFn=(o==null?void 0:o.centerFn)??r.centerFn,r.priority=(o==null?void 0:o.priority)??r.priority,this.htmlController.updateNodeCoordinates(t),this.htmlController.updateNodePriority(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(i=>{this.htmlController.renderEdge(i)})}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new A("failed to remove nonexisting edge");this.htmlController.detachEdge(t),this.graphStore.removeEdge(t)}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new A("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(t).forEach(o=>{this.removeEdge(o)}),this.graphStore.removePort(t)}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new A("failed to remove nonexisting node");this.graphStore.getNodePortIds(t).forEach(o=>{this.unmarkPort(o)}),this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportMatrix(t){this.viewportTransformer.patchViewportMatrix(t),this.htmlController.applyTransform()}patchContentMatrix(t){this.viewportTransformer.patchContentMatrix(t),this.htmlController.applyTransform()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.clear(),this.htmlController.destroy()}}class K{constructor(t){s(this,"transformation");s(this,"model");s(this,"canvasController");s(this,"edgeShapeFactory");this.apiOptions=t;const o=at(this.apiOptions),r=new wt,n=new gt;this.model=new ut(n),this.transformation=new yt(r);const i=new St(n,r);this.canvasController=new Et(n,i,r,o.nodes.centerFn,o.ports.direction,o.nodes.priorityFn,o.edges.priorityFn),this.edgeShapeFactory=o.edges.shapeFactory}attach(t){return this.canvasController.attach(t),this}detach(){return this.canvasController.detach(),this}addNode(t){return this.canvasController.addNode({nodeId:t.id,element:t.element,x:t.x,y:t.y,ports:t.ports,centerFn:t.centerFn,priority:t.priority}),this}updateNode(t,o){return this.canvasController.updateNode(t,{x:o==null?void 0:o.x,y:o==null?void 0:o.y,priority:o==null?void 0:o.priority,centerFn:o==null?void 0:o.centerFn}),this}removeNode(t){return this.canvasController.removeNode(t),this}addEdge(t){return this.canvasController.addEdge({edgeId:t.id,from:t.from,to:t.to,shape:t.shape??this.edgeShapeFactory(),priority:t.priority}),this}updateEdge(t,o){return this.canvasController.updateEdge({edgeId:t,shape:o==null?void 0:o.shape,priority:o==null?void 0:o.priority,from:o==null?void 0:o.from,to:o==null?void 0:o.to}),this}removeEdge(t){return this.canvasController.removeEdge(t),this}markPort(t){return this.canvasController.markPort({portId:t.id,element:t.element,nodeId:t.nodeId,direction:t.direction}),this}updatePort(t,o){return this.canvasController.updatePort(t,{direction:o==null?void 0:o.direction}),this}unmarkPort(t){return this.canvasController.unmarkPort(t),this}patchViewportMatrix(t){return this.canvasController.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvasController.patchContentMatrix(t),this}clear(){return this.canvasController.clear(),this}destroy(){this.clear(),this.canvasController.destroy()}}const b=(e,t,o)=>{const{x:r,y:n,width:i,height:c}=e.getBoundingClientRect();return t>=r&&t<=r+i&&o>=n&&o<=n+c},p=(e,t,o)=>t>=0&&t<=e.innerWidth&&o>=0&&o<=e.innerHeight,V=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")};class _{constructor(t,o){s(this,"model");s(this,"transformation");s(this,"maxNodePriority",0);s(this,"nodes",new Map);s(this,"grabbedNodeId",null);s(this,"onNodeDrag");s(this,"onBeforeNodeDrag");s(this,"onNodeDragFinished");s(this,"nodeIdGenerator",new P(t=>this.nodes.has(t)));s(this,"element",null);s(this,"onWindowMouseMove",t=>{if(this.element!==null&&(!b(this.element,t.clientX,t.clientY)||!p(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});s(this,"onWindowMouseUp",t=>{t.button===0&&this.cancelMouseDrag()});s(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const o=t.touches[0];if(this.element!==null&&(!b(this.element,o.clientX,o.clientY)||!p(this.window,o.clientX,o.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const r=o.clientX-this.previousTouchCoords.x,n=o.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,r,n),this.previousTouchCoords={x:t.touches[0].clientX,y:t.touches[0].clientY}}});s(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.previousTouchCoords={x:t.touches[0].clientX,y:t.touches[0].clientY}:this.cancelTouchDrag()});s(this,"previousTouchCoords",null);s(this,"freezePriority");s(this,"window",window);s(this,"dragCursor");var r,n,i;this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.onNodeDrag=((r=o==null?void 0:o.events)==null?void 0:r.onNodeDrag)??(()=>{}),this.onBeforeNodeDrag=((n=o==null?void 0:o.events)==null?void 0:n.onBeforeNodeDrag)??(()=>!0),this.onNodeDragFinished=((i=o==null?void 0:o.events)==null?void 0:i.onNodeDragFinished)??(()=>{}),this.freezePriority=(o==null?void 0:o.moveOnTop)===!1,this.dragCursor=(o==null?void 0:o.dragCursor)!==void 0?o.dragCursor:"grab"}attach(t){return this.detach(),this.element=t,this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element=null),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);this.canvas.addNode({...t,id:o}),this.updateMaxNodePriority(o);const r=i=>{if(this.element===null||i.button!==0)return;const c=this.model.getNode(o);this.onBeforeNodeDrag({nodeId:o,element:t.element,x:c.x,y:c.y})&&(i.stopImmediatePropagation(),this.grabbedNodeId=o,V(this.element,this.dragCursor),this.moveNodeOnTop(o),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},n=i=>{i.stopImmediatePropagation(),this.previousTouchCoords={x:i.touches[0].clientX,y:i.touches[0].clientY};const c=this.model.getNode(o);this.onBeforeNodeDrag({nodeId:o,element:t.element,x:c.x,y:c.y})&&i.touches.length===1&&(this.grabbedNodeId=o,this.moveNodeOnTop(o),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};return this.nodes.set(o,{element:t.element,onMouseDown:r,onTouchStart:n}),t.element.addEventListener("mousedown",r),t.element.addEventListener("touchstart",n),this}updateNode(t,o){return this.canvas.updateNode(t,o),this.updateMaxNodePriority(t),this}removeNode(t){const o=this.nodes.get(t);return o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(t),this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),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}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(t,o,r){const n=this.model.getNode(t);if(n===null)return;const i=this.canvas.transformation.getContentMatrix(),c=i.scale*n.x+i.dx,d=i.scale*n.y+i.dy,h=c+o,l=d+r,a=this.canvas.transformation.getViewportMatrix(),w=a.scale*h+a.dx,f=a.scale*l+a.dy;this.canvas.updateNode(t,{x:w,y:f}),this.onNodeDrag({nodeId:t,element:n.element,x:n.x,y:n.y})}updateMaxNodePriority(t){const o=this.model.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(t){if(this.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(t).forEach(n=>{this.updateEdge(n,{priority:o})})}cancelMouseDrag(){const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.element!==null&&V(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.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 At=e=>{const t=e.minX!==null?e.minX:-1/0,o=e.maxX!==null?e.maxX:1/0,r=e.minY!==null?e.minY:-1/0,n=e.maxY!==null?e.maxY:1/0;return i=>{let c=i.nextTransform.dx,d=i.nextTransform.dy;c<t&&c<i.prevTransform.dx&&(c=Math.min(i.prevTransform.dx,t));const h=i.canvasWidth*i.prevTransform.scale;c>o-h&&c>i.prevTransform.dx&&(c=Math.max(i.prevTransform.dx,o-h)),d<r&&d<i.prevTransform.dy&&(d=Math.min(i.prevTransform.dy,r));const l=i.canvasHeight*i.prevTransform.scale;return d>n-l&&d>i.prevTransform.dy&&(d=Math.max(i.prevTransform.dy,n-l)),{scale:i.nextTransform.scale,dx:c,dy:d}}},Tt=e=>{const t=e.maxContentScale,o=e.minContentScale,r=t!==null?1/t:0,n=o!==null?1/o:1/0;return i=>{let c=i.nextTransform.scale,d=i.nextTransform.dx,h=i.nextTransform.dy;return i.nextTransform.scale>n&&i.nextTransform.scale>i.prevTransform.scale&&(c=Math.max(i.prevTransform.scale,n),d=i.prevTransform.dx,h=i.prevTransform.dy),i.nextTransform.scale<r&&i.nextTransform.scale<i.prevTransform.scale&&(c=Math.min(i.prevTransform.scale,r),d=i.prevTransform.dx,h=i.prevTransform.dy),{scale:c,dx:d,dy:h}}},Mt=e=>t=>e.reduce((o,r)=>r({prevTransform:t.prevTransform,nextTransform:o,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight}),t.nextTransform),J=e=>{if(typeof e=="function")return e;switch(e.type){case"scale-limit":return Tt({minContentScale:e.minContentScale??0,maxContentScale:e.maxContentScale??1/0});case"shift-limit":return At({minX:e.minX??-1/0,maxX:e.maxX??1/0,minY:e.minY??-1/0,maxY:e.maxY??1/0})}},Ct=e=>{var h,l,a,w;const t=(h=e==null?void 0:e.scale)==null?void 0:h.mouseWheelSensitivity,o=t!==void 0?t:1.2,r=e==null?void 0:e.transformPreprocessor;let n;r!==void 0?Array.isArray(r)?n=Mt(r.map(f=>J(f))):n=J(r):n=f=>f.nextTransform;const i=((l=e==null?void 0:e.shift)==null?void 0:l.cursor)!==void 0?e.shift.cursor:"grab",c=((a=e==null?void 0:e.events)==null?void 0:a.onBeforeTransformStarted)??(()=>{}),d=((w=e==null?void 0:e.events)==null?void 0:w.onTransformFinished)??(()=>{});return{wheelSensitivity:o,onBeforeTransformStarted:c,onTransformFinished:d,transformPreprocessor:n,shiftCursor:i}},X=e=>{const t=[],o=e.touches.length;for(let d=0;d<o;d++)t.push([e.touches[d].clientX,e.touches[d].clientY]);const r=t.reduce((d,h)=>[d[0]+h[0],d[1]+h[1]],[0,0]),n=[r[0]/o,r[1]/o],c=t.map(d=>[d[0]-n[0],d[1]-n[1]]).reduce((d,h)=>d+Math.sqrt(h[0]*h[0]+h[1]*h[1]),0);return{x:n[0],y:n[1],scale:c/o,touchesCnt:o,touches:t}},Nt=(e,t,o)=>({scale:e.scale,dx:e.dx+e.scale*t,dy:e.dy+e.scale*o}),Pt=(e,t,o,r)=>({scale:e.scale*t,dx:e.scale*(1-t)*o+e.dx,dy:e.scale*(1-t)*r+e.dy});class Q{constructor(t,o){s(this,"model");s(this,"transformation");s(this,"element",null);s(this,"prevTouches",null);s(this,"window",window);s(this,"onMouseDown",t=>{this.element===null||t.button!==0||(V(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp))});s(this,"onWindowMouseMove",t=>{if(this.element===null||!b(this.element,t.clientX,t.clientY)||!p(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const o=-t.movementX,r=-t.movementY;this.moveViewport(this.element,o,r)});s(this,"onWindowMouseUp",t=>{this.element===null||t.button!==0||this.stopMouseDrag()});s(this,"onWheelScroll",t=>{t.preventDefault();const{left:o,top:r}=this.element.getBoundingClientRect(),n=t.clientX-o,i=t.clientY-r,d=1/(t.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.scaleViewport(this.element,d,n,i)});s(this,"onTouchStart",t=>{this.prevTouches=X(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish)});s(this,"onWindowTouchMove",t=>{const o=this.element;if(o===null)return;const r=X(t);if(!r.touches.every(i=>b(o,i[0],i[1])&&p(this.window,i[0],i[1]))){this.stopTouchDrag();return}if((r.touchesCnt===1||r.touchesCnt===2)&&this.moveViewport(o,-(r.x-this.prevTouches.x),-(r.y-this.prevTouches.y)),r.touchesCnt===2){const{left:i,top:c}=o.getBoundingClientRect(),d=this.prevTouches.x-i,h=this.prevTouches.y-c,a=1/(r.scale/this.prevTouches.scale);this.scaleViewport(o,a,d,h)}this.prevTouches=r});s(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=X(t):this.stopTouchDrag()});s(this,"observer",new ResizeObserver(()=>{const t=this.canvas.transformation.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),n=this.options.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:o,canvasHeight:r});this.canvas.patchViewportMatrix(n),this.options.onTransformFinished()}));s(this,"options");this.canvas=t,this.options=Ct(o),this.transformation=this.canvas.transformation,this.model=this.canvas.model}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}addNode(t){return this.canvas.addNode(t),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),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}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(t,o,r){this.options.onBeforeTransformStarted();const n=this.transformation.getViewportMatrix(),i=Nt(n,o,r),{width:c,height:d}=t.getBoundingClientRect(),h=this.options.transformPreprocessor({prevTransform:n,nextTransform:i,canvasWidth:c,canvasHeight:d});this.canvas.patchViewportMatrix(h),this.options.onTransformFinished()}scaleViewport(t,o,r,n){this.options.onBeforeTransformStarted();const i=this.canvas.transformation.getViewportMatrix(),c=Pt(i,o,r,n),{width:d,height:h}=t.getBoundingClientRect(),l=this.options.transformPreprocessor({prevTransform:i,nextTransform:c,canvasWidth:d,canvasHeight:h});this.canvas.patchViewportMatrix(l),this.options.onTransformFinished()}stopMouseDrag(){this.element!==null&&V(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class Lt{constructor(){s(this,"keyMap",new Map);s(this,"valueMap",new Map)}set(t,o){this.keyMap.set(t,o),this.valueMap.set(o,t)}hasKey(t){return this.keyMap.has(t)}hasValue(t){return this.valueMap.has(t)}getByKey(t){return this.keyMap.get(t)}getByValue(t){return this.valueMap.get(t)}deleteByKey(t){const o=this.keyMap.get(t);o!==void 0&&this.valueMap.delete(o),this.keyMap.delete(t)}deleteByValue(t){const o=this.valueMap.get(t);o!==void 0&&this.keyMap.delete(o),this.valueMap.delete(t)}forEach(t){this.keyMap.forEach((o,r)=>{t(o,r)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class Z{constructor(t){s(this,"transformation");s(this,"model");s(this,"nodes",new Lt);s(this,"nodeIdGenerator",new P(t=>this.nodes.hasKey(t)));s(this,"nodesResizeObserver");this.canvas=t,this.nodesResizeObserver=new window.ResizeObserver(o=>{o.forEach(r=>{const n=r.target;this.reactNodeChange(n)})}),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(t){return this.canvas.attach(t),this}detach(){return this.canvas.detach(),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);return this.canvas.addNode({...t,id:o}),this.nodes.set(o,t.element),this.nodesResizeObserver.observe(t.element),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){this.canvas.removeNode(t);const o=this.nodes.getByKey(t);return this.nodes.deleteByKey(t),this.nodesResizeObserver.unobserve(o),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),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.nodesResizeObserver.disconnect(),this.nodes.clear(),this}destroy(){this.clear(),this.canvas.destroy()}reactNodeChange(t){const o=this.nodes.getByValue(t);this.canvas.updateNode(o),this.model.getNodeAdjacentEdgeIds(o).forEach(n=>{this.canvas.updateEdge(n)})}}class Dt{constructor(){s(this,"coreOptions");s(this,"dragOptions");s(this,"transformOptions");s(this,"isDraggable",!1);s(this,"isTransformable",!1);s(this,"hasResizeReactiveNodes",!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}setResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}build(){let t=new K(this.coreOptions);return this.hasResizeReactiveNodes&&(t=new Z(t)),this.isDraggable&&(t=new _(t,this.dragOptions)),this.isTransformable&&(t=new Q(t,this.transformOptions)),t}}x.BezierEdgeShape=B,x.CanvasCore=K,x.HorizontalEdgeShape=z,x.HtmlGraphBuilder=Dt,x.HtmlGraphError=A,x.ResizeReactiveNodesCanvas=Z,x.StraightEdgeShape=G,x.UserDraggableNodesCanvas=_,x.UserTransformableCanvas=Q,x.VerticalEdgeShape=H,Object.defineProperty(x,Symbol.toStringTag,{value:"Module"})});

package/package.json

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