@yh7iku/vue-tree-flow 0.1.0

package/dist/vue-tree-flow.js

@@ -0,0 +1,1344 @@
+import { Fragment as e, computed as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, createVNode as o, defineComponent as s, normalizeClass as c, normalizeStyle as l, onMounted as u, onUnmounted as d, openBlock as f, reactive as p, ref as m, renderList as h, toDisplayString as g, unref as _, vModelText as v, watch as y, withDirectives as b, withModifiers as x } from "vue";
+//#region src/components/FlowDesigner/SingleLineCanvas.vue?vue&type=script&setup=true&lang.ts
+var S = ["id"], C = ["id"], w = /* @__PURE__ */ s({
+	__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 t = e, n = m(null), r = m(null), o = null, s = {
+			position: "absolute",
+			pointerEvents: "none",
+			zIndex: 5,
+			overflow: "hidden"
+		}, c = {
+			display: "block",
+			position: "absolute",
+			top: 0,
+			left: 0,
+			pointerEvents: "none"
+		}, l = () => {
+			if (!n.value || !r.value) return;
+			let { cp1X: e, cp1Y: i, cp2X: a, cp2Y: o } = h(t.fromAnchor.type, t.toAnchor.type, t.fromAnchor.x, t.fromAnchor.y, t.toAnchor.x, t.toAnchor.y), s = [
+				t.fromAnchor.x,
+				t.toAnchor.x,
+				e,
+				a
+			], c = [
+				t.fromAnchor.y,
+				t.toAnchor.y,
+				i,
+				o
+			], l = Math.min(...s) - 30, u = Math.min(...c) - 30, d = Math.max(...s) + 30, f = Math.max(...c) + 30, p = d - l, m = f - u;
+			n.value.style.left = `${l}px`, n.value.style.top = `${u}px`, n.value.style.width = `${p}px`, n.value.style.height = `${m}px`;
+			let g = window.devicePixelRatio || 1;
+			r.value.width = Math.round(p * t.scale * g), r.value.height = Math.round(m * t.scale * g), r.value.style.width = `${p}px`, r.value.style.height = `${m}px`;
+		}, p = (e, t, r, i, a) => {
+			if (!n.value) return;
+			e.save();
+			let o = t - n.value.offsetLeft, s = r - n.value.offsetTop;
+			e.translate(o, s), e.rotate(i), e.fillStyle = a, e.beginPath(), e.moveTo(0, 0), e.lineTo(-15, -8), e.lineTo(-15, 8), e.closePath(), e.fill(), e.restore();
+		}, h = (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
+			};
+		}, g = () => {
+			if (!r.value) return;
+			let e = r.value, i = e.getContext("2d");
+			if (!i) return;
+			let a = window.devicePixelRatio || 1;
+			i.setTransform(a, 0, 0, a, 0, 0), i.clearRect(0, 0, e.width, e.height), i.scale(t.scale, t.scale);
+			let o = t.theme === "light" ? "#3182ce" : "#4299e1", s = t.isSelected ? "#ff6b6b" : o, c = t.isSelected ? 4 : 3, l = t.isSelected ? 1 : 3;
+			if (!n.value) return;
+			let u = t.fromAnchor.x - n.value.offsetLeft, d = t.fromAnchor.y - n.value.offsetTop, f = t.toAnchor.x - n.value.offsetLeft, m = t.toAnchor.y - n.value.offsetTop, { cp1X: g, cp1Y: _, cp2X: v, cp2Y: y } = h(t.fromAnchor.type, t.toAnchor.type, u, d, f, m);
+			i.strokeStyle = s, i.lineWidth = c, i.lineCap = "round", t.animated ? (i.setLineDash([15, 10]), i.lineDashOffset = -(Date.now() / 50) * l % 100) : (i.setLineDash([]), i.lineDashOffset = 0), i.beginPath(), i.moveTo(u, d), i.bezierCurveTo(g, _, v, y, f, m), i.stroke();
+			let b = f - v, x = m - y, S = Math.atan2(x, b);
+			p(i, t.toAnchor.x, t.toAnchor.y, S, s);
+		}, _ = () => {
+			g(), o = requestAnimationFrame(_);
+		}, v = () => {
+			o || _();
+		}, b = () => {
+			o &&= (cancelAnimationFrame(o), null);
+		}, x = () => {
+			l(), g();
+		};
+		return y(() => [
+			t.fromAnchor,
+			t.toAnchor,
+			t.scale,
+			t.isSelected,
+			t.animated,
+			t.theme
+		], () => {
+			l(), t.animated ? v() : (b(), g());
+		}, { deep: !0 }), u(() => {
+			l(), window.addEventListener("resize", x), t.animated ? v() : g();
+		}), d(() => {
+			window.removeEventListener("resize", x), b();
+		}), (t, o) => (f(), i("div", {
+			ref_key: "containerRef",
+			ref: n,
+			id: `linker_${e.lineId}`,
+			class: "shape_box linker_box",
+			style: s
+		}, [a("canvas", {
+			ref_key: "canvasRef",
+			ref: r,
+			id: `linker_canvas_${e.lineId}`,
+			class: "shape_canvas",
+			style: c
+		}, null, 8, C)], 8, S));
+	}
+}), T = /* @__PURE__ */ s({
+	__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 t = e, n = () => t.theme === "light" ? "#3182ce" : "#4299e1", o = m(null), s = m(null), c = null, l = {
+			position: "absolute",
+			pointerEvents: "none",
+			zIndex: 5,
+			overflow: "hidden"
+		}, p = {
+			display: "block",
+			position: "absolute",
+			top: 0,
+			left: 0,
+			pointerEvents: "none"
+		}, h = (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
+			};
+		}, g = () => {
+			if (!t.visible || !o.value || !s.value) return;
+			let { cp1X: e, cp1Y: n, cp2X: r, cp2Y: i } = h(t.startType || "right", t.endType, t.startX, t.startY, t.endX, t.endY), a = [
+				t.startX,
+				t.endX,
+				e,
+				r
+			], c = [
+				t.startY,
+				t.endY,
+				n,
+				i
+			], l = Math.min(...a) - 30, u = Math.min(...c) - 30, d = Math.max(...a) + 30, f = Math.max(...c) + 30, p = d - l, m = f - u;
+			o.value.style.left = `${l}px`, o.value.style.top = `${u}px`, o.value.style.width = `${p}px`, o.value.style.height = `${m}px`;
+			let g = window.devicePixelRatio || 1;
+			s.value.width = Math.round(p * t.scale * g), s.value.height = Math.round(m * t.scale * g), s.value.style.width = `${p}px`, s.value.style.height = `${m}px`;
+		}, _ = () => {
+			if (!t.visible || !s.value || !o.value) return;
+			let e = s.value, r = e.getContext("2d");
+			if (!r) return;
+			let i = window.devicePixelRatio || 1;
+			r.setTransform(i, 0, 0, i, 0, 0), r.clearRect(0, 0, e.width, e.height), r.scale(t.scale, t.scale), r.strokeStyle = n(), r.lineWidth = 2, r.lineCap = "round", r.setLineDash([10, 8]);
+			let a = parseFloat(o.value.style.left || "0"), c = parseFloat(o.value.style.top || "0"), l = t.startX - a, u = t.startY - c, d = t.endX - a, f = t.endY - c, { cp1X: p, cp1Y: m, cp2X: g, cp2Y: _ } = h(t.startType || "right", t.endType || "left", t.startX, t.startY, t.endX, t.endY), v = p - a, y = m - c, b = g - a, x = _ - c;
+			r.beginPath(), r.moveTo(l, u), r.bezierCurveTo(v, y, b, x, d, f), r.stroke();
+			let S = d - b, C = f - x, w = Math.atan2(C, S);
+			r.save(), r.translate(d, f), r.rotate(w), r.fillStyle = n(), r.beginPath(), r.moveTo(0, 0), r.lineTo(-15, -8), r.lineTo(-15, 8), r.closePath(), r.fill(), r.restore();
+		}, v = () => {
+			_(), c = requestAnimationFrame(v);
+		}, b = () => {
+			c || v();
+		}, x = () => {
+			c &&= (cancelAnimationFrame(c), null);
+		};
+		return y(() => [
+			t.visible,
+			t.startX,
+			t.startY,
+			t.endX,
+			t.endY,
+			t.scale
+		], () => {
+			t.visible ? (g(), b()) : x();
+		}, { immediate: !0 }), u(() => {
+			t.visible && (g(), b());
+		}), d(() => {
+			x();
+		}), (t, n) => e.visible ? (f(), i("div", {
+			key: 0,
+			ref_key: "containerRef",
+			ref: o,
+			style: l
+		}, [a("canvas", {
+			ref_key: "canvasRef",
+			ref: s,
+			style: p
+		}, null, 512)], 512)) : r("", !0);
+	}
+}), E = (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
+		};
+	}
+}, D = (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
+		};
+	}
+}, ee = (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);
+		if (Math.hypot(o - n.x, s - n.y) < 15) return {
+			...t,
+			x: n.x,
+			y: n.y
+		};
+	}
+	return null;
+}, O = () => `line_${Date.now()}_${Math.floor(Math.random() * 1e3)}`, k = (e) => {
+	e.stopPropagation(), e.preventDefault();
+}, te = (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
+	};
+}, ne = (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);
+		t && (l = t.anchor, d = t.node), n && (u = n.anchor, f = n.node);
+	} else {
+		if (l = t.flatMap((e) => e.anchors).find((t) => t.id === e.fromAnchorId), u = t.flatMap((e) => e.anchors).find((t) => t.id === e.toAnchorId), l) {
+			let e = l.nodeId;
+			d = t.find((t) => t.id === e);
+		}
+		if (u) {
+			let e = u.nodeId;
+			f = t.find((t) => t.id === e);
+		}
+	}
+	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;
+	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) => {
+	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) => {
+	let t = e.lastIndexOf("-");
+	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();
+	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));
+	}
+	let c = (e) => {
+		let t = /* @__PURE__ */ new Set(), n = (e) => {
+			if (!t.has(e)) {
+				t.add(e);
+				for (let t of o.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);
+	}
+	let f = /* @__PURE__ */ new Map(), p = (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);
+	};
+	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)
+		});
+		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;
+		}
+	};
+	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;
+	return e.map((e) => {
+		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, {
+				...e,
+				x: n,
+				y: r
+			});
+			return {
+				...t,
+				x: i.x,
+				y: i.y
+			};
+		});
+		return {
+			...e,
+			x: n,
+			y: r,
+			anchors: i
+		};
+	});
+}, se = /* @__PURE__ */ s({
+	__name: "FlowLinesCanvas",
+	props: {
+		nodes: {},
+		lines: {},
+		scale: {},
+		tempLine: {},
+		selectedLineId: { default: "" },
+		animated: {
+			type: Boolean,
+			default: !1
+		},
+		theme: { default: "dark" }
+	},
+	setup(t) {
+		let a = t, s = (e) => {
+			for (let t of a.nodes) {
+				let n = t.anchors.find((t) => t.id === e);
+				if (n) {
+					let e = D(n, t);
+					return {
+						...n,
+						x: e.x,
+						y: e.y
+					};
+				}
+			}
+			return null;
+		}, c = {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			width: "100%",
+			height: "100%",
+			pointerEvents: "none",
+			zIndex: 5
+		};
+		return (a, l) => (f(), i("div", { style: c }, [(f(!0), i(e, null, h(t.lines, (a) => (f(), i(e, { key: a.id }, [s(a.fromAnchorId) && s(a.toAnchorId) ? (f(), n(w, {
+			key: 0,
+			"line-id": a.id,
+			"from-anchor": s(a.fromAnchorId),
+			"to-anchor": s(a.toAnchorId),
+			scale: t.scale,
+			"is-selected": t.selectedLineId === a.id,
+			animated: t.animated,
+			theme: t.theme
+		}, null, 8, [
+			"line-id",
+			"from-anchor",
+			"to-anchor",
+			"scale",
+			"is-selected",
+			"animated",
+			"theme"
+		])) : r("", !0)], 64))), 128)), o(T, {
+			visible: t.tempLine.visible,
+			"start-x": t.tempLine.startX,
+			"start-y": t.tempLine.startY,
+			"end-x": t.tempLine.endX,
+			"end-y": t.tempLine.endY,
+			scale: t.scale,
+			"start-type": t.tempLine.startType,
+			"end-type": t.tempLine.endType,
+			theme: t.theme
+		}, null, 8, [
+			"visible",
+			"start-x",
+			"start-y",
+			"end-x",
+			"end-y",
+			"scale",
+			"start-type",
+			"end-type",
+			"theme"
+		])]));
+	}
+}), j = ["src"], ce = { class: "node-name" }, le = /*@__PURE__*/ s({
+	__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 o = e, s = n, u = m(!1), d = t(() => ({
+			id: `${o.id}-top`,
+			nodeId: o.id,
+			type: "top",
+			x: o.x + o.width / 2,
+			y: o.y - 6
+		})), p = t(() => ({
+			id: `${o.id}-bottom`,
+			nodeId: o.id,
+			type: "bottom",
+			x: o.x + o.width / 2,
+			y: o.y + o.height - 6
+		})), h = t(() => ({
+			id: `${o.id}-left`,
+			nodeId: o.id,
+			type: "left",
+			x: o.x - 6,
+			y: o.y + o.height / 2
+		})), _ = t(() => ({
+			id: `${o.id}-right`,
+			nodeId: o.id,
+			type: "right",
+			x: o.x + o.width - 6,
+			y: o.y + o.height / 2
+		})), v = t(() => ({
+			position: "absolute",
+			left: `${o.x}px`,
+			top: `${o.y}px`,
+			width: `${o.width}px`,
+			height: `${o.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: o.pic ? "flex-start" : "center",
+			fontFamily: "Arial, sans-serif",
+			fontSize: "14px",
+			boxShadow: "0 4px 12px rgba(0,0,0,0.3)",
+			cursor: o.isDragging ? "grabbing" : "grab",
+			zIndex: 6,
+			userSelect: "none",
+			transition: "border-color 0.2s ease",
+			borderColor: u.value ? "var(--fd-node-border-hover)" : "var(--fd-node-border)"
+		})), y = (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: +!!u.value,
+				visibility: u.value ? "visible" : "hidden",
+				transition: "all 0.2s ease",
+				pointerEvents: u.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;
+		}, b = (e) => {
+			e.target.classList.contains("node-anchor") || (k(e), s("dragStart", o.id, e, o.x, o.y));
+		}, S = (e, t) => {
+			k(t), s("anchorClick", e, t);
+		}, C = (e) => {
+			k(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);
+		}, 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)", s("anchorLeave");
+		};
+		return (t, n) => (f(), i("div", {
+			class: c(["node", { "node--with-pic": !!e.pic }]),
+			style: l(v.value),
+			onMousedown: b,
+			onContextmenu: x(C, ["prevent"]),
+			onMouseenter: n[12] ||= (e) => u.value = !0,
+			onMouseleave: n[13] ||= (e) => u.value = !1
+		}, [
+			e.pic ? (f(), i("img", {
+				key: 0,
+				class: "node-pic",
+				src: e.pic,
+				alt: ""
+			}, null, 8, j)) : r("", !0),
+			a("span", ce, g(e.name), 1),
+			a("div", {
+				class: "node-anchor anchor-top",
+				style: l(y("top")),
+				onMousedown: n[0] ||= x((e) => S(d.value, e), ["stop"]),
+				onMouseenter: n[1] ||= (e) => w(e, "top"),
+				onMouseleave: n[2] ||= (e) => T(e, "top")
+			}, null, 36),
+			a("div", {
+				class: "node-anchor anchor-bottom",
+				style: l(y("bottom")),
+				onMousedown: n[3] ||= x((e) => S(p.value, e), ["stop"]),
+				onMouseenter: n[4] ||= (e) => w(e, "bottom"),
+				onMouseleave: n[5] ||= (e) => T(e, "bottom")
+			}, null, 36),
+			a("div", {
+				class: "node-anchor anchor-left",
+				style: l(y("left")),
+				onMousedown: n[6] ||= x((e) => S(h.value, e), ["stop"]),
+				onMouseenter: n[7] ||= (e) => w(e, "left"),
+				onMouseleave: n[8] ||= (e) => T(e, "left")
+			}, null, 36),
+			a("div", {
+				class: "node-anchor anchor-right",
+				style: l(y("right")),
+				onMousedown: n[9] ||= x((e) => S(_.value, e), ["stop"]),
+				onMouseenter: n[10] ||= (e) => w(e, "right"),
+				onMouseleave: n[11] ||= (e) => T(e, "right")
+			}, null, 36)
+		], 38));
+	}
+}), M = (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({
+	__name: "FlowDesigner",
+	props: {
+		nodes: {},
+		lines: {},
+		theme: { default: "dark" }
+	},
+	emits: [
+		"update:nodes",
+		"update:lines",
+		"beforeDeleteNode",
+		"beforeDeleteLine",
+		"beforeAddNode"
+	],
+	setup(s, { expose: S, emit: C }) {
+		let w = s, T = C, E = [
+			{
+				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
+					}
+				]
+			}
+		], te = [{
+			id: "1",
+			fromAnchorId: "1-right",
+			toAnchorId: "2-left"
+		}, {
+			id: "2",
+			fromAnchorId: "1-right",
+			toAnchorId: "3-left"
+		}], A = m(w.nodes ?? E), j = m(w.lines ?? te);
+		y(() => w.nodes, (e) => {
+			e && (A.value = e);
+		}, { deep: !0 }), y(() => w.lines, (e) => {
+			e && (j.value = e);
+		}, { deep: !0 });
+		let ce = (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);
+				if (!o) return;
+				let s = new Set(o.anchors.map((e) => e.id));
+				for (let e of j.value) {
+					if (!s.has(e.fromAnchorId)) continue;
+					let n = A.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(() => {
+			let e = /* @__PURE__ */ new Set();
+			for (let t of A.value) if (t.collapsed) for (let n of ce(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);
+				return n && r && e.has(n.nodeId) && e.has(r.nodeId);
+			});
+		}), me = (e) => {
+			let t = A.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) => {
+				if (!n.has(t.fromAnchorId)) return !1;
+				let r = A.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 = () => {
+			let e = Y.targetId;
+			if (!e) return;
+			let t = A.value.find((t) => t.id === e);
+			if (!t) return;
+			t.collapsed = !t.collapsed;
+			let n = oe(M.value, N.value);
+			if (n) {
+				let e = new Map(n.map((e) => [e.id, e]));
+				A.value = A.value.map((t) => {
+					let n = e.get(t.id);
+					return n ? {
+						...t,
+						...n
+					} : t;
+				});
+			}
+			T("update:nodes", A.value), $();
+		}, P = p({
+			visible: !1,
+			startX: 0,
+			startY: 0,
+			endX: 0,
+			endY: 0
+		}), F = m(1), I = p({
+			x: 100,
+			y: 100
+		}), L = m(!1), R = p({
+			x: 0,
+			y: 0
+		}), z = m("none"), B = p({
+			x: 0,
+			y: 0
+		}), V = p({
+			startDist: 0,
+			startScale: 1,
+			startX: 0,
+			startY: 0,
+			midX: 0,
+			midY: 0,
+			rectLeft: 0,
+			rectTop: 0
+		}), H = m(null), U = 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 = () => {
+			let e = Z.value;
+			if (!e) return;
+			let t = M.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;
+		}, Y = p({
+			type: "none",
+			x: 0,
+			y: 0,
+			targetId: null
+		}), X = p({
+			visible: !1,
+			nodeId: null,
+			x: 0,
+			y: 0,
+			name: "",
+			desc: ""
+		}), Z = m(null), xe = t(() => ({
+			position: "absolute",
+			top: `${I.y}px`,
+			left: `${I.x}px`,
+			transformOrigin: "0 0",
+			transform: `scale(${F.value})`,
+			width: "60px",
+			height: "60px"
+		})), Se = t(() => ({
+			position: "absolute",
+			left: `${Y.x}px`,
+			top: `${Y.y}px`
+		})), Ce = t(() => ({
+			position: "absolute",
+			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();
+			else if (e.touches.length === 2) {
+				z.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;
+			}
+			k(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) {
+				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;
+				}
+			}
+			k(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));
+		}, 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);
+		}, 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 (ae(j.value, G.value.id, e.id)) {
+					Q(), alert("该锚点之间已存在连线，禁止重复创建！");
+					return;
+				}
+				let t = {
+					id: O(),
+					fromAnchorId: G.value.id,
+					toAnchorId: e.id
+				};
+				j.value.push(t), T("update:lines", j.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 (!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) {
+					case "top":
+						P.endX = n.x, P.endY = n.y - 50;
+						break;
+					case "bottom":
+						P.endX = n.x, P.endY = n.y + 50;
+						break;
+					case "left":
+						P.endX = n.x - 50, P.endY = n.y;
+						break;
+					case "right": P.endX = n.x + 50, P.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 (a !== -1) {
+					let e = A.value[a].anchors.map((e) => {
+						let t = D(e, {
+							...A.value[a],
+							x: r,
+							y: i
+						});
+						return {
+							...e,
+							x: t.x,
+							y: t.y
+						};
+					});
+					A.value[a] = {
+						...A.value[a],
+						x: r,
+						y: i,
+						anchors: e
+					};
+				}
+			} else if (W.value && G.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;
+			}
+		}, 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) {
+				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 e = {
+						id: O(),
+						fromAnchorId: G.value.id,
+						toAnchorId: n.id
+					};
+					j.value.push(e), T("update:lines", j.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;
+		}, Ie = (e) => {
+			if (e.altKey) {
+				k(e);
+				let t = F.value + (e.deltaY < 0 ? .1 : -.1);
+				F.value = we(t);
+			}
+		}, Le = (e, t) => {
+			k(t), ve = !0, q = !0;
+			let n = A.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(() => {
+				q = !1;
+			}, 100));
+		}, 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 = "";
+		}, ze = (e) => {
+			T("beforeDeleteLine", e), j.value = j.value.filter((t) => t.id !== e), T("update:lines", j.value), K.value = "", $();
+		}, Be = () => {
+			Y.targetId && (Re(Y.targetId), $());
+		}, Ve = (e = {}) => {
+			T("beforeAddNode", e);
+			let t = e.width ?? 140, n = e.height ?? 200, r = e.x ?? 100, i = e.y ?? 100, a = `node_${Date.now()}_${Math.random().toString(36).slice(2, 7)}`, o = {
+				id: a,
+				name: e.name ?? "新节点",
+				desc: e.desc,
+				pic: e.pic,
+				x: r,
+				y: i,
+				width: t,
+				height: n,
+				anchors: [
+					{
+						id: `${a}-top`,
+						nodeId: a,
+						type: "top",
+						x: r + t / 2,
+						y: i
+					},
+					{
+						id: `${a}-bottom`,
+						nodeId: a,
+						type: "bottom",
+						x: r + t / 2,
+						y: i + n
+					},
+					{
+						id: `${a}-left`,
+						nodeId: a,
+						type: "left",
+						x: r,
+						y: i + n / 2
+					},
+					{
+						id: `${a}-right`,
+						nodeId: a,
+						type: "right",
+						x: r + t,
+						y: i + n / 2
+					}
+				]
+			};
+			return A.value.push(o), T("update:nodes", A.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;
+			Ve({
+				x: e,
+				y: t,
+				width: n?.width,
+				height: n?.height
+			}), $();
+		}, Ue = () => {
+			if (!Y.targetId) return;
+			let e = A.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],
+				name: X.name || "未命名节点",
+				desc: X.desc
+			}, T("update:nodes", A.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];
+				if (r >= t.x && r <= t.x + t.width && i >= t.y && i <= t.y + t.height) return t;
+			}
+			return null;
+		}, Ke = (e) => {
+			let t = Z.value?.getBoundingClientRect();
+			if (!t) return;
+			if (Ge(e.clientX, e.clientY)) {
+				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));
+			if (r.length) {
+				let e = ie(N.value, r, K.value);
+				K.value = e;
+			} else K.value = "";
+		}, qe = (e) => {
+			if (ve) {
+				ve = !1;
+				return;
+			}
+			let t = Z.value?.getBoundingClientRect();
+			if (!t) return;
+			k(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(() => {
+					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));
+			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;
+			}
+			setTimeout(() => {
+				q = !1;
+			}, 100);
+		}, $ = () => {
+			Y.type = "none", Y.x = 0, Y.y = 0, Y.targetId = null, X.visible = !1, q = !1;
+		}, Je = (e) => {
+			if (q) return;
+			let t = e.target, n = t.closest(".context-menu"), r = t.closest(".edit-panel"), i = t.closest(".toolbar");
+			!n && !r && !i && $();
+		}, Ye = (e) => {
+			e.key === "Escape" && $();
+		};
+		return u(() => {
+			document.addEventListener("click", Je), document.addEventListener("keydown", Ye);
+		}), d(() => {
+			document.removeEventListener("click", Je), document.removeEventListener("keydown", Ye);
+		}), S({
+			getNodes: () => A.value,
+			getLines: () => j.value,
+			exportData: () => ({
+				nodes: A.value,
+				lines: j.value
+			}),
+			addNode: Ve,
+			deleteNode: Re,
+			deleteLine: ze,
+			toggleAnimation: ye,
+			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"])
+		}, [
+			a("div", {
+				ref_key: "canvasContainerRef",
+				ref: Z,
+				class: c(["canvas-container", { "is-dragging": !!H.value || L.value }]),
+				onMousedown: ke,
+				onMousemove: Pe,
+				onMouseup: Fe,
+				onMouseleave: Fe,
+				onWheel: Ie,
+				onClick: Ke,
+				onContextmenu: x(qe, ["prevent"]),
+				onTouchstart: Ee,
+				onTouchmove: x(De, ["prevent"]),
+				onTouchend: Oe,
+				onTouchcancel: Oe
+			}, [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,
+				animated: J.value,
+				theme: s.theme
+			}, null, 8, [
+				"nodes",
+				"lines",
+				"scale",
+				"temp-line",
+				"selected-line-id",
+				"animated",
+				"theme"
+			]), a("div", de, [(f(!0), i(e, null, h(M.value, (e) => (f(), n(ue, {
+				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": H.value === e.id,
+				onDragStart: Ae,
+				onAnchorClick: Ne,
+				onContextMenu: Le,
+				onAnchorHover: je,
+				onAnchorLeave: Me
+			}, null, 8, [
+				"id",
+				"name",
+				"desc",
+				"x",
+				"y",
+				"width",
+				"height",
+				"pic",
+				"is-dragging"
+			]))), 128))])], 4)], 34),
+			Y.type === "node" ? (f(), i("div", {
+				key: 0,
+				class: "context-menu",
+				style: l(Se.value)
+			}, [
+				a("div", {
+					class: "context-menu-item",
+					onClick: Ue
+				}, "编辑节点"),
+				a("div", {
+					class: "context-menu-item",
+					onClick: He
+				}, "新增节点"),
+				he.value ? (f(), i("div", {
+					key: 0,
+					class: "context-menu-item",
+					onClick: _e
+				}, g(ge.value ? "显示子节点" : "折叠子节点"), 1)) : r("", !0),
+				u[4] ||= a("div", { class: "context-menu-divider" }, null, -1),
+				a("div", {
+					class: "context-menu-item danger",
+					onClick: Be
+				}, "删除节点")
+			], 4)) : r("", !0),
+			Y.type === "line" && Y.targetId ? (f(), i("div", {
+				key: 1,
+				class: "context-menu",
+				style: l(Se.value)
+			}, [a("div", {
+				class: "context-menu-item danger",
+				onClick: u[0] ||= (e) => ze(Y.targetId)
+			}, "删除连线")], 4)) : r("", !0),
+			X.visible ? (f(), i("div", {
+				key: 2,
+				class: "edit-panel",
+				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", {
+					"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", {
+					"onUpdate:modelValue": u[2] ||= (e) => X.desc = e,
+					type: "text",
+					class: "edit-panel-input",
+					placeholder: "可选：输入节点描述信息"
+				}, null, 512), [[v, X.desc]])]),
+				a("div", { class: "edit-panel-actions" }, [a("button", {
+					class: "edit-panel-btn cancel",
+					onClick: $
+				}, "取消"), a("button", {
+					class: "edit-panel-btn save",
+					onClick: We
+				}, "保存")])
+			], 4)) : r("", !0)
+		], 34));
+	}
+}), [["__scopeId", "data-v-0545e5a3"]]);
+//#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 };