@html-graph/html-graph 2.1.0 → 2.2.0

package/dist/html-graph.umd.cjs

@@ -1 +1 @@
-(function(E,S){typeof exports=="object"&&typeof module<"u"?S(exports):typeof define=="function"&&define.amd?define(["exports"],S):(E=typeof globalThis<"u"?globalThis:E||self,S(E.HtmlGraph={}))})(this,function(E){"use strict";var Xt=Object.defineProperty;var Bt=(E,S,L)=>S in E?Xt(E,S,{enumerable:!0,configurable:!0,writable:!0,value:L}):E[S]=L;var i=(E,S,L)=>Bt(E,typeof S!="symbol"?S+"":S,L);class S{constructor(){i(this,"callbacks",new Set)}subscribe(t){this.callbacks.add(t)}unsubscribe(t){this.callbacks.delete(t)}emit(t){this.callbacks.forEach(o=>{o(t)})}}const L=()=>{const e=new S;return[e,e]},K=e=>({scale:1/e.scale,x:-e.x/e.scale,y:-e.y/e.scale}),_={scale:1,x:0,y:0};class nt{constructor(){i(this,"viewportMatrix",_);i(this,"contentMatrix",_);i(this,"emitter");i(this,"onAfterUpdate");[this.emitter,this.onAfterUpdate]=L()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,x:t.x??this.viewportMatrix.x,y:t.y??this.viewportMatrix.y},this.contentMatrix=K(this.viewportMatrix),this.emitter.emit()}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,x:t.x??this.contentMatrix.x,y:t.y??this.contentMatrix.y},this.viewportMatrix=K(this.contentMatrix),this.emitter.emit()}}class ht{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class ct{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.getNode(t)===void 0?null: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.getPort(t)===void 0?null:this.graphStore.getPortIncomingEdgeIds(t)}getPortOutcomingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutcomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(t)}}class dt{constructor(t,o,r){i(this,"viewport");i(this,"graph");this.graphStore=t,this.viewportTransformer=o,this.htmlView=r,this.graph=new ct(this.graphStore),this.viewport=new ht(this.viewportTransformer)}attach(t){this.htmlView.attach(t)}detach(){this.htmlView.detach()}addNode(t){this.graphStore.addNode(t),this.htmlView.attachNode(t.id)}updateNode(t,o){const r=this.graphStore.getNode(t);r.x=(o==null?void 0:o.x)??r.x,r.y=(o==null?void 0:o.y)??r.y,r.centerFn=o.centerFn??r.centerFn,this.htmlView.updateNodeCoordinates(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(h=>{this.htmlView.renderEdge(h)}),o.priority!==void 0&&(r.priority=o.priority,this.htmlView.updateNodePriority(t))}removeNode(t){this.graphStore.getNodePortIds(t).forEach(o=>{this.unmarkPort(o)}),this.htmlView.detachNode(t),this.graphStore.removeNode(t)}markPort(t){this.graphStore.addPort(t)}updatePort(t,o){const r=this.graphStore.getPort(t);r.direction=o.direction??r.direction,this.graphStore.getPortAdjacentEdgeIds(t).forEach(h=>{this.htmlView.renderEdge(h)})}unmarkPort(t){this.graphStore.getPortAdjacentEdgeIds(t).forEach(o=>{this.removeEdge(o)}),this.graphStore.removePort(t)}addEdge(t){this.graphStore.addEdge(t),this.htmlView.attachEdge(t.id)}updateEdge(t,o){const r=this.graphStore.getEdge(t);o.shape!==void 0&&(r.shape=o.shape,this.htmlView.updateEdgeShape(t)),o.from!==void 0&&this.graphStore.updateEdgeFrom(t,o.from),o.to!==void 0&&this.graphStore.updateEdgeTo(t,o.to),this.htmlView.renderEdge(t),o.priority!==void 0&&(r.priority=o.priority,this.htmlView.updateEdgePriority(t))}removeEdge(t){this.htmlView.detachEdge(t),this.graphStore.removeEdge(t)}patchViewportMatrix(t){this.viewportTransformer.patchViewportMatrix(t)}patchContentMatrix(t){this.viewportTransformer.patchContentMatrix(t)}clear(){this.htmlView.clear(),this.graphStore.clear()}destroy(){this.clear(),this.htmlView.destroy()}}const W=(e,t,o)=>{const{x:r,y:n,width:h,height:s}=e.getBoundingClientRect();return t>=r&&t<=r+h&&o>=n&&o<=n+s},F=(e,t,o)=>t>=0&&t<=e.innerWidth&&o>=0&&o<=e.innerHeight,I=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")},at=e=>{var g,y,x,v,p,T;const t=((g=e==null?void 0:e.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((y=e==null?void 0:e.events)==null?void 0:y.onBeforeNodeDrag)??(()=>!0),r=((x=e==null?void 0:e.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),n=(e==null?void 0:e.moveOnTop)===!1,h=(v=e==null?void 0:e.mouse)==null?void 0:v.dragCursor,s=h!==void 0?h:"grab",c=(p=e==null?void 0:e.mouse)==null?void 0:p.mouseDownEventVerifier,d=c!==void 0?c:N=>N.button===0,a=(T=e==null?void 0:e.mouse)==null?void 0:T.mouseUpEventVerifier;return{freezePriority:n,dragCursor:s,mouseDownEventVerifier:d,mouseUpEventVerifier:a!==void 0?a:N=>N.button===0,onNodeDrag:t,onBeforeNodeDrag:o,onNodeDragFinished:r}};class lt{constructor(t,o){i(this,"graph");i(this,"viewport");i(this,"maxNodePriority",0);i(this,"nodes",new Map);i(this,"grabbedNodeId",null);i(this,"element",null);i(this,"onWindowMouseMove",t=>{if(this.element!==null&&(!W(this.element,t.clientX,t.clientY)||!F(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});i(this,"onWindowMouseUp",t=>{this.options.mouseUpEventVerifier(t)&&this.cancelMouseDrag()});i(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const o=t.touches[0];if(this.element!==null&&(!W(this.element,o.clientX,o.clientY)||!F(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}}});i(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});i(this,"previousTouchCoords",null);i(this,"window",window);i(this,"options");this.canvas=t,this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.options=at(o??{})}attach(t){this.detach(),this.element=t,this.canvas.attach(this.element)}detach(){this.canvas.detach(),this.element!==null&&(this.element=null)}addNode(t){this.canvas.addNode(t),this.updateMaxNodePriority(t.id);const o=n=>{if(this.element===null||!this.options.mouseDownEventVerifier(n))return;const h=this.graph.getNode(t.id);this.options.onBeforeNodeDrag({nodeId:t.id,element:t.element,x:h.x,y:h.y})&&(n.stopImmediatePropagation(),this.grabbedNodeId=t.id,I(this.element,this.options.dragCursor),this.moveNodeOnTop(t.id),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},r=n=>{if(n.touches.length!==1)return;n.stopImmediatePropagation(),this.previousTouchCoords={x:n.touches[0].clientX,y:n.touches[0].clientY};const h=this.graph.getNode(t.id);this.options.onBeforeNodeDrag({nodeId:t.id,element:t.element,x:h.x,y:h.y})&&(this.grabbedNodeId=t.id,this.moveNodeOnTop(t.id),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};this.nodes.set(t.id,{element:t.element,onMouseDown:o,onTouchStart:r}),t.element.addEventListener("mousedown",o),t.element.addEventListener("touchstart",r)}updateNode(t,o){this.canvas.updateNode(t,o),this.updateMaxNodePriority(t)}removeNode(t){const o=this.nodes.get(t);o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(t),this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){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}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(t,o,r){const n=this.graph.getNode(t);if(n===null)return;const h=this.canvas.viewport.getContentMatrix(),s=h.scale*n.x+h.x,c=h.scale*n.y+h.y,d=s+o,a=c+r,l=this.canvas.viewport.getViewportMatrix(),g=l.scale*d+l.x,y=l.scale*a+l.y;this.canvas.updateNode(t,{x:g,y}),this.options.onNodeDrag({nodeId:t,element:n.element,x:g,y})}updateMaxNodePriority(t){const o=this.graph.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(t){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.graph.getNodeAdjacentEdgeIds(t).forEach(n=>{this.updateEdge(n,{priority:o})})}cancelMouseDrag(){const t=this.graph.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.element!==null&&I(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.graph.getNode(this.grabbedNodeId);t!==null&&this.options.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 gt=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 h=>{let s=h.nextTransform.x,c=h.nextTransform.y;s<t&&s<h.prevTransform.x&&(s=Math.min(h.prevTransform.x,t));const d=h.canvasWidth*h.prevTransform.scale,a=o-d;s>a&&s>h.prevTransform.x&&(s=Math.max(h.prevTransform.x,a)),c<r&&c<h.prevTransform.y&&(c=Math.min(h.prevTransform.y,r));const l=h.canvasHeight*h.prevTransform.scale,g=n-l;return c>g&&c>h.prevTransform.y&&(c=Math.max(h.prevTransform.y,g)),{scale:h.nextTransform.scale,x:s,y:c}}},ut=e=>{const t=e.maxContentScale,o=e.minContentScale,r=t!==null?1/t:0,n=o!==null?1/o:1/0;return h=>{const s=h.prevTransform,c=h.nextTransform;let d=c.scale,a=c.x,l=c.y;if(c.scale>n&&c.scale>s.scale){d=Math.max(s.scale,n),a=s.x,l=s.y;const g=(d-s.scale)/(c.scale-s.scale);a=s.x+(c.x-s.x)*g,l=s.y+(c.y-s.y)*g}if(c.scale<r&&c.scale<s.scale){d=Math.min(s.scale,r),a=s.x,l=s.y;const g=(d-s.scale)/(c.scale-s.scale);a=s.x+(c.x-s.x)*g,l=s.y+(c.y-s.y)*g}return{scale:d,x:a,y:l}}},wt=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 ut({minContentScale:e.minContentScale??0,maxContentScale:e.maxContentScale??1/0});case"shift-limit":return gt({minX:e.minX??-1/0,maxX:e.maxX??1/0,minY:e.minY??-1/0,maxY:e.maxY??1/0})}},yt=e=>{var v,p,T,N,G,b,C,$,ot,rt,it,st;const t=(v=e==null?void 0:e.scale)==null?void 0:v.mouseWheelSensitivity,o=t!==void 0?t:1.2,r=e==null?void 0:e.transformPreprocessor;let n;r!==void 0?Array.isArray(r)?n=wt(r.map(m=>J(m))):n=J(r):n=m=>m.nextTransform;const h=((p=e==null?void 0:e.shift)==null?void 0:p.cursor)!==void 0?e.shift.cursor:"grab",s=((T=e==null?void 0:e.events)==null?void 0:T.onBeforeTransformChange)??(()=>{}),c=((N=e==null?void 0:e.events)==null?void 0:N.onTransformChange)??(()=>{}),d=(G=e==null?void 0:e.shift)==null?void 0:G.mouseDownEventVerifier,a=d!==void 0?d:m=>m.button===0,l=(b=e==null?void 0:e.shift)==null?void 0:b.mouseUpEventVerifier,g=l!==void 0?l:m=>m.button===0,y=(C=e==null?void 0:e.scale)==null?void 0:C.mouseWheelEventVerifier,x=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:(($=e==null?void 0:e.events)==null?void 0:$.onTransformStarted)??(()=>{}),onTransformFinished:((ot=e==null?void 0:e.events)==null?void 0:ot.onTransformFinished)??(()=>{}),onBeforeTransformChange:s,onTransformChange:c,transformPreprocessor:n,shiftCursor:h,mouseDownEventVerifier:a,mouseUpEventVerifier:g,mouseWheelEventVerifier:x,scaleWheelFinishTimeout:((rt=e==null?void 0:e.scale)==null?void 0:rt.wheelFinishTimeout)??500,onResizeTransformStarted:((it=e==null?void 0:e.events)==null?void 0:it.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((st=e==null?void 0:e.events)==null?void 0:st.onResizeTransformFinished)??(()=>{})}},R=e=>{const t=[],o=e.touches.length;for(let c=0;c<o;c++)t.push([e.touches[c].clientX,e.touches[c].clientY]);const r=t.reduce((c,d)=>[c[0]+d[0],c[1]+d[1]],[0,0]),n=[r[0]/o,r[1]/o],s=t.map(c=>[c[0]-n[0],c[1]-n[1]]).reduce((c,d)=>c+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:n[0],y:n[1],scale:s/o,touchesCnt:o,touches:t}},vt=(e,t,o)=>({scale:e.scale,x:e.x+e.scale*t,y:e.y+e.scale*o}),ft=(e,t,o,r)=>({scale:e.scale*t,x:e.scale*(1-t)*o+e.x,y:e.scale*(1-t)*r+e.y});class Q{constructor(t,o){i(this,"graph");i(this,"viewport");i(this,"element",null);i(this,"prevTouches",null);i(this,"window",window);i(this,"wheelFinishTimer",null);i(this,"onMouseDown",t=>{this.element===null||!this.options.mouseDownEventVerifier(t)||(I(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});i(this,"onWindowMouseMove",t=>{if(this.element===null||!W(this.element,t.clientX,t.clientY)||!F(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const o=-t.movementX,r=-t.movementY;this.moveViewport(this.element,o,r)});i(this,"onWindowMouseUp",t=>{this.element===null||!this.options.mouseUpEventVerifier(t)||this.stopMouseDrag()});i(this,"onWheelScroll",t=>{if(!this.options.mouseWheelEventVerifier(t))return;t.preventDefault();const{left:o,top:r}=this.element.getBoundingClientRect(),n=t.clientX-o,h=t.clientY-r,c=1/(t.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.wheelFinishTimer===null&&this.options.onTransformStarted(),this.scaleViewport(this.element,c,n,h),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.options.onTransformFinished(),this.wheelFinishTimer=null},this.options.scaleWheelFinishTimeout)});i(this,"onTouchStart",t=>{if(this.prevTouches!==null){this.prevTouches=R(t);return}this.prevTouches=R(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});i(this,"onWindowTouchMove",t=>{const o=this.element;if(o===null)return;const r=R(t);if(!r.touches.every(h=>W(o,h[0],h[1])&&F(this.window,h[0],h[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:h,top:s}=o.getBoundingClientRect(),c=this.prevTouches.x-h,d=this.prevTouches.y-s,l=1/(r.scale/this.prevTouches.scale);this.scaleViewport(o,l,c,d)}this.prevTouches=r});i(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=R(t):this.stopTouchDrag()});i(this,"observer",new ResizeObserver(()=>{const t=this.canvas.viewport.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),n=this.options.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:o,canvasHeight:r});this.options.onResizeTransformStarted(),this.canvas.patchViewportMatrix(n),this.options.onResizeTransformFinished()}));i(this,"options");this.canvas=t,this.options=yt(o),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph}attach(t){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)}detach(){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)}addNode(t){this.canvas.addNode(t)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){this.canvas.clear()}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(t,o,r){const n=this.viewport.getViewportMatrix(),h=vt(n,o,r),{width:s,height:c}=t.getBoundingClientRect(),d=this.options.transformPreprocessor({prevTransform:n,nextTransform:h,canvasWidth:s,canvasHeight:c});this.performTransform(d)}scaleViewport(t,o,r,n){const h=this.canvas.viewport.getViewportMatrix(),s=ft(h,o,r,n),{width:c,height:d}=t.getBoundingClientRect(),a=this.options.transformPreprocessor({prevTransform:h,nextTransform:s,canvasWidth:c,canvasHeight:d});this.performTransform(a)}stopMouseDrag(){this.element!==null&&I(this.element,null),this.removeMouseDragListeners(),this.options.onTransformFinished()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.options.onTransformFinished()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}performTransform(t){this.options.onBeforeTransformChange(),this.canvas.patchViewportMatrix(t),this.options.onTransformChange()}}class xt{constructor(){i(this,"keyMap",new Map);i(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 Et{constructor(t){i(this,"viewport");i(this,"graph");i(this,"nodes",new xt);i(this,"nodesResizeObserver");i(this,"window",window);this.canvas=t,this.nodesResizeObserver=new this.window.ResizeObserver(o=>{o.forEach(r=>{const n=r.target;this.handleNodeResize(n)})}),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph}attach(t){this.canvas.attach(t)}detach(){this.canvas.detach()}addNode(t){this.canvas.addNode(t),this.nodes.set(t.id,t.element),this.nodesResizeObserver.observe(t.element)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t);const o=this.nodes.getByKey(t);this.nodes.deleteByKey(t),this.nodesResizeObserver.unobserve(o)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){this.canvas.clear(),this.nodesResizeObserver.disconnect(),this.nodes.clear()}destroy(){this.clear(),this.canvas.destroy()}handleNodeResize(t){const o=this.nodes.getByValue(t);this.canvas.updateNode(o,{}),this.graph.getNodeAdjacentEdgeIds(o).forEach(n=>{this.canvas.updateEdge(n,{})})}}class St{constructor(t,o,r,n){i(this,"graph");i(this,"viewport");i(this,"canvas");i(this,"element",null);i(this,"canvasResizeObserver");i(this,"window",window);i(this,"nodeHorizontal");i(this,"nodeVertical");i(this,"viewportWidth",0);i(this,"viewportHeight",0);i(this,"viewportMatrix");i(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});i(this,"updateLoadedArea",t=>{this.loadedArea={xFrom:t.x,xTo:t.x+t.width,yFrom:t.y,yTo:t.y+t.height}});var d,a;this.trigger=o,this.virtualScrollOptions=n,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new this.window.ResizeObserver(l=>{const g=l[0];this.viewportWidth=g.contentRect.width,this.viewportHeight=g.contentRect.height,this.scheduleLoadAreaAroundViewport()});const h=((d=r==null?void 0:r.events)==null?void 0:d.onTransformFinished)??(()=>{}),s=((a=r==null?void 0:r.events)==null?void 0:a.onTransformChange)??(()=>{}),c={...r,events:{...r==null?void 0:r.events,onTransformChange:()=>{const l=this.viewportMatrix;this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),l.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),s()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),h()}}};this.canvas=new Q(t,c),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.trigger.subscribe(this.updateLoadedArea)}attach(t){this.detach(),this.element=t,this.canvasResizeObserver.observe(this.element),this.canvas.attach(t)}detach(){this.element!==null&&(this.canvasResizeObserver.unobserve(this.element),this.element=null,this.viewportWidth=0,this.viewportHeight=0),this.canvas.detach()}addNode(t){this.canvas.addNode(t)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}patchContentMatrix(t){this.canvas.patchContentMatrix(t),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}clear(){this.canvas.clear()}destroy(){this.trigger.unsubscribe(this.updateLoadedArea),this.canvas.destroy()}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const t=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,r=this.viewportMatrix.x-this.nodeHorizontal,n=this.viewportMatrix.y-this.nodeVertical,h=this.viewportMatrix.x+t+this.nodeHorizontal,s=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<r&&this.loadedArea.xTo>h&&this.loadedArea.yFrom<n&&this.loadedArea.yTo>s||this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const t=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,r=this.viewportMatrix.x-t-this.nodeHorizontal,n=this.viewportMatrix.y-o-this.nodeVertical,h=3*t+2*this.nodeHorizontal,s=3*o+2*this.nodeVertical;this.trigger.emit({x:r,y:n,width:h,height:s})}}const At=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},Tt=()=>{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},pt=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.visibility="hidden",e};class Nt{constructor(t,o){i(this,"canvasWrapper",null);i(this,"host",At());i(this,"container",Tt());i(this,"nodeIdToWrapperElementMap",new Map);i(this,"edgeIdToElementMap",new Map);i(this,"applyTransform",()=>{const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`});this.graphStore=t,this.viewportTransformer=o,this.host.appendChild(this.container),this.viewportTransformer.onAfterUpdate.subscribe(this.applyTransform)}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}attachNode(t){const o=this.graphStore.getNode(t),r=pt();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.viewportTransformer.onAfterUpdate.unsubscribe(this.applyTransform),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:h}=r.element.getBoundingClientRect(),s=this.viewportTransformer.getViewportMatrix().scale,c=r.centerFn(n,h),d=r.x-s*c.x,a=r.y-s*c.y;o.style.transform=`translate(${d}px, ${a}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),h=r.element.getBoundingClientRect(),s=n.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),d=this.viewportTransformer.getViewportMatrix(),a={x:d.scale*(h.left-c.left)+d.x,y:d.scale*(h.top-c.top)+d.y},l={x:d.scale*(s.left-c.left)+d.x,y:d.scale*(s.top-c.top)+d.y},g={x:a.x,y:a.y,width:h.width*d.scale,height:h.height*d.scale,direction:r.direction,portId:o.from,nodeId:this.graphStore.getPortNodeId(o.from)},y={x:l.x,y:l.y,width:s.width*d.scale,height:s.height*d.scale,direction:n.direction,portId:o.to,nodeId:this.graphStore.getPortNodeId(o.to)};o.shape.render({from:g,to:y})}updateEdgePriority(t){const o=this.graphStore.getEdge(t);o.shape.svg.style.zIndex=`${o.priority}`}}class Mt{constructor(t){i(this,"xFrom",1/0);i(this,"yFrom",1/0);i(this,"xTo",1/0);i(this,"yTo",1/0);this.graphStore=t}setRenderingBox(t){this.xFrom=t.x,this.xTo=t.x+t.width,this.yFrom=t.y,this.yTo=t.y+t.height}hasNode(t){const o=this.graphStore.getNode(t);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPortNodeId(o.from),n=this.graphStore.getPortNodeId(o.to),h=this.graphStore.getNode(r),s=this.graphStore.getNode(n),c=Math.min(h.x,s.x),d=Math.max(h.x,s.x),a=Math.min(h.y,s.y),l=Math.max(h.y,s.y);return c<=this.xTo&&d>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class Vt{constructor(t,o,r){i(this,"attachedNodes",new Set);i(this,"attachedEdges",new Set);i(this,"renderingBox");i(this,"updateViewport",t=>{this.renderingBox.setRenderingBox(t);const o=new Set,r=new Set,n=new Set,h=new Set;this.graphStore.getAllNodeIds().forEach(s=>{const c=this.renderingBox.hasNode(s),d=this.attachedNodes.has(s);c&&!d?o.add(s):!c&&d&&r.add(s)}),this.graphStore.getAllEdgeIds().forEach(s=>{const c=this.renderingBox.hasEdge(s),d=this.attachedEdges.has(s),a=this.graphStore.getEdge(s),l=this.graphStore.getPortNodeId(a.from),g=this.graphStore.getPortNodeId(a.to);c&&(this.renderingBox.hasNode(l)||(o.add(l),r.delete(l)),this.renderingBox.hasNode(g)||(o.add(g),r.delete(g))),c&&!d?n.add(s):!c&&d&&h.add(s)}),h.forEach(s=>{this.handleDetachEdge(s)}),r.forEach(s=>{this.handleDetachNode(s)}),o.forEach(s=>{this.attachedNodes.has(s)||this.handleAttachNode(s)}),n.forEach(s=>{this.handleAttachEdge(s)})});this.htmlView=t,this.graphStore=o,this.trigger=r,this.renderingBox=new Mt(this.graphStore),this.trigger.subscribe(this.updateViewport)}attach(t){this.htmlView.attach(t)}detach(){this.htmlView.detach()}attachNode(t){this.renderingBox.hasNode(t)&&this.handleAttachNode(t)}detachNode(t){this.attachedNodes.has(t)&&this.handleDetachNode(t)}attachEdge(t){this.renderingBox.hasEdge(t)&&this.attachEdgeEntities(t)}detachEdge(t){this.attachedEdges.has(t)&&this.handleDetachEdge(t)}updateNodeCoordinates(t){this.attachedNodes.has(t)?this.htmlView.updateNodeCoordinates(t):this.renderingBox.hasNode(t)&&(this.handleAttachNode(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(t){this.attachedNodes.has(t)&&this.htmlView.updateNodePriority(t)}updateEdgeShape(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgeShape(t)}renderEdge(t){this.attachedEdges.has(t)&&this.htmlView.renderEdge(t)}updateEdgePriority(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgePriority(t)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPortNodeId(o.from),n=this.graphStore.getPortNodeId(o.to);this.attachedNodes.has(r)||this.handleAttachNode(r),this.attachedNodes.has(n)||this.handleAttachNode(n),this.handleAttachEdge(t)}handleAttachNode(t){this.attachedNodes.add(t),this.htmlView.attachNode(t)}handleDetachNode(t){this.htmlView.detachNode(t),this.attachedNodes.delete(t)}handleAttachEdge(t){this.attachedEdges.add(t),this.htmlView.attachEdge(t)}handleDetachEdge(t){this.htmlView.detachEdge(t),this.attachedEdges.delete(t)}}class B{constructor(t){i(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);i(this,"name","HtmlGraphError")}}const Pt=(e,t)=>({x:e/2,y:t/2}),H=e=>()=>e,Z=H(0),mt=()=>{let e=0;return()=>e++},Lt=(e,t)=>{let o=Z,r=Z;const n=mt();return e==="incremental"&&(o=n),t==="incremental"&&(r=n),typeof e=="number"&&(o=H(e)),typeof t=="number"&&(r=H(t)),typeof e=="function"&&(o=e),typeof t=="function"&&(r=t),{nodesPriorityFn:o,edgesPriorityFn:r}},f=(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)}),M=(e,t,o)=>({x:t*Math.cos(e),y:o*Math.sin(e)}),u={x:0,y:0},V=(e,t,o,r)=>{const h=[u,{x:o,y:r},{x:o,y:-r}].map(a=>f(a,e,u)).map(a=>({x:a.x+t.x,y:a.y+t.y})),s=`M ${h[0].x} ${h[0].y}`,c=`L ${h[1].x} ${h[1].y}`,d=`L ${h[2].x} ${h[2].y}`;return`${s} ${c} ${d}`},D=(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,h=0,s=0;e.forEach((c,d)=>{let a=0,l=0,g=0;const y=d>0,x=d<r,v=y&&x;if(y&&(a=-n,l=-h,g=s),x){const $=e[d+1];n=$.x-c.x,h=$.y-c.y,s=Math.sqrt(n*n+h*h)}const T=s!==0?Math.min((v?t:0)/s,d<r-1?.5:1):0,N=v?{x:c.x+n*T,y:c.y+h*T}:c,b=g!==0?Math.min((v?t:0)/g,d>1?.5:1):0,C=v?{x:c.x+a*b,y:c.y+l*b}:c;d>0&&o.push(`L ${C.x} ${C.y}`),v&&o.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${N.x} ${N.y}`)})}return o.join(" ")},k=()=>{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},z=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g");return e.style.transformOrigin="50% 50%",e},Y=(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},P=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",e),t},X=(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),h=Math.min(o.y,r.y),s=Math.abs(r.x-o.x),c=Math.abs(r.y-o.y),d=o.x<=r.x?1:-1,a=o.y<=r.y?1:-1;return{x:n,y:h,width:s,height:c,flipX:d,flipY:a}},Dt=e=>{const t=f({x:e.arrowLength,y:u.y},e.fromVect,u),o=f({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},h=`M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`,s=e.hasSourceArrow?"":`M ${u.x} ${u.y} L ${t.x} ${t.y} `,c=e.hasTargetArrow?"":` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;return`${s}${h}${c}`},bt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=Math.sin(e.detourDirection)*e.detourDistance,s=n*e.flipX,c=h*e.flipY,d=f({x:r,y:u.y},e.fromVect,u),a={x:d.x+s,y:d.y+c},l=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:l.x+s,y:l.y+c},y={x:(a.x+g.x)/2,y:(a.y+g.y)/2},x={x:d.x+e.curvature*e.fromVect.x,y:d.y+e.curvature*e.fromVect.y},v={x:l.x-e.curvature*e.toVect.x,y:l.y-e.curvature*e.toVect.y},p={x:d.x+s,y:d.y+c},T={x:l.x+s,y:l.y+c};return[`M ${t.x} ${t.y}`,`L ${d.x} ${d.y}`,`C ${x.x} ${x.y} ${p.x} ${p.y} ${y.x} ${y.y}`,`C ${T.x} ${T.y} ${v.x} ${v.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},Ct=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=f({x:n,y:u.y},e.fromVect,u),s=f({x:e.to.x-n,y:e.to.y},e.toVect,e.to),c=Math.max((h.x+s.x)/2,r),d=e.to.y/2,a={x:e.flipX>0?c:-r,y:h.y},l={x:a.x,y:d},g={x:e.flipX>0?e.to.x-c:e.to.x+r,y:s.y},y={x:g.x,y:d};return D([t,h,a,l,y,g,s,o],e.roundness)},U=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=f({x:r,y:u.y},e.fromVect,u),h=Math.cos(e.detourDirection)*e.detourDistance,s=Math.sin(e.detourDirection)*e.detourDistance,c=h*e.flipX,d=s*e.flipY,a={x:n.x+c,y:n.y+d},l=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:l.x+c,y:l.y+d};return D([t,n,a,g,l,o],e.roundness)},$t=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=f({x:r,y:u.y},e.fromVect,u),h=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to);return D([t,n,h,o],e.roundness)},Wt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=f({x:n,y:u.y},e.fromVect,u),s=f({x:e.to.x-n,y:e.to.y},e.toVect,e.to),c=Math.max((h.y+s.y)/2,r),d=e.to.x/2,a={x:h.x,y:e.flipY>0?c:-r},l={x:d,y:a.y},g={x:s.x,y:e.flipY>0?e.to.y-c:e.to.y+r},y={x:d,y:g.y};return D([t,h,a,l,y,g,s,o],e.roundness)},j=e=>{const t=e.arrowOffset,o=e.side,r=e.arrowLength+t,n=r+2*o,s=[{x:e.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:e.side},{x:n,y:e.side},{x:n,y:-e.side},{x:r,y:-e.side},{x:r,y:u.y},{x:e.arrowLength,y:u.y}].map(d=>f(d,e.fromVect,u)),c=`M ${u.x} ${u.y} L ${s[0].x} ${s[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":c}${D(s,e.roundness)}`},Ft=e=>{const t=e.smallRadius,o=e.radius,r=Math.sqrt(t*t+o*o),n=t+o,h=e.arrowLength+r*(1-o/n),s=t*o/n,d=[{x:e.arrowLength,y:u.y},{x:h,y:s},{x:h,y:-s}].map(g=>f(g,e.fromVect,u)),a=[`M ${d[0].x} ${d[0].y}`,`A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,`A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,`A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`].join(" "),l=`M 0 0 L ${d[0].x} ${d[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":l}${a}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class O{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"curvature");i(this,"portCycleRadius");i(this,"portCycleSmallRadius");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??w.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const o=(t==null?void 0:t.color)??w.color,r=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(o),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=M(t.from.direction,s,c),a=M(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=Ft({fromVect:d,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=bt({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Dt({to:l,fromVect:d,toVect:a,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class q{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=M(t.from.direction,s,c),a=M(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=j({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=U({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Ct({to:l,fromVect:d,toVect:a,flipX:s,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class tt{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=M(t.from.direction,s,c),a=M(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=j({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=U({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=$t({to:l,fromVect:d,toVect:a,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class et{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirectionVertical,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=M(t.from.direction,s,c),a=M(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=j({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=U({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Wt({to:l,fromVect:d,toVect:a,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const It=e=>{if(typeof e=="function")return e;switch(e==null?void 0:e.type){case"straight":return()=>new tt({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 q({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 et({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 O({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})}},Rt=e=>{var o,r,n,h,s;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)??Pt,priorityFn:t.nodesPriorityFn},ports:{direction:((h=e==null?void 0:e.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:It(((s=e==null?void 0:e.edges)==null?void 0:s.shape)??{}),priorityFn:t.edgesPriorityFn}}};class kt{constructor(t,o){i(this,"nodeIdGenerator",new B(t=>this.graph.getNode(t)!==null));i(this,"portIdGenerator",new B(t=>this.graph.getPort(t)!==null));i(this,"edgeIdGenerator",new B(t=>this.graph.getEdge(t)!==null));i(this,"defaults");i(this,"graph");i(this,"viewport");this.controller=t,this.defaults=Rt(o),this.graph=t.graph,this.viewport=t.viewport}attach(t){return this.controller.attach(t),this}detach(){return this.controller.detach(),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);if(this.graph.getNode(o)!==null)throw new A("failed to add node with existing id");return this.controller.addNode({id:o,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.defaults.nodes.centerFn,priority:t.priority??this.defaults.nodes.priorityFn()}),Array.from(t.ports??[]).forEach(r=>{this.markPort({id:r.id,element:r.element,nodeId:o,direction:r.direction})}),this}updateNode(t,o){if(this.graph.getNode(t)===null)throw new A("failed to update nonexisting node");return this.controller.updateNode(t,o??{}),this}removeNode(t){if(this.graph.getNode(t)===null)throw new A("failed to remove nonexisting node");return this.controller.removeNode(t),this}markPort(t){const o=this.portIdGenerator.create(t.id);if(this.graph.getPort(o)!==null)throw new A("failed to add port with existing id");if(this.graph.getNode(t.nodeId)===null)throw new A("failed to set port on nonexisting node");return this.controller.markPort({id:o,element:t.element,nodeId:t.nodeId,direction:t.direction??this.defaults.ports.direction}),this}updatePort(t,o){if(this.graph.getPort(t)===null)throw new A("failed to unset nonexisting port");return this.controller.updatePort(t,o??{}),this}unmarkPort(t){if(this.graph.getPort(t)===null)throw new A("failed to unset nonexisting port");return this.controller.unmarkPort(t),this}addEdge(t){const o=this.edgeIdGenerator.create(t.id);if(this.graph.getEdge(o)!==null)throw new A("failed to add edge with existing id");if(this.graph.getPort(t.from)===null)throw new A("failed to add edge from nonexisting port");if(this.graph.getPort(t.to)===null)throw new A("failed to add edge to nonexisting port");return this.controller.addEdge({id:o,from:t.from,to:t.to,shape:t.shape??this.defaults.edges.shapeFactory(),priority:t.priority??this.defaults.edges.priorityFn()}),this}updateEdge(t,o){if(this.graph.getEdge(t)===null)throw new A("failed to update nonexisting edge");return this.controller.updateEdge(t,o??{}),this}removeEdge(t){if(this.graph.getEdge(t)===null)throw new A("failed to remove nonexisting edge");return this.controller.removeEdge(t),this}patchViewportMatrix(t){return this.controller.patchViewportMatrix(t),this}patchContentMatrix(t){return this.controller.patchContentMatrix(t),this}clear(){return this.controller.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this}destroy(){this.controller.destroy()}}class zt{constructor(){i(this,"nodes",new Map);i(this,"ports",new Map);i(this,"nodePorts",new Map);i(this,"portNodeId",new Map);i(this,"edges",new Map);i(this,"incommingEdges",new Map);i(this,"outcommingEdges",new Map);i(this,"cycleEdges",new Map)}addNode(t){this.nodes.set(t.id,{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}),this.nodePorts.set(t.id,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.id,{element:t.element,direction:t.direction}),this.cycleEdges.set(t.id,new Set),this.incommingEdges.set(t.id,new Set),this.outcommingEdges.set(t.id,new Set),this.portNodeId.set(t.id,t.nodeId),this.nodePorts.get(t.nodeId).set(t.id,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.id,{from:t.from,to:t.to,shape:t.shape,priority:t.priority}),t.from!==t.to?(this.outcommingEdges.get(t.from).add(t.id),this.incommingEdges.get(t.to).add(t.id)):this.cycleEdges.get(t.from).add(t.id)}updateEdgeFrom(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({id: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({id: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.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.nodes.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 Yt{constructor(){i(this,"canvasDefaults",{});i(this,"dragOptions");i(this,"transformOptions");i(this,"virtualScrollOptions");i(this,"hasDraggableNode",!1);i(this,"hasTransformableViewport",!1);i(this,"hasResizeReactiveNodes",!1);i(this,"boxRenderingTrigger")}setDefaults(t){return this.canvasDefaults=t,this}setOptions(t){return this.setDefaults(t),this}enableUserDraggableNodes(t){return this.hasDraggableNode=!0,this.dragOptions=t,this}enableUserTransformableViewport(t){return this.hasTransformableViewport=!0,this.transformOptions=t,this}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(t){return this.boxRenderingTrigger=t,this}enableVirtualScroll(t){return this.virtualScrollOptions=t,this}build(){let t=this.boxRenderingTrigger;this.virtualScrollOptions!==void 0&&t===void 0&&(t=new S);const o=new zt,r=new nt;let n=new Nt(o,r);t!==void 0&&(n=new Vt(n,o,t));let h=new dt(o,r,n);this.hasResizeReactiveNodes&&(h=new Et(h)),this.hasDraggableNode&&(h=new lt(h,this.dragOptions)),this.virtualScrollOptions!==void 0?h=new St(h,t,this.transformOptions,this.virtualScrollOptions):this.hasTransformableViewport&&(h=new Q(h,this.transformOptions));const s=new kt(h,this.canvasDefaults);return this.reset(),s}reset(){this.canvasDefaults={},this.dragOptions=void 0,this.transformOptions=void 0,this.virtualScrollOptions=void 0,this.hasDraggableNode=!1,this.hasTransformableViewport=!1,this.hasResizeReactiveNodes=!1,this.boxRenderingTrigger=void 0}}E.BezierEdgeShape=O,E.CanvasBuilder=Yt,E.EventSubject=S,E.HorizontalEdgeShape=q,E.HtmlGraphError=A,E.StraightEdgeShape=tt,E.VerticalEdgeShape=et,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+(function(E,S){typeof exports=="object"&&typeof module<"u"?S(exports):typeof define=="function"&&define.amd?define(["exports"],S):(E=typeof globalThis<"u"?globalThis:E||self,S(E.HtmlGraph={}))})(this,function(E){"use strict";var Xt=Object.defineProperty;var Bt=(E,S,b)=>S in E?Xt(E,S,{enumerable:!0,configurable:!0,writable:!0,value:b}):E[S]=b;var i=(E,S,b)=>Bt(E,typeof S!="symbol"?S+"":S,b);class S{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.getNode(t)===void 0?null:this.graphStore.getNodePortIds(t)}getPortNodeId(t){var o;return((o=this.graphStore.getPort(t))==null?void 0:o.nodeId)??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.getPort(t)===void 0?null:this.graphStore.getPortIncomingEdgeIds(t)}getPortOutcomingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutcomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(t)}}class b{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class ht{constructor(t,o,r){i(this,"viewport");i(this,"graph");this.graphStore=t,this.viewportStore=o,this.htmlView=r,this.graph=new S(this.graphStore),this.viewport=new b(this.viewportStore)}attach(t){this.htmlView.attach(t)}detach(){this.htmlView.detach()}addNode(t){this.graphStore.addNode(t),this.htmlView.attachNode(t.id)}updateNode(t,o){const r=this.graphStore.getNode(t);r.x=(o==null?void 0:o.x)??r.x,r.y=(o==null?void 0:o.y)??r.y,r.centerFn=o.centerFn??r.centerFn,this.htmlView.updateNodeCoordinates(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(h=>{this.htmlView.renderEdge(h)}),o.priority!==void 0&&(r.priority=o.priority,this.htmlView.updateNodePriority(t))}removeNode(t){this.graphStore.getNodePortIds(t).forEach(o=>{this.unmarkPort(o)}),this.graphStore.removeNode(t),this.htmlView.detachNode(t)}markPort(t){this.graphStore.addPort(t)}updatePort(t,o){const r=this.graphStore.getPort(t);r.direction=o.direction??r.direction,this.graphStore.getPortAdjacentEdgeIds(t).forEach(h=>{this.htmlView.renderEdge(h)})}unmarkPort(t){this.graphStore.getPortAdjacentEdgeIds(t).forEach(o=>{this.removeEdge(o)}),this.graphStore.removePort(t)}addEdge(t){this.graphStore.addEdge(t),this.htmlView.attachEdge(t.id)}updateEdge(t,o){const r=this.graphStore.getEdge(t);o.shape!==void 0&&(r.shape=o.shape,this.htmlView.updateEdgeShape(t)),o.from!==void 0&&this.graphStore.updateEdgeFrom(t,o.from),o.to!==void 0&&this.graphStore.updateEdgeTo(t,o.to),this.htmlView.renderEdge(t),o.priority!==void 0&&(r.priority=o.priority,this.htmlView.updateEdgePriority(t))}removeEdge(t){this.graphStore.removeEdge(t),this.htmlView.detachEdge(t)}patchViewportMatrix(t){this.viewportStore.patchViewportMatrix(t)}patchContentMatrix(t){this.viewportStore.patchContentMatrix(t)}clear(){this.htmlView.clear(),this.graphStore.clear()}destroy(){this.clear(),this.htmlView.destroy()}}const W=(e,t,o)=>{const{x:r,y:n,width:h,height:s}=e.getBoundingClientRect();return t>=r&&t<=r+h&&o>=n&&o<=n+s},I=(e,t,o)=>t>=0&&t<=e.innerWidth&&o>=0&&o<=e.innerHeight,F=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")},ct=e=>{var g,y,x,v,p,T;const t=((g=e==null?void 0:e.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((y=e==null?void 0:e.events)==null?void 0:y.onBeforeNodeDrag)??(()=>!0),r=((x=e==null?void 0:e.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),n=(e==null?void 0:e.moveOnTop)===!1,h=(v=e==null?void 0:e.mouse)==null?void 0:v.dragCursor,s=h!==void 0?h:"grab",c=(p=e==null?void 0:e.mouse)==null?void 0:p.mouseDownEventVerifier,d=c!==void 0?c:M=>M.button===0,a=(T=e==null?void 0:e.mouse)==null?void 0:T.mouseUpEventVerifier;return{freezePriority:n,dragCursor:s,mouseDownEventVerifier:d,mouseUpEventVerifier:a!==void 0?a:M=>M.button===0,onNodeDrag:t,onBeforeNodeDrag:o,onNodeDragFinished:r}};class dt{constructor(t,o){i(this,"graph");i(this,"viewport");i(this,"maxNodePriority",0);i(this,"nodes",new Map);i(this,"grabbedNodeId",null);i(this,"element",null);i(this,"onWindowMouseMove",t=>{if(this.element!==null&&(!W(this.element,t.clientX,t.clientY)||!I(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});i(this,"onWindowMouseUp",t=>{this.options.mouseUpEventVerifier(t)&&this.cancelMouseDrag()});i(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const o=t.touches[0];if(this.element!==null&&(!W(this.element,o.clientX,o.clientY)||!I(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}}});i(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});i(this,"previousTouchCoords",null);i(this,"window",window);i(this,"options");this.canvas=t,this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.options=ct(o??{})}attach(t){this.detach(),this.element=t,this.canvas.attach(this.element)}detach(){this.canvas.detach(),this.element!==null&&(this.element=null)}addNode(t){this.canvas.addNode(t),this.updateMaxNodePriority(t.id);const o=n=>{if(this.element===null||!this.options.mouseDownEventVerifier(n))return;const h=this.graph.getNode(t.id);this.options.onBeforeNodeDrag({nodeId:t.id,element:t.element,x:h.x,y:h.y})&&(n.stopImmediatePropagation(),this.grabbedNodeId=t.id,F(this.element,this.options.dragCursor),this.moveNodeOnTop(t.id),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},r=n=>{if(n.touches.length!==1)return;n.stopImmediatePropagation(),this.previousTouchCoords={x:n.touches[0].clientX,y:n.touches[0].clientY};const h=this.graph.getNode(t.id);this.options.onBeforeNodeDrag({nodeId:t.id,element:t.element,x:h.x,y:h.y})&&(this.grabbedNodeId=t.id,this.moveNodeOnTop(t.id),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};this.nodes.set(t.id,{element:t.element,onMouseDown:o,onTouchStart:r}),t.element.addEventListener("mousedown",o),t.element.addEventListener("touchstart",r)}updateNode(t,o){this.canvas.updateNode(t,o),this.updateMaxNodePriority(t)}removeNode(t){const o=this.nodes.get(t);o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(t),this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){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}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(t,o,r){const n=this.graph.getNode(t);if(n===null)return;const h=this.canvas.viewport.getContentMatrix(),s=h.scale*n.x+h.x,c=h.scale*n.y+h.y,d=s+o,a=c+r,l=this.canvas.viewport.getViewportMatrix(),g=l.scale*d+l.x,y=l.scale*a+l.y;this.canvas.updateNode(t,{x:g,y}),this.options.onNodeDrag({nodeId:t,element:n.element,x:g,y})}updateMaxNodePriority(t){const o=this.graph.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(t){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.graph.getNodeAdjacentEdgeIds(t).forEach(n=>{this.updateEdge(n,{priority:o})})}cancelMouseDrag(){const t=this.graph.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.element!==null&&F(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.graph.getNode(this.grabbedNodeId);t!==null&&this.options.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 h=>{let s=h.nextTransform.x,c=h.nextTransform.y;s<t&&s<h.prevTransform.x&&(s=Math.min(h.prevTransform.x,t));const d=h.canvasWidth*h.prevTransform.scale,a=o-d;s>a&&s>h.prevTransform.x&&(s=Math.max(h.prevTransform.x,a)),c<r&&c<h.prevTransform.y&&(c=Math.min(h.prevTransform.y,r));const l=h.canvasHeight*h.prevTransform.scale,g=n-l;return c>g&&c>h.prevTransform.y&&(c=Math.max(h.prevTransform.y,g)),{scale:h.nextTransform.scale,x:s,y:c}}},lt=e=>{const t=e.maxContentScale,o=e.minContentScale,r=t!==null?1/t:0,n=o!==null?1/o:1/0;return h=>{const s=h.prevTransform,c=h.nextTransform;let d=c.scale,a=c.x,l=c.y;if(c.scale>n&&c.scale>s.scale){d=Math.max(s.scale,n),a=s.x,l=s.y;const g=(d-s.scale)/(c.scale-s.scale);a=s.x+(c.x-s.x)*g,l=s.y+(c.y-s.y)*g}if(c.scale<r&&c.scale<s.scale){d=Math.min(s.scale,r),a=s.x,l=s.y;const g=(d-s.scale)/(c.scale-s.scale);a=s.x+(c.x-s.x)*g,l=s.y+(c.y-s.y)*g}return{scale:d,x:a,y:l}}},gt=e=>t=>e.reduce((o,r)=>r({prevTransform:t.prevTransform,nextTransform:o,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight}),t.nextTransform),_=e=>{if(typeof e=="function")return e;switch(e.type){case"scale-limit":return lt({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})}},ut=e=>{var v,p,T,M,K,m,C,$,rt,it,st,nt;const t=(v=e==null?void 0:e.scale)==null?void 0:v.mouseWheelSensitivity,o=t!==void 0?t:1.2,r=e==null?void 0:e.transformPreprocessor;let n;r!==void 0?Array.isArray(r)?n=gt(r.map(D=>_(D))):n=_(r):n=D=>D.nextTransform;const h=((p=e==null?void 0:e.shift)==null?void 0:p.cursor)!==void 0?e.shift.cursor:"grab",s=((T=e==null?void 0:e.events)==null?void 0:T.onBeforeTransformChange)??(()=>{}),c=((M=e==null?void 0:e.events)==null?void 0:M.onTransformChange)??(()=>{}),d=(K=e==null?void 0:e.shift)==null?void 0:K.mouseDownEventVerifier,a=d!==void 0?d:D=>D.button===0,l=(m=e==null?void 0:e.shift)==null?void 0:m.mouseUpEventVerifier,g=l!==void 0?l:D=>D.button===0,y=(C=e==null?void 0:e.scale)==null?void 0:C.mouseWheelEventVerifier,x=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:(($=e==null?void 0:e.events)==null?void 0:$.onTransformStarted)??(()=>{}),onTransformFinished:((rt=e==null?void 0:e.events)==null?void 0:rt.onTransformFinished)??(()=>{}),onBeforeTransformChange:s,onTransformChange:c,transformPreprocessor:n,shiftCursor:h,mouseDownEventVerifier:a,mouseUpEventVerifier:g,mouseWheelEventVerifier:x,scaleWheelFinishTimeout:((it=e==null?void 0:e.scale)==null?void 0:it.wheelFinishTimeout)??500,onResizeTransformStarted:((st=e==null?void 0:e.events)==null?void 0:st.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((nt=e==null?void 0:e.events)==null?void 0:nt.onResizeTransformFinished)??(()=>{})}},R=e=>{const t=[],o=e.touches.length;for(let c=0;c<o;c++)t.push([e.touches[c].clientX,e.touches[c].clientY]);const r=t.reduce((c,d)=>[c[0]+d[0],c[1]+d[1]],[0,0]),n=[r[0]/o,r[1]/o],s=t.map(c=>[c[0]-n[0],c[1]-n[1]]).reduce((c,d)=>c+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:n[0],y:n[1],scale:s/o,touchesCnt:o,touches:t}},wt=(e,t,o)=>({scale:e.scale,x:e.x+e.scale*t,y:e.y+e.scale*o}),yt=(e,t,o,r)=>({scale:e.scale*t,x:e.scale*(1-t)*o+e.x,y:e.scale*(1-t)*r+e.y});class J{constructor(t,o){i(this,"graph");i(this,"viewport");i(this,"element",null);i(this,"prevTouches",null);i(this,"window",window);i(this,"wheelFinishTimer",null);i(this,"onMouseDown",t=>{this.element===null||!this.options.mouseDownEventVerifier(t)||(F(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});i(this,"onWindowMouseMove",t=>{if(this.element===null||!W(this.element,t.clientX,t.clientY)||!I(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const o=-t.movementX,r=-t.movementY;this.moveViewport(this.element,o,r)});i(this,"onWindowMouseUp",t=>{this.element===null||!this.options.mouseUpEventVerifier(t)||this.stopMouseDrag()});i(this,"onWheelScroll",t=>{if(!this.options.mouseWheelEventVerifier(t))return;t.preventDefault();const{left:o,top:r}=this.element.getBoundingClientRect(),n=t.clientX-o,h=t.clientY-r,c=1/(t.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.wheelFinishTimer===null&&this.options.onTransformStarted(),this.scaleViewport(this.element,c,n,h),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.options.onTransformFinished(),this.wheelFinishTimer=null},this.options.scaleWheelFinishTimeout)});i(this,"onTouchStart",t=>{if(this.prevTouches!==null){this.prevTouches=R(t);return}this.prevTouches=R(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});i(this,"onWindowTouchMove",t=>{const o=this.element;if(o===null)return;const r=R(t);if(!r.touches.every(h=>W(o,h[0],h[1])&&I(this.window,h[0],h[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:h,top:s}=o.getBoundingClientRect(),c=this.prevTouches.x-h,d=this.prevTouches.y-s,l=1/(r.scale/this.prevTouches.scale);this.scaleViewport(o,l,c,d)}this.prevTouches=r});i(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=R(t):this.stopTouchDrag()});i(this,"observer",new ResizeObserver(()=>{const t=this.canvas.viewport.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),n=this.options.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:o,canvasHeight:r});this.options.onResizeTransformStarted(),this.canvas.patchViewportMatrix(n),this.options.onResizeTransformFinished()}));i(this,"options");this.canvas=t,this.options=ut(o),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph}attach(t){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)}detach(){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)}addNode(t){this.canvas.addNode(t)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){this.canvas.clear()}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(t,o,r){const n=this.viewport.getViewportMatrix(),h=wt(n,o,r),{width:s,height:c}=t.getBoundingClientRect(),d=this.options.transformPreprocessor({prevTransform:n,nextTransform:h,canvasWidth:s,canvasHeight:c});this.performTransform(d)}scaleViewport(t,o,r,n){const h=this.canvas.viewport.getViewportMatrix(),s=yt(h,o,r,n),{width:c,height:d}=t.getBoundingClientRect(),a=this.options.transformPreprocessor({prevTransform:h,nextTransform:s,canvasWidth:c,canvasHeight:d});this.performTransform(a)}stopMouseDrag(){this.element!==null&&F(this.element,null),this.removeMouseDragListeners(),this.options.onTransformFinished()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.options.onTransformFinished()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}performTransform(t){this.options.onBeforeTransformChange(),this.canvas.patchViewportMatrix(t),this.options.onTransformChange()}}class vt{constructor(){i(this,"keyMap",new Map);i(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 ft{constructor(t){i(this,"viewport");i(this,"graph");i(this,"nodes",new vt);i(this,"nodesResizeObserver");i(this,"window",window);this.canvas=t,this.nodesResizeObserver=new this.window.ResizeObserver(o=>{o.forEach(r=>{const n=r.target;this.handleNodeResize(n)})}),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph}attach(t){this.canvas.attach(t)}detach(){this.canvas.detach()}addNode(t){this.canvas.addNode(t),this.nodes.set(t.id,t.element),this.nodesResizeObserver.observe(t.element)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t);const o=this.nodes.getByKey(t);this.nodes.deleteByKey(t),this.nodesResizeObserver.unobserve(o)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t)}patchContentMatrix(t){this.canvas.patchContentMatrix(t)}clear(){this.canvas.clear(),this.nodesResizeObserver.disconnect(),this.nodes.clear()}destroy(){this.clear(),this.canvas.destroy()}handleNodeResize(t){const o=this.nodes.getByValue(t);this.canvas.updateNode(o,{}),this.graph.getNodeAdjacentEdgeIds(o).forEach(n=>{this.canvas.updateEdge(n,{})})}}class xt{constructor(t,o,r,n){i(this,"graph");i(this,"viewport");i(this,"canvas");i(this,"element",null);i(this,"canvasResizeObserver");i(this,"window",window);i(this,"nodeHorizontal");i(this,"nodeVertical");i(this,"viewportWidth",0);i(this,"viewportHeight",0);i(this,"viewportMatrix");i(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});i(this,"updateLoadedArea",t=>{this.loadedArea={xFrom:t.x,xTo:t.x+t.width,yFrom:t.y,yTo:t.y+t.height}});var d,a;this.trigger=o,this.virtualScrollOptions=n,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new this.window.ResizeObserver(l=>{const g=l[0];this.viewportWidth=g.contentRect.width,this.viewportHeight=g.contentRect.height,this.scheduleLoadAreaAroundViewport()});const h=((d=r==null?void 0:r.events)==null?void 0:d.onTransformFinished)??(()=>{}),s=((a=r==null?void 0:r.events)==null?void 0:a.onTransformChange)??(()=>{}),c={...r,events:{...r==null?void 0:r.events,onTransformChange:()=>{const l=this.viewportMatrix;this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),l.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),s()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),h()}}};this.canvas=new J(t,c),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.trigger.subscribe(this.updateLoadedArea)}attach(t){this.detach(),this.element=t,this.canvasResizeObserver.observe(this.element),this.canvas.attach(t)}detach(){this.element!==null&&(this.canvasResizeObserver.unobserve(this.element),this.element=null,this.viewportWidth=0,this.viewportHeight=0),this.canvas.detach()}addNode(t){this.canvas.addNode(t)}updateNode(t,o){this.canvas.updateNode(t,o)}removeNode(t){this.canvas.removeNode(t)}markPort(t){this.canvas.markPort(t)}updatePort(t,o){this.canvas.updatePort(t,o)}unmarkPort(t){this.canvas.unmarkPort(t)}addEdge(t){this.canvas.addEdge(t)}updateEdge(t,o){this.canvas.updateEdge(t,o)}removeEdge(t){this.canvas.removeEdge(t)}patchViewportMatrix(t){this.canvas.patchViewportMatrix(t),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}patchContentMatrix(t){this.canvas.patchContentMatrix(t),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}clear(){this.canvas.clear()}destroy(){this.trigger.unsubscribe(this.updateLoadedArea),this.canvas.destroy()}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const t=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,r=this.viewportMatrix.x-this.nodeHorizontal,n=this.viewportMatrix.y-this.nodeVertical,h=this.viewportMatrix.x+t+this.nodeHorizontal,s=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<r&&this.loadedArea.xTo>h&&this.loadedArea.yFrom<n&&this.loadedArea.yTo>s||this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const t=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,r=this.viewportMatrix.x-t-this.nodeHorizontal,n=this.viewportMatrix.y-o-this.nodeVertical,h=3*t+2*this.nodeHorizontal,s=3*o+2*this.nodeVertical;this.trigger.emit({x:r,y:n,width:h,height:s})}}const Et=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},St=()=>{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},At=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.visibility="hidden",e};class Tt{constructor(t,o){i(this,"canvasWrapper",null);i(this,"host",Et());i(this,"container",St());i(this,"nodeIdToWrapperElementMap",new Map);i(this,"edgeIdToElementMap",new Map);i(this,"applyTransform",()=>{const t=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`});this.graphStore=t,this.viewportStore=o,this.host.appendChild(this.container),this.viewportStore.onAfterUpdate.subscribe(this.applyTransform)}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}attachNode(t){const o=this.graphStore.getNode(t),r=At();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.nodeIdToWrapperElementMap.get(t);o.removeChild(o.firstChild),this.container.removeChild(o),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const o=this.graphStore.getEdge(t).shape.svg;this.edgeIdToElementMap.set(t,o),this.container.appendChild(o),this.renderEdge(t),this.updateEdgePriority(t)}detachEdge(t){const o=this.edgeIdToElementMap.get(t);this.container.removeChild(o),this.edgeIdToElementMap.delete(t)}clear(){this.edgeIdToElementMap.forEach((t,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((t,o)=>{this.detachNode(o)})}destroy(){this.viewportStore.onAfterUpdate.unsubscribe(this.applyTransform),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:h}=r.element.getBoundingClientRect(),s=this.viewportStore.getViewportMatrix().scale,c=r.centerFn(n,h),d=r.x-s*c.x,a=r.y-s*c.y;o.style.transform=`translate(${d}px, ${a}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),h=r.element.getBoundingClientRect(),s=n.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),d=this.viewportStore.getViewportMatrix(),a={x:d.scale*(h.left-c.left)+d.x,y:d.scale*(h.top-c.top)+d.y},l={x:d.scale*(s.left-c.left)+d.x,y:d.scale*(s.top-c.top)+d.y},g={x:a.x,y:a.y,width:h.width*d.scale,height:h.height*d.scale,direction:r.direction,portId:o.from,nodeId:r.nodeId},y={x:l.x,y:l.y,width:s.width*d.scale,height:s.height*d.scale,direction:n.direction,portId:o.to,nodeId:n.nodeId};o.shape.render({from:g,to:y})}updateEdgePriority(t){const o=this.graphStore.getEdge(t);o.shape.svg.style.zIndex=`${o.priority}`}}class pt{constructor(t){i(this,"xFrom",1/0);i(this,"yFrom",1/0);i(this,"xTo",1/0);i(this,"yTo",1/0);this.graphStore=t}setRenderingBox(t){this.xFrom=t.x,this.xTo=t.x+t.width,this.yFrom=t.y,this.yTo=t.y+t.height}hasNode(t){const o=this.graphStore.getNode(t);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPort(o.from).nodeId,n=this.graphStore.getPort(o.to).nodeId,h=this.graphStore.getNode(r),s=this.graphStore.getNode(n),c=Math.min(h.x,s.x),d=Math.max(h.x,s.x),a=Math.min(h.y,s.y),l=Math.max(h.y,s.y);return c<=this.xTo&&d>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class Mt{constructor(t,o,r){i(this,"attachedNodes",new Set);i(this,"attachedEdges",new Set);i(this,"renderingBox");i(this,"updateViewport",t=>{this.renderingBox.setRenderingBox(t);const o=new Set,r=new Set,n=new Set,h=new Set;this.graphStore.getAllNodeIds().forEach(s=>{const c=this.renderingBox.hasNode(s),d=this.attachedNodes.has(s);c&&!d?o.add(s):!c&&d&&r.add(s)}),this.graphStore.getAllEdgeIds().forEach(s=>{const c=this.renderingBox.hasEdge(s),d=this.attachedEdges.has(s),a=this.graphStore.getEdge(s),l=this.graphStore.getPort(a.from).nodeId,g=this.graphStore.getPort(a.to).nodeId;c&&(this.renderingBox.hasNode(l)||(o.add(l),r.delete(l)),this.renderingBox.hasNode(g)||(o.add(g),r.delete(g))),c&&!d?n.add(s):!c&&d&&h.add(s)}),h.forEach(s=>{this.handleDetachEdge(s)}),r.forEach(s=>{this.handleDetachNode(s)}),o.forEach(s=>{this.attachedNodes.has(s)||this.handleAttachNode(s)}),n.forEach(s=>{this.handleAttachEdge(s)})});this.htmlView=t,this.graphStore=o,this.trigger=r,this.renderingBox=new pt(this.graphStore),this.trigger.subscribe(this.updateViewport)}attach(t){this.htmlView.attach(t)}detach(){this.htmlView.detach()}attachNode(t){this.renderingBox.hasNode(t)&&this.handleAttachNode(t)}detachNode(t){this.attachedNodes.has(t)&&this.handleDetachNode(t)}attachEdge(t){this.renderingBox.hasEdge(t)&&this.attachEdgeEntities(t)}detachEdge(t){this.attachedEdges.has(t)&&this.handleDetachEdge(t)}updateNodeCoordinates(t){this.attachedNodes.has(t)?this.htmlView.updateNodeCoordinates(t):this.renderingBox.hasNode(t)&&(this.handleAttachNode(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(t){this.attachedNodes.has(t)&&this.htmlView.updateNodePriority(t)}updateEdgeShape(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgeShape(t)}renderEdge(t){this.attachedEdges.has(t)&&this.htmlView.renderEdge(t)}updateEdgePriority(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgePriority(t)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPort(o.from).nodeId,n=this.graphStore.getPort(o.to).nodeId;this.attachedNodes.has(r)||this.handleAttachNode(r),this.attachedNodes.has(n)||this.handleAttachNode(n),this.handleAttachEdge(t)}handleAttachNode(t){this.attachedNodes.add(t),this.htmlView.attachNode(t)}handleDetachNode(t){this.htmlView.detachNode(t),this.attachedNodes.delete(t)}handleAttachEdge(t){this.attachedEdges.add(t),this.htmlView.attachEdge(t)}handleDetachEdge(t){this.htmlView.detachEdge(t),this.attachedEdges.delete(t)}}class B{constructor(){i(this,"callbacks",new Set)}subscribe(t){this.callbacks.add(t)}unsubscribe(t){this.callbacks.delete(t)}emit(t){this.callbacks.forEach(o=>{o(t)})}}const Nt=()=>{const e=new B;return[e,e]};class H{constructor(t){i(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);i(this,"name","HtmlGraphError")}}const Vt=(e,t)=>({x:e/2,y:t/2}),U=e=>()=>e,Q=U(0),Lt=()=>{let e=0;return()=>e++},Dt=(e,t)=>{let o=Q,r=Q;const n=Lt();return e==="incremental"&&(o=n),t==="incremental"&&(r=n),typeof e=="number"&&(o=U(e)),typeof t=="number"&&(r=U(t)),typeof e=="function"&&(o=e),typeof t=="function"&&(r=t),{nodesPriorityFn:o,edgesPriorityFn:r}},f=(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)}),N=(e,t,o)=>({x:t*Math.cos(e),y:o*Math.sin(e)}),u={x:0,y:0},V=(e,t,o,r)=>{const h=[u,{x:o,y:r},{x:o,y:-r}].map(a=>f(a,e,u)).map(a=>({x:a.x+t.x,y:a.y+t.y})),s=`M ${h[0].x} ${h[0].y}`,c=`L ${h[1].x} ${h[1].y}`,d=`L ${h[2].x} ${h[2].y}`;return`${s} ${c} ${d}`},P=(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,h=0,s=0;e.forEach((c,d)=>{let a=0,l=0,g=0;const y=d>0,x=d<r,v=y&&x;if(y&&(a=-n,l=-h,g=s),x){const $=e[d+1];n=$.x-c.x,h=$.y-c.y,s=Math.sqrt(n*n+h*h)}const T=s!==0?Math.min((v?t:0)/s,d<r-1?.5:1):0,M=v?{x:c.x+n*T,y:c.y+h*T}:c,m=g!==0?Math.min((v?t:0)/g,d>1?.5:1):0,C=v?{x:c.x+a*m,y:c.y+l*m}:c;d>0&&o.push(`L ${C.x} ${C.y}`),v&&o.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${M.x} ${M.y}`)})}return o.join(" ")},k=()=>{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},z=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g");return e.style.transformOrigin="50% 50%",e},Y=(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},L=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",e),t},X=(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),h=Math.min(o.y,r.y),s=Math.abs(r.x-o.x),c=Math.abs(r.y-o.y),d=o.x<=r.x?1:-1,a=o.y<=r.y?1:-1;return{x:n,y:h,width:s,height:c,flipX:d,flipY:a}},bt=e=>{const t=f({x:e.arrowLength,y:u.y},e.fromVect,u),o=f({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},h=`M ${t.x} ${t.y} C ${r.x} ${r.y}, ${n.x} ${n.y}, ${o.x} ${o.y}`,s=e.hasSourceArrow?"":`M ${u.x} ${u.y} L ${t.x} ${t.y} `,c=e.hasTargetArrow?"":` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;return`${s}${h}${c}`},Pt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=Math.sin(e.detourDirection)*e.detourDistance,s=n*e.flipX,c=h*e.flipY,d=f({x:r,y:u.y},e.fromVect,u),a={x:d.x+s,y:d.y+c},l=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:l.x+s,y:l.y+c},y={x:(a.x+g.x)/2,y:(a.y+g.y)/2},x={x:d.x+e.curvature*e.fromVect.x,y:d.y+e.curvature*e.fromVect.y},v={x:l.x-e.curvature*e.toVect.x,y:l.y-e.curvature*e.toVect.y},p={x:d.x+s,y:d.y+c},T={x:l.x+s,y:l.y+c};return[`M ${t.x} ${t.y}`,`L ${d.x} ${d.y}`,`C ${x.x} ${x.y} ${p.x} ${p.y} ${y.x} ${y.y}`,`C ${T.x} ${T.y} ${v.x} ${v.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},mt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=f({x:n,y:u.y},e.fromVect,u),s=f({x:e.to.x-n,y:e.to.y},e.toVect,e.to),c=Math.max((h.x+s.x)/2,r),d=e.to.y/2,a={x:e.flipX>0?c:-r,y:h.y},l={x:a.x,y:d},g={x:e.flipX>0?e.to.x-c:e.to.x+r,y:s.y},y={x:g.x,y:d};return P([t,h,a,l,y,g,s,o],e.roundness)},j=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=f({x:r,y:u.y},e.fromVect,u),h=Math.cos(e.detourDirection)*e.detourDistance,s=Math.sin(e.detourDirection)*e.detourDistance,c=h*e.flipX,d=s*e.flipY,a={x:n.x+c,y:n.y+d},l=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:l.x+c,y:l.y+d};return P([t,n,a,g,l,o],e.roundness)},Ct=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,n=f({x:r,y:u.y},e.fromVect,u),h=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to);return P([t,n,h,o],e.roundness)},$t=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({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,h=f({x:n,y:u.y},e.fromVect,u),s=f({x:e.to.x-n,y:e.to.y},e.toVect,e.to),c=Math.max((h.y+s.y)/2,r),d=e.to.x/2,a={x:h.x,y:e.flipY>0?c:-r},l={x:d,y:a.y},g={x:s.x,y:e.flipY>0?e.to.y-c:e.to.y+r},y={x:d,y:g.y};return P([t,h,a,l,y,g,s,o],e.roundness)},G=e=>{const t=e.arrowOffset,o=e.side,r=e.arrowLength+t,n=r+2*o,s=[{x:e.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:e.side},{x:n,y:e.side},{x:n,y:-e.side},{x:r,y:-e.side},{x:r,y:u.y},{x:e.arrowLength,y:u.y}].map(d=>f(d,e.fromVect,u)),c=`M ${u.x} ${u.y} L ${s[0].x} ${s[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":c}${P(s,e.roundness)}`},Wt=e=>{const t=e.smallRadius,o=e.radius,r=Math.sqrt(t*t+o*o),n=t+o,h=e.arrowLength+r*(1-o/n),s=t*o/n,d=[{x:e.arrowLength,y:u.y},{x:h,y:s},{x:h,y:-s}].map(g=>f(g,e.fromVect,u)),a=[`M ${d[0].x} ${d[0].y}`,`A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,`A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,`A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`].join(" "),l=`M 0 0 L ${d[0].x} ${d[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":l}${a}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class Z{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"curvature");i(this,"portCycleRadius");i(this,"portCycleSmallRadius");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??w.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const o=(t==null?void 0:t.color)??w.color,r=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(o),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=N(t.from.direction,s,c),a=N(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=Wt({fromVect:d,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=Pt({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=bt({to:l,fromVect:d,toVect:a,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class O{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=N(t.from.direction,s,c),a=N(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=G({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=j({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=mt({to:l,fromVect:d,toVect:a,flipX:s,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class q{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=N(t.from.direction,s,c),a=N(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=G({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=j({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Ct({to:l,fromVect:d,toVect:a,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class tt{constructor(t){i(this,"svg",k());i(this,"group",z());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirectionVertical,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,n=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,n),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:n,height:h,flipX:s,flipY:c}=X(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${n}px`,this.svg.style.height=`${h}px`,this.group.style.transform=`scale(${s}, ${c})`;const d=N(t.from.direction,s,c),a=N(t.to.direction,s,c),l={x:n,y:h};let g,y=a,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=G({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=j({to:l,fromVect:d,toVect:a,flipX:s,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=$t({to:l,fromVect:d,toVect:a,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=V(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=V(y,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const It=e=>{if(typeof e=="function")return e;switch(e==null?void 0:e.type){case"straight":return()=>new q({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 O({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 tt({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 Z({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})}},Ft=e=>{var o,r,n,h,s;const t=Dt((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)??Vt,priorityFn:t.nodesPriorityFn},ports:{direction:((h=e==null?void 0:e.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:It(((s=e==null?void 0:e.edges)==null?void 0:s.shape)??{}),priorityFn:t.edgesPriorityFn}}};class Rt{constructor(t,o){i(this,"nodeIdGenerator",new H(t=>this.graph.getNode(t)!==null));i(this,"portIdGenerator",new H(t=>this.graph.getPort(t)!==null));i(this,"edgeIdGenerator",new H(t=>this.graph.getEdge(t)!==null));i(this,"defaults");i(this,"graph");i(this,"viewport");this.controller=t,this.defaults=Ft(o),this.graph=t.graph,this.viewport=t.viewport}attach(t){return this.controller.attach(t),this}detach(){return this.controller.detach(),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);if(this.graph.getNode(o)!==null)throw new A("failed to add node with existing id");if(this.controller.addNode({id:o,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.defaults.nodes.centerFn,priority:t.priority??this.defaults.nodes.priorityFn()}),t.ports!==void 0)for(const r of t.ports)this.markPort({id:r.id,element:r.element,nodeId:o,direction:r.direction});return this}updateNode(t,o){if(this.graph.getNode(t)===null)throw new A("failed to update nonexisting node");return this.controller.updateNode(t,o??{}),this}removeNode(t){if(this.graph.getNode(t)===null)throw new A("failed to remove nonexisting node");return this.controller.removeNode(t),this}markPort(t){const o=this.portIdGenerator.create(t.id);if(this.graph.getPort(o)!==null)throw new A("failed to add port with existing id");if(this.graph.getNode(t.nodeId)===null)throw new A("failed to set port on nonexisting node");return this.controller.markPort({id:o,element:t.element,nodeId:t.nodeId,direction:t.direction??this.defaults.ports.direction}),this}updatePort(t,o){if(this.graph.getPort(t)===null)throw new A("failed to unset nonexisting port");return this.controller.updatePort(t,o??{}),this}unmarkPort(t){if(this.graph.getPort(t)===null)throw new A("failed to unset nonexisting port");return this.controller.unmarkPort(t),this}addEdge(t){const o=this.edgeIdGenerator.create(t.id);if(this.graph.getEdge(o)!==null)throw new A("failed to add edge with existing id");if(this.graph.getPort(t.from)===null)throw new A("failed to add edge from nonexisting port");if(this.graph.getPort(t.to)===null)throw new A("failed to add edge to nonexisting port");return this.controller.addEdge({id:o,from:t.from,to:t.to,shape:t.shape??this.defaults.edges.shapeFactory(),priority:t.priority??this.defaults.edges.priorityFn()}),this}updateEdge(t,o){if(this.graph.getEdge(t)===null)throw new A("failed to update nonexisting edge");return this.controller.updateEdge(t,o??{}),this}removeEdge(t){if(this.graph.getEdge(t)===null)throw new A("failed to remove nonexisting edge");return this.controller.removeEdge(t),this}patchViewportMatrix(t){return this.controller.patchViewportMatrix(t),this}patchContentMatrix(t){return this.controller.patchContentMatrix(t),this}clear(){return this.controller.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this}destroy(){this.controller.destroy()}}class kt{constructor(){i(this,"nodes",new Map);i(this,"ports",new Map);i(this,"edges",new Map);i(this,"incommingEdges",new Map);i(this,"outcommingEdges",new Map);i(this,"cycleEdges",new Map)}addNode(t){const o=new Map,r={element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority,ports:o};this.nodes.set(t.id,r)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}removeNode(t){this.nodes.delete(t)}addPort(t){this.ports.set(t.id,{element:t.element,direction:t.direction,nodeId:t.nodeId}),this.cycleEdges.set(t.id,new Set),this.incommingEdges.set(t.id,new Set),this.outcommingEdges.set(t.id,new Set),this.nodes.get(t.nodeId).ports.set(t.id,t.element)}getPort(t){return this.ports.get(t)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(t){const o=this.nodes.get(t);if(o!==void 0)return Array.from(o.ports.keys())}removePort(t){const o=this.ports.get(t).nodeId;this.nodes.get(o).ports.delete(t),this.ports.delete(t)}addEdge(t){this.edges.set(t.id,{from:t.from,to:t.to,shape:t.shape,priority:t.priority}),t.from!==t.to?(this.outcommingEdges.get(t.from).add(t.id),this.incommingEdges.get(t.to).add(t.id)):this.cycleEdges.get(t.from).add(t.id)}updateEdgeFrom(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({id: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({id: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.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear(),this.edges.clear(),this.ports.clear(),this.nodes.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.nodes.get(t).ports.keys());let r=[];return o.forEach(n=>{r=[...r,...this.getPortIncomingEdgeIds(n)]}),r}getNodeOutcomingEdgeIds(t){const o=Array.from(this.nodes.get(t).ports.keys());let r=[];return o.forEach(n=>{r=[...r,...this.getPortOutcomingEdgeIds(n)]}),r}getNodeCycleEdgeIds(t){const o=Array.from(this.nodes.get(t).ports.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)]}}const et=e=>({scale:1/e.scale,x:-e.x/e.scale,y:-e.y/e.scale}),ot={scale:1,x:0,y:0};class zt{constructor(){i(this,"viewportMatrix",ot);i(this,"contentMatrix",ot);i(this,"emitter");i(this,"onAfterUpdate");[this.emitter,this.onAfterUpdate]=Nt()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,x:t.x??this.viewportMatrix.x,y:t.y??this.viewportMatrix.y},this.contentMatrix=et(this.viewportMatrix),this.emitter.emit()}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,x:t.x??this.contentMatrix.x,y:t.y??this.contentMatrix.y},this.viewportMatrix=et(this.contentMatrix),this.emitter.emit()}}class Yt{constructor(){i(this,"canvasDefaults",{});i(this,"dragOptions");i(this,"transformOptions");i(this,"virtualScrollOptions");i(this,"hasDraggableNode",!1);i(this,"hasTransformableViewport",!1);i(this,"hasResizeReactiveNodes",!1);i(this,"boxRenderingTrigger")}setDefaults(t){return this.canvasDefaults=t,this}setOptions(t){return this.setDefaults(t),this}enableUserDraggableNodes(t){return this.hasDraggableNode=!0,this.dragOptions=t,this}enableUserTransformableViewport(t){return this.hasTransformableViewport=!0,this.transformOptions=t,this}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(t){return this.boxRenderingTrigger=t,this}enableVirtualScroll(t){return this.virtualScrollOptions=t,this}build(){let t=this.boxRenderingTrigger;this.virtualScrollOptions!==void 0&&t===void 0&&(t=new B);const o=new kt,r=new zt;let n=new Tt(o,r);t!==void 0&&(n=new Mt(n,o,t));let h=new ht(o,r,n);this.hasResizeReactiveNodes&&(h=new ft(h)),this.hasDraggableNode&&(h=new dt(h,this.dragOptions)),this.virtualScrollOptions!==void 0?h=new xt(h,t,this.transformOptions,this.virtualScrollOptions):this.hasTransformableViewport&&(h=new J(h,this.transformOptions));const s=new Rt(h,this.canvasDefaults);return this.reset(),s}reset(){this.canvasDefaults={},this.dragOptions=void 0,this.transformOptions=void 0,this.virtualScrollOptions=void 0,this.hasDraggableNode=!1,this.hasTransformableViewport=!1,this.hasResizeReactiveNodes=!1,this.boxRenderingTrigger=void 0}}E.BezierEdgeShape=Z,E.CanvasBuilder=Yt,E.EventSubject=B,E.HorizontalEdgeShape=O,E.HtmlGraphError=A,E.StraightEdgeShape=q,E.VerticalEdgeShape=tt,Object.defineProperty(E,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": "2.1.0",
+  "version": "2.2.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",