@html-graph/html-graph 0.0.50 → 0.0.52

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +10 -5
  2. package/dist/main.d.ts +181 -54
  3. package/dist/main.js +1053 -687
  4. package/dist/main.umd.cjs +1 -1
  5. package/package.json +9 -3
package/dist/main.js CHANGED
@@ -1,68 +1,113 @@
1
- var j = Object.defineProperty;
2
- var R = (r, t, e) => t in r ? j(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
3
- var n = (r, t, e) => R(r, typeof t != "symbol" ? t + "" : t, e);
4
- class W {
5
- constructor(t, e, s, o, a) {
6
- n(this, "canvasWrapper", null);
7
- n(this, "host");
8
- n(this, "nodesContainer");
9
- n(this, "edgesContainer");
10
- n(this, "canvas");
11
- n(this, "canvasCtx");
12
- n(this, "hostResizeObserver");
13
- n(this, "nodesResizeObserver");
14
- n(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
15
- n(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
16
- n(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
17
- n(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
18
- n(this, "currentZIndex", 0);
19
- n(this, "layers", {
20
- "edges-on-top": {
21
- create: () => {
22
- this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
23
- },
24
- update: (t, e, s) => {
25
- this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
26
- },
27
- moveOnTop: (t) => {
28
- this.currentZIndex += 1;
29
- const e = this.nodeIdToWrapperElementMap.get(t);
30
- e.style.zIndex = `${this.currentZIndex}`;
31
- }
32
- },
33
- "edges-follow-node": {
34
- create: () => {
35
- this.host.appendChild(this.nodesContainer), this.edgesContainer = this.nodesContainer;
36
- },
37
- update: (t, e, s) => {
38
- this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
39
- },
40
- moveOnTop: (t) => {
41
- const e = this.nodeIdToWrapperElementMap.get(t);
42
- this.currentZIndex += 2, e.style.zIndex = `${this.currentZIndex}`, this.graphStore.getNodeAdjacentEdges(t).forEach((o) => {
43
- this.edgeIdToElementMap.get(o).style.zIndex = `${this.currentZIndex - 1}`;
44
- });
45
- }
46
- },
47
- "nodes-on-top": {
48
- create: () => {
49
- this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
50
- },
51
- update: (t, e, s) => {
52
- this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${e}, ${s})`;
53
- },
54
- moveOnTop: (t) => {
55
- this.currentZIndex += 1;
56
- const e = this.nodeIdToWrapperElementMap.get(t);
57
- e.style.zIndex = `${this.currentZIndex}`;
58
- }
59
- }
60
- });
61
- this.graphStore = t, this.viewportTransformer = e, this.publicViewportTransformer = s, this.layersMode = o, this.backgroundDrawingFn = a, this.host = this.createHost(), this.canvas = this.createCanvas(), this.nodesContainer = this.createNodesContainer(), this.edgesContainer = this.createEdgesContainer();
62
- const c = this.canvas.getContext("2d");
63
- if (c === null)
1
+ var B = Object.defineProperty;
2
+ var X = (e, t, r) => t in e ? B(e, t, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[t] = r;
3
+ var h = (e, t, r) => X(e, typeof t != "symbol" ? t + "" : t, r);
4
+ const z = () => {
5
+ const e = document.createElement("div");
6
+ return e.style.width = "100%", e.style.height = "100%", e.style.position = "relative", e.style.overflow = "hidden", e;
7
+ }, G = () => {
8
+ const e = document.createElement("canvas");
9
+ return e.style.position = "absolute", e.style.inset = "0", e;
10
+ }, D = () => {
11
+ const e = document.createElement("div");
12
+ return e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.width = "0", e.style.height = "0", e;
13
+ };
14
+ class j {
15
+ constructor(t) {
16
+ h(this, "nodesContainer", D());
17
+ h(this, "edgesContainer", D());
18
+ this.host = t, this.host.appendChild(this.edgesContainer), this.host.appendChild(this.nodesContainer);
19
+ }
20
+ appendNodeElement(t) {
21
+ this.nodesContainer.appendChild(t);
22
+ }
23
+ removeNodeElement(t) {
24
+ this.nodesContainer.removeChild(t);
25
+ }
26
+ appendEdgeElement(t) {
27
+ this.edgesContainer.appendChild(t);
28
+ }
29
+ removeEdgeElement(t) {
30
+ this.edgesContainer.removeChild(t);
31
+ }
32
+ update(t, r, s) {
33
+ this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
34
+ }
35
+ destroy() {
36
+ this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
37
+ }
38
+ }
39
+ class H {
40
+ constructor(t) {
41
+ h(this, "nodesContainer", D());
42
+ h(this, "edgesContainer", D());
43
+ this.host = t, this.host.appendChild(this.nodesContainer), this.host.appendChild(this.edgesContainer);
44
+ }
45
+ appendNodeElement(t) {
46
+ this.nodesContainer.appendChild(t);
47
+ }
48
+ removeNodeElement(t) {
49
+ this.nodesContainer.removeChild(t);
50
+ }
51
+ appendEdgeElement(t) {
52
+ this.edgesContainer.appendChild(t);
53
+ }
54
+ removeEdgeElement(t) {
55
+ this.edgesContainer.removeChild(t);
56
+ }
57
+ update(t, r, s) {
58
+ this.nodesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`, this.edgesContainer.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
59
+ }
60
+ destroy() {
61
+ this.host.removeChild(this.nodesContainer), this.host.removeChild(this.edgesContainer);
62
+ }
63
+ }
64
+ class U {
65
+ constructor(t) {
66
+ h(this, "container", D());
67
+ this.host = t, this.host.appendChild(this.container);
68
+ }
69
+ appendNodeElement(t) {
70
+ this.container.appendChild(t);
71
+ }
72
+ removeNodeElement(t) {
73
+ this.container.removeChild(t);
74
+ }
75
+ appendEdgeElement(t) {
76
+ this.container.appendChild(t);
77
+ }
78
+ removeEdgeElement(t) {
79
+ this.container.removeChild(t);
80
+ }
81
+ update(t, r, s) {
82
+ this.container.style.transform = `matrix(${t}, 0, 0, ${t}, ${r}, ${s})`;
83
+ }
84
+ destroy() {
85
+ this.host.removeChild(this.container);
86
+ }
87
+ }
88
+ const _ = {
89
+ "edges-on-top": (e) => new H(e),
90
+ "edges-follow-node": (e) => new U(e),
91
+ "nodes-on-top": (e) => new j(e)
92
+ };
93
+ class J {
94
+ constructor(t, r, s, o, n) {
95
+ h(this, "canvasWrapper", null);
96
+ h(this, "host", z());
97
+ h(this, "canvas", G());
98
+ h(this, "canvasCtx");
99
+ h(this, "hostResizeObserver");
100
+ h(this, "nodesResizeObserver");
101
+ h(this, "nodeElementToIdMap", /* @__PURE__ */ new Map());
102
+ h(this, "nodeWrapperElementToIdMap", /* @__PURE__ */ new Map());
103
+ h(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
104
+ h(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
105
+ h(this, "layer");
106
+ this.graphStore = t, this.viewportTransformer = r, this.publicViewportTransformer = s, this.layersMode = o, this.backgroundDrawingFn = n;
107
+ const i = this.canvas.getContext("2d");
108
+ if (i === null)
64
109
  throw new Error("unable to get canvas context");
65
- this.canvasCtx = c, this.host.appendChild(this.canvas), this.layers[this.layersMode].create(), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
110
+ this.canvasCtx = i, this.host.appendChild(this.canvas), this.layer = _[this.layersMode](this.host), this.hostResizeObserver = this.createHostResizeObserver(), this.hostResizeObserver.observe(this.host), this.nodesResizeObserver = this.createNodesResizeObserver();
66
111
  }
67
112
  clear() {
68
113
  Array.from(this.edgeIdToElementMap.keys()).forEach((t) => {
@@ -78,38 +123,43 @@ class W {
78
123
  this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
79
124
  }
80
125
  destroy() {
81
- this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.host.removeChild(this.edgesContainer), this.host.removeChild(this.nodesContainer), this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
126
+ this.hostResizeObserver.disconnect(), this.nodesResizeObserver.disconnect(), this.host.removeChild(this.canvas), this.layer.destroy(), this.detach();
82
127
  }
83
128
  applyTransform() {
84
129
  this.backgroundDrawingFn(this.canvasCtx, this.publicViewportTransformer);
85
- const [t, e] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
86
- this.layers[this.layersMode].update(s, t, e);
130
+ const [t, r] = this.viewportTransformer.getViewCoords(0, 0), s = this.viewportTransformer.getViewScale();
131
+ this.layer.update(s, t, r);
87
132
  }
88
133
  attachNode(t) {
89
- const e = this.graphStore.getNode(t), s = document.createElement("div");
90
- s.appendChild(e.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, s.style.visibility = "hidden", this.nodesContainer.appendChild(s), this.nodeElementToIdMap.set(e.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t, e.x, e.y), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
134
+ const r = this.graphStore.getNode(t), s = document.createElement("div");
135
+ s.appendChild(r.element), s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.visibility = "hidden", this.layer.appendNodeElement(s), this.nodeElementToIdMap.set(r.element, t), this.nodeWrapperElementToIdMap.set(s, t), this.nodeIdToWrapperElementMap.set(t, s), this.updateNodeCoords(t), this.updateNodePriority(t), this.nodesResizeObserver.observe(s), s.style.visibility = "visible";
91
136
  }
92
137
  detachNode(t) {
93
- const e = this.graphStore.getNode(t);
94
- this.nodesResizeObserver.unobserve(e.element), this.nodesContainer.removeChild(e.element);
138
+ const r = this.graphStore.getNode(t);
139
+ this.nodesResizeObserver.unobserve(r.element);
95
140
  const s = this.nodeIdToWrapperElementMap.get(t);
96
- s.removeChild(e.element), this.nodeElementToIdMap.delete(e.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
141
+ s.removeChild(r.element), this.layer.removeNodeElement(s), this.nodeElementToIdMap.delete(r.element), this.nodeWrapperElementToIdMap.delete(s), this.nodeIdToWrapperElementMap.delete(t);
97
142
  }
98
143
  attachEdge(t) {
99
144
  const s = this.graphStore.getEdge(t).controller.svg;
100
- s.style.transformOrigin = "50% 50%", s.style.position = "absolute", s.style.top = "0", s.style.left = "0", s.style.zIndex = `${this.currentZIndex}`, this.currentZIndex += 1, this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.edgesContainer.appendChild(s);
145
+ s.style.position = "absolute", s.style.top = "0", s.style.left = "0", this.edgeIdToElementMap.set(t, s), this.updateEdgeCoords(t), this.updateEdgePriority(t), this.layer.appendEdgeElement(s);
101
146
  }
102
147
  detachEdge(t) {
103
- const e = this.edgeIdToElementMap.get(t);
104
- this.edgeIdToElementMap.delete(t), this.edgesContainer.removeChild(e);
148
+ const r = this.edgeIdToElementMap.get(t);
149
+ this.edgeIdToElementMap.delete(t), this.layer.removeEdgeElement(r);
105
150
  }
106
- moveNodeOnTop(t) {
107
- this.layers[this.layersMode].moveOnTop(t);
151
+ updateNodePriority(t) {
152
+ const r = this.graphStore.getNode(t), s = this.nodeIdToWrapperElementMap.get(t);
153
+ s.style.zIndex = `${r.priority}`;
154
+ }
155
+ updateEdgePriority(t) {
156
+ const r = this.graphStore.getEdge(t);
157
+ this.edgeIdToElementMap.get(t).style.zIndex = `${r.priority}`;
108
158
  }
109
159
  updateNodeCoordinates(t) {
110
- const e = this.graphStore.getNode(t), s = this.graphStore.getNodeAdjacentEdges(t);
111
- this.updateNodeCoords(t, e.x, e.y), s.forEach((o) => {
112
- this.updateEdgeCoords(o);
160
+ const r = this.graphStore.getNodeAdjacentEdges(t);
161
+ this.updateNodeCoords(t), r.forEach((s) => {
162
+ this.updateEdgeCoords(s);
113
163
  });
114
164
  }
115
165
  updatePortEdges(t) {
@@ -121,22 +171,6 @@ class W {
121
171
  const t = this.host.getBoundingClientRect();
122
172
  return [t.width, t.height];
123
173
  }
124
- createHost() {
125
- const t = document.createElement("div");
126
- return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
127
- }
128
- createCanvas() {
129
- const t = document.createElement("canvas");
130
- return t.style.position = "absolute", t.style.inset = "0", t;
131
- }
132
- createNodesContainer() {
133
- const t = document.createElement("div");
134
- return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
135
- }
136
- createEdgesContainer() {
137
- const t = document.createElement("div");
138
- 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;
139
- }
140
174
  createHostResizeObserver() {
141
175
  return new ResizeObserver(() => {
142
176
  this.updateCanvasDimensions(), this.applyTransform();
@@ -144,74 +178,74 @@ class W {
144
178
  }
145
179
  createNodesResizeObserver() {
146
180
  return new ResizeObserver((t) => {
147
- t.forEach((e) => {
148
- const s = e.target, o = this.nodeWrapperElementToIdMap.get(s), a = this.graphStore.getNode(o);
149
- this.updateNodeCoords(o, a.x, a.y), this.graphStore.getNodeAdjacentEdges(o).forEach((h) => {
150
- this.updateEdgeCoords(h);
181
+ t.forEach((r) => {
182
+ const s = r.target, o = this.nodeWrapperElementToIdMap.get(s);
183
+ this.updateNodeCoords(o), this.graphStore.getNodeAdjacentEdges(o).forEach((i) => {
184
+ this.updateEdgeCoords(i);
151
185
  });
152
186
  });
153
187
  });
154
188
  }
155
189
  updateCanvasDimensions() {
156
- const { width: t, height: e } = this.host.getBoundingClientRect();
157
- this.canvas.width = t, this.canvas.height = e;
190
+ const { width: t, height: r } = this.host.getBoundingClientRect();
191
+ this.canvas.width = t, this.canvas.height = r;
158
192
  }
159
- updateNodeCoords(t, e, s) {
160
- const o = this.nodeIdToWrapperElementMap.get(t), { width: a, height: c } = o.getBoundingClientRect(), h = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [d, g] = i.centerFn(a, c);
161
- o.style.transform = `matrix(1, 0, 0, 1, ${e - h * d}, ${s - h * g})`;
193
+ updateNodeCoords(t) {
194
+ const r = this.nodeIdToWrapperElementMap.get(t), { width: s, height: o } = r.getBoundingClientRect(), n = this.viewportTransformer.getAbsScale(), i = this.graphStore.getNode(t), [a, c] = i.centerFn(s, o);
195
+ r.style.transform = `matrix(1, 0, 0, 1, ${i.x - n * a}, ${i.y - n * c})`;
162
196
  }
163
197
  updateEdgeCoords(t) {
164
- const e = this.graphStore.getEdge(t), s = this.graphStore.getPort(e.from), o = this.graphStore.getPort(e.to), a = s.element.getBoundingClientRect(), c = o.element.getBoundingClientRect(), h = this.host.getBoundingClientRect(), [i, d] = this.viewportTransformer.getAbsCoords(
165
- a.left - h.left,
166
- a.top - h.top
167
- ), [g, l] = this.viewportTransformer.getAbsCoords(
168
- c.left - h.left,
169
- c.top - h.top
170
- ), u = this.viewportTransformer.getAbsScale(), [v, m] = s.centerFn(
171
- a.width * u,
172
- a.height * u
173
- ), [w, f] = o.centerFn(
174
- c.width * u,
175
- c.height * u
176
- ), C = v + i, E = m + d, b = w + g, $ = f + l, y = Math.min(C, b), T = Math.min(E, $), S = Math.abs(b - C), N = Math.abs($ - E);
177
- e.controller.update(y, T, S, N, s, o);
198
+ const r = this.graphStore.getEdge(t), s = this.graphStore.getPort(r.from), o = this.graphStore.getPort(r.to), n = s.element.getBoundingClientRect(), i = o.element.getBoundingClientRect(), a = this.host.getBoundingClientRect(), [c, l] = this.viewportTransformer.getAbsCoords(
199
+ n.left - a.left,
200
+ n.top - a.top
201
+ ), [d, g] = this.viewportTransformer.getAbsCoords(
202
+ i.left - a.left,
203
+ i.top - a.top
204
+ ), u = this.viewportTransformer.getAbsScale(), [p, w] = s.centerFn(
205
+ n.width * u,
206
+ n.height * u
207
+ ), [f, m] = o.centerFn(
208
+ i.width * u,
209
+ i.height * u
210
+ ), E = p + c, v = w + l, C = f + d, S = m + g, A = Math.min(E, C), P = Math.min(v, S), M = Math.abs(C - E), x = Math.abs(S - v);
211
+ r.controller.update(A, P, M, x, s, o);
178
212
  }
179
213
  }
180
- class B {
214
+ class K {
181
215
  constructor() {
182
- n(this, "state", {
216
+ h(this, "state", {
183
217
  scale: 1,
184
218
  x: 0,
185
219
  y: 0
186
220
  });
187
221
  }
188
- getViewCoords(t, e) {
222
+ getViewCoords(t, r) {
189
223
  return [
190
224
  (t - this.state.x) / this.state.scale,
191
- (e - this.state.y) / this.state.scale
225
+ (r - this.state.y) / this.state.scale
192
226
  ];
193
227
  }
194
228
  getViewScale() {
195
229
  return 1 / this.state.scale;
196
230
  }
197
- getAbsCoords(t, e) {
231
+ getAbsCoords(t, r) {
198
232
  return [
199
233
  t * this.state.scale + this.state.x,
200
- e * this.state.scale + this.state.y
234
+ r * this.state.scale + this.state.y
201
235
  ];
202
236
  }
203
237
  getAbsScale() {
204
238
  return this.state.scale;
205
239
  }
206
- patchState(t, e, s) {
240
+ patchState(t, r, s) {
207
241
  this.state = {
208
242
  scale: t ?? this.state.scale,
209
- x: e ?? this.state.x,
243
+ x: r ?? this.state.x,
210
244
  y: s ?? this.state.y
211
245
  };
212
246
  }
213
247
  }
214
- class z {
248
+ class Q {
215
249
  constructor(t) {
216
250
  this.transformer = t;
217
251
  }
@@ -219,8 +253,8 @@ class z {
219
253
  * for given absolute coordinates returns viewport coordinates
220
254
  * viewport coordinated represent actual coordinates on screen for given absolute coordinates
221
255
  */
222
- getViewCoords(t, e) {
223
- return this.transformer.getViewCoords(t, e);
256
+ getViewCoords(t, r) {
257
+ return this.transformer.getViewCoords(t, r);
224
258
  }
225
259
  /**
226
260
  * returns viewport scale
@@ -233,8 +267,8 @@ class z {
233
267
  * for given viewport coordinates returns absolute coordinates
234
268
  * absolute coordinates represent actual coordinates, which stay constant even for transformed canvas
235
269
  */
236
- getAbsCoords(t, e) {
237
- return this.transformer.getAbsCoords(t, e);
270
+ getAbsCoords(t, r) {
271
+ return this.transformer.getAbsCoords(t, r);
238
272
  }
239
273
  /**
240
274
  * returns absolute scale
@@ -244,84 +278,64 @@ class z {
244
278
  return this.transformer.getAbsScale();
245
279
  }
246
280
  }
247
- class Y {
281
+ class Z {
248
282
  constructor() {
249
- n(this, "nodes", /* @__PURE__ */ Object.create(null));
250
- n(this, "ports", /* @__PURE__ */ Object.create(null));
251
- n(this, "nodePorts", /* @__PURE__ */ Object.create(null));
252
- n(this, "portNodeId", /* @__PURE__ */ Object.create(null));
253
- n(this, "edges", /* @__PURE__ */ Object.create(null));
254
- n(this, "incommingEdges", /* @__PURE__ */ Object.create(null));
255
- n(this, "outcommingEdges", /* @__PURE__ */ Object.create(null));
256
- n(this, "cycleEdges", /* @__PURE__ */ Object.create(null));
257
- }
258
- addNode(t, e, s, o, a) {
259
- this.nodes[t] = { element: e, x: s, y: o, centerFn: a }, this.nodePorts[t] = /* @__PURE__ */ Object.create(null);
260
- }
261
- hasNode(t) {
262
- return this.nodes[t] !== void 0;
283
+ h(this, "nodes", /* @__PURE__ */ new Map());
284
+ h(this, "ports", /* @__PURE__ */ new Map());
285
+ h(this, "nodePorts", /* @__PURE__ */ new Map());
286
+ h(this, "portNodeId", /* @__PURE__ */ new Map());
287
+ h(this, "edges", /* @__PURE__ */ new Map());
288
+ h(this, "incommingEdges", /* @__PURE__ */ new Map());
289
+ h(this, "outcommingEdges", /* @__PURE__ */ new Map());
290
+ h(this, "cycleEdges", /* @__PURE__ */ new Map());
291
+ }
292
+ addNode(t, r, s, o, n, i) {
293
+ this.nodes.set(t, { element: r, x: s, y: o, centerFn: n, priority: i }), this.nodePorts.set(t, /* @__PURE__ */ new Map());
263
294
  }
264
295
  getNode(t) {
265
- return this.nodes[t];
266
- }
267
- updateNodeCoords(t, e, s) {
268
- this.nodes[t].x = e, this.nodes[t].y = s;
269
- }
270
- updateEdgeController(t, e) {
271
- this.edges[t].controller = e;
296
+ return this.nodes.get(t);
272
297
  }
273
298
  removeNode(t) {
274
299
  this.getNodeAdjacentEdges(t).forEach((o) => {
275
300
  this.removeEdge(o);
276
- }), delete this.nodes[t];
277
- const s = this.nodePorts[t];
278
- Object.keys(s).forEach((o) => {
279
- delete this.portNodeId[o];
280
- }), delete this.nodePorts[t];
301
+ }), this.nodes.delete(t), this.nodePorts.get(t).forEach((o, n) => {
302
+ this.portNodeId.delete(n);
303
+ }), this.nodePorts.delete(t);
281
304
  }
282
- addPort(t, e, s, o, a) {
283
- this.ports[t] = { element: e, centerFn: o, direction: a }, this.cycleEdges[t] = {}, this.incommingEdges[t] = {}, this.outcommingEdges[t] = {}, this.portNodeId[t] = s;
284
- const c = this.nodePorts[s];
285
- c !== void 0 && (c[t] = e);
305
+ addPort(t, r, s, o, n) {
306
+ this.ports.set(t, { element: r, centerFn: o, direction: n }), this.cycleEdges.set(t, /* @__PURE__ */ new Set()), this.incommingEdges.set(t, /* @__PURE__ */ new Set()), this.outcommingEdges.set(t, /* @__PURE__ */ new Set()), this.portNodeId.set(t, s), this.nodePorts.get(s).set(t, r);
286
307
  }
287
308
  getPort(t) {
288
- return this.ports[t];
309
+ return this.ports.get(t);
289
310
  }
290
311
  getPortNode(t) {
291
- return this.portNodeId[t];
292
- }
293
- hasPort(t) {
294
- return this.portNodeId[t] !== void 0;
312
+ return this.portNodeId.get(t);
295
313
  }
296
314
  removePort(t) {
297
- Object.keys(this.cycleEdges[t]).forEach((o) => {
298
- this.removeEdge(o);
299
- }), delete this.cycleEdges[t], Object.keys(this.incommingEdges[t]).forEach((o) => {
300
- this.removeEdge(o);
301
- }), delete this.incommingEdges[t], Object.keys(this.outcommingEdges[t]).forEach((o) => {
302
- this.removeEdge(o);
303
- }), delete this.outcommingEdges[t];
304
- const e = this.portNodeId[t];
305
- delete this.portNodeId[t];
306
- const s = this.nodePorts[e];
307
- delete s[t], delete this.ports[t];
308
- }
309
- addEdge(t, e, s, o) {
310
- this.edges[t] = {
311
- from: e,
315
+ this.cycleEdges.get(t).forEach((s) => {
316
+ this.removeEdge(s);
317
+ }), this.cycleEdges.delete(t), this.incommingEdges.get(t).forEach((s) => {
318
+ this.removeEdge(s);
319
+ }), this.incommingEdges.delete(t), this.outcommingEdges.get(t).forEach((s) => {
320
+ this.removeEdge(s);
321
+ }), this.outcommingEdges.get(t);
322
+ const r = this.portNodeId.get(t);
323
+ this.portNodeId.delete(t), this.nodePorts.get(r).delete(t), this.ports.delete(t);
324
+ }
325
+ addEdge(t, r, s, o, n) {
326
+ this.edges.set(t, {
327
+ from: r,
312
328
  to: s,
313
- controller: o
314
- }, e !== s ? (this.outcommingEdges[e][t] = !0, this.incommingEdges[s][t] = !0) : this.cycleEdges[e][t] = !0;
329
+ controller: o,
330
+ priority: n
331
+ }), r !== s ? (this.outcommingEdges.get(r).add(t), this.incommingEdges.get(s).add(t)) : this.cycleEdges.get(r).add(t);
315
332
  }
316
333
  getEdge(t) {
317
- return this.edges[t];
318
- }
319
- hasEdge(t) {
320
- return this.edges[t] !== void 0;
334
+ return this.edges.get(t);
321
335
  }
322
336
  removeEdge(t) {
323
- const e = this.edges[t], s = e.from, o = e.to;
324
- delete this.cycleEdges[s][t], delete this.cycleEdges[o][t], delete this.incommingEdges[s][t], delete this.incommingEdges[o][t], delete this.outcommingEdges[s][t], delete this.outcommingEdges[o][t], delete this.edges[t];
337
+ const r = this.edges.get(t), s = r.from, o = r.to;
338
+ this.cycleEdges.get(s).delete(t), this.cycleEdges.get(o).delete(t), this.incommingEdges.get(s).delete(t), this.incommingEdges.get(o).delete(t), this.outcommingEdges.get(s).delete(t), this.outcommingEdges.get(o).delete(t), this.edges.delete(t);
325
339
  }
326
340
  getPortAdjacentEdges(t) {
327
341
  return [
@@ -338,315 +352,585 @@ class Y {
338
352
  ];
339
353
  }
340
354
  clear() {
341
- 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.edges = /* @__PURE__ */ Object.create(null), this.incommingEdges = /* @__PURE__ */ Object.create(null), this.outcommingEdges = /* @__PURE__ */ Object.create(null), this.cycleEdges = /* @__PURE__ */ Object.create(null);
355
+ this.nodes.clear(), this.ports.clear(), this.nodePorts.clear(), this.portNodeId.clear(), this.edges.clear(), this.incommingEdges.clear(), this.outcommingEdges.clear(), this.cycleEdges.clear();
342
356
  }
343
357
  getPortIncomingEdges(t) {
344
- return Object.keys(this.incommingEdges[t] ?? {});
358
+ return Array.from(this.incommingEdges.get(t));
345
359
  }
346
360
  getPortOutcomingEdges(t) {
347
- return Object.keys(this.outcommingEdges[t] ?? {});
361
+ return Array.from(this.outcommingEdges.get(t));
348
362
  }
349
363
  getPortCycleEdges(t) {
350
- return Object.keys(this.cycleEdges[t] ?? {});
364
+ return Array.from(this.cycleEdges.get(t));
351
365
  }
352
366
  getNodeIncomingEdges(t) {
353
- const e = Object.keys(this.nodePorts[t]);
367
+ const r = Array.from(this.nodePorts.get(t).keys());
354
368
  let s = [];
355
- return e.forEach((o) => {
369
+ return r.forEach((o) => {
356
370
  s = [...s, ...this.getPortIncomingEdges(o)];
357
371
  }), s;
358
372
  }
359
373
  getNodeOutcomingEdges(t) {
360
- const e = Object.keys(this.nodePorts[t]);
374
+ const r = Array.from(this.nodePorts.get(t).keys());
361
375
  let s = [];
362
- return e.forEach((o) => {
376
+ return r.forEach((o) => {
363
377
  s = [...s, ...this.getPortOutcomingEdges(o)];
364
378
  }), s;
365
379
  }
366
380
  getNodeCycleEdges(t) {
367
- const e = Object.keys(this.nodePorts[t]);
381
+ const r = Array.from(this.nodePorts.get(t).keys());
368
382
  let s = [];
369
- return e.forEach((o) => {
383
+ return r.forEach((o) => {
370
384
  s = [...s, ...this.getPortCycleEdges(o)];
371
385
  }), s;
372
386
  }
373
387
  }
374
- class p {
375
- static getPortCenter(t) {
376
- const { top: e, left: s, width: o, height: a } = t.element.getBoundingClientRect(), c = t.centerFn(o, a);
377
- return [s + c[0], e + c[1]];
378
- }
379
- static rotate(t, e, s) {
380
- return [
381
- e[0] * t[0] - e[1] * t[1] + ((1 - e[0]) * s[0] + e[1] * s[1]),
382
- e[1] * t[0] + e[0] * t[1] + ((1 - e[0]) * s[1] - e[1] * s[0])
383
- ];
388
+ const T = (e) => {
389
+ const { top: t, left: r, width: s, height: o } = e.element.getBoundingClientRect(), n = e.centerFn(s, o);
390
+ return [r + n[0], t + n[1]];
391
+ }, y = (e, t, r) => [
392
+ t[0] * e[0] - t[1] * e[1] + ((1 - t[0]) * r[0] + t[1] * r[1]),
393
+ t[1] * e[0] + t[0] * e[1] + ((1 - t[0]) * r[1] - t[1] * r[0])
394
+ ], b = (e, t, r) => [t * Math.cos(e), r * Math.sin(e)], N = (e, t, r, s, o) => {
395
+ const i = [
396
+ [0, 0],
397
+ [s, o],
398
+ [s, -o]
399
+ ].map((d) => y(d, e, [0, 0])).map((d) => [d[0] + t, d[1] + r]), a = `M ${i[0][0]} ${i[0][1]}`, c = `L ${i[1][0]} ${i[1][1]}`, l = `L ${i[2][0]} ${i[2][1]}`;
400
+ return `${a} ${c} ${l}`;
401
+ };
402
+ class q {
403
+ constructor(t, r, s, o, n, i, a) {
404
+ h(this, "svg");
405
+ h(this, "group");
406
+ h(this, "line");
407
+ h(this, "sourceArrow", null);
408
+ h(this, "targetArrow", null);
409
+ this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, 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%", i && (this.sourceArrow = document.createElementNS(
410
+ "http://www.w3.org/2000/svg",
411
+ "path"
412
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
413
+ "http://www.w3.org/2000/svg",
414
+ "path"
415
+ ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
384
416
  }
385
- static getDirectionVector(t, e, s) {
386
- return [e * Math.cos(t ?? 0), s * Math.sin(t ?? 0)];
417
+ update(t, r, s, o, n, i) {
418
+ this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
419
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
420
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
421
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = y([this.arrowLength, 0], g, [0, 0]), w = y([s - this.arrowLength, o], u, [
422
+ s,
423
+ o
424
+ ]), f = [
425
+ p[0] + g[0] * this.curvature,
426
+ p[1] + g[1] * this.curvature
427
+ ], m = [
428
+ w[0] - u[0] * this.curvature,
429
+ w[1] - u[1] * this.curvature
430
+ ], E = `M ${p[0]} ${p[1]} C ${f[0]} ${f[1]}, ${m[0]} ${m[1]}, ${w[0]} ${w[1]}`, v = this.sourceArrow ? "" : `M 0 0 L ${p[0]} ${p[1]} `, C = this.targetArrow ? "" : ` M ${w[0]} ${w[1]} L ${s} ${o}`, S = `${v}${E}${C}`;
431
+ if (this.line.setAttribute("d", S), this.sourceArrow) {
432
+ const A = N(
433
+ g,
434
+ 0,
435
+ 0,
436
+ this.arrowLength,
437
+ this.arrowWidth
438
+ );
439
+ this.sourceArrow.setAttribute("d", A);
440
+ }
441
+ if (this.targetArrow) {
442
+ const A = N(
443
+ u,
444
+ s,
445
+ o,
446
+ -this.arrowLength,
447
+ this.arrowWidth
448
+ );
449
+ this.targetArrow.setAttribute("d", A);
450
+ }
387
451
  }
388
- static getArrowPath(t, e, s, o, a) {
389
- const h = [
390
- [0, 0],
391
- [o, a],
392
- [o, -a]
393
- ].map((l) => this.rotate(l, t, [0, 0])).map((l) => [l[0] + e, l[1] + s]), i = `M ${h[0][0]} ${h[0][1]}`, d = `L ${h[1][0]} ${h[1][1]}`, g = `L ${h[2][0]} ${h[2][1]}`;
394
- return `${i} ${d} ${g}`;
452
+ }
453
+ const V = (e, t) => {
454
+ const r = [];
455
+ if (e.length > 0 && r.push(`M ${e[0][0]} ${e[0][1]}`), e.length === 2 && r.push(`L ${e[1][0]} ${e[1][1]}`), e.length > 2) {
456
+ const s = e.length - 1;
457
+ let o = 0, n = 0, i = 0;
458
+ e.forEach((a, c) => {
459
+ let l = 0, d = 0, g = 0;
460
+ const u = c > 0, p = c < s, w = u && p;
461
+ if (u && (l = -o, d = -n, g = i), p) {
462
+ const A = e[c + 1];
463
+ o = A[0] - a[0], n = A[1] - a[1], i = Math.sqrt(o * o + n * n);
464
+ }
465
+ const m = Math.min((w ? t : 0) / i, c < s - 1 ? 0.5 : 1), E = w ? [a[0] + o * m, a[1] + n * m] : a, C = Math.min((w ? t : 0) / g, c > 1 ? 0.5 : 1), S = w ? [a[0] + l * C, a[1] + d * C] : a;
466
+ c > 0 && r.push(`L ${S[0]} ${S[1]}`), w && r.push(
467
+ `C ${a[0]} ${a[1]} ${a[0]} ${a[1]} ${E[0]} ${E[1]}`
468
+ );
469
+ });
395
470
  }
396
- static getArrowOffsetPath(t, e, s, o, a) {
397
- const h = [
398
- [o, 0],
399
- [o + a, 0]
400
- ].map((i) => this.rotate(i, t, [0, 0])).map((i) => [i[0] + e, i[1] + s]);
401
- return `M ${h[0][0]} ${h[0][1]} L ${h[1][0]} ${h[1][1]}`;
471
+ return r.join(" ");
472
+ };
473
+ class I {
474
+ constructor(t, r, s, o, n, i, a, c) {
475
+ h(this, "svg");
476
+ h(this, "group");
477
+ h(this, "line");
478
+ h(this, "sourceArrow", null);
479
+ h(this, "targetArrow", null);
480
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, 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%", i && (this.sourceArrow = document.createElementNS(
481
+ "http://www.w3.org/2000/svg",
482
+ "path"
483
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
484
+ "http://www.w3.org/2000/svg",
485
+ "path"
486
+ ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
402
487
  }
403
- static createStraightPath(t) {
404
- return t.map((e, s) => `${s === 0 ? "M" : "L"} ${e[0]} ${e[1]}`).join(" ");
488
+ update(t, r, s, o, n, i) {
489
+ this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
490
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
491
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
492
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
493
+ s,
494
+ o
495
+ ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
496
+ s,
497
+ o
498
+ ]), v = V([p, m, E, w], this.roundness);
499
+ if (this.line.setAttribute("d", v), this.sourceArrow) {
500
+ const C = N(
501
+ g,
502
+ 0,
503
+ 0,
504
+ this.arrowLength,
505
+ this.arrowWidth
506
+ );
507
+ this.sourceArrow.setAttribute("d", C);
508
+ }
509
+ if (this.targetArrow) {
510
+ const C = N(
511
+ u,
512
+ s,
513
+ o,
514
+ -this.arrowLength,
515
+ this.arrowWidth
516
+ );
517
+ this.targetArrow.setAttribute("d", C);
518
+ }
405
519
  }
406
520
  }
407
- class G {
408
- constructor(t, e, s, o, a, c, h) {
409
- n(this, "svg");
410
- n(this, "group");
411
- n(this, "line");
412
- n(this, "sourceArrow", null);
413
- n(this, "targetArrow", null);
414
- this.color = t, this.width = e, this.curvature = s, this.arrowLength = o, this.arrowWidth = 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%", c && (this.sourceArrow = document.createElementNS(
521
+ class tt {
522
+ constructor(t, r, s, o, n, i, a, c) {
523
+ h(this, "svg");
524
+ h(this, "group");
525
+ h(this, "line");
526
+ h(this, "sourceArrow", null);
527
+ h(this, "targetArrow", null);
528
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, 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%", i && (this.sourceArrow = document.createElementNS(
415
529
  "http://www.w3.org/2000/svg",
416
530
  "path"
417
- ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
531
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
418
532
  "http://www.w3.org/2000/svg",
419
533
  "path"
420
534
  ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
421
535
  }
422
- update(t, e, s, o, a, c) {
536
+ update(t, r, s, o, n, i) {
423
537
  this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
424
- const h = p.getPortCenter(a), i = p.getPortCenter(c), d = h[0] <= i[0] ? 1 : -1, g = h[1] <= i[1] ? 1 : -1;
425
- this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${d}, ${g})`;
426
- const l = p.getDirectionVector(a.direction, d, g), u = p.getDirectionVector(c.direction, d, g), v = p.rotate([this.arrowLength, 0], l, [0, 0]), m = p.rotate([s - this.arrowLength, o], u, [
538
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
539
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
540
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
427
541
  s,
428
542
  o
429
- ]), w = [
430
- v[0] + l[0] * this.curvature,
431
- v[1] + l[1] * this.curvature
432
- ], f = [
433
- m[0] - u[0] * this.curvature,
434
- m[1] - u[1] * this.curvature
435
- ], C = `M ${v[0]} ${v[1]} C ${w[0]} ${w[1]}, ${f[0]} ${f[1]}, ${m[0]} ${m[1]}`, E = this.sourceArrow ? "" : `M 0 0 L ${v[0]} ${v[1]} `, b = this.targetArrow ? "" : ` M ${m[0]} ${m[1]} L ${s} ${o}`, $ = `${E}${C}${b}`;
436
- if (this.line.setAttribute("d", $), this.sourceArrow) {
437
- const y = p.getArrowPath(
438
- l,
543
+ ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
544
+ s,
545
+ o
546
+ ]), v = Math.max((m[0] + E[0]) / 2, f), C = o / 2, S = [l > 0 ? v : -f, m[1]], A = [S[0], C], P = [l > 0 ? s - v : s + f, E[1]], M = [P[0], C], x = V(
547
+ [p, m, S, A, M, P, E, w],
548
+ this.roundness
549
+ );
550
+ if (this.line.setAttribute("d", x), this.sourceArrow) {
551
+ const L = N(
552
+ g,
439
553
  0,
440
554
  0,
441
555
  this.arrowLength,
442
556
  this.arrowWidth
443
557
  );
444
- this.sourceArrow.setAttribute("d", y);
558
+ this.sourceArrow.setAttribute("d", L);
445
559
  }
446
560
  if (this.targetArrow) {
447
- const y = p.getArrowPath(
561
+ const L = N(
448
562
  u,
449
563
  s,
450
564
  o,
451
565
  -this.arrowLength,
452
566
  this.arrowWidth
453
567
  );
454
- this.targetArrow.setAttribute("d", y);
568
+ this.targetArrow.setAttribute("d", L);
455
569
  }
456
570
  }
457
571
  }
458
- class X {
459
- constructor(t, e, s, o, a, c, h, i) {
460
- n(this, "svg");
461
- n(this, "group");
462
- n(this, "line");
463
- n(this, "sourceArrow", null);
464
- n(this, "targetArrow", null);
465
- n(this, "roundness");
466
- this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = a, this.roundness = Math.min(this.arrowOffset, i), 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%", c && (this.sourceArrow = document.createElementNS(
572
+ class et {
573
+ constructor(t, r, s, o, n, i, a, c) {
574
+ h(this, "svg");
575
+ h(this, "group");
576
+ h(this, "line");
577
+ h(this, "sourceArrow", null);
578
+ h(this, "targetArrow", null);
579
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, 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%", i && (this.sourceArrow = document.createElementNS(
467
580
  "http://www.w3.org/2000/svg",
468
581
  "path"
469
- ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), h && (this.targetArrow = document.createElementNS(
582
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
470
583
  "http://www.w3.org/2000/svg",
471
584
  "path"
472
585
  ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
473
586
  }
474
- update(t, e, s, o, a, c) {
587
+ update(t, r, s, o, n, i) {
475
588
  this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
476
- const h = p.getPortCenter(a), i = p.getPortCenter(c), d = h[0] <= i[0] ? 1 : -1, g = h[1] <= i[1] ? 1 : -1;
477
- this.svg.style.transform = `translate(${t}px, ${e}px)`, this.group.style.transform = `scale(${d}, ${g})`;
478
- const l = p.getDirectionVector(a.direction, d, g), u = p.getDirectionVector(c.direction, d, g), v = this.sourceArrow ? p.rotate([this.arrowLength, 0], l, [0, 0]) : [0, 0], m = this.targetArrow ? p.rotate([s - this.arrowLength, o], u, [
589
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
590
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
591
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
479
592
  s,
480
593
  o
481
- ]) : [s, o], w = this.arrowLength + this.arrowOffset, f = w - this.roundness, C = s - w * 2 * d, E = Math.sqrt(C * C + o * o) / 2, b = Math.min(this.roundness, E), $ = p.rotate([f, 0], l, [0, 0]), y = p.rotate([s - f, o], u, [
594
+ ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = y([s - f, o], u, [
482
595
  s,
483
596
  o
484
- ]), T = p.rotate([w, 0], l, [0, 0]), S = p.rotate([s - w, o], u, [
485
- s,
486
- o
487
- ]), N = (S[0] - T[0]) / 2, L = (S[1] - T[1]) / 2, A = b / E, O = [T[0] + N * A, T[1] + L * A], V = [S[0] - N * A, S[1] - L * A], k = [
488
- `M ${v[0]} ${v[1]}`,
489
- `L ${$[0]} ${$[1]}`,
490
- `C ${T[0]} ${T[1]} ${T[0]} ${T[1]} ${O[0]} ${O[1]}`,
491
- `L ${V[0]} ${V[1]}`,
492
- `C ${S[0]} ${S[1]} ${S[0]} ${S[1]} ${y[0]} ${y[1]}`,
493
- `L ${m[0]} ${m[1]}`
494
- ].join(" ");
495
- if (this.line.setAttribute("d", k), this.sourceArrow) {
496
- const P = p.getArrowPath(
497
- l,
597
+ ]), v = Math.max((m[1] + E[1]) / 2, f), C = s / 2, S = [m[0], d > 0 ? v : -f], A = [C, S[1]], P = [E[0], d > 0 ? o - v : o + f], M = [C, P[1]], x = V(
598
+ [p, m, S, A, M, P, E, w],
599
+ this.roundness
600
+ );
601
+ if (this.line.setAttribute("d", x), this.sourceArrow) {
602
+ const L = N(
603
+ g,
498
604
  0,
499
605
  0,
500
606
  this.arrowLength,
501
607
  this.arrowWidth
502
608
  );
503
- this.sourceArrow.setAttribute("d", P);
609
+ this.sourceArrow.setAttribute("d", L);
504
610
  }
505
611
  if (this.targetArrow) {
506
- const P = p.getArrowPath(
612
+ const L = N(
507
613
  u,
508
614
  s,
509
615
  o,
510
616
  -this.arrowLength,
511
617
  this.arrowWidth
512
618
  );
513
- this.targetArrow.setAttribute("d", P);
619
+ this.targetArrow.setAttribute("d", L);
514
620
  }
515
621
  }
516
622
  }
517
- class Z {
518
- constructor(t, e, s, o, a, c, h) {
519
- n(this, "svg");
520
- n(this, "group");
521
- n(this, "line");
522
- n(this, "arrow", null);
523
- this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.radius = c, this.smallRadius = h, 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%", a && (this.arrow = document.createElementNS(
623
+ class rt {
624
+ constructor(t, r, s, o, n, i, a) {
625
+ h(this, "svg");
626
+ h(this, "group");
627
+ h(this, "line");
628
+ h(this, "arrow", null);
629
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.radius = i, this.smallRadius = 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%", n && (this.arrow = document.createElementNS(
524
630
  "http://www.w3.org/2000/svg",
525
631
  "path"
526
632
  ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
527
633
  }
528
- update(t, e, s, o, a) {
529
- this.svg.style.transform = `translate(${t}px, ${e}px)`;
530
- const c = p.getDirectionVector(a.direction, 1, 1), h = this.smallRadius, i = this.radius, d = Math.sqrt(h * h + i * i), g = h + i, l = this.arrowLength + d * (1 - i / g), u = h * i / g, m = [
634
+ update(t, r, s, o, n) {
635
+ this.svg.style.transform = `translate(${t}px, ${r}px)`;
636
+ const i = b(n.direction, 1, 1), a = this.smallRadius, c = this.radius, l = Math.sqrt(a * a + c * c), d = a + c, g = this.arrowLength + l * (1 - c / d), u = a * c / d, w = [
531
637
  [this.arrowLength, 0],
532
- [l, u],
533
- [l, -u]
534
- ].map((E) => p.rotate(E, c, [0, 0])), w = [
535
- `M ${m[0][0]} ${m[0][1]}`,
536
- `A ${h} ${h} 0 0 1 ${m[1][0]} ${m[1][1]}`,
537
- `A ${i} ${i} 0 1 0 ${m[2][0]} ${m[2][1]}`,
538
- `A ${h} ${h} 0 0 1 ${m[0][0]} ${m[0][1]}`
539
- ].join(" "), f = `M 0 0 L ${m[0][0]} ${m[0][1]} `, C = `${this.arrow !== null ? "" : f}${w}`;
540
- if (this.line.setAttribute("d", C), this.arrow) {
541
- const E = p.getArrowPath(
542
- c,
638
+ [g, u],
639
+ [g, -u]
640
+ ].map((v) => y(v, i, [0, 0])), f = [
641
+ `M ${w[0][0]} ${w[0][1]}`,
642
+ `A ${a} ${a} 0 0 1 ${w[1][0]} ${w[1][1]}`,
643
+ `A ${c} ${c} 0 1 0 ${w[2][0]} ${w[2][1]}`,
644
+ `A ${a} ${a} 0 0 1 ${w[0][0]} ${w[0][1]}`
645
+ ].join(" "), m = `M 0 0 L ${w[0][0]} ${w[0][1]} `, E = `${this.arrow !== null ? "" : m}${f}`;
646
+ if (this.line.setAttribute("d", E), this.arrow) {
647
+ const v = N(
648
+ i,
543
649
  0,
544
650
  0,
545
651
  this.arrowLength,
546
652
  this.arrowWidth
547
653
  );
548
- this.arrow.setAttribute("d", E);
654
+ this.arrow.setAttribute("d", v);
549
655
  }
550
656
  }
551
657
  }
552
- class U {
553
- constructor(t, e, s, o, a, c, h, i) {
554
- n(this, "svg");
555
- n(this, "group");
556
- n(this, "line");
557
- n(this, "arrow", null);
558
- n(this, "roundness");
559
- n(this, "points");
560
- this.color = t, this.width = e, this.arrowLength = s, this.arrowWidth = o, this.side = c, this.minPortOffset = h, this.roundness = Math.min(i, this.minPortOffset, this.side / 2), 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%", a && (this.arrow = document.createElementNS(
658
+ class W {
659
+ constructor(t, r, s, o, n, i, a, c) {
660
+ h(this, "svg");
661
+ h(this, "group");
662
+ h(this, "line");
663
+ h(this, "arrow", null);
664
+ h(this, "roundness");
665
+ h(this, "linePoints");
666
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.side = i, this.minPortOffset = a, this.roundness = Math.min(c, this.minPortOffset, this.side / 2), 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%", n && (this.arrow = document.createElementNS(
561
667
  "http://www.w3.org/2000/svg",
562
668
  "path"
563
669
  ), this.arrow.setAttribute("fill", this.color), this.group.appendChild(this.arrow)), this.svg.style.overflow = "visible", this.svg.style.width = "0px", this.svg.style.height = "0px";
564
- const d = this.minPortOffset, g = this.side, l = this.arrowLength + d, u = this.roundness, v = l - u, m = l + u, w = g - u, f = l + 2 * g, C = f - u;
565
- console.log(u), this.points = [
670
+ const l = this.minPortOffset, d = this.side, g = this.arrowLength + l, u = this.roundness, p = g + 2 * d;
671
+ console.log(u), this.linePoints = [
566
672
  [this.arrowLength, 0],
567
- [v, 0],
568
- [l, u],
569
- [l, w],
570
- [m, g],
571
- [C, g],
572
- [f, w],
573
- [f, -w],
574
- [C, -g],
575
- [m, -g],
576
- [l, -w],
577
- [l, -u]
673
+ [g, 0],
674
+ [g, this.side],
675
+ [p, this.side],
676
+ [p, -this.side],
677
+ [g, -this.side],
678
+ [g, 0],
679
+ [this.arrowLength, 0]
578
680
  ];
579
681
  }
580
- update(t, e, s, o, a) {
581
- this.svg.style.transform = `translate(${t}px, ${e}px)`;
582
- const c = p.getDirectionVector(a.direction, 1, 1), h = this.roundness, i = this.points.map((u) => p.rotate(u, c, [0, 0])), d = [
583
- `M ${i[0][0]} ${i[0][1]}`,
584
- `L ${i[1][0]} ${i[1][1]}`,
585
- `A ${h} ${h} 0 0 1 ${i[2][0]} ${i[2][1]}`,
586
- `L ${i[3][0]} ${i[3][1]}`,
587
- `A ${h} ${h} 0 0 0 ${i[4][0]} ${i[4][1]}`,
588
- `L ${i[5][0]} ${i[5][1]}`,
589
- `A ${h} ${h} 0 0 0 ${i[6][0]} ${i[6][1]}`,
590
- `L ${i[7][0]} ${i[7][1]}`,
591
- `A ${h} ${h} 0 0 0 ${i[8][0]} ${i[8][1]}`,
592
- `L ${i[9][0]} ${i[9][1]}`,
593
- `A ${h} ${h} 0 0 0 ${i[10][0]} ${i[10][1]}`,
594
- `L ${i[11][0]} ${i[11][1]}`,
595
- `A ${h} ${h} 0 0 1 ${i[1][0]} ${i[1][1]}`
596
- ].join(" "), g = `M 0 0 L ${i[0][0]} ${i[0][1]} `, l = `${this.arrow ? "" : g}${d}`;
682
+ update(t, r, s, o, n) {
683
+ this.svg.style.transform = `translate(${t}px, ${r}px)`;
684
+ const i = b(n.direction, 1, 1), a = this.linePoints.map(
685
+ (d) => y(d, i, [0, 0])
686
+ ), c = `M 0 0 L ${a[0][0]} ${a[0][1]} `, l = `${this.arrow ? "" : c}${V(a, this.roundness)}`;
597
687
  if (this.line.setAttribute("d", l), this.arrow) {
598
- const u = p.getArrowPath(
599
- c,
688
+ const d = N(
689
+ i,
690
+ 0,
691
+ 0,
692
+ this.arrowLength,
693
+ this.arrowWidth
694
+ );
695
+ this.arrow.setAttribute("d", d);
696
+ }
697
+ }
698
+ }
699
+ class k {
700
+ constructor(t, r, s, o, n, i, a, c, l, d) {
701
+ h(this, "svg");
702
+ h(this, "group");
703
+ h(this, "line");
704
+ h(this, "sourceArrow", null);
705
+ h(this, "targetArrow", null);
706
+ h(this, "detourX");
707
+ h(this, "detourY");
708
+ this.color = t, this.width = r, this.arrowLength = s, this.arrowWidth = o, this.arrowOffset = n, this.roundness = c, this.detourX = Math.cos(d) * l, this.detourY = Math.sin(d) * l, 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%", i && (this.sourceArrow = document.createElementNS(
709
+ "http://www.w3.org/2000/svg",
710
+ "path"
711
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
712
+ "http://www.w3.org/2000/svg",
713
+ "path"
714
+ ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
715
+ }
716
+ update(t, r, s, o, n, i) {
717
+ this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
718
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
719
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
720
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
721
+ s,
722
+ o
723
+ ]) : [s, o], f = this.arrowLength + this.arrowOffset, m = y([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = y([s - f, o], u, [
724
+ s,
725
+ o
726
+ ]), C = [v[0] + this.detourX, v[1] + this.detourY], S = V(
727
+ [p, m, E, C, v, w],
728
+ this.roundness
729
+ );
730
+ if (this.line.setAttribute("d", S), this.sourceArrow) {
731
+ const A = N(
732
+ g,
733
+ 0,
734
+ 0,
735
+ this.arrowLength,
736
+ this.arrowWidth
737
+ );
738
+ this.sourceArrow.setAttribute("d", A);
739
+ }
740
+ if (this.targetArrow) {
741
+ const A = N(
742
+ u,
743
+ s,
744
+ o,
745
+ -this.arrowLength,
746
+ this.arrowWidth
747
+ );
748
+ this.targetArrow.setAttribute("d", A);
749
+ }
750
+ }
751
+ }
752
+ var $ = /* @__PURE__ */ ((e) => (e.Regular = "regular", e.PortCycle = "port-cycle", e.NodeCycle = "node-cycle", e))($ || {});
753
+ class st {
754
+ constructor(t, r, s, o, n, i, a, c, l) {
755
+ h(this, "svg");
756
+ h(this, "group");
757
+ h(this, "line");
758
+ h(this, "sourceArrow", null);
759
+ h(this, "targetArrow", null);
760
+ h(this, "detourX");
761
+ h(this, "detourY");
762
+ this.color = t, this.width = r, this.curvature = s, this.arrowLength = o, this.arrowWidth = n, this.detourX = Math.cos(l) * c, this.detourY = Math.sin(l) * c, 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%", i && (this.sourceArrow = document.createElementNS(
763
+ "http://www.w3.org/2000/svg",
764
+ "path"
765
+ ), this.sourceArrow.setAttribute("fill", this.color), this.group.appendChild(this.sourceArrow)), a && (this.targetArrow = document.createElementNS(
766
+ "http://www.w3.org/2000/svg",
767
+ "path"
768
+ ), this.targetArrow.setAttribute("fill", this.color), this.group.appendChild(this.targetArrow)), this.svg.style.overflow = "visible";
769
+ }
770
+ update(t, r, s, o, n, i) {
771
+ this.svg.style.width = `${s}px`, this.svg.style.height = `${o}px`;
772
+ const a = T(n), c = T(i), l = a[0] <= c[0] ? 1 : -1, d = a[1] <= c[1] ? 1 : -1;
773
+ this.svg.style.transform = `translate(${t}px, ${r}px)`, this.group.style.transform = `scale(${l}, ${d})`;
774
+ const g = b(n.direction, l, d), u = b(i.direction, l, d), p = this.sourceArrow ? y([this.arrowLength, 0], g, [0, 0]) : [0, 0], w = this.targetArrow ? y([s - this.arrowLength, o], u, [
775
+ s,
776
+ o
777
+ ]) : [s, o], f = this.arrowLength, m = y([f, 0], g, [0, 0]), E = [m[0] + this.detourX, m[1] + this.detourY], v = y([s - f, o], u, [
778
+ s,
779
+ o
780
+ ]), C = [v[0] + this.detourX, v[1] + this.detourY], S = [(E[0] + C[0]) / 2, (E[1] + C[1]) / 2], A = [
781
+ m[0] - this.curvature * Math.cos(n.direction),
782
+ m[1] - this.curvature * Math.sin(n.direction)
783
+ ], P = [
784
+ v[0] + this.curvature * Math.cos(i.direction),
785
+ v[1] + this.curvature * Math.sin(i.direction)
786
+ ], M = [m[0] + this.detourX, m[1] + this.detourY], x = [v[0] + this.detourX, v[1] + this.detourY], L = [
787
+ `M ${p[0]} ${p[1]}`,
788
+ `L ${m[0]} ${m[1]}`,
789
+ `C ${A[0]} ${A[1]} ${M[0]} ${M[1]} ${S[0]} ${S[1]}`,
790
+ `C ${x[0]} ${x[1]} ${P[0]} ${P[1]} ${v[0]} ${v[1]}`,
791
+ `L ${w[0]} ${w[1]}`
792
+ ].join(" ");
793
+ if (this.line.setAttribute("d", L), this.sourceArrow) {
794
+ const F = N(
795
+ g,
600
796
  0,
601
797
  0,
602
798
  this.arrowLength,
603
799
  this.arrowWidth
604
800
  );
605
- this.arrow.setAttribute("d", u);
801
+ this.sourceArrow.setAttribute("d", F);
802
+ }
803
+ if (this.targetArrow) {
804
+ const F = N(
805
+ u,
806
+ s,
807
+ o,
808
+ -this.arrowLength,
809
+ this.arrowWidth
810
+ );
811
+ this.targetArrow.setAttribute("d", F);
606
812
  }
607
813
  }
608
814
  }
609
- var M = /* @__PURE__ */ ((r) => (r.Regular = "regular", r.Cycle = "cycle", r))(M || {});
610
- const H = (r) => (t) => t === "cycle" ? new Z(
611
- r.color,
612
- r.width,
613
- r.arrowLength,
614
- r.arrowWidth,
615
- r.hasSourceArrow || r.hasTargetArrow,
616
- r.cycleRadius,
617
- r.smallCycleRadius
618
- ) : new G(
619
- r.color,
620
- r.width,
621
- r.curvature,
622
- r.arrowLength,
623
- r.arrowWidth,
624
- r.hasSourceArrow,
625
- r.hasTargetArrow
626
- ), q = (r) => (t) => t === M.Cycle && t === "cycle" ? new U(
627
- r.color,
628
- r.width,
629
- r.arrowLength,
630
- r.arrowWidth,
631
- r.hasSourceArrow || r.hasTargetArrow,
632
- r.cycleSquareSide,
633
- r.arrowOffset,
634
- r.roundness
635
- ) : new X(
636
- r.color,
637
- r.width,
638
- r.arrowLength,
639
- r.arrowWidth,
640
- r.arrowOffset,
641
- r.hasSourceArrow,
642
- r.hasTargetArrow,
643
- r.roundness
815
+ const ot = (e) => (t) => t === $.PortCycle ? new rt(
816
+ e.color,
817
+ e.width,
818
+ e.arrowLength,
819
+ e.arrowWidth,
820
+ e.hasSourceArrow || e.hasTargetArrow,
821
+ e.cycleRadius,
822
+ e.smallCycleRadius
823
+ ) : t === $.NodeCycle ? new st(
824
+ e.color,
825
+ e.width,
826
+ e.curvature,
827
+ e.arrowLength,
828
+ e.arrowWidth,
829
+ e.hasSourceArrow,
830
+ e.hasTargetArrow,
831
+ e.detourDistance,
832
+ e.detourDirection
833
+ ) : new q(
834
+ e.color,
835
+ e.width,
836
+ e.curvature,
837
+ e.arrowLength,
838
+ e.arrowWidth,
839
+ e.hasSourceArrow,
840
+ e.hasTargetArrow
841
+ ), it = (e) => (t) => t === $.PortCycle ? new W(
842
+ e.color,
843
+ e.width,
844
+ e.arrowLength,
845
+ e.arrowWidth,
846
+ e.hasSourceArrow || e.hasTargetArrow,
847
+ e.cycleSquareSide,
848
+ e.arrowOffset,
849
+ e.roundness
850
+ ) : t === $.NodeCycle ? new k(
851
+ e.color,
852
+ e.width,
853
+ e.arrowLength,
854
+ e.arrowWidth,
855
+ e.arrowOffset,
856
+ e.hasSourceArrow,
857
+ e.hasTargetArrow,
858
+ e.roundness,
859
+ e.detourDistance,
860
+ e.detourDirection
861
+ ) : new I(
862
+ e.color,
863
+ e.width,
864
+ e.arrowLength,
865
+ e.arrowWidth,
866
+ e.arrowOffset,
867
+ e.hasSourceArrow,
868
+ e.hasTargetArrow,
869
+ e.roundness
870
+ ), nt = (e) => (t) => t === $.PortCycle ? new W(
871
+ e.color,
872
+ e.width,
873
+ e.arrowLength,
874
+ e.arrowWidth,
875
+ e.hasSourceArrow || e.hasTargetArrow,
876
+ e.cycleSquareSide,
877
+ e.arrowOffset,
878
+ e.roundness
879
+ ) : t === $.NodeCycle ? new k(
880
+ e.color,
881
+ e.width,
882
+ e.arrowLength,
883
+ e.arrowWidth,
884
+ e.arrowOffset,
885
+ e.hasSourceArrow,
886
+ e.hasTargetArrow,
887
+ e.roundness,
888
+ e.detourDistance,
889
+ e.detourDirection
890
+ ) : new tt(
891
+ e.color,
892
+ e.width,
893
+ e.arrowLength,
894
+ e.arrowWidth,
895
+ e.arrowOffset,
896
+ e.hasSourceArrow,
897
+ e.hasTargetArrow,
898
+ e.roundness
899
+ ), ht = (e) => (t) => t === $.PortCycle ? new W(
900
+ e.color,
901
+ e.width,
902
+ e.arrowLength,
903
+ e.arrowWidth,
904
+ e.hasSourceArrow || e.hasTargetArrow,
905
+ e.cycleSquareSide,
906
+ e.arrowOffset,
907
+ e.roundness
908
+ ) : t === $.NodeCycle ? new k(
909
+ e.color,
910
+ e.width,
911
+ e.arrowLength,
912
+ e.arrowWidth,
913
+ e.arrowOffset,
914
+ e.hasSourceArrow,
915
+ e.hasTargetArrow,
916
+ e.roundness,
917
+ e.detourDistance,
918
+ e.detourDirection
919
+ ) : new et(
920
+ e.color,
921
+ e.width,
922
+ e.arrowLength,
923
+ e.arrowWidth,
924
+ e.arrowOffset,
925
+ e.hasSourceArrow,
926
+ e.hasTargetArrow,
927
+ e.roundness
644
928
  );
645
- class x {
929
+ class O {
646
930
  constructor() {
647
- n(this, "counter", 0);
931
+ h(this, "counter", 0);
648
932
  }
649
- next() {
933
+ create() {
650
934
  const t = `${this.counter}`;
651
935
  return this.counter++, t;
652
936
  }
@@ -654,121 +938,156 @@ class x {
654
938
  this.counter = 0;
655
939
  }
656
940
  }
657
- class _ {
658
- constructor(t, e, s, o, a) {
659
- n(this, "nodeIdGenerator", new x());
660
- n(this, "portIdGenerator", new x());
661
- n(this, "edgeIdGenerator", new x());
662
- this.graphStore = t, this.htmlController = e, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = a;
941
+ class at {
942
+ constructor() {
943
+ h(this, "priority", 0);
944
+ }
945
+ create() {
946
+ const t = this.priority;
947
+ return this.priority++, t;
948
+ }
949
+ push(t) {
950
+ this.priority = Math.max(this.priority, t);
951
+ }
952
+ reset() {
953
+ this.priority = 0;
954
+ }
955
+ }
956
+ class ct {
957
+ constructor(t, r, s, o, n, i) {
958
+ h(this, "nodeIdGenerator", new O());
959
+ h(this, "portIdGenerator", new O());
960
+ h(this, "edgeIdGenerator", new O());
961
+ h(this, "priorityGenerator", new at());
962
+ this.graphStore = t, this.htmlController = r, this.viewportTransformer = s, this.nodesCenterFn = o, this.portsCenterFn = n, this.portsDirection = i;
663
963
  }
664
964
  moveNodeOnTop(t) {
665
- if (!this.graphStore.hasNode(t))
965
+ const r = this.graphStore.getNode(t);
966
+ if (r === void 0)
666
967
  throw new Error("failed to move on top nonexisting node");
667
- this.htmlController.moveNodeOnTop(t);
968
+ const s = this.priorityGenerator.create(), o = this.priorityGenerator.create();
969
+ r.priority = o, this.htmlController.updateNodePriority(t), this.graphStore.getNodeAdjacentEdges(t).forEach((i) => {
970
+ const a = this.graphStore.getEdge(i);
971
+ a.priority = s, this.htmlController.updateEdgePriority(i);
972
+ });
668
973
  }
669
- addNode(t, e, s, o, a, c) {
974
+ addNode(t, r, s, o, n, i, a) {
670
975
  if (t === void 0)
671
976
  do
672
- t = this.nodeIdGenerator.next();
673
- while (this.graphStore.hasNode(t));
674
- if (this.graphStore.hasNode(t))
977
+ t = this.nodeIdGenerator.create();
978
+ while (this.graphStore.getNode(t) !== void 0);
979
+ if (this.graphStore.getNode(t) !== void 0)
675
980
  throw new Error("failed to add node with existing id");
676
- this.graphStore.addNode(
981
+ a !== void 0 && this.priorityGenerator.push(a), this.graphStore.addNode(
677
982
  t,
678
- e,
983
+ r,
679
984
  s,
680
985
  o,
681
- c ?? this.nodesCenterFn
682
- ), this.htmlController.attachNode(t), a !== void 0 && Object.entries(a).forEach(([h, i]) => {
683
- i instanceof HTMLElement ? this.markPort(h, i, t, this.portsCenterFn, null) : this.markPort(
684
- h,
685
- i.element,
986
+ i ?? this.nodesCenterFn,
987
+ a ?? this.priorityGenerator.create()
988
+ ), this.htmlController.attachNode(t), n !== void 0 && n.forEach((c, l) => {
989
+ c instanceof HTMLElement ? this.markPort(
990
+ l,
991
+ c,
686
992
  t,
687
- i.centerFn ?? this.portsCenterFn,
688
- i.direction ?? null
993
+ this.portsCenterFn,
994
+ this.portsDirection
995
+ ) : this.markPort(
996
+ l,
997
+ c.element,
998
+ t,
999
+ c.centerFn ?? this.portsCenterFn,
1000
+ c.direction ?? this.portsDirection
689
1001
  );
690
1002
  });
691
1003
  }
692
- markPort(t, e, s, o, a) {
1004
+ updateNode(t, r, s, o, n) {
1005
+ const i = this.graphStore.getNode(t);
1006
+ if (i === void 0)
1007
+ throw new Error("failed to update nonexisting node");
1008
+ i.x = r ?? i.x, i.y = s ?? i.y, i.centerFn = n ?? i.centerFn, this.htmlController.updateNodeCoordinates(t), o !== void 0 && (i.priority = o, this.htmlController.updateNodePriority(t));
1009
+ }
1010
+ markPort(t, r, s, o, n) {
693
1011
  if (t === void 0)
694
1012
  do
695
- t = this.portIdGenerator.next();
696
- while (this.graphStore.hasPort(t));
697
- if (!this.graphStore.hasNode(s))
1013
+ t = this.portIdGenerator.create();
1014
+ while (this.graphStore.getPort(t) !== void 0);
1015
+ if (this.graphStore.getNode(s) === void 0)
698
1016
  throw new Error("failed to set port on nonexisting node");
699
- if (this.graphStore.hasPort(t))
1017
+ if (this.graphStore.getPort(t) !== void 0)
700
1018
  throw new Error("failed to add port with existing id");
701
1019
  this.graphStore.addPort(
702
1020
  t,
703
- e,
1021
+ r,
704
1022
  s,
705
1023
  o ?? this.portsCenterFn,
706
- a ?? null
1024
+ n ?? 0
707
1025
  );
708
1026
  }
709
- updatePortEdges(t) {
710
- if (!this.graphStore.hasPort(t))
1027
+ updatePort(t, r) {
1028
+ const s = this.graphStore.getPort(t);
1029
+ if (s === void 0)
711
1030
  throw new Error("failed to unset nonexisting port");
712
- this.htmlController.updatePortEdges(t);
1031
+ s.direction = (r == null ? void 0 : r.direction) ?? s.direction, s.centerFn = (r == null ? void 0 : r.centerFn) ?? s.centerFn, this.htmlController.updatePortEdges(t);
713
1032
  }
714
1033
  unmarkPort(t) {
715
- if (!this.graphStore.hasPort(t))
1034
+ if (this.graphStore.getPort(t) === void 0)
716
1035
  throw new Error("failed to unset nonexisting port");
717
- this.graphStore.getPortAdjacentEdges(t).forEach((e) => {
718
- this.removeEdge(e);
1036
+ this.graphStore.getPortAdjacentEdges(t).forEach((r) => {
1037
+ this.removeEdge(r);
719
1038
  }), this.graphStore.removePort(t);
720
1039
  }
721
- addEdge(t, e, s, o) {
1040
+ addEdge(t, r, s, o, n) {
722
1041
  if (t === void 0)
723
1042
  do
724
- t = this.edgeIdGenerator.next();
725
- while (this.graphStore.hasEdge(t));
726
- if (!this.graphStore.hasPort(e))
1043
+ t = this.edgeIdGenerator.create();
1044
+ while (this.graphStore.getEdge(t) !== void 0);
1045
+ if (this.graphStore.getPort(r) === void 0)
727
1046
  throw new Error("failed to add edge from nonexisting port");
728
- if (!this.graphStore.hasPort(s))
1047
+ if (this.graphStore.getPort(s) === void 0)
729
1048
  throw new Error("failed to add edge to nonexisting port");
730
- let a = M.Regular;
731
- e === s && (a = M.Cycle), this.graphStore.addEdge(
1049
+ if (this.graphStore.getEdge(t) !== void 0)
1050
+ throw new Error("failed to add edge with existing id");
1051
+ let i = $.Regular;
1052
+ const a = this.graphStore.getPortNode(r), c = this.graphStore.getPortNode(s);
1053
+ r === s ? i = $.PortCycle : a === c && (i = $.NodeCycle), n !== void 0 && this.priorityGenerator.push(n), this.graphStore.addEdge(
732
1054
  t,
733
- e,
1055
+ r,
734
1056
  s,
735
- o(a)
1057
+ o(i),
1058
+ n ?? this.priorityGenerator.create()
736
1059
  ), this.htmlController.attachEdge(t);
737
1060
  }
1061
+ updateEdge(t, r) {
1062
+ const s = this.graphStore.getEdge(t);
1063
+ if (s === void 0)
1064
+ throw new Error("failed to update nonexisting edge");
1065
+ r.controller !== void 0 && (this.htmlController.detachEdge(t), s.controller = r.controller, this.htmlController.attachEdge(t)), r.priority !== void 0 && (s.priority = r.priority, this.htmlController.updateEdgePriority(t));
1066
+ }
738
1067
  removeEdge(t) {
739
- if (!this.graphStore.hasEdge(t))
1068
+ if (this.graphStore.getEdge(t) === void 0)
740
1069
  throw new Error("failed to remove nonexisting edge");
741
1070
  this.htmlController.detachEdge(t), this.graphStore.removeEdge(t);
742
1071
  }
743
1072
  removeNode(t) {
744
- if (!this.graphStore.hasNode(t))
1073
+ if (this.graphStore.getNode(t) === void 0)
745
1074
  throw new Error("failed to remove nonexisting node");
746
1075
  this.htmlController.detachNode(t), this.graphStore.removeNode(t);
747
1076
  }
748
- patchViewportState(t, e, s) {
749
- this.viewportTransformer.patchState(t, e, s), this.htmlController.applyTransform();
1077
+ patchViewportState(t, r, s) {
1078
+ this.viewportTransformer.patchState(t, r, s), this.htmlController.applyTransform();
750
1079
  }
751
1080
  moveToNodes(t) {
752
1081
  if (t.length === 0)
753
1082
  return;
754
- const e = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
755
- if (e.length < t.length)
1083
+ const r = t.map((u) => this.graphStore.getNode(u)).filter((u) => u !== void 0);
1084
+ if (r.length < t.length)
756
1085
  throw new Error("failed to move to nonexisting node");
757
- const [s, o] = e.reduce(
758
- (u, v) => [u[0] + v.x, u[1] + v.y],
1086
+ const [s, o] = r.reduce(
1087
+ (u, p) => [u[0] + p.x, u[1] + p.y],
759
1088
  [0, 0]
760
- ), a = s / e.length, c = o / e.length, [h, i] = this.htmlController.getViewportDimensions(), d = this.viewportTransformer.getAbsScale(), g = a - d * h / 2, l = c - d * i / 2;
761
- this.patchViewportState(null, g, l);
762
- }
763
- updateNodeCoordinates(t, e, s) {
764
- if (!this.graphStore.hasNode(t))
765
- throw new Error("failed to update coordinates of nonexisting node");
766
- this.graphStore.updateNodeCoords(t, e, s), this.htmlController.updateNodeCoordinates(t);
767
- }
768
- updateEdgeController(t, e) {
769
- if (!this.graphStore.hasEdge(t))
770
- throw new Error("failed to update nonexisting edge");
771
- this.htmlController.detachEdge(t), this.graphStore.updateEdgeController(t, e), this.htmlController.attachEdge(t);
1089
+ ), n = s / r.length, i = o / r.length, [a, c] = this.htmlController.getViewportDimensions(), l = this.viewportTransformer.getAbsScale(), d = n - l * a / 2, g = i - l * c / 2;
1090
+ this.patchViewportState(null, d, g);
772
1091
  }
773
1092
  attach(t) {
774
1093
  this.htmlController.attach(t);
@@ -777,145 +1096,180 @@ class _ {
777
1096
  this.htmlController.detach();
778
1097
  }
779
1098
  clear() {
780
- this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
1099
+ this.htmlController.clear(), this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset(), this.priorityGenerator.reset();
781
1100
  }
782
1101
  destroy() {
783
1102
  this.htmlController.destroy();
784
1103
  }
785
1104
  }
786
- class J {
787
- constructor(t, e, s, o) {
788
- n(this, "publicViewportTransformer");
789
- n(this, "canvasController");
790
- const a = new B(), c = new Y();
791
- this.publicViewportTransformer = new z(
792
- a
1105
+ class lt {
1106
+ constructor(t, r, s, o, n) {
1107
+ h(this, "publicViewportTransformer");
1108
+ h(this, "canvasController");
1109
+ const i = new K(), a = new Z();
1110
+ this.publicViewportTransformer = new Q(
1111
+ i
793
1112
  );
794
- const h = new W(
795
- c,
1113
+ const c = new J(
796
1114
  a,
1115
+ i,
797
1116
  this.publicViewportTransformer,
798
1117
  t,
799
- e
1118
+ r
800
1119
  );
801
- this.canvasController = new _(
802
- c,
803
- h,
1120
+ this.canvasController = new ct(
804
1121
  a,
1122
+ c,
1123
+ i,
805
1124
  s,
806
- o
1125
+ o,
1126
+ n
807
1127
  );
808
1128
  }
809
1129
  }
810
- const D = (r, t) => [
811
- r / 2,
1130
+ const R = (e, t) => [
1131
+ e / 2,
812
1132
  t / 2
813
- ], K = () => () => {
814
- }, Q = (r, t, e, s, o, a) => {
815
- r.clearRect(0, 0, r.canvas.width, r.canvas.height), r.fillStyle = a, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
816
- const c = t.getViewCoords(0, 0), h = t.getViewScale(), i = s * h;
817
- let d = 0, g = 0, l = i / 2;
1133
+ ], dt = () => () => {
1134
+ }, gt = (e, t, r, s, o, n) => {
1135
+ e.clearRect(0, 0, e.canvas.width, e.canvas.height), e.fillStyle = n, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
1136
+ const i = t.getViewCoords(0, 0), a = t.getViewScale(), c = s * a;
1137
+ let l = 0, d = 0, g = c / 2;
818
1138
  do
819
- l *= 2, d = r.canvas.width / l, g = r.canvas.height / l;
820
- while (d * g > 1e4);
821
- const u = c[0] - Math.floor(c[0] / l) * l, v = c[1] - Math.floor(c[1] / l) * l, m = o * h, w = 2 * Math.PI, f = u - l, C = v - l, E = r.canvas.width + u, b = r.canvas.height + v;
822
- r.fillStyle = e;
823
- for (let $ = f; $ <= E; $ += l)
824
- for (let y = C; y <= b; y += l)
825
- r.beginPath(), r.arc($, y, m, 0, w), r.closePath(), r.fill();
826
- }, I = (r, t, e, s) => (o, a) => {
827
- Q(
1139
+ g *= 2, l = e.canvas.width / g, d = e.canvas.height / g;
1140
+ while (l * d > 1e4);
1141
+ const u = i[0] - Math.floor(i[0] / g) * g, p = i[1] - Math.floor(i[1] / g) * g, w = o * a, f = 2 * Math.PI, m = u - g, E = p - g, v = e.canvas.width + u, C = e.canvas.height + p;
1142
+ e.fillStyle = r;
1143
+ for (let S = m; S <= v; S += g)
1144
+ for (let A = E; A <= C; A += g)
1145
+ e.beginPath(), e.arc(S, A, w, 0, f), e.closePath(), e.fill();
1146
+ }, ut = (e, t, r, s) => (o, n) => {
1147
+ gt(
828
1148
  o,
829
- a,
830
- r,
831
- t,
1149
+ n,
832
1150
  e,
1151
+ t,
1152
+ r,
833
1153
  s
834
1154
  );
835
- }, tt = (r, t) => {
836
- r.fillStyle = t, r.fillRect(0, 0, r.canvas.width, r.canvas.height);
837
- }, et = (r) => (t) => {
838
- tt(t, r);
839
- }, st = (r) => {
840
- switch (r == null ? void 0 : r.type) {
1155
+ }, wt = (e, t) => {
1156
+ e.fillStyle = t, e.fillRect(0, 0, e.canvas.width, e.canvas.height);
1157
+ }, mt = (e) => (t) => {
1158
+ wt(t, e);
1159
+ }, pt = (e) => {
1160
+ switch (e == null ? void 0 : e.type) {
841
1161
  case "custom":
842
- return r.drawingFn;
1162
+ return e.drawingFn;
843
1163
  case "dots":
844
- return I(
845
- r.dotColor ?? "#d8d8d8",
846
- r.dotGap ?? 25,
847
- r.dotRadius ?? 1.5,
848
- r.color ?? "#ffffff"
1164
+ return ut(
1165
+ e.dotColor ?? "#d8d8d8",
1166
+ e.dotGap ?? 25,
1167
+ e.dotRadius ?? 1.5,
1168
+ e.color ?? "#ffffff"
849
1169
  );
850
1170
  case "color":
851
- return et(r.color ?? "#ffffff");
1171
+ return mt(e.color ?? "#ffffff");
852
1172
  default:
853
- return K();
1173
+ return dt();
854
1174
  }
855
- }, F = (r) => {
856
- switch (r == null ? void 0 : r.type) {
1175
+ }, Y = (e) => {
1176
+ switch (e == null ? void 0 : e.type) {
857
1177
  case "custom":
858
- return r.controllerFactory;
1178
+ return e.controllerFactory;
859
1179
  case "straight":
860
- return q({
861
- color: r.color ?? "#5c5c5c",
862
- width: r.width ?? 1,
863
- arrowLength: r.arrowLength ?? 15,
864
- arrowWidth: r.arrowWidth ?? 4,
865
- arrowOffset: r.arrowOffset ?? 15,
866
- hasSourceArrow: r.hasSourceArrow ?? !1,
867
- hasTargetArrow: r.hasTargetArrow ?? !1,
868
- cycleSquareSide: r.cycleSquareSide ?? 30,
869
- roundness: r.roundness ?? 5
1180
+ return it({
1181
+ color: e.color ?? "#5c5c5c",
1182
+ width: e.width ?? 1,
1183
+ arrowLength: e.arrowLength ?? 15,
1184
+ arrowWidth: e.arrowWidth ?? 4,
1185
+ arrowOffset: e.arrowOffset ?? 15,
1186
+ hasSourceArrow: e.hasSourceArrow ?? !1,
1187
+ hasTargetArrow: e.hasTargetArrow ?? !1,
1188
+ cycleSquareSide: e.cycleSquareSide ?? 30,
1189
+ roundness: e.roundness ?? 10,
1190
+ detourDistance: e.detourDistance ?? 100,
1191
+ detourDirection: e.detourDirection ?? -Math.PI / 2
1192
+ });
1193
+ case "horizontal":
1194
+ return nt({
1195
+ color: e.color ?? "#5c5c5c",
1196
+ width: e.width ?? 1,
1197
+ arrowLength: e.arrowLength ?? 15,
1198
+ arrowWidth: e.arrowWidth ?? 4,
1199
+ arrowOffset: e.arrowOffset ?? 15,
1200
+ hasSourceArrow: e.hasSourceArrow ?? !1,
1201
+ hasTargetArrow: e.hasTargetArrow ?? !1,
1202
+ cycleSquareSide: e.cycleSquareSide ?? 30,
1203
+ roundness: e.roundness ?? 10,
1204
+ detourDistance: e.detourDistance ?? 100,
1205
+ detourDirection: e.detourDirection ?? -Math.PI / 2
1206
+ });
1207
+ case "vertical":
1208
+ return ht({
1209
+ color: e.color ?? "#5c5c5c",
1210
+ width: e.width ?? 1,
1211
+ arrowLength: e.arrowLength ?? 15,
1212
+ arrowWidth: e.arrowWidth ?? 4,
1213
+ arrowOffset: e.arrowOffset ?? 15,
1214
+ hasSourceArrow: e.hasSourceArrow ?? !1,
1215
+ hasTargetArrow: e.hasTargetArrow ?? !1,
1216
+ cycleSquareSide: e.cycleSquareSide ?? 30,
1217
+ roundness: e.roundness ?? 10,
1218
+ detourDistance: e.detourDistance ?? 100,
1219
+ detourDirection: e.detourDirection ?? -Math.PI / 2
870
1220
  });
871
1221
  default:
872
- return H({
873
- color: r.color ?? "#5c5c5c",
874
- width: r.width ?? 1,
875
- curvature: r.curvature ?? 90,
876
- arrowLength: r.arrowLength ?? 15,
877
- arrowWidth: r.arrowWidth ?? 4,
878
- hasSourceArrow: r.hasSourceArrow ?? !1,
879
- hasTargetArrow: r.hasTargetArrow ?? !1,
880
- cycleRadius: r.cycleRadius ?? 30,
881
- smallCycleRadius: r.smallCycleRadius ?? 15
1222
+ return ot({
1223
+ color: e.color ?? "#5c5c5c",
1224
+ width: e.width ?? 1,
1225
+ curvature: e.curvature ?? 90,
1226
+ arrowLength: e.arrowLength ?? 15,
1227
+ arrowWidth: e.arrowWidth ?? 4,
1228
+ hasSourceArrow: e.hasSourceArrow ?? !1,
1229
+ hasTargetArrow: e.hasTargetArrow ?? !1,
1230
+ cycleRadius: e.cycleRadius ?? 30,
1231
+ smallCycleRadius: e.smallCycleRadius ?? 15,
1232
+ detourDistance: e.detourDistance ?? 100,
1233
+ detourDirection: e.detourDirection ?? -Math.PI / 2
882
1234
  });
883
1235
  }
884
- }, rt = (r) => {
885
- var t, e, s;
1236
+ }, vt = (e) => {
1237
+ var t, r, s, o;
886
1238
  return {
887
1239
  background: {
888
- drawingFn: st(
889
- r.background ?? { type: "none" }
1240
+ drawingFn: pt(
1241
+ e.background ?? { type: "none" }
890
1242
  )
891
1243
  },
892
1244
  nodes: {
893
- centerFn: ((t = r.nodes) == null ? void 0 : t.centerFn) ?? D
1245
+ centerFn: ((t = e.nodes) == null ? void 0 : t.centerFn) ?? R
894
1246
  },
895
1247
  ports: {
896
- centerFn: ((e = r.ports) == null ? void 0 : e.centerFn) ?? D
1248
+ centerFn: ((r = e.ports) == null ? void 0 : r.centerFn) ?? R,
1249
+ direction: ((s = e.ports) == null ? void 0 : s.direction) ?? 0
897
1250
  },
898
1251
  edges: {
899
- controllerFactory: F(r.edges ?? {})
1252
+ controllerFactory: Y(e.edges ?? {})
900
1253
  },
901
1254
  layers: {
902
- mode: ((s = r.layers) == null ? void 0 : s.mode) ?? "edges-follow-node"
1255
+ mode: ((o = e.layers) == null ? void 0 : o.mode) ?? "edges-follow-node"
903
1256
  }
904
1257
  };
905
1258
  };
906
- class ot {
1259
+ class ft {
907
1260
  constructor(t) {
908
- n(this, "transformation");
909
- n(this, "di");
910
- n(this, "edgeControllerFactory");
1261
+ h(this, "transformation");
1262
+ h(this, "di");
1263
+ h(this, "edgeControllerFactory");
911
1264
  this.apiOptions = t;
912
- const e = rt(this.apiOptions ?? {});
913
- this.di = new J(
914
- e.layers.mode,
915
- e.background.drawingFn,
916
- e.nodes.centerFn,
917
- e.ports.centerFn
918
- ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = e.edges.controllerFactory;
1265
+ const r = vt(this.apiOptions ?? {});
1266
+ this.di = new lt(
1267
+ r.layers.mode,
1268
+ r.background.drawingFn,
1269
+ r.nodes.centerFn,
1270
+ r.ports.centerFn,
1271
+ r.ports.direction
1272
+ ), this.transformation = this.di.publicViewportTransformer, this.edgeControllerFactory = r.edges.controllerFactory;
919
1273
  }
920
1274
  addNode(t) {
921
1275
  return this.di.canvasController.addNode(
@@ -924,15 +1278,25 @@ class ot {
924
1278
  t.x,
925
1279
  t.y,
926
1280
  t.ports,
927
- t.centerFn
1281
+ t.centerFn,
1282
+ t.priority
928
1283
  ), this;
929
1284
  }
930
- moveNodeOnTop(t) {
931
- return this.di.canvasController.moveNodeOnTop(t), this;
1285
+ updateNode(t, r) {
1286
+ return this.di.canvasController.updateNode(
1287
+ t,
1288
+ r.x,
1289
+ r.y,
1290
+ r.priority,
1291
+ r.centerFn
1292
+ ), this;
932
1293
  }
933
1294
  removeNode(t) {
934
1295
  return this.di.canvasController.removeNode(t), this;
935
1296
  }
1297
+ moveNodeOnTop(t) {
1298
+ return this.di.canvasController.moveNodeOnTop(t), this;
1299
+ }
936
1300
  markPort(t) {
937
1301
  return this.di.canvasController.markPort(
938
1302
  t.id,
@@ -942,21 +1306,25 @@ class ot {
942
1306
  t.direction
943
1307
  ), this;
944
1308
  }
945
- updatePortEdges(t) {
946
- return this.di.canvasController.updatePortEdges(t), this;
1309
+ updatePort(t, r) {
1310
+ return this.di.canvasController.updatePort(t, r), this;
947
1311
  }
948
1312
  unmarkPort(t) {
949
1313
  return this.di.canvasController.unmarkPort(t), this;
950
1314
  }
951
1315
  addEdge(t) {
952
- const e = t.options !== void 0 ? F(t.options) : this.edgeControllerFactory;
1316
+ const r = t.options !== void 0 ? Y(t.options) : this.edgeControllerFactory;
953
1317
  return this.di.canvasController.addEdge(
954
1318
  t.id,
955
1319
  t.from,
956
1320
  t.to,
957
- e
1321
+ r,
1322
+ t.priority
958
1323
  ), this;
959
1324
  }
1325
+ updateEdge(t, r) {
1326
+ return this.di.canvasController.updateEdge(t, r), this;
1327
+ }
960
1328
  removeEdge(t) {
961
1329
  return this.di.canvasController.removeEdge(t), this;
962
1330
  }
@@ -970,12 +1338,6 @@ class ot {
970
1338
  moveToNodes(t) {
971
1339
  return this.di.canvasController.moveToNodes(t), this;
972
1340
  }
973
- updateNodeCoordinates(t, e, s) {
974
- return this.di.canvasController.updateNodeCoordinates(t, e, s), this;
975
- }
976
- updateEdge(t, e) {
977
- return e.controller !== void 0 && this.di.canvasController.updateEdgeController(t, e.controller), this;
978
- }
979
1341
  clear() {
980
1342
  return this.di.canvasController.clear(), this;
981
1343
  }
@@ -989,78 +1351,78 @@ class ot {
989
1351
  this.di.canvasController.destroy();
990
1352
  }
991
1353
  }
992
- class nt {
993
- constructor(t, e) {
994
- n(this, "transformation");
995
- n(this, "nodes", /* @__PURE__ */ new Map());
996
- n(this, "grabbedNodeId", null);
997
- n(this, "onNodeDrag");
998
- n(this, "onBeforeNodeDrag");
999
- n(this, "nodeIdGenerator", new x());
1000
- n(this, "element", null);
1001
- n(this, "onCanvasMouseUp", () => {
1354
+ class Et {
1355
+ constructor(t, r) {
1356
+ h(this, "transformation");
1357
+ h(this, "nodes", /* @__PURE__ */ new Map());
1358
+ h(this, "grabbedNodeId", null);
1359
+ h(this, "onNodeDrag");
1360
+ h(this, "onBeforeNodeDrag");
1361
+ h(this, "nodeIdGenerator", new O());
1362
+ h(this, "element", null);
1363
+ h(this, "onCanvasMouseUp", () => {
1002
1364
  this.setCursor(null), this.grabbedNodeId = null;
1003
1365
  });
1004
- n(this, "onCanvasMouseMove", (t) => {
1366
+ h(this, "onCanvasMouseMove", (t) => {
1005
1367
  this.grabbedNodeId !== null && (t.stopPropagation(), this.dragNode(this.grabbedNodeId, t.movementX, t.movementY));
1006
1368
  });
1007
- n(this, "onCanvasTouchStart", (t) => {
1369
+ h(this, "onCanvasTouchStart", (t) => {
1008
1370
  this.previousTouchCoords = [
1009
1371
  t.touches[0].clientX,
1010
1372
  t.touches[0].clientY
1011
1373
  ];
1012
1374
  });
1013
- n(this, "onCanvasTouchMove", (t) => {
1375
+ h(this, "onCanvasTouchMove", (t) => {
1014
1376
  if (this.grabbedNodeId === null || t.touches.length !== 1 || this.previousTouchCoords === null)
1015
1377
  return;
1016
1378
  t.stopImmediatePropagation();
1017
- const [e, s] = [
1379
+ const [r, s] = [
1018
1380
  t.touches[0].clientX - this.previousTouchCoords[0],
1019
1381
  t.touches[0].clientY - this.previousTouchCoords[1]
1020
1382
  ];
1021
- this.dragNode(this.grabbedNodeId, e, s), this.previousTouchCoords = [
1383
+ this.dragNode(this.grabbedNodeId, r, s), this.previousTouchCoords = [
1022
1384
  t.touches[0].clientX,
1023
1385
  t.touches[0].clientY
1024
1386
  ];
1025
1387
  });
1026
- n(this, "onCanvasTouchEnd", (t) => {
1388
+ h(this, "onCanvasTouchEnd", (t) => {
1027
1389
  t.touches.length > 0 ? this.previousTouchCoords = [
1028
1390
  t.touches[0].clientX,
1029
1391
  t.touches[0].clientY
1030
1392
  ] : (this.previousTouchCoords = null, this.grabbedNodeId = null);
1031
1393
  });
1032
- n(this, "previousTouchCoords", null);
1033
- var a, c;
1394
+ h(this, "previousTouchCoords", null);
1395
+ var n, i;
1034
1396
  this.canvas = t, this.transformation = this.canvas.transformation;
1035
1397
  const s = () => {
1036
1398
  };
1037
- this.onNodeDrag = ((a = e == null ? void 0 : e.events) == null ? void 0 : a.onNodeDrag) ?? s;
1399
+ this.onNodeDrag = ((n = r == null ? void 0 : r.events) == null ? void 0 : n.onNodeDrag) ?? s;
1038
1400
  const o = () => !0;
1039
- this.onBeforeNodeDrag = ((c = e == null ? void 0 : e.events) == null ? void 0 : c.onBeforeNodeDrag) ?? o;
1401
+ this.onBeforeNodeDrag = ((i = r == null ? void 0 : r.events) == null ? void 0 : i.onBeforeNodeDrag) ?? o;
1040
1402
  }
1041
1403
  addNode(t) {
1042
- let e = t.id;
1043
- if (e === void 0)
1404
+ let r = t.id;
1405
+ if (r === void 0)
1044
1406
  do
1045
- e = this.nodeIdGenerator.next();
1046
- while (this.nodes.has(e));
1407
+ r = this.nodeIdGenerator.create();
1408
+ while (this.nodes.has(r));
1047
1409
  this.canvas.addNode(t);
1048
- const s = (a) => {
1410
+ const s = (n) => {
1049
1411
  this.onBeforeNodeDrag({
1050
- nodeId: e,
1412
+ nodeId: r,
1051
1413
  element: t.element,
1052
1414
  x: t.x,
1053
1415
  y: t.y
1054
- }) && (a.stopImmediatePropagation(), this.grabbedNodeId = e, this.setCursor("grab"), this.canvas.moveNodeOnTop(e));
1055
- }, o = (a) => {
1416
+ }) && (n.stopImmediatePropagation(), this.grabbedNodeId = r, this.setCursor("grab"), this.canvas.moveNodeOnTop(r));
1417
+ }, o = (n) => {
1056
1418
  this.onBeforeNodeDrag({
1057
- nodeId: e,
1419
+ nodeId: r,
1058
1420
  element: t.element,
1059
1421
  x: t.x,
1060
1422
  y: t.y
1061
- }) && a.touches.length === 1 && (this.grabbedNodeId = e, this.canvas.moveNodeOnTop(e));
1423
+ }) && n.touches.length === 1 && (this.grabbedNodeId = r, this.canvas.moveNodeOnTop(r));
1062
1424
  };
1063
- return this.nodes.set(e, {
1425
+ return this.nodes.set(r, {
1064
1426
  element: t.element,
1065
1427
  onMouseDown: s,
1066
1428
  onTouchStart: o,
@@ -1068,15 +1430,18 @@ class nt {
1068
1430
  y: t.y
1069
1431
  }), t.element.addEventListener("mousedown", s), t.element.addEventListener("touchstart", o), this;
1070
1432
  }
1433
+ updateNode(t, r) {
1434
+ return this.canvas.updateNode(t, r), this;
1435
+ }
1071
1436
  removeNode(t) {
1072
- const e = this.nodes.get(t);
1073
- return e !== void 0 && (e.element.removeEventListener("mousedown", e.onMouseDown), e.element.removeEventListener("touchstart", e.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), this;
1437
+ const r = this.nodes.get(t);
1438
+ return r !== void 0 && (r.element.removeEventListener("mousedown", r.onMouseDown), r.element.removeEventListener("touchstart", r.onTouchStart)), this.canvas.removeNode(t), this.nodes.delete(t), this;
1074
1439
  }
1075
1440
  markPort(t) {
1076
1441
  return this.canvas.markPort(t), this;
1077
1442
  }
1078
- updatePortEdges(t) {
1079
- return this.canvas.updatePortEdges(t), this;
1443
+ updatePort(t, r) {
1444
+ return this.canvas.updatePort(t, r), this;
1080
1445
  }
1081
1446
  unmarkPort(t) {
1082
1447
  return this.canvas.unmarkPort(t), this;
@@ -1084,6 +1449,9 @@ class nt {
1084
1449
  addEdge(t) {
1085
1450
  return this.canvas.addEdge(t), this;
1086
1451
  }
1452
+ updateEdge(t, r) {
1453
+ return this.canvas.updateEdge(t, r), this;
1454
+ }
1087
1455
  removeEdge(t) {
1088
1456
  return this.canvas.removeEdge(t), this;
1089
1457
  }
@@ -1093,12 +1461,6 @@ class nt {
1093
1461
  moveToNodes(t) {
1094
1462
  return this.canvas.moveToNodes(t), this;
1095
1463
  }
1096
- updateNodeCoordinates(t, e, s) {
1097
- return this.canvas.updateNodeCoordinates(t, e, s), this;
1098
- }
1099
- updateEdge(t, e) {
1100
- return this.canvas.updateEdge(t, e), this;
1101
- }
1102
1464
  moveNodeOnTop(t) {
1103
1465
  return this.canvas.moveNodeOnTop(t), this;
1104
1466
  }
@@ -1121,12 +1483,12 @@ class nt {
1121
1483
  setCursor(t) {
1122
1484
  this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
1123
1485
  }
1124
- dragNode(t, e, s) {
1486
+ dragNode(t, r, s) {
1125
1487
  const o = this.nodes.get(t);
1126
1488
  if (o === void 0)
1127
1489
  throw new Error("failed to drag nonexisting node");
1128
- const [a, c] = this.transformation.getViewCoords(o.x, o.y), h = a + e, i = c + s, [d, g] = this.transformation.getAbsCoords(h, i);
1129
- o.x = d, o.y = g, this.canvas.updateNodeCoordinates(t, d, g), this.onNodeDrag({
1490
+ const [n, i] = this.transformation.getViewCoords(o.x, o.y), a = n + r, c = i + s, [l, d] = this.transformation.getAbsCoords(a, c);
1491
+ o.x = l, o.y = d, this.canvas.updateNode(t, { x: l, y: d }), this.onNodeDrag({
1130
1492
  nodeId: t,
1131
1493
  element: o.element,
1132
1494
  x: o.x,
@@ -1134,80 +1496,83 @@ class nt {
1134
1496
  });
1135
1497
  }
1136
1498
  }
1137
- class it {
1138
- constructor(t, e) {
1139
- n(this, "transformation");
1140
- n(this, "element", null);
1141
- n(this, "isMoving", !1);
1142
- n(this, "prevTouches", null);
1143
- n(this, "onTransform");
1144
- n(this, "onBeforeTransform");
1145
- n(this, "isScalable");
1146
- n(this, "isShiftable");
1147
- n(this, "minViewScale");
1148
- n(this, "maxViewScale");
1149
- n(this, "wheelSensitivity");
1150
- n(this, "onMouseDown", () => {
1499
+ class Ct {
1500
+ constructor(t, r) {
1501
+ h(this, "transformation");
1502
+ h(this, "element", null);
1503
+ h(this, "isMoving", !1);
1504
+ h(this, "prevTouches", null);
1505
+ h(this, "onTransform");
1506
+ h(this, "onBeforeTransform");
1507
+ h(this, "isScalable");
1508
+ h(this, "isShiftable");
1509
+ h(this, "minViewScale");
1510
+ h(this, "maxViewScale");
1511
+ h(this, "wheelSensitivity");
1512
+ h(this, "onMouseDown", () => {
1151
1513
  this.setCursor("grab"), this.isMoving = !0;
1152
1514
  });
1153
- n(this, "onMouseMove", (t) => {
1515
+ h(this, "onMouseMove", (t) => {
1154
1516
  if (!this.isMoving || !this.isShiftable)
1155
1517
  return;
1156
- const e = -t.movementX, s = -t.movementY;
1157
- this.moveViewport(e, s);
1518
+ const r = -t.movementX, s = -t.movementY;
1519
+ this.moveViewport(r, s);
1158
1520
  });
1159
- n(this, "onMouseUp", () => {
1521
+ h(this, "onMouseUp", () => {
1160
1522
  this.setCursor(null), this.isMoving = !1;
1161
1523
  });
1162
- n(this, "onWheelScroll", (t) => {
1524
+ h(this, "onWheelScroll", (t) => {
1163
1525
  if (this.element === null || this.isScalable === !1)
1164
1526
  return;
1165
1527
  t.preventDefault();
1166
- const { left: e, top: s } = this.element.getBoundingClientRect(), o = t.clientX - e, a = t.clientY - s, h = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
1167
- this.scaleViewport(h, o, a);
1528
+ const { left: r, top: s } = this.element.getBoundingClientRect(), o = t.clientX - r, n = t.clientY - s, a = 1 / (t.deltaY < 0 ? this.wheelSensitivity : 1 / this.wheelSensitivity);
1529
+ this.scaleViewport(a, o, n);
1168
1530
  });
1169
- n(this, "onTouchStart", (t) => {
1531
+ h(this, "onTouchStart", (t) => {
1170
1532
  this.prevTouches = this.getAverageTouch(t);
1171
1533
  });
1172
- n(this, "onTouchMove", (t) => {
1534
+ h(this, "onTouchMove", (t) => {
1173
1535
  if (this.prevTouches === null || this.element === null || !this.isShiftable)
1174
1536
  return;
1175
- const e = this.getAverageTouch(t);
1176
- if ((e.touchesCnt === 1 || e.touchesCnt === 2) && this.moveViewport(
1177
- -(e.x - this.prevTouches.x),
1178
- -(e.y - this.prevTouches.y)
1179
- ), e.touchesCnt === 2 && this.isScalable) {
1180
- const { left: s, top: o } = this.element.getBoundingClientRect(), a = this.prevTouches.x - s, c = this.prevTouches.y - o, i = 1 / (e.scale / this.prevTouches.scale);
1181
- this.scaleViewport(i, a, c);
1537
+ const r = this.getAverageTouch(t);
1538
+ if ((r.touchesCnt === 1 || r.touchesCnt === 2) && this.moveViewport(
1539
+ -(r.x - this.prevTouches.x),
1540
+ -(r.y - this.prevTouches.y)
1541
+ ), r.touchesCnt === 2 && this.isScalable) {
1542
+ const { left: s, top: o } = this.element.getBoundingClientRect(), n = this.prevTouches.x - s, i = this.prevTouches.y - o, c = 1 / (r.scale / this.prevTouches.scale);
1543
+ this.scaleViewport(c, n, i);
1182
1544
  }
1183
- this.prevTouches = e, t.preventDefault();
1545
+ this.prevTouches = r, t.preventDefault();
1184
1546
  });
1185
- n(this, "onTouchEnd", (t) => {
1547
+ h(this, "onTouchEnd", (t) => {
1186
1548
  t.touches.length > 0 ? this.prevTouches = this.getAverageTouch(t) : this.prevTouches = null;
1187
1549
  });
1188
- var i, d, g, l, u, v, m, w, f, C, E, b;
1189
- this.canvas = t, this.options = e, this.transformation = this.canvas.transformation;
1190
- const s = ((d = (i = this.options) == null ? void 0 : i.scale) == null ? void 0 : d.min) ?? null, o = ((l = (g = this.options) == null ? void 0 : g.scale) == null ? void 0 : l.max) ?? null;
1191
- this.isScalable = ((v = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : v.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((w = (m = this.options) == null ? void 0 : m.shift) == null ? void 0 : w.enabled) !== !1;
1192
- const a = (C = (f = this.options) == null ? void 0 : f.scale) == null ? void 0 : C.wheelSensitivity;
1193
- this.wheelSensitivity = a !== void 0 ? a : 1.2;
1194
- const c = () => {
1550
+ var c, l, d, g, u, p, w, f, m, E, v, C;
1551
+ this.canvas = t, this.options = r, this.transformation = this.canvas.transformation;
1552
+ const s = ((l = (c = this.options) == null ? void 0 : c.scale) == null ? void 0 : l.min) ?? null, o = ((g = (d = this.options) == null ? void 0 : d.scale) == null ? void 0 : g.max) ?? null;
1553
+ this.isScalable = ((p = (u = this.options) == null ? void 0 : u.scale) == null ? void 0 : p.enabled) !== !1, this.minViewScale = o !== null ? 1 / o : null, this.maxViewScale = s !== null ? 1 / s : null, this.isShiftable = ((f = (w = this.options) == null ? void 0 : w.shift) == null ? void 0 : f.enabled) !== !1;
1554
+ const n = (E = (m = this.options) == null ? void 0 : m.scale) == null ? void 0 : E.wheelSensitivity;
1555
+ this.wheelSensitivity = n !== void 0 ? n : 1.2;
1556
+ const i = () => {
1195
1557
  };
1196
- this.onTransform = ((E = e == null ? void 0 : e.events) == null ? void 0 : E.onTransform) ?? c;
1197
- const h = () => !0;
1198
- this.onBeforeTransform = ((b = e == null ? void 0 : e.events) == null ? void 0 : b.onBeforeTransform) ?? h;
1558
+ this.onTransform = ((v = r == null ? void 0 : r.events) == null ? void 0 : v.onTransform) ?? i;
1559
+ const a = () => !0;
1560
+ this.onBeforeTransform = ((C = r == null ? void 0 : r.events) == null ? void 0 : C.onBeforeTransform) ?? a;
1199
1561
  }
1200
1562
  addNode(t) {
1201
1563
  return this.canvas.addNode(t), this;
1202
1564
  }
1565
+ updateNode(t, r) {
1566
+ return this.canvas.updateNode(t, r), this;
1567
+ }
1203
1568
  removeNode(t) {
1204
1569
  return this.canvas.removeNode(t), this;
1205
1570
  }
1206
1571
  markPort(t) {
1207
1572
  return this.canvas.markPort(t), this;
1208
1573
  }
1209
- updatePortEdges(t) {
1210
- return this.canvas.updatePortEdges(t), this;
1574
+ updatePort(t, r) {
1575
+ return this.canvas.updatePort(t, r), this;
1211
1576
  }
1212
1577
  unmarkPort(t) {
1213
1578
  return this.canvas.unmarkPort(t), this;
@@ -1215,6 +1580,9 @@ class it {
1215
1580
  addEdge(t) {
1216
1581
  return this.canvas.addEdge(t), this;
1217
1582
  }
1583
+ updateEdge(t, r) {
1584
+ return this.canvas.updateEdge(t, r), this;
1585
+ }
1218
1586
  removeEdge(t) {
1219
1587
  return this.canvas.removeEdge(t), this;
1220
1588
  }
@@ -1224,12 +1592,6 @@ class it {
1224
1592
  moveToNodes(t) {
1225
1593
  return this.canvas.moveToNodes(t), this;
1226
1594
  }
1227
- updateNodeCoordinates(t, e, s) {
1228
- return this.canvas.updateNodeCoordinates(t, e, s), this;
1229
- }
1230
- updateEdge(t, e) {
1231
- return this.canvas.updateEdge(t, e), this;
1232
- }
1233
1595
  moveNodeOnTop(t) {
1234
1596
  return this.canvas.moveNodeOnTop(t), this;
1235
1597
  }
@@ -1246,44 +1608,44 @@ class it {
1246
1608
  this.detach(), this.canvas.destroy();
1247
1609
  }
1248
1610
  getAverageTouch(t) {
1249
- const e = [], s = t.touches.length;
1250
- for (let i = 0; i < s; i++)
1251
- e.push([t.touches[i].clientX, t.touches[i].clientY]);
1252
- const o = e.reduce(
1253
- (i, d) => [i[0] + d[0], i[1] + d[1]],
1611
+ const r = [], s = t.touches.length;
1612
+ for (let c = 0; c < s; c++)
1613
+ r.push([t.touches[c].clientX, t.touches[c].clientY]);
1614
+ const o = r.reduce(
1615
+ (c, l) => [c[0] + l[0], c[1] + l[1]],
1254
1616
  [0, 0]
1255
- ), a = [o[0] / s, o[1] / s], h = e.map((i) => [i[0] - a[0], i[1] - a[1]]).reduce(
1256
- (i, d) => i + Math.sqrt(d[0] * d[0] + d[1] * d[1]),
1617
+ ), n = [o[0] / s, o[1] / s], a = r.map((c) => [c[0] - n[0], c[1] - n[1]]).reduce(
1618
+ (c, l) => c + Math.sqrt(l[0] * l[0] + l[1] * l[1]),
1257
1619
  0
1258
1620
  );
1259
- return { x: a[0], y: a[1], scale: h / s, touchesCnt: s };
1621
+ return { x: n[0], y: n[1], scale: a / s, touchesCnt: s };
1260
1622
  }
1261
1623
  setCursor(t) {
1262
1624
  this.element !== null && (t !== null ? this.element.style.cursor = t : this.element.style.removeProperty("cursor"));
1263
1625
  }
1264
- moveViewport(t, e) {
1265
- const [s, o] = this.transformation.getAbsCoords(0, 0), a = this.canvas.transformation.getAbsScale(), c = {
1266
- scale: a,
1267
- x: s + a * t,
1268
- y: o + a * e
1626
+ moveViewport(t, r) {
1627
+ const [s, o] = this.transformation.getAbsCoords(0, 0), n = this.canvas.transformation.getAbsScale(), i = {
1628
+ scale: n,
1629
+ x: s + n * t,
1630
+ y: o + n * r
1269
1631
  };
1270
- this.onBeforeTransform({ ...c }) && (this.canvas.patchViewportState(c), this.onTransform(c));
1632
+ this.onBeforeTransform({ ...i }) && (this.canvas.patchViewportState(i), this.onTransform(i));
1271
1633
  }
1272
- scaleViewport(t, e, s) {
1273
- const [o, a] = this.canvas.transformation.getAbsCoords(0, 0), c = this.canvas.transformation.getAbsScale(), h = c * t, i = c * (1 - t) * e + o, d = c * (1 - t) * s + a;
1274
- if (this.maxViewScale !== null && h > this.maxViewScale && h > c || this.minViewScale !== null && h < this.minViewScale && h < c)
1634
+ scaleViewport(t, r, s) {
1635
+ const [o, n] = this.canvas.transformation.getAbsCoords(0, 0), i = this.canvas.transformation.getAbsScale(), a = i * t, c = i * (1 - t) * r + o, l = i * (1 - t) * s + n;
1636
+ if (this.maxViewScale !== null && a > this.maxViewScale && a > i || this.minViewScale !== null && a < this.minViewScale && a < i)
1275
1637
  return;
1276
- const g = { scale: h, x: i, y: d };
1277
- this.onBeforeTransform({ ...g }) && (this.canvas.patchViewportState(g), this.onTransform(g));
1638
+ const d = { scale: a, x: c, y: l };
1639
+ this.onBeforeTransform({ ...d }) && (this.canvas.patchViewportState(d), this.onTransform(d));
1278
1640
  }
1279
1641
  }
1280
- class ht {
1642
+ class At {
1281
1643
  constructor() {
1282
- n(this, "coreOptions");
1283
- n(this, "dragOptions");
1284
- n(this, "transformOptions");
1285
- n(this, "isDraggable", !1);
1286
- n(this, "isTransformable", !1);
1644
+ h(this, "coreOptions");
1645
+ h(this, "dragOptions");
1646
+ h(this, "transformOptions");
1647
+ h(this, "isDraggable", !1);
1648
+ h(this, "isTransformable", !1);
1287
1649
  }
1288
1650
  setOptions(t) {
1289
1651
  return this.coreOptions = t, this;
@@ -1295,21 +1657,25 @@ class ht {
1295
1657
  return this.isTransformable = !0, this.transformOptions = t, this;
1296
1658
  }
1297
1659
  build() {
1298
- let t = new ot(this.coreOptions);
1299
- return this.isDraggable && (t = new nt(t, this.dragOptions)), this.isTransformable && (t = new it(t, this.transformOptions)), t;
1660
+ let t = new ft(this.coreOptions);
1661
+ return this.isDraggable && (t = new Et(t, this.dragOptions)), this.isTransformable && (t = new Ct(t, this.transformOptions)), t;
1300
1662
  }
1301
1663
  }
1302
1664
  export {
1303
- G as BezierEdgeController,
1304
- ot as CanvasCore,
1305
- Z as CycleCircleEdgeController,
1306
- U as CycleSquareEdgeController,
1307
- M as EdgeType,
1308
- p as EdgeUtils,
1309
- ht as HtmlGraphBuilder,
1310
- X as StraightEdgeController,
1311
- nt as UserDraggableNodesCanvas,
1312
- it as UserTransformableCanvas,
1313
- H as createBezierEdgeControllerFactory,
1314
- q as createStraightEdgeControllerFactory
1665
+ q as BezierEdgeController,
1666
+ ft as CanvasCore,
1667
+ rt as CycleCircleEdgeController,
1668
+ W as CycleSquareEdgeController,
1669
+ k as DetourStraightEdgeController,
1670
+ $ as EdgeType,
1671
+ tt as HorizontalEdgeController,
1672
+ At as HtmlGraphBuilder,
1673
+ I as StraightEdgeController,
1674
+ Et as UserDraggableNodesCanvas,
1675
+ Ct as UserTransformableCanvas,
1676
+ et as VerticalEdgeController,
1677
+ ot as createBezierEdgeControllerFactory,
1678
+ nt as createHorizontalEdgeControllerFactory,
1679
+ it as createStraightEdgeControllerFactory,
1680
+ ht as createVerticalEdgeControllerFactory
1315
1681
  };