@html-graph/html-graph 0.1.7 → 1.0.0

package/dist/main.d.ts

@@ -1,9 +1,9 @@
 export declare interface AddEdgeRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly from: string;
     readonly to: string;
-    readonly shape?: EdgeShape;
-    readonly priority?: number;
+    readonly shape?: EdgeShape | undefined;
+    readonly priority?: number | undefined;
 }
 
 declare interface AddEdgeRequest_2 {
@@ -17,13 +17,13 @@ declare interface AddEdgeRequest_2 {
 export declare type AddNodePorts = Iterable<MarkNodePortRequest>;
 
 export declare interface AddNodeRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
     readonly x: number;
     readonly y: number;
-    readonly ports?: AddNodePorts;
-    readonly centerFn?: CenterFn;
-    readonly priority?: number;
+    readonly ports?: AddNodePorts | undefined;
+    readonly centerFn?: CenterFn | undefined;
+    readonly priority?: number | undefined;
 }
 
 declare interface AddNodeRequest_2 {
@@ -76,18 +76,18 @@ export declare class BezierEdgeShape implements EdgeShape {
 }
 
 declare interface BezierEdgeShape_2 {
-    readonly type?: "bezier";
-    readonly color?: string;
-    readonly width?: number;
-    readonly curvature?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleRadius?: number;
-    readonly smallCycleRadius?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    readonly type?: "bezier" | undefined;
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly curvature?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleRadius?: number | undefined;
+    readonly smallCycleRadius?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
 }
 
 export declare interface Canvas {
@@ -262,8 +262,8 @@ declare interface EdgePayload {
 }
 
 export declare interface EdgeRenderParams {
-    readonly source: EdgeRenderPort;
-    readonly target: EdgeRenderPort;
+    readonly from: EdgeRenderPort;
+    readonly to: EdgeRenderPort;
 }
 
 export declare interface EdgeRenderPort {
@@ -375,17 +375,17 @@ export declare class HorizontalEdgeShape implements EdgeShape {
 
 declare interface HorizontalEdgeShape_2 {
     readonly type: "horizontal";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
 }
 
 export declare class HtmlGraphBuilder {
@@ -409,16 +409,16 @@ export declare class HtmlGraphError extends Error {
 declare type IncrementalPriority = "incremental";
 
 export declare type MarkNodePortRequest = {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 };
 
 export declare interface MarkPortRequest {
-    readonly id?: unknown;
+    readonly id?: unknown | undefined;
     readonly element: HTMLElement;
     readonly nodeId: unknown;
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 }
 
 export declare interface NodeDragPayload {
@@ -437,15 +437,15 @@ declare interface NodePayload {
 }
 
 export declare interface PatchMatrixRequest {
-    readonly scale?: number;
-    readonly dx?: number;
-    readonly dy?: number;
+    readonly scale?: number | undefined;
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
 }
 
 declare interface PatchTransformRequest {
     readonly scale?: number;
-    readonly dx?: number;
-    readonly dy?: number;
+    readonly x?: number;
+    readonly y?: number;
 }
 
 export declare interface Point {
@@ -469,18 +469,18 @@ export declare class PublicGraphStore {
     getAllNodeIds(): readonly unknown[];
     getPort(portId: unknown): GraphPort | null;
     getAllPortIds(): readonly unknown[];
-    getNodePortIds(nodeId: unknown): readonly unknown[] | undefined;
+    getNodePortIds(nodeId: unknown): readonly unknown[] | null;
     getPortNodeId(portId: unknown): unknown | null;
     getAllEdgeIds(): readonly unknown[];
     getEdge(edgeId: unknown): GraphEdge | null;
-    getPortIncomingEdgeIds(portId: unknown): readonly unknown[];
-    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[];
-    getPortCycleEdgeIds(portId: unknown): readonly unknown[];
-    getPortAdjacentEdgeIds(portId: unknown): readonly unknown[];
-    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[];
-    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[];
-    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[];
-    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[];
+    getPortIncomingEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortOutcomingEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortCycleEdgeIds(portId: unknown): readonly unknown[] | null;
+    getPortAdjacentEdgeIds(portId: unknown): readonly unknown[] | null;
+    getNodeIncomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeOutcomingEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeCycleEdgeIds(nodeId: unknown): readonly unknown[] | null;
+    getNodeAdjacentEdgeIds(nodeId: unknown): readonly unknown[] | null;
 }
 
 export declare class PublicViewportTransformer {
@@ -565,17 +565,17 @@ export declare class StraightEdgeShape implements EdgeShape {
 
 declare interface StraightEdgeShape_2 {
     readonly type: "straight";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
 }
 
 export declare interface TransformOptions {
@@ -599,8 +599,8 @@ export declare interface TransformOptions {
 
 export declare interface TransformPayload {
     readonly scale: number;
-    readonly dx: number;
-    readonly dy: number;
+    readonly x: number;
+    readonly y: number;
 }
 
 export declare type TransformPreprocessorFn = (params: TransformPreprocessorParams) => TransformPayload;
@@ -626,26 +626,26 @@ export declare interface TransformPreprocessorParams {
 
 declare interface TransformState {
     readonly scale: number;
-    readonly dx: number;
-    readonly dy: number;
+    readonly x: number;
+    readonly y: number;
 }
 
 export declare interface UpdateEdgeRequest {
-    readonly from?: unknown;
-    readonly to?: unknown;
-    readonly shape?: EdgeShape;
-    readonly priority?: number;
+    readonly from?: unknown | undefined;
+    readonly to?: unknown | undefined;
+    readonly shape?: EdgeShape | undefined;
+    readonly priority?: number | undefined;
 }
 
 export declare interface UpdateNodeRequest {
-    readonly x?: number;
-    readonly y?: number;
-    readonly priority?: number;
-    readonly centerFn?: CenterFn;
+    readonly x?: number | undefined;
+    readonly y?: number | undefined;
+    readonly priority?: number | undefined;
+    readonly centerFn?: CenterFn | undefined;
 }
 
 export declare interface UpdatePortRequest {
-    readonly direction?: number;
+    readonly direction?: number | undefined;
 }
 
 export declare class UserDraggableNodesCanvas implements Canvas {
@@ -764,17 +764,17 @@ export declare class VerticalEdgeShape implements EdgeShape {
 
 declare interface VerticalEdgeShape_2 {
     readonly type: "vertical";
-    readonly color?: string;
-    readonly width?: number;
-    readonly arrowLength?: number;
-    readonly arrowWidth?: number;
-    readonly arrowOffset?: number;
-    readonly hasSourceArrow?: boolean;
-    readonly hasTargetArrow?: boolean;
-    readonly cycleSquareSide?: number;
-    readonly roundness?: number;
-    readonly detourDistance?: number;
-    readonly detourDirection?: number;
+    readonly color?: string | undefined;
+    readonly width?: number | undefined;
+    readonly arrowLength?: number | undefined;
+    readonly arrowWidth?: number | undefined;
+    readonly arrowOffset?: number | undefined;
+    readonly hasSourceArrow?: boolean | undefined;
+    readonly hasTargetArrow?: boolean | undefined;
+    readonly cycleSquareSide?: number | undefined;
+    readonly roundness?: number | undefined;
+    readonly detourDistance?: number | undefined;
+    readonly detourDirection?: number | undefined;
 }
 
 declare class ViewportTransformer {

package/dist/main.js

@@ -26,10 +26,10 @@ const O = (e, t) => ({
       let l = 0, a = 0, g = 0;
       const y = d > 0, x = d < r, f = y && x;
       if (y && (l = -i, a = -s, g = h), x) {
-        const I = e[d + 1];
-        i = I.x - c.x, s = I.y - c.y, h = Math.sqrt(i * i + s * s);
+        const m = e[d + 1];
+        i = m.x - c.x, s = m.y - c.y, h = Math.sqrt(i * i + s * s);
       }
-      const S = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, T = f ? { x: c.x + i * S, y: c.y + s * S } : c, P = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = f ? { x: c.x + l * P, y: c.y + a * P } : c;
+      const E = h !== 0 ? Math.min((f ? t : 0) / h, d < r - 1 ? 0.5 : 1) : 0, T = f ? { x: c.x + i * E, y: c.y + s * E } : c, L = g !== 0 ? Math.min((f ? t : 0) / g, d > 1 ? 0.5 : 1) : 0, D = f ? { x: c.x + l * L, y: c.y + a * L } : c;
       d > 0 && o.push(`L ${D.x} ${D.y}`), f && o.push(
         `C ${c.x} ${c.y} ${c.x} ${c.y} ${T.x} ${T.y}`
       );
@@ -113,7 +113,7 @@ const O = (e, t) => ({
   }, A = {
     x: d.x + h,
     y: d.y + c
-  }, S = {
+  }, E = {
     x: a.x + h,
     y: a.y + c
   };
@@ -121,7 +121,7 @@ const O = (e, t) => ({
     `M ${t.x} ${t.y}`,
     `L ${d.x} ${d.y}`,
     `C ${x.x} ${x.y} ${A.x} ${A.y} ${y.x} ${y.y}`,
-    `C ${S.x} ${S.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
+    `C ${E.x} ${E.y} ${f.x} ${f.y} ${a.x} ${a.y}`,
     `L ${o.x} ${o.y}`
   ].join(" ");
 }, et = (e) => {
@@ -268,31 +268,27 @@ class nt {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
+      t.from.direction,
       h,
       c
-    ), l = M(
-      t.target.direction,
-      h,
-      c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = it({
+    if (t.from.portId === t.to.portId ? (g = it({
       fromVect: d,
       radius: this.portCycleRadius,
       smallRadius: this.portCycleSmallRadius,
       arrowLength: this.arrowLength,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = tt({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = tt({
       to: a,
       fromVect: d,
       toVect: l,
@@ -360,24 +356,20 @@ class st {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
-      h,
-      c
-    ), l = M(
-      t.target.direction,
+      t.from.direction,
       h,
       c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -385,7 +377,7 @@ class st {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -456,24 +448,20 @@ class ht {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
+      t.from.direction,
       h,
       c
-    ), l = M(
-      t.target.direction,
-      h,
-      c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -481,7 +469,7 @@ class ht {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -551,24 +539,20 @@ class ct {
   }
   render(t) {
     const { x: o, y: r, width: i, height: s, flipX: h, flipY: c } = Y(
-      t.source,
-      t.target
+      t.from,
+      t.to
     );
     this.svg.style.transform = `translate(${o}px, ${r}px)`, this.svg.style.width = `${i}px`, this.svg.style.height = `${s}px`, this.group.style.transform = `scale(${h}, ${c})`;
     const d = M(
-      t.source.direction,
-      h,
-      c
-    ), l = M(
-      t.target.direction,
+      t.from.direction,
       h,
       c
-    ), a = {
+    ), l = M(t.to.direction, h, c), a = {
       x: i,
       y: s
     };
     let g, y = l, x = -this.arrowLength;
-    if (t.source.portId === t.target.portId ? (g = U({
+    if (t.from.portId === t.to.portId ? (g = U({
       fromVect: d,
       arrowLength: this.arrowLength,
       side: this.cycleSquareSide,
@@ -576,7 +560,7 @@ class ct {
       roundness: this.roundness,
       hasSourceArrow: this.hasSourceArrow,
       hasTargetArrow: this.hasTargetArrow
-    }), y = d, x = this.arrowLength) : t.source.nodeId === t.target.nodeId ? g = G({
+    }), y = d, x = this.arrowLength) : t.from.nodeId === t.to.nodeId ? g = G({
       to: a,
       fromVect: d,
       toVect: l,
@@ -852,12 +836,12 @@ class gt {
 }
 const K = (e) => ({
   scale: 1 / e.scale,
-  dx: -e.dx / e.scale,
-  dy: -e.dy / e.scale
+  x: -e.x / e.scale,
+  y: -e.y / e.scale
 }), _ = {
   scale: 1,
-  dx: 0,
-  dy: 0
+  x: 0,
+  y: 0
 };
 class ut {
   constructor() {
@@ -873,15 +857,15 @@ class ut {
   patchViewportMatrix(t) {
     this.viewportMatrix = {
       scale: t.scale ?? this.viewportMatrix.scale,
-      dx: t.dx ?? this.viewportMatrix.dx,
-      dy: t.dy ?? this.viewportMatrix.dy
+      x: t.x ?? this.viewportMatrix.x,
+      y: t.y ?? this.viewportMatrix.y
     }, this.contentMatrix = K(this.viewportMatrix);
   }
   patchContentMatrix(t) {
     this.contentMatrix = {
       scale: t.scale ?? this.contentMatrix.scale,
-      dx: t.dx ?? this.contentMatrix.dx,
-      dy: t.dy ?? this.contentMatrix.dy
+      x: t.x ?? this.contentMatrix.x,
+      y: t.y ?? this.contentMatrix.y
     }, this.viewportMatrix = K(this.contentMatrix);
   }
 }
@@ -923,7 +907,7 @@ class xt {
   }
   applyTransform() {
     const t = this.viewportTransformer.getContentMatrix();
-    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`;
+    this.container.style.transform = `matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`;
   }
   attachNode(t) {
     const o = this.graphStore.getNode(t), r = vt();
@@ -967,11 +951,11 @@ class xt {
   }
   renderEdge(t) {
     const o = this.graphStore.getEdge(t), r = this.graphStore.getPort(o.from), i = this.graphStore.getPort(o.to), s = r.element.getBoundingClientRect(), h = i.element.getBoundingClientRect(), c = this.host.getBoundingClientRect(), d = this.viewportTransformer.getViewportMatrix(), l = {
-      x: d.scale * (s.left - c.left) + d.dx,
-      y: d.scale * (s.top - c.top) + d.dy
+      x: d.scale * (s.left - c.left) + d.x,
+      y: d.scale * (s.top - c.top) + d.y
     }, a = {
-      x: d.scale * (h.left - c.left) + d.dx,
-      y: d.scale * (h.top - c.top) + d.dy
+      x: d.scale * (h.left - c.left) + d.x,
+      y: d.scale * (h.top - c.top) + d.y
     }, g = {
       x: l.x,
       y: l.y,
@@ -990,8 +974,8 @@ class xt {
       nodeId: this.graphStore.getPortNodeId(o.to)
     };
     o.shape.render({
-      source: g,
-      target: y
+      from: g,
+      to: y
     });
   }
   updateEdgePriority(t) {
@@ -999,7 +983,7 @@ class xt {
     o.shape.svg.style.zIndex = `${o.priority}`;
   }
 }
-class m {
+class I {
   constructor(t) {
     n(this, "counter", 0);
     this.checkExists = t;
@@ -1015,21 +999,21 @@ class m {
     this.counter = 0;
   }
 }
-class E extends Error {
+class S extends Error {
   constructor() {
     super(...arguments);
     n(this, "name", "HtmlGraphError");
   }
 }
-class Et {
+class St {
   constructor(t, o, r, i, s, h, c) {
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.graphStore.getNode(t) !== void 0
     ));
-    n(this, "portIdGenerator", new m(
+    n(this, "portIdGenerator", new I(
       (t) => this.graphStore.getPort(t) !== void 0
     ));
-    n(this, "edgeIdGenerator", new m(
+    n(this, "edgeIdGenerator", new I(
       (t) => this.graphStore.getEdge(t) !== void 0
     ));
     this.graphStore = t, this.htmlController = o, this.viewportTransformer = r, this.defaultNodesCenterFn = i, this.defaultPortsDirection = s, this.defaultNodesPriorityFn = h, this.defaultEdgesPriorityFn = c;
@@ -1043,7 +1027,7 @@ class Et {
   addNode(t) {
     const o = this.nodeIdGenerator.create(t.nodeId);
     if (this.graphStore.getNode(o) !== void 0)
-      throw new E("failed to add node with existing id");
+      throw new S("failed to add node with existing id");
     this.graphStore.addNode({
       nodeId: o,
       element: t.element,
@@ -1063,9 +1047,9 @@ class Et {
   markPort(t) {
     const o = this.portIdGenerator.create(t.portId);
     if (this.graphStore.getPort(o) !== void 0)
-      throw new E("failed to add port with existing id");
+      throw new S("failed to add port with existing id");
     if (this.graphStore.getNode(t.nodeId) === void 0)
-      throw new E("failed to set port on nonexisting node");
+      throw new S("failed to set port on nonexisting node");
     this.graphStore.addPort({
       portId: o,
       element: t.element,
@@ -1076,11 +1060,11 @@ class Et {
   addEdge(t) {
     const o = this.edgeIdGenerator.create(t.edgeId);
     if (this.graphStore.getEdge(o) !== void 0)
-      throw new E("failed to add edge with existing id");
+      throw new S("failed to add edge with existing id");
     if (this.graphStore.getPort(t.from) === void 0)
-      throw new E("failed to add edge from nonexisting port");
+      throw new S("failed to add edge from nonexisting port");
     if (this.graphStore.getPort(t.to) === void 0)
-      throw new E("failed to add edge to nonexisting port");
+      throw new S("failed to add edge to nonexisting port");
     this.graphStore.addEdge({
       edgeId: o,
       from: t.from,
@@ -1092,13 +1076,13 @@ class Et {
   updateEdge(t) {
     const o = this.graphStore.getEdge(t.edgeId);
     if (o === void 0)
-      throw new E("failed to update nonexisting edge");
+      throw new S("failed to update nonexisting edge");
     t.shape !== void 0 && (o.shape = t.shape, this.htmlController.updateEdgeShape(t.edgeId)), t.priority !== void 0 && (o.priority = t.priority, this.htmlController.updateEdgePriority(t.edgeId)), t.from !== void 0 && this.graphStore.updateEdgeFrom(t.edgeId, t.from), t.to !== void 0 && this.graphStore.updateEdgeTo(t.edgeId, t.to), this.htmlController.renderEdge(t.edgeId);
   }
   updatePort(t, o) {
     const r = this.graphStore.getPort(t);
     if (r === void 0)
-      throw new E("failed to unset nonexisting port");
+      throw new S("failed to unset nonexisting port");
     r.direction = o.direction ?? r.direction, this.graphStore.getPortAdjacentEdgeIds(t).forEach((s) => {
       this.htmlController.renderEdge(s);
     });
@@ -1106,26 +1090,26 @@ class Et {
   updateNode(t, o) {
     const r = this.graphStore.getNode(t);
     if (r === void 0)
-      throw new E("failed to update nonexisting node");
+      throw new S("failed to update nonexisting node");
     r.x = (o == null ? void 0 : o.x) ?? r.x, r.y = (o == null ? void 0 : o.y) ?? r.y, r.centerFn = (o == null ? void 0 : o.centerFn) ?? r.centerFn, r.priority = (o == null ? void 0 : o.priority) ?? r.priority, this.htmlController.updateNodeCoordinates(t), this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdgeIds(t).forEach((s) => {
       this.htmlController.renderEdge(s);
     });
   }
   removeEdge(t) {
     if (this.graphStore.getEdge(t) === void 0)
-      throw new E("failed to remove nonexisting edge");
+      throw new S("failed to remove nonexisting edge");
     this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
   }
   unmarkPort(t) {
     if (this.graphStore.getPort(t) === void 0)
-      throw new E("failed to unset nonexisting port");
+      throw new S("failed to unset nonexisting port");
     this.graphStore.getPortAdjacentEdgeIds(t).forEach((o) => {
       this.removeEdge(o);
     }), this.graphStore.removePort(t);
   }
   removeNode(t) {
     if (this.graphStore.getNode(t) === void 0)
-      throw new E("failed to remove nonexisting node");
+      throw new S("failed to remove nonexisting node");
     this.graphStore.getNodePortIds(t).forEach((o) => {
       this.unmarkPort(o);
     }), this.htmlController.detachNode(t), this.graphStore.removeNode(t);
@@ -1143,7 +1127,7 @@ class Et {
     this.clear(), this.htmlController.destroy();
   }
 }
-class St {
+class Et {
   constructor(t) {
     this.graphStore = t;
   }
@@ -1171,7 +1155,7 @@ class St {
     return this.graphStore.getAllPortIds();
   }
   getNodePortIds(t) {
-    return this.graphStore.getNodePortIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodePortIds(t);
   }
   getPortNodeId(t) {
     return this.graphStore.getPortNodeId(t) ?? null;
@@ -1184,28 +1168,28 @@ class St {
     return o === void 0 ? null : { from: o.from, to: o.to, priority: o.priority };
   }
   getPortIncomingEdgeIds(t) {
-    return this.graphStore.getPortIncomingEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortIncomingEdgeIds(t);
   }
   getPortOutcomingEdgeIds(t) {
-    return this.graphStore.getPortOutcomingEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortOutcomingEdgeIds(t);
   }
   getPortCycleEdgeIds(t) {
-    return this.graphStore.getPortCycleEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortCycleEdgeIds(t);
   }
   getPortAdjacentEdgeIds(t) {
-    return this.graphStore.getPortAdjacentEdgeIds(t);
+    return this.graphStore.getPort(t) === void 0 ? null : this.graphStore.getPortAdjacentEdgeIds(t);
   }
   getNodeIncomingEdgeIds(t) {
-    return this.graphStore.getNodeIncomingEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeIncomingEdgeIds(t);
   }
   getNodeOutcomingEdgeIds(t) {
-    return this.graphStore.getNodeOutcomingEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeOutcomingEdgeIds(t);
   }
   getNodeCycleEdgeIds(t) {
-    return this.graphStore.getNodeCycleEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeCycleEdgeIds(t);
   }
   getNodeAdjacentEdgeIds(t) {
-    return this.graphStore.getNodeAdjacentEdgeIds(t);
+    return this.graphStore.getNode(t) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(t);
   }
 }
 class At {
@@ -1216,9 +1200,9 @@ class At {
     n(this, "edgeShapeFactory");
     this.apiOptions = t;
     const o = at(this.apiOptions), r = new ut(), i = new gt();
-    this.model = new St(i), this.transformation = new wt(r);
+    this.model = new Et(i), this.transformation = new wt(r);
     const s = new xt(i, r);
-    this.canvasController = new Et(
+    this.canvasController = new St(
       i,
       s,
       r,
@@ -1309,13 +1293,13 @@ class At {
 const V = (e, t, o) => {
   const { x: r, y: i, width: s, height: h } = e.getBoundingClientRect();
   return t >= r && t <= r + s && o >= i && o <= i + h;
-}, b = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, p = (e, t) => {
+}, p = (e, t, o) => t >= 0 && t <= e.innerWidth && o >= 0 && o <= e.innerHeight, b = (e, t) => {
   t !== null ? e.style.cursor = t : e.style.removeProperty("cursor");
 }, Tt = (e) => {
-  var g, y, x, f, A, S;
+  var g, y, x, f, A, E;
   const t = ((g = e == null ? void 0 : e.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
   }), o = ((y = e == null ? void 0 : e.events) == null ? void 0 : y.onBeforeNodeDrag) ?? (() => !0), r = ((x = e == null ? void 0 : e.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
-  }), i = (e == null ? void 0 : e.moveOnTop) === !1, s = (f = e == null ? void 0 : e.mouse) == null ? void 0 : f.dragCursor, h = s !== void 0 ? s : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, l = (S = e == null ? void 0 : e.mouse) == null ? void 0 : S.mouseUpEventVerifier;
+  }), i = (e == null ? void 0 : e.moveOnTop) === !1, s = (f = e == null ? void 0 : e.mouse) == null ? void 0 : f.dragCursor, h = s !== void 0 ? s : "grab", c = (A = e == null ? void 0 : e.mouse) == null ? void 0 : A.mouseDownEventVerifier, d = c !== void 0 ? c : (T) => T.button === 0, l = (E = e == null ? void 0 : e.mouse) == null ? void 0 : E.mouseUpEventVerifier;
   return {
     freezePriority: i,
     dragCursor: h,
@@ -1333,12 +1317,12 @@ class Mt {
     n(this, "maxNodePriority", 0);
     n(this, "nodes", /* @__PURE__ */ new Map());
     n(this, "grabbedNodeId", null);
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.nodes.has(t)
     ));
     n(this, "element", null);
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY))) {
+      if (this.element !== null && (!V(this.element, t.clientX, t.clientY) || !p(this.window, t.clientX, t.clientY))) {
         this.cancelMouseDrag();
         return;
       }
@@ -1351,7 +1335,7 @@ class Mt {
       if (t.touches.length !== 1)
         return;
       const o = t.touches[0];
-      if (this.element !== null && (!V(this.element, o.clientX, o.clientY) || !b(this.window, o.clientX, o.clientY))) {
+      if (this.element !== null && (!V(this.element, o.clientX, o.clientY) || !p(this.window, o.clientX, o.clientY))) {
         this.cancelTouchDrag();
         return;
       }
@@ -1389,7 +1373,7 @@ class Mt {
         element: t.element,
         x: h.x,
         y: h.y
-      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, p(this.element, this.options.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
+      }) && (s.stopImmediatePropagation(), this.grabbedNodeId = o, b(this.element, this.options.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
     }, i = (s) => {
       if (s.touches.length !== 1)
         return;
@@ -1454,7 +1438,7 @@ class Mt {
     const i = this.model.getNode(t);
     if (i === null)
       return;
-    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.dx, c = s.scale * i.y + s.dy, d = h + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * d + a.dx, y = a.scale * l + a.dy;
+    const s = this.canvas.transformation.getContentMatrix(), h = s.scale * i.x + s.x, c = s.scale * i.y + s.y, d = h + o, l = c + r, a = this.canvas.transformation.getViewportMatrix(), g = a.scale * d + a.x, y = a.scale * l + a.y;
     this.canvas.updateNode(t, { x: g, y }), this.options.onNodeDrag({
       nodeId: t,
       element: i.element,
@@ -1482,7 +1466,7 @@ class Mt {
       element: t.element,
       x: t.x,
       y: t.y
-    }), this.grabbedNodeId = null, this.element !== null && p(this.element, null), this.removeMouseDragListeners();
+    }), this.grabbedNodeId = null, this.element !== null && b(this.element, null), this.removeMouseDragListeners();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
@@ -1504,35 +1488,35 @@ class Mt {
 const Ct = (e) => {
   const t = e.minX !== null ? e.minX : -1 / 0, o = e.maxX !== null ? e.maxX : 1 / 0, r = e.minY !== null ? e.minY : -1 / 0, i = e.maxY !== null ? e.maxY : 1 / 0;
   return (s) => {
-    let h = s.nextTransform.dx, c = s.nextTransform.dy;
-    h < t && h < s.prevTransform.dx && (h = Math.min(s.prevTransform.dx, t));
-    const d = s.canvasWidth * s.prevTransform.scale;
-    h > o - d && h > s.prevTransform.dx && (h = Math.max(s.prevTransform.dx, o - d)), c < r && c < s.prevTransform.dy && (c = Math.min(s.prevTransform.dy, r));
-    const l = s.canvasHeight * s.prevTransform.scale;
-    return c > i - l && c > s.prevTransform.dy && (c = Math.max(s.prevTransform.dy, i - l)), { scale: s.nextTransform.scale, dx: h, dy: c };
+    let h = s.nextTransform.x, c = s.nextTransform.y;
+    h < t && h < s.prevTransform.x && (h = Math.min(s.prevTransform.x, t));
+    const d = s.canvasWidth * s.prevTransform.scale, l = o - d;
+    h > l && h > s.prevTransform.x && (h = Math.max(s.prevTransform.x, l)), c < r && c < s.prevTransform.y && (c = Math.min(s.prevTransform.y, r));
+    const a = s.canvasHeight * s.prevTransform.scale, g = i - a;
+    return c > g && c > s.prevTransform.y && (c = Math.max(s.prevTransform.y, g)), { scale: s.nextTransform.scale, x: h, y: c };
   };
 }, Nt = (e) => {
   const t = e.maxContentScale, o = e.minContentScale, r = t !== null ? 1 / t : 0, i = o !== null ? 1 / o : 1 / 0;
   return (s) => {
     const h = s.prevTransform, c = s.nextTransform;
-    let d = c.scale, l = c.dx, a = c.dy;
+    let d = c.scale, l = c.x, a = c.y;
     if (c.scale > i && c.scale > h.scale) {
-      d = Math.max(h.scale, i), l = h.dx, a = h.dy;
+      d = Math.max(h.scale, i), l = h.x, a = h.y;
       const g = (d - h.scale) / (c.scale - h.scale);
-      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.dy - h.dy) * g;
+      l = h.x + (c.x - h.x) * g, a = h.y + (c.y - h.y) * g;
     }
     if (c.scale < r && c.scale < h.scale) {
-      d = Math.min(h.scale, r), l = h.dx, a = h.dy;
+      d = Math.min(h.scale, r), l = h.x, a = h.y;
       const g = (d - h.scale) / (c.scale - h.scale);
-      l = h.dx + (c.dx - h.dx) * g, a = h.dy + (c.dy - h.dy) * g;
+      l = h.x + (c.x - h.x) * g, a = h.y + (c.y - h.y) * g;
     }
     return {
       scale: d,
-      dx: l,
-      dy: a
+      x: l,
+      y: a
     };
   };
-}, Lt = (e) => (t) => e.reduce(
+}, Pt = (e) => (t) => e.reduce(
   (o, r) => r({
     prevTransform: t.prevTransform,
     nextTransform: o,
@@ -1557,21 +1541,21 @@ const Ct = (e) => {
         maxY: e.maxY ?? 1 / 0
       });
   }
-}, Pt = (e) => {
-  var f, A, S, T, X, P, D, I, j;
+}, Lt = (e) => {
+  var f, A, E, T, X, L, D, m, j;
   const t = (f = e == null ? void 0 : e.scale) == null ? void 0 : f.mouseWheelSensitivity, o = t !== void 0 ? t : 1.2, r = e == null ? void 0 : e.transformPreprocessor;
   let i;
-  r !== void 0 ? Array.isArray(r) ? i = Lt(
+  r !== void 0 ? Array.isArray(r) ? i = Pt(
     r.map(
-      (L) => J(L)
+      (P) => J(P)
     )
-  ) : i = J(r) : i = (L) => L.nextTransform;
-  const s = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((S = e == null ? void 0 : e.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
+  ) : i = J(r) : i = (P) => P.nextTransform;
+  const s = ((A = e == null ? void 0 : e.shift) == null ? void 0 : A.cursor) !== void 0 ? e.shift.cursor : "grab", h = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
   }), c = ((T = e == null ? void 0 : e.events) == null ? void 0 : T.onTransformChange) ?? (() => {
-  }), d = (X = e == null ? void 0 : e.shift) == null ? void 0 : X.mouseDownEventVerifier, l = d !== void 0 ? d : (L) => L.button === 0, a = (P = e == null ? void 0 : e.shift) == null ? void 0 : P.mouseUpEventVerifier, g = a !== void 0 ? a : (L) => L.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
+  }), d = (X = e == null ? void 0 : e.shift) == null ? void 0 : X.mouseDownEventVerifier, l = d !== void 0 ? d : (P) => P.button === 0, a = (L = e == null ? void 0 : e.shift) == null ? void 0 : L.mouseUpEventVerifier, g = a !== void 0 ? a : (P) => P.button === 0, y = (D = e == null ? void 0 : e.scale) == null ? void 0 : D.mouseWheelEventVerifier, x = y !== void 0 ? y : () => !0;
   return {
     wheelSensitivity: o,
-    onTransformStarted: ((I = e == null ? void 0 : e.events) == null ? void 0 : I.onTransformStarted) ?? (() => {
+    onTransformStarted: ((m = e == null ? void 0 : e.events) == null ? void 0 : m.onTransformStarted) ?? (() => {
     }),
     onTransformFinished: ((j = e == null ? void 0 : e.events) == null ? void 0 : j.onTransformFinished) ?? (() => {
     }),
@@ -1603,14 +1587,14 @@ const Ct = (e) => {
   };
 }, Dt = (e, t, o) => ({
   scale: e.scale,
-  dx: e.dx + e.scale * t,
-  dy: e.dy + e.scale * o
-}), It = (e, t, o, r) => ({
+  x: e.x + e.scale * t,
+  y: e.y + e.scale * o
+}), mt = (e, t, o, r) => ({
   scale: e.scale * t,
-  dx: e.scale * (1 - t) * o + e.dx,
-  dy: e.scale * (1 - t) * r + e.dy
+  x: e.scale * (1 - t) * o + e.x,
+  y: e.scale * (1 - t) * r + e.y
 });
-class mt {
+class It {
   constructor(t, o) {
     n(this, "model");
     n(this, "transformation");
@@ -1618,10 +1602,10 @@ class mt {
     n(this, "prevTouches", null);
     n(this, "window", window);
     n(this, "onMouseDown", (t) => {
-      this.element === null || !this.options.mouseDownEventVerifier(t) || (p(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
+      this.element === null || !this.options.mouseDownEventVerifier(t) || (b(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
     });
     n(this, "onWindowMouseMove", (t) => {
-      if (this.element === null || !V(this.element, t.clientX, t.clientY) || !b(this.window, t.clientX, t.clientY)) {
+      if (this.element === null || !V(this.element, t.clientX, t.clientY) || !p(this.window, t.clientX, t.clientY)) {
         this.stopMouseDrag();
         return;
       }
@@ -1647,7 +1631,7 @@ class mt {
         return;
       const r = B(t);
       if (!r.touches.every(
-        (s) => V(o, s[0], s[1]) && b(this.window, s[0], s[1])
+        (s) => V(o, s[0], s[1]) && p(this.window, s[0], s[1])
       )) {
         this.stopTouchDrag();
         return;
@@ -1675,7 +1659,7 @@ class mt {
       this.canvas.patchViewportMatrix(i), this.options.onTransformChange();
     }));
     n(this, "options");
-    this.canvas = t, this.options = Pt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
+    this.canvas = t, this.options = Lt(o), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
   }
   attach(t) {
     return this.detach(), this.element = t, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
@@ -1734,7 +1718,7 @@ class mt {
   }
   scaleViewport(t, o, r, i) {
     this.options.onBeforeTransformChange();
-    const s = this.canvas.transformation.getViewportMatrix(), h = It(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
+    const s = this.canvas.transformation.getViewportMatrix(), h = mt(s, o, r, i), { width: c, height: d } = t.getBoundingClientRect(), l = this.options.transformPreprocessor({
       prevTransform: s,
       nextTransform: h,
       canvasWidth: c,
@@ -1743,7 +1727,7 @@ class mt {
     this.canvas.patchViewportMatrix(l), this.options.onTransformChange();
   }
   stopMouseDrag() {
-    this.element !== null && p(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
+    this.element !== null && b(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
   }
   removeMouseDragListeners() {
     this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -1797,7 +1781,7 @@ class Vt {
     n(this, "transformation");
     n(this, "model");
     n(this, "nodes", new $t());
-    n(this, "nodeIdGenerator", new m(
+    n(this, "nodeIdGenerator", new I(
       (t) => this.nodes.hasKey(t)
     ));
     n(this, "nodesResizeObserver");
@@ -1866,7 +1850,7 @@ class Vt {
     });
   }
 }
-class pt {
+class bt {
   constructor() {
     n(this, "coreOptions");
     n(this, "dragOptions");
@@ -1889,18 +1873,18 @@ class pt {
   }
   build() {
     let t = new At(this.coreOptions);
-    return this.hasResizeReactiveNodes && (t = new Vt(t)), this.isDraggable && (t = new Mt(t, this.dragOptions)), this.isTransformable && (t = new mt(t, this.transformOptions)), t;
+    return this.hasResizeReactiveNodes && (t = new Vt(t)), this.isDraggable && (t = new Mt(t, this.dragOptions)), this.isTransformable && (t = new It(t, this.transformOptions)), t;
   }
 }
 export {
   nt as BezierEdgeShape,
   At as CanvasCore,
   st as HorizontalEdgeShape,
-  pt as HtmlGraphBuilder,
-  E as HtmlGraphError,
+  bt as HtmlGraphBuilder,
+  S as HtmlGraphError,
   Vt as ResizeReactiveNodesCanvas,
   ht as StraightEdgeShape,
   Mt as UserDraggableNodesCanvas,
-  mt as UserTransformableCanvas,
+  It as UserTransformableCanvas,
   ct as VerticalEdgeShape
 };

package/dist/main.umd.cjs

@@ -1 +1 @@
-(function(E,S){typeof exports=="object"&&typeof module<"u"?S(exports):typeof define=="function"&&define.amd?define(["exports"],S):(E=typeof globalThis<"u"?globalThis:E||self,S(E.HTMLGraph={}))})(this,function(E){"use strict";var Vt=Object.defineProperty;var pt=(E,S,f)=>S in E?Vt(E,S,{enumerable:!0,configurable:!0,writable:!0,value:f}):E[S]=f;var n=(E,S,f)=>pt(E,typeof S!="symbol"?S+"":S,f);const S=(e,t)=>({x:e/2,y:t/2}),f=(e,t,o)=>({x:t.x*e.x-t.y*e.y+((1-t.x)*o.x+t.y*o.y),y:t.y*e.x+t.x*e.y+((1-t.x)*o.y-t.y*o.x)}),N=(e,t,o)=>({x:t*Math.cos(e),y:o*Math.sin(e)}),u={x:0,y:0},L=(e,t,o,r)=>{const s=[u,{x:o,y:r},{x:o,y:-r}].map(l=>f(l,e,u)).map(l=>({x:l.x+t.x,y:l.y+t.y})),h=`M ${s[0].x} ${s[0].y}`,d=`L ${s[1].x} ${s[1].y}`,c=`L ${s[2].x} ${s[2].y}`;return`${h} ${d} ${c}`},I=(e,t)=>{const o=[];if(e.length>0&&o.push(`M ${e[0].x} ${e[0].y}`),e.length===2&&o.push(`L ${e[1].x} ${e[1].y}`),e.length>2){const r=e.length-1;let i=0,s=0,h=0;e.forEach((d,c)=>{let l=0,a=0,g=0;const y=c>0,x=c<r,v=y&&x;if(y&&(l=-i,a=-s,g=h),x){const V=e[c+1];i=V.x-d.x,s=V.y-d.y,h=Math.sqrt(i*i+s*s)}const T=h!==0?Math.min((v?t:0)/h,c<r-1?.5:1):0,C=v?{x:d.x+i*T,y:d.y+s*T}:d,$=g!==0?Math.min((v?t:0)/g,c>1?.5:1):0,b=v?{x:d.x+l*$,y:d.y+a*$}:d;c>0&&o.push(`L ${b.x} ${b.y}`),v&&o.push(`C ${d.x} ${d.y} ${d.x} ${d.y} ${C.x} ${C.y}`)})}return o.join(" ")},p=()=>{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},W=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g");return e.style.transformOrigin="50% 50%",e},F=(e,t)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",e),o.setAttribute("stroke-width",`${t}`),o.setAttribute("fill","none"),o},P=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",e),t},R=(e,t)=>{const o={x:e.x+e.width/2,y:e.y+e.height/2},r={x:t.x+t.width/2,y:t.y+t.height/2},i=Math.min(o.x,r.x),s=Math.min(o.y,r.y),h=Math.abs(r.x-o.x),d=Math.abs(r.y-o.y),c=o.x<=r.x?1:-1,l=o.y<=r.y?1:-1;return{x:i,y:s,width:h,height:d,flipX:c,flipY:l}},st=e=>{const t=f({x:e.arrowLength,y:u.y},e.fromVect,u),o=f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to),r={x:t.x+e.fromVect.x*e.curvature,y:t.y+e.fromVect.y*e.curvature},i={x:o.x-e.toVect.x*e.curvature,y:o.y-e.toVect.y*e.curvature},s=`M ${t.x} ${t.y} C ${r.x} ${r.y}, ${i.x} ${i.y}, ${o.x} ${o.y}`,h=e.hasSourceArrow?"":`M ${u.x} ${u.y} L ${t.x} ${t.y} `,d=e.hasTargetArrow?"":` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;return`${h}${s}${d}`},ht=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength,i=Math.cos(e.detourDirection)*e.detourDistance,s=Math.sin(e.detourDirection)*e.detourDistance,h=i*e.flipX,d=s*e.flipY,c=f({x:r,y:u.y},e.fromVect,u),l={x:c.x+h,y:c.y+d},a=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:a.x+h,y:a.y+d},y={x:(l.x+g.x)/2,y:(l.y+g.y)/2},x={x:c.x+e.curvature*e.fromVect.x,y:c.y+e.curvature*e.fromVect.y},v={x:a.x-e.curvature*e.toVect.x,y:a.y-e.curvature*e.toVect.y},M={x:c.x+h,y:c.y+d},T={x:a.x+h,y:a.y+d};return[`M ${t.x} ${t.y}`,`L ${c.x} ${c.y}`,`C ${x.x} ${x.y} ${M.x} ${M.y} ${y.x} ${y.y}`,`C ${T.x} ${T.y} ${v.x} ${v.y} ${a.x} ${a.y}`,`L ${o.x} ${o.y}`].join(" ")},dt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=r-e.roundness,s=f({x:i,y:u.y},e.fromVect,u),h=f({x:e.to.x-i,y:e.to.y},e.toVect,e.to),d=Math.max((s.x+h.x)/2,r),c=e.to.y/2,l={x:e.flipX>0?d:-r,y:s.y},a={x:l.x,y:c},g={x:e.flipX>0?e.to.x-d:e.to.x+r,y:h.y},y={x:g.x,y:c};return I([t,s,l,a,y,g,h,o],e.roundness)},B=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=f({x:r,y:u.y},e.fromVect,u),s=Math.cos(e.detourDirection)*e.detourDistance,h=Math.sin(e.detourDirection)*e.detourDistance,d=s*e.flipX,c=h*e.flipY,l={x:i.x+d,y:i.y+c},a=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:a.x+d,y:a.y+c};return I([t,i,l,g,a,o],e.roundness)},ct=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=f({x:r,y:u.y},e.fromVect,u),s=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to);return I([t,i,s,o],e.roundness)},lt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=r-e.roundness,s=f({x:i,y:u.y},e.fromVect,u),h=f({x:e.to.x-i,y:e.to.y},e.toVect,e.to),d=Math.max((s.y+h.y)/2,r),c=e.to.x/2,l={x:s.x,y:e.flipY>0?d:-r},a={x:c,y:l.y},g={x:h.x,y:e.flipY>0?e.to.y-d:e.to.y+r},y={x:c,y:g.y};return I([t,s,l,a,y,g,h,o],e.roundness)},z=e=>{const t=e.arrowOffset,o=e.side,r=e.arrowLength+t,i=r+2*o,h=[{x:e.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:e.side},{x:i,y:e.side},{x:i,y:-e.side},{x:r,y:-e.side},{x:r,y:u.y},{x:e.arrowLength,y:u.y}].map(c=>f(c,e.fromVect,u)),d=`M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":d}${I(h,e.roundness)}`},at=e=>{const t=e.smallRadius,o=e.radius,r=Math.sqrt(t*t+o*o),i=t+o,s=e.arrowLength+r*(1-o/i),h=t*o/i,c=[{x:e.arrowLength,y:u.y},{x:s,y:h},{x:s,y:-h}].map(g=>f(g,e.fromVect,u)),l=[`M ${c[0].x} ${c[0].y}`,`A ${t} ${t} 0 0 1 ${c[1].x} ${c[1].y}`,`A ${o} ${o} 0 1 0 ${c[2].x} ${c[2].y}`,`A ${t} ${t} 0 0 1 ${c[0].x} ${c[0].y}`].join(" "),a=`M 0 0 L ${c[0].x} ${c[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":a}${l}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class K{constructor(t){n(this,"svg",p());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"curvature");n(this,"portCycleRadius");n(this,"portCycleSmallRadius");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??w.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const o=(t==null?void 0:t.color)??w.color,r=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(o),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:d}=R(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${d})`;const c=N(t.source.direction,h,d),l=N(t.target.direction,h,d),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.source.portId===t.target.portId?(g=at({fromVect:c,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=c,x=this.arrowLength):t.source.nodeId===t.target.nodeId?g=ht({to:a,fromVect:c,toVect:l,flipX:h,flipY:d,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=st({to:a,fromVect:c,toVect:l,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=L(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=L(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class _{constructor(t){n(this,"svg",p());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:d}=R(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${d})`;const c=N(t.source.direction,h,d),l=N(t.target.direction,h,d),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.source.portId===t.target.portId?(g=z({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=c,x=this.arrowLength):t.source.nodeId===t.target.nodeId?g=B({to:a,fromVect:c,toVect:l,flipX:h,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=dt({to:a,fromVect:c,toVect:l,flipX:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=L(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=L(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class J{constructor(t){n(this,"svg",p());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:d}=R(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${d})`;const c=N(t.source.direction,h,d),l=N(t.target.direction,h,d),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.source.portId===t.target.portId?(g=z({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=c,x=this.arrowLength):t.source.nodeId===t.target.nodeId?g=B({to:a,fromVect:c,toVect:l,flipX:h,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=ct({to:a,fromVect:c,toVect:l,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=L(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=L(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class Q{constructor(t){n(this,"svg",p());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirectionVertical,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=P(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=P(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:d}=R(t.source,t.target);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${d})`;const c=N(t.source.direction,h,d),l=N(t.target.direction,h,d),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.source.portId===t.target.portId?(g=z({fromVect:c,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=c,x=this.arrowLength):t.source.nodeId===t.target.nodeId?g=B({to:a,fromVect:c,toVect:l,flipX:h,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=lt({to:a,fromVect:c,toVect:l,flipY:d,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=L(c,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=L(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const gt=e=>{if(typeof e=="function")return e;switch(e==null?void 0:e.type){case"straight":return()=>new J({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"horizontal":return()=>new _({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"vertical":return()=>new Q({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});default:return()=>new K({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleRadius:e.cycleRadius,smallCycleRadius:e.smallCycleRadius,curvature:e.curvature,detourDistance:e.detourDistance,detourDirection:e.detourDirection})}},G=e=>()=>e,Z=G(0),U=()=>{let e=0;return()=>e++},ut=(e,t)=>{let o=Z,r=Z;e==="incremental"&&(o=U()),t==="incremental"&&(r=U());const i=U();return e==="shared-incremental"&&(o=i),t==="shared-incremental"&&(r=i),typeof e=="number"&&(o=G(e)),typeof t=="number"&&(r=G(t)),typeof e=="function"&&(o=e),typeof t=="function"&&(r=t),{nodesPriorityFn:o,edgesPriorityFn:r}},wt=e=>{var o,r,i,s,h;const t=ut((o=e==null?void 0:e.nodes)==null?void 0:o.priority,(r=e==null?void 0:e.edges)==null?void 0:r.priority);return{nodes:{centerFn:((i=e==null?void 0:e.nodes)==null?void 0:i.centerFn)??S,priorityFn:t.nodesPriorityFn},ports:{direction:((s=e==null?void 0:e.ports)==null?void 0:s.direction)??0},edges:{shapeFactory:gt(((h=e==null?void 0:e.edges)==null?void 0:h.shape)??{}),priorityFn:t.edgesPriorityFn}}};class yt{constructor(){n(this,"nodes",new Map);n(this,"ports",new Map);n(this,"nodePorts",new Map);n(this,"portNodeId",new Map);n(this,"edges",new Map);n(this,"incommingEdges",new Map);n(this,"outcommingEdges",new Map);n(this,"cycleEdges",new Map)}addNode(t){this.nodes.set(t.nodeId,{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}),this.nodePorts.set(t.nodeId,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}removeNode(t){this.nodes.delete(t),this.nodePorts.delete(t)}addPort(t){this.ports.set(t.portId,{element:t.element,direction:t.direction}),this.cycleEdges.set(t.portId,new Set),this.incommingEdges.set(t.portId,new Set),this.outcommingEdges.set(t.portId,new Set),this.portNodeId.set(t.portId,t.nodeId),this.nodePorts.get(t.nodeId).set(t.portId,t.element)}getPort(t){return this.ports.get(t)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(t){const o=this.nodePorts.get(t);if(o!==void 0)return Array.from(o.keys())}getPortNodeId(t){return this.portNodeId.get(t)}removePort(t){const o=this.portNodeId.get(t);this.portNodeId.delete(t),this.nodePorts.get(o).delete(t),this.ports.delete(t)}addEdge(t){this.edges.set(t.edgeId,{from:t.from,to:t.to,shape:t.shape,priority:t.priority}),t.from!==t.to?(this.outcommingEdges.get(t.from).add(t.edgeId),this.incommingEdges.get(t.to).add(t.edgeId)):this.cycleEdges.get(t.from).add(t.edgeId)}updateEdgeFrom(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:o,to:r.to,shape:r.shape,priority:r.priority})}updateEdgeTo(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:r.from,to:o,shape:r.shape,priority:r.priority})}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(t){return this.edges.get(t)}removeEdge(t){const o=this.edges.get(t),r=o.from,i=o.to;this.cycleEdges.get(r).delete(t),this.cycleEdges.get(i).delete(t),this.incommingEdges.get(r).delete(t),this.incommingEdges.get(i).delete(t),this.outcommingEdges.get(r).delete(t),this.outcommingEdges.get(i).delete(t),this.edges.delete(t)}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdgeIds(t){return Array.from(this.incommingEdges.get(t))}getPortOutcomingEdgeIds(t){return Array.from(this.outcommingEdges.get(t))}getPortCycleEdgeIds(t){return Array.from(this.cycleEdges.get(t))}getPortAdjacentEdgeIds(t){return[...this.getPortIncomingEdgeIds(t),...this.getPortOutcomingEdgeIds(t),...this.getPortCycleEdgeIds(t)]}getNodeIncomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortIncomingEdgeIds(i)]}),r}getNodeOutcomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortOutcomingEdgeIds(i)]}),r}getNodeCycleEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortCycleEdgeIds(i)]}),r}getNodeAdjacentEdgeIds(t){return[...this.getNodeIncomingEdgeIds(t),...this.getNodeOutcomingEdgeIds(t),...this.getNodeCycleEdgeIds(t)]}}const O=e=>({scale:1/e.scale,dx:-e.dx/e.scale,dy:-e.dy/e.scale}),q={scale:1,dx:0,dy:0};class ft{constructor(){n(this,"viewportMatrix",q);n(this,"contentMatrix",q)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,dx:t.dx??this.viewportMatrix.dx,dy:t.dy??this.viewportMatrix.dy},this.contentMatrix=O(this.viewportMatrix)}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,dx:t.dx??this.contentMatrix.dx,dy:t.dy??this.contentMatrix.dy},this.viewportMatrix=O(this.contentMatrix)}}class vt{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}const xt=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},Et=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="0",e.style.height="0",e},St=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.visibility="hidden",e};class At{constructor(t,o){n(this,"canvasWrapper",null);n(this,"host",xt());n(this,"container",Et());n(this,"nodeIdToWrapperElementMap",new Map);n(this,"edgeIdToElementMap",new Map);this.graphStore=t,this.viewportTransformer=o,this.host.appendChild(this.container)}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.dx}, ${t.dy})`}attachNode(t){const o=this.graphStore.getNode(t),r=St();r.appendChild(o.element),this.container.appendChild(r),this.nodeIdToWrapperElementMap.set(t,r),this.updateNodeCoordinates(t),this.updateNodePriority(t),r.style.visibility="visible"}detachNode(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.removeChild(o.element),this.container.removeChild(r),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const o=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,o.shape.svg),this.container.appendChild(o.shape.svg),this.renderEdge(t),this.updateEdgePriority(t)}detachEdge(t){const o=this.graphStore.getEdge(t);this.container.removeChild(o.shape.svg),this.edgeIdToElementMap.delete(t)}clear(){this.edgeIdToElementMap.forEach((t,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((t,o)=>{this.detachNode(o)})}destroy(){this.clear(),this.detach(),this.host.removeChild(this.container)}updateNodeCoordinates(t){const o=this.nodeIdToWrapperElementMap.get(t),r=this.graphStore.getNode(t),{width:i,height:s}=r.element.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix().scale,d=r.centerFn(i,s),c=r.x-h*d.x,l=r.y-h*d.y;o.style.transform=`translate(${c}px, ${l}px)`}updateNodePriority(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.style.zIndex=`${o.priority}`}updateEdgeShape(t){const o=this.edgeIdToElementMap.get(t);this.container.removeChild(o);const r=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,r.shape.svg),this.container.appendChild(r.shape.svg)}renderEdge(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPort(o.from),i=this.graphStore.getPort(o.to),s=r.element.getBoundingClientRect(),h=i.element.getBoundingClientRect(),d=this.host.getBoundingClientRect(),c=this.viewportTransformer.getViewportMatrix(),l={x:c.scale*(s.left-d.left)+c.dx,y:c.scale*(s.top-d.top)+c.dy},a={x:c.scale*(h.left-d.left)+c.dx,y:c.scale*(h.top-d.top)+c.dy},g={x:l.x,y:l.y,width:s.width*c.scale,height:s.height*c.scale,direction:r.direction,portId:o.from,nodeId:this.graphStore.getPortNodeId(o.from)},y={x:a.x,y:a.y,width:h.width*c.scale,height:h.height*c.scale,direction:i.direction,portId:o.to,nodeId:this.graphStore.getPortNodeId(o.to)};o.shape.render({source:g,target:y})}updateEdgePriority(t){const o=this.graphStore.getEdge(t);o.shape.svg.style.zIndex=`${o.priority}`}}class m{constructor(t){n(this,"counter",0);this.checkExists=t}create(t){if(t!==void 0)return t;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class A extends Error{constructor(){super(...arguments);n(this,"name","HtmlGraphError")}}class Tt{constructor(t,o,r,i,s,h,d){n(this,"nodeIdGenerator",new m(t=>this.graphStore.getNode(t)!==void 0));n(this,"portIdGenerator",new m(t=>this.graphStore.getPort(t)!==void 0));n(this,"edgeIdGenerator",new m(t=>this.graphStore.getEdge(t)!==void 0));this.graphStore=t,this.htmlController=o,this.viewportTransformer=r,this.defaultNodesCenterFn=i,this.defaultPortsDirection=s,this.defaultNodesPriorityFn=h,this.defaultEdgesPriorityFn=d}attach(t){this.htmlController.attach(t)}detach(){this.htmlController.detach()}addNode(t){const o=this.nodeIdGenerator.create(t.nodeId);if(this.graphStore.getNode(o)!==void 0)throw new A("failed to add node with existing id");this.graphStore.addNode({nodeId:o,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.defaultNodesCenterFn,priority:t.priority??this.defaultNodesPriorityFn()}),this.htmlController.attachNode(o),Array.from(t.ports??[]).forEach(r=>{this.markPort({portId:r.id,element:r.element,nodeId:o,direction:r.direction})})}markPort(t){const o=this.portIdGenerator.create(t.portId);if(this.graphStore.getPort(o)!==void 0)throw new A("failed to add port with existing id");if(this.graphStore.getNode(t.nodeId)===void 0)throw new A("failed to set port on nonexisting node");this.graphStore.addPort({portId:o,element:t.element,nodeId:t.nodeId,direction:t.direction??this.defaultPortsDirection})}addEdge(t){const o=this.edgeIdGenerator.create(t.edgeId);if(this.graphStore.getEdge(o)!==void 0)throw new A("failed to add edge with existing id");if(this.graphStore.getPort(t.from)===void 0)throw new A("failed to add edge from nonexisting port");if(this.graphStore.getPort(t.to)===void 0)throw new A("failed to add edge to nonexisting port");this.graphStore.addEdge({edgeId:o,from:t.from,to:t.to,shape:t.shape,priority:t.priority??this.defaultEdgesPriorityFn()}),this.htmlController.attachEdge(o)}updateEdge(t){const o=this.graphStore.getEdge(t.edgeId);if(o===void 0)throw new A("failed to update nonexisting edge");t.shape!==void 0&&(o.shape=t.shape,this.htmlController.updateEdgeShape(t.edgeId)),t.priority!==void 0&&(o.priority=t.priority,this.htmlController.updateEdgePriority(t.edgeId)),t.from!==void 0&&this.graphStore.updateEdgeFrom(t.edgeId,t.from),t.to!==void 0&&this.graphStore.updateEdgeTo(t.edgeId,t.to),this.htmlController.renderEdge(t.edgeId)}updatePort(t,o){const r=this.graphStore.getPort(t);if(r===void 0)throw new A("failed to unset nonexisting port");r.direction=o.direction??r.direction,this.graphStore.getPortAdjacentEdgeIds(t).forEach(s=>{this.htmlController.renderEdge(s)})}updateNode(t,o){const r=this.graphStore.getNode(t);if(r===void 0)throw new A("failed to update nonexisting node");r.x=(o==null?void 0:o.x)??r.x,r.y=(o==null?void 0:o.y)??r.y,r.centerFn=(o==null?void 0:o.centerFn)??r.centerFn,r.priority=(o==null?void 0:o.priority)??r.priority,this.htmlController.updateNodeCoordinates(t),this.htmlController.updateNodePriority(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(s=>{this.htmlController.renderEdge(s)})}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new A("failed to remove nonexisting edge");this.htmlController.detachEdge(t),this.graphStore.removeEdge(t)}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new A("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(t).forEach(o=>{this.removeEdge(o)}),this.graphStore.removePort(t)}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new A("failed to remove nonexisting node");this.graphStore.getNodePortIds(t).forEach(o=>{this.unmarkPort(o)}),this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportMatrix(t){this.viewportTransformer.patchViewportMatrix(t),this.htmlController.applyTransform()}patchContentMatrix(t){this.viewportTransformer.patchContentMatrix(t),this.htmlController.applyTransform()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.clear(),this.htmlController.destroy()}}class Mt{constructor(t){this.graphStore=t}getNode(t){const o=this.graphStore.getNode(t);return o===void 0?null:{element:o.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(t){const o=this.graphStore.getPort(t);return o===void 0?null:{element:o.element,direction:o.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(t){return this.graphStore.getNodePortIds(t)}getPortNodeId(t){return this.graphStore.getPortNodeId(t)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(t){const o=this.graphStore.getEdge(t);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(t){return this.graphStore.getPortIncomingEdgeIds(t)}getPortOutcomingEdgeIds(t){return this.graphStore.getPortOutcomingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutcomingEdgeIds(t){return this.graphStore.getNodeOutcomingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNodeAdjacentEdgeIds(t)}}class tt{constructor(t){n(this,"transformation");n(this,"model");n(this,"canvasController");n(this,"edgeShapeFactory");this.apiOptions=t;const o=wt(this.apiOptions),r=new ft,i=new yt;this.model=new Mt(i),this.transformation=new vt(r);const s=new At(i,r);this.canvasController=new Tt(i,s,r,o.nodes.centerFn,o.ports.direction,o.nodes.priorityFn,o.edges.priorityFn),this.edgeShapeFactory=o.edges.shapeFactory}attach(t){return this.canvasController.attach(t),this}detach(){return this.canvasController.detach(),this}addNode(t){return this.canvasController.addNode({nodeId:t.id,element:t.element,x:t.x,y:t.y,ports:t.ports,centerFn:t.centerFn,priority:t.priority}),this}updateNode(t,o){return this.canvasController.updateNode(t,{x:o==null?void 0:o.x,y:o==null?void 0:o.y,priority:o==null?void 0:o.priority,centerFn:o==null?void 0:o.centerFn}),this}removeNode(t){return this.canvasController.removeNode(t),this}addEdge(t){return this.canvasController.addEdge({edgeId:t.id,from:t.from,to:t.to,shape:t.shape??this.edgeShapeFactory(),priority:t.priority}),this}updateEdge(t,o){return this.canvasController.updateEdge({edgeId:t,shape:o==null?void 0:o.shape,priority:o==null?void 0:o.priority,from:o==null?void 0:o.from,to:o==null?void 0:o.to}),this}removeEdge(t){return this.canvasController.removeEdge(t),this}markPort(t){return this.canvasController.markPort({portId:t.id,element:t.element,nodeId:t.nodeId,direction:t.direction}),this}updatePort(t,o){return this.canvasController.updatePort(t,{direction:o==null?void 0:o.direction}),this}unmarkPort(t){return this.canvasController.unmarkPort(t),this}patchViewportMatrix(t){return this.canvasController.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvasController.patchContentMatrix(t),this}clear(){return this.canvasController.clear(),this}destroy(){this.clear(),this.canvasController.destroy()}}const Y=(e,t,o)=>{const{x:r,y:i,width:s,height:h}=e.getBoundingClientRect();return t>=r&&t<=r+s&&o>=i&&o<=i+h},X=(e,t,o)=>t>=0&&t<=e.innerWidth&&o>=0&&o<=e.innerHeight,k=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")},Ct=e=>{var g,y,x,v,M,T;const t=((g=e==null?void 0:e.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((y=e==null?void 0:e.events)==null?void 0:y.onBeforeNodeDrag)??(()=>!0),r=((x=e==null?void 0:e.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),i=(e==null?void 0:e.moveOnTop)===!1,s=(v=e==null?void 0:e.mouse)==null?void 0:v.dragCursor,h=s!==void 0?s:"grab",d=(M=e==null?void 0:e.mouse)==null?void 0:M.mouseDownEventVerifier,c=d!==void 0?d:C=>C.button===0,l=(T=e==null?void 0:e.mouse)==null?void 0:T.mouseUpEventVerifier;return{freezePriority:i,dragCursor:h,mouseDownEventVerifier:c,mouseUpEventVerifier:l!==void 0?l:C=>C.button===0,onNodeDrag:t,onBeforeNodeDrag:o,onNodeDragFinished:r}};class et{constructor(t,o){n(this,"model");n(this,"transformation");n(this,"maxNodePriority",0);n(this,"nodes",new Map);n(this,"grabbedNodeId",null);n(this,"nodeIdGenerator",new m(t=>this.nodes.has(t)));n(this,"element",null);n(this,"onWindowMouseMove",t=>{if(this.element!==null&&(!Y(this.element,t.clientX,t.clientY)||!X(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});n(this,"onWindowMouseUp",t=>{this.options.mouseUpEventVerifier(t)&&this.cancelMouseDrag()});n(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const o=t.touches[0];if(this.element!==null&&(!Y(this.element,o.clientX,o.clientY)||!X(this.window,o.clientX,o.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const r=o.clientX-this.previousTouchCoords.x,i=o.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,r,i),this.previousTouchCoords={x:t.touches[0].clientX,y:t.touches[0].clientY}}});n(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});n(this,"previousTouchCoords",null);n(this,"window",window);n(this,"options");this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.options=Ct(o??{})}attach(t){return this.detach(),this.element=t,this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element=null),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);this.canvas.addNode({...t,id:o}),this.updateMaxNodePriority(o);const r=s=>{if(this.element===null||!this.options.mouseDownEventVerifier(s))return;const h=this.model.getNode(o);this.options.onBeforeNodeDrag({nodeId:o,element:t.element,x:h.x,y:h.y})&&(s.stopImmediatePropagation(),this.grabbedNodeId=o,k(this.element,this.options.dragCursor),this.moveNodeOnTop(o),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},i=s=>{if(s.touches.length!==1)return;s.stopImmediatePropagation(),this.previousTouchCoords={x:s.touches[0].clientX,y:s.touches[0].clientY};const h=this.model.getNode(o);this.options.onBeforeNodeDrag({nodeId:o,element:t.element,x:h.x,y:h.y})&&(this.grabbedNodeId=o,this.moveNodeOnTop(o),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};return this.nodes.set(o,{element:t.element,onMouseDown:r,onTouchStart:i}),t.element.addEventListener("mousedown",r),t.element.addEventListener("touchstart",i),this}updateNode(t,o){return this.canvas.updateNode(t,o),this.updateMaxNodePriority(t),this}removeNode(t){const o=this.nodes.get(t);return o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(t),this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this.nodes.forEach(t=>{t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(t,o,r){const i=this.model.getNode(t);if(i===null)return;const s=this.canvas.transformation.getContentMatrix(),h=s.scale*i.x+s.dx,d=s.scale*i.y+s.dy,c=h+o,l=d+r,a=this.canvas.transformation.getViewportMatrix(),g=a.scale*c+a.dx,y=a.scale*l+a.dy;this.canvas.updateNode(t,{x:g,y}),this.options.onNodeDrag({nodeId:t,element:i.element,x:g,y})}updateMaxNodePriority(t){const o=this.model.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(t){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(t).forEach(i=>{this.updateEdge(i,{priority:o})})}cancelMouseDrag(){const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.element!==null&&k(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}const Nt=e=>{const t=e.minX!==null?e.minX:-1/0,o=e.maxX!==null?e.maxX:1/0,r=e.minY!==null?e.minY:-1/0,i=e.maxY!==null?e.maxY:1/0;return s=>{let h=s.nextTransform.dx,d=s.nextTransform.dy;h<t&&h<s.prevTransform.dx&&(h=Math.min(s.prevTransform.dx,t));const c=s.canvasWidth*s.prevTransform.scale;h>o-c&&h>s.prevTransform.dx&&(h=Math.max(s.prevTransform.dx,o-c)),d<r&&d<s.prevTransform.dy&&(d=Math.min(s.prevTransform.dy,r));const l=s.canvasHeight*s.prevTransform.scale;return d>i-l&&d>s.prevTransform.dy&&(d=Math.max(s.prevTransform.dy,i-l)),{scale:s.nextTransform.scale,dx:h,dy:d}}},Lt=e=>{const t=e.maxContentScale,o=e.minContentScale,r=t!==null?1/t:0,i=o!==null?1/o:1/0;return s=>{const h=s.prevTransform,d=s.nextTransform;let c=d.scale,l=d.dx,a=d.dy;if(d.scale>i&&d.scale>h.scale){c=Math.max(h.scale,i),l=h.dx,a=h.dy;const g=(c-h.scale)/(d.scale-h.scale);l=h.dx+(d.dx-h.dx)*g,a=h.dy+(d.dy-h.dy)*g}if(d.scale<r&&d.scale<h.scale){c=Math.min(h.scale,r),l=h.dx,a=h.dy;const g=(c-h.scale)/(d.scale-h.scale);l=h.dx+(d.dx-h.dx)*g,a=h.dy+(d.dy-h.dy)*g}return{scale:c,dx:l,dy:a}}},Pt=e=>t=>e.reduce((o,r)=>r({prevTransform:t.prevTransform,nextTransform:o,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight}),t.nextTransform),ot=e=>{if(typeof e=="function")return e;switch(e.type){case"scale-limit":return Lt({minContentScale:e.minContentScale??0,maxContentScale:e.maxContentScale??1/0});case"shift-limit":return Nt({minX:e.minX??-1/0,maxX:e.maxX??1/0,minY:e.minY??-1/0,maxY:e.maxY??1/0})}},Dt=e=>{var v,M,T,C,j,$,b,V,nt;const t=(v=e==null?void 0:e.scale)==null?void 0:v.mouseWheelSensitivity,o=t!==void 0?t:1.2,r=e==null?void 0:e.transformPreprocessor;let i;r!==void 0?Array.isArray(r)?i=Pt(r.map(D=>ot(D))):i=ot(r):i=D=>D.nextTransform;const s=((M=e==null?void 0:e.shift)==null?void 0:M.cursor)!==void 0?e.shift.cursor:"grab",h=((T=e==null?void 0:e.events)==null?void 0:T.onBeforeTransformChange)??(()=>{}),d=((C=e==null?void 0:e.events)==null?void 0:C.onTransformChange)??(()=>{}),c=(j=e==null?void 0:e.shift)==null?void 0:j.mouseDownEventVerifier,l=c!==void 0?c:D=>D.button===0,a=($=e==null?void 0:e.shift)==null?void 0:$.mouseUpEventVerifier,g=a!==void 0?a:D=>D.button===0,y=(b=e==null?void 0:e.scale)==null?void 0:b.mouseWheelEventVerifier,x=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:((V=e==null?void 0:e.events)==null?void 0:V.onTransformStarted)??(()=>{}),onTransformFinished:((nt=e==null?void 0:e.events)==null?void 0:nt.onTransformFinished)??(()=>{}),onBeforeTransformChange:h,onTransformChange:d,transformPreprocessor:i,shiftCursor:s,mouseDownEventVerifier:l,mouseUpEventVerifier:g,mouseWheelEventVerifier:x}},H=e=>{const t=[],o=e.touches.length;for(let d=0;d<o;d++)t.push([e.touches[d].clientX,e.touches[d].clientY]);const r=t.reduce((d,c)=>[d[0]+c[0],d[1]+c[1]],[0,0]),i=[r[0]/o,r[1]/o],h=t.map(d=>[d[0]-i[0],d[1]-i[1]]).reduce((d,c)=>d+Math.sqrt(c[0]*c[0]+c[1]*c[1]),0);return{x:i[0],y:i[1],scale:h/o,touchesCnt:o,touches:t}},It=(e,t,o)=>({scale:e.scale,dx:e.dx+e.scale*t,dy:e.dy+e.scale*o}),mt=(e,t,o,r)=>({scale:e.scale*t,dx:e.scale*(1-t)*o+e.dx,dy:e.scale*(1-t)*r+e.dy});class rt{constructor(t,o){n(this,"model");n(this,"transformation");n(this,"element",null);n(this,"prevTouches",null);n(this,"window",window);n(this,"onMouseDown",t=>{this.element===null||!this.options.mouseDownEventVerifier(t)||(k(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});n(this,"onWindowMouseMove",t=>{if(this.element===null||!Y(this.element,t.clientX,t.clientY)||!X(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const o=-t.movementX,r=-t.movementY;this.moveViewport(this.element,o,r)});n(this,"onWindowMouseUp",t=>{this.element===null||!this.options.mouseUpEventVerifier(t)||this.stopMouseDrag()});n(this,"onWheelScroll",t=>{if(!this.options.mouseWheelEventVerifier(t))return;t.preventDefault(),this.options.onTransformStarted();const{left:o,top:r}=this.element.getBoundingClientRect(),i=t.clientX-o,s=t.clientY-r,d=1/(t.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.scaleViewport(this.element,d,i,s),this.options.onTransformFinished()});n(this,"onTouchStart",t=>{this.prevTouches=H(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});n(this,"onWindowTouchMove",t=>{const o=this.element;if(o===null)return;const r=H(t);if(!r.touches.every(s=>Y(o,s[0],s[1])&&X(this.window,s[0],s[1]))){this.stopTouchDrag();return}if((r.touchesCnt===1||r.touchesCnt===2)&&this.moveViewport(o,-(r.x-this.prevTouches.x),-(r.y-this.prevTouches.y)),r.touchesCnt===2){const{left:s,top:h}=o.getBoundingClientRect(),d=this.prevTouches.x-s,c=this.prevTouches.y-h,a=1/(r.scale/this.prevTouches.scale);this.scaleViewport(o,a,d,c)}this.prevTouches=r});n(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=H(t):this.stopTouchDrag()});n(this,"observer",new ResizeObserver(()=>{const t=this.canvas.transformation.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),i=this.options.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:o,canvasHeight:r});this.canvas.patchViewportMatrix(i),this.options.onTransformChange()}));n(this,"options");this.canvas=t,this.options=Dt(o),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(t){return this.detach(),this.element=t,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(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=null),this}addNode(t){return this.canvas.addNode(t),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(t,o,r){this.options.onBeforeTransformChange();const i=this.transformation.getViewportMatrix(),s=It(i,o,r),{width:h,height:d}=t.getBoundingClientRect(),c=this.options.transformPreprocessor({prevTransform:i,nextTransform:s,canvasWidth:h,canvasHeight:d});this.canvas.patchViewportMatrix(c),this.options.onTransformChange()}scaleViewport(t,o,r,i){this.options.onBeforeTransformChange();const s=this.canvas.transformation.getViewportMatrix(),h=mt(s,o,r,i),{width:d,height:c}=t.getBoundingClientRect(),l=this.options.transformPreprocessor({prevTransform:s,nextTransform:h,canvasWidth:d,canvasHeight:c});this.canvas.patchViewportMatrix(l),this.options.onTransformChange()}stopMouseDrag(){this.element!==null&&k(this.element,null),this.removeMouseDragListeners(),this.options.onTransformFinished()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.options.onTransformFinished()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class $t{constructor(){n(this,"keyMap",new Map);n(this,"valueMap",new Map)}set(t,o){this.keyMap.set(t,o),this.valueMap.set(o,t)}hasKey(t){return this.keyMap.has(t)}hasValue(t){return this.valueMap.has(t)}getByKey(t){return this.keyMap.get(t)}getByValue(t){return this.valueMap.get(t)}deleteByKey(t){const o=this.keyMap.get(t);o!==void 0&&this.valueMap.delete(o),this.keyMap.delete(t)}deleteByValue(t){const o=this.valueMap.get(t);o!==void 0&&this.keyMap.delete(o),this.valueMap.delete(t)}forEach(t){this.keyMap.forEach((o,r)=>{t(o,r)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class it{constructor(t){n(this,"transformation");n(this,"model");n(this,"nodes",new $t);n(this,"nodeIdGenerator",new m(t=>this.nodes.hasKey(t)));n(this,"nodesResizeObserver");this.canvas=t,this.nodesResizeObserver=new window.ResizeObserver(o=>{o.forEach(r=>{const i=r.target;this.reactNodeChange(i)})}),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(t){return this.canvas.attach(t),this}detach(){return this.canvas.detach(),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);return this.canvas.addNode({...t,id:o}),this.nodes.set(o,t.element),this.nodesResizeObserver.observe(t.element),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){this.canvas.removeNode(t);const o=this.nodes.getByKey(t);return this.nodes.deleteByKey(t),this.nodesResizeObserver.unobserve(o),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this.nodesResizeObserver.disconnect(),this.nodes.clear(),this}destroy(){this.clear(),this.canvas.destroy()}reactNodeChange(t){const o=this.nodes.getByValue(t);this.canvas.updateNode(o),this.model.getNodeAdjacentEdgeIds(o).forEach(i=>{this.canvas.updateEdge(i)})}}class bt{constructor(){n(this,"coreOptions");n(this,"dragOptions");n(this,"transformOptions");n(this,"isDraggable",!1);n(this,"isTransformable",!1);n(this,"hasResizeReactiveNodes",!1)}setOptions(t){return this.coreOptions=t,this}setUserDraggableNodes(t){return this.isDraggable=!0,this.dragOptions=t,this}setUserTransformableCanvas(t){return this.isTransformable=!0,this.transformOptions=t,this}setResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}build(){let t=new tt(this.coreOptions);return this.hasResizeReactiveNodes&&(t=new it(t)),this.isDraggable&&(t=new et(t,this.dragOptions)),this.isTransformable&&(t=new rt(t,this.transformOptions)),t}}E.BezierEdgeShape=K,E.CanvasCore=tt,E.HorizontalEdgeShape=_,E.HtmlGraphBuilder=bt,E.HtmlGraphError=A,E.ResizeReactiveNodesCanvas=it,E.StraightEdgeShape=J,E.UserDraggableNodesCanvas=et,E.UserTransformableCanvas=rt,E.VerticalEdgeShape=Q,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})});
+(function(S,E){typeof exports=="object"&&typeof module<"u"?E(exports):typeof define=="function"&&define.amd?define(["exports"],E):(S=typeof globalThis<"u"?globalThis:S||self,E(S.HtmlGraph={}))})(this,function(S){"use strict";var pt=Object.defineProperty;var Vt=(S,E,f)=>E in S?pt(S,E,{enumerable:!0,configurable:!0,writable:!0,value:f}):S[E]=f;var n=(S,E,f)=>Vt(S,typeof E!="symbol"?E+"":E,f);const E=(e,t)=>({x:e/2,y:t/2}),f=(e,t,o)=>({x:t.x*e.x-t.y*e.y+((1-t.x)*o.x+t.y*o.y),y:t.y*e.x+t.x*e.y+((1-t.x)*o.y-t.y*o.x)}),N=(e,t,o)=>({x:t*Math.cos(e),y:o*Math.sin(e)}),u={x:0,y:0},P=(e,t,o,r)=>{const s=[u,{x:o,y:r},{x:o,y:-r}].map(l=>f(l,e,u)).map(l=>({x:l.x+t.x,y:l.y+t.y})),h=`M ${s[0].x} ${s[0].y}`,c=`L ${s[1].x} ${s[1].y}`,d=`L ${s[2].x} ${s[2].y}`;return`${h} ${c} ${d}`},D=(e,t)=>{const o=[];if(e.length>0&&o.push(`M ${e[0].x} ${e[0].y}`),e.length===2&&o.push(`L ${e[1].x} ${e[1].y}`),e.length>2){const r=e.length-1;let i=0,s=0,h=0;e.forEach((c,d)=>{let l=0,a=0,g=0;const y=d>0,x=d<r,v=y&&x;if(y&&(l=-i,a=-s,g=h),x){const p=e[d+1];i=p.x-c.x,s=p.y-c.y,h=Math.sqrt(i*i+s*s)}const T=h!==0?Math.min((v?t:0)/h,d<r-1?.5:1):0,C=v?{x:c.x+i*T,y:c.y+s*T}:c,$=g!==0?Math.min((v?t:0)/g,d>1?.5:1):0,b=v?{x:c.x+l*$,y:c.y+a*$}:c;d>0&&o.push(`L ${b.x} ${b.y}`),v&&o.push(`C ${c.x} ${c.y} ${c.x} ${c.y} ${C.x} ${C.y}`)})}return o.join(" ")},V=()=>{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},W=()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","g");return e.style.transformOrigin="50% 50%",e},F=(e,t)=>{const o=document.createElementNS("http://www.w3.org/2000/svg","path");return o.setAttribute("stroke",e),o.setAttribute("stroke-width",`${t}`),o.setAttribute("fill","none"),o},L=e=>{const t=document.createElementNS("http://www.w3.org/2000/svg","path");return t.setAttribute("fill",e),t},R=(e,t)=>{const o={x:e.x+e.width/2,y:e.y+e.height/2},r={x:t.x+t.width/2,y:t.y+t.height/2},i=Math.min(o.x,r.x),s=Math.min(o.y,r.y),h=Math.abs(r.x-o.x),c=Math.abs(r.y-o.y),d=o.x<=r.x?1:-1,l=o.y<=r.y?1:-1;return{x:i,y:s,width:h,height:c,flipX:d,flipY:l}},st=e=>{const t=f({x:e.arrowLength,y:u.y},e.fromVect,u),o=f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to),r={x:t.x+e.fromVect.x*e.curvature,y:t.y+e.fromVect.y*e.curvature},i={x:o.x-e.toVect.x*e.curvature,y:o.y-e.toVect.y*e.curvature},s=`M ${t.x} ${t.y} C ${r.x} ${r.y}, ${i.x} ${i.y}, ${o.x} ${o.y}`,h=e.hasSourceArrow?"":`M ${u.x} ${u.y} L ${t.x} ${t.y} `,c=e.hasTargetArrow?"":` M ${o.x} ${o.y} L ${e.to.x} ${e.to.y}`;return`${h}${s}${c}`},ht=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength,i=Math.cos(e.detourDirection)*e.detourDistance,s=Math.sin(e.detourDirection)*e.detourDistance,h=i*e.flipX,c=s*e.flipY,d=f({x:r,y:u.y},e.fromVect,u),l={x:d.x+h,y:d.y+c},a=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:a.x+h,y:a.y+c},y={x:(l.x+g.x)/2,y:(l.y+g.y)/2},x={x:d.x+e.curvature*e.fromVect.x,y:d.y+e.curvature*e.fromVect.y},v={x:a.x-e.curvature*e.toVect.x,y:a.y-e.curvature*e.toVect.y},M={x:d.x+h,y:d.y+c},T={x:a.x+h,y:a.y+c};return[`M ${t.x} ${t.y}`,`L ${d.x} ${d.y}`,`C ${x.x} ${x.y} ${M.x} ${M.y} ${y.x} ${y.y}`,`C ${T.x} ${T.y} ${v.x} ${v.y} ${a.x} ${a.y}`,`L ${o.x} ${o.y}`].join(" ")},ct=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=r-e.roundness,s=f({x:i,y:u.y},e.fromVect,u),h=f({x:e.to.x-i,y:e.to.y},e.toVect,e.to),c=Math.max((s.x+h.x)/2,r),d=e.to.y/2,l={x:e.flipX>0?c:-r,y:s.y},a={x:l.x,y:d},g={x:e.flipX>0?e.to.x-c:e.to.x+r,y:h.y},y={x:g.x,y:d};return D([t,s,l,a,y,g,h,o],e.roundness)},B=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=f({x:r,y:u.y},e.fromVect,u),s=Math.cos(e.detourDirection)*e.detourDistance,h=Math.sin(e.detourDirection)*e.detourDistance,c=s*e.flipX,d=h*e.flipY,l={x:i.x+c,y:i.y+d},a=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to),g={x:a.x+c,y:a.y+d};return D([t,i,l,g,a,o],e.roundness)},dt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=f({x:r,y:u.y},e.fromVect,u),s=f({x:e.to.x-r,y:e.to.y},e.toVect,e.to);return D([t,i,s,o],e.roundness)},lt=e=>{const t=e.hasSourceArrow?f({x:e.arrowLength,y:u.y},e.fromVect,u):u,o=e.hasTargetArrow?f({x:e.to.x-e.arrowLength,y:e.to.y},e.toVect,e.to):e.to,r=e.arrowLength+e.arrowOffset,i=r-e.roundness,s=f({x:i,y:u.y},e.fromVect,u),h=f({x:e.to.x-i,y:e.to.y},e.toVect,e.to),c=Math.max((s.y+h.y)/2,r),d=e.to.x/2,l={x:s.x,y:e.flipY>0?c:-r},a={x:d,y:l.y},g={x:h.x,y:e.flipY>0?e.to.y-c:e.to.y+r},y={x:d,y:g.y};return D([t,s,l,a,y,g,h,o],e.roundness)},z=e=>{const t=e.arrowOffset,o=e.side,r=e.arrowLength+t,i=r+2*o,h=[{x:e.arrowLength,y:u.y},{x:r,y:u.y},{x:r,y:e.side},{x:i,y:e.side},{x:i,y:-e.side},{x:r,y:-e.side},{x:r,y:u.y},{x:e.arrowLength,y:u.y}].map(d=>f(d,e.fromVect,u)),c=`M ${u.x} ${u.y} L ${h[0].x} ${h[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":c}${D(h,e.roundness)}`},at=e=>{const t=e.smallRadius,o=e.radius,r=Math.sqrt(t*t+o*o),i=t+o,s=e.arrowLength+r*(1-o/i),h=t*o/i,d=[{x:e.arrowLength,y:u.y},{x:s,y:h},{x:s,y:-h}].map(g=>f(g,e.fromVect,u)),l=[`M ${d[0].x} ${d[0].y}`,`A ${t} ${t} 0 0 1 ${d[1].x} ${d[1].y}`,`A ${o} ${o} 0 1 0 ${d[2].x} ${d[2].y}`,`A ${t} ${t} 0 0 1 ${d[0].x} ${d[0].y}`].join(" "),a=`M 0 0 L ${d[0].x} ${d[0].y} `;return`${e.hasSourceArrow||e.hasTargetArrow?"":a}${l}`},w=Object.freeze({color:"#777777",width:1,arrowLength:15,arrowWidth:4,arrowOffset:15,hasSourceArrow:!1,hasTargetArrow:!1,cycleRadius:30,cycleSquareSide:30,roundness:10,detourDistance:100,detourDirection:-Math.PI/2,detourDirectionVertical:0,smallCycleRadius:15,curvature:90});class K{constructor(t){n(this,"svg",V());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"curvature");n(this,"portCycleRadius");n(this,"portCycleSmallRadius");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.curvature=(t==null?void 0:t.curvature)??w.curvature,this.portCycleRadius=(t==null?void 0:t.cycleRadius)??w.cycleRadius,this.portCycleSmallRadius=(t==null?void 0:t.smallCycleRadius)??w.smallCycleRadius,this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const o=(t==null?void 0:t.color)??w.color,r=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(o,r),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(o),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(o),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:c}=R(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${c})`;const d=N(t.from.direction,h,c),l=N(t.to.direction,h,c),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=at({fromVect:d,radius:this.portCycleRadius,smallRadius:this.portCycleSmallRadius,arrowLength:this.arrowLength,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=ht({to:a,fromVect:d,toVect:l,flipX:h,flipY:c,arrowLength:this.arrowLength,detourDirection:this.detourDirection,detourDistance:this.detourDistance,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=st({to:a,fromVect:d,toVect:l,arrowLength:this.arrowLength,curvature:this.curvature,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=P(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=P(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class _{constructor(t){n(this,"svg",V());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:c}=R(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${c})`;const d=N(t.from.direction,h,c),l=N(t.to.direction,h,c),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=z({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=B({to:a,fromVect:d,toVect:l,flipX:h,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=ct({to:a,fromVect:d,toVect:l,flipX:h,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=P(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=P(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class J{constructor(t){n(this,"svg",V());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirection,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:c}=R(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${c})`;const d=N(t.from.direction,h,c),l=N(t.to.direction,h,c),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=z({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=B({to:a,fromVect:d,toVect:l,flipX:h,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=dt({to:a,fromVect:d,toVect:l,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=P(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=P(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}class Q{constructor(t){n(this,"svg",V());n(this,"group",W());n(this,"line");n(this,"sourceArrow",null);n(this,"targetArrow",null);n(this,"arrowLength");n(this,"arrowWidth");n(this,"arrowOffset");n(this,"roundness");n(this,"cycleSquareSide");n(this,"detourDirection");n(this,"detourDistance");n(this,"hasSourceArrow");n(this,"hasTargetArrow");this.arrowLength=(t==null?void 0:t.arrowLength)??w.arrowLength,this.arrowWidth=(t==null?void 0:t.arrowWidth)??w.arrowWidth,this.arrowOffset=(t==null?void 0:t.arrowOffset)??w.arrowOffset,this.cycleSquareSide=(t==null?void 0:t.cycleSquareSide)??w.cycleSquareSide;const o=(t==null?void 0:t.roundness)??w.roundness;this.roundness=Math.min(o,this.arrowOffset,this.cycleSquareSide/2),this.detourDirection=(t==null?void 0:t.detourDirection)??w.detourDirectionVertical,this.detourDistance=(t==null?void 0:t.detourDistance)??w.detourDistance,this.hasSourceArrow=(t==null?void 0:t.hasSourceArrow)??w.hasSourceArrow,this.hasTargetArrow=(t==null?void 0:t.hasTargetArrow)??w.hasTargetArrow;const r=(t==null?void 0:t.color)??w.color,i=(t==null?void 0:t.width)??w.width;this.svg.appendChild(this.group),this.line=F(r,i),this.group.appendChild(this.line),this.hasSourceArrow&&(this.sourceArrow=L(r),this.group.appendChild(this.sourceArrow)),this.hasTargetArrow&&(this.targetArrow=L(r),this.group.appendChild(this.targetArrow))}render(t){const{x:o,y:r,width:i,height:s,flipX:h,flipY:c}=R(t.from,t.to);this.svg.style.transform=`translate(${o}px, ${r}px)`,this.svg.style.width=`${i}px`,this.svg.style.height=`${s}px`,this.group.style.transform=`scale(${h}, ${c})`;const d=N(t.from.direction,h,c),l=N(t.to.direction,h,c),a={x:i,y:s};let g,y=l,x=-this.arrowLength;if(t.from.portId===t.to.portId?(g=z({fromVect:d,arrowLength:this.arrowLength,side:this.cycleSquareSide,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),y=d,x=this.arrowLength):t.from.nodeId===t.to.nodeId?g=B({to:a,fromVect:d,toVect:l,flipX:h,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,detourDirection:this.detourDirection,detourDistance:this.detourDistance,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}):g=lt({to:a,fromVect:d,toVect:l,flipY:c,arrowLength:this.arrowLength,arrowOffset:this.arrowOffset,roundness:this.roundness,hasSourceArrow:this.hasSourceArrow,hasTargetArrow:this.hasTargetArrow}),this.line.setAttribute("d",g),this.sourceArrow){const v=P(d,u,this.arrowLength,this.arrowWidth);this.sourceArrow.setAttribute("d",v)}if(this.targetArrow){const v=P(y,a,x,this.arrowWidth);this.targetArrow.setAttribute("d",v)}}}const gt=e=>{if(typeof e=="function")return e;switch(e==null?void 0:e.type){case"straight":return()=>new J({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"horizontal":return()=>new _({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});case"vertical":return()=>new Q({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,arrowOffset:e.arrowOffset,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleSquareSide:e.cycleSquareSide,roundness:e.roundness,detourDistance:e.detourDistance,detourDirection:e.detourDirection});default:return()=>new K({color:e.color,width:e.width,arrowLength:e.arrowLength,arrowWidth:e.arrowWidth,hasSourceArrow:e.hasSourceArrow,hasTargetArrow:e.hasTargetArrow,cycleRadius:e.cycleRadius,smallCycleRadius:e.smallCycleRadius,curvature:e.curvature,detourDistance:e.detourDistance,detourDirection:e.detourDirection})}},G=e=>()=>e,Z=G(0),U=()=>{let e=0;return()=>e++},ut=(e,t)=>{let o=Z,r=Z;e==="incremental"&&(o=U()),t==="incremental"&&(r=U());const i=U();return e==="shared-incremental"&&(o=i),t==="shared-incremental"&&(r=i),typeof e=="number"&&(o=G(e)),typeof t=="number"&&(r=G(t)),typeof e=="function"&&(o=e),typeof t=="function"&&(r=t),{nodesPriorityFn:o,edgesPriorityFn:r}},wt=e=>{var o,r,i,s,h;const t=ut((o=e==null?void 0:e.nodes)==null?void 0:o.priority,(r=e==null?void 0:e.edges)==null?void 0:r.priority);return{nodes:{centerFn:((i=e==null?void 0:e.nodes)==null?void 0:i.centerFn)??E,priorityFn:t.nodesPriorityFn},ports:{direction:((s=e==null?void 0:e.ports)==null?void 0:s.direction)??0},edges:{shapeFactory:gt(((h=e==null?void 0:e.edges)==null?void 0:h.shape)??{}),priorityFn:t.edgesPriorityFn}}};class yt{constructor(){n(this,"nodes",new Map);n(this,"ports",new Map);n(this,"nodePorts",new Map);n(this,"portNodeId",new Map);n(this,"edges",new Map);n(this,"incommingEdges",new Map);n(this,"outcommingEdges",new Map);n(this,"cycleEdges",new Map)}addNode(t){this.nodes.set(t.nodeId,{element:t.element,x:t.x,y:t.y,centerFn:t.centerFn,priority:t.priority}),this.nodePorts.set(t.nodeId,new Map)}getAllNodeIds(){return Array.from(this.nodes.keys())}getNode(t){return this.nodes.get(t)}removeNode(t){this.nodes.delete(t),this.nodePorts.delete(t)}addPort(t){this.ports.set(t.portId,{element:t.element,direction:t.direction}),this.cycleEdges.set(t.portId,new Set),this.incommingEdges.set(t.portId,new Set),this.outcommingEdges.set(t.portId,new Set),this.portNodeId.set(t.portId,t.nodeId),this.nodePorts.get(t.nodeId).set(t.portId,t.element)}getPort(t){return this.ports.get(t)}getAllPortIds(){return Array.from(this.ports.keys())}getNodePortIds(t){const o=this.nodePorts.get(t);if(o!==void 0)return Array.from(o.keys())}getPortNodeId(t){return this.portNodeId.get(t)}removePort(t){const o=this.portNodeId.get(t);this.portNodeId.delete(t),this.nodePorts.get(o).delete(t),this.ports.delete(t)}addEdge(t){this.edges.set(t.edgeId,{from:t.from,to:t.to,shape:t.shape,priority:t.priority}),t.from!==t.to?(this.outcommingEdges.get(t.from).add(t.edgeId),this.incommingEdges.get(t.to).add(t.edgeId)):this.cycleEdges.get(t.from).add(t.edgeId)}updateEdgeFrom(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:o,to:r.to,shape:r.shape,priority:r.priority})}updateEdgeTo(t,o){const r=this.edges.get(t);this.removeEdge(t),this.addEdge({edgeId:t,from:r.from,to:o,shape:r.shape,priority:r.priority})}getAllEdgeIds(){return Array.from(this.edges.keys())}getEdge(t){return this.edges.get(t)}removeEdge(t){const o=this.edges.get(t),r=o.from,i=o.to;this.cycleEdges.get(r).delete(t),this.cycleEdges.get(i).delete(t),this.incommingEdges.get(r).delete(t),this.incommingEdges.get(i).delete(t),this.outcommingEdges.get(r).delete(t),this.outcommingEdges.get(i).delete(t),this.edges.delete(t)}clear(){this.nodes.clear(),this.ports.clear(),this.nodePorts.clear(),this.portNodeId.clear(),this.edges.clear(),this.incommingEdges.clear(),this.outcommingEdges.clear(),this.cycleEdges.clear()}getPortIncomingEdgeIds(t){return Array.from(this.incommingEdges.get(t))}getPortOutcomingEdgeIds(t){return Array.from(this.outcommingEdges.get(t))}getPortCycleEdgeIds(t){return Array.from(this.cycleEdges.get(t))}getPortAdjacentEdgeIds(t){return[...this.getPortIncomingEdgeIds(t),...this.getPortOutcomingEdgeIds(t),...this.getPortCycleEdgeIds(t)]}getNodeIncomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortIncomingEdgeIds(i)]}),r}getNodeOutcomingEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortOutcomingEdgeIds(i)]}),r}getNodeCycleEdgeIds(t){const o=Array.from(this.nodePorts.get(t).keys());let r=[];return o.forEach(i=>{r=[...r,...this.getPortCycleEdgeIds(i)]}),r}getNodeAdjacentEdgeIds(t){return[...this.getNodeIncomingEdgeIds(t),...this.getNodeOutcomingEdgeIds(t),...this.getNodeCycleEdgeIds(t)]}}const O=e=>({scale:1/e.scale,x:-e.x/e.scale,y:-e.y/e.scale}),q={scale:1,x:0,y:0};class ft{constructor(){n(this,"viewportMatrix",q);n(this,"contentMatrix",q)}getViewportMatrix(){return this.viewportMatrix}getContentMatrix(){return this.contentMatrix}patchViewportMatrix(t){this.viewportMatrix={scale:t.scale??this.viewportMatrix.scale,x:t.x??this.viewportMatrix.x,y:t.y??this.viewportMatrix.y},this.contentMatrix=O(this.viewportMatrix)}patchContentMatrix(t){this.contentMatrix={scale:t.scale??this.contentMatrix.scale,x:t.x??this.contentMatrix.x,y:t.y??this.contentMatrix.y},this.viewportMatrix=O(this.contentMatrix)}}class vt{constructor(t){this.transformer=t}getViewportMatrix(){return{...this.transformer.getViewportMatrix()}}getContentMatrix(){return{...this.transformer.getContentMatrix()}}}const xt=()=>{const e=document.createElement("div");return e.style.width="100%",e.style.height="100%",e.style.position="relative",e.style.overflow="hidden",e},St=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="0",e.style.height="0",e},Et=()=>{const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.visibility="hidden",e};class At{constructor(t,o){n(this,"canvasWrapper",null);n(this,"host",xt());n(this,"container",St());n(this,"nodeIdToWrapperElementMap",new Map);n(this,"edgeIdToElementMap",new Map);this.graphStore=t,this.viewportTransformer=o,this.host.appendChild(this.container)}attach(t){this.detach(),this.canvasWrapper=t,this.canvasWrapper.appendChild(this.host)}detach(){this.canvasWrapper!==null&&(this.canvasWrapper.removeChild(this.host),this.canvasWrapper=null)}applyTransform(){const t=this.viewportTransformer.getContentMatrix();this.container.style.transform=`matrix(${t.scale}, 0, 0, ${t.scale}, ${t.x}, ${t.y})`}attachNode(t){const o=this.graphStore.getNode(t),r=Et();r.appendChild(o.element),this.container.appendChild(r),this.nodeIdToWrapperElementMap.set(t,r),this.updateNodeCoordinates(t),this.updateNodePriority(t),r.style.visibility="visible"}detachNode(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.removeChild(o.element),this.container.removeChild(r),this.nodeIdToWrapperElementMap.delete(t)}attachEdge(t){const o=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,o.shape.svg),this.container.appendChild(o.shape.svg),this.renderEdge(t),this.updateEdgePriority(t)}detachEdge(t){const o=this.graphStore.getEdge(t);this.container.removeChild(o.shape.svg),this.edgeIdToElementMap.delete(t)}clear(){this.edgeIdToElementMap.forEach((t,o)=>{this.detachEdge(o)}),this.nodeIdToWrapperElementMap.forEach((t,o)=>{this.detachNode(o)})}destroy(){this.clear(),this.detach(),this.host.removeChild(this.container)}updateNodeCoordinates(t){const o=this.nodeIdToWrapperElementMap.get(t),r=this.graphStore.getNode(t),{width:i,height:s}=r.element.getBoundingClientRect(),h=this.viewportTransformer.getViewportMatrix().scale,c=r.centerFn(i,s),d=r.x-h*c.x,l=r.y-h*c.y;o.style.transform=`translate(${d}px, ${l}px)`}updateNodePriority(t){const o=this.graphStore.getNode(t),r=this.nodeIdToWrapperElementMap.get(t);r.style.zIndex=`${o.priority}`}updateEdgeShape(t){const o=this.edgeIdToElementMap.get(t);this.container.removeChild(o);const r=this.graphStore.getEdge(t);this.edgeIdToElementMap.set(t,r.shape.svg),this.container.appendChild(r.shape.svg)}renderEdge(t){const o=this.graphStore.getEdge(t),r=this.graphStore.getPort(o.from),i=this.graphStore.getPort(o.to),s=r.element.getBoundingClientRect(),h=i.element.getBoundingClientRect(),c=this.host.getBoundingClientRect(),d=this.viewportTransformer.getViewportMatrix(),l={x:d.scale*(s.left-c.left)+d.x,y:d.scale*(s.top-c.top)+d.y},a={x:d.scale*(h.left-c.left)+d.x,y:d.scale*(h.top-c.top)+d.y},g={x:l.x,y:l.y,width:s.width*d.scale,height:s.height*d.scale,direction:r.direction,portId:o.from,nodeId:this.graphStore.getPortNodeId(o.from)},y={x:a.x,y:a.y,width:h.width*d.scale,height:h.height*d.scale,direction:i.direction,portId:o.to,nodeId:this.graphStore.getPortNodeId(o.to)};o.shape.render({from:g,to:y})}updateEdgePriority(t){const o=this.graphStore.getEdge(t);o.shape.svg.style.zIndex=`${o.priority}`}}class I{constructor(t){n(this,"counter",0);this.checkExists=t}create(t){if(t!==void 0)return t;for(;this.checkExists(this.counter);)this.counter++;return this.counter}reset(){this.counter=0}}class A extends Error{constructor(){super(...arguments);n(this,"name","HtmlGraphError")}}class Tt{constructor(t,o,r,i,s,h,c){n(this,"nodeIdGenerator",new I(t=>this.graphStore.getNode(t)!==void 0));n(this,"portIdGenerator",new I(t=>this.graphStore.getPort(t)!==void 0));n(this,"edgeIdGenerator",new I(t=>this.graphStore.getEdge(t)!==void 0));this.graphStore=t,this.htmlController=o,this.viewportTransformer=r,this.defaultNodesCenterFn=i,this.defaultPortsDirection=s,this.defaultNodesPriorityFn=h,this.defaultEdgesPriorityFn=c}attach(t){this.htmlController.attach(t)}detach(){this.htmlController.detach()}addNode(t){const o=this.nodeIdGenerator.create(t.nodeId);if(this.graphStore.getNode(o)!==void 0)throw new A("failed to add node with existing id");this.graphStore.addNode({nodeId:o,element:t.element,x:t.x,y:t.y,centerFn:t.centerFn??this.defaultNodesCenterFn,priority:t.priority??this.defaultNodesPriorityFn()}),this.htmlController.attachNode(o),Array.from(t.ports??[]).forEach(r=>{this.markPort({portId:r.id,element:r.element,nodeId:o,direction:r.direction})})}markPort(t){const o=this.portIdGenerator.create(t.portId);if(this.graphStore.getPort(o)!==void 0)throw new A("failed to add port with existing id");if(this.graphStore.getNode(t.nodeId)===void 0)throw new A("failed to set port on nonexisting node");this.graphStore.addPort({portId:o,element:t.element,nodeId:t.nodeId,direction:t.direction??this.defaultPortsDirection})}addEdge(t){const o=this.edgeIdGenerator.create(t.edgeId);if(this.graphStore.getEdge(o)!==void 0)throw new A("failed to add edge with existing id");if(this.graphStore.getPort(t.from)===void 0)throw new A("failed to add edge from nonexisting port");if(this.graphStore.getPort(t.to)===void 0)throw new A("failed to add edge to nonexisting port");this.graphStore.addEdge({edgeId:o,from:t.from,to:t.to,shape:t.shape,priority:t.priority??this.defaultEdgesPriorityFn()}),this.htmlController.attachEdge(o)}updateEdge(t){const o=this.graphStore.getEdge(t.edgeId);if(o===void 0)throw new A("failed to update nonexisting edge");t.shape!==void 0&&(o.shape=t.shape,this.htmlController.updateEdgeShape(t.edgeId)),t.priority!==void 0&&(o.priority=t.priority,this.htmlController.updateEdgePriority(t.edgeId)),t.from!==void 0&&this.graphStore.updateEdgeFrom(t.edgeId,t.from),t.to!==void 0&&this.graphStore.updateEdgeTo(t.edgeId,t.to),this.htmlController.renderEdge(t.edgeId)}updatePort(t,o){const r=this.graphStore.getPort(t);if(r===void 0)throw new A("failed to unset nonexisting port");r.direction=o.direction??r.direction,this.graphStore.getPortAdjacentEdgeIds(t).forEach(s=>{this.htmlController.renderEdge(s)})}updateNode(t,o){const r=this.graphStore.getNode(t);if(r===void 0)throw new A("failed to update nonexisting node");r.x=(o==null?void 0:o.x)??r.x,r.y=(o==null?void 0:o.y)??r.y,r.centerFn=(o==null?void 0:o.centerFn)??r.centerFn,r.priority=(o==null?void 0:o.priority)??r.priority,this.htmlController.updateNodeCoordinates(t),this.htmlController.updateNodePriority(t),this.graphStore.getNodeAdjacentEdgeIds(t).forEach(s=>{this.htmlController.renderEdge(s)})}removeEdge(t){if(this.graphStore.getEdge(t)===void 0)throw new A("failed to remove nonexisting edge");this.htmlController.detachEdge(t),this.graphStore.removeEdge(t)}unmarkPort(t){if(this.graphStore.getPort(t)===void 0)throw new A("failed to unset nonexisting port");this.graphStore.getPortAdjacentEdgeIds(t).forEach(o=>{this.removeEdge(o)}),this.graphStore.removePort(t)}removeNode(t){if(this.graphStore.getNode(t)===void 0)throw new A("failed to remove nonexisting node");this.graphStore.getNodePortIds(t).forEach(o=>{this.unmarkPort(o)}),this.htmlController.detachNode(t),this.graphStore.removeNode(t)}patchViewportMatrix(t){this.viewportTransformer.patchViewportMatrix(t),this.htmlController.applyTransform()}patchContentMatrix(t){this.viewportTransformer.patchContentMatrix(t),this.htmlController.applyTransform()}clear(){this.htmlController.clear(),this.graphStore.clear(),this.nodeIdGenerator.reset(),this.portIdGenerator.reset(),this.edgeIdGenerator.reset()}destroy(){this.clear(),this.htmlController.destroy()}}class Mt{constructor(t){this.graphStore=t}getNode(t){const o=this.graphStore.getNode(t);return o===void 0?null:{element:o.element,x:o.x,y:o.y,centerFn:o.centerFn,priority:o.priority}}getAllNodeIds(){return this.graphStore.getAllNodeIds()}getPort(t){const o=this.graphStore.getPort(t);return o===void 0?null:{element:o.element,direction:o.direction}}getAllPortIds(){return this.graphStore.getAllPortIds()}getNodePortIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodePortIds(t)}getPortNodeId(t){return this.graphStore.getPortNodeId(t)??null}getAllEdgeIds(){return this.graphStore.getAllEdgeIds()}getEdge(t){const o=this.graphStore.getEdge(t);return o===void 0?null:{from:o.from,to:o.to,priority:o.priority}}getPortIncomingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortIncomingEdgeIds(t)}getPortOutcomingEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortOutcomingEdgeIds(t)}getPortCycleEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortCycleEdgeIds(t)}getPortAdjacentEdgeIds(t){return this.graphStore.getPort(t)===void 0?null:this.graphStore.getPortAdjacentEdgeIds(t)}getNodeIncomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeIncomingEdgeIds(t)}getNodeOutcomingEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeOutcomingEdgeIds(t)}getNodeCycleEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeCycleEdgeIds(t)}getNodeAdjacentEdgeIds(t){return this.graphStore.getNode(t)===void 0?null:this.graphStore.getNodeAdjacentEdgeIds(t)}}class tt{constructor(t){n(this,"transformation");n(this,"model");n(this,"canvasController");n(this,"edgeShapeFactory");this.apiOptions=t;const o=wt(this.apiOptions),r=new ft,i=new yt;this.model=new Mt(i),this.transformation=new vt(r);const s=new At(i,r);this.canvasController=new Tt(i,s,r,o.nodes.centerFn,o.ports.direction,o.nodes.priorityFn,o.edges.priorityFn),this.edgeShapeFactory=o.edges.shapeFactory}attach(t){return this.canvasController.attach(t),this}detach(){return this.canvasController.detach(),this}addNode(t){return this.canvasController.addNode({nodeId:t.id,element:t.element,x:t.x,y:t.y,ports:t.ports,centerFn:t.centerFn,priority:t.priority}),this}updateNode(t,o){return this.canvasController.updateNode(t,{x:o==null?void 0:o.x,y:o==null?void 0:o.y,priority:o==null?void 0:o.priority,centerFn:o==null?void 0:o.centerFn}),this}removeNode(t){return this.canvasController.removeNode(t),this}addEdge(t){return this.canvasController.addEdge({edgeId:t.id,from:t.from,to:t.to,shape:t.shape??this.edgeShapeFactory(),priority:t.priority}),this}updateEdge(t,o){return this.canvasController.updateEdge({edgeId:t,shape:o==null?void 0:o.shape,priority:o==null?void 0:o.priority,from:o==null?void 0:o.from,to:o==null?void 0:o.to}),this}removeEdge(t){return this.canvasController.removeEdge(t),this}markPort(t){return this.canvasController.markPort({portId:t.id,element:t.element,nodeId:t.nodeId,direction:t.direction}),this}updatePort(t,o){return this.canvasController.updatePort(t,{direction:o==null?void 0:o.direction}),this}unmarkPort(t){return this.canvasController.unmarkPort(t),this}patchViewportMatrix(t){return this.canvasController.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvasController.patchContentMatrix(t),this}clear(){return this.canvasController.clear(),this}destroy(){this.clear(),this.canvasController.destroy()}}const Y=(e,t,o)=>{const{x:r,y:i,width:s,height:h}=e.getBoundingClientRect();return t>=r&&t<=r+s&&o>=i&&o<=i+h},X=(e,t,o)=>t>=0&&t<=e.innerWidth&&o>=0&&o<=e.innerHeight,k=(e,t)=>{t!==null?e.style.cursor=t:e.style.removeProperty("cursor")},Ct=e=>{var g,y,x,v,M,T;const t=((g=e==null?void 0:e.events)==null?void 0:g.onNodeDrag)??(()=>{}),o=((y=e==null?void 0:e.events)==null?void 0:y.onBeforeNodeDrag)??(()=>!0),r=((x=e==null?void 0:e.events)==null?void 0:x.onNodeDragFinished)??(()=>{}),i=(e==null?void 0:e.moveOnTop)===!1,s=(v=e==null?void 0:e.mouse)==null?void 0:v.dragCursor,h=s!==void 0?s:"grab",c=(M=e==null?void 0:e.mouse)==null?void 0:M.mouseDownEventVerifier,d=c!==void 0?c:C=>C.button===0,l=(T=e==null?void 0:e.mouse)==null?void 0:T.mouseUpEventVerifier;return{freezePriority:i,dragCursor:h,mouseDownEventVerifier:d,mouseUpEventVerifier:l!==void 0?l:C=>C.button===0,onNodeDrag:t,onBeforeNodeDrag:o,onNodeDragFinished:r}};class et{constructor(t,o){n(this,"model");n(this,"transformation");n(this,"maxNodePriority",0);n(this,"nodes",new Map);n(this,"grabbedNodeId",null);n(this,"nodeIdGenerator",new I(t=>this.nodes.has(t)));n(this,"element",null);n(this,"onWindowMouseMove",t=>{if(this.element!==null&&(!Y(this.element,t.clientX,t.clientY)||!X(this.window,t.clientX,t.clientY))){this.cancelMouseDrag();return}this.grabbedNodeId!==null&&this.dragNode(this.grabbedNodeId,t.movementX,t.movementY)});n(this,"onWindowMouseUp",t=>{this.options.mouseUpEventVerifier(t)&&this.cancelMouseDrag()});n(this,"onWindowTouchMove",t=>{if(t.touches.length!==1)return;const o=t.touches[0];if(this.element!==null&&(!Y(this.element,o.clientX,o.clientY)||!X(this.window,o.clientX,o.clientY))){this.cancelTouchDrag();return}if(this.grabbedNodeId!==null&&this.previousTouchCoords!==null){const r=o.clientX-this.previousTouchCoords.x,i=o.clientY-this.previousTouchCoords.y;this.dragNode(this.grabbedNodeId,r,i),this.previousTouchCoords={x:t.touches[0].clientX,y:t.touches[0].clientY}}});n(this,"onWindowTouchFinish",()=>{this.previousTouchCoords=null,this.cancelTouchDrag()});n(this,"previousTouchCoords",null);n(this,"window",window);n(this,"options");this.canvas=t,this.transformation=this.canvas.transformation,this.model=this.canvas.model,this.options=Ct(o??{})}attach(t){return this.detach(),this.element=t,this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(this.element=null),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);this.canvas.addNode({...t,id:o}),this.updateMaxNodePriority(o);const r=s=>{if(this.element===null||!this.options.mouseDownEventVerifier(s))return;const h=this.model.getNode(o);this.options.onBeforeNodeDrag({nodeId:o,element:t.element,x:h.x,y:h.y})&&(s.stopImmediatePropagation(),this.grabbedNodeId=o,k(this.element,this.options.dragCursor),this.moveNodeOnTop(o),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.window.addEventListener("mousemove",this.onWindowMouseMove))},i=s=>{if(s.touches.length!==1)return;s.stopImmediatePropagation(),this.previousTouchCoords={x:s.touches[0].clientX,y:s.touches[0].clientY};const h=this.model.getNode(o);this.options.onBeforeNodeDrag({nodeId:o,element:t.element,x:h.x,y:h.y})&&(this.grabbedNodeId=o,this.moveNodeOnTop(o),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish))};return this.nodes.set(o,{element:t.element,onMouseDown:r,onTouchStart:i}),t.element.addEventListener("mousedown",r),t.element.addEventListener("touchstart",i),this}updateNode(t,o){return this.canvas.updateNode(t,o),this.updateMaxNodePriority(t),this}removeNode(t){const o=this.nodes.get(t);return o!==void 0&&(o.element.removeEventListener("mousedown",o.onMouseDown),o.element.removeEventListener("touchstart",o.onTouchStart)),this.nodes.delete(t),this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this.nodes.forEach(t=>{t.element.removeEventListener("mousedown",t.onMouseDown),t.element.removeEventListener("touchstart",t.onTouchStart)}),this.nodes.clear(),this.maxNodePriority=0,this}destroy(){this.detach(),this.clear(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}dragNode(t,o,r){const i=this.model.getNode(t);if(i===null)return;const s=this.canvas.transformation.getContentMatrix(),h=s.scale*i.x+s.x,c=s.scale*i.y+s.y,d=h+o,l=c+r,a=this.canvas.transformation.getViewportMatrix(),g=a.scale*d+a.x,y=a.scale*l+a.y;this.canvas.updateNode(t,{x:g,y}),this.options.onNodeDrag({nodeId:t,element:i.element,x:g,y})}updateMaxNodePriority(t){const o=this.model.getNode(t).priority;this.maxNodePriority=Math.max(this.maxNodePriority,o)}moveNodeOnTop(t){if(this.options.freezePriority)return;this.maxNodePriority+=2,this.updateNode(t,{priority:this.maxNodePriority});const o=this.maxNodePriority-1;this.model.getNodeAdjacentEdgeIds(t).forEach(i=>{this.updateEdge(i,{priority:o})})}cancelMouseDrag(){const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.element!==null&&k(this.element,null),this.removeMouseDragListeners()}removeMouseDragListeners(){this.window.removeEventListener("mouseup",this.onWindowMouseUp),this.window.removeEventListener("mousemove",this.onWindowMouseMove)}cancelTouchDrag(){this.previousTouchCoords=null;const t=this.model.getNode(this.grabbedNodeId);t!==null&&this.options.onNodeDragFinished({nodeId:this.grabbedNodeId,element:t.element,x:t.x,y:t.y}),this.grabbedNodeId=null,this.removeTouchDragListeners()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}const Nt=e=>{const t=e.minX!==null?e.minX:-1/0,o=e.maxX!==null?e.maxX:1/0,r=e.minY!==null?e.minY:-1/0,i=e.maxY!==null?e.maxY:1/0;return s=>{let h=s.nextTransform.x,c=s.nextTransform.y;h<t&&h<s.prevTransform.x&&(h=Math.min(s.prevTransform.x,t));const d=s.canvasWidth*s.prevTransform.scale,l=o-d;h>l&&h>s.prevTransform.x&&(h=Math.max(s.prevTransform.x,l)),c<r&&c<s.prevTransform.y&&(c=Math.min(s.prevTransform.y,r));const a=s.canvasHeight*s.prevTransform.scale,g=i-a;return c>g&&c>s.prevTransform.y&&(c=Math.max(s.prevTransform.y,g)),{scale:s.nextTransform.scale,x:h,y:c}}},Pt=e=>{const t=e.maxContentScale,o=e.minContentScale,r=t!==null?1/t:0,i=o!==null?1/o:1/0;return s=>{const h=s.prevTransform,c=s.nextTransform;let d=c.scale,l=c.x,a=c.y;if(c.scale>i&&c.scale>h.scale){d=Math.max(h.scale,i),l=h.x,a=h.y;const g=(d-h.scale)/(c.scale-h.scale);l=h.x+(c.x-h.x)*g,a=h.y+(c.y-h.y)*g}if(c.scale<r&&c.scale<h.scale){d=Math.min(h.scale,r),l=h.x,a=h.y;const g=(d-h.scale)/(c.scale-h.scale);l=h.x+(c.x-h.x)*g,a=h.y+(c.y-h.y)*g}return{scale:d,x:l,y:a}}},Lt=e=>t=>e.reduce((o,r)=>r({prevTransform:t.prevTransform,nextTransform:o,canvasWidth:t.canvasWidth,canvasHeight:t.canvasHeight}),t.nextTransform),ot=e=>{if(typeof e=="function")return e;switch(e.type){case"scale-limit":return Pt({minContentScale:e.minContentScale??0,maxContentScale:e.maxContentScale??1/0});case"shift-limit":return Nt({minX:e.minX??-1/0,maxX:e.maxX??1/0,minY:e.minY??-1/0,maxY:e.maxY??1/0})}},mt=e=>{var v,M,T,C,j,$,b,p,nt;const t=(v=e==null?void 0:e.scale)==null?void 0:v.mouseWheelSensitivity,o=t!==void 0?t:1.2,r=e==null?void 0:e.transformPreprocessor;let i;r!==void 0?Array.isArray(r)?i=Lt(r.map(m=>ot(m))):i=ot(r):i=m=>m.nextTransform;const s=((M=e==null?void 0:e.shift)==null?void 0:M.cursor)!==void 0?e.shift.cursor:"grab",h=((T=e==null?void 0:e.events)==null?void 0:T.onBeforeTransformChange)??(()=>{}),c=((C=e==null?void 0:e.events)==null?void 0:C.onTransformChange)??(()=>{}),d=(j=e==null?void 0:e.shift)==null?void 0:j.mouseDownEventVerifier,l=d!==void 0?d:m=>m.button===0,a=($=e==null?void 0:e.shift)==null?void 0:$.mouseUpEventVerifier,g=a!==void 0?a:m=>m.button===0,y=(b=e==null?void 0:e.scale)==null?void 0:b.mouseWheelEventVerifier,x=y!==void 0?y:()=>!0;return{wheelSensitivity:o,onTransformStarted:((p=e==null?void 0:e.events)==null?void 0:p.onTransformStarted)??(()=>{}),onTransformFinished:((nt=e==null?void 0:e.events)==null?void 0:nt.onTransformFinished)??(()=>{}),onBeforeTransformChange:h,onTransformChange:c,transformPreprocessor:i,shiftCursor:s,mouseDownEventVerifier:l,mouseUpEventVerifier:g,mouseWheelEventVerifier:x}},H=e=>{const t=[],o=e.touches.length;for(let c=0;c<o;c++)t.push([e.touches[c].clientX,e.touches[c].clientY]);const r=t.reduce((c,d)=>[c[0]+d[0],c[1]+d[1]],[0,0]),i=[r[0]/o,r[1]/o],h=t.map(c=>[c[0]-i[0],c[1]-i[1]]).reduce((c,d)=>c+Math.sqrt(d[0]*d[0]+d[1]*d[1]),0);return{x:i[0],y:i[1],scale:h/o,touchesCnt:o,touches:t}},Dt=(e,t,o)=>({scale:e.scale,x:e.x+e.scale*t,y:e.y+e.scale*o}),It=(e,t,o,r)=>({scale:e.scale*t,x:e.scale*(1-t)*o+e.x,y:e.scale*(1-t)*r+e.y});class rt{constructor(t,o){n(this,"model");n(this,"transformation");n(this,"element",null);n(this,"prevTouches",null);n(this,"window",window);n(this,"onMouseDown",t=>{this.element===null||!this.options.mouseDownEventVerifier(t)||(k(this.element,this.options.shiftCursor),this.window.addEventListener("mousemove",this.onWindowMouseMove),this.window.addEventListener("mouseup",this.onWindowMouseUp),this.options.onTransformStarted())});n(this,"onWindowMouseMove",t=>{if(this.element===null||!Y(this.element,t.clientX,t.clientY)||!X(this.window,t.clientX,t.clientY)){this.stopMouseDrag();return}const o=-t.movementX,r=-t.movementY;this.moveViewport(this.element,o,r)});n(this,"onWindowMouseUp",t=>{this.element===null||!this.options.mouseUpEventVerifier(t)||this.stopMouseDrag()});n(this,"onWheelScroll",t=>{if(!this.options.mouseWheelEventVerifier(t))return;t.preventDefault(),this.options.onTransformStarted();const{left:o,top:r}=this.element.getBoundingClientRect(),i=t.clientX-o,s=t.clientY-r,c=1/(t.deltaY<0?this.options.wheelSensitivity:1/this.options.wheelSensitivity);this.scaleViewport(this.element,c,i,s),this.options.onTransformFinished()});n(this,"onTouchStart",t=>{this.prevTouches=H(t),this.window.addEventListener("touchmove",this.onWindowTouchMove),this.window.addEventListener("touchend",this.onWindowTouchFinish),this.window.addEventListener("touchcancel",this.onWindowTouchFinish),this.options.onTransformStarted()});n(this,"onWindowTouchMove",t=>{const o=this.element;if(o===null)return;const r=H(t);if(!r.touches.every(s=>Y(o,s[0],s[1])&&X(this.window,s[0],s[1]))){this.stopTouchDrag();return}if((r.touchesCnt===1||r.touchesCnt===2)&&this.moveViewport(o,-(r.x-this.prevTouches.x),-(r.y-this.prevTouches.y)),r.touchesCnt===2){const{left:s,top:h}=o.getBoundingClientRect(),c=this.prevTouches.x-s,d=this.prevTouches.y-h,a=1/(r.scale/this.prevTouches.scale);this.scaleViewport(o,a,c,d)}this.prevTouches=r});n(this,"onWindowTouchFinish",t=>{t.touches.length>0?this.prevTouches=H(t):this.stopTouchDrag()});n(this,"observer",new ResizeObserver(()=>{const t=this.canvas.transformation.getViewportMatrix(),{width:o,height:r}=this.element.getBoundingClientRect(),i=this.options.transformPreprocessor({prevTransform:t,nextTransform:t,canvasWidth:o,canvasHeight:r});this.canvas.patchViewportMatrix(i),this.options.onTransformChange()}));n(this,"options");this.canvas=t,this.options=mt(o),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(t){return this.detach(),this.element=t,this.observer.observe(this.element),this.element.addEventListener("mousedown",this.onMouseDown),this.element.addEventListener("wheel",this.onWheelScroll),this.element.addEventListener("touchstart",this.onTouchStart),this.canvas.attach(this.element),this}detach(){return this.canvas.detach(),this.element!==null&&(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=null),this}addNode(t){return this.canvas.addNode(t),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){return this.canvas.removeNode(t),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this}destroy(){this.detach(),this.removeMouseDragListeners(),this.removeTouchDragListeners(),this.canvas.destroy()}moveViewport(t,o,r){this.options.onBeforeTransformChange();const i=this.transformation.getViewportMatrix(),s=Dt(i,o,r),{width:h,height:c}=t.getBoundingClientRect(),d=this.options.transformPreprocessor({prevTransform:i,nextTransform:s,canvasWidth:h,canvasHeight:c});this.canvas.patchViewportMatrix(d),this.options.onTransformChange()}scaleViewport(t,o,r,i){this.options.onBeforeTransformChange();const s=this.canvas.transformation.getViewportMatrix(),h=It(s,o,r,i),{width:c,height:d}=t.getBoundingClientRect(),l=this.options.transformPreprocessor({prevTransform:s,nextTransform:h,canvasWidth:c,canvasHeight:d});this.canvas.patchViewportMatrix(l),this.options.onTransformChange()}stopMouseDrag(){this.element!==null&&k(this.element,null),this.removeMouseDragListeners(),this.options.onTransformFinished()}removeMouseDragListeners(){this.window.removeEventListener("mousemove",this.onWindowMouseMove),this.window.removeEventListener("mouseup",this.onWindowMouseUp)}stopTouchDrag(){this.prevTouches=null,this.removeTouchDragListeners(),this.options.onTransformFinished()}removeTouchDragListeners(){this.window.removeEventListener("touchmove",this.onWindowTouchMove),this.window.removeEventListener("touchend",this.onWindowTouchFinish),this.window.removeEventListener("touchcancel",this.onWindowTouchFinish)}}class $t{constructor(){n(this,"keyMap",new Map);n(this,"valueMap",new Map)}set(t,o){this.keyMap.set(t,o),this.valueMap.set(o,t)}hasKey(t){return this.keyMap.has(t)}hasValue(t){return this.valueMap.has(t)}getByKey(t){return this.keyMap.get(t)}getByValue(t){return this.valueMap.get(t)}deleteByKey(t){const o=this.keyMap.get(t);o!==void 0&&this.valueMap.delete(o),this.keyMap.delete(t)}deleteByValue(t){const o=this.valueMap.get(t);o!==void 0&&this.keyMap.delete(o),this.valueMap.delete(t)}forEach(t){this.keyMap.forEach((o,r)=>{t(o,r)})}clear(){this.keyMap.clear(),this.valueMap.clear()}}class it{constructor(t){n(this,"transformation");n(this,"model");n(this,"nodes",new $t);n(this,"nodeIdGenerator",new I(t=>this.nodes.hasKey(t)));n(this,"nodesResizeObserver");this.canvas=t,this.nodesResizeObserver=new window.ResizeObserver(o=>{o.forEach(r=>{const i=r.target;this.reactNodeChange(i)})}),this.transformation=this.canvas.transformation,this.model=this.canvas.model}attach(t){return this.canvas.attach(t),this}detach(){return this.canvas.detach(),this}addNode(t){const o=this.nodeIdGenerator.create(t.id);return this.canvas.addNode({...t,id:o}),this.nodes.set(o,t.element),this.nodesResizeObserver.observe(t.element),this}updateNode(t,o){return this.canvas.updateNode(t,o),this}removeNode(t){this.canvas.removeNode(t);const o=this.nodes.getByKey(t);return this.nodes.deleteByKey(t),this.nodesResizeObserver.unobserve(o),this}markPort(t){return this.canvas.markPort(t),this}updatePort(t,o){return this.canvas.updatePort(t,o),this}unmarkPort(t){return this.canvas.unmarkPort(t),this}addEdge(t){return this.canvas.addEdge(t),this}updateEdge(t,o){return this.canvas.updateEdge(t,o),this}removeEdge(t){return this.canvas.removeEdge(t),this}patchViewportMatrix(t){return this.canvas.patchViewportMatrix(t),this}patchContentMatrix(t){return this.canvas.patchContentMatrix(t),this}clear(){return this.canvas.clear(),this.nodesResizeObserver.disconnect(),this.nodes.clear(),this}destroy(){this.clear(),this.canvas.destroy()}reactNodeChange(t){const o=this.nodes.getByValue(t);this.canvas.updateNode(o),this.model.getNodeAdjacentEdgeIds(o).forEach(i=>{this.canvas.updateEdge(i)})}}class bt{constructor(){n(this,"coreOptions");n(this,"dragOptions");n(this,"transformOptions");n(this,"isDraggable",!1);n(this,"isTransformable",!1);n(this,"hasResizeReactiveNodes",!1)}setOptions(t){return this.coreOptions=t,this}setUserDraggableNodes(t){return this.isDraggable=!0,this.dragOptions=t,this}setUserTransformableCanvas(t){return this.isTransformable=!0,this.transformOptions=t,this}setResizeReactiveNodes(){return this.hasResizeReactiveNodes=!0,this}build(){let t=new tt(this.coreOptions);return this.hasResizeReactiveNodes&&(t=new it(t)),this.isDraggable&&(t=new et(t,this.dragOptions)),this.isTransformable&&(t=new rt(t,this.transformOptions)),t}}S.BezierEdgeShape=K,S.CanvasCore=tt,S.HorizontalEdgeShape=_,S.HtmlGraphBuilder=bt,S.HtmlGraphError=A,S.ResizeReactiveNodesCanvas=it,S.StraightEdgeShape=J,S.UserDraggableNodesCanvas=et,S.UserTransformableCanvas=rt,S.VerticalEdgeShape=Q,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})});

package/package.json

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