@html-graph/html-graph 7.9.0 → 8.1.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.
- package/dist/html-graph.d.ts +47 -88
- package/dist/html-graph.js +304 -336
- package/dist/html-graph.umd.cjs +1 -1
- package/package.json +1 -1
package/dist/html-graph.js
CHANGED
|
@@ -259,7 +259,7 @@ class j {
|
|
|
259
259
|
});
|
|
260
260
|
}
|
|
261
261
|
}
|
|
262
|
-
const
|
|
262
|
+
const x = () => {
|
|
263
263
|
const r = new j();
|
|
264
264
|
return [r, r];
|
|
265
265
|
};
|
|
@@ -279,7 +279,7 @@ class X {
|
|
|
279
279
|
this.counter = 0;
|
|
280
280
|
}
|
|
281
281
|
}
|
|
282
|
-
class
|
|
282
|
+
class A extends Error {
|
|
283
283
|
constructor() {
|
|
284
284
|
super(...arguments);
|
|
285
285
|
i(this, "name", "CanvasError");
|
|
@@ -300,8 +300,8 @@ class ve {
|
|
|
300
300
|
this.htmlView.attachNode(e);
|
|
301
301
|
});
|
|
302
302
|
i(this, "onAfterNodeUpdated", (e) => {
|
|
303
|
-
this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((
|
|
304
|
-
this.htmlView.renderEdge(
|
|
303
|
+
this.htmlView.updateNodePosition(e), this.graphStore.getNodeAdjacentEdgeIds(e).forEach((t) => {
|
|
304
|
+
this.htmlView.renderEdge(t);
|
|
305
305
|
});
|
|
306
306
|
});
|
|
307
307
|
i(this, "onAfterNodePriorityUpdated", (e) => {
|
|
@@ -313,8 +313,8 @@ class ve {
|
|
|
313
313
|
}), this.htmlView.detachNode(e);
|
|
314
314
|
});
|
|
315
315
|
i(this, "onAfterPortUpdated", (e) => {
|
|
316
|
-
this.graphStore.getPortAdjacentEdgeIds(e).forEach((
|
|
317
|
-
this.htmlView.renderEdge(
|
|
316
|
+
this.graphStore.getPortAdjacentEdgeIds(e).forEach((t) => {
|
|
317
|
+
this.htmlView.renderEdge(t);
|
|
318
318
|
});
|
|
319
319
|
});
|
|
320
320
|
i(this, "onBeforePortUnmarked", (e) => {
|
|
@@ -352,7 +352,7 @@ class ve {
|
|
|
352
352
|
this.onAfterEdgeShapeUpdated
|
|
353
353
|
), this.graphStore.onAfterEdgeUpdated.subscribe(this.onAfterEdgeUpdated), this.graphStore.onAfterEdgePriorityUpdated.subscribe(
|
|
354
354
|
this.onAfterEdgePriorityUpdated
|
|
355
|
-
), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] =
|
|
355
|
+
), this.graphStore.onBeforeEdgeRemoved.subscribe(this.onBeforeEdgeRemoved), this.graphStore.onBeforeClear.subscribe(this.onBeforeClear), [this.onBeforeDestroyEmitter, this.onBeforeDestroy] = x();
|
|
356
356
|
}
|
|
357
357
|
/**
|
|
358
358
|
* adds new node
|
|
@@ -360,9 +360,9 @@ class ve {
|
|
|
360
360
|
addNode(e) {
|
|
361
361
|
const t = this.nodeIdGenerator.create(e.id);
|
|
362
362
|
if (this.graphStore.hasNode(t))
|
|
363
|
-
throw new
|
|
363
|
+
throw new A("failed to add node with existing id");
|
|
364
364
|
if (this.graphStore.findNodeIdByElement(e.element) !== void 0)
|
|
365
|
-
throw new
|
|
365
|
+
throw new A(
|
|
366
366
|
"failed to add node with html element already in use by another node"
|
|
367
367
|
);
|
|
368
368
|
if (this.graphStore.addNode({
|
|
@@ -387,7 +387,7 @@ class ve {
|
|
|
387
387
|
*/
|
|
388
388
|
updateNode(e, t) {
|
|
389
389
|
if (!this.graphStore.hasNode(e))
|
|
390
|
-
throw new
|
|
390
|
+
throw new A("failed to update nonexistent node");
|
|
391
391
|
return this.graphStore.updateNode(e, t ?? {}), this;
|
|
392
392
|
}
|
|
393
393
|
/**
|
|
@@ -397,7 +397,7 @@ class ve {
|
|
|
397
397
|
*/
|
|
398
398
|
removeNode(e) {
|
|
399
399
|
if (!this.graphStore.hasNode(e))
|
|
400
|
-
throw new
|
|
400
|
+
throw new A("failed to remove nonexistent node");
|
|
401
401
|
return this.graphStore.removeNode(e), this;
|
|
402
402
|
}
|
|
403
403
|
/**
|
|
@@ -406,9 +406,9 @@ class ve {
|
|
|
406
406
|
markPort(e) {
|
|
407
407
|
const t = this.portIdGenerator.create(e.id);
|
|
408
408
|
if (this.graphStore.hasPort(t))
|
|
409
|
-
throw new
|
|
409
|
+
throw new A("failed to add port with existing id");
|
|
410
410
|
if (!this.graphStore.hasNode(e.nodeId))
|
|
411
|
-
throw new
|
|
411
|
+
throw new A("failed to mark port for nonexistent node");
|
|
412
412
|
return this.graphStore.addPort({
|
|
413
413
|
id: t,
|
|
414
414
|
element: e.element,
|
|
@@ -421,7 +421,7 @@ class ve {
|
|
|
421
421
|
*/
|
|
422
422
|
updatePort(e, t) {
|
|
423
423
|
if (!this.graphStore.hasPort(e))
|
|
424
|
-
throw new
|
|
424
|
+
throw new A("failed to update nonexistent port");
|
|
425
425
|
return this.graphStore.updatePort(e, t ?? {}), this;
|
|
426
426
|
}
|
|
427
427
|
/**
|
|
@@ -430,7 +430,7 @@ class ve {
|
|
|
430
430
|
*/
|
|
431
431
|
unmarkPort(e) {
|
|
432
432
|
if (!this.graphStore.hasPort(e))
|
|
433
|
-
throw new
|
|
433
|
+
throw new A("failed to unmark nonexistent port");
|
|
434
434
|
return this.graphStore.removePort(e), this;
|
|
435
435
|
}
|
|
436
436
|
/**
|
|
@@ -439,11 +439,11 @@ class ve {
|
|
|
439
439
|
addEdge(e) {
|
|
440
440
|
const t = this.edgeIdGenerator.create(e.id);
|
|
441
441
|
if (this.graphStore.hasEdge(t))
|
|
442
|
-
throw new
|
|
442
|
+
throw new A("failed to add edge with existing id");
|
|
443
443
|
if (!this.graphStore.hasPort(e.from))
|
|
444
|
-
throw new
|
|
444
|
+
throw new A("failed to add edge from nonexistent port");
|
|
445
445
|
if (!this.graphStore.hasPort(e.to))
|
|
446
|
-
throw new
|
|
446
|
+
throw new A("failed to add edge to nonexistent port");
|
|
447
447
|
return this.graphStore.addEdge({
|
|
448
448
|
id: t,
|
|
449
449
|
from: e.from,
|
|
@@ -457,7 +457,7 @@ class ve {
|
|
|
457
457
|
*/
|
|
458
458
|
updateEdge(e, t) {
|
|
459
459
|
if (!this.graphStore.hasEdge(e))
|
|
460
|
-
throw new
|
|
460
|
+
throw new A("failed to update nonexistent edge");
|
|
461
461
|
return this.graphStore.updateEdge(e, t ?? {}), this;
|
|
462
462
|
}
|
|
463
463
|
/**
|
|
@@ -465,7 +465,7 @@ class ve {
|
|
|
465
465
|
*/
|
|
466
466
|
removeEdge(e) {
|
|
467
467
|
if (!this.graphStore.hasEdge(e))
|
|
468
|
-
throw new
|
|
468
|
+
throw new A("failed to remove nonexistent edge");
|
|
469
469
|
return this.graphStore.removeEdge(e), this;
|
|
470
470
|
}
|
|
471
471
|
/**
|
|
@@ -577,17 +577,16 @@ class Ae {
|
|
|
577
577
|
i(this, "onBeforeEdgeRemoved");
|
|
578
578
|
i(this, "beforeClearEmitter");
|
|
579
579
|
i(this, "onBeforeClear");
|
|
580
|
-
[this.afterNodeAddedEmitter, this.onAfterNodeAdded] =
|
|
580
|
+
[this.afterNodeAddedEmitter, this.onAfterNodeAdded] = x(), [this.afterNodeUpdatedEmitter, this.onAfterNodeUpdated] = x(), [this.afterNodePriorityUpdatedEmitter, this.onAfterNodePriorityUpdated] = x(), [this.beforeNodeRemovedEmitter, this.onBeforeNodeRemoved] = x(), [this.afterPortAddedEmitter, this.onAfterPortAdded] = x(), [this.afterPortUpdatedEmitter, this.onAfterPortUpdated] = x(), [this.beforePortRemovedEmitter, this.onBeforePortRemoved] = x(), [this.afterEdgeAddedEmitter, this.onAfterEdgeAdded] = x(), [this.afterEdgeShapeUpdatedEmitter, this.onAfterEdgeShapeUpdated] = x(), [this.afterEdgeUpdatedEmitter, this.onAfterEdgeUpdated] = x(), [this.afterEdgePriorityUpdatedEmitter, this.onAfterEdgePriorityUpdated] = x(), [this.beforeEdgeRemovedEmitter, this.onBeforeEdgeRemoved] = x(), [this.beforeClearEmitter, this.onBeforeClear] = x();
|
|
581
581
|
}
|
|
582
582
|
hasNode(e) {
|
|
583
583
|
return this.nodes.has(e);
|
|
584
584
|
}
|
|
585
|
-
/**
|
|
586
|
-
* TODO: v8
|
|
587
|
-
* throw error when node does not exist
|
|
588
|
-
*/
|
|
589
585
|
getNode(e) {
|
|
590
|
-
|
|
586
|
+
const t = this.nodes.get(e);
|
|
587
|
+
if (t === void 0)
|
|
588
|
+
throw new A("failed to access nonexistent node");
|
|
589
|
+
return t;
|
|
591
590
|
}
|
|
592
591
|
addNode(e) {
|
|
593
592
|
const t = /* @__PURE__ */ new Map(), s = {
|
|
@@ -609,7 +608,7 @@ class Ae {
|
|
|
609
608
|
return this.nodesElementsMap.get(e);
|
|
610
609
|
}
|
|
611
610
|
updateNode(e, t) {
|
|
612
|
-
const s = this.nodes.get(e)
|
|
611
|
+
const { payload: s } = this.nodes.get(e);
|
|
613
612
|
s.x = t.x ?? s.x, s.y = t.y ?? s.y, s.centerFn = t.centerFn ?? s.centerFn, t.priority !== void 0 && (s.priority = t.priority, this.afterNodePriorityUpdatedEmitter.emit(e)), this.afterNodeUpdatedEmitter.emit(e);
|
|
614
613
|
}
|
|
615
614
|
removeNode(e) {
|
|
@@ -620,12 +619,11 @@ class Ae {
|
|
|
620
619
|
hasPort(e) {
|
|
621
620
|
return this.ports.has(e);
|
|
622
621
|
}
|
|
623
|
-
/**
|
|
624
|
-
* TODO: v8
|
|
625
|
-
* throw error when port does not exist
|
|
626
|
-
*/
|
|
627
622
|
getPort(e) {
|
|
628
|
-
|
|
623
|
+
const t = this.ports.get(e);
|
|
624
|
+
if (t === void 0)
|
|
625
|
+
throw new A("failed to access nonexistent port");
|
|
626
|
+
return t;
|
|
629
627
|
}
|
|
630
628
|
addPort(e) {
|
|
631
629
|
this.ports.set(e.id, {
|
|
@@ -648,8 +646,9 @@ class Ae {
|
|
|
648
646
|
}
|
|
649
647
|
getNodePortIds(e) {
|
|
650
648
|
const t = this.nodes.get(e);
|
|
651
|
-
if (t
|
|
652
|
-
|
|
649
|
+
if (t === void 0)
|
|
650
|
+
throw new A("failed to access port ids of nonexistent node");
|
|
651
|
+
return Array.from(t.ports.keys());
|
|
653
652
|
}
|
|
654
653
|
removePort(e) {
|
|
655
654
|
const t = this.ports.get(e).nodeId;
|
|
@@ -658,12 +657,11 @@ class Ae {
|
|
|
658
657
|
hasEdge(e) {
|
|
659
658
|
return this.edges.has(e);
|
|
660
659
|
}
|
|
661
|
-
/**
|
|
662
|
-
* TODO: v8
|
|
663
|
-
* throw error when edge does not exist
|
|
664
|
-
*/
|
|
665
660
|
getEdge(e) {
|
|
666
|
-
|
|
661
|
+
const t = this.edges.get(e);
|
|
662
|
+
if (t === void 0)
|
|
663
|
+
throw new A("failed to access nonexistent edge");
|
|
664
|
+
return t;
|
|
667
665
|
}
|
|
668
666
|
addEdge(e) {
|
|
669
667
|
this.addEdgeInternal(e), this.afterEdgeAddedEmitter.emit(e.id);
|
|
@@ -692,13 +690,22 @@ class Ae {
|
|
|
692
690
|
this.beforeClearEmitter.emit(), this.portIncomingEdges.clear(), this.portOutcomingEdges.clear(), this.portCycleEdges.clear(), this.elementPorts.clear(), this.nodesElementsMap.clear(), this.edges.clear(), this.ports.clear(), this.nodes.clear();
|
|
693
691
|
}
|
|
694
692
|
getPortIncomingEdgeIds(e) {
|
|
695
|
-
|
|
693
|
+
const t = this.portIncomingEdges.get(e);
|
|
694
|
+
if (t === void 0)
|
|
695
|
+
throw new A("failed to access edges for nonexistent port");
|
|
696
|
+
return Array.from(t);
|
|
696
697
|
}
|
|
697
698
|
getPortOutgoingEdgeIds(e) {
|
|
698
|
-
|
|
699
|
+
const t = this.portOutcomingEdges.get(e);
|
|
700
|
+
if (t === void 0)
|
|
701
|
+
throw new A("failed to access edges for nonexistent port");
|
|
702
|
+
return Array.from(t);
|
|
699
703
|
}
|
|
700
704
|
getPortCycleEdgeIds(e) {
|
|
701
|
-
|
|
705
|
+
const t = this.portCycleEdges.get(e);
|
|
706
|
+
if (t === void 0)
|
|
707
|
+
throw new A("failed to access edges for nonexistent port");
|
|
708
|
+
return Array.from(t);
|
|
702
709
|
}
|
|
703
710
|
getPortAdjacentEdgeIds(e) {
|
|
704
711
|
return [
|
|
@@ -708,7 +715,7 @@ class Ae {
|
|
|
708
715
|
];
|
|
709
716
|
}
|
|
710
717
|
getNodeIncomingEdgeIds(e) {
|
|
711
|
-
const t = Array.from(this.
|
|
718
|
+
const t = Array.from(this.getNode(e).ports.keys()), s = [];
|
|
712
719
|
return t.forEach((o) => {
|
|
713
720
|
this.getPortIncomingEdgeIds(o).filter((n) => {
|
|
714
721
|
const a = this.getEdge(n);
|
|
@@ -719,7 +726,7 @@ class Ae {
|
|
|
719
726
|
}), s;
|
|
720
727
|
}
|
|
721
728
|
getNodeOutgoingEdgeIds(e) {
|
|
722
|
-
const t = Array.from(this.
|
|
729
|
+
const t = Array.from(this.getNode(e).ports.keys()), s = [];
|
|
723
730
|
return t.forEach((o) => {
|
|
724
731
|
this.getPortOutgoingEdgeIds(o).filter((n) => {
|
|
725
732
|
const a = this.getEdge(n);
|
|
@@ -730,7 +737,7 @@ class Ae {
|
|
|
730
737
|
}), s;
|
|
731
738
|
}
|
|
732
739
|
getNodeCycleEdgeIds(e) {
|
|
733
|
-
const t = Array.from(this.
|
|
740
|
+
const t = Array.from(this.getNode(e).ports.keys()), s = [];
|
|
734
741
|
return t.forEach((o) => {
|
|
735
742
|
this.getPortCycleEdgeIds(o).forEach((n) => {
|
|
736
743
|
s.push(n);
|
|
@@ -743,7 +750,7 @@ class Ae {
|
|
|
743
750
|
}), s;
|
|
744
751
|
}
|
|
745
752
|
getNodeAdjacentEdgeIds(e) {
|
|
746
|
-
const t = Array.from(this.
|
|
753
|
+
const t = Array.from(this.getNode(e).ports.keys()), s = [];
|
|
747
754
|
return t.forEach((o) => {
|
|
748
755
|
this.getPortIncomingEdgeIds(o).forEach((n) => {
|
|
749
756
|
s.push(n);
|
|
@@ -794,7 +801,7 @@ class Qe {
|
|
|
794
801
|
i(this, "observer", new ResizeObserver(() => {
|
|
795
802
|
this.afterResizeEmitter.emit();
|
|
796
803
|
}));
|
|
797
|
-
this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] =
|
|
804
|
+
this.host = e, [this.afterUpdateEmitter, this.onAfterUpdated] = x(), [this.beforeUpdateEmitter, this.onBeforeUpdated] = x(), [this.afterResizeEmitter, this.onAfterResize] = x(), this.observer.observe(this.host);
|
|
798
805
|
}
|
|
799
806
|
getViewportMatrix() {
|
|
800
807
|
return this.viewportMatrix;
|
|
@@ -889,7 +896,7 @@ const Ze = (r, e, t) => {
|
|
|
889
896
|
status: "portFound",
|
|
890
897
|
portId: s
|
|
891
898
|
};
|
|
892
|
-
if (r.findNodeIdByElement(t) !==
|
|
899
|
+
if (r.findNodeIdByElement(t) !== void 0)
|
|
893
900
|
return {
|
|
894
901
|
status: "nodeEncountered"
|
|
895
902
|
};
|
|
@@ -921,7 +928,7 @@ const xe = (r, e) => {
|
|
|
921
928
|
}
|
|
922
929
|
return null;
|
|
923
930
|
};
|
|
924
|
-
var
|
|
931
|
+
var T = /* @__PURE__ */ ((r) => (r.StaticNodeId = "static", r.DraggingNodeId = "dragging", r.EdgeId = "edge", r))(T || {});
|
|
925
932
|
const Se = (r, e) => ({
|
|
926
933
|
x: r / 2,
|
|
927
934
|
y: e / 2
|
|
@@ -1009,24 +1016,24 @@ class tt {
|
|
|
1009
1016
|
}, w = {
|
|
1010
1017
|
x: (g.x + u.x) / 2,
|
|
1011
1018
|
y: (g.y + u.y) / 2
|
|
1012
|
-
},
|
|
1019
|
+
}, f = {
|
|
1013
1020
|
x: c.x + this.params.curvature * this.params.sourceDirection.x,
|
|
1014
1021
|
y: c.y + this.params.curvature * this.params.sourceDirection.y
|
|
1015
|
-
},
|
|
1022
|
+
}, E = {
|
|
1016
1023
|
x: l.x - this.params.curvature * this.params.targetDirection.x,
|
|
1017
1024
|
y: l.y - this.params.curvature * this.params.targetDirection.y
|
|
1018
|
-
},
|
|
1025
|
+
}, S = {
|
|
1019
1026
|
x: c.x + h,
|
|
1020
1027
|
y: c.y + d
|
|
1021
|
-
},
|
|
1028
|
+
}, b = {
|
|
1022
1029
|
x: l.x + h,
|
|
1023
1030
|
y: l.y + d
|
|
1024
1031
|
};
|
|
1025
1032
|
this.path = [
|
|
1026
1033
|
`M ${t.x} ${t.y}`,
|
|
1027
1034
|
`L ${c.x} ${c.y}`,
|
|
1028
|
-
`C ${
|
|
1029
|
-
`C ${
|
|
1035
|
+
`C ${f.x} ${f.y} ${S.x} ${S.y} ${w.x} ${w.y}`,
|
|
1036
|
+
`C ${b.x} ${b.y} ${E.x} ${E.y} ${l.x} ${l.y}`,
|
|
1030
1037
|
`L ${s.x} ${s.y}`
|
|
1031
1038
|
].join(" "), this.midpoint = W(w, e.flipX, e.flipY, e.to);
|
|
1032
1039
|
}
|
|
@@ -1036,13 +1043,13 @@ const K = Object.freeze({
|
|
|
1036
1043
|
}), Pe = (r) => {
|
|
1037
1044
|
const e = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
1038
1045
|
return e.style.pointerEvents = "none", e.style.position = "absolute", e.style.top = "0", e.style.left = "0", e.style.overflow = "visible", e.style.setProperty(K.edgeColor, r), e;
|
|
1039
|
-
},
|
|
1046
|
+
}, Te = (r) => {
|
|
1040
1047
|
const e = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1041
1048
|
return e.setAttribute("stroke", `var(${K.edgeColor})`), e.setAttribute("stroke-width", `${r}`), e.setAttribute("fill", "none"), e;
|
|
1042
1049
|
}, B = () => {
|
|
1043
1050
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "path");
|
|
1044
1051
|
return r.setAttribute("fill", `var(${K.edgeColor})`), r;
|
|
1045
|
-
},
|
|
1052
|
+
}, Ce = () => {
|
|
1046
1053
|
const r = document.createElementNS("http://www.w3.org/2000/svg", "g");
|
|
1047
1054
|
return r.style.transformOrigin = "50% 50%", r;
|
|
1048
1055
|
}, Ne = (r, e) => {
|
|
@@ -1054,14 +1061,14 @@ const K = Object.freeze({
|
|
|
1054
1061
|
let o = 0, n = 0, a = 0;
|
|
1055
1062
|
r.forEach((h, d) => {
|
|
1056
1063
|
let c = 0, g = 0, l = 0;
|
|
1057
|
-
const u = d > 0, w = d < s,
|
|
1064
|
+
const u = d > 0, w = d < s, f = u && w;
|
|
1058
1065
|
if (u && (c = -o, g = -n, l = a), w) {
|
|
1059
1066
|
const V = r[d + 1];
|
|
1060
1067
|
o = V.x - h.x, n = V.y - h.y, a = Math.sqrt(o * o + n * n);
|
|
1061
1068
|
}
|
|
1062
|
-
const
|
|
1063
|
-
d > 0 && t.push(`L ${R.x} ${R.y}`),
|
|
1064
|
-
`C ${h.x} ${h.y} ${h.x} ${h.y} ${
|
|
1069
|
+
const S = a !== 0 ? Math.min((f ? e : 0) / a, d < s - 1 ? 0.5 : 1) : 0, b = f ? { x: h.x + o * S, y: h.y + n * S } : h, P = l !== 0 ? Math.min((f ? e : 0) / l, d > 1 ? 0.5 : 1) : 0, R = f ? { x: h.x + c * P, y: h.y + g * P } : h;
|
|
1070
|
+
d > 0 && t.push(`L ${R.x} ${R.y}`), f && t.push(
|
|
1071
|
+
`C ${h.x} ${h.y} ${h.x} ${h.y} ${b.x} ${b.y}`
|
|
1065
1072
|
);
|
|
1066
1073
|
});
|
|
1067
1074
|
}
|
|
@@ -1099,9 +1106,9 @@ class rt {
|
|
|
1099
1106
|
}, u = { x: l.x, y: g }, w = {
|
|
1100
1107
|
x: this.params.flipX > 0 ? this.params.to.x - c : this.params.to.x + n,
|
|
1101
1108
|
y: d.y
|
|
1102
|
-
},
|
|
1109
|
+
}, f = { x: w.x, y: g };
|
|
1103
1110
|
this.path = D(
|
|
1104
|
-
[s, h, l, u,
|
|
1111
|
+
[s, h, l, u, f, w, d, o],
|
|
1105
1112
|
this.params.roundness
|
|
1106
1113
|
);
|
|
1107
1114
|
}
|
|
@@ -1199,9 +1206,9 @@ class it {
|
|
|
1199
1206
|
}, u = { x: g, y: l.y }, w = {
|
|
1200
1207
|
x: d.x,
|
|
1201
1208
|
y: this.params.flipY > 0 ? this.params.to.y - c : this.params.to.y + n
|
|
1202
|
-
},
|
|
1209
|
+
}, f = { x: g, y: w.y };
|
|
1203
1210
|
this.path = D(
|
|
1204
|
-
[s, h, l, u,
|
|
1211
|
+
[s, h, l, u, f, w, d, o],
|
|
1205
1212
|
this.params.roundness
|
|
1206
1213
|
);
|
|
1207
1214
|
}
|
|
@@ -1237,7 +1244,7 @@ class nt {
|
|
|
1237
1244
|
{ x: c, y: -n },
|
|
1238
1245
|
{ x: d, y: 0 }
|
|
1239
1246
|
].map(
|
|
1240
|
-
(
|
|
1247
|
+
(f) => m(f, this.params.sourceDirection, p)
|
|
1241
1248
|
), u = [
|
|
1242
1249
|
`M ${l[0].x} ${l[0].y}`,
|
|
1243
1250
|
`A ${t} ${t} 0 0 1 ${l[1].x} ${l[1].y}`,
|
|
@@ -1365,7 +1372,7 @@ class dt {
|
|
|
1365
1372
|
);
|
|
1366
1373
|
}
|
|
1367
1374
|
}
|
|
1368
|
-
const
|
|
1375
|
+
const y = Object.freeze({
|
|
1369
1376
|
color: "#777777",
|
|
1370
1377
|
width: 1,
|
|
1371
1378
|
arrowLength: 20,
|
|
@@ -1391,14 +1398,14 @@ const f = Object.freeze({
|
|
|
1391
1398
|
class k {
|
|
1392
1399
|
constructor(e) {
|
|
1393
1400
|
i(this, "svg");
|
|
1394
|
-
i(this, "group",
|
|
1401
|
+
i(this, "group", Ce());
|
|
1395
1402
|
i(this, "line");
|
|
1396
1403
|
i(this, "sourceArrow", null);
|
|
1397
1404
|
i(this, "targetArrow", null);
|
|
1398
1405
|
i(this, "onAfterRender");
|
|
1399
1406
|
i(this, "afterRenderEmitter");
|
|
1400
1407
|
i(this, "arrowRenderer");
|
|
1401
|
-
this.params = e, [this.afterRenderEmitter, this.onAfterRender] =
|
|
1408
|
+
this.params = e, [this.afterRenderEmitter, this.onAfterRender] = x(), this.arrowRenderer = this.params.arrowRenderer, this.svg = Pe(e.color), this.svg.appendChild(this.group), this.line = Te(e.width), this.group.appendChild(this.line), e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
|
|
1402
1409
|
}
|
|
1403
1410
|
render(e) {
|
|
1404
1411
|
const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
|
|
@@ -1428,21 +1435,21 @@ class k {
|
|
|
1428
1435
|
h
|
|
1429
1436
|
);
|
|
1430
1437
|
this.line.setAttribute("d", w.path);
|
|
1431
|
-
let
|
|
1432
|
-
this.sourceArrow && (
|
|
1438
|
+
let f = null;
|
|
1439
|
+
this.sourceArrow && (f = this.arrowRenderer({
|
|
1433
1440
|
direction: d,
|
|
1434
1441
|
shift: p,
|
|
1435
1442
|
arrowLength: this.params.arrowLength
|
|
1436
|
-
}), this.sourceArrow.setAttribute("d",
|
|
1437
|
-
let
|
|
1438
|
-
this.targetArrow && (
|
|
1443
|
+
}), this.sourceArrow.setAttribute("d", f));
|
|
1444
|
+
let E = null;
|
|
1445
|
+
this.targetArrow && (E = this.arrowRenderer({
|
|
1439
1446
|
direction: l,
|
|
1440
1447
|
shift: g,
|
|
1441
1448
|
arrowLength: this.params.arrowLength
|
|
1442
|
-
}), this.targetArrow.setAttribute("d",
|
|
1449
|
+
}), this.targetArrow.setAttribute("d", E)), this.afterRenderEmitter.emit({
|
|
1443
1450
|
edgePath: w,
|
|
1444
|
-
sourceArrowPath:
|
|
1445
|
-
targetArrowPath:
|
|
1451
|
+
sourceArrowPath: f,
|
|
1452
|
+
targetArrowPath: E
|
|
1446
1453
|
});
|
|
1447
1454
|
}
|
|
1448
1455
|
}
|
|
@@ -1460,10 +1467,10 @@ const ct = (r) => (e) => {
|
|
|
1460
1467
|
return `${o} ${n} ${a} Z`;
|
|
1461
1468
|
}, lt = (r) => (e) => {
|
|
1462
1469
|
const t = r.radius, s = e.arrowLength, o = (s * s + 2 * s * t) / (2 * t), n = o + t, a = s + t - t * (s + t) / n, h = t * o / n, c = [p, { x: a, y: -h }, { x: a, y: h }].map(
|
|
1463
|
-
(
|
|
1464
|
-
).map((
|
|
1465
|
-
x:
|
|
1466
|
-
y:
|
|
1470
|
+
(f) => m(f, e.direction, p)
|
|
1471
|
+
).map((f) => ({
|
|
1472
|
+
x: f.x + e.shift.x,
|
|
1473
|
+
y: f.y + e.shift.y
|
|
1467
1474
|
})), g = `M ${c[0].x} ${c[0].y}`, l = `A ${o} ${o} 0 0 0 ${c[1].x} ${c[1].y}`, u = `A ${t} ${t} 0 0 0 ${c[2].x} ${c[2].y}`, w = `A ${o} ${o} 0 0 0 ${c[0].x} ${c[0].y}`;
|
|
1468
1475
|
return `${g} ${l} ${u} ${w}`;
|
|
1469
1476
|
}, gt = (r) => (e) => {
|
|
@@ -1493,17 +1500,17 @@ const ct = (r) => (e) => {
|
|
|
1493
1500
|
switch (r.type) {
|
|
1494
1501
|
case "triangle":
|
|
1495
1502
|
return ct({
|
|
1496
|
-
radius: r.radius ??
|
|
1503
|
+
radius: r.radius ?? y.polygonArrowRadius
|
|
1497
1504
|
});
|
|
1498
1505
|
case "arc":
|
|
1499
1506
|
return lt({
|
|
1500
|
-
radius: r.radius ??
|
|
1507
|
+
radius: r.radius ?? y.circleArrowRadius
|
|
1501
1508
|
});
|
|
1502
1509
|
default:
|
|
1503
1510
|
return gt({
|
|
1504
|
-
smallRadius: r.smallRadius ??
|
|
1505
|
-
angle: r.angle ??
|
|
1506
|
-
radius: r.radius ??
|
|
1511
|
+
smallRadius: r.smallRadius ?? y.wedgeArrowSmallRadius,
|
|
1512
|
+
angle: r.angle ?? y.wedgeArrowAngle,
|
|
1513
|
+
radius: r.radius ?? y.wedgeArrowRadius
|
|
1507
1514
|
});
|
|
1508
1515
|
}
|
|
1509
1516
|
};
|
|
@@ -1554,9 +1561,9 @@ class ut {
|
|
|
1554
1561
|
hasSourceArrow: this.hasSourceArrow,
|
|
1555
1562
|
hasTargetArrow: this.hasTargetArrow
|
|
1556
1563
|
}));
|
|
1557
|
-
this.arrowLength = (e == null ? void 0 : e.arrowLength) ??
|
|
1558
|
-
color: (e == null ? void 0 : e.color) ??
|
|
1559
|
-
width: (e == null ? void 0 : e.width) ??
|
|
1564
|
+
this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.curvature = (e == null ? void 0 : e.curvature) ?? y.curvature, this.portCycleRadius = (e == null ? void 0 : e.cycleRadius) ?? y.cycleRadius, this.portCycleSmallRadius = (e == null ? void 0 : e.smallCycleRadius) ?? y.smallCycleRadius, this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
|
|
1565
|
+
color: (e == null ? void 0 : e.color) ?? y.color,
|
|
1566
|
+
width: (e == null ? void 0 : e.width) ?? y.width,
|
|
1560
1567
|
arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
|
|
1561
1568
|
arrowLength: this.arrowLength,
|
|
1562
1569
|
hasSourceArrow: this.hasSourceArrow,
|
|
@@ -1619,15 +1626,15 @@ class pt {
|
|
|
1619
1626
|
hasSourceArrow: this.hasSourceArrow,
|
|
1620
1627
|
hasTargetArrow: this.hasTargetArrow
|
|
1621
1628
|
}));
|
|
1622
|
-
this.arrowLength = (e == null ? void 0 : e.arrowLength) ??
|
|
1623
|
-
const t = (e == null ? void 0 : e.roundness) ??
|
|
1629
|
+
this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
|
|
1630
|
+
const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
|
|
1624
1631
|
this.roundness = Math.min(
|
|
1625
1632
|
t,
|
|
1626
1633
|
this.arrowOffset,
|
|
1627
1634
|
this.cycleSquareSide / 2
|
|
1628
|
-
), this.detourDistance = (e == null ? void 0 : e.detourDistance) ??
|
|
1629
|
-
color: (e == null ? void 0 : e.color) ??
|
|
1630
|
-
width: (e == null ? void 0 : e.width) ??
|
|
1635
|
+
), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
|
|
1636
|
+
color: (e == null ? void 0 : e.color) ?? y.color,
|
|
1637
|
+
width: (e == null ? void 0 : e.width) ?? y.width,
|
|
1631
1638
|
arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
|
|
1632
1639
|
arrowLength: this.arrowLength,
|
|
1633
1640
|
hasSourceArrow: this.hasSourceArrow,
|
|
@@ -1691,15 +1698,15 @@ class wt {
|
|
|
1691
1698
|
hasSourceArrow: this.hasSourceArrow,
|
|
1692
1699
|
hasTargetArrow: this.hasTargetArrow
|
|
1693
1700
|
}));
|
|
1694
|
-
this.arrowLength = (e == null ? void 0 : e.arrowLength) ??
|
|
1695
|
-
const t = (e == null ? void 0 : e.roundness) ??
|
|
1701
|
+
this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
|
|
1702
|
+
const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
|
|
1696
1703
|
this.roundness = Math.min(
|
|
1697
1704
|
t,
|
|
1698
1705
|
this.arrowOffset,
|
|
1699
1706
|
this.cycleSquareSide / 2
|
|
1700
|
-
), this.detourDirection = (e == null ? void 0 : e.detourDirection) ??
|
|
1701
|
-
color: (e == null ? void 0 : e.color) ??
|
|
1702
|
-
width: (e == null ? void 0 : e.width) ??
|
|
1707
|
+
), this.detourDirection = (e == null ? void 0 : e.detourDirection) ?? y.detourDirection, this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
|
|
1708
|
+
color: (e == null ? void 0 : e.color) ?? y.color,
|
|
1709
|
+
width: (e == null ? void 0 : e.width) ?? y.width,
|
|
1703
1710
|
arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
|
|
1704
1711
|
arrowLength: this.arrowLength,
|
|
1705
1712
|
hasSourceArrow: this.hasSourceArrow,
|
|
@@ -1762,15 +1769,15 @@ class ft {
|
|
|
1762
1769
|
hasSourceArrow: this.hasSourceArrow,
|
|
1763
1770
|
hasTargetArrow: this.hasTargetArrow
|
|
1764
1771
|
}));
|
|
1765
|
-
this.arrowLength = (e == null ? void 0 : e.arrowLength) ??
|
|
1766
|
-
const t = (e == null ? void 0 : e.roundness) ??
|
|
1772
|
+
this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowOffset = (e == null ? void 0 : e.arrowOffset) ?? y.arrowOffset, this.cycleSquareSide = (e == null ? void 0 : e.cycleSquareSide) ?? y.cycleSquareSide;
|
|
1773
|
+
const t = (e == null ? void 0 : e.roundness) ?? y.roundness;
|
|
1767
1774
|
this.roundness = Math.min(
|
|
1768
1775
|
t,
|
|
1769
1776
|
this.arrowOffset,
|
|
1770
1777
|
this.cycleSquareSide / 2
|
|
1771
|
-
), this.detourDistance = (e == null ? void 0 : e.detourDistance) ??
|
|
1772
|
-
color: (e == null ? void 0 : e.color) ??
|
|
1773
|
-
width: (e == null ? void 0 : e.width) ??
|
|
1778
|
+
), this.detourDistance = (e == null ? void 0 : e.detourDistance) ?? y.detourDistance, this.hasSourceArrow = (e == null ? void 0 : e.hasSourceArrow) ?? y.hasSourceArrow, this.hasTargetArrow = (e == null ? void 0 : e.hasTargetArrow) ?? y.hasTargetArrow, this.pathShape = new k({
|
|
1779
|
+
color: (e == null ? void 0 : e.color) ?? y.color,
|
|
1780
|
+
width: (e == null ? void 0 : e.width) ?? y.width,
|
|
1774
1781
|
arrowRenderer: F((e == null ? void 0 : e.arrowRenderer) ?? {}),
|
|
1775
1782
|
arrowLength: this.arrowLength,
|
|
1776
1783
|
hasSourceArrow: this.hasSourceArrow,
|
|
@@ -1787,7 +1794,7 @@ class ft {
|
|
|
1787
1794
|
class De {
|
|
1788
1795
|
constructor(e) {
|
|
1789
1796
|
i(this, "svg");
|
|
1790
|
-
i(this, "group",
|
|
1797
|
+
i(this, "group", Ce());
|
|
1791
1798
|
i(this, "line");
|
|
1792
1799
|
i(this, "sourceArrow", null);
|
|
1793
1800
|
i(this, "targetArrow", null);
|
|
@@ -1799,7 +1806,7 @@ class De {
|
|
|
1799
1806
|
i(this, "onAfterRender");
|
|
1800
1807
|
i(this, "afterRenderEmitter");
|
|
1801
1808
|
i(this, "arrowRenderer");
|
|
1802
|
-
[this.afterRenderEmitter, this.onAfterRender] =
|
|
1809
|
+
[this.afterRenderEmitter, this.onAfterRender] = x(), this.color = (e == null ? void 0 : e.color) ?? y.color, this.width = (e == null ? void 0 : e.width) ?? y.width, this.arrowLength = (e == null ? void 0 : e.arrowLength) ?? y.arrowLength, this.arrowRenderer = F((e == null ? void 0 : e.arrowRenderer) ?? {}), this.sourceOffset = (e == null ? void 0 : e.sourceOffset) ?? y.preOffset, this.targetOffset = (e == null ? void 0 : e.targetOffset) ?? y.preOffset, this.svg = Pe(this.color), this.svg.appendChild(this.group), this.line = Te(this.width), this.group.appendChild(this.line), e != null && e.hasSourceArrow && (this.sourceArrow = B(), this.group.appendChild(this.sourceArrow)), e != null && e.hasTargetArrow && (this.targetArrow = B(), this.group.appendChild(this.targetArrow));
|
|
1803
1810
|
}
|
|
1804
1811
|
render(e) {
|
|
1805
1812
|
const { x: t, y: s, width: o, height: n, flipX: a, flipY: h } = be(
|
|
@@ -1826,26 +1833,26 @@ class De {
|
|
|
1826
1833
|
y: d.y / u
|
|
1827
1834
|
};
|
|
1828
1835
|
if (this.sourceArrow) {
|
|
1829
|
-
const
|
|
1836
|
+
const f = {
|
|
1830
1837
|
x: w.x * this.sourceOffset,
|
|
1831
1838
|
y: w.y * this.sourceOffset
|
|
1832
1839
|
};
|
|
1833
1840
|
g = this.arrowRenderer({
|
|
1834
1841
|
direction: w,
|
|
1835
|
-
shift:
|
|
1842
|
+
shift: f,
|
|
1836
1843
|
arrowLength: this.arrowLength
|
|
1837
1844
|
}), this.sourceArrow.setAttribute("d", g);
|
|
1838
1845
|
}
|
|
1839
1846
|
if (this.targetArrow) {
|
|
1840
|
-
const
|
|
1847
|
+
const f = {
|
|
1841
1848
|
x: w.x * this.targetOffset,
|
|
1842
1849
|
y: w.y * this.targetOffset
|
|
1843
1850
|
};
|
|
1844
1851
|
l = this.arrowRenderer({
|
|
1845
1852
|
direction: { x: -w.x, y: -w.y },
|
|
1846
1853
|
shift: {
|
|
1847
|
-
x: d.x -
|
|
1848
|
-
y: d.y -
|
|
1854
|
+
x: d.x - f.x,
|
|
1855
|
+
y: d.y - f.y
|
|
1849
1856
|
},
|
|
1850
1857
|
arrowLength: this.arrowLength
|
|
1851
1858
|
}), this.targetArrow.setAttribute("d", l);
|
|
@@ -1890,7 +1897,7 @@ class Me {
|
|
|
1890
1897
|
"interactive edge can be configured only once"
|
|
1891
1898
|
);
|
|
1892
1899
|
this.svg = this.baseEdge.svg, this.group = this.baseEdge.group, this.line = this.baseEdge.line, this.sourceArrow = this.baseEdge.sourceArrow, this.targetArrow = this.baseEdge.targetArrow, this.onAfterRender = this.baseEdge.onAfterRender;
|
|
1893
|
-
const s = (t == null ? void 0 : t.distance) ??
|
|
1900
|
+
const s = (t == null ? void 0 : t.distance) ?? y.interactiveWidth;
|
|
1894
1901
|
this.interactiveLine = mt(s), this.handle.appendChild(this.interactiveLine), this.sourceArrow && (this.interactiveSourceArrow = ue(s), this.handle.appendChild(this.interactiveSourceArrow)), this.targetArrow && (this.interactiveTargetArrow = ue(s), this.handle.appendChild(this.interactiveTargetArrow)), this.group.appendChild(this.handle), this.baseEdge.onAfterRender.subscribe((o) => {
|
|
1895
1902
|
this.interactiveLine.setAttribute("d", o.edgePath.path), this.interactiveSourceArrow && this.interactiveSourceArrow.setAttribute("d", o.sourceArrowPath), this.interactiveTargetArrow && this.interactiveTargetArrow.setAttribute("d", o.targetArrowPath);
|
|
1896
1903
|
});
|
|
@@ -1937,10 +1944,7 @@ class Le {
|
|
|
1937
1944
|
return this.graphStore.hasNode(e);
|
|
1938
1945
|
}
|
|
1939
1946
|
getNode(e) {
|
|
1940
|
-
const t = this.graphStore.getNode(e);
|
|
1941
|
-
if (t === void 0)
|
|
1942
|
-
return null;
|
|
1943
|
-
const s = t.payload;
|
|
1947
|
+
const t = this.graphStore.getNode(e), { payload: s } = t;
|
|
1944
1948
|
return {
|
|
1945
1949
|
element: t.element,
|
|
1946
1950
|
x: s.x,
|
|
@@ -1950,14 +1954,7 @@ class Le {
|
|
|
1950
1954
|
};
|
|
1951
1955
|
}
|
|
1952
1956
|
findNodeIdByElement(e) {
|
|
1953
|
-
return this.graphStore.findNodeIdByElement(e)
|
|
1954
|
-
}
|
|
1955
|
-
/**
|
|
1956
|
-
* @deprecated
|
|
1957
|
-
* use findNodeIdByElement instead
|
|
1958
|
-
*/
|
|
1959
|
-
getElementNodeId(e) {
|
|
1960
|
-
return this.graphStore.findNodeIdByElement(e) ?? null;
|
|
1957
|
+
return this.graphStore.findNodeIdByElement(e);
|
|
1961
1958
|
}
|
|
1962
1959
|
getAllNodeIds() {
|
|
1963
1960
|
return this.graphStore.getAllNodeIds();
|
|
@@ -1967,7 +1964,7 @@ class Le {
|
|
|
1967
1964
|
}
|
|
1968
1965
|
getPort(e) {
|
|
1969
1966
|
const t = this.graphStore.getPort(e);
|
|
1970
|
-
return
|
|
1967
|
+
return {
|
|
1971
1968
|
element: t.element,
|
|
1972
1969
|
direction: t.payload.direction,
|
|
1973
1970
|
nodeId: t.nodeId
|
|
@@ -1977,14 +1974,7 @@ class Le {
|
|
|
1977
1974
|
return this.graphStore.getAllPortIds();
|
|
1978
1975
|
}
|
|
1979
1976
|
getNodePortIds(e) {
|
|
1980
|
-
return this.graphStore.getNodePortIds(e)
|
|
1981
|
-
}
|
|
1982
|
-
/**
|
|
1983
|
-
* @deprecated
|
|
1984
|
-
* use findPortIdsByElement instead
|
|
1985
|
-
*/
|
|
1986
|
-
getElementPortIds(e) {
|
|
1987
|
-
return this.graphStore.findPortIdsByElement(e);
|
|
1977
|
+
return this.graphStore.getNodePortIds(e);
|
|
1988
1978
|
}
|
|
1989
1979
|
findPortIdsByElement(e) {
|
|
1990
1980
|
return this.graphStore.findPortIdsByElement(e);
|
|
@@ -1996,10 +1986,7 @@ class Le {
|
|
|
1996
1986
|
return this.graphStore.hasEdge(e);
|
|
1997
1987
|
}
|
|
1998
1988
|
getEdge(e) {
|
|
1999
|
-
const t = this.graphStore.getEdge(e);
|
|
2000
|
-
if (t === void 0)
|
|
2001
|
-
return null;
|
|
2002
|
-
const s = t.payload;
|
|
1989
|
+
const t = this.graphStore.getEdge(e), { payload: s } = t;
|
|
2003
1990
|
return {
|
|
2004
1991
|
from: t.from,
|
|
2005
1992
|
to: t.to,
|
|
@@ -2008,28 +1995,28 @@ class Le {
|
|
|
2008
1995
|
};
|
|
2009
1996
|
}
|
|
2010
1997
|
getPortIncomingEdgeIds(e) {
|
|
2011
|
-
return this.graphStore.
|
|
1998
|
+
return this.graphStore.getPortIncomingEdgeIds(e);
|
|
2012
1999
|
}
|
|
2013
2000
|
getPortOutgoingEdgeIds(e) {
|
|
2014
|
-
return this.graphStore.
|
|
2001
|
+
return this.graphStore.getPortOutgoingEdgeIds(e);
|
|
2015
2002
|
}
|
|
2016
2003
|
getPortCycleEdgeIds(e) {
|
|
2017
|
-
return this.graphStore.
|
|
2004
|
+
return this.graphStore.getPortCycleEdgeIds(e);
|
|
2018
2005
|
}
|
|
2019
2006
|
getPortAdjacentEdgeIds(e) {
|
|
2020
|
-
return this.graphStore.
|
|
2007
|
+
return this.graphStore.getPortAdjacentEdgeIds(e);
|
|
2021
2008
|
}
|
|
2022
2009
|
getNodeIncomingEdgeIds(e) {
|
|
2023
|
-
return this.graphStore.
|
|
2010
|
+
return this.graphStore.getNodeIncomingEdgeIds(e);
|
|
2024
2011
|
}
|
|
2025
2012
|
getNodeOutgoingEdgeIds(e) {
|
|
2026
|
-
return this.graphStore.
|
|
2013
|
+
return this.graphStore.getNodeOutgoingEdgeIds(e);
|
|
2027
2014
|
}
|
|
2028
2015
|
getNodeCycleEdgeIds(e) {
|
|
2029
|
-
return this.graphStore.
|
|
2016
|
+
return this.graphStore.getNodeCycleEdgeIds(e);
|
|
2030
2017
|
}
|
|
2031
2018
|
getNodeAdjacentEdgeIds(e) {
|
|
2032
|
-
return this.graphStore.
|
|
2019
|
+
return this.graphStore.getNodeAdjacentEdgeIds(e);
|
|
2033
2020
|
}
|
|
2034
2021
|
}
|
|
2035
2022
|
class Re {
|
|
@@ -2082,19 +2069,20 @@ class z {
|
|
|
2082
2069
|
constructor(e, t, s, o) {
|
|
2083
2070
|
i(this, "onAfterPortMarked", (e) => {
|
|
2084
2071
|
const t = this.canvas.graph.getPort(e);
|
|
2085
|
-
this.canvas.graph.
|
|
2072
|
+
this.canvas.graph.findPortIdsByElement(t.element).length === 1 && this.hookPortEvents(t.element);
|
|
2086
2073
|
});
|
|
2087
2074
|
i(this, "onBeforePortUnmarked", (e) => {
|
|
2088
2075
|
const t = this.canvas.graph.getPort(e);
|
|
2089
|
-
this.canvas.graph.
|
|
2076
|
+
this.canvas.graph.findPortIdsByElement(t.element).length === 1 && this.unhookPortEvents(t.element);
|
|
2090
2077
|
});
|
|
2091
2078
|
i(this, "onPortMouseDown", (e) => {
|
|
2092
|
-
|
|
2079
|
+
const t = e;
|
|
2080
|
+
if (!this.params.mouseDownEventVerifier(t))
|
|
2093
2081
|
return;
|
|
2094
|
-
const
|
|
2095
|
-
this.params.onPortPointerDown(
|
|
2096
|
-
x:
|
|
2097
|
-
y:
|
|
2082
|
+
const s = e.currentTarget, o = this.canvas.graph.findPortIdsByElement(s)[0];
|
|
2083
|
+
this.params.onPortPointerDown(o, {
|
|
2084
|
+
x: t.clientX,
|
|
2085
|
+
y: t.clientY
|
|
2098
2086
|
}) && (e.stopPropagation(), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
|
|
2099
2087
|
passive: !0
|
|
2100
2088
|
}), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
|
|
@@ -2117,12 +2105,13 @@ class z {
|
|
|
2117
2105
|
this.params.mouseUpEventVerifier(e) && (this.params.onPointerUp({ x: e.clientX, y: e.clientY }), this.stopMouseDrag());
|
|
2118
2106
|
});
|
|
2119
2107
|
i(this, "onPortTouchStart", (e) => {
|
|
2120
|
-
|
|
2108
|
+
const t = e;
|
|
2109
|
+
if (t.touches.length !== 1)
|
|
2121
2110
|
return;
|
|
2122
|
-
const
|
|
2123
|
-
this.params.onPortPointerDown(
|
|
2124
|
-
x:
|
|
2125
|
-
y:
|
|
2111
|
+
const s = t.touches[0], o = e.currentTarget, n = this.canvas.graph.findPortIdsByElement(o)[0];
|
|
2112
|
+
this.params.onPortPointerDown(n, {
|
|
2113
|
+
x: s.clientX,
|
|
2114
|
+
y: s.clientY
|
|
2126
2115
|
}) && (e.stopPropagation(), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
|
|
2127
2116
|
passive: !0
|
|
2128
2117
|
}), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
|
|
@@ -2192,10 +2181,10 @@ class Z {
|
|
|
2192
2181
|
i(this, "graph");
|
|
2193
2182
|
i(this, "onAfterNodeAdded", (e) => {
|
|
2194
2183
|
this.updateMaxNodePriority(e);
|
|
2195
|
-
const t = this.graph.getNode(e);
|
|
2196
|
-
t.
|
|
2184
|
+
const { element: t } = this.graph.getNode(e);
|
|
2185
|
+
t.addEventListener("mousedown", this.onMouseDown, {
|
|
2197
2186
|
passive: !0
|
|
2198
|
-
}), t.
|
|
2187
|
+
}), t.addEventListener("touchstart", this.onTouchStart, {
|
|
2199
2188
|
passive: !0
|
|
2200
2189
|
});
|
|
2201
2190
|
});
|
|
@@ -2203,60 +2192,62 @@ class Z {
|
|
|
2203
2192
|
this.updateMaxNodePriority(e);
|
|
2204
2193
|
});
|
|
2205
2194
|
i(this, "onBeforeNodeRemoved", (e) => {
|
|
2206
|
-
const t = this.graph.getNode(e);
|
|
2207
|
-
t.
|
|
2195
|
+
const { element: t } = this.graph.getNode(e);
|
|
2196
|
+
t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
|
|
2208
2197
|
});
|
|
2209
2198
|
i(this, "onBeforeDestroy", () => {
|
|
2210
2199
|
this.removeMouseDragListeners(), this.removeTouchDragListeners();
|
|
2211
2200
|
});
|
|
2212
2201
|
i(this, "onBeforeClear", () => {
|
|
2213
2202
|
this.canvas.graph.getAllNodeIds().forEach((e) => {
|
|
2214
|
-
const t = this.canvas.graph.getNode(e);
|
|
2215
|
-
t.
|
|
2203
|
+
const { element: t } = this.canvas.graph.getNode(e);
|
|
2204
|
+
t.removeEventListener("mousedown", this.onMouseDown), t.removeEventListener("touchstart", this.onTouchStart);
|
|
2216
2205
|
}), this.maxNodePriority = 0;
|
|
2217
2206
|
});
|
|
2218
2207
|
i(this, "onMouseDown", (e) => {
|
|
2219
|
-
|
|
2208
|
+
const t = e;
|
|
2209
|
+
if (!this.params.mouseDownEventVerifier(t))
|
|
2220
2210
|
return;
|
|
2221
|
-
const
|
|
2222
|
-
if (!this.params.nodeDragVerifier(
|
|
2211
|
+
const s = e.currentTarget, o = this.graph.findNodeIdByElement(s), n = this.graph.getNode(o);
|
|
2212
|
+
if (!this.params.nodeDragVerifier(o))
|
|
2223
2213
|
return;
|
|
2224
|
-
this.params.onNodeDragStarted(
|
|
2225
|
-
const
|
|
2226
|
-
x:
|
|
2227
|
-
y:
|
|
2214
|
+
this.params.onNodeDragStarted(o), e.stopPropagation();
|
|
2215
|
+
const h = this.calculateContentPoint({
|
|
2216
|
+
x: t.clientX,
|
|
2217
|
+
y: t.clientY
|
|
2228
2218
|
});
|
|
2229
2219
|
this.grabbedNode = {
|
|
2230
|
-
nodeId:
|
|
2231
|
-
dx:
|
|
2232
|
-
dy:
|
|
2233
|
-
}, $(this.element, this.params.dragCursor), this.moveNodeOnTop(
|
|
2220
|
+
nodeId: o,
|
|
2221
|
+
dx: h.x - n.x,
|
|
2222
|
+
dy: h.y - n.y
|
|
2223
|
+
}, $(this.element, this.params.dragCursor), this.moveNodeOnTop(o), this.window.addEventListener("mousemove", this.onWindowMouseMove, {
|
|
2234
2224
|
passive: !0
|
|
2235
2225
|
}), this.window.addEventListener("mouseup", this.onWindowMouseUp, {
|
|
2236
2226
|
passive: !0
|
|
2237
2227
|
});
|
|
2238
2228
|
});
|
|
2239
2229
|
i(this, "onTouchStart", (e) => {
|
|
2240
|
-
|
|
2230
|
+
const t = e;
|
|
2231
|
+
if (t.touches.length !== 1)
|
|
2241
2232
|
return;
|
|
2242
2233
|
e.stopPropagation();
|
|
2243
|
-
const
|
|
2234
|
+
const s = t.touches[0], o = e.currentTarget, n = this.canvas.graph.findNodeIdByElement(o), a = this.graph.getNode(n);
|
|
2244
2235
|
if (!this.params.nodeDragVerifier({
|
|
2245
|
-
nodeId:
|
|
2246
|
-
element:
|
|
2247
|
-
x:
|
|
2248
|
-
y:
|
|
2236
|
+
nodeId: n,
|
|
2237
|
+
element: a.element,
|
|
2238
|
+
x: a.x,
|
|
2239
|
+
y: a.y
|
|
2249
2240
|
}))
|
|
2250
2241
|
return;
|
|
2251
|
-
const
|
|
2252
|
-
x:
|
|
2253
|
-
y:
|
|
2242
|
+
const d = this.calculateContentPoint({
|
|
2243
|
+
x: s.clientX,
|
|
2244
|
+
y: s.clientY
|
|
2254
2245
|
});
|
|
2255
2246
|
this.grabbedNode = {
|
|
2256
|
-
nodeId:
|
|
2257
|
-
dx:
|
|
2258
|
-
dy:
|
|
2259
|
-
}, this.moveNodeOnTop(
|
|
2247
|
+
nodeId: n,
|
|
2248
|
+
dx: d.x - a.x,
|
|
2249
|
+
dy: d.y - a.y
|
|
2250
|
+
}, this.moveNodeOnTop(n), this.window.addEventListener("touchmove", this.onWindowTouchMove, {
|
|
2260
2251
|
passive: !0
|
|
2261
2252
|
}), this.window.addEventListener("touchend", this.onWindowTouchFinish, {
|
|
2262
2253
|
passive: !0
|
|
@@ -2309,15 +2300,15 @@ class Z {
|
|
|
2309
2300
|
new Z(e, t, s, o);
|
|
2310
2301
|
}
|
|
2311
2302
|
moveNode(e, t) {
|
|
2312
|
-
if (this.graph.
|
|
2303
|
+
if (!this.graph.hasNode(e.nodeId))
|
|
2313
2304
|
return;
|
|
2314
|
-
const
|
|
2315
|
-
x:
|
|
2316
|
-
y:
|
|
2317
|
-
},
|
|
2305
|
+
const s = this.calculateContentPoint(t), o = {
|
|
2306
|
+
x: s.x - e.dx,
|
|
2307
|
+
y: s.y - e.dy
|
|
2308
|
+
}, n = this.adjustNodeCoords(o);
|
|
2318
2309
|
this.canvas.updateNode(e.nodeId, {
|
|
2319
|
-
x:
|
|
2320
|
-
y:
|
|
2310
|
+
x: n.x,
|
|
2311
|
+
y: n.y
|
|
2321
2312
|
}), this.params.onNodeDrag(e.nodeId);
|
|
2322
2313
|
}
|
|
2323
2314
|
moveNodeOnTop(e) {
|
|
@@ -2332,15 +2323,15 @@ class Z {
|
|
|
2332
2323
|
}
|
|
2333
2324
|
}
|
|
2334
2325
|
cancelMouseDrag() {
|
|
2335
|
-
this.grabbedNode !== null && this.graph.
|
|
2326
|
+
this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId) && this.params.onNodeDragFinished(this.grabbedNode.nodeId), this.grabbedNode = null, $(this.element, null), this.removeMouseDragListeners();
|
|
2336
2327
|
}
|
|
2337
2328
|
removeMouseDragListeners() {
|
|
2338
2329
|
this.window.removeEventListener("mouseup", this.onWindowMouseUp), this.window.removeEventListener("mousemove", this.onWindowMouseMove);
|
|
2339
2330
|
}
|
|
2340
2331
|
cancelTouchDrag() {
|
|
2341
|
-
if (this.grabbedNode !== null) {
|
|
2332
|
+
if (this.grabbedNode !== null && this.graph.hasNode(this.grabbedNode.nodeId)) {
|
|
2342
2333
|
const e = this.graph.getNode(this.grabbedNode.nodeId);
|
|
2343
|
-
|
|
2334
|
+
this.params.onNodeDragFinished({
|
|
2344
2335
|
nodeId: this.grabbedNode.nodeId,
|
|
2345
2336
|
element: e.element,
|
|
2346
2337
|
x: e.x,
|
|
@@ -2732,20 +2723,20 @@ class ee {
|
|
|
2732
2723
|
x: t.x - d.x,
|
|
2733
2724
|
y: t.y - d.y
|
|
2734
2725
|
}), l = {
|
|
2735
|
-
overlayNodeId:
|
|
2726
|
+
overlayNodeId: T.StaticNodeId,
|
|
2736
2727
|
portCoords: c,
|
|
2737
2728
|
portDirection: o.direction
|
|
2738
2729
|
}, u = {
|
|
2739
|
-
overlayNodeId:
|
|
2730
|
+
overlayNodeId: T.DraggingNodeId,
|
|
2740
2731
|
portCoords: g,
|
|
2741
2732
|
portDirection: this.params.dragPortDirection
|
|
2742
2733
|
};
|
|
2743
2734
|
this.isTargetDragging = s === "direct";
|
|
2744
|
-
const [w,
|
|
2745
|
-
this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(
|
|
2735
|
+
const [w, f] = this.isTargetDragging ? [l, u] : [u, l];
|
|
2736
|
+
this.overlayCanvas.addNode(U(w)), this.overlayCanvas.addNode(U(f)), this.overlayCanvas.addEdge({
|
|
2746
2737
|
from: w.overlayNodeId,
|
|
2747
|
-
to:
|
|
2748
|
-
shape: this.params.edgeShapeFactory(
|
|
2738
|
+
to: f.overlayNodeId,
|
|
2739
|
+
shape: this.params.edgeShapeFactory(T.EdgeId)
|
|
2749
2740
|
});
|
|
2750
2741
|
}
|
|
2751
2742
|
resetDragState() {
|
|
@@ -2768,7 +2759,7 @@ class ee {
|
|
|
2768
2759
|
x: e.x - t.x,
|
|
2769
2760
|
y: e.y - t.y
|
|
2770
2761
|
});
|
|
2771
|
-
this.overlayCanvas.updateNode(
|
|
2762
|
+
this.overlayCanvas.updateNode(T.DraggingNodeId, {
|
|
2772
2763
|
x: s.x,
|
|
2773
2764
|
y: s.y
|
|
2774
2765
|
});
|
|
@@ -2817,12 +2808,9 @@ class te {
|
|
|
2817
2808
|
}
|
|
2818
2809
|
tryStartEdgeDragging(e, t) {
|
|
2819
2810
|
const s = this.params.draggingEdgeResolver(e);
|
|
2820
|
-
if (s === null)
|
|
2821
|
-
return !1;
|
|
2822
|
-
const o = this.canvas.graph.getEdge(s);
|
|
2823
|
-
if (o === null)
|
|
2811
|
+
if (s === null || !this.canvas.graph.hasEdge(s))
|
|
2824
2812
|
return !1;
|
|
2825
|
-
const n = e === o.from, a = e === o.to, h = n ? o.to : o.from;
|
|
2813
|
+
const o = this.canvas.graph.getEdge(s), n = e === o.from, a = e === o.to, h = n ? o.to : o.from;
|
|
2826
2814
|
this.staticPortId = h, this.isTargetDragging = a;
|
|
2827
2815
|
const d = this.canvas.graph.getPort(e), c = this.canvas.graph.getPort(h), g = c.element.getBoundingClientRect(), l = {
|
|
2828
2816
|
x: g.x + g.width / 2,
|
|
@@ -2830,7 +2818,7 @@ class te {
|
|
|
2830
2818
|
}, u = this.overlayLayer.getBoundingClientRect(), w = this.canvas.viewport.createContentCoords({
|
|
2831
2819
|
x: l.x - u.x,
|
|
2832
2820
|
y: l.y - u.y
|
|
2833
|
-
}),
|
|
2821
|
+
}), f = this.canvas.viewport.createContentCoords({
|
|
2834
2822
|
x: t.x - u.x,
|
|
2835
2823
|
y: t.y - u.y
|
|
2836
2824
|
});
|
|
@@ -2841,21 +2829,21 @@ class te {
|
|
|
2841
2829
|
shape: o.shape,
|
|
2842
2830
|
priority: o.priority
|
|
2843
2831
|
}, this.canvas.removeEdge(s);
|
|
2844
|
-
const
|
|
2845
|
-
overlayNodeId:
|
|
2832
|
+
const E = {
|
|
2833
|
+
overlayNodeId: T.StaticNodeId,
|
|
2846
2834
|
portCoords: w,
|
|
2847
2835
|
portDirection: c.direction
|
|
2848
|
-
},
|
|
2849
|
-
overlayNodeId:
|
|
2850
|
-
portCoords:
|
|
2836
|
+
}, S = {
|
|
2837
|
+
overlayNodeId: T.DraggingNodeId,
|
|
2838
|
+
portCoords: f,
|
|
2851
2839
|
portDirection: d.direction
|
|
2852
|
-
}, [
|
|
2853
|
-
this.overlayCanvas.addNode(U(
|
|
2854
|
-
const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(
|
|
2840
|
+
}, [b, C] = this.isTargetDragging ? [E, S] : [S, E];
|
|
2841
|
+
this.overlayCanvas.addNode(U(b)), this.overlayCanvas.addNode(U(C));
|
|
2842
|
+
const P = this.params.draggingEdgeShapeFactory !== null ? this.params.draggingEdgeShapeFactory(T.EdgeId) : o.shape;
|
|
2855
2843
|
return this.overlayCanvas.addEdge({
|
|
2856
|
-
id:
|
|
2857
|
-
from:
|
|
2858
|
-
to:
|
|
2844
|
+
id: T.EdgeId,
|
|
2845
|
+
from: b.overlayNodeId,
|
|
2846
|
+
to: C.overlayNodeId,
|
|
2859
2847
|
shape: P
|
|
2860
2848
|
}), !0;
|
|
2861
2849
|
}
|
|
@@ -2867,14 +2855,14 @@ class te {
|
|
|
2867
2855
|
x: e.x - t.x,
|
|
2868
2856
|
y: e.y - t.y
|
|
2869
2857
|
}, o = this.canvas.viewport.createContentCoords(s);
|
|
2870
|
-
this.overlayCanvas.updateNode(
|
|
2858
|
+
this.overlayCanvas.updateNode(T.DraggingNodeId, {
|
|
2871
2859
|
x: o.x,
|
|
2872
2860
|
y: o.y
|
|
2873
2861
|
});
|
|
2874
2862
|
}
|
|
2875
2863
|
tryCreateConnection(e) {
|
|
2876
2864
|
const t = xe(this.canvas.graph, e);
|
|
2877
|
-
if (this.overlayCanvas.removeEdge(
|
|
2865
|
+
if (this.overlayCanvas.removeEdge(T.EdgeId), t === null) {
|
|
2878
2866
|
const d = this.draggingEdgePayload;
|
|
2879
2867
|
this.params.onEdgeReattachInterrupted({
|
|
2880
2868
|
id: d.id,
|
|
@@ -2920,10 +2908,10 @@ class re {
|
|
|
2920
2908
|
);
|
|
2921
2909
|
}
|
|
2922
2910
|
applyLayout() {
|
|
2923
|
-
this.layoutAlgorithm.calculateCoordinates(
|
|
2924
|
-
this.canvas.graph,
|
|
2925
|
-
this.canvas.viewport
|
|
2926
|
-
).forEach((t, s) => {
|
|
2911
|
+
this.layoutAlgorithm.calculateCoordinates({
|
|
2912
|
+
graph: this.canvas.graph,
|
|
2913
|
+
viewport: this.canvas.viewport
|
|
2914
|
+
}).forEach((t, s) => {
|
|
2927
2915
|
this.canvas.updateNode(s, t);
|
|
2928
2916
|
});
|
|
2929
2917
|
}
|
|
@@ -2932,10 +2920,10 @@ class O {
|
|
|
2932
2920
|
constructor(e, t, s) {
|
|
2933
2921
|
i(this, "applyScheduled", !1);
|
|
2934
2922
|
i(this, "apply", () => {
|
|
2935
|
-
this.applyScheduled = !1, this.layoutAlgorithm.calculateCoordinates(
|
|
2936
|
-
this.canvas.graph,
|
|
2937
|
-
this.canvas.viewport
|
|
2938
|
-
).forEach((t, s) => {
|
|
2923
|
+
this.applyScheduled = !1, this.layoutAlgorithm.calculateCoordinates({
|
|
2924
|
+
graph: this.canvas.graph,
|
|
2925
|
+
viewport: this.canvas.viewport
|
|
2926
|
+
}).forEach((t, s) => {
|
|
2939
2927
|
this.canvas.updateNode(s, t);
|
|
2940
2928
|
});
|
|
2941
2929
|
});
|
|
@@ -2999,7 +2987,7 @@ class Pt {
|
|
|
2999
2987
|
}
|
|
3000
2988
|
}
|
|
3001
2989
|
}
|
|
3002
|
-
class
|
|
2990
|
+
class Tt {
|
|
3003
2991
|
constructor(e, t) {
|
|
3004
2992
|
i(this, "previousTimeStamp");
|
|
3005
2993
|
i(this, "step", (e) => {
|
|
@@ -3017,21 +3005,21 @@ class Ct {
|
|
|
3017
3005
|
class se {
|
|
3018
3006
|
constructor(e, t, s, o) {
|
|
3019
3007
|
i(this, "step", (e) => {
|
|
3020
|
-
this.algorithm.calculateNextCoordinates(
|
|
3021
|
-
this.canvas.graph,
|
|
3022
|
-
e,
|
|
3023
|
-
this.canvas.viewport
|
|
3024
|
-
).forEach((s, o) => {
|
|
3008
|
+
this.algorithm.calculateNextCoordinates({
|
|
3009
|
+
graph: this.canvas.graph,
|
|
3010
|
+
dt: e,
|
|
3011
|
+
viewport: this.canvas.viewport
|
|
3012
|
+
}).forEach((s, o) => {
|
|
3025
3013
|
this.staticNodes.has(o) || this.canvas.updateNode(o, { x: s.x, y: s.y });
|
|
3026
3014
|
});
|
|
3027
3015
|
});
|
|
3028
|
-
this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = o, new
|
|
3016
|
+
this.canvas = e, this.algorithm = t, this.staticNodes = s, this.win = o, new Tt(this.win, this.step);
|
|
3029
3017
|
}
|
|
3030
3018
|
static configure(e, t, s, o) {
|
|
3031
3019
|
new se(e, t, s, o);
|
|
3032
3020
|
}
|
|
3033
3021
|
}
|
|
3034
|
-
const
|
|
3022
|
+
const Ct = () => {
|
|
3035
3023
|
const r = document.createElement("div");
|
|
3036
3024
|
return r.style.width = "100%", r.style.height = "100%", r.style.position = "relative", r;
|
|
3037
3025
|
}, Y = () => {
|
|
@@ -3047,7 +3035,7 @@ class Nt {
|
|
|
3047
3035
|
i(this, "main", Y());
|
|
3048
3036
|
i(this, "overlayConnectablePorts", pe());
|
|
3049
3037
|
i(this, "overlayDraggableEdges", pe());
|
|
3050
|
-
i(this, "host",
|
|
3038
|
+
i(this, "host", Ct());
|
|
3051
3039
|
this.element = e, this.element.appendChild(this.host), this.host.appendChild(this.background), this.host.appendChild(this.main), this.host.appendChild(this.overlayConnectablePorts), this.host.appendChild(this.overlayDraggableEdges);
|
|
3052
3040
|
}
|
|
3053
3041
|
destroy() {
|
|
@@ -3154,11 +3142,11 @@ const G = (r) => () => r, we = G(0), Dt = () => {
|
|
|
3154
3142
|
}
|
|
3155
3143
|
};
|
|
3156
3144
|
}, Rt = (r) => {
|
|
3157
|
-
var w,
|
|
3145
|
+
var w, f, E, S, b, C;
|
|
3158
3146
|
const e = ((w = r.events) == null ? void 0 : w.onNodeDragStarted) ?? (() => {
|
|
3159
|
-
}), t = ((
|
|
3160
|
-
}), s = r.nodeDragVerifier ?? (() => !0), o = ((
|
|
3161
|
-
}), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (
|
|
3147
|
+
}), t = ((f = r.events) == null ? void 0 : f.onNodeDrag) ?? (() => {
|
|
3148
|
+
}), s = r.nodeDragVerifier ?? (() => !0), o = ((E = r.events) == null ? void 0 : E.onNodeDragFinished) ?? (() => {
|
|
3149
|
+
}), n = r.moveOnTop !== !1, a = r.moveEdgesOnTop !== !1 && n, h = (S = r.mouse) == null ? void 0 : S.dragCursor, d = h !== void 0 ? h : "grab", c = (b = r.mouse) == null ? void 0 : b.mouseDownEventVerifier, g = c !== void 0 ? c : (P) => P.button === 0, l = (C = r.mouse) == null ? void 0 : C.mouseUpEventVerifier, u = l !== void 0 ? l : (P) => P.button === 0;
|
|
3162
3150
|
return {
|
|
3163
3151
|
moveOnTop: n,
|
|
3164
3152
|
moveEdgesOnTop: a,
|
|
@@ -3228,17 +3216,17 @@ const G = (r) => () => r, we = G(0), Dt = () => {
|
|
|
3228
3216
|
});
|
|
3229
3217
|
}
|
|
3230
3218
|
}, ye = (r) => {
|
|
3231
|
-
var
|
|
3232
|
-
const e = (
|
|
3219
|
+
var f, E, S, b, C, P, R, V, ie, ne, ae, he;
|
|
3220
|
+
const e = (f = r == null ? void 0 : r.scale) == null ? void 0 : f.mouseWheelSensitivity, t = e !== void 0 ? e : 1.2, s = r == null ? void 0 : r.transformPreprocessor;
|
|
3233
3221
|
let o;
|
|
3234
3222
|
s !== void 0 ? Array.isArray(s) ? o = It(
|
|
3235
3223
|
s.map(
|
|
3236
3224
|
(N) => fe(N)
|
|
3237
3225
|
)
|
|
3238
3226
|
) : o = fe(s) : o = (N) => N.nextTransform;
|
|
3239
|
-
const n = ((
|
|
3240
|
-
}), h = ((
|
|
3241
|
-
}), d = (
|
|
3227
|
+
const n = ((E = r == null ? void 0 : r.shift) == null ? void 0 : E.cursor) !== void 0 ? r.shift.cursor : "grab", a = ((S = r == null ? void 0 : r.events) == null ? void 0 : S.onBeforeTransformChange) ?? (() => {
|
|
3228
|
+
}), h = ((b = r == null ? void 0 : r.events) == null ? void 0 : b.onTransformChange) ?? (() => {
|
|
3229
|
+
}), d = (C = r == null ? void 0 : r.shift) == null ? void 0 : C.mouseDownEventVerifier, c = d !== void 0 ? d : (N) => N.button === 0, g = (P = r == null ? void 0 : r.shift) == null ? void 0 : P.mouseUpEventVerifier, l = g !== void 0 ? g : (N) => N.button === 0, u = (R = r == null ? void 0 : r.scale) == null ? void 0 : R.mouseWheelEventVerifier, w = u !== void 0 ? u : () => !0;
|
|
3242
3230
|
return {
|
|
3243
3231
|
wheelSensitivity: t,
|
|
3244
3232
|
onTransformStarted: ((V = r == null ? void 0 : r.events) == null ? void 0 : V.onTransformStarted) ?? (() => {
|
|
@@ -3340,30 +3328,30 @@ class Fe {
|
|
|
3340
3328
|
this.graph = e, this.currentCoords = t, this.dt = s.dtSec, this.nodeMass = s.nodeMass, this.edgeEquilibriumLength = s.edgeEquilibriumLength, this.edgeStiffness = s.edgeStiffness, this.distanceVectorGenerator = s.distanceVectorGenerator, this.nodeForcesApplicationStrategy = s.nodeForcesApplicationStrategy;
|
|
3341
3329
|
}
|
|
3342
3330
|
apply() {
|
|
3343
|
-
let e = 0
|
|
3344
|
-
const
|
|
3345
|
-
return this.graph.getAllNodeIds().forEach((
|
|
3346
|
-
|
|
3347
|
-
}), this.nodeForcesApplicationStrategy.apply(this.currentCoords,
|
|
3348
|
-
const
|
|
3349
|
-
x:
|
|
3350
|
-
y:
|
|
3331
|
+
let e = 0;
|
|
3332
|
+
const t = /* @__PURE__ */ new Map();
|
|
3333
|
+
return this.graph.getAllNodeIds().forEach((o) => {
|
|
3334
|
+
t.set(o, { x: 0, y: 0 });
|
|
3335
|
+
}), this.nodeForcesApplicationStrategy.apply(this.currentCoords, t), this.applyEdgeForces(t), this.currentCoords.forEach((o, n) => {
|
|
3336
|
+
const a = t.get(n), h = {
|
|
3337
|
+
x: a.x / this.nodeMass * this.dt,
|
|
3338
|
+
y: a.y / this.nodeMass * this.dt
|
|
3351
3339
|
};
|
|
3352
|
-
|
|
3353
|
-
|
|
3354
|
-
Math.sqrt(
|
|
3340
|
+
e = Math.max(
|
|
3341
|
+
e,
|
|
3342
|
+
Math.sqrt(h.x * h.x + h.y * h.y)
|
|
3355
3343
|
);
|
|
3356
|
-
const
|
|
3357
|
-
|
|
3358
|
-
}),
|
|
3344
|
+
const d = h.x * this.dt, c = h.y * this.dt;
|
|
3345
|
+
o.x += d, o.y += c;
|
|
3346
|
+
}), e;
|
|
3359
3347
|
}
|
|
3360
3348
|
applyEdgeForces(e) {
|
|
3361
3349
|
this.graph.getAllEdgeIds().forEach((t) => {
|
|
3362
3350
|
const s = this.graph.getEdge(t), o = this.graph.getPort(s.from), n = this.graph.getPort(s.to), a = this.currentCoords.get(o.nodeId), h = this.currentCoords.get(n.nodeId), d = this.distanceVectorGenerator.create(
|
|
3363
3351
|
a,
|
|
3364
3352
|
h
|
|
3365
|
-
), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId),
|
|
3366
|
-
w.x += l, w.y += u,
|
|
3353
|
+
), g = (d.d - this.edgeEquilibriumLength) * this.edgeStiffness, l = d.ex * g, u = d.ey * g, w = e.get(o.nodeId), f = e.get(n.nodeId);
|
|
3354
|
+
w.x += l, w.y += u, f.x -= l, f.y -= u;
|
|
3367
3355
|
});
|
|
3368
3356
|
}
|
|
3369
3357
|
}
|
|
@@ -3394,11 +3382,10 @@ const $e = (r) => {
|
|
|
3394
3382
|
};
|
|
3395
3383
|
class Xt {
|
|
3396
3384
|
constructor(e) {
|
|
3397
|
-
i(this, "effectiveDistance");
|
|
3398
3385
|
i(this, "nodeCharge");
|
|
3399
3386
|
i(this, "distanceVectorGenerator");
|
|
3400
3387
|
i(this, "maxForce");
|
|
3401
|
-
this.
|
|
3388
|
+
this.nodeCharge = e.nodeCharge, this.distanceVectorGenerator = e.distanceVectorGenerator, this.maxForce = e.maxForce;
|
|
3402
3389
|
}
|
|
3403
3390
|
apply(e, t) {
|
|
3404
3391
|
const s = Array.from(t.keys()), o = s.length;
|
|
@@ -3408,17 +3395,14 @@ class Xt {
|
|
|
3408
3395
|
const d = s[h], c = e.get(a), g = e.get(d), l = this.distanceVectorGenerator.create(
|
|
3409
3396
|
c,
|
|
3410
3397
|
g
|
|
3411
|
-
)
|
|
3412
|
-
if (l.d > this.effectiveDistance)
|
|
3413
|
-
continue;
|
|
3414
|
-
const u = $e({
|
|
3398
|
+
), u = $e({
|
|
3415
3399
|
coefficient: 1,
|
|
3416
3400
|
sourceCharge: this.nodeCharge,
|
|
3417
3401
|
targetCharge: this.nodeCharge,
|
|
3418
3402
|
distance: l.d,
|
|
3419
3403
|
maxForce: this.maxForce
|
|
3420
|
-
}), w = u * l.ex,
|
|
3421
|
-
|
|
3404
|
+
}), w = u * l.ex, f = u * l.ey, E = t.get(a), S = t.get(d);
|
|
3405
|
+
E.x -= w, E.y -= f, S.x += w, S.y += f;
|
|
3422
3406
|
}
|
|
3423
3407
|
}
|
|
3424
3408
|
}
|
|
@@ -3496,8 +3480,8 @@ class Gt {
|
|
|
3496
3480
|
this.sortedParentNodes.push(e);
|
|
3497
3481
|
const n = /* @__PURE__ */ new Set(), a = /* @__PURE__ */ new Set(), h = /* @__PURE__ */ new Set(), d = /* @__PURE__ */ new Set(), c = o / 2;
|
|
3498
3482
|
e.nodeIds.forEach((u) => {
|
|
3499
|
-
const { x: w, y } = this.coords.get(u);
|
|
3500
|
-
w < t ?
|
|
3483
|
+
const { x: w, y: f } = this.coords.get(u);
|
|
3484
|
+
w < t ? f < s ? d.add(u) : h.add(u) : f < s ? a.add(u) : n.add(u), e.nodeIds.delete(u);
|
|
3501
3485
|
});
|
|
3502
3486
|
const g = {
|
|
3503
3487
|
parent: e,
|
|
@@ -3772,7 +3756,6 @@ const Ue = (r) => r.theta !== 0 ? new jt({
|
|
|
3772
3756
|
nodeCharge: r.nodeCharge,
|
|
3773
3757
|
nodeForceCoefficient: r.nodeForceCoefficient,
|
|
3774
3758
|
distanceVectorGenerator: r.distanceVectorGenerator,
|
|
3775
|
-
effectiveDistance: r.effectiveDistance,
|
|
3776
3759
|
maxForce: r.maxForce
|
|
3777
3760
|
});
|
|
3778
3761
|
class Be {
|
|
@@ -3781,18 +3764,18 @@ class Be {
|
|
|
3781
3764
|
i(this, "sparsity");
|
|
3782
3765
|
this.rand = e.rand, this.sparsity = e.sparsity;
|
|
3783
3766
|
}
|
|
3784
|
-
calculateCoordinates(e
|
|
3785
|
-
const s = /* @__PURE__ */ new Map(),
|
|
3786
|
-
x:
|
|
3787
|
-
y:
|
|
3767
|
+
calculateCoordinates(e) {
|
|
3768
|
+
const { graph: t, viewport: s } = e, o = /* @__PURE__ */ new Map(), n = t.getAllNodeIds(), a = Math.sqrt(n.length) * this.sparsity, { width: h, height: d } = s.getDimensions(), c = { x: h / 2, y: d / 2 }, g = s.createContentCoords(c), l = a / 2, u = {
|
|
3769
|
+
x: g.x - l,
|
|
3770
|
+
y: g.y - l
|
|
3788
3771
|
};
|
|
3789
|
-
return
|
|
3790
|
-
const
|
|
3791
|
-
|
|
3792
|
-
x:
|
|
3793
|
-
y:
|
|
3772
|
+
return n.forEach((w) => {
|
|
3773
|
+
const f = t.getNode(w);
|
|
3774
|
+
o.set(w, {
|
|
3775
|
+
x: f.x ?? u.x + a * this.rand(),
|
|
3776
|
+
y: f.y ?? u.y + a * this.rand()
|
|
3794
3777
|
});
|
|
3795
|
-
}),
|
|
3778
|
+
}), o;
|
|
3796
3779
|
}
|
|
3797
3780
|
}
|
|
3798
3781
|
class qt {
|
|
@@ -3805,12 +3788,10 @@ class qt {
|
|
|
3805
3788
|
i(this, "nodeMass");
|
|
3806
3789
|
i(this, "edgeEquilibriumLength");
|
|
3807
3790
|
i(this, "edgeStiffness");
|
|
3808
|
-
i(this, "convergenceDelta");
|
|
3809
3791
|
i(this, "convergenceVelocity");
|
|
3810
|
-
this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.
|
|
3792
|
+
this.maxIterations = e.maxIterations, this.dtSec = e.dtSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.convergenceVelocity = e.convergenceVelocity, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
|
|
3811
3793
|
distanceVectorGenerator: this.distanceVectorGenerator,
|
|
3812
3794
|
nodeCharge: e.nodeCharge,
|
|
3813
|
-
effectiveDistance: e.effectiveDistance,
|
|
3814
3795
|
maxForce: e.maxForce,
|
|
3815
3796
|
nodeForceCoefficient: e.nodeForceCoefficient,
|
|
3816
3797
|
theta: e.barnesHutTheta,
|
|
@@ -3821,45 +3802,40 @@ class qt {
|
|
|
3821
3802
|
sparsity: e.edgeEquilibriumLength
|
|
3822
3803
|
});
|
|
3823
3804
|
}
|
|
3824
|
-
calculateCoordinates(e
|
|
3825
|
-
const s = this.fillerLayoutAlgorithm.calculateCoordinates(
|
|
3826
|
-
|
|
3827
|
-
|
|
3828
|
-
);
|
|
3829
|
-
for (let
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
break;
|
|
3844
|
-
}
|
|
3845
|
-
return s;
|
|
3805
|
+
calculateCoordinates(e) {
|
|
3806
|
+
const { graph: t, viewport: s } = e, o = this.fillerLayoutAlgorithm.calculateCoordinates({
|
|
3807
|
+
graph: t,
|
|
3808
|
+
viewport: s
|
|
3809
|
+
});
|
|
3810
|
+
for (let n = 0; n < this.maxIterations && !(new Fe(
|
|
3811
|
+
t,
|
|
3812
|
+
o,
|
|
3813
|
+
{
|
|
3814
|
+
distanceVectorGenerator: this.distanceVectorGenerator,
|
|
3815
|
+
nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
|
|
3816
|
+
dtSec: this.dtSec,
|
|
3817
|
+
nodeMass: this.nodeMass,
|
|
3818
|
+
edgeEquilibriumLength: this.edgeEquilibriumLength,
|
|
3819
|
+
edgeStiffness: this.edgeStiffness
|
|
3820
|
+
}
|
|
3821
|
+
).apply() < this.convergenceVelocity); n++)
|
|
3822
|
+
;
|
|
3823
|
+
return o;
|
|
3846
3824
|
}
|
|
3847
3825
|
}
|
|
3848
3826
|
class Kt {
|
|
3849
3827
|
constructor(e) {
|
|
3850
3828
|
i(this, "distanceVectorGenerator");
|
|
3851
3829
|
i(this, "nodeForcesApplicationStrategy");
|
|
3852
|
-
i(this, "convergenceDelta");
|
|
3853
3830
|
i(this, "convergenceVelocity");
|
|
3854
3831
|
i(this, "maxTimeDeltaSec");
|
|
3855
3832
|
i(this, "nodeMass");
|
|
3856
3833
|
i(this, "edgeEquilibriumLength");
|
|
3857
3834
|
i(this, "edgeStiffness");
|
|
3858
3835
|
i(this, "fillerLayoutAlgorithm");
|
|
3859
|
-
this.
|
|
3836
|
+
this.convergenceVelocity = e.convergenceVelocity, this.maxTimeDeltaSec = e.maxTimeDeltaSec, this.nodeMass = e.nodeMass, this.edgeEquilibriumLength = e.edgeEquilibriumLength, this.edgeStiffness = e.edgeStiffness, this.distanceVectorGenerator = new Ie(e.rand), this.nodeForcesApplicationStrategy = Ue({
|
|
3860
3837
|
distanceVectorGenerator: this.distanceVectorGenerator,
|
|
3861
3838
|
nodeCharge: e.nodeCharge,
|
|
3862
|
-
effectiveDistance: e.effectiveDistance,
|
|
3863
3839
|
maxForce: e.maxForce,
|
|
3864
3840
|
nodeForceCoefficient: e.nodeForceCoefficient,
|
|
3865
3841
|
theta: e.barnesHutTheta,
|
|
@@ -3870,26 +3846,26 @@ class Kt {
|
|
|
3870
3846
|
sparsity: e.edgeEquilibriumLength
|
|
3871
3847
|
});
|
|
3872
3848
|
}
|
|
3873
|
-
calculateNextCoordinates(e
|
|
3874
|
-
const o = this.fillerLayoutAlgorithm.calculateCoordinates(
|
|
3875
|
-
|
|
3876
|
-
s
|
|
3877
|
-
)
|
|
3878
|
-
|
|
3879
|
-
|
|
3849
|
+
calculateNextCoordinates(e) {
|
|
3850
|
+
const { graph: t, viewport: s, dt: o } = e, n = this.fillerLayoutAlgorithm.calculateCoordinates({
|
|
3851
|
+
graph: t,
|
|
3852
|
+
viewport: s
|
|
3853
|
+
});
|
|
3854
|
+
return new Fe(
|
|
3855
|
+
t,
|
|
3856
|
+
n,
|
|
3880
3857
|
{
|
|
3881
3858
|
distanceVectorGenerator: this.distanceVectorGenerator,
|
|
3882
3859
|
nodeForcesApplicationStrategy: this.nodeForcesApplicationStrategy,
|
|
3883
|
-
dtSec: Math.min(
|
|
3860
|
+
dtSec: Math.min(o, this.maxTimeDeltaSec),
|
|
3884
3861
|
nodeMass: this.nodeMass,
|
|
3885
3862
|
edgeEquilibriumLength: this.edgeEquilibriumLength,
|
|
3886
3863
|
edgeStiffness: this.edgeStiffness
|
|
3887
3864
|
}
|
|
3888
|
-
)
|
|
3889
|
-
|
|
3890
|
-
const g = e.getNode(c);
|
|
3865
|
+
).apply() < this.convergenceVelocity && !t.getAllNodeIds().some((c) => {
|
|
3866
|
+
const g = t.getNode(c);
|
|
3891
3867
|
return g.x === null || g.y === null;
|
|
3892
|
-
}) ? /* @__PURE__ */ new Map() :
|
|
3868
|
+
}) ? /* @__PURE__ */ new Map() : n;
|
|
3893
3869
|
}
|
|
3894
3870
|
}
|
|
3895
3871
|
const Oe = (r) => {
|
|
@@ -3908,10 +3884,8 @@ const Oe = (r) => {
|
|
|
3908
3884
|
nodeMass: 1,
|
|
3909
3885
|
edgeEquilibriumLength: 300,
|
|
3910
3886
|
edgeStiffness: 1e3,
|
|
3911
|
-
effectiveDistance: 1e3,
|
|
3912
3887
|
dtSec: 0.01,
|
|
3913
3888
|
maxIterations: 1e3,
|
|
3914
|
-
convergenceDelta: 0,
|
|
3915
3889
|
convergenceVelocity: 10,
|
|
3916
3890
|
maxForce: 1e7,
|
|
3917
3891
|
nodeForceCoefficient: 1,
|
|
@@ -3930,9 +3904,7 @@ const Oe = (r) => {
|
|
|
3930
3904
|
nodeCharge: (o == null ? void 0 : o.nodeCharge) ?? v.nodeCharge,
|
|
3931
3905
|
nodeMass: (o == null ? void 0 : o.nodeMass) ?? v.nodeMass,
|
|
3932
3906
|
edgeEquilibriumLength: (o == null ? void 0 : o.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
|
|
3933
|
-
effectiveDistance: v.effectiveDistance,
|
|
3934
3907
|
edgeStiffness: (o == null ? void 0 : o.edgeStiffness) ?? v.edgeStiffness,
|
|
3935
|
-
convergenceDelta: (o == null ? void 0 : o.convergenceDelta) ?? v.convergenceDelta,
|
|
3936
3908
|
convergenceVelocity: (o == null ? void 0 : o.convergenceVelocity) ?? v.convergenceVelocity,
|
|
3937
3909
|
maxForce: (o == null ? void 0 : o.maxForce) ?? v.maxForce,
|
|
3938
3910
|
nodeForceCoefficient: (o == null ? void 0 : o.nodeForceCoefficient) ?? v.nodeForceCoefficient,
|
|
@@ -3946,8 +3918,6 @@ const Oe = (r) => {
|
|
|
3946
3918
|
trigger: r
|
|
3947
3919
|
} : (r == null ? void 0 : r.type) === "topologyChangeMacrotask" ? {
|
|
3948
3920
|
type: "topologyChangeMacrotask"
|
|
3949
|
-
} : (r == null ? void 0 : r.type) === "topologyChangeTimeout" ? {
|
|
3950
|
-
type: "topologyChangeMacrotask"
|
|
3951
3921
|
} : {
|
|
3952
3922
|
type: "topologyChangeMicrotask"
|
|
3953
3923
|
}, Jt = (r) => {
|
|
@@ -3965,8 +3935,6 @@ const Oe = (r) => {
|
|
|
3965
3935
|
nodeMass: (r == null ? void 0 : r.nodeMass) ?? v.nodeMass,
|
|
3966
3936
|
edgeEquilibriumLength: (r == null ? void 0 : r.edgeEquilibriumLength) ?? v.edgeEquilibriumLength,
|
|
3967
3937
|
edgeStiffness: (r == null ? void 0 : r.edgeStiffness) ?? v.edgeStiffness,
|
|
3968
|
-
effectiveDistance: (r == null ? void 0 : r.effectiveDistance) ?? v.effectiveDistance,
|
|
3969
|
-
convergenceDelta: (r == null ? void 0 : r.convergenceDelta) ?? v.convergenceDelta,
|
|
3970
3938
|
convergenceVelocity: (r == null ? void 0 : r.convergenceVelocity) ?? v.convergenceVelocity,
|
|
3971
3939
|
maxForce: (r == null ? void 0 : r.maxForce) ?? v.maxForce,
|
|
3972
3940
|
nodeForceCoefficient: (r == null ? void 0 : r.nodeForceCoefficient) ?? v.nodeForceCoefficient,
|
|
@@ -4188,7 +4156,7 @@ export {
|
|
|
4188
4156
|
ut as BezierEdgeShape,
|
|
4189
4157
|
or as CanvasBuilder,
|
|
4190
4158
|
Ht as CanvasBuilderError,
|
|
4191
|
-
|
|
4159
|
+
A as CanvasError,
|
|
4192
4160
|
M as ConnectionCategory,
|
|
4193
4161
|
De as DirectEdgeShape,
|
|
4194
4162
|
j as EventSubject,
|