@yh7iku/vue-tree-flow 0.2.0 → 0.2.1
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/vue-tree-flow.js +183 -175
- package/dist/vue-tree-flow.umd.cjs +1 -1
- package/package.json +2 -2
package/dist/vue-tree-flow.js
CHANGED
|
@@ -335,7 +335,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
335
335
|
cp2X: u,
|
|
336
336
|
cp2Y: d
|
|
337
337
|
};
|
|
338
|
-
},
|
|
338
|
+
}, O = (e, t, n, r, i, a, o, s = 8, c) => {
|
|
339
339
|
let l, u, d, f;
|
|
340
340
|
if (c) {
|
|
341
341
|
let t = c.get(e.fromAnchorId), n = c.get(e.toAnchorId);
|
|
@@ -358,67 +358,75 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
358
358
|
if (Math.hypot(h - n, g - r) < s) return !0;
|
|
359
359
|
}
|
|
360
360
|
return !1;
|
|
361
|
-
},
|
|
361
|
+
}, k = (e) => {
|
|
362
362
|
let t = /* @__PURE__ */ new Map();
|
|
363
363
|
for (let n of e) for (let e of n.anchors) t.set(e.id, {
|
|
364
364
|
anchor: e,
|
|
365
365
|
node: n
|
|
366
366
|
});
|
|
367
367
|
return t;
|
|
368
|
-
},
|
|
368
|
+
}, ie = (e, t, n) => t.length === 0 ? "" : t[(t.findIndex((e) => e.id === n) + 1) % t.length].id, ae = (e, t, n) => e.some((e) => e.fromAnchorId === t && e.toAnchorId === n), A = (e) => {
|
|
369
369
|
let t = e.lastIndexOf("-");
|
|
370
370
|
return t === -1 ? e : e.slice(0, t);
|
|
371
|
-
},
|
|
371
|
+
}, oe = (e, t) => {
|
|
372
372
|
if (e.length === 0) return null;
|
|
373
|
-
let n =
|
|
373
|
+
let n = !1;
|
|
374
374
|
for (let e of t) {
|
|
375
|
-
let t =
|
|
376
|
-
|
|
375
|
+
let t = e.fromAnchorId.slice(e.fromAnchorId.lastIndexOf("-") + 1), r = e.toAnchorId.slice(e.toAnchorId.lastIndexOf("-") + 1);
|
|
376
|
+
if (t === "right" && r === "left") {
|
|
377
|
+
n = !0;
|
|
378
|
+
break;
|
|
379
|
+
}
|
|
380
|
+
}
|
|
381
|
+
let r = e[0].width || 140, i = e[0].height || 200, a = Math.max(20, Math.round(r * .3)), o = Math.max(30, Math.round(i * .5)), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Set();
|
|
382
|
+
for (let e of t) {
|
|
383
|
+
let t = A(e.fromAnchorId), n = A(e.toAnchorId);
|
|
384
|
+
t !== n && (s.has(t) || s.set(t, []), s.get(t).includes(n) || s.get(t).push(n), c.add(n));
|
|
377
385
|
}
|
|
378
|
-
let
|
|
386
|
+
let l = (e) => {
|
|
379
387
|
let t = /* @__PURE__ */ new Set(), n = (e) => {
|
|
380
388
|
if (!t.has(e)) {
|
|
381
389
|
t.add(e);
|
|
382
|
-
for (let t of
|
|
390
|
+
for (let t of s.get(e) ?? []) n(t);
|
|
383
391
|
}
|
|
384
392
|
};
|
|
385
393
|
return n(e), t;
|
|
386
|
-
},
|
|
387
|
-
if (
|
|
388
|
-
let
|
|
389
|
-
for (let e of
|
|
390
|
-
let t =
|
|
391
|
-
t.size >
|
|
394
|
+
}, u = e.filter((e) => !c.has(e.id));
|
|
395
|
+
if (u.length === 0) return null;
|
|
396
|
+
let d = u[0], f = l(d.id);
|
|
397
|
+
for (let e of u) {
|
|
398
|
+
let t = l(e.id);
|
|
399
|
+
t.size > f.size && (d = e, f = t);
|
|
392
400
|
}
|
|
393
|
-
let
|
|
401
|
+
let p = /* @__PURE__ */ new Map(), m = (e, t) => {
|
|
394
402
|
if (t.has(e)) return 1;
|
|
395
403
|
t.add(e);
|
|
396
|
-
let n =
|
|
397
|
-
return n.length === 0 ? 1 : n.reduce((e, n) => e +
|
|
404
|
+
let n = s.get(e) ?? [];
|
|
405
|
+
return n.length === 0 ? 1 : n.reduce((e, n) => e + m(n, new Set(t)), 0);
|
|
398
406
|
};
|
|
399
|
-
for (let e of
|
|
400
|
-
let
|
|
401
|
-
if (
|
|
402
|
-
|
|
403
|
-
let
|
|
404
|
-
m.set(e, {
|
|
405
|
-
x:
|
|
406
|
-
y:
|
|
407
|
+
for (let e of f) p.set(e, m(e, /* @__PURE__ */ new Set()));
|
|
408
|
+
let h = /* @__PURE__ */ new Map(), g = (e, t, c, l) => {
|
|
409
|
+
if (l.has(e)) return;
|
|
410
|
+
l.add(e);
|
|
411
|
+
let u = p.get(e) ?? 1, d = n ? i : r, f = c + (u * d + (u - 1) * a) / 2, m, _;
|
|
412
|
+
n ? (m = t * (r + o), _ = f - i / 2) : (m = f - r / 2, _ = t * (i + o)), h.set(e, {
|
|
413
|
+
x: m,
|
|
414
|
+
y: _
|
|
407
415
|
});
|
|
408
|
-
let
|
|
409
|
-
for (let
|
|
410
|
-
let e =
|
|
411
|
-
|
|
416
|
+
let v = c;
|
|
417
|
+
for (let n of s.get(e) ?? []) {
|
|
418
|
+
let e = p.get(n) ?? 1, r = e * d + (e - 1) * a;
|
|
419
|
+
g(n, t + 1, v, l), v += r + a;
|
|
412
420
|
}
|
|
413
421
|
};
|
|
414
|
-
|
|
415
|
-
let
|
|
416
|
-
if (!
|
|
417
|
-
let
|
|
422
|
+
g(d.id, 0, 0, /* @__PURE__ */ new Set());
|
|
423
|
+
let _ = h.get(d.id);
|
|
424
|
+
if (!_) return null;
|
|
425
|
+
let v = d.x - _.x, y = d.y - _.y;
|
|
418
426
|
return e.map((e) => {
|
|
419
|
-
let t =
|
|
427
|
+
let t = h.get(e.id);
|
|
420
428
|
if (!t) return e;
|
|
421
|
-
let n = t.x +
|
|
429
|
+
let n = t.x + v, r = t.y + y, i = e.anchors.map((t) => {
|
|
422
430
|
let i = E(t, {
|
|
423
431
|
...e,
|
|
424
432
|
x: n,
|
|
@@ -437,7 +445,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
437
445
|
anchors: i
|
|
438
446
|
};
|
|
439
447
|
});
|
|
440
|
-
},
|
|
448
|
+
}, se = /* @__PURE__ */ s({
|
|
441
449
|
__name: "FlowLinesCanvas",
|
|
442
450
|
props: {
|
|
443
451
|
nodes: {},
|
|
@@ -513,7 +521,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
513
521
|
"theme"
|
|
514
522
|
])]));
|
|
515
523
|
}
|
|
516
|
-
}),
|
|
524
|
+
}), j = ["src"], ce = { class: "node-name" }, le = /*@__PURE__*/ s({
|
|
517
525
|
__name: "FlowNode",
|
|
518
526
|
props: {
|
|
519
527
|
id: {},
|
|
@@ -639,8 +647,8 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
639
647
|
class: "node-pic",
|
|
640
648
|
src: e.pic,
|
|
641
649
|
alt: ""
|
|
642
|
-
}, null, 8,
|
|
643
|
-
a("span",
|
|
650
|
+
}, null, 8, j)) : r("", !0),
|
|
651
|
+
a("span", ce, g(e.name), 1),
|
|
644
652
|
a("div", {
|
|
645
653
|
class: "node-anchor anchor-top",
|
|
646
654
|
style: l(y("top")),
|
|
@@ -671,11 +679,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
671
679
|
}, null, 36)
|
|
672
680
|
], 38));
|
|
673
681
|
}
|
|
674
|
-
}),
|
|
682
|
+
}), M = (e, t) => {
|
|
675
683
|
let n = e.__vccOpts || e;
|
|
676
684
|
for (let [e, r] of t) n[e] = r;
|
|
677
685
|
return n;
|
|
678
|
-
},
|
|
686
|
+
}, ue = /*#__PURE__*/ M(le, [["__scopeId", "data-v-2dead940"]]), de = { class: "nodes-container" }, fe = { class: "edit-panel-field" }, pe = { class: "edit-panel-field" }, N = /*#__PURE__*/ M(/* @__PURE__ */ s({
|
|
679
687
|
__name: "FlowDesigner",
|
|
680
688
|
props: {
|
|
681
689
|
nodes: {},
|
|
@@ -813,58 +821,58 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
813
821
|
id: "2",
|
|
814
822
|
fromAnchorId: "1-right",
|
|
815
823
|
toAnchorId: "3-left"
|
|
816
|
-
}],
|
|
824
|
+
}], A = m(w.nodes ?? ee), j = m(w.lines ?? re);
|
|
817
825
|
y(() => w.nodes, (e) => {
|
|
818
|
-
e && (k.value = e);
|
|
819
|
-
}, { deep: !0 }), y(() => w.lines, (e) => {
|
|
820
826
|
e && (A.value = e);
|
|
827
|
+
}, { deep: !0 }), y(() => w.lines, (e) => {
|
|
828
|
+
e && (j.value = e);
|
|
821
829
|
}, { deep: !0 });
|
|
822
|
-
let
|
|
830
|
+
let ce = (e) => {
|
|
823
831
|
let t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), r = !1, i = (a) => {
|
|
824
832
|
if (n.has(a)) {
|
|
825
833
|
a === e && (r = !0);
|
|
826
834
|
return;
|
|
827
835
|
}
|
|
828
836
|
n.add(a);
|
|
829
|
-
let o =
|
|
837
|
+
let o = A.value.find((e) => e.id === a);
|
|
830
838
|
if (!o) return;
|
|
831
839
|
let s = new Set(o.anchors.map((e) => e.id));
|
|
832
|
-
for (let e of
|
|
840
|
+
for (let e of j.value) {
|
|
833
841
|
if (!s.has(e.fromAnchorId)) continue;
|
|
834
|
-
let n =
|
|
842
|
+
let n = A.value.flatMap((e) => e.anchors).find((t) => t.id === e.toAnchorId);
|
|
835
843
|
!n || n.nodeId === a || (t.add(n.nodeId), i(n.nodeId));
|
|
836
844
|
}
|
|
837
845
|
};
|
|
838
846
|
return i(e), r ? /* @__PURE__ */ new Set() : t;
|
|
839
|
-
},
|
|
847
|
+
}, le = t(() => {
|
|
840
848
|
let e = /* @__PURE__ */ new Set();
|
|
841
|
-
for (let t of
|
|
849
|
+
for (let t of A.value) if (t.collapsed) for (let n of ce(t.id)) e.add(n);
|
|
842
850
|
return e;
|
|
843
|
-
}),
|
|
844
|
-
let e = new Set(
|
|
845
|
-
return
|
|
846
|
-
let n =
|
|
851
|
+
}), M = t(() => A.value.filter((e) => !le.value.has(e.id))), N = t(() => {
|
|
852
|
+
let e = new Set(M.value.map((e) => e.id));
|
|
853
|
+
return j.value.filter((t) => {
|
|
854
|
+
let n = A.value.flatMap((e) => e.anchors).find((e) => e.id === t.fromAnchorId), r = A.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
|
|
847
855
|
return n && r && e.has(n.nodeId) && e.has(r.nodeId);
|
|
848
856
|
});
|
|
849
|
-
}),
|
|
850
|
-
let t =
|
|
857
|
+
}), me = (e) => {
|
|
858
|
+
let t = A.value.find((t) => t.id === e);
|
|
851
859
|
if (!t) return !1;
|
|
852
860
|
let n = new Set(t.anchors.map((e) => e.id));
|
|
853
|
-
return
|
|
861
|
+
return j.value.some((t) => {
|
|
854
862
|
if (!n.has(t.fromAnchorId)) return !1;
|
|
855
|
-
let r =
|
|
863
|
+
let r = A.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
|
|
856
864
|
return !!r && r.nodeId !== e;
|
|
857
865
|
});
|
|
858
|
-
},
|
|
866
|
+
}, he = t(() => !!Y.targetId && me(Y.targetId)), ge = t(() => !!A.value.find((e) => e.id === Y.targetId)?.collapsed), _e = () => {
|
|
859
867
|
let e = Y.targetId;
|
|
860
868
|
if (!e) return;
|
|
861
|
-
let t =
|
|
869
|
+
let t = A.value.find((t) => t.id === e);
|
|
862
870
|
if (!t) return;
|
|
863
871
|
t.collapsed = !t.collapsed;
|
|
864
|
-
let n =
|
|
872
|
+
let n = oe(M.value, N.value);
|
|
865
873
|
if (n) {
|
|
866
874
|
let e = new Map(n.map((e) => [e.id, e]));
|
|
867
|
-
|
|
875
|
+
A.value = A.value.map((t) => {
|
|
868
876
|
let n = e.get(t.id);
|
|
869
877
|
return n ? {
|
|
870
878
|
...t,
|
|
@@ -872,23 +880,23 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
872
880
|
} : t;
|
|
873
881
|
});
|
|
874
882
|
}
|
|
875
|
-
T("update:nodes",
|
|
876
|
-
},
|
|
883
|
+
T("update:nodes", A.value), $();
|
|
884
|
+
}, P = p({
|
|
877
885
|
visible: !1,
|
|
878
886
|
startX: 0,
|
|
879
887
|
startY: 0,
|
|
880
888
|
endX: 0,
|
|
881
889
|
endY: 0
|
|
882
|
-
}),
|
|
890
|
+
}), F = m(1), I = p({
|
|
883
891
|
x: 100,
|
|
884
892
|
y: 100
|
|
885
|
-
}),
|
|
893
|
+
}), L = m(!1), R = p({
|
|
886
894
|
x: 0,
|
|
887
895
|
y: 0
|
|
888
|
-
}),
|
|
896
|
+
}), z = m("none"), B = p({
|
|
889
897
|
x: 0,
|
|
890
898
|
y: 0
|
|
891
|
-
}),
|
|
899
|
+
}), V = p({
|
|
892
900
|
startDist: 0,
|
|
893
901
|
startScale: 1,
|
|
894
902
|
startX: 0,
|
|
@@ -897,20 +905,20 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
897
905
|
midY: 0,
|
|
898
906
|
rectLeft: 0,
|
|
899
907
|
rectTop: 0
|
|
900
|
-
}),
|
|
908
|
+
}), H = m(null), U = p({
|
|
901
909
|
x: 0,
|
|
902
910
|
y: 0,
|
|
903
911
|
initialX: 0,
|
|
904
912
|
initialY: 0
|
|
905
|
-
}),
|
|
913
|
+
}), W = m(!1), G = m(null), K = m(""), ve = !1, q = !1, J = m(!1), ye = () => (J.value = !J.value, J.value), be = () => {
|
|
906
914
|
let e = Z.value;
|
|
907
915
|
if (!e) return;
|
|
908
|
-
let t =
|
|
916
|
+
let t = M.value;
|
|
909
917
|
if (t.length === 0) return;
|
|
910
918
|
let n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
|
|
911
919
|
for (let e of t) e.x < n && (n = e.x), e.y < r && (r = e.y), e.x + e.width > i && (i = e.x + e.width), e.y + e.height > a && (a = e.y + e.height);
|
|
912
920
|
let o = (n + i) / 2, s = (r + a) / 2, c = e.getBoundingClientRect();
|
|
913
|
-
|
|
921
|
+
I.x = c.width / 2 - o * F.value, I.y = c.height / 2 - s * F.value;
|
|
914
922
|
}, Y = p({
|
|
915
923
|
type: "none",
|
|
916
924
|
x: 0,
|
|
@@ -925,10 +933,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
925
933
|
desc: ""
|
|
926
934
|
}), Z = m(null), xe = t(() => ({
|
|
927
935
|
position: "absolute",
|
|
928
|
-
top: `${
|
|
929
|
-
left: `${
|
|
936
|
+
top: `${I.y}px`,
|
|
937
|
+
left: `${I.x}px`,
|
|
930
938
|
transformOrigin: "0 0",
|
|
931
|
-
transform: `scale(${
|
|
939
|
+
transform: `scale(${F.value})`,
|
|
932
940
|
width: "60px",
|
|
933
941
|
height: "60px"
|
|
934
942
|
})), Se = t(() => ({
|
|
@@ -940,75 +948,75 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
940
948
|
left: `${X.x}px`,
|
|
941
949
|
top: `${X.y}px`
|
|
942
950
|
})), we = (e) => Math.max(.5, Math.min(2, e)), Te = (e, t) => Math.hypot(e.clientX - t.clientX, e.clientY - t.clientY), Ee = (e) => {
|
|
943
|
-
if (e.touches.length === 1)
|
|
951
|
+
if (e.touches.length === 1) z.value = "pan", B.x = e.touches[0].clientX, B.y = e.touches[0].clientY, H.value = null, L.value = !1, Q();
|
|
944
952
|
else if (e.touches.length === 2) {
|
|
945
|
-
|
|
953
|
+
z.value = "pinch";
|
|
946
954
|
let t = Z.value?.getBoundingClientRect();
|
|
947
|
-
|
|
955
|
+
V.startDist = Te(e.touches[0], e.touches[1]), V.startScale = F.value, V.startX = I.x, V.startY = I.y, V.midX = (e.touches[0].clientX + e.touches[1].clientX) / 2, V.midY = (e.touches[0].clientY + e.touches[1].clientY) / 2, V.rectLeft = t?.left ?? 0, V.rectTop = t?.top ?? 0;
|
|
948
956
|
}
|
|
949
957
|
D(e);
|
|
950
958
|
}, De = (e) => {
|
|
951
|
-
if (
|
|
952
|
-
let t = e.touches[0].clientX -
|
|
953
|
-
|
|
954
|
-
} else if (
|
|
959
|
+
if (z.value === "pan" && e.touches.length === 1) {
|
|
960
|
+
let t = e.touches[0].clientX - B.x, n = e.touches[0].clientY - B.y;
|
|
961
|
+
I.x += t, I.y += n, B.x = e.touches[0].clientX, B.y = e.touches[0].clientY;
|
|
962
|
+
} else if (z.value === "pinch" && e.touches.length === 2) {
|
|
955
963
|
let t = Te(e.touches[0], e.touches[1]), n = (e.touches[0].clientX + e.touches[1].clientX) / 2, r = (e.touches[0].clientY + e.touches[1].clientY) / 2;
|
|
956
|
-
if (
|
|
957
|
-
let e = we(
|
|
958
|
-
|
|
964
|
+
if (V.startDist > 0) {
|
|
965
|
+
let e = we(V.startScale * (t / V.startDist)), i = (V.midX - V.rectLeft - V.startX) / V.startScale, a = (V.midY - V.rectTop - V.startY) / V.startScale;
|
|
966
|
+
F.value = e, I.x = n - V.rectLeft - i * e, I.y = r - V.rectTop - a * e;
|
|
959
967
|
}
|
|
960
968
|
}
|
|
961
969
|
D(e);
|
|
962
970
|
}, Oe = (e) => {
|
|
963
|
-
e.touches.length === 0 ?
|
|
971
|
+
e.touches.length === 0 ? z.value = "none" : e.touches.length === 1 && z.value === "pinch" && (z.value = "pan", B.x = e.touches[0].clientX, B.y = e.touches[0].clientY);
|
|
964
972
|
}, ke = (e) => {
|
|
965
|
-
e.button === 0 && !
|
|
973
|
+
e.button === 0 && !H.value && !W.value && (L.value = !0, R.x = e.clientX, R.y = e.clientY, D(e));
|
|
966
974
|
}, Ae = (e, t, n, r) => {
|
|
967
|
-
$(),
|
|
975
|
+
$(), H.value = e, U.x = t.clientX, U.y = t.clientY, U.initialX = n, U.initialY = r, L.value = !1, D(t);
|
|
968
976
|
}, je = (e) => {
|
|
969
|
-
|
|
977
|
+
W.value && (P.endType = e);
|
|
970
978
|
}, Me = () => {
|
|
971
|
-
|
|
979
|
+
W.value && (P.endType = void 0);
|
|
972
980
|
}, Ne = (e, t) => {
|
|
973
|
-
if (D(t),
|
|
974
|
-
if (
|
|
981
|
+
if (D(t), W.value && G.value && G.value.nodeId !== e.nodeId) {
|
|
982
|
+
if (ae(j.value, G.value.id, e.id)) {
|
|
975
983
|
Q(), alert("该锚点之间已存在连线,禁止重复创建!");
|
|
976
984
|
return;
|
|
977
985
|
}
|
|
978
986
|
let t = {
|
|
979
987
|
id: ne(),
|
|
980
|
-
fromAnchorId:
|
|
988
|
+
fromAnchorId: G.value.id,
|
|
981
989
|
toAnchorId: e.id
|
|
982
990
|
};
|
|
983
|
-
|
|
991
|
+
j.value.push(t), T("update:lines", j.value), Q();
|
|
984
992
|
return;
|
|
985
993
|
}
|
|
986
|
-
if (!
|
|
987
|
-
$(),
|
|
988
|
-
let t =
|
|
994
|
+
if (!W.value) {
|
|
995
|
+
$(), W.value = !0, G.value = e, L.value = !1;
|
|
996
|
+
let t = A.value.find((t) => t.id === e.nodeId);
|
|
989
997
|
if (!t) return;
|
|
990
998
|
let n = E(e, t);
|
|
991
|
-
switch (
|
|
999
|
+
switch (P.visible = !0, P.startX = n.x, P.startY = n.y, P.startType = e.type, e.type) {
|
|
992
1000
|
case "top":
|
|
993
|
-
|
|
1001
|
+
P.endX = n.x, P.endY = n.y - 50;
|
|
994
1002
|
break;
|
|
995
1003
|
case "bottom":
|
|
996
|
-
|
|
1004
|
+
P.endX = n.x, P.endY = n.y + 50;
|
|
997
1005
|
break;
|
|
998
1006
|
case "left":
|
|
999
|
-
|
|
1007
|
+
P.endX = n.x - 50, P.endY = n.y;
|
|
1000
1008
|
break;
|
|
1001
|
-
case "right":
|
|
1009
|
+
case "right": P.endX = n.x + 50, P.endY = n.y;
|
|
1002
1010
|
}
|
|
1003
1011
|
}
|
|
1004
1012
|
}, Pe = (e) => {
|
|
1005
|
-
if (
|
|
1006
|
-
if (!
|
|
1007
|
-
let t = (e.clientX -
|
|
1013
|
+
if (H.value) {
|
|
1014
|
+
if (!A.value.find((e) => e.id === H.value)) return;
|
|
1015
|
+
let t = (e.clientX - U.x) / F.value, n = (e.clientY - U.y) / F.value, r = U.initialX + t, i = U.initialY + n, a = A.value.findIndex((e) => e.id === H.value);
|
|
1008
1016
|
if (a !== -1) {
|
|
1009
|
-
let e =
|
|
1017
|
+
let e = A.value[a].anchors.map((e) => {
|
|
1010
1018
|
let t = E(e, {
|
|
1011
|
-
...
|
|
1019
|
+
...A.value[a],
|
|
1012
1020
|
x: r,
|
|
1013
1021
|
y: i
|
|
1014
1022
|
});
|
|
@@ -1018,53 +1026,53 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1018
1026
|
y: t.y
|
|
1019
1027
|
};
|
|
1020
1028
|
});
|
|
1021
|
-
|
|
1022
|
-
...
|
|
1029
|
+
A.value[a] = {
|
|
1030
|
+
...A.value[a],
|
|
1023
1031
|
x: r,
|
|
1024
1032
|
y: i,
|
|
1025
1033
|
anchors: e
|
|
1026
1034
|
};
|
|
1027
1035
|
}
|
|
1028
|
-
} else if (
|
|
1036
|
+
} else if (W.value && G.value) {
|
|
1029
1037
|
let t = Z.value?.getBoundingClientRect();
|
|
1030
1038
|
if (!t) return;
|
|
1031
|
-
let n = (e.clientX - t.left -
|
|
1032
|
-
|
|
1033
|
-
} else if (
|
|
1034
|
-
let t = e.clientX -
|
|
1035
|
-
|
|
1039
|
+
let n = (e.clientX - t.left - I.x) / F.value, r = (e.clientY - t.top - I.y) / F.value;
|
|
1040
|
+
P.endX = n, P.endY = r;
|
|
1041
|
+
} else if (L.value) {
|
|
1042
|
+
let t = e.clientX - R.x, n = e.clientY - R.y;
|
|
1043
|
+
I.x += t, I.y += n, R.x = e.clientX, R.y = e.clientY;
|
|
1036
1044
|
}
|
|
1037
1045
|
}, Fe = (e) => {
|
|
1038
|
-
if (
|
|
1039
|
-
else if (
|
|
1040
|
-
else if (
|
|
1046
|
+
if (L.value) L.value = !1;
|
|
1047
|
+
else if (H.value) H.value = null, T("update:nodes", A.value);
|
|
1048
|
+
else if (W.value && G.value) {
|
|
1041
1049
|
let t = Z.value?.getBoundingClientRect();
|
|
1042
1050
|
if (!t) {
|
|
1043
1051
|
Q();
|
|
1044
1052
|
return;
|
|
1045
1053
|
}
|
|
1046
|
-
let n = te(e.clientX, e.clientY,
|
|
1047
|
-
if (n && n.nodeId !==
|
|
1054
|
+
let n = te(e.clientX, e.clientY, M.value, I, F.value, t);
|
|
1055
|
+
if (n && n.nodeId !== G.value.nodeId && !ae(j.value, G.value.id, n.id)) {
|
|
1048
1056
|
let e = {
|
|
1049
1057
|
id: ne(),
|
|
1050
|
-
fromAnchorId:
|
|
1058
|
+
fromAnchorId: G.value.id,
|
|
1051
1059
|
toAnchorId: n.id
|
|
1052
1060
|
};
|
|
1053
|
-
|
|
1061
|
+
j.value.push(e), T("update:lines", j.value);
|
|
1054
1062
|
}
|
|
1055
1063
|
Q();
|
|
1056
1064
|
}
|
|
1057
1065
|
}, Q = () => {
|
|
1058
|
-
|
|
1066
|
+
W.value = !1, G.value = null, P.visible = !1, P.startX = 0, P.startY = 0, P.endX = 0, P.endY = 0, P.startType = void 0, P.endType = void 0;
|
|
1059
1067
|
}, Ie = (e) => {
|
|
1060
1068
|
if (e.altKey) {
|
|
1061
1069
|
D(e);
|
|
1062
|
-
let t =
|
|
1063
|
-
|
|
1070
|
+
let t = F.value + (e.deltaY < 0 ? .1 : -.1);
|
|
1071
|
+
F.value = we(t);
|
|
1064
1072
|
}
|
|
1065
1073
|
}, Le = (e, t) => {
|
|
1066
|
-
D(t),
|
|
1067
|
-
let n =
|
|
1074
|
+
D(t), ve = !0, q = !0;
|
|
1075
|
+
let n = A.value.find((t) => t.id === e);
|
|
1068
1076
|
if (!n) return;
|
|
1069
1077
|
let r = Z.value?.getBoundingClientRect();
|
|
1070
1078
|
r && (Y.type = "node", Y.x = t.clientX - r.left, Y.y = t.clientY - r.top, Y.targetId = e, X.nodeId = e, X.name = n.name, X.desc = n.desc || "", setTimeout(() => {
|
|
@@ -1073,10 +1081,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1073
1081
|
}, Re = (e) => {
|
|
1074
1082
|
T("beforeDeleteNode", e);
|
|
1075
1083
|
let t = /* @__PURE__ */ new Map();
|
|
1076
|
-
for (let e of
|
|
1077
|
-
|
|
1084
|
+
for (let e of A.value) for (let n of e.anchors) t.set(n.id, e.id);
|
|
1085
|
+
A.value = A.value.filter((t) => t.id !== e), T("update:nodes", A.value), j.value = j.value.filter((n) => t.get(n.fromAnchorId) !== e && t.get(n.toAnchorId) !== e), T("update:lines", j.value), K.value = "";
|
|
1078
1086
|
}, ze = (e) => {
|
|
1079
|
-
T("beforeDeleteLine", e),
|
|
1087
|
+
T("beforeDeleteLine", e), j.value = j.value.filter((t) => t.id !== e), T("update:lines", j.value), K.value = "", $();
|
|
1080
1088
|
}, Be = () => {
|
|
1081
1089
|
Y.targetId && (Re(Y.targetId), $());
|
|
1082
1090
|
}, Ve = (e = {}) => {
|
|
@@ -1121,10 +1129,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1121
1129
|
}
|
|
1122
1130
|
]
|
|
1123
1131
|
};
|
|
1124
|
-
return
|
|
1132
|
+
return A.value.push(o), T("update:nodes", A.value), o;
|
|
1125
1133
|
}, He = () => {
|
|
1126
1134
|
if (!Y.x || !Y.y) return;
|
|
1127
|
-
let e = (Y.x -
|
|
1135
|
+
let e = (Y.x - I.x) / F.value + 50, t = (Y.y - I.y) / F.value + 50, n = Y.targetId ? A.value.find((e) => e.id === Y.targetId) : void 0;
|
|
1128
1136
|
Ve({
|
|
1129
1137
|
x: e,
|
|
1130
1138
|
y: t,
|
|
@@ -1133,24 +1141,24 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1133
1141
|
}), $();
|
|
1134
1142
|
}, Ue = () => {
|
|
1135
1143
|
if (!Y.targetId) return;
|
|
1136
|
-
let e =
|
|
1144
|
+
let e = A.value.find((e) => e.id === Y.targetId);
|
|
1137
1145
|
e && (X.visible = !0, X.nodeId = Y.targetId, X.x = Y.x, X.y = Y.y, X.name = e.name, X.desc = e.desc || "", Y.type = "none", q = !0, setTimeout(() => {
|
|
1138
1146
|
q = !1;
|
|
1139
1147
|
}, 100));
|
|
1140
1148
|
}, We = () => {
|
|
1141
1149
|
if (!X.nodeId) return;
|
|
1142
|
-
let e =
|
|
1143
|
-
e !== -1 && (
|
|
1144
|
-
...
|
|
1150
|
+
let e = A.value.findIndex((e) => e.id === X.nodeId);
|
|
1151
|
+
e !== -1 && (A.value[e] = {
|
|
1152
|
+
...A.value[e],
|
|
1145
1153
|
name: X.name || "未命名节点",
|
|
1146
1154
|
desc: X.desc
|
|
1147
|
-
}, T("update:nodes",
|
|
1155
|
+
}, T("update:nodes", A.value)), X.visible = !1;
|
|
1148
1156
|
}, Ge = (e, t) => {
|
|
1149
1157
|
let n = Z.value?.getBoundingClientRect();
|
|
1150
1158
|
if (!n) return null;
|
|
1151
|
-
let r = (e - n.left -
|
|
1152
|
-
for (let e =
|
|
1153
|
-
let t =
|
|
1159
|
+
let r = (e - n.left - I.x) / F.value, i = (t - n.top - I.y) / F.value;
|
|
1160
|
+
for (let e = M.value.length - 1; e >= 0; e--) {
|
|
1161
|
+
let t = M.value[e];
|
|
1154
1162
|
if (r >= t.x && r <= t.x + t.width && i >= t.y && i <= t.y + t.height) return t;
|
|
1155
1163
|
}
|
|
1156
1164
|
return null;
|
|
@@ -1158,17 +1166,17 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1158
1166
|
let t = Z.value?.getBoundingClientRect();
|
|
1159
1167
|
if (!t) return;
|
|
1160
1168
|
if (Ge(e.clientX, e.clientY)) {
|
|
1161
|
-
|
|
1169
|
+
K.value = "";
|
|
1162
1170
|
return;
|
|
1163
1171
|
}
|
|
1164
|
-
let n =
|
|
1172
|
+
let n = k(M.value), r = N.value.filter((r) => O(r, M.value, e.clientX, e.clientY, I, F.value, t, 8, n));
|
|
1165
1173
|
if (r.length) {
|
|
1166
|
-
let e =
|
|
1167
|
-
|
|
1168
|
-
} else
|
|
1174
|
+
let e = ie(N.value, r, K.value);
|
|
1175
|
+
K.value = e;
|
|
1176
|
+
} else K.value = "";
|
|
1169
1177
|
}, qe = (e) => {
|
|
1170
|
-
if (
|
|
1171
|
-
|
|
1178
|
+
if (ve) {
|
|
1179
|
+
ve = !1;
|
|
1172
1180
|
return;
|
|
1173
1181
|
}
|
|
1174
1182
|
let t = Z.value?.getBoundingClientRect();
|
|
@@ -1176,15 +1184,15 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1176
1184
|
D(e), $(), q = !0;
|
|
1177
1185
|
let n = Ge(e.clientX, e.clientY);
|
|
1178
1186
|
if (n) {
|
|
1179
|
-
Y.type = "node", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n.id, X.nodeId = n.id, X.name = n.name, X.desc = n.desc || "",
|
|
1187
|
+
Y.type = "node", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n.id, X.nodeId = n.id, X.name = n.name, X.desc = n.desc || "", K.value = "", setTimeout(() => {
|
|
1180
1188
|
q = !1;
|
|
1181
1189
|
}, 100);
|
|
1182
1190
|
return;
|
|
1183
1191
|
}
|
|
1184
|
-
let r =
|
|
1192
|
+
let r = k(M.value), i = N.value.filter((n) => O(n, M.value, e.clientX, e.clientY, I, F.value, t, 8, r));
|
|
1185
1193
|
if (i.length) {
|
|
1186
|
-
let n =
|
|
1187
|
-
|
|
1194
|
+
let n = ie(N.value, i, K.value);
|
|
1195
|
+
K.value = n, Y.type = "line", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n;
|
|
1188
1196
|
}
|
|
1189
1197
|
setTimeout(() => {
|
|
1190
1198
|
q = !1;
|
|
@@ -1203,11 +1211,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1203
1211
|
}), d(() => {
|
|
1204
1212
|
document.removeEventListener("click", Je), document.removeEventListener("keydown", Ye);
|
|
1205
1213
|
}), S({
|
|
1206
|
-
getNodes: () =>
|
|
1207
|
-
getLines: () =>
|
|
1214
|
+
getNodes: () => A.value,
|
|
1215
|
+
getLines: () => j.value,
|
|
1208
1216
|
exportData: () => ({
|
|
1209
|
-
nodes:
|
|
1210
|
-
lines:
|
|
1217
|
+
nodes: A.value,
|
|
1218
|
+
lines: j.value
|
|
1211
1219
|
}),
|
|
1212
1220
|
addNode: Ve,
|
|
1213
1221
|
deleteNode: Re,
|
|
@@ -1221,7 +1229,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1221
1229
|
a("div", {
|
|
1222
1230
|
ref_key: "canvasContainerRef",
|
|
1223
1231
|
ref: Z,
|
|
1224
|
-
class: c(["canvas-container", { "is-dragging": !!
|
|
1232
|
+
class: c(["canvas-container", { "is-dragging": !!H.value || L.value }]),
|
|
1225
1233
|
onMousedown: ke,
|
|
1226
1234
|
onMousemove: Pe,
|
|
1227
1235
|
onMouseup: Fe,
|
|
@@ -1236,12 +1244,12 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1236
1244
|
}, [a("div", {
|
|
1237
1245
|
class: "canvas-content",
|
|
1238
1246
|
style: l(xe.value)
|
|
1239
|
-
}, [o(
|
|
1240
|
-
nodes:
|
|
1241
|
-
lines:
|
|
1242
|
-
scale:
|
|
1243
|
-
"temp-line":
|
|
1244
|
-
"selected-line-id":
|
|
1247
|
+
}, [o(se, {
|
|
1248
|
+
nodes: M.value,
|
|
1249
|
+
lines: N.value,
|
|
1250
|
+
scale: F.value,
|
|
1251
|
+
"temp-line": P,
|
|
1252
|
+
"selected-line-id": K.value,
|
|
1245
1253
|
animated: J.value,
|
|
1246
1254
|
theme: s.theme
|
|
1247
1255
|
}, null, 8, [
|
|
@@ -1252,7 +1260,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1252
1260
|
"selected-line-id",
|
|
1253
1261
|
"animated",
|
|
1254
1262
|
"theme"
|
|
1255
|
-
]), a("div",
|
|
1263
|
+
]), a("div", de, [(f(!0), i(e, null, h(M.value, (e) => (f(), n(ue, {
|
|
1256
1264
|
key: e.id,
|
|
1257
1265
|
id: e.id,
|
|
1258
1266
|
name: e.name,
|
|
@@ -1262,7 +1270,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1262
1270
|
width: e.width,
|
|
1263
1271
|
height: e.height,
|
|
1264
1272
|
pic: e.pic,
|
|
1265
|
-
"is-dragging":
|
|
1273
|
+
"is-dragging": H.value === e.id,
|
|
1266
1274
|
onDragStart: Ae,
|
|
1267
1275
|
onAnchorClick: Ne,
|
|
1268
1276
|
onContextMenu: Le,
|
|
@@ -1292,11 +1300,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1292
1300
|
class: "context-menu-item",
|
|
1293
1301
|
onClick: He
|
|
1294
1302
|
}, "新增节点"),
|
|
1295
|
-
|
|
1303
|
+
he.value ? (f(), i("div", {
|
|
1296
1304
|
key: 0,
|
|
1297
1305
|
class: "context-menu-item",
|
|
1298
|
-
onClick:
|
|
1299
|
-
}, g(
|
|
1306
|
+
onClick: _e
|
|
1307
|
+
}, g(ge.value ? "显示子节点" : "折叠子节点"), 1)) : r("", !0),
|
|
1300
1308
|
u[4] ||= a("div", { class: "context-menu-divider" }, null, -1),
|
|
1301
1309
|
a("div", {
|
|
1302
1310
|
class: "context-menu-item danger",
|
|
@@ -1317,13 +1325,13 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1317
1325
|
style: l(Ce.value)
|
|
1318
1326
|
}, [
|
|
1319
1327
|
u[7] ||= a("h3", { class: "edit-panel-title" }, "编辑节点", -1),
|
|
1320
|
-
a("div",
|
|
1328
|
+
a("div", fe, [u[5] ||= a("label", { class: "edit-panel-label" }, "节点名称", -1), b(a("input", {
|
|
1321
1329
|
"onUpdate:modelValue": u[1] ||= (e) => X.name = e,
|
|
1322
1330
|
type: "text",
|
|
1323
1331
|
class: "edit-panel-input",
|
|
1324
1332
|
placeholder: "请输入节点名称"
|
|
1325
1333
|
}, null, 512), [[v, X.name]])]),
|
|
1326
|
-
a("div",
|
|
1334
|
+
a("div", pe, [u[6] ||= a("label", { class: "edit-panel-label" }, "节点描述", -1), b(a("input", {
|
|
1327
1335
|
"onUpdate:modelValue": u[2] ||= (e) => X.desc = e,
|
|
1328
1336
|
type: "text",
|
|
1329
1337
|
class: "edit-panel-input",
|
|
@@ -1339,7 +1347,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1339
1347
|
], 4)) : r("", !0)
|
|
1340
1348
|
], 34));
|
|
1341
1349
|
}
|
|
1342
|
-
}), [["__scopeId", "data-v-0545e5a3"]]),
|
|
1350
|
+
}), [["__scopeId", "data-v-0545e5a3"]]), me = (e, t, n) => [
|
|
1343
1351
|
{
|
|
1344
1352
|
id: `${e}-top`,
|
|
1345
1353
|
nodeId: e,
|
|
@@ -1368,7 +1376,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1368
1376
|
x: t,
|
|
1369
1377
|
y: n / 2
|
|
1370
1378
|
}
|
|
1371
|
-
],
|
|
1379
|
+
], he = (e, t = {}) => {
|
|
1372
1380
|
let { nodeWidth: n = 140, nodeHeight: r = 200, hGap: i = 100, vGap: a = 120, offsetX: o = 0, offsetY: s = 0, direction: c = "vertical" } = t, l = [], u = [], d = /* @__PURE__ */ new Map(), f = (e) => {
|
|
1373
1381
|
let t = e.children ?? [], n = t.length === 0 ? 1 : t.reduce((e, t) => e + f(t), 0);
|
|
1374
1382
|
return d.set(e.id, n), n;
|
|
@@ -1384,7 +1392,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1384
1392
|
y: b,
|
|
1385
1393
|
width: n,
|
|
1386
1394
|
height: r,
|
|
1387
|
-
anchors:
|
|
1395
|
+
anchors: me(e.id, n, r)
|
|
1388
1396
|
}), f.length > 0) {
|
|
1389
1397
|
let n = c;
|
|
1390
1398
|
for (let r of f) {
|
|
@@ -1402,7 +1410,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1402
1410
|
nodes: l,
|
|
1403
1411
|
lines: u
|
|
1404
1412
|
};
|
|
1405
|
-
},
|
|
1413
|
+
}, ge = (e, t) => {
|
|
1406
1414
|
if (e.length === 0) return null;
|
|
1407
1415
|
let n = (e) => {
|
|
1408
1416
|
let t = e.lastIndexOf("-");
|
|
@@ -1432,4 +1440,4 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
|
|
|
1432
1440
|
return l(a.id);
|
|
1433
1441
|
};
|
|
1434
1442
|
//#endregion
|
|
1435
|
-
export {
|
|
1443
|
+
export { N as FlowDesigner, se as FlowLinesCanvas, ue as FlowNode, w as SingleLineCanvas, T as TempLineCanvas, k as buildAnchorMap, ge as flowToTree, ne as generateLineId, ee as getAnchorPosition, E as getLineEndpoint, te as hitTestAnchor, ae as isDuplicateLine, O as isHit, oe as relayoutTree, D as stopEvent, ie as toggleSelectedLine, he as treeToFlow };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueTreeFlow={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=[`id`],r=[`id`],i=(0,t.defineComponent)({__name:`SingleLineCanvas`,props:{lineId:{},fromAnchor:{},toAnchor:{},scale:{default:1},isSelected:{type:Boolean,default:!1},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let i=e,a=(0,t.ref)(null),o=(0,t.ref)(null),s=null,c={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},l={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},u=()=>{if(!a.value||!o.value)return;let{cp1X:e,cp1Y:t,cp2X:n,cp2Y:r}=f(i.fromAnchor.type,i.toAnchor.type,i.fromAnchor.x,i.fromAnchor.y,i.toAnchor.x,i.toAnchor.y),s=[i.fromAnchor.x,i.toAnchor.x,e,n],c=[i.fromAnchor.y,i.toAnchor.y,t,r],l=Math.min(...s)-30,u=Math.min(...c)-30,d=Math.max(...s)+30,p=Math.max(...c)+30,m=d-l,h=p-u;a.value.style.left=`${l}px`,a.value.style.top=`${u}px`,a.value.style.width=`${m}px`,a.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;o.value.width=Math.round(m*i.scale*g),o.value.height=Math.round(h*i.scale*g),o.value.style.width=`${m}px`,o.value.style.height=`${h}px`},d=(e,t,n,r,i)=>{if(!a.value)return;e.save();let o=t-a.value.offsetLeft,s=n-a.value.offsetTop;e.translate(o,s),e.rotate(r),e.fillStyle=i,e.beginPath(),e.moveTo(0,0),e.lineTo(-15,-8),e.lineTo(-15,8),e.closePath(),e.fill(),e.restore()},f=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},p=()=>{if(!o.value)return;let e=o.value,t=e.getContext(`2d`);if(!t)return;let n=window.devicePixelRatio||1;t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,e.width,e.height),t.scale(i.scale,i.scale);let r=i.theme===`light`?`#3182ce`:`#4299e1`,s=i.isSelected?`#ff6b6b`:r,c=i.isSelected?4:3,l=i.isSelected?1:3;if(!a.value)return;let u=i.fromAnchor.x-a.value.offsetLeft,p=i.fromAnchor.y-a.value.offsetTop,m=i.toAnchor.x-a.value.offsetLeft,h=i.toAnchor.y-a.value.offsetTop,{cp1X:g,cp1Y:_,cp2X:v,cp2Y:y}=f(i.fromAnchor.type,i.toAnchor.type,u,p,m,h);t.strokeStyle=s,t.lineWidth=c,t.lineCap=`round`,i.animated?(t.setLineDash([15,10]),t.lineDashOffset=-(Date.now()/50)*l%100):(t.setLineDash([]),t.lineDashOffset=0),t.beginPath(),t.moveTo(u,p),t.bezierCurveTo(g,_,v,y,m,h),t.stroke();let b=m-v,x=h-y,S=Math.atan2(x,b);d(t,i.toAnchor.x,i.toAnchor.y,S,s)},m=()=>{p(),s=requestAnimationFrame(m)},h=()=>{s||m()},g=()=>{s&&=(cancelAnimationFrame(s),null)},_=()=>{u(),p()};return(0,t.watch)(()=>[i.fromAnchor,i.toAnchor,i.scale,i.isSelected,i.animated,i.theme],()=>{u(),i.animated?h():(g(),p())},{deep:!0}),(0,t.onMounted)(()=>{u(),window.addEventListener(`resize`,_),i.animated?h():p()}),(0,t.onUnmounted)(()=>{window.removeEventListener(`resize`,_),g()}),(i,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`containerRef`,ref:a,id:`linker_${e.lineId}`,class:`shape_box linker_box`,style:c},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:o,id:`linker_canvas_${e.lineId}`,class:`shape_canvas`,style:l},null,8,r)],8,n))}}),a=(0,t.defineComponent)({__name:`TempLineCanvas`,props:{visible:{type:Boolean,default:!1},startX:{default:0},startY:{default:0},endX:{default:0},endY:{default:0},scale:{default:1},startType:{default:`right`},endType:{default:`left`},theme:{default:`dark`}},setup(e){let n=e,r=()=>n.theme===`light`?`#3182ce`:`#4299e1`,i=(0,t.ref)(null),a=(0,t.ref)(null),o=null,s={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},c={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},l=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}let f=t;if(!f){let e=i-n,t=a-r;f=Math.abs(e)>Math.abs(t)?e>0?`left`:`right`:t>0?`top`:`bottom`}switch(f){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},u=()=>{if(!n.visible||!i.value||!a.value)return;let{cp1X:e,cp1Y:t,cp2X:r,cp2Y:o}=l(n.startType||`right`,n.endType,n.startX,n.startY,n.endX,n.endY),s=[n.startX,n.endX,e,r],c=[n.startY,n.endY,t,o],u=Math.min(...s)-30,d=Math.min(...c)-30,f=Math.max(...s)+30,p=Math.max(...c)+30,m=f-u,h=p-d;i.value.style.left=`${u}px`,i.value.style.top=`${d}px`,i.value.style.width=`${m}px`,i.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;a.value.width=Math.round(m*n.scale*g),a.value.height=Math.round(h*n.scale*g),a.value.style.width=`${m}px`,a.value.style.height=`${h}px`},d=()=>{if(!n.visible||!a.value||!i.value)return;let e=a.value,t=e.getContext(`2d`);if(!t)return;let o=window.devicePixelRatio||1;t.setTransform(o,0,0,o,0,0),t.clearRect(0,0,e.width,e.height),t.scale(n.scale,n.scale),t.strokeStyle=r(),t.lineWidth=2,t.lineCap=`round`,t.setLineDash([10,8]);let s=parseFloat(i.value.style.left||`0`),c=parseFloat(i.value.style.top||`0`),u=n.startX-s,d=n.startY-c,f=n.endX-s,p=n.endY-c,{cp1X:m,cp1Y:h,cp2X:g,cp2Y:_}=l(n.startType||`right`,n.endType||`left`,n.startX,n.startY,n.endX,n.endY),v=m-s,y=h-c,b=g-s,x=_-c;t.beginPath(),t.moveTo(u,d),t.bezierCurveTo(v,y,b,x,f,p),t.stroke();let S=f-b,C=p-x,w=Math.atan2(C,S);t.save(),t.translate(f,p),t.rotate(w),t.fillStyle=r(),t.beginPath(),t.moveTo(0,0),t.lineTo(-15,-8),t.lineTo(-15,8),t.closePath(),t.fill(),t.restore()},f=()=>{d(),o=requestAnimationFrame(f)},p=()=>{o||f()},m=()=>{o&&=(cancelAnimationFrame(o),null)};return(0,t.watch)(()=>[n.visible,n.startX,n.startY,n.endX,n.endY,n.scale],()=>{n.visible?(u(),p()):m()},{immediate:!0}),(0,t.onMounted)(()=>{n.visible&&(u(),p())}),(0,t.onUnmounted)(()=>{m()}),(n,r)=>e.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`containerRef`,ref:i,style:s},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,style:c},null,512)],512)):(0,t.createCommentVNode)(``,!0)}}),o=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y-6};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height-6};case`left`:return{x:t.x-6,y:t.y+t.height/2};case`right`:return{x:t.x+t.width-6,y:t.y+t.height/2}}},s=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height};case`left`:return{x:t.x,y:t.y+t.height/2};case`right`:return{x:t.x+t.width,y:t.y+t.height/2}}},c=(e,t,n,r,i,a)=>{let s=(e-a.left-r.x)/i,c=(t-a.top-r.y)/i;for(let e of n)for(let t of e.anchors){let n=o(t,e);if(Math.hypot(s-n.x,c-n.y)<15)return{...t,x:n.x,y:n.y}}return null},l=()=>`line_${Date.now()}_${Math.floor(Math.random()*1e3)}`,u=e=>{e.stopPropagation(),e.preventDefault()},d=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},f=(e,t,n,r,i,a,o,c=8,l)=>{let u,f,p,m;if(l){let t=l.get(e.fromAnchorId),n=l.get(e.toAnchorId);t&&(u=t.anchor,p=t.node),n&&(f=n.anchor,m=n.node)}else{if(u=t.flatMap(e=>e.anchors).find(t=>t.id===e.fromAnchorId),f=t.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId),u){let e=u.nodeId;p=t.find(t=>t.id===e)}if(f){let e=f.nodeId;m=t.find(t=>t.id===e)}}if(!u||!f||!p||!m)return!1;let h=s(u,p),g=s(f,m),_=(n-o.left-i.x)/a,v=(r-o.top-i.y)/a,{cp1X:y,cp1Y:b,cp2X:x,cp2Y:S}=d(u.type,f.type,h.x,h.y,g.x,g.y),C=Math.min(h.x,g.x,y,x)-c,w=Math.max(h.x,g.x,y,x)+c,ee=Math.min(h.y,g.y,b,S)-c,T=Math.max(h.y,g.y,b,S)+c;if(_<C||_>w||v<ee||v>T)return!1;for(let e=0;e<=1;e+=.005){let t=1-e,n=h.x*t*t*t+3*y*t*t*e+3*x*t*e*e+g.x*e*e*e,r=h.y*t*t*t+3*b*t*t*e+3*S*t*e*e+g.y*e*e*e;if(Math.hypot(_-n,v-r)<c)return!0}return!1},p=e=>{let t=new Map;for(let n of e)for(let e of n.anchors)t.set(e.id,{anchor:e,node:n});return t},m=(e,t,n)=>t.length===0?``:t[(t.findIndex(e=>e.id===n)+1)%t.length].id,h=(e,t,n)=>e.some(e=>e.fromAnchorId===t&&e.toAnchorId===n),g=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},_=(e,t)=>{if(e.length===0)return null;let n=e[0].width||140,r=e[0].height||200,i=Math.max(20,Math.round(n*.3)),a=Math.max(30,Math.round(r*.5)),o=new Map,c=new Set;for(let e of t){let t=g(e.fromAnchorId),n=g(e.toAnchorId);t!==n&&(o.has(t)||o.set(t,[]),o.get(t).includes(n)||o.get(t).push(n),c.add(n))}let l=e=>{let t=new Set,n=e=>{if(!t.has(e)){t.add(e);for(let t of o.get(e)??[])n(t)}};return n(e),t},u=e.filter(e=>!c.has(e.id));if(u.length===0)return null;let d=u[0],f=l(d.id);for(let e of u){let t=l(e.id);t.size>f.size&&(d=e,f=t)}let p=new Map,m=(e,t)=>{if(t.has(e))return 1;t.add(e);let n=o.get(e)??[];return n.length===0?1:n.reduce((e,n)=>e+m(n,new Set(t)),0)};for(let e of f)p.set(e,m(e,new Set));let h=new Map,_=(e,t,s,c)=>{if(c.has(e))return;c.add(e);let l=p.get(e)??1,u=s+(l*n+(l-1)*i)/2;h.set(e,{x:u-n/2,y:t*(r+a)});let d=s;for(let r of o.get(e)??[]){let e=p.get(r)??1,a=e*n+(e-1)*i;_(r,t+1,d,c),d+=a+i}};_(d.id,0,0,new Set);let v=h.get(d.id);if(!v)return null;let y=d.x-v.x,b=d.y-v.y;return e.map(e=>{let t=h.get(e.id);if(!t)return e;let n=t.x+y,r=t.y+b,i=e.anchors.map(t=>{let i=s(t,{...e,x:n,y:r});return{...t,x:i.x,y:i.y}});return{...e,x:n,y:r,anchors:i}})},v=(0,t.defineComponent)({__name:`FlowLinesCanvas`,props:{nodes:{},lines:{},scale:{},tempLine:{},selectedLineId:{default:``},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let n=e,r=e=>{for(let t of n.nodes){let n=t.anchors.find(t=>t.id===e);if(n){let e=s(n,t);return{...n,x:e.x,y:e.y}}}return null},o={position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,pointerEvents:`none`,zIndex:5};return(n,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{style:o},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.lines,n=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:n.id},[r(n.fromAnchorId)&&r(n.toAnchorId)?((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,"line-id":n.id,"from-anchor":r(n.fromAnchorId),"to-anchor":r(n.toAnchorId),scale:e.scale,"is-selected":e.selectedLineId===n.id,animated:e.animated,theme:e.theme},null,8,[`line-id`,`from-anchor`,`to-anchor`,`scale`,`is-selected`,`animated`,`theme`])):(0,t.createCommentVNode)(``,!0)],64))),128)),(0,t.createVNode)(a,{visible:e.tempLine.visible,"start-x":e.tempLine.startX,"start-y":e.tempLine.startY,"end-x":e.tempLine.endX,"end-y":e.tempLine.endY,scale:e.scale,"start-type":e.tempLine.startType,"end-type":e.tempLine.endType,theme:e.theme},null,8,[`visible`,`start-x`,`start-y`,`end-x`,`end-y`,`scale`,`start-type`,`end-type`,`theme`])]))}}),y=[`src`],b={class:`node-name`},x=(0,t.defineComponent)({__name:`FlowNode`,props:{id:{},name:{},desc:{},x:{},y:{},width:{default:300},height:{default:200},pic:{},isDragging:{type:Boolean,default:!1}},emits:[`dragStart`,`anchorClick`,`contextMenu`,`anchorHover`,`anchorLeave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(!1),o=(0,t.computed)(()=>({id:`${r.id}-top`,nodeId:r.id,type:`top`,x:r.x+r.width/2,y:r.y-6})),s=(0,t.computed)(()=>({id:`${r.id}-bottom`,nodeId:r.id,type:`bottom`,x:r.x+r.width/2,y:r.y+r.height-6})),c=(0,t.computed)(()=>({id:`${r.id}-left`,nodeId:r.id,type:`left`,x:r.x-6,y:r.y+r.height/2})),l=(0,t.computed)(()=>({id:`${r.id}-right`,nodeId:r.id,type:`right`,x:r.x+r.width-6,y:r.y+r.height/2})),d=(0,t.computed)(()=>({position:`absolute`,left:`${r.x}px`,top:`${r.y}px`,width:`${r.width}px`,height:`${r.height}px`,backgroundColor:`var(--fd-node-bg)`,border:`1px solid var(--fd-node-border)`,borderRadius:`8px`,color:`var(--fd-node-text)`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:r.pic?`flex-start`:`center`,fontFamily:`Arial, sans-serif`,fontSize:`14px`,boxShadow:`0 4px 12px rgba(0,0,0,0.3)`,cursor:r.isDragging?`grabbing`:`grab`,zIndex:6,userSelect:`none`,transition:`border-color 0.2s ease`,borderColor:a.value?`var(--fd-node-border-hover)`:`var(--fd-node-border)`})),f=e=>{let t={position:`absolute`,width:`12px`,height:`12px`,borderRadius:`50%`,backgroundColor:`rgba(66, 153, 225, 0.6)`,border:`2px solid #fff`,cursor:`crosshair`,zIndex:6,opacity:+!!a.value,visibility:a.value?`visible`:`hidden`,transition:`all 0.2s ease`,pointerEvents:a.value?`auto`:`none`,boxShadow:`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,touchAction:`none`};switch(e){case`top`:t.top=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`bottom`:t.bottom=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`left`:t.left=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`;break;case`right`:t.right=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`}return t},p=e=>{e.target.classList.contains(`node-anchor`)||(u(e),i(`dragStart`,r.id,e,r.x,r.y))},m=(e,t)=>{u(t),i(`anchorClick`,e,t)},h=e=>{u(e),i(`contextMenu`,r.id,e)},g=(e,t)=>{let n=e.target;n.style.opacity=`1`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1.2)`:n.style.transform=`translateY(-50%) scale(1.2)`,n.style.backgroundColor=`#4299e1`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.3), 0 0 0 6px rgba(66, 153, 225, 0.18), 0 0 0 10px rgba(66, 153, 225, 0.08)`,i(`anchorHover`,t)},_=(e,t)=>{let n=e.target;n.style.opacity=`0.9`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1)`:n.style.transform=`translateY(-50%) scale(1)`,n.style.backgroundColor=`rgba(66, 153, 225, 0.6)`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,i(`anchorLeave`)};return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`node`,{"node--with-pic":!!e.pic}]),style:(0,t.normalizeStyle)(d.value),onMousedown:p,onContextmenu:(0,t.withModifiers)(h,[`prevent`]),onMouseenter:r[12]||=e=>a.value=!0,onMouseleave:r[13]||=e=>a.value=!1},[e.pic?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,class:`node-pic`,src:e.pic,alt:``},null,8,y)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,b,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-top`,style:(0,t.normalizeStyle)(f(`top`)),onMousedown:r[0]||=(0,t.withModifiers)(e=>m(o.value,e),[`stop`]),onMouseenter:r[1]||=e=>g(e,`top`),onMouseleave:r[2]||=e=>_(e,`top`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-bottom`,style:(0,t.normalizeStyle)(f(`bottom`)),onMousedown:r[3]||=(0,t.withModifiers)(e=>m(s.value,e),[`stop`]),onMouseenter:r[4]||=e=>g(e,`bottom`),onMouseleave:r[5]||=e=>_(e,`bottom`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-left`,style:(0,t.normalizeStyle)(f(`left`)),onMousedown:r[6]||=(0,t.withModifiers)(e=>m(c.value,e),[`stop`]),onMouseenter:r[7]||=e=>g(e,`left`),onMouseleave:r[8]||=e=>_(e,`left`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-right`,style:(0,t.normalizeStyle)(f(`right`)),onMousedown:r[9]||=(0,t.withModifiers)(e=>m(l.value,e),[`stop`]),onMouseenter:r[10]||=e=>g(e,`right`),onMouseleave:r[11]||=e=>_(e,`right`)},null,36)],38))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-2dead940`]]),w={class:`nodes-container`},ee={class:`edit-panel-field`},T={class:`edit-panel-field`},E=S((0,t.defineComponent)({__name:`FlowDesigner`,props:{nodes:{},lines:{},theme:{default:`dark`}},emits:[`update:nodes`,`update:lines`,`beforeDeleteNode`,`beforeDeleteLine`,`beforeAddNode`],setup(e,{expose:n,emit:r}){let i=e,a=r,o=[{id:`1`,name:`Reference`,x:0,y:0,width:140,height:200,anchors:[{id:`1-top`,nodeId:`1`,type:`top`,x:70,y:0},{id:`1-bottom`,nodeId:`1`,type:`bottom`,x:70,y:200},{id:`1-left`,nodeId:`1`,type:`left`,x:0,y:100},{id:`1-right`,nodeId:`1`,type:`right`,x:140,y:100}]},{id:`2`,name:`Image Generation`,x:400,y:0,width:140,height:200,anchors:[{id:`2-top`,nodeId:`2`,type:`top`,x:470,y:0},{id:`2-bottom`,nodeId:`2`,type:`bottom`,x:470,y:200},{id:`2-left`,nodeId:`2`,type:`left`,x:400,y:100},{id:`2-right`,nodeId:`2`,type:`right`,x:540,y:100}]},{id:`3`,name:`Video Generation`,x:400,y:250,width:140,height:200,anchors:[{id:`3-top`,nodeId:`3`,type:`top`,x:470,y:250},{id:`3-bottom`,nodeId:`3`,type:`bottom`,x:470,y:450},{id:`3-left`,nodeId:`3`,type:`left`,x:400,y:350},{id:`3-right`,nodeId:`3`,type:`right`,x:540,y:350}]}],d=[{id:`1`,fromAnchorId:`1-right`,toAnchorId:`2-left`},{id:`2`,fromAnchorId:`1-right`,toAnchorId:`3-left`}],g=(0,t.ref)(i.nodes??o),y=(0,t.ref)(i.lines??d);(0,t.watch)(()=>i.nodes,e=>{e&&(g.value=e)},{deep:!0}),(0,t.watch)(()=>i.lines,e=>{e&&(y.value=e)},{deep:!0});let b=e=>{let t=new Set,n=new Set,r=!1,i=a=>{if(n.has(a)){a===e&&(r=!0);return}n.add(a);let o=g.value.find(e=>e.id===a);if(!o)return;let s=new Set(o.anchors.map(e=>e.id));for(let e of y.value){if(!s.has(e.fromAnchorId))continue;let n=g.value.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId);!n||n.nodeId===a||(t.add(n.nodeId),i(n.nodeId))}};return i(e),r?new Set:t},x=(0,t.computed)(()=>{let e=new Set;for(let t of g.value)if(t.collapsed)for(let n of b(t.id))e.add(n);return e}),S=(0,t.computed)(()=>g.value.filter(e=>!x.value.has(e.id))),E=(0,t.computed)(()=>{let e=new Set(S.value.map(e=>e.id));return y.value.filter(t=>{let n=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.fromAnchorId),r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return n&&r&&e.has(n.nodeId)&&e.has(r.nodeId)})}),D=e=>{let t=g.value.find(t=>t.id===e);if(!t)return!1;let n=new Set(t.anchors.map(e=>e.id));return y.value.some(t=>{if(!n.has(t.fromAnchorId))return!1;let r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return!!r&&r.nodeId!==e})},te=(0,t.computed)(()=>!!W.targetId&&D(W.targetId)),ne=(0,t.computed)(()=>!!g.value.find(e=>e.id===W.targetId)?.collapsed),re=()=>{let e=W.targetId;if(!e)return;let t=g.value.find(t=>t.id===e);if(!t)return;t.collapsed=!t.collapsed;let n=_(S.value,E.value);if(n){let e=new Map(n.map(e=>[e.id,e]));g.value=g.value.map(t=>{let n=e.get(t.id);return n?{...t,...n}:t})}a(`update:nodes`,g.value),Q()},O=(0,t.reactive)({visible:!1,startX:0,startY:0,endX:0,endY:0}),k=(0,t.ref)(1),A=(0,t.reactive)({x:100,y:100}),j=(0,t.ref)(!1),M=(0,t.reactive)({x:0,y:0}),N=(0,t.ref)(`none`),P=(0,t.reactive)({x:0,y:0}),F=(0,t.reactive)({startDist:0,startScale:1,startX:0,startY:0,midX:0,midY:0,rectLeft:0,rectTop:0}),I=(0,t.ref)(null),L=(0,t.reactive)({x:0,y:0,initialX:0,initialY:0}),R=(0,t.ref)(!1),z=(0,t.ref)(null),B=(0,t.ref)(``),V=!1,H=!1,U=(0,t.ref)(!1),ie=()=>(U.value=!U.value,U.value),ae=()=>{let e=K.value;if(!e)return;let t=S.value;if(t.length===0)return;let n=1/0,r=1/0,i=-1/0,a=-1/0;for(let e of t)e.x<n&&(n=e.x),e.y<r&&(r=e.y),e.x+e.width>i&&(i=e.x+e.width),e.y+e.height>a&&(a=e.y+e.height);let o=(n+i)/2,s=(r+a)/2,c=e.getBoundingClientRect();A.x=c.width/2-o*k.value,A.y=c.height/2-s*k.value},W=(0,t.reactive)({type:`none`,x:0,y:0,targetId:null}),G=(0,t.reactive)({visible:!1,nodeId:null,x:0,y:0,name:``,desc:``}),K=(0,t.ref)(null),oe=(0,t.computed)(()=>({position:`absolute`,top:`${A.y}px`,left:`${A.x}px`,transformOrigin:`0 0`,transform:`scale(${k.value})`,width:`60px`,height:`60px`})),q=(0,t.computed)(()=>({position:`absolute`,left:`${W.x}px`,top:`${W.y}px`})),se=(0,t.computed)(()=>({position:`absolute`,left:`${G.x}px`,top:`${G.y}px`})),J=e=>Math.max(.5,Math.min(2,e)),Y=(e,t)=>Math.hypot(e.clientX-t.clientX,e.clientY-t.clientY),ce=e=>{if(e.touches.length===1)N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY,I.value=null,j.value=!1,Z();else if(e.touches.length===2){N.value=`pinch`;let t=K.value?.getBoundingClientRect();F.startDist=Y(e.touches[0],e.touches[1]),F.startScale=k.value,F.startX=A.x,F.startY=A.y,F.midX=(e.touches[0].clientX+e.touches[1].clientX)/2,F.midY=(e.touches[0].clientY+e.touches[1].clientY)/2,F.rectLeft=t?.left??0,F.rectTop=t?.top??0}u(e)},le=e=>{if(N.value===`pan`&&e.touches.length===1){let t=e.touches[0].clientX-P.x,n=e.touches[0].clientY-P.y;A.x+=t,A.y+=n,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY}else if(N.value===`pinch`&&e.touches.length===2){let t=Y(e.touches[0],e.touches[1]),n=(e.touches[0].clientX+e.touches[1].clientX)/2,r=(e.touches[0].clientY+e.touches[1].clientY)/2;if(F.startDist>0){let e=J(F.startScale*(t/F.startDist)),i=(F.midX-F.rectLeft-F.startX)/F.startScale,a=(F.midY-F.rectTop-F.startY)/F.startScale;k.value=e,A.x=n-F.rectLeft-i*e,A.y=r-F.rectTop-a*e}}u(e)},X=e=>{e.touches.length===0?N.value=`none`:e.touches.length===1&&N.value===`pinch`&&(N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY)},ue=e=>{e.button===0&&!I.value&&!R.value&&(j.value=!0,M.x=e.clientX,M.y=e.clientY,u(e))},de=(e,t,n,r)=>{Q(),I.value=e,L.x=t.clientX,L.y=t.clientY,L.initialX=n,L.initialY=r,j.value=!1,u(t)},fe=e=>{R.value&&(O.endType=e)},pe=()=>{R.value&&(O.endType=void 0)},me=(e,t)=>{if(u(t),R.value&&z.value&&z.value.nodeId!==e.nodeId){if(h(y.value,z.value.id,e.id)){Z(),alert(`该锚点之间已存在连线,禁止重复创建!`);return}let t={id:l(),fromAnchorId:z.value.id,toAnchorId:e.id};y.value.push(t),a(`update:lines`,y.value),Z();return}if(!R.value){Q(),R.value=!0,z.value=e,j.value=!1;let t=g.value.find(t=>t.id===e.nodeId);if(!t)return;let n=s(e,t);switch(O.visible=!0,O.startX=n.x,O.startY=n.y,O.startType=e.type,e.type){case`top`:O.endX=n.x,O.endY=n.y-50;break;case`bottom`:O.endX=n.x,O.endY=n.y+50;break;case`left`:O.endX=n.x-50,O.endY=n.y;break;case`right`:O.endX=n.x+50,O.endY=n.y}}},he=e=>{if(I.value){if(!g.value.find(e=>e.id===I.value))return;let t=(e.clientX-L.x)/k.value,n=(e.clientY-L.y)/k.value,r=L.initialX+t,i=L.initialY+n,a=g.value.findIndex(e=>e.id===I.value);if(a!==-1){let e=g.value[a].anchors.map(e=>{let t=s(e,{...g.value[a],x:r,y:i});return{...e,x:t.x,y:t.y}});g.value[a]={...g.value[a],x:r,y:i,anchors:e}}}else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t)return;let n=(e.clientX-t.left-A.x)/k.value,r=(e.clientY-t.top-A.y)/k.value;O.endX=n,O.endY=r}else if(j.value){let t=e.clientX-M.x,n=e.clientY-M.y;A.x+=t,A.y+=n,M.x=e.clientX,M.y=e.clientY}},ge=e=>{if(j.value)j.value=!1;else if(I.value)I.value=null,a(`update:nodes`,g.value);else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t){Z();return}let n=c(e.clientX,e.clientY,S.value,A,k.value,t);if(n&&n.nodeId!==z.value.nodeId&&!h(y.value,z.value.id,n.id)){let e={id:l(),fromAnchorId:z.value.id,toAnchorId:n.id};y.value.push(e),a(`update:lines`,y.value)}Z()}},Z=()=>{R.value=!1,z.value=null,O.visible=!1,O.startX=0,O.startY=0,O.endX=0,O.endY=0,O.startType=void 0,O.endType=void 0},_e=e=>{if(e.altKey){u(e);let t=k.value+(e.deltaY<0?.1:-.1);k.value=J(t)}},ve=(e,t)=>{u(t),V=!0,H=!0;let n=g.value.find(t=>t.id===e);if(!n)return;let r=K.value?.getBoundingClientRect();r&&(W.type=`node`,W.x=t.clientX-r.left,W.y=t.clientY-r.top,W.targetId=e,G.nodeId=e,G.name=n.name,G.desc=n.desc||``,setTimeout(()=>{H=!1},100))},ye=e=>{a(`beforeDeleteNode`,e);let t=new Map;for(let e of g.value)for(let n of e.anchors)t.set(n.id,e.id);g.value=g.value.filter(t=>t.id!==e),a(`update:nodes`,g.value),y.value=y.value.filter(n=>t.get(n.fromAnchorId)!==e&&t.get(n.toAnchorId)!==e),a(`update:lines`,y.value),B.value=``},be=e=>{a(`beforeDeleteLine`,e),y.value=y.value.filter(t=>t.id!==e),a(`update:lines`,y.value),B.value=``,Q()},xe=()=>{W.targetId&&(ye(W.targetId),Q())},Se=(e={})=>{a(`beforeAddNode`,e);let t=e.width??140,n=e.height??200,r=e.x??100,i=e.y??100,o=`node_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,s={id:o,name:e.name??`新节点`,desc:e.desc,pic:e.pic,x:r,y:i,width:t,height:n,anchors:[{id:`${o}-top`,nodeId:o,type:`top`,x:r+t/2,y:i},{id:`${o}-bottom`,nodeId:o,type:`bottom`,x:r+t/2,y:i+n},{id:`${o}-left`,nodeId:o,type:`left`,x:r,y:i+n/2},{id:`${o}-right`,nodeId:o,type:`right`,x:r+t,y:i+n/2}]};return g.value.push(s),a(`update:nodes`,g.value),s},Ce=()=>{if(!W.x||!W.y)return;let e=(W.x-A.x)/k.value+50,t=(W.y-A.y)/k.value+50,n=W.targetId?g.value.find(e=>e.id===W.targetId):void 0;Se({x:e,y:t,width:n?.width,height:n?.height}),Q()},we=()=>{if(!W.targetId)return;let e=g.value.find(e=>e.id===W.targetId);e&&(G.visible=!0,G.nodeId=W.targetId,G.x=W.x,G.y=W.y,G.name=e.name,G.desc=e.desc||``,W.type=`none`,H=!0,setTimeout(()=>{H=!1},100))},Te=()=>{if(!G.nodeId)return;let e=g.value.findIndex(e=>e.id===G.nodeId);e!==-1&&(g.value[e]={...g.value[e],name:G.name||`未命名节点`,desc:G.desc},a(`update:nodes`,g.value)),G.visible=!1},Ee=(e,t)=>{let n=K.value?.getBoundingClientRect();if(!n)return null;let r=(e-n.left-A.x)/k.value,i=(t-n.top-A.y)/k.value;for(let e=S.value.length-1;e>=0;e--){let t=S.value[e];if(r>=t.x&&r<=t.x+t.width&&i>=t.y&&i<=t.y+t.height)return t}return null},De=e=>{let t=K.value?.getBoundingClientRect();if(!t)return;if(Ee(e.clientX,e.clientY)){B.value=``;return}let n=p(S.value),r=E.value.filter(r=>f(r,S.value,e.clientX,e.clientY,A,k.value,t,8,n));if(r.length){let e=m(E.value,r,B.value);B.value=e}else B.value=``},Oe=e=>{if(V){V=!1;return}let t=K.value?.getBoundingClientRect();if(!t)return;u(e),Q(),H=!0;let n=Ee(e.clientX,e.clientY);if(n){W.type=`node`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n.id,G.nodeId=n.id,G.name=n.name,G.desc=n.desc||``,B.value=``,setTimeout(()=>{H=!1},100);return}let r=p(S.value),i=E.value.filter(n=>f(n,S.value,e.clientX,e.clientY,A,k.value,t,8,r));if(i.length){let n=m(E.value,i,B.value);B.value=n,W.type=`line`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n}setTimeout(()=>{H=!1},100)},Q=()=>{W.type=`none`,W.x=0,W.y=0,W.targetId=null,G.visible=!1,H=!1},ke=e=>{if(H)return;let t=e.target,n=t.closest(`.context-menu`),r=t.closest(`.edit-panel`),i=t.closest(`.toolbar`);!n&&!r&&!i&&Q()},$=e=>{e.key===`Escape`&&Q()};return(0,t.onMounted)(()=>{document.addEventListener(`click`,ke),document.addEventListener(`keydown`,$)}),(0,t.onUnmounted)(()=>{document.removeEventListener(`click`,ke),document.removeEventListener(`keydown`,$)}),n({getNodes:()=>g.value,getLines:()=>y.value,exportData:()=>({nodes:g.value,lines:y.value}),addNode:Se,deleteNode:ye,deleteLine:be,toggleAnimation:ie,centerView:ae}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`flow-designer`,{"flow-designer--light":e.theme===`light`}]),onContextmenu:r[3]||=(0,t.withModifiers)(e=>(0,t.unref)(u)(e),[`prevent`])},[(0,t.createElementVNode)(`div`,{ref_key:`canvasContainerRef`,ref:K,class:(0,t.normalizeClass)([`canvas-container`,{"is-dragging":!!I.value||j.value}]),onMousedown:ue,onMousemove:he,onMouseup:ge,onMouseleave:ge,onWheel:_e,onClick:De,onContextmenu:(0,t.withModifiers)(Oe,[`prevent`]),onTouchstart:ce,onTouchmove:(0,t.withModifiers)(le,[`prevent`]),onTouchend:X,onTouchcancel:X},[(0,t.createElementVNode)(`div`,{class:`canvas-content`,style:(0,t.normalizeStyle)(oe.value)},[(0,t.createVNode)(v,{nodes:S.value,lines:E.value,scale:k.value,"temp-line":O,"selected-line-id":B.value,animated:U.value,theme:e.theme},null,8,[`nodes`,`lines`,`scale`,`temp-line`,`selected-line-id`,`animated`,`theme`]),(0,t.createElementVNode)(`div`,w,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value,e=>((0,t.openBlock)(),(0,t.createBlock)(C,{key:e.id,id:e.id,name:e.name,desc:e.desc,x:e.x,y:e.y,width:e.width,height:e.height,pic:e.pic,"is-dragging":I.value===e.id,onDragStart:de,onAnchorClick:me,onContextMenu:ve,onAnchorHover:fe,onAnchorLeave:pe},null,8,[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`pic`,`is-dragging`]))),128))])],4)],34),W.type===`node`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:we},`编辑节点`),(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:Ce},`新增节点`),te.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu-item`,onClick:re},(0,t.toDisplayString)(ne.value?`显示子节点`:`折叠子节点`),1)):(0,t.createCommentVNode)(``,!0),r[4]||=(0,t.createElementVNode)(`div`,{class:`context-menu-divider`},null,-1),(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:xe},`删除节点`)],4)):(0,t.createCommentVNode)(``,!0),W.type===`line`&&W.targetId?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:r[0]||=e=>be(W.targetId)},`删除连线`)],4)):(0,t.createCommentVNode)(``,!0),G.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:2,class:`edit-panel`,style:(0,t.normalizeStyle)(se.value)},[r[7]||=(0,t.createElementVNode)(`h3`,{class:`edit-panel-title`},`编辑节点`,-1),(0,t.createElementVNode)(`div`,ee,[r[5]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点名称`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[1]||=e=>G.name=e,type:`text`,class:`edit-panel-input`,placeholder:`请输入节点名称`},null,512),[[t.vModelText,G.name]])]),(0,t.createElementVNode)(`div`,T,[r[6]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点描述`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[2]||=e=>G.desc=e,type:`text`,class:`edit-panel-input`,placeholder:`可选:输入节点描述信息`},null,512),[[t.vModelText,G.desc]])]),(0,t.createElementVNode)(`div`,{class:`edit-panel-actions`},[(0,t.createElementVNode)(`button`,{class:`edit-panel-btn cancel`,onClick:Q},`取消`),(0,t.createElementVNode)(`button`,{class:`edit-panel-btn save`,onClick:Te},`保存`)])],4)):(0,t.createCommentVNode)(``,!0)],34))}}),[[`__scopeId`,`data-v-0545e5a3`]]),D=(e,t,n)=>[{id:`${e}-top`,nodeId:e,type:`top`,x:t/2,y:0},{id:`${e}-bottom`,nodeId:e,type:`bottom`,x:t/2,y:n},{id:`${e}-left`,nodeId:e,type:`left`,x:0,y:n/2},{id:`${e}-right`,nodeId:e,type:`right`,x:t,y:n/2}];e.FlowDesigner=E,e.FlowLinesCanvas=v,e.FlowNode=C,e.SingleLineCanvas=i,e.TempLineCanvas=a,e.buildAnchorMap=p,e.flowToTree=(e,t)=>{if(e.length===0)return null;let n=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},r=new Map,i=new Set;for(let e of t){let t=n(e.fromAnchorId),a=n(e.toAnchorId);t!==a&&(r.has(t)||r.set(t,[]),r.get(t).push(a),i.add(a))}let a=e.find(e=>!i.has(e.id))??e[0],o=new Map(e.map(e=>[e.id,e])),s=[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`anchors`],c=new Set,l=e=>{if(c.has(e))return{id:e};c.add(e);let t=o.get(e),n={id:e};if(t?.name&&(n.name=t.name),t?.desc&&(n.desc=t.desc),t)for(let[e,r]of Object.entries(t))s.includes(e)||(n[e]=r);let i=r.get(e)??[];return n.children=i.length>0?i.map(l):null,n};return l(a.id)},e.generateLineId=l,e.getAnchorPosition=o,e.getLineEndpoint=s,e.hitTestAnchor=c,e.isDuplicateLine=h,e.isHit=f,e.relayoutTree=_,e.stopEvent=u,e.toggleSelectedLine=m,e.treeToFlow=(e,t={})=>{let{nodeWidth:n=140,nodeHeight:r=200,hGap:i=100,vGap:a=120,offsetX:o=0,offsetY:s=0,direction:c=`vertical`}=t,l=[],u=[],d=new Map,f=e=>{let t=e.children??[],n=t.length===0?1:t.reduce((e,t)=>e+f(t),0);return d.set(e.id,n),n};f(e);let p=c===`horizontal`,m=(e,t,c)=>{let f=e.children??[],h=d.get(e.id)??1,g=p?r:n,_=h*g+(h-1)*i,v=c+_/2,y,b;if(p?(y=t*(n+a)+o,b=v-r/2+s):(y=v-n/2+o,b=t*(r+a)+s),l.push({id:e.id,name:e.name??e.id,pic:e.pic,x:y,y:b,width:n,height:r,anchors:D(e.id,n,r)}),f.length>0){let n=c;for(let r of f){let a=d.get(r.id)??1,o=a*g+(a-1)*i;m(r,t+1,n),u.push({id:`line_${e.id}_${r.id}`,fromAnchorId:`${e.id}-${p?`right`:`bottom`}`,toAnchorId:`${r.id}-${p?`left`:`top`}`}),n+=o+i}}return _};return m(e,0,0),{nodes:l,lines:u}}});
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.VueTreeFlow={},e.Vue))})(this,function(e,t){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var n=[`id`],r=[`id`],i=(0,t.defineComponent)({__name:`SingleLineCanvas`,props:{lineId:{},fromAnchor:{},toAnchor:{},scale:{default:1},isSelected:{type:Boolean,default:!1},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let i=e,a=(0,t.ref)(null),o=(0,t.ref)(null),s=null,c={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},l={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},u=()=>{if(!a.value||!o.value)return;let{cp1X:e,cp1Y:t,cp2X:n,cp2Y:r}=f(i.fromAnchor.type,i.toAnchor.type,i.fromAnchor.x,i.fromAnchor.y,i.toAnchor.x,i.toAnchor.y),s=[i.fromAnchor.x,i.toAnchor.x,e,n],c=[i.fromAnchor.y,i.toAnchor.y,t,r],l=Math.min(...s)-30,u=Math.min(...c)-30,d=Math.max(...s)+30,p=Math.max(...c)+30,m=d-l,h=p-u;a.value.style.left=`${l}px`,a.value.style.top=`${u}px`,a.value.style.width=`${m}px`,a.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;o.value.width=Math.round(m*i.scale*g),o.value.height=Math.round(h*i.scale*g),o.value.style.width=`${m}px`,o.value.style.height=`${h}px`},d=(e,t,n,r,i)=>{if(!a.value)return;e.save();let o=t-a.value.offsetLeft,s=n-a.value.offsetTop;e.translate(o,s),e.rotate(r),e.fillStyle=i,e.beginPath(),e.moveTo(0,0),e.lineTo(-15,-8),e.lineTo(-15,8),e.closePath(),e.fill(),e.restore()},f=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},p=()=>{if(!o.value)return;let e=o.value,t=e.getContext(`2d`);if(!t)return;let n=window.devicePixelRatio||1;t.setTransform(n,0,0,n,0,0),t.clearRect(0,0,e.width,e.height),t.scale(i.scale,i.scale);let r=i.theme===`light`?`#3182ce`:`#4299e1`,s=i.isSelected?`#ff6b6b`:r,c=i.isSelected?4:3,l=i.isSelected?1:3;if(!a.value)return;let u=i.fromAnchor.x-a.value.offsetLeft,p=i.fromAnchor.y-a.value.offsetTop,m=i.toAnchor.x-a.value.offsetLeft,h=i.toAnchor.y-a.value.offsetTop,{cp1X:g,cp1Y:_,cp2X:v,cp2Y:y}=f(i.fromAnchor.type,i.toAnchor.type,u,p,m,h);t.strokeStyle=s,t.lineWidth=c,t.lineCap=`round`,i.animated?(t.setLineDash([15,10]),t.lineDashOffset=-(Date.now()/50)*l%100):(t.setLineDash([]),t.lineDashOffset=0),t.beginPath(),t.moveTo(u,p),t.bezierCurveTo(g,_,v,y,m,h),t.stroke();let b=m-v,x=h-y,S=Math.atan2(x,b);d(t,i.toAnchor.x,i.toAnchor.y,S,s)},m=()=>{p(),s=requestAnimationFrame(m)},h=()=>{s||m()},g=()=>{s&&=(cancelAnimationFrame(s),null)},_=()=>{u(),p()};return(0,t.watch)(()=>[i.fromAnchor,i.toAnchor,i.scale,i.isSelected,i.animated,i.theme],()=>{u(),i.animated?h():(g(),p())},{deep:!0}),(0,t.onMounted)(()=>{u(),window.addEventListener(`resize`,_),i.animated?h():p()}),(0,t.onUnmounted)(()=>{window.removeEventListener(`resize`,_),g()}),(i,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{ref_key:`containerRef`,ref:a,id:`linker_${e.lineId}`,class:`shape_box linker_box`,style:c},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:o,id:`linker_canvas_${e.lineId}`,class:`shape_canvas`,style:l},null,8,r)],8,n))}}),a=(0,t.defineComponent)({__name:`TempLineCanvas`,props:{visible:{type:Boolean,default:!1},startX:{default:0},startY:{default:0},endX:{default:0},endY:{default:0},scale:{default:1},startType:{default:`right`},endType:{default:`left`},theme:{default:`dark`}},setup(e){let n=e,r=()=>n.theme===`light`?`#3182ce`:`#4299e1`,i=(0,t.ref)(null),a=(0,t.ref)(null),o=null,s={position:`absolute`,pointerEvents:`none`,zIndex:5,overflow:`hidden`},c={display:`block`,position:`absolute`,top:0,left:0,pointerEvents:`none`},l=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}let f=t;if(!f){let e=i-n,t=a-r;f=Math.abs(e)>Math.abs(t)?e>0?`left`:`right`:t>0?`top`:`bottom`}switch(f){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},u=()=>{if(!n.visible||!i.value||!a.value)return;let{cp1X:e,cp1Y:t,cp2X:r,cp2Y:o}=l(n.startType||`right`,n.endType,n.startX,n.startY,n.endX,n.endY),s=[n.startX,n.endX,e,r],c=[n.startY,n.endY,t,o],u=Math.min(...s)-30,d=Math.min(...c)-30,f=Math.max(...s)+30,p=Math.max(...c)+30,m=f-u,h=p-d;i.value.style.left=`${u}px`,i.value.style.top=`${d}px`,i.value.style.width=`${m}px`,i.value.style.height=`${h}px`;let g=window.devicePixelRatio||1;a.value.width=Math.round(m*n.scale*g),a.value.height=Math.round(h*n.scale*g),a.value.style.width=`${m}px`,a.value.style.height=`${h}px`},d=()=>{if(!n.visible||!a.value||!i.value)return;let e=a.value,t=e.getContext(`2d`);if(!t)return;let o=window.devicePixelRatio||1;t.setTransform(o,0,0,o,0,0),t.clearRect(0,0,e.width,e.height),t.scale(n.scale,n.scale),t.strokeStyle=r(),t.lineWidth=2,t.lineCap=`round`,t.setLineDash([10,8]);let s=parseFloat(i.value.style.left||`0`),c=parseFloat(i.value.style.top||`0`),u=n.startX-s,d=n.startY-c,f=n.endX-s,p=n.endY-c,{cp1X:m,cp1Y:h,cp2X:g,cp2Y:_}=l(n.startType||`right`,n.endType||`left`,n.startX,n.startY,n.endX,n.endY),v=m-s,y=h-c,b=g-s,x=_-c;t.beginPath(),t.moveTo(u,d),t.bezierCurveTo(v,y,b,x,f,p),t.stroke();let S=f-b,C=p-x,w=Math.atan2(C,S);t.save(),t.translate(f,p),t.rotate(w),t.fillStyle=r(),t.beginPath(),t.moveTo(0,0),t.lineTo(-15,-8),t.lineTo(-15,8),t.closePath(),t.fill(),t.restore()},f=()=>{d(),o=requestAnimationFrame(f)},p=()=>{o||f()},m=()=>{o&&=(cancelAnimationFrame(o),null)};return(0,t.watch)(()=>[n.visible,n.startX,n.startY,n.endX,n.endY,n.scale],()=>{n.visible?(u(),p()):m()},{immediate:!0}),(0,t.onMounted)(()=>{n.visible&&(u(),p())}),(0,t.onUnmounted)(()=>{m()}),(n,r)=>e.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,ref_key:`containerRef`,ref:i,style:s},[(0,t.createElementVNode)(`canvas`,{ref_key:`canvasRef`,ref:a,style:c},null,512)],512)):(0,t.createCommentVNode)(``,!0)}}),o=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y-6};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height-6};case`left`:return{x:t.x-6,y:t.y+t.height/2};case`right`:return{x:t.x+t.width-6,y:t.y+t.height/2}}},s=(e,t)=>{switch(e.type){case`top`:return{x:t.x+t.width/2,y:t.y};case`bottom`:return{x:t.x+t.width/2,y:t.y+t.height};case`left`:return{x:t.x,y:t.y+t.height/2};case`right`:return{x:t.x+t.width,y:t.y+t.height/2}}},c=(e,t,n,r,i,a)=>{let s=(e-a.left-r.x)/i,c=(t-a.top-r.y)/i;for(let e of n)for(let t of e.anchors){let n=o(t,e);if(Math.hypot(s-n.x,c-n.y)<15)return{...t,x:n.x,y:n.y}}return null},l=()=>`line_${Date.now()}_${Math.floor(Math.random()*1e3)}`,u=e=>{e.stopPropagation(),e.preventDefault()},d=(e,t,n,r,i,a)=>{let o=Math.hypot(i-n,a-r),s=Math.min(100,o/2),c=n,l=r,u=i,d=a;switch(e){case`top`:l=r-s;break;case`bottom`:l=r+s;break;case`left`:c=n-s;break;case`right`:c=n+s}switch(t){case`top`:d=a-s;break;case`bottom`:d=a+s;break;case`left`:u=i-s;break;case`right`:u=i+s}return{cp1X:c,cp1Y:l,cp2X:u,cp2Y:d}},f=(e,t,n,r,i,a,o,c=8,l)=>{let u,f,p,m;if(l){let t=l.get(e.fromAnchorId),n=l.get(e.toAnchorId);t&&(u=t.anchor,p=t.node),n&&(f=n.anchor,m=n.node)}else{if(u=t.flatMap(e=>e.anchors).find(t=>t.id===e.fromAnchorId),f=t.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId),u){let e=u.nodeId;p=t.find(t=>t.id===e)}if(f){let e=f.nodeId;m=t.find(t=>t.id===e)}}if(!u||!f||!p||!m)return!1;let h=s(u,p),g=s(f,m),_=(n-o.left-i.x)/a,v=(r-o.top-i.y)/a,{cp1X:y,cp1Y:b,cp2X:x,cp2Y:S}=d(u.type,f.type,h.x,h.y,g.x,g.y),C=Math.min(h.x,g.x,y,x)-c,w=Math.max(h.x,g.x,y,x)+c,ee=Math.min(h.y,g.y,b,S)-c,T=Math.max(h.y,g.y,b,S)+c;if(_<C||_>w||v<ee||v>T)return!1;for(let e=0;e<=1;e+=.005){let t=1-e,n=h.x*t*t*t+3*y*t*t*e+3*x*t*e*e+g.x*e*e*e,r=h.y*t*t*t+3*b*t*t*e+3*S*t*e*e+g.y*e*e*e;if(Math.hypot(_-n,v-r)<c)return!0}return!1},p=e=>{let t=new Map;for(let n of e)for(let e of n.anchors)t.set(e.id,{anchor:e,node:n});return t},m=(e,t,n)=>t.length===0?``:t[(t.findIndex(e=>e.id===n)+1)%t.length].id,h=(e,t,n)=>e.some(e=>e.fromAnchorId===t&&e.toAnchorId===n),g=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},_=(e,t)=>{if(e.length===0)return null;let n=!1;for(let e of t){let t=e.fromAnchorId.slice(e.fromAnchorId.lastIndexOf(`-`)+1),r=e.toAnchorId.slice(e.toAnchorId.lastIndexOf(`-`)+1);if(t===`right`&&r===`left`){n=!0;break}}let r=e[0].width||140,i=e[0].height||200,a=Math.max(20,Math.round(r*.3)),o=Math.max(30,Math.round(i*.5)),c=new Map,l=new Set;for(let e of t){let t=g(e.fromAnchorId),n=g(e.toAnchorId);t!==n&&(c.has(t)||c.set(t,[]),c.get(t).includes(n)||c.get(t).push(n),l.add(n))}let u=e=>{let t=new Set,n=e=>{if(!t.has(e)){t.add(e);for(let t of c.get(e)??[])n(t)}};return n(e),t},d=e.filter(e=>!l.has(e.id));if(d.length===0)return null;let f=d[0],p=u(f.id);for(let e of d){let t=u(e.id);t.size>p.size&&(f=e,p=t)}let m=new Map,h=(e,t)=>{if(t.has(e))return 1;t.add(e);let n=c.get(e)??[];return n.length===0?1:n.reduce((e,n)=>e+h(n,new Set(t)),0)};for(let e of p)m.set(e,h(e,new Set));let _=new Map,v=(e,t,s,l)=>{if(l.has(e))return;l.add(e);let u=m.get(e)??1,d=n?i:r,f=s+(u*d+(u-1)*a)/2,p,h;n?(p=t*(r+o),h=f-i/2):(p=f-r/2,h=t*(i+o)),_.set(e,{x:p,y:h});let g=s;for(let n of c.get(e)??[]){let e=m.get(n)??1,r=e*d+(e-1)*a;v(n,t+1,g,l),g+=r+a}};v(f.id,0,0,new Set);let y=_.get(f.id);if(!y)return null;let b=f.x-y.x,x=f.y-y.y;return e.map(e=>{let t=_.get(e.id);if(!t)return e;let n=t.x+b,r=t.y+x,i=e.anchors.map(t=>{let i=s(t,{...e,x:n,y:r});return{...t,x:i.x,y:i.y}});return{...e,x:n,y:r,anchors:i}})},v=(0,t.defineComponent)({__name:`FlowLinesCanvas`,props:{nodes:{},lines:{},scale:{},tempLine:{},selectedLineId:{default:``},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let n=e,r=e=>{for(let t of n.nodes){let n=t.anchors.find(t=>t.id===e);if(n){let e=s(n,t);return{...n,x:e.x,y:e.y}}}return null},o={position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,pointerEvents:`none`,zIndex:5};return(n,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{style:o},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.lines,n=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:n.id},[r(n.fromAnchorId)&&r(n.toAnchorId)?((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,"line-id":n.id,"from-anchor":r(n.fromAnchorId),"to-anchor":r(n.toAnchorId),scale:e.scale,"is-selected":e.selectedLineId===n.id,animated:e.animated,theme:e.theme},null,8,[`line-id`,`from-anchor`,`to-anchor`,`scale`,`is-selected`,`animated`,`theme`])):(0,t.createCommentVNode)(``,!0)],64))),128)),(0,t.createVNode)(a,{visible:e.tempLine.visible,"start-x":e.tempLine.startX,"start-y":e.tempLine.startY,"end-x":e.tempLine.endX,"end-y":e.tempLine.endY,scale:e.scale,"start-type":e.tempLine.startType,"end-type":e.tempLine.endType,theme:e.theme},null,8,[`visible`,`start-x`,`start-y`,`end-x`,`end-y`,`scale`,`start-type`,`end-type`,`theme`])]))}}),y=[`src`],b={class:`node-name`},x=(0,t.defineComponent)({__name:`FlowNode`,props:{id:{},name:{},desc:{},x:{},y:{},width:{default:300},height:{default:200},pic:{},isDragging:{type:Boolean,default:!1}},emits:[`dragStart`,`anchorClick`,`contextMenu`,`anchorHover`,`anchorLeave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(!1),o=(0,t.computed)(()=>({id:`${r.id}-top`,nodeId:r.id,type:`top`,x:r.x+r.width/2,y:r.y-6})),s=(0,t.computed)(()=>({id:`${r.id}-bottom`,nodeId:r.id,type:`bottom`,x:r.x+r.width/2,y:r.y+r.height-6})),c=(0,t.computed)(()=>({id:`${r.id}-left`,nodeId:r.id,type:`left`,x:r.x-6,y:r.y+r.height/2})),l=(0,t.computed)(()=>({id:`${r.id}-right`,nodeId:r.id,type:`right`,x:r.x+r.width-6,y:r.y+r.height/2})),d=(0,t.computed)(()=>({position:`absolute`,left:`${r.x}px`,top:`${r.y}px`,width:`${r.width}px`,height:`${r.height}px`,backgroundColor:`var(--fd-node-bg)`,border:`1px solid var(--fd-node-border)`,borderRadius:`8px`,color:`var(--fd-node-text)`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:r.pic?`flex-start`:`center`,fontFamily:`Arial, sans-serif`,fontSize:`14px`,boxShadow:`0 4px 12px rgba(0,0,0,0.3)`,cursor:r.isDragging?`grabbing`:`grab`,zIndex:6,userSelect:`none`,transition:`border-color 0.2s ease`,borderColor:a.value?`var(--fd-node-border-hover)`:`var(--fd-node-border)`})),f=e=>{let t={position:`absolute`,width:`12px`,height:`12px`,borderRadius:`50%`,backgroundColor:`rgba(66, 153, 225, 0.6)`,border:`2px solid #fff`,cursor:`crosshair`,zIndex:6,opacity:+!!a.value,visibility:a.value?`visible`:`hidden`,transition:`all 0.2s ease`,pointerEvents:a.value?`auto`:`none`,boxShadow:`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,touchAction:`none`};switch(e){case`top`:t.top=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`bottom`:t.bottom=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`left`:t.left=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`;break;case`right`:t.right=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`}return t},p=e=>{e.target.classList.contains(`node-anchor`)||(u(e),i(`dragStart`,r.id,e,r.x,r.y))},m=(e,t)=>{u(t),i(`anchorClick`,e,t)},h=e=>{u(e),i(`contextMenu`,r.id,e)},g=(e,t)=>{let n=e.target;n.style.opacity=`1`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1.2)`:n.style.transform=`translateY(-50%) scale(1.2)`,n.style.backgroundColor=`#4299e1`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.3), 0 0 0 6px rgba(66, 153, 225, 0.18), 0 0 0 10px rgba(66, 153, 225, 0.08)`,i(`anchorHover`,t)},_=(e,t)=>{let n=e.target;n.style.opacity=`0.9`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1)`:n.style.transform=`translateY(-50%) scale(1)`,n.style.backgroundColor=`rgba(66, 153, 225, 0.6)`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,i(`anchorLeave`)};return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`node`,{"node--with-pic":!!e.pic}]),style:(0,t.normalizeStyle)(d.value),onMousedown:p,onContextmenu:(0,t.withModifiers)(h,[`prevent`]),onMouseenter:r[12]||=e=>a.value=!0,onMouseleave:r[13]||=e=>a.value=!1},[e.pic?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,class:`node-pic`,src:e.pic,alt:``},null,8,y)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,b,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-top`,style:(0,t.normalizeStyle)(f(`top`)),onMousedown:r[0]||=(0,t.withModifiers)(e=>m(o.value,e),[`stop`]),onMouseenter:r[1]||=e=>g(e,`top`),onMouseleave:r[2]||=e=>_(e,`top`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-bottom`,style:(0,t.normalizeStyle)(f(`bottom`)),onMousedown:r[3]||=(0,t.withModifiers)(e=>m(s.value,e),[`stop`]),onMouseenter:r[4]||=e=>g(e,`bottom`),onMouseleave:r[5]||=e=>_(e,`bottom`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-left`,style:(0,t.normalizeStyle)(f(`left`)),onMousedown:r[6]||=(0,t.withModifiers)(e=>m(c.value,e),[`stop`]),onMouseenter:r[7]||=e=>g(e,`left`),onMouseleave:r[8]||=e=>_(e,`left`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-right`,style:(0,t.normalizeStyle)(f(`right`)),onMousedown:r[9]||=(0,t.withModifiers)(e=>m(l.value,e),[`stop`]),onMouseenter:r[10]||=e=>g(e,`right`),onMouseleave:r[11]||=e=>_(e,`right`)},null,36)],38))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-2dead940`]]),w={class:`nodes-container`},ee={class:`edit-panel-field`},T={class:`edit-panel-field`},E=S((0,t.defineComponent)({__name:`FlowDesigner`,props:{nodes:{},lines:{},theme:{default:`dark`}},emits:[`update:nodes`,`update:lines`,`beforeDeleteNode`,`beforeDeleteLine`,`beforeAddNode`],setup(e,{expose:n,emit:r}){let i=e,a=r,o=[{id:`1`,name:`Reference`,x:0,y:0,width:140,height:200,anchors:[{id:`1-top`,nodeId:`1`,type:`top`,x:70,y:0},{id:`1-bottom`,nodeId:`1`,type:`bottom`,x:70,y:200},{id:`1-left`,nodeId:`1`,type:`left`,x:0,y:100},{id:`1-right`,nodeId:`1`,type:`right`,x:140,y:100}]},{id:`2`,name:`Image Generation`,x:400,y:0,width:140,height:200,anchors:[{id:`2-top`,nodeId:`2`,type:`top`,x:470,y:0},{id:`2-bottom`,nodeId:`2`,type:`bottom`,x:470,y:200},{id:`2-left`,nodeId:`2`,type:`left`,x:400,y:100},{id:`2-right`,nodeId:`2`,type:`right`,x:540,y:100}]},{id:`3`,name:`Video Generation`,x:400,y:250,width:140,height:200,anchors:[{id:`3-top`,nodeId:`3`,type:`top`,x:470,y:250},{id:`3-bottom`,nodeId:`3`,type:`bottom`,x:470,y:450},{id:`3-left`,nodeId:`3`,type:`left`,x:400,y:350},{id:`3-right`,nodeId:`3`,type:`right`,x:540,y:350}]}],d=[{id:`1`,fromAnchorId:`1-right`,toAnchorId:`2-left`},{id:`2`,fromAnchorId:`1-right`,toAnchorId:`3-left`}],g=(0,t.ref)(i.nodes??o),y=(0,t.ref)(i.lines??d);(0,t.watch)(()=>i.nodes,e=>{e&&(g.value=e)},{deep:!0}),(0,t.watch)(()=>i.lines,e=>{e&&(y.value=e)},{deep:!0});let b=e=>{let t=new Set,n=new Set,r=!1,i=a=>{if(n.has(a)){a===e&&(r=!0);return}n.add(a);let o=g.value.find(e=>e.id===a);if(!o)return;let s=new Set(o.anchors.map(e=>e.id));for(let e of y.value){if(!s.has(e.fromAnchorId))continue;let n=g.value.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId);!n||n.nodeId===a||(t.add(n.nodeId),i(n.nodeId))}};return i(e),r?new Set:t},x=(0,t.computed)(()=>{let e=new Set;for(let t of g.value)if(t.collapsed)for(let n of b(t.id))e.add(n);return e}),S=(0,t.computed)(()=>g.value.filter(e=>!x.value.has(e.id))),E=(0,t.computed)(()=>{let e=new Set(S.value.map(e=>e.id));return y.value.filter(t=>{let n=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.fromAnchorId),r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return n&&r&&e.has(n.nodeId)&&e.has(r.nodeId)})}),D=e=>{let t=g.value.find(t=>t.id===e);if(!t)return!1;let n=new Set(t.anchors.map(e=>e.id));return y.value.some(t=>{if(!n.has(t.fromAnchorId))return!1;let r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return!!r&&r.nodeId!==e})},te=(0,t.computed)(()=>!!W.targetId&&D(W.targetId)),ne=(0,t.computed)(()=>!!g.value.find(e=>e.id===W.targetId)?.collapsed),re=()=>{let e=W.targetId;if(!e)return;let t=g.value.find(t=>t.id===e);if(!t)return;t.collapsed=!t.collapsed;let n=_(S.value,E.value);if(n){let e=new Map(n.map(e=>[e.id,e]));g.value=g.value.map(t=>{let n=e.get(t.id);return n?{...t,...n}:t})}a(`update:nodes`,g.value),Q()},O=(0,t.reactive)({visible:!1,startX:0,startY:0,endX:0,endY:0}),k=(0,t.ref)(1),A=(0,t.reactive)({x:100,y:100}),j=(0,t.ref)(!1),M=(0,t.reactive)({x:0,y:0}),N=(0,t.ref)(`none`),P=(0,t.reactive)({x:0,y:0}),F=(0,t.reactive)({startDist:0,startScale:1,startX:0,startY:0,midX:0,midY:0,rectLeft:0,rectTop:0}),I=(0,t.ref)(null),L=(0,t.reactive)({x:0,y:0,initialX:0,initialY:0}),R=(0,t.ref)(!1),z=(0,t.ref)(null),B=(0,t.ref)(``),V=!1,H=!1,U=(0,t.ref)(!1),ie=()=>(U.value=!U.value,U.value),ae=()=>{let e=K.value;if(!e)return;let t=S.value;if(t.length===0)return;let n=1/0,r=1/0,i=-1/0,a=-1/0;for(let e of t)e.x<n&&(n=e.x),e.y<r&&(r=e.y),e.x+e.width>i&&(i=e.x+e.width),e.y+e.height>a&&(a=e.y+e.height);let o=(n+i)/2,s=(r+a)/2,c=e.getBoundingClientRect();A.x=c.width/2-o*k.value,A.y=c.height/2-s*k.value},W=(0,t.reactive)({type:`none`,x:0,y:0,targetId:null}),G=(0,t.reactive)({visible:!1,nodeId:null,x:0,y:0,name:``,desc:``}),K=(0,t.ref)(null),oe=(0,t.computed)(()=>({position:`absolute`,top:`${A.y}px`,left:`${A.x}px`,transformOrigin:`0 0`,transform:`scale(${k.value})`,width:`60px`,height:`60px`})),q=(0,t.computed)(()=>({position:`absolute`,left:`${W.x}px`,top:`${W.y}px`})),se=(0,t.computed)(()=>({position:`absolute`,left:`${G.x}px`,top:`${G.y}px`})),J=e=>Math.max(.5,Math.min(2,e)),Y=(e,t)=>Math.hypot(e.clientX-t.clientX,e.clientY-t.clientY),ce=e=>{if(e.touches.length===1)N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY,I.value=null,j.value=!1,Z();else if(e.touches.length===2){N.value=`pinch`;let t=K.value?.getBoundingClientRect();F.startDist=Y(e.touches[0],e.touches[1]),F.startScale=k.value,F.startX=A.x,F.startY=A.y,F.midX=(e.touches[0].clientX+e.touches[1].clientX)/2,F.midY=(e.touches[0].clientY+e.touches[1].clientY)/2,F.rectLeft=t?.left??0,F.rectTop=t?.top??0}u(e)},le=e=>{if(N.value===`pan`&&e.touches.length===1){let t=e.touches[0].clientX-P.x,n=e.touches[0].clientY-P.y;A.x+=t,A.y+=n,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY}else if(N.value===`pinch`&&e.touches.length===2){let t=Y(e.touches[0],e.touches[1]),n=(e.touches[0].clientX+e.touches[1].clientX)/2,r=(e.touches[0].clientY+e.touches[1].clientY)/2;if(F.startDist>0){let e=J(F.startScale*(t/F.startDist)),i=(F.midX-F.rectLeft-F.startX)/F.startScale,a=(F.midY-F.rectTop-F.startY)/F.startScale;k.value=e,A.x=n-F.rectLeft-i*e,A.y=r-F.rectTop-a*e}}u(e)},X=e=>{e.touches.length===0?N.value=`none`:e.touches.length===1&&N.value===`pinch`&&(N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY)},ue=e=>{e.button===0&&!I.value&&!R.value&&(j.value=!0,M.x=e.clientX,M.y=e.clientY,u(e))},de=(e,t,n,r)=>{Q(),I.value=e,L.x=t.clientX,L.y=t.clientY,L.initialX=n,L.initialY=r,j.value=!1,u(t)},fe=e=>{R.value&&(O.endType=e)},pe=()=>{R.value&&(O.endType=void 0)},me=(e,t)=>{if(u(t),R.value&&z.value&&z.value.nodeId!==e.nodeId){if(h(y.value,z.value.id,e.id)){Z(),alert(`该锚点之间已存在连线,禁止重复创建!`);return}let t={id:l(),fromAnchorId:z.value.id,toAnchorId:e.id};y.value.push(t),a(`update:lines`,y.value),Z();return}if(!R.value){Q(),R.value=!0,z.value=e,j.value=!1;let t=g.value.find(t=>t.id===e.nodeId);if(!t)return;let n=s(e,t);switch(O.visible=!0,O.startX=n.x,O.startY=n.y,O.startType=e.type,e.type){case`top`:O.endX=n.x,O.endY=n.y-50;break;case`bottom`:O.endX=n.x,O.endY=n.y+50;break;case`left`:O.endX=n.x-50,O.endY=n.y;break;case`right`:O.endX=n.x+50,O.endY=n.y}}},he=e=>{if(I.value){if(!g.value.find(e=>e.id===I.value))return;let t=(e.clientX-L.x)/k.value,n=(e.clientY-L.y)/k.value,r=L.initialX+t,i=L.initialY+n,a=g.value.findIndex(e=>e.id===I.value);if(a!==-1){let e=g.value[a].anchors.map(e=>{let t=s(e,{...g.value[a],x:r,y:i});return{...e,x:t.x,y:t.y}});g.value[a]={...g.value[a],x:r,y:i,anchors:e}}}else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t)return;let n=(e.clientX-t.left-A.x)/k.value,r=(e.clientY-t.top-A.y)/k.value;O.endX=n,O.endY=r}else if(j.value){let t=e.clientX-M.x,n=e.clientY-M.y;A.x+=t,A.y+=n,M.x=e.clientX,M.y=e.clientY}},ge=e=>{if(j.value)j.value=!1;else if(I.value)I.value=null,a(`update:nodes`,g.value);else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t){Z();return}let n=c(e.clientX,e.clientY,S.value,A,k.value,t);if(n&&n.nodeId!==z.value.nodeId&&!h(y.value,z.value.id,n.id)){let e={id:l(),fromAnchorId:z.value.id,toAnchorId:n.id};y.value.push(e),a(`update:lines`,y.value)}Z()}},Z=()=>{R.value=!1,z.value=null,O.visible=!1,O.startX=0,O.startY=0,O.endX=0,O.endY=0,O.startType=void 0,O.endType=void 0},_e=e=>{if(e.altKey){u(e);let t=k.value+(e.deltaY<0?.1:-.1);k.value=J(t)}},ve=(e,t)=>{u(t),V=!0,H=!0;let n=g.value.find(t=>t.id===e);if(!n)return;let r=K.value?.getBoundingClientRect();r&&(W.type=`node`,W.x=t.clientX-r.left,W.y=t.clientY-r.top,W.targetId=e,G.nodeId=e,G.name=n.name,G.desc=n.desc||``,setTimeout(()=>{H=!1},100))},ye=e=>{a(`beforeDeleteNode`,e);let t=new Map;for(let e of g.value)for(let n of e.anchors)t.set(n.id,e.id);g.value=g.value.filter(t=>t.id!==e),a(`update:nodes`,g.value),y.value=y.value.filter(n=>t.get(n.fromAnchorId)!==e&&t.get(n.toAnchorId)!==e),a(`update:lines`,y.value),B.value=``},be=e=>{a(`beforeDeleteLine`,e),y.value=y.value.filter(t=>t.id!==e),a(`update:lines`,y.value),B.value=``,Q()},xe=()=>{W.targetId&&(ye(W.targetId),Q())},Se=(e={})=>{a(`beforeAddNode`,e);let t=e.width??140,n=e.height??200,r=e.x??100,i=e.y??100,o=`node_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,s={id:o,name:e.name??`新节点`,desc:e.desc,pic:e.pic,x:r,y:i,width:t,height:n,anchors:[{id:`${o}-top`,nodeId:o,type:`top`,x:r+t/2,y:i},{id:`${o}-bottom`,nodeId:o,type:`bottom`,x:r+t/2,y:i+n},{id:`${o}-left`,nodeId:o,type:`left`,x:r,y:i+n/2},{id:`${o}-right`,nodeId:o,type:`right`,x:r+t,y:i+n/2}]};return g.value.push(s),a(`update:nodes`,g.value),s},Ce=()=>{if(!W.x||!W.y)return;let e=(W.x-A.x)/k.value+50,t=(W.y-A.y)/k.value+50,n=W.targetId?g.value.find(e=>e.id===W.targetId):void 0;Se({x:e,y:t,width:n?.width,height:n?.height}),Q()},we=()=>{if(!W.targetId)return;let e=g.value.find(e=>e.id===W.targetId);e&&(G.visible=!0,G.nodeId=W.targetId,G.x=W.x,G.y=W.y,G.name=e.name,G.desc=e.desc||``,W.type=`none`,H=!0,setTimeout(()=>{H=!1},100))},Te=()=>{if(!G.nodeId)return;let e=g.value.findIndex(e=>e.id===G.nodeId);e!==-1&&(g.value[e]={...g.value[e],name:G.name||`未命名节点`,desc:G.desc},a(`update:nodes`,g.value)),G.visible=!1},Ee=(e,t)=>{let n=K.value?.getBoundingClientRect();if(!n)return null;let r=(e-n.left-A.x)/k.value,i=(t-n.top-A.y)/k.value;for(let e=S.value.length-1;e>=0;e--){let t=S.value[e];if(r>=t.x&&r<=t.x+t.width&&i>=t.y&&i<=t.y+t.height)return t}return null},De=e=>{let t=K.value?.getBoundingClientRect();if(!t)return;if(Ee(e.clientX,e.clientY)){B.value=``;return}let n=p(S.value),r=E.value.filter(r=>f(r,S.value,e.clientX,e.clientY,A,k.value,t,8,n));if(r.length){let e=m(E.value,r,B.value);B.value=e}else B.value=``},Oe=e=>{if(V){V=!1;return}let t=K.value?.getBoundingClientRect();if(!t)return;u(e),Q(),H=!0;let n=Ee(e.clientX,e.clientY);if(n){W.type=`node`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n.id,G.nodeId=n.id,G.name=n.name,G.desc=n.desc||``,B.value=``,setTimeout(()=>{H=!1},100);return}let r=p(S.value),i=E.value.filter(n=>f(n,S.value,e.clientX,e.clientY,A,k.value,t,8,r));if(i.length){let n=m(E.value,i,B.value);B.value=n,W.type=`line`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n}setTimeout(()=>{H=!1},100)},Q=()=>{W.type=`none`,W.x=0,W.y=0,W.targetId=null,G.visible=!1,H=!1},ke=e=>{if(H)return;let t=e.target,n=t.closest(`.context-menu`),r=t.closest(`.edit-panel`),i=t.closest(`.toolbar`);!n&&!r&&!i&&Q()},$=e=>{e.key===`Escape`&&Q()};return(0,t.onMounted)(()=>{document.addEventListener(`click`,ke),document.addEventListener(`keydown`,$)}),(0,t.onUnmounted)(()=>{document.removeEventListener(`click`,ke),document.removeEventListener(`keydown`,$)}),n({getNodes:()=>g.value,getLines:()=>y.value,exportData:()=>({nodes:g.value,lines:y.value}),addNode:Se,deleteNode:ye,deleteLine:be,toggleAnimation:ie,centerView:ae}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`flow-designer`,{"flow-designer--light":e.theme===`light`}]),onContextmenu:r[3]||=(0,t.withModifiers)(e=>(0,t.unref)(u)(e),[`prevent`])},[(0,t.createElementVNode)(`div`,{ref_key:`canvasContainerRef`,ref:K,class:(0,t.normalizeClass)([`canvas-container`,{"is-dragging":!!I.value||j.value}]),onMousedown:ue,onMousemove:he,onMouseup:ge,onMouseleave:ge,onWheel:_e,onClick:De,onContextmenu:(0,t.withModifiers)(Oe,[`prevent`]),onTouchstart:ce,onTouchmove:(0,t.withModifiers)(le,[`prevent`]),onTouchend:X,onTouchcancel:X},[(0,t.createElementVNode)(`div`,{class:`canvas-content`,style:(0,t.normalizeStyle)(oe.value)},[(0,t.createVNode)(v,{nodes:S.value,lines:E.value,scale:k.value,"temp-line":O,"selected-line-id":B.value,animated:U.value,theme:e.theme},null,8,[`nodes`,`lines`,`scale`,`temp-line`,`selected-line-id`,`animated`,`theme`]),(0,t.createElementVNode)(`div`,w,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value,e=>((0,t.openBlock)(),(0,t.createBlock)(C,{key:e.id,id:e.id,name:e.name,desc:e.desc,x:e.x,y:e.y,width:e.width,height:e.height,pic:e.pic,"is-dragging":I.value===e.id,onDragStart:de,onAnchorClick:me,onContextMenu:ve,onAnchorHover:fe,onAnchorLeave:pe},null,8,[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`pic`,`is-dragging`]))),128))])],4)],34),W.type===`node`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:we},`编辑节点`),(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:Ce},`新增节点`),te.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu-item`,onClick:re},(0,t.toDisplayString)(ne.value?`显示子节点`:`折叠子节点`),1)):(0,t.createCommentVNode)(``,!0),r[4]||=(0,t.createElementVNode)(`div`,{class:`context-menu-divider`},null,-1),(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:xe},`删除节点`)],4)):(0,t.createCommentVNode)(``,!0),W.type===`line`&&W.targetId?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:r[0]||=e=>be(W.targetId)},`删除连线`)],4)):(0,t.createCommentVNode)(``,!0),G.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:2,class:`edit-panel`,style:(0,t.normalizeStyle)(se.value)},[r[7]||=(0,t.createElementVNode)(`h3`,{class:`edit-panel-title`},`编辑节点`,-1),(0,t.createElementVNode)(`div`,ee,[r[5]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点名称`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[1]||=e=>G.name=e,type:`text`,class:`edit-panel-input`,placeholder:`请输入节点名称`},null,512),[[t.vModelText,G.name]])]),(0,t.createElementVNode)(`div`,T,[r[6]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点描述`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[2]||=e=>G.desc=e,type:`text`,class:`edit-panel-input`,placeholder:`可选:输入节点描述信息`},null,512),[[t.vModelText,G.desc]])]),(0,t.createElementVNode)(`div`,{class:`edit-panel-actions`},[(0,t.createElementVNode)(`button`,{class:`edit-panel-btn cancel`,onClick:Q},`取消`),(0,t.createElementVNode)(`button`,{class:`edit-panel-btn save`,onClick:Te},`保存`)])],4)):(0,t.createCommentVNode)(``,!0)],34))}}),[[`__scopeId`,`data-v-0545e5a3`]]),D=(e,t,n)=>[{id:`${e}-top`,nodeId:e,type:`top`,x:t/2,y:0},{id:`${e}-bottom`,nodeId:e,type:`bottom`,x:t/2,y:n},{id:`${e}-left`,nodeId:e,type:`left`,x:0,y:n/2},{id:`${e}-right`,nodeId:e,type:`right`,x:t,y:n/2}];e.FlowDesigner=E,e.FlowLinesCanvas=v,e.FlowNode=C,e.SingleLineCanvas=i,e.TempLineCanvas=a,e.buildAnchorMap=p,e.flowToTree=(e,t)=>{if(e.length===0)return null;let n=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},r=new Map,i=new Set;for(let e of t){let t=n(e.fromAnchorId),a=n(e.toAnchorId);t!==a&&(r.has(t)||r.set(t,[]),r.get(t).push(a),i.add(a))}let a=e.find(e=>!i.has(e.id))??e[0],o=new Map(e.map(e=>[e.id,e])),s=[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`anchors`],c=new Set,l=e=>{if(c.has(e))return{id:e};c.add(e);let t=o.get(e),n={id:e};if(t?.name&&(n.name=t.name),t?.desc&&(n.desc=t.desc),t)for(let[e,r]of Object.entries(t))s.includes(e)||(n[e]=r);let i=r.get(e)??[];return n.children=i.length>0?i.map(l):null,n};return l(a.id)},e.generateLineId=l,e.getAnchorPosition=o,e.getLineEndpoint=s,e.hitTestAnchor=c,e.isDuplicateLine=h,e.isHit=f,e.relayoutTree=_,e.stopEvent=u,e.toggleSelectedLine=m,e.treeToFlow=(e,t={})=>{let{nodeWidth:n=140,nodeHeight:r=200,hGap:i=100,vGap:a=120,offsetX:o=0,offsetY:s=0,direction:c=`vertical`}=t,l=[],u=[],d=new Map,f=e=>{let t=e.children??[],n=t.length===0?1:t.reduce((e,t)=>e+f(t),0);return d.set(e.id,n),n};f(e);let p=c===`horizontal`,m=(e,t,c)=>{let f=e.children??[],h=d.get(e.id)??1,g=p?r:n,_=h*g+(h-1)*i,v=c+_/2,y,b;if(p?(y=t*(n+a)+o,b=v-r/2+s):(y=v-n/2+o,b=t*(r+a)+s),l.push({id:e.id,name:e.name??e.id,pic:e.pic,x:y,y:b,width:n,height:r,anchors:D(e.id,n,r)}),f.length>0){let n=c;for(let r of f){let a=d.get(r.id)??1,o=a*g+(a-1)*i;m(r,t+1,n),u.push({id:`line_${e.id}_${r.id}`,fromAnchorId:`${e.id}-${p?`right`:`bottom`}`,toAnchorId:`${r.id}-${p?`left`:`top`}`}),n+=o+i}}return _};return m(e,0,0),{nodes:l,lines:u}}});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yh7iku/vue-tree-flow",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Vue 3 树形流程设计器组件,支持节点拖拽、贝塞尔连线、折叠、缩放与主题切换",
|
|
6
6
|
"keywords": [
|
|
@@ -46,6 +46,6 @@
|
|
|
46
46
|
"vue": "^3.5.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@yh7iku/vue-tree-flow": "
|
|
49
|
+
"@yh7iku/vue-tree-flow": "0.2.0"
|
|
50
50
|
}
|
|
51
51
|
}
|