@yh7iku/vue-tree-flow 0.1.0 → 0.2.0

package/dist/components/index.d.ts

@@ -1 +1,3 @@
 export * from './FlowDesigner';
+export { treeToFlow, flowToTree } from '../utils/treeToFlow';
+export type { TreeNode, TreeLayoutOptions, TreeToFlowResult } from '../utils/treeToFlow';

package/dist/vue-tree-flow.js

@@ -252,7 +252,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			style: p
 		}, null, 512)], 512)) : r("", !0);
 	}
-}), E = (e, t) => {
+}), ee = (e, t) => {
 	switch (e.type) {
 		case "top": return {
 			x: t.x + t.width / 2,
@@ -271,7 +271,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			y: t.y + t.height / 2
 		};
 	}
-}, D = (e, t) => {
+}, E = (e, t) => {
 	switch (e.type) {
 		case "top": return {
 			x: t.x + t.width / 2,
@@ -290,10 +290,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			y: t.y + t.height / 2
 		};
 	}
-}, ee = (e, t, n, r, i, a) => {
+}, te = (e, t, n, r, i, a) => {
 	let o = (e - a.left - r.x) / i, s = (t - a.top - r.y) / i;
 	for (let e of n) for (let t of e.anchors) {
-		let n = E(t, e);
+		let n = ee(t, e);
 		if (Math.hypot(o - n.x, s - n.y) < 15) return {
 			...t,
 			x: n.x,
@@ -301,9 +301,9 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		};
 	}
 	return null;
-}, O = () => `line_${Date.now()}_${Math.floor(Math.random() * 1e3)}`, k = (e) => {
+}, ne = () => `line_${Date.now()}_${Math.floor(Math.random() * 1e3)}`, D = (e) => {
 	e.stopPropagation(), e.preventDefault();
-}, te = (e, t, n, r, i, a) => {
+}, re = (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":
@@ -335,7 +335,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		cp2X: u,
 		cp2Y: d
 	};
-}, ne = (e, t, n, r, i, a, o, s = 8, c) => {
+}, ie = (e, t, n, r, i, a, o, s = 8, c) => {
 	let l, u, d, f;
 	if (c) {
 		let t = c.get(e.fromAnchorId), n = c.get(e.toAnchorId);
@@ -351,28 +351,28 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		}
 	}
 	if (!l || !u || !d || !f) return !1;
-	let p = D(l, d), m = D(u, f), h = (n - o.left - i.x) / a, g = (r - o.top - i.y) / a, { cp1X: _, cp1Y: v, cp2X: y, cp2Y: b } = te(l.type, u.type, p.x, p.y, m.x, m.y), x = Math.min(p.x, m.x, _, y) - s, S = Math.max(p.x, m.x, _, y) + s, C = Math.min(p.y, m.y, v, b) - s, w = Math.max(p.y, m.y, v, b) + s;
+	let p = E(l, d), m = E(u, f), h = (n - o.left - i.x) / a, g = (r - o.top - i.y) / a, { cp1X: _, cp1Y: v, cp2X: y, cp2Y: b } = re(l.type, u.type, p.x, p.y, m.x, m.y), x = Math.min(p.x, m.x, _, y) - s, S = Math.max(p.x, m.x, _, y) + s, C = Math.min(p.y, m.y, v, b) - s, w = Math.max(p.y, m.y, v, b) + s;
 	if (h < x || h > S || g < C || g > w) return !1;
 	for (let e = 0; e <= 1; e += .005) {
 		let t = 1 - e, n = p.x * t * t * t + 3 * _ * t * t * e + 3 * y * t * e * e + m.x * e * e * e, r = p.y * t * t * t + 3 * v * t * t * e + 3 * b * t * e * e + m.y * e * e * e;
 		if (Math.hypot(h - n, g - r) < s) return !0;
 	}
 	return !1;
-}, re = (e) => {
+}, ae = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) for (let e of n.anchors) t.set(e.id, {
 		anchor: e,
 		node: n
 	});
 	return t;
-}, 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) => {
+}, 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) => {
 	let t = e.lastIndexOf("-");
 	return t === -1 ? e : e.slice(0, t);
-}, oe = (e, t) => {
+}, se = (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 = /* @__PURE__ */ new Map(), s = /* @__PURE__ */ new Set();
 	for (let e of t) {
-		let t = A(e.fromAnchorId), n = A(e.toAnchorId);
+		let t = k(e.fromAnchorId), n = k(e.toAnchorId);
 		t !== n && (o.has(t) || o.set(t, []), o.get(t).includes(n) || o.get(t).push(n), s.add(n));
 	}
 	let c = (e) => {
@@ -419,7 +419,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		let t = m.get(e.id);
 		if (!t) return e;
 		let n = t.x + _, r = t.y + v, i = e.anchors.map((t) => {
-			let i = D(t, {
+			let i = E(t, {
 				...e,
 				x: n,
 				y: r
@@ -437,7 +437,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			anchors: i
 		};
 	});
-}, se = /* @__PURE__ */ s({
+}, ce = /* @__PURE__ */ s({
 	__name: "FlowLinesCanvas",
 	props: {
 		nodes: {},
@@ -456,7 +456,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			for (let t of a.nodes) {
 				let n = t.anchors.find((t) => t.id === e);
 				if (n) {
-					let e = D(n, t);
+					let e = E(n, t);
 					return {
 						...n,
 						x: e.x,
@@ -513,7 +513,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			"theme"
 		])]));
 	}
-}), j = ["src"], ce = { class: "node-name" }, le = /*@__PURE__*/ s({
+}), A = ["src"], le = { class: "node-name" }, ue = /*@__PURE__*/ s({
 	__name: "FlowNode",
 	props: {
 		id: {},
@@ -614,11 +614,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			}
 			return t;
 		}, b = (e) => {
-			e.target.classList.contains("node-anchor") || (k(e), s("dragStart", o.id, e, o.x, o.y));
+			e.target.classList.contains("node-anchor") || (D(e), s("dragStart", o.id, e, o.x, o.y));
 		}, S = (e, t) => {
-			k(t), s("anchorClick", e, t);
+			D(t), s("anchorClick", e, t);
 		}, C = (e) => {
-			k(e), s("contextMenu", o.id, e);
+			D(e), s("contextMenu", o.id, e);
 		}, w = (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)", s("anchorHover", t);
@@ -639,8 +639,8 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				class: "node-pic",
 				src: e.pic,
 				alt: ""
-			}, null, 8, j)) : r("", !0),
-			a("span", ce, g(e.name), 1),
+			}, null, 8, A)) : r("", !0),
+			a("span", le, g(e.name), 1),
 			a("div", {
 				class: "node-anchor anchor-top",
 				style: l(y("top")),
@@ -671,11 +671,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			}, null, 36)
 		], 38));
 	}
-}), M = (e, t) => {
+}), j = (e, t) => {
 	let n = e.__vccOpts || e;
 	for (let [e, r] of t) n[e] = r;
 	return n;
-}, 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({
+}, 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({
 	__name: "FlowDesigner",
 	props: {
 		nodes: {},
@@ -690,7 +690,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		"beforeAddNode"
 	],
 	setup(s, { expose: S, emit: C }) {
-		let w = s, T = C, E = [
+		let w = s, T = C, ee = [
 			{
 				id: "1",
 				name: "Reference",
@@ -805,7 +805,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					}
 				]
 			}
-		], te = [{
+		], re = [{
 			id: "1",
 			fromAnchorId: "1-right",
 			toAnchorId: "2-left"
@@ -813,58 +813,58 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			id: "2",
 			fromAnchorId: "1-right",
 			toAnchorId: "3-left"
-		}], A = m(w.nodes ?? E), j = m(w.lines ?? te);
+		}], k = m(w.nodes ?? ee), A = m(w.lines ?? re);
 		y(() => w.nodes, (e) => {
-			e && (A.value = e);
+			e && (k.value = e);
 		}, { deep: !0 }), y(() => w.lines, (e) => {
-			e && (j.value = e);
+			e && (A.value = e);
 		}, { deep: !0 });
-		let ce = (e) => {
+		let le = (e) => {
 			let t = /* @__PURE__ */ new Set(), n = /* @__PURE__ */ new Set(), r = !1, i = (a) => {
 				if (n.has(a)) {
 					a === e && (r = !0);
 					return;
 				}
 				n.add(a);
-				let o = A.value.find((e) => e.id === a);
+				let o = k.value.find((e) => e.id === a);
 				if (!o) return;
 				let s = new Set(o.anchors.map((e) => e.id));
-				for (let e of j.value) {
+				for (let e of A.value) {
 					if (!s.has(e.fromAnchorId)) continue;
-					let n = A.value.flatMap((e) => e.anchors).find((t) => t.id === e.toAnchorId);
+					let n = k.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 ? /* @__PURE__ */ new Set() : t;
-		}, le = t(() => {
+		}, ue = t(() => {
 			let e = /* @__PURE__ */ new Set();
-			for (let t of A.value) if (t.collapsed) for (let n of ce(t.id)) e.add(n);
+			for (let t of k.value) if (t.collapsed) for (let n of le(t.id)) e.add(n);
 			return e;
-		}), M = t(() => A.value.filter((e) => !le.value.has(e.id))), N = t(() => {
-			let e = new Set(M.value.map((e) => e.id));
-			return j.value.filter((t) => {
-				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);
+		}), j = t(() => k.value.filter((e) => !ue.value.has(e.id))), M = t(() => {
+			let e = new Set(j.value.map((e) => e.id));
+			return A.value.filter((t) => {
+				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);
 				return n && r && e.has(n.nodeId) && e.has(r.nodeId);
 			});
-		}), me = (e) => {
-			let t = A.value.find((t) => t.id === e);
+		}), he = (e) => {
+			let t = k.value.find((t) => t.id === e);
 			if (!t) return !1;
 			let n = new Set(t.anchors.map((e) => e.id));
-			return j.value.some((t) => {
+			return A.value.some((t) => {
 				if (!n.has(t.fromAnchorId)) return !1;
-				let r = A.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
+				let r = k.value.flatMap((e) => e.anchors).find((e) => e.id === t.toAnchorId);
 				return !!r && r.nodeId !== e;
 			});
-		}, he = t(() => !!Y.targetId && me(Y.targetId)), ge = t(() => !!A.value.find((e) => e.id === Y.targetId)?.collapsed), _e = () => {
+		}, ge = t(() => !!Y.targetId && he(Y.targetId)), _e = t(() => !!k.value.find((e) => e.id === Y.targetId)?.collapsed), ve = () => {
 			let e = Y.targetId;
 			if (!e) return;
-			let t = A.value.find((t) => t.id === e);
+			let t = k.value.find((t) => t.id === e);
 			if (!t) return;
 			t.collapsed = !t.collapsed;
-			let n = oe(M.value, N.value);
+			let n = se(j.value, M.value);
 			if (n) {
 				let e = new Map(n.map((e) => [e.id, e]));
-				A.value = A.value.map((t) => {
+				k.value = k.value.map((t) => {
 					let n = e.get(t.id);
 					return n ? {
 						...t,
@@ -872,23 +872,23 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					} : t;
 				});
 			}
-			T("update:nodes", A.value), $();
-		}, P = p({
+			T("update:nodes", k.value), $();
+		}, N = p({
 			visible: !1,
 			startX: 0,
 			startY: 0,
 			endX: 0,
 			endY: 0
-		}), F = m(1), I = p({
+		}), P = m(1), F = p({
 			x: 100,
 			y: 100
-		}), L = m(!1), R = p({
+		}), I = m(!1), L = p({
 			x: 0,
 			y: 0
-		}), z = m("none"), B = p({
+		}), R = m("none"), z = p({
 			x: 0,
 			y: 0
-		}), V = p({
+		}), B = p({
 			startDist: 0,
 			startScale: 1,
 			startX: 0,
@@ -897,20 +897,20 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			midY: 0,
 			rectLeft: 0,
 			rectTop: 0
-		}), H = m(null), U = p({
+		}), V = m(null), H = p({
 			x: 0,
 			y: 0,
 			initialX: 0,
 			initialY: 0
-		}), W = m(!1), G = m(null), K = m(""), ve = !1, q = !1, J = m(!1), ye = () => (J.value = !J.value, J.value), be = () => {
+		}), U = m(!1), W = m(null), G = m(""), K = !1, q = !1, J = m(!1), ye = () => (J.value = !J.value, J.value), be = () => {
 			let e = Z.value;
 			if (!e) return;
-			let t = M.value;
+			let t = j.value;
 			if (t.length === 0) return;
 			let n = Infinity, r = Infinity, i = -Infinity, a = -Infinity;
 			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();
-			I.x = c.width / 2 - o * F.value, I.y = c.height / 2 - s * F.value;
+			F.x = c.width / 2 - o * P.value, F.y = c.height / 2 - s * P.value;
 		}, Y = p({
 			type: "none",
 			x: 0,
@@ -925,10 +925,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			desc: ""
 		}), Z = m(null), xe = t(() => ({
 			position: "absolute",
-			top: `${I.y}px`,
-			left: `${I.x}px`,
+			top: `${F.y}px`,
+			left: `${F.x}px`,
 			transformOrigin: "0 0",
-			transform: `scale(${F.value})`,
+			transform: `scale(${P.value})`,
 			width: "60px",
 			height: "60px"
 		})), Se = t(() => ({
@@ -940,75 +940,75 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			left: `${X.x}px`,
 			top: `${X.y}px`
 		})), we = (e) => Math.max(.5, Math.min(2, e)), Te = (e, t) => Math.hypot(e.clientX - t.clientX, e.clientY - t.clientY), Ee = (e) => {
-			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();
+			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();
 			else if (e.touches.length === 2) {
-				z.value = "pinch";
+				R.value = "pinch";
 				let t = Z.value?.getBoundingClientRect();
-				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;
+				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;
 			}
-			k(e);
+			D(e);
 		}, De = (e) => {
-			if (z.value === "pan" && e.touches.length === 1) {
-				let t = e.touches[0].clientX - B.x, n = e.touches[0].clientY - B.y;
-				I.x += t, I.y += n, B.x = e.touches[0].clientX, B.y = e.touches[0].clientY;
-			} else if (z.value === "pinch" && e.touches.length === 2) {
+			if (R.value === "pan" && e.touches.length === 1) {
+				let t = e.touches[0].clientX - z.x, n = e.touches[0].clientY - z.y;
+				F.x += t, F.y += n, z.x = e.touches[0].clientX, z.y = e.touches[0].clientY;
+			} else if (R.value === "pinch" && e.touches.length === 2) {
 				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;
-				if (V.startDist > 0) {
-					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;
-					F.value = e, I.x = n - V.rectLeft - i * e, I.y = r - V.rectTop - a * e;
+				if (B.startDist > 0) {
+					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;
+					P.value = e, F.x = n - B.rectLeft - i * e, F.y = r - B.rectTop - a * e;
 				}
 			}
-			k(e);
+			D(e);
 		}, Oe = (e) => {
-			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);
+			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);
 		}, ke = (e) => {
-			e.button === 0 && !H.value && !W.value && (L.value = !0, R.x = e.clientX, R.y = e.clientY, k(e));
+			e.button === 0 && !V.value && !U.value && (I.value = !0, L.x = e.clientX, L.y = e.clientY, D(e));
 		}, Ae = (e, t, n, r) => {
-			$(), H.value = e, U.x = t.clientX, U.y = t.clientY, U.initialX = n, U.initialY = r, L.value = !1, k(t);
+			$(), V.value = e, H.x = t.clientX, H.y = t.clientY, H.initialX = n, H.initialY = r, I.value = !1, D(t);
 		}, je = (e) => {
-			W.value && (P.endType = e);
+			U.value && (N.endType = e);
 		}, Me = () => {
-			W.value && (P.endType = void 0);
+			U.value && (N.endType = void 0);
 		}, Ne = (e, t) => {
-			if (k(t), W.value && G.value && G.value.nodeId !== e.nodeId) {
-				if (ae(j.value, G.value.id, e.id)) {
+			if (D(t), U.value && W.value && W.value.nodeId !== e.nodeId) {
+				if (oe(A.value, W.value.id, e.id)) {
 					Q(), alert("该锚点之间已存在连线，禁止重复创建！");
 					return;
 				}
 				let t = {
-					id: O(),
-					fromAnchorId: G.value.id,
+					id: ne(),
+					fromAnchorId: W.value.id,
 					toAnchorId: e.id
 				};
-				j.value.push(t), T("update:lines", j.value), Q();
+				A.value.push(t), T("update:lines", A.value), Q();
 				return;
 			}
-			if (!W.value) {
-				$(), W.value = !0, G.value = e, L.value = !1;
-				let t = A.value.find((t) => t.id === e.nodeId);
+			if (!U.value) {
+				$(), U.value = !0, W.value = e, I.value = !1;
+				let t = k.value.find((t) => t.id === e.nodeId);
 				if (!t) return;
-				let n = D(e, t);
-				switch (P.visible = !0, P.startX = n.x, P.startY = n.y, P.startType = e.type, e.type) {
+				let n = E(e, t);
+				switch (N.visible = !0, N.startX = n.x, N.startY = n.y, N.startType = e.type, e.type) {
 					case "top":
-						P.endX = n.x, P.endY = n.y - 50;
+						N.endX = n.x, N.endY = n.y - 50;
 						break;
 					case "bottom":
-						P.endX = n.x, P.endY = n.y + 50;
+						N.endX = n.x, N.endY = n.y + 50;
 						break;
 					case "left":
-						P.endX = n.x - 50, P.endY = n.y;
+						N.endX = n.x - 50, N.endY = n.y;
 						break;
-					case "right": P.endX = n.x + 50, P.endY = n.y;
+					case "right": N.endX = n.x + 50, N.endY = n.y;
 				}
 			}
 		}, Pe = (e) => {
-			if (H.value) {
-				if (!A.value.find((e) => e.id === H.value)) return;
-				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);
+			if (V.value) {
+				if (!k.value.find((e) => e.id === V.value)) return;
+				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);
 				if (a !== -1) {
-					let e = A.value[a].anchors.map((e) => {
-						let t = D(e, {
-							...A.value[a],
+					let e = k.value[a].anchors.map((e) => {
+						let t = E(e, {
+							...k.value[a],
 							x: r,
 							y: i
 						});
@@ -1018,53 +1018,53 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 							y: t.y
 						};
 					});
-					A.value[a] = {
-						...A.value[a],
+					k.value[a] = {
+						...k.value[a],
 						x: r,
 						y: i,
 						anchors: e
 					};
 				}
-			} else if (W.value && G.value) {
+			} else if (U.value && W.value) {
 				let t = Z.value?.getBoundingClientRect();
 				if (!t) return;
-				let n = (e.clientX - t.left - I.x) / F.value, r = (e.clientY - t.top - I.y) / F.value;
-				P.endX = n, P.endY = r;
-			} else if (L.value) {
-				let t = e.clientX - R.x, n = e.clientY - R.y;
-				I.x += t, I.y += n, R.x = e.clientX, R.y = e.clientY;
+				let n = (e.clientX - t.left - F.x) / P.value, r = (e.clientY - t.top - F.y) / P.value;
+				N.endX = n, N.endY = r;
+			} else if (I.value) {
+				let t = e.clientX - L.x, n = e.clientY - L.y;
+				F.x += t, F.y += n, L.x = e.clientX, L.y = e.clientY;
 			}
 		}, Fe = (e) => {
-			if (L.value) L.value = !1;
-			else if (H.value) H.value = null, T("update:nodes", A.value);
-			else if (W.value && G.value) {
+			if (I.value) I.value = !1;
+			else if (V.value) V.value = null, T("update:nodes", k.value);
+			else if (U.value && W.value) {
 				let t = Z.value?.getBoundingClientRect();
 				if (!t) {
 					Q();
 					return;
 				}
-				let n = ee(e.clientX, e.clientY, M.value, I, F.value, t);
-				if (n && n.nodeId !== G.value.nodeId && !ae(j.value, G.value.id, n.id)) {
+				let n = te(e.clientX, e.clientY, j.value, F, P.value, t);
+				if (n && n.nodeId !== W.value.nodeId && !oe(A.value, W.value.id, n.id)) {
 					let e = {
-						id: O(),
-						fromAnchorId: G.value.id,
+						id: ne(),
+						fromAnchorId: W.value.id,
 						toAnchorId: n.id
 					};
-					j.value.push(e), T("update:lines", j.value);
+					A.value.push(e), T("update:lines", A.value);
 				}
 				Q();
 			}
 		}, Q = () => {
-			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;
+			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;
 		}, Ie = (e) => {
 			if (e.altKey) {
-				k(e);
-				let t = F.value + (e.deltaY < 0 ? .1 : -.1);
-				F.value = we(t);
+				D(e);
+				let t = P.value + (e.deltaY < 0 ? .1 : -.1);
+				P.value = we(t);
 			}
 		}, Le = (e, t) => {
-			k(t), ve = !0, q = !0;
-			let n = A.value.find((t) => t.id === e);
+			D(t), K = !0, q = !0;
+			let n = k.value.find((t) => t.id === e);
 			if (!n) return;
 			let r = Z.value?.getBoundingClientRect();
 			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 +1073,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		}, Re = (e) => {
 			T("beforeDeleteNode", e);
 			let t = /* @__PURE__ */ new Map();
-			for (let e of A.value) for (let n of e.anchors) t.set(n.id, e.id);
-			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 = "";
+			for (let e of k.value) for (let n of e.anchors) t.set(n.id, e.id);
+			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 = "";
 		}, ze = (e) => {
-			T("beforeDeleteLine", e), j.value = j.value.filter((t) => t.id !== e), T("update:lines", j.value), K.value = "", $();
+			T("beforeDeleteLine", e), A.value = A.value.filter((t) => t.id !== e), T("update:lines", A.value), G.value = "", $();
 		}, Be = () => {
 			Y.targetId && (Re(Y.targetId), $());
 		}, Ve = (e = {}) => {
@@ -1121,10 +1121,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					}
 				]
 			};
-			return A.value.push(o), T("update:nodes", A.value), o;
+			return k.value.push(o), T("update:nodes", k.value), o;
 		}, He = () => {
 			if (!Y.x || !Y.y) return;
-			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;
+			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;
 			Ve({
 				x: e,
 				y: t,
@@ -1133,24 +1133,24 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			}), $();
 		}, Ue = () => {
 			if (!Y.targetId) return;
-			let e = A.value.find((e) => e.id === Y.targetId);
+			let e = k.value.find((e) => e.id === Y.targetId);
 			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(() => {
 				q = !1;
 			}, 100));
 		}, We = () => {
 			if (!X.nodeId) return;
-			let e = A.value.findIndex((e) => e.id === X.nodeId);
-			e !== -1 && (A.value[e] = {
-				...A.value[e],
+			let e = k.value.findIndex((e) => e.id === X.nodeId);
+			e !== -1 && (k.value[e] = {
+				...k.value[e],
 				name: X.name || "未命名节点",
 				desc: X.desc
-			}, T("update:nodes", A.value)), X.visible = !1;
+			}, T("update:nodes", k.value)), X.visible = !1;
 		}, Ge = (e, t) => {
 			let n = Z.value?.getBoundingClientRect();
 			if (!n) return null;
-			let r = (e - n.left - I.x) / F.value, i = (t - n.top - I.y) / F.value;
-			for (let e = M.value.length - 1; e >= 0; e--) {
-				let t = M.value[e];
+			let r = (e - n.left - F.x) / P.value, i = (t - n.top - F.y) / P.value;
+			for (let e = j.value.length - 1; e >= 0; e--) {
+				let t = j.value[e];
 				if (r >= t.x && r <= t.x + t.width && i >= t.y && i <= t.y + t.height) return t;
 			}
 			return null;
@@ -1158,33 +1158,33 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			let t = Z.value?.getBoundingClientRect();
 			if (!t) return;
 			if (Ge(e.clientX, e.clientY)) {
-				K.value = "";
+				G.value = "";
 				return;
 			}
-			let n = re(M.value), r = N.value.filter((r) => ne(r, M.value, e.clientX, e.clientY, I, F.value, t, 8, n));
+			let n = ae(j.value), r = M.value.filter((r) => ie(r, j.value, e.clientX, e.clientY, F, P.value, t, 8, n));
 			if (r.length) {
-				let e = ie(N.value, r, K.value);
-				K.value = e;
-			} else K.value = "";
+				let e = O(M.value, r, G.value);
+				G.value = e;
+			} else G.value = "";
 		}, qe = (e) => {
-			if (ve) {
-				ve = !1;
+			if (K) {
+				K = !1;
 				return;
 			}
 			let t = Z.value?.getBoundingClientRect();
 			if (!t) return;
-			k(e), $(), q = !0;
+			D(e), $(), q = !0;
 			let n = Ge(e.clientX, e.clientY);
 			if (n) {
-				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(() => {
+				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(() => {
 					q = !1;
 				}, 100);
 				return;
 			}
-			let r = re(M.value), i = N.value.filter((n) => ne(n, M.value, e.clientX, e.clientY, I, F.value, t, 8, r));
+			let r = ae(j.value), i = M.value.filter((n) => ie(n, j.value, e.clientX, e.clientY, F, P.value, t, 8, r));
 			if (i.length) {
-				let n = ie(N.value, i, K.value);
-				K.value = n, Y.type = "line", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n;
+				let n = O(M.value, i, G.value);
+				G.value = n, Y.type = "line", Y.x = e.clientX - t.left, Y.y = e.clientY - t.top, Y.targetId = n;
 			}
 			setTimeout(() => {
 				q = !1;
@@ -1203,11 +1203,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 		}), d(() => {
 			document.removeEventListener("click", Je), document.removeEventListener("keydown", Ye);
 		}), S({
-			getNodes: () => A.value,
-			getLines: () => j.value,
+			getNodes: () => k.value,
+			getLines: () => A.value,
 			exportData: () => ({
-				nodes: A.value,
-				lines: j.value
+				nodes: k.value,
+				lines: A.value
 			}),
 			addNode: Ve,
 			deleteNode: Re,
@@ -1216,12 +1216,12 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			centerView: be
 		}), (t, u) => (f(), i("div", {
 			class: c(["flow-designer", { "flow-designer--light": s.theme === "light" }]),
-			onContextmenu: u[3] ||= x((e) => _(k)(e), ["prevent"])
+			onContextmenu: u[3] ||= x((e) => _(D)(e), ["prevent"])
 		}, [
 			a("div", {
 				ref_key: "canvasContainerRef",
 				ref: Z,
-				class: c(["canvas-container", { "is-dragging": !!H.value || L.value }]),
+				class: c(["canvas-container", { "is-dragging": !!V.value || I.value }]),
 				onMousedown: ke,
 				onMousemove: Pe,
 				onMouseup: Fe,
@@ -1236,12 +1236,12 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			}, [a("div", {
 				class: "canvas-content",
 				style: l(xe.value)
-			}, [o(se, {
-				nodes: M.value,
-				lines: N.value,
-				scale: F.value,
-				"temp-line": P,
-				"selected-line-id": K.value,
+			}, [o(ce, {
+				nodes: j.value,
+				lines: M.value,
+				scale: P.value,
+				"temp-line": N,
+				"selected-line-id": G.value,
 				animated: J.value,
 				theme: s.theme
 			}, null, 8, [
@@ -1252,7 +1252,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				"selected-line-id",
 				"animated",
 				"theme"
-			]), a("div", de, [(f(!0), i(e, null, h(M.value, (e) => (f(), n(ue, {
+			]), a("div", fe, [(f(!0), i(e, null, h(j.value, (e) => (f(), n(de, {
 				key: e.id,
 				id: e.id,
 				name: e.name,
@@ -1262,7 +1262,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				width: e.width,
 				height: e.height,
 				pic: e.pic,
-				"is-dragging": H.value === e.id,
+				"is-dragging": V.value === e.id,
 				onDragStart: Ae,
 				onAnchorClick: Ne,
 				onContextMenu: Le,
@@ -1292,11 +1292,11 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					class: "context-menu-item",
 					onClick: He
 				}, "新增节点"),
-				he.value ? (f(), i("div", {
+				ge.value ? (f(), i("div", {
 					key: 0,
 					class: "context-menu-item",
-					onClick: _e
-				}, g(ge.value ? "显示子节点" : "折叠子节点"), 1)) : r("", !0),
+					onClick: ve
+				}, g(_e.value ? "显示子节点" : "折叠子节点"), 1)) : r("", !0),
 				u[4] ||= a("div", { class: "context-menu-divider" }, null, -1),
 				a("div", {
 					class: "context-menu-item danger",
@@ -1317,13 +1317,13 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				style: l(Ce.value)
 			}, [
 				u[7] ||= a("h3", { class: "edit-panel-title" }, "编辑节点", -1),
-				a("div", fe, [u[5] ||= a("label", { class: "edit-panel-label" }, "节点名称", -1), b(a("input", {
+				a("div", pe, [u[5] ||= a("label", { class: "edit-panel-label" }, "节点名称", -1), b(a("input", {
 					"onUpdate:modelValue": u[1] ||= (e) => X.name = e,
 					type: "text",
 					class: "edit-panel-input",
 					placeholder: "请输入节点名称"
 				}, null, 512), [[v, X.name]])]),
-				a("div", pe, [u[6] ||= a("label", { class: "edit-panel-label" }, "节点描述", -1), b(a("input", {
+				a("div", me, [u[6] ||= a("label", { class: "edit-panel-label" }, "节点描述", -1), b(a("input", {
 					"onUpdate:modelValue": u[2] ||= (e) => X.desc = e,
 					type: "text",
 					class: "edit-panel-input",
@@ -1339,6 +1339,97 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			], 4)) : r("", !0)
 		], 34));
 	}
-}), [["__scopeId", "data-v-0545e5a3"]]);
+}), [["__scopeId", "data-v-0545e5a3"]]), he = (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
+	}
+], ge = (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 = /* @__PURE__ */ 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: he(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
+	};
+}, _e = (e, t) => {
+	if (e.length === 0) return null;
+	let n = (e) => {
+		let t = e.lastIndexOf("-");
+		return t === -1 ? e : e.slice(0, t);
+	}, r = /* @__PURE__ */ new Map(), i = /* @__PURE__ */ 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 = /* @__PURE__ */ 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);
+};
 //#endregion
-export { N as FlowDesigner, se as FlowLinesCanvas, ue as FlowNode, w as SingleLineCanvas, T as TempLineCanvas, re as buildAnchorMap, O as generateLineId, E as getAnchorPosition, D as getLineEndpoint, ee as hitTestAnchor, ae as isDuplicateLine, ne as isHit, oe as relayoutTree, k as stopEvent, ie as toggleSelectedLine };
+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 };

package/dist/vue-tree-flow.umd.cjs

@@ -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,T=Math.min(h.y,g.y,b,S)-c,E=Math.max(h.y,g.y,b,S)+c;if(_<C||_>w||v<T||v>E)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`},T={class:`edit-panel-field`},E={class:`edit-panel-field`};e.FlowDesigner=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))),D=(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)})}),ee=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&&ee(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,D.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=D.value.filter(r=>f(r,S.value,e.clientX,e.clientY,A,k.value,t,8,n));if(r.length){let e=m(D.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=D.value.filter(n=>f(n,S.value,e.clientX,e.clientY,A,k.value,t,8,r));if(i.length){let n=m(D.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:D.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`,T,[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`,E,[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`]]),e.FlowLinesCanvas=v,e.FlowNode=C,e.SingleLineCanvas=i,e.TempLineCanvas=a,e.buildAnchorMap=p,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});
+(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}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh7iku/vue-tree-flow",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "description": "Vue 3 树形流程设计器组件，支持节点拖拽、贝塞尔连线、折叠、缩放与主题切换",
   "keywords": [
@@ -44,5 +44,8 @@
     "vite": "^8.2.1",
     "vite-plugin-dts": "^5.1.0",
     "vue": "^3.5.0"
+  },
+  "dependencies": {
+    "@yh7iku/vue-tree-flow": "^0.1.0"
   }
 }