@yh7iku/vue-tree-flow 0.1.0 → 0.2.1

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) => {
+}, O = (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,14 +351,14 @@ 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) => {
+}, k = (e) => {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of e) for (let e of n.anchors) t.set(e.id, {
 		anchor: e,
@@ -370,56 +370,64 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 	return t === -1 ? e : e.slice(0, t);
 }, oe = (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();
+	let n = !1;
+	for (let e of t) {
+		let t = e.fromAnchorId.slice(e.fromAnchorId.lastIndexOf("-") + 1), r = e.toAnchorId.slice(e.toAnchorId.lastIndexOf("-") + 1);
+		if (t === "right" && r === "left") {
+			n = !0;
+			break;
+		}
+	}
+	let r = e[0].width || 140, i = e[0].height || 200, a = Math.max(20, Math.round(r * .3)), o = Math.max(30, Math.round(i * .5)), s = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Set();
 	for (let e of t) {
 		let t = A(e.fromAnchorId), n = A(e.toAnchorId);
-		t !== n && (o.has(t) || o.set(t, []), o.get(t).includes(n) || o.get(t).push(n), s.add(n));
+		t !== n && (s.has(t) || s.set(t, []), s.get(t).includes(n) || s.get(t).push(n), c.add(n));
 	}
-	let c = (e) => {
+	let l = (e) => {
 		let t = /* @__PURE__ */ new Set(), n = (e) => {
 			if (!t.has(e)) {
 				t.add(e);
-				for (let t of o.get(e) ?? []) n(t);
+				for (let t of s.get(e) ?? []) n(t);
 			}
 		};
 		return n(e), t;
-	}, l = e.filter((e) => !s.has(e.id));
-	if (l.length === 0) return null;
-	let u = l[0], d = c(u.id);
-	for (let e of l) {
-		let t = c(e.id);
-		t.size > d.size && (u = e, d = 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 f = /* @__PURE__ */ new Map(), p = (e, t) => {
+	let p = /* @__PURE__ */ 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 + p(n, new Set(t)), 0);
+		let n = s.get(e) ?? [];
+		return n.length === 0 ? 1 : n.reduce((e, n) => e + m(n, new Set(t)), 0);
 	};
-	for (let e of d) f.set(e, p(e, /* @__PURE__ */ new Set()));
-	let m = /* @__PURE__ */ new Map(), h = (e, t, s, c) => {
-		if (c.has(e)) return;
-		c.add(e);
-		let l = f.get(e) ?? 1, u = s + (l * n + (l - 1) * i) / 2;
-		m.set(e, {
-			x: u - n / 2,
-			y: t * (r + a)
+	for (let e of f) p.set(e, m(e, /* @__PURE__ */ new Set()));
+	let h = /* @__PURE__ */ new Map(), g = (e, t, c, l) => {
+		if (l.has(e)) return;
+		l.add(e);
+		let u = p.get(e) ?? 1, d = n ? i : r, f = c + (u * d + (u - 1) * a) / 2, m, _;
+		n ? (m = t * (r + o), _ = f - i / 2) : (m = f - r / 2, _ = t * (i + o)), h.set(e, {
+			x: m,
+			y: _
 		});
-		let d = s;
-		for (let r of o.get(e) ?? []) {
-			let e = f.get(r) ?? 1, a = e * n + (e - 1) * i;
-			h(r, t + 1, d, c), d += a + i;
+		let v = c;
+		for (let n of s.get(e) ?? []) {
+			let e = p.get(n) ?? 1, r = e * d + (e - 1) * a;
+			g(n, t + 1, v, l), v += r + a;
 		}
 	};
-	h(u.id, 0, 0, /* @__PURE__ */ new Set());
-	let g = m.get(u.id);
-	if (!g) return null;
-	let _ = u.x - g.x, v = u.y - g.y;
+	g(d.id, 0, 0, /* @__PURE__ */ new Set());
+	let _ = h.get(d.id);
+	if (!_) return null;
+	let v = d.x - _.x, y = d.y - _.y;
 	return e.map((e) => {
-		let t = m.get(e.id);
+		let t = h.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 n = t.x + v, r = t.y + y, i = e.anchors.map((t) => {
+			let i = E(t, {
 				...e,
 				x: n,
 				y: r
@@ -456,7 +464,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,
@@ -614,11 +622,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);
@@ -690,7 +698,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 +813,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					}
 				]
 			}
-		], te = [{
+		], re = [{
 			id: "1",
 			fromAnchorId: "1-right",
 			toAnchorId: "2-left"
@@ -813,7 +821,7 @@ 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);
+		}], A = m(w.nodes ?? ee), j = m(w.lines ?? re);
 		y(() => w.nodes, (e) => {
 			e && (A.value = e);
 		}, { deep: !0 }), y(() => w.lines, (e) => {
@@ -946,7 +954,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				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;
 			}
-			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;
@@ -958,25 +966,25 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					F.value = e, I.x = n - V.rectLeft - i * e, I.y = r - V.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);
 		}, 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 && !H.value && !W.value && (L.value = !0, R.x = e.clientX, R.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);
+			$(), H.value = e, U.x = t.clientX, U.y = t.clientY, U.initialX = n, U.initialY = r, L.value = !1, D(t);
 		}, je = (e) => {
 			W.value && (P.endType = e);
 		}, Me = () => {
 			W.value && (P.endType = void 0);
 		}, Ne = (e, t) => {
-			if (k(t), W.value && G.value && G.value.nodeId !== e.nodeId) {
+			if (D(t), W.value && G.value && G.value.nodeId !== e.nodeId) {
 				if (ae(j.value, G.value.id, e.id)) {
 					Q(), alert("该锚点之间已存在连线，禁止重复创建！");
 					return;
 				}
 				let t = {
-					id: O(),
+					id: ne(),
 					fromAnchorId: G.value.id,
 					toAnchorId: e.id
 				};
@@ -987,7 +995,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				$(), W.value = !0, G.value = e, L.value = !1;
 				let t = A.value.find((t) => t.id === e.nodeId);
 				if (!t) return;
-				let n = D(e, t);
+				let n = E(e, t);
 				switch (P.visible = !0, P.startX = n.x, P.startY = n.y, P.startType = e.type, e.type) {
 					case "top":
 						P.endX = n.x, P.endY = n.y - 50;
@@ -1007,7 +1015,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				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 (a !== -1) {
 					let e = A.value[a].anchors.map((e) => {
-						let t = D(e, {
+						let t = E(e, {
 							...A.value[a],
 							x: r,
 							y: i
@@ -1043,10 +1051,10 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 					Q();
 					return;
 				}
-				let n = ee(e.clientX, e.clientY, M.value, I, F.value, t);
+				let n = te(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 e = {
-						id: O(),
+						id: ne(),
 						fromAnchorId: G.value.id,
 						toAnchorId: n.id
 					};
@@ -1058,12 +1066,12 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			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;
 		}, Ie = (e) => {
 			if (e.altKey) {
-				k(e);
+				D(e);
 				let t = F.value + (e.deltaY < 0 ? .1 : -.1);
 				F.value = we(t);
 			}
 		}, Le = (e, t) => {
-			k(t), ve = !0, q = !0;
+			D(t), ve = !0, q = !0;
 			let n = A.value.find((t) => t.id === e);
 			if (!n) return;
 			let r = Z.value?.getBoundingClientRect();
@@ -1161,7 +1169,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				K.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 = k(M.value), r = N.value.filter((r) => O(r, M.value, e.clientX, e.clientY, I, F.value, t, 8, n));
 			if (r.length) {
 				let e = ie(N.value, r, K.value);
 				K.value = e;
@@ -1173,7 +1181,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			}
 			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(() => {
@@ -1181,7 +1189,7 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 				}, 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 = k(M.value), i = N.value.filter((n) => O(n, M.value, e.clientX, e.clientY, I, F.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;
@@ -1216,7 +1224,7 @@ 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",
@@ -1339,6 +1347,97 @@ var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
 			], 4)) : r("", !0)
 		], 34));
 	}
-}), [["__scopeId", "data-v-0545e5a3"]]);
+}), [["__scopeId", "data-v-0545e5a3"]]), me = (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
+	}
+], he = (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: me(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
+	};
+}, ge = (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 { N as FlowDesigner, se as FlowLinesCanvas, ue as FlowNode, w as SingleLineCanvas, T as TempLineCanvas, k as buildAnchorMap, ge as flowToTree, ne as generateLineId, ee as getAnchorPosition, E as getLineEndpoint, te as hitTestAnchor, ae as isDuplicateLine, O as isHit, oe as relayoutTree, D as stopEvent, ie as toggleSelectedLine, he as treeToFlow };

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=!1;for(let e of t){let t=e.fromAnchorId.slice(e.fromAnchorId.lastIndexOf(`-`)+1),r=e.toAnchorId.slice(e.toAnchorId.lastIndexOf(`-`)+1);if(t===`right`&&r===`left`){n=!0;break}}let r=e[0].width||140,i=e[0].height||200,a=Math.max(20,Math.round(r*.3)),o=Math.max(30,Math.round(i*.5)),c=new Map,l=new Set;for(let e of t){let t=g(e.fromAnchorId),n=g(e.toAnchorId);t!==n&&(c.has(t)||c.set(t,[]),c.get(t).includes(n)||c.get(t).push(n),l.add(n))}let u=e=>{let t=new Set,n=e=>{if(!t.has(e)){t.add(e);for(let t of c.get(e)??[])n(t)}};return n(e),t},d=e.filter(e=>!l.has(e.id));if(d.length===0)return null;let f=d[0],p=u(f.id);for(let e of d){let t=u(e.id);t.size>p.size&&(f=e,p=t)}let m=new Map,h=(e,t)=>{if(t.has(e))return 1;t.add(e);let n=c.get(e)??[];return n.length===0?1:n.reduce((e,n)=>e+h(n,new Set(t)),0)};for(let e of p)m.set(e,h(e,new Set));let _=new Map,v=(e,t,s,l)=>{if(l.has(e))return;l.add(e);let u=m.get(e)??1,d=n?i:r,f=s+(u*d+(u-1)*a)/2,p,h;n?(p=t*(r+o),h=f-i/2):(p=f-r/2,h=t*(i+o)),_.set(e,{x:p,y:h});let g=s;for(let n of c.get(e)??[]){let e=m.get(n)??1,r=e*d+(e-1)*a;v(n,t+1,g,l),g+=r+a}};v(f.id,0,0,new Set);let y=_.get(f.id);if(!y)return null;let b=f.x-y.x,x=f.y-y.y;return e.map(e=>{let t=_.get(e.id);if(!t)return e;let n=t.x+b,r=t.y+x,i=e.anchors.map(t=>{let i=s(t,{...e,x:n,y:r});return{...t,x:i.x,y:i.y}});return{...e,x:n,y:r,anchors:i}})},v=(0,t.defineComponent)({__name:`FlowLinesCanvas`,props:{nodes:{},lines:{},scale:{},tempLine:{},selectedLineId:{default:``},animated:{type:Boolean,default:!1},theme:{default:`dark`}},setup(e){let n=e,r=e=>{for(let t of n.nodes){let n=t.anchors.find(t=>t.id===e);if(n){let e=s(n,t);return{...n,x:e.x,y:e.y}}}return null},o={position:`absolute`,top:0,left:0,width:`100%`,height:`100%`,pointerEvents:`none`,zIndex:5};return(n,s)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{style:o},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.lines,n=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:n.id},[r(n.fromAnchorId)&&r(n.toAnchorId)?((0,t.openBlock)(),(0,t.createBlock)(i,{key:0,"line-id":n.id,"from-anchor":r(n.fromAnchorId),"to-anchor":r(n.toAnchorId),scale:e.scale,"is-selected":e.selectedLineId===n.id,animated:e.animated,theme:e.theme},null,8,[`line-id`,`from-anchor`,`to-anchor`,`scale`,`is-selected`,`animated`,`theme`])):(0,t.createCommentVNode)(``,!0)],64))),128)),(0,t.createVNode)(a,{visible:e.tempLine.visible,"start-x":e.tempLine.startX,"start-y":e.tempLine.startY,"end-x":e.tempLine.endX,"end-y":e.tempLine.endY,scale:e.scale,"start-type":e.tempLine.startType,"end-type":e.tempLine.endType,theme:e.theme},null,8,[`visible`,`start-x`,`start-y`,`end-x`,`end-y`,`scale`,`start-type`,`end-type`,`theme`])]))}}),y=[`src`],b={class:`node-name`},x=(0,t.defineComponent)({__name:`FlowNode`,props:{id:{},name:{},desc:{},x:{},y:{},width:{default:300},height:{default:200},pic:{},isDragging:{type:Boolean,default:!1}},emits:[`dragStart`,`anchorClick`,`contextMenu`,`anchorHover`,`anchorLeave`],setup(e,{emit:n}){let r=e,i=n,a=(0,t.ref)(!1),o=(0,t.computed)(()=>({id:`${r.id}-top`,nodeId:r.id,type:`top`,x:r.x+r.width/2,y:r.y-6})),s=(0,t.computed)(()=>({id:`${r.id}-bottom`,nodeId:r.id,type:`bottom`,x:r.x+r.width/2,y:r.y+r.height-6})),c=(0,t.computed)(()=>({id:`${r.id}-left`,nodeId:r.id,type:`left`,x:r.x-6,y:r.y+r.height/2})),l=(0,t.computed)(()=>({id:`${r.id}-right`,nodeId:r.id,type:`right`,x:r.x+r.width-6,y:r.y+r.height/2})),d=(0,t.computed)(()=>({position:`absolute`,left:`${r.x}px`,top:`${r.y}px`,width:`${r.width}px`,height:`${r.height}px`,backgroundColor:`var(--fd-node-bg)`,border:`1px solid var(--fd-node-border)`,borderRadius:`8px`,color:`var(--fd-node-text)`,display:`flex`,flexDirection:`column`,alignItems:`center`,justifyContent:r.pic?`flex-start`:`center`,fontFamily:`Arial, sans-serif`,fontSize:`14px`,boxShadow:`0 4px 12px rgba(0,0,0,0.3)`,cursor:r.isDragging?`grabbing`:`grab`,zIndex:6,userSelect:`none`,transition:`border-color 0.2s ease`,borderColor:a.value?`var(--fd-node-border-hover)`:`var(--fd-node-border)`})),f=e=>{let t={position:`absolute`,width:`12px`,height:`12px`,borderRadius:`50%`,backgroundColor:`rgba(66, 153, 225, 0.6)`,border:`2px solid #fff`,cursor:`crosshair`,zIndex:6,opacity:+!!a.value,visibility:a.value?`visible`:`hidden`,transition:`all 0.2s ease`,pointerEvents:a.value?`auto`:`none`,boxShadow:`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,touchAction:`none`};switch(e){case`top`:t.top=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`bottom`:t.bottom=`-6px`,t.left=`50%`,t.transform=`translateX(-50%)`;break;case`left`:t.left=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`;break;case`right`:t.right=`-6px`,t.top=`50%`,t.transform=`translateY(-50%)`}return t},p=e=>{e.target.classList.contains(`node-anchor`)||(u(e),i(`dragStart`,r.id,e,r.x,r.y))},m=(e,t)=>{u(t),i(`anchorClick`,e,t)},h=e=>{u(e),i(`contextMenu`,r.id,e)},g=(e,t)=>{let n=e.target;n.style.opacity=`1`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1.2)`:n.style.transform=`translateY(-50%) scale(1.2)`,n.style.backgroundColor=`#4299e1`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.3), 0 0 0 6px rgba(66, 153, 225, 0.18), 0 0 0 10px rgba(66, 153, 225, 0.08)`,i(`anchorHover`,t)},_=(e,t)=>{let n=e.target;n.style.opacity=`0.9`,t===`top`||t===`bottom`?n.style.transform=`translateX(-50%) scale(1)`:n.style.transform=`translateY(-50%) scale(1)`,n.style.backgroundColor=`rgba(66, 153, 225, 0.6)`,n.style.boxShadow=`0 0 0 3px rgba(66, 153, 225, 0.2), 0 0 0 7px rgba(66, 153, 225, 0.12), 0 0 0 12px rgba(66, 153, 225, 0.05), 0 0 0 18px rgba(66, 153, 225, 0.02)`,i(`anchorLeave`)};return(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`node`,{"node--with-pic":!!e.pic}]),style:(0,t.normalizeStyle)(d.value),onMousedown:p,onContextmenu:(0,t.withModifiers)(h,[`prevent`]),onMouseenter:r[12]||=e=>a.value=!0,onMouseleave:r[13]||=e=>a.value=!1},[e.pic?((0,t.openBlock)(),(0,t.createElementBlock)(`img`,{key:0,class:`node-pic`,src:e.pic,alt:``},null,8,y)):(0,t.createCommentVNode)(``,!0),(0,t.createElementVNode)(`span`,b,(0,t.toDisplayString)(e.name),1),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-top`,style:(0,t.normalizeStyle)(f(`top`)),onMousedown:r[0]||=(0,t.withModifiers)(e=>m(o.value,e),[`stop`]),onMouseenter:r[1]||=e=>g(e,`top`),onMouseleave:r[2]||=e=>_(e,`top`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-bottom`,style:(0,t.normalizeStyle)(f(`bottom`)),onMousedown:r[3]||=(0,t.withModifiers)(e=>m(s.value,e),[`stop`]),onMouseenter:r[4]||=e=>g(e,`bottom`),onMouseleave:r[5]||=e=>_(e,`bottom`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-left`,style:(0,t.normalizeStyle)(f(`left`)),onMousedown:r[6]||=(0,t.withModifiers)(e=>m(c.value,e),[`stop`]),onMouseenter:r[7]||=e=>g(e,`left`),onMouseleave:r[8]||=e=>_(e,`left`)},null,36),(0,t.createElementVNode)(`div`,{class:`node-anchor anchor-right`,style:(0,t.normalizeStyle)(f(`right`)),onMousedown:r[9]||=(0,t.withModifiers)(e=>m(l.value,e),[`stop`]),onMouseenter:r[10]||=e=>g(e,`right`),onMouseleave:r[11]||=e=>_(e,`right`)},null,36)],38))}}),S=(e,t)=>{let n=e.__vccOpts||e;for(let[e,r]of t)n[e]=r;return n},C=S(x,[[`__scopeId`,`data-v-2dead940`]]),w={class:`nodes-container`},ee={class:`edit-panel-field`},T={class:`edit-panel-field`},E=S((0,t.defineComponent)({__name:`FlowDesigner`,props:{nodes:{},lines:{},theme:{default:`dark`}},emits:[`update:nodes`,`update:lines`,`beforeDeleteNode`,`beforeDeleteLine`,`beforeAddNode`],setup(e,{expose:n,emit:r}){let i=e,a=r,o=[{id:`1`,name:`Reference`,x:0,y:0,width:140,height:200,anchors:[{id:`1-top`,nodeId:`1`,type:`top`,x:70,y:0},{id:`1-bottom`,nodeId:`1`,type:`bottom`,x:70,y:200},{id:`1-left`,nodeId:`1`,type:`left`,x:0,y:100},{id:`1-right`,nodeId:`1`,type:`right`,x:140,y:100}]},{id:`2`,name:`Image Generation`,x:400,y:0,width:140,height:200,anchors:[{id:`2-top`,nodeId:`2`,type:`top`,x:470,y:0},{id:`2-bottom`,nodeId:`2`,type:`bottom`,x:470,y:200},{id:`2-left`,nodeId:`2`,type:`left`,x:400,y:100},{id:`2-right`,nodeId:`2`,type:`right`,x:540,y:100}]},{id:`3`,name:`Video Generation`,x:400,y:250,width:140,height:200,anchors:[{id:`3-top`,nodeId:`3`,type:`top`,x:470,y:250},{id:`3-bottom`,nodeId:`3`,type:`bottom`,x:470,y:450},{id:`3-left`,nodeId:`3`,type:`left`,x:400,y:350},{id:`3-right`,nodeId:`3`,type:`right`,x:540,y:350}]}],d=[{id:`1`,fromAnchorId:`1-right`,toAnchorId:`2-left`},{id:`2`,fromAnchorId:`1-right`,toAnchorId:`3-left`}],g=(0,t.ref)(i.nodes??o),y=(0,t.ref)(i.lines??d);(0,t.watch)(()=>i.nodes,e=>{e&&(g.value=e)},{deep:!0}),(0,t.watch)(()=>i.lines,e=>{e&&(y.value=e)},{deep:!0});let b=e=>{let t=new Set,n=new Set,r=!1,i=a=>{if(n.has(a)){a===e&&(r=!0);return}n.add(a);let o=g.value.find(e=>e.id===a);if(!o)return;let s=new Set(o.anchors.map(e=>e.id));for(let e of y.value){if(!s.has(e.fromAnchorId))continue;let n=g.value.flatMap(e=>e.anchors).find(t=>t.id===e.toAnchorId);!n||n.nodeId===a||(t.add(n.nodeId),i(n.nodeId))}};return i(e),r?new Set:t},x=(0,t.computed)(()=>{let e=new Set;for(let t of g.value)if(t.collapsed)for(let n of b(t.id))e.add(n);return e}),S=(0,t.computed)(()=>g.value.filter(e=>!x.value.has(e.id))),E=(0,t.computed)(()=>{let e=new Set(S.value.map(e=>e.id));return y.value.filter(t=>{let n=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.fromAnchorId),r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return n&&r&&e.has(n.nodeId)&&e.has(r.nodeId)})}),D=e=>{let t=g.value.find(t=>t.id===e);if(!t)return!1;let n=new Set(t.anchors.map(e=>e.id));return y.value.some(t=>{if(!n.has(t.fromAnchorId))return!1;let r=g.value.flatMap(e=>e.anchors).find(e=>e.id===t.toAnchorId);return!!r&&r.nodeId!==e})},te=(0,t.computed)(()=>!!W.targetId&&D(W.targetId)),ne=(0,t.computed)(()=>!!g.value.find(e=>e.id===W.targetId)?.collapsed),re=()=>{let e=W.targetId;if(!e)return;let t=g.value.find(t=>t.id===e);if(!t)return;t.collapsed=!t.collapsed;let n=_(S.value,E.value);if(n){let e=new Map(n.map(e=>[e.id,e]));g.value=g.value.map(t=>{let n=e.get(t.id);return n?{...t,...n}:t})}a(`update:nodes`,g.value),Q()},O=(0,t.reactive)({visible:!1,startX:0,startY:0,endX:0,endY:0}),k=(0,t.ref)(1),A=(0,t.reactive)({x:100,y:100}),j=(0,t.ref)(!1),M=(0,t.reactive)({x:0,y:0}),N=(0,t.ref)(`none`),P=(0,t.reactive)({x:0,y:0}),F=(0,t.reactive)({startDist:0,startScale:1,startX:0,startY:0,midX:0,midY:0,rectLeft:0,rectTop:0}),I=(0,t.ref)(null),L=(0,t.reactive)({x:0,y:0,initialX:0,initialY:0}),R=(0,t.ref)(!1),z=(0,t.ref)(null),B=(0,t.ref)(``),V=!1,H=!1,U=(0,t.ref)(!1),ie=()=>(U.value=!U.value,U.value),ae=()=>{let e=K.value;if(!e)return;let t=S.value;if(t.length===0)return;let n=1/0,r=1/0,i=-1/0,a=-1/0;for(let e of t)e.x<n&&(n=e.x),e.y<r&&(r=e.y),e.x+e.width>i&&(i=e.x+e.width),e.y+e.height>a&&(a=e.y+e.height);let o=(n+i)/2,s=(r+a)/2,c=e.getBoundingClientRect();A.x=c.width/2-o*k.value,A.y=c.height/2-s*k.value},W=(0,t.reactive)({type:`none`,x:0,y:0,targetId:null}),G=(0,t.reactive)({visible:!1,nodeId:null,x:0,y:0,name:``,desc:``}),K=(0,t.ref)(null),oe=(0,t.computed)(()=>({position:`absolute`,top:`${A.y}px`,left:`${A.x}px`,transformOrigin:`0 0`,transform:`scale(${k.value})`,width:`60px`,height:`60px`})),q=(0,t.computed)(()=>({position:`absolute`,left:`${W.x}px`,top:`${W.y}px`})),se=(0,t.computed)(()=>({position:`absolute`,left:`${G.x}px`,top:`${G.y}px`})),J=e=>Math.max(.5,Math.min(2,e)),Y=(e,t)=>Math.hypot(e.clientX-t.clientX,e.clientY-t.clientY),ce=e=>{if(e.touches.length===1)N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY,I.value=null,j.value=!1,Z();else if(e.touches.length===2){N.value=`pinch`;let t=K.value?.getBoundingClientRect();F.startDist=Y(e.touches[0],e.touches[1]),F.startScale=k.value,F.startX=A.x,F.startY=A.y,F.midX=(e.touches[0].clientX+e.touches[1].clientX)/2,F.midY=(e.touches[0].clientY+e.touches[1].clientY)/2,F.rectLeft=t?.left??0,F.rectTop=t?.top??0}u(e)},le=e=>{if(N.value===`pan`&&e.touches.length===1){let t=e.touches[0].clientX-P.x,n=e.touches[0].clientY-P.y;A.x+=t,A.y+=n,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY}else if(N.value===`pinch`&&e.touches.length===2){let t=Y(e.touches[0],e.touches[1]),n=(e.touches[0].clientX+e.touches[1].clientX)/2,r=(e.touches[0].clientY+e.touches[1].clientY)/2;if(F.startDist>0){let e=J(F.startScale*(t/F.startDist)),i=(F.midX-F.rectLeft-F.startX)/F.startScale,a=(F.midY-F.rectTop-F.startY)/F.startScale;k.value=e,A.x=n-F.rectLeft-i*e,A.y=r-F.rectTop-a*e}}u(e)},X=e=>{e.touches.length===0?N.value=`none`:e.touches.length===1&&N.value===`pinch`&&(N.value=`pan`,P.x=e.touches[0].clientX,P.y=e.touches[0].clientY)},ue=e=>{e.button===0&&!I.value&&!R.value&&(j.value=!0,M.x=e.clientX,M.y=e.clientY,u(e))},de=(e,t,n,r)=>{Q(),I.value=e,L.x=t.clientX,L.y=t.clientY,L.initialX=n,L.initialY=r,j.value=!1,u(t)},fe=e=>{R.value&&(O.endType=e)},pe=()=>{R.value&&(O.endType=void 0)},me=(e,t)=>{if(u(t),R.value&&z.value&&z.value.nodeId!==e.nodeId){if(h(y.value,z.value.id,e.id)){Z(),alert(`该锚点之间已存在连线，禁止重复创建！`);return}let t={id:l(),fromAnchorId:z.value.id,toAnchorId:e.id};y.value.push(t),a(`update:lines`,y.value),Z();return}if(!R.value){Q(),R.value=!0,z.value=e,j.value=!1;let t=g.value.find(t=>t.id===e.nodeId);if(!t)return;let n=s(e,t);switch(O.visible=!0,O.startX=n.x,O.startY=n.y,O.startType=e.type,e.type){case`top`:O.endX=n.x,O.endY=n.y-50;break;case`bottom`:O.endX=n.x,O.endY=n.y+50;break;case`left`:O.endX=n.x-50,O.endY=n.y;break;case`right`:O.endX=n.x+50,O.endY=n.y}}},he=e=>{if(I.value){if(!g.value.find(e=>e.id===I.value))return;let t=(e.clientX-L.x)/k.value,n=(e.clientY-L.y)/k.value,r=L.initialX+t,i=L.initialY+n,a=g.value.findIndex(e=>e.id===I.value);if(a!==-1){let e=g.value[a].anchors.map(e=>{let t=s(e,{...g.value[a],x:r,y:i});return{...e,x:t.x,y:t.y}});g.value[a]={...g.value[a],x:r,y:i,anchors:e}}}else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t)return;let n=(e.clientX-t.left-A.x)/k.value,r=(e.clientY-t.top-A.y)/k.value;O.endX=n,O.endY=r}else if(j.value){let t=e.clientX-M.x,n=e.clientY-M.y;A.x+=t,A.y+=n,M.x=e.clientX,M.y=e.clientY}},ge=e=>{if(j.value)j.value=!1;else if(I.value)I.value=null,a(`update:nodes`,g.value);else if(R.value&&z.value){let t=K.value?.getBoundingClientRect();if(!t){Z();return}let n=c(e.clientX,e.clientY,S.value,A,k.value,t);if(n&&n.nodeId!==z.value.nodeId&&!h(y.value,z.value.id,n.id)){let e={id:l(),fromAnchorId:z.value.id,toAnchorId:n.id};y.value.push(e),a(`update:lines`,y.value)}Z()}},Z=()=>{R.value=!1,z.value=null,O.visible=!1,O.startX=0,O.startY=0,O.endX=0,O.endY=0,O.startType=void 0,O.endType=void 0},_e=e=>{if(e.altKey){u(e);let t=k.value+(e.deltaY<0?.1:-.1);k.value=J(t)}},ve=(e,t)=>{u(t),V=!0,H=!0;let n=g.value.find(t=>t.id===e);if(!n)return;let r=K.value?.getBoundingClientRect();r&&(W.type=`node`,W.x=t.clientX-r.left,W.y=t.clientY-r.top,W.targetId=e,G.nodeId=e,G.name=n.name,G.desc=n.desc||``,setTimeout(()=>{H=!1},100))},ye=e=>{a(`beforeDeleteNode`,e);let t=new Map;for(let e of g.value)for(let n of e.anchors)t.set(n.id,e.id);g.value=g.value.filter(t=>t.id!==e),a(`update:nodes`,g.value),y.value=y.value.filter(n=>t.get(n.fromAnchorId)!==e&&t.get(n.toAnchorId)!==e),a(`update:lines`,y.value),B.value=``},be=e=>{a(`beforeDeleteLine`,e),y.value=y.value.filter(t=>t.id!==e),a(`update:lines`,y.value),B.value=``,Q()},xe=()=>{W.targetId&&(ye(W.targetId),Q())},Se=(e={})=>{a(`beforeAddNode`,e);let t=e.width??140,n=e.height??200,r=e.x??100,i=e.y??100,o=`node_${Date.now()}_${Math.random().toString(36).slice(2,7)}`,s={id:o,name:e.name??`新节点`,desc:e.desc,pic:e.pic,x:r,y:i,width:t,height:n,anchors:[{id:`${o}-top`,nodeId:o,type:`top`,x:r+t/2,y:i},{id:`${o}-bottom`,nodeId:o,type:`bottom`,x:r+t/2,y:i+n},{id:`${o}-left`,nodeId:o,type:`left`,x:r,y:i+n/2},{id:`${o}-right`,nodeId:o,type:`right`,x:r+t,y:i+n/2}]};return g.value.push(s),a(`update:nodes`,g.value),s},Ce=()=>{if(!W.x||!W.y)return;let e=(W.x-A.x)/k.value+50,t=(W.y-A.y)/k.value+50,n=W.targetId?g.value.find(e=>e.id===W.targetId):void 0;Se({x:e,y:t,width:n?.width,height:n?.height}),Q()},we=()=>{if(!W.targetId)return;let e=g.value.find(e=>e.id===W.targetId);e&&(G.visible=!0,G.nodeId=W.targetId,G.x=W.x,G.y=W.y,G.name=e.name,G.desc=e.desc||``,W.type=`none`,H=!0,setTimeout(()=>{H=!1},100))},Te=()=>{if(!G.nodeId)return;let e=g.value.findIndex(e=>e.id===G.nodeId);e!==-1&&(g.value[e]={...g.value[e],name:G.name||`未命名节点`,desc:G.desc},a(`update:nodes`,g.value)),G.visible=!1},Ee=(e,t)=>{let n=K.value?.getBoundingClientRect();if(!n)return null;let r=(e-n.left-A.x)/k.value,i=(t-n.top-A.y)/k.value;for(let e=S.value.length-1;e>=0;e--){let t=S.value[e];if(r>=t.x&&r<=t.x+t.width&&i>=t.y&&i<=t.y+t.height)return t}return null},De=e=>{let t=K.value?.getBoundingClientRect();if(!t)return;if(Ee(e.clientX,e.clientY)){B.value=``;return}let n=p(S.value),r=E.value.filter(r=>f(r,S.value,e.clientX,e.clientY,A,k.value,t,8,n));if(r.length){let e=m(E.value,r,B.value);B.value=e}else B.value=``},Oe=e=>{if(V){V=!1;return}let t=K.value?.getBoundingClientRect();if(!t)return;u(e),Q(),H=!0;let n=Ee(e.clientX,e.clientY);if(n){W.type=`node`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n.id,G.nodeId=n.id,G.name=n.name,G.desc=n.desc||``,B.value=``,setTimeout(()=>{H=!1},100);return}let r=p(S.value),i=E.value.filter(n=>f(n,S.value,e.clientX,e.clientY,A,k.value,t,8,r));if(i.length){let n=m(E.value,i,B.value);B.value=n,W.type=`line`,W.x=e.clientX-t.left,W.y=e.clientY-t.top,W.targetId=n}setTimeout(()=>{H=!1},100)},Q=()=>{W.type=`none`,W.x=0,W.y=0,W.targetId=null,G.visible=!1,H=!1},ke=e=>{if(H)return;let t=e.target,n=t.closest(`.context-menu`),r=t.closest(`.edit-panel`),i=t.closest(`.toolbar`);!n&&!r&&!i&&Q()},$=e=>{e.key===`Escape`&&Q()};return(0,t.onMounted)(()=>{document.addEventListener(`click`,ke),document.addEventListener(`keydown`,$)}),(0,t.onUnmounted)(()=>{document.removeEventListener(`click`,ke),document.removeEventListener(`keydown`,$)}),n({getNodes:()=>g.value,getLines:()=>y.value,exportData:()=>({nodes:g.value,lines:y.value}),addNode:Se,deleteNode:ye,deleteLine:be,toggleAnimation:ie,centerView:ae}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:(0,t.normalizeClass)([`flow-designer`,{"flow-designer--light":e.theme===`light`}]),onContextmenu:r[3]||=(0,t.withModifiers)(e=>(0,t.unref)(u)(e),[`prevent`])},[(0,t.createElementVNode)(`div`,{ref_key:`canvasContainerRef`,ref:K,class:(0,t.normalizeClass)([`canvas-container`,{"is-dragging":!!I.value||j.value}]),onMousedown:ue,onMousemove:he,onMouseup:ge,onMouseleave:ge,onWheel:_e,onClick:De,onContextmenu:(0,t.withModifiers)(Oe,[`prevent`]),onTouchstart:ce,onTouchmove:(0,t.withModifiers)(le,[`prevent`]),onTouchend:X,onTouchcancel:X},[(0,t.createElementVNode)(`div`,{class:`canvas-content`,style:(0,t.normalizeStyle)(oe.value)},[(0,t.createVNode)(v,{nodes:S.value,lines:E.value,scale:k.value,"temp-line":O,"selected-line-id":B.value,animated:U.value,theme:e.theme},null,8,[`nodes`,`lines`,`scale`,`temp-line`,`selected-line-id`,`animated`,`theme`]),(0,t.createElementVNode)(`div`,w,[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(S.value,e=>((0,t.openBlock)(),(0,t.createBlock)(C,{key:e.id,id:e.id,name:e.name,desc:e.desc,x:e.x,y:e.y,width:e.width,height:e.height,pic:e.pic,"is-dragging":I.value===e.id,onDragStart:de,onAnchorClick:me,onContextMenu:ve,onAnchorHover:fe,onAnchorLeave:pe},null,8,[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`pic`,`is-dragging`]))),128))])],4)],34),W.type===`node`?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:we},`编辑节点`),(0,t.createElementVNode)(`div`,{class:`context-menu-item`,onClick:Ce},`新增节点`),te.value?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:0,class:`context-menu-item`,onClick:re},(0,t.toDisplayString)(ne.value?`显示子节点`:`折叠子节点`),1)):(0,t.createCommentVNode)(``,!0),r[4]||=(0,t.createElementVNode)(`div`,{class:`context-menu-divider`},null,-1),(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:xe},`删除节点`)],4)):(0,t.createCommentVNode)(``,!0),W.type===`line`&&W.targetId?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:1,class:`context-menu`,style:(0,t.normalizeStyle)(q.value)},[(0,t.createElementVNode)(`div`,{class:`context-menu-item danger`,onClick:r[0]||=e=>be(W.targetId)},`删除连线`)],4)):(0,t.createCommentVNode)(``,!0),G.visible?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:2,class:`edit-panel`,style:(0,t.normalizeStyle)(se.value)},[r[7]||=(0,t.createElementVNode)(`h3`,{class:`edit-panel-title`},`编辑节点`,-1),(0,t.createElementVNode)(`div`,ee,[r[5]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点名称`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[1]||=e=>G.name=e,type:`text`,class:`edit-panel-input`,placeholder:`请输入节点名称`},null,512),[[t.vModelText,G.name]])]),(0,t.createElementVNode)(`div`,T,[r[6]||=(0,t.createElementVNode)(`label`,{class:`edit-panel-label`},`节点描述`,-1),(0,t.withDirectives)((0,t.createElementVNode)(`input`,{"onUpdate:modelValue":r[2]||=e=>G.desc=e,type:`text`,class:`edit-panel-input`,placeholder:`可选：输入节点描述信息`},null,512),[[t.vModelText,G.desc]])]),(0,t.createElementVNode)(`div`,{class:`edit-panel-actions`},[(0,t.createElementVNode)(`button`,{class:`edit-panel-btn cancel`,onClick:Q},`取消`),(0,t.createElementVNode)(`button`,{class:`edit-panel-btn save`,onClick:Te},`保存`)])],4)):(0,t.createCommentVNode)(``,!0)],34))}}),[[`__scopeId`,`data-v-0545e5a3`]]),D=(e,t,n)=>[{id:`${e}-top`,nodeId:e,type:`top`,x:t/2,y:0},{id:`${e}-bottom`,nodeId:e,type:`bottom`,x:t/2,y:n},{id:`${e}-left`,nodeId:e,type:`left`,x:0,y:n/2},{id:`${e}-right`,nodeId:e,type:`right`,x:t,y:n/2}];e.FlowDesigner=E,e.FlowLinesCanvas=v,e.FlowNode=C,e.SingleLineCanvas=i,e.TempLineCanvas=a,e.buildAnchorMap=p,e.flowToTree=(e,t)=>{if(e.length===0)return null;let n=e=>{let t=e.lastIndexOf(`-`);return t===-1?e:e.slice(0,t)},r=new Map,i=new Set;for(let e of t){let t=n(e.fromAnchorId),a=n(e.toAnchorId);t!==a&&(r.has(t)||r.set(t,[]),r.get(t).push(a),i.add(a))}let a=e.find(e=>!i.has(e.id))??e[0],o=new Map(e.map(e=>[e.id,e])),s=[`id`,`name`,`desc`,`x`,`y`,`width`,`height`,`anchors`],c=new Set,l=e=>{if(c.has(e))return{id:e};c.add(e);let t=o.get(e),n={id:e};if(t?.name&&(n.name=t.name),t?.desc&&(n.desc=t.desc),t)for(let[e,r]of Object.entries(t))s.includes(e)||(n[e]=r);let i=r.get(e)??[];return n.children=i.length>0?i.map(l):null,n};return l(a.id)},e.generateLineId=l,e.getAnchorPosition=o,e.getLineEndpoint=s,e.hitTestAnchor=c,e.isDuplicateLine=h,e.isHit=f,e.relayoutTree=_,e.stopEvent=u,e.toggleSelectedLine=m,e.treeToFlow=(e,t={})=>{let{nodeWidth:n=140,nodeHeight:r=200,hGap:i=100,vGap:a=120,offsetX:o=0,offsetY:s=0,direction:c=`vertical`}=t,l=[],u=[],d=new Map,f=e=>{let t=e.children??[],n=t.length===0?1:t.reduce((e,t)=>e+f(t),0);return d.set(e.id,n),n};f(e);let p=c===`horizontal`,m=(e,t,c)=>{let f=e.children??[],h=d.get(e.id)??1,g=p?r:n,_=h*g+(h-1)*i,v=c+_/2,y,b;if(p?(y=t*(n+a)+o,b=v-r/2+s):(y=v-n/2+o,b=t*(r+a)+s),l.push({id:e.id,name:e.name??e.id,pic:e.pic,x:y,y:b,width:n,height:r,anchors:D(e.id,n,r)}),f.length>0){let n=c;for(let r of f){let a=d.get(r.id)??1,o=a*g+(a-1)*i;m(r,t+1,n),u.push({id:`line_${e.id}_${r.id}`,fromAnchorId:`${e.id}-${p?`right`:`bottom`}`,toAnchorId:`${r.id}-${p?`left`:`top`}`}),n+=o+i}}return _};return m(e,0,0),{nodes:l,lines:u}}});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yh7iku/vue-tree-flow",
-  "version": "0.1.0",
+  "version": "0.2.1",
   "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.2.0"
   }
 }