@html-graph/html-graph 1.1.1 → 1.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/main.d.ts +162 -90
  2. package/dist/main.js +587 -333
  3. package/dist/main.umd.cjs +1 -1
  4. package/package.json +1 -1
package/dist/main.js CHANGED
@@ -1,7 +1,7 @@
1
- var de = Object.defineProperty;
2
- var ce = (t, e, r) => e in t ? de(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
3
- var i = (t, e, r) => ce(t, typeof e != "symbol" ? e + "" : e, r);
4
- const Z = (t, e) => ({
1
+ var le = Object.defineProperty;
2
+ var ge = (t, e, r) => e in t ? le(t, e, { enumerable: !0, configurable: !0, writable: !0, value: r }) : t[e] = r;
3
+ var i = (t, e, r) => ge(t, typeof e != "symbol" ? e + "" : e, r);
4
+ const O = (t, e) => ({
5
5
  x: t / 2,
6
6
  y: e / 2
7
7
  }), v = (t, e, r) => ({
@@ -17,38 +17,38 @@ const Z = (t, e) => ({
17
17
  { x: r, y: -o }
18
18
  ].map((a) => v(a, t, w)).map((a) => ({ x: a.x + e.x, y: a.y + e.y })), s = `M ${d[0].x} ${d[0].y}`, h = `L ${d[1].x} ${d[1].y}`, c = `L ${d[2].x} ${d[2].y}`;
19
19
  return `${s} ${h} ${c}`;
20
- }, $ = (t, e) => {
20
+ }, U = (t, e) => {
21
21
  const r = [];
22
22
  if (t.length > 0 && r.push(`M ${t[0].x} ${t[0].y}`), t.length === 2 && r.push(`L ${t[1].x} ${t[1].y}`), t.length > 2) {
23
23
  const o = t.length - 1;
24
24
  let n = 0, d = 0, s = 0;
25
25
  t.forEach((h, c) => {
26
- let a = 0, l = 0, u = 0;
27
- const f = c > 0, A = c < o, y = f && A;
28
- if (f && (a = -n, l = -d, u = s), A) {
26
+ let a = 0, l = 0, g = 0;
27
+ const f = c > 0, x = c < o, y = f && x;
28
+ if (f && (a = -n, l = -d, g = s), x) {
29
29
  const L = t[c + 1];
30
30
  n = L.x - h.x, d = L.y - h.y, s = Math.sqrt(n * n + d * d);
31
31
  }
32
- const E = s !== 0 ? Math.min((y ? e : 0) / s, c < o - 1 ? 0.5 : 1) : 0, C = y ? { x: h.x + n * E, y: h.y + d * E } : h, P = u !== 0 ? Math.min((y ? e : 0) / u, c > 1 ? 0.5 : 1) : 0, D = y ? { x: h.x + a * P, y: h.y + l * P } : h;
33
- c > 0 && r.push(`L ${D.x} ${D.y}`), y && r.push(
34
- `C ${h.x} ${h.y} ${h.x} ${h.y} ${C.x} ${C.y}`
32
+ const E = s !== 0 ? Math.min((y ? e : 0) / s, c < o - 1 ? 0.5 : 1) : 0, m = y ? { x: h.x + n * E, y: h.y + d * E } : h, P = g !== 0 ? Math.min((y ? e : 0) / g, c > 1 ? 0.5 : 1) : 0, V = y ? { x: h.x + a * P, y: h.y + l * P } : h;
33
+ c > 0 && r.push(`L ${V.x} ${V.y}`), y && r.push(
34
+ `C ${h.x} ${h.y} ${h.x} ${h.y} ${m.x} ${m.y}`
35
35
  );
36
36
  });
37
37
  }
38
38
  return r.join(" ");
39
- }, B = () => {
39
+ }, k = () => {
40
40
  const t = document.createElementNS("http://www.w3.org/2000/svg", "svg");
41
41
  return t.style.pointerEvents = "none", t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.overflow = "visible", t;
42
- }, k = () => {
42
+ }, Y = () => {
43
43
  const t = document.createElementNS("http://www.w3.org/2000/svg", "g");
44
44
  return t.style.transformOrigin = "50% 50%", t;
45
- }, Y = (t, e) => {
45
+ }, X = (t, e) => {
46
46
  const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
47
47
  return r.setAttribute("stroke", t), r.setAttribute("stroke-width", `${e}`), r.setAttribute("fill", "none"), r;
48
- }, p = (t) => {
48
+ }, M = (t) => {
49
49
  const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
50
50
  return e.setAttribute("fill", t), e;
51
- }, X = (t, e) => {
51
+ }, z = (t, e) => {
52
52
  const r = {
53
53
  x: t.x + t.width / 2,
54
54
  y: t.y + t.height / 2
@@ -64,7 +64,7 @@ const Z = (t, e) => ({
64
64
  flipX: c,
65
65
  flipY: a
66
66
  };
67
- }, ae = (t) => {
67
+ }, ue = (t) => {
68
68
  const e = v(
69
69
  { x: t.arrowLength, y: w.y },
70
70
  t.fromVect,
@@ -81,7 +81,7 @@ const Z = (t, e) => ({
81
81
  y: r.y - t.toVect.y * t.curvature
82
82
  }, d = `M ${e.x} ${e.y} C ${o.x} ${o.y}, ${n.x} ${n.y}, ${r.x} ${r.y}`, s = t.hasSourceArrow ? "" : `M ${w.x} ${w.y} L ${e.x} ${e.y} `, h = t.hasTargetArrow ? "" : ` M ${r.x} ${r.y} L ${t.to.x} ${t.to.y}`;
83
83
  return `${s}${d}${h}`;
84
- }, le = (t) => {
84
+ }, we = (t) => {
85
85
  const e = t.hasSourceArrow ? v(
86
86
  { x: t.arrowLength, y: w.y },
87
87
  t.fromVect,
@@ -101,16 +101,16 @@ const Z = (t, e) => ({
101
101
  { x: t.to.x - o, y: t.to.y },
102
102
  t.toVect,
103
103
  t.to
104
- ), u = {
104
+ ), g = {
105
105
  x: l.x + s,
106
106
  y: l.y + h
107
- }, f = { x: (a.x + u.x) / 2, y: (a.y + u.y) / 2 }, A = {
107
+ }, f = { x: (a.x + g.x) / 2, y: (a.y + g.y) / 2 }, x = {
108
108
  x: c.x + t.curvature * t.fromVect.x,
109
109
  y: c.y + t.curvature * t.fromVect.y
110
110
  }, y = {
111
111
  x: l.x - t.curvature * t.toVect.x,
112
112
  y: l.y - t.curvature * t.toVect.y
113
- }, m = {
113
+ }, p = {
114
114
  x: c.x + s,
115
115
  y: c.y + h
116
116
  }, E = {
@@ -120,11 +120,11 @@ const Z = (t, e) => ({
120
120
  return [
121
121
  `M ${e.x} ${e.y}`,
122
122
  `L ${c.x} ${c.y}`,
123
- `C ${A.x} ${A.y} ${m.x} ${m.y} ${f.x} ${f.y}`,
123
+ `C ${x.x} ${x.y} ${p.x} ${p.y} ${f.x} ${f.y}`,
124
124
  `C ${E.x} ${E.y} ${y.x} ${y.y} ${l.x} ${l.y}`,
125
125
  `L ${r.x} ${r.y}`
126
126
  ].join(" ");
127
- }, ue = (t) => {
127
+ }, fe = (t) => {
128
128
  const e = t.hasSourceArrow ? v(
129
129
  { x: t.arrowLength, y: w.y },
130
130
  t.fromVect,
@@ -137,12 +137,12 @@ const Z = (t, e) => ({
137
137
  { x: t.to.x - n, y: t.to.y },
138
138
  t.toVect,
139
139
  t.to
140
- ), h = Math.max((d.x + s.x) / 2, o), c = t.to.y / 2, a = { x: t.flipX > 0 ? h : -o, y: d.y }, l = { x: a.x, y: c }, u = {
140
+ ), h = Math.max((d.x + s.x) / 2, o), c = t.to.y / 2, a = { x: t.flipX > 0 ? h : -o, y: d.y }, l = { x: a.x, y: c }, g = {
141
141
  x: t.flipX > 0 ? t.to.x - h : t.to.x + o,
142
142
  y: s.y
143
- }, f = { x: u.x, y: c };
144
- return $(
145
- [e, d, a, l, f, u, s, r],
143
+ }, f = { x: g.x, y: c };
144
+ return U(
145
+ [e, d, a, l, f, g, s, r],
146
146
  t.roundness
147
147
  );
148
148
  }, j = (t) => {
@@ -162,12 +162,12 @@ const Z = (t, e) => ({
162
162
  { x: t.to.x - o, y: t.to.y },
163
163
  t.toVect,
164
164
  t.to
165
- ), u = { x: l.x + h, y: l.y + c };
166
- return $(
167
- [e, n, a, u, l, r],
165
+ ), g = { x: l.x + h, y: l.y + c };
166
+ return U(
167
+ [e, n, a, g, l, r],
168
168
  t.roundness
169
169
  );
170
- }, ge = (t) => {
170
+ }, ye = (t) => {
171
171
  const e = t.hasSourceArrow ? v(
172
172
  { x: t.arrowLength, y: w.y },
173
173
  t.fromVect,
@@ -181,8 +181,8 @@ const Z = (t, e) => ({
181
181
  t.toVect,
182
182
  t.to
183
183
  );
184
- return $([e, n, d, r], t.roundness);
185
- }, we = (t) => {
184
+ return U([e, n, d, r], t.roundness);
185
+ }, ve = (t) => {
186
186
  const e = t.hasSourceArrow ? v(
187
187
  { x: t.arrowLength, y: w.y },
188
188
  t.fromVect,
@@ -195,15 +195,15 @@ const Z = (t, e) => ({
195
195
  { x: t.to.x - n, y: t.to.y },
196
196
  t.toVect,
197
197
  t.to
198
- ), h = Math.max((d.y + s.y) / 2, o), c = t.to.x / 2, a = { x: d.x, y: t.flipY > 0 ? h : -o }, l = { x: c, y: a.y }, u = {
198
+ ), h = Math.max((d.y + s.y) / 2, o), c = t.to.x / 2, a = { x: d.x, y: t.flipY > 0 ? h : -o }, l = { x: c, y: a.y }, g = {
199
199
  x: s.x,
200
200
  y: t.flipY > 0 ? t.to.y - h : t.to.y + o
201
- }, f = { x: c, y: u.y };
202
- return $(
203
- [e, d, a, l, f, u, s, r],
201
+ }, f = { x: c, y: g.y };
202
+ return U(
203
+ [e, d, a, l, f, g, s, r],
204
204
  t.roundness
205
205
  );
206
- }, H = (t) => {
206
+ }, G = (t) => {
207
207
  const e = t.arrowOffset, r = t.side, o = t.arrowLength + e, n = o + 2 * r, s = [
208
208
  { x: t.arrowLength, y: w.y },
209
209
  { x: o, y: w.y },
@@ -216,20 +216,20 @@ const Z = (t, e) => ({
216
216
  ].map(
217
217
  (c) => v(c, t.fromVect, w)
218
218
  ), h = `M ${w.x} ${w.y} L ${s[0].x} ${s[0].y} `;
219
- return `${t.hasSourceArrow || t.hasTargetArrow ? "" : h}${$(s, t.roundness)}`;
220
- }, fe = (t) => {
219
+ return `${t.hasSourceArrow || t.hasTargetArrow ? "" : h}${U(s, t.roundness)}`;
220
+ }, xe = (t) => {
221
221
  const e = t.smallRadius, r = t.radius, o = Math.sqrt(e * e + r * r), n = e + r, d = t.arrowLength + o * (1 - r / n), s = e * r / n, c = [
222
222
  { x: t.arrowLength, y: w.y },
223
223
  { x: d, y: s },
224
224
  { x: d, y: -s }
225
- ].map((u) => v(u, t.fromVect, w)), a = [
225
+ ].map((g) => v(g, t.fromVect, w)), a = [
226
226
  `M ${c[0].x} ${c[0].y}`,
227
227
  `A ${e} ${e} 0 0 1 ${c[1].x} ${c[1].y}`,
228
228
  `A ${r} ${r} 0 1 0 ${c[2].x} ${c[2].y}`,
229
229
  `A ${e} ${e} 0 0 1 ${c[0].x} ${c[0].y}`
230
230
  ].join(" "), l = `M 0 0 L ${c[0].x} ${c[0].y} `;
231
231
  return `${t.hasSourceArrow || t.hasTargetArrow ? "" : l}${a}`;
232
- }, g = Object.freeze({
232
+ }, u = Object.freeze({
233
233
  color: "#777777",
234
234
  width: 1,
235
235
  arrowLength: 15,
@@ -246,10 +246,10 @@ const Z = (t, e) => ({
246
246
  smallCycleRadius: 15,
247
247
  curvature: 90
248
248
  });
249
- class q {
249
+ class ee {
250
250
  constructor(e) {
251
- i(this, "svg", B());
252
- i(this, "group", k());
251
+ i(this, "svg", k());
252
+ i(this, "group", Y());
253
253
  i(this, "line");
254
254
  i(this, "sourceArrow", null);
255
255
  i(this, "targetArrow", null);
@@ -262,12 +262,12 @@ class q {
262
262
  i(this, "detourDistance");
263
263
  i(this, "hasSourceArrow");
264
264
  i(this, "hasTargetArrow");
265
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? g.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? g.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? g.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
266
- const r = (e == null ? void 0 : e.color) ?? g.color, o = (e == null ? void 0 : e.width) ?? g.width;
267
- this.svg.appendChild(this.group), this.line = Y(r, o), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(r), this.group.appendChild(this.targetArrow));
265
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.curvature = (e == null ? void 0 : e.curvature) ?? u.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? u.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? u.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
266
+ const r = (e == null ? void 0 : e.color) ?? u.color, o = (e == null ? void 0 : e.width) ?? u.width;
267
+ this.svg.appendChild(this.group), this.line = X(r, o), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(r), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(r), this.group.appendChild(this.targetArrow));
268
268
  }
269
269
  render(e) {
270
- const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
270
+ const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = z(
271
271
  e.from,
272
272
  e.to
273
273
  );
@@ -280,15 +280,15 @@ class q {
280
280
  x: n,
281
281
  y: d
282
282
  };
283
- let u, f = a, A = -this.arrowLength;
284
- if (e.from.portId === e.to.portId ? (u = fe({
283
+ let g, f = a, x = -this.arrowLength;
284
+ if (e.from.portId === e.to.portId ? (g = xe({
285
285
  fromVect: c,
286
286
  radius: this.portCycleRadius,
287
287
  smallRadius: this.portCycleSmallRadius,
288
288
  arrowLength: this.arrowLength,
289
289
  hasSourceArrow: this.hasSourceArrow,
290
290
  hasTargetArrow: this.hasTargetArrow
291
- }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = le({
291
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = we({
292
292
  to: l,
293
293
  fromVect: c,
294
294
  toVect: a,
@@ -300,7 +300,7 @@ class q {
300
300
  curvature: this.curvature,
301
301
  hasSourceArrow: this.hasSourceArrow,
302
302
  hasTargetArrow: this.hasTargetArrow
303
- }) : u = ae({
303
+ }) : g = ue({
304
304
  to: l,
305
305
  fromVect: c,
306
306
  toVect: a,
@@ -308,7 +308,7 @@ class q {
308
308
  curvature: this.curvature,
309
309
  hasSourceArrow: this.hasSourceArrow,
310
310
  hasTargetArrow: this.hasTargetArrow
311
- }), this.line.setAttribute("d", u), this.sourceArrow) {
311
+ }), this.line.setAttribute("d", g), this.sourceArrow) {
312
312
  const y = T(
313
313
  c,
314
314
  w,
@@ -321,17 +321,17 @@ class q {
321
321
  const y = T(
322
322
  f,
323
323
  l,
324
- A,
324
+ x,
325
325
  this.arrowWidth
326
326
  );
327
327
  this.targetArrow.setAttribute("d", y);
328
328
  }
329
329
  }
330
330
  }
331
- class O {
331
+ class te {
332
332
  constructor(e) {
333
- i(this, "svg", B());
334
- i(this, "group", k());
333
+ i(this, "svg", k());
334
+ i(this, "group", Y());
335
335
  i(this, "line");
336
336
  i(this, "sourceArrow", null);
337
337
  i(this, "targetArrow", null);
@@ -344,18 +344,18 @@ class O {
344
344
  i(this, "detourDistance");
345
345
  i(this, "hasSourceArrow");
346
346
  i(this, "hasTargetArrow");
347
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
348
- const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
347
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
348
+ const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
349
349
  this.roundness = Math.min(
350
350
  r,
351
351
  this.arrowOffset,
352
352
  this.cycleSquareSide / 2
353
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
354
- const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
355
- this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
353
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
354
+ const o = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
355
+ this.svg.appendChild(this.group), this.line = X(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
356
356
  }
357
357
  render(e) {
358
- const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
358
+ const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = z(
359
359
  e.from,
360
360
  e.to
361
361
  );
@@ -368,8 +368,8 @@ class O {
368
368
  x: n,
369
369
  y: d
370
370
  };
371
- let u, f = a, A = -this.arrowLength;
372
- if (e.from.portId === e.to.portId ? (u = H({
371
+ let g, f = a, x = -this.arrowLength;
372
+ if (e.from.portId === e.to.portId ? (g = G({
373
373
  fromVect: c,
374
374
  arrowLength: this.arrowLength,
375
375
  side: this.cycleSquareSide,
@@ -377,7 +377,7 @@ class O {
377
377
  roundness: this.roundness,
378
378
  hasSourceArrow: this.hasSourceArrow,
379
379
  hasTargetArrow: this.hasTargetArrow
380
- }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
380
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
381
381
  to: l,
382
382
  fromVect: c,
383
383
  toVect: a,
@@ -390,7 +390,7 @@ class O {
390
390
  detourDistance: this.detourDistance,
391
391
  hasSourceArrow: this.hasSourceArrow,
392
392
  hasTargetArrow: this.hasTargetArrow
393
- }) : u = ue({
393
+ }) : g = fe({
394
394
  to: l,
395
395
  fromVect: c,
396
396
  toVect: a,
@@ -400,7 +400,7 @@ class O {
400
400
  roundness: this.roundness,
401
401
  hasSourceArrow: this.hasSourceArrow,
402
402
  hasTargetArrow: this.hasTargetArrow
403
- }), this.line.setAttribute("d", u), this.sourceArrow) {
403
+ }), this.line.setAttribute("d", g), this.sourceArrow) {
404
404
  const y = T(
405
405
  c,
406
406
  w,
@@ -413,17 +413,17 @@ class O {
413
413
  const y = T(
414
414
  f,
415
415
  l,
416
- A,
416
+ x,
417
417
  this.arrowWidth
418
418
  );
419
419
  this.targetArrow.setAttribute("d", y);
420
420
  }
421
421
  }
422
422
  }
423
- class ee {
423
+ class re {
424
424
  constructor(e) {
425
- i(this, "svg", B());
426
- i(this, "group", k());
425
+ i(this, "svg", k());
426
+ i(this, "group", Y());
427
427
  i(this, "line");
428
428
  i(this, "sourceArrow", null);
429
429
  i(this, "targetArrow", null);
@@ -436,18 +436,18 @@ class ee {
436
436
  i(this, "detourDistance");
437
437
  i(this, "hasSourceArrow");
438
438
  i(this, "hasTargetArrow");
439
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
440
- const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
439
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
440
+ const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
441
441
  this.roundness = Math.min(
442
442
  r,
443
443
  this.arrowOffset,
444
444
  this.cycleSquareSide / 2
445
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
446
- const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
447
- this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
445
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
446
+ const o = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
447
+ this.svg.appendChild(this.group), this.line = X(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
448
448
  }
449
449
  render(e) {
450
- const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
450
+ const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = z(
451
451
  e.from,
452
452
  e.to
453
453
  );
@@ -460,8 +460,8 @@ class ee {
460
460
  x: n,
461
461
  y: d
462
462
  };
463
- let u, f = a, A = -this.arrowLength;
464
- if (e.from.portId === e.to.portId ? (u = H({
463
+ let g, f = a, x = -this.arrowLength;
464
+ if (e.from.portId === e.to.portId ? (g = G({
465
465
  fromVect: c,
466
466
  arrowLength: this.arrowLength,
467
467
  side: this.cycleSquareSide,
@@ -469,7 +469,7 @@ class ee {
469
469
  roundness: this.roundness,
470
470
  hasSourceArrow: this.hasSourceArrow,
471
471
  hasTargetArrow: this.hasTargetArrow
472
- }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
472
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
473
473
  to: l,
474
474
  fromVect: c,
475
475
  toVect: a,
@@ -482,7 +482,7 @@ class ee {
482
482
  detourDistance: this.detourDistance,
483
483
  hasSourceArrow: this.hasSourceArrow,
484
484
  hasTargetArrow: this.hasTargetArrow
485
- }) : u = ge({
485
+ }) : g = ye({
486
486
  to: l,
487
487
  fromVect: c,
488
488
  toVect: a,
@@ -491,7 +491,7 @@ class ee {
491
491
  roundness: this.roundness,
492
492
  hasSourceArrow: this.hasSourceArrow,
493
493
  hasTargetArrow: this.hasTargetArrow
494
- }), this.line.setAttribute("d", u), this.sourceArrow) {
494
+ }), this.line.setAttribute("d", g), this.sourceArrow) {
495
495
  const y = T(
496
496
  c,
497
497
  w,
@@ -504,17 +504,17 @@ class ee {
504
504
  const y = T(
505
505
  f,
506
506
  l,
507
- A,
507
+ x,
508
508
  this.arrowWidth
509
509
  );
510
510
  this.targetArrow.setAttribute("d", y);
511
511
  }
512
512
  }
513
513
  }
514
- class te {
514
+ class oe {
515
515
  constructor(e) {
516
- i(this, "svg", B());
517
- i(this, "group", k());
516
+ i(this, "svg", k());
517
+ i(this, "group", Y());
518
518
  i(this, "line");
519
519
  i(this, "sourceArrow", null);
520
520
  i(this, "targetArrow", null);
@@ -527,18 +527,18 @@ class te {
527
527
  i(this, "detourDistance");
528
528
  i(this, "hasSourceArrow");
529
529
  i(this, "hasTargetArrow");
530
- this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? g.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? g.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? g.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? g.cycleSquareSide;
531
- const r = (e == null ? void 0 : e.roundness) ?? g.roundness;
530
+ this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? u.arrowLength, this.arrowWidth = (e == null ? void 0 : e.arrowWidth) ?? u.arrowWidth, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? u.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? u.cycleSquareSide;
531
+ const r = (e == null ? void 0 : e.roundness) ?? u.roundness;
532
532
  this.roundness = Math.min(
533
533
  r,
534
534
  this.arrowOffset,
535
535
  this.cycleSquareSide / 2
536
- ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? g.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? g.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? g.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? g.hasTargetArrow;
537
- const o = (e == null ? void 0 : e.color) ?? g.color, n = (e == null ? void 0 : e.width) ?? g.width;
538
- this.svg.appendChild(this.group), this.line = Y(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = p(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = p(o), this.group.appendChild(this.targetArrow));
536
+ ), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? u.detourDirectionVertical, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? u.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? u.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? u.hasTargetArrow;
537
+ const o = (e == null ? void 0 : e.color) ?? u.color, n = (e == null ? void 0 : e.width) ?? u.width;
538
+ this.svg.appendChild(this.group), this.line = X(o, n), this.group.appendChild(this.line), this.hasSourceArrow && (this.sourceArrow = M(o), this.group.appendChild(this.sourceArrow)), this.hasTargetArrow && (this.targetArrow = M(o), this.group.appendChild(this.targetArrow));
539
539
  }
540
540
  render(e) {
541
- const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = X(
541
+ const { x: r, y: o, width: n, height: d, flipX: s, flipY: h } = z(
542
542
  e.from,
543
543
  e.to
544
544
  );
@@ -551,8 +551,8 @@ class te {
551
551
  x: n,
552
552
  y: d
553
553
  };
554
- let u, f = a, A = -this.arrowLength;
555
- if (e.from.portId === e.to.portId ? (u = H({
554
+ let g, f = a, x = -this.arrowLength;
555
+ if (e.from.portId === e.to.portId ? (g = G({
556
556
  fromVect: c,
557
557
  arrowLength: this.arrowLength,
558
558
  side: this.cycleSquareSide,
@@ -560,7 +560,7 @@ class te {
560
560
  roundness: this.roundness,
561
561
  hasSourceArrow: this.hasSourceArrow,
562
562
  hasTargetArrow: this.hasTargetArrow
563
- }), f = c, A = this.arrowLength) : e.from.nodeId === e.to.nodeId ? u = j({
563
+ }), f = c, x = this.arrowLength) : e.from.nodeId === e.to.nodeId ? g = j({
564
564
  to: l,
565
565
  fromVect: c,
566
566
  toVect: a,
@@ -573,7 +573,7 @@ class te {
573
573
  detourDistance: this.detourDistance,
574
574
  hasSourceArrow: this.hasSourceArrow,
575
575
  hasTargetArrow: this.hasTargetArrow
576
- }) : u = we({
576
+ }) : g = ve({
577
577
  to: l,
578
578
  fromVect: c,
579
579
  toVect: a,
@@ -583,7 +583,7 @@ class te {
583
583
  roundness: this.roundness,
584
584
  hasSourceArrow: this.hasSourceArrow,
585
585
  hasTargetArrow: this.hasTargetArrow
586
- }), this.line.setAttribute("d", u), this.sourceArrow) {
586
+ }), this.line.setAttribute("d", g), this.sourceArrow) {
587
587
  const y = T(
588
588
  c,
589
589
  w,
@@ -596,19 +596,19 @@ class te {
596
596
  const y = T(
597
597
  f,
598
598
  l,
599
- A,
599
+ x,
600
600
  this.arrowWidth
601
601
  );
602
602
  this.targetArrow.setAttribute("d", y);
603
603
  }
604
604
  }
605
605
  }
606
- const ye = (t) => {
606
+ const Ae = (t) => {
607
607
  if (typeof t == "function")
608
608
  return t;
609
609
  switch (t == null ? void 0 : t.type) {
610
610
  case "straight":
611
- return () => new ee({
611
+ return () => new re({
612
612
  color: t.color,
613
613
  width: t.width,
614
614
  arrowLength: t.arrowLength,
@@ -622,7 +622,7 @@ const ye = (t) => {
622
622
  detourDirection: t.detourDirection
623
623
  });
624
624
  case "horizontal":
625
- return () => new O({
625
+ return () => new te({
626
626
  color: t.color,
627
627
  width: t.width,
628
628
  arrowLength: t.arrowLength,
@@ -636,7 +636,7 @@ const ye = (t) => {
636
636
  detourDirection: t.detourDirection
637
637
  });
638
638
  case "vertical":
639
- return () => new te({
639
+ return () => new oe({
640
640
  color: t.color,
641
641
  width: t.width,
642
642
  arrowLength: t.arrowLength,
@@ -650,7 +650,7 @@ const ye = (t) => {
650
650
  detourDirection: t.detourDirection
651
651
  });
652
652
  default:
653
- return () => new q({
653
+ return () => new ee({
654
654
  color: t.color,
655
655
  width: t.width,
656
656
  arrowLength: t.arrowLength,
@@ -664,38 +664,38 @@ const ye = (t) => {
664
664
  detourDirection: t.detourDirection
665
665
  });
666
666
  }
667
- }, V = (t) => () => t, I = V(0), M = () => {
667
+ }, $ = (t) => () => t, I = $(0), C = () => {
668
668
  let t = 0;
669
669
  return () => t++;
670
- }, ve = (t, e) => {
670
+ }, Ee = (t, e) => {
671
671
  let r = I, o = I;
672
- t === "incremental" && (r = M()), e === "incremental" && (o = M());
673
- const n = M();
674
- return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = V(t)), typeof e == "number" && (o = V(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
672
+ t === "incremental" && (r = C()), e === "incremental" && (o = C());
673
+ const n = C();
674
+ return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = $(t)), typeof e == "number" && (o = $(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
675
675
  nodesPriorityFn: r,
676
676
  edgesPriorityFn: o
677
677
  };
678
- }, Ae = (t) => {
678
+ }, Se = (t) => {
679
679
  var r, o, n, d, s;
680
- const e = ve(
680
+ const e = Ee(
681
681
  (r = t == null ? void 0 : t.nodes) == null ? void 0 : r.priority,
682
682
  (o = t == null ? void 0 : t.edges) == null ? void 0 : o.priority
683
683
  );
684
684
  return {
685
685
  nodes: {
686
- centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Z,
686
+ centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? O,
687
687
  priorityFn: e.nodesPriorityFn
688
688
  },
689
689
  ports: {
690
690
  direction: ((d = t == null ? void 0 : t.ports) == null ? void 0 : d.direction) ?? 0
691
691
  },
692
692
  edges: {
693
- shapeFactory: ye(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
693
+ shapeFactory: Ae(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
694
694
  priorityFn: e.edgesPriorityFn
695
695
  }
696
696
  };
697
697
  };
698
- class re {
698
+ class ie {
699
699
  constructor() {
700
700
  i(this, "nodes", /* @__PURE__ */ new Map());
701
701
  i(this, "ports", /* @__PURE__ */ new Map());
@@ -834,7 +834,7 @@ class re {
834
834
  ];
835
835
  }
836
836
  }
837
- class xe {
837
+ class se {
838
838
  constructor() {
839
839
  i(this, "callbacks", /* @__PURE__ */ new Set());
840
840
  }
@@ -851,21 +851,21 @@ class xe {
851
851
  }
852
852
  }
853
853
  const S = () => {
854
- const t = new xe();
854
+ const t = new se();
855
855
  return [t, t];
856
- }, _ = (t) => ({
856
+ }, Q = (t) => ({
857
857
  scale: 1 / t.scale,
858
858
  x: -t.x / t.scale,
859
859
  y: -t.y / t.scale
860
- }), J = {
860
+ }), Z = {
861
861
  scale: 1,
862
862
  x: 0,
863
863
  y: 0
864
864
  };
865
- class oe {
865
+ class ne {
866
866
  constructor() {
867
- i(this, "viewportMatrix", J);
868
- i(this, "contentMatrix", J);
867
+ i(this, "viewportMatrix", Z);
868
+ i(this, "contentMatrix", Z);
869
869
  i(this, "emitter");
870
870
  i(this, "onAfterUpdate");
871
871
  [this.emitter, this.onAfterUpdate] = S();
@@ -881,17 +881,17 @@ class oe {
881
881
  scale: e.scale ?? this.viewportMatrix.scale,
882
882
  x: e.x ?? this.viewportMatrix.x,
883
883
  y: e.y ?? this.viewportMatrix.y
884
- }, this.contentMatrix = _(this.viewportMatrix), this.emitter.emit();
884
+ }, this.contentMatrix = Q(this.viewportMatrix), this.emitter.emit();
885
885
  }
886
886
  patchContentMatrix(e) {
887
887
  this.contentMatrix = {
888
888
  scale: e.scale ?? this.contentMatrix.scale,
889
889
  x: e.x ?? this.contentMatrix.x,
890
890
  y: e.y ?? this.contentMatrix.y
891
- }, this.viewportMatrix = _(this.contentMatrix), this.emitter.emit();
891
+ }, this.viewportMatrix = Q(this.contentMatrix), this.emitter.emit();
892
892
  }
893
893
  }
894
- class ie {
894
+ class he {
895
895
  constructor(e) {
896
896
  this.transformer = e;
897
897
  }
@@ -902,24 +902,28 @@ class ie {
902
902
  return { ...this.transformer.getContentMatrix() };
903
903
  }
904
904
  }
905
- const Ee = () => {
905
+ const pe = () => {
906
906
  const t = document.createElement("div");
907
907
  return t.style.width = "100%", t.style.height = "100%", t.style.position = "relative", t.style.overflow = "hidden", t;
908
- }, Se = () => {
908
+ }, me = () => {
909
909
  const t = document.createElement("div");
910
910
  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.width = "0", t.style.height = "0", t;
911
- }, me = () => {
911
+ }, Ne = () => {
912
912
  const t = document.createElement("div");
913
913
  return t.style.position = "absolute", t.style.top = "0", t.style.left = "0", t.style.visibility = "hidden", t;
914
914
  };
915
- class ne {
915
+ class K {
916
916
  constructor(e, r) {
917
917
  i(this, "canvasWrapper", null);
918
- i(this, "host", Ee());
919
- i(this, "container", Se());
918
+ i(this, "host", pe());
919
+ i(this, "container", me());
920
920
  i(this, "nodeIdToWrapperElementMap", /* @__PURE__ */ new Map());
921
921
  i(this, "edgeIdToElementMap", /* @__PURE__ */ new Map());
922
- this.graphStore = e, this.viewportTransformer = r, this.host.appendChild(this.container);
922
+ i(this, "applyTransform", () => {
923
+ const e = this.viewportTransformer.getContentMatrix();
924
+ this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
925
+ });
926
+ this.graphStore = e, this.viewportTransformer = r, this.host.appendChild(this.container), this.viewportTransformer.onAfterUpdate.subscribe(this.applyTransform);
923
927
  }
924
928
  attach(e) {
925
929
  this.detach(), this.canvasWrapper = e, this.canvasWrapper.appendChild(this.host);
@@ -927,12 +931,8 @@ class ne {
927
931
  detach() {
928
932
  this.canvasWrapper !== null && (this.canvasWrapper.removeChild(this.host), this.canvasWrapper = null);
929
933
  }
930
- applyTransform() {
931
- const e = this.viewportTransformer.getContentMatrix();
932
- this.container.style.transform = `matrix(${e.scale}, 0, 0, ${e.scale}, ${e.x}, ${e.y})`;
933
- }
934
934
  attachNode(e) {
935
- const r = this.graphStore.getNode(e), o = me();
935
+ const r = this.graphStore.getNode(e), o = Ne();
936
936
  o.appendChild(r.element), this.container.appendChild(o), this.nodeIdToWrapperElementMap.set(e, o), this.updateNodeCoordinates(e), this.updateNodePriority(e), o.style.visibility = "visible";
937
937
  }
938
938
  detachNode(e) {
@@ -955,7 +955,7 @@ class ne {
955
955
  });
956
956
  }
957
957
  destroy() {
958
- this.clear(), this.detach(), this.host.removeChild(this.container);
958
+ this.clear(), this.detach(), this.viewportTransformer.onAfterUpdate.unsubscribe(this.applyTransform), this.host.removeChild(this.container);
959
959
  }
960
960
  updateNodeCoordinates(e) {
961
961
  const r = this.nodeIdToWrapperElementMap.get(e), o = this.graphStore.getNode(e), { width: n, height: d } = o.element.getBoundingClientRect(), s = this.viewportTransformer.getViewportMatrix().scale, h = o.centerFn(n, d), c = o.x - s * h.x, a = o.y - s * h.y;
@@ -978,7 +978,7 @@ class ne {
978
978
  }, l = {
979
979
  x: c.scale * (s.left - h.left) + c.x,
980
980
  y: c.scale * (s.top - h.top) + c.y
981
- }, u = {
981
+ }, g = {
982
982
  x: a.x,
983
983
  y: a.y,
984
984
  width: d.width * c.scale,
@@ -996,7 +996,7 @@ class ne {
996
996
  nodeId: this.graphStore.getPortNodeId(r.to)
997
997
  };
998
998
  r.shape.render({
999
- from: u,
999
+ from: g,
1000
1000
  to: f
1001
1001
  });
1002
1002
  }
@@ -1005,7 +1005,111 @@ class ne {
1005
1005
  r.shape.svg.style.zIndex = `${r.priority}`;
1006
1006
  }
1007
1007
  }
1008
- class U {
1008
+ class Te {
1009
+ constructor(e) {
1010
+ i(this, "xFrom", 1 / 0);
1011
+ i(this, "yFrom", 1 / 0);
1012
+ i(this, "xTo", 1 / 0);
1013
+ i(this, "yTo", 1 / 0);
1014
+ this.graphStore = e;
1015
+ }
1016
+ setRenderingBox(e) {
1017
+ this.xFrom = e.x, this.xTo = e.x + e.width, this.yFrom = e.y, this.yTo = e.y + e.height;
1018
+ }
1019
+ hasNode(e) {
1020
+ const r = this.graphStore.getNode(e);
1021
+ return r.x >= this.xFrom && r.x <= this.xTo && r.y >= this.yFrom && r.y <= this.yTo;
1022
+ }
1023
+ hasEdge(e) {
1024
+ const r = this.graphStore.getEdge(e), o = this.graphStore.getPortNodeId(r.from), n = this.graphStore.getPortNodeId(r.to), d = this.graphStore.getNode(o), s = this.graphStore.getNode(n), h = Math.min(d.x, s.x), c = Math.max(d.x, s.x), a = Math.min(d.y, s.y), l = Math.max(d.y, s.y);
1025
+ return h <= this.xTo && c >= this.xFrom && a <= this.yTo && l >= this.yFrom;
1026
+ }
1027
+ }
1028
+ class Me {
1029
+ constructor(e, r, o) {
1030
+ i(this, "attachedNodes", /* @__PURE__ */ new Set());
1031
+ i(this, "attachedEdges", /* @__PURE__ */ new Set());
1032
+ i(this, "renderingBox");
1033
+ i(this, "updateViewport", (e) => {
1034
+ this.renderingBox.setRenderingBox(e);
1035
+ const r = /* @__PURE__ */ new Set(), o = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set();
1036
+ this.graphStore.getAllNodeIds().forEach((s) => {
1037
+ const h = this.renderingBox.hasNode(s), c = this.attachedNodes.has(s);
1038
+ h && !c ? r.add(s) : !h && c && o.add(s);
1039
+ }), this.graphStore.getAllEdgeIds().forEach((s) => {
1040
+ const h = this.renderingBox.hasEdge(s), c = this.attachedEdges.has(s), a = this.graphStore.getEdge(s), l = this.graphStore.getPortNodeId(a.from), g = this.graphStore.getPortNodeId(a.to);
1041
+ h && (this.renderingBox.hasNode(l) || (r.add(l), o.delete(l)), this.renderingBox.hasNode(g) || (r.add(g), o.delete(g))), h && !c ? n.add(s) : !h && c && d.add(s);
1042
+ }), d.forEach((s) => {
1043
+ this.handleDetachEdge(s);
1044
+ }), o.forEach((s) => {
1045
+ this.handleDetachNode(s);
1046
+ }), r.forEach((s) => {
1047
+ this.attachedNodes.has(s) || this.handleAttachNode(s);
1048
+ }), n.forEach((s) => {
1049
+ this.handleAttachEdge(s);
1050
+ });
1051
+ });
1052
+ this.htmlView = e, this.graphStore = r, this.trigger = o, this.renderingBox = new Te(this.graphStore), this.trigger.subscribe(this.updateViewport);
1053
+ }
1054
+ attach(e) {
1055
+ this.htmlView.attach(e);
1056
+ }
1057
+ detach() {
1058
+ this.htmlView.detach();
1059
+ }
1060
+ attachNode(e) {
1061
+ this.renderingBox.hasNode(e) && this.handleAttachNode(e);
1062
+ }
1063
+ detachNode(e) {
1064
+ this.attachedNodes.has(e) && this.handleDetachNode(e);
1065
+ }
1066
+ attachEdge(e) {
1067
+ this.renderingBox.hasEdge(e) && this.attachEdgeEntities(e);
1068
+ }
1069
+ detachEdge(e) {
1070
+ this.attachedEdges.has(e) && this.handleDetachEdge(e);
1071
+ }
1072
+ updateNodeCoordinates(e) {
1073
+ this.attachedNodes.has(e) ? this.htmlView.updateNodeCoordinates(e) : this.renderingBox.hasNode(e) && (this.handleAttachNode(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((r) => {
1074
+ this.attachEdgeEntities(r);
1075
+ }));
1076
+ }
1077
+ updateNodePriority(e) {
1078
+ this.attachedNodes.has(e) && this.htmlView.updateNodePriority(e);
1079
+ }
1080
+ updateEdgeShape(e) {
1081
+ this.attachedEdges.has(e) && this.htmlView.updateEdgeShape(e);
1082
+ }
1083
+ renderEdge(e) {
1084
+ this.attachedEdges.has(e) && this.htmlView.renderEdge(e);
1085
+ }
1086
+ updateEdgePriority(e) {
1087
+ this.attachedEdges.has(e) && this.htmlView.updateEdgePriority(e);
1088
+ }
1089
+ clear() {
1090
+ this.htmlView.clear(), this.attachedNodes.clear(), this.attachedEdges.clear();
1091
+ }
1092
+ destroy() {
1093
+ this.clear(), this.htmlView.destroy(), this.trigger.unsubscribe(this.updateViewport);
1094
+ }
1095
+ attachEdgeEntities(e) {
1096
+ const r = this.graphStore.getEdge(e), o = this.graphStore.getPortNodeId(r.from), n = this.graphStore.getPortNodeId(r.to);
1097
+ this.attachedNodes.has(o) || this.handleAttachNode(o), this.attachedNodes.has(n) || this.handleAttachNode(n), this.handleAttachEdge(e);
1098
+ }
1099
+ handleAttachNode(e) {
1100
+ this.attachedNodes.add(e), this.htmlView.attachNode(e);
1101
+ }
1102
+ handleDetachNode(e) {
1103
+ this.htmlView.detachNode(e), this.attachedNodes.delete(e);
1104
+ }
1105
+ handleAttachEdge(e) {
1106
+ this.attachedEdges.add(e), this.htmlView.attachEdge(e);
1107
+ }
1108
+ handleDetachEdge(e) {
1109
+ this.htmlView.detachEdge(e), this.attachedEdges.delete(e);
1110
+ }
1111
+ }
1112
+ class D {
1009
1113
  constructor(e) {
1010
1114
  i(this, "counter", 0);
1011
1115
  this.checkExists = e;
@@ -1021,21 +1125,21 @@ class U {
1021
1125
  this.counter = 0;
1022
1126
  }
1023
1127
  }
1024
- class x extends Error {
1128
+ class A extends Error {
1025
1129
  constructor() {
1026
1130
  super(...arguments);
1027
1131
  i(this, "name", "HtmlGraphError");
1028
1132
  }
1029
1133
  }
1030
- class se {
1134
+ class de {
1031
1135
  constructor(e, r) {
1032
- i(this, "nodeIdGenerator", new U(
1136
+ i(this, "nodeIdGenerator", new D(
1033
1137
  (e) => this.graphStore.getNode(e) !== void 0
1034
1138
  ));
1035
- i(this, "portIdGenerator", new U(
1139
+ i(this, "portIdGenerator", new D(
1036
1140
  (e) => this.graphStore.getPort(e) !== void 0
1037
1141
  ));
1038
- i(this, "edgeIdGenerator", new U(
1142
+ i(this, "edgeIdGenerator", new D(
1039
1143
  (e) => this.graphStore.getEdge(e) !== void 0
1040
1144
  ));
1041
1145
  i(this, "onAfterNodeAdded");
@@ -1063,7 +1167,7 @@ class se {
1063
1167
  addNode(e) {
1064
1168
  const r = this.nodeIdGenerator.create(e.id);
1065
1169
  if (this.graphStore.getNode(r) !== void 0)
1066
- throw new x("failed to add node with existing id");
1170
+ throw new A("failed to add node with existing id");
1067
1171
  this.graphStore.addNode({
1068
1172
  nodeId: r,
1069
1173
  element: e.element,
@@ -1083,9 +1187,9 @@ class se {
1083
1187
  markPort(e) {
1084
1188
  const r = this.portIdGenerator.create(e.id);
1085
1189
  if (this.graphStore.getPort(r) !== void 0)
1086
- throw new x("failed to add port with existing id");
1190
+ throw new A("failed to add port with existing id");
1087
1191
  if (this.graphStore.getNode(e.nodeId) === void 0)
1088
- throw new x("failed to set port on nonexisting node");
1192
+ throw new A("failed to set port on nonexisting node");
1089
1193
  this.graphStore.addPort({
1090
1194
  portId: r,
1091
1195
  element: e.element,
@@ -1096,11 +1200,11 @@ class se {
1096
1200
  addEdge(e) {
1097
1201
  const r = this.edgeIdGenerator.create(e.id);
1098
1202
  if (this.graphStore.getEdge(r) !== void 0)
1099
- throw new x("failed to add edge with existing id");
1203
+ throw new A("failed to add edge with existing id");
1100
1204
  if (this.graphStore.getPort(e.from) === void 0)
1101
- throw new x("failed to add edge from nonexisting port");
1205
+ throw new A("failed to add edge from nonexisting port");
1102
1206
  if (this.graphStore.getPort(e.to) === void 0)
1103
- throw new x("failed to add edge to nonexisting port");
1207
+ throw new A("failed to add edge to nonexisting port");
1104
1208
  this.graphStore.addEdge({
1105
1209
  edgeId: r,
1106
1210
  from: e.from,
@@ -1112,36 +1216,36 @@ class se {
1112
1216
  updateEdge(e, r) {
1113
1217
  const o = this.graphStore.getEdge(e);
1114
1218
  if (o === void 0)
1115
- throw new x("failed to update nonexisting edge");
1219
+ throw new A("failed to update nonexisting edge");
1116
1220
  r.shape !== void 0 && (o.shape = r.shape, this.onAfterEdgeShapeUpdatedEmitter.emit(e)), r.from !== void 0 && this.graphStore.updateEdgeFrom(e, r.from), r.to !== void 0 && this.graphStore.updateEdgeTo(e, r.to), this.onAfterEdgeUpdatedEmitter.emit(e), r.priority !== void 0 && (o.priority = r.priority, this.onAfterEdgePriorityUpdatedEmitter.emit(e));
1117
1221
  }
1118
1222
  updatePort(e, r) {
1119
1223
  const o = this.graphStore.getPort(e);
1120
1224
  if (o === void 0)
1121
- throw new x("failed to unset nonexisting port");
1225
+ throw new A("failed to unset nonexisting port");
1122
1226
  o.direction = r.direction ?? o.direction, this.onAfterPortUpdatedEmitter.emit(e);
1123
1227
  }
1124
1228
  updateNode(e, r) {
1125
1229
  const o = this.graphStore.getNode(e);
1126
1230
  if (o === void 0)
1127
- throw new x("failed to update nonexisting node");
1231
+ throw new A("failed to update nonexisting node");
1128
1232
  o.x = (r == null ? void 0 : r.x) ?? o.x, o.y = (r == null ? void 0 : r.y) ?? o.y, o.centerFn = r.centerFn ?? o.centerFn, this.onAfterNodeUpdatedEmitter.emit(e), r.priority !== void 0 && (o.priority = r.priority, this.onAfterNodePriorityUpdatedEmitter.emit(e));
1129
1233
  }
1130
1234
  removeEdge(e) {
1131
1235
  if (this.graphStore.getEdge(e) === void 0)
1132
- throw new x("failed to remove nonexisting edge");
1236
+ throw new A("failed to remove nonexisting edge");
1133
1237
  this.onBeforeEdgeRemovedEmitter.emit(e), this.graphStore.removeEdge(e);
1134
1238
  }
1135
1239
  unmarkPort(e) {
1136
1240
  if (this.graphStore.getPort(e) === void 0)
1137
- throw new x("failed to unset nonexisting port");
1241
+ throw new A("failed to unset nonexisting port");
1138
1242
  this.graphStore.getPortAdjacentEdgeIds(e).forEach((r) => {
1139
1243
  this.removeEdge(r);
1140
1244
  }), this.graphStore.removePort(e);
1141
1245
  }
1142
1246
  removeNode(e) {
1143
1247
  if (this.graphStore.getNode(e) === void 0)
1144
- throw new x("failed to remove nonexisting node");
1248
+ throw new A("failed to remove nonexisting node");
1145
1249
  this.graphStore.getNodePortIds(e).forEach((r) => {
1146
1250
  this.unmarkPort(r);
1147
1251
  }), this.onBeforeNodeRemovedEmitter.emit(e), this.graphStore.removeNode(e);
@@ -1150,7 +1254,7 @@ class se {
1150
1254
  this.graphStore.clear(), this.nodeIdGenerator.reset(), this.portIdGenerator.reset(), this.edgeIdGenerator.reset();
1151
1255
  }
1152
1256
  }
1153
- class he {
1257
+ class ce {
1154
1258
  constructor(e) {
1155
1259
  this.graphStore = e;
1156
1260
  }
@@ -1215,61 +1319,56 @@ class he {
1215
1319
  return this.graphStore.getNode(e) === void 0 ? null : this.graphStore.getNodeAdjacentEdgeIds(e);
1216
1320
  }
1217
1321
  }
1218
- class ke {
1322
+ class Ge {
1219
1323
  constructor(e) {
1324
+ i(this, "viewport");
1220
1325
  i(this, "transformation");
1326
+ i(this, "graph");
1221
1327
  i(this, "model");
1222
1328
  i(this, "internalTransformation");
1223
1329
  i(this, "internalModel");
1224
1330
  i(this, "graphStoreController");
1225
- i(this, "htmlController");
1331
+ i(this, "htmlView");
1226
1332
  i(this, "onAfterNodeAdded", (e) => {
1227
- this.htmlController.attachNode(e);
1333
+ this.htmlView.attachNode(e);
1228
1334
  });
1229
1335
  i(this, "onAfterEdgeAdded", (e) => {
1230
- this.htmlController.attachEdge(e);
1336
+ this.htmlView.attachEdge(e);
1231
1337
  });
1232
1338
  i(this, "onAfterEdgeShapeUpdated", (e) => {
1233
- this.htmlController.updateEdgeShape(e);
1339
+ this.htmlView.updateEdgeShape(e);
1234
1340
  });
1235
1341
  i(this, "onAfterEdgePriorityUpdated", (e) => {
1236
- this.htmlController.updateEdgePriority(e);
1342
+ this.htmlView.updateEdgePriority(e);
1237
1343
  });
1238
1344
  i(this, "onAfterEdgeUpdated", (e) => {
1239
- this.htmlController.renderEdge(e);
1345
+ this.htmlView.renderEdge(e);
1240
1346
  });
1241
1347
  i(this, "onAfterPortUpdated", (e) => {
1242
1348
  this.internalModel.getPortAdjacentEdgeIds(e).forEach((o) => {
1243
- this.htmlController.renderEdge(o);
1349
+ this.htmlView.renderEdge(o);
1244
1350
  });
1245
1351
  });
1246
1352
  i(this, "onAfterNodePriorityUpdated", (e) => {
1247
- this.htmlController.updateNodePriority(e);
1353
+ this.htmlView.updateNodePriority(e);
1248
1354
  });
1249
1355
  i(this, "onAfterNodeUpdated", (e) => {
1250
- this.htmlController.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
1251
- this.htmlController.renderEdge(o);
1356
+ this.htmlView.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
1357
+ this.htmlView.renderEdge(o);
1252
1358
  });
1253
1359
  });
1254
1360
  i(this, "onBeforeEdgeRemoved", (e) => {
1255
- this.htmlController.detachEdge(e);
1361
+ this.htmlView.detachEdge(e);
1256
1362
  });
1257
1363
  i(this, "onBeforeNodeRemoved", (e) => {
1258
- this.htmlController.detachNode(e);
1259
- });
1260
- i(this, "onAfterTransformUpdate", () => {
1261
- this.htmlController.applyTransform();
1364
+ this.htmlView.detachNode(e);
1262
1365
  });
1263
- this.internalModel = new re(), this.model = new he(this.internalModel), this.internalTransformation = new oe(), this.transformation = new ie(
1264
- this.internalTransformation
1265
- ), this.htmlController = new ne(
1366
+ this.internalModel = new ie(), this.graph = new ce(this.internalModel), this.model = this.graph, this.internalTransformation = new ne(), this.viewport = new he(this.internalTransformation), this.transformation = this.viewport, this.htmlView = new K(
1266
1367
  this.internalModel,
1267
1368
  this.internalTransformation
1268
- ), this.graphStoreController = new se(
1369
+ ), this.graphStoreController = new de(
1269
1370
  this.internalModel,
1270
- Ae(e)
1271
- ), this.internalTransformation.onAfterUpdate.subscribe(
1272
- this.onAfterTransformUpdate
1371
+ Se(e)
1273
1372
  ), this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
1274
1373
  this.onAfterEdgeShapeUpdated
1275
1374
  ), this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(
@@ -1289,10 +1388,10 @@ class ke {
1289
1388
  );
1290
1389
  }
1291
1390
  attach(e) {
1292
- return this.htmlController.attach(e), this;
1391
+ return this.htmlView.attach(e), this;
1293
1392
  }
1294
1393
  detach() {
1295
- return this.htmlController.detach(), this;
1394
+ return this.htmlView.detach(), this;
1296
1395
  }
1297
1396
  addNode(e) {
1298
1397
  return this.graphStoreController.addNode(e), this;
@@ -1328,12 +1427,10 @@ class ke {
1328
1427
  return this.internalTransformation.patchContentMatrix(e), this;
1329
1428
  }
1330
1429
  clear() {
1331
- return this.htmlController.clear(), this.graphStoreController.clear(), this;
1430
+ return this.htmlView.clear(), this.graphStoreController.clear(), this;
1332
1431
  }
1333
1432
  destroy() {
1334
- this.htmlController.destroy(), this.graphStoreController.clear(), this.internalTransformation.onAfterUpdate.unsubscribe(
1335
- this.onAfterTransformUpdate
1336
- ), this.graphStoreController.onAfterNodeAdded.unsubscribe(
1433
+ this.htmlView.destroy(), this.graphStoreController.clear(), this.graphStoreController.onAfterNodeAdded.unsubscribe(
1337
1434
  this.onAfterNodeAdded
1338
1435
  ), this.graphStoreController.onAfterEdgeAdded.unsubscribe(
1339
1436
  this.onAfterEdgeAdded
@@ -1356,54 +1453,51 @@ class ke {
1356
1453
  );
1357
1454
  }
1358
1455
  }
1359
- class Ce {
1456
+ class be {
1360
1457
  constructor(e) {
1458
+ i(this, "viewport");
1361
1459
  i(this, "transformation");
1460
+ i(this, "graph");
1362
1461
  i(this, "model");
1363
1462
  i(this, "internalTransformation");
1364
1463
  i(this, "internalModel");
1365
1464
  i(this, "graphStoreController");
1366
- i(this, "htmlController");
1465
+ i(this, "htmlView");
1367
1466
  i(this, "onAfterNodeAdded", (e) => {
1368
- this.htmlController.attachNode(e);
1467
+ this.htmlView.attachNode(e);
1369
1468
  });
1370
1469
  i(this, "onAfterEdgeAdded", (e) => {
1371
- this.htmlController.attachEdge(e);
1470
+ this.htmlView.attachEdge(e);
1372
1471
  });
1373
1472
  i(this, "onAfterEdgeShapeUpdated", (e) => {
1374
- this.htmlController.updateEdgeShape(e);
1473
+ this.htmlView.updateEdgeShape(e);
1375
1474
  });
1376
1475
  i(this, "onAfterEdgePriorityUpdated", (e) => {
1377
- this.htmlController.updateEdgePriority(e);
1476
+ this.htmlView.updateEdgePriority(e);
1378
1477
  });
1379
1478
  i(this, "onAfterEdgeUpdated", (e) => {
1380
- this.htmlController.renderEdge(e);
1479
+ this.htmlView.renderEdge(e);
1381
1480
  });
1382
1481
  i(this, "onAfterPortUpdated", (e) => {
1383
1482
  this.internalModel.getPortAdjacentEdgeIds(e).forEach((o) => {
1384
- this.htmlController.renderEdge(o);
1483
+ this.htmlView.renderEdge(o);
1385
1484
  });
1386
1485
  });
1387
1486
  i(this, "onAfterNodePriorityUpdated", (e) => {
1388
- this.htmlController.updateNodePriority(e);
1487
+ this.htmlView.updateNodePriority(e);
1389
1488
  });
1390
1489
  i(this, "onAfterNodeUpdated", (e) => {
1391
- this.htmlController.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
1392
- this.htmlController.renderEdge(o);
1490
+ this.htmlView.updateNodeCoordinates(e), this.internalModel.getNodeAdjacentEdgeIds(e).forEach((o) => {
1491
+ this.htmlView.renderEdge(o);
1393
1492
  });
1394
1493
  });
1395
1494
  i(this, "onBeforeEdgeRemoved", (e) => {
1396
- this.htmlController.detachEdge(e);
1495
+ this.htmlView.detachEdge(e);
1397
1496
  });
1398
1497
  i(this, "onBeforeNodeRemoved", (e) => {
1399
- this.htmlController.detachNode(e);
1498
+ this.htmlView.detachNode(e);
1400
1499
  });
1401
- i(this, "onAfterTransformUpdate", () => {
1402
- this.htmlController.applyTransform();
1403
- });
1404
- this.model = e.publicGraphStore, this.internalModel = e.graphStore, this.internalTransformation = e.viewportTransformer, this.transformation = e.publicViewportTransformer, this.htmlController = e.htmlController, this.graphStoreController = e.graphStoreController, this.internalTransformation.onAfterUpdate.subscribe(
1405
- this.onAfterTransformUpdate
1406
- ), this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
1500
+ this.graph = e.graph, this.model = this.graph, this.internalModel = e.graphStore, this.internalTransformation = e.viewportTransformer, this.viewport = e.viewport, this.transformation = this.viewport, this.htmlView = e.htmlView, this.graphStoreController = e.graphStoreController, this.graphStoreController.onAfterNodeAdded.subscribe(this.onAfterNodeAdded), this.graphStoreController.onAfterEdgeAdded.subscribe(this.onAfterEdgeAdded), this.graphStoreController.onAfterEdgeShapeUpdated.subscribe(
1407
1501
  this.onAfterEdgeShapeUpdated
1408
1502
  ), this.graphStoreController.onAfterEdgePriorityUpdated.subscribe(
1409
1503
  this.onAfterEdgePriorityUpdated
@@ -1422,10 +1516,10 @@ class Ce {
1422
1516
  );
1423
1517
  }
1424
1518
  attach(e) {
1425
- return this.htmlController.attach(e), this;
1519
+ return this.htmlView.attach(e), this;
1426
1520
  }
1427
1521
  detach() {
1428
- return this.htmlController.detach(), this;
1522
+ return this.htmlView.detach(), this;
1429
1523
  }
1430
1524
  addNode(e) {
1431
1525
  return this.graphStoreController.addNode(e), this;
@@ -1461,12 +1555,10 @@ class Ce {
1461
1555
  return this.internalTransformation.patchContentMatrix(e), this;
1462
1556
  }
1463
1557
  clear() {
1464
- return this.htmlController.clear(), this.graphStoreController.clear(), this;
1558
+ return this.htmlView.clear(), this.graphStoreController.clear(), this;
1465
1559
  }
1466
1560
  destroy() {
1467
- this.htmlController.destroy(), this.graphStoreController.clear(), this.internalTransformation.onAfterUpdate.unsubscribe(
1468
- this.onAfterTransformUpdate
1469
- ), this.graphStoreController.onAfterNodeAdded.unsubscribe(
1561
+ this.htmlView.destroy(), this.graphStoreController.clear(), this.graphStoreController.onAfterNodeAdded.unsubscribe(
1470
1562
  this.onAfterNodeAdded
1471
1563
  ), this.graphStoreController.onAfterEdgeAdded.unsubscribe(
1472
1564
  this.onAfterEdgeAdded
@@ -1489,12 +1581,12 @@ class Ce {
1489
1581
  );
1490
1582
  }
1491
1583
  }
1492
- const Ne = (t) => {
1584
+ const Ce = (t) => {
1493
1585
  if (typeof t == "function")
1494
1586
  return t;
1495
1587
  switch (t == null ? void 0 : t.type) {
1496
1588
  case "straight":
1497
- return () => new ee({
1589
+ return () => new re({
1498
1590
  color: t.color,
1499
1591
  width: t.width,
1500
1592
  arrowLength: t.arrowLength,
@@ -1508,7 +1600,7 @@ const Ne = (t) => {
1508
1600
  detourDirection: t.detourDirection
1509
1601
  });
1510
1602
  case "horizontal":
1511
- return () => new O({
1603
+ return () => new te({
1512
1604
  color: t.color,
1513
1605
  width: t.width,
1514
1606
  arrowLength: t.arrowLength,
@@ -1522,7 +1614,7 @@ const Ne = (t) => {
1522
1614
  detourDirection: t.detourDirection
1523
1615
  });
1524
1616
  case "vertical":
1525
- return () => new te({
1617
+ return () => new oe({
1526
1618
  color: t.color,
1527
1619
  width: t.width,
1528
1620
  arrowLength: t.arrowLength,
@@ -1536,7 +1628,7 @@ const Ne = (t) => {
1536
1628
  detourDirection: t.detourDirection
1537
1629
  });
1538
1630
  default:
1539
- return () => new q({
1631
+ return () => new ee({
1540
1632
  color: t.color,
1541
1633
  width: t.width,
1542
1634
  arrowLength: t.arrowLength,
@@ -1550,86 +1642,87 @@ const Ne = (t) => {
1550
1642
  detourDirection: t.detourDirection
1551
1643
  });
1552
1644
  }
1553
- }, Te = (t, e) => {
1645
+ }, Pe = (t, e) => {
1554
1646
  let r = I, o = I;
1555
- t === "incremental" && (r = M()), e === "incremental" && (o = M());
1556
- const n = M();
1557
- return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = V(t)), typeof e == "number" && (o = V(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
1647
+ t === "incremental" && (r = C()), e === "incremental" && (o = C());
1648
+ const n = C();
1649
+ return t === "shared-incremental" && (r = n), e === "shared-incremental" && (o = n), typeof t == "number" && (r = $(t)), typeof e == "number" && (o = $(e)), typeof t == "function" && (r = t), typeof e == "function" && (o = e), {
1558
1650
  nodesPriorityFn: r,
1559
1651
  edgesPriorityFn: o
1560
1652
  };
1561
- }, pe = (t) => {
1653
+ }, Ve = (t) => {
1562
1654
  var r, o, n, d, s;
1563
- const e = Te(
1655
+ const e = Pe(
1564
1656
  (r = t == null ? void 0 : t.nodes) == null ? void 0 : r.priority,
1565
1657
  (o = t == null ? void 0 : t.edges) == null ? void 0 : o.priority
1566
1658
  );
1567
1659
  return {
1568
1660
  nodes: {
1569
- centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? Z,
1661
+ centerFn: ((n = t == null ? void 0 : t.nodes) == null ? void 0 : n.centerFn) ?? O,
1570
1662
  priorityFn: e.nodesPriorityFn
1571
1663
  },
1572
1664
  ports: {
1573
1665
  direction: ((d = t == null ? void 0 : t.ports) == null ? void 0 : d.direction) ?? 0
1574
1666
  },
1575
1667
  edges: {
1576
- shapeFactory: Ne(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
1668
+ shapeFactory: Ce(((s = t == null ? void 0 : t.edges) == null ? void 0 : s.shape) ?? {}),
1577
1669
  priorityFn: e.edgesPriorityFn
1578
1670
  }
1579
1671
  };
1580
1672
  };
1581
- class be {
1582
- constructor(e) {
1583
- i(this, "publicViewportTransformer");
1584
- i(this, "publicGraphStore");
1673
+ class Le {
1674
+ constructor(e, r) {
1675
+ i(this, "viewport");
1676
+ i(this, "graph");
1585
1677
  i(this, "viewportTransformer");
1586
1678
  i(this, "graphStore");
1587
- i(this, "htmlController");
1679
+ i(this, "htmlView");
1588
1680
  i(this, "graphStoreController");
1589
- this.graphStore = new re(), this.publicGraphStore = new he(this.graphStore), this.viewportTransformer = new oe(), this.publicViewportTransformer = new ie(
1590
- this.viewportTransformer
1591
- ), this.htmlController = new ne(
1592
- this.graphStore,
1593
- this.viewportTransformer
1594
- ), this.graphStoreController = new se(
1681
+ this.graphStore = new ie(), this.graph = new ce(this.graphStore), this.viewportTransformer = new ne(), this.viewport = new he(this.viewportTransformer), this.htmlView = r(this.graphStore, this.viewportTransformer), this.graphStoreController = new de(
1595
1682
  this.graphStore,
1596
- pe(e)
1683
+ Ve(e)
1597
1684
  );
1598
1685
  }
1599
1686
  }
1600
- const W = (t, e, r) => {
1687
+ const De = (t, e) => new K(t, e), $e = (t) => (e, r) => new Me(
1688
+ new K(e, r),
1689
+ e,
1690
+ t
1691
+ ), F = (t, e, r) => {
1601
1692
  const { x: o, y: n, width: d, height: s } = t.getBoundingClientRect();
1602
1693
  return e >= o && e <= o + d && r >= n && r <= n + s;
1603
- }, R = (t, e, r) => e >= 0 && e <= t.innerWidth && r >= 0 && r <= t.innerHeight, F = (t, e) => {
1694
+ }, R = (t, e, r) => e >= 0 && e <= t.innerWidth && r >= 0 && r <= t.innerHeight, B = (t, e) => {
1604
1695
  e !== null ? t.style.cursor = e : t.style.removeProperty("cursor");
1605
- }, Me = (t) => {
1606
- var u, f, A, y, m, E;
1607
- const e = ((u = t == null ? void 0 : t.events) == null ? void 0 : u.onNodeDrag) ?? (() => {
1608
- }), r = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), o = ((A = t == null ? void 0 : t.events) == null ? void 0 : A.onNodeDragFinished) ?? (() => {
1609
- }), n = (t == null ? void 0 : t.moveOnTop) === !1, d = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, s = d !== void 0 ? d : "grab", h = (m = t == null ? void 0 : t.mouse) == null ? void 0 : m.mouseDownEventVerifier, c = h !== void 0 ? h : (C) => C.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
1696
+ }, Ue = (t) => {
1697
+ var g, f, x, y, p, E;
1698
+ const e = ((g = t == null ? void 0 : t.events) == null ? void 0 : g.onNodeDrag) ?? (() => {
1699
+ }), r = ((f = t == null ? void 0 : t.events) == null ? void 0 : f.onBeforeNodeDrag) ?? (() => !0), o = ((x = t == null ? void 0 : t.events) == null ? void 0 : x.onNodeDragFinished) ?? (() => {
1700
+ }), n = (t == null ? void 0 : t.moveOnTop) === !1, d = (y = t == null ? void 0 : t.mouse) == null ? void 0 : y.dragCursor, s = d !== void 0 ? d : "grab", h = (p = t == null ? void 0 : t.mouse) == null ? void 0 : p.mouseDownEventVerifier, c = h !== void 0 ? h : (m) => m.button === 0, a = (E = t == null ? void 0 : t.mouse) == null ? void 0 : E.mouseUpEventVerifier;
1610
1701
  return {
1611
1702
  freezePriority: n,
1612
1703
  dragCursor: s,
1613
1704
  mouseDownEventVerifier: c,
1614
- mouseUpEventVerifier: a !== void 0 ? a : (C) => C.button === 0,
1705
+ mouseUpEventVerifier: a !== void 0 ? a : (m) => m.button === 0,
1615
1706
  onNodeDrag: e,
1616
1707
  onBeforeNodeDrag: r,
1617
1708
  onNodeDragFinished: o
1618
1709
  };
1619
1710
  };
1620
- class Pe {
1711
+ class We {
1621
1712
  constructor(e, r) {
1713
+ i(this, "graph");
1622
1714
  i(this, "model");
1715
+ i(this, "viewport");
1623
1716
  i(this, "transformation");
1624
1717
  i(this, "maxNodePriority", 0);
1625
1718
  i(this, "nodes", /* @__PURE__ */ new Map());
1626
1719
  i(this, "grabbedNodeId", null);
1627
- i(this, "nodeIdGenerator", new U(
1720
+ i(this, "nodeIdGenerator", new D(
1628
1721
  (e) => this.nodes.has(e)
1629
1722
  ));
1630
1723
  i(this, "element", null);
1631
1724
  i(this, "onWindowMouseMove", (e) => {
1632
- if (this.element !== null && (!W(this.element, e.clientX, e.clientY) || !R(this.window, e.clientX, e.clientY))) {
1725
+ if (this.element !== null && (!F(this.element, e.clientX, e.clientY) || !R(this.window, e.clientX, e.clientY))) {
1633
1726
  this.cancelMouseDrag();
1634
1727
  return;
1635
1728
  }
@@ -1642,7 +1735,7 @@ class Pe {
1642
1735
  if (e.touches.length !== 1)
1643
1736
  return;
1644
1737
  const r = e.touches[0];
1645
- if (this.element !== null && (!W(this.element, r.clientX, r.clientY) || !R(this.window, r.clientX, r.clientY))) {
1738
+ if (this.element !== null && (!F(this.element, r.clientX, r.clientY) || !R(this.window, r.clientX, r.clientY))) {
1646
1739
  this.cancelTouchDrag();
1647
1740
  return;
1648
1741
  }
@@ -1660,7 +1753,7 @@ class Pe {
1660
1753
  i(this, "previousTouchCoords", null);
1661
1754
  i(this, "window", window);
1662
1755
  i(this, "options");
1663
- this.canvas = e, this.transformation = this.canvas.transformation, this.model = this.canvas.model, this.options = Me(r ?? {});
1756
+ this.canvas = e, this.viewport = this.canvas.viewport, this.transformation = this.viewport, this.graph = this.canvas.graph, this.model = this.graph, this.options = Ue(r ?? {});
1664
1757
  }
1665
1758
  attach(e) {
1666
1759
  return this.detach(), this.element = e, this.canvas.attach(this.element), this;
@@ -1674,13 +1767,13 @@ class Pe {
1674
1767
  const o = (d) => {
1675
1768
  if (this.element === null || !this.options.mouseDownEventVerifier(d))
1676
1769
  return;
1677
- const s = this.model.getNode(r);
1770
+ const s = this.graph.getNode(r);
1678
1771
  this.options.onBeforeNodeDrag({
1679
1772
  nodeId: r,
1680
1773
  element: e.element,
1681
1774
  x: s.x,
1682
1775
  y: s.y
1683
- }) && (d.stopImmediatePropagation(), this.grabbedNodeId = r, F(this.element, this.options.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
1776
+ }) && (d.stopImmediatePropagation(), this.grabbedNodeId = r, B(this.element, this.options.dragCursor), this.moveNodeOnTop(r), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.window.addEventListener("mousemove", this.onWindowMouseMove));
1684
1777
  }, n = (d) => {
1685
1778
  if (d.touches.length !== 1)
1686
1779
  return;
@@ -1688,7 +1781,7 @@ class Pe {
1688
1781
  x: d.touches[0].clientX,
1689
1782
  y: d.touches[0].clientY
1690
1783
  };
1691
- const s = this.model.getNode(r);
1784
+ const s = this.graph.getNode(r);
1692
1785
  this.options.onBeforeNodeDrag({
1693
1786
  nodeId: r,
1694
1787
  element: e.element,
@@ -1742,19 +1835,19 @@ class Pe {
1742
1835
  this.detach(), this.clear(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
1743
1836
  }
1744
1837
  dragNode(e, r, o) {
1745
- const n = this.model.getNode(e);
1838
+ const n = this.graph.getNode(e);
1746
1839
  if (n === null)
1747
1840
  return;
1748
- const d = this.canvas.transformation.getContentMatrix(), s = d.scale * n.x + d.x, h = d.scale * n.y + d.y, c = s + r, a = h + o, l = this.canvas.transformation.getViewportMatrix(), u = l.scale * c + l.x, f = l.scale * a + l.y;
1749
- this.canvas.updateNode(e, { x: u, y: f }), this.options.onNodeDrag({
1841
+ const d = this.canvas.viewport.getContentMatrix(), s = d.scale * n.x + d.x, h = d.scale * n.y + d.y, c = s + r, a = h + o, l = this.canvas.viewport.getViewportMatrix(), g = l.scale * c + l.x, f = l.scale * a + l.y;
1842
+ this.canvas.updateNode(e, { x: g, y: f }), this.options.onNodeDrag({
1750
1843
  nodeId: e,
1751
1844
  element: n.element,
1752
- x: u,
1845
+ x: g,
1753
1846
  y: f
1754
1847
  });
1755
1848
  }
1756
1849
  updateMaxNodePriority(e) {
1757
- const r = this.model.getNode(e).priority;
1850
+ const r = this.graph.getNode(e).priority;
1758
1851
  this.maxNodePriority = Math.max(this.maxNodePriority, r);
1759
1852
  }
1760
1853
  moveNodeOnTop(e) {
@@ -1762,25 +1855,25 @@ class Pe {
1762
1855
  return;
1763
1856
  this.maxNodePriority += 2, this.updateNode(e, { priority: this.maxNodePriority });
1764
1857
  const r = this.maxNodePriority - 1;
1765
- this.model.getNodeAdjacentEdgeIds(e).forEach((n) => {
1858
+ this.graph.getNodeAdjacentEdgeIds(e).forEach((n) => {
1766
1859
  this.updateEdge(n, { priority: r });
1767
1860
  });
1768
1861
  }
1769
1862
  cancelMouseDrag() {
1770
- const e = this.model.getNode(this.grabbedNodeId);
1863
+ const e = this.graph.getNode(this.grabbedNodeId);
1771
1864
  e !== null && this.options.onNodeDragFinished({
1772
1865
  nodeId: this.grabbedNodeId,
1773
1866
  element: e.element,
1774
1867
  x: e.x,
1775
1868
  y: e.y
1776
- }), this.grabbedNodeId = null, this.element !== null && F(this.element, null), this.removeMouseDragListeners();
1869
+ }), this.grabbedNodeId = null, this.element !== null && B(this.element, null), this.removeMouseDragListeners();
1777
1870
  }
1778
1871
  removeMouseDragListeners() {
1779
1872
  this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
1780
1873
  }
1781
1874
  cancelTouchDrag() {
1782
1875
  this.previousTouchCoords = null;
1783
- const e = this.model.getNode(this.grabbedNodeId);
1876
+ const e = this.graph.getNode(this.grabbedNodeId);
1784
1877
  e !== null && this.options.onNodeDragFinished({
1785
1878
  nodeId: this.grabbedNodeId,
1786
1879
  element: e.element,
@@ -1792,30 +1885,30 @@ class Pe {
1792
1885
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
1793
1886
  }
1794
1887
  }
1795
- const De = (t) => {
1888
+ const Ie = (t) => {
1796
1889
  const e = t.minX !== null ? t.minX : -1 / 0, r = t.maxX !== null ? t.maxX : 1 / 0, o = t.minY !== null ? t.minY : -1 / 0, n = t.maxY !== null ? t.maxY : 1 / 0;
1797
1890
  return (d) => {
1798
1891
  let s = d.nextTransform.x, h = d.nextTransform.y;
1799
1892
  s < e && s < d.prevTransform.x && (s = Math.min(d.prevTransform.x, e));
1800
1893
  const c = d.canvasWidth * d.prevTransform.scale, a = r - c;
1801
1894
  s > a && s > d.prevTransform.x && (s = Math.max(d.prevTransform.x, a)), h < o && h < d.prevTransform.y && (h = Math.min(d.prevTransform.y, o));
1802
- const l = d.canvasHeight * d.prevTransform.scale, u = n - l;
1803
- return h > u && h > d.prevTransform.y && (h = Math.max(d.prevTransform.y, u)), { scale: d.nextTransform.scale, x: s, y: h };
1895
+ const l = d.canvasHeight * d.prevTransform.scale, g = n - l;
1896
+ return h > g && h > d.prevTransform.y && (h = Math.max(d.prevTransform.y, g)), { scale: d.nextTransform.scale, x: s, y: h };
1804
1897
  };
1805
- }, Le = (t) => {
1898
+ }, Fe = (t) => {
1806
1899
  const e = t.maxContentScale, r = t.minContentScale, o = e !== null ? 1 / e : 0, n = r !== null ? 1 / r : 1 / 0;
1807
1900
  return (d) => {
1808
1901
  const s = d.prevTransform, h = d.nextTransform;
1809
1902
  let c = h.scale, a = h.x, l = h.y;
1810
1903
  if (h.scale > n && h.scale > s.scale) {
1811
1904
  c = Math.max(s.scale, n), a = s.x, l = s.y;
1812
- const u = (c - s.scale) / (h.scale - s.scale);
1813
- a = s.x + (h.x - s.x) * u, l = s.y + (h.y - s.y) * u;
1905
+ const g = (c - s.scale) / (h.scale - s.scale);
1906
+ a = s.x + (h.x - s.x) * g, l = s.y + (h.y - s.y) * g;
1814
1907
  }
1815
1908
  if (h.scale < o && h.scale < s.scale) {
1816
1909
  c = Math.min(s.scale, o), a = s.x, l = s.y;
1817
- const u = (c - s.scale) / (h.scale - s.scale);
1818
- a = s.x + (h.x - s.x) * u, l = s.y + (h.y - s.y) * u;
1910
+ const g = (c - s.scale) / (h.scale - s.scale);
1911
+ a = s.x + (h.x - s.x) * g, l = s.y + (h.y - s.y) * g;
1819
1912
  }
1820
1913
  return {
1821
1914
  scale: c,
@@ -1823,7 +1916,7 @@ const De = (t) => {
1823
1916
  y: l
1824
1917
  };
1825
1918
  };
1826
- }, Ue = (t) => (e) => t.reduce(
1919
+ }, Re = (t) => (e) => t.reduce(
1827
1920
  (r, o) => o({
1828
1921
  prevTransform: e.prevTransform,
1829
1922
  nextTransform: r,
@@ -1831,50 +1924,51 @@ const De = (t) => {
1831
1924
  canvasHeight: e.canvasHeight
1832
1925
  }),
1833
1926
  e.nextTransform
1834
- ), Q = (t) => {
1927
+ ), q = (t) => {
1835
1928
  if (typeof t == "function")
1836
1929
  return t;
1837
1930
  switch (t.type) {
1838
1931
  case "scale-limit":
1839
- return Le({
1932
+ return Fe({
1840
1933
  minContentScale: t.minContentScale ?? 0,
1841
1934
  maxContentScale: t.maxContentScale ?? 1 / 0
1842
1935
  });
1843
1936
  case "shift-limit":
1844
- return De({
1937
+ return Ie({
1845
1938
  minX: t.minX ?? -1 / 0,
1846
1939
  maxX: t.maxX ?? 1 / 0,
1847
1940
  minY: t.minY ?? -1 / 0,
1848
1941
  maxY: t.maxY ?? 1 / 0
1849
1942
  });
1850
1943
  }
1851
- }, Ve = (t) => {
1852
- var y, m, E, C, z, P, D, L, K;
1944
+ }, Be = (t) => {
1945
+ var y, p, E, m, H, P, V, L, _, J;
1853
1946
  const e = (y = t == null ? void 0 : t.scale) == null ? void 0 : y.mouseWheelSensitivity, r = e !== void 0 ? e : 1.2, o = t == null ? void 0 : t.transformPreprocessor;
1854
1947
  let n;
1855
- o !== void 0 ? Array.isArray(o) ? n = Ue(
1948
+ o !== void 0 ? Array.isArray(o) ? n = Re(
1856
1949
  o.map(
1857
- (b) => Q(b)
1950
+ (b) => q(b)
1858
1951
  )
1859
- ) : n = Q(o) : n = (b) => b.nextTransform;
1860
- const d = ((m = t == null ? void 0 : t.shift) == null ? void 0 : m.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
1861
- }), h = ((C = t == null ? void 0 : t.events) == null ? void 0 : C.onTransformChange) ?? (() => {
1862
- }), c = (z = t == null ? void 0 : t.shift) == null ? void 0 : z.mouseDownEventVerifier, a = c !== void 0 ? c : (b) => b.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, u = l !== void 0 ? l : (b) => b.button === 0, f = (D = t == null ? void 0 : t.scale) == null ? void 0 : D.mouseWheelEventVerifier, A = f !== void 0 ? f : () => !0;
1952
+ ) : n = q(o) : n = (b) => b.nextTransform;
1953
+ const d = ((p = t == null ? void 0 : t.shift) == null ? void 0 : p.cursor) !== void 0 ? t.shift.cursor : "grab", s = ((E = t == null ? void 0 : t.events) == null ? void 0 : E.onBeforeTransformChange) ?? (() => {
1954
+ }), h = ((m = t == null ? void 0 : t.events) == null ? void 0 : m.onTransformChange) ?? (() => {
1955
+ }), c = (H = t == null ? void 0 : t.shift) == null ? void 0 : H.mouseDownEventVerifier, a = c !== void 0 ? c : (b) => b.button === 0, l = (P = t == null ? void 0 : t.shift) == null ? void 0 : P.mouseUpEventVerifier, g = l !== void 0 ? l : (b) => b.button === 0, f = (V = t == null ? void 0 : t.scale) == null ? void 0 : V.mouseWheelEventVerifier, x = f !== void 0 ? f : () => !0;
1863
1956
  return {
1864
1957
  wheelSensitivity: r,
1865
1958
  onTransformStarted: ((L = t == null ? void 0 : t.events) == null ? void 0 : L.onTransformStarted) ?? (() => {
1866
1959
  }),
1867
- onTransformFinished: ((K = t == null ? void 0 : t.events) == null ? void 0 : K.onTransformFinished) ?? (() => {
1960
+ onTransformFinished: ((_ = t == null ? void 0 : t.events) == null ? void 0 : _.onTransformFinished) ?? (() => {
1868
1961
  }),
1869
1962
  onBeforeTransformChange: s,
1870
1963
  onTransformChange: h,
1871
1964
  transformPreprocessor: n,
1872
1965
  shiftCursor: d,
1873
1966
  mouseDownEventVerifier: a,
1874
- mouseUpEventVerifier: u,
1875
- mouseWheelEventVerifier: A
1967
+ mouseUpEventVerifier: g,
1968
+ mouseWheelEventVerifier: x,
1969
+ scaleWheelFinishTimeout: ((J = t == null ? void 0 : t.scale) == null ? void 0 : J.wheelFinishTimeout) ?? 500
1876
1970
  };
1877
- }, G = (t) => {
1971
+ }, W = (t) => {
1878
1972
  const e = [], r = t.touches.length;
1879
1973
  for (let h = 0; h < r; h++)
1880
1974
  e.push([t.touches[h].clientX, t.touches[h].clientY]);
@@ -1892,27 +1986,30 @@ const De = (t) => {
1892
1986
  touchesCnt: r,
1893
1987
  touches: e
1894
1988
  };
1895
- }, $e = (t, e, r) => ({
1989
+ }, ke = (t, e, r) => ({
1896
1990
  scale: t.scale,
1897
1991
  x: t.x + t.scale * e,
1898
1992
  y: t.y + t.scale * r
1899
- }), Ie = (t, e, r, o) => ({
1993
+ }), Ye = (t, e, r, o) => ({
1900
1994
  scale: t.scale * e,
1901
1995
  x: t.scale * (1 - e) * r + t.x,
1902
1996
  y: t.scale * (1 - e) * o + t.y
1903
1997
  });
1904
- class We {
1998
+ class ae {
1905
1999
  constructor(e, r) {
2000
+ i(this, "graph");
1906
2001
  i(this, "model");
2002
+ i(this, "viewport");
1907
2003
  i(this, "transformation");
1908
2004
  i(this, "element", null);
1909
2005
  i(this, "prevTouches", null);
1910
2006
  i(this, "window", window);
2007
+ i(this, "wheelFinishTimer", null);
1911
2008
  i(this, "onMouseDown", (e) => {
1912
- this.element === null || !this.options.mouseDownEventVerifier(e) || (F(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
2009
+ this.element === null || !this.options.mouseDownEventVerifier(e) || (B(this.element, this.options.shiftCursor), this.window.addEventListener("mousemove", this.onWindowMouseMove), this.window.addEventListener("mouseup", this.onWindowMouseUp), this.options.onTransformStarted());
1913
2010
  });
1914
2011
  i(this, "onWindowMouseMove", (e) => {
1915
- if (this.element === null || !W(this.element, e.clientX, e.clientY) || !R(this.window, e.clientX, e.clientY)) {
2012
+ if (this.element === null || !F(this.element, e.clientX, e.clientY) || !R(this.window, e.clientX, e.clientY)) {
1916
2013
  this.stopMouseDrag();
1917
2014
  return;
1918
2015
  }
@@ -1925,20 +2022,26 @@ class We {
1925
2022
  i(this, "onWheelScroll", (e) => {
1926
2023
  if (!this.options.mouseWheelEventVerifier(e))
1927
2024
  return;
1928
- e.preventDefault(), this.options.onTransformStarted();
2025
+ e.preventDefault();
1929
2026
  const { left: r, top: o } = this.element.getBoundingClientRect(), n = e.clientX - r, d = e.clientY - o, h = 1 / (e.deltaY < 0 ? this.options.wheelSensitivity : 1 / this.options.wheelSensitivity);
1930
- this.scaleViewport(this.element, h, n, d), this.options.onTransformFinished();
2027
+ this.wheelFinishTimer === null && this.options.onTransformStarted(), this.scaleViewport(this.element, h, n, d), this.wheelFinishTimer !== null && clearTimeout(this.wheelFinishTimer), this.wheelFinishTimer = setTimeout(() => {
2028
+ this.options.onTransformFinished(), this.wheelFinishTimer = null;
2029
+ }, this.options.scaleWheelFinishTimeout);
1931
2030
  });
1932
2031
  i(this, "onTouchStart", (e) => {
1933
- this.prevTouches = G(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
2032
+ if (this.prevTouches !== null) {
2033
+ this.prevTouches = W(e);
2034
+ return;
2035
+ }
2036
+ this.prevTouches = W(e), this.window.addEventListener("touchmove", this.onWindowTouchMove), this.window.addEventListener("touchend", this.onWindowTouchFinish), this.window.addEventListener("touchcancel", this.onWindowTouchFinish), this.options.onTransformStarted();
1934
2037
  });
1935
2038
  i(this, "onWindowTouchMove", (e) => {
1936
2039
  const r = this.element;
1937
2040
  if (r === null)
1938
2041
  return;
1939
- const o = G(e);
2042
+ const o = W(e);
1940
2043
  if (!o.touches.every(
1941
- (d) => W(r, d[0], d[1]) && R(this.window, d[0], d[1])
2044
+ (d) => F(r, d[0], d[1]) && R(this.window, d[0], d[1])
1942
2045
  )) {
1943
2046
  this.stopTouchDrag();
1944
2047
  return;
@@ -1954,19 +2057,19 @@ class We {
1954
2057
  this.prevTouches = o;
1955
2058
  });
1956
2059
  i(this, "onWindowTouchFinish", (e) => {
1957
- e.touches.length > 0 ? this.prevTouches = G(e) : this.stopTouchDrag();
2060
+ e.touches.length > 0 ? this.prevTouches = W(e) : this.stopTouchDrag();
1958
2061
  });
1959
2062
  i(this, "observer", new ResizeObserver(() => {
1960
- const e = this.canvas.transformation.getViewportMatrix(), { width: r, height: o } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
2063
+ const e = this.canvas.viewport.getViewportMatrix(), { width: r, height: o } = this.element.getBoundingClientRect(), n = this.options.transformPreprocessor({
1961
2064
  prevTransform: e,
1962
2065
  nextTransform: e,
1963
2066
  canvasWidth: r,
1964
2067
  canvasHeight: o
1965
2068
  });
1966
- this.canvas.patchViewportMatrix(n), this.options.onTransformChange();
2069
+ this.canvas.patchViewportMatrix(n);
1967
2070
  }));
1968
2071
  i(this, "options");
1969
- this.canvas = e, this.options = Ve(r), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
2072
+ this.canvas = e, this.options = Be(r), this.viewport = this.canvas.viewport, this.transformation = this.viewport, this.graph = this.canvas.graph, this.model = this.graph;
1970
2073
  }
1971
2074
  attach(e) {
1972
2075
  return this.detach(), this.element = e, this.observer.observe(this.element), this.element.addEventListener("mousedown", this.onMouseDown), this.element.addEventListener("wheel", this.onWheelScroll), this.element.addEventListener("touchstart", this.onTouchStart), this.canvas.attach(this.element), this;
@@ -2014,27 +2117,25 @@ class We {
2014
2117
  this.detach(), this.removeMouseDragListeners(), this.removeTouchDragListeners(), this.canvas.destroy();
2015
2118
  }
2016
2119
  moveViewport(e, r, o) {
2017
- this.options.onBeforeTransformChange();
2018
- const n = this.transformation.getViewportMatrix(), d = $e(n, r, o), { width: s, height: h } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
2120
+ const n = this.viewport.getViewportMatrix(), d = ke(n, r, o), { width: s, height: h } = e.getBoundingClientRect(), c = this.options.transformPreprocessor({
2019
2121
  prevTransform: n,
2020
2122
  nextTransform: d,
2021
2123
  canvasWidth: s,
2022
2124
  canvasHeight: h
2023
2125
  });
2024
- this.canvas.patchViewportMatrix(c), this.options.onTransformChange();
2126
+ this.performTransform(c);
2025
2127
  }
2026
2128
  scaleViewport(e, r, o, n) {
2027
- this.options.onBeforeTransformChange();
2028
- const d = this.canvas.transformation.getViewportMatrix(), s = Ie(d, r, o, n), { width: h, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
2129
+ const d = this.canvas.viewport.getViewportMatrix(), s = Ye(d, r, o, n), { width: h, height: c } = e.getBoundingClientRect(), a = this.options.transformPreprocessor({
2029
2130
  prevTransform: d,
2030
2131
  nextTransform: s,
2031
2132
  canvasWidth: h,
2032
2133
  canvasHeight: c
2033
2134
  });
2034
- this.canvas.patchViewportMatrix(a), this.options.onTransformChange();
2135
+ this.performTransform(a);
2035
2136
  }
2036
2137
  stopMouseDrag() {
2037
- this.element !== null && F(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
2138
+ this.element !== null && B(this.element, null), this.removeMouseDragListeners(), this.options.onTransformFinished();
2038
2139
  }
2039
2140
  removeMouseDragListeners() {
2040
2141
  this.window.removeEventListener("mousemove", this.onWindowMouseMove), this.window.removeEventListener("mouseup", this.onWindowMouseUp);
@@ -2045,8 +2146,11 @@ class We {
2045
2146
  removeTouchDragListeners() {
2046
2147
  this.window.removeEventListener("touchmove", this.onWindowTouchMove), this.window.removeEventListener("touchend", this.onWindowTouchFinish), this.window.removeEventListener("touchcancel", this.onWindowTouchFinish);
2047
2148
  }
2149
+ performTransform(e) {
2150
+ this.options.onBeforeTransformChange(), this.canvas.patchViewportMatrix(e), this.options.onTransformChange();
2151
+ }
2048
2152
  }
2049
- class Re {
2153
+ class Xe {
2050
2154
  constructor() {
2051
2155
  i(this, "keyMap", /* @__PURE__ */ new Map());
2052
2156
  i(this, "valueMap", /* @__PURE__ */ new Map());
@@ -2083,21 +2187,24 @@ class Re {
2083
2187
  this.keyMap.clear(), this.valueMap.clear();
2084
2188
  }
2085
2189
  }
2086
- class Fe {
2190
+ class ze {
2087
2191
  constructor(e) {
2192
+ i(this, "viewport");
2088
2193
  i(this, "transformation");
2194
+ i(this, "graph");
2089
2195
  i(this, "model");
2090
- i(this, "nodes", new Re());
2091
- i(this, "nodeIdGenerator", new U(
2196
+ i(this, "nodes", new Xe());
2197
+ i(this, "nodeIdGenerator", new D(
2092
2198
  (e) => this.nodes.hasKey(e)
2093
2199
  ));
2094
2200
  i(this, "nodesResizeObserver");
2095
- this.canvas = e, this.nodesResizeObserver = new window.ResizeObserver((r) => {
2201
+ i(this, "window", window);
2202
+ this.canvas = e, this.nodesResizeObserver = new this.window.ResizeObserver((r) => {
2096
2203
  r.forEach((o) => {
2097
2204
  const n = o.target;
2098
2205
  this.handleNodeResize(n);
2099
2206
  });
2100
- }), this.transformation = this.canvas.transformation, this.model = this.canvas.model;
2207
+ }), this.viewport = this.canvas.viewport, this.transformation = this.viewport, this.graph = this.canvas.graph, this.model = this.graph;
2101
2208
  }
2102
2209
  attach(e) {
2103
2210
  return this.canvas.attach(e), this;
@@ -2152,23 +2259,144 @@ class Fe {
2152
2259
  }
2153
2260
  handleNodeResize(e) {
2154
2261
  const r = this.nodes.getByValue(e);
2155
- this.canvas.updateNode(r), this.model.getNodeAdjacentEdgeIds(r).forEach((n) => {
2262
+ this.canvas.updateNode(r), this.graph.getNodeAdjacentEdgeIds(r).forEach((n) => {
2156
2263
  this.canvas.updateEdge(n);
2157
2264
  });
2158
2265
  }
2159
2266
  }
2160
- class Ye {
2267
+ class He {
2268
+ constructor(e, r, o, n) {
2269
+ i(this, "graph");
2270
+ i(this, "model");
2271
+ i(this, "viewport");
2272
+ i(this, "transformation");
2273
+ i(this, "canvas");
2274
+ i(this, "element", null);
2275
+ i(this, "canvasResizeObserver");
2276
+ i(this, "window", window);
2277
+ i(this, "nodeHorizontal");
2278
+ i(this, "nodeVertical");
2279
+ i(this, "viewportWidth", 0);
2280
+ i(this, "viewportHeight", 0);
2281
+ i(this, "viewportMatrix");
2282
+ i(this, "loadedArea", {
2283
+ xFrom: 1 / 0,
2284
+ xTo: 1 / 0,
2285
+ yFrom: 1 / 0,
2286
+ yTo: 1 / 0
2287
+ });
2288
+ i(this, "updateLoadedArea", (e) => {
2289
+ this.loadedArea = {
2290
+ xFrom: e.x,
2291
+ xTo: e.x + e.width,
2292
+ yFrom: e.y,
2293
+ yTo: e.y + e.height
2294
+ };
2295
+ });
2296
+ var c, a;
2297
+ this.trigger = r, this.virtualScrollOptions = n, this.nodeHorizontal = this.virtualScrollOptions.maxNodeContainingRadius.horizontal, this.nodeVertical = this.virtualScrollOptions.maxNodeContainingRadius.vertical, this.canvasResizeObserver = new this.window.ResizeObserver((l) => {
2298
+ const g = l[0];
2299
+ this.viewportWidth = g.contentRect.width, this.viewportHeight = g.contentRect.height, this.scheduleLoadAreaAroundViewport();
2300
+ });
2301
+ const d = ((c = o == null ? void 0 : o.events) == null ? void 0 : c.onTransformFinished) ?? (() => {
2302
+ }), s = ((a = o == null ? void 0 : o.events) == null ? void 0 : a.onTransformChange) ?? (() => {
2303
+ }), h = {
2304
+ ...o,
2305
+ events: {
2306
+ ...o == null ? void 0 : o.events,
2307
+ onTransformChange: () => {
2308
+ const l = this.viewportMatrix;
2309
+ this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), l.scale !== this.viewportMatrix.scale && this.scheduleEnsureViewportAreaLoaded(), s();
2310
+ },
2311
+ onTransformFinished: () => {
2312
+ this.scheduleLoadAreaAroundViewport(), d();
2313
+ }
2314
+ }
2315
+ };
2316
+ this.canvas = new ae(
2317
+ e,
2318
+ h
2319
+ ), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.viewport = this.canvas.viewport, this.transformation = this.viewport, this.graph = this.canvas.graph, this.model = this.graph, this.trigger.subscribe(this.updateLoadedArea);
2320
+ }
2321
+ attach(e) {
2322
+ return this.detach(), this.element = e, this.canvasResizeObserver.observe(this.element), this.canvas.attach(e), this;
2323
+ }
2324
+ detach() {
2325
+ return this.element !== null && (this.canvasResizeObserver.unobserve(this.element), this.element = null, this.viewportWidth = 0, this.viewportHeight = 0), this.canvas.detach(), this;
2326
+ }
2327
+ addNode(e) {
2328
+ return this.canvas.addNode(e), this;
2329
+ }
2330
+ updateNode(e, r) {
2331
+ return this.canvas.updateNode(e, r), this;
2332
+ }
2333
+ removeNode(e) {
2334
+ return this.canvas.removeNode(e), this;
2335
+ }
2336
+ markPort(e) {
2337
+ return this.canvas.markPort(e), this;
2338
+ }
2339
+ updatePort(e, r) {
2340
+ return this.canvas.updatePort(e, r), this;
2341
+ }
2342
+ unmarkPort(e) {
2343
+ return this.canvas.unmarkPort(e), this;
2344
+ }
2345
+ addEdge(e) {
2346
+ return this.canvas.addEdge(e), this;
2347
+ }
2348
+ updateEdge(e, r) {
2349
+ return this.canvas.updateEdge(e, r), this;
2350
+ }
2351
+ removeEdge(e) {
2352
+ return this.canvas.removeEdge(e), this;
2353
+ }
2354
+ patchViewportMatrix(e) {
2355
+ return this.canvas.patchViewportMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport(), this;
2356
+ }
2357
+ patchContentMatrix(e) {
2358
+ return this.canvas.patchContentMatrix(e), this.viewportMatrix = this.canvas.viewport.getViewportMatrix(), this.loadAreaAroundViewport(), this;
2359
+ }
2360
+ clear() {
2361
+ return this.canvas.clear(), this;
2362
+ }
2363
+ destroy() {
2364
+ this.trigger.unsubscribe(this.updateLoadedArea), this.canvas.destroy();
2365
+ }
2366
+ scheduleLoadAreaAroundViewport() {
2367
+ setTimeout(() => {
2368
+ this.loadAreaAroundViewport();
2369
+ });
2370
+ }
2371
+ scheduleEnsureViewportAreaLoaded() {
2372
+ const e = this.viewportWidth * this.viewportMatrix.scale, r = this.viewportHeight * this.viewportMatrix.scale, o = this.viewportMatrix.x - this.nodeHorizontal, n = this.viewportMatrix.y - this.nodeVertical, d = this.viewportMatrix.x + e + this.nodeHorizontal, s = this.viewportMatrix.y + r + this.nodeVertical;
2373
+ this.loadedArea.xFrom < o && this.loadedArea.xTo > d && this.loadedArea.yFrom < n && this.loadedArea.yTo > s || this.scheduleLoadAreaAroundViewport();
2374
+ }
2375
+ loadAreaAroundViewport() {
2376
+ const e = this.viewportWidth * this.viewportMatrix.scale, r = this.viewportHeight * this.viewportMatrix.scale, o = this.viewportMatrix.x - e - this.nodeHorizontal, n = this.viewportMatrix.y - r - this.nodeVertical, d = 3 * e + 2 * this.nodeHorizontal, s = 3 * r + 2 * this.nodeVertical;
2377
+ this.trigger.emit({ x: o, y: n, width: d, height: s });
2378
+ }
2379
+ }
2380
+ class Ke {
2161
2381
  constructor() {
2162
2382
  i(this, "coreOptions", {});
2163
2383
  i(this, "dragOptions");
2164
2384
  i(this, "transformOptions");
2385
+ i(this, "virtualScrollOptions");
2165
2386
  i(this, "hasDraggableNode", !1);
2166
2387
  i(this, "hasTransformableViewport", !1);
2167
2388
  i(this, "hasResizeReactiveNodes", !1);
2389
+ i(this, "boxRenderingTrigger");
2168
2390
  }
2391
+ /**
2392
+ * specifies options for fundamental aspects of visualization
2393
+ */
2169
2394
  setOptions(e) {
2170
2395
  return this.coreOptions = e, this;
2171
2396
  }
2397
+ /**
2398
+ * enables nodes draggable bu user
2399
+ */
2172
2400
  setUserDraggableNodes(e) {
2173
2401
  return this.hasDraggableNode = !0, this.dragOptions = e, this;
2174
2402
  }
@@ -2179,32 +2407,58 @@ class Ye {
2179
2407
  setUserTransformableCanvas(e) {
2180
2408
  return this.setUserTransformableViewport(e);
2181
2409
  }
2410
+ /**
2411
+ * enables viewport transformable by user
2412
+ */
2182
2413
  setUserTransformableViewport(e) {
2183
2414
  return this.hasTransformableViewport = !0, this.transformOptions = e, this;
2184
2415
  }
2416
+ /**
2417
+ * enables automatic edges update on node resize
2418
+ */
2185
2419
  setResizeReactiveNodes() {
2186
2420
  return this.hasResizeReactiveNodes = !0, this;
2187
2421
  }
2422
+ /**
2423
+ * sets emitter for rendering graph inside bounded area
2424
+ */
2425
+ setBoxRenderingTrigger(e) {
2426
+ return this.boxRenderingTrigger = e, this;
2427
+ }
2428
+ setVirtualScroll(e) {
2429
+ return this.virtualScrollOptions = e, this;
2430
+ }
2431
+ /**
2432
+ * builds final canvas
2433
+ */
2188
2434
  build() {
2189
- const e = new be(this.coreOptions);
2190
- let r = new Ce(e);
2191
- return this.hasResizeReactiveNodes && (r = new Fe(r)), this.hasDraggableNode && (r = new Pe(r, this.dragOptions)), this.hasTransformableViewport && (r = new We(
2192
- r,
2435
+ let e = this.boxRenderingTrigger;
2436
+ this.virtualScrollOptions !== void 0 && e === void 0 && (e = new se());
2437
+ const r = e !== void 0 ? $e(e) : De, o = new Le(this.coreOptions, r);
2438
+ let n = new be(o);
2439
+ return this.hasResizeReactiveNodes && (n = new ze(n)), this.hasDraggableNode && (n = new We(n, this.dragOptions)), this.virtualScrollOptions !== void 0 ? n = new He(
2440
+ n,
2441
+ e,
2442
+ this.transformOptions,
2443
+ this.virtualScrollOptions
2444
+ ) : this.hasTransformableViewport && (n = new ae(
2445
+ n,
2193
2446
  this.transformOptions
2194
- )), r;
2447
+ )), n;
2195
2448
  }
2196
2449
  }
2197
2450
  export {
2198
- q as BezierEdgeShape,
2199
- Ye as CanvasBuilder,
2200
- ke as CanvasCore,
2201
- O as HorizontalEdgeShape,
2202
- Ye as HtmlGraphBuilder,
2203
- x as HtmlGraphError,
2204
- Fe as ResizeReactiveNodesCanvas,
2205
- ee as StraightEdgeShape,
2206
- Pe as UserDraggableNodesCanvas,
2207
- We as UserTransformableCanvas,
2208
- We as UserTransformableViewportCanvas,
2209
- te as VerticalEdgeShape
2451
+ ee as BezierEdgeShape,
2452
+ Ke as CanvasBuilder,
2453
+ Ge as CanvasCore,
2454
+ se as EventSubject,
2455
+ te as HorizontalEdgeShape,
2456
+ Ke as HtmlGraphBuilder,
2457
+ A as HtmlGraphError,
2458
+ ze as ResizeReactiveNodesCanvas,
2459
+ re as StraightEdgeShape,
2460
+ We as UserDraggableNodesCanvas,
2461
+ ae as UserTransformableCanvas,
2462
+ ae as UserTransformableViewportCanvas,
2463
+ oe as VerticalEdgeShape
2210
2464
  };