jch-config-editor 0.1.12 → 0.1.13

package/dist/config-editor.es.js

@@ -1,5 +1,5 @@
 import { jsxs as h, jsx as e, Fragment as Oe } from "react/jsx-runtime";
-import Ce, { useState as Q, useRef as ue, useMemo as Xt, useCallback as V, useEffect as me } from "react";
+import Ce, { useState as ee, useRef as ue, useEffect as he, useMemo as Xt, useCallback as V } from "react";
 import { Typography as Pt, Upload as Tt, Button as Z, Collapse as Ne, List as $e, Empty as pe, Tag as ye, Image as qt, Space as be, Tooltip as Le, Modal as it, Form as w, Input as re, InputNumber as te, Switch as Je, message as Ye, Divider as Me, Select as Ie, Tabs as Rt, ConfigProvider as Bt, Layout as ht } from "antd";
 import { UploadOutlined as mt, EditOutlined as ft, DeleteOutlined as ot, UndoOutlined as Vt, RedoOutlined as Zt, CopyOutlined as _t, GroupOutlined as vt, UngroupOutlined as Jt, AlignLeftOutlined as Kt, AlignRightOutlined as Qt, VerticalAlignTopOutlined as en, VerticalAlignBottomOutlined as tn, ColumnWidthOutlined as nn, ColumnHeightOutlined as ln, SettingOutlined as rn, ExperimentOutlined as an, ZoomInOutlined as on, ZoomOutOutlined as sn, CloseOutlined as cn, SelectOutlined as dn, DragOutlined as un, EyeOutlined as hn, PlusOutlined as zt, ArrowUpOutlined as Ot, ArrowDownOutlined as At, DownloadOutlined as mn } from "@ant-design/icons";
 import { create as fn } from "zustand";
@@ -677,8 +677,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     }));
     let c = 1 / 0, n = 1 / 0, a = -1 / 0, i = -1 / 0;
     r.forEach((d) => {
-      const m = d.normalStyle.x || 0, S = d.normalStyle.y || 0, u = d.normalStyle.width || 0, k = d.normalStyle.height || 0;
-      c = Math.min(c, m), n = Math.min(n, S), a = Math.max(a, m + u), i = Math.max(i, S + k);
+      const m = d.normalStyle.x || 0, S = d.normalStyle.y || 0, u = d.normalStyle.width || 0, E = d.normalStyle.height || 0;
+      c = Math.min(c, m), n = Math.min(n, S), a = Math.max(a, m + u), i = Math.max(i, S + E);
     });
     const p = r.map((d) => ({
       ...d,
@@ -748,21 +748,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     lineDrawing: a,
     startLineDrawing: i,
     cancelLineDrawing: p
-  } = ze(), [d, m] = Q([
+  } = ze(), [d, m] = ee([
     "basic",
     "device",
     "text",
     "line"
   ]), S = (g) => {
-    const W = new FileReader();
-    return W.onload = (O) => {
+    const F = new FileReader();
+    return F.onload = (O) => {
       const X = O.target?.result;
       f({
         name: g.name.replace(".svg", ""),
         type: "IMAGE",
         src: X
       });
-    }, W.readAsDataURL(g), !1;
+    }, F.readAsDataURL(g), !1;
   }, u = {
     basic: l.filter(
       (g) => ["矩形", "圆形", "圆角矩形"].includes(g.name)
@@ -776,21 +776,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     custom: l.filter(
       (g) => g.type === "CUSTOM" && !g.config?.nodes || g.type === "IMAGE" && !["矩形", "圆形", "圆角矩形", "阀门", "泵", "罐体"].includes(g.name)
     )
-  }, k = (g, W) => {
-    g.dataTransfer.effectAllowed = "copy", g.dataTransfer.setData("application/json", JSON.stringify(W));
+  }, E = (g, F) => {
+    g.dataTransfer.effectAllowed = "copy", g.dataTransfer.setData("application/json", JSON.stringify(F));
     const O = g.currentTarget.querySelector(
       ".material-preview"
     );
     O && g.dataTransfer.setDragImage(O, 20, 20);
   }, v = (g) => {
     g.type === "LINE" && i(g);
-  }, I = (g, W = !1) => {
-    const O = W === !0, X = n === "line-draw" && O && a.material?.id === g.id;
+  }, I = (g, F = !1) => {
+    const O = F === !0, X = n === "line-draw" && O && a.material?.id === g.id;
     return /* @__PURE__ */ e(
       $e.Item,
       {
         draggable: !O,
-        onDragStart: ($) => k($, g),
+        onDragStart: ($) => E($, g),
         onClick: () => O && v(g),
         className: `
           rounded-lg transition-all duration-200 select-none
@@ -1060,11 +1060,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         value: m,
         valueSourceCode: S,
         unit: u,
-        decimals: k,
+        decimals: E,
         labelStyle: v,
         valueStyle: I,
         customStyle: g
-      } = p.content || {}, { value: W, unit: O } = S ? Pn(f, S) : { value: void 0, unit: void 0 }, $ = Tn(W !== void 0 ? W : m, k), L = u || O || "";
+      } = p.content || {}, { value: F, unit: O } = S ? Pn(f, S) : { value: void 0, unit: void 0 }, $ = Tn(F !== void 0 ? F : m, E), L = u || O || "";
       return /* @__PURE__ */ h(
         "div",
         {
@@ -1108,14 +1108,14 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         color: we = "#d9d9d9",
         dashed: ie = !1,
         lineType: A = ie ? "dashed" : "solid",
-        lineWeight: J = ne,
+        lineWeight: K = ne,
         // 起点和终点的相对坐标
         startX: G = 0,
         startY: T = 0,
         endX: s = 100,
         endY: q = 0
       } = xe.config || {}, Y = ((je) => {
-        const j = Math.max(J, 1);
+        const j = Math.max(K, 1);
         switch (je) {
           case "solid":
             return "";
@@ -1149,7 +1149,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                 x2: s,
                 y2: q,
                 stroke: "transparent",
-                strokeWidth: Math.max(J, 10),
+                strokeWidth: Math.max(K, 10),
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
                 style: { pointerEvents: "stroke", cursor: "pointer" }
@@ -1163,7 +1163,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                 x2: s,
                 y2: q,
                 stroke: M,
-                strokeWidth: J,
+                strokeWidth: K,
                 strokeDasharray: Y,
                 strokeLinecap: "round",
                 strokeLinejoin: "round",
@@ -1174,8 +1174,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         }
       ) });
     case "CUSTOM":
-      const ee = l;
-      return ee.render ? ee.render({}) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "自定义组件" }) });
+      const J = l;
+      return J.render ? J.render({}) : /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "自定义组件" }) });
     default:
       return /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ e("span", { className: "text-gray-400 text-xs", children: "未知类型" }) });
   }
@@ -1188,19 +1188,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   onUpdateNode: n,
   scale: a = 1
 }) => {
-  const { normalStyle: i, contentInfo: p, controlInfo: d } = l, { statusList: m } = p, { isClickable: S, isDraggable: u, isResizable: k } = d, v = ue(t);
-  v.current = t;
-  const [I, g] = Q(null), W = ue(null), O = ue(null), X = ue(null), $ = ue(null), [L, xe] = Q(null), [ne, we] = Q(null), ie = ue(null), A = Xt(() => {
+  const { normalStyle: i, contentInfo: p, controlInfo: d } = l, { statusList: m } = p, { isClickable: S, isDraggable: u, isResizable: E } = d, v = ue(t);
+  he(() => {
+    v.current = t;
+  }, [t]);
+  const [I, g] = ee(null), F = ue(null), O = ue(null), X = ue(null), $ = ue(null), [L, xe] = ee(null), [ne, we] = ee(null), ie = ue(null), A = Xt(() => {
     if (m.length === 0) return;
     const C = Xn(m, c);
     return C || m[0];
-  }, [m, c]), J = A?.material, G = J?.type === "LINE", T = G ? J.config : null, s = i.scale ?? 1, q = (i.width || 100) * s, b = (i.height || 100) * s, Y = V(() => {
+  }, [m, c]), K = A?.material, G = K?.type === "LINE", T = G ? K.config : null, s = i.scale ?? 1, q = (i.width || 100) * s, x = (i.height || 100) * s, Y = V(() => {
     const C = $.current?.closest('[data-canvas="true"]');
     if (!C) return a;
     const z = C.getBoundingClientRect(), R = parseFloat(C.style.width);
     return R ? z.width / R : a;
   }, [a]), M = V((C, z) => {
-    C.stopPropagation(), C.preventDefault(), W.current = {
+    C.stopPropagation(), C.preventDefault(), F.current = {
       mouseX: C.clientX,
       mouseY: C.clientY,
       startX: T?.startX || 0,
@@ -1211,31 +1213,31 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       nodeY: i.y || 0
     }, g(z);
   }, [T, i.x, i.y]);
-  me(() => {
+  he(() => {
     if (!I || !G || !T || !n) return;
     const C = (R) => {
-      const D = W.current;
+      const D = F.current;
       if (!D || !$.current) return;
-      const he = Y(), fe = (R.clientX - D.mouseX) / he, ae = (R.clientY - D.mouseY) / he;
-      let K = D.startX, oe = D.startY, se = D.endX, ce = D.endY, Xe = D.nodeX, Pe = D.nodeY;
-      I === "start" ? (K = D.startX + fe, oe = D.startY + ae, K < 0 && (Xe = D.nodeX + K, se = D.endX - K, K = 0), oe < 0 && (Pe = D.nodeY + oe, ce = D.endY - oe, oe = 0)) : (se = D.endX + fe, ce = D.endY + ae, se < 0 && (Xe = D.nodeX + se, K = D.startX - se, se = 0), ce < 0 && (Pe = D.nodeY + ce, oe = D.startY - ce, ce = 0));
-      const et = Math.max((T.lineWeight || 2) * 2, 4), tt = Math.max(K, se), nt = Math.max(oe, ce), We = Math.max(tt, et), Te = Math.max(nt, et);
+      const me = Y(), fe = (R.clientX - D.mouseX) / me, ae = (R.clientY - D.mouseY) / me;
+      let Q = D.startX, oe = D.startY, se = D.endX, ce = D.endY, Xe = D.nodeX, Pe = D.nodeY;
+      I === "start" ? (Q = D.startX + fe, oe = D.startY + ae, Q < 0 && (Xe = D.nodeX + Q, se = D.endX - Q, Q = 0), oe < 0 && (Pe = D.nodeY + oe, ce = D.endY - oe, oe = 0)) : (se = D.endX + fe, ce = D.endY + ae, se < 0 && (Xe = D.nodeX + se, Q = D.startX - se, se = 0), ce < 0 && (Pe = D.nodeY + ce, oe = D.startY - ce, ce = 0));
+      const et = Math.max((T.lineWeight || 2) * 2, 4), tt = Math.max(Q, se), nt = Math.max(oe, ce), We = Math.max(tt, et), Te = Math.max(nt, et);
       O.current = {
         nodeX: Xe,
         nodeY: Pe,
         width: We,
         height: Te,
-        startX: K,
+        startX: Q,
         startY: oe,
         endX: se,
         endY: ce
       };
       const ge = $.current;
       ge.style.left = `${Xe}px`, ge.style.top = `${Pe}px`, ge.style.width = `${We}px`, ge.style.height = `${Te}px`, ge.querySelectorAll("svg line").forEach((o) => {
-        o.setAttribute("x1", String(K)), o.setAttribute("y1", String(oe)), o.setAttribute("x2", String(se)), o.setAttribute("y2", String(ce));
+        o.setAttribute("x1", String(Q)), o.setAttribute("y1", String(oe)), o.setAttribute("x2", String(se)), o.setAttribute("y2", String(ce));
       });
       const Fe = ge.querySelector('[data-handle="start"]'), De = ge.querySelector('[data-handle="end"]');
-      Fe && (Fe.style.left = `${K - 6}px`, Fe.style.top = `${oe - 6}px`), De && (De.style.left = `${se - 6}px`, De.style.top = `${ce - 6}px`);
+      Fe && (Fe.style.left = `${Q - 6}px`, Fe.style.top = `${oe - 6}px`), De && (De.style.left = `${se - 6}px`, De.style.top = `${ce - 6}px`);
     }, z = () => {
       const R = O.current;
       R && n(l.id, {
@@ -1262,34 +1264,34 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             } : D.material
           }))
         }
-      }), g(null), W.current = null, O.current = null;
+      }), g(null), F.current = null, O.current = null;
     };
     return window.addEventListener("mousemove", C), window.addEventListener("mouseup", z), () => {
       window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", z);
     };
-  }, [I, G, T, l.id, i, p, m, n, Y]), me(() => {
+  }, [I, G, T, l.id, i, p, m, n, Y]), he(() => {
     if (!L || !n) return;
     const C = (R) => {
       if (!$.current) return;
-      const D = Y(), he = (R.clientX - L.startX) / D, fe = (R.clientY - L.startY) / D;
-      let ae = L.startWidth, K = L.startHeight, oe = L.startNodeX, se = L.startNodeY;
+      const D = Y(), me = (R.clientX - L.startX) / D, fe = (R.clientY - L.startY) / D;
+      let ae = L.startWidth, Q = L.startHeight, oe = L.startNodeX, se = L.startNodeY;
       switch (L.corner) {
         case "se":
-          ae = Math.max(20, L.startWidth + he), K = Math.max(20, L.startHeight + fe);
+          ae = Math.max(20, L.startWidth + me), Q = Math.max(20, L.startHeight + fe);
           break;
         case "sw":
-          ae = Math.max(20, L.startWidth - he), K = Math.max(20, L.startHeight + fe), oe = L.startNodeX + (L.startWidth - ae);
+          ae = Math.max(20, L.startWidth - me), Q = Math.max(20, L.startHeight + fe), oe = L.startNodeX + (L.startWidth - ae);
           break;
         case "ne":
-          ae = Math.max(20, L.startWidth + he), K = Math.max(20, L.startHeight - fe), se = L.startNodeY + (L.startHeight - K);
+          ae = Math.max(20, L.startWidth + me), Q = Math.max(20, L.startHeight - fe), se = L.startNodeY + (L.startHeight - Q);
           break;
         case "nw":
-          ae = Math.max(20, L.startWidth - he), K = Math.max(20, L.startHeight - fe), oe = L.startNodeX + (L.startWidth - ae), se = L.startNodeY + (L.startHeight - K);
+          ae = Math.max(20, L.startWidth - me), Q = Math.max(20, L.startHeight - fe), oe = L.startNodeX + (L.startWidth - ae), se = L.startNodeY + (L.startHeight - Q);
           break;
       }
-      X.current = { x: oe, y: se, width: ae, height: K };
+      X.current = { x: oe, y: se, width: ae, height: Q };
       const ce = $.current;
-      ce.style.left = `${oe}px`, ce.style.top = `${se}px`, ce.style.width = `${ae}px`, ce.style.height = `${K}px`;
+      ce.style.left = `${oe}px`, ce.style.top = `${se}px`, ce.style.width = `${ae}px`, ce.style.height = `${Q}px`;
     }, z = () => {
       const R = X.current;
       R && n(l.id, {
@@ -1306,7 +1308,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       window.removeEventListener("mousemove", C), window.removeEventListener("mouseup", z);
     };
   }, [L, n, l.id, i, Y]);
-  const ee = V((C, z) => {
+  const J = V((C, z) => {
     C.stopPropagation(), C.preventDefault(), xe({
       corner: z,
       startX: C.clientX,
@@ -1327,14 +1329,14 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       centerY: z.top + z.height / 2
     });
   }, [i.rotate]);
-  me(() => {
+  he(() => {
     if (!ne) return;
     const C = (R) => {
-      const D = R.clientX - ne.centerX, he = R.clientY - ne.centerY;
-      let ae = (Math.atan2(he, D) * (180 / Math.PI) + 90) % 360;
+      const D = R.clientX - ne.centerX, me = R.clientY - ne.centerY;
+      let ae = (Math.atan2(me, D) * (180 / Math.PI) + 90) % 360;
       if (ae < 0 && (ae += 360), ie.current = ae, $.current) {
-        const K = i.transform || "";
-        $.current.style.transform = `rotate(${ae}deg) ${K}`.trim();
+        const Q = i.transform || "";
+        $.current.style.transform = `rotate(${ae}deg) ${Q}`.trim();
       }
     }, z = () => {
       const R = ie.current ?? ne.startAngle;
@@ -1354,7 +1356,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     left: i.x || 0,
     top: i.y || 0,
     width: q,
-    height: b,
+    height: x,
     // 群组节点不显示背景和边框，只作为容器
     background: j ? "transparent" : i.background || "transparent",
     backgroundImage: j ? void 0 : i.backgroundImage ? `url(${i.backgroundImage})` : void 0,
@@ -1398,7 +1400,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             {
               className: "absolute top-0 left-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
               style: { zIndex: 9999, pointerEvents: "auto", cursor: "nw-resize", marginTop: "-6px", marginLeft: "-6px" },
-              onMouseDown: (C) => ee(C, "nw"),
+              onMouseDown: (C) => J(C, "nw"),
               title: "拖拽调整大小"
             }
           ),
@@ -1407,7 +1409,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             {
               className: "absolute top-0 right-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
               style: { zIndex: 9999, pointerEvents: "auto", cursor: "ne-resize", marginTop: "-6px", marginRight: "-6px" },
-              onMouseDown: (C) => ee(C, "ne"),
+              onMouseDown: (C) => J(C, "ne"),
               title: "拖拽调整大小"
             }
           ),
@@ -1416,7 +1418,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             {
               className: "absolute bottom-0 left-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
               style: { zIndex: 9999, pointerEvents: "auto", cursor: "sw-resize", marginBottom: "-6px", marginLeft: "-6px" },
-              onMouseDown: (C) => ee(C, "sw"),
+              onMouseDown: (C) => J(C, "sw"),
               title: "拖拽调整大小"
             }
           ),
@@ -1425,7 +1427,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             {
               className: "absolute bottom-0 right-0 w-3 h-3 bg-blue-500 border-2 border-white rounded-full",
               style: { zIndex: 9999, pointerEvents: "auto", cursor: "se-resize", marginBottom: "-6px", marginRight: "-6px" },
-              onMouseDown: (C) => ee(C, "se"),
+              onMouseDown: (C) => J(C, "se"),
               title: "拖拽调整大小"
             }
           ),
@@ -1482,7 +1484,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
           ),
           /* @__PURE__ */ e("div", { className: "absolute -top-6 left-0 bg-blue-500 text-white text-xs px-2 py-0.5 rounded whitespace-nowrap", children: l.name })
         ] }),
-        /* @__PURE__ */ e("div", { className: "w-full h-full relative", children: J ? /* @__PURE__ */ e("div", { className: "w-full h-full", children: Rn(J, c, f) }) : j ? null : (
+        /* @__PURE__ */ e("div", { className: "w-full h-full relative", children: K ? /* @__PURE__ */ e("div", { className: "w-full h-full", children: Rn(K, c, f) }) : j ? null : (
           // 只有非群组节点才显示"无状态"
           /* @__PURE__ */ e("div", { className: "w-full h-full flex items-center justify-center text-gray-300 text-xs", children: "无状态" })
         ) }),
@@ -1524,10 +1526,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   onChange: f,
   onChangeComplete: t
 }) => {
-  const [r, c] = Q(!1), [n, a] = Q(l), i = ue(null);
-  me(() => {
+  const [r, c] = ee(!1), [n, a] = ee(l), i = ue(null);
+  he(() => {
     a(l);
-  }, [l]), me(() => {
+  }, [l]), he(() => {
     const d = (m) => {
       i.current && !i.current.contains(m.target) && (c(!1), t?.({ toHexString: () => n }));
     };
@@ -1614,38 +1616,40 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     setViewport: m,
     setCanvasConfig: S,
     addNode: u,
-    selectNode: k,
+    selectNode: E,
     updateNode: v,
     removeNode: I,
     undo: g,
-    redo: W,
+    redo: F,
     setMode: O,
     startLineDrawing: X,
     endLineDrawing: $,
     cancelLineDrawing: L
-  } = ze(), [xe, ne] = Q(!1), [, we] = Q({}), ie = ue(a);
-  me(() => {
+  } = ze();
+  console.log("selectedNodeId", n);
+  const [xe, ne] = ee(!1), [, we] = ee({}), ie = ue(a);
+  he(() => {
     ie.current = a;
   }, [a]);
-  const A = ue(!1), J = ue({ x: 0, y: 0 }), G = ue({ x: 0, y: 0, newX: 0, newY: 0 }), T = ue(null), [s, q] = Q({ start: null, end: null, isDrawing: !1 }), [b, Y] = Q({ start: null, end: null }), [M, ee] = Q([]);
+  const A = ue(!1), K = ue({ x: 0, y: 0 }), G = ue({ x: 0, y: 0, newX: 0, newY: 0 }), T = ue(null), [s, q] = ee({ start: null, end: null, isDrawing: !1 }), [x, Y] = ee({ start: null, end: null }), [M, J] = ee([]);
   ue(!1);
-  const [je, j] = Q(!1), [st, Ke] = Q(
+  const [je, j] = ee(!1), [st, Ke] = ee(
     JSON.stringify(l, null, 2)
-  ), [Qe, C] = Q(!1), [z, R] = Q(!1), D = V((o, y) => {
+  ), [Qe, C] = ee(!1), [z, R] = ee(!1), D = V((o, y) => {
     if (!t.current) return { x: 0, y: 0 };
-    const N = t.current.getBoundingClientRect(), E = o - N.left, x = y - N.top, P = N.width / d.width, F = N.height / d.height, U = E / P, B = x / F;
+    const N = t.current.getBoundingClientRect(), k = o - N.left, b = y - N.top, P = N.width / d.width, W = N.height / d.height, U = k / P, B = b / W;
     return { x: Math.round(U), y: Math.round(B) };
-  }, [d.width, d.height]), he = V((o, y) => D(o, y), [D]), fe = V(
+  }, [d.width, d.height]), me = V((o, y) => D(o, y), [D]), fe = V(
     (o, y, N = !0) => {
       if (!i.material) return;
-      const E = i.material, x = E.config || {}, P = x.lineWeight || x.thickness || 2, F = Math.min(o.x, y.x), U = Math.min(o.y, y.y), B = Math.round(o.x - F), _ = Math.round(o.y - U), le = Math.round(y.x - F), de = Math.round(y.y - U), ve = Math.max(P * 2, 4), Re = Math.max(Math.abs(o.x - y.x), ve), ke = Math.max(Math.abs(o.y - y.y), ve), lt = {
-        ...E,
+      const k = i.material, b = k.config || {}, P = b.lineWeight || b.thickness || 2, W = Math.min(o.x, y.x), U = Math.min(o.y, y.y), B = Math.round(o.x - W), _ = Math.round(o.y - U), le = Math.round(y.x - W), de = Math.round(y.y - U), ve = Math.max(P * 2, 4), Re = Math.max(Math.abs(o.x - y.x), ve), ke = Math.max(Math.abs(o.y - y.y), ve), lt = {
+        ...k,
         id: H(),
         config: {
-          color: x.color,
+          color: b.color,
           lineWeight: P,
           thickness: P,
-          lineType: x.lineType,
+          lineType: b.lineType,
           startX: B,
           startY: _,
           endX: le,
@@ -1653,12 +1657,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         }
       }, Gt = {
         id: H(),
-        name: `${E.name}_${Date.now()}`,
+        name: `${k.name}_${Date.now()}`,
         type: "normal",
         normalStyle: {
           width: Re,
           height: ke,
-          x: F,
+          x: W,
           y: U,
           background: "transparent"
         },
@@ -1691,11 +1695,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       positionX: o.positionX,
       positionY: o.positionY
     });
-  }, [m]), K = V(
+  }, [m]), Q = V(
     (o) => {
-      A.current || a !== "box-select" && (o.target === t.current || o.target.dataset?.canvas === "true") && (k(null), ee([]));
+      A.current || a !== "box-select" && (o.target === t.current || o.target.dataset?.canvas === "true") && (E(null), J([]));
     },
-    [k, a]
+    [E, a]
   ), oe = V(
     (o) => {
       if (o.button === 0) {
@@ -1706,12 +1710,12 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
           return;
         }
         if (a === "box-select" && !z) {
-          const y = he(o.clientX, o.clientY);
-          Y({ start: y, end: y }), ee([]), o.preventDefault(), o.stopPropagation();
+          const y = me(o.clientX, o.clientY);
+          Y({ start: y, end: y }), J([]), o.preventDefault(), o.stopPropagation();
         }
       }
     },
-    [a, i.material, s.isDrawing, s.start, z, fe, D, he]
+    [a, i.material, s.isDrawing, s.start, z, fe, D, me]
   ), se = V(
     (o) => {
       if (!(a !== "line-draw" || !i.material) && s.isDrawing && s.start) {
@@ -1730,8 +1734,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         try {
           const y = o.dataTransfer.getData("application/json");
           if (!y) return;
-          const N = JSON.parse(y), E = D(o.clientX, o.clientY), x = E.x - 50, P = E.y - 50, F = $n(x, P, N);
-          u(F);
+          const N = JSON.parse(y), k = D(o.clientX, o.clientY), b = k.x - 50, P = k.y - 50, W = $n(b, P, N);
+          u(W), J([W.id]);
         } catch (y) {
           console.error("Failed to parse dropped material:", y);
         }
@@ -1739,61 +1743,61 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     [a, u, D]
   ), et = V(
     (o, y) => {
-      a !== "select" && a !== "box-select" || !y.controlInfo.isDraggable || (o.stopPropagation(), k(y.id), A.current = !0, J.current = { x: o.clientX, y: o.clientY }, G.current = {
+      a !== "select" && a !== "box-select" || !y.controlInfo.isDraggable || (o.stopPropagation(), E(y.id), A.current = !0, K.current = { x: o.clientX, y: o.clientY }, G.current = {
         x: y.normalStyle.x || 0,
         y: y.normalStyle.y || 0,
         newX: y.normalStyle.x || 0,
         newY: y.normalStyle.y || 0
       }, T.current = y, o.preventDefault());
     },
-    [a, k]
+    [a, E]
   );
-  me(() => {
-    const o = (x) => {
+  he(() => {
+    const o = (b) => {
       if (A.current && n && T.current) {
         if (!t.current) return;
-        const P = t.current.getBoundingClientRect(), F = P.width / d.width, U = P.height / d.height, B = x.clientX - J.current.x, _ = x.clientY - J.current.y, le = B / F, de = _ / U, ve = G.current.x + le, Re = G.current.y + de, ke = document.querySelector(
+        const P = t.current.getBoundingClientRect(), W = P.width / d.width, U = P.height / d.height, B = b.clientX - K.current.x, _ = b.clientY - K.current.y, le = B / W, de = _ / U, ve = G.current.x + le, Re = G.current.y + de, ke = document.querySelector(
           `[data-node-id="${n}"]`
         );
         ke && (ke.style.left = `${ve}px`, ke.style.top = `${Re}px`), G.current.newX = ve, G.current.newY = Re;
       }
-      if (a === "box-select" && b.start) {
-        const P = he(x.clientX, x.clientY);
-        Y((F) => ({ ...F, end: P }));
+      if (a === "box-select" && x.start) {
+        const P = me(b.clientX, b.clientY);
+        Y((W) => ({ ...W, end: P }));
       }
       if (a === "line-draw" && s.isDrawing) {
-        const P = D(x.clientX, x.clientY);
-        q((F) => ({ ...F, end: P }));
+        const P = D(b.clientX, b.clientY);
+        q((W) => ({ ...W, end: P }));
       }
     }, y = () => {
       if (A.current && n && T.current) {
-        const x = ze.getState(), P = G.current.newX ?? G.current.x, F = G.current.newY ?? G.current.y;
-        x.updateNode(n, {
+        const b = ze.getState(), P = G.current.newX ?? G.current.x, W = G.current.newY ?? G.current.y;
+        b.updateNode(n, {
           normalStyle: {
             ...T.current.normalStyle,
             x: P,
-            y: F
+            y: W
           }
         });
       }
-      if (A.current = !1, T.current = null, we({}), a === "box-select" && b.start && b.end) {
-        const x = Math.min(b.start.x, b.end.x), P = Math.max(b.start.x, b.end.x), F = Math.min(b.start.y, b.end.y), U = Math.max(b.start.y, b.end.y), B = c.filter((_) => {
+      if (A.current = !1, T.current = null, we({}), a === "box-select" && x.start && x.end) {
+        const b = Math.min(x.start.x, x.end.x), P = Math.max(x.start.x, x.end.x), W = Math.min(x.start.y, x.end.y), U = Math.max(x.start.y, x.end.y), B = c.filter((_) => {
           const le = _.normalStyle.x || 0, de = _.normalStyle.y || 0, ve = _.normalStyle.width || 0, Re = _.normalStyle.height || 0, ke = le + ve / 2, lt = de + Re / 2;
-          return ke >= x && ke <= P && lt >= F && lt <= U;
+          return ke >= b && ke <= P && lt >= W && lt <= U;
         }).map((_) => _.id);
-        ee(B), Y({ start: null, end: null });
+        J(B), Y({ start: null, end: null });
       }
-    }, N = (x) => {
-      x.key === "Escape" && a === "line-draw" && (q({ start: null, end: null, isDrawing: !1 }), L()), x.key === "Delete" && (n ? I(n) : M.length > 0 && (M.forEach((P) => I(P)), ee([]))), x.ctrlKey && x.key === "z" && (x.preventDefault(), g()), x.ctrlKey && x.key === "y" && (x.preventDefault(), W()), x.key === " " && !z && (x.preventDefault(), R(!0));
-    }, E = (x) => {
-      x.key === " " && z && R(!1);
+    }, N = (b) => {
+      b.key === "Escape" && a === "line-draw" && (q({ start: null, end: null, isDrawing: !1 }), L()), b.key === "Delete" && (n ? I(n) : M.length > 0 && (M.forEach((P) => I(P)), J([]))), b.ctrlKey && b.key === "z" && (b.preventDefault(), g()), b.ctrlKey && b.key === "y" && (b.preventDefault(), F()), b.key === " " && !z && (b.preventDefault(), R(!0));
+    }, k = (b) => {
+      b.key === " " && z && R(!1);
     };
-    return window.addEventListener("mousemove", o), window.addEventListener("mouseup", y), window.addEventListener("keydown", N), window.addEventListener("keyup", E), () => {
-      window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", y), window.removeEventListener("keydown", N), window.removeEventListener("keyup", E);
+    return window.addEventListener("mousemove", o), window.addEventListener("mouseup", y), window.addEventListener("keydown", N), window.addEventListener("keyup", k), () => {
+      window.removeEventListener("mousemove", o), window.removeEventListener("mouseup", y), window.removeEventListener("keydown", N), window.removeEventListener("keyup", k);
     };
   }, [
     n,
-    b,
+    x,
     a,
     s.isDrawing,
     M,
@@ -1803,18 +1807,18 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     I,
     g,
     z,
-    W,
+    F,
     L,
     D,
-    he,
-    ee
+    me,
+    J
   ]);
   const tt = V(() => {
-    const o = M.length > 0 ? M.map((N) => c.find((E) => E.id === N)).filter(Boolean) : n ? [c.find((N) => N.id === n)].filter(Boolean) : [];
+    const o = M.length > 0 ? M.map((N) => c.find((k) => k.id === N)).filter(Boolean) : n ? [c.find((N) => N.id === n)].filter(Boolean) : [];
     if (o.length === 0) return;
     const y = [];
     o.forEach((N) => {
-      const E = {
+      const k = {
         ...N,
         id: H(),
         name: `${N.name}_副本`,
@@ -1824,9 +1828,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
           y: (N.normalStyle.y || 0) + 20
         }
       };
-      u(E), y.push(E.id);
-    }), y.length === 1 ? k(y[0]) : ee(y);
-  }, [n, M, c, u, k, ee]), nt = V(() => {
+      u(k), y.push(k.id);
+    }), y.length === 1 ? E(y[0]) : J(y);
+  }, [n, M, c, u, E, J]), nt = V(() => {
     if (M.length < 2) return;
     const o = [];
     for (let U = 0; U < M.length; U++) {
@@ -1847,10 +1851,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       }
     }
     if (o.length < 2) return;
-    let y = 1 / 0, N = 1 / 0, E = -1 / 0, x = -1 / 0;
+    let y = 1 / 0, N = 1 / 0, k = -1 / 0, b = -1 / 0;
     o.forEach((U) => {
       const B = U.normalStyle.x || 0, _ = U.normalStyle.y || 0, le = U.normalStyle.width || 0, de = U.normalStyle.height || 0;
-      y = Math.min(y, B), N = Math.min(N, _), E = Math.max(E, B + le), x = Math.max(x, _ + de);
+      y = Math.min(y, B), N = Math.min(N, _), k = Math.max(k, B + le), b = Math.max(b, _ + de);
     });
     const P = o.map((U) => ({
       ...U,
@@ -1859,15 +1863,15 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         x: (U.normalStyle.x || 0) - y,
         y: (U.normalStyle.y || 0) - N
       }
-    })), F = {
+    })), W = {
       id: H(),
       name: `群组_${Date.now()}`,
       type: "group",
       normalStyle: {
         x: y,
         y: N,
-        width: E - y,
-        height: x - N,
+        width: k - y,
+        height: b - N,
         background: "transparent"
       },
       contentInfo: {
@@ -1882,44 +1886,44 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       },
       children: P
     };
-    M.forEach((U) => I(U)), u(F), ee([]), k(F.id);
-  }, [M, c, I, u, k]), We = V(() => {
+    M.forEach((U) => I(U)), u(W), J([]), E(W.id);
+  }, [M, c, I, u, E]), We = V(() => {
     const o = M.length > 0 ? M.map((y) => c.find((N) => N.id === y)).filter((y) => !!y && y.type === "group") : n ? [c.find((y) => y.id === n)].filter((y) => !!y && y.type === "group") : [];
     o.length !== 0 && (o.forEach((y) => {
       if (!y.children || y.children.length === 0) return;
-      const N = y.children.map((E) => ({
-        ...E,
+      const N = y.children.map((k) => ({
+        ...k,
         normalStyle: {
-          ...E.normalStyle,
-          x: (y.normalStyle.x || 0) + (E.normalStyle.x || 0),
-          y: (y.normalStyle.y || 0) + (E.normalStyle.y || 0)
+          ...k.normalStyle,
+          x: (y.normalStyle.x || 0) + (k.normalStyle.x || 0),
+          y: (y.normalStyle.y || 0) + (k.normalStyle.y || 0)
         }
       }));
-      I(y.id), N.forEach((E) => u(E));
-    }), ee([]), k(null));
-  }, [n, M, c, I, u, k, ee]), Te = V(
+      I(y.id), N.forEach((k) => u(k));
+    }), J([]), E(null));
+  }, [n, M, c, I, u, E, J]), Te = V(
     (o) => {
       if (M.length < 2) return;
       const y = M.map((B) => c.find((_) => _.id === B)).filter((B) => !!B && B.type !== "group");
       if (y.length < 2) return;
-      let N = 1 / 0, E = -1 / 0, x = 1 / 0, P = -1 / 0;
+      let N = 1 / 0, k = -1 / 0, b = 1 / 0, P = -1 / 0;
       y.forEach((B) => {
         const _ = B.normalStyle.x || 0, le = B.normalStyle.y || 0;
-        N = Math.min(N, _), E = Math.max(E, _), x = Math.min(x, le), P = Math.max(P, le);
+        N = Math.min(N, _), k = Math.max(k, _), b = Math.min(b, le), P = Math.max(P, le);
       });
-      const F = [...y].sort((B, _) => o === "horizontal" ? (B.normalStyle.x || 0) - (_.normalStyle.x || 0) : (B.normalStyle.y || 0) - (_.normalStyle.y || 0)), U = F.length;
+      const W = [...y].sort((B, _) => o === "horizontal" ? (B.normalStyle.x || 0) - (_.normalStyle.x || 0) : (B.normalStyle.y || 0) - (_.normalStyle.y || 0)), U = W.length;
       if (o === "horizontal") {
-        const _ = (E - N) / (U - 1);
-        F.forEach((le, de) => {
+        const _ = (k - N) / (U - 1);
+        W.forEach((le, de) => {
           const ve = N + _ * de;
           v(le.id, {
             normalStyle: { ...le.normalStyle, x: ve }
           });
         });
       } else {
-        const _ = (P - x) / (U - 1);
-        F.forEach((le, de) => {
-          const ve = x + _ * de;
+        const _ = (P - b) / (U - 1);
+        W.forEach((le, de) => {
+          const ve = b + _ * de;
           v(le.id, {
             normalStyle: { ...le.normalStyle, y: ve }
           });
@@ -1930,45 +1934,45 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   ), ge = V(
     (o) => {
       if (M.length < 2) return;
-      const y = ze.getState(), N = M.map((x) => c.find((P) => P.id === x)).filter((x) => !!x && x.type !== "group");
+      const y = ze.getState(), N = M.map((b) => c.find((P) => P.id === b)).filter((b) => !!b);
       if (N.length < 2) return;
-      let E = 0;
+      let k = 0;
       switch (o) {
         case "left":
-          E = Math.min(...N.map((x) => x.normalStyle.x || 0));
+          k = Math.min(...N.map((b) => b.normalStyle.x || 0));
           break;
         case "right":
-          E = Math.max(
-            ...N.map((x) => (x.normalStyle.x || 0) + (x.normalStyle.width || 0))
+          k = Math.max(
+            ...N.map((b) => (b.normalStyle.x || 0) + (b.normalStyle.width || 0))
           );
           break;
         case "top":
-          E = Math.min(...N.map((x) => x.normalStyle.y || 0));
+          k = Math.min(...N.map((b) => b.normalStyle.y || 0));
           break;
         case "bottom":
-          E = Math.max(
-            ...N.map((x) => (x.normalStyle.y || 0) + (x.normalStyle.height || 0))
+          k = Math.max(
+            ...N.map((b) => (b.normalStyle.y || 0) + (b.normalStyle.height || 0))
           );
           break;
       }
-      N.forEach((x) => {
-        let P = x.normalStyle.x || 0, F = x.normalStyle.y || 0;
+      N.forEach((b) => {
+        let P = b.normalStyle.x || 0, W = b.normalStyle.y || 0;
         switch (o) {
           case "left":
-            P = E;
+            P = k;
             break;
           case "right":
-            P = E - (x.normalStyle.width || 0);
+            P = k - (b.normalStyle.width || 0);
             break;
           case "top":
-            F = E;
+            W = k;
             break;
           case "bottom":
-            F = E - (x.normalStyle.height || 0);
+            W = k - (b.normalStyle.height || 0);
             break;
         }
-        y.updateNode(x.id, {
-          normalStyle: { ...x.normalStyle, x: P, y: F }
+        y.updateNode(b.id, {
+          normalStyle: { ...b.normalStyle, x: P, y: W }
         });
       });
     },
@@ -1987,7 +1991,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       title: "框选模式",
       active: a === "box-select",
       onClick: () => {
-        O("box-select"), ee([]);
+        O("box-select"), J([]);
       }
     },
     {
@@ -2017,7 +2021,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   ], Fe = Xt(
     () => [
       { icon: /* @__PURE__ */ e(Vt, {}), title: "撤销 (Ctrl+Z)", onClick: g },
-      { icon: /* @__PURE__ */ e(Zt, {}), title: "重做 (Ctrl+Y)", onClick: W },
+      { icon: /* @__PURE__ */ e(Zt, {}), title: "重做 (Ctrl+Y)", onClick: F },
       {
         icon: /* @__PURE__ */ e(_t, {}),
         title: "复制节点",
@@ -2088,16 +2092,16 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
         title: "删除选中 (Delete)",
         disabled: !n && M.length === 0,
         onClick: () => {
-          n ? I(n) : M.length > 0 && (M.forEach((o) => I(o)), ee([]));
+          n ? I(n) : M.length > 0 && (M.forEach((o) => I(o)), J([]));
         }
       }
     ],
     [
       g,
-      W,
+      F,
       a,
       O,
-      ee,
+      J,
       M,
       nt,
       We,
@@ -2111,7 +2115,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     ]
   ), De = V(
     (o) => {
-      (o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "ArrowUp" || o.key === "ArrowDown") && M.map((N) => c.find((E) => E.id === N)).forEach((N) => {
+      o.preventDefault(), (o.key === "ArrowLeft" || o.key === "ArrowRight" || o.key === "ArrowUp" || o.key === "ArrowDown") && M.map((N) => c.find((k) => k.id === N)).forEach((N) => {
         N && v(N.id, {
           normalStyle: {
             ...N.normalStyle,
@@ -2123,9 +2127,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     },
     [M, c, v]
   );
-  return me(() => (a === "box-select" && document.addEventListener("keydown", De), () => {
+  return he(() => (document.addEventListener("keydown", De), () => {
     document.removeEventListener("keydown", De);
-  }), [a, De]), /* @__PURE__ */ h("div", { className: "flex-1 flex flex-col h-full bg-gray-100", children: [
+  }), [De]), /* @__PURE__ */ h("div", { className: "flex-1 flex flex-col h-full bg-gray-100", children: [
     /* @__PURE__ */ h("div", { className: "h-12 bg-white border-b border-gray-200 flex items-center justify-between px-4", children: [
       /* @__PURE__ */ e(be, { children: pt.map((o) => /* @__PURE__ */ e(Le, { title: o.title, children: /* @__PURE__ */ e(
         Z,
@@ -2197,7 +2201,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                     backgroundSize: "cover",
                     backgroundPosition: "center"
                   },
-                  onClick: K,
+                  onClick: Q,
                   onMouseDown: oe,
                   onDoubleClick: se,
                   onDragOver: ce,
@@ -2208,20 +2212,20 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                       /* @__PURE__ */ e("defs", { children: /* @__PURE__ */ e("pattern", { id: "grid", width: "20", height: "20", patternUnits: "userSpaceOnUse", children: /* @__PURE__ */ e("path", { d: "M 20 0 L 0 0 0 20", fill: "none", stroke: "#f0f0f0", strokeWidth: "1" }) }) }),
                       /* @__PURE__ */ e("rect", { width: "100%", height: "100%", fill: "url(#grid)" })
                     ] }),
-                    c.map((E) => /* @__PURE__ */ e(
+                    c.map((k) => /* @__PURE__ */ e(
                       Ut,
                       {
-                        node: E,
-                        isSelected: n === E.id || M.includes(E.id),
+                        node: k,
+                        isSelected: n === k.id || M.includes(k.id),
                         data: l,
-                        onClick: () => {
-                          console.log("Node onClick:", E.id, "mode:", ie.current), ie.current !== "line-draw" && k(E.id);
+                        onClick: (b) => {
+                          console.log("Node onClick:", k.id, "mode:", ie.current), ie.current !== "line-draw" && (b.shiftKey ? (E(k.id), J([...M, k.id])) : (E(k.id), J([k.id])));
                         },
-                        onMouseDown: (x) => et(x, E),
-                        onUpdateNode: (x, P) => v(x, P),
+                        onMouseDown: (b) => et(b, k),
+                        onUpdateNode: (b, P) => v(b, P),
                         scale: p.scale
                       },
-                      `${E.id}`
+                      `${k.id}`
                     )),
                     a === "line-draw" && s.isDrawing && s.start && s.end && /* @__PURE__ */ e("svg", { className: "absolute top-0 left-0 pointer-events-none", width: d.width, height: d.height, children: /* @__PURE__ */ e(
                       "line",
@@ -2237,15 +2241,15 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                         strokeLinejoin: "round"
                       }
                     ) }),
-                    a === "box-select" && b.start && b.end && /* @__PURE__ */ e(
+                    a === "box-select" && x.start && x.end && /* @__PURE__ */ e(
                       "div",
                       {
                         className: "absolute border-2 border-blue-500 bg-blue-500/10 pointer-events-none",
                         style: {
-                          left: Math.min(b.start.x, b.end.x),
-                          top: Math.min(b.start.y, b.end.y),
-                          width: Math.abs(b.end.x - b.start.x),
-                          height: Math.abs(b.end.y - b.start.y),
+                          left: Math.min(x.start.x, x.end.x),
+                          top: Math.min(x.start.y, x.end.y),
+                          width: Math.abs(x.end.x - x.start.x),
+                          height: Math.abs(x.end.y - x.start.y),
                           zIndex: 9999
                         }
                       }
@@ -2339,9 +2343,9 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                     if (!o.type.startsWith("image/"))
                       return Ye.error("只能上传图片文件!"), !1;
                     const N = new FileReader();
-                    return N.onload = (E) => {
-                      const x = E.target?.result;
-                      S({ backgroundImage: x }), Ye.success("背景图片上传成功");
+                    return N.onload = (k) => {
+                      const b = k.target?.result;
+                      S({ backgroundImage: b }), Ye.success("背景图片上传成功");
                     }, N.readAsDataURL(o), !1;
                   },
                   children: /* @__PURE__ */ e(Z, { icon: /* @__PURE__ */ e(mt, {}), children: "上传图片" })
@@ -2385,7 +2389,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   bindCodes: t = [],
   dataOptions: r = []
 }) => {
-  const n = l.content || {}, [a, i] = Q({
+  const n = l.content || {}, [a, i] = ee({
     label: n.label || "",
     value: n.value || "",
     valueSourceCode: n.valueSourceCode || "",
@@ -2398,7 +2402,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     valueFontWeight: n.valueStyle?.fontWeight || "normal",
     valueColor: n.valueStyle?.color || "#1890ff"
   });
-  me(() => {
+  he(() => {
     i({
       label: n.label || "",
       value: n.value || "",
@@ -2413,21 +2417,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       valueColor: n.valueStyle?.color || "#1890ff"
     });
   }, [l.id]);
-  const p = (u, k) => {
-    i((v) => ({ ...v, [u]: k }));
+  const p = (u, E) => {
+    i((v) => ({ ...v, [u]: E }));
   }, d = (u) => {
-    const k = r.find((I) => I.paramsCode === u), v = k?.unit || "";
+    const E = r.find((I) => I.paramsCode === u), v = E?.unit || "";
     i((I) => ({
       ...I,
       valueSourceCode: u,
       unit: v,
-      value: String(k?.value || "")
+      value: String(E?.value || "")
     })), setTimeout(() => {
       f({
         content: {
           ...n,
           valueSourceCode: u,
-          value: String(k?.value || ""),
+          value: String(E?.value || ""),
           unit: v
         }
       });
@@ -2686,13 +2690,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   material: l,
   onSave: f
 }) => {
-  const t = l, [r, c] = Q({
+  const t = l, [r, c] = ee({
     name: l.name,
     src: t.src || "",
     backgroundColor: t.backgroundColor || "",
     fillColor: t.fillColor || ""
   });
-  me(() => {
+  he(() => {
     c({
       name: l.name,
       src: t.src || "",
@@ -2788,7 +2792,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   material: l,
   onSave: f
 }) => {
-  const t = l.config || {}, [r, c] = Q({
+  const t = l.config || {}, [r, c] = ee({
     lineWeight: t.lineWeight || t.thickness || 2,
     color: t.color || "#262626",
     lineType: t.lineType || "solid",
@@ -2797,7 +2801,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     endX: t.endX ?? 100,
     endY: t.endY ?? 0
   });
-  me(() => {
+  he(() => {
     c({
       lineWeight: t.lineWeight || t.thickness || 2,
       color: t.color || "#262626",
@@ -2985,18 +2989,18 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   materials: t
 }) => {
   const r = t.filter((m) => m.type !== "CUSTOM" || !m.config?.nodes), c = (m, S) => {
-    const u = l.children?.map((k) => k.id === m ? {
-      ...k,
+    const u = l.children?.map((E) => E.id === m ? {
+      ...E,
       contentInfo: {
-        ...k.contentInfo,
+        ...E.contentInfo,
         statusList: S
       }
-    } : k);
+    } : E);
     f(l.id, {
       children: u
     });
   }, n = (m) => {
-    const S = l.children?.find((k) => k.id === m);
+    const S = l.children?.find((E) => E.id === m);
     if (!S) return;
     const u = {
       id: H(),
@@ -3009,24 +3013,24 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   }, a = (m, S) => {
     const u = l.children?.find((v) => v.id === m);
     if (!u) return;
-    const k = u.contentInfo.statusList.filter((v) => v.id !== S);
-    c(m, k);
+    const E = u.contentInfo.statusList.filter((v) => v.id !== S);
+    c(m, E);
   }, i = (m, S, u) => {
-    const k = l.children?.find((I) => I.id === m);
-    if (!k) return;
-    const v = k.contentInfo.statusList.map((I) => I.id === S ? { ...I, ...u } : I);
+    const E = l.children?.find((I) => I.id === m);
+    if (!E) return;
+    const v = E.contentInfo.statusList.map((I) => I.id === S ? { ...I, ...u } : I);
     c(m, v);
   }, p = (m, S, u) => {
-    const k = l.children?.find((g) => g.id === m);
-    if (!k) return;
-    const v = k.contentInfo.statusList.findIndex((g) => g.id === S);
+    const E = l.children?.find((g) => g.id === m);
+    if (!E) return;
+    const v = E.contentInfo.statusList.findIndex((g) => g.id === S);
     if (v === -1) return;
-    const I = [...k.contentInfo.statusList];
+    const I = [...E.contentInfo.statusList];
     u === "up" && v > 0 ? [I[v], I[v - 1]] = [I[v - 1], I[v]] : u === "down" && v < I.length - 1 && ([I[v], I[v + 1]] = [I[v + 1], I[v]]), c(m, I);
   }, d = (m, S, u) => {
-    const k = t.find((v) => v.id === u);
-    k && i(m, S, {
-      material: { ...k, id: H() }
+    const E = t.find((v) => v.id === u);
+    E && i(m, S, {
+      material: { ...E, id: H() }
     });
   };
   return /* @__PURE__ */ h("div", { className: "space-y-4", children: [
@@ -3061,11 +3065,11 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
               }
             )
           ] }),
-          m.contentInfo.statusList.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "暂无状态，点击上方按钮添加" }) : /* @__PURE__ */ e(Ne, { ghost: !0, children: m.contentInfo.statusList.map((u, k) => /* @__PURE__ */ e(
+          m.contentInfo.statusList.length === 0 ? /* @__PURE__ */ e("div", { className: "text-center text-gray-400 py-4 bg-gray-50 rounded-lg", children: "暂无状态，点击上方按钮添加" }) : /* @__PURE__ */ e(Ne, { ghost: !0, children: m.contentInfo.statusList.map((u, E) => /* @__PURE__ */ e(
             $t,
             {
               header: /* @__PURE__ */ h("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 w-5", children: k + 1 }),
+                /* @__PURE__ */ e("span", { className: "text-xs text-gray-400 w-5", children: E + 1 }),
                 /* @__PURE__ */ e("span", { className: "font-medium", children: u.name }),
                 /* @__PURE__ */ e(ye, { color: "default", className: "text-xs", children: u.material.type })
               ] }),
@@ -3076,7 +3080,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                     type: "text",
                     size: "small",
                     icon: /* @__PURE__ */ e(Ot, {}),
-                    disabled: k === 0,
+                    disabled: E === 0,
                     onClick: (v) => {
                       v.stopPropagation(), p(m.id, u.id, "up");
                     }
@@ -3088,7 +3092,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                     type: "text",
                     size: "small",
                     icon: /* @__PURE__ */ e(At, {}),
-                    disabled: k === m.contentInfo.statusList.length - 1,
+                    disabled: E === m.contentInfo.statusList.length - 1,
                     onClick: (v) => {
                       v.stopPropagation(), p(m.id, u.id, "down");
                     }
@@ -3198,10 +3202,10 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
     materials: i,
     selectedStatusId: p,
     selectStatus: d
-  } = ze(), [m] = w.useForm(), [S, u] = Q("basic"), [k, v] = Q(!1), [I, g] = Q(null), [W, O] = Q({}), X = Ce.useMemo(() => f.find((s) => s.id === t), [f, t]), $ = X?.contentInfo.statusList || [], L = (s) => {
+  } = ze(), [m] = w.useForm(), [S, u] = ee("basic"), [E, v] = ee(!1), [I, g] = ee(null), [F, O] = ee({}), X = Ce.useMemo(() => f.find((s) => s.id === t), [f, t]), $ = X?.contentInfo.statusList || [], L = (s) => {
     t && (s.normalStyle && c(t, s.normalStyle), s.name !== void 0 && r(t, { name: s.name }), s.controlInfo && n(t, s.controlInfo));
   };
-  console.log(t, "selectedNodeId", X), me(() => {
+  console.log(t, "selectedNodeId", X), he(() => {
     X && X && (m.setFieldsValue({
       name: X.name,
       normalStyle: {
@@ -3236,21 +3240,21 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       bindCodes: []
     };
     if (I === "new") {
-      const b = [...$, q];
-      a(t, { statusList: b });
+      const x = [...$, q];
+      a(t, { statusList: x });
     } else if (I) {
-      const b = $.map((Y) => Y.id === I ? { ...Y, material: { ...s, id: H() } } : Y);
-      a(t, { statusList: b });
+      const x = $.map((Y) => Y.id === I ? { ...Y, material: { ...s, id: H() } } : Y);
+      a(t, { statusList: x });
     }
     v(!1), g(null);
   }, we = (s) => {
     if (!t || !X) return;
-    const q = X.contentInfo.statusList?.filter((b) => b.id !== s) || [];
+    const q = X.contentInfo.statusList?.filter((x) => x.id !== s) || [];
     a(t, { statusList: q }), p === s && d(null);
   }, ie = (s, q) => {
     if (!t || !X) return;
-    const b = X.contentInfo.statusList?.map((Y) => Y.id === s ? { ...Y, ...q } : Y) || [];
-    a(t, { statusList: b });
+    const x = X.contentInfo.statusList?.map((Y) => Y.id === s ? { ...Y, ...q } : Y) || [];
+    a(t, { statusList: x });
   }, A = (s) => {
     if (!t || !X) return;
     const q = {
@@ -3258,29 +3262,29 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       id: H(),
       name: `${s.name}_复制`,
       expression: "return false;"
-    }, b = [...$, q];
-    a(t, { statusList: b });
-  }, J = (s, q) => {
+    }, x = [...$, q];
+    a(t, { statusList: x });
+  }, K = (s, q) => {
     if (!t || !X) return;
-    const b = $.findIndex((M) => M.id === s);
-    if (b === -1) return;
+    const x = $.findIndex((M) => M.id === s);
+    if (x === -1) return;
     const Y = [...$];
-    q === "up" && b > 0 ? [Y[b], Y[b - 1]] = [
-      Y[b - 1],
-      Y[b]
-    ] : q === "down" && b < Y.length - 1 && ([Y[b], Y[b + 1]] = [
-      Y[b + 1],
-      Y[b]
+    q === "up" && x > 0 ? [Y[x], Y[x - 1]] = [
+      Y[x - 1],
+      Y[x]
+    ] : q === "down" && x < Y.length - 1 && ([Y[x], Y[x + 1]] = [
+      Y[x + 1],
+      Y[x]
     ]), a(t, { statusList: Y });
   }, G = (s) => {
     g(s), v(!0);
   }, T = (s, q) => {
     if (!t || !X) return;
-    const b = $.map((Y) => Y.id === s ? {
+    const x = $.map((Y) => Y.id === s ? {
       ...Y,
       material: { ...Y.material, ...q }
     } : Y);
-    a(t, { statusList: b });
+    a(t, { statusList: x });
   };
   return X ? /* @__PURE__ */ h("div", { className: "h-full flex flex-col bg-white border-l border-gray-200", children: [
     /* @__PURE__ */ h("div", { className: "p-4 border-b border-gray-200", children: [
@@ -3372,7 +3376,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
               /* @__PURE__ */ e("span", { className: "font-medium", children: s.name }),
               /* @__PURE__ */ e(ye, { color: "default", className: "text-xs", children: s.material.type })
             ] }),
-            extra: /* @__PURE__ */ h(be, { size: "small", onClick: (b) => b.stopPropagation(), children: [
+            extra: /* @__PURE__ */ h(be, { size: "small", onClick: (x) => x.stopPropagation(), children: [
               /* @__PURE__ */ e(
                 Z,
                 {
@@ -3380,8 +3384,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   size: "small",
                   icon: /* @__PURE__ */ e(Ot, {}),
                   disabled: q === 0,
-                  onClick: (b) => {
-                    b.stopPropagation(), J(s.id, "up");
+                  onClick: (x) => {
+                    x.stopPropagation(), K(s.id, "up");
                   }
                 }
               ),
@@ -3392,8 +3396,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   size: "small",
                   icon: /* @__PURE__ */ e(At, {}),
                   disabled: q === $.length - 1,
-                  onClick: (b) => {
-                    b.stopPropagation(), J(s.id, "down");
+                  onClick: (x) => {
+                    x.stopPropagation(), K(s.id, "down");
                   }
                 }
               ),
@@ -3403,8 +3407,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   type: "text",
                   size: "small",
                   icon: /* @__PURE__ */ e(_t, {}),
-                  onClick: (b) => {
-                    b.stopPropagation(), A(s);
+                  onClick: (x) => {
+                    x.stopPropagation(), A(s);
                   }
                 }
               ),
@@ -3415,8 +3419,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   size: "small",
                   danger: !0,
                   icon: /* @__PURE__ */ e(ot, {}),
-                  onClick: (b) => {
-                    b.stopPropagation(), we(s.id);
+                  onClick: (x) => {
+                    x.stopPropagation(), we(s.id);
                   }
                 }
               )
@@ -3426,7 +3430,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                 re,
                 {
                   value: s.name,
-                  onChange: (b) => ie(s.id, { name: b.target.value }),
+                  onChange: (x) => ie(s.id, { name: x.target.value }),
                   placeholder: "输入状态名称"
                 }
               ) }),
@@ -3438,13 +3442,13 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   children: /* @__PURE__ */ e(
                     qn,
                     {
-                      value: W[s.id] ?? s.expression,
-                      onChange: (b) => O((Y) => ({
+                      value: F[s.id] ?? s.expression,
+                      onChange: (x) => O((Y) => ({
                         ...Y,
-                        [s.id]: b.target.value
+                        [s.id]: x.target.value
                       })),
-                      onBlur: (b) => {
-                        ie(s.id, { expression: b.target.value }), O((Y) => {
+                      onBlur: (x) => {
+                        ie(s.id, { expression: x.target.value }), O((Y) => {
                           const M = { ...Y };
                           return delete M[s.id], M;
                         });
@@ -3460,7 +3464,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                 {
                   mode: "tags",
                   value: s.bindCodes || [],
-                  onChange: (b) => ie(s.id, { bindCodes: b }),
+                  onChange: (x) => ie(s.id, { bindCodes: x }),
                   placeholder: "输入数据源 code",
                   tokenSeparators: [",", " "]
                 }
@@ -3489,7 +3493,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   Ht,
                   {
                     material: s.material,
-                    onSave: (b) => T(s.id, b),
+                    onSave: (x) => T(s.id, x),
                     bindCodes: s.bindCodes || [],
                     dataOptions: l || []
                   }
@@ -3562,7 +3566,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       it,
       {
         title: "选择物料",
-        open: k,
+        open: E,
         onCancel: () => {
           v(!1), g(null);
         },
@@ -3642,7 +3646,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
   showPropertyPanel: p = !0,
   customMaterials: d
 }) => {
-  const [m, S] = Ce.useState(!1), [u, k] = Ce.useState(""), [v, I] = Ce.useState([
+  const [m, S] = Ce.useState(!1), [u, E] = Ce.useState(""), [v, I] = Ce.useState([
     {
       paramsCode: "001",
       paramsName: "通频速度有效值",
@@ -3655,49 +3659,49 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
       value: 1.5,
       paramsUnit: "m/s²"
     }
-  ]), { exportScheme: g, importScheme: W, nodes: O, materials: X, addMaterial: $ } = ze();
+  ]), { exportScheme: g, importScheme: F, nodes: O, materials: X, addMaterial: $ } = ze();
   Ce.useRef(null);
   const L = Ce.useRef(!1);
-  me(() => {
-    L.current || (L.current = !0, X.length === 0 && Dn.forEach((A) => $(A)), d && d.length > 0 && d.forEach((A) => $(A)), l && W(l));
-  }, []), me(() => {
+  he(() => {
+    L.current || (L.current = !0, X.length === 0 && Dn.forEach((A) => $(A)), d && d.length > 0 && d.forEach((A) => $(A)), l && F(l));
+  }, []), he(() => {
     if (f) {
       const A = g();
       f(A);
     }
   }, [O, f]);
   const xe = V(() => {
-    const A = g(), J = JSON.stringify(A, null, 2), G = "data:application/json;charset=utf-8," + encodeURIComponent(J), T = `scheme_${Date.now()}.json`, s = document.createElement("a");
+    const A = g(), K = JSON.stringify(A, null, 2), G = "data:application/json;charset=utf-8," + encodeURIComponent(K), T = `scheme_${Date.now()}.json`, s = document.createElement("a");
     s.setAttribute("href", G), s.setAttribute("download", T), s.click(), Ye.success("导出成功！");
   }, [g]), ne = V(() => {
     try {
       const A = JSON.parse(u);
-      W(A), S(!1), k(""), Ye.success("导入成功！");
+      F(A), S(!1), E(""), Ye.success("导入成功！");
     } catch {
       Ye.error("JSON 格式错误，请检查输入");
     }
-  }, [u, W]), we = V(
+  }, [u, F]), we = V(
     (A) => {
-      const J = new FileReader();
-      return J.onload = (G) => {
+      const K = new FileReader();
+      return K.onload = (G) => {
         try {
           const T = G.target?.result, s = JSON.parse(T);
-          W(s), Ye.success("导入成功！"), S(!1);
+          F(s), Ye.success("导入成功！"), S(!1);
         } catch {
           Ye.error("文件格式错误");
         }
-      }, J.readAsText(A), !1;
+      }, K.readAsText(A), !1;
     },
-    [W]
+    [F]
   ), ie = V(() => g(), [g]);
   return Ce.useImperativeHandle(
     Ce.useRef?.(),
     () => ({
       getScheme: ie,
       exportScheme: g,
-      importScheme: W
+      importScheme: F
     }),
-    [ie, g, W]
+    [ie, g, F]
   ), /* @__PURE__ */ e(Bt, { locale: kn, children: /* @__PURE__ */ e("div", { className: Zn.configEditor, style: n, children: /* @__PURE__ */ h(
     ht,
     {
@@ -3738,7 +3742,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
             open: m,
             onOk: ne,
             onCancel: () => {
-              S(!1), k("");
+              S(!1), E("");
             },
             width: 600,
             children: /* @__PURE__ */ h("div", { className: "space-y-4", children: [
@@ -3750,8 +3754,8 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                     type: "file",
                     accept: ".json",
                     onChange: (A) => {
-                      const J = A.target.files?.[0];
-                      J && we(J);
+                      const K = A.target.files?.[0];
+                      K && we(K);
                     },
                     className: `block w-full text-sm text-gray-500
                   file:mr-4 file:py-2 file:px-4
@@ -3769,7 +3773,7 @@ const kn = /* @__PURE__ */ vn(In), En = (l) => (f, t, r) => (r.setState = (c, n,
                   "textarea",
                   {
                     value: u,
-                    onChange: (A) => k(A.target.value),
+                    onChange: (A) => E(A.target.value),
                     placeholder: "粘贴 JSON 内容...",
                     className: "w-full h-48 p-3 border border-gray-300 rounded-lg font-mono text-sm resize-none focus:outline-none focus:ring-2 focus:ring-blue-500"
                   }