@8btc/whiteboard 0.0.17 → 0.0.19-beta.0

package/dist/index.js

@@ -1,538 +1,422 @@
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
+var de = Object.defineProperty;
+var Ht = (o) => {
+  throw TypeError(o);
 };
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
-var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
-var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
-var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _core, _stage, _viewport, _handleWheel, _handlePointerDown, _handlePointerMove, _handlePointerUp, _handleDragStart, _handleDragMove, _handleDragEnd, _CanvasStage_instances, setupEventListeners_fn, _core2, _transformer, _handleTransformStart, _handleTransform, _handleTransformEnd, _handleDragStart2, _handleDragMove2, _handleDragEnd2, _CanvasTransformer_instances, setupEventListeners_fn2, _toolTypeChangeHandler, _RectNode_instances, setupEventHandlers_fn, _ImageNode_instances, loadImage_fn, _toolTypeChangeHandler2, setupEventHandlers_fn2, syncImageMarkers_fn, syncImageMarkersToState_fn, _rect, _markerGroup, _circle, _text, _handleViewportChange, _handleNodesSelected, _ImageMarkerNode_instances, changeVisulStyle_fn, setupEventHandlers_fn3, _canvasStage, _mainLayer, _canvasTransformer, _draftNode, _container, _handleKeyDown, _CanvasCore_instances, setupKeyboardEvents_fn;
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { useState, useEffect, useRef } from "react";
-import Konva from "konva";
-import mitt from "mitt";
-import { v4 } from "uuid";
-import { Slot } from "@radix-ui/react-slot";
-import { cva } from "class-variance-authority";
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-import { Minus, Plus, Undo2, Redo2 } from "lucide-react";
-class CanvasStage {
-  constructor(core, config) {
-    __privateAdd(this, _CanvasStage_instances);
-    __privateAdd(this, _core);
-    __privateAdd(this, _stage);
-    __privateAdd(this, _viewport, { x: 0, y: 0, scale: 1 });
+var le = (o, s, t) => s in o ? de(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var rt = (o, s, t) => le(o, typeof s != "symbol" ? s + "" : s, t), Dt = (o, s, t) => s.has(o) || Ht("Cannot " + t);
+var e = (o, s, t) => (Dt(o, s, "read from private field"), t ? t.call(o) : s.get(o)), d = (o, s, t) => s.has(o) ? Ht("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(o) : s.set(o, t), l = (o, s, t, i) => (Dt(o, s, "write to private field"), i ? i.call(o, t) : s.set(o, t), t), C = (o, s, t) => (Dt(o, s, "access private method"), t);
+import { jsxs as st, jsx as S, Fragment as ge } from "react/jsx-runtime";
+import { useState as at, useEffect as Pt, useRef as me } from "react";
+import D from "konva";
+import ue from "mitt";
+import { R as N, N as U, I as Q } from "./const-Das6lRi-.js";
+import { v4 as ut } from "uuid";
+import { Slot as fe } from "@radix-ui/react-slot";
+import { cva as pe } from "class-variance-authority";
+import { clsx as ye } from "clsx";
+import { twMerge as xe } from "tailwind-merge";
+import { Minus as we, Plus as ve, Undo2 as Ne, Redo2 as Se } from "lucide-react";
+var y, u, W, ft, pt, yt, xt, wt, vt, Nt, St, Kt;
+class _e {
+  constructor(s, t) {
+    d(this, St);
+    d(this, y);
+    d(this, u);
+    d(this, W, { x: 0, y: 0, scale: 1 });
     /**
      * 处理滚轮缩放和平移
      */
-    __privateAdd(this, _handleWheel, (e) => {
-      e.evt.preventDefault();
-      const stage = __privateGet(this, _stage);
-      const pointer = stage.getPointerPosition();
-      if (!pointer) return;
-      if (e.evt.ctrlKey) {
-        const oldScale = __privateGet(this, _viewport).scale;
-        const mousePointTo = {
-          x: (pointer.x - __privateGet(this, _viewport).x) / oldScale,
-          y: (pointer.y - __privateGet(this, _viewport).y) / oldScale
-        };
-        const scaleBy = 1.01;
-        const direction = e.evt.deltaY > 0 ? -1 : 1;
-        const steps = Math.min(Math.abs(e.evt.deltaY), 10);
-        let newScale = oldScale;
-        for (let i = 0; i < steps; i++) {
-          newScale = direction > 0 ? newScale * scaleBy : newScale / scaleBy;
+    d(this, ft, (s) => {
+      s.evt.preventDefault();
+      const i = e(this, u).getPointerPosition();
+      if (i)
+        if (s.evt.ctrlKey) {
+          const n = e(this, W).scale, r = {
+            x: (i.x - e(this, W).x) / n,
+            y: (i.y - e(this, W).y) / n
+          }, a = 1.01, h = s.evt.deltaY > 0 ? -1 : 1, c = Math.min(Math.abs(s.evt.deltaY), 10);
+          let g = n;
+          for (let f = 0; f < c; f++)
+            g = h > 0 ? g * a : g / a;
+          const m = Math.max(0.1, Math.min(5, g)), p = {
+            x: i.x - r.x * m,
+            y: i.y - r.y * m
+          };
+          e(this, y)._updateViewport({ x: p.x, y: p.y, scale: m });
+        } else {
+          const n = s.evt.shiftKey ? s.evt.deltaY : s.evt.deltaX, r = s.evt.shiftKey ? 0 : s.evt.deltaY;
+          e(this, y)._updateViewport({
+            x: e(this, W).x - n,
+            y: e(this, W).y - r
+          });
         }
-        const scale = Math.max(0.1, Math.min(5, newScale));
-        const newPos = {
-          x: pointer.x - mousePointTo.x * scale,
-          y: pointer.y - mousePointTo.y * scale
-        };
-        __privateGet(this, _core).updateViewport({ x: newPos.x, y: newPos.y, scale });
-      } else {
-        const deltaX = e.evt.shiftKey ? e.evt.deltaY : e.evt.deltaX;
-        const deltaY = e.evt.shiftKey ? 0 : e.evt.deltaY;
-        __privateGet(this, _core).updateViewport({
-          x: __privateGet(this, _viewport).x - deltaX,
-          y: __privateGet(this, _viewport).y - deltaY
-        });
-      }
     });
-    __privateAdd(this, _handlePointerDown, (event) => {
-      const toolType = __privateGet(this, _core).getState().toolType;
-      if (event.evt.button !== 0 || toolType === "hand") {
+    d(this, pt, (s) => {
+      const t = e(this, y).getState().toolType;
+      if (s.evt.button !== 0 || t === "hand")
         return;
-      }
-      const clickedOnEmpty = event.target === __privateGet(this, _stage);
-      const pointerPos = __privateGet(this, _stage).getRelativePointerPosition();
-      if (toolType === "select" && !clickedOnEmpty) {
-        const nodeId = event.target.id();
-        if (nodeId) {
-          __privateGet(this, _core).selectNode(nodeId, event.evt.shiftKey);
+      const i = e(this, u).getRelativePointerPosition();
+      if (e(this, y)._setDrawingPosition(i || { x: 0, y: 0 }), t === "select")
+        if (s.target === e(this, u)) {
+          e(this, y)._selectNodes(), e(this, y)._createSelectRect();
+          return;
+        } else {
+          const r = s.target.id();
+          r && e(this, y)._selectNodes([r], s.evt.shiftKey);
+          return;
         }
-        return;
-      }
-      if (toolType === "rectangle" && pointerPos) {
-        __privateGet(this, _core).createDraftNode(toolType, pointerPos);
-      }
-      if (toolType === "image-marker" && pointerPos) {
-        const imageShape = __privateGet(this, _core).findImageAtPosition(pointerPos);
-        if (imageShape) {
-          const width = imageShape.width();
-          const height = imageShape.height();
-          if (width && height) {
-            const imageBounds = {
-              x: imageShape.x(),
-              y: imageShape.y(),
-              width,
-              height
+      if (t === "rectangle" && i && e(this, y)._createDraftNode(t), t === "image-marker" && i) {
+        const n = e(this, y)._findImageAtPosition(i);
+        if (n) {
+          const r = n.width(), a = n.height();
+          if (r && a) {
+            const h = {
+              x: n.x(),
+              y: n.y(),
+              width: r,
+              height: a
             };
-            __privateGet(this, _core).createDraftNode(toolType, pointerPos, {
-              parent: imageShape.id(),
-              bounds: imageBounds,
-              startPosition: pointerPos
+            e(this, y)._createDraftNode(t, {
+              $_parentId: n.id(),
+              $_bounds: h
             });
           }
         }
       }
-      __privateGet(this, _core).selectNode();
+      e(this, y)._selectNodes();
     });
-    __privateAdd(this, _handlePointerMove, () => {
-      const toolType = __privateGet(this, _core).getState().toolType;
-      if (toolType === "hand") {
+    d(this, yt, () => {
+      const s = e(this, y).getState().toolType;
+      if (s === "hand")
         return;
-      }
-      const pointerPos = __privateGet(this, _stage).getRelativePointerPosition();
-      if ((toolType === "rectangle" || toolType === "image-marker") && pointerPos) {
-        __privateGet(this, _core).updateDraftNode(pointerPos);
-      }
-    });
-    __privateAdd(this, _handlePointerUp, () => {
-      const toolType = __privateGet(this, _core).getState().toolType;
-      if (toolType === "hand") {
+      const t = e(this, u).getRelativePointerPosition();
+      if (e(this, y)._updateDrawingPosition(t || { x: 0, y: 0 }), s === "select") {
+        e(this, y)._updateSelectRect();
         return;
       }
-      if (toolType === "rectangle" || toolType === "image-marker") {
-        __privateGet(this, _core).finalizeDraftNode();
-      }
+      (s === "rectangle" || s === "image-marker") && e(this, y)._updateDraftNode();
     });
-    __privateAdd(this, _handleDragStart, (event) => {
-      if (event.target !== __privateGet(this, _stage)) {
-        return;
-      }
-      const toolType = __privateGet(this, _core).getState().toolType;
-      if (toolType === "hand") {
-        this.setCursor("grabbing");
-      } else if (toolType === "select") {
-        this.setCursor("all-scroll");
+    d(this, xt, () => {
+      const s = e(this, y).getState().toolType;
+      if (s !== "hand") {
+        if (s === "select") {
+          e(this, y)._finalizeSelectRect();
+          return;
+        }
+        (s === "rectangle" || s === "image-marker") && e(this, y)._finalizeDraftNode();
       }
     });
-    __privateAdd(this, _handleDragMove, (event) => {
-      if (event.target !== __privateGet(this, _stage)) {
+    d(this, wt, (s) => {
+      if (s.target !== e(this, u))
         return;
-      }
-      __privateGet(this, _core).updateViewport({
-        x: __privateGet(this, _stage).x(),
-        y: __privateGet(this, _stage).y()
-      });
+      const t = e(this, y).getState().toolType;
+      t === "hand" ? this.setCursor("grabbing") : t === "select" && this.setCursor("all-scroll");
     });
-    __privateAdd(this, _handleDragEnd, (event) => {
-      if (event.target !== __privateGet(this, _stage)) {
-        return;
-      }
-      __privateGet(this, _core).updateViewport({
-        x: __privateGet(this, _stage).x(),
-        y: __privateGet(this, _stage).y()
+    d(this, vt, (s) => {
+      s.target === e(this, u) && e(this, y)._updateViewport({
+        x: e(this, u).x(),
+        y: e(this, u).y()
       });
-      this.resetCursor();
     });
-    __privateSet(this, _core, core);
-    __privateSet(this, _stage, new Konva.Stage({
-      container: config.container,
-      width: config.width,
-      height: config.height,
+    d(this, Nt, (s) => {
+      s.target === e(this, u) && (e(this, y)._updateViewport({
+        x: e(this, u).x(),
+        y: e(this, u).y()
+      }), this.resetCursor());
+    });
+    l(this, y, s), l(this, u, new D.Stage({
+      container: t.container,
+      width: t.width,
+      height: t.height,
       x: 0,
       y: 0,
       scaleX: 1,
       scaleY: 1,
-      draggable: config.draggable ?? false,
-      className: config.className
-    }));
-    __privateMethod(this, _CanvasStage_instances, setupEventListeners_fn).call(this);
+      draggable: t.draggable ?? !1,
+      className: t.className
+    })), C(this, St, Kt).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
    */
   getStage() {
-    return __privateGet(this, _stage);
+    return e(this, u);
   }
   /**
    * 获取当前视口状态
    */
   getViewport() {
-    return { ...__privateGet(this, _viewport) };
+    return { ...e(this, W) };
   }
   /**
    * 设置视口（包括位置、缩放和尺寸）
    */
-  setViewport(viewport) {
-    const newViewport = { ...__privateGet(this, _viewport), ...viewport };
-    __privateSet(this, _viewport, newViewport);
-    if (viewport.x !== void 0) {
-      __privateGet(this, _stage).x(viewport.x);
-    }
-    if (viewport.y !== void 0) {
-      __privateGet(this, _stage).y(viewport.y);
-    }
-    if (viewport.scale !== void 0) {
-      __privateGet(this, _stage).scaleX(viewport.scale);
-      __privateGet(this, _stage).scaleY(viewport.scale);
-    }
-    if (viewport.width !== void 0) {
-      __privateGet(this, _stage).width(viewport.width);
-    }
-    if (viewport.height !== void 0) {
-      __privateGet(this, _stage).height(viewport.height);
-    }
+  setViewport(s) {
+    const t = { ...e(this, W), ...s };
+    l(this, W, t), s.x !== void 0 && e(this, u).x(s.x), s.y !== void 0 && e(this, u).y(s.y), s.scale !== void 0 && (e(this, u).scaleX(s.scale), e(this, u).scaleY(s.scale)), s.width !== void 0 && e(this, u).width(s.width), s.height !== void 0 && e(this, u).height(s.height);
   }
   /**
    * 设置是否可拖拽
    */
-  setDraggable(draggable) {
-    __privateGet(this, _stage).draggable(draggable);
+  setDraggable(s) {
+    e(this, u).draggable(s);
   }
   /**
    * 设置光标样式
    */
-  setCursor(cursor) {
-    const container = __privateGet(this, _stage).container();
-    container.style.cursor = cursor;
+  setCursor(s) {
+    const t = e(this, u).container();
+    t.style.cursor = s;
   }
   /**
    * 重置光标样式
    */
   resetCursor() {
-    const container = __privateGet(this, _stage).container();
-    const toolType = __privateGet(this, _core).getState().toolType;
-    if (toolType === "hand") {
-      container.style.cursor = "grab";
+    const s = e(this, u).container();
+    if (e(this, y).getState().toolType === "hand") {
+      s.style.cursor = "grab";
       return;
     }
-    container.style.cursor = "default";
+    s.style.cursor = "default";
   }
   /**
    * 销毁 Stage
    */
   destroy() {
-    __privateGet(this, _stage).destroy();
+    e(this, u).destroy();
   }
 }
-_core = new WeakMap();
-_stage = new WeakMap();
-_viewport = new WeakMap();
-_handleWheel = new WeakMap();
-_handlePointerDown = new WeakMap();
-_handlePointerMove = new WeakMap();
-_handlePointerUp = new WeakMap();
-_handleDragStart = new WeakMap();
-_handleDragMove = new WeakMap();
-_handleDragEnd = new WeakMap();
-_CanvasStage_instances = new WeakSet();
-/**
+y = new WeakMap(), u = new WeakMap(), W = new WeakMap(), ft = new WeakMap(), pt = new WeakMap(), yt = new WeakMap(), xt = new WeakMap(), wt = new WeakMap(), vt = new WeakMap(), Nt = new WeakMap(), St = new WeakSet(), /**
  * 设置事件监听器
  */
-setupEventListeners_fn = function() {
-  __privateGet(this, _stage).on("wheel", __privateGet(this, _handleWheel));
-  __privateGet(this, _stage).on("pointerdown", __privateGet(this, _handlePointerDown));
-  __privateGet(this, _stage).on("pointermove", __privateGet(this, _handlePointerMove));
-  __privateGet(this, _stage).on("pointerup", __privateGet(this, _handlePointerUp));
-  __privateGet(this, _stage).on("dragstart", __privateGet(this, _handleDragStart));
-  __privateGet(this, _stage).on("dragmove", __privateGet(this, _handleDragMove));
-  __privateGet(this, _stage).on("dragend", __privateGet(this, _handleDragEnd));
+Kt = function() {
+  e(this, u).on("wheel", e(this, ft)), e(this, u).on("pointerdown", e(this, pt)), e(this, u).on("pointermove", e(this, yt)), e(this, u).on("pointerup", e(this, xt)), e(this, u).on("dragstart", e(this, wt)), e(this, u).on("dragmove", e(this, vt)), e(this, u).on("dragend", e(this, Nt));
 };
-class CanvasTransformer {
-  constructor(core, config) {
-    __privateAdd(this, _CanvasTransformer_instances);
-    __privateAdd(this, _core2);
-    __privateAdd(this, _transformer);
+var ht, v, _t, bt, Mt, Ct, It, kt, Et, jt;
+class be {
+  constructor(s, t) {
+    d(this, Et);
+    d(this, ht);
+    d(this, v);
     /**
      * 处理 transformstart 事件
      */
-    __privateAdd(this, _handleTransformStart, () => {
+    d(this, _t, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transform 事件
      */
-    __privateAdd(this, _handleTransform, () => {
+    d(this, bt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transformend 事件
      */
-    __privateAdd(this, _handleTransformEnd, () => {
+    d(this, Mt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragstart 事件
      */
-    __privateAdd(this, _handleDragStart2, () => {
+    d(this, Ct, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragmove 事件
      */
-    __privateAdd(this, _handleDragMove2, () => {
+    d(this, It, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragend 事件
      */
-    __privateAdd(this, _handleDragEnd2, () => {
+    d(this, kt, () => {
       this.emitPositionChange();
     });
-    __privateSet(this, _core2, core);
-    __privateSet(this, _transformer, new Konva.Transformer({
-      rotateEnabled: config?.rotateEnabled ?? true,
-      ignoreStroke: config?.ignoreStroke ?? true,
-      anchorSize: config?.anchorSize ?? 8,
-      borderDash: config?.borderDash ?? [4, 4],
-      anchorCornerRadius: config?.anchorCornerRadius ?? 4,
-      padding: config?.padding ?? 6
-    }));
-    __privateMethod(this, _CanvasTransformer_instances, setupEventListeners_fn2).call(this);
+    l(this, ht, s), l(this, v, new D.Transformer({
+      rotateEnabled: t?.rotateEnabled ?? !0,
+      ignoreStroke: t?.ignoreStroke ?? !0,
+      anchorSize: t?.anchorSize ?? 8,
+      borderDash: t?.borderDash ?? [4, 4],
+      anchorCornerRadius: t?.anchorCornerRadius ?? 4,
+      padding: t?.padding ?? 6,
+      shouldOverdrawWholeArea: !0
+    })), C(this, Et, jt).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return __privateGet(this, _transformer);
+    return e(this, v);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    const nodes = __privateGet(this, _transformer).nodes();
-    if (nodes.length === 0) {
+    if (e(this, v).nodes().length === 0)
       return null;
-    }
-    const box = __privateGet(this, _transformer).getClientRect();
+    const t = e(this, v).getClientRect();
     return {
-      x: box.x,
-      y: box.y,
-      width: box.width,
-      height: box.height,
-      rotation: __privateGet(this, _transformer).rotation()
+      x: t.x,
+      y: t.y,
+      width: t.width,
+      height: t.height,
+      rotation: e(this, v).rotation()
     };
   }
   /**
    * 设置要变换的节点
    */
-  setNodes(nodes) {
-    if (nodes.length === 0) {
+  setNodes(s) {
+    if (s.length === 0) {
       this.clearNodes();
       return;
     }
-    __privateGet(this, _transformer).nodes(nodes);
-    __privateGet(this, _transformer).moveToTop();
-    this.emitPositionChange();
+    e(this, v).nodes(s), e(this, v).moveToTop(), this.emitPositionChange();
   }
   /**
    * 获取当前变换的节点
    */
   getNodes() {
-    return __privateGet(this, _transformer).nodes();
+    return e(this, v).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    __privateGet(this, _transformer).nodes([]);
-    __privateGet(this, _transformer).moveToBottom();
-    this.emitPositionChange();
+    e(this, v).nodes([]), e(this, v).moveToBottom(), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
    */
   emitPositionChange() {
-    const position = this.getPosition();
-    __privateGet(this, _core2).emitEvent("transformer:positionChange", position);
+    const s = this.getPosition();
+    e(this, ht)._emit("transformer:positionChange", s);
   }
   /**
    * 销毁 Transformer
    */
   destroy() {
-    __privateGet(this, _transformer).destroy();
+    e(this, v).destroy();
   }
 }
-_core2 = new WeakMap();
-_transformer = new WeakMap();
-_handleTransformStart = new WeakMap();
-_handleTransform = new WeakMap();
-_handleTransformEnd = new WeakMap();
-_handleDragStart2 = new WeakMap();
-_handleDragMove2 = new WeakMap();
-_handleDragEnd2 = new WeakMap();
-_CanvasTransformer_instances = new WeakSet();
-/**
+ht = new WeakMap(), v = new WeakMap(), _t = new WeakMap(), bt = new WeakMap(), Mt = new WeakMap(), Ct = new WeakMap(), It = new WeakMap(), kt = new WeakMap(), Et = new WeakSet(), /**
  * 设置事件监听器
  */
-setupEventListeners_fn2 = function() {
-  __privateGet(this, _transformer).on("transformstart", __privateGet(this, _handleTransformStart));
-  __privateGet(this, _transformer).on("transform", __privateGet(this, _handleTransform));
-  __privateGet(this, _transformer).on("transformend", __privateGet(this, _handleTransformEnd));
-  __privateGet(this, _transformer).on("dragstart", __privateGet(this, _handleDragStart2));
-  __privateGet(this, _transformer).on("dragmove", __privateGet(this, _handleDragMove2));
-  __privateGet(this, _transformer).on("dragend", __privateGet(this, _handleDragEnd2));
+jt = function() {
+  e(this, v).on("transformstart", e(this, _t)), e(this, v).on("transform", e(this, bt)), e(this, v).on("transformend", e(this, Mt)), e(this, v).on("dragstart", e(this, Ct)), e(this, v).on("dragmove", e(this, It)), e(this, v).on("dragend", e(this, kt));
 };
-class CanvasState {
-  constructor(initialState) {
-    __publicField(this, "_past", []);
-    __publicField(this, "_present");
-    __publicField(this, "_future", []);
-    __publicField(this, "_emitter");
-    this._present = initialState;
-    this._emitter = mitt();
+var E, $, z, T;
+class Me {
+  // todo: 优化 selectedNodeIds 的存储和查询性能
+  // private _selectedNodeIds: Set<string> = new Set();
+  constructor(s) {
+    d(this, E, []);
+    d(this, $);
+    d(this, z, []);
+    d(this, T);
+    l(this, $, s), l(this, T, ue());
   }
   /**
    * 获取当前状态
    */
   getState() {
-    return { ...this._present };
+    return { ...e(this, $) };
   }
   /**
    * 获取完整历史状态
    */
   getHistory() {
     return {
-      past: [...this._past],
-      present: { ...this._present },
-      future: [...this._future]
+      past: [...e(this, E)],
+      present: { ...e(this, $) },
+      future: [...e(this, z)]
     };
   }
   /**
    * 是否可以撤销
    */
   canUndo() {
-    return this._past.length > 0;
+    return e(this, E).length > 0;
   }
   /**
    * 是否可以重做
    */
   canRedo() {
-    return this._future.length > 0;
+    return e(this, z).length > 0;
   }
   /**
    * 订阅状态事件
    */
-  on(event, handler) {
-    this._emitter.on(event, handler);
+  on(s, t) {
+    e(this, T).on(s, t);
   }
   /**
    * 取消订阅状态事件
    */
-  off(event, handler) {
-    this._emitter.off(event, handler);
+  off(s, t) {
+    e(this, T).off(s, t);
   }
   /**
+   * @internal
    * 发送事件
    */
-  emit(event, data) {
-    this._emitter.emit(event, data);
+  _emit(s, t) {
+    e(this, T).emit(s, t);
   }
   /**
    * 撤销操作
    */
   undo() {
-    if (this._past.length === 0) return;
-    const previous = this._past[this._past.length - 1];
-    const newPast = this._past.slice(0, this._past.length - 1);
-    this._past = newPast;
-    this._future = [this._present, ...this._future];
-    this._present = previous;
-    this._syncState(previous);
-    this._emitter.emit("state:undo", previous);
-    this._emitter.emit("state:change", previous);
+    if (e(this, E).length === 0) return;
+    const s = e(this, E)[e(this, E).length - 1], t = e(this, E).slice(0, e(this, E).length - 1);
+    l(this, E, t), l(this, z, [e(this, $), ...e(this, z)]), l(this, $, s), this._renderCanvas(s), e(this, T).emit("state:undo", s), e(this, T).emit("state:change", s);
   }
   /**
    * 重做操作
    */
   redo() {
-    if (this._future.length === 0) return;
-    const next = this._future[0];
-    const newFuture = this._future.slice(1);
-    this._past = [...this._past, this._present];
-    this._future = newFuture;
-    this._present = next;
-    this._syncState(next);
-    this._emitter.emit("state:redo", next);
-    this._emitter.emit("state:change", next);
+    if (e(this, z).length === 0) return;
+    const s = e(this, z)[0], t = e(this, z).slice(1);
+    l(this, E, [...e(this, E), e(this, $)]), l(this, z, t), l(this, $, s), this._renderCanvas(s), e(this, T).emit("state:redo", s), e(this, T).emit("state:change", s);
   }
   /**
    * 重置历史记录
    */
   resetHistory() {
-    this._past = [];
-    this._future = [];
-    this._emitter.emit("state:reset", this._present);
-    this._emitter.emit("state:change", this._present);
+    l(this, E, []), l(this, z, []), e(this, T).emit("state:reset", e(this, $)), e(this, T).emit("state:change", e(this, $));
   }
   /**
    * 更新状态
    * @param partial - 部分状态更新
    * @param addToHistory - 是否添加到历史记录
    */
-  _updateState(partial, addToHistory = true) {
-    const newState = { ...this._present, ...partial };
-    if (addToHistory) {
-      this._past = [...this._past, this._present];
-      this._future = [];
-    }
-    this._present = newState;
-    this._emitter.emit("state:change", newState);
-  }
-  /**
-   * 同步状态到外部系统（由子类实现）
-   * @param _state - 要同步的状态
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _syncState(_state) {
+  _updateState(s, t) {
+    const i = { ...e(this, $), ...s };
+    t && (l(this, E, [...e(this, E), e(this, $)]), l(this, z, [])), l(this, $, i), e(this, T).emit("state:change", i);
   }
   /**
    * 清理资源
    */
   _dispose() {
-    this._emitter.all.clear();
+    e(this, T).all.clear();
   }
 }
-const NODE_NAMES = {
-  nodeRoot: "nodeRoot_intrinsic",
-  selectable: "selectable_intrinsic",
-  rect: "rect_intrinsic",
-  image: "image_intrinsic",
-  imageMarker: "image_marker_intrinsic"
-};
-const RECT = {
-  CORNER_RADIUS: 6,
-  MIN_SIZE: 10
-};
-const IMAGE = {
-  MIN_SIZE: 10
-};
-class BaseCanvasNode {
-  constructor(core, node, isDraft = false) {
-    __publicField(this, "core");
-    __publicField(this, "node");
-    __publicField(this, "element");
-    __publicField(this, "isDraft");
-    this.core = core;
-    this.node = node;
-    this.isDraft = isDraft;
-    this.element = this.createElement();
+E = new WeakMap(), $ = new WeakMap(), z = new WeakMap(), T = new WeakMap();
+class Ut {
+  constructor(s, t, i = !1) {
+    rt(this, "core");
+    rt(this, "config");
+    rt(this, "element");
+    rt(this, "isDraft");
+    this.core = s, this.config = t, this.isDraft = i, this.element = this.createElement(), this.element.setAttrs({ $$_canvasNode: this });
+  }
+  /**
+   * getID 获取节点 ID
+   */
+  getID() {
+    return this.config.id;
   }
   /**
    * 获取 Konva 元素
@@ -543,53 +427,48 @@ class BaseCanvasNode {
   /**
    * 获取节点数据
    */
-  getNode() {
-    return this.node;
+  getConfig() {
+    const s = { ...this.config };
+    return delete s.$$_canvasNode, structuredClone(s);
+  }
+  updateConfigBasedOnElement() {
+    const t = { ...this.getElement().getAttrs() };
+    delete t.$$_canvasNode, this.config = t;
   }
 }
-function getRectSize(rect) {
+function Ce(o) {
   return {
-    width: Math.max(RECT.MIN_SIZE, rect.width() * rect.scaleX()),
-    height: Math.max(RECT.MIN_SIZE, rect.height() * rect.scaleY())
+    width: Math.max(N.MIN_SIZE, o.width() * o.scaleX()),
+    height: Math.max(N.MIN_SIZE, o.height() * o.scaleY())
   };
 }
-class RectNode extends BaseCanvasNode {
-  constructor(core, node, isDraft = false) {
-    super(core, node, isDraft);
-    __privateAdd(this, _RectNode_instances);
-    __privateAdd(this, _toolTypeChangeHandler, (toolType) => {
-      const isSelect = toolType === "select";
-      this.element.listening(isSelect);
+var ct, $t, Jt;
+class Ie extends Ut {
+  constructor(t, i, n = !1) {
+    super(t, i, n);
+    d(this, $t);
+    d(this, ct, (t) => {
+      const i = t === "select";
+      this.element.listening(i);
     });
-    __privateMethod(this, _RectNode_instances, setupEventHandlers_fn).call(this, this.getElement());
+    C(this, $t, Jt).call(this, this.getElement());
   }
   createElement() {
-    const width = Math.max(
-      this.node.props.width ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const height = Math.max(
-      this.node.props.height ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const config = {
-      id: this.node.id,
-      ...this.node.props,
-      ...this.node.style,
-      width,
-      height,
-      cornerRadius: RECT.CORNER_RADIUS,
-      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.rect}`,
-      draggable: true,
+    const t = Math.max(this.config.width ?? N.MIN_SIZE, N.MIN_SIZE), i = Math.max(this.config.height ?? N.MIN_SIZE, N.MIN_SIZE), n = {
       stroke: "black",
-      strokeWidth: 2
-    };
-    const rect = new Konva.Rect(config);
-    rect.setAttrs({
-      width,
-      height
-    });
-    return rect;
+      strokeWidth: 2,
+      ...this.config,
+      id: this.config.id,
+      width: t,
+      height: i,
+      cornerRadius: N.CORNER_RADIUS,
+      name: `${U.nodeRoot} ${U.selectable} ${U.rect}`,
+      draggable: !0
+    }, r = new D.Rect(n);
+    return r.setAttrs({
+      width: t,
+      height: i
+    }), r;
   }
   /**
    * 获取 Konva.Rect 实例
@@ -600,114 +479,71 @@ class RectNode extends BaseCanvasNode {
   /**
    * 更新节点数据
    */
-  updateNode(node) {
-    this.node = {
-      ...this.node,
-      ...node,
-      props: {
-        ...this.node.props,
-        ...node.props
-      },
-      style: {
-        ...this.node.style,
-        ...node.style
-      }
-    };
-    const rect = this.getElement();
-    rect.x(this.node.props.x);
-    rect.y(this.node.props.y);
-    const width = Math.max(
-      this.node.props.width ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const height = Math.max(
-      this.node.props.height ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    rect.width(width);
-    rect.height(height);
+  updateNode(t) {
+    this.config = {
+      ...this.config,
+      ...t
+    }, this.getElement().setAttrs(t);
   }
   /**
    * 销毁
    */
   destroy() {
-    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-    this.element.destroy();
+    this.core.off("toolType:change", e(this, ct)), this.element.destroy();
   }
 }
-_toolTypeChangeHandler = new WeakMap();
-_RectNode_instances = new WeakSet();
-/**
+ct = new WeakMap(), $t = new WeakSet(), /**
  * 设置事件处理器
  */
-setupEventHandlers_fn = function(rect) {
-  const element = rect;
-  this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-  element.on("transform", (event) => {
-    const rect2 = event.target;
-    const { width, height } = getRectSize(rect2);
-    rect2.scale({ x: 1, y: 1 });
-    rect2.width(width);
-    rect2.height(height);
-  });
-  element.on("transformend", (event) => {
-    const rect2 = event.target;
-    const { width, height } = getRectSize(rect2);
-    const newProps = {
-      ...this.node.props,
-      x: rect2.x(),
-      y: rect2.y(),
-      width,
-      height,
-      rotation: rect2.rotation()
-    };
-    this.node.props = newProps;
-    this.core._syncNodeFromElement(this.node.id, {
-      props: newProps
-    });
-  });
-  element.on("dragend", (event) => {
-    const rect2 = event.target;
-    const newProps = {
-      ...this.node.props,
-      x: rect2.x(),
-      y: rect2.y()
-    };
-    this.node.props = newProps;
-    this.core._syncNodeFromElement(this.node.id, {
-      props: newProps
-    });
+Jt = function(t) {
+  const i = t;
+  this.core.on("toolType:change", e(this, ct)), i.on("transform", (n) => {
+    const r = n.target, { width: a, height: h } = Ce(r);
+    r.scale({ x: 1, y: 1 }), r.width(a), r.height(h);
+  }), i.on("transformend", (n) => {
+    this.updateConfigBasedOnElement(), this.core._rebuildStateAfterNodeChange(this, !0);
+  }), i.on("dragend", (n) => {
+    this.updateConfigBasedOnElement(), this.core._rebuildStateAfterNodeChange(this, !0);
   });
 };
-class ImageNode extends BaseCanvasNode {
-  constructor(core, node, isDraft = false) {
-    super(core, node, isDraft);
-    __privateAdd(this, _ImageNode_instances);
-    __privateAdd(this, _toolTypeChangeHandler2, (toolType) => {
-      const isSelect = toolType === "select";
-      this.element.listening(isSelect);
+var H, At, dt, lt, Qt, zt;
+class ke extends Ut {
+  constructor(t, i, n = !1) {
+    super(t, i, n);
+    d(this, H);
+    d(this, dt, (t) => {
+      const i = t === "select";
+      this.element.listening(i);
+    });
+    d(this, lt, () => {
+      const t = this.getElement().getLayer();
+      if (!t) return;
+      const i = t.find(
+        (n) => n.hasName(this.config.id)
+      );
+      this.core._rebuildStateAfterNodeChange(
+        [
+          this,
+          ...i.map(
+            (n) => n.getAttr("$$_canvasNode")
+          )
+        ],
+        !0
+      );
     });
-    __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
-    __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
+    C(this, H, At).call(this), C(this, H, Qt).call(this, this.getElement());
   }
   createElement() {
-    const width = this.node.props.width || IMAGE.MIN_SIZE;
-    const height = this.node.props.height || IMAGE.MIN_SIZE;
-    const placeholder = document.createElement("canvas");
-    placeholder.width = width;
-    placeholder.height = height;
-    const img = new Konva.Image({
-      id: this.node.id,
-      x: this.node.props.x,
-      y: this.node.props.y,
-      width,
-      height,
-      rotation: this.node.props.rotation || 0,
-      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.selectable} ${NODE_NAMES.image}`,
-      draggable: true,
-      image: placeholder
+    const t = this.config.width || Q.MIN_SIZE, i = this.config.height || Q.MIN_SIZE, n = document.createElement("canvas");
+    return n.width = t, n.height = i, new D.Image({
+      ...this.config,
+      id: this.config.id,
+      width: t,
+      height: i,
+      name: `${U.nodeRoot} ${U.selectable} ${U.image}`,
+      draggable: !0,
+      image: n
     });
-    return img;
   }
   /**
    * 获取 Konva.Image 实例
@@ -718,271 +554,141 @@ class ImageNode extends BaseCanvasNode {
   /**
    * 更新节点数据
    */
-  updateNode(node) {
-    this.node = {
-      ...this.node,
-      ...node,
-      props: {
-        ...this.node.props,
-        ...node.props
-      },
-      style: {
-        ...this.node.style,
-        ...node.style
-      },
-      meta: {
-        ...this.node.meta,
-        ...node.meta
-      }
-    };
-    const img = this.getElement();
-    img.x(this.node.props.x);
-    img.y(this.node.props.y);
-    if (this.node.props.width && this.node.props.height) {
-      const width = Math.max(this.node.props.width, IMAGE.MIN_SIZE);
-      const height = Math.max(this.node.props.height, IMAGE.MIN_SIZE);
-      img.width(width);
-      img.height(height);
-    }
-    if (this.node.props.rotation !== void 0) {
-      img.rotation(this.node.props.rotation);
-    }
-    if (node.meta?.imageUrl && node.meta.imageUrl !== this.node.meta.imageUrl) {
-      __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
-    }
+  updateNode(t) {
+    const i = this.config;
+    this.config = {
+      ...this.config,
+      ...t,
+      id: this.config.id
+    }, this.getElement().setAttrs(t), t.$_imageUrl && t.$_imageUrl !== i.$_imageUrl && C(this, H, At).call(this);
   }
   /**
    * 销毁
    */
   destroy() {
-    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
-    this.element.destroy();
+    this.core.off("toolType:change", e(this, dt)), this.element.destroy();
+  }
+  getConfig() {
+    const t = { ...this.config };
+    return delete t.$$_canvasNode, delete t.image, structuredClone(t);
   }
 }
-_ImageNode_instances = new WeakSet();
-/**
+H = new WeakSet(), /**
  * 加载图片
  */
-loadImage_fn = function() {
-  const imageUrl = this.node.meta.imageUrl;
-  if (!imageUrl) {
+At = function() {
+  const t = this.config.$_imageUrl;
+  if (!t) {
     console.warn("Image URL is missing");
     return;
   }
-  const img = new window.Image();
-  img.crossOrigin = "anonymous";
-  img.src = imageUrl;
-  img.onload = () => {
-    this.getElement().image(img);
-    const width = this.node.props.width ?? img.width;
-    const height = this.node.props.height ?? img.height;
-    this.getElement().width(Math.max(width, IMAGE.MIN_SIZE));
-    this.getElement().height(Math.max(height, IMAGE.MIN_SIZE));
-  };
-  img.onerror = () => {
-    console.error("Failed to load image:", imageUrl);
+  const i = new window.Image();
+  i.crossOrigin = "anonymous", i.src = t, i.onload = () => {
+    this.getElement().image(i);
+    const n = this.config.width ?? i.width, r = this.config.height ?? i.height;
+    this.getElement().width(Math.max(n, Q.MIN_SIZE)), this.getElement().height(Math.max(r, Q.MIN_SIZE));
+  }, i.onerror = () => {
+    console.error("Failed to load image:", t);
   };
-};
-_toolTypeChangeHandler2 = new WeakMap();
-/**
+}, dt = new WeakMap(), lt = new WeakMap(), /**
  * 设置事件处理器
  */
-setupEventHandlers_fn2 = function(img) {
-  this.core.on("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
-  img.on("transform", (event) => {
-    const img2 = event.target;
-    const width = Math.max(IMAGE.MIN_SIZE, img2.width() * img2.scaleX());
-    const height = Math.max(IMAGE.MIN_SIZE, img2.height() * img2.scaleY());
-    img2.scale({ x: 1, y: 1 });
-    img2.width(width);
-    img2.height(height);
-    __privateMethod(this, _ImageNode_instances, syncImageMarkers_fn).call(this);
-  });
-  img.on("transformend", (event) => {
-    const img2 = event.target;
-    const newProps = {
-      ...this.node.props,
-      x: img2.x(),
-      y: img2.y(),
-      width: img2.width(),
-      height: img2.height(),
-      rotation: img2.rotation()
-    };
-    this.node.props = newProps;
-    this.core._syncNodeFromElement(this.node.id, {
-      props: newProps
-    });
-    __privateMethod(this, _ImageNode_instances, syncImageMarkersToState_fn).call(this);
-  });
-  img.on("dragmove", () => {
-    __privateMethod(this, _ImageNode_instances, syncImageMarkers_fn).call(this);
-  });
-  img.on("dragend", (event) => {
-    const img2 = event.target;
-    const newProps = {
-      ...this.node.props,
-      x: img2.x(),
-      y: img2.y()
-    };
-    this.node.props = newProps;
-    this.core._syncNodeFromElement(this.node.id, {
-      props: newProps
-    });
-    __privateMethod(this, _ImageNode_instances, syncImageMarkersToState_fn).call(this);
+Qt = function(t) {
+  this.core.on("toolType:change", e(this, dt)), t.on("transform", (i) => {
+    const n = i.target, r = Math.max(Q.MIN_SIZE, n.width() * n.scaleX()), a = Math.max(Q.MIN_SIZE, n.height() * n.scaleY());
+    n.scale({ x: 1, y: 1 }), n.width(r), n.height(a), C(this, H, zt).call(this);
+  }), t.on("transformend", (i) => {
+    this.updateConfigBasedOnElement(), e(this, lt).call(this);
+  }), t.on("dragmove", () => {
+    C(this, H, zt).call(this);
+  }), t.on("dragend", (i) => {
+    this.updateConfigBasedOnElement(), e(this, lt).call(this);
   });
-};
-/**
+}, /**
  * 同步 image-marker 节点的位置（实时更新 Konva 元素）
  */
-syncImageMarkers_fn = function() {
-  const img = this.getElement();
-  const layer = img.getLayer();
-  if (!layer) return;
-  const imgX = img.x();
-  const imgY = img.y();
-  const imgWidth = img.width();
-  const imgHeight = img.height();
-  const imageMarkerElements = layer.find(
-    (node) => node.hasName(this.node.id)
-  );
-  const nodes = this.core.getState().nodes || [];
-  imageMarkerElements.forEach((nodeElement) => {
-    const nodeData = nodes.find((n) => n.id === nodeElement.id());
-    if (nodeData?.type === "image-marker" && nodeData.meta.relativePosition) {
-      const { start, end } = nodeData.meta.relativePosition;
-      const startX = imgX + start.percentX / 100 * imgWidth;
-      const startY = imgY + start.percentY / 100 * imgHeight;
-      const endX = imgX + end.percentX / 100 * imgWidth;
-      const endY = imgY + end.percentY / 100 * imgHeight;
-      const newX = Math.min(startX, endX);
-      const newY = Math.min(startY, endY);
-      const newWidth = Math.abs(endX - startX);
-      const newHeight = Math.abs(endY - startY);
-      nodeElement.position({ x: newX, y: newY });
-      nodeElement.setAttrs({ width: newWidth, height: newHeight });
-      const children = nodeElement.getChildren();
-      children.forEach((child) => {
-        if (child.getClassName() === "Rect") {
-          child.setAttrs({ width: newWidth, height: newHeight });
-        } else if (child.getClassName() === "Group") {
-          child.setAttrs({ x: newWidth, y: newHeight });
-        }
-      });
+zt = function() {
+  const t = this.getElement(), i = t.getLayer();
+  if (!i) return;
+  const n = t.x(), r = t.y(), a = t.width(), h = t.height(), c = i.find(
+    (m) => m.hasName(this.config.id)
+  ), g = this.core.getState().nodes || [];
+  c.forEach((m) => {
+    const p = g.find((f) => f.id === m.id());
+    if (p?.$_type === "image-marker" && p.$_relativeBox) {
+      const { start: f, end: x } = p.$_relativeBox, w = n + f.ratioX * a, b = r + f.ratioY * h, _ = n + x.ratioX * a, M = r + x.ratioY * h, Tt = Math.min(w, _), q = Math.min(b, M), G = Math.abs(_ - w), nt = Math.abs(M - b);
+      m.setAttrs({
+        x: Tt,
+        y: q,
+        width: G,
+        height: nt
+      }), m.getChildren().forEach((A) => {
+        A.getClassName() === "Rect" ? A.setAttrs({ width: G, height: nt }) : A.getClassName() === "Group" && A.setAttrs({ x: G, y: nt });
+      }), m.getAttr("$$_canvasNode")?.updateConfigBasedOnElement();
     }
   });
 };
-/**
- * 同步 image-marker 节点到状态
- */
-syncImageMarkersToState_fn = function() {
-  const img = this.getElement();
-  const layer = img.getLayer();
-  if (!layer) return;
-  const imageMarkerElements = layer.find(
-    (node) => node.hasName(this.node.id)
-  );
-  imageMarkerElements.forEach((nodeElement) => {
-    this.core._syncNodeFromElement(nodeElement.id(), {
-      props: {
-        x: nodeElement.x(),
-        y: nodeElement.y(),
-        width: nodeElement.width(),
-        height: nodeElement.height()
-      }
-    });
-  });
-};
-class ImageMarkerNode extends BaseCanvasNode {
-  constructor(core, node, isDraft = false) {
-    super(core, node, isDraft);
-    __privateAdd(this, _ImageMarkerNode_instances);
-    __privateAdd(this, _rect);
-    __privateAdd(this, _markerGroup);
-    __privateAdd(this, _circle);
-    __privateAdd(this, _text);
-    __privateAdd(this, _handleViewportChange);
-    __privateAdd(this, _handleNodesSelected);
-    const group = this.getElement();
-    __privateSet(this, _rect, group.findOne(".rect"));
-    __privateSet(this, _markerGroup, group.findOne(".marker-group"));
-    __privateSet(this, _circle, __privateGet(this, _markerGroup).findOne("Circle"));
-    __privateSet(this, _text, __privateGet(this, _markerGroup).findOne("Text"));
-    __privateMethod(this, _ImageMarkerNode_instances, setupEventHandlers_fn3).call(this);
-    __privateSet(this, _handleViewportChange, () => {
-      __privateMethod(this, _ImageMarkerNode_instances, changeVisulStyle_fn).call(this);
-    });
-    this.core.on("viewport:scale:change", __privateGet(this, _handleViewportChange));
-    __privateSet(this, _handleNodesSelected, (selectedIds) => {
-      const isSelected = selectedIds.includes(this.node.id);
-      this.setFocusState(isSelected);
-    });
-    this.core.on("nodes:selected", __privateGet(this, _handleNodesSelected));
+var V, R, j, L, tt, et, it, te, ee;
+class Ee extends Ut {
+  constructor(t, i, n = !1) {
+    super(t, i, n);
+    d(this, it);
+    d(this, V);
+    d(this, R);
+    d(this, j);
+    d(this, L);
+    d(this, tt);
+    d(this, et);
+    const r = this.getElement();
+    l(this, V, r.findOne(".rect")), l(this, R, r.findOne(".marker-group")), l(this, j, e(this, R).findOne("Circle")), l(this, L, e(this, R).findOne("Text")), C(this, it, ee).call(this), l(this, tt, () => {
+      C(this, it, te).call(this);
+    }), this.core.on("viewport:scale:change", e(this, tt)), l(this, et, (a) => {
+      const h = a.includes(this.config.id);
+      this.setFocusState(h);
+    }), this.core.on("nodes:selected", e(this, et));
   }
   createElement() {
-    const width = Math.max(
-      this.node.props.width ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const height = Math.max(
-      this.node.props.height ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const group = new Konva.Group({
-      id: this.node.id,
-      name: `${NODE_NAMES.nodeRoot} ${NODE_NAMES.imageMarker} ${this.node.meta.parent}`,
-      x: this.node.props.x,
-      y: this.node.props.y,
-      width,
-      height
-    });
-    const stageScale = this.core.getStageScale();
-    const rectStrokeWidth = 2 / stageScale;
-    const rectDash = [5 / stageScale, 5 / stageScale];
-    const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
-    const rect = new Konva.Rect({
+    const t = Math.max(this.config.width ?? N.MIN_SIZE, N.MIN_SIZE), i = Math.max(this.config.height ?? N.MIN_SIZE, N.MIN_SIZE), n = new D.Group({
+      id: this.config.id,
+      name: `${U.nodeRoot} ${U.imageMarker} ${this.config.$_parentId}`,
+      x: this.config.x,
+      y: this.config.y,
+      width: t,
+      height: i
+    }), r = this.core.getStageScale(), a = 2 / r, h = [5 / r, 5 / r], c = N.CORNER_RADIUS / r, g = new D.Rect({
       name: "rect",
       x: 0,
       y: 0,
-      width,
-      height,
-      stroke: "#3B82F6",
-      strokeWidth: rectStrokeWidth,
-      dash: rectDash,
+      width: t,
+      height: i,
+      stroke: "#F44336",
+      strokeWidth: a,
+      dash: h,
       fill: "transparent",
-      cornerRadius: rectCornerRadius,
-      listening: false
-    });
-    const markerGroup = new Konva.Group({
+      cornerRadius: c,
+      listening: !1
+    }), m = new D.Group({
       name: "marker-group",
-      x: width,
-      y: height,
-      visible: this.isDraft ? false : true
-    });
-    const radius = 14 / stageScale;
-    const strokeWidth = 3 / stageScale;
-    const fontSize = 16 / stageScale;
-    const circle = new Konva.Circle({
-      radius,
-      fill: "#3B82F6",
+      x: t,
+      y: i,
+      visible: !this.isDraft
+    }), p = 14 / r, f = 3 / r, x = 16 / r, w = new D.Circle({
+      radius: p,
+      fill: "#F44336",
       stroke: "white",
-      strokeWidth
-    });
-    const text = new Konva.Text({
-      x: -radius,
-      y: -radius,
-      width: radius * 2,
-      height: radius * 2,
-      text: String(this.node.meta.markerNumber || ""),
+      strokeWidth: f
+    }), b = new D.Text({
+      x: -p,
+      y: -p,
+      width: p * 2,
+      height: p * 2,
+      text: String(this.config.$_markerNumber || ""),
       align: "center",
       verticalAlign: "middle",
-      fontSize,
+      fontSize: x,
       fill: "white"
     });
-    markerGroup.add(circle);
-    markerGroup.add(text);
-    group.add(rect);
-    group.add(markerGroup);
-    return group;
+    return m.add(w), m.add(b), n.add(g), n.add(m), n;
   }
   /**
    * 获取 Konva.Group 实例
@@ -993,292 +699,183 @@ class ImageMarkerNode extends BaseCanvasNode {
   /**
    * 更新节点数据
    */
-  updateNode(node) {
-    this.node = {
-      ...this.node,
-      ...node,
-      props: {
-        ...this.node.props,
-        ...node.props
-      },
-      style: {
-        ...this.node.style,
-        ...node.style
-      },
-      meta: {
-        ...this.node.meta,
-        ...node.meta
-      }
+  updateNode(t) {
+    this.config = {
+      ...this.config,
+      ...t
     };
-    const group = this.getElement();
-    group.x(this.node.props.x);
-    group.y(this.node.props.y);
-    const width = Math.max(
-      this.node.props.width ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    const height = Math.max(
-      this.node.props.height ?? RECT.MIN_SIZE,
-      RECT.MIN_SIZE
-    );
-    group.width(width);
-    group.height(height);
-    __privateGet(this, _rect).width(width);
-    __privateGet(this, _rect).height(height);
-    __privateGet(this, _markerGroup).x(width);
-    __privateGet(this, _markerGroup).y(height);
-    if (node.style?.color) {
-      __privateGet(this, _rect).stroke(node.style.color);
-    }
-    if (node.meta?.markerNumber !== void 0) {
-      __privateGet(this, _text).text(String(node.meta.markerNumber));
-    }
+    const i = this.getElement();
+    i.x(this.config.x), i.y(this.config.y);
+    const n = Math.max(this.config.width ?? N.MIN_SIZE, N.MIN_SIZE), r = Math.max(this.config.height ?? N.MIN_SIZE, N.MIN_SIZE);
+    i.width(n), i.height(r), e(this, V).width(n), e(this, V).height(r), e(this, R).x(n), e(this, R).y(r), t.stroke && e(this, V).stroke(t.stroke), t.$_markerNumber !== void 0 && e(this, L).text(String(t.$_markerNumber));
   }
   /**
    * 销毁
    */
   destroy() {
-    this.core.off("viewport:scale:change", __privateGet(this, _handleViewportChange));
-    this.core.off("nodes:selected", __privateGet(this, _handleNodesSelected));
-    this.element.destroy();
+    this.core.off("viewport:scale:change", e(this, tt)), this.core.off("nodes:selected", e(this, et)), this.element.destroy();
   }
   /**
    * 更新焦点状态（hover 或 selected）
    */
-  setFocusState(isFocus) {
-    const stageScale = this.core.getStageScale();
-    const strokeWidth = isFocus ? 4 / stageScale : 3 / stageScale;
-    const scale = isFocus ? 1.2 : 1;
-    __privateGet(this, _rect).strokeWidth(strokeWidth);
-    __privateGet(this, _circle).strokeWidth(strokeWidth);
-    __privateGet(this, _markerGroup).scaleX(scale);
-    __privateGet(this, _markerGroup).scaleY(scale);
+  setFocusState(t) {
+    const i = this.core.getStageScale(), n = t ? 4 / i : 3 / i, r = t ? 1.2 : 1;
+    e(this, V).strokeWidth(n), e(this, j).strokeWidth(n), e(this, R).scaleX(r), e(this, R).scaleY(r);
+  }
+  updateConfigBasedOnElement() {
+    const t = this.getElement();
+    this.config = {
+      ...this.config,
+      width: t.width(),
+      height: t.height(),
+      x: t.x(),
+      y: t.y()
+    };
   }
 }
-_rect = new WeakMap();
-_markerGroup = new WeakMap();
-_circle = new WeakMap();
-_text = new WeakMap();
-_handleViewportChange = new WeakMap();
-_handleNodesSelected = new WeakMap();
-_ImageMarkerNode_instances = new WeakSet();
-/**
+V = new WeakMap(), R = new WeakMap(), j = new WeakMap(), L = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), it = new WeakSet(), /**
  * 更新标记点的缩放以保持视觉大小不变
  */
-changeVisulStyle_fn = function() {
-  const stageScale = this.core.getStageScale();
-  const radius = 14 / stageScale;
-  const strokeWidth = 3 / stageScale;
-  const fontSize = 16 / stageScale;
-  const rectStrokeWidth = 3 / stageScale;
-  const rectDash = [5 / stageScale, 5 / stageScale];
-  const rectCornerRadius = RECT.CORNER_RADIUS / stageScale;
-  __privateGet(this, _rect).strokeWidth(rectStrokeWidth);
-  __privateGet(this, _rect).dash(rectDash);
-  __privateGet(this, _rect).cornerRadius(rectCornerRadius);
-  __privateGet(this, _circle).radius(radius);
-  __privateGet(this, _circle).strokeWidth(strokeWidth);
-  __privateGet(this, _text).x(-radius);
-  __privateGet(this, _text).y(-radius);
-  __privateGet(this, _text).width(radius * 2);
-  __privateGet(this, _text).height(radius * 2);
-  __privateGet(this, _text).fontSize(fontSize);
-};
-/**
+te = function() {
+  const t = this.core.getStageScale(), i = 14 / t, n = 3 / t, r = 16 / t, a = 3 / t, h = [5 / t, 5 / t], c = N.CORNER_RADIUS / t;
+  e(this, V).strokeWidth(a), e(this, V).dash(h), e(this, V).cornerRadius(c), e(this, j).radius(i), e(this, j).strokeWidth(n), e(this, L).x(-i), e(this, L).y(-i), e(this, L).width(i * 2), e(this, L).height(i * 2), e(this, L).fontSize(r);
+}, /**
  * 设置事件处理器
  */
-setupEventHandlers_fn3 = function() {
-  __privateGet(this, _markerGroup).on("pointerover", () => {
-    this.setFocusState(true);
-    this.core.setCursor("pointer");
-  });
-  __privateGet(this, _markerGroup).on("pointerout", () => {
-    const selectedIds = this.core.getState().selectedNodeIds || [];
-    const isSelected = selectedIds.includes(this.node.id);
-    this.setFocusState(isSelected);
-    this.core.resetCursor();
-  });
-  __privateGet(this, _markerGroup).on("pointerdown", () => {
-    this.core.selectNode(this.node.id);
-  });
-  __privateGet(this, _markerGroup).on("transform", () => {
+ee = function() {
+  e(this, R).on("pointerover", () => {
+    this.setFocusState(!0), this.core._setCursor("pointer");
+  }), e(this, R).on("pointerout", () => {
+    const i = (this.core.getState().selectedNodeIds || []).includes(this.config.id);
+    this.setFocusState(i), this.core._resetCursor();
+  }), e(this, R).on("pointerdown", () => {
+    this.core._selectNodes([this.config.id]);
+  }), e(this, R).on("transform", () => {
     console.log("image marker group on transform called");
   });
 };
-function createCanvasNodeByType(core, type, config, isDraft = false) {
-  switch (type) {
+function Gt(o, s, t, i = !1) {
+  switch (s) {
     case "rectangle":
-      return new RectNode(core, config, isDraft);
+      return new Ie(o, t, i);
     case "image":
-      return new ImageNode(core, config, isDraft);
+      return new ke(o, t, i);
     case "image-marker":
-      return new ImageMarkerNode(core, config, isDraft);
+      return new Ee(o, t, i);
     default:
       return null;
   }
 }
-function clamp(value, range) {
-  return Math.min(Math.max(value, range[0]), range[1]);
+function Ft(o, s) {
+  return Math.min(Math.max(o, s[0]), s[1]);
 }
-const createNodeByType = (type, position, style, meta) => {
-  const baseNode = {
-    type,
-    id: v4(),
-    text: null,
-    style: {
-      opacity: 1,
-      line: "solid",
-      color: "black",
-      size: "medium",
-      animated: false
-    },
-    props: {
-      x: position.x,
-      y: position.y,
-      rotation: 0,
-      visible: true
-    },
-    meta: {
-      ...meta,
-      startPoint: position
-    }
-  };
-  if (type === "image-marker") {
-    return {
-      ...baseNode,
-      style: {
-        ...baseNode.style,
-        color: "#3B82F6"
-      }
-    };
-  }
-  return baseNode;
-};
-function updateNodeByType(node, position) {
-  let finalPosition = position;
-  if (node.type === "image-marker" && node.meta.bounds) {
-    const bounds = node.meta.bounds;
-    finalPosition = {
-      x: clamp(position.x, [bounds.x, bounds.x + bounds.width]),
-      y: clamp(position.y, [bounds.y, bounds.y + bounds.height])
+const $e = (o, s, t) => ({
+  ...t,
+  $_type: o,
+  id: ut(),
+  x: s.x,
+  y: s.y
+});
+function Te(o, s, t) {
+  let i = s;
+  if (o.$_type === "image-marker" && o.$_bounds) {
+    const n = o.$_bounds;
+    i = {
+      x: Ft(s.x, [n.x, n.x + n.width]),
+      y: Ft(s.y, [n.y, n.y + n.height])
     };
   }
-  if (node.type === "rectangle" || node.type === "image-marker") {
-    const startPoint = node.meta.startPoint ?? {
-      x: node.props.x,
-      y: node.props.y
-    };
-    const [p1, p2] = normalizePoints(startPoint, finalPosition);
+  if (o.$_type === "rectangle" || o.$_type === "image-marker") {
+    const [n, r] = Yt(t, i);
     return {
-      ...node,
-      props: {
-        ...node.props,
-        x: p1.x,
-        y: p1.y,
-        width: Math.max(p2.x - p1.x, RECT.MIN_SIZE),
-        height: Math.max(p2.y - p1.y, RECT.MIN_SIZE)
-      },
-      meta: {
-        ...node.meta,
-        // 保存初始起点，以便后续更新使用
-        startPoint
-      }
+      ...o,
+      x: n.x,
+      y: n.y,
+      width: Math.max(r.x - n.x, N.MIN_SIZE),
+      height: Math.max(r.y - n.y, N.MIN_SIZE)
     };
   }
-  return node;
+  return o;
 }
-function normalizePoints(p1, p2) {
-  let p1x = p1.x, p1y = p1.y, p2x = p2.x, p2y = p2.y, d;
-  if (p1x > p2x) {
-    d = Math.abs(p1x - p2x);
-    p1x = p2x;
-    p2x = p1x + d;
-  }
-  if (p1y > p2y) {
-    d = Math.abs(p1y - p2y);
-    p1y = p2y;
-    p2y = p1y + d;
-  }
-  return [
-    { x: p1x, y: p1y },
-    { x: p2x, y: p2y }
+function Yt(o, s) {
+  let t = o.x, i = o.y, n = s.x, r = s.y, a;
+  return t > n && (a = Math.abs(t - n), t = n, n = t + a), i > r && (a = Math.abs(i - r), i = r, r = i + a), [
+    { x: t, y: i },
+    { x: n, y: r }
   ];
 }
-class CanvasCore extends CanvasState {
-  constructor(el) {
-    super({
+const Re = (o, s) => {
+  if (o.length !== s.length) return !1;
+  const t = new Set(o);
+  return s.every((i) => t.has(i));
+};
+var I, X, P, k, J, Y, O, B, gt, Z, se, Ot, Xt, ie;
+class De extends Me {
+  constructor(t, i) {
+    const n = {
+      toolType: "select",
+      nodes: [],
+      ...i,
       viewport: {
         x: 0,
         y: 0,
-        width: el.clientWidth,
-        height: el.clientHeight,
-        scale: 1
-      },
-      toolType: "select",
-      nodes: []
-    });
-    __privateAdd(this, _CanvasCore_instances);
-    __privateAdd(this, _canvasStage);
-    __privateAdd(this, _mainLayer);
-    __privateAdd(this, _canvasTransformer);
-    __privateAdd(this, _draftNode, null);
-    __privateAdd(this, _container);
-    __privateAdd(this, _handleKeyDown, (e) => {
-      if (e.key === "Delete" || e.key === "Backspace") {
-        e.preventDefault();
-        this.deleteSelectedNodes();
+        width: t.clientWidth,
+        height: t.clientHeight,
+        scale: 1,
+        ...i?.viewport
       }
+    };
+    super(n);
+    d(this, Z);
+    d(this, I);
+    d(this, X);
+    d(this, P);
+    d(this, k, null);
+    d(this, J);
+    d(this, Y, null);
+    d(this, O, null);
+    /** 节点映射，方便快速查找 */
+    d(this, B, /* @__PURE__ */ new Map());
+    d(this, gt, (t) => {
+      (t.key === "Delete" || t.key === "Backspace") && (t.preventDefault(), this.deleteSelectedNodes());
     });
-    __privateSet(this, _container, el);
-    __privateSet(this, _canvasStage, new CanvasStage(this, {
-      container: el,
-      width: el.clientWidth,
-      height: el.clientHeight,
-      draggable: false,
+    l(this, J, t), l(this, I, new _e(this, {
+      container: t,
+      width: t.clientWidth,
+      height: t.clientHeight,
+      draggable: !1,
       className: "touch-none"
-    }));
-    __privateSet(this, _mainLayer, new Konva.Layer());
-    __privateSet(this, _canvasTransformer, new CanvasTransformer(this));
-    __privateGet(this, _canvasStage).getStage().add(__privateGet(this, _mainLayer));
-    __privateGet(this, _mainLayer).add(__privateGet(this, _canvasTransformer).getTransformer());
-    this.updateViewport(this.getState().viewport, false);
-    __privateMethod(this, _CanvasCore_instances, setupKeyboardEvents_fn).call(this);
+    })), l(this, X, new D.Layer()), l(this, P, new be(this)), e(this, I).getStage().add(e(this, X)), e(this, X).add(e(this, P).getTransformer()), this._renderCanvas(n), C(this, Z, se).call(this);
   }
   /**
    * 获取 CanvasStage 实例
    */
   getCanvasStage() {
-    return __privateGet(this, _canvasStage);
+    return e(this, I);
   }
   /**
    * 获取 CanvasTransformer 实例
    */
   getCanvasTransformer() {
-    return __privateGet(this, _canvasTransformer);
-  }
-  /**
-   * 发射事件（供内部类使用）
-   */
-  emitEvent(event, data) {
-    this.emit(event, data);
+    return e(this, P);
   }
   /**
    * 获取 Konva.Stage 实例
    */
   getStage() {
-    return __privateGet(this, _canvasStage).getStage();
+    return e(this, I).getStage();
   }
   /**
    * 获取 Stage 容器元素
    */
   getContainer() {
-    return __privateGet(this, _canvasStage).getStage().container();
+    return e(this, I).getStage().container();
   }
   /**
    * 获取主图层
    */
   getMainLayer() {
-    return __privateGet(this, _mainLayer);
+    return e(this, X);
   }
   /**
    * 获取当前工具类型
@@ -1289,283 +886,246 @@ class CanvasCore extends CanvasState {
   /**
    * 设置当前工具类型（内部使用）
    */
-  setToolType(type) {
-    this.selectNode();
-    this._updateState(
+  setToolType(t) {
+    this._selectNodes(), this._updateState(
       {
-        toolType: type
+        toolType: t
       },
-      false
-    );
-    this.emit("toolType:change", type);
-    if (type === "hand") {
-      __privateGet(this, _canvasStage).setDraggable(true);
-      __privateGet(this, _canvasStage).setCursor("grab");
-    } else {
-      __privateGet(this, _canvasStage).setDraggable(false);
-      __privateGet(this, _canvasStage).resetCursor();
-    }
+      !1
+    ), this._emit("toolType:change", t), t === "hand" ? (e(this, I).setDraggable(!0), e(this, I).setCursor("grab")) : (e(this, I).setDraggable(!1), e(this, I).resetCursor());
+  }
+  /**
+   * 根据 ID 获取 Canvas 节点实例
+   */
+  getCanvasNodeById(t) {
+    return e(this, B).get(t) || null;
   }
   /**
    * 设置是否可拖拽（内部使用）
    */
-  setDraggable(draggable) {
-    __privateGet(this, _canvasStage).setDraggable(draggable);
+  setDraggable(t) {
+    e(this, I).setDraggable(t);
   }
   /**
    * 设置光标
    * @internal 仅供内部使用
    */
-  setCursor(cursor) {
-    __privateGet(this, _canvasStage).setCursor(cursor);
+  _setCursor(t) {
+    e(this, I).setCursor(t);
   }
   /**
    * 重置光标
    * @internal 仅供内部使用
    */
-  resetCursor() {
-    __privateGet(this, _canvasStage).resetCursor();
+  _resetCursor() {
+    e(this, I).resetCursor();
   }
   /**
    * 获取当前 Stage 缩放比例
    */
   getStageScale() {
-    return __privateGet(this, _canvasStage).getStage().scaleX();
+    return e(this, I).getStage().scaleX();
   }
   /**
    * 更新视口位置
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
-  updateViewport(viewport, addToHistory = false) {
-    __privateGet(this, _canvasStage).setViewport(viewport);
-    const oldViewport = this.getState().viewport;
-    const newViewport = {
-      ...oldViewport,
-      ...viewport
+  _updateViewport(t, i = !1) {
+    e(this, I).setViewport(t);
+    const n = this.getState().viewport, r = {
+      ...n,
+      ...t
     };
     this._updateState(
       {
-        viewport: newViewport
+        viewport: r
       },
-      addToHistory
-    );
-    this.emit("viewport:change", newViewport);
-    if (oldViewport.scale !== newViewport.scale) {
-      this.emit("viewport:scale:change", newViewport.scale);
-    }
-    __privateGet(this, _canvasTransformer).emitPositionChange();
+      i
+    ), this._emit("viewport:change", r), n.scale !== r.scale && this._emit("viewport:scale:change", r.scale), e(this, P).emitPositionChange();
   }
-  createNodes(nodes) {
-    const canvasNodes = nodes.map((node) => createCanvasNodeByType(this, node.type, node, false)).filter((node) => node !== null);
-    canvasNodes.forEach((node) => {
-      __privateGet(this, _mainLayer).add(node.getElement());
-    });
-    const newNodes = [...this.getState().nodes || [], ...nodes];
-    this._updateState(
-      {
-        nodes: newNodes
-      },
-      true
-    );
-    this.emit("nodes:created", nodes);
+  createNodes(t, i) {
+    const n = t.map((r) => Gt(this, r.$_type, r, !1)).filter((r) => r !== null);
+    n.forEach((r) => {
+      e(this, X).add(r.getElement());
+    }), C(this, Z, Xt).call(this, n, i), this._emit("nodes:created", t);
   }
   /**
    * 创建图片标注节点（内部使用）
    */
-  createImageMarkerNode(parentImageId, startPosition, endPosition, imageBounds) {
-    const nodes = this.getState().nodes || [];
-    let maxMarkerNumber = 0;
-    nodes.forEach((node) => {
-      if (node.type === "image-marker" && node.meta.parent === parentImageId && typeof node.meta.markerNumber === "number") {
-        maxMarkerNumber = Math.max(maxMarkerNumber, node.meta.markerNumber);
-      }
+  createImageMarkerNode(t, i, n, r) {
+    const a = this.getState().nodes || [];
+    let h = 0;
+    a.forEach((M) => {
+      M.$_type === "image-marker" && M.$_parentId === t && typeof M.$_markerNumber == "number" && (h = Math.max(h, M.$_markerNumber));
     });
-    const startPercentX = (startPosition.x - imageBounds.x) / imageBounds.width * 100;
-    const startPercentY = (startPosition.y - imageBounds.y) / imageBounds.height * 100;
-    const endPercentX = (endPosition.x - imageBounds.x) / imageBounds.width * 100;
-    const endPercentY = (endPosition.y - imageBounds.y) / imageBounds.height * 100;
-    const x = Math.min(startPosition.x, endPosition.x);
-    const y = Math.min(startPosition.y, endPosition.y);
-    const width = Math.abs(endPosition.x - startPosition.x);
-    const height = Math.abs(endPosition.y - startPosition.y);
-    const markerNode = {
-      id: v4(),
-      type: "image-marker",
-      props: {
-        x,
-        y,
-        width,
-        height,
-        rotation: 0,
-        visible: true
-      },
-      style: {
-        color: "#3B82F6",
-        line: "dashed",
-        size: "medium",
-        opacity: 1
-      },
-      meta: {
-        parent: parentImageId,
-        markerNumber: maxMarkerNumber + 1,
-        relativePosition: {
-          start: {
-            percentX: Math.max(0, Math.min(100, startPercentX)),
-            percentY: Math.max(0, Math.min(100, startPercentY))
-          },
-          end: {
-            percentX: Math.max(0, Math.min(100, endPercentX)),
-            percentY: Math.max(0, Math.min(100, endPercentY))
-          }
+    const c = (i.x - r.x) / r.width, g = (i.y - r.y) / r.height, m = (n.x - r.x) / r.width, p = (n.y - r.y) / r.height, f = Math.min(i.x, n.x), x = Math.min(i.y, n.y), w = Math.abs(n.x - i.x), b = Math.abs(n.y - i.y), _ = {
+      id: ut(),
+      $_type: "image-marker",
+      x: f,
+      y: x,
+      width: w,
+      height: b,
+      visible: !0,
+      line: "dashed",
+      $_parentId: t,
+      $_markerNumber: h + 1,
+      $_relativeBox: {
+        start: {
+          ratioX: Math.max(0, Math.min(1, c)),
+          ratioY: Math.max(0, Math.min(1, g))
+        },
+        end: {
+          ratioX: Math.max(0, Math.min(1, m)),
+          ratioY: Math.max(0, Math.min(1, p))
         }
       }
     };
-    this.createNodes([markerNode]);
+    this.createNodes([_], !0);
   }
   /**
    * 在指定位置查找图片节点
    * @internal 仅供内部使用
    */
-  findImageAtPosition(position) {
-    const layer = __privateGet(this, _mainLayer);
-    const shapes = layer.getChildren();
-    const filteredShapes = shapes.filter(
-      (shape) => !shape.name().includes("imageMarker")
-    );
-    const sortedShapes = filteredShapes.slice().sort((a, b) => b.zIndex() - a.zIndex());
-    for (const shape of sortedShapes) {
-      const x = shape.x();
-      const y = shape.y();
-      const width = shape.width();
-      const height = shape.height();
-      if (position.x >= x && position.x <= x + width && position.y >= y && position.y <= y + height) {
-        if (shape.getClassName() === "Image") {
-          return shape;
-        }
-        return null;
-      }
+  _findImageAtPosition(t) {
+    const a = e(this, X).getChildren().filter(
+      (h) => !h.name().includes("imageMarker")
+    ).slice().sort((h, c) => c.zIndex() - h.zIndex());
+    for (const h of a) {
+      const c = h.x(), g = h.y(), m = h.width(), p = h.height();
+      if (t.x >= c && t.x <= c + m && t.y >= g && t.y <= g + p)
+        return h.getClassName() === "Image" ? h : null;
     }
     return null;
   }
   /**
    * @internal 仅供内部使用
    */
-  createDraftNode(type, position, meta) {
-    if (__privateGet(this, _draftNode)) {
-      __privateGet(this, _draftNode).destroy();
-    }
-    const node = createNodeByType(type, position, void 0, meta);
-    __privateSet(this, _draftNode, createCanvasNodeByType(this, type, node, true));
-    if (!__privateGet(this, _draftNode)) return;
-    __privateGet(this, _mainLayer).add(__privateGet(this, _draftNode).getElement());
+  _setDrawingPosition(t) {
+    l(this, O, [t, t]);
   }
   /**
    * @internal 仅供内部使用
    */
-  updateDraftNode(position) {
-    if (!__privateGet(this, _draftNode)) return;
-    const node = __privateGet(this, _draftNode).getNode();
-    const updatedNode = updateNodeByType(node, position);
-    __privateGet(this, _draftNode).updateNode(updatedNode);
+  _updateDrawingPosition(t) {
+    e(this, O) && (e(this, O)[1] = t);
   }
   /**
    * @internal 仅供内部使用
    */
-  finalizeDraftNode() {
-    if (!__privateGet(this, _draftNode)) return;
-    const id = v4();
-    const draftNode = __privateGet(this, _draftNode).getNode();
-    if (draftNode.type === "image-marker" && draftNode.meta.parent) {
-      const bounds = draftNode.meta.bounds;
-      const startPosition = draftNode.meta.startPosition;
-      const endPosition = {
-        x: draftNode.props.x + (draftNode.props.width || 0),
-        y: draftNode.props.y + (draftNode.props.height || 0)
-      };
-      const nodes = this.getState().nodes || [];
-      let maxMarkerNumber = 0;
-      nodes.forEach((node3) => {
-        if (node3.type === "image-marker" && node3.meta.parent === draftNode.meta.parent && typeof node3.meta.markerNumber === "number") {
-          maxMarkerNumber = Math.max(maxMarkerNumber, node3.meta.markerNumber);
-        }
+  _createDraftNode(t, i) {
+    e(this, k) && e(this, k).destroy();
+    const n = $e(t, e(this, O)[0], i);
+    l(this, k, Gt(this, t, n, !0)), e(this, k) && e(this, X).add(e(this, k).getElement());
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _updateDraftNode() {
+    if (!e(this, k)) return;
+    const t = e(this, k).getConfig(), i = Te(
+      t,
+      e(this, O)[1],
+      e(this, O)[0]
+    );
+    e(this, k).updateNode(i);
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _finalizeDraftNode() {
+    if (!e(this, k)) return;
+    const t = ut(), i = e(this, k).getConfig();
+    if (i.$_type === "image-marker" && i.$_parentId) {
+      const r = i.$_bounds, a = e(this, O)[0], h = {
+        x: i.x + (i.width || 0),
+        y: i.y + (i.height || 0)
+      }, [c, g] = Yt(a, h), m = this.getState().nodes || [];
+      let p = 0;
+      m.forEach((M) => {
+        M.$_type === "image-marker" && M.$_parentId === i.$_parentId && typeof M.$_markerNumber == "number" && (p = Math.max(p, M.$_markerNumber));
       });
-      const startPercentX = (startPosition.x - bounds.x) / bounds.width * 100;
-      const startPercentY = (startPosition.y - bounds.y) / bounds.height * 100;
-      const endPercentX = (endPosition.x - bounds.x) / bounds.width * 100;
-      const endPercentY = (endPosition.y - bounds.y) / bounds.height * 100;
-      const node2 = {
-        ...draftNode,
-        props: {
-          ...draftNode.props
-        },
-        style: {
-          ...draftNode.style
-        },
-        meta: {
-          parent: draftNode.meta.parent,
-          markerNumber: maxMarkerNumber + 1,
-          relativePosition: {
-            start: {
-              percentX: Math.max(0, Math.min(100, startPercentX)),
-              percentY: Math.max(0, Math.min(100, startPercentY))
-            },
-            end: {
-              percentX: Math.max(0, Math.min(100, endPercentX)),
-              percentY: Math.max(0, Math.min(100, endPercentY))
-            }
+      const f = (c.x - r.x) / r.width, x = (c.y - r.y) / r.height, w = (g.x - r.x) / r.width, b = (g.y - r.y) / r.height, _ = {
+        ...i,
+        $_markerNumber: p + 1,
+        $_relativeBox: {
+          start: {
+            ratioX: Math.max(0, Math.min(1, f)),
+            ratioY: Math.max(0, Math.min(1, x))
+          },
+          end: {
+            ratioX: Math.max(0, Math.min(1, w)),
+            ratioY: Math.max(0, Math.min(1, b))
           }
         },
-        id,
-        type: "image-marker"
+        $_type: "image-marker",
+        id: t
       };
-      this.createNodes([node2]);
-      __privateGet(this, _draftNode).destroy();
-      __privateSet(this, _draftNode, null);
-      this.setToolType("select");
+      this.createNodes([_], !0), e(this, k).destroy(), l(this, k, null), this.setToolType("select");
       return;
     }
-    const node = {
-      ...draftNode,
-      props: {
-        ...draftNode.props
-      },
-      style: {
-        ...draftNode.style
-      },
-      meta: {
-        ...draftNode.meta
-      },
-      id
+    const n = {
+      ...i,
+      id: t
     };
-    this.createNodes([node]);
-    __privateGet(this, _draftNode).destroy();
-    __privateSet(this, _draftNode, null);
-    this.setToolType("select");
+    this.createNodes([n], !0), e(this, k).destroy(), l(this, k, null), this.setToolType("select");
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _createSelectRect() {
+    e(this, Y) && e(this, Y).destroy(), l(this, Y, new D.Rect({
+      x: e(this, O)[0].x,
+      y: e(this, O)[0].y,
+      width: 0,
+      height: 0,
+      stroke: "rgb(33, 150, 243)",
+      strokeWidth: 1,
+      fill: "rgba(33, 150, 243, 0.2)"
+    })), e(this, X).add(e(this, Y));
+  }
+  /*
+   * @internal 仅供内部使用
+   */
+  _updateSelectRect() {
+    if (!e(this, Y)) return;
+    const [t, i] = Yt(...e(this, O));
+    e(this, Y).setAttrs({
+      x: t.x,
+      y: t.y,
+      width: i.x - t.x,
+      height: i.y - t.y
+    });
+    const n = e(this, Y).getClientRect(), a = e(this, X).find(`.${U.selectable}`).filter((h) => {
+      const c = h.getClientRect();
+      return D.Util.haveIntersection(n, c);
+    });
+    this._selectNodes(
+      a.length > 0 ? a.map((h) => h.id()) : void 0,
+      !1
+    );
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _finalizeSelectRect() {
+    e(this, Y) && (e(this, Y).destroy(), l(this, Y, null));
   }
   /**
    * 选择节点
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
-  selectNode(nodeId, multiSelect = false) {
-    const curSelectedNodeIds = this.getState().selectedNodeIds ?? [];
-    let selectedNodeIds = [];
-    if (nodeId) {
-      if (multiSelect && curSelectedNodeIds.length > 0) {
-        selectedNodeIds = [...curSelectedNodeIds, nodeId];
-      } else {
-        selectedNodeIds = [nodeId];
+  _selectNodes(t, i = !1) {
+    const n = this.getState().selectedNodeIds ?? [];
+    let r = [];
+    if (t?.length && (i && n.length > 0 ? r = [...n, ...t] : r = [...t]), !Re(n, r)) {
+      if (r.length === 0)
+        e(this, P).clearNodes();
+      else {
+        const a = this.getStage().find(`.${U.selectable}`).filter((h) => r.includes(h.id()));
+        e(this, P).setNodes(a);
       }
-    } else if (curSelectedNodeIds.length === 0) {
-      return;
-    }
-    if (selectedNodeIds.length === 0) {
-      __privateGet(this, _canvasTransformer).clearNodes();
-    } else {
-      const nodes = this.getStage().find(`.${NODE_NAMES.selectable}`).filter((node) => selectedNodeIds.includes(node.id()));
-      __privateGet(this, _canvasTransformer).setNodes(nodes);
+      this._updateState({ selectedNodeIds: r }, !1), this._emit("nodes:selected", r);
     }
-    this._updateState({ selectedNodeIds }, false);
-    this.emit("nodes:selected", selectedNodeIds);
   }
   /**
    * 删除指定的节点（内部使用）
@@ -1574,119 +1134,99 @@ class CanvasCore extends CanvasState {
    * @param nodeIds - 要删除的节点 ID 数组
    * @returns 被删除的节点数据数组
    */
-  deleteNodes(nodeIds) {
-    if (nodeIds.length === 0) return [];
-    const nodes = this.getState().nodes || [];
-    const idsToDelete = new Set(nodeIds);
-    nodeIds.forEach((id) => {
-      const node = nodes.find((n) => n.id === id);
-      if (node?.type === "image") {
-        nodes.forEach((n) => {
-          if (n.type === "image-marker" && n.meta.parent === id) {
-            idsToDelete.add(n.id);
-          }
-        });
-      }
-    });
-    const deletedNodes = nodes.filter((n) => idsToDelete.has(n.id));
-    idsToDelete.forEach((id) => {
-      const shape = this.getStage().findOne(`#${id}`);
-      if (shape) {
-        shape.destroy();
-      }
+  deleteNodes(t) {
+    if (t.length === 0) return [];
+    const i = this.getState().nodes || [], n = new Set(t);
+    t.forEach((a) => {
+      i.find((c) => c.id === a)?.$_type === "image" && i.forEach((c) => {
+        c.$_type === "image-marker" && c.$_parentId === a && n.add(c.id);
+      });
     });
-    const newNodes = nodes.filter((n) => !idsToDelete.has(n.id));
-    __privateGet(this, _canvasTransformer).clearNodes();
-    this._updateState(
+    const r = i.filter((a) => n.has(a.id));
+    return n.forEach((a) => {
+      const h = this.getStage().findOne(`#${a}`);
+      h && h.destroy();
+    }), C(this, Z, ie).call(this, Array.from(n), !0), e(this, P).clearNodes(), this._updateState(
       {
-        nodes: newNodes,
         selectedNodeIds: []
       },
-      true
-    );
-    this.emit("nodes:deleted", deletedNodes);
-    return deletedNodes;
+      !0
+    ), this._emit("nodes:deleted", r), r;
   }
   /**
    * 删除选中的节点（内部使用）
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
   deleteSelectedNodes() {
-    const selectedNodeIds = this.getState().selectedNodeIds || [];
-    if (selectedNodeIds.length === 0) return;
-    this.deleteNodes(selectedNodeIds);
+    const t = this.getState().selectedNodeIds || [];
+    t.length !== 0 && this.deleteNodes(t);
   }
   /**
    * 销毁 canvas
    */
   dispose() {
-    __privateGet(this, _container).removeEventListener("keydown", __privateGet(this, _handleKeyDown));
-    this.getCanvasTransformer().destroy();
-    this.getMainLayer().destroy();
-    this.getCanvasStage().destroy();
-    this._dispose();
-  }
-  /**
-   * 从元素同步节点数据（供节点类内部使用）
-   */
-  _syncNodeFromElement(nodeId, updates) {
-    const nodes = this.getState().nodes || [];
-    const nodeIndex = nodes.findIndex((n) => n.id === nodeId);
-    if (nodeIndex === -1) return;
-    const updatedNode = {
-      ...nodes[nodeIndex],
-      ...updates,
-      props: {
-        ...nodes[nodeIndex].props,
-        ...updates.props
-      },
-      style: {
-        ...nodes[nodeIndex].style,
-        ...updates.style
-      },
-      meta: {
-        ...nodes[nodeIndex].meta,
-        ...updates.meta
-      }
-    };
-    const newNodes = [...nodes];
-    newNodes[nodeIndex] = updatedNode;
-    this._updateState(
-      {
-        nodes: newNodes
-      },
-      true
-    );
+    e(this, J).removeEventListener("keydown", e(this, gt)), this.getCanvasTransformer().destroy(), this.getMainLayer().destroy(), this.getCanvasStage().destroy(), this._dispose();
+  }
+  /**
+   * @internal 仅供内部使用
+   * 在元素节点改变后（例如 tranfromEnd dragEnd）重建 state.nodes
+   */
+  _rebuildStateAfterNodeChange(t, i) {
+    C(this, Z, Xt).call(this, Array.isArray(t) ? t : [t], i);
   }
   /**
    * 实现父类的状态同步方法
    * 当 undo/redo 时被调用
    */
-  _syncState(state) {
-    __privateGet(this, _canvasStage).setViewport({
-      x: state.viewport.x,
-      y: state.viewport.y,
-      scale: state.viewport.scale,
-      width: state.viewport.width,
-      height: state.viewport.height
-    });
+  _renderCanvas(t) {
+    this._updateViewport(
+      {
+        x: t.viewport.x,
+        y: t.viewport.y,
+        scale: t.viewport.scale,
+        width: t.viewport.width,
+        height: t.viewport.height
+      },
+      !1
+    ), e(this, B).forEach((n, r) => {
+      n.destroy();
+    }), e(this, B).clear(), this.createNodes(t.nodes || [], !1);
+    const i = t.selectedNodeIds || [];
+    if (i.length === 0)
+      e(this, P).clearNodes();
+    else {
+      const n = this.getStage().find(`.${U.selectable}`).filter((r) => i.includes(r.id()));
+      e(this, P).setNodes(n);
+    }
   }
 }
-_canvasStage = new WeakMap();
-_mainLayer = new WeakMap();
-_canvasTransformer = new WeakMap();
-_draftNode = new WeakMap();
-_container = new WeakMap();
-_handleKeyDown = new WeakMap();
-_CanvasCore_instances = new WeakSet();
-/**
+I = new WeakMap(), X = new WeakMap(), P = new WeakMap(), k = new WeakMap(), J = new WeakMap(), Y = new WeakMap(), O = new WeakMap(), B = new WeakMap(), gt = new WeakMap(), Z = new WeakSet(), /**
  * 设置键盘事件监听
  */
-setupKeyboardEvents_fn = function() {
-  __privateGet(this, _container).tabIndex = 0;
-  __privateGet(this, _container).addEventListener("keydown", __privateGet(this, _handleKeyDown));
+se = function() {
+  e(this, J).tabIndex = 0, e(this, J).addEventListener("keydown", e(this, gt));
+}, /**
+ * 根据canvas节点映射重建 state.nodes
+ */
+Ot = function(t) {
+  const i = {
+    nodes: Array.from(e(this, B).values()).map((n) => n.getConfig())
+  };
+  this._updateState(i, t);
+}, /**
+ * 更新 state.nodes
+ */
+Xt = function(t, i) {
+  t.forEach((n) => {
+    e(this, B).set(n.getID(), n);
+  }), t.length !== 0 && C(this, Z, Ot).call(this, i);
+}, ie = function(t, i = !1) {
+  t.forEach((n) => {
+    const r = e(this, B).get(n);
+    r && r.destroy(), e(this, B).delete(n);
+  }), t.length !== 0 && C(this, Z, Ot).call(this, i);
 };
-class CanvasApi extends CanvasCore {
+class Ae extends De {
   /**
    * 获取所有可用的工具类型
    */
@@ -1696,76 +1236,57 @@ class CanvasApi extends CanvasCore {
   /**
    * 设置当前工具类型
    */
-  setToolType(type) {
-    super.setToolType(type);
+  setToolType(s) {
+    super.setToolType(s);
   }
   /**
    * 手动创建多个节点
    * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
    */
-  createNodes(nodes) {
-    super.createNodes(nodes);
+  createNodes(s, t) {
+    super.createNodes(s, t);
   }
   /**
    * 根据 ID 获取节点
    */
-  getNodeById(id) {
-    const nodes = this.getState().nodes || [];
-    const node = nodes.find((n) => n.id === id);
-    return node || null;
+  getNodeById(s) {
+    return (this.getState().nodes || []).find((n) => n.id === s) || null;
   }
   /**
    * 更新视口位置
    */
-  updateViewport(viewport, addToHistory = false) {
-    super.updateViewport(viewport, addToHistory);
+  updateViewport(s, t = !1) {
+    super._updateViewport(s, t);
   }
   /**
    * 创建图片节点
    */
-  createImageNode(imageUrl, position) {
-    const pos = position ?? { x: 100, y: 100 };
-    const imageNode = {
-      id: v4(),
-      type: "image",
-      props: {
-        x: pos.x,
-        y: pos.y,
-        width: void 0,
-        height: void 0,
-        rotation: 0,
-        visible: true
-      },
-      style: {
-        color: "#000000",
-        line: "solid",
-        size: "medium",
-        opacity: 1
-      },
-      meta: {
-        imageUrl
-      }
+  createImageNode(s, t) {
+    const i = t ?? { x: 100, y: 100 }, n = {
+      id: ut(),
+      $_type: "image",
+      x: i.x,
+      y: i.y,
+      $_imageUrl: s
     };
-    this.createNodes([imageNode]);
+    this.createNodes([n], !0);
   }
   /**
    * 导出全部图形为图片
    * @param options - 导出配置
    * @returns DataURL 格式的图片数据
    */
-  exportAsImage(options) {
-    const stage = this.getStage();
-    const transformer = this.getCanvasTransformer().getTransformer();
-    const transformerVisible = transformer.visible();
-    transformer.visible(false);
+  exportAsImage(s) {
+    const t = this.getStage(), i = this.getCanvasTransformer().getTransformer(), n = i.visible();
+    i.visible(!1);
     try {
-      return stage.toDataURL({
-        pixelRatio: options?.pixelRatio ?? 2,
-        mimeType: options?.mimeType ?? "image/png",
-        quality: options?.quality ?? 1
+      return t.toDataURL({
+        pixelRatio: s?.pixelRatio ?? 2,
+        mimeType: s?.mimeType ?? "image/png",
+        quality: s?.quality ?? 1
       });
     } finally {
-      transformer.visible(transformerVisible);
+      i.visible(n);
     }
   }
   /**
@@ -1773,107 +1294,75 @@ class CanvasApi extends CanvasCore {
    * @param options - 导出配置
    * @returns DataURL 格式的图片数据，如果没有选区则返回 null
    */
-  exportSelectionAsImage(options) {
-    const selectedNodeIds = this.getState().selectedNodeIds || [];
-    if (selectedNodeIds.length === 0) {
-      console.warn("No selection to export");
-      return null;
-    }
-    const padding = options?.padding ?? 0;
-    const tempGroup = new Konva.Group();
-    selectedNodeIds.forEach((id) => {
-      const shape = this.getStage().findOne(`#${id}`);
-      if (shape) {
-        const clone = shape.clone();
-        tempGroup.add(clone);
+  exportSelectionAsImage(s) {
+    const t = this.getState().selectedNodeIds || [];
+    if (t.length === 0)
+      return console.warn("No selection to export"), null;
+    const i = s?.padding ?? 0, n = new D.Group();
+    t.forEach((h) => {
+      const c = this.getStage().findOne(`#${h}`);
+      if (c) {
+        const g = c.clone();
+        n.add(g);
       }
     });
-    const box = tempGroup.getClientRect();
-    const dataURL = tempGroup.toDataURL({
-      x: box.x - padding,
-      y: box.y - padding,
-      width: box.width + padding * 2,
-      height: box.height + padding * 2,
-      pixelRatio: options?.pixelRatio ?? 2,
-      mimeType: options?.mimeType ?? "image/png",
-      quality: options?.quality ?? 1
+    const r = n.getClientRect(), a = n.toDataURL({
+      x: r.x - i,
+      y: r.y - i,
+      width: r.width + i * 2,
+      height: r.height + i * 2,
+      pixelRatio: s?.pixelRatio ?? 2,
+      mimeType: s?.mimeType ?? "image/png",
+      quality: s?.quality ?? 1
     });
-    tempGroup.destroy();
-    return dataURL;
+    return n.destroy(), a;
   }
   /**
    * 导出带有标注的图片节点为图片
    * @param id - 图片节点 ID
    * @returns DataURL 格式的图片数据，如果节点或者 marker 不存在则返回 null
    */
-  exportImageWithMarker(id, options) {
-    const imageShape = this.getStage().findOne(`#${id}`);
-    if (!imageShape) {
-      console.warn("Image shape not found on stage");
-      return null;
-    }
-    const nodes = this.getState().nodes || [];
-    const markerNodes = nodes.filter(
-      (n) => n.type === "image-marker" && n.meta.parent === id
+  exportImageWithMarker(s, t) {
+    const i = this.getStage().findOne(`#${s}`);
+    if (!i)
+      return console.warn("Image shape not found on stage"), null;
+    const r = (this.getState().nodes || []).filter(
+      (m) => m.$_type === "image-marker" && m.$_parentId === s
     );
-    if (markerNodes.length === 0) {
-      console.warn("No image-marker nodes found for the given image ID");
-      return null;
-    }
-    const tempGroup = new Konva.Group();
-    const imageClone = imageShape.clone();
-    tempGroup.add(imageClone);
-    markerNodes.forEach((markerNode) => {
-      const markerShape = this.getStage().findOne(`#${markerNode.id}`);
-      if (markerShape) {
-        const markerClone = markerShape.clone();
-        const rect = markerClone.findOne(".rect");
-        const markerGroup = markerClone.findOne(".marker-group");
-        if (rect) {
-          rect.strokeWidth(3);
-          rect.dash([5, 5]);
-          rect.cornerRadius(6);
-        }
-        if (markerGroup) {
-          const circle = markerGroup.findOne("Circle");
-          const text = markerGroup.findOne("Text");
-          if (circle) {
-            circle.radius(14);
-            circle.strokeWidth(3);
-          }
-          if (text) {
-            const radius = 14;
-            text.x(-radius);
-            text.y(-radius);
-            text.width(radius * 2);
-            text.height(radius * 2);
-            text.fontSize(16);
-          }
+    if (r.length === 0)
+      return console.warn("No image-marker nodes found for the given image ID"), null;
+    const a = new D.Group(), h = i.clone();
+    a.add(h), r.forEach((m) => {
+      const p = this.getStage().findOne(`#${m.id}`);
+      if (p) {
+        const f = p.clone(), x = f.findOne(".rect"), w = f.findOne(".marker-group");
+        if (x && (x.strokeWidth(3), x.dash([5, 5]), x.cornerRadius(6)), w) {
+          const b = w.findOne("Circle"), _ = w.findOne("Text");
+          b && (b.radius(14), b.strokeWidth(3)), _ && (_.x(-14), _.y(-14), _.width(28), _.height(28), _.fontSize(16));
         }
-        tempGroup.add(markerClone);
+        a.add(f);
       }
     });
-    const box = tempGroup.getClientRect();
-    console.log("Exporting image with markers, bounding box:", box);
-    const dataURL = tempGroup.toDataURL({
-      x: box.x,
-      y: box.y,
-      width: box.width,
-      height: box.height,
-      pixelRatio: options?.pixelRatio ?? 2,
-      mimeType: options?.mimeType ?? "image/png",
-      quality: options?.quality ?? 1
+    const c = a.getClientRect();
+    console.log("Exporting image with markers, bounding box:", c);
+    const g = a.toDataURL({
+      x: c.x,
+      y: c.y,
+      width: c.width,
+      height: c.height,
+      pixelRatio: t?.pixelRatio ?? 2,
+      mimeType: t?.mimeType ?? "image/png",
+      quality: t?.quality ?? 1
     });
-    tempGroup.destroy();
-    return dataURL;
+    return a.destroy(), g;
   }
   /**
    * 删除当前选中的节点
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
    */
   deleteSelectedNodes() {
-    const selectedNodeIds = this.getState().selectedNodeIds || [];
-    this.deleteNodes(selectedNodeIds);
+    const s = this.getState().selectedNodeIds || [];
+    this.deleteNodes(s);
   }
   /**
    * 删除指定的节点
@@ -1881,31 +1370,25 @@ class CanvasApi extends CanvasCore {
    * @param nodeIds - 要删除的节点 ID 数组
    * @returns 被删除的节点数据数组
    */
-  deleteNodes(nodeIds) {
-    return super.deleteNodes(nodeIds);
+  deleteNodes(s) {
+    return super.deleteNodes(s);
   }
   /**
    * 将节点移动到最上层
    */
-  moveNodesToTop(nodeIds) {
-    if (nodeIds.length === 0) return;
-    nodeIds.forEach((id) => {
-      const shape = this.getStage().findOne(`#${id}`);
-      if (shape) {
-        shape.moveToTop();
-      }
+  moveNodesToTop(s) {
+    s.length !== 0 && s.forEach((t) => {
+      const i = this.getStage().findOne(`#${t}`);
+      i && i.moveToTop();
     });
   }
   /**
    * 将节点移动到最下层
    */
-  moveNodesToBottom(nodeIds) {
-    if (nodeIds.length === 0) return;
-    nodeIds.forEach((id) => {
-      const shape = this.getStage().findOne(`#${id}`);
-      if (shape) {
-        shape.moveToBottom();
-      }
+  moveNodesToBottom(s) {
+    s.length !== 0 && s.forEach((t) => {
+      const i = this.getStage().findOne(`#${t}`);
+      i && i.moveToBottom();
     });
   }
   /**
@@ -1918,79 +1401,52 @@ class CanvasApi extends CanvasCore {
    * @param options.scale - 是否自动调整缩放以适应内容，默认 false
    * @param options.nodeIds - 要滚动到的节点 ID 数组
    */
-  scrollToContent(options) {
-    const nodes = this.getState().nodes || [];
-    if (nodes.length === 0) return;
-    const padding = options?.padding ?? 50;
-    const shouldScale = options?.scale === true;
-    const targetNodeIds = options?.nodeIds;
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    const mainLayer = this.getMainLayer();
-    const selectedNodeIds = this.getState().selectedNodeIds || [];
-    const hasTargetIds = targetNodeIds && targetNodeIds.length > 0;
-    const hasSelection = !hasTargetIds && selectedNodeIds.length > 0;
-    const idsToShow = hasTargetIds ? targetNodeIds : hasSelection ? selectedNodeIds : null;
-    mainLayer.children.forEach((child) => {
-      if (child.visible() && child.getClassName() !== "Transformer" && child.hasName(NODE_NAMES.selectable)) {
-        if (idsToShow) {
-          const id = child.id();
-          if (!idsToShow.includes(id)) return;
-        }
-        const attrs = child.getAttrs();
-        const x2 = attrs.x || 0;
-        const y2 = attrs.y || 0;
-        const width = attrs.width || 0;
-        const height = attrs.height || 0;
-        const rotation = attrs.rotation || 0;
-        if (rotation) {
-          const box = child.getClientRect({ skipTransform: false });
-          const stage = this.getStage();
-          const currentScale = stage.scaleX();
-          const currentX = stage.x();
-          const currentY = stage.y();
-          const worldMinX = (box.x - currentX) / currentScale;
-          const worldMinY = (box.y - currentY) / currentScale;
-          const worldMaxX = (box.x + box.width - currentX) / currentScale;
-          const worldMaxY = (box.y + box.height - currentY) / currentScale;
-          minX = Math.min(minX, worldMinX);
-          minY = Math.min(minY, worldMinY);
-          maxX = Math.max(maxX, worldMaxX);
-          maxY = Math.max(maxY, worldMaxY);
-        } else {
-          minX = Math.min(minX, x2);
-          minY = Math.min(minY, y2);
-          maxX = Math.max(maxX, x2 + width);
-          maxY = Math.max(maxY, y2 + height);
+  scrollToContent(s) {
+    if ((this.getState().nodes || []).length === 0) return;
+    const i = s?.padding ?? 50, n = s?.scale === !0, r = s?.nodeIds;
+    let a = 1 / 0, h = 1 / 0, c = -1 / 0, g = -1 / 0;
+    const m = this.getMainLayer(), p = this.getState().selectedNodeIds || [], f = r && r.length > 0, x = !f && p.length > 0, w = f ? r : x ? p : null;
+    if (m.children.forEach((A) => {
+      if (A.visible() && A.getClassName() !== "Transformer" && A.hasName(U.selectable)) {
+        if (w) {
+          const F = A.id();
+          if (!w.includes(F)) return;
         }
+        const K = A.getAttrs(), Wt = K.x || 0, Vt = K.y || 0, ne = K.width || 0, re = K.height || 0;
+        if (K.rotation || 0) {
+          const F = A.getClientRect({ skipTransform: !1 }), Rt = this.getStage(), mt = Rt.scaleX(), Lt = Rt.x(), Bt = Rt.y(), oe = (F.x - Lt) / mt, ae = (F.y - Bt) / mt, he = (F.x + F.width - Lt) / mt, ce = (F.y + F.height - Bt) / mt;
+          a = Math.min(a, oe), h = Math.min(h, ae), c = Math.max(c, he), g = Math.max(g, ce);
+        } else
+          a = Math.min(a, Wt), h = Math.min(h, Vt), c = Math.max(c, Wt + ne), g = Math.max(g, Vt + re);
       }
-    });
-    if (minX === Infinity || minY === Infinity) return;
-    const contentWidth = maxX - minX;
-    const contentHeight = maxY - minY;
-    const contentCenterX = minX + contentWidth / 2;
-    const contentCenterY = minY + contentHeight / 2;
-    const viewport = this.getState().viewport;
-    let newScale = viewport.scale;
-    if (shouldScale) {
-      const scaleX = (viewport.width - padding * 2) / contentWidth;
-      const scaleY = (viewport.height - padding * 2) / contentHeight;
-      newScale = Math.min(scaleX, scaleY, 1);
+    }), a === 1 / 0 || h === 1 / 0) return;
+    const b = c - a, _ = g - h, M = a + b / 2, Tt = h + _ / 2, q = this.getState().viewport;
+    let G = q.scale;
+    if (n) {
+      const A = (q.width - i * 2) / b, K = (q.height - i * 2) / _;
+      G = Math.min(A, K, 1);
     }
-    const x = viewport.width / 2 - contentCenterX * newScale;
-    const y = viewport.height / 2 - contentCenterY * newScale;
-    this.updateViewport({ x, y, scale: newScale }, true);
+    const nt = q.width / 2 - M * G, Zt = q.height / 2 - Tt * G;
+    this.updateViewport({ x: nt, y: Zt, scale: G }, !0);
+  }
+  /**
+   * 导出当前状态
+   */
+  save() {
+    return this.getState();
+  }
+  /**
+   * 从状态中恢复画布
+   */
+  restore(s) {
+    this._renderCanvas(s);
   }
 }
-function modulate(value, rangeA, rangeB, clamp2 = false) {
-  const [fromLow, fromHigh] = rangeA;
-  const [v0, v1] = rangeB;
-  const result = v0 + (value - fromLow) / (fromHigh - fromLow) * (v1 - v0);
-  return clamp2 ? v0 < v1 ? Math.max(Math.min(result, v1), v0) : Math.max(Math.min(result, v0), v1) : result;
+function ze(o, s, t, i = !1) {
+  const [n, r] = s, [a, h] = t, c = a + (o - n) / (r - n) * (h - a);
+  return i ? a < h ? Math.max(Math.min(c, h), a) : Math.max(Math.min(c, a), h) : c;
 }
-const gridSteps = [
+const qt = [
   {
     min: -1,
     mid: 0.15,
@@ -2012,20 +1468,15 @@ const gridSteps = [
     step: 1
   }
 ];
-function GridBackground({
-  viewportX,
-  viewportY,
-  scale,
-  size = 20,
-  showGrid = true
+function Ye({
+  viewportX: o,
+  viewportY: s,
+  scale: t,
+  size: i = 20,
+  showGrid: n = !0
 }) {
-  const x = viewportX / scale;
-  const y = viewportY / scale;
-  const z = scale;
-  if (!showGrid) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(
+  const r = o / t, a = s / t, h = t;
+  return n ? /* @__PURE__ */ st(
     "svg",
     {
       className: "canvas-grid w-full h-full absolute top-0 left-0",
@@ -2033,43 +1484,38 @@ function GridBackground({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx("defs", { children: gridSteps.map(({ min, mid, step }, i) => {
-          const s = step * size * z;
-          const xo = 0.5 + x * z;
-          const yo = 0.5 + y * z;
-          const gxo = xo > 0 ? xo % s : s + xo % s;
-          const gyo = yo > 0 ? yo % s : s + yo % s;
-          const opacity = z < mid ? modulate(z, [min, mid], [0, 1]) : 1;
-          return /* @__PURE__ */ jsx(
+        /* @__PURE__ */ S("defs", { children: qt.map(({ min: c, mid: g, step: m }, p) => {
+          const f = m * i * h, x = 0.5 + r * h, w = 0.5 + a * h, b = x > 0 ? x % f : f + x % f, _ = w > 0 ? w % f : f + w % f, M = h < g ? ze(h, [c, g], [0, 1]) : 1;
+          return /* @__PURE__ */ S(
             "pattern",
             {
-              id: `grid_${step}`,
-              width: s,
-              height: s,
+              id: `grid_${m}`,
+              width: f,
+              height: f,
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ S(
                 "circle",
                 {
-                  className: "tl-grid-dot",
-                  cx: gxo,
-                  cy: gyo,
+                  className: "grid-dot",
+                  cx: b,
+                  cy: _,
                   r: 1,
-                  opacity
+                  opacity: M
                 }
               )
             },
-            i
+            p
           );
         }) }),
-        gridSteps.map(({ step }, i) => /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#grid_${step})` }, i))
+        qt.map(({ step: c }, g) => /* @__PURE__ */ S("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, g))
       ]
     }
-  );
+  ) : null;
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+function Oe(...o) {
+  return xe(ye(o));
 }
-const buttonVariants = cva(
+const Xe = pe(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -2096,162 +1542,148 @@ const buttonVariants = cva(
     }
   }
 );
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
+function ot({
+  className: o,
+  variant: s = "default",
+  size: t = "default",
+  asChild: i = !1,
+  ...n
 }) {
-  const Comp = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsx(
-    Comp,
+  return /* @__PURE__ */ S(
+    i ? fe : "button",
     {
       "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      "data-variant": s,
+      "data-size": t,
+      className: Oe(Xe({ variant: s, size: t, className: o })),
+      ...n
     }
   );
 }
-function ZoomPanel({ api }) {
-  const [viewport, setViewport] = useState(api.getState().viewport);
-  useEffect(() => {
-    api.on("viewport:change", (newViewport) => {
-      setViewport(newViewport);
+function Pe({ api: o }) {
+  const [s, t] = at(o.getState().viewport);
+  Pt(() => {
+    o.on("viewport:change", (c) => {
+      t(c);
     });
-  }, [setViewport, api]);
-  const updateScale = (scale) => {
-    const halfWidth = viewport.width / 2;
-    const halfHeight = viewport.height / 2;
-    const worldCenterX = (halfWidth - viewport.x) / viewport.scale;
-    const worldCenterY = (halfHeight - viewport.y) / viewport.scale;
-    const x = halfWidth - worldCenterX * scale;
-    const y = halfHeight - worldCenterY * scale;
-    api.updateViewport({ x, y, scale });
-  };
-  const handleZoomIn = () => {
-    const scale = Math.min(viewport.scale * 1.2, 5);
-    updateScale(scale);
-  };
-  const handleZoomOut = () => {
-    const scale = Math.max(viewport.scale / 1.2, 0.1);
-    updateScale(scale);
-  };
-  const handleReset = () => {
-    updateScale(1);
-  };
-  const percent = Math.round(viewport.scale * 100);
-  return /* @__PURE__ */ jsxs("div", { className: "zoom-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      Button,
+  }, [t, o]);
+  const i = (c) => {
+    const g = s.width / 2, m = s.height / 2, p = (g - s.x) / s.scale, f = (m - s.y) / s.scale, x = g - p * c, w = m - f * c;
+    o.updateViewport({ x, y: w, scale: c });
+  }, n = () => {
+    const c = Math.min(s.scale * 1.2, 5);
+    i(c);
+  }, r = () => {
+    const c = Math.max(s.scale / 1.2, 0.1);
+    i(c);
+  }, a = () => {
+    i(1);
+  }, h = Math.round(s.scale * 100);
+  return /* @__PURE__ */ st("div", { className: "zoom-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ S(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleZoomOut,
+        onClick: r,
         title: "缩小",
-        children: /* @__PURE__ */ jsx(Minus, {})
+        children: /* @__PURE__ */ S(we, {})
       }
     ),
-    /* @__PURE__ */ jsxs(
-      Button,
+    /* @__PURE__ */ st(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleReset,
-        title: `${percent}%`,
+        onClick: a,
+        title: `${h}%`,
         className: "min-w-16",
         children: [
-          percent,
+          h,
           "%"
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ S(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleZoomIn,
+        onClick: n,
         title: "放大",
-        children: /* @__PURE__ */ jsx(Plus, {})
+        children: /* @__PURE__ */ S(ve, {})
       }
     )
   ] });
 }
-function HistoryPanel({ api }) {
-  const [canUndo, setCanUndo] = useState(api.canUndo());
-  const [canRedo, setCanRedo] = useState(api.canRedo());
-  useEffect(() => {
-    const handleStateChange = () => {
-      setCanUndo(api.canUndo());
-      setCanRedo(api.canRedo());
+function Ue({ api: o }) {
+  const [s, t] = at(o.canUndo()), [i, n] = at(o.canRedo());
+  return Pt(() => {
+    const r = () => {
+      t(o.canUndo()), n(o.canRedo());
     };
-    api.on("state:change", handleStateChange);
-    return () => {
-      api.off("state:change", handleStateChange);
+    return o.on("state:change", r), () => {
+      o.off("state:change", r);
     };
-  }, [api]);
-  return /* @__PURE__ */ jsxs("div", { className: "history-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      Button,
+  }, [o]), /* @__PURE__ */ st("div", { className: "history-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ S(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !canUndo,
-        onClick: () => api.undo(),
+        disabled: !s,
+        onClick: () => o.undo(),
         title: "撤销",
-        children: /* @__PURE__ */ jsx(Undo2, {})
+        children: /* @__PURE__ */ S(Ne, {})
       }
     ),
-    /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ S(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !canRedo,
-        onClick: () => api.redo(),
+        disabled: !i,
+        onClick: () => o.redo(),
         title: "重做",
-        children: /* @__PURE__ */ jsx(Redo2, {})
+        children: /* @__PURE__ */ S(Se, {})
       }
     )
   ] });
 }
-function PureCanvas({ setApi }) {
-  const containerRef = useRef(null);
-  const [_api, _setApi] = useState(null);
-  const [viewport, setViewport] = useState({ x: 0, y: 0, scale: 1 });
-  useEffect(() => {
-    if (!containerRef.current) return;
-    const core = new CanvasApi(containerRef.current);
-    _setApi(core);
-    setApi?.(core);
-    core.on("viewport:change", (newViewport) => {
-      setViewport(newViewport);
-    });
-    return () => {
-      core.dispose();
+function ts({ setApi: o }) {
+  const s = me(null), [t, i] = at(null), [n, r] = at({ x: 0, y: 0, scale: 1 });
+  return Pt(() => {
+    if (!s.current) return;
+    const a = new Ae(s.current);
+    return i(a), o?.(a), a.on("viewport:change", (h) => {
+      r(h);
+    }), () => {
+      a.dispose();
     };
-  }, [setApi]);
-  return /* @__PURE__ */ jsxs("div", { className: "pure-canvas relative size-full", children: [
-    /* @__PURE__ */ jsx(
-      GridBackground,
+  }, [o]), /* @__PURE__ */ st("div", { className: "whiteboard relative size-full", children: [
+    /* @__PURE__ */ S(
+      Ye,
+      {
+        viewportX: n.x,
+        viewportY: n.y,
+        scale: n.scale
+      }
+    ),
+    /* @__PURE__ */ S(
+      "div",
       {
-        viewportX: viewport.x,
-        viewportY: viewport.y,
-        scale: viewport.scale
+        ref: s,
+        className: "whiteboard-container size-full outline-none"
       }
     ),
-    /* @__PURE__ */ jsx("div", { ref: containerRef, className: "size-full" }),
-    _api && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ jsx(HistoryPanel, { api: _api }) }),
-      /* @__PURE__ */ jsx("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ jsx(ZoomPanel, { api: _api }) })
+    t && /* @__PURE__ */ st(ge, { children: [
+      /* @__PURE__ */ S("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ S(Ue, { api: t }) }),
+      /* @__PURE__ */ S("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ S(Pe, { api: t }) })
     ] })
   ] });
 }
 export {
-  CanvasApi,
-  NODE_NAMES,
-  PureCanvas
+  Ae as CanvasApi,
+  U as NODE_NAMES,
+  ts as Whiteboard
 };