@html-graph/html-graph 3.9.0 → 3.10.0

package/dist/html-graph.umd.cjs

@@ -1 +1 @@
-(function(v,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(v=typeof globalThis<"u"?globalThis:v||self,T(v.HtmlGraph={}))})(this,function(v){"use strict";var lt=Object.defineProperty;var ut=(v,T,L)=>T in v?lt(v,T,{enumerable:!0,configurable:!0,writable:!0,value:L}):v[T]=L;var r=(v,T,L)=>ut(v,typeof T!="symbol"?T+"":T,L);const T=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t},L=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},Pe=t=>{t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden"},D=(t,e)=>({x:t.scale*e.x+t.x,y:t.scale*e.y+t.y});class q{constructor(e,o,i){r(this,"host",L());r(this,"container",T());r(this,"edgeIdToElementMap",new Map);r(this,"applyTransform",()=>{const e=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`});this.graphStore=e,this.viewportStore=o,this.element=i,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(e){const o=this.graphStore.getNode(e);Pe(o.element),this.container.appendChild(o.element),this.updateNodePosition(e),this.updateNodePriority(e),o.element.style.visibility="visible"}detachNode(e){const o=this.graphStore.getNode(e);this.container.removeChild(o.element)}attachEdge(e){const o=this.graphStore.getEdge(e).shape.svg;this.edgeIdToElementMap.set(e,o),this.container.appendChild(o),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,o)=>{this.detachEdge(o)}),this.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 o=this.graphStore.getNode(e),{width:i,height:s}=o.element.getBoundingClientRect(),h=this.viewportStore.getViewportMatrix().scale,n=o.centerFn(i,s),d=o.x-h*n.x,c=o.y-h*n.y;o.element.style.transform=`translate(${d}px, ${c}px)`}updateNodePriority(e){const o=this.graphStore.getNode(e);o.element.style.zIndex=`${o.priority}`}updateEdgeShape(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o);const i=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,i.shape.svg),this.container.appendChild(i.shape.svg)}renderEdge(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from),s=this.graphStore.getPort(o.to),h=i.element.getBoundingClientRect(),n=s.element.getBoundingClientRect(),d=this.host.getBoundingClientRect(),c=this.viewportStore.getViewportMatrix(),a=this.createEdgeRenderPort(o.from,i,h,d,c),l=this.createEdgeRenderPort(o.to,s,n,d,c);o.shape.render({from:a,to:l})}updateEdgePriority(e){const o=this.graphStore.getEdge(e);o.shape.svg.style.zIndex=`${o.priority}`}createEdgeRenderPort(e,o,i,s,h){const n={x:i.left-s.left,y:i.top-s.top},d=D(h,n);return{x:d.x,y:d.y,width:i.width*h.scale,height:i.height*h.scale,direction:o.direction,portId:e,nodeId:o.nodeId}}}class me{constructor(e){r(this,"xFrom",1/0);r(this,"yFrom",1/0);r(this,"xTo",1/0);r(this,"yTo",1/0);this.graphStore=e}setRenderingBox(e){this.xFrom=e.x,this.xTo=e.x+e.width,this.yFrom=e.y,this.yTo=e.y+e.height}hasNode(e){const o=this.graphStore.getNode(e);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId,h=this.graphStore.getNode(i),n=this.graphStore.getNode(s),d=Math.min(h.x,n.x),c=Math.max(h.x,n.x),a=Math.min(h.y,n.y),l=Math.max(h.y,n.y);return d<=this.xTo&&c>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class Ne{constructor(e,o,i){r(this,"attachedNodes",new Set);r(this,"attachedEdges",new Set);r(this,"renderingBox");r(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const o=new Set,i=new Set,s=new Set,h=new Set;this.graphStore.getAllNodeIds().forEach(n=>{const d=this.renderingBox.hasNode(n),c=this.attachedNodes.has(n);d&&!c?o.add(n):!d&&c&&i.add(n)}),this.graphStore.getAllEdgeIds().forEach(n=>{const d=this.renderingBox.hasEdge(n),c=this.attachedEdges.has(n),a=this.graphStore.getEdge(n),l=this.graphStore.getPort(a.from).nodeId,w=this.graphStore.getPort(a.to).nodeId;d&&(this.renderingBox.hasNode(l)||(o.add(l),i.delete(l)),this.renderingBox.hasNode(w)||(o.add(w),i.delete(w))),d&&!c?s.add(n):!d&&c&&h.add(n)}),h.forEach(n=>{this.handleDetachEdge(n)}),i.forEach(n=>{this.handleDetachNode(n)}),o.forEach(n=>{this.attachedNodes.has(n)||this.handleAttachNode(n)}),s.forEach(n=>{this.handleAttachEdge(n)})});this.htmlView=e,this.graphStore=o,this.trigger=i,this.renderingBox=new me(this.graphStore),this.trigger.subscribe(this.updateViewport)}attachNode(e){this.renderingBox.hasNode(e)&&this.handleAttachNode(e)}detachNode(e){this.attachedNodes.has(e)&&this.handleDetachNode(e)}attachEdge(e){this.renderingBox.hasEdge(e)&&this.attachEdgeEntities(e)}detachEdge(e){this.attachedEdges.has(e)&&this.handleDetachEdge(e)}updateNodePosition(e){this.attachedNodes.has(e)?this.htmlView.updateNodePosition(e):this.renderingBox.hasNode(e)&&(this.handleAttachNode(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(e){this.attachedNodes.has(e)&&this.htmlView.updateNodePriority(e)}updateEdgeShape(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgeShape(e)}renderEdge(e){this.attachedEdges.has(e)&&this.htmlView.renderEdge(e)}updateEdgePriority(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgePriority(e)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId;this.attachedNodes.has(i)||this.handleAttachNode(i),this.attachedNodes.has(s)||this.handleAttachNode(s),this.handleAttachEdge(e)}handleAttachNode(e){this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class O{constructor(){r(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(o=>{o(e)})}}const S=()=>{const t=new O;return[t,t]};class De{constructor(e){r(this,"onBeforeUpdated");r(this,"onAfterUpdated");this.viewportStore=e,this.onBeforeUpdated=this.viewportStore.onBeforeUpdated,this.onAfterUpdated=this.viewportStore.onAfterUpdated}getViewportMatrix(){return{...this.viewportStore.getViewportMatrix()}}getContentMatrix(){return{...this.viewportStore.getContentMatrix()}}}class Me{constructor(e){r(this,"onAfterNodeAdded");r(this,"onAfterNodeUpdated");r(this,"onAfterNodePriorityUpdated");r(this,"onBeforeNodeRemoved");r(this,"onAfterPortMarked");r(this,"onAfterPortUpdated");r(this,"onBeforePortUnmarked");r(this,"onAfterEdgeAdded");r(this,"onAfterEdgeShapeUpdated");r(this,"onAfterEdgeUpdated");r(this,"onAfterEdgePriorityUpdated");r(this,"onBeforeEdgeRemoved");r(this,"onBeforeClear");this.graphStore=e,this.onAfterNodeAdded=this.graphStore.onAfterNodeAdded,this.onAfterNodeUpdated=this.graphStore.onAfterNodeUpdated,this.onAfterNodePriorityUpdated=this.graphStore.onAfterNodePriorityUpdated,this.onBeforeNodeRemoved=this.graphStore.onBeforeNodeRemoved,this.onAfterPortMarked=this.graphStore.onAfterPortAdded,this.onAfterPortUpdated=this.graphStore.onAfterPortUpdated,this.onBeforePortUnmarked=this.graphStore.onBeforePortRemoved,this.onAfterEdgeAdded=this.graphStore.onAfterEdgeAdded,this.onAfterEdgeShapeUpdated=this.graphStore.onAfterEdgeShapeUpdated,this.onAfterEdgeUpdated=this.graphStore.onAfterEdgeUpdated,this.onAfterEdgePriorityUpdated=this.graphStore.onAfterEdgePriorityUpdated,this.onBeforeEdgeRemoved=this.graphStore.onBeforeEdgeRemoved,this.onBeforeClear=this.graphStore.onBeforeClear}getNode(e){const o=this.graphStore.getNode(e);return o===void 0?null:{element:o.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getElementNodeId(e){return this.graphStore.getElementNodeId(e)??null}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const o=this.graphStore.getPort(e);return o===void 0?null:{element:o.element,direction:o.direction,nodeId:o.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)??null}getElementPortsIds(e){return[...this.graphStore.getElementPortsIds(e)]}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const o=this.graphStore.getEdge(e);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(e)}}class k{constructor(e){r(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 b extends Error{constructor(){super(...arguments);r(this,"name","HtmlGraphError")}}class ee{constructor(e,o,i,s,h){r(this,"graph");r(this,"viewport");r(this,"nodeIdGenerator",new k(e=>this.graph.getNode(e)!==null));r(this,"portIdGenerator",new k(e=>this.graph.getPort(e)!==null));r(this,"edgeIdGenerator",new k(e=>this.graph.getEdge(e)!==null));r(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});r(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodePosition(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(i=>{this.htmlView.renderEdge(i)})});r(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});r(this,"onBeforeNodeRemoved",e=>{this.graphStore.getNodePortIds(e).forEach(o=>{this.unmarkPort(o)}),this.htmlView.detachNode(e)});r(this,"onAfterPortUpdated",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(i=>{this.htmlView.renderEdge(i)})});r(this,"onBeforePortUnmarked",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.removeEdge(o)})});r(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});r(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});r(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});r(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});r(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});r(this,"onBeforeClear",()=>{this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this.htmlView.clear()});r(this,"onBeforeDestroyEmitter");r(this,"onBeforeDestroy");this.element=e,this.graphStore=o,this.viewportStore=i,this.htmlView=s,this.defaults=h,this.graph=new Me(this.graphStore),this.viewport=new De(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(e){const o=this.nodeIdGenerator.create(e.id);if(this.graph.getNode(o)!==null)throw new b("failed to add node with existing id");if(this.graphStore.getElementNodeId(e.element)!==void 0)throw new b("failed to add node with html element already in use by another node");if(this.graphStore.addNode({id:o,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.defaults.nodes.centerFn,priority:e.priority??this.defaults.nodes.priorityFn()}),e.ports!==void 0)for(const i of e.ports)this.markPort({id:i.id,element:i.element,nodeId:o,direction:i.direction});return this}updateNode(e,o){if(this.graph.getNode(e)===null)throw new b("failed to update non existing node");return this.graphStore.updateNode(e,o??{}),this}removeNode(e){if(this.graph.getNode(e)===null)throw new b("failed to remove non existing node");return this.graphStore.removeNode(e),this}markPort(e){const o=this.portIdGenerator.create(e.id);if(this.graph.getPort(o)!==null)throw new b("failed to add port with existing id");if(this.graph.getNode(e.nodeId)===null)throw new b("failed to mark port for nonexistent node");return this.graphStore.addPort({id:o,element:e.element,nodeId:e.nodeId,direction:e.direction??this.defaults.ports.direction}),this}updatePort(e,o){if(this.graph.getPort(e)===null)throw new b("failed to update nonexistent port");return this.graphStore.updatePort(e,o??{}),this}unmarkPort(e){if(this.graph.getPort(e)===null)throw new b("failed to unmark non existing port");return this.graphStore.removePort(e),this}addEdge(e){const o=this.edgeIdGenerator.create(e.id);if(this.graph.getEdge(o)!==null)throw new b("failed to add edge with existing id");if(this.graph.getPort(e.from)===null)throw new b("failed to add edge from nonexistent port");if(this.graph.getPort(e.to)===null)throw new b("failed to add edge to nonexistent port");return this.graphStore.addEdge({id:o,from:e.from,to:e.to,shape:e.shape??this.defaults.edges.shapeFactory(o),priority:e.priority??this.defaults.edges.priorityFn()}),this}updateEdge(e,o){if(this.graph.getEdge(e)===null)throw new b("failed to update nonexistent edge");return this.graphStore.updateEdge(e,o??{}),this}removeEdge(e){if(this.graph.getEdge(e)===null)throw new b("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.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()}}class Le{constructor(){r(this,"singleToMultiMap",new Map);r(this,"multiToSingleMap",new Map)}addRecord(e,o){const i=this.singleToMultiMap.get(e);i===void 0?this.singleToMultiMap.set(e,new Set([o])):i.add(o),this.multiToSingleMap.set(o,e)}getMultiBySingle(e){const o=this.singleToMultiMap.get(e)??new Set;return Array.from(o.values())}removeByMulti(e){const o=this.multiToSingleMap.get(e),i=this.singleToMultiMap.get(o);i.delete(e),i.size===0&&this.singleToMultiMap.delete(o),this.multiToSingleMap.delete(e)}getByMulti(e){return this.multiToSingleMap.get(e)}removeBySingle(e){this.singleToMultiMap.get(e).forEach(i=>{this.multiToSingleMap.delete(i)}),this.singleToMultiMap.delete(e)}clear(){this.singleToMultiMap.clear(),this.multiToSingleMap.clear()}forEachSingle(e){this.singleToMultiMap.forEach((o,i)=>{e(i)})}hasSingle(e){return this.singleToMultiMap.get(e)!==void 0}hasMulti(e){return this.multiToSingleMap.get(e)!==void 0}}class te{constructor(){r(this,"nodes",new Map);r(this,"ports",new Map);r(this,"edges",new Map);r(this,"nodesElementsMap",new Map);r(this,"incomingEdges",new Map);r(this,"outcomingEdges",new Map);r(this,"cycleEdges",new Map);r(this,"elementPorts",new Le);r(this,"afterNodeAddedEmitter");r(this,"onAfterNodeAdded");r(this,"afterNodeUpdatedEmitter");r(this,"onAfterNodeUpdated");r(this,"afterNodePriorityUpdatedEmitter");r(this,"onAfterNodePriorityUpdated");r(this,"beforeNodeRemovedEmitter");r(this,"onBeforeNodeRemoved");r(this,"afterPortAddedEmitter");r(this,"onAfterPortAdded");r(this,"afterPortUpdatedEmitter");r(this,"onAfterPortUpdated");r(this,"beforePortRemovedEmitter");r(this,"onBeforePortRemoved");r(this,"afterEdgeAddedEmitter");r(this,"onAfterEdgeAdded");r(this,"afterEdgeShapeUpdatedEmitter");r(this,"onAfterEdgeShapeUpdated");r(this,"afterEdgeUpdatedEmitter");r(this,"onAfterEdgeUpdated");r(this,"afterEdgePriorityUpdatedEmitter");r(this,"onAfterEdgePriorityUpdated");r(this,"beforeEdgeRemovedEmitter");r(this,"onBeforeEdgeRemoved");r(this,"beforeClearEmitter");r(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(e){const o=new Map,i={element:e.element,x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority,ports:o};this.nodes.set(e.id,i),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,o){const i=this.nodes.get(e);i.x=o.x??i.x,i.y=o.y??i.y,i.centerFn=o.centerFn??i.centerFn,o.priority!==void 0&&(i.priority=o.priority,this.afterNodePriorityUpdatedEmitter.emit(e)),this.afterNodeUpdatedEmitter.emit(e)}removeNode(e){this.beforeNodeRemovedEmitter.emit(e);const o=this.nodes.get(e);this.nodesElementsMap.delete(o.element),this.nodes.delete(e)}addPort(e){this.ports.set(e.id,{element:e.element,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,o){const i=this.ports.get(e);i.direction=o.direction??i.direction,this.afterPortUpdatedEmitter.emit(e)}getAllPortIds(){return Array.from(this.ports.keys())}getElementPortsIds(e){return this.elementPorts.getMultiBySingle(e)}getNodePortIds(e){const o=this.nodes.get(e);if(o!==void 0)return Array.from(o.ports.keys())}removePort(e){const o=this.ports.get(e).nodeId;this.beforePortRemovedEmitter.emit(e),this.nodes.get(o).ports.delete(e),this.ports.delete(e),this.elementPorts.removeByMulti(e)}addEdge(e){this.addEdgeInternal(e),this.afterEdgeAddedEmitter.emit(e.id)}updateEdge(e,o){if(o.from!==void 0||o.to!==void 0){const s=this.edges.get(e);this.removeEdgeInternal(e),this.addEdgeInternal({id:e,from:o.from??s.from,to:o.to??s.to,shape:s.shape,priority:s.priority})}const i=this.edges.get(e);o.shape!==void 0&&(i.shape=o.shape,this.afterEdgeShapeUpdatedEmitter.emit(e)),o.priority!==void 0&&(i.priority=o.priority,this.afterEdgePriorityUpdatedEmitter.emit(e)),this.afterEdgeUpdatedEmitter.emit(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){this.beforeEdgeRemovedEmitter.emit(e),this.removeEdgeInternal(e)}clear(){this.beforeClearEmitter.emit(),this.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))}getPortOutcomingEdgeIds(e){return Array.from(this.outcomingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortIncomingEdgeIds(s)]}),i}getNodeOutcomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortOutcomingEdgeIds(s)]}),i}getNodeCycleEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortCycleEdgeIds(s)]}),i}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}addEdgeInternal(e){this.edges.set(e.id,{from:e.from,to:e.to,shape:e.shape,priority:e.priority}),e.from!==e.to?(this.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 o=this.edges.get(e),i=o.from,s=o.to;this.cycleEdges.get(i).delete(e),this.cycleEdges.get(s).delete(e),this.incomingEdges.get(i).delete(e),this.incomingEdges.get(s).delete(e),this.outcomingEdges.get(i).delete(e),this.outcomingEdges.get(s).delete(e),this.edges.delete(e)}}const oe=t=>({scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}),re={scale:1,x:0,y:0};class Ve{constructor(){r(this,"viewportMatrix",re);r(this,"contentMatrix",re);r(this,"afterUpdateEmitter");r(this,"onAfterUpdated");r(this,"beforeUpdateEmitter");r(this,"onBeforeUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=S(),[this.beforeUpdateEmitter,this.onBeforeUpdated]=S()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.beforeUpdateEmitter.emit(),this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=oe(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(e){this.beforeUpdateEmitter.emit(),this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=oe(this.contentMatrix),this.afterUpdateEmitter.emit()}}class z{constructor(e){r(this,"elementToNodeId",new Map);r(this,"nodesResizeObserver");r(this,"onAfterNodeAdded",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.set(o.element,e),this.nodesResizeObserver.observe(o.element)});r(this,"onBeforeNodeRemoved",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.delete(o.element),this.nodesResizeObserver.unobserve(o.element)});r(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});r(this,"onBeforeDestroy",()=>{this.canvas.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});this.canvas=e,this.nodesResizeObserver=new ResizeObserver(o=>{o.forEach(i=>{const s=i.target;this.handleNodeResize(s)})}),this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e){new z(e)}handleNodeResize(e){const o=this.elementToNodeId.get(e);this.canvas.updateNode(o)}}const Re=t=>{var y,E,A,p,x,P;const e=((y=t==null?void 0:t.events)==null?void 0:y.onNodeDrag)??(()=>{}),o=((E=t==null?void 0:t.events)==null?void 0:E.onBeforeNodeDrag)??(()=>!0),i=((A=t==null?void 0:t.events)==null?void 0:A.onNodeDragFinished)??(()=>{}),s=(t==null?void 0:t.moveOnTop)!==!1,h=(t==null?void 0:t.moveEdgesOnTop)!==!1&&s,n=(p=t==null?void 0:t.mouse)==null?void 0:p.dragCursor,d=n!==void 0?n:"grab",c=(x=t==null?void 0:t.mouse)==null?void 0:x.mouseDownEventVerifier,a=c!==void 0?c:m=>m.button===0,l=(P=t==null?void 0:t.mouse)==null?void 0:P.mouseUpEventVerifier;return{moveOnTop:s,moveEdgesOnTop:h,dragCursor:d,mouseDownEventVerifier:a,mouseUpEventVerifier:l!==void 0?l:m=>m.button===0,onNodeDrag:e,onBeforeNodeDrag:o,onNodeDragFinished:i}},Ie=(t,e,o)=>{const{x:i,y:s,width:h,height:n}=t.getBoundingClientRect();return e>=i&&e<=i+h&&o>=s&&o<=s+n},Be=(t,e,o)=>e>=0&&e<=t.innerWidth&&o>=0&&o<=t.innerHeight,V=(t,e,o,i)=>Ie(e,o,i)&&Be(t,o,i),C=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")};class X{constructor(e,o,i,s){r(this,"grabbedNodeId",null);r(this,"maxNodePriority",0);r(this,"previousTouchCoordinates",null);r(this,"graph");r(this,"onAfterNodeAdded",e=>{this.updateMaxNodePriority(e);const o=this.graph.getNode(e);o.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),o.element.addEventListener("touchstart",this.onTouchStart,{passive:!0})});r(this,"onAfterNodeUpdated",e=>{this.updateMaxNodePriority(e)});r(this,"onBeforeNodeRemoved",e=>{const o=this.graph.getNode(e);o.element.removeEventListener("mousedown",this.onMouseDown),o.element.removeEventListener("touchstart",this.onTouchStart)});r(this,"onBeforeDestroy",()=>{this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy),this.removeMouseDragListeners(),this.removeTouchDragListeners()});r(this,"onBeforeClear",()=>{this.canvas.graph.getAllNodeIds().forEach(e=>{const o=this.canvas.graph.getNode(e);o.element.removeEventListener("mousedown",this.onMouseDown),o.element.removeEventListener("touchstart",this.onTouchStart)}),this.maxNodePriority=0});r(this,"onMouseDown",e=>{if(!this.config.mouseDownEventVerifier(e))return;const o=e.currentTarget,i=this.graph.getElementNodeId(o),s=this.graph.getNode(i);this.config.onBeforeNodeDrag({nodeId:i,element:s.element,x:s.x,y:s.y})&&(e.stopImmediatePropagation(),this.grabbedNodeId=i,C(this.element,this.config.dragCursor),this.moveNodeOnTop(i),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}))});r(this,"onTouchStart",e=>{if(e.touches.length!==1)return;e.stopImmediatePropagation(),this.previousTouchCoordinates={x:e.touches[0].clientX,y:e.touches[0].clientY};const o=e.currentTarget,i=this.canvas.graph.getElementNodeId(o),s=this.graph.getNode(i);this.config.onBeforeNodeDrag({nodeId:i,element:s.element,x:s.x,y:s.y})&&(this.grabbedNodeId=i,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}))});r(this,"onWindowMouseMove",e=>{if(!V(this.window,this.element,e.clientX,e.clientY)){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});r(this,"onWindowMouseUp",e=>{this.config.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});r(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const o=e.touches[0];if(!V(this.window,this.element,o.clientX,o.clientY)){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoordinates!==null){const s=o.clientX-this.previousTouchCoordinates.x,h=o.clientY-this.previousTouchCoordinates.y;this.dragNode(this.grabbedNodeId,s,h),this.previousTouchCoordinates={x:e.touches[0].clientX,y:e.touches[0].clientY}}});r(this,"onWindowTouchFinish",()=>{this.previousTouchCoordinates=null,this.cancelTouchDrag()});r(this,"config");this.canvas=e,this.element=o,this.window=i,this.config=Re(s),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,o,i,s){new X(e,o,i,s)}dragNode(e,o,i){const s=this.graph.getNode(e);if(s===null)return;const h=this.canvas.viewport.getContentMatrix(),n=D(h,{x:s.x,y:s.y}),d=D({scale:1,x:o,y:i},n),c=this.canvas.viewport.getViewportMatrix(),a=D(c,d);this.canvas.updateNode(e,{x:a.x,y:a.y}),this.config.onNodeDrag({nodeId:e,element:s.element,x:a.x,y:a.y})}moveNodeOnTop(e){if(this.config.moveOnTop){if(this.maxNodePriority++,this.config.moveEdgesOnTop){const o=this.maxNodePriority;this.maxNodePriority++,this.graph.getNodeAdjacentEdgeIds(e).forEach(s=>{this.canvas.updateEdge(s,{priority:o})})}this.canvas.updateNode(e,{priority:this.maxNodePriority})}}cancelMouseDrag(){const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.config.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,C(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoordinates=null;const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.config.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}updateMaxNodePriority(e){const o=this.graph.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}}const Ue=t=>{const e=t.minX!==null?t.minX:-1/0,o=t.maxX!==null?t.maxX:1/0,i=t.minY!==null?t.minY:-1/0,s=t.maxY!==null?t.maxY:1/0;return h=>{let n=h.nextTransform.x,d=h.nextTransform.y;n<e&&n<h.prevTransform.x&&(n=Math.min(h.prevTransform.x,e));const c=h.canvasWidth*h.prevTransform.scale,a=o-c;n>a&&n>h.prevTransform.x&&(n=Math.max(h.prevTransform.x,a)),d<i&&d<h.prevTransform.y&&(d=Math.min(h.prevTransform.y,i));const l=h.canvasHeight*h.prevTransform.scale,w=s-l;return d>w&&d>h.prevTransform.y&&(d=Math.max(h.prevTransform.y,w)),{scale:h.nextTransform.scale,x:n,y:d}}},Ce=t=>{const e=t.maxContentScale,o=t.minContentScale,i=e!==null?1/e:0,s=o!==null?1/o:1/0;return h=>{const n=h.prevTransform,d=h.nextTransform;let c=d.scale,a=d.x,l=d.y;if(d.scale>s&&d.scale>n.scale){c=Math.max(n.scale,s),a=n.x,l=n.y;const w=(c-n.scale)/(d.scale-n.scale);a=n.x+(d.x-n.x)*w,l=n.y+(d.y-n.y)*w}if(d.scale<i&&d.scale<n.scale){c=Math.min(n.scale,i),a=n.x,l=n.y;const w=(c-n.scale)/(d.scale-n.scale);a=n.x+(d.x-n.x)*w,l=n.y+(d.y-n.y)*w}return{scale:c,x:a,y:l}}},We=t=>e=>t.reduce((o,i)=>i({prevTransform:e.prevTransform,nextTransform:o,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),ie=t=>{if(typeof t=="function")return t;switch(t.type){case"scale-limit":return Ce({minContentScale:t.minContentScale??0,maxContentScale:t.maxContentScale??1/0});case"shift-limit":return Ue({minX:t.minX??-1/0,maxX:t.maxX??1/0,minY:t.minY??-1/0,maxY:t.maxY??1/0})}},$e=t=>{var A,p,x,P,m,N,B,U,Se,xe,be,Te;const e=(A=t==null?void 0:t.scale)==null?void 0:A.mouseWheelSensitivity,o=e!==void 0?e:1.2,i=t==null?void 0:t.transformPreprocessor;let s;i!==void 0?Array.isArray(i)?s=We(i.map(M=>ie(M))):s=ie(i):s=M=>M.nextTransform;const h=((p=t==null?void 0:t.shift)==null?void 0:p.cursor)!==void 0?t.shift.cursor:"grab",n=((x=t==null?void 0:t.events)==null?void 0:x.onBeforeTransformChange)??(()=>{}),d=((P=t==null?void 0:t.events)==null?void 0:P.onTransformChange)??(()=>{}),c=(m=t==null?void 0:t.shift)==null?void 0:m.mouseDownEventVerifier,a=c!==void 0?c:M=>M.button===0,l=(N=t==null?void 0:t.shift)==null?void 0:N.mouseUpEventVerifier,w=l!==void 0?l:M=>M.button===0,y=(B=t==null?void 0:t.scale)==null?void 0:B.mouseWheelEventVerifier,E=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:((U=t==null?void 0:t.events)==null?void 0:U.onTransformStarted)??(()=>{}),onTransformFinished:((Se=t==null?void 0:t.events)==null?void 0:Se.onTransformFinished)??(()=>{}),onBeforeTransformChange:n,onTransformChange:d,transformPreprocessor:s,shiftCursor:h,mouseDownEventVerifier:a,mouseUpEventVerifier:w,mouseWheelEventVerifier:E,scaleWheelFinishTimeout:((xe=t==null?void 0:t.scale)==null?void 0:xe.wheelFinishTimeout)??500,onResizeTransformStarted:((be=t==null?void 0:t.events)==null?void 0:be.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((Te=t==null?void 0:t.events)==null?void 0:Te.onResizeTransformFinished)??(()=>{})}},Fe=(t,e,o)=>({scale:t.scale,x:t.x+t.scale*e,y:t.y+t.scale*o}),Oe=(t,e,o,i)=>({scale:t.scale*e,x:t.scale*(1-e)*o+t.x,y:t.scale*(1-e)*i+t.y}),W=t=>{const e=[],o=t.touches.length;for(let d=0;d<o;d++)e.push([t.touches[d].clientX,t.touches[d].clientY]);const i=e.reduce((d,c)=>[d[0]+c[0],d[1]+c[1]],[0,0]),s=[i[0]/o,i[1]/o],n=e.map(d=>[d[0]-s[0],d[1]-s[1]]).reduce((d,c)=>d+Math.sqrt(c[0]*c[0]+c[1]*c[1]),0);return{x:s[0],y:s[1],scale:n/o,touchesCnt:o,touches:e}};class ${constructor(e,o,i,s){r(this,"viewport");r(this,"prevTouches",null);r(this,"wheelFinishTimer",null);r(this,"transformInProgress",!1);r(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("wheel",this.preventWheelScaleListener),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onMouseDown",e=>{this.element===null||!this.config.mouseDownEventVerifier(e)||(C(this.element,this.config.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.startRegisteredTransform())});r(this,"onWindowMouseMove",e=>{const o=V(this.window,this.element,e.clientX,e.clientY);if(this.element===null||!o){this.stopMouseDrag();return}const i=-e.movementX,s=-e.movementY;this.moveViewport(i,s)});r(this,"onWindowMouseUp",e=>{this.element===null||!this.config.mouseUpEventVerifier(e)||this.stopMouseDrag()});r(this,"onWheelScroll",e=>{if(!this.config.mouseWheelEventVerifier(e))return;const{left:o,top:i}=this.element.getBoundingClientRect(),s=e.clientX-o,h=e.clientY-i,d=1/(e.deltaY<0?this.config.wheelSensitivity:1/this.config.wheelSensitivity);this.wheelFinishTimer===null&&this.config.onTransformStarted(),this.scaleViewport(d,s,h),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.transformInProgress||this.config.onTransformFinished(),this.wheelFinishTimer=null},this.config.scaleWheelFinishTimeout)});r(this,"onTouchStart",e=>{if(this.prevTouches!==null){this.prevTouches=W(e);return}this.prevTouches=W(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()});r(this,"onWindowTouchMove",e=>{const o=W(e);if(!o.touches.every(s=>V(this.window,this.element,s[0],s[1]))){this.stopTouchDrag();return}if((o.touchesCnt===1||o.touchesCnt===2)&&this.moveViewport(-(o.x-this.prevTouches.x),-(o.y-this.prevTouches.y)),o.touchesCnt===2){const{left:s,top:h}=this.element.getBoundingClientRect(),n=this.prevTouches.x-s,d=this.prevTouches.y-h,a=1/(o.scale/this.prevTouches.scale);this.scaleViewport(a,n,d)}this.prevTouches=o});r(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=W(e):this.stopTouchDrag()});r(this,"observer",new ResizeObserver(()=>{const e=this.viewport.getViewportMatrix(),{width:o,height:i}=this.element.getBoundingClientRect(),s=this.config.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:o,canvasHeight:i});this.config.onResizeTransformStarted(),this.canvas.patchViewportMatrix(s),this.config.onResizeTransformFinished()}));r(this,"config");r(this,"preventWheelScaleListener",e=>{e.preventDefault()});this.canvas=e,this.element=o,this.window=i,this.element.addEventListener("wheel",this.preventWheelScaleListener,{passive:!1}),this.config=$e(s),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,o,i,s){new $(e,o,i,s)}moveViewport(e,o){const i=this.viewport.getViewportMatrix(),s=Fe(i,e,o),{width:h,height:n}=this.element.getBoundingClientRect(),d=this.config.transformPreprocessor({prevTransform:i,nextTransform:s,canvasWidth:h,canvasHeight:n});this.performTransform(d)}scaleViewport(e,o,i){const s=this.canvas.viewport.getViewportMatrix(),h=Oe(s,e,o,i),{width:n,height:d}=this.element.getBoundingClientRect(),c=this.config.transformPreprocessor({prevTransform:s,nextTransform:h,canvasWidth:n,canvasHeight:d});this.performTransform(c)}stopMouseDrag(){C(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.config.onBeforeTransformChange(),this.canvas.patchViewportMatrix(e),this.config.onTransformChange()}startRegisteredTransform(){this.transformInProgress=!0,this.config.onTransformStarted()}finishRegisteredTransform(){this.transformInProgress=!1,this.config.onTransformFinished()}}class Y{constructor(e,o,i,s,h,n){r(this,"canvasResizeObserver");r(this,"nodeHorizontal");r(this,"nodeVertical");r(this,"viewport");r(this,"viewportWidth",0);r(this,"viewportHeight",0);r(this,"viewportMatrix");r(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});r(this,"updateLoadedArea",e=>{this.loadedArea={xFrom:e.x,xTo:e.x+e.width,yFrom:e.y,yTo:e.y+e.height}});r(this,"onBeforeDestroy",()=>{this.trigger.unsubscribe(this.updateLoadedArea),this.canvasResizeObserver.unobserve(this.element),this.canvas.viewport.onAfterUpdated.unsubscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onAfterViewportUpdated",()=>{this.userTransformInProgress||(this.viewportMatrix=this.viewport.getViewportMatrix(),this.loadAreaAroundViewport())});r(this,"userTransformInProgress",!1);var E,A,p,x,P;this.canvas=e,this.element=o,this.window=i,this.trigger=h,this.virtualScrollOptions=n,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new ResizeObserver(m=>{const N=m[0];this.viewportWidth=N.contentRect.width,this.viewportHeight=N.contentRect.height,this.scheduleLoadAreaAroundViewport()}),this.viewport=e.viewport;const d=((E=s==null?void 0:s.events)==null?void 0:E.onResizeTransformStarted)??(()=>{}),c=((A=s==null?void 0:s.events)==null?void 0:A.onResizeTransformFinished)??(()=>{}),a=((p=s==null?void 0:s.events)==null?void 0:p.onTransformChange)??(()=>{}),l=((x=s==null?void 0:s.events)==null?void 0:x.onBeforeTransformChange)??(()=>{}),w=((P=s==null?void 0:s.events)==null?void 0:P.onTransformFinished)??(()=>{}),y={...s,events:{...s==null?void 0:s.events,onResizeTransformStarted:()=>{this.userTransformInProgress=!0,d()},onResizeTransformFinished:()=>{this.userTransformInProgress=!1,c()},onBeforeTransformChange:()=>{this.userTransformInProgress=!0,l()},onTransformChange:()=>{this.userTransformInProgress=!1;const m=this.viewportMatrix;this.viewportMatrix=this.viewport.getViewportMatrix(),m.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),a()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),w()}}};$.configure(e,this.element,this.window,y),this.viewportMatrix=this.viewport.getViewportMatrix(),this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o,i,s,h,n){new Y(e,o,i,s,h,n)}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const e=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,i=this.viewportMatrix.x-this.nodeHorizontal,s=this.viewportMatrix.y-this.nodeVertical,h=this.viewportMatrix.x+e+this.nodeHorizontal,n=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<i&&this.loadedArea.xTo>h&&this.loadedArea.yFrom<s&&this.loadedArea.yTo>n||this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const e=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,i=this.viewportMatrix.x-e-this.nodeHorizontal,s=this.viewportMatrix.y-o-this.nodeVertical,h=3*e+2*this.nodeHorizontal,n=3*o+2*this.nodeVertical;this.trigger.emit({x:i,y:s,width:h,height:n})}}const ke=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.position="absolute",t.style.inset="0",t},ze=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","rect");return t.setAttribute("fill","url(#pattern)"),t},Xe=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","pattern");return t.setAttribute("id","pattern"),t},Ye=(t,e)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","circle");return o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r",`${t}`),o.setAttribute("fill",`${e}`),o},He=t=>t instanceof SVGElement?t:Ye((t==null?void 0:t.radius)??1.5,(t==null?void 0:t.color)??"#d8d8d8"),je=t=>{const e=t.tileDimensions,o=(e==null?void 0:e.width)??25,i=(e==null?void 0:e.height)??25,s=He(t.renderer??{});return{tileWidth:o,tileHeight:i,renderer:s,maxViewportScale:t.maxViewportScale??10}};class H{constructor(e,o,i){r(this,"svg",ke());r(this,"patternRenderingRectangle",ze());r(this,"pattern",Xe());r(this,"patternContent");r(this,"tileWidth");r(this,"tileHeight");r(this,"halfTileWidth");r(this,"halfTileHeight");r(this,"maxViewportScale");r(this,"visible",!1);r(this,"resizeObserver",new ResizeObserver(e=>{const o=e[0],{width:i,height:s}=o.contentRect;this.svg.setAttribute("width",`${i}`),this.svg.setAttribute("height",`${s}`),this.patternRenderingRectangle.setAttribute("width",`${i}`),this.patternRenderingRectangle.setAttribute("height",`${s}`);const h=this.tileWidth/i,n=this.tileHeight/s;this.pattern.setAttribute("width",`${h}`),this.pattern.setAttribute("height",`${n}`)}));r(this,"onAfterTransformUpdated",()=>{const e=this.canvas.viewport.getContentMatrix(),o=e.x-this.halfTileWidth*e.scale,i=e.y-this.halfTileHeight*e.scale,s=`matrix(${e.scale}, 0, 0, ${e.scale}, ${o}, ${i})`;this.pattern.setAttribute("patternTransform",s),this.updateVisibility()});r(this,"onBeforeDestroy",()=>{this.resizeObserver.unobserve(this.host),this.host.removeChild(this.svg),this.canvas.viewport.onAfterUpdated.unsubscribe(this.onAfterTransformUpdated),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});this.canvas=e,this.host=i;const s=je(o);this.tileWidth=s.tileWidth,this.tileHeight=s.tileHeight,this.halfTileWidth=this.tileWidth/2,this.halfTileHeight=this.tileHeight/2,this.patternContent=s.renderer,this.maxViewportScale=s.maxViewportScale;const h=`translate(${this.halfTileWidth}, ${this.halfTileHeight})`;this.patternContent.setAttribute("transform",h),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.host),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated),this.onAfterTransformUpdated(),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o,i){new H(e,o,i)}updateVisibility(){const o=this.canvas.viewport.getViewportMatrix().scale>this.maxViewportScale;o&&this.visible?(this.visible=!1,this.host.removeChild(this.svg)):!o&&!this.visible&&(this.visible=!0,this.host.appendChild(this.svg))}}const Ge=t=>{var d,c,a;const e=()=>"direct",o=l=>l,i=l=>l.button===0,s=()=>{},h=()=>{},n=()=>{};return{connectionTypeResolver:t.connectionTypeResolver??e,connectionPreprocessor:t.connectionPreprocessor??o,mouseDownEventVerifier:t.mouseDownEventVerifier??i,mouseUpEventVerifier:t.mouseUpEventVerifier??i,onAfterEdgeCreated:((d=t.events)==null?void 0:d.onAfterEdgeCreated)??s,onEdgeCreationInterrupted:((c=t.events)==null?void 0:c.onEdgeCreationInterrupted)??n,onEdgeCreationPrevented:((a=t.events)==null?void 0:a.onEdgeCreationPrevented)??h,dragPortDirection:t.dragPortDirection??void 0}};class j{constructor(e,o,i,s,h,n){r(this,"config");r(this,"overlayCanvas");r(this,"staticOverlayPortId","static");r(this,"draggingOverlayPortId","dragging");r(this,"staticPortId",null);r(this,"isDirect",!0);r(this,"onAfterPortMarked",e=>{const o=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortsIds(o.element).length===1&&this.hookPortEvents(o.element)});r(this,"onBeforePortUnmarked",e=>{const o=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortsIds(o.element).length===1&&this.unhookPortEvents(o.element)});r(this,"onPortMouseDown",e=>{const o=e.currentTarget;this.config.mouseDownEventVerifier(e)&&this.isPortConnectionAllowed(o)&&(e.stopPropagation(),this.grabPort(o,{x:e.clientX,y:e.clientY}),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}))});r(this,"onWindowMouseMove",e=>{if(!V(this.window,this.overlayLayer,e.clientX,e.clientY)){this.stopMouseDrag();return}this.moveDraggingNode({x:e.clientX,y:e.clientY})});r(this,"onWindowMouseUp",e=>{this.config.mouseUpEventVerifier(e)&&(this.tryCreateConnection({x:e.clientX,y:e.clientY}),this.stopMouseDrag())});r(this,"onPortTouchStart",e=>{const o=e.currentTarget;if(!(e.touches.length===1&&this.isPortConnectionAllowed(o)))return;e.stopPropagation();const s=e.touches[0];this.grabPort(o,{x:s.clientX,y:s.clientY}),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0})});r(this,"onWindowTouchMove",e=>{const o=e.touches[0];if(!V(this.window,this.overlayLayer,o.clientX,o.clientY)){this.stopTouchDrag();return}this.moveDraggingNode({x:o.clientX,y:o.clientY})});r(this,"onWindowTouchFinish",e=>{const o=e.changedTouches[0];this.tryCreateConnection({x:o.clientX,y:o.clientY}),this.stopTouchDrag()});r(this,"onBeforeClear",()=>{this.canvas.graph.getAllPortIds().forEach(e=>{const o=this.canvas.graph.getPort(e);this.unhookPortEvents(o.element)})});r(this,"onBeforeDestroy",()=>{this.stopMouseDrag(),this.stopTouchDrag(),this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked),this.canvas.graph.onBeforePortUnmarked.unsubscribe(this.onBeforePortUnmarked),this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onEdgeCreated",e=>{this.config.onAfterEdgeCreated(e)});this.canvas=e,this.overlayLayer=o,this.viewportStore=i,this.window=s,this.config=Ge(n);const d=new te,c=new q(d,this.viewportStore,this.overlayLayer);this.overlayCanvas=new ee(this.overlayLayer,d,this.viewportStore,c,h),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,o,i,s,h,n){new j(e,o,i,s,h,n)}grabPort(e,o){const i=this.canvas.graph.getElementPortsIds(e)[0],s=this.canvas.graph.getPort(i);this.staticPortId=i;const h=this.config.connectionTypeResolver(this.staticPortId),n=e.getBoundingClientRect(),d=n.x+n.width/2,c=n.y+n.height/2,a=this.overlayLayer.getBoundingClientRect(),l=this.canvas.viewport.getViewportMatrix(),w=D(l,{x:d-a.x,y:c-a.y}),y=D(l,{x:o.x-a.x,y:o.y-a.y}),E={overlayId:this.staticOverlayPortId,portCoords:w,portDirection:s.direction},A={overlayId:this.draggingOverlayPortId,portCoords:y,portDirection:this.config.dragPortDirection};this.isDirect=h==="direct";const p=this.isDirect?E:A,x=this.isDirect?A:E;this.createOverlayGraph(p,x)}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.resetDragState(),this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}stopTouchDrag(){this.resetDragState(),this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}resetDragState(){this.staticPortId=null,this.isDirect=!0,this.overlayCanvas.clear()}createOverlayGraph(e,o){const i=this.createAddNodeRequest(e);this.overlayCanvas.addNode(i);const s=this.createAddNodeRequest(o);this.overlayCanvas.addNode(s),this.overlayCanvas.addEdge({from:e.overlayId,to:o.overlayId})}createAddNodeRequest(e){const o=document.createElement("div");return{id:e.overlayId,element:o,x:e.portCoords.x,y:e.portCoords.y,ports:[{id:e.overlayId,element:o,direction:e.portDirection}]}}tryCreateConnection(e){const o=this.findPortAtPoint(e);if(o===null){this.config.onEdgeCreationInterrupted(this.staticPortId,this.isDirect);return}const i=this.isDirect?this.staticPortId:o,s=this.isDirect?o:this.staticPortId,h={from:i,to:s},n=this.config.connectionPreprocessor(h);n!==null?(this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated),this.canvas.addEdge(n),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)):this.config.onEdgeCreationPrevented(h)}moveDraggingNode(e){const o=this.overlayLayer.getBoundingClientRect(),i={x:e.x-o.x,y:e.y-o.y},s=this.canvas.viewport.getViewportMatrix(),h=D(s,i);this.overlayCanvas.updateNode(this.draggingOverlayPortId,{x:h.x,y:h.y})}findPortAtPoint(e){const o=document.elementsFromPoint(e.x,e.y);for(const i of o){const s=this.findPortAtElement(i);if(s!==null)return s}return null}findPortAtElement(e){let o=e,i=null;for(;o!==null&&(i=this.canvas.graph.getElementPortsIds(o)[0]??null,i===null);)o=o.parentElement;return i}isPortConnectionAllowed(e){const o=this.canvas.graph.getElementPortsIds(e)[0];return this.config.connectionTypeResolver(o)!==null}}const Ze=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t},G=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.inset="0",t};class Je{constructor(e){r(this,"background",G());r(this,"main",G());r(this,"overlay",G());r(this,"host",Ze());this.element=e,this.element.appendChild(this.host),this.host.appendChild(this.background),this.host.appendChild(this.main),this.overlay.style.pointerEvents="none",this.host.appendChild(this.overlay)}destroy(){this.host.removeChild(this.background),this.host.removeChild(this.main),this.host.removeChild(this.overlay),this.element.removeChild(this.host)}}const Ke=(t,e)=>({x:t/2,y:e/2}),Z=t=>()=>t,se=Z(0),Qe=()=>{let t=0;return()=>t++},_e=(t,e)=>{let o=se,i=se;const s=Qe();return t==="incremental"&&(o=s),e==="incremental"&&(i=s),typeof t=="number"&&(o=Z(t)),typeof e=="number"&&(i=Z(e)),typeof t=="function"&&(o=t),typeof e=="function"&&(i=e),{nodesPriorityFn:o,edgesPriorityFn:i}},f=(t,e,o)=>({x:e.x*t.x-e.y*t.y+((1-e.x)*o.x+e.y*o.y),y:e.y*t.x+e.x*t.y+((1-e.x)*o.y-e.y*o.x)}),g={x:0,y:0},qe=t=>{const e=f({x:t.arrowLength,y:g.y},t.fromVector,g),o=f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to),i={x:e.x+t.fromVector.x*t.curvature,y:e.y+t.fromVector.y*t.curvature},s={x:o.x-t.toVector.x*t.curvature,y:o.y-t.toVector.y*t.curvature},h=`M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`,n=t.hasSourceArrow?"":`M ${g.x} ${g.y} L ${e.x} ${e.y} `,d=t.hasTargetArrow?"":` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;return`${n}${h}${d}`},et=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.fromVector,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to):t.to,i=t.arrowLength,s=Math.cos(t.detourDirection)*t.detourDistance,h=Math.sin(t.detourDirection)*t.detourDistance,n=s*t.flipX,d=h*t.flipY,c=f({x:i,y:g.y},t.fromVector,g),a={x:c.x+n,y:c.y+d},l=f({x:t.to.x-i,y:t.to.y},t.toVector,t.to),w={x:l.x+n,y:l.y+d},y={x:(a.x+w.x)/2,y:(a.y+w.y)/2},E={x:c.x+t.curvature*t.fromVector.x,y:c.y+t.curvature*t.fromVector.y},A={x:l.x-t.curvature*t.toVector.x,y:l.y-t.curvature*t.toVector.y},p={x:c.x+n,y:c.y+d},x={x:l.x+n,y:l.y+d};return[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${E.x} ${E.y} ${p.x} ${p.y} ${y.x} ${y.y}`,`C ${x.x} ${x.y} ${A.x} ${A.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},R=(t,e)=>{const o=[];if(t.length>0&&o.push(`M ${t[0].x} ${t[0].y}`),t.length===2&&o.push(`L ${t[1].x} ${t[1].y}`),t.length>2){const i=t.length-1;let s=0,h=0,n=0;t.forEach((d,c)=>{let a=0,l=0,w=0;const y=c>0,E=c<i,A=y&&E;if(y&&(a=-s,l=-h,w=n),E){const U=t[c+1];s=U.x-d.x,h=U.y-d.y,n=Math.sqrt(s*s+h*h)}const x=n!==0?Math.min((A?e:0)/n,c<i-1?.5:1):0,P=A?{x:d.x+s*x,y:d.y+h*x}:d,N=w!==0?Math.min((A?e:0)/w,c>1?.5:1):0,B=A?{x:d.x+a*N,y:d.y+l*N}:d;c>0&&o.push(`L ${B.x} ${B.y}`),A&&o.push(`C ${d.x} ${d.y} ${d.x} ${d.y} ${P.x} ${P.y}`)})}return o.join(" ")},tt=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.fromVector,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=i-t.roundness,h=f({x:s,y:g.y},t.fromVector,g),n=f({x:t.to.x-s,y:t.to.y},t.toVector,t.to),d=Math.max((h.x+n.x)/2,i),c=t.to.y/2,a={x:t.flipX>0?d:-i,y:h.y},l={x:a.x,y:c},w={x:t.flipX>0?t.to.x-d:t.to.x+i,y:n.y},y={x:w.x,y:c};return R([e,h,a,l,y,w,n,o],t.roundness)},J=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.fromVector,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=f({x:i,y:g.y},t.fromVector,g),h=Math.cos(t.detourDirection)*t.detourDistance,n=Math.sin(t.detourDirection)*t.detourDistance,d=h*t.flipX,c=n*t.flipY,a={x:s.x+d,y:s.y+c},l=f({x:t.to.x-i,y:t.to.y},t.toVector,t.to),w={x:l.x+d,y:l.y+c};return R([e,s,a,w,l,o],t.roundness)},ot=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.fromVector,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=f({x:i,y:g.y},t.fromVector,g),h=f({x:t.to.x-i,y:t.to.y},t.toVector,t.to);return R([e,s,h,o],t.roundness)},rt=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.fromVector,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.toVector,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=i-t.roundness,h=f({x:s,y:g.y},t.fromVector,g),n=f({x:t.to.x-s,y:t.to.y},t.toVector,t.to),d=Math.max((h.y+n.y)/2,i),c=t.to.x/2,a={x:h.x,y:t.flipY>0?d:-i},l={x:c,y:a.y},w={x:n.x,y:t.flipY>0?t.to.y-d:t.to.y+i},y={x:c,y:w.y};return R([e,h,a,l,y,w,n,o],t.roundness)},K=t=>{const e=t.arrowOffset,o=t.side,i=t.arrowLength+e,s=i+2*o,n=[{x:t.arrowLength,y:g.y},{x:i,y:g.y},{x:i,y:t.side},{x:s,y:t.side},{x:s,y:-t.side},{x:i,y:-t.side},{x:i,y:g.y},{x:t.arrowLength,y:g.y}].map(c=>f(c,t.fromVector,g)),d=`M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":d}${R(n,t.roundness)}`},it=t=>{const e=t.smallRadius,o=t.radius,i=Math.sqrt(e*e+o*o),s=e+o,h=t.arrowLength+i*(1-o/s),n=e*o/s,c=[{x:t.arrowLength,y:g.y},{x:h,y:n},{x:h,y:-n}].map(w=>f(w,t.fromVector,g)),a=[`M ${c[0].x} ${c[0].y}`,`A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),l=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":l}${a}`},ne=(t,e)=>{t.style.transform=`translate(${e.x}px, ${e.y}px)`,t.style.width=`${Math.max(e.width,1)}px`,t.style.height=`${Math.max(e.height,1)}px`},u=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}),Q=(t,e,o,i)=>{const h=[g,{x:o,y:i},{x:o,y:-i}].map(a=>f(a,t,g)).map(a=>({x:a.x+e.x,y:a.y+e.y})),n=`M ${h[0].x} ${h[0].y}`,d=`L ${h[1].x} ${h[1].y}`,c=`L ${h[2].x} ${h[2].y}`;return`${n} ${d} ${c} Z`},F=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("fill",t),e},he=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},de=(t,e)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",t),o.setAttribute("stroke-width",`${e}`),o.setAttribute("fill","none"),o},ce=(t,e)=>{const o={x:t.x+t.width/2,y:t.y+t.height/2},i={x:e.x+e.width/2,y:e.y+e.height/2},s=Math.min(o.x,i.x),h=Math.min(o.y,i.y),n=Math.abs(i.x-o.x),d=Math.abs(i.y-o.y),c=o.x<=i.x?1:-1,a=o.y<=i.y?1:-1;return{x:s,y:h,width:n,height:d,flipX:c,flipY:a}},ae=()=>{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},le=(t,e,o)=>({x:e*Math.cos(t),y:o*Math.sin(t)});class I{constructor(e){r(this,"svg",ae());r(this,"group",he());r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.params=e,this.svg.appendChild(this.group),this.line=de(e.color,e.width),this.group.appendChild(this.line),e.hasSourceArrow&&(this.sourceArrow=F(e.color),this.group.appendChild(this.sourceArrow)),e.hasTargetArrow&&(this.targetArrow=F(e.color),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:i,width:s,height:h,flipX:n,flipY:d}=ce(e.from,e.to);ne(this.svg,{x:o,y:i,width:s,height:h}),this.group.style.transform=`scale(${n}, ${d})`;const c=le(e.from.direction,n,d),a=le(e.to.direction,n,d),l={x:s,y:h};let w=a,y=-this.params.arrowLength,E;e.from.portId===e.to.portId?(E=this.params.createCyclePath,w=c,y=this.params.arrowLength):e.from.nodeId===e.to.nodeId?E=this.params.createDetourPath:E=this.params.createLinePath;const A=E(c,a,l,n,d);if(this.line.setAttribute("d",A),this.sourceArrow){const p=Q(c,g,this.params.arrowLength,this.params.arrowWidth);this.sourceArrow.setAttribute("d",p)}if(this.targetArrow){const p=Q(w,l,y,this.params.arrowWidth);this.targetArrow.setAttribute("d",p)}}}class ue{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"curvature");r(this,"portCycleRadius");r(this,"portCycleSmallRadius");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>it({fromVector:e,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>et({to:i,fromVector:e,toVector:o,flipX:s,flipY:h,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i)=>qe({to:i,fromVector:e,toVector:o,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.curvature=(e==null?void 0:e.curvature)??u.curvature,this.portCycleRadius=(e==null?void 0:e.cycleRadius)??u.cycleRadius,this.portCycleSmallRadius=(e==null?void 0:e.smallCycleRadius)??u.smallCycleRadius,this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new I({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class ge{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({fromVector:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,fromVector:e,toVector:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i,s)=>tt({to:i,fromVector:e,toVector:o,flipX:s,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new I({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class we{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({fromVector:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,fromVector:e,toVector:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i)=>ot({to:i,fromVector:e,toVector:o,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new I({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class fe{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({fromVector:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,fromVector:e,toVector:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i,s,h)=>rt({to:i,fromVector:e,toVector:o,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirectionVertical,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new I({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}const ve=t=>{if(t.diagonalDistance===0)return"";const e=t.offset/t.diagonalDistance,o=t.flip*t.to.x,i=t.flip*t.to.y,s={x:o*e+t.shift.x,y:i*e+t.shift.y},h={x:o/t.diagonalDistance,y:i/t.diagonalDistance};return Q(h,s,t.arrowLength,t.arrowWidth)},ye=t=>{const e=t.hasArrow?t.arrowLength:0,o=t.offset+e,i=t.flip*o/t.diagonalDistance;return{x:t.to.x*i+t.shift.x,y:t.to.y*i+t.shift.y}},st=t=>{const e=ye({diagonalDistance:t.diagonalDistance,to:t.to,offset:t.sourceOffset,hasArrow:t.hasSourceArrow,flip:1,shift:g,arrowLength:t.arrowLength}),o=ye({diagonalDistance:t.diagonalDistance,to:t.to,offset:t.targetOffset,hasArrow:t.hasTargetArrow,flip:-1,shift:t.to,arrowLength:t.arrowLength});return`M ${e.x} ${e.y} L ${o.x} ${o.y}`};class Ae{constructor(e){r(this,"svg",ae());r(this,"group",he());r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);r(this,"color");r(this,"width");r(this,"arrowLength");r(this,"arrowWidth");r(this,"sourceOffset");r(this,"targetOffset");this.color=(e==null?void 0:e.color)??u.color,this.width=(e==null?void 0:e.width)??u.width,this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.sourceOffset=(e==null?void 0:e.sourceOffset)??u.preOffset,this.targetOffset=(e==null?void 0:e.targetOffset)??u.preOffset,this.svg.appendChild(this.group),this.line=de(this.color,this.width),this.group.appendChild(this.line),e!=null&&e.hasSourceArrow&&(this.sourceArrow=F(this.color),this.group.appendChild(this.sourceArrow)),e!=null&&e.hasTargetArrow&&(this.targetArrow=F(this.color),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:i,width:s,height:h,flipX:n,flipY:d}=ce(e.from,e.to);ne(this.svg,{x:o,y:i,width:s,height:h}),this.group.style.transform=`scale(${n}, ${d})`;const c=Math.sqrt(s*s+h*h),a={x:s,y:h};if(c>0){const l=st({diagonalDistance:c,to:a,sourceOffset:this.sourceOffset,targetOffset:this.targetOffset,hasSourceArrow:this.sourceArrow!==null,hasTargetArrow:this.targetArrow!==null,arrowLength:this.arrowLength});this.line.setAttribute("d",l)}else this.line.setAttribute("d","");if(this.sourceArrow){const l=ve({diagonalDistance:c,to:a,offset:this.sourceOffset,flip:1,shift:g,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength});this.sourceArrow.setAttribute("d",l)}if(this.targetArrow){const l=ve({diagonalDistance:c,to:a,offset:this.targetOffset,flip:-1,shift:a,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength});this.targetArrow.setAttribute("d",l)}}}const nt=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.pointerEvents="auto",t.style.cursor="pointer",t},ht=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke","transparent"),e.setAttribute("stroke-width",`${t}`),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e},Ee=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke-linejoin","round"),e.setAttribute("stroke-width",`${t}`),e.setAttribute("fill","transparent"),e.setAttribute("stroke","transparent"),e};class pe extends Error{constructor(e){super(e),this.name="InteractiveEdgeError"}}class _{constructor(e,o){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"handle",nt());r(this,"interactiveLine");r(this,"interactiveSourceArrow",null);r(this,"interactiveTargetArrow",null);if(this.structuredEdge=e,e instanceof _)throw new pe("interactive edge can be configured only once");this.svg=this.structuredEdge.svg,this.group=this.structuredEdge.group,this.line=this.structuredEdge.line,this.sourceArrow=this.structuredEdge.sourceArrow,this.targetArrow=this.structuredEdge.targetArrow;const i=(o==null?void 0:o.width)??u.interactiveWidth;this.interactiveLine=ht(i),this.handle.appendChild(this.interactiveLine),this.sourceArrow&&(this.interactiveSourceArrow=Ee(i),this.handle.appendChild(this.interactiveSourceArrow)),this.targetArrow&&(this.interactiveTargetArrow=Ee(i),this.handle.appendChild(this.interactiveTargetArrow)),this.group.appendChild(this.handle)}render(e){this.structuredEdge.render(e);const o=this.line.getAttribute("d");if(this.interactiveLine.setAttribute("d",o),this.sourceArrow){const i=this.sourceArrow.getAttribute("d");this.interactiveSourceArrow.setAttribute("d",i)}if(this.targetArrow){const i=this.targetArrow.getAttribute("d");this.interactiveTargetArrow.setAttribute("d",i)}}}const dt=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new we({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new ge({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new fe({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"direct":return()=>new Ae({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,sourceOffset:t.sourceOffset,targetOffset:t.targetOffset});default:return()=>new ue({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},ct=t=>{var o,i,s,h,n;const e=_e((o=t.nodes)==null?void 0:o.priority,(i=t.edges)==null?void 0:i.priority);return{nodes:{centerFn:((s=t.nodes)==null?void 0:s.centerFn)??Ke,priorityFn:e.nodesPriorityFn},ports:{direction:((h=t.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:dt(((n=t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class at{constructor(e){r(this,"element",null);r(this,"canvasDefaults",{});r(this,"dragConfig",{});r(this,"transformConfig",{});r(this,"backgroundConfig",{});r(this,"connectablePortsConfig",{});r(this,"virtualScrollConfig");r(this,"hasDraggableNode",!1);r(this,"hasTransformableViewport",!1);r(this,"hasResizeReactiveNodes",!1);r(this,"hasBackground",!1);r(this,"hasUserConnectablePorts",!1);r(this,"boxRenderingTrigger");r(this,"window",window);e!==void 0&&(this.element=e)}setElement(e){return this.element=e,this}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}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(e){return this.boxRenderingTrigger=e,this}enableVirtualScroll(e){return this.virtualScrollConfig=e,this}enableBackground(e){return this.hasBackground=!0,this.backgroundConfig=e??{},this}enableUserConnectablePorts(e){return this.connectablePortsConfig=e??{},this.hasUserConnectablePorts=!0,this}build(){if(this.element===null)throw new b("unable to build canvas when no attach element specified");let e=this.boxRenderingTrigger;this.virtualScrollConfig!==void 0&&e===void 0&&(e=new O);const o=new te,i=new Ve,s=new Je(this.element);let h=new q(o,i,s.main);e!==void 0&&(h=new Ne(h,o,e));const n=ct(this.canvasDefaults),d=new ee(this.element,o,i,h,n),c=()=>{s.destroy(),d.onBeforeDestroy.unsubscribe(c)};return d.onBeforeDestroy.subscribe(c),this.hasBackground&&H.configure(d,this.backgroundConfig,s.background),this.hasResizeReactiveNodes&&z.configure(d),this.hasDraggableNode&&X.configure(d,s.main,this.window,this.dragConfig),this.hasUserConnectablePorts&&j.configure(d,s.overlay,i,this.window,n,this.connectablePortsConfig),this.virtualScrollConfig!==void 0?Y.configure(d,s.main,this.window,this.transformConfig,e,this.virtualScrollConfig):this.hasTransformableViewport&&$.configure(d,s.main,this.window,this.transformConfig),this.reset(),d}reset(){this.element=null,this.canvasDefaults={},this.dragConfig={},this.transformConfig={},this.backgroundConfig={},this.virtualScrollConfig=void 0,this.hasDraggableNode=!1,this.hasTransformableViewport=!1,this.hasResizeReactiveNodes=!1,this.hasBackground=!1,this.boxRenderingTrigger=void 0,this.hasUserConnectablePorts=!1}}v.BezierEdgeShape=ue,v.CanvasBuilder=at,v.DirectEdgeShape=Ae,v.EventSubject=O,v.HorizontalEdgeShape=ge,v.HtmlGraphError=b,v.InteractiveEdgeError=pe,v.InteractiveEdgeShape=_,v.LineEdgeShape=I,v.StraightEdgeShape=we,v.VerticalEdgeShape=fe,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});
+(function(v,T){typeof exports=="object"&&typeof module<"u"?T(exports):typeof define=="function"&&define.amd?define(["exports"],T):(v=typeof globalThis<"u"?globalThis:v||self,T(v.HtmlGraph={}))})(this,function(v){"use strict";var ut=Object.defineProperty;var gt=(v,T,L)=>T in v?ut(v,T,{enumerable:!0,configurable:!0,writable:!0,value:L}):v[T]=L;var r=(v,T,L)=>gt(v,typeof T!="symbol"?T+"":T,L);const T=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t},L=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t},De=t=>{t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.visibility="hidden"},m=(t,e)=>({x:t.scale*e.x+t.x,y:t.scale*e.y+t.y});class ee{constructor(e,o,i){r(this,"host",L());r(this,"container",T());r(this,"edgeIdToElementMap",new Map);r(this,"applyTransform",()=>{const e=this.viewportStore.getContentMatrix();this.container.style.transform=`matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`});this.graphStore=e,this.viewportStore=o,this.element=i,this.element.appendChild(this.host),this.host.appendChild(this.container),this.viewportStore.onAfterUpdated.subscribe(this.applyTransform)}attachNode(e){const o=this.graphStore.getNode(e);De(o.element),this.container.appendChild(o.element),this.updateNodePosition(e),this.updateNodePriority(e),o.element.style.visibility="visible"}detachNode(e){const o=this.graphStore.getNode(e);this.container.removeChild(o.element)}attachEdge(e){const o=this.graphStore.getEdge(e).shape.svg;this.edgeIdToElementMap.set(e,o),this.container.appendChild(o),this.renderEdge(e),this.updateEdgePriority(e)}detachEdge(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o),this.edgeIdToElementMap.delete(e)}clear(){this.edgeIdToElementMap.forEach((e,o)=>{this.detachEdge(o)}),this.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 o=this.graphStore.getNode(e),{width:i,height:s}=o.element.getBoundingClientRect(),h=this.viewportStore.getViewportMatrix().scale,n=o.centerFn(i,s),d=o.x-h*n.x,c=o.y-h*n.y;o.element.style.transform=`translate(${d}px, ${c}px)`}updateNodePriority(e){const o=this.graphStore.getNode(e);o.element.style.zIndex=`${o.priority}`}updateEdgeShape(e){const o=this.edgeIdToElementMap.get(e);this.container.removeChild(o);const i=this.graphStore.getEdge(e);this.edgeIdToElementMap.set(e,i.shape.svg),this.container.appendChild(i.shape.svg)}renderEdge(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from),s=this.graphStore.getPort(o.to),h=i.element.getBoundingClientRect(),n=s.element.getBoundingClientRect(),d=this.host.getBoundingClientRect(),c=this.viewportStore.getViewportMatrix(),a=this.createEdgeRenderPort(o.from,i,h,d,c),l=this.createEdgeRenderPort(o.to,s,n,d,c);o.shape.render({from:a,to:l})}updateEdgePriority(e){const o=this.graphStore.getEdge(e);o.shape.svg.style.zIndex=`${o.priority}`}createEdgeRenderPort(e,o,i,s,h){const n={x:i.left-s.left,y:i.top-s.top},d=m(h,n);return{x:d.x,y:d.y,width:i.width*h.scale,height:i.height*h.scale,direction:o.direction,portId:e,nodeId:o.nodeId}}}class Ne{constructor(e){r(this,"xFrom",1/0);r(this,"yFrom",1/0);r(this,"xTo",1/0);r(this,"yTo",1/0);this.graphStore=e}setRenderingBox(e){this.xFrom=e.x,this.xTo=e.x+e.width,this.yFrom=e.y,this.yTo=e.y+e.height}hasNode(e){const o=this.graphStore.getNode(e);return o.x>=this.xFrom&&o.x<=this.xTo&&o.y>=this.yFrom&&o.y<=this.yTo}hasEdge(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId,h=this.graphStore.getNode(i),n=this.graphStore.getNode(s),d=Math.min(h.x,n.x),c=Math.max(h.x,n.x),a=Math.min(h.y,n.y),l=Math.max(h.y,n.y);return d<=this.xTo&&c>=this.xFrom&&a<=this.yTo&&l>=this.yFrom}}class me{constructor(e,o,i){r(this,"attachedNodes",new Set);r(this,"attachedEdges",new Set);r(this,"renderingBox");r(this,"updateViewport",e=>{this.renderingBox.setRenderingBox(e);const o=new Set,i=new Set,s=new Set,h=new Set;this.graphStore.getAllNodeIds().forEach(n=>{const d=this.renderingBox.hasNode(n),c=this.attachedNodes.has(n);d&&!c?o.add(n):!d&&c&&i.add(n)}),this.graphStore.getAllEdgeIds().forEach(n=>{const d=this.renderingBox.hasEdge(n),c=this.attachedEdges.has(n),a=this.graphStore.getEdge(n),l=this.graphStore.getPort(a.from).nodeId,w=this.graphStore.getPort(a.to).nodeId;d&&(this.renderingBox.hasNode(l)||(o.add(l),i.delete(l)),this.renderingBox.hasNode(w)||(o.add(w),i.delete(w))),d&&!c?s.add(n):!d&&c&&h.add(n)}),h.forEach(n=>{this.handleDetachEdge(n)}),i.forEach(n=>{this.handleDetachNode(n)}),o.forEach(n=>{this.attachedNodes.has(n)||this.handleAttachNode(n)}),s.forEach(n=>{this.handleAttachEdge(n)})});this.htmlView=e,this.graphStore=o,this.trigger=i,this.renderingBox=new Ne(this.graphStore),this.trigger.subscribe(this.updateViewport)}attachNode(e){this.renderingBox.hasNode(e)&&this.handleAttachNode(e)}detachNode(e){this.attachedNodes.has(e)&&this.handleDetachNode(e)}attachEdge(e){this.renderingBox.hasEdge(e)&&this.attachEdgeEntities(e)}detachEdge(e){this.attachedEdges.has(e)&&this.handleDetachEdge(e)}updateNodePosition(e){this.attachedNodes.has(e)?this.htmlView.updateNodePosition(e):this.renderingBox.hasNode(e)&&(this.handleAttachNode(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(o=>{this.attachEdgeEntities(o)}))}updateNodePriority(e){this.attachedNodes.has(e)&&this.htmlView.updateNodePriority(e)}updateEdgeShape(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgeShape(e)}renderEdge(e){this.attachedEdges.has(e)&&this.htmlView.renderEdge(e)}updateEdgePriority(e){this.attachedEdges.has(e)&&this.htmlView.updateEdgePriority(e)}clear(){this.htmlView.clear(),this.attachedNodes.clear(),this.attachedEdges.clear()}destroy(){this.clear(),this.htmlView.destroy(),this.trigger.unsubscribe(this.updateViewport)}attachEdgeEntities(e){const o=this.graphStore.getEdge(e),i=this.graphStore.getPort(o.from).nodeId,s=this.graphStore.getPort(o.to).nodeId;this.attachedNodes.has(i)||this.handleAttachNode(i),this.attachedNodes.has(s)||this.handleAttachNode(s),this.handleAttachEdge(e)}handleAttachNode(e){this.attachedNodes.add(e),this.htmlView.attachNode(e)}handleDetachNode(e){this.htmlView.detachNode(e),this.attachedNodes.delete(e)}handleAttachEdge(e){this.attachedEdges.add(e),this.htmlView.attachEdge(e)}handleDetachEdge(e){this.htmlView.detachEdge(e),this.attachedEdges.delete(e)}}class O{constructor(){r(this,"callbacks",new Set)}subscribe(e){this.callbacks.add(e)}unsubscribe(e){this.callbacks.delete(e)}emit(e){this.callbacks.forEach(o=>{o(e)})}}const S=()=>{const t=new O;return[t,t]};class Me{constructor(e){r(this,"onBeforeUpdated");r(this,"onAfterUpdated");this.viewportStore=e,this.onBeforeUpdated=this.viewportStore.onBeforeUpdated,this.onAfterUpdated=this.viewportStore.onAfterUpdated}getViewportMatrix(){return{...this.viewportStore.getViewportMatrix()}}getContentMatrix(){return{...this.viewportStore.getContentMatrix()}}}class Le{constructor(e){r(this,"onAfterNodeAdded");r(this,"onAfterNodeUpdated");r(this,"onAfterNodePriorityUpdated");r(this,"onBeforeNodeRemoved");r(this,"onAfterPortMarked");r(this,"onAfterPortUpdated");r(this,"onBeforePortUnmarked");r(this,"onAfterEdgeAdded");r(this,"onAfterEdgeShapeUpdated");r(this,"onAfterEdgeUpdated");r(this,"onAfterEdgePriorityUpdated");r(this,"onBeforeEdgeRemoved");r(this,"onBeforeClear");this.graphStore=e,this.onAfterNodeAdded=this.graphStore.onAfterNodeAdded,this.onAfterNodeUpdated=this.graphStore.onAfterNodeUpdated,this.onAfterNodePriorityUpdated=this.graphStore.onAfterNodePriorityUpdated,this.onBeforeNodeRemoved=this.graphStore.onBeforeNodeRemoved,this.onAfterPortMarked=this.graphStore.onAfterPortAdded,this.onAfterPortUpdated=this.graphStore.onAfterPortUpdated,this.onBeforePortUnmarked=this.graphStore.onBeforePortRemoved,this.onAfterEdgeAdded=this.graphStore.onAfterEdgeAdded,this.onAfterEdgeShapeUpdated=this.graphStore.onAfterEdgeShapeUpdated,this.onAfterEdgeUpdated=this.graphStore.onAfterEdgeUpdated,this.onAfterEdgePriorityUpdated=this.graphStore.onAfterEdgePriorityUpdated,this.onBeforeEdgeRemoved=this.graphStore.onBeforeEdgeRemoved,this.onBeforeClear=this.graphStore.onBeforeClear}getNode(e){const o=this.graphStore.getNode(e);return o===void 0?null:{element:o.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getElementNodeId(e){return this.graphStore.getElementNodeId(e)??null}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(e){const o=this.graphStore.getPort(e);return o===void 0?null:{element:o.element,direction:o.direction,nodeId:o.nodeId}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(e){return this.graphStore.getNodePortIds(e)??null}getElementPortsIds(e){return[...this.graphStore.getElementPortsIds(e)]}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(e){const o=this.graphStore.getEdge(e);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortIncomingEdgeIds(e)}getPortOutcomingEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(e)}getPortCycleEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortCycleEdgeIds(e)}getPortAdjacentEdgeIds(e){return this.graphStore.getPort(e)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(e)}getNodeIncomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(e)}getNodeOutcomingEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(e)}getNodeCycleEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeCycleEdgeIds(e)}getNodeAdjacentEdgeIds(e){return this.graphStore.getNode(e)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(e)}}class k{constructor(e){r(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 b extends Error{constructor(){super(...arguments);r(this,"name","HtmlGraphError")}}class te{constructor(e,o,i,s,h){r(this,"graph");r(this,"viewport");r(this,"nodeIdGenerator",new k(e=>this.graph.getNode(e)!==null));r(this,"portIdGenerator",new k(e=>this.graph.getPort(e)!==null));r(this,"edgeIdGenerator",new k(e=>this.graph.getEdge(e)!==null));r(this,"onAfterNodeAdded",e=>{this.htmlView.attachNode(e)});r(this,"onAfterNodeUpdated",e=>{this.htmlView.updateNodePosition(e),this.graphStore.getNodeAdjacentEdgeIds(e).forEach(i=>{this.htmlView.renderEdge(i)})});r(this,"onAfterNodePriorityUpdated",e=>{this.htmlView.updateNodePriority(e)});r(this,"onBeforeNodeRemoved",e=>{this.graphStore.getNodePortIds(e).forEach(o=>{this.unmarkPort(o)}),this.htmlView.detachNode(e)});r(this,"onAfterPortUpdated",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(i=>{this.htmlView.renderEdge(i)})});r(this,"onBeforePortUnmarked",e=>{this.graphStore.getPortAdjacentEdgeIds(e).forEach(o=>{this.removeEdge(o)})});r(this,"onAfterEdgeAdded",e=>{this.htmlView.attachEdge(e)});r(this,"onAfterEdgeShapeUpdated",e=>{this.htmlView.updateEdgeShape(e)});r(this,"onAfterEdgeUpdated",e=>{this.htmlView.renderEdge(e)});r(this,"onAfterEdgePriorityUpdated",e=>{this.htmlView.updateEdgePriority(e)});r(this,"onBeforeEdgeRemoved",e=>{this.htmlView.detachEdge(e)});r(this,"onBeforeClear",()=>{this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset(),this.htmlView.clear()});r(this,"onBeforeDestroyEmitter");r(this,"onBeforeDestroy");this.element=e,this.graphStore=o,this.viewportStore=i,this.htmlView=s,this.defaults=h,this.graph=new Le(this.graphStore),this.viewport=new Me(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(e){const o=this.nodeIdGenerator.create(e.id);if(this.graph.getNode(o)!==null)throw new b("failed to add node with existing id");if(this.graphStore.getElementNodeId(e.element)!==void 0)throw new b("failed to add node with html element already in use by another node");if(this.graphStore.addNode({id:o,element:e.element,x:e.x,y:e.y,centerFn:e.centerFn??this.defaults.nodes.centerFn,priority:e.priority??this.defaults.nodes.priorityFn()}),e.ports!==void 0)for(const i of e.ports)this.markPort({id:i.id,element:i.element,nodeId:o,direction:i.direction});return this}updateNode(e,o){if(this.graph.getNode(e)===null)throw new b("failed to update non existing node");return this.graphStore.updateNode(e,o??{}),this}removeNode(e){if(this.graph.getNode(e)===null)throw new b("failed to remove non existing node");return this.graphStore.removeNode(e),this}markPort(e){const o=this.portIdGenerator.create(e.id);if(this.graph.getPort(o)!==null)throw new b("failed to add port with existing id");if(this.graph.getNode(e.nodeId)===null)throw new b("failed to mark port for nonexistent node");return this.graphStore.addPort({id:o,element:e.element,nodeId:e.nodeId,direction:e.direction??this.defaults.ports.direction}),this}updatePort(e,o){if(this.graph.getPort(e)===null)throw new b("failed to update nonexistent port");return this.graphStore.updatePort(e,o??{}),this}unmarkPort(e){if(this.graph.getPort(e)===null)throw new b("failed to unmark non existing port");return this.graphStore.removePort(e),this}addEdge(e){const o=this.edgeIdGenerator.create(e.id);if(this.graph.getEdge(o)!==null)throw new b("failed to add edge with existing id");if(this.graph.getPort(e.from)===null)throw new b("failed to add edge from nonexistent port");if(this.graph.getPort(e.to)===null)throw new b("failed to add edge to nonexistent port");return this.graphStore.addEdge({id:o,from:e.from,to:e.to,shape:e.shape??this.defaults.edges.shapeFactory(o),priority:e.priority??this.defaults.edges.priorityFn()}),this}updateEdge(e,o){if(this.graph.getEdge(e)===null)throw new b("failed to update nonexistent edge");return this.graphStore.updateEdge(e,o??{}),this}removeEdge(e){if(this.graph.getEdge(e)===null)throw new b("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.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()}}class Re{constructor(){r(this,"singleToMultiMap",new Map);r(this,"multiToSingleMap",new Map)}addRecord(e,o){const i=this.singleToMultiMap.get(e);i===void 0?this.singleToMultiMap.set(e,new Set([o])):i.add(o),this.multiToSingleMap.set(o,e)}getMultiBySingle(e){const o=this.singleToMultiMap.get(e)??new Set;return Array.from(o.values())}removeByMulti(e){const o=this.multiToSingleMap.get(e),i=this.singleToMultiMap.get(o);i.delete(e),i.size===0&&this.singleToMultiMap.delete(o),this.multiToSingleMap.delete(e)}getByMulti(e){return this.multiToSingleMap.get(e)}removeBySingle(e){this.singleToMultiMap.get(e).forEach(i=>{this.multiToSingleMap.delete(i)}),this.singleToMultiMap.delete(e)}clear(){this.singleToMultiMap.clear(),this.multiToSingleMap.clear()}forEachSingle(e){this.singleToMultiMap.forEach((o,i)=>{e(i)})}hasSingle(e){return this.singleToMultiMap.get(e)!==void 0}hasMulti(e){return this.multiToSingleMap.get(e)!==void 0}}class oe{constructor(){r(this,"nodes",new Map);r(this,"ports",new Map);r(this,"edges",new Map);r(this,"nodesElementsMap",new Map);r(this,"incomingEdges",new Map);r(this,"outcomingEdges",new Map);r(this,"cycleEdges",new Map);r(this,"elementPorts",new Re);r(this,"afterNodeAddedEmitter");r(this,"onAfterNodeAdded");r(this,"afterNodeUpdatedEmitter");r(this,"onAfterNodeUpdated");r(this,"afterNodePriorityUpdatedEmitter");r(this,"onAfterNodePriorityUpdated");r(this,"beforeNodeRemovedEmitter");r(this,"onBeforeNodeRemoved");r(this,"afterPortAddedEmitter");r(this,"onAfterPortAdded");r(this,"afterPortUpdatedEmitter");r(this,"onAfterPortUpdated");r(this,"beforePortRemovedEmitter");r(this,"onBeforePortRemoved");r(this,"afterEdgeAddedEmitter");r(this,"onAfterEdgeAdded");r(this,"afterEdgeShapeUpdatedEmitter");r(this,"onAfterEdgeShapeUpdated");r(this,"afterEdgeUpdatedEmitter");r(this,"onAfterEdgeUpdated");r(this,"afterEdgePriorityUpdatedEmitter");r(this,"onAfterEdgePriorityUpdated");r(this,"beforeEdgeRemovedEmitter");r(this,"onBeforeEdgeRemoved");r(this,"beforeClearEmitter");r(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(e){const o=new Map,i={element:e.element,x:e.x,y:e.y,centerFn:e.centerFn,priority:e.priority,ports:o};this.nodes.set(e.id,i),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,o){const i=this.nodes.get(e);i.x=o.x??i.x,i.y=o.y??i.y,i.centerFn=o.centerFn??i.centerFn,o.priority!==void 0&&(i.priority=o.priority,this.afterNodePriorityUpdatedEmitter.emit(e)),this.afterNodeUpdatedEmitter.emit(e)}removeNode(e){this.beforeNodeRemovedEmitter.emit(e);const o=this.nodes.get(e);this.nodesElementsMap.delete(o.element),this.nodes.delete(e)}addPort(e){this.ports.set(e.id,{element:e.element,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,o){const i=this.ports.get(e);i.direction=o.direction??i.direction,this.afterPortUpdatedEmitter.emit(e)}getAllPortIds(){return Array.from(this.ports.keys())}getElementPortsIds(e){return this.elementPorts.getMultiBySingle(e)}getNodePortIds(e){const o=this.nodes.get(e);if(o!==void 0)return Array.from(o.ports.keys())}removePort(e){const o=this.ports.get(e).nodeId;this.beforePortRemovedEmitter.emit(e),this.nodes.get(o).ports.delete(e),this.ports.delete(e),this.elementPorts.removeByMulti(e)}addEdge(e){this.addEdgeInternal(e),this.afterEdgeAddedEmitter.emit(e.id)}updateEdge(e,o){if(o.from!==void 0||o.to!==void 0){const s=this.edges.get(e);this.removeEdgeInternal(e),this.addEdgeInternal({id:e,from:o.from??s.from,to:o.to??s.to,shape:s.shape,priority:s.priority})}const i=this.edges.get(e);o.shape!==void 0&&(i.shape=o.shape,this.afterEdgeShapeUpdatedEmitter.emit(e)),o.priority!==void 0&&(i.priority=o.priority,this.afterEdgePriorityUpdatedEmitter.emit(e)),this.afterEdgeUpdatedEmitter.emit(e)}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(e){return this.edges.get(e)}removeEdge(e){this.beforeEdgeRemovedEmitter.emit(e),this.removeEdgeInternal(e)}clear(){this.beforeClearEmitter.emit(),this.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))}getPortOutcomingEdgeIds(e){return Array.from(this.outcomingEdges.get(e))}getPortCycleEdgeIds(e){return Array.from(this.cycleEdges.get(e))}getPortAdjacentEdgeIds(e){return[...this.getPortIncomingEdgeIds(e),...this.getPortOutcomingEdgeIds(e),...this.getPortCycleEdgeIds(e)]}getNodeIncomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortIncomingEdgeIds(s)]}),i}getNodeOutcomingEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortOutcomingEdgeIds(s)]}),i}getNodeCycleEdgeIds(e){const o=Array.from(this.nodes.get(e).ports.keys());let i=[];return o.forEach(s=>{i=[...i,...this.getPortCycleEdgeIds(s)]}),i}getNodeAdjacentEdgeIds(e){return[...this.getNodeIncomingEdgeIds(e),...this.getNodeOutcomingEdgeIds(e),...this.getNodeCycleEdgeIds(e)]}addEdgeInternal(e){this.edges.set(e.id,{from:e.from,to:e.to,shape:e.shape,priority:e.priority}),e.from!==e.to?(this.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 o=this.edges.get(e),i=o.from,s=o.to;this.cycleEdges.get(i).delete(e),this.cycleEdges.get(s).delete(e),this.incomingEdges.get(i).delete(e),this.incomingEdges.get(s).delete(e),this.outcomingEdges.get(i).delete(e),this.outcomingEdges.get(s).delete(e),this.edges.delete(e)}}const re=t=>({scale:1/t.scale,x:-t.x/t.scale,y:-t.y/t.scale}),ie={scale:1,x:0,y:0};class Ie{constructor(){r(this,"viewportMatrix",ie);r(this,"contentMatrix",ie);r(this,"afterUpdateEmitter");r(this,"onAfterUpdated");r(this,"beforeUpdateEmitter");r(this,"onBeforeUpdated");[this.afterUpdateEmitter,this.onAfterUpdated]=S(),[this.beforeUpdateEmitter,this.onBeforeUpdated]=S()}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(e){this.beforeUpdateEmitter.emit(),this.viewportMatrix={scale:e.scale??this.viewportMatrix.scale,x:e.x??this.viewportMatrix.x,y:e.y??this.viewportMatrix.y},this.contentMatrix=re(this.viewportMatrix),this.afterUpdateEmitter.emit()}patchContentMatrix(e){this.beforeUpdateEmitter.emit(),this.contentMatrix={scale:e.scale??this.contentMatrix.scale,x:e.x??this.contentMatrix.x,y:e.y??this.contentMatrix.y},this.viewportMatrix=re(this.contentMatrix),this.afterUpdateEmitter.emit()}}class z{constructor(e){r(this,"elementToNodeId",new Map);r(this,"nodesResizeObserver");r(this,"onAfterNodeAdded",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.set(o.element,e),this.nodesResizeObserver.observe(o.element)});r(this,"onBeforeNodeRemoved",e=>{const o=this.canvas.graph.getNode(e);this.elementToNodeId.delete(o.element),this.nodesResizeObserver.unobserve(o.element)});r(this,"onBeforeClear",()=>{this.nodesResizeObserver.disconnect(),this.elementToNodeId.clear()});r(this,"onBeforeDestroy",()=>{this.canvas.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});this.canvas=e,this.nodesResizeObserver=new ResizeObserver(o=>{o.forEach(i=>{const s=i.target;this.handleNodeResize(s)})}),this.canvas.graph.onAfterNodeAdded.subscribe(this.onAfterNodeAdded),this.canvas.graph.onBeforeNodeRemoved.subscribe(this.onBeforeNodeRemoved),this.canvas.graph.onBeforeClear.subscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e){new z(e)}handleNodeResize(e){const o=this.elementToNodeId.get(e);this.canvas.updateNode(o)}}const Be=t=>{var y,E,A,p,x,P;const e=((y=t==null?void 0:t.events)==null?void 0:y.onNodeDrag)??(()=>{}),o=((E=t==null?void 0:t.events)==null?void 0:E.onBeforeNodeDrag)??(()=>!0),i=((A=t==null?void 0:t.events)==null?void 0:A.onNodeDragFinished)??(()=>{}),s=(t==null?void 0:t.moveOnTop)!==!1,h=(t==null?void 0:t.moveEdgesOnTop)!==!1&&s,n=(p=t==null?void 0:t.mouse)==null?void 0:p.dragCursor,d=n!==void 0?n:"grab",c=(x=t==null?void 0:t.mouse)==null?void 0:x.mouseDownEventVerifier,a=c!==void 0?c:D=>D.button===0,l=(P=t==null?void 0:t.mouse)==null?void 0:P.mouseUpEventVerifier;return{moveOnTop:s,moveEdgesOnTop:h,dragCursor:d,mouseDownEventVerifier:a,mouseUpEventVerifier:l!==void 0?l:D=>D.button===0,onNodeDrag:e,onBeforeNodeDrag:o,onNodeDragFinished:i}},Ve=(t,e,o)=>{const{x:i,y:s,width:h,height:n}=t.getBoundingClientRect();return e>=i&&e<=i+h&&o>=s&&o<=s+n},Ue=(t,e,o)=>e>=0&&e<=t.innerWidth&&o>=0&&o<=t.innerHeight,R=(t,e,o,i)=>Ve(e,o,i)&&Ue(t,o,i),C=(t,e)=>{e!==null?t.style.cursor=e:t.style.removeProperty("cursor")};class X{constructor(e,o,i,s){r(this,"grabbedNodeId",null);r(this,"maxNodePriority",0);r(this,"previousTouchCoordinates",null);r(this,"graph");r(this,"onAfterNodeAdded",e=>{this.updateMaxNodePriority(e);const o=this.graph.getNode(e);o.element.addEventListener("mousedown",this.onMouseDown,{passive:!0}),o.element.addEventListener("touchstart",this.onTouchStart,{passive:!0})});r(this,"onAfterNodeUpdated",e=>{this.updateMaxNodePriority(e)});r(this,"onBeforeNodeRemoved",e=>{const o=this.graph.getNode(e);o.element.removeEventListener("mousedown",this.onMouseDown),o.element.removeEventListener("touchstart",this.onTouchStart)});r(this,"onBeforeDestroy",()=>{this.graph.onAfterNodeAdded.unsubscribe(this.onAfterNodeAdded),this.graph.onAfterNodeUpdated.unsubscribe(this.onAfterNodeUpdated),this.graph.onBeforeNodeRemoved.unsubscribe(this.onBeforeNodeRemoved),this.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy),this.removeMouseDragListeners(),this.removeTouchDragListeners()});r(this,"onBeforeClear",()=>{this.canvas.graph.getAllNodeIds().forEach(e=>{const o=this.canvas.graph.getNode(e);o.element.removeEventListener("mousedown",this.onMouseDown),o.element.removeEventListener("touchstart",this.onTouchStart)}),this.maxNodePriority=0});r(this,"onMouseDown",e=>{if(!this.config.mouseDownEventVerifier(e))return;const o=e.currentTarget,i=this.graph.getElementNodeId(o),s=this.graph.getNode(i);this.config.onBeforeNodeDrag({nodeId:i,element:s.element,x:s.x,y:s.y})&&(e.stopImmediatePropagation(),this.grabbedNodeId=i,C(this.element,this.config.dragCursor),this.moveNodeOnTop(i),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}))});r(this,"onTouchStart",e=>{if(e.touches.length!==1)return;e.stopImmediatePropagation(),this.previousTouchCoordinates={x:e.touches[0].clientX,y:e.touches[0].clientY};const o=e.currentTarget,i=this.canvas.graph.getElementNodeId(o),s=this.graph.getNode(i);this.config.onBeforeNodeDrag({nodeId:i,element:s.element,x:s.x,y:s.y})&&(this.grabbedNodeId=i,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}))});r(this,"onWindowMouseMove",e=>{if(!R(this.window,this.element,e.clientX,e.clientY)){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,e.movementX,e.movementY)});r(this,"onWindowMouseUp",e=>{this.config.mouseUpEventVerifier(e)&&this.cancelMouseDrag()});r(this,"onWindowTouchMove",e=>{if(e.touches.length!==1)return;const o=e.touches[0];if(!R(this.window,this.element,o.clientX,o.clientY)){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoordinates!==null){const s=o.clientX-this.previousTouchCoordinates.x,h=o.clientY-this.previousTouchCoordinates.y;this.dragNode(this.grabbedNodeId,s,h),this.previousTouchCoordinates={x:e.touches[0].clientX,y:e.touches[0].clientY}}});r(this,"onWindowTouchFinish",()=>{this.previousTouchCoordinates=null,this.cancelTouchDrag()});r(this,"config");this.canvas=e,this.element=o,this.window=i,this.config=Be(s),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,o,i,s){new X(e,o,i,s)}dragNode(e,o,i){const s=this.graph.getNode(e);if(s===null)return;const h=this.canvas.viewport.getContentMatrix(),n=m(h,{x:s.x,y:s.y}),d=m({scale:1,x:o,y:i},n),c=this.canvas.viewport.getViewportMatrix(),a=m(c,d);this.canvas.updateNode(e,{x:a.x,y:a.y}),this.config.onNodeDrag({nodeId:e,element:s.element,x:a.x,y:a.y})}moveNodeOnTop(e){if(this.config.moveOnTop){if(this.maxNodePriority++,this.config.moveEdgesOnTop){const o=this.maxNodePriority;this.maxNodePriority++,this.graph.getNodeAdjacentEdgeIds(e).forEach(s=>{this.canvas.updateEdge(s,{priority:o})})}this.canvas.updateNode(e,{priority:this.maxNodePriority})}}cancelMouseDrag(){const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.config.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,C(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoordinates=null;const e=this.graph.getNode(this.grabbedNodeId);e!==null&&this.config.onNodeDragFinished({nodeId:this.grabbedNodeId,element:e.element,x:e.x,y:e.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}updateMaxNodePriority(e){const o=this.graph.getNode(e).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}}const Ce=t=>{const e=t.minX!==null?t.minX:-1/0,o=t.maxX!==null?t.maxX:1/0,i=t.minY!==null?t.minY:-1/0,s=t.maxY!==null?t.maxY:1/0;return h=>{let n=h.nextTransform.x,d=h.nextTransform.y;n<e&&n<h.prevTransform.x&&(n=Math.min(h.prevTransform.x,e));const c=h.canvasWidth*h.prevTransform.scale,a=o-c;n>a&&n>h.prevTransform.x&&(n=Math.max(h.prevTransform.x,a)),d<i&&d<h.prevTransform.y&&(d=Math.min(h.prevTransform.y,i));const l=h.canvasHeight*h.prevTransform.scale,w=s-l;return d>w&&d>h.prevTransform.y&&(d=Math.max(h.prevTransform.y,w)),{scale:h.nextTransform.scale,x:n,y:d}}},We=t=>{const e=t.maxContentScale,o=t.minContentScale,i=e!==null?1/e:0,s=o!==null?1/o:1/0;return h=>{const n=h.prevTransform,d=h.nextTransform;let c=d.scale,a=d.x,l=d.y;if(d.scale>s&&d.scale>n.scale){c=Math.max(n.scale,s),a=n.x,l=n.y;const w=(c-n.scale)/(d.scale-n.scale);a=n.x+(d.x-n.x)*w,l=n.y+(d.y-n.y)*w}if(d.scale<i&&d.scale<n.scale){c=Math.min(n.scale,i),a=n.x,l=n.y;const w=(c-n.scale)/(d.scale-n.scale);a=n.x+(d.x-n.x)*w,l=n.y+(d.y-n.y)*w}return{scale:c,x:a,y:l}}},$e=t=>e=>t.reduce((o,i)=>i({prevTransform:e.prevTransform,nextTransform:o,canvasWidth:e.canvasWidth,canvasHeight:e.canvasHeight}),e.nextTransform),se=t=>{if(typeof t=="function")return t;switch(t.type){case"scale-limit":return We({minContentScale:t.minContentScale??0,maxContentScale:t.maxContentScale??1/0});case"shift-limit":return Ce({minX:t.minX??-1/0,maxX:t.maxX??1/0,minY:t.minY??-1/0,maxY:t.maxY??1/0})}},Fe=t=>{var A,p,x,P,D,N,V,U,xe,be,Te,Pe;const e=(A=t==null?void 0:t.scale)==null?void 0:A.mouseWheelSensitivity,o=e!==void 0?e:1.2,i=t==null?void 0:t.transformPreprocessor;let s;i!==void 0?Array.isArray(i)?s=$e(i.map(M=>se(M))):s=se(i):s=M=>M.nextTransform;const h=((p=t==null?void 0:t.shift)==null?void 0:p.cursor)!==void 0?t.shift.cursor:"grab",n=((x=t==null?void 0:t.events)==null?void 0:x.onBeforeTransformChange)??(()=>{}),d=((P=t==null?void 0:t.events)==null?void 0:P.onTransformChange)??(()=>{}),c=(D=t==null?void 0:t.shift)==null?void 0:D.mouseDownEventVerifier,a=c!==void 0?c:M=>M.button===0,l=(N=t==null?void 0:t.shift)==null?void 0:N.mouseUpEventVerifier,w=l!==void 0?l:M=>M.button===0,y=(V=t==null?void 0:t.scale)==null?void 0:V.mouseWheelEventVerifier,E=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:((U=t==null?void 0:t.events)==null?void 0:U.onTransformStarted)??(()=>{}),onTransformFinished:((xe=t==null?void 0:t.events)==null?void 0:xe.onTransformFinished)??(()=>{}),onBeforeTransformChange:n,onTransformChange:d,transformPreprocessor:s,shiftCursor:h,mouseDownEventVerifier:a,mouseUpEventVerifier:w,mouseWheelEventVerifier:E,scaleWheelFinishTimeout:((be=t==null?void 0:t.scale)==null?void 0:be.wheelFinishTimeout)??500,onResizeTransformStarted:((Te=t==null?void 0:t.events)==null?void 0:Te.onResizeTransformStarted)??(()=>{}),onResizeTransformFinished:((Pe=t==null?void 0:t.events)==null?void 0:Pe.onResizeTransformFinished)??(()=>{})}},Oe=(t,e,o)=>({scale:t.scale,x:t.x+t.scale*e,y:t.y+t.scale*o}),ke=(t,e,o,i)=>({scale:t.scale*e,x:t.scale*(1-e)*o+t.x,y:t.scale*(1-e)*i+t.y}),W=t=>{const e=[],o=t.touches.length;for(let d=0;d<o;d++)e.push([t.touches[d].clientX,t.touches[d].clientY]);const i=e.reduce((d,c)=>[d[0]+c[0],d[1]+c[1]],[0,0]),s=[i[0]/o,i[1]/o],n=e.map(d=>[d[0]-s[0],d[1]-s[1]]).reduce((d,c)=>d+Math.sqrt(c[0]*c[0]+c[1]*c[1]),0);return{x:s[0],y:s[1],scale:n/o,touchesCnt:o,touches:e}};class ${constructor(e,o,i,s){r(this,"viewport");r(this,"prevTouches",null);r(this,"wheelFinishTimer",null);r(this,"transformInProgress",!1);r(this,"onBeforeDestroy",()=>{this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.observer.unobserve(this.element),this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("wheel",this.preventWheelScaleListener),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onMouseDown",e=>{this.element===null||!this.config.mouseDownEventVerifier(e)||(C(this.element,this.config.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}),this.startRegisteredTransform())});r(this,"onWindowMouseMove",e=>{const o=R(this.window,this.element,e.clientX,e.clientY);if(this.element===null||!o){this.stopMouseDrag();return}const i=-e.movementX,s=-e.movementY;this.moveViewport(i,s)});r(this,"onWindowMouseUp",e=>{this.element===null||!this.config.mouseUpEventVerifier(e)||this.stopMouseDrag()});r(this,"onWheelScroll",e=>{if(!this.config.mouseWheelEventVerifier(e))return;const{left:o,top:i}=this.element.getBoundingClientRect(),s=e.clientX-o,h=e.clientY-i,d=1/(e.deltaY<0?this.config.wheelSensitivity:1/this.config.wheelSensitivity);this.wheelFinishTimer===null&&this.config.onTransformStarted(),this.scaleViewport(d,s,h),this.wheelFinishTimer!==null&&clearTimeout(this.wheelFinishTimer),this.wheelFinishTimer=setTimeout(()=>{this.transformInProgress||this.config.onTransformFinished(),this.wheelFinishTimer=null},this.config.scaleWheelFinishTimeout)});r(this,"onTouchStart",e=>{if(this.prevTouches!==null){this.prevTouches=W(e);return}this.prevTouches=W(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()});r(this,"onWindowTouchMove",e=>{const o=W(e);if(!o.touches.every(s=>R(this.window,this.element,s[0],s[1]))){this.stopTouchDrag();return}if((o.touchesCnt===1||o.touchesCnt===2)&&this.moveViewport(-(o.x-this.prevTouches.x),-(o.y-this.prevTouches.y)),o.touchesCnt===2){const{left:s,top:h}=this.element.getBoundingClientRect(),n=this.prevTouches.x-s,d=this.prevTouches.y-h,a=1/(o.scale/this.prevTouches.scale);this.scaleViewport(a,n,d)}this.prevTouches=o});r(this,"onWindowTouchFinish",e=>{e.touches.length>0?this.prevTouches=W(e):this.stopTouchDrag()});r(this,"observer",new ResizeObserver(()=>{const e=this.viewport.getViewportMatrix(),{width:o,height:i}=this.element.getBoundingClientRect(),s=this.config.transformPreprocessor({prevTransform:e,nextTransform:e,canvasWidth:o,canvasHeight:i});this.config.onResizeTransformStarted(),this.canvas.patchViewportMatrix(s),this.config.onResizeTransformFinished()}));r(this,"config");r(this,"preventWheelScaleListener",e=>{e.preventDefault()});this.canvas=e,this.element=o,this.window=i,this.element.addEventListener("wheel",this.preventWheelScaleListener,{passive:!1}),this.config=Fe(s),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,o,i,s){new $(e,o,i,s)}moveViewport(e,o){const i=this.viewport.getViewportMatrix(),s=Oe(i,e,o),{width:h,height:n}=this.element.getBoundingClientRect(),d=this.config.transformPreprocessor({prevTransform:i,nextTransform:s,canvasWidth:h,canvasHeight:n});this.performTransform(d)}scaleViewport(e,o,i){const s=this.canvas.viewport.getViewportMatrix(),h=ke(s,e,o,i),{width:n,height:d}=this.element.getBoundingClientRect(),c=this.config.transformPreprocessor({prevTransform:s,nextTransform:h,canvasWidth:n,canvasHeight:d});this.performTransform(c)}stopMouseDrag(){C(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.config.onBeforeTransformChange(),this.canvas.patchViewportMatrix(e),this.config.onTransformChange()}startRegisteredTransform(){this.transformInProgress=!0,this.config.onTransformStarted()}finishRegisteredTransform(){this.transformInProgress=!1,this.config.onTransformFinished()}}class Y{constructor(e,o,i,s,h,n){r(this,"canvasResizeObserver");r(this,"nodeHorizontal");r(this,"nodeVertical");r(this,"viewport");r(this,"viewportWidth",0);r(this,"viewportHeight",0);r(this,"viewportMatrix");r(this,"loadedArea",{xFrom:1/0,xTo:1/0,yFrom:1/0,yTo:1/0});r(this,"updateLoadedArea",e=>{this.loadedArea={xFrom:e.x,xTo:e.x+e.width,yFrom:e.y,yTo:e.y+e.height}});r(this,"onBeforeDestroy",()=>{this.trigger.unsubscribe(this.updateLoadedArea),this.canvasResizeObserver.unobserve(this.element),this.canvas.viewport.onAfterUpdated.unsubscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onAfterViewportUpdated",()=>{this.userTransformInProgress||(this.viewportMatrix=this.viewport.getViewportMatrix(),this.loadAreaAroundViewport())});r(this,"userTransformInProgress",!1);var E,A,p,x,P;this.canvas=e,this.element=o,this.window=i,this.trigger=h,this.virtualScrollOptions=n,this.nodeHorizontal=this.virtualScrollOptions.nodeContainingRadius.horizontal,this.nodeVertical=this.virtualScrollOptions.nodeContainingRadius.vertical,this.canvasResizeObserver=new ResizeObserver(D=>{const N=D[0];this.viewportWidth=N.contentRect.width,this.viewportHeight=N.contentRect.height,this.scheduleLoadAreaAroundViewport()}),this.viewport=e.viewport;const d=((E=s==null?void 0:s.events)==null?void 0:E.onResizeTransformStarted)??(()=>{}),c=((A=s==null?void 0:s.events)==null?void 0:A.onResizeTransformFinished)??(()=>{}),a=((p=s==null?void 0:s.events)==null?void 0:p.onTransformChange)??(()=>{}),l=((x=s==null?void 0:s.events)==null?void 0:x.onBeforeTransformChange)??(()=>{}),w=((P=s==null?void 0:s.events)==null?void 0:P.onTransformFinished)??(()=>{}),y={...s,events:{...s==null?void 0:s.events,onResizeTransformStarted:()=>{this.userTransformInProgress=!0,d()},onResizeTransformFinished:()=>{this.userTransformInProgress=!1,c()},onBeforeTransformChange:()=>{this.userTransformInProgress=!0,l()},onTransformChange:()=>{this.userTransformInProgress=!1;const D=this.viewportMatrix;this.viewportMatrix=this.viewport.getViewportMatrix(),D.scale!==this.viewportMatrix.scale&&this.scheduleEnsureViewportAreaLoaded(),a()},onTransformFinished:()=>{this.scheduleLoadAreaAroundViewport(),w()}}};$.configure(e,this.element,this.window,y),this.viewportMatrix=this.viewport.getViewportMatrix(),this.trigger.subscribe(this.updateLoadedArea),this.canvasResizeObserver.observe(this.element),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterViewportUpdated),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o,i,s,h,n){new Y(e,o,i,s,h,n)}scheduleLoadAreaAroundViewport(){setTimeout(()=>{this.loadAreaAroundViewport()})}scheduleEnsureViewportAreaLoaded(){const e=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,i=this.viewportMatrix.x-this.nodeHorizontal,s=this.viewportMatrix.y-this.nodeVertical,h=this.viewportMatrix.x+e+this.nodeHorizontal,n=this.viewportMatrix.y+o+this.nodeVertical;this.loadedArea.xFrom<i&&this.loadedArea.xTo>h&&this.loadedArea.yFrom<s&&this.loadedArea.yTo>n||this.scheduleLoadAreaAroundViewport()}loadAreaAroundViewport(){const e=this.viewportWidth*this.viewportMatrix.scale,o=this.viewportHeight*this.viewportMatrix.scale,i=this.viewportMatrix.x-e-this.nodeHorizontal,s=this.viewportMatrix.y-o-this.nodeVertical,h=3*e+2*this.nodeHorizontal,n=3*o+2*this.nodeVertical;this.trigger.emit({x:i,y:s,width:h,height:n})}}const ze=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","svg");return t.style.position="absolute",t.style.inset="0",t},Xe=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","rect");return t.setAttribute("fill","url(#pattern)"),t},Ye=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","pattern");return t.setAttribute("id","pattern"),t},He=(t,e)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","circle");return o.setAttribute("cx","0"),o.setAttribute("cy","0"),o.setAttribute("r",`${t}`),o.setAttribute("fill",`${e}`),o},je=t=>t instanceof SVGElement?t:He((t==null?void 0:t.radius)??1.5,(t==null?void 0:t.color)??"#d8d8d8"),Ge=t=>{const e=t.tileDimensions,o=(e==null?void 0:e.width)??25,i=(e==null?void 0:e.height)??25,s=je(t.renderer??{});return{tileWidth:o,tileHeight:i,renderer:s,maxViewportScale:t.maxViewportScale??10}};class H{constructor(e,o,i){r(this,"svg",ze());r(this,"patternRenderingRectangle",Xe());r(this,"pattern",Ye());r(this,"patternContent");r(this,"tileWidth");r(this,"tileHeight");r(this,"halfTileWidth");r(this,"halfTileHeight");r(this,"maxViewportScale");r(this,"visible",!1);r(this,"resizeObserver",new ResizeObserver(e=>{const o=e[0],{width:i,height:s}=o.contentRect;this.svg.setAttribute("width",`${i}`),this.svg.setAttribute("height",`${s}`),this.patternRenderingRectangle.setAttribute("width",`${i}`),this.patternRenderingRectangle.setAttribute("height",`${s}`);const h=this.tileWidth/i,n=this.tileHeight/s;this.pattern.setAttribute("width",`${h}`),this.pattern.setAttribute("height",`${n}`)}));r(this,"onAfterTransformUpdated",()=>{const e=this.canvas.viewport.getContentMatrix(),o=e.x-this.halfTileWidth*e.scale,i=e.y-this.halfTileHeight*e.scale,s=`matrix(${e.scale}, 0, 0, ${e.scale}, ${o}, ${i})`;this.pattern.setAttribute("patternTransform",s),this.updateVisibility()});r(this,"onBeforeDestroy",()=>{this.resizeObserver.unobserve(this.host),this.host.removeChild(this.svg),this.canvas.viewport.onAfterUpdated.unsubscribe(this.onAfterTransformUpdated),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});this.canvas=e,this.host=i;const s=Ge(o);this.tileWidth=s.tileWidth,this.tileHeight=s.tileHeight,this.halfTileWidth=this.tileWidth/2,this.halfTileHeight=this.tileHeight/2,this.patternContent=s.renderer,this.maxViewportScale=s.maxViewportScale;const h=`translate(${this.halfTileWidth}, ${this.halfTileHeight})`;this.patternContent.setAttribute("transform",h),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.host),this.canvas.viewport.onAfterUpdated.subscribe(this.onAfterTransformUpdated),this.onAfterTransformUpdated(),this.canvas.onBeforeDestroy.subscribe(this.onBeforeDestroy)}static configure(e,o,i){new H(e,o,i)}updateVisibility(){const o=this.canvas.viewport.getViewportMatrix().scale>this.maxViewportScale;o&&this.visible?(this.visible=!1,this.host.removeChild(this.svg)):!o&&!this.visible&&(this.visible=!0,this.host.appendChild(this.svg))}}const Ze=t=>{var d,c,a;const e=()=>"direct",o=l=>l,i=l=>l.button===0,s=()=>{},h=()=>{},n=()=>{};return{connectionTypeResolver:t.connectionTypeResolver??e,connectionPreprocessor:t.connectionPreprocessor??o,mouseDownEventVerifier:t.mouseDownEventVerifier??i,mouseUpEventVerifier:t.mouseUpEventVerifier??i,onAfterEdgeCreated:((d=t.events)==null?void 0:d.onAfterEdgeCreated)??s,onEdgeCreationInterrupted:((c=t.events)==null?void 0:c.onEdgeCreationInterrupted)??n,onEdgeCreationPrevented:((a=t.events)==null?void 0:a.onEdgeCreationPrevented)??h,dragPortDirection:t.dragPortDirection??void 0}};class j{constructor(e,o,i,s,h,n){r(this,"config");r(this,"overlayCanvas");r(this,"staticOverlayPortId","static");r(this,"draggingOverlayPortId","dragging");r(this,"staticPortId",null);r(this,"isDirect",!0);r(this,"onAfterPortMarked",e=>{const o=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortsIds(o.element).length===1&&this.hookPortEvents(o.element)});r(this,"onBeforePortUnmarked",e=>{const o=this.canvas.graph.getPort(e);this.canvas.graph.getElementPortsIds(o.element).length===1&&this.unhookPortEvents(o.element)});r(this,"onPortMouseDown",e=>{const o=e.currentTarget;this.config.mouseDownEventVerifier(e)&&this.isPortConnectionAllowed(o)&&(e.stopPropagation(),this.grabPort(o,{x:e.clientX,y:e.clientY}),this.window.addEventListener("mousemove",this.onWindowMouseMove,{passive:!0}),this.window.addEventListener("mouseup",this.onWindowMouseUp,{passive:!0}))});r(this,"onWindowMouseMove",e=>{if(!R(this.window,this.overlayLayer,e.clientX,e.clientY)){this.stopMouseDrag();return}this.moveDraggingNode({x:e.clientX,y:e.clientY})});r(this,"onWindowMouseUp",e=>{this.config.mouseUpEventVerifier(e)&&(this.tryCreateConnection({x:e.clientX,y:e.clientY}),this.stopMouseDrag())});r(this,"onPortTouchStart",e=>{const o=e.currentTarget;if(!(e.touches.length===1&&this.isPortConnectionAllowed(o)))return;e.stopPropagation();const s=e.touches[0];this.grabPort(o,{x:s.clientX,y:s.clientY}),this.window.addEventListener("touchmove",this.onWindowTouchMove,{passive:!0}),this.window.addEventListener("touchend",this.onWindowTouchFinish,{passive:!0}),this.window.addEventListener("touchcancel",this.onWindowTouchFinish,{passive:!0})});r(this,"onWindowTouchMove",e=>{const o=e.touches[0];if(!R(this.window,this.overlayLayer,o.clientX,o.clientY)){this.stopTouchDrag();return}this.moveDraggingNode({x:o.clientX,y:o.clientY})});r(this,"onWindowTouchFinish",e=>{const o=e.changedTouches[0];this.tryCreateConnection({x:o.clientX,y:o.clientY}),this.stopTouchDrag()});r(this,"onBeforeClear",()=>{this.canvas.graph.getAllPortIds().forEach(e=>{const o=this.canvas.graph.getPort(e);this.unhookPortEvents(o.element)})});r(this,"onBeforeDestroy",()=>{this.stopMouseDrag(),this.stopTouchDrag(),this.canvas.graph.onAfterPortMarked.unsubscribe(this.onAfterPortMarked),this.canvas.graph.onBeforePortUnmarked.unsubscribe(this.onBeforePortUnmarked),this.canvas.graph.onBeforeClear.unsubscribe(this.onBeforeClear),this.canvas.onBeforeDestroy.unsubscribe(this.onBeforeDestroy)});r(this,"onEdgeCreated",e=>{this.config.onAfterEdgeCreated(e)});this.canvas=e,this.overlayLayer=o,this.viewportStore=i,this.window=s,this.config=Ze(n);const d=new oe,c=new ee(d,this.viewportStore,this.overlayLayer);this.overlayCanvas=new te(this.overlayLayer,d,this.viewportStore,c,h),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,o,i,s,h,n){new j(e,o,i,s,h,n)}grabPort(e,o){const i=this.canvas.graph.getElementPortsIds(e)[0],s=this.canvas.graph.getPort(i);this.staticPortId=i;const h=this.config.connectionTypeResolver(this.staticPortId),n=e.getBoundingClientRect(),d=n.x+n.width/2,c=n.y+n.height/2,a=this.overlayLayer.getBoundingClientRect(),l=this.canvas.viewport.getViewportMatrix(),w=m(l,{x:d-a.x,y:c-a.y}),y=m(l,{x:o.x-a.x,y:o.y-a.y}),E={overlayId:this.staticOverlayPortId,portCoords:w,portDirection:s.direction},A={overlayId:this.draggingOverlayPortId,portCoords:y,portDirection:this.config.dragPortDirection};this.isDirect=h==="direct";const p=this.isDirect?E:A,x=this.isDirect?A:E;this.createOverlayGraph(p,x)}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.resetDragState(),this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}stopTouchDrag(){this.resetDragState(),this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}resetDragState(){this.staticPortId=null,this.isDirect=!0,this.overlayCanvas.clear()}createOverlayGraph(e,o){const i=this.createAddNodeRequest(e);this.overlayCanvas.addNode(i);const s=this.createAddNodeRequest(o);this.overlayCanvas.addNode(s),this.overlayCanvas.addEdge({from:e.overlayId,to:o.overlayId})}createAddNodeRequest(e){const o=document.createElement("div");return{id:e.overlayId,element:o,x:e.portCoords.x,y:e.portCoords.y,ports:[{id:e.overlayId,element:o,direction:e.portDirection}]}}tryCreateConnection(e){const o=this.findPortAtPoint(e);if(o===null){this.config.onEdgeCreationInterrupted(this.staticPortId,this.isDirect);return}const i=this.isDirect?this.staticPortId:o,s=this.isDirect?o:this.staticPortId,h={from:i,to:s},n=this.config.connectionPreprocessor(h);n!==null?(this.canvas.graph.onAfterEdgeAdded.subscribe(this.onEdgeCreated),this.canvas.addEdge(n),this.canvas.graph.onAfterEdgeAdded.unsubscribe(this.onEdgeCreated)):this.config.onEdgeCreationPrevented(h)}moveDraggingNode(e){const o=this.overlayLayer.getBoundingClientRect(),i={x:e.x-o.x,y:e.y-o.y},s=this.canvas.viewport.getViewportMatrix(),h=m(s,i);this.overlayCanvas.updateNode(this.draggingOverlayPortId,{x:h.x,y:h.y})}findPortAtPoint(e){const o=document.elementsFromPoint(e.x,e.y);for(const i of o){const s=this.findPortAtElement(i);if(s!==null)return s}return null}findPortAtElement(e){let o=e,i=null;for(;o!==null&&(i=this.canvas.graph.getElementPortsIds(o)[0]??null,i===null);)o=o.parentElement;return i}isPortConnectionAllowed(e){const o=this.canvas.graph.getElementPortsIds(e)[0];return this.config.connectionTypeResolver(o)!==null}}const Je=()=>{const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t},G=()=>{const t=document.createElement("div");return t.style.position="absolute",t.style.inset="0",t};class Ke{constructor(e){r(this,"background",G());r(this,"main",G());r(this,"overlay",G());r(this,"host",Je());this.element=e,this.element.appendChild(this.host),this.host.appendChild(this.background),this.host.appendChild(this.main),this.overlay.style.pointerEvents="none",this.host.appendChild(this.overlay)}destroy(){this.host.removeChild(this.background),this.host.removeChild(this.main),this.host.removeChild(this.overlay),this.element.removeChild(this.host)}}const Qe=(t,e)=>({x:t/2,y:e/2}),Z=t=>()=>t,ne=Z(0),_e=()=>{let t=0;return()=>t++},qe=(t,e)=>{let o=ne,i=ne;const s=_e();return t==="incremental"&&(o=s),e==="incremental"&&(i=s),typeof t=="number"&&(o=Z(t)),typeof e=="number"&&(i=Z(e)),typeof t=="function"&&(o=t),typeof e=="function"&&(i=e),{nodesPriorityFn:o,edgesPriorityFn:i}},f=(t,e,o)=>({x:e.x*t.x-e.y*t.y+((1-e.x)*o.x+e.y*o.y),y:e.y*t.x+e.x*t.y+((1-e.x)*o.y-e.y*o.x)}),g={x:0,y:0},et=t=>{const e=f({x:t.arrowLength,y:g.y},t.sourceDirection,g),o=f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to),i={x:e.x+t.sourceDirection.x*t.curvature,y:e.y+t.sourceDirection.y*t.curvature},s={x:o.x-t.targetDirection.x*t.curvature,y:o.y-t.targetDirection.y*t.curvature},h=`M ${e.x} ${e.y} C ${i.x} ${i.y}, ${s.x} ${s.y}, ${o.x} ${o.y}`,n=t.hasSourceArrow?"":`M ${g.x} ${g.y} L ${e.x} ${e.y} `,d=t.hasTargetArrow?"":` M ${o.x} ${o.y} L ${t.to.x} ${t.to.y}`;return`${n}${h}${d}`},tt=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.sourceDirection,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to):t.to,i=t.arrowLength,s=Math.cos(t.detourDirection)*t.detourDistance,h=Math.sin(t.detourDirection)*t.detourDistance,n=s*t.flipX,d=h*t.flipY,c=f({x:i,y:g.y},t.sourceDirection,g),a={x:c.x+n,y:c.y+d},l=f({x:t.to.x-i,y:t.to.y},t.targetDirection,t.to),w={x:l.x+n,y:l.y+d},y={x:(a.x+w.x)/2,y:(a.y+w.y)/2},E={x:c.x+t.curvature*t.sourceDirection.x,y:c.y+t.curvature*t.sourceDirection.y},A={x:l.x-t.curvature*t.targetDirection.x,y:l.y-t.curvature*t.targetDirection.y},p={x:c.x+n,y:c.y+d},x={x:l.x+n,y:l.y+d};return[`M ${e.x} ${e.y}`,`L ${c.x} ${c.y}`,`C ${E.x} ${E.y} ${p.x} ${p.y} ${y.x} ${y.y}`,`C ${x.x} ${x.y} ${A.x} ${A.y} ${l.x} ${l.y}`,`L ${o.x} ${o.y}`].join(" ")},I=(t,e)=>{const o=[];if(t.length>0&&o.push(`M ${t[0].x} ${t[0].y}`),t.length===2&&o.push(`L ${t[1].x} ${t[1].y}`),t.length>2){const i=t.length-1;let s=0,h=0,n=0;t.forEach((d,c)=>{let a=0,l=0,w=0;const y=c>0,E=c<i,A=y&&E;if(y&&(a=-s,l=-h,w=n),E){const U=t[c+1];s=U.x-d.x,h=U.y-d.y,n=Math.sqrt(s*s+h*h)}const x=n!==0?Math.min((A?e:0)/n,c<i-1?.5:1):0,P=A?{x:d.x+s*x,y:d.y+h*x}:d,N=w!==0?Math.min((A?e:0)/w,c>1?.5:1):0,V=A?{x:d.x+a*N,y:d.y+l*N}:d;c>0&&o.push(`L ${V.x} ${V.y}`),A&&o.push(`C ${d.x} ${d.y} ${d.x} ${d.y} ${P.x} ${P.y}`)})}return o.join(" ")},ot=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.sourceDirection,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=i-t.roundness,h=f({x:s,y:g.y},t.sourceDirection,g),n=f({x:t.to.x-s,y:t.to.y},t.targetDirection,t.to),d=Math.max((h.x+n.x)/2,i),c=t.to.y/2,a={x:t.flipX>0?d:-i,y:h.y},l={x:a.x,y:c},w={x:t.flipX>0?t.to.x-d:t.to.x+i,y:n.y},y={x:w.x,y:c};return I([e,h,a,l,y,w,n,o],t.roundness)},J=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.sourceDirection,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=f({x:i,y:g.y},t.sourceDirection,g),h=Math.cos(t.detourDirection)*t.detourDistance,n=Math.sin(t.detourDirection)*t.detourDistance,d=h*t.flipX,c=n*t.flipY,a={x:s.x+d,y:s.y+c},l=f({x:t.to.x-i,y:t.to.y},t.targetDirection,t.to),w={x:l.x+d,y:l.y+c};return I([e,s,a,w,l,o],t.roundness)},rt=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.sourceDirection,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=f({x:i,y:g.y},t.sourceDirection,g),h=f({x:t.to.x-i,y:t.to.y},t.targetDirection,t.to);return I([e,s,h,o],t.roundness)},it=t=>{const e=t.hasSourceArrow?f({x:t.arrowLength,y:g.y},t.sourceDirection,g):g,o=t.hasTargetArrow?f({x:t.to.x-t.arrowLength,y:t.to.y},t.targetDirection,t.to):t.to,i=t.arrowLength+t.arrowOffset,s=i-t.roundness,h=f({x:s,y:g.y},t.sourceDirection,g),n=f({x:t.to.x-s,y:t.to.y},t.targetDirection,t.to),d=Math.max((h.y+n.y)/2,i),c=t.to.x/2,a={x:h.x,y:t.flipY>0?d:-i},l={x:c,y:a.y},w={x:n.x,y:t.flipY>0?t.to.y-d:t.to.y+i},y={x:c,y:w.y};return I([e,h,a,l,y,w,n,o],t.roundness)},K=t=>{const e=t.arrowOffset,o=t.side,i=t.arrowLength+e,s=i+2*o,n=[{x:t.arrowLength,y:g.y},{x:i,y:g.y},{x:i,y:t.side},{x:s,y:t.side},{x:s,y:-t.side},{x:i,y:-t.side},{x:i,y:g.y},{x:t.arrowLength,y:g.y}].map(c=>f(c,t.sourceDirection,g)),d=`M ${g.x} ${g.y} L ${n[0].x} ${n[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":d}${I(n,t.roundness)}`},st=t=>{const e=t.smallRadius,o=t.radius,i=Math.sqrt(e*e+o*o),s=e+o,h=t.arrowLength+i*(1-o/s),n=e*o/s,c=[{x:t.arrowLength,y:g.y},{x:h,y:n},{x:h,y:-n}].map(w=>f(w,t.sourceDirection,g)),a=[`M ${c[0].x} ${c[0].y}`,`A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),l=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${t.hasSourceArrow||t.hasTargetArrow?"":l}${a}`},he=(t,e)=>{t.style.transform=`translate(${e.x}px, ${e.y}px)`,t.style.width=`${Math.max(e.width,1)}px`,t.style.height=`${Math.max(e.height,1)}px`},Q=Object.freeze({edgeColor:"--edge-color"}),de=t=>{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(Q.edgeColor,t),e},F=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",`var(${Q.edgeColor})`),t},ce=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.transformOrigin="50% 50%",t},ae=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke",`var(${Q.edgeColor})`),e.setAttribute("stroke-width",`${t}`),e.setAttribute("fill","none"),e},le=(t,e)=>{const o={x:t.x+t.width/2,y:t.y+t.height/2},i={x:e.x+e.width/2,y:e.y+e.height/2},s=Math.min(o.x,i.x),h=Math.min(o.y,i.y),n=Math.abs(i.x-o.x),d=Math.abs(i.y-o.y),c=o.x<=i.x?1:-1,a=o.y<=i.y?1:-1;return{x:s,y:h,width:n,height:d,flipX:c,flipY:a}},_=(t,e,o,i)=>{const h=[g,{x:o,y:i},{x:o,y:-i}].map(a=>f(a,t,g)).map(a=>({x:a.x+e.x,y:a.y+e.y})),n=`M ${h[0].x} ${h[0].y}`,d=`L ${h[1].x} ${h[1].y}`,c=`L ${h[2].x} ${h[2].y}`;return`${n} ${d} ${c} Z`},u=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}),ue=(t,e,o)=>({x:e*Math.cos(t),y:o*Math.sin(t)});class B{constructor(e){r(this,"svg");r(this,"group",ce());r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.params=e,this.svg=de(e.color),this.svg.appendChild(this.group),this.line=ae(e.width),this.group.appendChild(this.line),e.hasSourceArrow&&(this.sourceArrow=F(),this.group.appendChild(this.sourceArrow)),e.hasTargetArrow&&(this.targetArrow=F(),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:i,width:s,height:h,flipX:n,flipY:d}=le(e.from,e.to);he(this.svg,{x:o,y:i,width:s,height:h}),this.group.style.transform=`scale(${n}, ${d})`;const c=ue(e.from.direction,n,d),a=ue(e.to.direction,n,d),l={x:s,y:h};let w=a,y=-this.params.arrowLength,E;e.from.portId===e.to.portId?(E=this.params.createCyclePath,w=c,y=this.params.arrowLength):e.from.nodeId===e.to.nodeId?E=this.params.createDetourPath:E=this.params.createLinePath;const A=E(c,a,l,n,d);if(this.line.setAttribute("d",A),this.sourceArrow){const p=_(c,g,this.params.arrowLength,this.params.arrowWidth);this.sourceArrow.setAttribute("d",p)}if(this.targetArrow){const p=_(w,l,y,this.params.arrowWidth);this.targetArrow.setAttribute("d",p)}}}class ge{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"curvature");r(this,"portCycleRadius");r(this,"portCycleSmallRadius");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>st({sourceDirection:e,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>tt({to:i,sourceDirection:e,targetDirection:o,flipX:s,flipY:h,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i)=>et({to:i,sourceDirection:e,targetDirection:o,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.curvature=(e==null?void 0:e.curvature)??u.curvature,this.portCycleRadius=(e==null?void 0:e.cycleRadius)??u.cycleRadius,this.portCycleSmallRadius=(e==null?void 0:e.smallCycleRadius)??u.smallCycleRadius,this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new B({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class we{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,sourceDirection:e,targetDirection:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i,s)=>ot({to:i,sourceDirection:e,targetDirection:o,flipX:s,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new B({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class fe{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,sourceDirection:e,targetDirection:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i)=>rt({to:i,sourceDirection:e,targetDirection:o,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirection,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new B({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}class ve{constructor(e){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"arrowLength");r(this,"arrowWidth");r(this,"arrowOffset");r(this,"roundness");r(this,"cycleSquareSide");r(this,"detourDirection");r(this,"detourDistance");r(this,"hasSourceArrow");r(this,"hasTargetArrow");r(this,"lineShape");r(this,"createCyclePath",e=>K({sourceDirection:e,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createDetourPath",(e,o,i,s,h)=>J({to:i,sourceDirection:e,targetDirection:o,flipX:s,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));r(this,"createLinePath",(e,o,i,s,h)=>it({to:i,sourceDirection:e,targetDirection:o,flipY:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}));this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.arrowOffset=(e==null?void 0:e.arrowOffset)??u.arrowOffset,this.cycleSquareSide=(e==null?void 0:e.cycleSquareSide)??u.cycleSquareSide;const o=(e==null?void 0:e.roundness)??u.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(e==null?void 0:e.detourDirection)??u.detourDirectionVertical,this.detourDistance=(e==null?void 0:e.detourDistance)??u.detourDistance,this.hasSourceArrow=(e==null?void 0:e.hasSourceArrow)??u.hasSourceArrow,this.hasTargetArrow=(e==null?void 0:e.hasTargetArrow)??u.hasTargetArrow,this.lineShape=new B({color:(e==null?void 0:e.color)??u.color,width:(e==null?void 0:e.width)??u.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.lineShape.svg,this.group=this.lineShape.group,this.line=this.lineShape.line,this.sourceArrow=this.lineShape.sourceArrow,this.targetArrow=this.lineShape.targetArrow}render(e){this.lineShape.render(e)}}const ye=t=>{if(t.diagonalDistance===0)return"";const e=t.offset/t.diagonalDistance,o=t.flip*t.to.x,i=t.flip*t.to.y,s={x:o*e+t.shift.x,y:i*e+t.shift.y},h={x:o/t.diagonalDistance,y:i/t.diagonalDistance};return _(h,s,t.arrowLength,t.arrowWidth)},Ae=t=>{const e=t.hasArrow?t.arrowLength:0,o=t.offset+e,i=t.flip*o/t.diagonalDistance;return{x:t.to.x*i+t.shift.x,y:t.to.y*i+t.shift.y}},nt=t=>{const e=Ae({diagonalDistance:t.diagonalDistance,to:t.to,offset:t.sourceOffset,hasArrow:t.hasSourceArrow,flip:1,shift:g,arrowLength:t.arrowLength}),o=Ae({diagonalDistance:t.diagonalDistance,to:t.to,offset:t.targetOffset,hasArrow:t.hasTargetArrow,flip:-1,shift:t.to,arrowLength:t.arrowLength});return`M ${e.x} ${e.y} L ${o.x} ${o.y}`};class Ee{constructor(e){r(this,"svg");r(this,"group",ce());r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);r(this,"color");r(this,"width");r(this,"arrowLength");r(this,"arrowWidth");r(this,"sourceOffset");r(this,"targetOffset");this.color=(e==null?void 0:e.color)??u.color,this.width=(e==null?void 0:e.width)??u.width,this.arrowLength=(e==null?void 0:e.arrowLength)??u.arrowLength,this.arrowWidth=(e==null?void 0:e.arrowWidth)??u.arrowWidth,this.sourceOffset=(e==null?void 0:e.sourceOffset)??u.preOffset,this.targetOffset=(e==null?void 0:e.targetOffset)??u.preOffset,this.svg=de(this.color),this.svg.appendChild(this.group),this.line=ae(this.width),this.group.appendChild(this.line),e!=null&&e.hasSourceArrow&&(this.sourceArrow=F(),this.group.appendChild(this.sourceArrow)),e!=null&&e.hasTargetArrow&&(this.targetArrow=F(),this.group.appendChild(this.targetArrow))}render(e){const{x:o,y:i,width:s,height:h,flipX:n,flipY:d}=le(e.from,e.to);he(this.svg,{x:o,y:i,width:s,height:h}),this.group.style.transform=`scale(${n}, ${d})`;const c=Math.sqrt(s*s+h*h),a={x:s,y:h};if(c>0){const l=nt({diagonalDistance:c,to:a,sourceOffset:this.sourceOffset,targetOffset:this.targetOffset,hasSourceArrow:this.sourceArrow!==null,hasTargetArrow:this.targetArrow!==null,arrowLength:this.arrowLength});this.line.setAttribute("d",l)}else this.line.setAttribute("d","");if(this.sourceArrow){const l=ye({diagonalDistance:c,to:a,offset:this.sourceOffset,flip:1,shift:g,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength});this.sourceArrow.setAttribute("d",l)}if(this.targetArrow){const l=ye({diagonalDistance:c,to:a,offset:this.targetOffset,flip:-1,shift:a,arrowWidth:this.arrowWidth,arrowLength:this.arrowLength});this.targetArrow.setAttribute("d",l)}}}const ht=()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","g");return t.style.pointerEvents="auto",t.style.cursor="pointer",t},dt=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke","transparent"),e.setAttribute("stroke-width",`${t}`),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e},pe=t=>{const e=document.createElementNS("http://www.w3.org/2000/svg","path");return e.setAttribute("stroke-linejoin","round"),e.setAttribute("stroke-width",`${t}`),e.setAttribute("fill","transparent"),e.setAttribute("stroke","transparent"),e};class Se extends Error{constructor(e){super(e),this.name="InteractiveEdgeError"}}class q{constructor(e,o){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow");r(this,"targetArrow");r(this,"handle",ht());r(this,"interactiveLine");r(this,"interactiveSourceArrow",null);r(this,"interactiveTargetArrow",null);if(this.structuredEdge=e,e instanceof q)throw new Se("interactive edge can be configured only once");this.svg=this.structuredEdge.svg,this.group=this.structuredEdge.group,this.line=this.structuredEdge.line,this.sourceArrow=this.structuredEdge.sourceArrow,this.targetArrow=this.structuredEdge.targetArrow;const i=(o==null?void 0:o.width)??u.interactiveWidth;this.interactiveLine=dt(i),this.handle.appendChild(this.interactiveLine),this.sourceArrow&&(this.interactiveSourceArrow=pe(i),this.handle.appendChild(this.interactiveSourceArrow)),this.targetArrow&&(this.interactiveTargetArrow=pe(i),this.handle.appendChild(this.interactiveTargetArrow)),this.group.appendChild(this.handle)}render(e){this.structuredEdge.render(e);const o=this.line.getAttribute("d");if(this.interactiveLine.setAttribute("d",o),this.sourceArrow){const i=this.sourceArrow.getAttribute("d");this.interactiveSourceArrow.setAttribute("d",i)}if(this.targetArrow){const i=this.targetArrow.getAttribute("d");this.interactiveTargetArrow.setAttribute("d",i)}}}const ct=t=>{if(typeof t=="function")return t;switch(t==null?void 0:t.type){case"straight":return()=>new fe({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"horizontal":return()=>new we({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"vertical":return()=>new ve({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,arrowOffset:t.arrowOffset,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleSquareSide:t.cycleSquareSide,roundness:t.roundness,detourDistance:t.detourDistance,detourDirection:t.detourDirection});case"direct":return()=>new Ee({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,sourceOffset:t.sourceOffset,targetOffset:t.targetOffset});default:return()=>new ge({color:t.color,width:t.width,arrowLength:t.arrowLength,arrowWidth:t.arrowWidth,hasSourceArrow:t.hasSourceArrow,hasTargetArrow:t.hasTargetArrow,cycleRadius:t.cycleRadius,smallCycleRadius:t.smallCycleRadius,curvature:t.curvature,detourDistance:t.detourDistance,detourDirection:t.detourDirection})}},at=t=>{var o,i,s,h,n;const e=qe((o=t.nodes)==null?void 0:o.priority,(i=t.edges)==null?void 0:i.priority);return{nodes:{centerFn:((s=t.nodes)==null?void 0:s.centerFn)??Qe,priorityFn:e.nodesPriorityFn},ports:{direction:((h=t.ports)==null?void 0:h.direction)??0},edges:{shapeFactory:ct(((n=t.edges)==null?void 0:n.shape)??{}),priorityFn:e.edgesPriorityFn}}};class lt{constructor(e){r(this,"element",null);r(this,"canvasDefaults",{});r(this,"dragConfig",{});r(this,"transformConfig",{});r(this,"backgroundConfig",{});r(this,"connectablePortsConfig",{});r(this,"virtualScrollConfig");r(this,"hasDraggableNode",!1);r(this,"hasTransformableViewport",!1);r(this,"hasResizeReactiveNodes",!1);r(this,"hasBackground",!1);r(this,"hasUserConnectablePorts",!1);r(this,"boxRenderingTrigger");r(this,"window",window);e!==void 0&&(this.element=e)}setElement(e){return this.element=e,this}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}enableResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}enableBoxAreaRendering(e){return this.boxRenderingTrigger=e,this}enableVirtualScroll(e){return this.virtualScrollConfig=e,this}enableBackground(e){return this.hasBackground=!0,this.backgroundConfig=e??{},this}enableUserConnectablePorts(e){return this.connectablePortsConfig=e??{},this.hasUserConnectablePorts=!0,this}build(){if(this.element===null)throw new b("unable to build canvas when no attach element specified");let e=this.boxRenderingTrigger;this.virtualScrollConfig!==void 0&&e===void 0&&(e=new O);const o=new oe,i=new Ie,s=new Ke(this.element);let h=new ee(o,i,s.main);e!==void 0&&(h=new me(h,o,e));const n=at(this.canvasDefaults),d=new te(this.element,o,i,h,n),c=()=>{s.destroy(),d.onBeforeDestroy.unsubscribe(c)};return d.onBeforeDestroy.subscribe(c),this.hasBackground&&H.configure(d,this.backgroundConfig,s.background),this.hasResizeReactiveNodes&&z.configure(d),this.hasDraggableNode&&X.configure(d,s.main,this.window,this.dragConfig),this.hasUserConnectablePorts&&j.configure(d,s.overlay,i,this.window,n,this.connectablePortsConfig),this.virtualScrollConfig!==void 0?Y.configure(d,s.main,this.window,this.transformConfig,e,this.virtualScrollConfig):this.hasTransformableViewport&&$.configure(d,s.main,this.window,this.transformConfig),this.reset(),d}reset(){this.element=null,this.canvasDefaults={},this.dragConfig={},this.transformConfig={},this.backgroundConfig={},this.virtualScrollConfig=void 0,this.hasDraggableNode=!1,this.hasTransformableViewport=!1,this.hasResizeReactiveNodes=!1,this.hasBackground=!1,this.boxRenderingTrigger=void 0,this.hasUserConnectablePorts=!1}}v.BezierEdgeShape=ge,v.CanvasBuilder=lt,v.DirectEdgeShape=Ee,v.EventSubject=O,v.HorizontalEdgeShape=we,v.HtmlGraphError=b,v.InteractiveEdgeError=Se,v.InteractiveEdgeShape=q,v.LineEdgeShape=B,v.StraightEdgeShape=fe,v.VerticalEdgeShape=ve,Object.defineProperty(v,Symbol.toStringTag,{value:"Module"})});

package/package.json

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