@html-graph/html-graph 0.0.45 → 0.0.47

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(p,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(p=typeof globalThis<"u"?globalThis:p||self,w(p.HTMLGraph={}))})(this,function(p){"use strict";var nt=Object.defineProperty;var st=(p,w,P)=>w in p?nt(p,w,{enumerable:!0,configurable:!0,writable:!0,value:P}):p[w]=P;var r=(p,w,P)=>st(p,typeof w!="symbol"?w+"":w,P);class w{constructor(t){r(this,"canvasWrapper",null);r(this,"host");r(this,"nodesContainer");r(this,"connectionsContainer");r(this,"canvas");r(this,"canvasCtx");r(this,"hostResizeObserver");r(this,"nodesResizeObserver");r(this,"nodeElementToIdMap",new Map);r(this,"nodeWrapperElementToIdMap",new Map);r(this,"nodeIdToWrapperElementMap",new Map);r(this,"connectionIdToElementMap",new Map);r(this,"currentZIndex",0);r(this,"layers",{"connections-on-top":{create:()=>{this.host.appendChild(this.nodesContainer),this.host.appendChild(this.connectionsContainer)},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}},"connections-follow-node":{create:()=>{this.host.appendChild(this.nodesContainer),this.connectionsContainer=this.nodesContainer},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{const e=this.nodeIdToWrapperElementMap.get(t);this.currentZIndex+=2,e.style.zIndex=`${this.currentZIndex}`,this.di.graphStore.getNodeAdjacentConnections(t).forEach(s=>{this.connectionIdToElementMap.get(s).style.zIndex=`${this.currentZIndex-1}`})}},"nodes-on-top":{create:()=>{this.host.appendChild(this.connectionsContainer),this.host.appendChild(this.nodesContainer)},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}}});this.di=t,this.host=this.createHost(),this.canvas=this.createCanvas(),this.nodesContainer=this.createNodesContainer(),this.connectionsContainer=this.createConnectionsContainer();const e=this.canvas.getContext("2d");if(e===null)throw new Error("unable to get canvas context");this.canvasCtx=e,this.host.appendChild(this.canvas);const o=this.di.options.layers.mode;this.layers[o].create(),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.connectionIdToElementMap.keys()).forEach(t=>{this.detachConnection(t)}),Array.from(this.nodeElementToIdMap.values()).forEach(t=>{this.detachNode(t)})}attach(t){this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&this.canvasWrapper.removeChild(this.host)}destroy(){this.hostResizeObserver.disconnect(),this.nodesResizeObserver.disconnect(),this.host.removeChild(this.canvas),this.host.removeChild(this.connectionsContainer),this.host.removeChild(this.nodesContainer),this.canvasWrapper!==null&&this.canvasWrapper.removeChild(this.host)}applyTransform(){this.canvasCtx.clearRect(0,0,this.canvasCtx.canvas.width,this.canvasCtx.canvas.height),this.canvasCtx.save(),this.di.options.background.drawingFn(this.canvasCtx,this.di.publicViewportTransformer),this.canvasCtx.restore();const[t,e]=this.di.viewportTransformer.getViewCoords(0,0),o=this.di.viewportTransformer.getViewScale();this.layers[this.di.options.layers.mode].update(o,t,e)}attachNode(t){const e=this.di.graphStore.getNode(t),o=document.createElement("div");o.appendChild(e.element),o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,o.style.visibility="hidden",this.nodesContainer.appendChild(o),this.nodeElementToIdMap.set(e.element,t),this.nodeWrapperElementToIdMap.set(o,t),this.nodeIdToWrapperElementMap.set(t,o),this.updateNodeCoords(t,e.x,e.y),this.nodesResizeObserver.observe(o),o.style.visibility="visible"}detachNode(t){const e=this.di.graphStore.getNode(t);this.nodesResizeObserver.unobserve(e.element),this.nodesContainer.removeChild(e.element);const o=this.nodeIdToWrapperElementMap.get(t);o.removeChild(e.element),this.nodeElementToIdMap.delete(e.element),this.nodeWrapperElementToIdMap.delete(o),this.nodeIdToWrapperElementMap.delete(t)}attachConnection(t){const o=this.di.graphStore.getConnection(t).controller.svg;o.style.transformOrigin="50% 50%",o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,this.connectionIdToElementMap.set(t,o),this.updateConnectionCoords(t),this.connectionsContainer.appendChild(o)}detachConnection(t){const e=this.connectionIdToElementMap.get(t);this.connectionIdToElementMap.delete(t),this.connectionsContainer.removeChild(e)}moveNodeOnTop(t){this.layers[this.di.options.layers.mode].moveOnTop(t)}updateNodePosition(t){const e=this.di.graphStore.getNode(t),o=this.di.graphStore.getNodeAdjacentConnections(t);this.updateNodeCoords(t,e.x,e.y),o.forEach(s=>{this.updateConnectionCoords(s)})}updatePortConnections(t){this.di.graphStore.getPortAdjacentConnections(t).forEach(o=>{this.updateConnectionCoords(o)})}getViewportDimensions(){const t=this.host.getBoundingClientRect();return[t.width,t.height]}createHost(){const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t}createCanvas(){const t=document.createElement("canvas");return t.style.position="absolute",t.style.inset="0",t}createNodesContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createConnectionsContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.pointerEvents="none",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(t=>{t.forEach(e=>{const o=e.target,s=this.nodeWrapperElementToIdMap.get(o),i=this.di.graphStore.getNode(s);this.updateNodeCoords(s,i.x,i.y),this.di.graphStore.getNodeAdjacentConnections(s).forEach(a=>{this.updateConnectionCoords(a)})})})}updateCanvasDimensions(){const{width:t,height:e}=this.host.getBoundingClientRect();this.canvas.width=t,this.canvas.height=e}updateNodeCoords(t,e,o){const s=this.nodeIdToWrapperElementMap.get(t),{width:i,height:c}=s.getBoundingClientRect(),a=this.di.viewportTransformer.getAbsScale(),h=this.di.graphStore.getNode(t),[l,m]=h.centerFn(i,c);s.style.transform=`matrix(1, 0, 0, 1, ${e-a*l}, ${o-a*m})`}updateConnectionCoords(t){const e=this.di.graphStore.getConnection(t),o=this.di.graphStore.getPort(e.from),s=this.di.graphStore.getPort(e.to),i=o.element.getBoundingClientRect(),c=s.element.getBoundingClientRect(),a=this.host.getBoundingClientRect(),[h,l]=this.di.viewportTransformer.getAbsCoords(i.left-a.left,i.top-a.top),[m,d]=this.di.viewportTransformer.getAbsCoords(c.left-a.left,c.top-a.top),g=this.di.viewportTransformer.getAbsScale(),[u,C]=o.centerFn(i.width*g,i.height*g),[b,S]=s.centerFn(c.width*g,c.height*g),T=u+h,N=C+l,E=b+m,f=S+d,y=Math.min(T,E),A=Math.min(N,f),$=Math.abs(E-T),I=Math.abs(f-N),tt=this.connectionIdToElementMap.get(t),et=T<=E,ot=N<=f;tt.style.transform=`matrix(${et?1:-1}, 0, 0, ${ot?1:-1}, ${y}, ${A})`,e.controller.update(y,A,$,I,o,s)}}class P{constructor(){r(this,"state",{scale:1,x:0,y:0})}applyShift(t,e){this.state={scale:this.state.scale,x:this.state.scale*t+this.state.x,y:this.state.scale*e+this.state.y}}applyScale(t,e,o){this.state={scale:this.state.scale*t,x:this.state.scale*(1-t)*e+this.state.x,y:this.state.scale*(1-t)*o+this.state.y}}getViewCoords(t,e){return[(t-this.state.x)/this.state.scale,(e-this.state.y)/this.state.scale]}getViewScale(){return 1/this.state.scale}getAbsCoords(t,e){return[t*this.state.scale+this.state.x,e*this.state.scale+this.state.y]}getAbsScale(){return this.state.scale}patchState(t,e,o){this.state={scale:t??this.state.scale,x:e??this.state.x,y:o??this.state.y}}}class z{constructor(t){this.transformer=t}getViewCoords(t,e){return this.transformer.getViewCoords(t,e)}getViewScale(){return this.transformer.getViewScale()}getAbsCoords(t,e){return this.transformer.getAbsCoords(t,e)}getAbsScale(){return this.transformer.getAbsScale()}}class v{static getPortCenter(t){const{top:e,left:o,width:s,height:i}=t.element.getBoundingClientRect(),c=t.centerFn(s,i);return[o+c[0],e+c[1]]}static rotate(t,e,o){return[e[0]*t[0]-e[1]*t[1]+((1-e[0])*o[0]+e[1]*o[1]),e[1]*t[0]+e[0]*t[1]+((1-e[0])*o[1]-e[1]*o[0])]}static getDirectionVector(t,e,o){return[e*Math.cos(t??0),o*Math.sin(t??0)]}static getArrowPath(t,e,o,s,i){const a=[[0,0],[s,i],[s,-i]].map(d=>this.rotate(d,t,[0,0])).map(d=>[d[0]+e,d[1]+o]),h=`M ${a[0][0]} ${a[0][1]}`,l=`L ${a[1][0]} ${a[1][1]}`,m=`L ${a[2][0]} ${a[2][1]}`;return`${h} ${l} ${m}`}static getArrowOffsetPath(t,e,o,s,i){const a=[[s,0],[s+i,0]].map(h=>this.rotate(h,t,[0,0])).map(h=>[h[0]+e,h[1]+o]);return`M ${a[0][0]} ${a[0][1]} L ${a[1][0]} ${a[1][1]}`}}class x{constructor(t,e,o,s,i,c,a){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.color=t,this.width=e,this.curvature=o,this.arrowLength=s,this.arrowWidth=i,this.hasSourceArrow=c,this.hasTargetArrow=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",this.hasSourceArrow&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,o,s,i,c){this.svg.style.width=`${o}px`,this.svg.style.height=`${s}px`;const a=v.getPortCenter(i),h=v.getPortCenter(c),l=a[0]<=h[0]?1:-1,m=a[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${l}, ${m})`;const d=v.getDirectionVector(i.direction,l,m),g=v.getDirectionVector(c.direction,l,m),u=v.rotate([this.arrowLength,0],d,[0,0]),C=v.rotate([o-this.arrowLength,s],g,[o,s]),b=[u[0]+d[0]*this.curvature,u[1]+d[1]*this.curvature],S=[C[0]-g[0]*this.curvature,C[1]-g[1]*this.curvature],T=`M ${u[0]} ${u[1]}`,N=`C ${b[0]} ${b[1]}, ${S[0]} ${S[1]}, ${C[0]} ${C[1]}`,E=`M 0 0 L ${u[0]} ${u[1]} `,f=` M ${C[0]} ${C[1]} L ${o} ${s}`,y=`${this.sourceArrow?"":E}${T} ${N}${this.targetArrow?"":f}`;if(this.line.setAttribute("d",y),this.sourceArrow){const A=v.getArrowPath(d,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",A)}if(this.targetArrow){const A=v.getArrowPath(g,o,s,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",A)}}}const M=n=>()=>new x(n.color??"#5c5c5c",n.width??1,n.curvature??90,n.arrowLength??15,n.arrowWidth??4,n.hasSourceArrow??!1,n.hasTargetArrow??!1);class L{constructor(t,e,o,s,i,c,a){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.color=t,this.width=e,this.arrowLength=o,this.arrowWidth=s,this.minPortOffset=i,this.hasSourceArrow=c,this.hasTargetArrow=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",this.hasSourceArrow&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,o,s,i,c){this.svg.style.width=`${o}px`,this.svg.style.height=`${s}px`;const a=v.getPortCenter(i),h=v.getPortCenter(c),l=a[0]<=h[0]?1:-1,m=a[1]<=h[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${l}, ${m})`;const d=v.getDirectionVector(i.direction,l,m),g=v.getDirectionVector(c.direction,l,m),u=v.rotate([this.arrowLength+this.minPortOffset,0],d,[0,0]),C=v.rotate([o-this.arrowLength-this.minPortOffset,s],g,[o,s]),[b,S]=[o/2,s/2],T=l*(C[0]-u[0])>0?`M ${u[0]} ${u[1]} L ${b} ${u[1]} L ${b} ${C[1]} L ${C[0]} ${C[1]}`:`M ${u[0]} ${u[1]} L ${u[0]} ${S} L ${C[0]} ${S} L ${C[0]} ${C[1]}`,N=`M 0 0 L ${u[0]} ${u[1]} `,E=` M ${C[0]} ${C[1]} L ${o} ${s}`,f=v.getArrowOffsetPath(d,0,0,this.arrowLength,this.minPortOffset),y=v.getArrowOffsetPath(g,o,s,-this.arrowLength,-this.minPortOffset),A=`${this.sourceArrow?f:N}${T}${this.targetArrow?y:E}`;if(this.line.setAttribute("d",A),this.sourceArrow){const $=v.getArrowPath(d,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",$)}if(this.targetArrow){const $=v.getArrowPath(g,o,s,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",$)}}}const V=n=>()=>new L(n.color,n.width,n.arrowLength,n.arrowWidth,n.minPortOffset,n.hasSourceArrow,n.hasTargetArrow);var j=(n=>(n.Regular="regular",n.Cycle="cycle",n))(j||{});class G{constructor(t){this.di=t}moveNodeOnTop(t){if(!this.di.graphStore.hasNode(t))throw new Error("failed to move on top nonexisting node");this.di.htmlController.moveNodeOnTop(t)}dragNode(t,e,o){if(!this.di.graphStore.hasNode(t))throw new Error("failed to drag nonexisting node");const s=this.di.graphStore.getNode(t),[i,c]=this.di.viewportTransformer.getViewCoords(s.x,s.y),a=i+e,h=c+o,[l,m]=this.di.viewportTransformer.getAbsCoords(a,h);this.di.graphStore.updateNodeCoords(t,l,m),this.di.htmlController.updateNodePosition(t)}addNode(t,e,o,s,i,c){if(t===void 0)do t=this.di.nodeIdGenerator.next();while(this.di.graphStore.hasNode(t));if(this.di.graphStore.hasNode(t))throw new Error("failed to add node with existing id");this.di.graphStore.addNode(t,e,o,s,c??this.di.options.nodes.centerFn),this.di.htmlController.attachNode(t),i!==void 0&&Object.entries(i).forEach(([a,h])=>{h instanceof HTMLElement?this.di.controller.markPort(a,h,t,this.di.options.ports.centerFn,null):this.di.controller.markPort(a,h.element,t,h.centerFn??this.di.options.ports.centerFn,h.direction??null)})}markPort(t,e,o,s,i){if(t===void 0)do t=this.di.portIdGenerator.next();while(this.di.graphStore.hasPort(t));if(!this.di.graphStore.hasNode(o))throw new Error("failed to set port on nonexisting node");if(this.di.graphStore.hasPort(t))throw new Error("failed to add port with existing id");this.di.graphStore.addPort(t,e,o,s??this.di.options.ports.centerFn,i??null)}updatePortConnections(t){if(!this.di.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.di.htmlController.updatePortConnections(t)}unmarkPort(t){if(!this.di.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.di.graphStore.getPortAdjacentConnections(t).forEach(e=>{this.removeConnection(e)}),this.di.graphStore.removePort(t)}addConnection(t,e,o,s){if(t===void 0)do t=this.di.connectionIdGenerator.next();while(this.di.graphStore.hasConnection(t));if(!this.di.graphStore.hasPort(e))throw new Error("failed to add connection from nonexisting port");if(!this.di.graphStore.hasPort(o))throw new Error("failed to add connection to nonexisting port");this.di.graphStore.addConnection(t,e,o,s(j.Regular)),this.di.htmlController.attachConnection(t)}removeConnection(t){if(!this.di.graphStore.hasConnection(t))throw new Error("failed to remove nonexisting connection");this.di.htmlController.detachConnection(t),this.di.graphStore.removeConnection(t)}removeNode(t){if(!this.di.graphStore.hasNode(t))throw new Error("failed to remove nonexisting node");this.di.htmlController.detachNode(t),this.di.graphStore.removeNode(t)}patchViewportTransform(t,e,o){this.di.viewportTransformer.patchState(t,e,o),this.di.htmlController.applyTransform()}moveContent(t,e){this.di.viewportTransformer.applyShift(-t,-e),this.di.htmlController.applyTransform()}scaleContent(t,e,o){this.di.viewportTransformer.applyScale(1/t,e,o),this.di.htmlController.applyTransform()}moveToNodes(t){if(t.length===0)return;const e=t.map(g=>this.di.graphStore.getNode(g)).filter(g=>g!==void 0);if(e.length<t.length)throw new Error("failed to move to nonexisting node");const[o,s]=e.reduce((g,u)=>[g[0]+u.x,g[1]+u.y],[0,0]),i=o/e.length,c=s/e.length,[a,h]=this.di.htmlController.getViewportDimensions(),l=this.di.viewportTransformer.getAbsScale(),m=i-l*a/2,d=c-l*h/2;this.patchViewportTransform(null,m,d)}updateNodeCoords(t,e,o){if(!this.di.graphStore.hasNode(t))throw new Error("failed to update coordinates of nonexisting node");this.di.graphStore.updateNodeCoords(t,e,o),this.di.htmlController.updateNodePosition(t)}updateConnectionOptions(t,e){if(!this.di.graphStore.hasConnection(t))throw new Error("failed to update nonexisting connection");this.di.htmlController.detachConnection(t),this.di.graphStore.updateConnectionController(t,e),this.di.htmlController.attachConnection(t)}clear(){this.di.htmlController.clear(),this.di.graphStore.clear(),this.di.nodeIdGenerator.reset(),this.di.portIdGenerator.reset(),this.di.connectionIdGenerator.reset()}destroy(){this.di.htmlController.destroy()}}class B{constructor(){r(this,"nodes",Object.create(null));r(this,"ports",Object.create(null));r(this,"nodePorts",Object.create(null));r(this,"portNodeId",Object.create(null));r(this,"connections",Object.create(null));r(this,"incommingConnections",Object.create(null));r(this,"outcommingConnections",Object.create(null));r(this,"cycleConnections",Object.create(null))}getAllNodes(){return Object.keys(this.nodes)}getAllPorts(){return Object.keys(this.ports)}getAllConnections(){return Object.keys(this.connections)}addNode(t,e,o,s,i){this.nodes[t]={element:e,x:o,y:s,centerFn:i},this.nodePorts[t]=Object.create(null)}hasNode(t){return this.nodes[t]!==void 0}getNode(t){return this.nodes[t]}updateNodeCoords(t,e,o){this.nodes[t].x=e,this.nodes[t].y=o}updateConnectionController(t,e){this.connections[t].controller=e}removeNode(t){this.getNodeAdjacentConnections(t).forEach(s=>{this.removeConnection(s)}),delete this.nodes[t];const o=this.nodePorts[t];Object.keys(o).forEach(s=>{delete this.portNodeId[s]}),delete this.nodePorts[t]}addPort(t,e,o,s,i){this.ports[t]={element:e,centerFn:s,direction:i},this.cycleConnections[t]={},this.incommingConnections[t]={},this.outcommingConnections[t]={},this.portNodeId[t]=o;const c=this.nodePorts[o];c!==void 0&&(c[t]=e)}getPort(t){return this.ports[t]}getPortNode(t){return this.portNodeId[t]}hasPort(t){return this.portNodeId[t]!==void 0}removePort(t){Object.keys(this.cycleConnections[t]).forEach(s=>{this.removeConnection(s)}),delete this.cycleConnections[t],Object.keys(this.incommingConnections[t]).forEach(s=>{this.removeConnection(s)}),delete this.incommingConnections[t],Object.keys(this.outcommingConnections[t]).forEach(s=>{this.removeConnection(s)}),delete this.outcommingConnections[t];const e=this.portNodeId[t];delete this.portNodeId[t];const o=this.nodePorts[e];delete o[t],delete this.ports[t]}addConnection(t,e,o,s){this.connections[t]={from:e,to:o,controller:s},e!==o?(this.outcommingConnections[e][t]=!0,this.incommingConnections[o][t]=!0):this.cycleConnections[e][t]=!0}getConnection(t){return this.connections[t]}hasConnection(t){return this.connections[t]!==void 0}removeConnection(t){const e=this.connections[t],o=e.from,s=e.to;delete this.cycleConnections[o][t],delete this.cycleConnections[s][t],delete this.incommingConnections[o][t],delete this.incommingConnections[s][t],delete this.outcommingConnections[o][t],delete this.outcommingConnections[s][t],delete this.connections[t]}getPortIncomingConnections(t){return Object.keys(this.incommingConnections[t]??{})}getPortOutcomingConnections(t){return Object.keys(this.outcommingConnections[t]??{})}getPortCycleConnections(t){return Object.keys(this.cycleConnections[t]??{})}getPortAdjacentConnections(t){return[...this.getPortIncomingConnections(t),...this.getPortOutcomingConnections(t),...this.getPortCycleConnections(t)]}getNodeIncomingConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(s=>{o=[...o,...this.getPortIncomingConnections(s)]}),o}getNodeOutcomingConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(s=>{o=[...o,...this.getPortOutcomingConnections(s)]}),o}getNodeCycleConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(s=>{o=[...o,...this.getPortCycleConnections(s)]}),o}getNodeAdjacentConnections(t){return[...this.getNodeIncomingConnections(t),...this.getNodeOutcomingConnections(t),...this.getNodeCycleConnections(t)]}clear(){this.nodes=Object.create(null),this.ports=Object.create(null),this.nodePorts=Object.create(null),this.portNodeId=Object.create(null),this.connections=Object.create(null),this.incommingConnections=Object.create(null),this.outcommingConnections=Object.create(null),this.cycleConnections=Object.create(null)}}class Y{constructor(t){this.graphStore=t}getNode(t){const e=this.graphStore.getNode(t);return e===void 0?null:{x:e.x,y:e.y}}getPort(t){const e=this.graphStore.getPortNode(t);return e===void 0?null:{nodeId:e}}getConnection(t){const e=this.graphStore.getConnection(t);return e===void 0?null:{from:e.from,to:e.to}}getAllNodes(){return this.graphStore.getAllNodes()}getAllPorts(){return this.graphStore.getAllPorts()}getAllConnections(){return this.graphStore.getAllConnections()}hasNode(t){return this.graphStore.hasNode(t)}hasPort(t){return this.graphStore.hasPort(t)}hasConnection(t){return this.graphStore.hasConnection(t)}getPortIncomingConnections(t){return this.graphStore.getPortIncomingConnections(t)}getPortOutcomingConnections(t){return this.graphStore.getPortOutcomingConnections(t)}getPortCycleConnections(t){return this.graphStore.getPortCycleConnections(t)}getPortAdjacentConnections(t){return this.graphStore.getPortAdjacentConnections(t)}getNodeIncomingConnections(t){return this.graphStore.getNodeIncomingConnections(t)}getNodeOutcomingConnections(t){return this.graphStore.getNodeOutcomingConnections(t)}getNodeCycleConnections(t){return this.graphStore.getNodeCycleConnections(t)}getNodeAdjacentConnections(t){return this.graphStore.getNodeAdjacentConnections(t)}}class O{constructor(){r(this,"counter",0)}next(){const t=`${this.counter}`;return this.counter++,t}reset(){this.counter=0}}class X{constructor(t){r(this,"htmlController");r(this,"viewportTransformer");r(this,"publicViewportTransformer");r(this,"controller");r(this,"graphStore");r(this,"publicGraphStore");r(this,"nodeIdGenerator");r(this,"portIdGenerator");r(this,"connectionIdGenerator");this.options=t,this.htmlController=new w(this),this.viewportTransformer=new P,this.publicViewportTransformer=new z(this.viewportTransformer),this.controller=new G(this),this.graphStore=new B,this.publicGraphStore=new Y(this.graphStore),this.nodeIdGenerator=new O,this.portIdGenerator=new O,this.connectionIdGenerator=new O}}const k=(n,t)=>[n/2,t/2],Z=()=>()=>{},H=(n,t,e,o,s,i)=>{n.fillStyle=i,n.fillRect(0,0,n.canvas.width,n.canvas.height);const c=t.getViewCoords(0,0),a=t.getViewScale(),h=o*a;let l=0,m=0,d=h/2;do d*=2,l=n.canvas.width/d,m=n.canvas.height/d;while(l*m>1e4);const g=c[0]-Math.floor(c[0]/d)*d,u=c[1]-Math.floor(c[1]/d)*d,C=s*a,b=2*Math.PI,S=g-d,T=u-d,N=n.canvas.width+g,E=n.canvas.height+u;n.fillStyle=e;for(let f=S;f<=N;f+=d)for(let y=T;y<=E;y+=d)n.beginPath(),n.arc(f,y,C,0,b),n.closePath(),n.fill()},U=(n,t,e,o)=>(s,i)=>{H(s,i,n,t,e,o)},q=(n,t)=>{n.fillStyle=t,n.fillRect(0,0,n.canvas.width,n.canvas.height)},J=n=>t=>{q(t,n)},K=n=>{switch(n==null?void 0:n.type){case"custom":return n.drawingFn;case"dots":return U(n.dotColor??"#d8d8d8",n.dotGap??25,n.dotRadius??1.5,n.color??"#ffffff");case"color":return J(n.color??"#ffffff");default:return Z()}},F=n=>{switch(n==null?void 0:n.type){case"custom":return n.controllerFactory;case"straight":return V({color:n.color??"#5c5c5c",width:n.width??1,arrowLength:n.arrowLength??15,arrowWidth:n.arrowWidth??4,minPortOffset:n.minPortOffset??15,hasSourceArrow:n.hasSourceArrow??!1,hasTargetArrow:n.hasTargetArrow??!1});default:return M({color:n.color??"#5c5c5c",width:n.width??1,curvature:n.curvature??90,arrowLength:n.arrowLength??15,arrowWidth:n.arrowWidth??4,hasSourceArrow:n.hasSourceArrow??!1,hasTargetArrow:n.hasTargetArrow??!1})}},Q=n=>{var t,e,o;return{background:{drawingFn:K(n.background??{type:"none"})},nodes:{centerFn:((t=n.nodes)==null?void 0:t.centerFn)??k},ports:{centerFn:((e=n.ports)==null?void 0:e.centerFn)??k},connections:{controllerFactory:F(n.connections??{})},layers:{mode:((o=n.layers)==null?void 0:o.mode)??"connections-follow-node"}}};class W{constructor(t){r(this,"transformation");r(this,"model");r(this,"options");r(this,"di");this.apiOptions=t,this.options=Q(this.apiOptions??{}),this.di=new X(this.options),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore}addNode(t){return this.di.controller.addNode(t.id,t.element,t.x,t.y,t.ports,t.centerFn),this}moveNodeOnTop(t){return this.di.controller.moveNodeOnTop(t),this}removeNode(t){return this.di.controller.removeNode(t),this}markPort(t){return this.di.controller.markPort(t.id,t.element,t.nodeId,t.centerFn,t.direction),this}updatePortConnections(t){return this.di.controller.updatePortConnections(t),this}unmarkPort(t){return this.di.controller.unmarkPort(t),this}addConnection(t){const e=t.options!==void 0?F(t.options):this.di.options.connections.controllerFactory;return this.di.controller.addConnection(t.id,t.from,t.to,e),this}removeConnection(t){return this.di.controller.removeConnection(t),this}patchViewportTransform(t){return this.di.controller.patchViewportTransform(t.scale??null,t.x??null,t.y??null),this}moveContent(t){return this.di.controller.moveContent(t.x??0,t.y??0),this}scaleContent(t){return this.di.controller.scaleContent(t.scale,t.x??0,t.y??0),this}moveToNodes(t){return this.di.controller.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.di.controller.updateNodeCoords(t,e,o),this}updateConnectionController(t,e){return this.di.controller.updateConnectionOptions(t,e),this}dragNode(t,e,o){return this.di.controller.dragNode(t,e,o),this}clear(){return this.di.controller.clear(),this}attach(t){return this.di.htmlController.attach(t),this}detach(){return this.di.htmlController.detach(),this}destroy(){this.di.controller.destroy()}}class D{constructor(t){r(this,"transformation");r(this,"model");r(this,"nodes",new Map);r(this,"grabbedNodeId",null);r(this,"nodeIdGenerator",new O);r(this,"element",null);r(this,"onCanvasMouseUp",()=>{this.setCursor(null),this.grabbedNodeId=null});r(this,"onCanvasMouseMove",t=>{this.grabbedNodeId!==null&&(t.stopPropagation(),this.canvas.dragNode(this.grabbedNodeId,t.movementX,t.movementY))});r(this,"onCanvasTouchStart",t=>{this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});r(this,"onCanvasTouchMove",t=>{if(this.grabbedNodeId===null||t.touches.length!==1||this.previousTouchCoords===null)return;t.stopImmediatePropagation();const[e,o]=[t.touches[0].clientX-this.previousTouchCoords[0],t.touches[0].clientY-this.previousTouchCoords[1]];this.canvas.dragNode(this.grabbedNodeId,e,o),this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});r(this,"onCanvasTouchEnd",()=>{this.previousTouchCoords=null,this.grabbedNodeId=null});r(this,"previousTouchCoords",null);this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model}addNode(t){let e=t.id;if(e===void 0)do e=this.nodeIdGenerator.next();while(this.nodes.has(e));this.canvas.addNode(t);const o=i=>{i.stopImmediatePropagation(),this.grabbedNodeId=e,this.setCursor("grab"),this.canvas.moveNodeOnTop(e)},s=i=>{i.touches.length===1&&(this.grabbedNodeId=e,this.canvas.moveNodeOnTop(e))};return this.nodes.set(e,{el:t.element,onMouseDown:o,onTouchStart:s}),t.element.addEventListener("mousedown",o),t.element.addEventListener("touchstart",s),this}removeNode(t){const e=this.nodes.get(t);return e!==void 0&&(e.el.removeEventListener("mousedown",e.onMouseDown),e.el.removeEventListener("touchstart",e.onTouchStart)),this.canvas.removeNode(t),this.nodes.delete(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortConnections(t){return this.canvas.updatePortConnections(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addConnection(t){return this.canvas.addConnection(t),this}removeConnection(t){return this.canvas.removeConnection(t),this}patchViewportTransform(t){return this.canvas.patchViewportTransform(t),this}moveContent(t){return this.canvas.moveContent(t),this}scaleContent(t){return this.canvas.scaleContent(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.canvas.updateNodeCoords(t,e,o),this}updateConnectionController(t,e){return this.canvas.updateConnectionController(t,e),this}dragNode(t,e,o){return this.canvas.dragNode(t,e,o),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this.nodes.forEach(t=>{t.el.removeEventListener("mousedown",t.onMouseDown),t.el.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this}attach(t){return this.canvas.attach(t),this.element=t,t.addEventListener("mouseup",this.onCanvasMouseUp),t.addEventListener("mousemove",this.onCanvasMouseMove),t.addEventListener("touchstart",this.onCanvasTouchStart),t.addEventListener("touchmove",this.onCanvasTouchMove),t.addEventListener("touchend",this.onCanvasTouchEnd),t.addEventListener("touchcancel",this.onCanvasTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mouseup",this.onCanvasMouseUp),this.element.removeEventListener("mousemove",this.onCanvasMouseMove),this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element.removeEventListener("touchmove",this.onCanvasTouchMove),this.element.removeEventListener("touchend",this.onCanvasTouchEnd),this.element.removeEventListener("touchcancel",this.onCanvasTouchEnd),this.element=null),this}destroy(){this.detach(),this.nodes.forEach(t=>{t.el.removeEventListener("mousedown",t.onMouseDown),t.el.removeEventListener("touchstart",t.onTouchStart)}),this.canvas.destroy()}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}}class R{constructor(t,e){r(this,"transformation");r(this,"model");r(this,"element",null);r(this,"isMoving",!1);r(this,"prevTouches",null);r(this,"isScalable");r(this,"isShiftable");r(this,"minContentScale");r(this,"maxContentScale");r(this,"wheelSensitivity");r(this,"onMouseDown",()=>{this.setCursor("grab"),this.isMoving=!0});r(this,"onMouseMove",t=>{!this.isMoving||!this.isShiftable||this.canvas.moveContent({x:t.movementX,y:t.movementY})});r(this,"onMouseUp",()=>{this.setCursor(null),this.isMoving=!1});r(this,"onWheelScroll",t=>{if(this.element===null||this.isScalable===!1)return;t.preventDefault();const{left:e,top:o}=this.element.getBoundingClientRect(),s=t.clientX-e,i=t.clientY-o,c=t.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity,a=this.canvas.transformation.getViewScale()*c;this.checkNextScaleValid(a)&&this.canvas.scaleContent({scale:c,x:s,y:i})});r(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t)});r(this,"onTouchMove",t=>{if(this.prevTouches===null||this.element===null||!this.isShiftable)return;const e=this.getAverageTouch(t);if((e.touchesCnt===1||e.touchesCnt===2)&&this.canvas.moveContent({x:e.x-this.prevTouches.x,y:e.y-this.prevTouches.y}),e.touchesCnt===2&&this.isScalable){const{left:o,top:s}=this.element.getBoundingClientRect(),i=this.prevTouches.x-o,c=this.prevTouches.y-s,a=e.scale/this.prevTouches.scale,h=this.canvas.transformation.getViewScale()*a;this.checkNextScaleValid(h)&&this.canvas.scaleContent({scale:a,x:i,y:c})}this.prevTouches=e,t.preventDefault()});r(this,"onTouchEnd",()=>{this.prevTouches=null});var s,i,c,a,h,l,m,d,g,u;this.canvas=t,this.options=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((i=(s=this.options)==null?void 0:s.scale)==null?void 0:i.enabled)!==!1,this.minContentScale=((a=(c=this.options)==null?void 0:c.scale)==null?void 0:a.minContent)??null,this.maxContentScale=((l=(h=this.options)==null?void 0:h.scale)==null?void 0:l.maxContent)??null,this.isShiftable=((d=(m=this.options)==null?void 0:m.shift)==null?void 0:d.enabled)!==!1;const o=(u=(g=this.options)==null?void 0:g.scale)==null?void 0:u.wheelSensitivity;this.wheelSensitivity=o!==void 0?o:1.2}addNode(t){return this.canvas.addNode(t),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortConnections(t){return this.canvas.updatePortConnections(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addConnection(t){return this.canvas.addConnection(t),this}removeConnection(t){return this.canvas.removeConnection(t),this}patchViewportTransform(t){return this.canvas.patchViewportTransform(t),this}moveContent(t){return this.canvas.moveContent(t),this}scaleContent(t){return this.canvas.scaleContent(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.canvas.updateNodeCoords(t,e,o),this}updateConnectionController(t,e){return this.canvas.updateConnectionController(t,e),this}dragNode(t,e,o){return this.canvas.dragNode(t,e,o),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this}attach(t){return this.canvas.attach(t),this.element=t,t.addEventListener("mousedown",this.onMouseDown),t.addEventListener("mousemove",this.onMouseMove),t.addEventListener("mouseup",this.onMouseUp),t.addEventListener("wheel",this.onWheelScroll),t.addEventListener("touchstart",this.onTouchStart),t.addEventListener("touchmove",this.onTouchMove),t.addEventListener("touchend",this.onTouchEnd),t.addEventListener("touchcancel",this.onTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseup",this.onMouseUp),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("touchmove",this.onTouchMove),this.element.removeEventListener("touchend",this.onTouchEnd),this.element.removeEventListener("touchcancel",this.onTouchEnd)),this.element=null,this}destroy(){this.detach(),this.canvas.destroy()}getAverageTouch(t){const e=[],o=t.touches.length;for(let h=0;h<o;h++)e.push([t.touches[h].clientX,t.touches[h].clientY]);const s=e.reduce((h,l)=>[h[0]+l[0],h[1]+l[1]],[0,0]),i=[s[0]/o,s[1]/o],a=e.map(h=>[h[0]-i[0],h[1]-i[1]]).reduce((h,l)=>h+Math.sqrt(l[0]*l[0]+l[1]*l[1]),0);return{x:i[0],y:i[1],scale:a/o,touchesCnt:o}}checkNextScaleValid(t){const e=this.canvas.transformation.getViewScale();return!(this.maxContentScale!==null&&t>this.maxContentScale&&t>e||this.minContentScale!==null&&t<this.minContentScale&&t<e)}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}}class _{constructor(){r(this,"coreOptions");r(this,"transformOptions");r(this,"isDraggable",!1);r(this,"isTransformable",!1)}setOptions(t){return this.coreOptions=t,this}setDraggableNodes(){return this.isDraggable=!0,this}setTransformableCanvas(t){return this.isTransformable=!0,this.transformOptions=t,this}build(){let t=new W(this.coreOptions);return this.isDraggable&&(t=new D(t)),this.isTransformable&&(t=new R(t,this.transformOptions)),t}}p.BezierConnectionController=x,p.CanvasBuilder=_,p.CanvasCore=W,p.ConnectionUtils=v,p.DraggableNodesCanvas=D,p.StraightConnectionController=L,p.TransformableCanvas=R,p.createBezierConnectionControllerFactory=M,p.createStraightConnectionControllerFactory=V,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});
+(function(p,w){typeof exports=="object"&&typeof module<"u"?w(exports):typeof define=="function"&&define.amd?define(["exports"],w):(p=typeof globalThis<"u"?globalThis:p||self,w(p.HTMLGraph={}))})(this,function(p){"use strict";var nt=Object.defineProperty;var st=(p,w,P)=>w in p?nt(p,w,{enumerable:!0,configurable:!0,writable:!0,value:P}):p[w]=P;var r=(p,w,P)=>st(p,typeof w!="symbol"?w+"":w,P);class w{constructor(t,e,o,n,i){r(this,"canvasWrapper",null);r(this,"host");r(this,"nodesContainer");r(this,"connectionsContainer");r(this,"canvas");r(this,"canvasCtx");r(this,"hostResizeObserver");r(this,"nodesResizeObserver");r(this,"nodeElementToIdMap",new Map);r(this,"nodeWrapperElementToIdMap",new Map);r(this,"nodeIdToWrapperElementMap",new Map);r(this,"connectionIdToElementMap",new Map);r(this,"currentZIndex",0);r(this,"layers",{"connections-on-top":{create:()=>{this.host.appendChild(this.nodesContainer),this.host.appendChild(this.connectionsContainer)},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}},"connections-follow-node":{create:()=>{this.host.appendChild(this.nodesContainer),this.connectionsContainer=this.nodesContainer},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{const e=this.nodeIdToWrapperElementMap.get(t);this.currentZIndex+=2,e.style.zIndex=`${this.currentZIndex}`,this.graphStore.getNodeAdjacentConnections(t).forEach(n=>{this.connectionIdToElementMap.get(n).style.zIndex=`${this.currentZIndex-1}`})}},"nodes-on-top":{create:()=>{this.host.appendChild(this.connectionsContainer),this.host.appendChild(this.nodesContainer)},update:(t,e,o)=>{this.nodesContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`,this.connectionsContainer.style.transform=`matrix(${t}, 0, 0, ${t}, ${e}, ${o})`},moveOnTop:t=>{this.currentZIndex+=1;const e=this.nodeIdToWrapperElementMap.get(t);e.style.zIndex=`${this.currentZIndex}`}}});this.graphStore=t,this.viewportTransformer=e,this.publicViewportTransformer=o,this.layersMode=n,this.backgroundDrawingFn=i,this.host=this.createHost(),this.canvas=this.createCanvas(),this.nodesContainer=this.createNodesContainer(),this.connectionsContainer=this.createConnectionsContainer();const h=this.canvas.getContext("2d");if(h===null)throw new Error("unable to get canvas context");this.canvasCtx=h,this.host.appendChild(this.canvas),this.layers[this.layersMode].create(),this.hostResizeObserver=this.createHostResizeObserver(),this.hostResizeObserver.observe(this.host),this.nodesResizeObserver=this.createNodesResizeObserver()}clear(){Array.from(this.connectionIdToElementMap.keys()).forEach(t=>{this.detachConnection(t)}),Array.from(this.nodeElementToIdMap.values()).forEach(t=>{this.detachNode(t)})}attach(t){this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&this.canvasWrapper.removeChild(this.host)}destroy(){this.hostResizeObserver.disconnect(),this.nodesResizeObserver.disconnect(),this.host.removeChild(this.canvas),this.host.removeChild(this.connectionsContainer),this.host.removeChild(this.nodesContainer),this.canvasWrapper!==null&&this.canvasWrapper.removeChild(this.host)}applyTransform(){this.backgroundDrawingFn(this.canvasCtx,this.publicViewportTransformer);const[t,e]=this.viewportTransformer.getViewCoords(0,0),o=this.viewportTransformer.getViewScale();this.layers[this.layersMode].update(o,t,e)}attachNode(t){const e=this.graphStore.getNode(t),o=document.createElement("div");o.appendChild(e.element),o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,o.style.visibility="hidden",this.nodesContainer.appendChild(o),this.nodeElementToIdMap.set(e.element,t),this.nodeWrapperElementToIdMap.set(o,t),this.nodeIdToWrapperElementMap.set(t,o),this.updateNodeCoords(t,e.x,e.y),this.nodesResizeObserver.observe(o),o.style.visibility="visible"}detachNode(t){const e=this.graphStore.getNode(t);this.nodesResizeObserver.unobserve(e.element),this.nodesContainer.removeChild(e.element);const o=this.nodeIdToWrapperElementMap.get(t);o.removeChild(e.element),this.nodeElementToIdMap.delete(e.element),this.nodeWrapperElementToIdMap.delete(o),this.nodeIdToWrapperElementMap.delete(t)}attachConnection(t){const o=this.graphStore.getConnection(t).controller.svg;o.style.transformOrigin="50% 50%",o.style.position="absolute",o.style.top="0",o.style.left="0",o.style.zIndex=`${this.currentZIndex}`,this.currentZIndex+=1,this.connectionIdToElementMap.set(t,o),this.updateConnectionCoords(t),this.connectionsContainer.appendChild(o)}detachConnection(t){const e=this.connectionIdToElementMap.get(t);this.connectionIdToElementMap.delete(t),this.connectionsContainer.removeChild(e)}moveNodeOnTop(t){this.layers[this.layersMode].moveOnTop(t)}updateNodePosition(t){const e=this.graphStore.getNode(t),o=this.graphStore.getNodeAdjacentConnections(t);this.updateNodeCoords(t,e.x,e.y),o.forEach(n=>{this.updateConnectionCoords(n)})}updatePortConnections(t){this.graphStore.getPortAdjacentConnections(t).forEach(o=>{this.updateConnectionCoords(o)})}getViewportDimensions(){const t=this.host.getBoundingClientRect();return[t.width,t.height]}createHost(){const t=document.createElement("div");return t.style.width="100%",t.style.height="100%",t.style.position="relative",t.style.overflow="hidden",t}createCanvas(){const t=document.createElement("canvas");return t.style.position="absolute",t.style.inset="0",t}createNodesContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createConnectionsContainer(){const t=document.createElement("div");return t.style.position="absolute",t.style.pointerEvents="none",t.style.top="0",t.style.left="0",t.style.width="0",t.style.height="0",t}createHostResizeObserver(){return new ResizeObserver(()=>{this.updateCanvasDimensions(),this.applyTransform()})}createNodesResizeObserver(){return new ResizeObserver(t=>{t.forEach(e=>{const o=e.target,n=this.nodeWrapperElementToIdMap.get(o),i=this.graphStore.getNode(n);this.updateNodeCoords(n,i.x,i.y),this.graphStore.getNodeAdjacentConnections(n).forEach(a=>{this.updateConnectionCoords(a)})})})}updateCanvasDimensions(){const{width:t,height:e}=this.host.getBoundingClientRect();this.canvas.width=t,this.canvas.height=e}updateNodeCoords(t,e,o){const n=this.nodeIdToWrapperElementMap.get(t),{width:i,height:h}=n.getBoundingClientRect(),a=this.viewportTransformer.getAbsScale(),c=this.graphStore.getNode(t),[l,g]=c.centerFn(i,h);n.style.transform=`matrix(1, 0, 0, 1, ${e-a*l}, ${o-a*g})`}updateConnectionCoords(t){const e=this.graphStore.getConnection(t),o=this.graphStore.getPort(e.from),n=this.graphStore.getPort(e.to),i=o.element.getBoundingClientRect(),h=n.element.getBoundingClientRect(),a=this.host.getBoundingClientRect(),[c,l]=this.viewportTransformer.getAbsCoords(i.left-a.left,i.top-a.top),[g,d]=this.viewportTransformer.getAbsCoords(h.left-a.left,h.top-a.top),m=this.viewportTransformer.getAbsScale(),[u,v]=o.centerFn(i.width*m,i.height*m),[S,b]=n.centerFn(h.width*m,h.height*m),T=u+c,N=v+l,E=S+g,f=b+d,y=Math.min(T,E),A=Math.min(N,f),$=Math.abs(E-T),I=Math.abs(f-N),tt=this.connectionIdToElementMap.get(t),et=T<=E,ot=N<=f;tt.style.transform=`matrix(${et?1:-1}, 0, 0, ${ot?1:-1}, ${y}, ${A})`,e.controller.update(y,A,$,I,o,n)}}class P{constructor(){r(this,"state",{scale:1,x:0,y:0})}applyShift(t,e){this.state={scale:this.state.scale,x:this.state.scale*t+this.state.x,y:this.state.scale*e+this.state.y}}applyScale(t,e,o){this.state={scale:this.state.scale*t,x:this.state.scale*(1-t)*e+this.state.x,y:this.state.scale*(1-t)*o+this.state.y}}getViewCoords(t,e){return[(t-this.state.x)/this.state.scale,(e-this.state.y)/this.state.scale]}getViewScale(){return 1/this.state.scale}getAbsCoords(t,e){return[t*this.state.scale+this.state.x,e*this.state.scale+this.state.y]}getAbsScale(){return this.state.scale}patchState(t,e,o){this.state={scale:t??this.state.scale,x:e??this.state.x,y:o??this.state.y}}}class z{constructor(t){this.transformer=t}getViewCoords(t,e){return this.transformer.getViewCoords(t,e)}getViewScale(){return this.transformer.getViewScale()}getAbsCoords(t,e){return this.transformer.getAbsCoords(t,e)}getAbsScale(){return this.transformer.getAbsScale()}}class B{constructor(){r(this,"nodes",Object.create(null));r(this,"ports",Object.create(null));r(this,"nodePorts",Object.create(null));r(this,"portNodeId",Object.create(null));r(this,"connections",Object.create(null));r(this,"incommingConnections",Object.create(null));r(this,"outcommingConnections",Object.create(null));r(this,"cycleConnections",Object.create(null))}getAllNodes(){return Object.keys(this.nodes)}getAllPorts(){return Object.keys(this.ports)}getAllConnections(){return Object.keys(this.connections)}addNode(t,e,o,n,i){this.nodes[t]={element:e,x:o,y:n,centerFn:i},this.nodePorts[t]=Object.create(null)}hasNode(t){return this.nodes[t]!==void 0}getNode(t){return this.nodes[t]}updateNodeCoords(t,e,o){this.nodes[t].x=e,this.nodes[t].y=o}updateConnectionController(t,e){this.connections[t].controller=e}removeNode(t){this.getNodeAdjacentConnections(t).forEach(n=>{this.removeConnection(n)}),delete this.nodes[t];const o=this.nodePorts[t];Object.keys(o).forEach(n=>{delete this.portNodeId[n]}),delete this.nodePorts[t]}addPort(t,e,o,n,i){this.ports[t]={element:e,centerFn:n,direction:i},this.cycleConnections[t]={},this.incommingConnections[t]={},this.outcommingConnections[t]={},this.portNodeId[t]=o;const h=this.nodePorts[o];h!==void 0&&(h[t]=e)}getPort(t){return this.ports[t]}getPortNode(t){return this.portNodeId[t]}hasPort(t){return this.portNodeId[t]!==void 0}removePort(t){Object.keys(this.cycleConnections[t]).forEach(n=>{this.removeConnection(n)}),delete this.cycleConnections[t],Object.keys(this.incommingConnections[t]).forEach(n=>{this.removeConnection(n)}),delete this.incommingConnections[t],Object.keys(this.outcommingConnections[t]).forEach(n=>{this.removeConnection(n)}),delete this.outcommingConnections[t];const e=this.portNodeId[t];delete this.portNodeId[t];const o=this.nodePorts[e];delete o[t],delete this.ports[t]}addConnection(t,e,o,n){this.connections[t]={from:e,to:o,controller:n},e!==o?(this.outcommingConnections[e][t]=!0,this.incommingConnections[o][t]=!0):this.cycleConnections[e][t]=!0}getConnection(t){return this.connections[t]}hasConnection(t){return this.connections[t]!==void 0}removeConnection(t){const e=this.connections[t],o=e.from,n=e.to;delete this.cycleConnections[o][t],delete this.cycleConnections[n][t],delete this.incommingConnections[o][t],delete this.incommingConnections[n][t],delete this.outcommingConnections[o][t],delete this.outcommingConnections[n][t],delete this.connections[t]}getPortIncomingConnections(t){return Object.keys(this.incommingConnections[t]??{})}getPortOutcomingConnections(t){return Object.keys(this.outcommingConnections[t]??{})}getPortCycleConnections(t){return Object.keys(this.cycleConnections[t]??{})}getPortAdjacentConnections(t){return[...this.getPortIncomingConnections(t),...this.getPortOutcomingConnections(t),...this.getPortCycleConnections(t)]}getNodeIncomingConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(n=>{o=[...o,...this.getPortIncomingConnections(n)]}),o}getNodeOutcomingConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(n=>{o=[...o,...this.getPortOutcomingConnections(n)]}),o}getNodeCycleConnections(t){const e=Object.keys(this.nodePorts[t]);let o=[];return e.forEach(n=>{o=[...o,...this.getPortCycleConnections(n)]}),o}getNodeAdjacentConnections(t){return[...this.getNodeIncomingConnections(t),...this.getNodeOutcomingConnections(t),...this.getNodeCycleConnections(t)]}clear(){this.nodes=Object.create(null),this.ports=Object.create(null),this.nodePorts=Object.create(null),this.portNodeId=Object.create(null),this.connections=Object.create(null),this.incommingConnections=Object.create(null),this.outcommingConnections=Object.create(null),this.cycleConnections=Object.create(null)}}class G{constructor(t){this.graphStore=t}getNode(t){const e=this.graphStore.getNode(t);return e===void 0?null:{x:e.x,y:e.y}}getPort(t){const e=this.graphStore.getPortNode(t);return e===void 0?null:{nodeId:e}}getConnection(t){const e=this.graphStore.getConnection(t);return e===void 0?null:{from:e.from,to:e.to}}getAllNodes(){return this.graphStore.getAllNodes()}getAllPorts(){return this.graphStore.getAllPorts()}getAllConnections(){return this.graphStore.getAllConnections()}hasNode(t){return this.graphStore.hasNode(t)}hasPort(t){return this.graphStore.hasPort(t)}hasConnection(t){return this.graphStore.hasConnection(t)}getPortIncomingConnections(t){return this.graphStore.getPortIncomingConnections(t)}getPortOutcomingConnections(t){return this.graphStore.getPortOutcomingConnections(t)}getPortCycleConnections(t){return this.graphStore.getPortCycleConnections(t)}getPortAdjacentConnections(t){return this.graphStore.getPortAdjacentConnections(t)}getNodeIncomingConnections(t){return this.graphStore.getNodeIncomingConnections(t)}getNodeOutcomingConnections(t){return this.graphStore.getNodeOutcomingConnections(t)}getNodeCycleConnections(t){return this.graphStore.getNodeCycleConnections(t)}getNodeAdjacentConnections(t){return this.graphStore.getNodeAdjacentConnections(t)}}class C{static getPortCenter(t){const{top:e,left:o,width:n,height:i}=t.element.getBoundingClientRect(),h=t.centerFn(n,i);return[o+h[0],e+h[1]]}static rotate(t,e,o){return[e[0]*t[0]-e[1]*t[1]+((1-e[0])*o[0]+e[1]*o[1]),e[1]*t[0]+e[0]*t[1]+((1-e[0])*o[1]-e[1]*o[0])]}static getDirectionVector(t,e,o){return[e*Math.cos(t??0),o*Math.sin(t??0)]}static getArrowPath(t,e,o,n,i){const a=[[0,0],[n,i],[n,-i]].map(d=>this.rotate(d,t,[0,0])).map(d=>[d[0]+e,d[1]+o]),c=`M ${a[0][0]} ${a[0][1]}`,l=`L ${a[1][0]} ${a[1][1]}`,g=`L ${a[2][0]} ${a[2][1]}`;return`${c} ${l} ${g}`}static getArrowOffsetPath(t,e,o,n,i){const a=[[n,0],[n+i,0]].map(c=>this.rotate(c,t,[0,0])).map(c=>[c[0]+e,c[1]+o]);return`M ${a[0][0]} ${a[0][1]} L ${a[1][0]} ${a[1][1]}`}}class x{constructor(t,e,o,n,i,h,a){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.color=t,this.width=e,this.curvature=o,this.arrowLength=n,this.arrowWidth=i,this.hasSourceArrow=h,this.hasTargetArrow=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",this.hasSourceArrow&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,o,n,i,h){this.svg.style.width=`${o}px`,this.svg.style.height=`${n}px`;const a=C.getPortCenter(i),c=C.getPortCenter(h),l=a[0]<=c[0]?1:-1,g=a[1]<=c[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${l}, ${g})`;const d=C.getDirectionVector(i.direction,l,g),m=C.getDirectionVector(h.direction,l,g),u=C.rotate([this.arrowLength,0],d,[0,0]),v=C.rotate([o-this.arrowLength,n],m,[o,n]),S=[u[0]+d[0]*this.curvature,u[1]+d[1]*this.curvature],b=[v[0]-m[0]*this.curvature,v[1]-m[1]*this.curvature],T=`M ${u[0]} ${u[1]}`,N=`C ${S[0]} ${S[1]}, ${b[0]} ${b[1]}, ${v[0]} ${v[1]}`,E=`M 0 0 L ${u[0]} ${u[1]} `,f=` M ${v[0]} ${v[1]} L ${o} ${n}`,y=`${this.sourceArrow?"":E}${T} ${N}${this.targetArrow?"":f}`;if(this.line.setAttribute("d",y),this.sourceArrow){const A=C.getArrowPath(d,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",A)}if(this.targetArrow){const A=C.getArrowPath(m,o,n,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",A)}}}const L=s=>()=>new x(s.color??"#5c5c5c",s.width??1,s.curvature??90,s.arrowLength??15,s.arrowWidth??4,s.hasSourceArrow??!1,s.hasTargetArrow??!1);class V{constructor(t,e,o,n,i,h,a){r(this,"svg");r(this,"group");r(this,"line");r(this,"sourceArrow",null);r(this,"targetArrow",null);this.color=t,this.width=e,this.arrowLength=o,this.arrowWidth=n,this.minPortOffset=i,this.hasSourceArrow=h,this.hasTargetArrow=a,this.svg=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.svg.style.pointerEvents="none",this.group=document.createElementNS("http://www.w3.org/2000/svg","g"),this.svg.appendChild(this.group),this.line=document.createElementNS("http://www.w3.org/2000/svg","path"),this.line.setAttribute("stroke",this.color),this.line.setAttribute("stroke-width",`${this.width}`),this.line.setAttribute("fill","none"),this.group.appendChild(this.line),this.group.style.transformOrigin="50% 50%",this.hasSourceArrow&&(this.sourceArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.sourceArrow.setAttribute("fill",this.color),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=document.createElementNS("http://www.w3.org/2000/svg","path"),this.targetArrow.setAttribute("fill",this.color),this.group.appendChild(this.targetArrow)),this.svg.style.overflow="visible"}update(t,e,o,n,i,h){this.svg.style.width=`${o}px`,this.svg.style.height=`${n}px`;const a=C.getPortCenter(i),c=C.getPortCenter(h),l=a[0]<=c[0]?1:-1,g=a[1]<=c[1]?1:-1;this.svg.style.transform=`translate(${t}px, ${e}px)`,this.group.style.transform=`scale(${l}, ${g})`;const d=C.getDirectionVector(i.direction,l,g),m=C.getDirectionVector(h.direction,l,g),u=C.rotate([this.arrowLength+this.minPortOffset,0],d,[0,0]),v=C.rotate([o-this.arrowLength-this.minPortOffset,n],m,[o,n]),[S,b]=[o/2,n/2],T=l*(v[0]-u[0])>0?`M ${u[0]} ${u[1]} L ${S} ${u[1]} L ${S} ${v[1]} L ${v[0]} ${v[1]}`:`M ${u[0]} ${u[1]} L ${u[0]} ${b} L ${v[0]} ${b} L ${v[0]} ${v[1]}`,N=`M 0 0 L ${u[0]} ${u[1]} `,E=` M ${v[0]} ${v[1]} L ${o} ${n}`,f=C.getArrowOffsetPath(d,0,0,this.arrowLength,this.minPortOffset),y=C.getArrowOffsetPath(m,o,n,-this.arrowLength,-this.minPortOffset),A=`${this.sourceArrow?f:N}${T}${this.targetArrow?y:E}`;if(this.line.setAttribute("d",A),this.sourceArrow){const $=C.getArrowPath(d,0,0,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",$)}if(this.targetArrow){const $=C.getArrowPath(m,o,n,-this.arrowLength,this.arrowWidth);this.targetArrow.setAttribute("d",$)}}}const F=s=>()=>new V(s.color,s.width,s.arrowLength,s.arrowWidth,s.minPortOffset,s.hasSourceArrow,s.hasTargetArrow);var M=(s=>(s.Regular="regular",s.Cycle="cycle",s))(M||{});class O{constructor(){r(this,"counter",0)}next(){const t=`${this.counter}`;return this.counter++,t}reset(){this.counter=0}}class Y{constructor(t,e,o,n,i){r(this,"nodeIdGenerator",new O);r(this,"portIdGenerator",new O);r(this,"connectionIdGenerator",new O);this.graphStore=t,this.htmlController=e,this.viewportTransformer=o,this.nodesCenterFn=n,this.portsCenterFn=i}moveNodeOnTop(t){if(!this.graphStore.hasNode(t))throw new Error("failed to move on top nonexisting node");this.htmlController.moveNodeOnTop(t)}dragNode(t,e,o){if(!this.graphStore.hasNode(t))throw new Error("failed to drag nonexisting node");const n=this.graphStore.getNode(t),[i,h]=this.viewportTransformer.getViewCoords(n.x,n.y),a=i+e,c=h+o,[l,g]=this.viewportTransformer.getAbsCoords(a,c);this.graphStore.updateNodeCoords(t,l,g),this.htmlController.updateNodePosition(t)}addNode(t,e,o,n,i,h){if(t===void 0)do t=this.nodeIdGenerator.next();while(this.graphStore.hasNode(t));if(this.graphStore.hasNode(t))throw new Error("failed to add node with existing id");this.graphStore.addNode(t,e,o,n,h??this.nodesCenterFn),this.htmlController.attachNode(t),i!==void 0&&Object.entries(i).forEach(([a,c])=>{c instanceof HTMLElement?this.markPort(a,c,t,this.portsCenterFn,null):this.markPort(a,c.element,t,c.centerFn??this.portsCenterFn,c.direction??null)})}markPort(t,e,o,n,i){if(t===void 0)do t=this.portIdGenerator.next();while(this.graphStore.hasPort(t));if(!this.graphStore.hasNode(o))throw new Error("failed to set port on nonexisting node");if(this.graphStore.hasPort(t))throw new Error("failed to add port with existing id");this.graphStore.addPort(t,e,o,n??this.portsCenterFn,i??null)}updatePortConnections(t){if(!this.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.htmlController.updatePortConnections(t)}unmarkPort(t){if(!this.graphStore.hasPort(t))throw new Error("failed to unset nonexisting port");this.graphStore.getPortAdjacentConnections(t).forEach(e=>{this.removeConnection(e)}),this.graphStore.removePort(t)}addConnection(t,e,o,n){if(t===void 0)do t=this.connectionIdGenerator.next();while(this.graphStore.hasConnection(t));if(!this.graphStore.hasPort(e))throw new Error("failed to add connection from nonexisting port");if(!this.graphStore.hasPort(o))throw new Error("failed to add connection to nonexisting port");this.graphStore.addConnection(t,e,o,n(M.Regular)),this.htmlController.attachConnection(t)}removeConnection(t){if(!this.graphStore.hasConnection(t))throw new Error("failed to remove nonexisting connection");this.htmlController.detachConnection(t),this.graphStore.removeConnection(t)}removeNode(t){if(!this.graphStore.hasNode(t))throw new Error("failed to remove nonexisting node");this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportState(t,e,o){this.viewportTransformer.patchState(t,e,o),this.htmlController.applyTransform()}moveViewport(t,e){this.viewportTransformer.applyShift(t,e),this.htmlController.applyTransform()}scaleContent(t,e,o){this.viewportTransformer.applyScale(t,e,o),this.htmlController.applyTransform()}moveToNodes(t){if(t.length===0)return;const e=t.map(m=>this.graphStore.getNode(m)).filter(m=>m!==void 0);if(e.length<t.length)throw new Error("failed to move to nonexisting node");const[o,n]=e.reduce((m,u)=>[m[0]+u.x,m[1]+u.y],[0,0]),i=o/e.length,h=n/e.length,[a,c]=this.htmlController.getViewportDimensions(),l=this.viewportTransformer.getAbsScale(),g=i-l*a/2,d=h-l*c/2;this.patchViewportState(null,g,d)}updateNodeCoords(t,e,o){if(!this.graphStore.hasNode(t))throw new Error("failed to update coordinates of nonexisting node");this.graphStore.updateNodeCoords(t,e,o),this.htmlController.updateNodePosition(t)}updateConnectionController(t,e){if(!this.graphStore.hasConnection(t))throw new Error("failed to update nonexisting connection");this.htmlController.detachConnection(t),this.graphStore.updateConnectionController(t,e),this.htmlController.attachConnection(t)}attach(t){this.htmlController.attach(t)}detach(){this.htmlController.detach()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.connectionIdGenerator.reset()}destroy(){this.htmlController.destroy()}}class X{constructor(t,e,o,n){r(this,"htmlController");r(this,"viewportTransformer");r(this,"graphStore");r(this,"publicViewportTransformer");r(this,"publicGraphStore");r(this,"canvasController");this.viewportTransformer=new P,this.publicViewportTransformer=new z(this.viewportTransformer),this.graphStore=new B,this.publicGraphStore=new G(this.graphStore),this.htmlController=new w(this.graphStore,this.viewportTransformer,this.publicViewportTransformer,t,e),this.canvasController=new Y(this.graphStore,this.htmlController,this.viewportTransformer,o,n)}}const k=(s,t)=>[s/2,t/2],Z=()=>()=>{},H=(s,t,e,o,n,i)=>{s.clearRect(0,0,s.canvas.width,s.canvas.height),s.save(),s.fillStyle=i,s.fillRect(0,0,s.canvas.width,s.canvas.height);const h=t.getViewCoords(0,0),a=t.getViewScale(),c=o*a;let l=0,g=0,d=c/2;do d*=2,l=s.canvas.width/d,g=s.canvas.height/d;while(l*g>1e4);const m=h[0]-Math.floor(h[0]/d)*d,u=h[1]-Math.floor(h[1]/d)*d,v=n*a,S=2*Math.PI,b=m-d,T=u-d,N=s.canvas.width+m,E=s.canvas.height+u;s.fillStyle=e;for(let f=b;f<=N;f+=d)for(let y=T;y<=E;y+=d)s.beginPath(),s.arc(f,y,v,0,S),s.closePath(),s.fill();s.restore()},U=(s,t,e,o)=>(n,i)=>{H(n,i,s,t,e,o)},q=(s,t)=>{s.fillStyle=t,s.fillRect(0,0,s.canvas.width,s.canvas.height)},J=s=>t=>{q(t,s)},K=s=>{switch(s==null?void 0:s.type){case"custom":return s.drawingFn;case"dots":return U(s.dotColor??"#d8d8d8",s.dotGap??25,s.dotRadius??1.5,s.color??"#ffffff");case"color":return J(s.color??"#ffffff");default:return Z()}},j=s=>{switch(s==null?void 0:s.type){case"custom":return s.controllerFactory;case"straight":return F({color:s.color??"#5c5c5c",width:s.width??1,arrowLength:s.arrowLength??15,arrowWidth:s.arrowWidth??4,minPortOffset:s.minPortOffset??15,hasSourceArrow:s.hasSourceArrow??!1,hasTargetArrow:s.hasTargetArrow??!1});default:return L({color:s.color??"#5c5c5c",width:s.width??1,curvature:s.curvature??90,arrowLength:s.arrowLength??15,arrowWidth:s.arrowWidth??4,hasSourceArrow:s.hasSourceArrow??!1,hasTargetArrow:s.hasTargetArrow??!1})}},Q=s=>{var t,e,o;return{background:{drawingFn:K(s.background??{type:"none"})},nodes:{centerFn:((t=s.nodes)==null?void 0:t.centerFn)??k},ports:{centerFn:((e=s.ports)==null?void 0:e.centerFn)??k},connections:{controllerFactory:j(s.connections??{})},layers:{mode:((o=s.layers)==null?void 0:o.mode)??"connections-follow-node"}}};class D{constructor(t){r(this,"transformation");r(this,"model");r(this,"di");r(this,"connectionControllerFactory");this.apiOptions=t;const e=Q(this.apiOptions??{});this.di=new X(e.layers.mode,e.background.drawingFn,e.nodes.centerFn,e.ports.centerFn),this.transformation=this.di.publicViewportTransformer,this.model=this.di.publicGraphStore,this.connectionControllerFactory=e.connections.controllerFactory}addNode(t){return this.di.canvasController.addNode(t.id,t.element,t.x,t.y,t.ports,t.centerFn),this}moveNodeOnTop(t){return this.di.canvasController.moveNodeOnTop(t),this}removeNode(t){return this.di.canvasController.removeNode(t),this}markPort(t){return this.di.canvasController.markPort(t.id,t.element,t.nodeId,t.centerFn,t.direction),this}updatePortConnections(t){return this.di.canvasController.updatePortConnections(t),this}unmarkPort(t){return this.di.canvasController.unmarkPort(t),this}addConnection(t){const e=t.options!==void 0?j(t.options):this.connectionControllerFactory;return this.di.canvasController.addConnection(t.id,t.from,t.to,e),this}removeConnection(t){return this.di.canvasController.removeConnection(t),this}patchViewportState(t){return this.di.canvasController.patchViewportState(t.scale??null,t.x??null,t.y??null),this}moveViewport(t){return this.di.canvasController.moveViewport(t.x??0,t.y??0),this}scaleViewport(t){return this.di.canvasController.scaleContent(t.scale,t.x??0,t.y??0),this}moveToNodes(t){return this.di.canvasController.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.di.canvasController.updateNodeCoords(t,e,o),this}updateConnection(t,e){return e.controller!==void 0&&this.di.canvasController.updateConnectionController(t,e.controller),this}dragNode(t,e,o){return this.di.canvasController.dragNode(t,e,o),this}clear(){return this.di.canvasController.clear(),this}attach(t){return this.di.canvasController.attach(t),this}detach(){return this.di.canvasController.detach(),this}destroy(){this.di.canvasController.destroy()}}class W{constructor(t){r(this,"transformation");r(this,"model");r(this,"nodes",new Map);r(this,"grabbedNodeId",null);r(this,"nodeIdGenerator",new O);r(this,"element",null);r(this,"onCanvasMouseUp",()=>{this.setCursor(null),this.grabbedNodeId=null});r(this,"onCanvasMouseMove",t=>{this.grabbedNodeId!==null&&(t.stopPropagation(),this.canvas.dragNode(this.grabbedNodeId,t.movementX,t.movementY))});r(this,"onCanvasTouchStart",t=>{this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});r(this,"onCanvasTouchMove",t=>{if(this.grabbedNodeId===null||t.touches.length!==1||this.previousTouchCoords===null)return;t.stopImmediatePropagation();const[e,o]=[t.touches[0].clientX-this.previousTouchCoords[0],t.touches[0].clientY-this.previousTouchCoords[1]];this.canvas.dragNode(this.grabbedNodeId,e,o),this.previousTouchCoords=[t.touches[0].clientX,t.touches[0].clientY]});r(this,"onCanvasTouchEnd",()=>{this.previousTouchCoords=null,this.grabbedNodeId=null});r(this,"previousTouchCoords",null);this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model}addNode(t){let e=t.id;if(e===void 0)do e=this.nodeIdGenerator.next();while(this.nodes.has(e));this.canvas.addNode(t);const o=i=>{i.stopImmediatePropagation(),this.grabbedNodeId=e,this.setCursor("grab"),this.canvas.moveNodeOnTop(e)},n=i=>{i.touches.length===1&&(this.grabbedNodeId=e,this.canvas.moveNodeOnTop(e))};return this.nodes.set(e,{el:t.element,onMouseDown:o,onTouchStart:n}),t.element.addEventListener("mousedown",o),t.element.addEventListener("touchstart",n),this}removeNode(t){const e=this.nodes.get(t);return e!==void 0&&(e.el.removeEventListener("mousedown",e.onMouseDown),e.el.removeEventListener("touchstart",e.onTouchStart)),this.canvas.removeNode(t),this.nodes.delete(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortConnections(t){return this.canvas.updatePortConnections(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addConnection(t){return this.canvas.addConnection(t),this}removeConnection(t){return this.canvas.removeConnection(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}moveViewport(t){return this.canvas.moveViewport(t),this}scaleViewport(t){return this.canvas.scaleViewport(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.canvas.updateNodeCoords(t,e,o),this}updateConnection(t,e){return this.canvas.updateConnection(t,e),this}dragNode(t,e,o){return this.canvas.dragNode(t,e,o),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this.nodes.forEach(t=>{t.el.removeEventListener("mousedown",t.onMouseDown),t.el.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this}attach(t){return this.canvas.attach(t),this.element=t,this.element.addEventListener("mouseup",this.onCanvasMouseUp),this.element.addEventListener("mousemove",this.onCanvasMouseMove),this.element.addEventListener("touchstart",this.onCanvasTouchStart),this.element.addEventListener("touchmove",this.onCanvasTouchMove),this.element.addEventListener("touchend",this.onCanvasTouchEnd),this.element.addEventListener("touchcancel",this.onCanvasTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mouseup",this.onCanvasMouseUp),this.element.removeEventListener("mousemove",this.onCanvasMouseMove),this.element.removeEventListener("touchstart",this.onCanvasTouchStart),this.element.removeEventListener("touchmove",this.onCanvasTouchMove),this.element.removeEventListener("touchend",this.onCanvasTouchEnd),this.element.removeEventListener("touchcancel",this.onCanvasTouchEnd),this.element=null),this}destroy(){this.detach(),this.nodes.forEach(t=>{t.el.removeEventListener("mousedown",t.onMouseDown),t.el.removeEventListener("touchstart",t.onTouchStart)}),this.canvas.destroy()}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}}class R{constructor(t,e){r(this,"transformation");r(this,"model");r(this,"element",null);r(this,"isMoving",!1);r(this,"prevTouches",null);r(this,"isScalable");r(this,"isShiftable");r(this,"minContentScale");r(this,"maxContentScale");r(this,"wheelSensitivity");r(this,"onMouseDown",()=>{this.setCursor("grab"),this.isMoving=!0});r(this,"onMouseMove",t=>{!this.isMoving||!this.isShiftable||this.canvas.moveViewport({x:-t.movementX,y:-t.movementY})});r(this,"onMouseUp",()=>{this.setCursor(null),this.isMoving=!1});r(this,"onWheelScroll",t=>{if(this.element===null||this.isScalable===!1)return;t.preventDefault();const{left:e,top:o}=this.element.getBoundingClientRect(),n=t.clientX-e,i=t.clientY-o,h=t.deltaY<0?this.wheelSensitivity:1/this.wheelSensitivity,a=this.canvas.transformation.getViewScale()*h;this.checkNextScaleValid(a)&&this.canvas.scaleViewport({scale:1/h,x:n,y:i})});r(this,"onTouchStart",t=>{this.prevTouches=this.getAverageTouch(t)});r(this,"onTouchMove",t=>{if(this.prevTouches===null||this.element===null||!this.isShiftable)return;const e=this.getAverageTouch(t);if((e.touchesCnt===1||e.touchesCnt===2)&&this.canvas.moveViewport({x:-(e.x-this.prevTouches.x),y:-(e.y-this.prevTouches.y)}),e.touchesCnt===2&&this.isScalable){const{left:o,top:n}=this.element.getBoundingClientRect(),i=this.prevTouches.x-o,h=this.prevTouches.y-n,a=e.scale/this.prevTouches.scale,c=this.canvas.transformation.getViewScale()*a;this.checkNextScaleValid(c)&&this.canvas.scaleViewport({scale:1/a,x:i,y:h})}this.prevTouches=e,t.preventDefault()});r(this,"onTouchEnd",()=>{this.prevTouches=null});var n,i,h,a,c,l,g,d,m,u;this.canvas=t,this.options=e,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.isScalable=((i=(n=this.options)==null?void 0:n.scale)==null?void 0:i.enabled)!==!1,this.minContentScale=((a=(h=this.options)==null?void 0:h.scale)==null?void 0:a.minContent)??null,this.maxContentScale=((l=(c=this.options)==null?void 0:c.scale)==null?void 0:l.maxContent)??null,this.isShiftable=((d=(g=this.options)==null?void 0:g.shift)==null?void 0:d.enabled)!==!1;const o=(u=(m=this.options)==null?void 0:m.scale)==null?void 0:u.wheelSensitivity;this.wheelSensitivity=o!==void 0?o:1.2}addNode(t){return this.canvas.addNode(t),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePortConnections(t){return this.canvas.updatePortConnections(t),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addConnection(t){return this.canvas.addConnection(t),this}removeConnection(t){return this.canvas.removeConnection(t),this}patchViewportState(t){return this.canvas.patchViewportState(t),this}moveViewport(t){return this.canvas.moveViewport(t),this}scaleViewport(t){return this.canvas.scaleViewport(t),this}moveToNodes(t){return this.canvas.moveToNodes(t),this}updateNodeCoords(t,e,o){return this.canvas.updateNodeCoords(t,e,o),this}updateConnection(t,e){return this.canvas.updateConnection(t,e),this}dragNode(t,e,o){return this.canvas.dragNode(t,e,o),this}moveNodeOnTop(t){return this.canvas.moveNodeOnTop(t),this}clear(){return this.canvas.clear(),this}attach(t){return this.canvas.attach(t),this.element=t,this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("mousemove",this.onMouseMove),this.element.addEventListener("mouseup",this.onMouseUp),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.element.addEventListener("touchmove",this.onTouchMove),this.element.addEventListener("touchend",this.onTouchEnd),this.element.addEventListener("touchcancel",this.onTouchEnd),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element.removeEventListener("mousedown",this.onMouseDown),this.element.removeEventListener("mousemove",this.onMouseMove),this.element.removeEventListener("mouseup",this.onMouseUp),this.element.removeEventListener("wheel",this.onWheelScroll),this.element.removeEventListener("touchstart",this.onTouchStart),this.element.removeEventListener("touchmove",this.onTouchMove),this.element.removeEventListener("touchend",this.onTouchEnd),this.element.removeEventListener("touchcancel",this.onTouchEnd)),this.element=null,this}destroy(){this.detach(),this.canvas.destroy()}getAverageTouch(t){const e=[],o=t.touches.length;for(let c=0;c<o;c++)e.push([t.touches[c].clientX,t.touches[c].clientY]);const n=e.reduce((c,l)=>[c[0]+l[0],c[1]+l[1]],[0,0]),i=[n[0]/o,n[1]/o],a=e.map(c=>[c[0]-i[0],c[1]-i[1]]).reduce((c,l)=>c+Math.sqrt(l[0]*l[0]+l[1]*l[1]),0);return{x:i[0],y:i[1],scale:a/o,touchesCnt:o}}checkNextScaleValid(t){const e=this.canvas.transformation.getViewScale();return!(this.maxContentScale!==null&&t>this.maxContentScale&&t>e||this.minContentScale!==null&&t<this.minContentScale&&t<e)}setCursor(t){this.element!==null&&(t!==null?this.element.style.cursor=t:this.element.style.removeProperty("cursor"))}}class _{constructor(){r(this,"coreOptions");r(this,"transformOptions");r(this,"isDraggable",!1);r(this,"isTransformable",!1)}setOptions(t){return this.coreOptions=t,this}setDraggableNodes(){return this.isDraggable=!0,this}setTransformableCanvas(t){return this.isTransformable=!0,this.transformOptions=t,this}build(){let t=new D(this.coreOptions);return this.isDraggable&&(t=new W(t)),this.isTransformable&&(t=new R(t,this.transformOptions)),t}}p.BezierConnectionController=x,p.CanvasCore=D,p.ConnectionType=M,p.ConnectionUtils=C,p.DraggableNodesCanvas=W,p.HtmlGraphBuilder=_,p.StraightConnectionController=V,p.TransformableCanvas=R,p.createBezierConnectionControllerFactory=L,p.createStraightConnectionControllerFactory=F,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov",
   "private": false,
-  "version": "0.0.45",
+  "version": "0.0.47",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",
@@ -35,12 +35,14 @@
     "fix-lint": "eslint . --fix",
     "build": "tsc --p ./tsconfig-build-library.json && vite build",
     "preview": "vite preview",
-    "prebuild": "npm run lint && npm run check-formatting",
-    "release-next-version": "tsx ./scripts/release-next-version.ts"
+    "beforebuild": "npm run lint && npm run check-formatting",
+    "release-next-version": "tsx ./scripts/release-next-version.ts",
+    "make-deps-graph": "npx depcruise lib --include-only \"^lib\" --output-type dot > ./deps-graph/deps-graph.dot"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.1",
     "@types/node": "^22.5.0",
+    "dependency-cruiser": "^16.7.0",
     "eslint": "^9.9.1",
     "globals": "^15.9.0",
     "prettier": "3.3.3",