@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.
@@ -335,7 +335,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
335
335
  cp2X: u,
336
336
  cp2Y: d
337
337
  };
338
- }, ie = (e, t, n, r, i, a, o, s = 8, c) => {
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
- }, ae = (e) => {
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
- }, O = (e, t, n) => t.length === 0 ? "" : t[(t.findIndex((e) => e.id === n) + 1) % t.length].id, oe = (e, t, n) => e.some((e) => e.fromAnchorId === t && e.toAnchorId === n), k = (e) => {
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
- }, se = (e, t) => {
371
+ }, oe = (e, t) => {
372
372
  if (e.length === 0) return null;
373
- 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 = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
373
+ let n = !1;
374
374
  for (let e of t) {
375
- let t = k(e.fromAnchorId), n = k(e.toAnchorId);
376
- t !== n && (o.has(t) || o.set(t, []), o.get(t).includes(n) || o.get(t).push(n), s.add(n));
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 c = (e) => {
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 o.get(e) ?? []) n(t);
390
+ for (let t of s.get(e) ?? []) n(t);
383
391
  }
384
392
  };
385
393
  return n(e), t;
386
- }, l = e.filter((e) => !s.has(e.id));
387
- if (l.length === 0) return null;
388
- let u = l[0], d = c(u.id);
389
- for (let e of l) {
390
- let t = c(e.id);
391
- t.size > d.size && (u = e, d = t);
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 f = /* @__PURE__ */ new Map(), p = (e, t) => {
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 = o.get(e) ?? [];
397
- return n.length === 0 ? 1 : n.reduce((e, n) => e + p(n, new Set(t)), 0);
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 d) f.set(e, p(e, /* @__PURE__ */ new Set()));
400
- let m = /* @__PURE__ */ new Map(), h = (e, t, s, c) => {
401
- if (c.has(e)) return;
402
- c.add(e);
403
- let l = f.get(e) ?? 1, u = s + (l * n + (l - 1) * i) / 2;
404
- m.set(e, {
405
- x: u - n / 2,
406
- y: t * (r + a)
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 d = s;
409
- for (let r of o.get(e) ?? []) {
410
- let e = f.get(r) ?? 1, a = e * n + (e - 1) * i;
411
- h(r, t + 1, d, c), d += a + i;
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
- h(u.id, 0, 0, /* @__PURE__ */ new Set());
415
- let g = m.get(u.id);
416
- if (!g) return null;
417
- let _ = u.x - g.x, v = u.y - g.y;
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 = m.get(e.id);
427
+ let t = h.get(e.id);
420
428
  if (!t) return e;
421
- let n = t.x + _, r = t.y + v, i = e.anchors.map((t) => {
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
- }, ce = /* @__PURE__ */ s({
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
- }), A = ["src"], le = { class: "node-name" }, ue = /*@__PURE__*/ s({
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, A)) : r("", !0),
643
- a("span", le, g(e.name), 1),
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
- }), j = (e, t) => {
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
- }, de = /*#__PURE__*/ j(ue, [["__scopeId", "data-v-2dead940"]]), fe = { class: "nodes-container" }, pe = { class: "edit-panel-field" }, me = { class: "edit-panel-field" }, M = /*#__PURE__*/ j(/* @__PURE__ */ s({
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
- }], k = m(w.nodes ?? ee), A = m(w.lines ?? re);
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 le = (e) => {
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 = k.value.find((e) => e.id === a);
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 A.value) {
840
+ for (let e of j.value) {
833
841
  if (!s.has(e.fromAnchorId)) continue;
834
- let n = k.value.flatMap((e) => e.anchors).find((t) => t.id === e.toAnchorId);
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
- }, ue = t(() => {
847
+ }, le = t(() => {
840
848
  let e = /* @__PURE__ */ new Set();
841
- for (let t of k.value) if (t.collapsed) for (let n of le(t.id)) e.add(n);
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
- }), j = t(() => k.value.filter((e) => !ue.value.has(e.id))), M = t(() => {
844
- let e = new Set(j.value.map((e) => e.id));
845
- return A.value.filter((t) => {
846
- let n = k.value.flatMap((e) => e.anchors).find((e) => e.id === t.fromAnchorId), r = k.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
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
- }), he = (e) => {
850
- let t = k.value.find((t) => t.id === e);
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 A.value.some((t) => {
861
+ return j.value.some((t) => {
854
862
  if (!n.has(t.fromAnchorId)) return !1;
855
- let r = k.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
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
- }, ge = t(() => !!Y.targetId && he(Y.targetId)), _e = t(() => !!k.value.find((e) => e.id === Y.targetId)?.collapsed), ve = () => {
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 = k.value.find((t) => t.id === e);
869
+ let t = A.value.find((t) => t.id === e);
862
870
  if (!t) return;
863
871
  t.collapsed = !t.collapsed;
864
- let n = se(j.value, M.value);
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
- k.value = k.value.map((t) => {
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", k.value), $();
876
- }, N = p({
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
- }), P = m(1), F = p({
890
+ }), F = m(1), I = p({
883
891
  x: 100,
884
892
  y: 100
885
- }), I = m(!1), L = p({
893
+ }), L = m(!1), R = p({
886
894
  x: 0,
887
895
  y: 0
888
- }), R = m("none"), z = p({
896
+ }), z = m("none"), B = p({
889
897
  x: 0,
890
898
  y: 0
891
- }), B = p({
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
- }), V = m(null), H = p({
908
+ }), H = m(null), U = p({
901
909
  x: 0,
902
910
  y: 0,
903
911
  initialX: 0,
904
912
  initialY: 0
905
- }), U = m(!1), W = m(null), G = m(""), K = !1, q = !1, J = m(!1), ye = () => (J.value = !J.value, J.value), be = () => {
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 = j.value;
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
- F.x = c.width / 2 - o * P.value, F.y = c.height / 2 - s * P.value;
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: `${F.y}px`,
929
- left: `${F.x}px`,
936
+ top: `${I.y}px`,
937
+ left: `${I.x}px`,
930
938
  transformOrigin: "0 0",
931
- transform: `scale(${P.value})`,
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) R.value = "pan", z.x = e.touches[0].clientX, z.y = e.touches[0].clientY, V.value = null, I.value = !1, Q();
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
- R.value = "pinch";
953
+ z.value = "pinch";
946
954
  let t = Z.value?.getBoundingClientRect();
947
- B.startDist = Te(e.touches[0], e.touches[1]), B.startScale = P.value, B.startX = F.x, B.startY = F.y, B.midX = (e.touches[0].clientX + e.touches[1].clientX) / 2, B.midY = (e.touches[0].clientY + e.touches[1].clientY) / 2, B.rectLeft = t?.left ?? 0, B.rectTop = t?.top ?? 0;
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 (R.value === "pan" && e.touches.length === 1) {
952
- let t = e.touches[0].clientX - z.x, n = e.touches[0].clientY - z.y;
953
- F.x += t, F.y += n, z.x = e.touches[0].clientX, z.y = e.touches[0].clientY;
954
- } else if (R.value === "pinch" && e.touches.length === 2) {
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 (B.startDist > 0) {
957
- let e = we(B.startScale * (t / B.startDist)), i = (B.midX - B.rectLeft - B.startX) / B.startScale, a = (B.midY - B.rectTop - B.startY) / B.startScale;
958
- P.value = e, F.x = n - B.rectLeft - i * e, F.y = r - B.rectTop - a * e;
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 ? R.value = "none" : e.touches.length === 1 && R.value === "pinch" && (R.value = "pan", z.x = e.touches[0].clientX, z.y = e.touches[0].clientY);
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 && !V.value && !U.value && (I.value = !0, L.x = e.clientX, L.y = e.clientY, D(e));
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
- $(), V.value = e, H.x = t.clientX, H.y = t.clientY, H.initialX = n, H.initialY = r, I.value = !1, D(t);
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
- U.value && (N.endType = e);
977
+ W.value && (P.endType = e);
970
978
  }, Me = () => {
971
- U.value && (N.endType = void 0);
979
+ W.value && (P.endType = void 0);
972
980
  }, Ne = (e, t) => {
973
- if (D(t), U.value && W.value && W.value.nodeId !== e.nodeId) {
974
- if (oe(A.value, W.value.id, e.id)) {
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: W.value.id,
988
+ fromAnchorId: G.value.id,
981
989
  toAnchorId: e.id
982
990
  };
983
- A.value.push(t), T("update:lines", A.value), Q();
991
+ j.value.push(t), T("update:lines", j.value), Q();
984
992
  return;
985
993
  }
986
- if (!U.value) {
987
- $(), U.value = !0, W.value = e, I.value = !1;
988
- let t = k.value.find((t) => t.id === e.nodeId);
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 (N.visible = !0, N.startX = n.x, N.startY = n.y, N.startType = e.type, e.type) {
999
+ switch (P.visible = !0, P.startX = n.x, P.startY = n.y, P.startType = e.type, e.type) {
992
1000
  case "top":
993
- N.endX = n.x, N.endY = n.y - 50;
1001
+ P.endX = n.x, P.endY = n.y - 50;
994
1002
  break;
995
1003
  case "bottom":
996
- N.endX = n.x, N.endY = n.y + 50;
1004
+ P.endX = n.x, P.endY = n.y + 50;
997
1005
  break;
998
1006
  case "left":
999
- N.endX = n.x - 50, N.endY = n.y;
1007
+ P.endX = n.x - 50, P.endY = n.y;
1000
1008
  break;
1001
- case "right": N.endX = n.x + 50, N.endY = n.y;
1009
+ case "right": P.endX = n.x + 50, P.endY = n.y;
1002
1010
  }
1003
1011
  }
1004
1012
  }, Pe = (e) => {
1005
- if (V.value) {
1006
- if (!k.value.find((e) => e.id === V.value)) return;
1007
- let t = (e.clientX - H.x) / P.value, n = (e.clientY - H.y) / P.value, r = H.initialX + t, i = H.initialY + n, a = k.value.findIndex((e) => e.id === V.value);
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 = k.value[a].anchors.map((e) => {
1017
+ let e = A.value[a].anchors.map((e) => {
1010
1018
  let t = E(e, {
1011
- ...k.value[a],
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
- k.value[a] = {
1022
- ...k.value[a],
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 (U.value && W.value) {
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 - F.x) / P.value, r = (e.clientY - t.top - F.y) / P.value;
1032
- N.endX = n, N.endY = r;
1033
- } else if (I.value) {
1034
- let t = e.clientX - L.x, n = e.clientY - L.y;
1035
- F.x += t, F.y += n, L.x = e.clientX, L.y = e.clientY;
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 (I.value) I.value = !1;
1039
- else if (V.value) V.value = null, T("update:nodes", k.value);
1040
- else if (U.value && W.value) {
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, j.value, F, P.value, t);
1047
- if (n && n.nodeId !== W.value.nodeId && !oe(A.value, W.value.id, n.id)) {
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: W.value.id,
1058
+ fromAnchorId: G.value.id,
1051
1059
  toAnchorId: n.id
1052
1060
  };
1053
- A.value.push(e), T("update:lines", A.value);
1061
+ j.value.push(e), T("update:lines", j.value);
1054
1062
  }
1055
1063
  Q();
1056
1064
  }
1057
1065
  }, Q = () => {
1058
- U.value = !1, W.value = null, N.visible = !1, N.startX = 0, N.startY = 0, N.endX = 0, N.endY = 0, N.startType = void 0, N.endType = void 0;
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 = P.value + (e.deltaY < 0 ? .1 : -.1);
1063
- P.value = we(t);
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), K = !0, q = !0;
1067
- let n = k.value.find((t) => t.id === e);
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 k.value) for (let n of e.anchors) t.set(n.id, e.id);
1077
- k.value = k.value.filter((t) => t.id !== e), T("update:nodes", k.value), A.value = A.value.filter((n) => t.get(n.fromAnchorId) !== e && t.get(n.toAnchorId) !== e), T("update:lines", A.value), G.value = "";
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), A.value = A.value.filter((t) => t.id !== e), T("update:lines", A.value), G.value = "", $();
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 k.value.push(o), T("update:nodes", k.value), o;
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 - F.x) / P.value + 50, t = (Y.y - F.y) / P.value + 50, n = Y.targetId ? k.value.find((e) => e.id === Y.targetId) : void 0;
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 = k.value.find((e) => e.id === Y.targetId);
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 = k.value.findIndex((e) => e.id === X.nodeId);
1143
- e !== -1 && (k.value[e] = {
1144
- ...k.value[e],
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", k.value)), X.visible = !1;
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 - F.x) / P.value, i = (t - n.top - F.y) / P.value;
1152
- for (let e = j.value.length - 1; e >= 0; e--) {
1153
- let t = j.value[e];
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
- G.value = "";
1169
+ K.value = "";
1162
1170
  return;
1163
1171
  }
1164
- let n = ae(j.value), r = M.value.filter((r) => ie(r, j.value, e.clientX, e.clientY, F, P.value, t, 8, 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 = O(M.value, r, G.value);
1167
- G.value = e;
1168
- } else G.value = "";
1174
+ let e = ie(N.value, r, K.value);
1175
+ K.value = e;
1176
+ } else K.value = "";
1169
1177
  }, qe = (e) => {
1170
- if (K) {
1171
- K = !1;
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 || "", G.value = "", setTimeout(() => {
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 = ae(j.value), i = M.value.filter((n) => ie(n, j.value, e.clientX, e.clientY, F, P.value, t, 8, 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 = O(M.value, i, G.value);
1187
- G.value = n, Y.type = "line", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n;
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: () => k.value,
1207
- getLines: () => A.value,
1214
+ getNodes: () => A.value,
1215
+ getLines: () => j.value,
1208
1216
  exportData: () => ({
1209
- nodes: k.value,
1210
- lines: A.value
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": !!V.value || I.value }]),
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(ce, {
1240
- nodes: j.value,
1241
- lines: M.value,
1242
- scale: P.value,
1243
- "temp-line": N,
1244
- "selected-line-id": G.value,
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", fe, [(f(!0), i(e, null, h(j.value, (e) => (f(), n(de, {
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": V.value === e.id,
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
- ge.value ? (f(), i("div", {
1303
+ he.value ? (f(), i("div", {
1296
1304
  key: 0,
1297
1305
  class: "context-menu-item",
1298
- onClick: ve
1299
- }, g(_e.value ? "显示子节点" : "折叠子节点"), 1)) : r("", !0),
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", pe, [u[5] ||= a("label", { class: "edit-panel-label" }, "节点名称", -1), b(a("input", {
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", me, [u[6] ||= a("label", { class: "edit-panel-label" }, "节点描述", -1), b(a("input", {
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"]]), he = (e, t, n) => [
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
- ], ge = (e, t = {}) => {
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: he(e.id, n, r)
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
- }, _e = (e, t) => {
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 { M as FlowDesigner, ce as FlowLinesCanvas, de as FlowNode, w as SingleLineCanvas, T as TempLineCanvas, ae as buildAnchorMap, _e as flowToTree, ne as generateLineId, ee as getAnchorPosition, E as getLineEndpoint, te as hitTestAnchor, oe as isDuplicateLine, ie as isHit, se as relayoutTree, D as stopEvent, O as toggleSelectedLine, ge as treeToFlow };
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.0",
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": "^0.1.0"
49
+ "@yh7iku/vue-tree-flow": "0.2.0"
50
50
  }
51
51
  }