npm - @html-graph/html-graph - Versions diffs - 4.1.0 → 5.0.0 - Mend

@html-graph/html-graph 4.1.0 → 5.0.0

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

Files changed (5) hide show

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

	@@ -1 +1 @@
1	- (function(v,E){typeof exports=="object"&&typeof module<"u"?E(exports):typeof define=="function"&&define.amd?define(["exports"],E):(v=typeof globalThis<"u"?globalThis:v\|\|self,E(v.HtmlGraph={}))})(this,function(v){"use strict";var Ne=Object.defineProperty;var Me=(v,E,T)=>E in v?Ne(v,E,{enumerable:!0,configurable:!0,writable:!0,value:T}):v[E]=T;var o=(v,E,T)=>Me(v,typeof E!="symbol"?E+"":E,T);const E=(r,t)=>({x:r.scalet.x+r.x,y:r.scalet.y+r.y});var T=(r=>(r.Line="line",r.NodeCycle="node-cycle",r.PortCycle="port-cycle",r))(T\|\|{});const Ut=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r.style.overflow="hidden",r},Wt=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="0",r.style.height="0",r},Bt=r=>{r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.visibility="hidden"};class st{constructor(t,e,s){o(this,"host",Ut());o(this,"container",Wt());o(this,"edgeIdToElementMap",new Map);o(this,"applyTransform",()=>{const t=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`});this.graphStore=t,this.viewportStore=e,this.element=s,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(t){const e=this.graphStore.getNode(t);Bt(e.element),this.container.appendChild(e.element),this.updateNodePosition(t),this.updateNodePriority(t),e.element.style.visibility="visible"}detachNode(t){const e=this.graphStore.getNode(t);this.container.removeChild(e.element)}attachEdge(t){const e=this.graphStore.getEdge(t).payload.shape.svg;this.edgeIdToElementMap.set(t,e),this.container.appendChild(e),this.renderEdge(t),this.updateEdgePriority(t)}detachEdge(t){const e=this.edgeIdToElementMap.get(t);this.container.removeChild(e),this.edgeIdToElementMap.delete(t)}clear(){this.edgeIdToElementMap.forEach((t,e)=>{this.detachEdge(e)}),this.graphStore.getAllNodeIds().forEach(t=>{this.detachNode(t)})}destroy(){this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform),this.clear(),this.element.removeChild(this.host),this.host.removeChild(this.container)}updateNodePosition(t){const e=this.graphStore.getNode(t),{width:s,height:i}=e.element.getBoundingClientRect(),n=this.viewportStore.getViewportMatrix().scale,a=e.payload.centerFn(s,i),h=e.payload.x-na.x,d=e.payload.y-na.y;e.element.style.transform=`translate(${h}px, ${d}px)`}updateNodePriority(t){const e=this.graphStore.getNode(t);e.element.style.zIndex=`${e.payload.priority}`}updateEdgeShape(t){const e=this.edgeIdToElementMap.get(t);this.container.removeChild(e);const i=this.graphStore.getEdge(t).payload.shape.svg;this.edgeIdToElementMap.set(t,i),this.container.appendChild(i)}renderEdge(t){const e=this.graphStore.getEdge(t),s=this.graphStore.getPort(e.from),i=this.graphStore.getPort(e.to),n=s.element.getBoundingClientRect(),a=i.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),d=this.viewportStore.getViewportMatrix(),c=this.createEdgeRenderPort(s,n,h,d),l=this.createEdgeRenderPort(i,a,h,d);let g=T.Line;s.element===i.element?g=T.PortCycle:s.nodeId===i.nodeId&&(g=T.NodeCycle),e.payload.shape.render({from:c,to:l,category:g})}updateEdgePriority(t){const e=this.graphStore.getEdge(t);e.payload.shape.svg.style.zIndex=`${e.payload.priority}`}createEdgeRenderPort(t,e,s,i){const n={x:e.left-s.left,y:e.top-s.top},a=E(i,n);return{x:a.x,y:a.y,width:e.widthi.scale,height:e.heighti.scale,direction:t.payload.direction}}}class $t{constructor(t){o(this,"xFrom",1/0);o(this,"yFrom",1/0);o(this,"xTo",1/0);o(this,"yTo",1/0);this.graphStore=t}setRenderingBox(t){this.xFrom=t.x,this.xTo=t.x+t.width,this.yFrom=t.y,this.yTo=t.y+t.height}hasNode(t){const e=this.graphStore.getNode(t).payload;return e.x>=this.xFrom&&e.x<=this.xTo&&e.y>=this.yFrom&&e.y<=this.yTo}hasEdge(t){const e=this.graphStore.getEdge(t),s=this.graphStore.getPort(e.from).nodeId,i=this.graphStore.getPort(e.to).nodeId,n=this.graphStore.getNode(s).payload,a=this.graphStore.getNode(i).payload,h=Math.min(n.x,a.x),d=Math.max(n.x,a.x),c=Math.min(n.y,a.y),l=Math.max(n.y,a.y);return h<=this.xTo&&d>=this.xFrom&&c<=this.yTo&&l>=this.yFrom}}class Ft{constructor(t,e,s,i){o(this,"attachedNodes",new Set);o(this,"attachedEdges",new Set);o(this,"renderingBox");o(this,"updateViewport",t=>{this.renderingBox.setRenderingBox(t);const e=new Set,s=new Set,i=new Set,n=new Set;this.graphStore.getAllNodeIds().forEach(a=>{const h=this.renderingBox.hasNode(a),d=this.attachedNodes.has(a);h&&!d?e.add(a):!h&&d&&s.add(a)}),this.graphStore.getAllEdgeIds().forEach(a=>{const h=this.renderingBox.hasEdge(a),d=this.attachedEdges.has(a),c=this.graphStore.getEdge(a),l=this.graphStore.getPort(c.from).nodeId,g=this.graphStore.getPort(c.to).nodeId;h&&(this.renderingBox.hasNode(l)\|\|(e.add(l),s.delete(l)),this.renderingBox.hasNode(g)\|\|(e.add(g),s.delete(g))),h&&!d?i.add(a):!h&&d&&n.add(a)}),n.forEach(a=>{this.handleDetachEdge(a)}),s.forEach(a=>{this.handleDetachNode(a)}),e.forEach(a=>{this.attachedNodes.has(a)\|\|this.handleAttachNode(a)}),i.forEach(a=>{this.handleAttachEdge(a)})});this.htmlView=t,this.graphStore=e,this.trigger=s,this.params=i,this.renderingBox=new $t(this.graphStore),this.trigger.subscribe(this.updateViewport)}attachNode(t){this.renderingBox.hasNode(t)&&this.handleAttachNode(t)}detachNode(t){this.attachedNodes.has(t)&&this.handleDetachNode(t)}attachEdge(t){this.renderingBox.hasEdge(t)&&this.attachEdgeEntities(t)}detachEdge(t){this.attachedEdges.has(t)&&this.handleDetachEdge(t)}updateNodePosition(t){this.attachedNodes.has(t)?this.htmlView.updateNodePosition(t):this.renderingBox.hasNode(t)&&(this.handleAttachNode(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(e=>{this.attachEdgeEntities(e)}))}updateNodePriority(t){this.attachedNodes.has(t)&&this.htmlView.updateNodePriority(t)}updateEdgeShape(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgeShape(t)}renderEdge(t){this.attachedEdges.has(t)&&this.htmlView.renderEdge(t)}updateEdgePriority(t){this.attachedEdges.has(t)&&this.htmlView.updateEdgePriority(t)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(t){const e=this.graphStore.getEdge(t),s=this.graphStore.getPort(e.from).nodeId,i=this.graphStore.getPort(e.to).nodeId;this.attachedNodes.has(s)\|\|this.handleAttachNode(s),this.attachedNodes.has(i)\|\|this.handleAttachNode(i),this.handleAttachEdge(t)}handleAttachNode(t){this.params.onBeforeNodeAttached(t),this.attachedNodes.add(t),this.htmlView.attachNode(t)}handleDetachNode(t){this.htmlView.detachNode(t),this.attachedNodes.delete(t),this.params.onAfterNodeDetached(t)}handleAttachEdge(t){this.attachedEdges.add(t),this.htmlView.attachEdge(t)}handleDetachEdge(t){this.htmlView.detachEdge(t),this.attachedEdges.delete(t)}}class it{constructor(){o(this,"callbacks",new Set)}subscribe(t){this.callbacks.add(t)}unsubscribe(t){this.callbacks.delete(t)}emit(t){this.callbacks.forEach(e=>{e(t)})}}const S=()=>{const r=new it;return[r,r]};class Ot{constructor(t){o(this,"onAfterUpdated");this.viewportStore=t,this.onAfterUpdated=this.viewportStore.onAfterUpdated}getViewportMatrix(){return{...this.viewportStore.getViewportMatrix()}}getContentMatrix(){return{...this.viewportStore.getContentMatrix()}}}class kt{constructor(t){o(this,"onAfterNodeAdded");o(this,"onAfterNodeUpdated");o(this,"onAfterNodePriorityUpdated");o(this,"onBeforeNodeRemoved");o(this,"onAfterPortMarked");o(this,"onAfterPortUpdated");o(this,"onBeforePortUnmarked");o(this,"onAfterEdgeAdded");o(this,"onAfterEdgeShapeUpdated");o(this,"onAfterEdgeUpdated");o(this,"onAfterEdgePriorityUpdated");o(this,"onBeforeEdgeRemoved");o(this,"onBeforeClear");this.graphStore=t,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(t){const e=this.graphStore.getNode(t);if(e===void 0)return null;const s=e.payload;return{element:e.element,x:s.x,y:s.y,centerFn:s.centerFn,priority:s.priority}}getElementNodeId(t){return this.graphStore.getElementNodeId(t)??null}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(t){const e=this.graphStore.getPort(t);return e===void 0?null:{element:e.element,direction:e.payload.direction,nodeId:e.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(t){return this.graphStore.getNodePortIds(t)??null}getElementPortIds(t){return[...this.graphStore.getElementPortIds(t)]}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(t){const e=this.graphStore.getEdge(t);if(e===void 0)return null;const s=e.payload;return{from:e.from,to:e.to,priority:s.priority,shape:s.shape}}getPortIncomingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortIncomingEdgeIds(t)}getPortOutgoingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortOutgoingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutgoingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeOutgoingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(t)}}class X{constructor(t){o(this,"counter",0);this.checkExists=t}create(t){if(t!==void 0)return t;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class b extends Error{constructor(){super(...arguments);o(this,"name","CanvasError")}}class nt{constructor(t,e,s,i){o(this,"graph");o(this,"viewport");o(this,"nodeIdGenerator",new X(t=>this.graph.getNode(t)!==null));o(this,"portIdGenerator",new X(t=>this.graph.getPort(t)!==null));o(this,"edgeIdGenerator",new X(t=>this.graph.getEdge(t)!==null));o(this,"onAfterNodeAdded",t=>{this.htmlView.attachNode(t)});o(this,"onAfterNodeUpdated",t=>{this.htmlView.updateNodePosition(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(s=>{this.htmlView.renderEdge(s)})});o(this,"onAfterNodePriorityUpdated",t=>{this.htmlView.updateNodePriority(t)});o(this,"onBeforeNodeRemoved",t=>{this.graphStore.getNodePortIds(t).forEach(e=>{this.unmarkPort(e)}),this.htmlView.detachNode(t)});o(this,"onAfterPortUpdated",t=>{this.graphStore.getPortAdjacentEdgeIds(t).forEach(s=>{this.htmlView.renderEdge(s)})});o(this,"onBeforePortUnmarked",t=>{this.graphStore.getPortAdjacentEdgeIds(t).forEach(e=>{this.removeEdge(e)})});o(this,"onAfterEdgeAdded",t=>{this.htmlView.attachEdge(t)});o(this,"onAfterEdgeShapeUpdated",t=>{this.htmlView.updateEdgeShape(t)});o(this,"onAfterEdgeUpdated",t=>{this.htmlView.renderEdge(t)});o(this,"onAfterEdgePriorityUpdated",t=>{this.htmlView.updateEdgePriority(t)});o(this,"onBeforeEdgeRemoved",t=>{this.htmlView.detachEdge(t)});o(this,"onBeforeClear",()=>{this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this.htmlView.clear()});o(this,"onBeforeDestroyEmitter");o(this,"destroyed",!1);o(this,"onBeforeDestroy");this.graphStore=t,this.viewportStore=e,this.htmlView=s,this.params=i,this.graph=new kt(this.graphStore),this.viewport=new Ot(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]=S()}addNode(t){const e=this.nodeIdGenerator.create(t.id);if(this.graphStore.getNode(e)!==void 0)throw new b("failed to add node with existing id");if(this.graphStore.getElementNodeId(t.element)!==void 0)throw new b("failed to add node with html element already in use by another node");if(this.graphStore.addNode({id:e,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.params.nodes.centerFn,priority:t.priority??this.params.nodes.priorityFn()}),t.ports!==void 0)for(const s of t.ports)this.markPort({id:s.id,element:s.element,nodeId:e,direction:s.direction});return this}updateNode(t,e){if(this.graphStore.getNode(t)===void 0)throw new b("failed to update non existing node");return this.graphStore.updateNode(t,e??{}),this}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new b("failed to remove non existing node");return this.graphStore.removeNode(t),this}markPort(t){const e=this.portIdGenerator.create(t.id);if(this.graphStore.getPort(e)!==void 0)throw new b("failed to add port with existing id");if(this.graphStore.getNode(t.nodeId)===void 0)throw new b("failed to mark port for nonexistent node");return this.graphStore.addPort({id:e,element:t.element,nodeId:t.nodeId,direction:t.direction??this.params.ports.direction}),this}updatePort(t,e){if(this.graphStore.getPort(t)===void 0)throw new b("failed to update nonexistent port");return this.graphStore.updatePort(t,e??{}),this}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new b("failed to unmark non existing port");return this.graphStore.removePort(t),this}addEdge(t){const e=this.edgeIdGenerator.create(t.id);if(this.graphStore.getEdge(e)!==void 0)throw new b("failed to add edge with existing id");if(this.graphStore.getPort(t.from)===void 0)throw new b("failed to add edge from nonexistent port");if(this.graphStore.getPort(t.to)===void 0)throw new b("failed to add edge to nonexistent port");return this.graphStore.addEdge({id:e,from:t.from,to:t.to,shape:t.shape??this.params.edges.shapeFactory(e),priority:t.priority??this.params.edges.priorityFn()}),this}updateEdge(t,e){if(this.graphStore.getEdge(t)===void 0)throw new b("failed to update nonexistent edge");return this.graphStore.updateEdge(t,e??{}),this}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new b("failed to remove nonexistent edge");return this.graphStore.removeEdge(t),this}patchViewportMatrix(t){return this.viewportStore.patchViewportMatrix(t),this}patchContentMatrix(t){return this.viewportStore.patchContentMatrix(t),this}clear(){return this.graphStore.clear(),this}destroy(){this.destroyed\|\|(this.clear(),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.htmlView.destroy(),this.destroyed=!0)}}class zt{constructor(){o(this,"singleToMultiMap",new Map);o(this,"multiToSingleMap",new Map)}addRecord(t,e){const s=this.singleToMultiMap.get(t);s===void 0?this.singleToMultiMap.set(t,new Set([e])):s.add(e),this.multiToSingleMap.set(e,t)}getMultiBySingle(t){const e=this.singleToMultiMap.get(t)??new Set;return Array.from(e.values())}removeByMulti(t){const e=this.multiToSingleMap.get(t),s=this.singleToMultiMap.get(e);s.delete(t),s.size===0&&this.singleToMultiMap.delete(e),this.multiToSingleMap.delete(t)}getByMulti(t){return this.multiToSingleMap.get(t)}removeBySingle(t){this.singleToMultiMap.get(t).forEach(s=>{this.multiToSingleMap.delete(s)}),this.singleToMultiMap.delete(t)}clear(){this.singleToMultiMap.clear(),this.multiToSingleMap.clear()}forEachSingle(t){this.singleToMultiMap.forEach((e,s)=>{t(s)})}hasSingle(t){return this.singleToMultiMap.get(t)!==void 0}hasMulti(t){return this.multiToSingleMap.get(t)!==void 0}}class at{constructor(){o(this,"nodes",new Map);o(this,"ports",new Map);o(this,"edges",new Map);o(this,"nodesElementsMap",new Map);o(this,"incomingEdges",new Map);o(this,"outcomingEdges",new Map);o(this,"cycleEdges",new Map);o(this,"elementPorts",new zt);o(this,"afterNodeAddedEmitter");o(this,"onAfterNodeAdded");o(this,"afterNodeUpdatedEmitter");o(this,"onAfterNodeUpdated");o(this,"afterNodePriorityUpdatedEmitter");o(this,"onAfterNodePriorityUpdated");o(this,"beforeNodeRemovedEmitter");o(this,"onBeforeNodeRemoved");o(this,"afterPortAddedEmitter");o(this,"onAfterPortAdded");o(this,"afterPortUpdatedEmitter");o(this,"onAfterPortUpdated");o(this,"beforePortRemovedEmitter");o(this,"onBeforePortRemoved");o(this,"afterEdgeAddedEmitter");o(this,"onAfterEdgeAdded");o(this,"afterEdgeShapeUpdatedEmitter");o(this,"onAfterEdgeShapeUpdated");o(this,"afterEdgeUpdatedEmitter");o(this,"onAfterEdgeUpdated");o(this,"afterEdgePriorityUpdatedEmitter");o(this,"onAfterEdgePriorityUpdated");o(this,"beforeEdgeRemovedEmitter");o(this,"onBeforeEdgeRemoved");o(this,"beforeClearEmitter");o(this,"onBeforeClear");[this.afterNodeAddedEmitter,this.onAfterNodeAdded]=S(),[this.afterNodeUpdatedEmitter,this.onAfterNodeUpdated]=S(),[this.afterNodePriorityUpdatedEmitter,this.onAfterNodePriorityUpdated]=S(),[this.beforeNodeRemovedEmitter,this.onBeforeNodeRemoved]=S(),[this.afterPortAddedEmitter,this.onAfterPortAdded]=S(),[this.afterPortUpdatedEmitter,this.onAfterPortUpdated]=S(),[this.beforePortRemovedEmitter,this.onBeforePortRemoved]=S(),[this.afterEdgeAddedEmitter,this.onAfterEdgeAdded]=S(),[this.afterEdgeShapeUpdatedEmitter,this.onAfterEdgeShapeUpdated]=S(),[this.afterEdgeUpdatedEmitter,this.onAfterEdgeUpdated]=S(),[this.afterEdgePriorityUpdatedEmitter,this.onAfterEdgePriorityUpdated]=S(),[this.beforeEdgeRemovedEmitter,this.onBeforeEdgeRemoved]=S(),[this.beforeClearEmitter,this.onBeforeClear]=S()}addNode(t){const e=new Map,s={element:t.element,payload:{x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority},ports:e};this.nodes.set(t.id,s),this.nodesElementsMap.set(t.element,t.id),this.afterNodeAddedEmitter.emit(t.id)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}getElementNodeId(t){return this.nodesElementsMap.get(t)}updateNode(t,e){const s=this.nodes.get(t).payload;s.x=e.x??s.x,s.y=e.y??s.y,s.centerFn=e.centerFn??s.centerFn,e.priority!==void 0&&(s.priority=e.priority,this.afterNodePriorityUpdatedEmitter.emit(t)),this.afterNodeUpdatedEmitter.emit(t)}removeNode(t){this.beforeNodeRemovedEmitter.emit(t);const e=this.nodes.get(t);this.nodesElementsMap.delete(e.element),this.nodes.delete(t)}addPort(t){this.ports.set(t.id,{element:t.element,payload:{direction:t.direction},nodeId:t.nodeId}),this.elementPorts.addRecord(t.element,t.id),this.cycleEdges.set(t.id,new Set),this.incomingEdges.set(t.id,new Set),this.outcomingEdges.set(t.id,new Set),this.nodes.get(t.nodeId).ports.set(t.id,t.element),this.afterPortAddedEmitter.emit(t.id)}getPort(t){return this.ports.get(t)}updatePort(t,e){const s=this.ports.get(t).payload;s.direction=e.direction??s.direction,this.afterPortUpdatedEmitter.emit(t)}getAllPortIds(){return Array.from(this.ports.keys())}getElementPortIds(t){return this.elementPorts.getMultiBySingle(t)}getNodePortIds(t){const e=this.nodes.get(t);if(e!==void 0)return Array.from(e.ports.keys())}removePort(t){const e=this.ports.get(t).nodeId;this.beforePortRemovedEmitter.emit(t),this.nodes.get(e).ports.delete(t),this.ports.delete(t),this.elementPorts.removeByMulti(t)}addEdge(t){this.addEdgeInternal(t),this.afterEdgeAddedEmitter.emit(t.id)}updateEdge(t,e){if(e.from!==void 0\|\|e.to!==void 0){const i=this.edges.get(t),n=i.payload;this.removeEdgeInternal(t),this.addEdgeInternal({id:t,from:e.from??i.from,to:e.to??i.to,shape:n.shape,priority:n.priority})}const s=this.edges.get(t);e.shape!==void 0&&(s.payload.shape=e.shape,this.afterEdgeShapeUpdatedEmitter.emit(t)),e.priority!==void 0&&(s.payload.priority=e.priority,this.afterEdgePriorityUpdatedEmitter.emit(t)),this.afterEdgeUpdatedEmitter.emit(t)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(t){return this.edges.get(t)}removeEdge(t){this.beforeEdgeRemovedEmitter.emit(t),this.removeEdgeInternal(t)}clear(){this.beforeClearEmitter.emit(),this.incomingEdges.clear(),this.outcomingEdges.clear(),this.cycleEdges.clear(),this.elementPorts.clear(),this.nodesElementsMap.clear(),this.edges.clear(),this.ports.clear(),this.nodes.clear()}getPortIncomingEdgeIds(t){return Array.from(this.incomingEdges.get(t))}getPortOutgoingEdgeIds(t){return Array.from(this.outcomingEdges.get(t))}getPortCycleEdgeIds(t){return Array.from(this.cycleEdges.get(t))}getPortAdjacentEdgeIds(t){return[...this.getPortIncomingEdgeIds(t),...this.getPortOutgoingEdgeIds(t),...this.getPortCycleEdgeIds(t)]}getNodeIncomingEdgeIds(t){const e=Array.from(this.nodes.get(t).ports.keys());let s=[];return e.forEach(i=>{s=[...s,...this.getPortIncomingEdgeIds(i)]}),s}getNodeOutgoingEdgeIds(t){const e=Array.from(this.nodes.get(t).ports.keys());let s=[];return e.forEach(i=>{s=[...s,...this.getPortOutgoingEdgeIds(i)]}),s}getNodeCycleEdgeIds(t){const e=Array.from(this.nodes.get(t).ports.keys());let s=[];return e.forEach(i=>{s=[...s,...this.getPortCycleEdgeIds(i)]}),s}getNodeAdjacentEdgeIds(t){return[...this.getNodeIncomingEdgeIds(t),...this.getNodeOutgoingEdgeIds(t),...this.getNodeCycleEdgeIds(t)]}addEdgeInternal(t){this.edges.set(t.id,{from:t.from,to:t.to,payload:{shape:t.shape,priority:t.priority}}),t.from!==t.to?(this.outcomingEdges.get(t.from).add(t.id),this.incomingEdges.get(t.to).add(t.id)):this.cycleEdges.get(t.from).add(t.id)}removeEdgeInternal(t){const e=this.edges.get(t),s=e.from,i=e.to;this.cycleEdges.get(s).delete(t),this.cycleEdges.get(i).delete(t),this.incomingEdges.get(s).delete(t),this.incomingEdges.get(i).delete(t),this.outcomingEdges.get(s).delete(t),this.outcomingEdges.get(i).delete(t),this.edges.delete(t)}}const ht=r=>({scale:1/r.scale,x:-r.x/r.scale,y:-r.y/r.scale}),dt={scale:1,x:0,y:0};class Xt{constructor(){o(this,"viewportMatrix",dt);o(this,"contentMatrix",dt);o(this,"afterUpdateEmitter");o(this,"onAfterUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=S()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,x:t.x??this.viewportMatrix.x,y:t.y??this.viewportMatrix.y},this.contentMatrix=ht(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,x:t.x??this.contentMatrix.x,y:t.y??this.contentMatrix.y},this.viewportMatrix=ht(this.contentMatrix),this.afterUpdateEmitter.emit()}}class Y{constructor(t){o(this,"elementToNodeId",new Map);o(this,"nodesResizeObserver");o(this,"onAfterNodeAdded",t=>{const e=this.canvas.graph.getNode(t);this.elementToNodeId.set(e.element,t),this.nodesResizeObserver.observe(e.element)});o(this,"onBeforeNodeRemoved",t=>{const e=this.canvas.graph.getNode(t);this.elementToNodeId.delete(e.element),this.nodesResizeObserver.unobserve(e.element)});o(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});this.canvas=t,this.nodesResizeObserver=new ResizeObserver(e=>{e.forEach(s=>{const i=s.target;this.handleNodeResize(i)})}),this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear)}static configure(t){new Y(t)}handleNodeResize(t){const e=this.elementToNodeId.get(t);this.canvas.updateNode(e)}}const Yt=(r,t,e)=>{const{x:s,y:i,width:n,height:a}=r.getBoundingClientRect();return t>=s&&t<=s+n&&e>=i&&e<=i+a},Ht=(r,t,e)=>t>=0&&t<=r.innerWidth&&e>=0&&e<=r.innerHeight,R=(r,t,e,s)=>Yt(t,e,s)&&Ht(r,e,s),U=(r,t)=>{t!==null?r.style.cursor=t:r.style.removeProperty("cursor")},W=r=>{const t=document.createElement("div");return{id:r.overlayId,element:t,x:r.portCoords.x,y:r.portCoords.y,ports:[{id:r.overlayId,element:t,direction:r.portDirection}]}},jt=(r,t)=>{let e=t,s=null;for(;e!==null&&(s=r.getElementPortIds(e)[0]??null,s===null);)e=e.parentElement;return s},ct=(r,t)=>{const e=document.elementsFromPoint(t.x,t.y);for(const s of e){const i=jt(r,s);if(i!==null)return i}return null};var D=(r=>(r.Static="static",r.Dragging="dragging",r.Edge="edge",r))(D\|\|{});const gt=(r,t)=>({x:r/2,y:t/2}),y=(r,t,e)=>({x:t.xr.x-t.yr.y+((1-t.x)e.x+t.ye.y),y:t.yr.x+t.xr.y+((1-t.x)e.y-t.ye.x)}),u={x:0,y:0};class Gt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.to;this.midpoint={x:e.x/2,y:e.y/2};const s=y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u),i=y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to),n={x:s.x+this.params.sourceDirection.xthis.params.curvature,y:s.y+this.params.sourceDirection.ythis.params.curvature},a={x:i.x-this.params.targetDirection.xthis.params.curvature,y:i.y-this.params.targetDirection.ythis.params.curvature},h=`M ${s.x} ${s.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`,d=this.params.hasSourceArrow?"":`M ${u.x} ${u.y} L ${s.x} ${s.y} `,c=this.params.hasTargetArrow?"":` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;this.path=`${d}${h}${c}`}}const B=(r,t,e,s)=>({x:tr.x+(1-t)/2s.x,y:er.y+(1-e)/2s.y});class Kt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,s=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength,n=Math.cos(this.params.detourDirection)this.params.detourDistance,a=Math.sin(this.params.detourDirection)this.params.detourDistance,h=nthis.params.flipX,d=athis.params.flipY,c=y({x:i,y:u.y},this.params.sourceDirection,u),l={x:c.x+h,y:c.y+d},g=y({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),w={x:g.x+h,y:g.y+d},f={x:(l.x+w.x)/2,y:(l.y+w.y)/2},m={x:c.x+this.params.curvaturethis.params.sourceDirection.x,y:c.y+this.params.curvaturethis.params.sourceDirection.y},A={x:g.x-this.params.curvaturethis.params.targetDirection.x,y:g.y-this.params.curvaturethis.params.targetDirection.y},x={x:c.x+h,y:c.y+d},P={x:g.x+h,y:g.y+d};this.path=[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${m.x} ${m.y} ${x.x} ${x.y} ${f.x} ${f.y}`,`C ${P.x} ${P.y} ${A.x} ${A.y} ${g.x} ${g.y}`,`L ${s.x} ${s.y}`].join(" "),this.midpoint=B(f,t.flipX,t.flipY,t.to)}}const M=(r,t)=>{const e=[];if(r.length>0&&e.push(`M ${r[0].x} ${r[0].y}`),r.length===2&&e.push(`L ${r[1].x} ${r[1].y}`),r.length>2){const s=r.length-1;let i=0,n=0,a=0;r.forEach((h,d)=>{let c=0,l=0,g=0;const w=d>0,f=d<s,m=w&&f;if(w&&(c=-i,l=-n,g=a),f){const I=r[d+1];i=I.x-h.x,n=I.y-h.y,a=Math.sqrt(ii+nn)}const x=a!==0?Math.min((m?t:0)/a,d<s-1?.5:1):0,P=m?{x:h.x+ix,y:h.y+nx}:h,N=g!==0?Math.min((m?t:0)/g,d>1?.5:1):0,L=m?{x:h.x+cN,y:h.y+lN}:h;d>0&&e.push(`L ${L.x} ${L.y}`),m&&e.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${P.x} ${P.y}`)})}return e.join(" ")};class Zt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.to;this.midpoint={x:e.x/2,y:e.y/2};const s=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=n-this.params.roundness,h=y({x:a,y:u.y},this.params.sourceDirection,u),d=y({x:this.params.to.x-a,y:this.params.to.y},this.params.targetDirection,this.params.to),c=Math.max((h.x+d.x)/2,n),l=this.params.to.y/2,g={x:this.params.flipX>0?c:-n,y:h.y},w={x:g.x,y:l},f={x:this.params.flipX>0?this.params.to.x-c:this.params.to.x+n,y:d.y},m={x:f.x,y:l};this.path=M([s,h,g,w,m,f,d,i],this.params.roundness)}}class Jt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,s=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=y({x:i,y:u.y},this.params.sourceDirection,u),a=Math.cos(this.params.detourDirection)this.params.detourDistance,h=Math.sin(this.params.detourDirection)this.params.detourDistance,d=athis.params.flipX,c=hthis.params.flipY,l={x:n.x+d,y:n.y+c},g=y({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),w={x:g.x+d,y:g.y+c},f={x:(l.x+w.x)/2,y:(l.y+w.y)/2};this.midpoint=B(f,t.flipX,t.flipY,t.to),this.path=M([e,n,l,w,g,s],this.params.roundness)}}class Qt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.to;this.midpoint={x:e.x/2,y:e.y/2};const s=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=y({x:n,y:u.y},this.params.sourceDirection,u),h=y({x:this.params.to.x-n,y:this.params.to.y},this.params.targetDirection,this.params.to);this.path=M([s,a,h,i],this.params.roundness)}}class _t{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.to;this.midpoint={x:e.x/2,y:e.y/2};const s=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=n-this.params.roundness,h=y({x:a,y:u.y},this.params.sourceDirection,u),d=y({x:this.params.to.x-a,y:this.params.to.y},this.params.targetDirection,this.params.to),c=Math.max((h.y+d.y)/2,n),l=this.params.to.x/2,g={x:h.x,y:this.params.flipY>0?c:-n},w={x:l,y:g.y},f={x:d.x,y:this.params.flipY>0?this.params.to.y-c:this.params.to.y+n},m={x:l,y:f.y};this.path=M([s,h,g,w,m,f,d,i],this.params.roundness)}}class H{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.arrowOffset,s=this.params.side,i=this.params.arrowLength+e,n=i+2s,h=[{x:this.params.arrowLength,y:u.y},{x:i,y:u.y},{x:i,y:this.params.side},{x:n,y:this.params.side},{x:n,y:-this.params.side},{x:i,y:-this.params.side},{x:i,y:u.y},{x:this.params.arrowLength,y:u.y}].map(c=>y(c,this.params.sourceDirection,u)),d=`M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;this.path=`${this.params.hasSourceArrow\|\|this.params.hasTargetArrow?"":d}${M(h,this.params.roundness)}`,this.midpoint={x:(h[3].x+h[4].x)/2,y:(h[3].y+h[4].y)/2}}}class qt{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.smallRadius,s=this.params.radius,i=e+s,n=es/i,a=Math.sqrt(ii-ee),h=ae/i,d=a+s+this.params.arrowLength,c=this.params.arrowLength+h,g=[{x:this.params.arrowLength,y:u.y},{x:c,y:n},{x:c,y:-n},{x:d,y:0}].map(m=>y(m,this.params.sourceDirection,u)),w=[`M ${g[0].x} ${g[0].y}`,`A ${e} ${e} 0 0 1 ${g[1].x} ${g[1].y}`,`A ${s} ${s} 0 1 0 ${g[2].x} ${g[2].y}`,`A ${e} ${e} 0 0 1 ${g[0].x} ${g[0].y}`].join(" "),f=`M 0 0 L ${g[0].x} ${g[0].y} `;this.path=`${this.params.hasSourceArrow\|\|this.params.hasTargetArrow?"":f}${w}`,this.midpoint=g[3]}}class te{constructor(t){o(this,"path");o(this,"midpoint");o(this,"diagonalDistance");this.params=t;const e=this.params.to;if(this.midpoint={x:e.x/2,y:e.y/2},this.diagonalDistance=Math.sqrt(this.params.to.xthis.params.to.x+this.params.to.ythis.params.to.y),Math.sqrt(this.params.to.xthis.params.to.x+this.params.to.ythis.params.to.y)===0){this.path="";return}const i=this.createDirectLinePoint({offset:this.params.sourceOffset,hasArrow:this.params.hasSourceArrow,flip:1,shift:u}),n=this.createDirectLinePoint({offset:this.params.targetOffset,hasArrow:this.params.hasTargetArrow,flip:-1,shift:this.params.to});this.path=`M ${i.x} ${i.y} L ${n.x} ${n.y}`}createDirectLinePoint(t){const e=t.hasArrow?this.params.arrowLength:0,s=t.offset+e,i=t.flips/this.diagonalDistance;return{x:this.params.to.xi+t.shift.x,y:this.params.to.yi+t.shift.y}}}class ee{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,s=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=y({x:i,y:u.y},this.params.sourceDirection,u),a=y({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),h=this.params.detourDistance>0?1:-1,d=this.params.to.y/2,c=d+Math.abs(this.params.detourDistance),l=d+cthis.params.flipYh,g={x:(n.x+a.x)/2,y:l};this.midpoint=B(g,t.flipX,t.flipY,t.to),this.path=M([e,n,{x:n.x,y:l},{x:a.x,y:l},a,s],this.params.roundness)}}class re{constructor(t){o(this,"path");o(this,"midpoint");this.params=t;const e=this.params.hasSourceArrow?y({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,s=this.params.hasTargetArrow?y({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=y({x:i,y:u.y},this.params.sourceDirection,u),a=y({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),h=this.params.detourDistance>0?1:-1,d=this.params.to.x/2,c=d+Math.abs(this.params.detourDistance),l=d+cthis.params.flipXh,g={x:l,y:(n.y+a.y)/2};this.midpoint=B(g,t.flipX,t.flipY,t.to),this.path=M([e,n,{x:l,y:n.y},{x:l,y:a.y},a,s],this.params.roundness)}}const lt=(r,t)=>{r.style.transform=`translate(${t.x}px, ${t.y}px)`,r.style.width=`${Math.max(t.width,1)}px`,r.style.height=`${Math.max(t.height,1)}px`},j=Object.freeze({edgeColor:"--edge-color"}),ut=r=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.pointerEvents="none",t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.overflow="visible",t.style.setProperty(j.edgeColor,r),t},$=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("fill",`var(${j.edgeColor})`),r},pt=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.transformOrigin="50% 50%",r},wt=r=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke",`var(${j.edgeColor})`),t.setAttribute("stroke-width",`${r}`),t.setAttribute("fill","none"),t},ft=(r,t)=>{const e={x:r.x+r.width/2,y:r.y+r.height/2},s={x:t.x+t.width/2,y:t.y+t.height/2},i=Math.min(e.x,s.x),n=Math.min(e.y,s.y),a=Math.abs(s.x-e.x),h=Math.abs(s.y-e.y),d=e.x<=s.x?1:-1,c=e.y<=s.y?1:-1;return{x:i,y:n,width:a,height:h,flipX:d,flipY:c}},G=(r,t,e,s)=>{const n=[u,{x:e,y:s},{x:e,y:-s}].map(c=>y(c,r,u)).map(c=>({x:c.x+t.x,y:c.y+t.y})),a=`M ${n[0].x} ${n[0].y}`,h=`L ${n[1].x} ${n[1].y}`,d=`L ${n[2].x} ${n[2].y}`;return`${a} ${h} ${d} Z`},p=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,interactiveWidth:10,preOffset:0}),yt=(r,t,e)=>({x:tMath.cos(r),y:eMath.sin(r)});class F{constructor(t){o(this,"svg");o(this,"group",pt());o(this,"line");o(this,"sourceArrow",null);o(this,"targetArrow",null);o(this,"onAfterRender");o(this,"afterRenderEmitter");this.params=t,[this.afterRenderEmitter,this.onAfterRender]=S(),this.svg=ut(t.color),this.svg.appendChild(this.group),this.line=wt(t.width),this.group.appendChild(this.line),t.hasSourceArrow&&(this.sourceArrow=$(),this.group.appendChild(this.sourceArrow)),t.hasTargetArrow&&(this.targetArrow=$(),this.group.appendChild(this.targetArrow))}render(t){const{x:e,y:s,width:i,height:n,flipX:a,flipY:h}=ft(t.from,t.to);lt(this.svg,{x:e,y:s,width:i,height:n}),this.group.style.transform=`scale(${a}, ${h})`;const d=yt(t.from.direction,a,h),c=yt(t.to.direction,a,h),l={x:i,y:n};let g=c,w=-this.params.arrowLength,f;t.category===T.PortCycle?(f=this.params.createCyclePath,g=d,w=this.params.arrowLength):t.category===T.NodeCycle?f=this.params.createDetourPath:f=this.params.createLinePath;const m=f(d,c,l,a,h);this.line.setAttribute("d",m.path);let A=null;this.sourceArrow&&(A=G(d,u,this.params.arrowLength,this.params.arrowWidth),this.sourceArrow.setAttribute("d",A));let x=null;this.targetArrow&&(x=G(g,l,w,this.params.arrowWidth),this.targetArrow.setAttribute("d",x)),this.afterRenderEmitter.emit({edgePath:m,sourceArrowPath:A,targetArrowPath:x})}}class mt{constructor(t){o(this,"svg");o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"onAfterRender");o(this,"arrowLength");o(this,"arrowWidth");o(this,"curvature");o(this,"portCycleRadius");o(this,"portCycleSmallRadius");o(this,"detourDirection");o(this,"detourDistance");o(this,"hasSourceArrow");o(this,"hasTargetArrow");o(this,"pathShape");o(this,"createCyclePath",t=>new qt({sourceDirection:t,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createDetourPath",(t,e,s,i,n)=>new Kt({to:s,sourceDirection:t,targetDirection:e,flipX:i,flipY:n,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createLinePath",(t,e,s)=>new Gt({to:s,sourceDirection:t,targetDirection:e,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(t==null?void 0:t.arrowLength)??p.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??p.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??p.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??p.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??p.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??p.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??p.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??p.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??p.hasTargetArrow,this.pathShape=new F({color:(t==null?void 0:t.color)??p.color,width:(t==null?void 0:t.width)??p.width,arrowLength:this.arrowLength,arrowWidth:this.arrowWidth,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(t){this.pathShape.render(t)}}class vt{constructor(t){o(this,"svg");o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"onAfterRender");o(this,"arrowLength");o(this,"arrowWidth");o(this,"arrowOffset");o(this,"roundness");o(this,"cycleSquareSide");o(this,"detourDistance");o(this,"hasSourceArrow");o(this,"hasTargetArrow");o(this,"pathShape");o(this,"createCyclePath",t=>new H({sourceDirection:t,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createDetourPath",(t,e,s,i,n)=>new ee({to:s,sourceDirection:t,targetDirection:e,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createLinePath",(t,e,s,i)=>new Zt({to:s,sourceDirection:t,targetDirection:e,flipX:i,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(t==null?void 0:t.arrowLength)??p.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??p.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??p.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??p.cycleSquareSide;const e=(t==null?void 0:t.roundness)??p.roundness;this.roundness=Math.min(e,this.arrowOffset,this.cycleSquareSide/2),this.detourDistance=(t==null?void 0:t.detourDistance)??p.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??p.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??p.hasTargetArrow,this.pathShape=new F({color:(t==null?void 0:t.color)??p.color,width:(t==null?void 0:t.width)??p.width,arrowLength:this.arrowLength,arrowWidth:this.arrowWidth,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(t){this.pathShape.render(t)}}class Et{constructor(t){o(this,"svg");o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"onAfterRender");o(this,"arrowLength");o(this,"arrowWidth");o(this,"arrowOffset");o(this,"roundness");o(this,"cycleSquareSide");o(this,"detourDirection");o(this,"detourDistance");o(this,"hasSourceArrow");o(this,"hasTargetArrow");o(this,"pathShape");o(this,"createCyclePath",t=>new H({sourceDirection:t,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createDetourPath",(t,e,s,i,n)=>new Jt({to:s,sourceDirection:t,targetDirection:e,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createLinePath",(t,e,s)=>new Qt({to:s,sourceDirection:t,targetDirection:e,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(t==null?void 0:t.arrowLength)??p.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??p.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??p.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??p.cycleSquareSide;const e=(t==null?void 0:t.roundness)??p.roundness;this.roundness=Math.min(e,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??p.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??p.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??p.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??p.hasTargetArrow,this.pathShape=new F({color:(t==null?void 0:t.color)??p.color,width:(t==null?void 0:t.width)??p.width,arrowLength:this.arrowLength,arrowWidth:this.arrowWidth,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(t){this.pathShape.render(t)}}class At{constructor(t){o(this,"svg");o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"onAfterRender");o(this,"arrowLength");o(this,"arrowWidth");o(this,"arrowOffset");o(this,"roundness");o(this,"cycleSquareSide");o(this,"detourDistance");o(this,"hasSourceArrow");o(this,"hasTargetArrow");o(this,"pathShape");o(this,"createCyclePath",t=>new H({sourceDirection:t,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createDetourPath",(t,e,s,i,n)=>new re({to:s,sourceDirection:t,targetDirection:e,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));o(this,"createLinePath",(t,e,s,i,n)=>new _t({to:s,sourceDirection:t,targetDirection:e,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(t==null?void 0:t.arrowLength)??p.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??p.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??p.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??p.cycleSquareSide;const e=(t==null?void 0:t.roundness)??p.roundness;this.roundness=Math.min(e,this.arrowOffset,this.cycleSquareSide/2),this.detourDistance=(t==null?void 0:t.detourDistance)??p.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??p.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??p.hasTargetArrow,this.pathShape=new F({color:(t==null?void 0:t.color)??p.color,width:(t==null?void 0:t.width)??p.width,arrowLength:this.arrowLength,arrowWidth:this.arrowWidth,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(t){this.pathShape.render(t)}}const xt=r=>{if(r.diagonalDistance===0)return"";const t=r.offset/r.diagonalDistance,e=r.flipr.to.x,s=r.flipr.to.y,i={x:et+r.shift.x,y:st+r.shift.y},n={x:e/r.diagonalDistance,y:s/r.diagonalDistance};return G(n,i,r.arrowLength,r.arrowWidth)};class K{constructor(t){o(this,"svg");o(this,"group",pt());o(this,"line");o(this,"sourceArrow",null);o(this,"targetArrow",null);o(this,"color");o(this,"width");o(this,"arrowLength");o(this,"arrowWidth");o(this,"sourceOffset");o(this,"targetOffset");o(this,"onAfterRender");o(this,"afterRenderEmitter");[this.afterRenderEmitter,this.onAfterRender]=S(),this.color=(t==null?void 0:t.color)??p.color,this.width=(t==null?void 0:t.width)??p.width,this.arrowLength=(t==null?void 0:t.arrowLength)??p.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??p.arrowWidth,this.sourceOffset=(t==null?void 0:t.sourceOffset)??p.preOffset,this.targetOffset=(t==null?void 0:t.targetOffset)??p.preOffset,this.svg=ut(this.color),this.svg.appendChild(this.group),this.line=wt(this.width),this.group.appendChild(this.line),t!=null&&t.hasSourceArrow&&(this.sourceArrow=$(),this.group.appendChild(this.sourceArrow)),t!=null&&t.hasTargetArrow&&(this.targetArrow=$(),this.group.appendChild(this.targetArrow))}render(t){const{x:e,y:s,width:i,height:n,flipX:a,flipY:h}=ft(t.from,t.to);lt(this.svg,{x:e,y:s,width:i,height:n}),this.group.style.transform=`scale(${a}, ${h})`;const d={x:i,y:n},c=new te({to:d,sourceOffset:this.sourceOffset,targetOffset:this.targetOffset,hasSourceArrow:this.sourceArrow!==null,hasTargetArrow:this.targetArrow!==null,arrowLength:this.arrowLength});this.line.setAttribute("d",c.path);let l=null;this.sourceArrow&&(l=xt({diagonalDistance:c.diagonalDistance,to:d,offset:this.sourceOffset,flip:1,shift:u,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength}),this.sourceArrow.setAttribute("d",l));let g=null;this.targetArrow&&(g=xt({diagonalDistance:c.diagonalDistance,to:d,offset:this.targetOffset,flip:-1,shift:d,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength}),this.targetArrow.setAttribute("d",g)),this.afterRenderEmitter.emit({edgePath:c,sourceArrowPath:l,targetArrowPath:g})}}const oe=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.pointerEvents="auto",r.style.cursor="pointer",r},se=r=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke","transparent"),t.setAttribute("stroke-width",`${r}`),t.setAttribute("fill","none"),t.setAttribute("stroke-linecap","round"),t},St=r=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("stroke-linejoin","round"),t.setAttribute("stroke-width",`${r}`),t.setAttribute("fill","transparent"),t.setAttribute("stroke","transparent"),t};class Pt extends Error{constructor(t){super(t),this.name="InteractiveEdgeError"}}class Z{constructor(t,e){o(this,"svg");o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"handle",oe());o(this,"onAfterRender");o(this,"interactiveLine");o(this,"interactiveSourceArrow",null);o(this,"interactiveTargetArrow",null);if(this.baseEdge=t,t instanceof Z)throw new Pt("interactive edge can be configured only once");this.svg=this.baseEdge.svg,this.group=this.baseEdge.group,this.line=this.baseEdge.line,this.sourceArrow=this.baseEdge.sourceArrow,this.targetArrow=this.baseEdge.targetArrow,this.onAfterRender=this.baseEdge.onAfterRender;const s=(e==null?void 0:e.distance)??p.interactiveWidth;this.interactiveLine=se(s),this.handle.appendChild(this.interactiveLine),this.sourceArrow&&(this.interactiveSourceArrow=St(s),this.handle.appendChild(this.interactiveSourceArrow)),this.targetArrow&&(this.interactiveTargetArrow=St(s),this.handle.appendChild(this.interactiveTargetArrow)),this.group.appendChild(this.handle),this.baseEdge.onAfterRender.subscribe(i=>{this.interactiveLine.setAttribute("d",i.edgePath.path),this.interactiveSourceArrow&&this.interactiveSourceArrow.setAttribute("d",i.sourceArrowPath),this.interactiveTargetArrow&&this.interactiveTargetArrow.setAttribute("d",i.targetArrowPath)})}render(t){this.baseEdge.render(t)}}class ie{constructor(t,e){o(this,"group");o(this,"line");o(this,"sourceArrow");o(this,"targetArrow");o(this,"onAfterRender");o(this,"svg");this.baseShape=t,this.midpointElement=e,this.svg=this.baseShape.svg,this.group=this.baseShape.group,this.line=this.baseShape.line,this.sourceArrow=this.baseShape.sourceArrow,this.targetArrow=this.baseShape.targetArrow,this.onAfterRender=this.baseShape.onAfterRender,this.svg.append(this.midpointElement),this.baseShape.onAfterRender.subscribe(s=>{const i=s.edgePath.midpoint,n=`translate(${i.x}px, ${i.y}px)`;this.midpointElement.style.setProperty("transform",n)})}render(t){this.baseShape.render(t)}}const bt=(r,t)=>{const e=new at,s=new st(e,t,r),i={nodes:{centerFn:gt,priorityFn:()=>0},edges:{shapeFactory:()=>new K,priorityFn:()=>0},ports:{direction:0}};return new nt(e,t,s,i)};class O{constructor(t,e,s,i){o(this,"onAfterPortMarked",t=>{const e=this.canvas.graph.getPort(t);this.canvas.graph.getElementPortIds(e.element).length===1&&this.hookPortEvents(e.element)});o(this,"onBeforePortUnmarked",t=>{const e=this.canvas.graph.getPort(t);this.canvas.graph.getElementPortIds(e.element).length===1&&this.unhookPortEvents(e.element)});o(this,"onPortMouseDown",t=>{if(!this.params.mouseDownEventVerifier(t))return;const e=t.currentTarget,s=this.canvas.graph.getElementPortIds(e)[0];this.params.onPortPointerDown(s,{x:t.clientX,y:t.clientY})&&(t.stopPropagation(),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}))});o(this,"onWindowMouseMove",t=>{if(!R(this.window,this.element,t.clientX,t.clientY)){this.stopMouseDrag();return}this.params.onPointerMove({x:t.clientX,y:t.clientY})});o(this,"onWindowMouseUp",t=>{this.params.mouseUpEventVerifier(t)&&(this.params.onPointerUp({x:t.clientX,y:t.clientY}),this.stopMouseDrag())});o(this,"onPortTouchStart",t=>{if(t.touches.length!==1)return;const e=t.touches[0],s=t.currentTarget,i=this.canvas.graph.getElementPortIds(s)[0];this.params.onPortPointerDown(i,{x:e.clientX,y:e.clientY})&&(t.stopPropagation(),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0}))});o(this,"onWindowTouchMove",t=>{const e=t.touches[0];if(!R(this.window,this.element,e.clientX,e.clientY)){this.stopTouchDrag();return}this.params.onPointerMove({x:e.clientX,y:e.clientY})});o(this,"onWindowTouchFinish",t=>{const e=t.changedTouches[0];this.params.onPointerUp({x:e.clientX,y:e.clientY}),this.stopTouchDrag()});o(this,"onBeforeClear",()=>{this.canvas.graph.getAllPortIds().forEach(t=>{const e=this.canvas.graph.getPort(t);this.unhookPortEvents(e.element)})});o(this,"onBeforeDestroy",()=>{this.params.onStopDrag(),this.removeWindowMouseListeners(),this.removeWindowTouchListeners()});this.canvas=t,this.element=e,this.window=s,this.params=i,this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked),this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(t,e,s,i){new O(t,e,s,i)}hookPortEvents(t){t.addEventListener("mousedown",this.onPortMouseDown,{passive:!0}),t.addEventListener("touchstart",this.onPortTouchStart,{passive:!0})}unhookPortEvents(t){t.removeEventListener("mousedown",this.onPortMouseDown),t.removeEventListener("touchstart",this.onPortTouchStart)}stopMouseDrag(){this.params.onStopDrag(),this.removeWindowMouseListeners()}stopTouchDrag(){this.params.onStopDrag(),this.removeWindowTouchListeners()}removeWindowMouseListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}removeWindowTouchListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class J{constructor(t,e,s,i){o(this,"grabbedNode",null);o(this,"maxNodePriority",0);o(this,"graph");o(this,"onAfterNodeAdded",t=>{this.updateMaxNodePriority(t);const e=this.graph.getNode(t);e.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),e.element.addEventListener("touchstart",this.onTouchStart,{passive:!0})});o(this,"onAfterNodeUpdated",t=>{this.updateMaxNodePriority(t)});o(this,"onBeforeNodeRemoved",t=>{const e=this.graph.getNode(t);e.element.removeEventListener("mousedown",this.onMouseDown),e.element.removeEventListener("touchstart",this.onTouchStart)});o(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners()});o(this,"onBeforeClear",()=>{this.canvas.graph.getAllNodeIds().forEach(t=>{const e=this.canvas.graph.getNode(t);e.element.removeEventListener("mousedown",this.onMouseDown),e.element.removeEventListener("touchstart",this.onTouchStart)}),this.maxNodePriority=0});o(this,"onMouseDown",t=>{if(!this.params.mouseDownEventVerifier(t))return;const e=t.currentTarget,s=this.graph.getElementNodeId(e),i=this.graph.getNode(s);if(!this.params.nodeDragVerifier(s))return;t.stopPropagation();const a=this.calculateContentPoint({x:t.clientX,y:t.clientY});this.grabbedNode={nodeId:s,dx:a.x-i.x,dy:a.y-i.y},U(this.element,this.params.dragCursor),this.moveNodeOnTop(s),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0})});o(this,"onTouchStart",t=>{if(t.touches.length!==1)return;t.stopPropagation();const e=t.touches[0],s=t.currentTarget,i=this.canvas.graph.getElementNodeId(s),n=this.graph.getNode(i);if(!this.params.nodeDragVerifier({nodeId:i,element:n.element,x:n.x,y:n.y}))return;const h=this.calculateContentPoint({x:e.clientX,y:e.clientY});this.grabbedNode={nodeId:i,dx:h.x-n.x,dy:h.y-n.y},this.moveNodeOnTop(i),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0})});o(this,"onWindowMouseMove",t=>{if(!R(this.window,this.element,t.clientX,t.clientY)){this.cancelMouseDrag();return}this.grabbedNode!==null&&this.moveNode(this.grabbedNode,{x:t.clientX,y:t.clientY})});o(this,"onWindowMouseUp",t=>{this.params.mouseUpEventVerifier(t)&&this.cancelMouseDrag()});o(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const e=t.touches[0];if(!R(this.window,this.element,e.clientX,e.clientY)){this.cancelTouchDrag();return}this.grabbedNode!==null&&this.moveNode(this.grabbedNode,{x:e.clientX,y:e.clientY})});o(this,"onWindowTouchFinish",()=>{this.cancelTouchDrag()});this.canvas=t,this.element=e,this.window=s,this.params=i,this.graph=t.graph,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(t,e,s,i){new J(t,e,s,i)}moveNode(t,e){if(this.graph.getNode(t.nodeId)===null)return;const i=this.calculateContentPoint(e),n={x:i.x-t.dx,y:i.y-t.dy},a=this.adjustNodeCoords(n);this.canvas.updateNode(t.nodeId,{x:a.x,y:a.y}),this.params.onNodeDrag(t.nodeId)}moveNodeOnTop(t){if(this.params.moveOnTop){if(this.maxNodePriority++,this.params.moveEdgesOnTop){const e=this.maxNodePriority;this.maxNodePriority++,this.graph.getNodeAdjacentEdgeIds(t).forEach(i=>{this.canvas.updateEdge(i,{priority:e})})}this.canvas.updateNode(t,{priority:this.maxNodePriority})}}cancelMouseDrag(){this.grabbedNode!==null&&this.graph.getNode(this.grabbedNode.nodeId)!==null&&this.params.onNodeDragFinished(this.grabbedNode.nodeId),this.grabbedNode=null,U(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){if(this.grabbedNode!==null){const t=this.graph.getNode(this.grabbedNode.nodeId);t!==null&&this.params.onNodeDragFinished({nodeId:this.grabbedNode.nodeId,element:t.element,x:t.x,y:t.y})}this.grabbedNode=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}updateMaxNodePriority(t){const e=this.graph.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,e)}calculateContentPoint(t){const e=this.element.getBoundingClientRect(),s={x:t.x-e.x,y:t.y-e.y},i=this.canvas.viewport.getViewportMatrix();return E(i,s)}adjustNodeCoords(t){const e=this.params.gridSize;if(e!==null){const s=e/2;return{x:Math.floor((t.x+s)/e)e,y:Math.floor((t.y+s)/e)e}}return t}}const ne=(r,t,e)=>({scale:r.scale,x:r.x+r.scalet,y:r.y+r.scalee}),ae=(r,t,e,s)=>({scale:r.scalet,x:r.scale(1-t)e+r.x,y:r.scale(1-t)s+r.y}),k=r=>{const t=[],e=r.touches.length;for(let h=0;h<e;h++)t.push([r.touches[h].clientX,r.touches[h].clientY]);const s=t.reduce((h,d)=>[h[0]+d[0],h[1]+d[1]],[0,0]),i=[s[0]/e,s[1]/e],a=t.map(h=>[h[0]-i[0],h[1]-i[1]]).reduce((h,d)=>h+Math.sqrt(d[0]d[0]+d[1]d[1]),0);return{x:i[0],y:i[1],scale:a/e,touchesCnt:e,touches:t}};class z{constructor(t,e,s,i){o(this,"viewport");o(this,"prevTouches",null);o(this,"wheelFinishTimer",null);o(this,"transformInProgress",!1);o(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners()});o(this,"onMouseDown",t=>{this.element===null\|\|!this.params.mouseDownEventVerifier(t)\|\|(U(this.element,this.params.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.startRegisteredTransform())});o(this,"onWindowMouseMove",t=>{const e=R(this.window,this.element,t.clientX,t.clientY);if(this.element===null\|\|!e){this.stopMouseDrag();return}const s=-t.movementX,i=-t.movementY;this.moveViewport(s,i)});o(this,"onWindowMouseUp",t=>{this.element===null\|\|!this.params.mouseUpEventVerifier(t)\|\|this.stopMouseDrag()});o(this,"onWheelScroll",t=>{if(!this.params.mouseWheelEventVerifier(t))return;const{left:e,top:s}=this.element.getBoundingClientRect(),i=t.clientX-e,n=t.clientY-s,h=1/(t.deltaY<0?this.params.wheelSensitivity:1/this.params.wheelSensitivity);this.wheelFinishTimer===null&&this.params.onTransformStarted(),this.scaleViewport(h,i,n),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.transformInProgress\|\|this.params.onTransformFinished(),this.wheelFinishTimer=null},this.params.scaleWheelFinishTimeout)});o(this,"onTouchStart",t=>{if(this.prevTouches!==null){this.prevTouches=k(t);return}this.prevTouches=k(t),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0}),this.startRegisteredTransform()});o(this,"onWindowTouchMove",t=>{const e=k(t);if(!e.touches.every(i=>R(this.window,this.element,i[0],i[1]))){this.stopTouchDrag();return}if((e.touchesCnt===1\|\|e.touchesCnt===2)&&this.moveViewport(-(e.x-this.prevTouches.x),-(e.y-this.prevTouches.y)),e.touchesCnt===2){const{left:i,top:n}=this.element.getBoundingClientRect(),a=this.prevTouches.x-i,h=this.prevTouches.y-n,c=1/(e.scale/this.prevTouches.scale);this.scaleViewport(c,a,h)}this.prevTouches=e});o(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=k(t):this.stopTouchDrag()});o(this,"observer",new ResizeObserver(()=>{const t=this.viewport.getViewportMatrix(),{width:e,height:s}=this.element.getBoundingClientRect(),i=this.params.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:e,canvasHeight:s});this.params.onResizeTransformStarted(),this.canvas.patchViewportMatrix(i),this.params.onResizeTransformFinished()}));o(this,"preventWheelScaleListener",t=>{t.preventDefault()});this.canvas=t,this.element=e,this.window=s,this.params=i,this.element.addEventListener("wheel",this.preventWheelScaleListener,{passive:!1}),this.viewport=t.viewport,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),this.element.addEventListener("wheel",this.onWheelScroll,{passive:!0}),this.element.addEventListener("touchstart",this.onTouchStart,{passive:!0}),t.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(t,e,s,i){new z(t,e,s,i)}moveViewport(t,e){const s=this.viewport.getViewportMatrix(),i=ne(s,t,e),{width:n,height:a}=this.element.getBoundingClientRect(),h=this.params.transformPreprocessor({prevTransform:s,nextTransform:i,canvasWidth:n,canvasHeight:a});this.performTransform(h)}scaleViewport(t,e,s){const i=this.canvas.viewport.getViewportMatrix(),n=ae(i,t,e,s),{width:a,height:h}=this.element.getBoundingClientRect(),d=this.params.transformPreprocessor({prevTransform:i,nextTransform:n,canvasWidth:a,canvasHeight:h});this.performTransform(d)}stopMouseDrag(){U(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(t){this.params.onBeforeTransformChange(),this.canvas.patchViewportMatrix(t),this.params.onTransformChange()}startRegisteredTransform(){this.transformInProgress=!0,this.params.onTransformStarted()}finishRegisteredTransform(){this.transformInProgress=!1,this.params.onTransformFinished()}}class Q{constructor(t,e,s,i,n,a){o(this,"canvasResizeObserver");o(this,"nodeHorizontal");o(this,"nodeVertical");o(this,"viewport");o(this,"viewportWidth",0);o(this,"viewportHeight",0);o(this,"viewportMatrix");o(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});o(this,"updateLoadedArea",t=>{this.loadedArea={xFrom:t.x,xTo:t.x+t.width,yFrom:t.y,yTo:t.y+t.height}});o(this,"onAfterViewportUpdated",()=>{this.userTransformInProgress\|\|(this.viewportMatrix=this.viewport.getViewportMatrix(),this.loadAreaAroundViewport())});o(this,"userTransformInProgress",!1);this.canvas=t,this.element=e,this.window=s,this.trigger=n,this.params=a,this.nodeHorizontal=this.params.nodeVerticalRadius,this.nodeVertical=this.params.nodeHorizontalRadius,this.canvasResizeObserver=new ResizeObserver(d=>{const c=d[0];this.viewportWidth=c.contentRect.width,this.viewportHeight=c.contentRect.height,this.scheduleLoadAreaAroundViewport()}),this.viewport=t.viewport;const h={...i,onResizeTransformStarted:()=>{this.userTransformInProgress=!0,i.onResizeTransformStarted()},onResizeTransformFinished:()=>{this.userTransformInProgress=!1,i.onResizeTransformFinished()},onBeforeTransformChange:()=>{this.userTransformInProgress=!0,i.onBeforeTransformChange()},onTransformChange:()=>{this.userTransformInProgress=!1;const d=this.viewportMatrix;this.viewportMatrix=this.viewport.getViewportMatrix(),d.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),i.onTransformChange()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),i.onTransformFinished()}};z.configure(t,this.element,this.window,h),this.viewportMatrix=this.viewport.getViewportMatrix(),this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated)}static configure(t,e,s,i,n,a){new Q(t,e,s,i,n,a)}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const t=this.viewportWidththis.viewportMatrix.scale,e=this.viewportHeightthis.viewportMatrix.scale,s=this.viewportMatrix.x-this.nodeHorizontal,i=this.viewportMatrix.y-this.nodeVertical,n=this.viewportMatrix.x+t+this.nodeHorizontal,a=this.viewportMatrix.y+e+this.nodeVertical;this.loadedArea.xFrom<s&&this.loadedArea.xTo>n&&this.loadedArea.yFrom<i&&this.loadedArea.yTo>a\|\|this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const t=this.viewportWidththis.viewportMatrix.scale,e=this.viewportHeightthis.viewportMatrix.scale,s=this.viewportMatrix.x-t-this.nodeHorizontal,i=this.viewportMatrix.y-e-this.nodeVertical,n=3t+2this.nodeHorizontal,a=3e+2this.nodeVertical;this.trigger.emit({x:s,y:i,width:n,height:a})}}const he=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.style.position="absolute",r.style.inset="0",r},de=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("fill","url(#pattern)"),r},ce=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","pattern");return r.setAttribute("id","pattern"),r};class _{constructor(t,e,s){o(this,"svg",he());o(this,"patternRenderingRectangle",de());o(this,"pattern",ce());o(this,"patternContent");o(this,"tileWidth");o(this,"tileHeight");o(this,"halfTileWidth");o(this,"halfTileHeight");o(this,"maxViewportScale");o(this,"visible",!1);o(this,"resizeObserver",new ResizeObserver(t=>{const e=t[0],{width:s,height:i}=e.contentRect;this.svg.setAttribute("width",`${s}`),this.svg.setAttribute("height",`${i}`),this.patternRenderingRectangle.setAttribute("width",`${s}`),this.patternRenderingRectangle.setAttribute("height",`${i}`);const n=this.tileWidth/s,a=this.tileHeight/i;this.pattern.setAttribute("width",`${n}`),this.pattern.setAttribute("height",`${a}`)}));o(this,"onAfterTransformUpdated",()=>{const t=this.canvas.viewport.getContentMatrix(),e=t.x-this.halfTileWidtht.scale,s=t.y-this.halfTileHeightt.scale,i=`matrix(${t.scale}, 0, 0, ${t.scale}, ${e}, ${s})`;this.pattern.setAttribute("patternTransform",i),this.updateVisibility()});this.canvas=t,this.backgroundHost=s,this.tileWidth=e.tileWidth,this.tileHeight=e.tileHeight,this.halfTileWidth=this.tileWidth/2,this.halfTileHeight=this.tileHeight/2,this.patternContent=e.renderer,this.maxViewportScale=e.maxViewportScale;const i=`translate(${this.halfTileWidth}, ${this.halfTileHeight})`;this.patternContent.setAttribute("transform",i),this.pattern.appendChild(this.patternContent);const n=document.createElementNS("http://www.w3.org/2000/svg","defs");n.appendChild(this.pattern),this.svg.appendChild(n),this.svg.appendChild(this.patternRenderingRectangle),this.resizeObserver.observe(this.backgroundHost),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated),this.onAfterTransformUpdated()}static configure(t,e,s){new _(t,e,s)}updateVisibility(){const e=this.canvas.viewport.getViewportMatrix().scale>this.maxViewportScale;e&&this.visible?(this.visible=!1,this.backgroundHost.removeChild(this.svg)):!e&&!this.visible&&(this.visible=!0,this.backgroundHost.appendChild(this.svg))}}class q{constructor(t,e,s,i,n){o(this,"overlayCanvas");o(this,"staticPortId",null);o(this,"isTargetDragging",!0);o(this,"onEdgeCreated",t=>{this.params.onAfterEdgeCreated(t)});this.canvas=t,this.overlayLayer=e,this.viewportStore=s,this.window=i,this.params=n,this.overlayCanvas=bt(this.overlayLayer,this.viewportStore),O.configure(this.canvas,this.overlayLayer,this.window,{mouseDownEventVerifier:this.params.mouseDownEventVerifier,mouseUpEventVerifier:this.params.mouseUpEventVerifier,onStopDrag:()=>{this.resetDragState()},onPortPointerDown:(a,h)=>{const d=this.params.connectionTypeResolver(a);return d===null?!1:(this.grabPort(a,h,d),!0)},onPointerMove:a=>{this.moveDraggingPort(a)},onPointerUp:a=>{this.tryCreateConnection(a)}})}static configure(t,e,s,i,n){new q(t,e,s,i,n)}grabPort(t,e,s){const i=this.canvas.graph.getPort(t);this.staticPortId=t;const n=i.element.getBoundingClientRect(),a=n.x+n.width/2,h=n.y+n.height/2,d=this.overlayLayer.getBoundingClientRect(),c=this.canvas.viewport.getViewportMatrix(),l=E(c,{x:a-d.x,y:h-d.y}),g=E(c,{x:e.x-d.x,y:e.y-d.y}),w={overlayId:D.Static,portCoords:l,portDirection:i.direction},f={overlayId:D.Dragging,portCoords:g,portDirection:this.params.dragPortDirection};this.isTargetDragging=s==="direct";const[m,A]=this.isTargetDragging?[w,f]:[f,w];this.overlayCanvas.addNode(W(m)),this.overlayCanvas.addNode(W(A)),this.overlayCanvas.addEdge({from:m.overlayId,to:A.overlayId,shape:this.params.edgeShapeFactory(D.Edge)})}resetDragState(){this.staticPortId=null,this.isTargetDragging=!0,this.overlayCanvas.clear()}tryCreateConnection(t){const e=ct(this.canvas.graph,t),s=this.staticPortId;if(e===null){this.params.onEdgeCreationInterrupted({staticPortId:s,isDirect:this.isTargetDragging});return}const i=this.isTargetDragging?s:e,n=this.isTargetDragging?e:s,a={from:i,to:n},h=this.params.connectionPreprocessor(a);h!==null?(this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated),this.canvas.addEdge(h),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)):this.params.onEdgeCreationPrevented(a)}moveDraggingPort(t){const e=this.overlayLayer.getBoundingClientRect(),s={x:t.x-e.x,y:t.y-e.y},i=this.canvas.viewport.getViewportMatrix(),n=E(i,s);this.overlayCanvas.updateNode(D.Dragging,{x:n.x,y:n.y})}}class tt{constructor(t,e,s,i,n){o(this,"overlayCanvas");o(this,"staticPortId",null);o(this,"isTargetDragging",!0);o(this,"draggingEdgePayload",null);o(this,"onEdgeReattached",t=>{this.params.onAfterEdgeReattached(t)});this.canvas=t,this.overlayLayer=e,this.viewportStore=s,this.window=i,this.params=n,this.overlayCanvas=bt(this.overlayLayer,this.viewportStore),O.configure(this.canvas,this.overlayLayer,this.window,{mouseDownEventVerifier:this.params.mouseDownEventVerifier,mouseUpEventVerifier:this.params.mouseUpEventVerifier,onStopDrag:()=>{this.resetDragState()},onPortPointerDown:(a,h)=>this.tryStartEdgeDragging(a,h),onPointerMove:a=>{this.moveDraggingPort(a)},onPointerUp:a=>{this.tryCreateConnection(a)}})}static configure(t,e,s,i,n){new tt(t,e,s,i,n)}tryStartEdgeDragging(t,e){const s=this.params.draggingEdgeResolver(t);if(s===null)return!1;const i=this.canvas.graph.getEdge(s);if(i===null)return!1;const n=t===i.from,a=t===i.to,h=n?i.to:i.from;this.staticPortId=h,this.isTargetDragging=a;const d=this.canvas.graph.getPort(t),c=this.canvas.graph.getPort(h),l=c.element.getBoundingClientRect(),g={x:l.x+l.width/2,y:l.y+l.height/2},w=this.canvas.viewport.getViewportMatrix(),f=this.overlayLayer.getBoundingClientRect(),m=E(w,{x:g.x-f.x,y:g.y-f.y}),A=E(w,{x:e.x-f.x,y:e.y-f.y});this.draggingEdgePayload={id:s,from:i.from,to:i.to,shape:i.shape,priority:i.priority},this.canvas.removeEdge(s);const x={overlayId:D.Static,portCoords:m,portDirection:c.direction},P={overlayId:D.Dragging,portCoords:A,portDirection:d.direction},[V,N]=this.isTargetDragging?[x,P]:[P,x];this.overlayCanvas.addNode(W(V)),this.overlayCanvas.addNode(W(N));const L=this.params.draggingEdgeShapeFactory!==null?this.params.draggingEdgeShapeFactory(D.Edge):i.shape;return this.overlayCanvas.addEdge({id:D.Edge,from:V.overlayId,to:N.overlayId,shape:L}),!0}resetDragState(){this.draggingEdgePayload=null,this.staticPortId=null,this.isTargetDragging=!0,this.overlayCanvas.clear()}moveDraggingPort(t){const e=this.overlayLayer.getBoundingClientRect(),s={x:t.x-e.x,y:t.y-e.y},i=this.canvas.viewport.getViewportMatrix(),n=E(i,s);this.overlayCanvas.updateNode(D.Dragging,{x:n.x,y:n.y})}tryCreateConnection(t){const e=ct(this.canvas.graph,t);if(this.overlayCanvas.removeEdge(D.Edge),e===null){const d=this.draggingEdgePayload;this.params.onEdgeReattachInterrupted({id:d.id,from:d.from,to:d.to,shape:d.shape,priority:d.priority});return}const[s,i]=this.isTargetDragging?[this.staticPortId,e]:[e,this.staticPortId],n=this.draggingEdgePayload,a={id:n.id,from:s,to:i,shape:n.shape,priority:n.priority},h=this.params.connectionPreprocessor(a);if(h!==null)this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached),this.canvas.addEdge(h),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);else{const d=this.draggingEdgePayload;this.params.onEdgeReattachPrevented({id:d.id,from:d.from,to:d.to,shape:d.shape,priority:d.priority})}}}const ge=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r},et=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.inset="0",r},Tt=()=>{const r=et();return r.style.pointerEvents="none",r};class le{constructor(t){o(this,"background",et());o(this,"main",et());o(this,"overlayConnectablePorts",Tt());o(this,"overlayDraggableEdges",Tt());o(this,"host",ge());this.element=t,this.element.appendChild(this.host),this.host.appendChild(this.background),this.host.appendChild(this.main),this.host.appendChild(this.overlayConnectablePorts),this.host.appendChild(this.overlayDraggableEdges)}destroy(){this.host.removeChild(this.background),this.host.removeChild(this.main),this.host.removeChild(this.overlayConnectablePorts),this.host.removeChild(this.overlayDraggableEdges),this.element.removeChild(this.host)}}const rt=r=>()=>r,Dt=rt(0),ue=()=>{let r=0;return()=>r++},pe=(r,t)=>{let e=Dt,s=Dt;const i=ue();return r==="incremental"&&(e=i),t==="incremental"&&(s=i),typeof r=="number"&&(e=rt(r)),typeof t=="number"&&(s=rt(t)),typeof r=="function"&&(e=r),typeof t=="function"&&(s=t),{nodesPriorityFn:e,edgesPriorityFn:s}},ot=r=>{if(typeof r=="function")return r;switch(r==null?void 0:r.type){case"straight":return()=>new Et({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowWidth:r.arrowWidth,arrowOffset:r.arrowOffset,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance,detourDirection:r.detourDirection});case"horizontal":return()=>new vt({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowWidth:r.arrowWidth,arrowOffset:r.arrowOffset,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance});case"vertical":return()=>new At({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowWidth:r.arrowWidth,arrowOffset:r.arrowOffset,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance});case"direct":return()=>new K({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowWidth:r.arrowWidth,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,sourceOffset:r.sourceOffset,targetOffset:r.targetOffset});default:return()=>new mt({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowWidth:r.arrowWidth,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleRadius:r.cycleRadius,smallCycleRadius:r.smallCycleRadius,curvature:r.curvature,detourDistance:r.detourDistance,detourDirection:r.detourDirection})}},we=r=>{var e,s,i,n,a;const t=pe((e=r.nodes)==null?void 0:e.priority,(s=r.edges)==null?void 0:s.priority);return{nodes:{centerFn:((i=r.nodes)==null?void 0:i.centerFn)??gt,priorityFn:t.nodesPriorityFn},ports:{direction:((n=r.ports)==null?void 0:n.direction)??0},edges:{shapeFactory:ot(((a=r.edges)==null?void 0:a.shape)??{}),priorityFn:t.edgesPriorityFn}}},fe=r=>{var w,f,m,A,x;const t=((w=r.events)==null?void 0:w.onNodeDrag)??(()=>{}),e=r.nodeDragVerifier??(()=>!0),s=((f=r.events)==null?void 0:f.onNodeDragFinished)??(()=>{}),i=r.moveOnTop!==!1,n=r.moveEdgesOnTop!==!1&&i,a=(m=r.mouse)==null?void 0:m.dragCursor,h=a!==void 0?a:"grab",d=(A=r.mouse)==null?void 0:A.mouseDownEventVerifier,c=d!==void 0?d:P=>P.button===0,l=(x=r.mouse)==null?void 0:x.mouseUpEventVerifier,g=l!==void 0?l:P=>P.button===0;return{moveOnTop:i,moveEdgesOnTop:n,dragCursor:h,gridSize:r.gridSize??null,mouseDownEventVerifier:c,mouseUpEventVerifier:g,onNodeDrag:t,nodeDragVerifier:e,onNodeDragFinished:s}},ye=r=>{const t=r.minX!==null?r.minX:-1/0,e=r.maxX!==null?r.maxX:1/0,s=r.minY!==null?r.minY:-1/0,i=r.maxY!==null?r.maxY:1/0;return n=>{let a=n.nextTransform.x,h=n.nextTransform.y;a<t&&a<n.prevTransform.x&&(a=Math.min(n.prevTransform.x,t));const d=n.canvasWidthn.prevTransform.scale,c=e-d;a>c&&a>n.prevTransform.x&&(a=Math.max(n.prevTransform.x,c)),h<s&&h<n.prevTransform.y&&(h=Math.min(n.prevTransform.y,s));const l=n.canvasHeightn.prevTransform.scale,g=i-l;return h>g&&h>n.prevTransform.y&&(h=Math.max(n.prevTransform.y,g)),{scale:n.nextTransform.scale,x:a,y:h}}},me=r=>{const t=r.maxContentScale,e=r.minContentScale,s=t!==null?1/t:0,i=e!==null?1/e:1/0;return n=>{const a=n.prevTransform,h=n.nextTransform;let d=h.scale,c=h.x,l=h.y;if(h.scale>i&&h.scale>a.scale){d=Math.max(a.scale,i),c=a.x,l=a.y;const g=(d-a.scale)/(h.scale-a.scale);c=a.x+(h.x-a.x)g,l=a.y+(h.y-a.y)g}if(h.scale<s&&h.scale<a.scale){d=Math.min(a.scale,s),c=a.x,l=a.y;const g=(d-a.scale)/(h.scale-a.scale);c=a.x+(h.x-a.x)g,l=a.y+(h.y-a.y)*g}return{scale:d,x:c,y:l}}},ve=r=>t=>r.reduce((e,s)=>s({prevTransform:t.prevTransform,nextTransform:e,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight}),t.nextTransform),Nt=r=>{if(typeof r=="function")return r;switch(r.type){case"scale-limit":return me({minContentScale:r.minContentScale??0,maxContentScale:r.maxContentScale??1/0});case"shift-limit":return ye({minX:r.minX??-1/0,maxX:r.maxX??1/0,minY:r.minY??-1/0,maxY:r.maxY??1/0})}},Mt=r=>{var m,A,x,P,V,N,L,I,Ct,Rt,Vt,It;const t=(m=r==null?void 0:r.scale)==null?void 0:m.mouseWheelSensitivity,e=t!==void 0?t:1.2,s=r==null?void 0:r.transformPreprocessor;let i;s!==void 0?Array.isArray(s)?i=ve(s.map(C=>Nt(C))):i=Nt(s):i=C=>C.nextTransform;const n=((A=r==null?void 0:r.shift)==null?void 0:A.cursor)!==void 0?r.shift.cursor:"grab",a=((x=r==null?void 0:r.events)==null?void 0:x.onBeforeTransformChange)??(()=>{}),h=((P=r==null?void 0:r.events)==null?void 0:P.onTransformChange)??(()=>{}),d=(V=r==null?void 0:r.shift)==null?void 0:V.mouseDownEventVerifier,c=d!==void 0?d:C=>C.button===0,l=(N=r==null?void 0:r.shift)==null?void 0:N.mouseUpEventVerifier,g=l!==void 0?l:C=>C.button===0,w=(L=r==null?void 0:r.scale)==null?void 0:L.mouseWheelEventVerifier,f=w!==void 0?w:()=>!0;return{wheelSensitivity:e,onTransformStarted:((I=r==null?void 0:r.events)==null?void 0:I.onTransformStarted)??(()=>{}),onTransformFinished:((Ct=r==null?void 0:r.events)==null?void 0:Ct.onTransformFinished)??(()=>{}),onBeforeTransformChange:a,onTransformChange:h,transformPreprocessor:i,shiftCursor:n,mouseDownEventVerifier:c,mouseUpEventVerifier:g,mouseWheelEventVerifier:f,scaleWheelFinishTimeout:((Rt=r==null?void 0:r.scale)==null?void 0:Rt.wheelFinishTimeout)??500,onResizeTransformStarted:((Vt=r==null?void 0:r.events)==null?void 0:Vt.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((It=r==null?void 0:r.events)==null?void 0:It.onResizeTransformFinished)??(()=>{})}},Ee=(r,t)=>{const e=document.createElementNS("http://www.w3.org/2000/svg","circle");return e.setAttribute("cx","0"),e.setAttribute("cy","0"),e.setAttribute("r",`${r}`),e.setAttribute("fill",`${t}`),e},Ae=r=>r instanceof SVGElement?r:Ee((r==null?void 0:r.radius)??1.5,(r==null?void 0:r.color)??"#d8d8d8"),xe=r=>{const t=r.tileDimensions,e=(t==null?void 0:t.width)??25,s=(t==null?void 0:t.height)??25,i=Ae(r.renderer??{});return{tileWidth:e,tileHeight:s,renderer:i,maxViewportScale:r.maxViewportScale??10}},Se=(r,t,e)=>{var c,l,g;const s=()=>"direct",i=w=>w,n=w=>w.button===0,a=()=>{},h=()=>{},d=()=>{};return{connectionTypeResolver:r.connectionTypeResolver??s,connectionPreprocessor:r.connectionPreprocessor??i,mouseDownEventVerifier:r.mouseDownEventVerifier??n,mouseUpEventVerifier:r.mouseUpEventVerifier??n,onAfterEdgeCreated:((c=r.events)==null?void 0:c.onAfterEdgeCreated)??a,onEdgeCreationInterrupted:((l=r.events)==null?void 0:l.onEdgeCreationInterrupted)??d,onEdgeCreationPrevented:((g=r.events)==null?void 0:g.onEdgeCreationPrevented)??h,dragPortDirection:r.dragPortDirection??e,edgeShapeFactory:r.edgeShape!==void 0?ot(r.edgeShape):t}},Pe=(r,t)=>{var c,l,g;const e=w=>w,s=w=>w.button===0&&w.ctrlKey,i=w=>w.button===0,n=w=>{const f=t.getPortAdjacentEdgeIds(w);return f.length>0?f[f.length-1]:null},a=()=>{},h=()=>{},d=()=>{};return{connectionPreprocessor:r.connectionPreprocessor??e,mouseDownEventVerifier:r.mouseDownEventVerifier??s,mouseUpEventVerifier:r.mouseUpEventVerifier??i,draggingEdgeResolver:r.draggingEdgeResolver??n,draggingEdgeShapeFactory:r.draggingEdgeShape!==void 0?ot(r.draggingEdgeShape):null,onAfterEdgeReattached:((c=r.events)==null?void 0:c.onAfterEdgeReattached)??a,onEdgeReattachInterrupted:((l=r.events)==null?void 0:l.onEdgeReattachInterrupted)??d,onEdgeReattachPrevented:((g=r.events)==null?void 0:g.onEdgeReattachPrevented)??h}},be=r=>({nodeVerticalRadius:r.nodeContainingRadius.vertical,nodeHorizontalRadius:r.nodeContainingRadius.horizontal}),Te=r=>{var t,e;return{onAfterNodeDetached:((t=r==null?void 0:r.events)==null?void 0:t.onAfterNodeDetached)??(()=>{}),onBeforeNodeAttached:((e=r==null?void 0:r.events)==null?void 0:e.onBeforeNodeAttached)??(()=>{})}};class Lt extends Error{constructor(){super(...arguments);o(this,"name","CanvasBuilderError")}}class De{constructor(t){o(this,"used",!1);o(this,"canvasDefaults",{});o(this,"dragConfig",{});o(this,"transformConfig",{});o(this,"backgroundConfig",{});o(this,"connectablePortsConfig",{});o(this,"draggableEdgesConfig",{});o(this,"virtualScrollConfig");o(this,"hasDraggableNode",!1);o(this,"hasTransformableViewport",!1);o(this,"hasNodeResizeReactiveEdges",!1);o(this,"hasBackground",!1);o(this,"hasUserConnectablePorts",!1);o(this,"hasUserDraggableEdges",!1);o(this,"boxRenderingTrigger",new it);o(this,"graphStore",new at);o(this,"viewportStore",new Xt);o(this,"window",window);this.element=t}setDefaults(t){return this.canvasDefaults=t,this}enableUserDraggableNodes(t){return this.hasDraggableNode=!0,this.dragConfig=t??{},this}enableUserTransformableViewport(t){return this.hasTransformableViewport=!0,this.transformConfig=t??{},this}enableNodeResizeReactiveEdges(){return this.hasNodeResizeReactiveEdges=!0,this}enableVirtualScroll(t){return this.virtualScrollConfig=t,this}enableBackground(t){return this.hasBackground=!0,this.backgroundConfig=t??{},this}enableUserConnectablePorts(t){return this.hasUserConnectablePorts=!0,this.connectablePortsConfig=t??{},this}enableUserDraggableEdges(t){return this.hasUserDraggableEdges=!0,this.draggableEdgesConfig=t??{},this}build(){if(this.used)throw new Lt("CanvasBuilder is a single use object");this.used=!0;const t=new le(this.element);let e=new st(this.graphStore,this.viewportStore,t.main);this.virtualScrollConfig!==void 0&&(e=new Ft(e,this.graphStore,this.boxRenderingTrigger,Te(this.virtualScrollConfig)));const s=we(this.canvasDefaults),i=new nt(this.graphStore,this.viewportStore,e,s);if(this.hasBackground&&_.configure(i,xe(this.backgroundConfig),t.background),this.hasNodeResizeReactiveEdges&&Y.configure(i),this.hasDraggableNode&&J.configure(i,t.main,this.window,fe(this.dragConfig)),this.hasUserConnectablePorts){const a=Se(this.connectablePortsConfig,s.edges.shapeFactory,s.ports.direction);q.configure(i,t.overlayConnectablePorts,this.viewportStore,this.window,a)}if(this.hasUserDraggableEdges){const a=Pe(this.draggableEdgesConfig,i.graph);tt.configure(i,t.overlayDraggableEdges,this.viewportStore,this.window,a)}this.virtualScrollConfig!==void 0?Q.configure(i,t.main,this.window,Mt(this.transformConfig),this.boxRenderingTrigger,be(this.virtualScrollConfig)):this.hasTransformableViewport&&z.configure(i,t.main,this.window,Mt(this.transformConfig));const n=()=>{t.destroy(),i.onBeforeDestroy.unsubscribe(n)};return i.onBeforeDestroy.subscribe(n),i}}v.BezierEdgeShape=mt,v.CanvasBuilder=De,v.CanvasBuilderError=Lt,v.CanvasError=b,v.DirectEdgeShape=K,v.HorizontalEdgeShape=vt,v.InteractiveEdgeError=Pt,v.InteractiveEdgeShape=Z,v.MidpointEdgeShape=ie,v.StraightEdgeShape=Et,v.VerticalEdgeShape=At,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
1	+ (function(v,A){typeof exports=="object"&&typeof module<"u"?A(exports):typeof define=="function"&&define.amd?define(["exports"],A):(v=typeof globalThis<"u"?globalThis:v\|\|self,A(v.HtmlGraph={}))})(this,function(v){"use strict";var Rt=Object.defineProperty;var Lt=(v,A,T)=>A in v?Rt(v,A,{enumerable:!0,configurable:!0,writable:!0,value:T}):v[A]=T;var s=(v,A,T)=>Lt(v,typeof A!="symbol"?A+"":A,T);const A=(r,e)=>({x:r.scalee.x+r.x,y:r.scalee.y+r.y});var T=(r=>(r.Line="line",r.NodeCycle="node-cycle",r.PortCycle="port-cycle",r))(T\|\|{});const $e=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r.style.overflow="hidden",r},Ie=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.width="0",r.style.height="0",r},Ue=r=>{r.style.position="absolute",r.style.top="0",r.style.left="0",r.style.visibility="hidden"};class se{constructor(e,t,o){s(this,"host",$e());s(this,"container",Ie());s(this,"edgeIdToElementMap",new Map);s(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=t,this.element=o,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(e){const t=this.graphStore.getNode(e);Ue(t.element),this.container.appendChild(t.element),this.updateNodePosition(e),this.updateNodePriority(e),t.element.style.visibility="visible"}detachNode(e){const t=this.graphStore.getNode(e);this.container.removeChild(t.element)}attachEdge(e){const t=this.graphStore.getEdge(e).payload.shape.svg;this.edgeIdToElementMap.set(e,t),this.container.appendChild(t),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const t=this.edgeIdToElementMap.get(e);this.container.removeChild(t),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,t)=>{this.detachEdge(t)}),this.graphStore.getAllNodeIds().forEach(e=>{this.detachNode(e)})}destroy(){this.viewportStore.onAfterUpdated.unsubscribe(this.applyTransform),this.clear(),this.element.removeChild(this.host),this.host.removeChild(this.container)}updateNodePosition(e){const t=this.graphStore.getNode(e),{width:o,height:i}=t.element.getBoundingClientRect(),n=this.viewportStore.getViewportMatrix().scale,a=t.payload.centerFn(o,i),h=t.payload.x-na.x,d=t.payload.y-na.y;t.element.style.transform=`translate(${h}px, ${d}px)`}updateNodePriority(e){const t=this.graphStore.getNode(e);t.element.style.zIndex=`${t.payload.priority}`}updateEdgeShape(e){const t=this.edgeIdToElementMap.get(e);this.container.removeChild(t);const i=this.graphStore.getEdge(e).payload.shape.svg;this.edgeIdToElementMap.set(e,i),this.container.appendChild(i)}renderEdge(e){const t=this.graphStore.getEdge(e),o=this.graphStore.getPort(t.from),i=this.graphStore.getPort(t.to),n=o.element.getBoundingClientRect(),a=i.element.getBoundingClientRect(),h=this.host.getBoundingClientRect(),d=this.viewportStore.getViewportMatrix(),c=this.createEdgeRenderPort(o,n,h,d),l=this.createEdgeRenderPort(i,a,h,d);let g=T.Line;o.element===i.element?g=T.PortCycle:o.nodeId===i.nodeId&&(g=T.NodeCycle),t.payload.shape.render({from:c,to:l,category:g})}updateEdgePriority(e){const t=this.graphStore.getEdge(e);t.payload.shape.svg.style.zIndex=`${t.payload.priority}`}createEdgeRenderPort(e,t,o,i){const n={x:t.left-o.left,y:t.top-o.top},a=A(i,n);return{x:a.x,y:a.y,width:t.widthi.scale,height:t.heighti.scale,direction:e.payload.direction}}}class Be{constructor(e){s(this,"xFrom",1/0);s(this,"yFrom",1/0);s(this,"xTo",1/0);s(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 t=this.graphStore.getNode(e).payload;return t.x>=this.xFrom&&t.x<=this.xTo&&t.y>=this.yFrom&&t.y<=this.yTo}hasEdge(e){const t=this.graphStore.getEdge(e),o=this.graphStore.getPort(t.from).nodeId,i=this.graphStore.getPort(t.to).nodeId,n=this.graphStore.getNode(o).payload,a=this.graphStore.getNode(i).payload,h=Math.min(n.x,a.x),d=Math.max(n.x,a.x),c=Math.min(n.y,a.y),l=Math.max(n.y,a.y);return h<=this.xTo&&d>=this.xFrom&&c<=this.yTo&&l>=this.yFrom}}class Fe{constructor(e,t,o,i){s(this,"attachedNodes",new Set);s(this,"attachedEdges",new Set);s(this,"renderingBox");s(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const t=new Set,o=new Set,i=new Set,n=new Set;this.graphStore.getAllNodeIds().forEach(a=>{const h=this.renderingBox.hasNode(a),d=this.attachedNodes.has(a);h&&!d?t.add(a):!h&&d&&o.add(a)}),this.graphStore.getAllEdgeIds().forEach(a=>{const h=this.renderingBox.hasEdge(a),d=this.attachedEdges.has(a),c=this.graphStore.getEdge(a),l=this.graphStore.getPort(c.from).nodeId,g=this.graphStore.getPort(c.to).nodeId;h&&(this.renderingBox.hasNode(l)\|\|(t.add(l),o.delete(l)),this.renderingBox.hasNode(g)\|\|(t.add(g),o.delete(g))),h&&!d?i.add(a):!h&&d&&n.add(a)}),n.forEach(a=>{this.handleDetachEdge(a)}),o.forEach(a=>{this.handleDetachNode(a)}),t.forEach(a=>{this.attachedNodes.has(a)\|\|this.handleAttachNode(a)}),i.forEach(a=>{this.handleAttachEdge(a)})});this.htmlView=e,this.graphStore=t,this.trigger=o,this.params=i,this.renderingBox=new Be(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(t=>{this.attachEdgeEntities(t)}))}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 t=this.graphStore.getEdge(e),o=this.graphStore.getPort(t.from).nodeId,i=this.graphStore.getPort(t.to).nodeId;this.attachedNodes.has(o)\|\|this.handleAttachNode(o),this.attachedNodes.has(i)\|\|this.handleAttachNode(i),this.handleAttachEdge(e)}handleAttachNode(e){this.params.onBeforeNodeAttached(e),this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e),this.params.onAfterNodeDetached(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class ie{constructor(){s(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(t=>{t(e)})}}const x=()=>{const r=new ie;return[r,r]};class Oe{constructor(e){s(this,"onAfterUpdated");this.viewportStore=e,this.onAfterUpdated=this.viewportStore.onAfterUpdated}getViewportMatrix(){return{...this.viewportStore.getViewportMatrix()}}getContentMatrix(){return{...this.viewportStore.getContentMatrix()}}}class We{constructor(e){s(this,"onAfterNodeAdded");s(this,"onAfterNodeUpdated");s(this,"onAfterNodePriorityUpdated");s(this,"onBeforeNodeRemoved");s(this,"onAfterPortMarked");s(this,"onAfterPortUpdated");s(this,"onBeforePortUnmarked");s(this,"onAfterEdgeAdded");s(this,"onAfterEdgeShapeUpdated");s(this,"onAfterEdgeUpdated");s(this,"onAfterEdgePriorityUpdated");s(this,"onBeforeEdgeRemoved");s(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 t=this.graphStore.getNode(e);if(t===void 0)return null;const o=t.payload;return{element:t.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getElementNodeId(e){return this.graphStore.getElementNodeId(e)??null}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const t=this.graphStore.getPort(e);return t===void 0?null:{element:t.element,direction:t.payload.direction,nodeId:t.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)??null}getElementPortIds(e){return[...this.graphStore.getElementPortIds(e)]}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const t=this.graphStore.getEdge(e);if(t===void 0)return null;const o=t.payload;return{from:t.from,to:t.to,priority:o.priority,shape:o.shape}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutgoingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutgoingEdgeIds(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)}getNodeOutgoingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutgoingEdgeIds(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 Y{constructor(e){s(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);s(this,"name","CanvasError")}}class ne{constructor(e,t,o,i){s(this,"graph");s(this,"viewport");s(this,"nodeIdGenerator",new Y(e=>this.graph.getNode(e)!==null));s(this,"portIdGenerator",new Y(e=>this.graph.getPort(e)!==null));s(this,"edgeIdGenerator",new Y(e=>this.graph.getEdge(e)!==null));s(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});s(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodePosition(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});s(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});s(this,"onBeforeNodeRemoved",e=>{this.graphStore.getNodePortIds(e).forEach(t=>{this.unmarkPort(t)}),this.htmlView.detachNode(e)});s(this,"onAfterPortUpdated",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.htmlView.renderEdge(o)})});s(this,"onBeforePortUnmarked",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(t=>{this.removeEdge(t)})});s(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});s(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});s(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});s(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});s(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});s(this,"onBeforeClear",()=>{this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this.htmlView.clear()});s(this,"onBeforeDestroyEmitter");s(this,"destroyed",!1);s(this,"onBeforeDestroy");this.graphStore=e,this.viewportStore=t,this.htmlView=o,this.params=i,this.graph=new We(this.graphStore),this.viewport=new Oe(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]=x()}addNode(e){const t=this.nodeIdGenerator.create(e.id);if(this.graphStore.getNode(t)!==void 0)throw new P("failed to add node with existing id");if(this.graphStore.getElementNodeId(e.element)!==void 0)throw new P("failed to add node with html element already in use by another node");if(this.graphStore.addNode({id:t,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.params.nodes.centerFn,priority:e.priority??this.params.nodes.priorityFn()}),e.ports!==void 0)for(const o of e.ports)this.markPort({id:o.id,element:o.element,nodeId:t,direction:o.direction});return this}updateNode(e,t){if(this.graphStore.getNode(e)===void 0)throw new P("failed to update non existing node");return this.graphStore.updateNode(e,t??{}),this}removeNode(e){if(this.graphStore.getNode(e)===void 0)throw new P("failed to remove non existing node");return this.graphStore.removeNode(e),this}markPort(e){const t=this.portIdGenerator.create(e.id);if(this.graphStore.getPort(t)!==void 0)throw new P("failed to add port with existing id");if(this.graphStore.getNode(e.nodeId)===void 0)throw new P("failed to mark port for nonexistent node");return this.graphStore.addPort({id:t,element:e.element,nodeId:e.nodeId,direction:e.direction??this.params.ports.direction}),this}updatePort(e,t){if(this.graphStore.getPort(e)===void 0)throw new P("failed to update nonexistent port");return this.graphStore.updatePort(e,t??{}),this}unmarkPort(e){if(this.graphStore.getPort(e)===void 0)throw new P("failed to unmark non existing port");return this.graphStore.removePort(e),this}addEdge(e){const t=this.edgeIdGenerator.create(e.id);if(this.graphStore.getEdge(t)!==void 0)throw new P("failed to add edge with existing id");if(this.graphStore.getPort(e.from)===void 0)throw new P("failed to add edge from nonexistent port");if(this.graphStore.getPort(e.to)===void 0)throw new P("failed to add edge to nonexistent port");return this.graphStore.addEdge({id:t,from:e.from,to:e.to,shape:e.shape??this.params.edges.shapeFactory(t),priority:e.priority??this.params.edges.priorityFn()}),this}updateEdge(e,t){if(this.graphStore.getEdge(e)===void 0)throw new P("failed to update nonexistent edge");return this.graphStore.updateEdge(e,t??{}),this}removeEdge(e){if(this.graphStore.getEdge(e)===void 0)throw new P("failed to remove nonexistent 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.destroyed\|\|(this.clear(),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.htmlView.destroy(),this.destroyed=!0)}}class ke{constructor(){s(this,"singleToMultiMap",new Map);s(this,"multiToSingleMap",new Map)}addRecord(e,t){const o=this.singleToMultiMap.get(e);o===void 0?this.singleToMultiMap.set(e,new Set([t])):o.add(t),this.multiToSingleMap.set(t,e)}getMultiBySingle(e){const t=this.singleToMultiMap.get(e)??new Set;return Array.from(t.values())}removeByMulti(e){const t=this.multiToSingleMap.get(e),o=this.singleToMultiMap.get(t);o.delete(e),o.size===0&&this.singleToMultiMap.delete(t),this.multiToSingleMap.delete(e)}getByMulti(e){return this.multiToSingleMap.get(e)}removeBySingle(e){this.singleToMultiMap.get(e).forEach(o=>{this.multiToSingleMap.delete(o)}),this.singleToMultiMap.delete(e)}clear(){this.singleToMultiMap.clear(),this.multiToSingleMap.clear()}forEachSingle(e){this.singleToMultiMap.forEach((t,o)=>{e(o)})}hasSingle(e){return this.singleToMultiMap.get(e)!==void 0}hasMulti(e){return this.multiToSingleMap.get(e)!==void 0}}class ae{constructor(){s(this,"nodes",new Map);s(this,"ports",new Map);s(this,"edges",new Map);s(this,"nodesElementsMap",new Map);s(this,"incomingEdges",new Map);s(this,"outcomingEdges",new Map);s(this,"cycleEdges",new Map);s(this,"elementPorts",new ke);s(this,"afterNodeAddedEmitter");s(this,"onAfterNodeAdded");s(this,"afterNodeUpdatedEmitter");s(this,"onAfterNodeUpdated");s(this,"afterNodePriorityUpdatedEmitter");s(this,"onAfterNodePriorityUpdated");s(this,"beforeNodeRemovedEmitter");s(this,"onBeforeNodeRemoved");s(this,"afterPortAddedEmitter");s(this,"onAfterPortAdded");s(this,"afterPortUpdatedEmitter");s(this,"onAfterPortUpdated");s(this,"beforePortRemovedEmitter");s(this,"onBeforePortRemoved");s(this,"afterEdgeAddedEmitter");s(this,"onAfterEdgeAdded");s(this,"afterEdgeShapeUpdatedEmitter");s(this,"onAfterEdgeShapeUpdated");s(this,"afterEdgeUpdatedEmitter");s(this,"onAfterEdgeUpdated");s(this,"afterEdgePriorityUpdatedEmitter");s(this,"onAfterEdgePriorityUpdated");s(this,"beforeEdgeRemovedEmitter");s(this,"onBeforeEdgeRemoved");s(this,"beforeClearEmitter");s(this,"onBeforeClear");[this.afterNodeAddedEmitter,this.onAfterNodeAdded]=x(),[this.afterNodeUpdatedEmitter,this.onAfterNodeUpdated]=x(),[this.afterNodePriorityUpdatedEmitter,this.onAfterNodePriorityUpdated]=x(),[this.beforeNodeRemovedEmitter,this.onBeforeNodeRemoved]=x(),[this.afterPortAddedEmitter,this.onAfterPortAdded]=x(),[this.afterPortUpdatedEmitter,this.onAfterPortUpdated]=x(),[this.beforePortRemovedEmitter,this.onBeforePortRemoved]=x(),[this.afterEdgeAddedEmitter,this.onAfterEdgeAdded]=x(),[this.afterEdgeShapeUpdatedEmitter,this.onAfterEdgeShapeUpdated]=x(),[this.afterEdgeUpdatedEmitter,this.onAfterEdgeUpdated]=x(),[this.afterEdgePriorityUpdatedEmitter,this.onAfterEdgePriorityUpdated]=x(),[this.beforeEdgeRemovedEmitter,this.onBeforeEdgeRemoved]=x(),[this.beforeClearEmitter,this.onBeforeClear]=x()}addNode(e){const t=new Map,o={element:e.element,payload:{x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority},ports:t};this.nodes.set(e.id,o),this.nodesElementsMap.set(e.element,e.id),this.afterNodeAddedEmitter.emit(e.id)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(e){return this.nodes.get(e)}getElementNodeId(e){return this.nodesElementsMap.get(e)}updateNode(e,t){const o=this.nodes.get(e).payload;o.x=t.x??o.x,o.y=t.y??o.y,o.centerFn=t.centerFn??o.centerFn,t.priority!==void 0&&(o.priority=t.priority,this.afterNodePriorityUpdatedEmitter.emit(e)),this.afterNodeUpdatedEmitter.emit(e)}removeNode(e){this.beforeNodeRemovedEmitter.emit(e);const t=this.nodes.get(e);this.nodesElementsMap.delete(t.element),this.nodes.delete(e)}addPort(e){this.ports.set(e.id,{element:e.element,payload:{direction:e.direction},nodeId:e.nodeId}),this.elementPorts.addRecord(e.element,e.id),this.cycleEdges.set(e.id,new Set),this.incomingEdges.set(e.id,new Set),this.outcomingEdges.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,t){const o=this.ports.get(e).payload;o.direction=t.direction??o.direction,this.afterPortUpdatedEmitter.emit(e)}getAllPortIds(){return Array.from(this.ports.keys())}getElementPortIds(e){return this.elementPorts.getMultiBySingle(e)}getNodePortIds(e){const t=this.nodes.get(e);if(t!==void 0)return Array.from(t.ports.keys())}removePort(e){const t=this.ports.get(e).nodeId;this.beforePortRemovedEmitter.emit(e),this.nodes.get(t).ports.delete(e),this.ports.delete(e),this.elementPorts.removeByMulti(e)}addEdge(e){this.addEdgeInternal(e),this.afterEdgeAddedEmitter.emit(e.id)}updateEdge(e,t){if(t.from!==void 0\|\|t.to!==void 0){const i=this.edges.get(e),n=i.payload;this.removeEdgeInternal(e),this.addEdgeInternal({id:e,from:t.from??i.from,to:t.to??i.to,shape:n.shape,priority:n.priority})}const o=this.edges.get(e);t.shape!==void 0&&(o.payload.shape=t.shape,this.afterEdgeShapeUpdatedEmitter.emit(e)),t.priority!==void 0&&(o.payload.priority=t.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.incomingEdges.clear(),this.outcomingEdges.clear(),this.cycleEdges.clear(),this.elementPorts.clear(),this.nodesElementsMap.clear(),this.edges.clear(),this.ports.clear(),this.nodes.clear()}getPortIncomingEdgeIds(e){return Array.from(this.incomingEdges.get(e))}getPortOutgoingEdgeIds(e){return Array.from(this.outcomingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutgoingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const t=Array.from(this.nodes.get(e).ports.keys());let o=[];return t.forEach(i=>{o=[...o,...this.getPortIncomingEdgeIds(i)]}),o}getNodeOutgoingEdgeIds(e){const t=Array.from(this.nodes.get(e).ports.keys());let o=[];return t.forEach(i=>{o=[...o,...this.getPortOutgoingEdgeIds(i)]}),o}getNodeCycleEdgeIds(e){const t=Array.from(this.nodes.get(e).ports.keys());let o=[];return t.forEach(i=>{o=[...o,...this.getPortCycleEdgeIds(i)]}),o}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutgoingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}addEdgeInternal(e){this.edges.set(e.id,{from:e.from,to:e.to,payload:{shape:e.shape,priority:e.priority}}),e.from!==e.to?(this.outcomingEdges.get(e.from).add(e.id),this.incomingEdges.get(e.to).add(e.id)):this.cycleEdges.get(e.from).add(e.id)}removeEdgeInternal(e){const t=this.edges.get(e),o=t.from,i=t.to;this.cycleEdges.get(o).delete(e),this.cycleEdges.get(i).delete(e),this.incomingEdges.get(o).delete(e),this.incomingEdges.get(i).delete(e),this.outcomingEdges.get(o).delete(e),this.outcomingEdges.get(i).delete(e),this.edges.delete(e)}}const he=r=>({scale:1/r.scale,x:-r.x/r.scale,y:-r.y/r.scale}),de={scale:1,x:0,y:0};class ze{constructor(){s(this,"viewportMatrix",de);s(this,"contentMatrix",de);s(this,"afterUpdateEmitter");s(this,"onAfterUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=x()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=he(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(e){this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=he(this.contentMatrix),this.afterUpdateEmitter.emit()}}class H{constructor(e){s(this,"elementToNodeId",new Map);s(this,"nodesResizeObserver");s(this,"onAfterNodeAdded",e=>{const t=this.canvas.graph.getNode(e);this.elementToNodeId.set(t.element,e),this.nodesResizeObserver.observe(t.element)});s(this,"onBeforeNodeRemoved",e=>{const t=this.canvas.graph.getNode(e);this.elementToNodeId.delete(t.element),this.nodesResizeObserver.unobserve(t.element)});s(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});this.canvas=e,this.nodesResizeObserver=new ResizeObserver(t=>{t.forEach(o=>{const i=o.target;this.handleNodeResize(i)})}),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 H(e)}handleNodeResize(e){const t=this.elementToNodeId.get(e);this.canvas.updateNode(t)}}const Xe=(r,e,t)=>{const{x:o,y:i,width:n,height:a}=r.getBoundingClientRect();return e>=o&&e<=o+n&&t>=i&&t<=i+a},Ye=(r,e,t)=>e>=0&&e<=r.innerWidth&&t>=0&&t<=r.innerHeight,C=(r,e,t,o)=>Xe(e,t,o)&&Ye(r,t,o),U=(r,e)=>{e!==null?r.style.cursor=e:r.style.removeProperty("cursor")},B=r=>{const e=document.createElement("div");return{id:r.overlayId,element:e,x:r.portCoords.x,y:r.portCoords.y,ports:[{id:r.overlayId,element:e,direction:r.portDirection}]}},He=(r,e)=>{let t=e,o=null;for(;t!==null&&(o=r.getElementPortIds(t)[0]??null,o===null);)t=t.parentElement;return o},ce=(r,e)=>{const t=document.elementsFromPoint(e.x,e.y);for(const o of t){const i=He(r,o);if(i!==null)return i}return null};var D=(r=>(r.Static="static",r.Dragging="dragging",r.Edge="edge",r))(D\|\|{});const ge=(r,e)=>({x:r/2,y:e/2}),u={x:0,y:0},m=(r,e,t)=>({x:e.xr.x-e.yr.y+((1-e.x)t.x+e.yt.y),y:e.yr.x+e.xr.y+((1-e.x)t.y-e.yt.x)}),le=(r,e)=>{const t={x:r.x+r.width/2,y:r.y+r.height/2},o={x:e.x+e.width/2,y:e.y+e.height/2},i=Math.min(t.x,o.x),n=Math.min(t.y,o.y),a=Math.abs(o.x-t.x),h=Math.abs(o.y-t.y),d=t.x<=o.x?1:-1,c=t.y<=o.y?1:-1;return{x:i,y:n,width:a,height:h,flipX:d,flipY:c}},F=(r,e,t,o)=>({x:er.x+(1-e)/2o.x,y:tr.y+(1-t)/2o.y});class je{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.to;this.midpoint={x:t.x/2,y:t.y/2};const o=m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u),i=m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to),n={x:o.x+this.params.sourceDirection.xthis.params.curvature,y:o.y+this.params.sourceDirection.ythis.params.curvature},a={x:i.x-this.params.targetDirection.xthis.params.curvature,y:i.y-this.params.targetDirection.ythis.params.curvature},h=`M ${o.x} ${o.y} C ${n.x} ${n.y}, ${a.x} ${a.y}, ${i.x} ${i.y}`,d=this.params.hasSourceArrow?"":`M ${u.x} ${u.y} L ${o.x} ${o.y} `,c=this.params.hasTargetArrow?"":` M ${i.x} ${i.y} L ${this.params.to.x} ${this.params.to.y}`;this.path=`${d}${h}${c}`}}class Ge{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,o=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength,n=Math.cos(this.params.detourDirection)this.params.detourDistance,a=Math.sin(this.params.detourDirection)this.params.detourDistance,h=nthis.params.flipX,d=athis.params.flipY,c=m({x:i,y:u.y},this.params.sourceDirection,u),l={x:c.x+h,y:c.y+d},g=m({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),p={x:g.x+h,y:g.y+d},f={x:(l.x+p.x)/2,y:(l.y+p.y)/2},y={x:c.x+this.params.curvaturethis.params.sourceDirection.x,y:c.y+this.params.curvaturethis.params.sourceDirection.y},E={x:g.x-this.params.curvaturethis.params.targetDirection.x,y:g.y-this.params.curvaturethis.params.targetDirection.y},b={x:c.x+h,y:c.y+d},S={x:g.x+h,y:g.y+d};this.path=[`M ${t.x} ${t.y}`,`L ${c.x} ${c.y}`,`C ${y.x} ${y.y} ${b.x} ${b.y} ${f.x} ${f.y}`,`C ${S.x} ${S.y} ${E.x} ${E.y} ${g.x} ${g.y}`,`L ${o.x} ${o.y}`].join(" "),this.midpoint=F(f,e.flipX,e.flipY,e.to)}}const j=Object.freeze({edgeColor:"--edge-color"}),ue=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","svg");return e.style.pointerEvents="none",e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.overflow="visible",e.style.setProperty(j.edgeColor,r),e},pe=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke",`var(${j.edgeColor})`),e.setAttribute("stroke-width",`${r}`),e.setAttribute("fill","none"),e},O=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","path");return r.setAttribute("fill",`var(${j.edgeColor})`),r},we=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.transformOrigin="50% 50%",r},fe=(r,e)=>{r.style.transform=`translate(${e.x}px, ${e.y}px)`,r.style.width=`${Math.max(e.width,1)}px`,r.style.height=`${Math.max(e.height,1)}px`},M=(r,e)=>{const t=[];if(r.length>0&&t.push(`M ${r[0].x} ${r[0].y}`),r.length===2&&t.push(`L ${r[1].x} ${r[1].y}`),r.length>2){const o=r.length-1;let i=0,n=0,a=0;r.forEach((h,d)=>{let c=0,l=0,g=0;const p=d>0,f=d<o,y=p&&f;if(p&&(c=-i,l=-n,g=a),f){const I=r[d+1];i=I.x-h.x,n=I.y-h.y,a=Math.sqrt(ii+nn)}const b=a!==0?Math.min((y?e:0)/a,d<o-1?.5:1):0,S=y?{x:h.x+ib,y:h.y+nb}:h,N=g!==0?Math.min((y?e:0)/g,d>1?.5:1):0,R=y?{x:h.x+cN,y:h.y+lN}:h;d>0&&t.push(`L ${R.x} ${R.y}`),y&&t.push(`C ${h.x} ${h.y} ${h.x} ${h.y} ${S.x} ${S.y}`)})}return t.join(" ")};class Ke{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.to;this.midpoint={x:t.x/2,y:t.y/2};const o=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=n-this.params.roundness,h=m({x:a,y:u.y},this.params.sourceDirection,u),d=m({x:this.params.to.x-a,y:this.params.to.y},this.params.targetDirection,this.params.to),c=Math.max((h.x+d.x)/2,n),l=this.params.to.y/2,g={x:this.params.flipX>0?c:-n,y:h.y},p={x:g.x,y:l},f={x:this.params.flipX>0?this.params.to.x-c:this.params.to.x+n,y:d.y},y={x:f.x,y:l};this.path=M([o,h,g,p,y,f,d,i],this.params.roundness)}}class Ze{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,o=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=m({x:i,y:u.y},this.params.sourceDirection,u),a=Math.cos(this.params.detourDirection)this.params.detourDistance,h=Math.sin(this.params.detourDirection)this.params.detourDistance,d=athis.params.flipX,c=hthis.params.flipY,l={x:n.x+d,y:n.y+c},g=m({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),p={x:g.x+d,y:g.y+c},f={x:(l.x+p.x)/2,y:(l.y+p.y)/2};this.midpoint=F(f,e.flipX,e.flipY,e.to),this.path=M([t,n,l,p,g,o],this.params.roundness)}}class Je{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.to;this.midpoint={x:t.x/2,y:t.y/2};const o=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=m({x:n,y:u.y},this.params.sourceDirection,u),h=m({x:this.params.to.x-n,y:this.params.to.y},this.params.targetDirection,this.params.to);this.path=M([o,a,h,i],this.params.roundness)}}class Qe{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.to;this.midpoint={x:t.x/2,y:t.y/2};const o=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,i=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,n=this.params.arrowLength+this.params.arrowOffset,a=n-this.params.roundness,h=m({x:a,y:u.y},this.params.sourceDirection,u),d=m({x:this.params.to.x-a,y:this.params.to.y},this.params.targetDirection,this.params.to),c=Math.max((h.y+d.y)/2,n),l=this.params.to.x/2,g={x:h.x,y:this.params.flipY>0?c:-n},p={x:l,y:g.y},f={x:d.x,y:this.params.flipY>0?this.params.to.y-c:this.params.to.y+n},y={x:l,y:f.y};this.path=M([o,h,g,p,y,f,d,i],this.params.roundness)}}class G{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.arrowOffset,o=this.params.side,i=this.params.arrowLength+t,n=i+2o,h=[{x:this.params.arrowLength,y:u.y},{x:i,y:u.y},{x:i,y:this.params.side},{x:n,y:this.params.side},{x:n,y:-this.params.side},{x:i,y:-this.params.side},{x:i,y:u.y},{x:this.params.arrowLength,y:u.y}].map(c=>m(c,this.params.sourceDirection,u)),d=`M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;this.path=`${this.params.hasSourceArrow\|\|this.params.hasTargetArrow?"":d}${M(h,this.params.roundness)}`,this.midpoint={x:(h[3].x+h[4].x)/2,y:(h[3].y+h[4].y)/2}}}class _e{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.smallRadius,o=this.params.radius,i=t+o,n=to/i,a=Math.sqrt(ii-tt),h=at/i,d=a+o+this.params.arrowLength,c=this.params.arrowLength+h,g=[{x:this.params.arrowLength,y:u.y},{x:c,y:n},{x:c,y:-n},{x:d,y:0}].map(y=>m(y,this.params.sourceDirection,u)),p=[`M ${g[0].x} ${g[0].y}`,`A ${t} ${t} 0 0 1 ${g[1].x} ${g[1].y}`,`A ${o} ${o} 0 1 0 ${g[2].x} ${g[2].y}`,`A ${t} ${t} 0 0 1 ${g[0].x} ${g[0].y}`].join(" "),f=`M 0 0 L ${g[0].x} ${g[0].y} `;this.path=`${this.params.hasSourceArrow\|\|this.params.hasTargetArrow?"":f}${p}`,this.midpoint=g[3]}}class qe{constructor(e){s(this,"path");s(this,"midpoint");s(this,"diagonalDistance");this.params=e;const t=this.params.to;if(this.midpoint={x:t.x/2,y:t.y/2},this.diagonalDistance=Math.sqrt(this.params.to.xthis.params.to.x+this.params.to.ythis.params.to.y),Math.sqrt(this.params.to.xthis.params.to.x+this.params.to.ythis.params.to.y)===0){this.path="";return}const i=this.createDirectLinePoint({offset:this.params.sourceOffset,hasArrow:this.params.hasSourceArrow,flip:1,shift:u}),n=this.createDirectLinePoint({offset:this.params.targetOffset,hasArrow:this.params.hasTargetArrow,flip:-1,shift:this.params.to});this.path=`M ${i.x} ${i.y} L ${n.x} ${n.y}`}createDirectLinePoint(e){const t=e.hasArrow?this.params.arrowLength:0,o=e.offset+t,i=e.flipo/this.diagonalDistance;return{x:this.params.to.xi+e.shift.x,y:this.params.to.yi+e.shift.y}}}class et{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,o=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=m({x:i,y:u.y},this.params.sourceDirection,u),a=m({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),h=this.params.detourDistance>0?1:-1,d=this.params.to.y/2,c=d+Math.abs(this.params.detourDistance),l=d+cthis.params.flipYh,g={x:(n.x+a.x)/2,y:l};this.midpoint=F(g,e.flipX,e.flipY,e.to),this.path=M([t,n,{x:n.x,y:l},{x:a.x,y:l},a,o],this.params.roundness)}}class tt{constructor(e){s(this,"path");s(this,"midpoint");this.params=e;const t=this.params.hasSourceArrow?m({x:this.params.arrowLength,y:u.y},this.params.sourceDirection,u):u,o=this.params.hasTargetArrow?m({x:this.params.to.x-this.params.arrowLength,y:this.params.to.y},this.params.targetDirection,this.params.to):this.params.to,i=this.params.arrowLength+this.params.arrowOffset,n=m({x:i,y:u.y},this.params.sourceDirection,u),a=m({x:this.params.to.x-i,y:this.params.to.y},this.params.targetDirection,this.params.to),h=this.params.detourDistance>0?1:-1,d=this.params.to.x/2,c=d+Math.abs(this.params.detourDistance),l=d+cthis.params.flipXh,g={x:l,y:(n.y+a.y)/2};this.midpoint=F(g,e.flipX,e.flipY,e.to),this.path=M([t,n,{x:l,y:n.y},{x:l,y:a.y},a,o],this.params.roundness)}}const w=Object.freeze({color:"#777777",width:1,arrowLength:20,polygonArrowRadius:4,circleArrowRadius:8,wedgeArrowSmallRadius:20,wedgeArrowRadius:100,wedgeArrowAngle:Math.PI/12,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90,interactiveWidth:10,preOffset:0}),ye=(r,e,t)=>({x:eMath.cos(r),y:tMath.sin(r)});class W{constructor(e){s(this,"svg");s(this,"group",we());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"onAfterRender");s(this,"afterRenderEmitter");s(this,"arrowRenderer");this.params=e,[this.afterRenderEmitter,this.onAfterRender]=x(),this.arrowRenderer=this.params.arrowRenderer,this.svg=ue(e.color),this.svg.appendChild(this.group),this.line=pe(e.width),this.group.appendChild(this.line),e.hasSourceArrow&&(this.sourceArrow=O(),this.group.appendChild(this.sourceArrow)),e.hasTargetArrow&&(this.targetArrow=O(),this.group.appendChild(this.targetArrow))}render(e){const{x:t,y:o,width:i,height:n,flipX:a,flipY:h}=le(e.from,e.to);fe(this.svg,{x:t,y:o,width:i,height:n}),this.group.style.transform=`scale(${a}, ${h})`;const d=ye(e.from.direction,a,h),c=ye(e.to.direction,a,h),l={x:i,y:n};let g={x:-c.x,y:-c.y},p;e.category===T.PortCycle?(p=this.params.createCyclePath,g=d):e.category===T.NodeCycle?p=this.params.createDetourPath:p=this.params.createLinePath;const f=p(d,c,l,a,h);this.line.setAttribute("d",f.path);let y=null;this.sourceArrow&&(y=this.arrowRenderer({direction:d,shift:u,arrowLength:this.params.arrowLength}),this.sourceArrow.setAttribute("d",y));let E=null;this.targetArrow&&(E=this.arrowRenderer({direction:g,shift:l,arrowLength:this.params.arrowLength}),this.targetArrow.setAttribute("d",E)),this.afterRenderEmitter.emit({edgePath:f,sourceArrowPath:y,targetArrowPath:E})}}const rt=r=>e=>{const o=[u,{x:e.arrowLength,y:r.radius},{x:e.arrowLength,y:-r.radius}].map(h=>m(h,e.direction,u)).map(h=>({x:h.x+e.shift.x,y:h.y+e.shift.y})),i=`M ${o[0].x} ${o[0].y}`,n=`L ${o[1].x} ${o[1].y}`,a=`L ${o[2].x} ${o[2].y}`;return`${i} ${n} ${a} Z`},ot=r=>e=>{const t=r.radius,o=e.arrowLength,i=(oo+2ot)/(2t),n=i+t,a=o+t-t(o+t)/n,h=ti/n,c=[u,{x:a,y:-h},{x:a,y:h}].map(y=>m(y,e.direction,u)).map(y=>({x:y.x+e.shift.x,y:y.y+e.shift.y})),l=`M ${c[0].x} ${c[0].y}`,g=`A ${i} ${i} 0 0 0 ${c[1].x} ${c[1].y}`,p=`A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`,f=`A ${i} ${i} 0 0 0 ${c[0].x} ${c[0].y}`;return`${l} ${g} ${p} ${f}`},st=r=>e=>{const t=r.smallRadius,o=r.radius,i=m({x:e.arrowLength,y:0},{x:Math.cos(r.angle),y:Math.sin(r.angle)},{x:e.arrowLength+r.smallRadius,y:0}),a=[u,{x:i.x,y:-i.y},i].map(g=>m(g,e.direction,u)).map(g=>({x:g.x+e.shift.x,y:g.y+e.shift.y})),h=`M ${a[0].x} ${a[0].y}`,d=`A ${o} ${o} 0 0 1 ${a[1].x} ${a[1].y}`,c=`A ${t} ${t} 0 0 1 ${a[2].x} ${a[2].y}`,l=`A ${o} ${o} 0 0 1 ${a[0].x} ${a[0].y}`;return`${h} ${d} ${c} ${l}`},$=r=>{if(typeof r=="function")return r;switch(r.type){case"triangle":return rt({radius:r.radius??w.polygonArrowRadius});case"arc":return ot({radius:r.radius??w.circleArrowRadius});default:return st({smallRadius:r.smallRadius??w.wedgeArrowSmallRadius,angle:r.angle??w.wedgeArrowAngle,radius:r.radius??w.wedgeArrowRadius})}};class me{constructor(e){s(this,"svg");s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"onAfterRender");s(this,"arrowLength");s(this,"curvature");s(this,"portCycleRadius");s(this,"portCycleSmallRadius");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");s(this,"pathShape");s(this,"createCyclePath",e=>new _e({sourceDirection:e,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createDetourPath",(e,t,o,i,n)=>new Ge({to:o,sourceDirection:e,targetDirection:t,flipX:i,flipY:n,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createLinePath",(e,t,o)=>new je({to:o,sourceDirection:e,targetDirection:t,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,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,this.pathShape=new W({color:(e==null?void 0:e.color)??w.color,width:(e==null?void 0:e.width)??w.width,arrowRenderer:$((e==null?void 0:e.arrowRenderer)??{}),arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(e){this.pathShape.render(e)}}class ve{constructor(e){s(this,"svg");s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"onAfterRender");s(this,"arrowLength");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");s(this,"pathShape");s(this,"createCyclePath",e=>new G({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createDetourPath",(e,t,o,i,n)=>new et({to:o,sourceDirection:e,targetDirection:t,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createLinePath",(e,t,o,i)=>new Ke({to:o,sourceDirection:e,targetDirection:t,flipX:i,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const t=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(t,this.arrowOffset,this.cycleSquareSide/2),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,this.pathShape=new W({color:(e==null?void 0:e.color)??w.color,width:(e==null?void 0:e.width)??w.width,arrowRenderer:$((e==null?void 0:e.arrowRenderer)??{}),arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(e){this.pathShape.render(e)}}class Ae{constructor(e){s(this,"svg");s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"onAfterRender");s(this,"arrowLength");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDirection");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");s(this,"pathShape");s(this,"createCyclePath",e=>new G({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createDetourPath",(e,t,o,i,n)=>new Ze({to:o,sourceDirection:e,targetDirection:t,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createLinePath",(e,t,o)=>new Je({to:o,sourceDirection:e,targetDirection:t,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const t=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(t,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,this.pathShape=new W({color:(e==null?void 0:e.color)??w.color,width:(e==null?void 0:e.width)??w.width,arrowRenderer:$((e==null?void 0:e.arrowRenderer)??{}),arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(e){this.pathShape.render(e)}}class Ee{constructor(e){s(this,"svg");s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"onAfterRender");s(this,"arrowLength");s(this,"arrowOffset");s(this,"roundness");s(this,"cycleSquareSide");s(this,"detourDistance");s(this,"hasSourceArrow");s(this,"hasTargetArrow");s(this,"pathShape");s(this,"createCyclePath",e=>new G({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createDetourPath",(e,t,o,i,n)=>new tt({to:o,sourceDirection:e,targetDirection:t,flipX:i,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));s(this,"createLinePath",(e,t,o,i,n)=>new Qe({to:o,sourceDirection:e,targetDirection:t,flipY:n,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowOffset=(e==null?void 0:e.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??w.cycleSquareSide;const t=(e==null?void 0:e.roundness)??w.roundness;this.roundness=Math.min(t,this.arrowOffset,this.cycleSquareSide/2),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,this.pathShape=new W({color:(e==null?void 0:e.color)??w.color,width:(e==null?void 0:e.width)??w.width,arrowRenderer:$((e==null?void 0:e.arrowRenderer)??{}),arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow,createCyclePath:this.createCyclePath,createDetourPath:this.createDetourPath,createLinePath:this.createLinePath}),this.svg=this.pathShape.svg,this.group=this.pathShape.group,this.line=this.pathShape.line,this.sourceArrow=this.pathShape.sourceArrow,this.targetArrow=this.pathShape.targetArrow,this.onAfterRender=this.pathShape.onAfterRender}render(e){this.pathShape.render(e)}}class K{constructor(e){s(this,"svg");s(this,"group",we());s(this,"line");s(this,"sourceArrow",null);s(this,"targetArrow",null);s(this,"color");s(this,"width");s(this,"arrowLength");s(this,"sourceOffset");s(this,"targetOffset");s(this,"onAfterRender");s(this,"afterRenderEmitter");s(this,"arrowRenderer");[this.afterRenderEmitter,this.onAfterRender]=x(),this.color=(e==null?void 0:e.color)??w.color,this.width=(e==null?void 0:e.width)??w.width,this.arrowLength=(e==null?void 0:e.arrowLength)??w.arrowLength,this.arrowRenderer=$((e==null?void 0:e.arrowRenderer)??{}),this.sourceOffset=(e==null?void 0:e.sourceOffset)??w.preOffset,this.targetOffset=(e==null?void 0:e.targetOffset)??w.preOffset,this.svg=ue(this.color),this.svg.appendChild(this.group),this.line=pe(this.width),this.group.appendChild(this.line),e!=null&&e.hasSourceArrow&&(this.sourceArrow=O(),this.group.appendChild(this.sourceArrow)),e!=null&&e.hasTargetArrow&&(this.targetArrow=O(),this.group.appendChild(this.targetArrow))}render(e){const{x:t,y:o,width:i,height:n,flipX:a,flipY:h}=le(e.from,e.to);fe(this.svg,{x:t,y:o,width:i,height:n}),this.group.style.transform=`scale(${a}, ${h})`;const d={x:i,y:n},c=new qe({to:d,sourceOffset:this.sourceOffset,targetOffset:this.targetOffset,hasSourceArrow:this.sourceArrow!==null,hasTargetArrow:this.targetArrow!==null,arrowLength:this.arrowLength});this.line.setAttribute("d",c.path);let l=null,g=null;const p=c.diagonalDistance;if(p===0)this.sourceArrow!==null&&(l="",this.sourceArrow.setAttribute("d",l)),this.targetArrow!==null&&(g="",this.targetArrow.setAttribute("d",g));else{const f={x:d.x/p,y:d.y/p};if(this.sourceArrow){const y={x:f.xthis.sourceOffset,y:f.ythis.sourceOffset};l=this.arrowRenderer({direction:f,shift:y,arrowLength:this.arrowLength}),this.sourceArrow.setAttribute("d",l)}if(this.targetArrow){const y={x:f.xthis.targetOffset,y:f.ythis.targetOffset};g=this.arrowRenderer({direction:{x:-f.x,y:-f.y},shift:{x:d.x-y.x,y:d.y-y.y},arrowLength:this.arrowLength}),this.targetArrow.setAttribute("d",g)}}this.afterRenderEmitter.emit({edgePath:c,sourceArrowPath:l,targetArrowPath:g})}}const it=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","g");return r.style.pointerEvents="auto",r.style.cursor="pointer",r},nt=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke","transparent"),e.setAttribute("stroke-width",`${r}`),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e},xe=r=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke-linejoin","round"),e.setAttribute("stroke-width",`${r}`),e.setAttribute("fill","transparent"),e.setAttribute("stroke","transparent"),e};class Se extends Error{constructor(e){super(e),this.name="InteractiveEdgeError"}}class Z{constructor(e,t){s(this,"svg");s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"handle",it());s(this,"onAfterRender");s(this,"interactiveLine");s(this,"interactiveSourceArrow",null);s(this,"interactiveTargetArrow",null);if(this.baseEdge=e,e instanceof Z)throw new Se("interactive edge can be configured only once");this.svg=this.baseEdge.svg,this.group=this.baseEdge.group,this.line=this.baseEdge.line,this.sourceArrow=this.baseEdge.sourceArrow,this.targetArrow=this.baseEdge.targetArrow,this.onAfterRender=this.baseEdge.onAfterRender;const o=(t==null?void 0:t.distance)??w.interactiveWidth;this.interactiveLine=nt(o),this.handle.appendChild(this.interactiveLine),this.sourceArrow&&(this.interactiveSourceArrow=xe(o),this.handle.appendChild(this.interactiveSourceArrow)),this.targetArrow&&(this.interactiveTargetArrow=xe(o),this.handle.appendChild(this.interactiveTargetArrow)),this.group.appendChild(this.handle),this.baseEdge.onAfterRender.subscribe(i=>{this.interactiveLine.setAttribute("d",i.edgePath.path),this.interactiveSourceArrow&&this.interactiveSourceArrow.setAttribute("d",i.sourceArrowPath),this.interactiveTargetArrow&&this.interactiveTargetArrow.setAttribute("d",i.targetArrowPath)})}render(e){this.baseEdge.render(e)}}class at{constructor(e,t){s(this,"group");s(this,"line");s(this,"sourceArrow");s(this,"targetArrow");s(this,"onAfterRender");s(this,"svg");this.baseShape=e,this.midpointElement=t,this.svg=this.baseShape.svg,this.group=this.baseShape.group,this.line=this.baseShape.line,this.sourceArrow=this.baseShape.sourceArrow,this.targetArrow=this.baseShape.targetArrow,this.onAfterRender=this.baseShape.onAfterRender,this.svg.append(this.midpointElement),this.baseShape.onAfterRender.subscribe(o=>{const i=o.edgePath.midpoint,n=`translate(${i.x}px, ${i.y}px)`;this.midpointElement.style.setProperty("transform",n)})}render(e){this.baseShape.render(e)}}const Pe=(r,e)=>{const t=new ae,o=new se(t,e,r),i={nodes:{centerFn:ge,priorityFn:()=>0},edges:{shapeFactory:()=>new K,priorityFn:()=>0},ports:{direction:0}};return new ne(t,e,o,i)};class k{constructor(e,t,o,i){s(this,"onAfterPortMarked",e=>{const t=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortIds(t.element).length===1&&this.hookPortEvents(t.element)});s(this,"onBeforePortUnmarked",e=>{const t=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortIds(t.element).length===1&&this.unhookPortEvents(t.element)});s(this,"onPortMouseDown",e=>{if(!this.params.mouseDownEventVerifier(e))return;const t=e.currentTarget,o=this.canvas.graph.getElementPortIds(t)[0];this.params.onPortPointerDown(o,{x:e.clientX,y:e.clientY})&&(e.stopPropagation(),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}))});s(this,"onWindowMouseMove",e=>{if(!C(this.window,this.element,e.clientX,e.clientY)){this.stopMouseDrag();return}this.params.onPointerMove({x:e.clientX,y:e.clientY})});s(this,"onWindowMouseUp",e=>{this.params.mouseUpEventVerifier(e)&&(this.params.onPointerUp({x:e.clientX,y:e.clientY}),this.stopMouseDrag())});s(this,"onPortTouchStart",e=>{if(e.touches.length!==1)return;const t=e.touches[0],o=e.currentTarget,i=this.canvas.graph.getElementPortIds(o)[0];this.params.onPortPointerDown(i,{x:t.clientX,y:t.clientY})&&(e.stopPropagation(),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0}))});s(this,"onWindowTouchMove",e=>{const t=e.touches[0];if(!C(this.window,this.element,t.clientX,t.clientY)){this.stopTouchDrag();return}this.params.onPointerMove({x:t.clientX,y:t.clientY})});s(this,"onWindowTouchFinish",e=>{const t=e.changedTouches[0];this.params.onPointerUp({x:t.clientX,y:t.clientY}),this.stopTouchDrag()});s(this,"onBeforeClear",()=>{this.canvas.graph.getAllPortIds().forEach(e=>{const t=this.canvas.graph.getPort(e);this.unhookPortEvents(t.element)})});s(this,"onBeforeDestroy",()=>{this.params.onStopDrag(),this.removeWindowMouseListeners(),this.removeWindowTouchListeners()});this.canvas=e,this.element=t,this.window=o,this.params=i,this.canvas.graph.onAfterPortMarked.subscribe(this.onAfterPortMarked),this.canvas.graph.onBeforePortUnmarked.subscribe(this.onBeforePortUnmarked),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,t,o,i){new k(e,t,o,i)}hookPortEvents(e){e.addEventListener("mousedown",this.onPortMouseDown,{passive:!0}),e.addEventListener("touchstart",this.onPortTouchStart,{passive:!0})}unhookPortEvents(e){e.removeEventListener("mousedown",this.onPortMouseDown),e.removeEventListener("touchstart",this.onPortTouchStart)}stopMouseDrag(){this.params.onStopDrag(),this.removeWindowMouseListeners()}stopTouchDrag(){this.params.onStopDrag(),this.removeWindowTouchListeners()}removeWindowMouseListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}removeWindowTouchListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class J{constructor(e,t,o,i){s(this,"grabbedNode",null);s(this,"maxNodePriority",0);s(this,"graph");s(this,"onAfterNodeAdded",e=>{this.updateMaxNodePriority(e);const t=this.graph.getNode(e);t.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),t.element.addEventListener("touchstart",this.onTouchStart,{passive:!0})});s(this,"onAfterNodeUpdated",e=>{this.updateMaxNodePriority(e)});s(this,"onBeforeNodeRemoved",e=>{const t=this.graph.getNode(e);t.element.removeEventListener("mousedown",this.onMouseDown),t.element.removeEventListener("touchstart",this.onTouchStart)});s(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners()});s(this,"onBeforeClear",()=>{this.canvas.graph.getAllNodeIds().forEach(e=>{const t=this.canvas.graph.getNode(e);t.element.removeEventListener("mousedown",this.onMouseDown),t.element.removeEventListener("touchstart",this.onTouchStart)}),this.maxNodePriority=0});s(this,"onMouseDown",e=>{if(!this.params.mouseDownEventVerifier(e))return;const t=e.currentTarget,o=this.graph.getElementNodeId(t),i=this.graph.getNode(o);if(!this.params.nodeDragVerifier(o))return;e.stopPropagation();const a=this.calculateContentPoint({x:e.clientX,y:e.clientY});this.grabbedNode={nodeId:o,dx:a.x-i.x,dy:a.y-i.y},U(this.element,this.params.dragCursor),this.moveNodeOnTop(o),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0})});s(this,"onTouchStart",e=>{if(e.touches.length!==1)return;e.stopPropagation();const t=e.touches[0],o=e.currentTarget,i=this.canvas.graph.getElementNodeId(o),n=this.graph.getNode(i);if(!this.params.nodeDragVerifier({nodeId:i,element:n.element,x:n.x,y:n.y}))return;const h=this.calculateContentPoint({x:t.clientX,y:t.clientY});this.grabbedNode={nodeId:i,dx:h.x-n.x,dy:h.y-n.y},this.moveNodeOnTop(i),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0})});s(this,"onWindowMouseMove",e=>{if(!C(this.window,this.element,e.clientX,e.clientY)){this.cancelMouseDrag();return}this.grabbedNode!==null&&this.moveNode(this.grabbedNode,{x:e.clientX,y:e.clientY})});s(this,"onWindowMouseUp",e=>{this.params.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});s(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const t=e.touches[0];if(!C(this.window,this.element,t.clientX,t.clientY)){this.cancelTouchDrag();return}this.grabbedNode!==null&&this.moveNode(this.grabbedNode,{x:t.clientX,y:t.clientY})});s(this,"onWindowTouchFinish",()=>{this.cancelTouchDrag()});this.canvas=e,this.element=t,this.window=o,this.params=i,this.graph=e.graph,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,t,o,i){new J(e,t,o,i)}moveNode(e,t){if(this.graph.getNode(e.nodeId)===null)return;const i=this.calculateContentPoint(t),n={x:i.x-e.dx,y:i.y-e.dy},a=this.adjustNodeCoords(n);this.canvas.updateNode(e.nodeId,{x:a.x,y:a.y}),this.params.onNodeDrag(e.nodeId)}moveNodeOnTop(e){if(this.params.moveOnTop){if(this.maxNodePriority++,this.params.moveEdgesOnTop){const t=this.maxNodePriority;this.maxNodePriority++,this.graph.getNodeAdjacentEdgeIds(e).forEach(i=>{this.canvas.updateEdge(i,{priority:t})})}this.canvas.updateNode(e,{priority:this.maxNodePriority})}}cancelMouseDrag(){this.grabbedNode!==null&&this.graph.getNode(this.grabbedNode.nodeId)!==null&&this.params.onNodeDragFinished(this.grabbedNode.nodeId),this.grabbedNode=null,U(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){if(this.grabbedNode!==null){const e=this.graph.getNode(this.grabbedNode.nodeId);e!==null&&this.params.onNodeDragFinished({nodeId:this.grabbedNode.nodeId,element:e.element,x:e.x,y:e.y})}this.grabbedNode=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 t=this.graph.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,t)}calculateContentPoint(e){const t=this.element.getBoundingClientRect(),o={x:e.x-t.x,y:e.y-t.y},i=this.canvas.viewport.getViewportMatrix();return A(i,o)}adjustNodeCoords(e){const t=this.params.gridSize;if(t!==null){const o=t/2;return{x:Math.floor((e.x+o)/t)t,y:Math.floor((e.y+o)/t)t}}return e}}const ht=(r,e,t)=>({scale:r.scale,x:r.x+r.scalee,y:r.y+r.scalet}),dt=(r,e,t,o)=>({scale:r.scalee,x:r.scale(1-e)t+r.x,y:r.scale(1-e)o+r.y}),z=r=>{const e=[],t=r.touches.length;for(let h=0;h<t;h++)e.push([r.touches[h].clientX,r.touches[h].clientY]);const o=e.reduce((h,d)=>[h[0]+d[0],h[1]+d[1]],[0,0]),i=[o[0]/t,o[1]/t],a=e.map(h=>[h[0]-i[0],h[1]-i[1]]).reduce((h,d)=>h+Math.sqrt(d[0]d[0]+d[1]d[1]),0);return{x:i[0],y:i[1],scale:a/t,touchesCnt:t,touches:e}};class X{constructor(e,t,o,i){s(this,"viewport");s(this,"prevTouches",null);s(this,"wheelFinishTimer",null);s(this,"transformInProgress",!1);s(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners()});s(this,"onMouseDown",e=>{this.element===null\|\|!this.params.mouseDownEventVerifier(e)\|\|(U(this.element,this.params.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.startRegisteredTransform())});s(this,"onWindowMouseMove",e=>{const t=C(this.window,this.element,e.clientX,e.clientY);if(this.element===null\|\|!t){this.stopMouseDrag();return}const o=-e.movementX,i=-e.movementY;this.moveViewport(o,i)});s(this,"onWindowMouseUp",e=>{this.element===null\|\|!this.params.mouseUpEventVerifier(e)\|\|this.stopMouseDrag()});s(this,"onWheelScroll",e=>{if(!this.params.mouseWheelEventVerifier(e))return;const{left:t,top:o}=this.element.getBoundingClientRect(),i=e.clientX-t,n=e.clientY-o,h=1/(e.deltaY<0?this.params.wheelSensitivity:1/this.params.wheelSensitivity);this.wheelFinishTimer===null&&this.params.onTransformStarted(),this.scaleViewport(h,i,n),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.transformInProgress\|\|this.params.onTransformFinished(),this.wheelFinishTimer=null},this.params.scaleWheelFinishTimeout)});s(this,"onTouchStart",e=>{if(this.prevTouches!==null){this.prevTouches=z(e);return}this.prevTouches=z(e),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0}),this.startRegisteredTransform()});s(this,"onWindowTouchMove",e=>{const t=z(e);if(!t.touches.every(i=>C(this.window,this.element,i[0],i[1]))){this.stopTouchDrag();return}if((t.touchesCnt===1\|\|t.touchesCnt===2)&&this.moveViewport(-(t.x-this.prevTouches.x),-(t.y-this.prevTouches.y)),t.touchesCnt===2){const{left:i,top:n}=this.element.getBoundingClientRect(),a=this.prevTouches.x-i,h=this.prevTouches.y-n,c=1/(t.scale/this.prevTouches.scale);this.scaleViewport(c,a,h)}this.prevTouches=t});s(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=z(e):this.stopTouchDrag()});s(this,"observer",new ResizeObserver(()=>{const e=this.viewport.getViewportMatrix(),{width:t,height:o}=this.element.getBoundingClientRect(),i=this.params.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:t,canvasHeight:o});this.params.onResizeTransformStarted(),this.canvas.patchViewportMatrix(i),this.params.onResizeTransformFinished()}));s(this,"preventWheelScaleListener",e=>{e.preventDefault()});this.canvas=e,this.element=t,this.window=o,this.params=i,this.element.addEventListener("wheel",this.preventWheelScaleListener,{passive:!1}),this.viewport=e.viewport,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),this.element.addEventListener("wheel",this.onWheelScroll,{passive:!0}),this.element.addEventListener("touchstart",this.onTouchStart,{passive:!0}),e.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,t,o,i){new X(e,t,o,i)}moveViewport(e,t){const o=this.viewport.getViewportMatrix(),i=ht(o,e,t),{width:n,height:a}=this.element.getBoundingClientRect(),h=this.params.transformPreprocessor({prevTransform:o,nextTransform:i,canvasWidth:n,canvasHeight:a});this.performTransform(h)}scaleViewport(e,t,o){const i=this.canvas.viewport.getViewportMatrix(),n=dt(i,e,t,o),{width:a,height:h}=this.element.getBoundingClientRect(),d=this.params.transformPreprocessor({prevTransform:i,nextTransform:n,canvasWidth:a,canvasHeight:h});this.performTransform(d)}stopMouseDrag(){U(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.params.onBeforeTransformChange(),this.canvas.patchViewportMatrix(e),this.params.onTransformChange()}startRegisteredTransform(){this.transformInProgress=!0,this.params.onTransformStarted()}finishRegisteredTransform(){this.transformInProgress=!1,this.params.onTransformFinished()}}class Q{constructor(e,t,o,i,n,a){s(this,"canvasResizeObserver");s(this,"nodeHorizontal");s(this,"nodeVertical");s(this,"viewport");s(this,"viewportWidth",0);s(this,"viewportHeight",0);s(this,"viewportMatrix");s(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});s(this,"updateLoadedArea",e=>{this.loadedArea={xFrom:e.x,xTo:e.x+e.width,yFrom:e.y,yTo:e.y+e.height}});s(this,"onAfterViewportUpdated",()=>{this.userTransformInProgress\|\|(this.viewportMatrix=this.viewport.getViewportMatrix(),this.loadAreaAroundViewport())});s(this,"userTransformInProgress",!1);this.canvas=e,this.element=t,this.window=o,this.trigger=n,this.params=a,this.nodeHorizontal=this.params.nodeVerticalRadius,this.nodeVertical=this.params.nodeHorizontalRadius,this.canvasResizeObserver=new ResizeObserver(d=>{const c=d[0];this.viewportWidth=c.contentRect.width,this.viewportHeight=c.contentRect.height,this.scheduleLoadAreaAroundViewport()}),this.viewport=e.viewport;const h={...i,onResizeTransformStarted:()=>{this.userTransformInProgress=!0,i.onResizeTransformStarted()},onResizeTransformFinished:()=>{this.userTransformInProgress=!1,i.onResizeTransformFinished()},onBeforeTransformChange:()=>{this.userTransformInProgress=!0,i.onBeforeTransformChange()},onTransformChange:()=>{this.userTransformInProgress=!1;const d=this.viewportMatrix;this.viewportMatrix=this.viewport.getViewportMatrix(),d.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),i.onTransformChange()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),i.onTransformFinished()}};X.configure(e,this.element,this.window,h),this.viewportMatrix=this.viewport.getViewportMatrix(),this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated)}static configure(e,t,o,i,n,a){new Q(e,t,o,i,n,a)}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const e=this.viewportWidththis.viewportMatrix.scale,t=this.viewportHeightthis.viewportMatrix.scale,o=this.viewportMatrix.x-this.nodeHorizontal,i=this.viewportMatrix.y-this.nodeVertical,n=this.viewportMatrix.x+e+this.nodeHorizontal,a=this.viewportMatrix.y+t+this.nodeVertical;this.loadedArea.xFrom<o&&this.loadedArea.xTo>n&&this.loadedArea.yFrom<i&&this.loadedArea.yTo>a\|\|this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const e=this.viewportWidththis.viewportMatrix.scale,t=this.viewportHeightthis.viewportMatrix.scale,o=this.viewportMatrix.x-e-this.nodeHorizontal,i=this.viewportMatrix.y-t-this.nodeVertical,n=3e+2this.nodeHorizontal,a=3t+2this.nodeVertical;this.trigger.emit({x:o,y:i,width:n,height:a})}}const ct=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.style.position="absolute",r.style.inset="0",r},gt=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","rect");return r.setAttribute("fill","url(#pattern)"),r},lt=()=>{const r=document.createElementNS("http://www.w3.org/2000/svg","pattern");return r.setAttribute("id","pattern"),r};class _{constructor(e,t,o){s(this,"svg",ct());s(this,"patternRenderingRectangle",gt());s(this,"pattern",lt());s(this,"patternContent");s(this,"tileWidth");s(this,"tileHeight");s(this,"halfTileWidth");s(this,"halfTileHeight");s(this,"maxViewportScale");s(this,"visible",!1);s(this,"resizeObserver",new ResizeObserver(e=>{const t=e[0],{width:o,height:i}=t.contentRect;this.svg.setAttribute("width",`${o}`),this.svg.setAttribute("height",`${i}`),this.patternRenderingRectangle.setAttribute("width",`${o}`),this.patternRenderingRectangle.setAttribute("height",`${i}`);const n=this.tileWidth/o,a=this.tileHeight/i;this.pattern.setAttribute("width",`${n}`),this.pattern.setAttribute("height",`${a}`)}));s(this,"onAfterTransformUpdated",()=>{const e=this.canvas.viewport.getContentMatrix(),t=e.x-this.halfTileWidthe.scale,o=e.y-this.halfTileHeighte.scale,i=`matrix(${e.scale}, 0, 0, ${e.scale}, ${t}, ${o})`;this.pattern.setAttribute("patternTransform",i),this.updateVisibility()});this.canvas=e,this.backgroundHost=o,this.tileWidth=t.tileWidth,this.tileHeight=t.tileHeight,this.halfTileWidth=this.tileWidth/2,this.halfTileHeight=this.tileHeight/2,this.patternContent=t.renderer,this.maxViewportScale=t.maxViewportScale;const i=`translate(${this.halfTileWidth}, ${this.halfTileHeight})`;this.patternContent.setAttribute("transform",i),this.pattern.appendChild(this.patternContent);const n=document.createElementNS("http://www.w3.org/2000/svg","defs");n.appendChild(this.pattern),this.svg.appendChild(n),this.svg.appendChild(this.patternRenderingRectangle),this.resizeObserver.observe(this.backgroundHost),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated),this.onAfterTransformUpdated()}static configure(e,t,o){new _(e,t,o)}updateVisibility(){const t=this.canvas.viewport.getViewportMatrix().scale>this.maxViewportScale;t&&this.visible?(this.visible=!1,this.backgroundHost.removeChild(this.svg)):!t&&!this.visible&&(this.visible=!0,this.backgroundHost.appendChild(this.svg))}}class q{constructor(e,t,o,i,n){s(this,"overlayCanvas");s(this,"staticPortId",null);s(this,"isTargetDragging",!0);s(this,"onEdgeCreated",e=>{this.params.onAfterEdgeCreated(e)});this.canvas=e,this.overlayLayer=t,this.viewportStore=o,this.window=i,this.params=n,this.overlayCanvas=Pe(this.overlayLayer,this.viewportStore),k.configure(this.canvas,this.overlayLayer,this.window,{mouseDownEventVerifier:this.params.mouseDownEventVerifier,mouseUpEventVerifier:this.params.mouseUpEventVerifier,onStopDrag:()=>{this.resetDragState()},onPortPointerDown:(a,h)=>{const d=this.params.connectionTypeResolver(a);return d===null?!1:(this.grabPort(a,h,d),!0)},onPointerMove:a=>{this.moveDraggingPort(a)},onPointerUp:a=>{this.tryCreateConnection(a)}})}static configure(e,t,o,i,n){new q(e,t,o,i,n)}grabPort(e,t,o){const i=this.canvas.graph.getPort(e);this.staticPortId=e;const n=i.element.getBoundingClientRect(),a=n.x+n.width/2,h=n.y+n.height/2,d=this.overlayLayer.getBoundingClientRect(),c=this.canvas.viewport.getViewportMatrix(),l=A(c,{x:a-d.x,y:h-d.y}),g=A(c,{x:t.x-d.x,y:t.y-d.y}),p={overlayId:D.Static,portCoords:l,portDirection:i.direction},f={overlayId:D.Dragging,portCoords:g,portDirection:this.params.dragPortDirection};this.isTargetDragging=o==="direct";const[y,E]=this.isTargetDragging?[p,f]:[f,p];this.overlayCanvas.addNode(B(y)),this.overlayCanvas.addNode(B(E)),this.overlayCanvas.addEdge({from:y.overlayId,to:E.overlayId,shape:this.params.edgeShapeFactory(D.Edge)})}resetDragState(){this.staticPortId=null,this.isTargetDragging=!0,this.overlayCanvas.clear()}tryCreateConnection(e){const t=ce(this.canvas.graph,e),o=this.staticPortId;if(t===null){this.params.onEdgeCreationInterrupted({staticPortId:o,isDirect:this.isTargetDragging});return}const i=this.isTargetDragging?o:t,n=this.isTargetDragging?t:o,a={from:i,to:n},h=this.params.connectionPreprocessor(a);h!==null?(this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated),this.canvas.addEdge(h),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)):this.params.onEdgeCreationPrevented(a)}moveDraggingPort(e){const t=this.overlayLayer.getBoundingClientRect(),o={x:e.x-t.x,y:e.y-t.y},i=this.canvas.viewport.getViewportMatrix(),n=A(i,o);this.overlayCanvas.updateNode(D.Dragging,{x:n.x,y:n.y})}}class ee{constructor(e,t,o,i,n){s(this,"overlayCanvas");s(this,"staticPortId",null);s(this,"isTargetDragging",!0);s(this,"draggingEdgePayload",null);s(this,"onEdgeReattached",e=>{this.params.onAfterEdgeReattached(e)});this.canvas=e,this.overlayLayer=t,this.viewportStore=o,this.window=i,this.params=n,this.overlayCanvas=Pe(this.overlayLayer,this.viewportStore),k.configure(this.canvas,this.overlayLayer,this.window,{mouseDownEventVerifier:this.params.mouseDownEventVerifier,mouseUpEventVerifier:this.params.mouseUpEventVerifier,onStopDrag:()=>{this.resetDragState()},onPortPointerDown:(a,h)=>this.tryStartEdgeDragging(a,h),onPointerMove:a=>{this.moveDraggingPort(a)},onPointerUp:a=>{this.tryCreateConnection(a)}})}static configure(e,t,o,i,n){new ee(e,t,o,i,n)}tryStartEdgeDragging(e,t){const o=this.params.draggingEdgeResolver(e);if(o===null)return!1;const i=this.canvas.graph.getEdge(o);if(i===null)return!1;const n=e===i.from,a=e===i.to,h=n?i.to:i.from;this.staticPortId=h,this.isTargetDragging=a;const d=this.canvas.graph.getPort(e),c=this.canvas.graph.getPort(h),l=c.element.getBoundingClientRect(),g={x:l.x+l.width/2,y:l.y+l.height/2},p=this.canvas.viewport.getViewportMatrix(),f=this.overlayLayer.getBoundingClientRect(),y=A(p,{x:g.x-f.x,y:g.y-f.y}),E=A(p,{x:t.x-f.x,y:t.y-f.y});this.draggingEdgePayload={id:o,from:i.from,to:i.to,shape:i.shape,priority:i.priority},this.canvas.removeEdge(o);const b={overlayId:D.Static,portCoords:y,portDirection:c.direction},S={overlayId:D.Dragging,portCoords:E,portDirection:d.direction},[V,N]=this.isTargetDragging?[b,S]:[S,b];this.overlayCanvas.addNode(B(V)),this.overlayCanvas.addNode(B(N));const R=this.params.draggingEdgeShapeFactory!==null?this.params.draggingEdgeShapeFactory(D.Edge):i.shape;return this.overlayCanvas.addEdge({id:D.Edge,from:V.overlayId,to:N.overlayId,shape:R}),!0}resetDragState(){this.draggingEdgePayload=null,this.staticPortId=null,this.isTargetDragging=!0,this.overlayCanvas.clear()}moveDraggingPort(e){const t=this.overlayLayer.getBoundingClientRect(),o={x:e.x-t.x,y:e.y-t.y},i=this.canvas.viewport.getViewportMatrix(),n=A(i,o);this.overlayCanvas.updateNode(D.Dragging,{x:n.x,y:n.y})}tryCreateConnection(e){const t=ce(this.canvas.graph,e);if(this.overlayCanvas.removeEdge(D.Edge),t===null){const d=this.draggingEdgePayload;this.params.onEdgeReattachInterrupted({id:d.id,from:d.from,to:d.to,shape:d.shape,priority:d.priority});return}const[o,i]=this.isTargetDragging?[this.staticPortId,t]:[t,this.staticPortId],n=this.draggingEdgePayload,a={id:n.id,from:o,to:i,shape:n.shape,priority:n.priority},h=this.params.connectionPreprocessor(a);if(h!==null)this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeReattached),this.canvas.addEdge(h),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeReattached);else{const d=this.draggingEdgePayload;this.params.onEdgeReattachPrevented({id:d.id,from:d.from,to:d.to,shape:d.shape,priority:d.priority})}}}const ut=()=>{const r=document.createElement("div");return r.style.width="100%",r.style.height="100%",r.style.position="relative",r},te=()=>{const r=document.createElement("div");return r.style.position="absolute",r.style.inset="0",r},be=()=>{const r=te();return r.style.pointerEvents="none",r};class pt{constructor(e){s(this,"background",te());s(this,"main",te());s(this,"overlayConnectablePorts",be());s(this,"overlayDraggableEdges",be());s(this,"host",ut());this.element=e,this.element.appendChild(this.host),this.host.appendChild(this.background),this.host.appendChild(this.main),this.host.appendChild(this.overlayConnectablePorts),this.host.appendChild(this.overlayDraggableEdges)}destroy(){this.host.removeChild(this.background),this.host.removeChild(this.main),this.host.removeChild(this.overlayConnectablePorts),this.host.removeChild(this.overlayDraggableEdges),this.element.removeChild(this.host)}}const re=r=>()=>r,Te=re(0),wt=()=>{let r=0;return()=>r++},ft=(r,e)=>{let t=Te,o=Te;const i=wt();return r==="incremental"&&(t=i),e==="incremental"&&(o=i),typeof r=="number"&&(t=re(r)),typeof e=="number"&&(o=re(e)),typeof r=="function"&&(t=r),typeof e=="function"&&(o=e),{nodesPriorityFn:t,edgesPriorityFn:o}},oe=r=>{if(typeof r=="function")return r;switch(r.type){case"straight":return()=>new Ae({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowOffset:r.arrowOffset,arrowRenderer:r.arrowRenderer,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance,detourDirection:r.detourDirection});case"horizontal":return()=>new ve({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowOffset:r.arrowOffset,arrowRenderer:r.arrowRenderer,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance});case"vertical":return()=>new Ee({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowOffset:r.arrowOffset,arrowRenderer:r.arrowRenderer,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleSquareSide:r.cycleSquareSide,roundness:r.roundness,detourDistance:r.detourDistance});case"direct":return()=>new K({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowRenderer:r.arrowRenderer,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,sourceOffset:r.sourceOffset,targetOffset:r.targetOffset});default:return()=>new me({color:r.color,width:r.width,arrowLength:r.arrowLength,arrowRenderer:r.arrowRenderer,hasSourceArrow:r.hasSourceArrow,hasTargetArrow:r.hasTargetArrow,cycleRadius:r.cycleRadius,smallCycleRadius:r.smallCycleRadius,curvature:r.curvature,detourDistance:r.detourDistance,detourDirection:r.detourDirection})}},yt=r=>{var t,o,i,n,a;const e=ft((t=r.nodes)==null?void 0:t.priority,(o=r.edges)==null?void 0:o.priority);return{nodes:{centerFn:((i=r.nodes)==null?void 0:i.centerFn)??ge,priorityFn:e.nodesPriorityFn},ports:{direction:((n=r.ports)==null?void 0:n.direction)??0},edges:{shapeFactory:oe(((a=r.edges)==null?void 0:a.shape)??{}),priorityFn:e.edgesPriorityFn}}},mt=r=>{var p,f,y,E,b;const e=((p=r.events)==null?void 0:p.onNodeDrag)??(()=>{}),t=r.nodeDragVerifier??(()=>!0),o=((f=r.events)==null?void 0:f.onNodeDragFinished)??(()=>{}),i=r.moveOnTop!==!1,n=r.moveEdgesOnTop!==!1&&i,a=(y=r.mouse)==null?void 0:y.dragCursor,h=a!==void 0?a:"grab",d=(E=r.mouse)==null?void 0:E.mouseDownEventVerifier,c=d!==void 0?d:S=>S.button===0,l=(b=r.mouse)==null?void 0:b.mouseUpEventVerifier,g=l!==void 0?l:S=>S.button===0;return{moveOnTop:i,moveEdgesOnTop:n,dragCursor:h,gridSize:r.gridSize??null,mouseDownEventVerifier:c,mouseUpEventVerifier:g,onNodeDrag:e,nodeDragVerifier:t,onNodeDragFinished:o}},vt=r=>{const e=r.minX!==null?r.minX:-1/0,t=r.maxX!==null?r.maxX:1/0,o=r.minY!==null?r.minY:-1/0,i=r.maxY!==null?r.maxY:1/0;return n=>{let a=n.nextTransform.x,h=n.nextTransform.y;a<e&&a<n.prevTransform.x&&(a=Math.min(n.prevTransform.x,e));const d=n.canvasWidthn.prevTransform.scale,c=t-d;a>c&&a>n.prevTransform.x&&(a=Math.max(n.prevTransform.x,c)),h<o&&h<n.prevTransform.y&&(h=Math.min(n.prevTransform.y,o));const l=n.canvasHeightn.prevTransform.scale,g=i-l;return h>g&&h>n.prevTransform.y&&(h=Math.max(n.prevTransform.y,g)),{scale:n.nextTransform.scale,x:a,y:h}}},At=r=>{const e=r.maxContentScale,t=r.minContentScale,o=e!==null?1/e:0,i=t!==null?1/t:1/0;return n=>{const a=n.prevTransform,h=n.nextTransform;let d=h.scale,c=h.x,l=h.y;if(h.scale>i&&h.scale>a.scale){d=Math.max(a.scale,i),c=a.x,l=a.y;const g=(d-a.scale)/(h.scale-a.scale);c=a.x+(h.x-a.x)g,l=a.y+(h.y-a.y)g}if(h.scale<o&&h.scale<a.scale){d=Math.min(a.scale,o),c=a.x,l=a.y;const g=(d-a.scale)/(h.scale-a.scale);c=a.x+(h.x-a.x)g,l=a.y+(h.y-a.y)*g}return{scale:d,x:c,y:l}}},Et=r=>e=>r.reduce((t,o)=>o({prevTransform:e.prevTransform,nextTransform:t,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),De=r=>{if(typeof r=="function")return r;switch(r.type){case"scale-limit":return At({minContentScale:r.minContentScale??0,maxContentScale:r.maxContentScale??1/0});case"shift-limit":return vt({minX:r.minX??-1/0,maxX:r.maxX??1/0,minY:r.minY??-1/0,maxY:r.maxY??1/0})}},Ne=r=>{var y,E,b,S,V,N,R,I,Re,Le,Ce,Ve;const e=(y=r==null?void 0:r.scale)==null?void 0:y.mouseWheelSensitivity,t=e!==void 0?e:1.2,o=r==null?void 0:r.transformPreprocessor;let i;o!==void 0?Array.isArray(o)?i=Et(o.map(L=>De(L))):i=De(o):i=L=>L.nextTransform;const n=((E=r==null?void 0:r.shift)==null?void 0:E.cursor)!==void 0?r.shift.cursor:"grab",a=((b=r==null?void 0:r.events)==null?void 0:b.onBeforeTransformChange)??(()=>{}),h=((S=r==null?void 0:r.events)==null?void 0:S.onTransformChange)??(()=>{}),d=(V=r==null?void 0:r.shift)==null?void 0:V.mouseDownEventVerifier,c=d!==void 0?d:L=>L.button===0,l=(N=r==null?void 0:r.shift)==null?void 0:N.mouseUpEventVerifier,g=l!==void 0?l:L=>L.button===0,p=(R=r==null?void 0:r.scale)==null?void 0:R.mouseWheelEventVerifier,f=p!==void 0?p:()=>!0;return{wheelSensitivity:t,onTransformStarted:((I=r==null?void 0:r.events)==null?void 0:I.onTransformStarted)??(()=>{}),onTransformFinished:((Re=r==null?void 0:r.events)==null?void 0:Re.onTransformFinished)??(()=>{}),onBeforeTransformChange:a,onTransformChange:h,transformPreprocessor:i,shiftCursor:n,mouseDownEventVerifier:c,mouseUpEventVerifier:g,mouseWheelEventVerifier:f,scaleWheelFinishTimeout:((Le=r==null?void 0:r.scale)==null?void 0:Le.wheelFinishTimeout)??500,onResizeTransformStarted:((Ce=r==null?void 0:r.events)==null?void 0:Ce.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((Ve=r==null?void 0:r.events)==null?void 0:Ve.onResizeTransformFinished)??(()=>{})}},xt=(r,e)=>{const t=document.createElementNS("http://www.w3.org/2000/svg","circle");return t.setAttribute("cx","0"),t.setAttribute("cy","0"),t.setAttribute("r",`${r}`),t.setAttribute("fill",`${e}`),t},St=r=>r instanceof SVGElement?r:xt((r==null?void 0:r.radius)??1.5,(r==null?void 0:r.color)??"#d8d8d8"),Pt=r=>{const e=r.tileDimensions,t=(e==null?void 0:e.width)??25,o=(e==null?void 0:e.height)??25,i=St(r.renderer??{});return{tileWidth:t,tileHeight:o,renderer:i,maxViewportScale:r.maxViewportScale??10}},bt=(r,e,t)=>{var c,l,g;const o=()=>"direct",i=p=>p,n=p=>p.button===0,a=()=>{},h=()=>{},d=()=>{};return{connectionTypeResolver:r.connectionTypeResolver??o,connectionPreprocessor:r.connectionPreprocessor??i,mouseDownEventVerifier:r.mouseDownEventVerifier??n,mouseUpEventVerifier:r.mouseUpEventVerifier??n,onAfterEdgeCreated:((c=r.events)==null?void 0:c.onAfterEdgeCreated)??a,onEdgeCreationInterrupted:((l=r.events)==null?void 0:l.onEdgeCreationInterrupted)??d,onEdgeCreationPrevented:((g=r.events)==null?void 0:g.onEdgeCreationPrevented)??h,dragPortDirection:r.dragPortDirection??t,edgeShapeFactory:r.edgeShape!==void 0?oe(r.edgeShape):e}},Tt=(r,e)=>{var c,l,g;const t=p=>p,o=p=>p.button===0&&p.ctrlKey,i=p=>p.button===0,n=p=>{const f=e.getPortAdjacentEdgeIds(p);return f.length>0?f[f.length-1]:null},a=()=>{},h=()=>{},d=()=>{};return{connectionPreprocessor:r.connectionPreprocessor??t,mouseDownEventVerifier:r.mouseDownEventVerifier??o,mouseUpEventVerifier:r.mouseUpEventVerifier??i,draggingEdgeResolver:r.draggingEdgeResolver??n,draggingEdgeShapeFactory:r.draggingEdgeShape!==void 0?oe(r.draggingEdgeShape):null,onAfterEdgeReattached:((c=r.events)==null?void 0:c.onAfterEdgeReattached)??a,onEdgeReattachInterrupted:((l=r.events)==null?void 0:l.onEdgeReattachInterrupted)??d,onEdgeReattachPrevented:((g=r.events)==null?void 0:g.onEdgeReattachPrevented)??h}},Dt=r=>({nodeVerticalRadius:r.nodeContainingRadius.vertical,nodeHorizontalRadius:r.nodeContainingRadius.horizontal}),Nt=r=>{var e,t;return{onAfterNodeDetached:((e=r==null?void 0:r.events)==null?void 0:e.onAfterNodeDetached)??(()=>{}),onBeforeNodeAttached:((t=r==null?void 0:r.events)==null?void 0:t.onBeforeNodeAttached)??(()=>{})}};class Me extends Error{constructor(){super(...arguments);s(this,"name","CanvasBuilderError")}}class Mt{constructor(e){s(this,"used",!1);s(this,"canvasDefaults",{});s(this,"dragConfig",{});s(this,"transformConfig",{});s(this,"backgroundConfig",{});s(this,"connectablePortsConfig",{});s(this,"draggableEdgesConfig",{});s(this,"virtualScrollConfig");s(this,"hasDraggableNode",!1);s(this,"hasTransformableViewport",!1);s(this,"hasNodeResizeReactiveEdges",!1);s(this,"hasBackground",!1);s(this,"hasUserConnectablePorts",!1);s(this,"hasUserDraggableEdges",!1);s(this,"boxRenderingTrigger",new ie);s(this,"graphStore",new ae);s(this,"viewportStore",new ze);s(this,"window",window);this.element=e}setDefaults(e){return this.canvasDefaults=e,this}enableUserDraggableNodes(e){return this.hasDraggableNode=!0,this.dragConfig=e??{},this}enableUserTransformableViewport(e){return this.hasTransformableViewport=!0,this.transformConfig=e??{},this}enableNodeResizeReactiveEdges(){return this.hasNodeResizeReactiveEdges=!0,this}enableVirtualScroll(e){return this.virtualScrollConfig=e,this}enableBackground(e){return this.hasBackground=!0,this.backgroundConfig=e??{},this}enableUserConnectablePorts(e){return this.hasUserConnectablePorts=!0,this.connectablePortsConfig=e??{},this}enableUserDraggableEdges(e){return this.hasUserDraggableEdges=!0,this.draggableEdgesConfig=e??{},this}build(){if(this.used)throw new Me("CanvasBuilder is a single use object");this.used=!0;const e=new pt(this.element);let t=new se(this.graphStore,this.viewportStore,e.main);this.virtualScrollConfig!==void 0&&(t=new Fe(t,this.graphStore,this.boxRenderingTrigger,Nt(this.virtualScrollConfig)));const o=yt(this.canvasDefaults),i=new ne(this.graphStore,this.viewportStore,t,o);if(this.hasBackground&&_.configure(i,Pt(this.backgroundConfig),e.background),this.hasNodeResizeReactiveEdges&&H.configure(i),this.hasDraggableNode&&J.configure(i,e.main,this.window,mt(this.dragConfig)),this.hasUserConnectablePorts){const a=bt(this.connectablePortsConfig,o.edges.shapeFactory,o.ports.direction);q.configure(i,e.overlayConnectablePorts,this.viewportStore,this.window,a)}if(this.hasUserDraggableEdges){const a=Tt(this.draggableEdgesConfig,i.graph);ee.configure(i,e.overlayDraggableEdges,this.viewportStore,this.window,a)}this.virtualScrollConfig!==void 0?Q.configure(i,e.main,this.window,Ne(this.transformConfig),this.boxRenderingTrigger,Dt(this.virtualScrollConfig)):this.hasTransformableViewport&&X.configure(i,e.main,this.window,Ne(this.transformConfig));const n=()=>{e.destroy(),i.onBeforeDestroy.unsubscribe(n)};return i.onBeforeDestroy.subscribe(n),i}}v.BezierEdgeShape=me,v.CanvasBuilder=Mt,v.CanvasBuilderError=Me,v.CanvasError=P,v.DirectEdgeShape=K,v.HorizontalEdgeShape=ve,v.InteractiveEdgeError=Se,v.InteractiveEdgeShape=Z,v.MidpointEdgeShape=at,v.StraightEdgeShape=Ae,v.VerticalEdgeShape=Ee,Object.defineProperty(v,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": "4.1.0",
+  "version": "5.0.0",
   "type": "module",
   "main": "dist/html-graph.js",
   "types": "dist/html-graph.d.ts",