npm - @html-graph/html-graph - Versions diffs - 3.12.0 → 3.13.0 - Mend

@html-graph/html-graph 3.12.0 → 3.13.0

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

Files changed (5) hide show

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

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

package/package.json CHANGED Viewed

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