@html-graph/html-graph 0.0.43 → 0.0.45

package/README.md

@@ -29,26 +29,26 @@ This library fits for tasks where easy nodes customization and interactiveness a
 ## Getting started:
 
 ```
-npm i @html-graph/core
+npm i @html-graph/html-graph
 ```
 
 ```typescript
-import { ApiPortPayload, CanvasBuilder } from "@html-graph/html-graph";
+import { MarkPortRequest, CanvasBuilder } from "@html-graph/html-graph";
 
 const canvas = new CanvasBuilder()
-  .options({
+  .setOptions({
     background: { type: "dots" },
     connections: { hasTargetArrow: true },
   })
-  .draggableNodes()
-  .transformableCanvas()
+  .setDraggableNodes()
+  .setTransformableCanvas()
   .build();
 
 function createNode(
   name: string,
   frontPortId: string,
   backPortId: string,
-): [HTMLElement, Record<string, ApiPortPayload>] {
+): [HTMLElement, Record<string, MarkPortRequest>] {
   const node = document.createElement("div");
   node.classList.add("node");
 

package/dist/main.d.ts

@@ -1,10 +1,19 @@
-export declare interface ApiConnection {
+export declare interface AddConnectionRequest {
     id?: string;
     from: string;
     to: string;
     options?: ConnectionOptions;
 }
 
+export declare interface AddNodeRequest {
+    id?: string;
+    element: HTMLElement;
+    x: number;
+    y: number;
+    ports?: Record<string, MarkPortRequest>;
+    centerFn?: CenterFn;
+}
+
 export declare interface ApiContentMoveTransform {
     x?: number;
     y?: number;
@@ -16,15 +25,6 @@ export declare interface ApiContentScaleTransform {
     y?: number;
 }
 
-export declare interface ApiNode {
-    id?: string;
-    element: HTMLElement;
-    x: number;
-    y: number;
-    ports?: Record<string, ApiPortsPayload>;
-    centerFn?: CenterFn;
-}
-
 export declare interface ApiPort {
     readonly id?: string;
     readonly element: HTMLElement;
@@ -33,22 +33,12 @@ export declare interface ApiPort {
     readonly direction?: number | null;
 }
 
-export declare type ApiPortsPayload = HTMLElement | {
-    readonly element: HTMLElement;
-    readonly centerFn?: CenterFn;
-    readonly direction?: number | null;
-};
-
-declare interface ApiTransform {
+export declare interface ApiTransform {
     scale?: number;
     x?: number;
     y?: number;
 }
 
-declare interface ApiUpdateConnection {
-    readonly controller?: ConnectionController;
-}
-
 export declare type BackgroundDrawingFn = (ctx: CanvasRenderingContext2D, transformer: PublicViewportTransformer) => void;
 
 declare type BackgroundOptions = {
@@ -107,7 +97,7 @@ export declare interface Canvas {
     /**
      * adds node to graph
      */
-    addNode(node: ApiNode): Canvas;
+    addNode(node: AddNodeRequest): Canvas;
     /**
      * removes node from graph
      * all the ports of node get unmarked
@@ -130,7 +120,7 @@ export declare interface Canvas {
     /**
      * adds connection to graph
      */
-    addConnection(connection: ApiConnection): Canvas;
+    addConnection(connection: AddConnectionRequest): Canvas;
     /**
      * removes connection from graph
      */
@@ -158,7 +148,7 @@ export declare interface Canvas {
     /**
      * updates connection
      */
-    updateConnectionOptions(connectionId: string, options: ApiUpdateConnection): Canvas;
+    updateConnectionController(connectionId: string, controller: ConnectionController): Canvas;
     /**
      * drags node in viewport
      */
@@ -194,9 +184,9 @@ export declare class CanvasBuilder {
     private transformOptions;
     private isDraggable;
     private isTransformable;
-    options(options: CoreOptions): CanvasBuilder;
-    draggableNodes(): CanvasBuilder;
-    transformableCanvas(options?: TransformOptions): CanvasBuilder;
+    setOptions(options: CoreOptions): CanvasBuilder;
+    setDraggableNodes(): CanvasBuilder;
+    setTransformableCanvas(options?: TransformOptions): CanvasBuilder;
     build(): Canvas;
 }
 
@@ -210,20 +200,20 @@ export declare class CanvasCore implements Canvas {
     private readonly options;
     private readonly di;
     constructor(apiOptions?: CoreOptions | undefined);
-    addNode(node: ApiNode): CanvasCore;
+    addNode(node: AddNodeRequest): CanvasCore;
     moveNodeOnTop(nodeId: string): CanvasCore;
     removeNode(nodeId: string): CanvasCore;
     markPort(port: ApiPort): CanvasCore;
     updatePortConnections(portId: string): CanvasCore;
     unmarkPort(portId: string): CanvasCore;
-    addConnection(connection: ApiConnection): CanvasCore;
+    addConnection(connection: AddConnectionRequest): CanvasCore;
     removeConnection(connectionId: string): CanvasCore;
     patchViewportTransform(apiTransform: ApiTransform): CanvasCore;
     moveContent(apiTransform: ApiContentMoveTransform): CanvasCore;
     scaleContent(apiTransform: ApiContentScaleTransform): CanvasCore;
     moveToNodes(nodeIds: readonly string[]): CanvasCore;
     updateNodeCoords(nodeId: string, x: number, y: number): CanvasCore;
-    updateConnectionOptions(connectionId: string, options: ApiUpdateConnection): CanvasCore;
+    updateConnectionController(connectionId: string, controller: ConnectionController): CanvasCore;
     dragNode(nodeId: string, dx: number, dy: number): CanvasCore;
     clear(): CanvasCore;
     attach(element: HTMLElement): CanvasCore;
@@ -233,12 +223,12 @@ export declare class CanvasCore implements Canvas {
 
 declare type CenterFn = (width: number, height: number) => [number, number];
 
-declare interface ConnectionController {
+export declare interface ConnectionController {
     readonly svg: SVGSVGElement;
     update(x: number, y: number, width: number, height: number, from: PortPayload, to: PortPayload): void;
 }
 
-declare type ConnectionControllerFactory = () => ConnectionController;
+declare type ConnectionControllerFactory = (type: ConnectionType) => ConnectionController;
 
 declare type ConnectionOptions = BezierConnectionOptions | StraightConnectionOptions | CustomConnectionOptions;
 
@@ -248,6 +238,11 @@ declare interface ConnectionPayload {
     controller: ConnectionController;
 }
 
+export declare enum ConnectionType {
+    Regular = "regular",
+    Cycle = "cycle"
+}
+
 export declare class ConnectionUtils {
     static getPortCenter(port: PortPayload): Point;
     static rotate(point: Point, vector: Point, center: Point): Point;
@@ -296,6 +291,26 @@ export declare interface CoreOptions {
     };
 }
 
+export declare const createBezierConnectionControllerFactory: (options: {
+    color: string;
+    width: number;
+    arrowLength: number;
+    arrowWidth: number;
+    curvature: number;
+    hasSourceArrow: boolean;
+    hasTargetArrow: boolean;
+}) => ConnectionControllerFactory;
+
+export declare const createStraightConnectionControllerFactory: (options: {
+    color: string;
+    width: number;
+    arrowLength: number;
+    arrowWidth: number;
+    minPortOffset: number;
+    hasSourceArrow: boolean;
+    hasTargetArrow: boolean;
+}) => ConnectionControllerFactory;
+
 declare interface CustomConnectionOptions {
     readonly type: "custom";
     readonly controllerFactory: ConnectionControllerFactory;
@@ -316,19 +331,19 @@ export declare class DraggableNodesCanvas implements Canvas {
     private readonly onCanvasTouchEnd;
     private previousTouchCoords;
     constructor(canvas: Canvas);
-    addNode(node: ApiNode): DraggableNodesCanvas;
+    addNode(node: AddNodeRequest): DraggableNodesCanvas;
     removeNode(nodeId: string): DraggableNodesCanvas;
     markPort(port: ApiPort): DraggableNodesCanvas;
     updatePortConnections(portId: string): DraggableNodesCanvas;
     unmarkPort(portId: string): DraggableNodesCanvas;
-    addConnection(connection: ApiConnection): DraggableNodesCanvas;
+    addConnection(connection: AddConnectionRequest): DraggableNodesCanvas;
     removeConnection(connectionId: string): DraggableNodesCanvas;
     patchViewportTransform(apiTransform: ApiTransform): DraggableNodesCanvas;
     moveContent(apiTransform: ApiContentMoveTransform): DraggableNodesCanvas;
     scaleContent(apiTransform: ApiContentScaleTransform): DraggableNodesCanvas;
     moveToNodes(nodeIds: readonly string[]): DraggableNodesCanvas;
     updateNodeCoords(nodeId: string, x: number, y: number): DraggableNodesCanvas;
-    updateConnectionOptions(connectionId: string, options: ApiUpdateConnection): DraggableNodesCanvas;
+    updateConnectionController(connectionId: string, controller: ConnectionController): DraggableNodesCanvas;
     dragNode(nodeId: string, dx: number, dy: number): DraggableNodesCanvas;
     moveNodeOnTop(nodeId: string): DraggableNodesCanvas;
     clear(): DraggableNodesCanvas;
@@ -378,6 +393,12 @@ declare class GraphStore {
 
 declare type LayersMode = "connections-on-top" | "nodes-on-top" | "connections-follow-node";
 
+export declare type MarkPortRequest = HTMLElement | {
+    readonly element: HTMLElement;
+    readonly centerFn?: CenterFn;
+    readonly direction?: number | null;
+};
+
 declare interface NodePayload {
     element: HTMLElement;
     x: number;
@@ -497,19 +518,19 @@ export declare class TransformableCanvas implements Canvas {
     private readonly onTouchMove;
     private readonly onTouchEnd;
     constructor(canvas: Canvas, options?: TransformOptions | undefined);
-    addNode(node: ApiNode): TransformableCanvas;
+    addNode(node: AddNodeRequest): TransformableCanvas;
     removeNode(nodeId: string): TransformableCanvas;
     markPort(port: ApiPort): TransformableCanvas;
     updatePortConnections(portId: string): TransformableCanvas;
     unmarkPort(portId: string): TransformableCanvas;
-    addConnection(connection: ApiConnection): TransformableCanvas;
+    addConnection(connection: AddConnectionRequest): TransformableCanvas;
     removeConnection(connectionId: string): TransformableCanvas;
     patchViewportTransform(apiTransform: ApiTransform): TransformableCanvas;
     moveContent(apiTransform: ApiContentMoveTransform): TransformableCanvas;
     scaleContent(apiTransform: ApiContentScaleTransform): TransformableCanvas;
     moveToNodes(nodeIds: readonly string[]): TransformableCanvas;
     updateNodeCoords(nodeId: string, x: number, y: number): TransformableCanvas;
-    updateConnectionOptions(connectionId: string, options: ApiUpdateConnection): TransformableCanvas;
+    updateConnectionController(connectionId: string, controller: ConnectionController): TransformableCanvas;
     dragNode(nodeId: string, dx: number, dy: number): TransformableCanvas;
     moveNodeOnTop(nodeId: string): TransformableCanvas;
     clear(): TransformableCanvas;

package/dist/main.js

@@ -1,28 +1,7 @@
-var V = Object.defineProperty;
-var k = (n, t, e) => t in n ? V(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
-var r = (n, t, e) => k(n, typeof t != "symbol" ? t + "" : t, e);
-class nt {
-  constructor() {
-    r(this, "coreOptions");
-    r(this, "transformOptions");
-    r(this, "isDraggable", !1);
-    r(this, "isTransformable", !1);
-  }
-  options(t) {
-    return this.coreOptions = t, this;
-  }
-  draggableNodes() {
-    return this.isDraggable = !0, this;
-  }
-  transformableCanvas(t) {
-    return this.isTransformable = !0, this.transformOptions = t, this;
-  }
-  build() {
-    let t = new I(this.coreOptions);
-    return this.isDraggable && (t = new tt(t)), this.isTransformable && (t = new et(t, this.transformOptions)), t;
-  }
-}
-class j {
+var k = Object.defineProperty;
+var j = (n, t, e) => t in n ? k(n, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[t] = e;
+var r = (n, t, e) => j(n, typeof t != "symbol" ? t + "" : t, e);
+class F {
   constructor(t) {
     r(this, "canvasWrapper", null);
     r(this, "host");
@@ -204,11 +183,11 @@ class j {
     ), [f, y] = s.centerFn(
       c.width * g,
       c.height * g
-    ), b = u + h, S = p + l, N = f + m, C = y + d, w = Math.min(b, N), T = Math.min(S, C), E = Math.abs(N - b), O = Math.abs(C - S), x = this.connectionIdToElementMap.get(t), M = b <= N, L = S <= C;
-    x.style.transform = `matrix(${M ? 1 : -1}, 0, 0, ${L ? 1 : -1}, ${w}, ${T})`, e.controller.update(w, T, E, O, o, s);
+    ), b = u + h, S = p + l, N = f + m, v = y + d, w = Math.min(b, N), T = Math.min(S, v), E = Math.abs(N - b), O = Math.abs(v - S), M = this.connectionIdToElementMap.get(t), L = b <= N, V = S <= v;
+    M.style.transform = `matrix(${L ? 1 : -1}, 0, 0, ${V ? 1 : -1}, ${w}, ${T})`, e.controller.update(w, T, E, O, o, s);
   }
 }
-class F {
+class W {
   constructor() {
     r(this, "state", {
       scale: 1,
@@ -278,7 +257,7 @@ class F {
     };
   }
 }
-class W {
+class D {
   constructor(t) {
     this.transformer = t;
   }
@@ -311,7 +290,7 @@ class W {
     return this.transformer.getAbsScale();
   }
 }
-class v {
+class C {
   static getPortCenter(t) {
     const { top: e, left: o, width: s, height: i } = t.element.getBoundingClientRect(), c = t.centerFn(s, i);
     return [o + c[0], e + c[1]];
@@ -341,7 +320,7 @@ class v {
     return `M ${a[0][0]} ${a[0][1]} L ${a[1][0]} ${a[1][1]}`;
   }
 }
-class D {
+class R {
   constructor(t, e, o, s, i, c, a) {
     r(this, "svg");
     r(this, "group");
@@ -358,21 +337,21 @@ class D {
   }
   update(t, e, o, s, i, c) {
     this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
-    const a = v.getPortCenter(i), h = v.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
+    const a = C.getPortCenter(i), h = C.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
     this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${m})`;
-    const d = v.getDirectionVector(
+    const d = C.getDirectionVector(
       i.direction,
       l,
       m
-    ), g = v.getDirectionVector(
+    ), g = C.getDirectionVector(
       c.direction,
       l,
       m
-    ), u = v.rotate(
+    ), u = C.rotate(
       [this.arrowLength, 0],
       d,
       [0, 0]
-    ), p = v.rotate(
+    ), p = C.rotate(
       [o - this.arrowLength, s],
       g,
       [o, s]
@@ -382,9 +361,9 @@ class D {
     ], y = [
       p[0] - g[0] * this.curvature,
       p[1] - g[1] * this.curvature
-    ], b = `M ${u[0]} ${u[1]}`, S = `C ${f[0]} ${f[1]}, ${y[0]} ${y[1]}, ${p[0]} ${p[1]}`, N = `M 0 0 L ${u[0]} ${u[1]} `, C = ` M ${p[0]} ${p[1]} L ${o} ${s}`, w = `${this.sourceArrow ? "" : N}${b} ${S}${this.targetArrow ? "" : C}`;
+    ], b = `M ${u[0]} ${u[1]}`, S = `C ${f[0]} ${f[1]}, ${y[0]} ${y[1]}, ${p[0]} ${p[1]}`, N = `M 0 0 L ${u[0]} ${u[1]} `, v = ` M ${p[0]} ${p[1]} L ${o} ${s}`, w = `${this.sourceArrow ? "" : N}${b} ${S}${this.targetArrow ? "" : v}`;
     if (this.line.setAttribute("d", w), this.sourceArrow) {
-      const T = v.getArrowPath(
+      const T = C.getArrowPath(
         d,
         0,
         0,
@@ -394,7 +373,7 @@ class D {
       this.sourceArrow.setAttribute("d", T);
     }
     if (this.targetArrow) {
-      const T = v.getArrowPath(
+      const T = C.getArrowPath(
         g,
         o,
         s,
@@ -405,7 +384,7 @@ class D {
     }
   }
 }
-const R = (n) => () => new D(
+const z = (n) => () => new R(
   n.color ?? "#5c5c5c",
   n.width ?? 1,
   n.curvature ?? 90,
@@ -414,7 +393,7 @@ const R = (n) => () => new D(
   n.hasSourceArrow ?? !1,
   n.hasTargetArrow ?? !1
 );
-class z {
+class G {
   constructor(t, e, o, s, i, c, a) {
     r(this, "svg");
     r(this, "group");
@@ -431,39 +410,39 @@ class z {
   }
   update(t, e, o, s, i, c) {
     this.svg.style.width = `${o}px`, this.svg.style.height = `${s}px`;
-    const a = v.getPortCenter(i), h = v.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
+    const a = C.getPortCenter(i), h = C.getPortCenter(c), l = a[0] <= h[0] ? 1 : -1, m = a[1] <= h[1] ? 1 : -1;
     this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${l}, ${m})`;
-    const d = v.getDirectionVector(
+    const d = C.getDirectionVector(
       i.direction,
       l,
       m
-    ), g = v.getDirectionVector(
+    ), g = C.getDirectionVector(
       c.direction,
       l,
       m
-    ), u = v.rotate(
+    ), u = C.rotate(
       [this.arrowLength + this.minPortOffset, 0],
       d,
       [0, 0]
-    ), p = v.rotate(
+    ), p = C.rotate(
       [o - this.arrowLength - this.minPortOffset, s],
       g,
       [o, s]
-    ), [f, y] = [o / 2, s / 2], b = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${f} ${u[1]} L ${f} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${y} L ${p[0]} ${y} L ${p[0]} ${p[1]}`, S = `M 0 0 L ${u[0]} ${u[1]} `, N = ` M ${p[0]} ${p[1]} L ${o} ${s}`, C = v.getArrowOffsetPath(
+    ), [f, y] = [o / 2, s / 2], b = l * (p[0] - u[0]) > 0 ? `M ${u[0]} ${u[1]} L ${f} ${u[1]} L ${f} ${p[1]} L ${p[0]} ${p[1]}` : `M ${u[0]} ${u[1]} L ${u[0]} ${y} L ${p[0]} ${y} L ${p[0]} ${p[1]}`, S = `M 0 0 L ${u[0]} ${u[1]} `, N = ` M ${p[0]} ${p[1]} L ${o} ${s}`, v = C.getArrowOffsetPath(
       d,
       0,
       0,
       this.arrowLength,
       this.minPortOffset
-    ), w = v.getArrowOffsetPath(
+    ), w = C.getArrowOffsetPath(
       g,
       o,
       s,
       -this.arrowLength,
       -this.minPortOffset
-    ), T = `${this.sourceArrow ? C : S}${b}${this.targetArrow ? w : N}`;
+    ), T = `${this.sourceArrow ? v : S}${b}${this.targetArrow ? w : N}`;
     if (this.line.setAttribute("d", T), this.sourceArrow) {
-      const E = v.getArrowPath(
+      const E = C.getArrowPath(
         d,
         0,
         0,
@@ -473,7 +452,7 @@ class z {
       this.sourceArrow.setAttribute("d", E);
     }
     if (this.targetArrow) {
-      const E = v.getArrowPath(
+      const E = C.getArrowPath(
         g,
         o,
         s,
@@ -484,7 +463,7 @@ class z {
     }
   }
 }
-const G = (n) => () => new z(
+const B = (n) => () => new G(
   n.color,
   n.width,
   n.arrowLength,
@@ -492,33 +471,9 @@ const G = (n) => () => new z(
   n.minPortOffset,
   n.hasSourceArrow,
   n.hasTargetArrow
-), $ = (n) => {
-  switch (n == null ? void 0 : n.type) {
-    case "custom":
-      return n.controllerFactory;
-    case "straight":
-      return G({
-        color: n.color ?? "#5c5c5c",
-        width: n.width ?? 1,
-        arrowLength: n.arrowLength ?? 15,
-        arrowWidth: n.arrowWidth ?? 4,
-        minPortOffset: n.minPortOffset ?? 15,
-        hasSourceArrow: n.hasSourceArrow ?? !1,
-        hasTargetArrow: n.hasTargetArrow ?? !1
-      });
-    default:
-      return R({
-        color: n.color ?? "#5c5c5c",
-        width: n.width ?? 1,
-        curvature: n.curvature ?? 90,
-        arrowLength: n.arrowLength ?? 15,
-        arrowWidth: n.arrowWidth ?? 4,
-        hasSourceArrow: n.hasSourceArrow ?? !1,
-        hasTargetArrow: n.hasTargetArrow ?? !1
-      });
-  }
-};
-class B {
+);
+var $ = /* @__PURE__ */ ((n) => (n.Regular = "regular", n.Cycle = "cycle", n))($ || {});
+class Y {
   constructor(t) {
     this.di = t;
   }
@@ -600,12 +555,11 @@ class B {
       throw new Error("failed to add connection from nonexisting port");
     if (!this.di.graphStore.hasPort(o))
       throw new Error("failed to add connection to nonexisting port");
-    const i = s !== void 0 ? $(s) : this.di.options.connections.controllerFactory;
     this.di.graphStore.addConnection(
       t,
       e,
       o,
-      i()
+      s($.Regular)
     ), this.di.htmlController.attachConnection(t);
   }
   removeConnection(t) {
@@ -645,14 +599,9 @@ class B {
     this.di.graphStore.updateNodeCoords(t, e, o), this.di.htmlController.updateNodePosition(t);
   }
   updateConnectionOptions(t, e) {
-    if (e.controller !== void 0) {
-      if (!this.di.graphStore.hasConnection(t))
-        throw new Error("failed to update nonexisting connection");
-      this.di.htmlController.detachConnection(t), this.di.graphStore.updateConnectionController(
-        t,
-        e.controller
-      ), this.di.htmlController.attachConnection(t);
-    }
+    if (!this.di.graphStore.hasConnection(t))
+      throw new Error("failed to update nonexisting connection");
+    this.di.htmlController.detachConnection(t), this.di.graphStore.updateConnectionController(t, e), this.di.htmlController.attachConnection(t);
   }
   clear() {
     this.di.htmlController.clear(), this.di.graphStore.clear(), this.di.nodeIdGenerator.reset(), this.di.portIdGenerator.reset(), this.di.connectionIdGenerator.reset();
@@ -661,7 +610,7 @@ class B {
     this.di.htmlController.destroy();
   }
 }
-class Y {
+class X {
   constructor() {
     r(this, "nodes", /* @__PURE__ */ Object.create(null));
     r(this, "ports", /* @__PURE__ */ Object.create(null));
@@ -797,19 +746,7 @@ class Y {
     this.nodes = /* @__PURE__ */ Object.create(null), this.ports = /* @__PURE__ */ Object.create(null), this.nodePorts = /* @__PURE__ */ Object.create(null), this.portNodeId = /* @__PURE__ */ Object.create(null), this.connections = /* @__PURE__ */ Object.create(null), this.incommingConnections = /* @__PURE__ */ Object.create(null), this.outcommingConnections = /* @__PURE__ */ Object.create(null), this.cycleConnections = /* @__PURE__ */ Object.create(null);
   }
 }
-class A {
-  constructor() {
-    r(this, "counter", 0);
-  }
-  next() {
-    const t = `${this.counter}`;
-    return this.counter++, t;
-  }
-  reset() {
-    this.counter = 0;
-  }
-}
-class X {
+class Z {
   constructor(t) {
     this.graphStore = t;
   }
@@ -868,7 +805,19 @@ class X {
     return this.graphStore.getNodeAdjacentConnections(t);
   }
 }
-class Z {
+class A {
+  constructor() {
+    r(this, "counter", 0);
+  }
+  next() {
+    const t = `${this.counter}`;
+    return this.counter++, t;
+  }
+  reset() {
+    this.counter = 0;
+  }
+}
+class H {
   constructor(t) {
     r(this, "htmlController");
     r(this, "viewportTransformer");
@@ -879,15 +828,16 @@ class Z {
     r(this, "nodeIdGenerator");
     r(this, "portIdGenerator");
     r(this, "connectionIdGenerator");
-    this.options = t, this.htmlController = new j(this), this.viewportTransformer = new F(), this.publicViewportTransformer = new W(
+    this.options = t, this.htmlController = new F(this), this.viewportTransformer = new W(), this.publicViewportTransformer = new D(
       this.viewportTransformer
-    ), this.controller = new B(this), this.graphStore = new Y(), this.publicGraphStore = new X(this.graphStore), this.nodeIdGenerator = new A(), this.portIdGenerator = new A(), this.connectionIdGenerator = new A();
+    ), this.controller = new Y(this), this.graphStore = new X(), this.publicGraphStore = new Z(this.graphStore), this.nodeIdGenerator = new A(), this.portIdGenerator = new A(), this.connectionIdGenerator = new A();
   }
 }
 const P = (n, t) => [
   n / 2,
   t / 2
-], H = (n, t, e, o, s, i) => {
+], U = () => () => {
+}, q = (n, t, e, o, s, i) => {
   n.fillStyle = i, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
   const c = t.getViewCoords(0, 0), a = t.getViewScale(), h = o * a;
   let l = 0, m = 0, d = h / 2;
@@ -896,13 +846,11 @@ const P = (n, t) => [
   while (l * m > 1e4);
   const g = c[0] - Math.floor(c[0] / d) * d, u = c[1] - Math.floor(c[1] / d) * d, p = s * a, f = 2 * Math.PI, y = g - d, b = u - d, S = n.canvas.width + g, N = n.canvas.height + u;
   n.fillStyle = e;
-  for (let C = y; C <= S; C += d)
+  for (let v = y; v <= S; v += d)
     for (let w = b; w <= N; w += d)
-      n.beginPath(), n.arc(C, w, p, 0, f), n.closePath(), n.fill();
-}, U = (n, t) => {
-  n.fillStyle = t, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
-}, q = (n, t, e, o) => (s, i) => {
-  H(
+      n.beginPath(), n.arc(v, w, p, 0, f), n.closePath(), n.fill();
+}, J = (n, t, e, o) => (s, i) => {
+  q(
     s,
     i,
     n,
@@ -910,30 +858,58 @@ const P = (n, t) => [
     e,
     o
   );
-}, J = () => () => {
-}, K = (n) => (t) => {
-  U(t, n);
-}, Q = (n) => {
+}, K = (n, t) => {
+  n.fillStyle = t, n.fillRect(0, 0, n.canvas.width, n.canvas.height);
+}, Q = (n) => (t) => {
+  K(t, n);
+}, _ = (n) => {
   switch (n == null ? void 0 : n.type) {
     case "custom":
       return n.drawingFn;
     case "dots":
-      return q(
+      return J(
         n.dotColor ?? "#d8d8d8",
         n.dotGap ?? 25,
         n.dotRadius ?? 1.5,
         n.color ?? "#ffffff"
       );
     case "color":
-      return K(n.color ?? "#ffffff");
+      return Q(n.color ?? "#ffffff");
     default:
-      return J();
+      return U();
   }
-}, _ = (n) => {
+}, x = (n) => {
+  switch (n == null ? void 0 : n.type) {
+    case "custom":
+      return n.controllerFactory;
+    case "straight":
+      return B({
+        color: n.color ?? "#5c5c5c",
+        width: n.width ?? 1,
+        arrowLength: n.arrowLength ?? 15,
+        arrowWidth: n.arrowWidth ?? 4,
+        minPortOffset: n.minPortOffset ?? 15,
+        hasSourceArrow: n.hasSourceArrow ?? !1,
+        hasTargetArrow: n.hasTargetArrow ?? !1
+      });
+    default:
+      return z({
+        color: n.color ?? "#5c5c5c",
+        width: n.width ?? 1,
+        curvature: n.curvature ?? 90,
+        arrowLength: n.arrowLength ?? 15,
+        arrowWidth: n.arrowWidth ?? 4,
+        hasSourceArrow: n.hasSourceArrow ?? !1,
+        hasTargetArrow: n.hasTargetArrow ?? !1
+      });
+  }
+}, I = (n) => {
   var t, e, o;
   return {
     background: {
-      drawingFn: Q(n.background)
+      drawingFn: _(
+        n.background ?? { type: "none" }
+      )
     },
     nodes: {
       centerFn: ((t = n.nodes) == null ? void 0 : t.centerFn) ?? P
@@ -942,7 +918,7 @@ const P = (n, t) => [
       centerFn: ((e = n.ports) == null ? void 0 : e.centerFn) ?? P
     },
     connections: {
-      controllerFactory: $(
+      controllerFactory: x(
         n.connections ?? {}
       )
     },
@@ -951,13 +927,13 @@ const P = (n, t) => [
     }
   };
 };
-class I {
+class tt {
   constructor(t) {
     r(this, "transformation");
     r(this, "model");
     r(this, "options");
     r(this, "di");
-    this.apiOptions = t, this.options = _(this.apiOptions ?? {}), this.di = new Z(this.options), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore;
+    this.apiOptions = t, this.options = I(this.apiOptions ?? {}), this.di = new H(this.options), this.transformation = this.di.publicViewportTransformer, this.model = this.di.publicGraphStore;
   }
   addNode(t) {
     return this.di.controller.addNode(
@@ -991,11 +967,12 @@ class I {
     return this.di.controller.unmarkPort(t), this;
   }
   addConnection(t) {
+    const e = t.options !== void 0 ? x(t.options) : this.di.options.connections.controllerFactory;
     return this.di.controller.addConnection(
       t.id,
       t.from,
       t.to,
-      t.options
+      e
     ), this;
   }
   removeConnection(t) {
@@ -1024,7 +1001,7 @@ class I {
   updateNodeCoords(t, e, o) {
     return this.di.controller.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionOptions(t, e) {
+  updateConnectionController(t, e) {
     return this.di.controller.updateConnectionOptions(t, e), this;
   }
   dragNode(t, e, o) {
@@ -1043,7 +1020,7 @@ class I {
     this.di.controller.destroy();
   }
 }
-class tt {
+class et {
   constructor(t) {
     r(this, "transformation");
     r(this, "model");
@@ -1138,8 +1115,8 @@ class tt {
   updateNodeCoords(t, e, o) {
     return this.canvas.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionOptions(t, e) {
-    return this.canvas.updateConnectionOptions(t, e), this;
+  updateConnectionController(t, e) {
+    return this.canvas.updateConnectionController(t, e), this;
   }
   dragNode(t, e, o) {
     return this.canvas.dragNode(t, e, o), this;
@@ -1167,7 +1144,7 @@ class tt {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
 }
-class et {
+class ot {
   constructor(t, e) {
     r(this, "transformation");
     r(this, "model");
@@ -1255,8 +1232,8 @@ class et {
   updateNodeCoords(t, e, o) {
     return this.canvas.updateNodeCoords(t, e, o), this;
   }
-  updateConnectionOptions(t, e) {
-    return this.canvas.updateConnectionOptions(t, e), this;
+  updateConnectionController(t, e) {
+    return this.canvas.updateConnectionController(t, e), this;
   }
   dragNode(t, e, o) {
     return this.canvas.dragNode(t, e, o), this;
@@ -1297,12 +1274,35 @@ class et {
     this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
   }
 }
+class st {
+  constructor() {
+    r(this, "coreOptions");
+    r(this, "transformOptions");
+    r(this, "isDraggable", !1);
+    r(this, "isTransformable", !1);
+  }
+  setOptions(t) {
+    return this.coreOptions = t, this;
+  }
+  setDraggableNodes() {
+    return this.isDraggable = !0, this;
+  }
+  setTransformableCanvas(t) {
+    return this.isTransformable = !0, this.transformOptions = t, this;
+  }
+  build() {
+    let t = new tt(this.coreOptions);
+    return this.isDraggable && (t = new et(t)), this.isTransformable && (t = new ot(t, this.transformOptions)), t;
+  }
+}
 export {
-  D as BezierConnectionController,
-  nt as CanvasBuilder,
-  I as CanvasCore,
-  v as ConnectionUtils,
-  tt as DraggableNodesCanvas,
-  z as StraightConnectionController,
-  et as TransformableCanvas
+  R as BezierConnectionController,
+  st as CanvasBuilder,
+  tt as CanvasCore,
+  C as ConnectionUtils,
+  et as DraggableNodesCanvas,
+  G as StraightConnectionController,
+  ot as TransformableCanvas,
+  z as createBezierConnectionControllerFactory,
+  B as createStraightConnectionControllerFactory
 };

package/dist/main.umd.cjs

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@html-graph/html-graph",
   "author": "Dmitry Marov",
   "private": false,
-  "version": "0.0.43",
+  "version": "0.0.45",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",