npm - @html-graph/html-graph - Versions diffs - 3.0.0 → 3.1.0 - Mend

@html-graph/html-graph 3.0.0 → 3.1.0

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

Files changed (4) hide show

package/dist/html-graph.umd.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- (function(E,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(E=typeof globalThis<"u"?globalThis:E\|\|self,p(E.HtmlGraph={}))})(this,function(E){"use strict";var ze=Object.defineProperty;var Ye=(E,p,L)=>p in E?ze(E,p,{enumerable:!0,configurable:!0,writable:!0,value:L}):E[p]=L;var i=(E,p,L)=>Ye(E,typeof p!="symbol"?p+"":p,L);class p{constructor(e){i(this,"onAfterNodeAdded");i(this,"onAfterNodeUpdated");i(this,"onAfterNodePriorityUpdated");i(this,"onBeforeNodeRemoved");i(this,"onAfterPortMarked");i(this,"onAfterPortUpdated");i(this,"onBeforePortUnmarked");i(this,"onAfterEdgeAdded");i(this,"onAfterEdgeShapeUpdated");i(this,"onAfterEdgeUpdated");i(this,"onAfterEdgePriorityUpdated");i(this,"onBeforeEdgeRemoved");i(this,"onBeforeClear");this.graphStore=e,this.onAfterNodeAdded=this.graphStore.onAfterNodeAdded,this.onAfterNodeUpdated=this.graphStore.onAfterNodeUpdated,this.onAfterNodePriorityUpdated=this.graphStore.onAfterNodePriorityUpdated,this.onBeforeNodeRemoved=this.graphStore.onBeforeNodeRemoved,this.onAfterPortMarked=this.graphStore.onAfterPortAdded,this.onAfterPortUpdated=this.graphStore.onAfterPortUpdated,this.onBeforePortUnmarked=this.graphStore.onBeforePortRemoved,this.onAfterEdgeAdded=this.graphStore.onAfterEdgeAdded,this.onAfterEdgeShapeUpdated=this.graphStore.onAfterEdgeShapeUpdated,this.onAfterEdgeUpdated=this.graphStore.onAfterEdgeUpdated,this.onAfterEdgePriorityUpdated=this.graphStore.onAfterEdgePriorityUpdated,this.onBeforeEdgeRemoved=this.graphStore.onBeforeEdgeRemoved,this.onBeforeClear=this.graphStore.onBeforeClear}getNode(e){const o=this.graphStore.getNode(e);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(e){const o=this.graphStore.getPort(e);return o===void 0?null:{element:o.element,direction:o.direction,nodeId:o.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const o=this.graphStore.getEdge(e);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(e)}}class L{constructor(e){i(this,"onBeforeUpdated");i(this,"onAfterUpdated");this.transformer=e,this.onBeforeUpdated=this.transformer.onBeforeUpdated,this.onAfterUpdated=this.transformer.onAfterUpdated}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class ce{constructor(e,o,r){i(this,"viewport");i(this,"graph");i(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});i(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodePosition(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(r=>{this.htmlView.renderEdge(r)})});i(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});i(this,"onBeforeNodeRemoved",e=>{this.graphStore.getNodePortIds(e).forEach(o=>{this.unmarkPort(o)}),this.htmlView.detachNode(e)});i(this,"onAfterPortUpdated",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(r=>{this.htmlView.renderEdge(r)})});i(this,"onBeforePortUnmarked",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.removeEdge(o)})});i(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});i(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});i(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});i(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});i(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});i(this,"onBeforeClear",()=>{this.htmlView.clear()});this.graphStore=e,this.viewportStore=o,this.htmlView=r,this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated),this.graphStore.onAfterNodePriorityUpdated.subscribe(this.onAfterNodePriorityUpdated),this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated),this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked),this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded),this.graphStore.onAfterEdgeShapeUpdated.subscribe(this.onAfterEdgeShapeUpdated),this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated),this.graphStore.onAfterEdgePriorityUpdated.subscribe(this.onAfterEdgePriorityUpdated),this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved),this.graphStore.onBeforeClear.subscribe(this.onBeforeClear),this.graph=new p(this.graphStore),this.viewport=new L(this.viewportStore)}addNode(e){this.graphStore.addNode(e)}updateNode(e,o){this.graphStore.updateNode(e,o)}removeNode(e){this.graphStore.removeNode(e)}markPort(e){this.graphStore.addPort(e)}updatePort(e,o){this.graphStore.updatePort(e,o)}unmarkPort(e){this.graphStore.removePort(e)}addEdge(e){this.graphStore.addEdge(e)}updateEdge(e,o){this.graphStore.updateEdge(e,o)}removeEdge(e){this.graphStore.removeEdge(e)}patchViewportMatrix(e){this.viewportStore.patchViewportMatrix(e)}patchContentMatrix(e){this.viewportStore.patchContentMatrix(e)}clear(){this.graphStore.clear()}destroy(){this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graphStore.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated),this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated),this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked),this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded),this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated),this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated),this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated),this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved),this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear),this.clear(),this.htmlView.destroy()}}const R=(t,e,o)=>{const{x:r,y:s,width:d,height:n}=t.getBoundingClientRect();return e>=r&&e<=r+d&&o>=s&&o<=s+n},I=(t,e,o)=>e>=0&&e<=t.innerWidth&&o>=0&&o<=t.innerHeight,W=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")},ae=t=>{var g,f,x,y,T,N;const e=((g=t==null?void 0:t.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((f=t==null?void 0:t.events)==null?void 0:f.onBeforeNodeDrag)??(()=>!0),r=((x=t==null?void 0:t.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),s=(t==null?void 0:t.moveOnTop)===!1,d=(y=t==null?void 0:t.mouse)==null?void 0:y.dragCursor,n=d!==void 0?d:"grab",h=(T=t==null?void 0:t.mouse)==null?void 0:T.mouseDownEventVerifier,c=h!==void 0?h:m=>m.button===0,a=(N=t==null?void 0:t.mouse)==null?void 0:N.mouseUpEventVerifier;return{freezePriority:s,dragCursor:n,mouseDownEventVerifier:c,mouseUpEventVerifier:a!==void 0?a:m=>m.button===0,onNodeDrag:e,onBeforeNodeDrag:o,onNodeDragFinished:r}};class le{constructor(e,o,r){i(this,"graph");i(this,"viewport");i(this,"maxNodePriority",0);i(this,"nodes",new Map);i(this,"grabbedNodeId",null);i(this,"onWindowMouseMove",e=>{if(!R(this.element,e.clientX,e.clientY)\|\|!I(this.window,e.clientX,e.clientY)){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});i(this,"onWindowMouseUp",e=>{this.options.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});i(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const o=e.touches[0];if(!R(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,s=o.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,r,s),this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY}}});i(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});i(this,"previousTouchCoords",null);i(this,"window",window);i(this,"options");this.canvas=e,this.element=o,this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.options=ae(r??{})}addNode(e){this.canvas.addNode(e),this.updateMaxNodePriority(e.id);const o=s=>{if(!this.options.mouseDownEventVerifier(s))return;const d=this.graph.getNode(e.id);this.options.onBeforeNodeDrag({nodeId:e.id,element:e.element,x:d.x,y:d.y})&&(s.stopImmediatePropagation(),this.grabbedNodeId=e.id,W(this.element,this.options.dragCursor),this.moveNodeOnTop(e.id),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},r=s=>{if(s.touches.length!==1)return;s.stopImmediatePropagation(),this.previousTouchCoords={x:s.touches[0].clientX,y:s.touches[0].clientY};const d=this.graph.getNode(e.id);this.options.onBeforeNodeDrag({nodeId:e.id,element:e.element,x:d.x,y:d.y})&&(this.grabbedNodeId=e.id,this.moveNodeOnTop(e.id),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};this.nodes.set(e.id,{element:e.element,onMouseDown:o,onTouchStart:r}),e.element.addEventListener("mousedown",o),e.element.addEventListener("touchstart",r)}updateNode(e,o){this.canvas.updateNode(e,o),this.updateMaxNodePriority(e)}removeNode(e){const o=this.nodes.get(e);o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(e),this.canvas.removeNode(e)}markPort(e){this.canvas.markPort(e)}updatePort(e,o){this.canvas.updatePort(e,o)}unmarkPort(e){this.canvas.unmarkPort(e)}addEdge(e){this.canvas.addEdge(e)}updateEdge(e,o){this.canvas.updateEdge(e,o)}removeEdge(e){this.canvas.removeEdge(e)}patchViewportMatrix(e){this.canvas.patchViewportMatrix(e)}patchContentMatrix(e){this.canvas.patchContentMatrix(e)}clear(){this.canvas.clear(),this.nodes.forEach(e=>{e.element.removeEventListener("mousedown",e.onMouseDown),e.element.removeEventListener("touchstart",e.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0}destroy(){this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(e,o,r){const s=this.graph.getNode(e);if(s===null)return;const d=this.canvas.viewport.getContentMatrix(),n=d.scales.x+d.x,h=d.scales.y+d.y,c=n+o,a=h+r,l=this.canvas.viewport.getViewportMatrix(),g=l.scalec+l.x,f=l.scalea+l.y;this.canvas.updateNode(e,{x:g,y:f}),this.options.onNodeDrag({nodeId:e,element:s.element,x:g,y:f})}updateMaxNodePriority(e){const o=this.graph.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(e){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(e,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.graph.getNodeAdjacentEdgeIds(e).forEach(s=>{this.updateEdge(s,{priority:o})})}cancelMouseDrag(){const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,W(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}const ge=t=>{const e=t.minX!==null?t.minX:-1/0,o=t.maxX!==null?t.maxX:1/0,r=t.minY!==null?t.minY:-1/0,s=t.maxY!==null?t.maxY:1/0;return d=>{let n=d.nextTransform.x,h=d.nextTransform.y;n<e&&n<d.prevTransform.x&&(n=Math.min(d.prevTransform.x,e));const c=d.canvasWidthd.prevTransform.scale,a=o-c;n>a&&n>d.prevTransform.x&&(n=Math.max(d.prevTransform.x,a)),h<r&&h<d.prevTransform.y&&(h=Math.min(d.prevTransform.y,r));const l=d.canvasHeightd.prevTransform.scale,g=s-l;return h>g&&h>d.prevTransform.y&&(h=Math.max(d.prevTransform.y,g)),{scale:d.nextTransform.scale,x:n,y:h}}},ue=t=>{const e=t.maxContentScale,o=t.minContentScale,r=e!==null?1/e:0,s=o!==null?1/o:1/0;return d=>{const n=d.prevTransform,h=d.nextTransform;let c=h.scale,a=h.x,l=h.y;if(h.scale>s&&h.scale>n.scale){c=Math.max(n.scale,s),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)g,l=n.y+(h.y-n.y)g}if(h.scale<r&&h.scale<n.scale){c=Math.min(n.scale,r),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)g,l=n.y+(h.y-n.y)g}return{scale:c,x:a,y:l}}},we=t=>e=>t.reduce((o,r)=>r({prevTransform:e.prevTransform,nextTransform:o,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),Q=t=>{if(typeof t=="function")return t;switch(t.type){case"scale-limit":return ue({minContentScale:t.minContentScale??0,maxContentScale:t.maxContentScale??1/0});case"shift-limit":return ge({minX:t.minX??-1/0,maxX:t.maxX??1/0,minY:t.minY??-1/0,maxY:t.maxY??1/0})}},fe=t=>{var y,T,N,m,K,C,U,$,se,ne,he,de;const e=(y=t==null?void 0:t.scale)==null?void 0:y.mouseWheelSensitivity,o=e!==void 0?e:1.2,r=t==null?void 0:t.transformPreprocessor;let s;r!==void 0?Array.isArray(r)?s=we(r.map(V=>Q(V))):s=Q(r):s=V=>V.nextTransform;const d=((T=t==null?void 0:t.shift)==null?void 0:T.cursor)!==void 0?t.shift.cursor:"grab",n=((N=t==null?void 0:t.events)==null?void 0:N.onBeforeTransformChange)??(()=>{}),h=((m=t==null?void 0:t.events)==null?void 0:m.onTransformChange)??(()=>{}),c=(K=t==null?void 0:t.shift)==null?void 0:K.mouseDownEventVerifier,a=c!==void 0?c:V=>V.button===0,l=(C=t==null?void 0:t.shift)==null?void 0:C.mouseUpEventVerifier,g=l!==void 0?l:V=>V.button===0,f=(U=t==null?void 0:t.scale)==null?void 0:U.mouseWheelEventVerifier,x=f!==void 0?f:()=>!0;return{wheelSensitivity:o,onTransformStarted:(($=t==null?void 0:t.events)==null?void 0:$.onTransformStarted)??(()=>{}),onTransformFinished:((se=t==null?void 0:t.events)==null?void 0:se.onTransformFinished)??(()=>{}),onBeforeTransformChange:n,onTransformChange:h,transformPreprocessor:s,shiftCursor:d,mouseDownEventVerifier:a,mouseUpEventVerifier:g,mouseWheelEventVerifier:x,scaleWheelFinishTimeout:((ne=t==null?void 0:t.scale)==null?void 0:ne.wheelFinishTimeout)??500,onResizeTransformStarted:((he=t==null?void 0:t.events)==null?void 0:he.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((de=t==null?void 0:t.events)==null?void 0:de.onResizeTransformFinished)??(()=>{})}},F=t=>{const e=[],o=t.touches.length;for(let h=0;h<o;h++)e.push([t.touches[h].clientX,t.touches[h].clientY]);const r=e.reduce((h,c)=>[h[0]+c[0],h[1]+c[1]],[0,0]),s=[r[0]/o,r[1]/o],n=e.map(h=>[h[0]-s[0],h[1]-s[1]]).reduce((h,c)=>h+Math.sqrt(c[0]c[0]+c[1]c[1]),0);return{x:s[0],y:s[1],scale:n/o,touchesCnt:o,touches:e}},ye=(t,e,o)=>({scale:t.scale,x:t.x+t.scalee,y:t.y+t.scaleo}),ve=(t,e,o,r)=>({scale:t.scalee,x:t.scale(1-e)o+t.x,y:t.scale(1-e)r+t.y});class Z{constructor(e,o,r){i(this,"graph");i(this,"viewport");i(this,"prevTouches",null);i(this,"window",window);i(this,"wheelFinishTimer",null);i(this,"onMouseDown",e=>{this.element===null\|\|!this.options.mouseDownEventVerifier(e)\|\|(W(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});i(this,"onWindowMouseMove",e=>{if(this.element===null\|\|!R(this.element,e.clientX,e.clientY)\|\|!I(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const o=-e.movementX,r=-e.movementY;this.moveViewport(o,r)});i(this,"onWindowMouseUp",e=>{this.element===null\|\|!this.options.mouseUpEventVerifier(e)\|\|this.stopMouseDrag()});i(this,"onWheelScroll",e=>{if(!this.options.mouseWheelEventVerifier(e))return;e.preventDefault();const{left:o,top:r}=this.element.getBoundingClientRect(),s=e.clientX-o,d=e.clientY-r,h=1/(e.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.wheelFinishTimer===null&&this.options.onTransformStarted(),this.scaleViewport(h,s,d),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.options.onTransformFinished(),this.wheelFinishTimer=null},this.options.scaleWheelFinishTimeout)});i(this,"onTouchStart",e=>{if(this.prevTouches!==null){this.prevTouches=F(e);return}this.prevTouches=F(e),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});i(this,"onWindowTouchMove",e=>{const o=F(e);if(!o.touches.every(s=>R(this.element,s[0],s[1])&&I(this.window,s[0],s[1]))){this.stopTouchDrag();return}if((o.touchesCnt===1\|\|o.touchesCnt===2)&&this.moveViewport(-(o.x-this.prevTouches.x),-(o.y-this.prevTouches.y)),o.touchesCnt===2){const{left:s,top:d}=this.element.getBoundingClientRect(),n=this.prevTouches.x-s,h=this.prevTouches.y-d,a=1/(o.scale/this.prevTouches.scale);this.scaleViewport(a,n,h)}this.prevTouches=o});i(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=F(e):this.stopTouchDrag()});i(this,"observer",new ResizeObserver(()=>{const e=this.canvas.viewport.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),s=this.options.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:o,canvasHeight:r});this.options.onResizeTransformStarted(),this.canvas.patchViewportMatrix(s),this.options.onResizeTransformFinished()}));i(this,"options");this.canvas=e,this.element=o,this.options=fe(r),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart)}addNode(e){this.canvas.addNode(e)}updateNode(e,o){this.canvas.updateNode(e,o)}removeNode(e){this.canvas.removeNode(e)}markPort(e){this.canvas.markPort(e)}updatePort(e,o){this.canvas.updatePort(e,o)}unmarkPort(e){this.canvas.unmarkPort(e)}addEdge(e){this.canvas.addEdge(e)}updateEdge(e,o){this.canvas.updateEdge(e,o)}removeEdge(e){this.canvas.removeEdge(e)}patchViewportMatrix(e){this.canvas.patchViewportMatrix(e)}patchContentMatrix(e){this.canvas.patchContentMatrix(e)}clear(){this.canvas.clear()}destroy(){this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.canvas.destroy()}moveViewport(e,o){const r=this.viewport.getViewportMatrix(),s=ye(r,e,o),{width:d,height:n}=this.element.getBoundingClientRect(),h=this.options.transformPreprocessor({prevTransform:r,nextTransform:s,canvasWidth:d,canvasHeight:n});this.performTransform(h)}scaleViewport(e,o,r){const s=this.canvas.viewport.getViewportMatrix(),d=ve(s,e,o,r),{width:n,height:h}=this.element.getBoundingClientRect(),c=this.options.transformPreprocessor({prevTransform:s,nextTransform:d,canvasWidth:n,canvasHeight:h});this.performTransform(c)}stopMouseDrag(){W(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(e){this.options.onBeforeTransformChange(),this.canvas.patchViewportMatrix(e),this.options.onTransformChange()}}class xe{constructor(e,o,r,s,d){i(this,"graph");i(this,"viewport");i(this,"canvas");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",e=>{this.loadedArea={xFrom:e.x,xTo:e.x+e.width,yFrom:e.y,yTo:e.y+e.height}});var a,l;this.trigger=o,this.virtualScrollOptions=s,this.element=d,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new this.window.ResizeObserver(g=>{const f=g[0];this.viewportWidth=f.contentRect.width,this.viewportHeight=f.contentRect.height,this.scheduleLoadAreaAroundViewport()});const n=((a=r==null?void 0:r.events)==null?void 0:a.onTransformFinished)??(()=>{}),h=((l=r==null?void 0:r.events)==null?void 0:l.onTransformChange)??(()=>{}),c={...r,events:{...r==null?void 0:r.events,onTransformChange:()=>{const g=this.viewportMatrix;this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),g.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),h()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),n()}}};this.canvas=new Z(e,this.element,c),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.viewport=this.canvas.viewport,this.graph=this.canvas.graph,this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element)}addNode(e){this.canvas.addNode(e)}updateNode(e,o){this.canvas.updateNode(e,o)}removeNode(e){this.canvas.removeNode(e)}markPort(e){this.canvas.markPort(e)}updatePort(e,o){this.canvas.updatePort(e,o)}unmarkPort(e){this.canvas.unmarkPort(e)}addEdge(e){this.canvas.addEdge(e)}updateEdge(e,o){this.canvas.updateEdge(e,o)}removeEdge(e){this.canvas.removeEdge(e)}patchViewportMatrix(e){this.canvas.patchViewportMatrix(e),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}patchContentMatrix(e){this.canvas.patchContentMatrix(e),this.viewportMatrix=this.canvas.viewport.getViewportMatrix(),this.loadAreaAroundViewport()}clear(){this.canvas.clear()}destroy(){this.trigger.unsubscribe(this.updateLoadedArea),this.canvasResizeObserver.unobserve(this.element),this.canvas.destroy()}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const e=this.viewportWidththis.viewportMatrix.scale,o=this.viewportHeightthis.viewportMatrix.scale,r=this.viewportMatrix.x-this.nodeHorizontal,s=this.viewportMatrix.y-this.nodeVertical,d=this.viewportMatrix.x+e+this.nodeHorizontal,n=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<r&&this.loadedArea.xTo>d&&this.loadedArea.yFrom<s&&this.loadedArea.yTo>n\|\|this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const e=this.viewportWidththis.viewportMatrix.scale,o=this.viewportHeightthis.viewportMatrix.scale,r=this.viewportMatrix.x-e-this.nodeHorizontal,s=this.viewportMatrix.y-o-this.nodeVertical,d=3e+2this.nodeHorizontal,n=3o+2this.nodeVertical;this.trigger.emit({x:r,y:s,width:d,height:n})}}const Ee=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},Ae=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t},Se=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden",t};class pe{constructor(e,o,r){i(this,"host",Ee());i(this,"container",Ae());i(this,"nodeIdToWrapperElementMap",new Map);i(this,"edgeIdToElementMap",new Map);i(this,"applyTransform",()=>{const e=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`});this.graphStore=e,this.viewportStore=o,this.element=r,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(e){const o=this.graphStore.getNode(e),r=Se();r.appendChild(o.element),this.container.appendChild(r),this.nodeIdToWrapperElementMap.set(e,r),this.updateNodePosition(e),this.updateNodePriority(e),r.style.visibility="visible"}detachNode(e){const o=this.nodeIdToWrapperElementMap.get(e);o.removeChild(o.firstChild),this.container.removeChild(o),this.nodeIdToWrapperElementMap.delete(e)}attachEdge(e){const o=this.graphStore.getEdge(e).shape.svg;this.edgeIdToElementMap.set(e,o),this.container.appendChild(o),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((e,o)=>{this.detachNode(o)})}destroy(){this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform),this.clear(),this.element.removeChild(this.host),this.host.removeChild(this.container)}updateNodePosition(e){const o=this.nodeIdToWrapperElementMap.get(e),r=this.graphStore.getNode(e),{width:s,height:d}=r.element.getBoundingClientRect(),n=this.viewportStore.getViewportMatrix().scale,h=r.centerFn(s,d),c=r.x-nh.x,a=r.y-nh.y;o.style.transform=`translate(${c}px, ${a}px)`}updateNodePriority(e){const o=this.graphStore.getNode(e),r=this.nodeIdToWrapperElementMap.get(e);r.style.zIndex=`${o.priority}`}updateEdgeShape(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o);const r=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,r.shape.svg),this.container.appendChild(r.shape.svg)}renderEdge(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from),s=this.graphStore.getPort(o.to),d=r.element.getBoundingClientRect(),n=s.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),c=this.viewportStore.getViewportMatrix(),a={x:c.scale(d.left-h.left)+c.x,y:c.scale(d.top-h.top)+c.y},l={x:c.scale(n.left-h.left)+c.x,y:c.scale(n.top-h.top)+c.y},g={x:a.x,y:a.y,width:d.widthc.scale,height:d.heightc.scale,direction:r.direction,portId:o.from,nodeId:r.nodeId},f={x:l.x,y:l.y,width:n.widthc.scale,height:n.heightc.scale,direction:s.direction,portId:o.to,nodeId:s.nodeId};o.shape.render({from:g,to:f})}updateEdgePriority(e){const o=this.graphStore.getEdge(e);o.shape.svg.style.zIndex=`${o.priority}`}}class Ne{constructor(e){i(this,"xFrom",1/0);i(this,"yFrom",1/0);i(this,"xTo",1/0);i(this,"yTo",1/0);this.graphStore=e}setRenderingBox(e){this.xFrom=e.x,this.xTo=e.x+e.width,this.yFrom=e.y,this.yTo=e.y+e.height}hasNode(e){const o=this.graphStore.getNode(e);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId,d=this.graphStore.getNode(r),n=this.graphStore.getNode(s),h=Math.min(d.x,n.x),c=Math.max(d.x,n.x),a=Math.min(d.y,n.y),l=Math.max(d.y,n.y);return h<=this.xTo&&c>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class Te{constructor(e,o,r){i(this,"attachedNodes",new Set);i(this,"attachedEdges",new Set);i(this,"renderingBox");i(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const o=new Set,r=new Set,s=new Set,d=new Set;this.graphStore.getAllNodeIds().forEach(n=>{const h=this.renderingBox.hasNode(n),c=this.attachedNodes.has(n);h&&!c?o.add(n):!h&&c&&r.add(n)}),this.graphStore.getAllEdgeIds().forEach(n=>{const h=this.renderingBox.hasEdge(n),c=this.attachedEdges.has(n),a=this.graphStore.getEdge(n),l=this.graphStore.getPort(a.from).nodeId,g=this.graphStore.getPort(a.to).nodeId;h&&(this.renderingBox.hasNode(l)\|\|(o.add(l),r.delete(l)),this.renderingBox.hasNode(g)\|\|(o.add(g),r.delete(g))),h&&!c?s.add(n):!h&&c&&d.add(n)}),d.forEach(n=>{this.handleDetachEdge(n)}),r.forEach(n=>{this.handleDetachNode(n)}),o.forEach(n=>{this.attachedNodes.has(n)\|\|this.handleAttachNode(n)}),s.forEach(n=>{this.handleAttachEdge(n)})});this.htmlView=e,this.graphStore=o,this.trigger=r,this.renderingBox=new Ne(this.graphStore),this.trigger.subscribe(this.updateViewport)}attachNode(e){this.renderingBox.hasNode(e)&&this.handleAttachNode(e)}detachNode(e){this.attachedNodes.has(e)&&this.handleDetachNode(e)}attachEdge(e){this.renderingBox.hasEdge(e)&&this.attachEdgeEntities(e)}detachEdge(e){this.attachedEdges.has(e)&&this.handleDetachEdge(e)}updateNodePosition(e){this.attachedNodes.has(e)?this.htmlView.updateNodePosition(e):this.renderingBox.hasNode(e)&&(this.handleAttachNode(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(e){this.attachedNodes.has(e)&&this.htmlView.updateNodePriority(e)}updateEdgeShape(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgeShape(e)}renderEdge(e){this.attachedEdges.has(e)&&this.htmlView.renderEdge(e)}updateEdgePriority(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgePriority(e)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId;this.attachedNodes.has(r)\|\|this.handleAttachNode(r),this.attachedNodes.has(s)\|\|this.handleAttachNode(s),this.handleAttachEdge(e)}handleAttachNode(e){this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class X{constructor(){i(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(o=>{o(e)})}}const A=()=>{const t=new X;return[t,t]};class H{constructor(e){i(this,"counter",0);this.checkExists=e}create(e){if(e!==void 0)return e;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class S extends Error{constructor(){super(...arguments);i(this,"name","HtmlGraphError")}}const me=(t,e)=>({x:t/2,y:e/2}),j=t=>()=>t,O=j(0),be=()=>{let t=0;return()=>t++},Pe=(t,e)=>{let o=O,r=O;const s=be();return t==="incremental"&&(o=s),e==="incremental"&&(r=s),typeof t=="number"&&(o=j(t)),typeof e=="number"&&(r=j(e)),typeof t=="function"&&(o=t),typeof e=="function"&&(r=e),{nodesPriorityFn:o,edgesPriorityFn:r}},v=(t,e,o)=>({x:e.xt.x-e.yt.y+((1-e.x)o.x+e.yo.y),y:e.yt.x+e.xt.y+((1-e.x)o.y-e.yo.x)}),b=(t,e,o)=>({x:eMath.cos(t),y:oMath.sin(t)}),u={x:0,y:0},P=(t,e,o,r)=>{const d=[u,{x:o,y:r},{x:o,y:-r}].map(a=>v(a,t,u)).map(a=>({x:a.x+e.x,y:a.y+e.y})),n=`M ${d[0].x} ${d[0].y}`,h=`L ${d[1].x} ${d[1].y}`,c=`L ${d[2].x} ${d[2].y}`;return`${n} ${h} ${c}`},D=(t,e)=>{const o=[];if(t.length>0&&o.push(`M ${t[0].x} ${t[0].y}`),t.length===2&&o.push(`L ${t[1].x} ${t[1].y}`),t.length>2){const r=t.length-1;let s=0,d=0,n=0;t.forEach((h,c)=>{let a=0,l=0,g=0;const f=c>0,x=c<r,y=f&&x;if(f&&(a=-s,l=-d,g=n),x){const $=t[c+1];s=$.x-h.x,d=$.y-h.y,n=Math.sqrt(ss+dd)}const N=n!==0?Math.min((y?e:0)/n,c<r-1?.5:1):0,m=y?{x:h.x+sN,y:h.y+dN}:h,C=g!==0?Math.min((y?e:0)/g,c>1?.5:1):0,U=y?{x:h.x+aC,y:h.y+lC}:h;c>0&&o.push(`L ${U.x} ${U.y}`),y&&o.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${m.x} ${m.y}`)})}return o.join(" ")},B=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.pointerEvents="none",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.overflow="visible",t},z=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},Y=(t,e)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",t),o.setAttribute("stroke-width",`${e}`),o.setAttribute("fill","none"),o},M=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",t),e},k=(t,e)=>{const o={x:t.x+t.width/2,y:t.y+t.height/2},r={x:e.x+e.width/2,y:e.y+e.height/2},s=Math.min(o.x,r.x),d=Math.min(o.y,r.y),n=Math.abs(r.x-o.x),h=Math.abs(r.y-o.y),c=o.x<=r.x?1:-1,a=o.y<=r.y?1:-1;return{x:s,y:d,width:n,height:h,flipX:c,flipY:a}},Me=t=>{const e=v({x:t.arrowLength,y:u.y},t.fromVect,u),o=v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to),r={x:e.x+t.fromVect.xt.curvature,y:e.y+t.fromVect.yt.curvature},s={x:o.x-t.toVect.xt.curvature,y:o.y-t.toVect.yt.curvature},d=`M ${e.x} ${e.y} C ${r.x} ${r.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`,n=t.hasSourceArrow?"":`M ${u.x} ${u.y} L ${e.x} ${e.y} `,h=t.hasTargetArrow?"":` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;return`${n}${d}${h}`},Ve=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength,s=Math.cos(t.detourDirection)t.detourDistance,d=Math.sin(t.detourDirection)t.detourDistance,n=st.flipX,h=dt.flipY,c=v({x:r,y:u.y},t.fromVect,u),a={x:c.x+n,y:c.y+h},l=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to),g={x:l.x+n,y:l.y+h},f={x:(a.x+g.x)/2,y:(a.y+g.y)/2},x={x:c.x+t.curvaturet.fromVect.x,y:c.y+t.curvaturet.fromVect.y},y={x:l.x-t.curvaturet.toVect.x,y:l.y-t.curvaturet.toVect.y},T={x:c.x+n,y:c.y+h},N={x:l.x+n,y:l.y+h};return[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${x.x} ${x.y} ${T.x} ${T.y} ${f.x} ${f.y}`,`C ${N.x} ${N.y} ${y.x} ${y.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},Le=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=r-t.roundness,d=v({x:s,y:u.y},t.fromVect,u),n=v({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.x+n.x)/2,r),c=t.to.y/2,a={x:t.flipX>0?h:-r,y:d.y},l={x:a.x,y:c},g={x:t.flipX>0?t.to.x-h:t.to.x+r,y:n.y},f={x:g.x,y:c};return D([e,d,a,l,f,g,n,o],t.roundness)},G=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=v({x:r,y:u.y},t.fromVect,u),d=Math.cos(t.detourDirection)t.detourDistance,n=Math.sin(t.detourDirection)t.detourDistance,h=dt.flipX,c=nt.flipY,a={x:s.x+h,y:s.y+c},l=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to),g={x:l.x+h,y:l.y+c};return D([e,s,a,g,l,o],t.roundness)},De=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=v({x:r,y:u.y},t.fromVect,u),d=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to);return D([e,s,d,o],t.roundness)},Ce=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=r-t.roundness,d=v({x:s,y:u.y},t.fromVect,u),n=v({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.y+n.y)/2,r),c=t.to.x/2,a={x:d.x,y:t.flipY>0?h:-r},l={x:c,y:a.y},g={x:n.x,y:t.flipY>0?t.to.y-h:t.to.y+r},f={x:c,y:g.y};return D([e,d,a,l,f,g,n,o],t.roundness)},_=t=>{const e=t.arrowOffset,o=t.side,r=t.arrowLength+e,s=r+2o,n=[{x:t.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:t.side},{x:s,y:t.side},{x:s,y:-t.side},{x:r,y:-t.side},{x:r,y:u.y},{x:t.arrowLength,y:u.y}].map(c=>v(c,t.fromVect,u)),h=`M ${u.x} ${u.y} L ${n[0].x} ${n[0].y} `;return`${t.hasSourceArrow\|\|t.hasTargetArrow?"":h}${D(n,t.roundness)}`},Ue=t=>{const e=t.smallRadius,o=t.radius,r=Math.sqrt(ee+oo),s=e+o,d=t.arrowLength+r(1-o/s),n=eo/s,c=[{x:t.arrowLength,y:u.y},{x:d,y:n},{x:d,y:-n}].map(g=>v(g,t.fromVect,u)),a=[`M ${c[0].x} ${c[0].y}`,`A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),l=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${t.hasSourceArrow\|\|t.hasTargetArrow?"":l}${a}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class q{constructor(e){i(this,"svg",B());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=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.curvature=(e==null?void 0:e.curvature)??w.curvature,this.portCycleRadius=(e==null?void 0:e.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(e==null?void 0:e.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const o=(e==null?void 0:e.color)??w.color,r=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=Y(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(o),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=Ue({fromVect:c,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=Ve({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Me({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class ee{constructor(e){i(this,"svg",B());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=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=_({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=G({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Le({to:l,fromVect:c,toVect:a,flipX:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class te{constructor(e){i(this,"svg",B());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=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=_({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=G({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=De({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class oe{constructor(e){i(this,"svg",B());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=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirectionVertical,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=Y(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=k(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=b(e.from.direction,n,h),a=b(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=_({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=G({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Ce({to:l,fromVect:c,toVect:a,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}const $e=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new te({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new ee({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new oe({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});default:return()=>new q({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},Re=t=>{var o,r,s,d,n;const e=Pe((o=t==null?void 0:t.nodes)==null?void 0:o.priority,(r=t==null?void 0:t.edges)==null?void 0:r.priority);return{nodes:{centerFn:((s=t==null?void 0:t.nodes)==null?void 0:s.centerFn)??me,priorityFn:e.nodesPriorityFn},ports:{direction:((d=t==null?void 0:t.ports)==null?void 0:d.direction)??0},edges:{shapeFactory:$e(((n=t==null?void 0:t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class Ie{constructor(e,o,r){i(this,"nodeIdGenerator",new H(e=>this.graph.getNode(e)!==null));i(this,"portIdGenerator",new H(e=>this.graph.getPort(e)!==null));i(this,"edgeIdGenerator",new H(e=>this.graph.getEdge(e)!==null));i(this,"defaults");i(this,"graph");i(this,"viewport");this.element=e,this.controller=o,this.defaults=Re(r),this.graph=o.graph,this.viewport=o.viewport}addNode(e){const o=this.nodeIdGenerator.create(e.id);if(this.graph.getNode(o)!==null)throw new S("failed to add node with existing id");if(this.controller.addNode({id:o,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.defaults.nodes.centerFn,priority:e.priority??this.defaults.nodes.priorityFn()}),e.ports!==void 0)for(const r of e.ports)this.markPort({id:r.id,element:r.element,nodeId:o,direction:r.direction});return this}updateNode(e,o){if(this.graph.getNode(e)===null)throw new S("failed to update nonexisting node");return this.controller.updateNode(e,o??{}),this}removeNode(e){if(this.graph.getNode(e)===null)throw new S("failed to remove nonexisting node");return this.controller.removeNode(e),this}markPort(e){const o=this.portIdGenerator.create(e.id);if(this.graph.getPort(o)!==null)throw new S("failed to add port with existing id");if(this.graph.getNode(e.nodeId)===null)throw new S("failed to set port on nonexisting node");return this.controller.markPort({id:o,element:e.element,nodeId:e.nodeId,direction:e.direction??this.defaults.ports.direction}),this}updatePort(e,o){if(this.graph.getPort(e)===null)throw new S("failed to unset nonexisting port");return this.controller.updatePort(e,o??{}),this}unmarkPort(e){if(this.graph.getPort(e)===null)throw new S("failed to unset nonexisting port");return this.controller.unmarkPort(e),this}addEdge(e){const o=this.edgeIdGenerator.create(e.id);if(this.graph.getEdge(o)!==null)throw new S("failed to add edge with existing id");if(this.graph.getPort(e.from)===null)throw new S("failed to add edge from nonexisting port");if(this.graph.getPort(e.to)===null)throw new S("failed to add edge to nonexisting port");return this.controller.addEdge({id:o,from:e.from,to:e.to,shape:e.shape??this.defaults.edges.shapeFactory(),priority:e.priority??this.defaults.edges.priorityFn()}),this}updateEdge(e,o){if(this.graph.getEdge(e)===null)throw new S("failed to update nonexisting edge");return this.controller.updateEdge(e,o??{}),this}removeEdge(e){if(this.graph.getEdge(e)===null)throw new S("failed to remove nonexisting edge");return this.controller.removeEdge(e),this}patchViewportMatrix(e){return this.controller.patchViewportMatrix(e),this}patchContentMatrix(e){return this.controller.patchContentMatrix(e),this}clear(){return this.controller.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this}destroy(){this.controller.destroy()}}class We{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);i(this,"afterNodeAddedEmitter");i(this,"onAfterNodeAdded");i(this,"afterNodeUpdatedEmitter");i(this,"onAfterNodeUpdated");i(this,"afterNodePriorityUpdatedEmitter");i(this,"onAfterNodePriorityUpdated");i(this,"beforeNodeRemovedEmitter");i(this,"onBeforeNodeRemoved");i(this,"afterPortAddedEmitter");i(this,"onAfterPortAdded");i(this,"afterPortUpdatedEmitter");i(this,"onAfterPortUpdated");i(this,"beforePortRemovedEmitter");i(this,"onBeforePortRemoved");i(this,"afterEdgeAddedEmitter");i(this,"onAfterEdgeAdded");i(this,"afterEdgeShapeUpdatedEmitter");i(this,"onAfterEdgeShapeUpdated");i(this,"afterEdgeUpdatedEmitter");i(this,"onAfterEdgeUpdated");i(this,"afterEdgePriorityUpdatedEmitter");i(this,"onAfterEdgePriorityUpdated");i(this,"beforeEdgeRemovedEmitter");i(this,"onBeforeEdgeRemoved");i(this,"beforeClearEmitter");i(this,"onBeforeClear");[this.afterNodeAddedEmitter,this.onAfterNodeAdded]=A(),[this.afterNodeUpdatedEmitter,this.onAfterNodeUpdated]=A(),[this.afterNodePriorityUpdatedEmitter,this.onAfterNodePriorityUpdated]=A(),[this.beforeNodeRemovedEmitter,this.onBeforeNodeRemoved]=A(),[this.afterPortAddedEmitter,this.onAfterPortAdded]=A(),[this.afterPortUpdatedEmitter,this.onAfterPortUpdated]=A(),[this.beforePortRemovedEmitter,this.onBeforePortRemoved]=A(),[this.afterEdgeAddedEmitter,this.onAfterEdgeAdded]=A(),[this.afterEdgeShapeUpdatedEmitter,this.onAfterEdgeShapeUpdated]=A(),[this.afterEdgeUpdatedEmitter,this.onAfterEdgeUpdated]=A(),[this.afterEdgePriorityUpdatedEmitter,this.onAfterEdgePriorityUpdated]=A(),[this.beforeEdgeRemovedEmitter,this.onBeforeEdgeRemoved]=A(),[this.beforeClearEmitter,this.onBeforeClear]=A()}addNode(e){const o=new Map,r={element:e.element,x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority,ports:o};this.nodes.set(e.id,r),this.afterNodeAddedEmitter.emit(e.id)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}updateNode(e,o){const r=this.nodes.get(e);r.x=o.x??r.x,r.y=o.y??r.y,r.centerFn=o.centerFn??r.centerFn,o.priority!==void 0&&(r.priority=o.priority,this.afterNodePriorityUpdatedEmitter.emit(e)),this.afterNodeUpdatedEmitter.emit(e)}removeNode(e){this.beforeNodeRemovedEmitter.emit(e),this.nodes.delete(e)}addPort(e){this.ports.set(e.id,{element:e.element,direction:e.direction,nodeId:e.nodeId}),this.cycleEdges.set(e.id,new Set),this.incommingEdges.set(e.id,new Set),this.outcommingEdges.set(e.id,new Set),this.nodes.get(e.nodeId).ports.set(e.id,e.element),this.afterPortAddedEmitter.emit(e.id)}getPort(e){return this.ports.get(e)}updatePort(e,o){const r=this.ports.get(e);r.direction=o.direction??r.direction,this.afterPortUpdatedEmitter.emit(e)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(e){const o=this.nodes.get(e);if(o!==void 0)return Array.from(o.ports.keys())}removePort(e){const o=this.ports.get(e).nodeId;this.beforePortRemovedEmitter.emit(e),this.nodes.get(o).ports.delete(e),this.ports.delete(e)}addEdge(e){this.addEdgeInternal(e),this.afterEdgeAddedEmitter.emit(e.id)}updateEdge(e,o){if(o.from!==void 0\|\|o.to!==void 0){const s=this.edges.get(e);this.removeEdgeInternal(e),this.addEdgeInternal({id:e,from:o.from??s.from,to:o.to??s.to,shape:s.shape,priority:s.priority})}const r=this.edges.get(e);o.shape!==void 0&&(r.shape=o.shape,this.afterEdgeShapeUpdatedEmitter.emit(e)),o.priority!==void 0&&(r.priority=o.priority,this.afterEdgePriorityUpdatedEmitter.emit(e)),this.afterEdgeUpdatedEmitter.emit(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){this.beforeEdgeRemovedEmitter.emit(e),this.removeEdgeInternal(e)}clear(){this.beforeClearEmitter.emit(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear(),this.edges.clear(),this.ports.clear(),this.nodes.clear()}getPortIncomingEdgeIds(e){return Array.from(this.incommingEdges.get(e))}getPortOutcomingEdgeIds(e){return Array.from(this.outcommingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortIncomingEdgeIds(s)]}),r}getNodeOutcomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortOutcomingEdgeIds(s)]}),r}getNodeCycleEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortCycleEdgeIds(s)]}),r}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}addEdgeInternal(e){this.edges.set(e.id,{from:e.from,to:e.to,shape:e.shape,priority:e.priority}),e.from!==e.to?(this.outcommingEdges.get(e.from).add(e.id),this.incommingEdges.get(e.to).add(e.id)):this.cycleEdges.get(e.from).add(e.id)}removeEdgeInternal(e){const o=this.edges.get(e),r=o.from,s=o.to;this.cycleEdges.get(r).delete(e),this.cycleEdges.get(s).delete(e),this.incommingEdges.get(r).delete(e),this.incommingEdges.get(s).delete(e),this.outcommingEdges.get(r).delete(e),this.outcommingEdges.get(s).delete(e),this.edges.delete(e)}}const re=t=>({scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}),ie={scale:1,x:0,y:0};class Fe{constructor(){i(this,"viewportMatrix",ie);i(this,"contentMatrix",ie);i(this,"afterUpdateEmitter");i(this,"onAfterUpdated");i(this,"beforeUpdateEmitter");i(this,"onBeforeUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=A(),[this.beforeUpdateEmitter,this.onBeforeUpdated]=A()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.beforeUpdateEmitter.emit(),this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=re(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(e){this.beforeUpdateEmitter.emit(),this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=re(this.contentMatrix),this.afterUpdateEmitter.emit()}}class J{constructor(e){i(this,"elementToNodeId",new Map);i(this,"nodesResizeObserver");i(this,"onAfterNodeAdded",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.set(o.element,e),this.nodesResizeObserver.observe(o.element)});i(this,"onBeforeNodeRemoved",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.delete(o.element),this.nodesResizeObserver.unobserve(o.element)});i(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});this.canvas=e,this.nodesResizeObserver=new ResizeObserver(o=>{o.forEach(r=>{const s=r.target;this.handleNodeResize(s)})}),this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear)}static configure(e){new J(e)}handleNodeResize(e){const o=this.elementToNodeId.get(e);this.canvas.updateNode(o),this.canvas.graph.getNodeAdjacentEdgeIds(o).forEach(s=>{this.canvas.updateEdge(s)})}}class Be{constructor(){i(this,"element",null);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")}setElement(e){return this.element=e,this}setDefaults(e){return this.canvasDefaults=e,this}enableUserDraggableNodes(e){return this.hasDraggableNode=!0,this.dragOptions=e,this}enableUserTransformableViewport(e){return this.hasTransformableViewport=!0,this.transformOptions=e,this}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(e){return this.boxRenderingTrigger=e,this}enableVirtualScroll(e){return this.virtualScrollOptions=e,this}build(){if(this.element===null)throw new S("unable to build canvas when no attach element specified");let e=this.boxRenderingTrigger;this.virtualScrollOptions!==void 0&&e===void 0&&(e=new X);const o=new We,r=new Fe;let s=new pe(o,r,this.element);e!==void 0&&(s=new Te(s,o,e));let d=new ce(o,r,s);this.hasDraggableNode&&(d=new le(d,this.element,this.dragOptions)),this.virtualScrollOptions!==void 0?d=new xe(d,e,this.transformOptions,this.virtualScrollOptions,this.element):this.hasTransformableViewport&&(d=new Z(d,this.element,this.transformOptions));const n=new Ie(this.element,d,this.canvasDefaults);return this.hasResizeReactiveNodes&&J.configure(n),this.reset(),n}reset(){this.element=null,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=q,E.CanvasBuilder=Be,E.EventSubject=X,E.HorizontalEdgeShape=ee,E.HtmlGraphError=S,E.StraightEdgeShape=te,E.VerticalEdgeShape=oe,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
1	+ (function(A,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(A=typeof globalThis<"u"?globalThis:A\|\|self,T(A.HtmlGraph={}))})(this,function(A){"use strict";var Fe=Object.defineProperty;var ze=(A,T,V)=>T in A?Fe(A,T,{enumerable:!0,configurable:!0,writable:!0,value:V}):A[T]=V;var i=(A,T,V)=>ze(A,typeof T!="symbol"?T+"":T,V);const T=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},V=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t},le=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden",t};class ge{constructor(e,o,r){i(this,"host",T());i(this,"container",V());i(this,"nodeIdToWrapperElementMap",new Map);i(this,"edgeIdToElementMap",new Map);i(this,"applyTransform",()=>{const e=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`});this.graphStore=e,this.viewportStore=o,this.element=r,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(e){const o=this.graphStore.getNode(e),r=le();r.appendChild(o.element),this.container.appendChild(r),this.nodeIdToWrapperElementMap.set(e,r),this.updateNodePosition(e),this.updateNodePriority(e),r.style.visibility="visible"}detachNode(e){const o=this.nodeIdToWrapperElementMap.get(e);o.removeChild(o.firstChild),this.container.removeChild(o),this.nodeIdToWrapperElementMap.delete(e)}attachEdge(e){const o=this.graphStore.getEdge(e).shape.svg;this.edgeIdToElementMap.set(e,o),this.container.appendChild(o),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((e,o)=>{this.detachNode(o)})}destroy(){this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform),this.clear(),this.element.removeChild(this.host),this.host.removeChild(this.container)}updateNodePosition(e){const o=this.nodeIdToWrapperElementMap.get(e),r=this.graphStore.getNode(e),{width:s,height:d}=r.element.getBoundingClientRect(),n=this.viewportStore.getViewportMatrix().scale,h=r.centerFn(s,d),c=r.x-nh.x,a=r.y-nh.y;o.style.transform=`translate(${c}px, ${a}px)`}updateNodePriority(e){const o=this.graphStore.getNode(e),r=this.nodeIdToWrapperElementMap.get(e);r.style.zIndex=`${o.priority}`}updateEdgeShape(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o);const r=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,r.shape.svg),this.container.appendChild(r.shape.svg)}renderEdge(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from),s=this.graphStore.getPort(o.to),d=r.element.getBoundingClientRect(),n=s.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),c=this.viewportStore.getViewportMatrix(),a={x:c.scale(d.left-h.left)+c.x,y:c.scale(d.top-h.top)+c.y},l={x:c.scale(n.left-h.left)+c.x,y:c.scale(n.top-h.top)+c.y},g={x:a.x,y:a.y,width:d.widthc.scale,height:d.heightc.scale,direction:r.direction,portId:o.from,nodeId:r.nodeId},f={x:l.x,y:l.y,width:n.widthc.scale,height:n.heightc.scale,direction:s.direction,portId:o.to,nodeId:s.nodeId};o.shape.render({from:g,to:f})}updateEdgePriority(e){const o=this.graphStore.getEdge(e);o.shape.svg.style.zIndex=`${o.priority}`}}class ue{constructor(e){i(this,"xFrom",1/0);i(this,"yFrom",1/0);i(this,"xTo",1/0);i(this,"yTo",1/0);this.graphStore=e}setRenderingBox(e){this.xFrom=e.x,this.xTo=e.x+e.width,this.yFrom=e.y,this.yTo=e.y+e.height}hasNode(e){const o=this.graphStore.getNode(e);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId,d=this.graphStore.getNode(r),n=this.graphStore.getNode(s),h=Math.min(d.x,n.x),c=Math.max(d.x,n.x),a=Math.min(d.y,n.y),l=Math.max(d.y,n.y);return h<=this.xTo&&c>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class we{constructor(e,o,r){i(this,"attachedNodes",new Set);i(this,"attachedEdges",new Set);i(this,"renderingBox");i(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const o=new Set,r=new Set,s=new Set,d=new Set;this.graphStore.getAllNodeIds().forEach(n=>{const h=this.renderingBox.hasNode(n),c=this.attachedNodes.has(n);h&&!c?o.add(n):!h&&c&&r.add(n)}),this.graphStore.getAllEdgeIds().forEach(n=>{const h=this.renderingBox.hasEdge(n),c=this.attachedEdges.has(n),a=this.graphStore.getEdge(n),l=this.graphStore.getPort(a.from).nodeId,g=this.graphStore.getPort(a.to).nodeId;h&&(this.renderingBox.hasNode(l)\|\|(o.add(l),r.delete(l)),this.renderingBox.hasNode(g)\|\|(o.add(g),r.delete(g))),h&&!c?s.add(n):!h&&c&&d.add(n)}),d.forEach(n=>{this.handleDetachEdge(n)}),r.forEach(n=>{this.handleDetachNode(n)}),o.forEach(n=>{this.attachedNodes.has(n)\|\|this.handleAttachNode(n)}),s.forEach(n=>{this.handleAttachEdge(n)})});this.htmlView=e,this.graphStore=o,this.trigger=r,this.renderingBox=new ue(this.graphStore),this.trigger.subscribe(this.updateViewport)}attachNode(e){this.renderingBox.hasNode(e)&&this.handleAttachNode(e)}detachNode(e){this.attachedNodes.has(e)&&this.handleDetachNode(e)}attachEdge(e){this.renderingBox.hasEdge(e)&&this.attachEdgeEntities(e)}detachEdge(e){this.attachedEdges.has(e)&&this.handleDetachEdge(e)}updateNodePosition(e){this.attachedNodes.has(e)?this.htmlView.updateNodePosition(e):this.renderingBox.hasNode(e)&&(this.handleAttachNode(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(e){this.attachedNodes.has(e)&&this.htmlView.updateNodePriority(e)}updateEdgeShape(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgeShape(e)}renderEdge(e){this.attachedEdges.has(e)&&this.htmlView.renderEdge(e)}updateEdgePriority(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgePriority(e)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(e){const o=this.graphStore.getEdge(e),r=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId;this.attachedNodes.has(r)\|\|this.handleAttachNode(r),this.attachedNodes.has(s)\|\|this.handleAttachNode(s),this.handleAttachEdge(e)}handleAttachNode(e){this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class k{constructor(){i(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(o=>{o(e)})}}const E=()=>{const t=new k;return[t,t]};class fe{constructor(e){i(this,"onBeforeUpdated");i(this,"onAfterUpdated");this.transformer=e,this.onBeforeUpdated=this.transformer.onBeforeUpdated,this.onAfterUpdated=this.transformer.onAfterUpdated}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}class ye{constructor(e){i(this,"onAfterNodeAdded");i(this,"onAfterNodeUpdated");i(this,"onAfterNodePriorityUpdated");i(this,"onBeforeNodeRemoved");i(this,"onAfterPortMarked");i(this,"onAfterPortUpdated");i(this,"onBeforePortUnmarked");i(this,"onAfterEdgeAdded");i(this,"onAfterEdgeShapeUpdated");i(this,"onAfterEdgeUpdated");i(this,"onAfterEdgePriorityUpdated");i(this,"onBeforeEdgeRemoved");i(this,"onBeforeClear");this.graphStore=e,this.onAfterNodeAdded=this.graphStore.onAfterNodeAdded,this.onAfterNodeUpdated=this.graphStore.onAfterNodeUpdated,this.onAfterNodePriorityUpdated=this.graphStore.onAfterNodePriorityUpdated,this.onBeforeNodeRemoved=this.graphStore.onBeforeNodeRemoved,this.onAfterPortMarked=this.graphStore.onAfterPortAdded,this.onAfterPortUpdated=this.graphStore.onAfterPortUpdated,this.onBeforePortUnmarked=this.graphStore.onBeforePortRemoved,this.onAfterEdgeAdded=this.graphStore.onAfterEdgeAdded,this.onAfterEdgeShapeUpdated=this.graphStore.onAfterEdgeShapeUpdated,this.onAfterEdgeUpdated=this.graphStore.onAfterEdgeUpdated,this.onAfterEdgePriorityUpdated=this.graphStore.onAfterEdgePriorityUpdated,this.onBeforeEdgeRemoved=this.graphStore.onBeforeEdgeRemoved,this.onBeforeClear=this.graphStore.onBeforeClear}getNode(e){const o=this.graphStore.getNode(e);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(e){const o=this.graphStore.getPort(e);return o===void 0?null:{element:o.element,direction:o.direction,nodeId:o.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const o=this.graphStore.getEdge(e);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(e)}}class j{constructor(e){i(this,"counter",0);this.checkExists=e}create(e){if(e!==void 0)return e;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class p extends Error{constructor(){super(...arguments);i(this,"name","HtmlGraphError")}}const ve=(t,e)=>({x:t/2,y:e/2}),G=t=>()=>t,O=G(0),xe=()=>{let t=0;return()=>t++},Ae=(t,e)=>{let o=O,r=O;const s=xe();return t==="incremental"&&(o=s),e==="incremental"&&(r=s),typeof t=="number"&&(o=G(t)),typeof e=="number"&&(r=G(e)),typeof t=="function"&&(o=t),typeof e=="function"&&(r=e),{nodesPriorityFn:o,edgesPriorityFn:r}},v=(t,e,o)=>({x:e.xt.x-e.yt.y+((1-e.x)o.x+e.yo.y),y:e.yt.x+e.xt.y+((1-e.x)o.y-e.yo.x)}),m=(t,e,o)=>({x:eMath.cos(t),y:oMath.sin(t)}),u={x:0,y:0},P=(t,e,o,r)=>{const d=[u,{x:o,y:r},{x:o,y:-r}].map(a=>v(a,t,u)).map(a=>({x:a.x+e.x,y:a.y+e.y})),n=`M ${d[0].x} ${d[0].y}`,h=`L ${d[1].x} ${d[1].y}`,c=`L ${d[2].x} ${d[2].y}`;return`${n} ${h} ${c}`},L=(t,e)=>{const o=[];if(t.length>0&&o.push(`M ${t[0].x} ${t[0].y}`),t.length===2&&o.push(`L ${t[1].x} ${t[1].y}`),t.length>2){const r=t.length-1;let s=0,d=0,n=0;t.forEach((h,c)=>{let a=0,l=0,g=0;const f=c>0,x=c<r,y=f&&x;if(f&&(a=-s,l=-d,g=n),x){const U=t[c+1];s=U.x-h.x,d=U.y-h.y,n=Math.sqrt(ss+dd)}const S=n!==0?Math.min((y?e:0)/n,c<r-1?.5:1):0,N=y?{x:h.x+sS,y:h.y+dS}:h,C=g!==0?Math.min((y?e:0)/g,c>1?.5:1):0,R=y?{x:h.x+aC,y:h.y+lC}:h;c>0&&o.push(`L ${R.x} ${R.y}`),y&&o.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${N.x} ${N.y}`)})}return o.join(" ")},I=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.pointerEvents="none",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.overflow="visible",t},B=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},$=(t,e)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",t),o.setAttribute("stroke-width",`${e}`),o.setAttribute("fill","none"),o},M=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",t),e},W=(t,e)=>{const o={x:t.x+t.width/2,y:t.y+t.height/2},r={x:e.x+e.width/2,y:e.y+e.height/2},s=Math.min(o.x,r.x),d=Math.min(o.y,r.y),n=Math.abs(r.x-o.x),h=Math.abs(r.y-o.y),c=o.x<=r.x?1:-1,a=o.y<=r.y?1:-1;return{x:s,y:d,width:n,height:h,flipX:c,flipY:a}},Ee=t=>{const e=v({x:t.arrowLength,y:u.y},t.fromVect,u),o=v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to),r={x:e.x+t.fromVect.xt.curvature,y:e.y+t.fromVect.yt.curvature},s={x:o.x-t.toVect.xt.curvature,y:o.y-t.toVect.yt.curvature},d=`M ${e.x} ${e.y} C ${r.x} ${r.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`,n=t.hasSourceArrow?"":`M ${u.x} ${u.y} L ${e.x} ${e.y} `,h=t.hasTargetArrow?"":` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;return`${n}${d}${h}`},Se=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength,s=Math.cos(t.detourDirection)t.detourDistance,d=Math.sin(t.detourDirection)t.detourDistance,n=st.flipX,h=dt.flipY,c=v({x:r,y:u.y},t.fromVect,u),a={x:c.x+n,y:c.y+h},l=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to),g={x:l.x+n,y:l.y+h},f={x:(a.x+g.x)/2,y:(a.y+g.y)/2},x={x:c.x+t.curvaturet.fromVect.x,y:c.y+t.curvaturet.fromVect.y},y={x:l.x-t.curvaturet.toVect.x,y:l.y-t.curvaturet.toVect.y},b={x:c.x+n,y:c.y+h},S={x:l.x+n,y:l.y+h};return[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${x.x} ${x.y} ${b.x} ${b.y} ${f.x} ${f.y}`,`C ${S.x} ${S.y} ${y.x} ${y.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},pe=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=r-t.roundness,d=v({x:s,y:u.y},t.fromVect,u),n=v({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.x+n.x)/2,r),c=t.to.y/2,a={x:t.flipX>0?h:-r,y:d.y},l={x:a.x,y:c},g={x:t.flipX>0?t.to.x-h:t.to.x+r,y:n.y},f={x:g.x,y:c};return L([e,d,a,l,f,g,n,o],t.roundness)},J=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=v({x:r,y:u.y},t.fromVect,u),d=Math.cos(t.detourDirection)t.detourDistance,n=Math.sin(t.detourDirection)t.detourDistance,h=dt.flipX,c=nt.flipY,a={x:s.x+h,y:s.y+c},l=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to),g={x:l.x+h,y:l.y+c};return L([e,s,a,g,l,o],t.roundness)},Te=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=v({x:r,y:u.y},t.fromVect,u),d=v({x:t.to.x-r,y:t.to.y},t.toVect,t.to);return L([e,s,d,o],t.roundness)},be=t=>{const e=t.hasSourceArrow?v({x:t.arrowLength,y:u.y},t.fromVect,u):u,o=t.hasTargetArrow?v({x:t.to.x-t.arrowLength,y:t.to.y},t.toVect,t.to):t.to,r=t.arrowLength+t.arrowOffset,s=r-t.roundness,d=v({x:s,y:u.y},t.fromVect,u),n=v({x:t.to.x-s,y:t.to.y},t.toVect,t.to),h=Math.max((d.y+n.y)/2,r),c=t.to.x/2,a={x:d.x,y:t.flipY>0?h:-r},l={x:c,y:a.y},g={x:n.x,y:t.flipY>0?t.to.y-h:t.to.y+r},f={x:c,y:g.y};return L([e,d,a,l,f,g,n,o],t.roundness)},K=t=>{const e=t.arrowOffset,o=t.side,r=t.arrowLength+e,s=r+2o,n=[{x:t.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:t.side},{x:s,y:t.side},{x:s,y:-t.side},{x:r,y:-t.side},{x:r,y:u.y},{x:t.arrowLength,y:u.y}].map(c=>v(c,t.fromVect,u)),h=`M ${u.x} ${u.y} L ${n[0].x} ${n[0].y} `;return`${t.hasSourceArrow\|\|t.hasTargetArrow?"":h}${L(n,t.roundness)}`},Ne=t=>{const e=t.smallRadius,o=t.radius,r=Math.sqrt(ee+oo),s=e+o,d=t.arrowLength+r(1-o/s),n=eo/s,c=[{x:t.arrowLength,y:u.y},{x:d,y:n},{x:d,y:-n}].map(g=>v(g,t.fromVect,u)),a=[`M ${c[0].x} ${c[0].y}`,`A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),l=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${t.hasSourceArrow\|\|t.hasTargetArrow?"":l}${a}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class ee{constructor(e){i(this,"svg",I());i(this,"group",B());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"curvature");i(this,"portCycleRadius");i(this,"portCycleSmallRadius");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.curvature=(e==null?void 0:e.curvature)??w.curvature,this.portCycleRadius=(e==null?void 0:e.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(e==null?void 0:e.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const o=(e==null?void 0:e.color)??w.color,r=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=$(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(o),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=W(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=m(e.from.direction,n,h),a=m(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=Ne({fromVect:c,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=Se({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Ee({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class te{constructor(e){i(this,"svg",I());i(this,"group",B());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=$(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=W(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=m(e.from.direction,n,h),a=m(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=K({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=J({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=pe({to:l,fromVect:c,toVect:a,flipX:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class oe{constructor(e){i(this,"svg",I());i(this,"group",B());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=$(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=W(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=m(e.from.direction,n,h),a=m(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=K({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=J({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=Te({to:l,fromVect:c,toVect:a,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}class re{constructor(e){i(this,"svg",I());i(this,"group",B());i(this,"line");i(this,"sourceArrow",null);i(this,"targetArrow",null);i(this,"arrowLength");i(this,"arrowWidth");i(this,"arrowOffset");i(this,"roundness");i(this,"cycleSquareSide");i(this,"detourDirection");i(this,"detourDistance");i(this,"hasSourceArrow");i(this,"hasTargetArrow");this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??w.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const o=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??w.detourDirectionVertical,this.detourDistance=(e==null?void 0:e.detourDistance)??w.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??w.hasTargetArrow;const r=(e==null?void 0:e.color)??w.color,s=(e==null?void 0:e.width)??w.width;this.svg.appendChild(this.group),this.line=$(r,s),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=M(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=M(r),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:r,width:s,height:d,flipX:n,flipY:h}=W(e.from,e.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${s}px`,this.svg.style.height=`${d}px`,this.group.style.transform=`scale(${n}, ${h})`;const c=m(e.from.direction,n,h),a=m(e.to.direction,n,h),l={x:s,y:d};let g,f=a,x=-this.arrowLength;if(e.from.portId===e.to.portId?(g=K({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),f=c,x=this.arrowLength):e.from.nodeId===e.to.nodeId?g=J({to:l,fromVect:c,toVect:a,flipX:n,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=be({to:l,fromVect:c,toVect:a,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const y=P(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",y)}if(this.targetArrow){const y=P(f,l,x,this.arrowWidth);this.targetArrow.setAttribute("d",y)}}}const me=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new oe({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new te({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new re({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});default:return()=>new ee({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},Pe=t=>{var o,r,s,d,n;const e=Ae((o=t==null?void 0:t.nodes)==null?void 0:o.priority,(r=t==null?void 0:t.edges)==null?void 0:r.priority);return{nodes:{centerFn:((s=t==null?void 0:t.nodes)==null?void 0:s.centerFn)??ve,priorityFn:e.nodesPriorityFn},ports:{direction:((d=t==null?void 0:t.ports)==null?void 0:d.direction)??0},edges:{shapeFactory:me(((n=t==null?void 0:t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class Me{constructor(e,o,r,s,d){i(this,"graph");i(this,"viewport");i(this,"defaults");i(this,"nodeIdGenerator",new j(e=>this.graph.getNode(e)!==null));i(this,"portIdGenerator",new j(e=>this.graph.getPort(e)!==null));i(this,"edgeIdGenerator",new j(e=>this.graph.getEdge(e)!==null));i(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});i(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodePosition(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(r=>{this.htmlView.renderEdge(r)})});i(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});i(this,"onBeforeNodeRemoved",e=>{this.graphStore.getNodePortIds(e).forEach(o=>{this.unmarkPort(o)}),this.htmlView.detachNode(e)});i(this,"onAfterPortUpdated",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(r=>{this.htmlView.renderEdge(r)})});i(this,"onBeforePortUnmarked",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.removeEdge(o)})});i(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});i(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});i(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});i(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});i(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});i(this,"onBeforeClear",()=>{this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this.htmlView.clear()});i(this,"onBeforeDestroyEmitter");i(this,"onBeforeDestroy");this.element=e,this.graphStore=o,this.viewportStore=r,this.htmlView=s,this.defaults=Pe(d),this.graph=new ye(this.graphStore),this.viewport=new fe(this.viewportStore),this.graphStore.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.graphStore.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated),this.graphStore.onAfterNodePriorityUpdated.subscribe(this.onAfterNodePriorityUpdated),this.graphStore.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.graphStore.onAfterPortUpdated.subscribe(this.onAfterPortUpdated),this.graphStore.onBeforePortRemoved.subscribe(this.onBeforePortUnmarked),this.graphStore.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded),this.graphStore.onAfterEdgeShapeUpdated.subscribe(this.onAfterEdgeShapeUpdated),this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated),this.graphStore.onAfterEdgePriorityUpdated.subscribe(this.onAfterEdgePriorityUpdated),this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved),this.graphStore.onBeforeClear.subscribe(this.onBeforeClear),[this.onBeforeDestroyEmitter,this.onBeforeDestroy]=E()}addNode(e){const o=this.nodeIdGenerator.create(e.id);if(this.graph.getNode(o)!==null)throw new p("failed to add node with existing id");if(this.graphStore.addNode({id:o,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.defaults.nodes.centerFn,priority:e.priority??this.defaults.nodes.priorityFn()}),e.ports!==void 0)for(const r of e.ports)this.markPort({id:r.id,element:r.element,nodeId:o,direction:r.direction});return this}updateNode(e,o){if(this.graph.getNode(e)===null)throw new p("failed to update nonexisting node");return this.graphStore.updateNode(e,o??{}),this}removeNode(e){if(this.graph.getNode(e)===null)throw new p("failed to remove nonexisting node");return this.graphStore.removeNode(e),this}markPort(e){const o=this.portIdGenerator.create(e.id);if(this.graph.getPort(o)!==null)throw new p("failed to add port with existing id");if(this.graph.getNode(e.nodeId)===null)throw new p("failed to mark port for nonexisting node");return this.graphStore.addPort({id:o,element:e.element,nodeId:e.nodeId,direction:e.direction??this.defaults.ports.direction}),this}updatePort(e,o){if(this.graph.getPort(e)===null)throw new p("failed to update nonexisting port");return this.graphStore.updatePort(e,o??{}),this}unmarkPort(e){if(this.graph.getPort(e)===null)throw new p("failed to unmark nonexisting port");return this.graphStore.removePort(e),this}addEdge(e){const o=this.edgeIdGenerator.create(e.id);if(this.graph.getEdge(o)!==null)throw new p("failed to add edge with existing id");if(this.graph.getPort(e.from)===null)throw new p("failed to add edge from nonexisting port");if(this.graph.getPort(e.to)===null)throw new p("failed to add edge to nonexisting port");return this.graphStore.addEdge({id:o,from:e.from,to:e.to,shape:e.shape??this.defaults.edges.shapeFactory(),priority:e.priority??this.defaults.edges.priorityFn()}),this}updateEdge(e,o){if(this.graph.getEdge(e)===null)throw new p("failed to update nonexisting edge");return this.graphStore.updateEdge(e,o??{}),this}removeEdge(e){if(this.graph.getEdge(e)===null)throw new p("failed to remove nonexisting edge");return this.graphStore.removeEdge(e),this}patchViewportMatrix(e){return this.viewportStore.patchViewportMatrix(e),this}patchContentMatrix(e){return this.viewportStore.patchContentMatrix(e),this}clear(){return this.graphStore.clear(),this}destroy(){this.onBeforeDestroyEmitter.emit(),this.graphStore.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graphStore.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graphStore.onAfterNodePriorityUpdated.unsubscribe(this.onAfterNodePriorityUpdated),this.graphStore.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.graphStore.onAfterPortUpdated.unsubscribe(this.onAfterPortUpdated),this.graphStore.onBeforePortRemoved.unsubscribe(this.onBeforePortUnmarked),this.graphStore.onAfterEdgeAdded.unsubscribe(this.onAfterEdgeAdded),this.graphStore.onAfterEdgeShapeUpdated.unsubscribe(this.onAfterEdgeShapeUpdated),this.graphStore.onAfterEdgeUpdated.unsubscribe(this.onAfterEdgeUpdated),this.graphStore.onAfterEdgePriorityUpdated.unsubscribe(this.onAfterEdgePriorityUpdated),this.graphStore.onBeforeEdgeRemoved.unsubscribe(this.onBeforeEdgeRemoved),this.graphStore.onBeforeClear.unsubscribe(this.onBeforeClear),this.clear(),this.htmlView.destroy()}}class De{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);i(this,"afterNodeAddedEmitter");i(this,"onAfterNodeAdded");i(this,"afterNodeUpdatedEmitter");i(this,"onAfterNodeUpdated");i(this,"afterNodePriorityUpdatedEmitter");i(this,"onAfterNodePriorityUpdated");i(this,"beforeNodeRemovedEmitter");i(this,"onBeforeNodeRemoved");i(this,"afterPortAddedEmitter");i(this,"onAfterPortAdded");i(this,"afterPortUpdatedEmitter");i(this,"onAfterPortUpdated");i(this,"beforePortRemovedEmitter");i(this,"onBeforePortRemoved");i(this,"afterEdgeAddedEmitter");i(this,"onAfterEdgeAdded");i(this,"afterEdgeShapeUpdatedEmitter");i(this,"onAfterEdgeShapeUpdated");i(this,"afterEdgeUpdatedEmitter");i(this,"onAfterEdgeUpdated");i(this,"afterEdgePriorityUpdatedEmitter");i(this,"onAfterEdgePriorityUpdated");i(this,"beforeEdgeRemovedEmitter");i(this,"onBeforeEdgeRemoved");i(this,"beforeClearEmitter");i(this,"onBeforeClear");[this.afterNodeAddedEmitter,this.onAfterNodeAdded]=E(),[this.afterNodeUpdatedEmitter,this.onAfterNodeUpdated]=E(),[this.afterNodePriorityUpdatedEmitter,this.onAfterNodePriorityUpdated]=E(),[this.beforeNodeRemovedEmitter,this.onBeforeNodeRemoved]=E(),[this.afterPortAddedEmitter,this.onAfterPortAdded]=E(),[this.afterPortUpdatedEmitter,this.onAfterPortUpdated]=E(),[this.beforePortRemovedEmitter,this.onBeforePortRemoved]=E(),[this.afterEdgeAddedEmitter,this.onAfterEdgeAdded]=E(),[this.afterEdgeShapeUpdatedEmitter,this.onAfterEdgeShapeUpdated]=E(),[this.afterEdgeUpdatedEmitter,this.onAfterEdgeUpdated]=E(),[this.afterEdgePriorityUpdatedEmitter,this.onAfterEdgePriorityUpdated]=E(),[this.beforeEdgeRemovedEmitter,this.onBeforeEdgeRemoved]=E(),[this.beforeClearEmitter,this.onBeforeClear]=E()}addNode(e){const o=new Map,r={element:e.element,x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority,ports:o};this.nodes.set(e.id,r),this.afterNodeAddedEmitter.emit(e.id)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}updateNode(e,o){const r=this.nodes.get(e);r.x=o.x??r.x,r.y=o.y??r.y,r.centerFn=o.centerFn??r.centerFn,o.priority!==void 0&&(r.priority=o.priority,this.afterNodePriorityUpdatedEmitter.emit(e)),this.afterNodeUpdatedEmitter.emit(e)}removeNode(e){this.beforeNodeRemovedEmitter.emit(e),this.nodes.delete(e)}addPort(e){this.ports.set(e.id,{element:e.element,direction:e.direction,nodeId:e.nodeId}),this.cycleEdges.set(e.id,new Set),this.incommingEdges.set(e.id,new Set),this.outcommingEdges.set(e.id,new Set),this.nodes.get(e.nodeId).ports.set(e.id,e.element),this.afterPortAddedEmitter.emit(e.id)}getPort(e){return this.ports.get(e)}updatePort(e,o){const r=this.ports.get(e);r.direction=o.direction??r.direction,this.afterPortUpdatedEmitter.emit(e)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(e){const o=this.nodes.get(e);if(o!==void 0)return Array.from(o.ports.keys())}removePort(e){const o=this.ports.get(e).nodeId;this.beforePortRemovedEmitter.emit(e),this.nodes.get(o).ports.delete(e),this.ports.delete(e)}addEdge(e){this.addEdgeInternal(e),this.afterEdgeAddedEmitter.emit(e.id)}updateEdge(e,o){if(o.from!==void 0\|\|o.to!==void 0){const s=this.edges.get(e);this.removeEdgeInternal(e),this.addEdgeInternal({id:e,from:o.from??s.from,to:o.to??s.to,shape:s.shape,priority:s.priority})}const r=this.edges.get(e);o.shape!==void 0&&(r.shape=o.shape,this.afterEdgeShapeUpdatedEmitter.emit(e)),o.priority!==void 0&&(r.priority=o.priority,this.afterEdgePriorityUpdatedEmitter.emit(e)),this.afterEdgeUpdatedEmitter.emit(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){this.beforeEdgeRemovedEmitter.emit(e),this.removeEdgeInternal(e)}clear(){this.beforeClearEmitter.emit(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear(),this.edges.clear(),this.ports.clear(),this.nodes.clear()}getPortIncomingEdgeIds(e){return Array.from(this.incommingEdges.get(e))}getPortOutcomingEdgeIds(e){return Array.from(this.outcommingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortIncomingEdgeIds(s)]}),r}getNodeOutcomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortOutcomingEdgeIds(s)]}),r}getNodeCycleEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let r=[];return o.forEach(s=>{r=[...r,...this.getPortCycleEdgeIds(s)]}),r}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}addEdgeInternal(e){this.edges.set(e.id,{from:e.from,to:e.to,shape:e.shape,priority:e.priority}),e.from!==e.to?(this.outcommingEdges.get(e.from).add(e.id),this.incommingEdges.get(e.to).add(e.id)):this.cycleEdges.get(e.from).add(e.id)}removeEdgeInternal(e){const o=this.edges.get(e),r=o.from,s=o.to;this.cycleEdges.get(r).delete(e),this.cycleEdges.get(s).delete(e),this.incommingEdges.get(r).delete(e),this.incommingEdges.get(s).delete(e),this.outcommingEdges.get(r).delete(e),this.outcommingEdges.get(s).delete(e),this.edges.delete(e)}}const ie=t=>({scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}),se={scale:1,x:0,y:0};class Ve{constructor(){i(this,"viewportMatrix",se);i(this,"contentMatrix",se);i(this,"afterUpdateEmitter");i(this,"onAfterUpdated");i(this,"beforeUpdateEmitter");i(this,"onBeforeUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=E(),[this.beforeUpdateEmitter,this.onBeforeUpdated]=E()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.beforeUpdateEmitter.emit(),this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=ie(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(e){this.beforeUpdateEmitter.emit(),this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=ie(this.contentMatrix),this.afterUpdateEmitter.emit()}}class Q{constructor(e){i(this,"elementToNodeId",new Map);i(this,"nodesResizeObserver");i(this,"onAfterNodeAdded",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.set(o.element,e),this.nodesResizeObserver.observe(o.element)});i(this,"onBeforeNodeRemoved",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.delete(o.element),this.nodesResizeObserver.unobserve(o.element)});i(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});i(this,"onBeforeDestroy",()=>{this.canvas.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});this.canvas=e,this.nodesResizeObserver=new ResizeObserver(o=>{o.forEach(r=>{const s=r.target;this.handleNodeResize(s)})}),this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e){new Q(e)}handleNodeResize(e){const o=this.elementToNodeId.get(e);this.canvas.updateNode(o),this.canvas.graph.getNodeAdjacentEdgeIds(o).forEach(s=>{this.canvas.updateEdge(s)})}}const Le=t=>{var g,f,x,y,b,S;const e=((g=t==null?void 0:t.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((f=t==null?void 0:t.events)==null?void 0:f.onBeforeNodeDrag)??(()=>!0),r=((x=t==null?void 0:t.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),s=(t==null?void 0:t.moveOnTop)===!1,d=(y=t==null?void 0:t.mouse)==null?void 0:y.dragCursor,n=d!==void 0?d:"grab",h=(b=t==null?void 0:t.mouse)==null?void 0:b.mouseDownEventVerifier,c=h!==void 0?h:N=>N.button===0,a=(S=t==null?void 0:t.mouse)==null?void 0:S.mouseUpEventVerifier;return{freezePriority:s,dragCursor:n,mouseDownEventVerifier:c,mouseUpEventVerifier:a!==void 0?a:N=>N.button===0,onNodeDrag:e,onBeforeNodeDrag:o,onNodeDragFinished:r}},F=(t,e,o)=>{const{x:r,y:s,width:d,height:n}=t.getBoundingClientRect();return e>=r&&e<=r+d&&o>=s&&o<=s+n},z=(t,e,o)=>e>=0&&e<=t.innerWidth&&o>=0&&o<=t.innerHeight,Y=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")};class Z{constructor(e,o){i(this,"grabbedNodeId",null);i(this,"maxNodePriority",0);i(this,"previousTouchCoords",null);i(this,"nodeIds",new Map);i(this,"window",window);i(this,"graph");i(this,"element");i(this,"onAfterNodeAdded",e=>{this.updateMaxNodePriority(e);const o=this.graph.getNode(e);this.nodeIds.set(o.element,e),o.element.addEventListener("mousedown",this.onMouseDown),o.element.addEventListener("touchstart",this.onTouchStart)});i(this,"onAfterNodeUpdated",e=>{this.updateMaxNodePriority(e)});i(this,"onBeforeNodeRemoved",e=>{const o=this.graph.getNode(e);this.nodeIds.delete(o.element),o.element.removeEventListener("mousedown",this.onMouseDown),o.element.removeEventListener("touchstart",this.onTouchStart)});i(this,"onBeforeDestroy",()=>{this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy),this.removeMouseDragListeners(),this.removeTouchDragListeners()});i(this,"onBeforeClear",()=>{this.nodeIds.forEach((e,o)=>{o.removeEventListener("mousedown",this.onMouseDown),o.removeEventListener("touchstart",this.onTouchStart)}),this.nodeIds.clear(),this.maxNodePriority=0});i(this,"onMouseDown",e=>{if(!this.options.mouseDownEventVerifier(e))return;const o=e.currentTarget,r=this.nodeIds.get(o),s=this.graph.getNode(r);this.options.onBeforeNodeDrag({nodeId:r,element:s.element,x:s.x,y:s.y})&&(e.stopImmediatePropagation(),this.grabbedNodeId=r,Y(this.element,this.options.dragCursor),this.moveNodeOnTop(r),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))});i(this,"onTouchStart",e=>{if(e.touches.length!==1)return;e.stopImmediatePropagation(),this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY};const o=e.currentTarget,r=this.nodeIds.get(o),s=this.graph.getNode(r);this.options.onBeforeNodeDrag({nodeId:r,element:s.element,x:s.x,y:s.y})&&(this.grabbedNodeId=r,this.moveNodeOnTop(r),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))});i(this,"onWindowMouseMove",e=>{if(!F(this.element,e.clientX,e.clientY)\|\|!z(this.window,e.clientX,e.clientY)){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});i(this,"onWindowMouseUp",e=>{this.options.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});i(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const o=e.touches[0];if(!F(this.element,o.clientX,o.clientY)\|\|!z(this.window,o.clientX,o.clientY)){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const r=o.clientX-this.previousTouchCoords.x,s=o.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,r,s),this.previousTouchCoords={x:e.touches[0].clientX,y:e.touches[0].clientY}}});i(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});i(this,"options");this.canvas=e,this.options=Le(o),this.graph=e.graph,this.element=e.element,this.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.graph.onAfterNodeUpdated.subscribe(this.onAfterNodeUpdated),this.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o){new Z(e,o)}dragNode(e,o,r){const s=this.graph.getNode(e);if(s===null)return;const d=this.canvas.viewport.getContentMatrix(),n=d.scales.x+d.x,h=d.scales.y+d.y,c=n+o,a=h+r,l=this.canvas.viewport.getViewportMatrix(),g=l.scalec+l.x,f=l.scalea+l.y;this.canvas.updateNode(e,{x:g,y:f}),this.options.onNodeDrag({nodeId:e,element:s.element,x:g,y:f})}moveNodeOnTop(e){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.canvas.updateNode(e,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.graph.getNodeAdjacentEdgeIds(e).forEach(s=>{this.canvas.updateEdge(s,{priority:o})})}cancelMouseDrag(){const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,Y(this.canvas.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}updateMaxNodePriority(e){const o=this.graph.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}}const Ce=t=>{const e=t.minX!==null?t.minX:-1/0,o=t.maxX!==null?t.maxX:1/0,r=t.minY!==null?t.minY:-1/0,s=t.maxY!==null?t.maxY:1/0;return d=>{let n=d.nextTransform.x,h=d.nextTransform.y;n<e&&n<d.prevTransform.x&&(n=Math.min(d.prevTransform.x,e));const c=d.canvasWidthd.prevTransform.scale,a=o-c;n>a&&n>d.prevTransform.x&&(n=Math.max(d.prevTransform.x,a)),h<r&&h<d.prevTransform.y&&(h=Math.min(d.prevTransform.y,r));const l=d.canvasHeightd.prevTransform.scale,g=s-l;return h>g&&h>d.prevTransform.y&&(h=Math.max(d.prevTransform.y,g)),{scale:d.nextTransform.scale,x:n,y:h}}},Re=t=>{const e=t.maxContentScale,o=t.minContentScale,r=e!==null?1/e:0,s=o!==null?1/o:1/0;return d=>{const n=d.prevTransform,h=d.nextTransform;let c=h.scale,a=h.x,l=h.y;if(h.scale>s&&h.scale>n.scale){c=Math.max(n.scale,s),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)g,l=n.y+(h.y-n.y)g}if(h.scale<r&&h.scale<n.scale){c=Math.min(n.scale,r),a=n.x,l=n.y;const g=(c-n.scale)/(h.scale-n.scale);a=n.x+(h.x-n.x)g,l=n.y+(h.y-n.y)g}return{scale:c,x:a,y:l}}},Ue=t=>e=>t.reduce((o,r)=>r({prevTransform:e.prevTransform,nextTransform:o,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),ne=t=>{if(typeof t=="function")return t;switch(t.type){case"scale-limit":return Re({minContentScale:t.minContentScale??0,maxContentScale:t.maxContentScale??1/0});case"shift-limit":return Ce({minX:t.minX??-1/0,maxX:t.maxX??1/0,minY:t.minY??-1/0,maxY:t.maxY??1/0})}},Ie=t=>{var y,b,S,N,q,C,R,U,he,de,ce,ae;const e=(y=t==null?void 0:t.scale)==null?void 0:y.mouseWheelSensitivity,o=e!==void 0?e:1.2,r=t==null?void 0:t.transformPreprocessor;let s;r!==void 0?Array.isArray(r)?s=Ue(r.map(D=>ne(D))):s=ne(r):s=D=>D.nextTransform;const d=((b=t==null?void 0:t.shift)==null?void 0:b.cursor)!==void 0?t.shift.cursor:"grab",n=((S=t==null?void 0:t.events)==null?void 0:S.onBeforeTransformChange)??(()=>{}),h=((N=t==null?void 0:t.events)==null?void 0:N.onTransformChange)??(()=>{}),c=(q=t==null?void 0:t.shift)==null?void 0:q.mouseDownEventVerifier,a=c!==void 0?c:D=>D.button===0,l=(C=t==null?void 0:t.shift)==null?void 0:C.mouseUpEventVerifier,g=l!==void 0?l:D=>D.button===0,f=(R=t==null?void 0:t.scale)==null?void 0:R.mouseWheelEventVerifier,x=f!==void 0?f:()=>!0;return{wheelSensitivity:o,onTransformStarted:((U=t==null?void 0:t.events)==null?void 0:U.onTransformStarted)??(()=>{}),onTransformFinished:((he=t==null?void 0:t.events)==null?void 0:he.onTransformFinished)??(()=>{}),onBeforeTransformChange:n,onTransformChange:h,transformPreprocessor:s,shiftCursor:d,mouseDownEventVerifier:a,mouseUpEventVerifier:g,mouseWheelEventVerifier:x,scaleWheelFinishTimeout:((de=t==null?void 0:t.scale)==null?void 0:de.wheelFinishTimeout)??500,onResizeTransformStarted:((ce=t==null?void 0:t.events)==null?void 0:ce.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((ae=t==null?void 0:t.events)==null?void 0:ae.onResizeTransformFinished)??(()=>{})}},Be=(t,e,o)=>({scale:t.scale,x:t.x+t.scalee,y:t.y+t.scaleo}),$e=(t,e,o,r)=>({scale:t.scalee,x:t.scale(1-e)o+t.x,y:t.scale(1-e)r+t.y}),X=t=>{const e=[],o=t.touches.length;for(let h=0;h<o;h++)e.push([t.touches[h].clientX,t.touches[h].clientY]);const r=e.reduce((h,c)=>[h[0]+c[0],h[1]+c[1]],[0,0]),s=[r[0]/o,r[1]/o],n=e.map(h=>[h[0]-s[0],h[1]-s[1]]).reduce((h,c)=>h+Math.sqrt(c[0]c[0]+c[1]c[1]),0);return{x:s[0],y:s[1],scale:n/o,touchesCnt:o,touches:e}};class H{constructor(e,o){i(this,"element");i(this,"window",window);i(this,"viewport");i(this,"prevTouches",null);i(this,"wheelFinishTimer",null);i(this,"transformInProgress",!1);i(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});i(this,"onMouseDown",e=>{this.element===null\|\|!this.options.mouseDownEventVerifier(e)\|\|(Y(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.startRegisteredTransform())});i(this,"onWindowMouseMove",e=>{if(this.element===null\|\|!F(this.element,e.clientX,e.clientY)\|\|!z(this.window,e.clientX,e.clientY)){this.stopMouseDrag();return}const o=-e.movementX,r=-e.movementY;this.moveViewport(o,r)});i(this,"onWindowMouseUp",e=>{this.element===null\|\|!this.options.mouseUpEventVerifier(e)\|\|this.stopMouseDrag()});i(this,"onWheelScroll",e=>{if(!this.options.mouseWheelEventVerifier(e))return;e.preventDefault();const{left:o,top:r}=this.element.getBoundingClientRect(),s=e.clientX-o,d=e.clientY-r,h=1/(e.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.wheelFinishTimer===null&&this.options.onTransformStarted(),this.scaleViewport(h,s,d),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.transformInProgress\|\|this.options.onTransformFinished(),this.wheelFinishTimer=null},this.options.scaleWheelFinishTimeout)});i(this,"onTouchStart",e=>{if(this.prevTouches!==null){this.prevTouches=X(e);return}this.prevTouches=X(e),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.startRegisteredTransform()});i(this,"onWindowTouchMove",e=>{const o=X(e);if(!o.touches.every(s=>F(this.element,s[0],s[1])&&z(this.window,s[0],s[1]))){this.stopTouchDrag();return}if((o.touchesCnt===1\|\|o.touchesCnt===2)&&this.moveViewport(-(o.x-this.prevTouches.x),-(o.y-this.prevTouches.y)),o.touchesCnt===2){const{left:s,top:d}=this.element.getBoundingClientRect(),n=this.prevTouches.x-s,h=this.prevTouches.y-d,a=1/(o.scale/this.prevTouches.scale);this.scaleViewport(a,n,h)}this.prevTouches=o});i(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=X(e):this.stopTouchDrag()});i(this,"observer",new ResizeObserver(()=>{const e=this.viewport.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),s=this.options.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:o,canvasHeight:r});this.options.onResizeTransformStarted(),this.canvas.patchViewportMatrix(s),this.options.onResizeTransformFinished()}));i(this,"options");this.canvas=e,this.options=Ie(o),this.element=e.element,this.viewport=e.viewport,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),e.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o){new H(e,o)}moveViewport(e,o){const r=this.viewport.getViewportMatrix(),s=Be(r,e,o),{width:d,height:n}=this.element.getBoundingClientRect(),h=this.options.transformPreprocessor({prevTransform:r,nextTransform:s,canvasWidth:d,canvasHeight:n});this.performTransform(h)}scaleViewport(e,o,r){const s=this.canvas.viewport.getViewportMatrix(),d=$e(s,e,o,r),{width:n,height:h}=this.element.getBoundingClientRect(),c=this.options.transformPreprocessor({prevTransform:s,nextTransform:d,canvasWidth:n,canvasHeight:h});this.performTransform(c)}stopMouseDrag(){Y(this.element,null),this.removeMouseDragListeners(),this.finishRegisteredTransform()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.finishRegisteredTransform()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}performTransform(e){this.options.onBeforeTransformChange(),this.canvas.patchViewportMatrix(e),this.options.onTransformChange()}startRegisteredTransform(){this.transformInProgress=!0,this.options.onTransformStarted()}finishRegisteredTransform(){this.transformInProgress=!1,this.options.onTransformFinished()}}class _{constructor(e,o,r,s){i(this,"canvasResizeObserver");i(this,"window",window);i(this,"nodeHorizontal");i(this,"nodeVertical");i(this,"viewport");i(this,"element");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",e=>{this.loadedArea={xFrom:e.x,xTo:e.x+e.width,yFrom:e.y,yTo:e.y+e.height}});i(this,"onBeforeDestroy",()=>{this.trigger.unsubscribe(this.updateLoadedArea),this.canvasResizeObserver.unobserve(this.element),this.canvas.viewport.onAfterUpdated.unsubscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});i(this,"onAfterViewportUpdated",()=>{this.userTransformInProgress\|\|(this.viewportMatrix=this.viewport.getViewportMatrix(),this.loadAreaAroundViewport())});i(this,"userTransformInProgress",!1);var g,f,x,y,b;this.canvas=e,this.trigger=r,this.virtualScrollOptions=s,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new this.window.ResizeObserver(S=>{const N=S[0];this.viewportWidth=N.contentRect.width,this.viewportHeight=N.contentRect.height,this.scheduleLoadAreaAroundViewport()}),this.viewport=e.viewport,this.element=e.element;const d=((g=o==null?void 0:o.events)==null?void 0:g.onResizeTransformStarted)??(()=>{}),n=((f=o==null?void 0:o.events)==null?void 0:f.onResizeTransformFinished)??(()=>{}),h=((x=o==null?void 0:o.events)==null?void 0:x.onTransformChange)??(()=>{}),c=((y=o==null?void 0:o.events)==null?void 0:y.onBeforeTransformChange)??(()=>{}),a=((b=o==null?void 0:o.events)==null?void 0:b.onTransformFinished)??(()=>{}),l={...o,events:{...o==null?void 0:o.events,onResizeTransformStarted:()=>{this.userTransformInProgress=!0,d()},onResizeTransformFinished:()=>{this.userTransformInProgress=!1,n()},onBeforeTransformChange:()=>{this.userTransformInProgress=!0,c()},onTransformChange:()=>{this.userTransformInProgress=!1;const S=this.viewportMatrix;this.viewportMatrix=this.viewport.getViewportMatrix(),S.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),h()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),a()}}};H.configure(e,l),this.viewportMatrix=this.viewport.getViewportMatrix(),this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o,r,s){new _(e,o,r,s)}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const e=this.viewportWidththis.viewportMatrix.scale,o=this.viewportHeightthis.viewportMatrix.scale,r=this.viewportMatrix.x-this.nodeHorizontal,s=this.viewportMatrix.y-this.nodeVertical,d=this.viewportMatrix.x+e+this.nodeHorizontal,n=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<r&&this.loadedArea.xTo>d&&this.loadedArea.yFrom<s&&this.loadedArea.yTo>n\|\|this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const e=this.viewportWidththis.viewportMatrix.scale,o=this.viewportHeightthis.viewportMatrix.scale,r=this.viewportMatrix.x-e-this.nodeHorizontal,s=this.viewportMatrix.y-o-this.nodeVertical,d=3e+2this.nodeHorizontal,n=3o+2this.nodeVertical;this.trigger.emit({x:r,y:s,width:d,height:n})}}class We{constructor(){i(this,"element",null);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")}setElement(e){return this.element=e,this}setDefaults(e){return this.canvasDefaults=e,this}enableUserDraggableNodes(e){return this.hasDraggableNode=!0,this.dragOptions=e??{},this}enableUserTransformableViewport(e){return this.hasTransformableViewport=!0,this.transformOptions=e??{},this}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(e){return this.boxRenderingTrigger=e,this}enableVirtualScroll(e){return this.virtualScrollOptions=e,this}build(){if(this.element===null)throw new p("unable to build canvas when no attach element specified");let e=this.boxRenderingTrigger;this.virtualScrollOptions!==void 0&&e===void 0&&(e=new k);const o=new De,r=new Ve;let s=new ge(o,r,this.element);e!==void 0&&(s=new we(s,o,e));const d=new Me(this.element,o,r,s,this.canvasDefaults);return this.hasResizeReactiveNodes&&Q.configure(d),this.hasDraggableNode&&Z.configure(d,this.dragOptions),this.virtualScrollOptions!==void 0?_.configure(d,this.transformOptions,e,this.virtualScrollOptions):this.hasTransformableViewport&&H.configure(d,this.transformOptions),this.reset(),d}reset(){this.element=null,this.canvasDefaults={},this.dragOptions={},this.transformOptions={},this.virtualScrollOptions=void 0,this.hasDraggableNode=!1,this.hasTransformableViewport=!1,this.hasResizeReactiveNodes=!1,this.boxRenderingTrigger=void 0}}A.BezierEdgeShape=ee,A.CanvasBuilder=We,A.EventSubject=k,A.HorizontalEdgeShape=te,A.HtmlGraphError=p,A.StraightEdgeShape=oe,A.VerticalEdgeShape=re,Object.defineProperty(A,Symbol.toStringTag,{value:"Module"})});

package/package.json CHANGED Viewed

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