npm - @8btc/whiteboard - Versions diffs - 0.0.18 → 0.0.19-beta.1 - Mend

@8btc/whiteboard 0.0.18 → 0.0.19-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -1,595 +1,518 @@
-var __defProp = Object.defineProperty;
-var __typeError = (msg) => {
-  throw TypeError(msg);
+var xe = Object.defineProperty;
+var jt = (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 we = (o, s, t) => s in o ? xe(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
+var z = (o, s, t) => we(o, typeof s != "symbol" ? s + "" : s, t), Ot = (o, s, t) => s.has(o) || jt("Cannot " + t);
+var e = (o, s, t) => (Ot(o, s, "read from private field"), t ? t.call(o) : s.get(o)), d = (o, s, t) => s.has(o) ? jt("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(o) : s.set(o, t), l = (o, s, t, i) => (Ot(o, s, "write to private field"), i ? i.call(o, t) : s.set(o, t), t), b = (o, s, t) => (Ot(o, s, "access private method"), t);
+import { jsxs as it, jsx as N, Fragment as ve } from "react/jsx-runtime";
+import { useState as ht, useEffect as Wt, useRef as Se } from "react";
+import D from "konva";
+import Ne from "mitt";
+import { R as w, N as A, I as tt } from "./const-Das6lRi-.js";
+import { v4 as pt } from "uuid";
+import { Slot as _e } from "@radix-ui/react-slot";
+import { cva as be } from "class-variance-authority";
+import { clsx as Me } from "clsx";
+import { twMerge as Ie } from "tailwind-merge";
+import { Minus as Ce, Plus as Ee, Undo2 as ke, Redo2 as Te } from "lucide-react";
+var y, p, V, yt, xt, wt, vt, St, Nt, _t, bt, ie;
+class $e {
+  constructor(s, t) {
+    d(this, bt);
+    d(this, y);
+    d(this, p);
+    d(this, V, { 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, yt, (s) => {
+      s.evt.preventDefault();
+      const i = e(this, p).getPointerPosition();
+      if (i)
+        if (s.evt.ctrlKey) {
+          const n = e(this, V).scale, r = {
+            x: (i.x - e(this, V).x) / n,
+            y: (i.y - e(this, V).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 u = 0; u < c; u++)
+            g = h > 0 ? g * a : g / a;
+          const m = Math.max(0.1, Math.min(5, g)), f = {
+            x: i.x - r.x * m,
+            y: i.y - r.y * m
+          };
+          e(this, y)._updateViewport({ x: f.x, y: f.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, V).x - n,
+            y: e(this, V).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, xt, (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, p).getRelativePointerPosition();
+      if (e(this, y)._setDrawingPosition(i || { x: 0, y: 0 }), t === "select")
+        if (s.target === e(this, p)) {
+          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, wt, () => {
+      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, p).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, vt, () => {
+      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, St, (s) => {
+      if (s.target !== e(this, p))
         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, Nt, (s) => {
+      s.target === e(this, p) && e(this, y)._updateViewport({
+        x: e(this, p).x(),
+        y: e(this, p).y()
       });
-      this.resetCursor();
     });
-    __privateSet(this, _core, core);
-    __privateSet(this, _stage, new Konva.Stage({
-      container: config.container,
-      width: config.width,
-      height: config.height,
+    d(this, _t, (s) => {
+      s.target === e(this, p) && (e(this, y)._updateViewport({
+        x: e(this, p).x(),
+        y: e(this, p).y()
+      }), this.resetCursor());
+    });
+    l(this, y, s), l(this, p, 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
+    })), b(this, bt, ie).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
    */
   getStage() {
-    return __privateGet(this, _stage);
+    return e(this, p);
   }
   /**
    * 获取当前视口状态
    */
   getViewport() {
-    return { ...__privateGet(this, _viewport) };
+    return { ...e(this, V) };
   }
   /**
    * 设置视口（包括位置、缩放和尺寸）
    */
-  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, V), ...s };
+    l(this, V, t), s.x !== void 0 && e(this, p).x(s.x), s.y !== void 0 && e(this, p).y(s.y), s.scale !== void 0 && (e(this, p).scaleX(s.scale), e(this, p).scaleY(s.scale));
   }
   /**
    * 设置是否可拖拽
    */
-  setDraggable(draggable) {
-    __privateGet(this, _stage).draggable(draggable);
+  setDraggable(s) {
+    e(this, p).draggable(s);
   }
   /**
    * 设置光标样式
    */
-  setCursor(cursor) {
-    const container = __privateGet(this, _stage).container();
-    container.style.cursor = cursor;
+  setCursor(s) {
+    const t = e(this, p).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, p).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, p).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(), p = new WeakMap(), V = new WeakMap(), yt = new WeakMap(), xt = new WeakMap(), wt = new WeakMap(), vt = new WeakMap(), St = new WeakMap(), Nt = new WeakMap(), _t = new WeakMap(), bt = 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));
+ie = function() {
+  e(this, p).on("wheel", e(this, yt)), e(this, p).on("pointerdown", e(this, xt)), e(this, p).on("pointermove", e(this, wt)), e(this, p).on("pointerup", e(this, vt)), e(this, p).on("dragstart", e(this, St)), e(this, p).on("dragmove", e(this, Nt)), e(this, p).on("dragend", e(this, _t));
 };
-class CanvasTransformer {
-  constructor(core, config) {
-    __privateAdd(this, _CanvasTransformer_instances);
-    __privateAdd(this, _core2);
-    __privateAdd(this, _transformer);
+var ct, S, Mt, It, Ct, Et, kt, Tt, $t, ne;
+class Re {
+  constructor(s, t) {
+    d(this, $t);
+    d(this, ct);
+    d(this, S);
     /**
      * 处理 transformstart 事件
      */
-    __privateAdd(this, _handleTransformStart, () => {
+    d(this, Mt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transform 事件
      */
-    __privateAdd(this, _handleTransform, () => {
+    d(this, It, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transformend 事件
      */
-    __privateAdd(this, _handleTransformEnd, () => {
+    d(this, Ct, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragstart 事件
      */
-    __privateAdd(this, _handleDragStart2, () => {
+    d(this, Et, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragmove 事件
      */
-    __privateAdd(this, _handleDragMove2, () => {
+    d(this, kt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragend 事件
      */
-    __privateAdd(this, _handleDragEnd2, () => {
+    d(this, Tt, () => {
       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, ct, s), l(this, S, 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
+    })), b(this, $t, ne).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return __privateGet(this, _transformer);
+    return e(this, S);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    const nodes = __privateGet(this, _transformer).nodes();
-    if (nodes.length === 0) {
+    if (e(this, S).nodes().length === 0)
       return null;
-    }
-    const box = __privateGet(this, _transformer).getClientRect();
+    const t = e(this, S).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, S).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, S).nodes(s), e(this, S).moveToTop(), this.emitPositionChange();
   }
   /**
    * 获取当前变换的节点
    */
   getNodes() {
-    return __privateGet(this, _transformer).nodes();
+    return e(this, S).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    __privateGet(this, _transformer).nodes([]);
-    __privateGet(this, _transformer).moveToBottom();
-    this.emitPositionChange();
+    e(this, S).nodes([]), e(this, S).moveToBottom(), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
    */
   emitPositionChange() {
-    const position = this.getPosition();
-    __privateGet(this, _core2).emitEvent("transformer:positionChange", position);
+    const s = this.getPosition();
+    e(this, ct)._emit("transformer:positionChange", s);
   }
   /**
    * 销毁 Transformer
    */
   destroy() {
-    __privateGet(this, _transformer).destroy();
+    e(this, S).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();
-/**
+ct = new WeakMap(), S = new WeakMap(), Mt = new WeakMap(), It = new WeakMap(), Ct = new WeakMap(), Et = new WeakMap(), kt = new WeakMap(), Tt = new WeakMap(), $t = 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));
+ne = function() {
+  e(this, S).on("transformstart", e(this, Mt)), e(this, S).on("transform", e(this, It)), e(this, S).on("transformend", e(this, Ct)), e(this, S).on("dragstart", e(this, Et)), e(this, S).on("dragmove", e(this, kt)), e(this, S).on("dragend", e(this, Tt));
 };
-class CanvasState {
-  constructor(initialState) {
-    __publicField(this, "_past", []);
-    __publicField(this, "_present");
-    __publicField(this, "_future", []);
-    __publicField(this, "_emitter");
-    this._present = initialState;
-    this._emitter = mitt();
+var k, T, X, $;
+class De {
+  // todo: 优化 selectedNodeIds 的存储和查询性能
+  // private _selectedNodeIds: Set<string> = new Set();
+  constructor(s) {
+    d(this, k, []);
+    d(this, T);
+    d(this, X, []);
+    d(this, $);
+    l(this, T, s), l(this, $, Ne());
   }
   /**
    * 获取当前状态
    */
   getState() {
-    return { ...this._present };
+    return { ...e(this, T) };
   }
   /**
    * 获取完整历史状态
    */
   getHistory() {
     return {
-      past: [...this._past],
-      present: { ...this._present },
-      future: [...this._future]
+      past: [...e(this, k)],
+      present: { ...e(this, T) },
+      future: [...e(this, X)]
     };
   }
   /**
    * 是否可以撤销
    */
   canUndo() {
-    return this._past.length > 0;
+    return e(this, k).length > 0;
   }
   /**
    * 是否可以重做
    */
   canRedo() {
-    return this._future.length > 0;
+    return e(this, X).length > 0;
   }
   /**
    * 订阅状态事件
    */
-  on(event, handler) {
-    this._emitter.on(event, handler);
+  on(s, t) {
+    e(this, $).on(s, t);
   }
   /**
    * 取消订阅状态事件
    */
-  off(event, handler) {
-    this._emitter.off(event, handler);
+  off(s, t) {
+    e(this, $).off(s, t);
   }
   /**
+   * @internal
    * 发送事件
    */
-  emit(event, data) {
-    this._emitter.emit(event, data);
+  _emit(s, t) {
+    e(this, $).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, k).length === 0) return;
+    const s = e(this, k)[e(this, k).length - 1], t = e(this, k).slice(0, e(this, k).length - 1);
+    l(this, k, t), l(this, X, [e(this, T), ...e(this, X)]), l(this, T, s), this._renderCanvas(s), e(this, $).emit("state:undo", s), e(this, $).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, X).length === 0) return;
+    const s = e(this, X)[0], t = e(this, X).slice(1);
+    l(this, k, [...e(this, k), e(this, T)]), l(this, X, t), l(this, T, s), this._renderCanvas(s), e(this, $).emit("state:redo", s), e(this, $).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, k, []), l(this, X, []), e(this, $).emit("state:reset", e(this, T)), e(this, $).emit("state:change", e(this, T));
   }
   /**
    * 更新状态
    * @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, T), ...s };
+    t && (l(this, k, [...e(this, k), e(this, T)]), l(this, X, [])), l(this, T, i), e(this, $).emit("state:change", i);
   }
   /**
    * 清理资源
    */
   _dispose() {
-    this._emitter.all.clear();
+    e(this, $).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
+k = new WeakMap(), T = new WeakMap(), X = new WeakMap(), $ = new WeakMap();
+class Vt {
+}
+const Ae = {
+  // used by RectNode
+  stroke: "$_strokeColor"
+}, Oe = {
+  "theme.select-rect-border": "rgb(33, 150, 243)",
+  "theme.select-rect-fill": "rgba(33, 150, 243, 0.2)",
+  "theme.image-marker-color": "#F44336",
+  "theme.stroke-color.1": "#000000",
+  // Material Blue
+  "theme.stroke-color.2": "#F44336",
+  // Material Green
+  "theme.stroke-color.3": "#FF9800",
+  // Material Orange
+  "theme.fill-color.1": "#E3F2FD",
+  // Light Blue
+  "theme.fill-color.2": "#E8F5E9",
+  // Light Green
+  "theme.fill-color.3": "#FFF3E0"
+  // Light Orange
+}, Ye = {
+  $_strokeColor: "theme.stroke-color.1"
 };
-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();
-  }
-  /**
-   * 获取 Konva 元素
-   */
-  getElement() {
-    return this.element;
-  }
-  /**
-   * 获取节点数据
-   */
-  getNode() {
-    return this.node;
+function Lt(o, s) {
+  const t = {};
+  return Object.entries(Ae).forEach(([i, n]) => {
+    if (n in o) {
+      const r = o[n];
+      let a = r;
+      r.startsWith("theme.") && (a = s[r]), a && (t[i] = a);
+    }
+  }), t;
+}
+function Jt(o, s) {
+  const t = Math.max(o.width ?? w.MIN_SIZE, w.MIN_SIZE), i = Math.max(o.height ?? w.MIN_SIZE, w.MIN_SIZE), n = Lt(
+    {
+      ...Ye,
+      ...o
+    },
+    s
+  );
+  return {
+    ...o,
+    ...n,
+    cornerRadius: w.CORNER_RADIUS,
+    strokeWidth: 2,
+    width: t,
+    height: i,
+    name: `${A.nodeRoot} ${A.selectable} ${A.rect}`,
+    draggable: !0
+  };
+}
+function ze(o, s) {
+  const t = o.width ?? tt.MIN_SIZE, i = o.height ?? tt.MIN_SIZE, n = Lt(o, s);
+  if (!o.image) {
+    const a = document.createElement("canvas");
+    a.width = t, a.height = i, o.image = a;
   }
+  return {
+    ...o,
+    ...n,
+    name: `${A.nodeRoot} ${A.selectable} ${A.image}`,
+    draggable: !0
+  };
+}
+function Qt(o, s) {
+  const t = Math.max(o.width ?? w.MIN_SIZE, w.MIN_SIZE), i = Math.max(o.height ?? w.MIN_SIZE, w.MIN_SIZE), n = Lt(o, s);
+  return n.markerColor = s["theme.image-marker-color"], {
+    ...o,
+    ...n,
+    width: t,
+    height: i,
+    name: `${A.nodeRoot} ${A.imageMarker} ${o.$_parentId}`
+  };
 }
-function getRectSize(rect) {
+function Xe(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(w.MIN_SIZE, o.width() * o.scaleX()),
+    height: Math.max(w.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 dt, Rt, re;
+class Ze extends Vt {
+  constructor(t, i, n = !1) {
+    super();
+    d(this, Rt);
+    z(this, "core");
+    z(this, "config");
+    z(this, "element");
+    z(this, "isDraft");
+    d(this, dt, (t) => {
+      const i = t === "select";
+      this.element.listening(i);
     });
-    __privateMethod(this, _RectNode_instances, setupEventHandlers_fn).call(this, this.getElement());
+    this.core = t, this.config = Jt(i, this.core.getTheme()), this.element = this.createElement(), this.element.setAttr("$$_canvasNode", this), this.isDraft = n, b(this, Rt, re).call(this, this.getElement());
+  }
+  getID() {
+    return this.config.id;
+  }
+  getConfig() {
+    return this.config;
+  }
+  updateConfigBasedOnElement() {
+    const i = { ...this.getElement().getAttrs(), $$_canvasNode: void 0 };
+    this.config = i;
   }
   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,
-      stroke: "black",
-      strokeWidth: 2
-    };
-    const rect = new Konva.Rect(config);
-    rect.setAttrs({
-      width,
-      height
-    });
-    return rect;
+    return new D.Rect(this.config);
   }
   /**
    * 获取 Konva.Rect 实例
@@ -600,114 +523,80 @@ class RectNode extends BaseCanvasNode {
   /**
    * 更新节点数据
    */
-  updateNode(node) {
-    this.node = {
-      ...this.node,
-      ...node,
-      props: {
-        ...this.node.props,
-        ...node.props
+  updateNode(t) {
+    this.config = Jt(
+      {
+        ...this.config,
+        ...t
       },
-      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);
+      this.core.getTheme()
+    ), this.getElement().setAttrs(t);
   }
   /**
    * 销毁
    */
   destroy() {
-    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler));
-    this.element.destroy();
+    this.core.off("toolType:change", e(this, dt)), this.element.destroy();
   }
 }
-_toolTypeChangeHandler = new WeakMap();
-_RectNode_instances = new WeakSet();
-/**
+dt = new WeakMap(), Rt = 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
-    });
+re = function(t) {
+  const i = t;
+  this.core.on("toolType:change", e(this, dt)), i.on("transform", (n) => {
+    const r = n.target, { width: a, height: h } = Xe(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, Yt, lt, gt, oe, zt;
+class Pe extends Vt {
+  constructor(t, i, n = !1) {
+    super();
+    d(this, H);
+    z(this, "core");
+    z(this, "config");
+    z(this, "element");
+    z(this, "isDraft");
+    d(this, lt, (t) => {
+      const i = t === "select";
+      this.element.listening(i);
     });
-    __privateMethod(this, _ImageNode_instances, loadImage_fn).call(this);
-    __privateMethod(this, _ImageNode_instances, setupEventHandlers_fn2).call(this, this.getElement());
+    d(this, gt, () => {
+      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
+      );
+    });
+    this.core = t, this.config = ze(i, this.core.getTheme()), this.element = this.createElement(), this.element.setAttr("$$_canvasNode", this), this.isDraft = n, b(this, H, Yt).call(this), b(this, H, oe).call(this, this.getElement());
+  }
+  getID() {
+    return this.config.id;
+  }
+  updateConfigBasedOnElement() {
+    const i = {
+      ...this.getElement().getAttrs(),
+      $$_canvasNode: void 0,
+      image: void 0
+    };
+    this.config = i;
   }
   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
-    });
-    return img;
+    return new D.Image(this.config);
   }
   /**
    * 获取 Konva.Image 实例
@@ -718,271 +607,155 @@ 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 && b(this, H, Yt).call(this);
   }
   /**
    * 销毁
    */
   destroy() {
-    this.core.off("toolType:change", __privateGet(this, _toolTypeChangeHandler2));
-    this.element.destroy();
+    this.core.off("toolType:change", e(this, lt)), this.element.destroy();
+  }
+  getConfig() {
+    const t = {
+      ...this.config,
+      $$_canvasNode: void 0,
+      image: void 0
+    };
+    return structuredClone(t);
   }
 }
-_ImageNode_instances = new WeakSet();
-/**
+H = new WeakSet(), /**
  * 加载图片
  */
-loadImage_fn = function() {
-  const imageUrl = this.node.meta.imageUrl;
-  if (!imageUrl) {
+Yt = 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));
+  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, tt.MIN_SIZE)), this.getElement().height(Math.max(r, tt.MIN_SIZE));
+  }, i.onerror = () => {
+    console.error("Failed to load image:", t);
   };
-  img.onerror = () => {
-    console.error("Failed to load image:", imageUrl);
-  };
-};
-_toolTypeChangeHandler2 = new WeakMap();
-/**
+}, lt = new WeakMap(), gt = 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);
+oe = function(t) {
+  this.core.on("toolType:change", e(this, lt)), t.on("transform", (i) => {
+    const n = i.target, r = Math.max(tt.MIN_SIZE, n.width() * n.scaleX()), a = Math.max(tt.MIN_SIZE, n.height() * n.scaleY());
+    n.scale({ x: 1, y: 1 }), n.width(r), n.height(a), b(this, H, zt).call(this);
+  }), t.on("transformend", (i) => {
+    this.updateConfigBasedOnElement(), e(this, gt).call(this);
+  }), t.on("dragmove", () => {
+    b(this, H, zt).call(this);
+  }), t.on("dragend", (i) => {
+    this.updateConfigBasedOnElement(), e(this, gt).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);
-  });
-};
-/**
+}, /**
  * 同步 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 f = g.find((u) => u.id === m.id());
+    if (f?.$_type === "image-marker" && f.$_relativeBox) {
+      const { start: u, end: x } = f.$_relativeBox, v = n + u.ratioX * a, M = r + u.ratioY * h, _ = n + x.ratioX * a, E = r + x.ratioY * h, Dt = Math.min(v, _), Bt = Math.min(M, E), G = Math.abs(_ - v), rt = Math.abs(E - M);
+      m.setAttrs({
+        x: Dt,
+        y: Bt,
+        width: G,
+        height: rt
+      }), m.getChildren().forEach((Y) => {
+        Y.getClassName() === "Rect" ? Y.setAttrs({ width: G, height: rt }) : Y.getClassName() === "Group" && Y.setAttrs({ x: G, y: rt });
+      }), 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 L, R, q, B, et, st, nt, ae, he;
+class Ue extends Vt {
+  constructor(t, i, n = !1) {
+    super();
+    d(this, nt);
+    z(this, "core");
+    z(this, "config");
+    z(this, "element");
+    z(this, "isDraft");
+    d(this, L);
+    d(this, R);
+    d(this, q);
+    d(this, B);
+    d(this, et);
+    d(this, st);
+    this.core = t, this.config = Qt(i, this.core.getTheme()), this.isDraft = n, this.element = this.createElement(), this.element.setAttr("$$_canvasNode", this);
+    const r = this.getElement();
+    l(this, L, r.findOne(".rect")), l(this, R, r.findOne(".marker-group")), l(this, q, e(this, R).findOne("Circle")), l(this, B, e(this, R).findOne("Text")), b(this, nt, he).call(this), l(this, et, () => {
+      b(this, nt, ae).call(this);
+    }), this.core.on("viewport:scale:change", e(this, et)), l(this, st, (a) => {
+      const h = a.includes(this.config.id);
+      this.setFocusState(h);
+    }), this.core.on("nodes:selected", e(this, st));
+  }
+  getID() {
+    return this.config.id;
+  }
+  getConfig() {
+    return this.config;
   }
   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 ?? w.MIN_SIZE, w.MIN_SIZE), i = Math.max(this.config.height ?? w.MIN_SIZE, w.MIN_SIZE), n = new D.Group({
+      id: this.config.id,
+      name: `${A.nodeRoot} ${A.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 = w.CORNER_RADIUS / r, g = new D.Rect({
       name: "rect",
       x: 0,
       y: 0,
-      width,
-      height,
-      stroke: "#F44336",
-      strokeWidth: rectStrokeWidth,
-      dash: rectDash,
-      fill: "transparent",
-      cornerRadius: rectCornerRadius,
-      listening: false
-    });
-    const markerGroup = new Konva.Group({
+      width: t,
+      height: i,
+      stroke: this.config.markerColor,
+      strokeWidth: a,
+      dash: h,
+      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: "#F44336",
+      x: t,
+      y: i,
+      visible: !this.isDraft
+    }), f = 14 / r, u = 3 / r, x = 16 / r, v = new D.Circle({
+      radius: f,
+      fill: this.config.markerColor,
       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: u
+    }), M = new D.Text({
+      x: -f,
+      y: -f,
+      width: f * 2,
+      height: f * 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(v), m.add(M), n.add(g), n.add(m), n;
   }
   /**
    * 获取 Konva.Group 实例
@@ -993,292 +766,197 @@ class ImageMarkerNode extends BaseCanvasNode {
   /**
    * 更新节点数据
    */
-  updateNode(node) {
-    this.node = {
-      ...this.node,
-      ...node,
-      props: {
-        ...this.node.props,
-        ...node.props
-      },
-      style: {
-        ...this.node.style,
-        ...node.style
+  updateNode(t) {
+    this.config = Qt(
+      {
+        ...this.config,
+        ...t
       },
-      meta: {
-        ...this.node.meta,
-        ...node.meta
-      }
-    };
-    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
+      this.core.getTheme()
     );
-    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 ?? w.MIN_SIZE, w.MIN_SIZE), r = Math.max(this.config.height ?? w.MIN_SIZE, w.MIN_SIZE);
+    i.width(n), i.height(r), e(this, L).width(n), e(this, L).height(r), e(this, R).x(n), e(this, R).y(r), t.markerColor && (e(this, L).stroke(t.markerColor), e(this, q).fill(t.markerColor)), t.$_markerNumber !== void 0 && e(this, B).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, et)), this.core.off("nodes:selected", e(this, st)), 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, L).strokeWidth(n), e(this, q).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();
-/**
+L = new WeakMap(), R = new WeakMap(), q = new WeakMap(), B = new WeakMap(), et = new WeakMap(), st = new WeakMap(), nt = 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);
-};
-/**
+ae = function() {
+  const t = this.core.getStageScale(), i = 14 / t, n = 3 / t, r = 16 / t, a = 3 / t, h = [5 / t, 5 / t], c = w.CORNER_RADIUS / t;
+  e(this, L).strokeWidth(a), e(this, L).dash(h), e(this, L).cornerRadius(c), e(this, q).radius(i), e(this, q).strokeWidth(n), e(this, B).x(-i), e(this, B).y(-i), e(this, B).width(i * 2), e(this, B).height(i * 2), e(this, B).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", () => {
+he = 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 te(o, s, t, i = !1) {
+  switch (s) {
     case "rectangle":
-      return new RectNode(core, config, isDraft);
+      return new Ze(o, t, i);
     case "image":
-      return new ImageNode(core, config, isDraft);
+      return new Pe(o, t, i);
     case "image-marker":
-      return new ImageMarkerNode(core, config, isDraft);
+      return new Ue(o, t, i);
     default:
       return null;
   }
 }
-function clamp(value, range) {
-  return Math.min(Math.max(value, range[0]), range[1]);
+function ee(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: "#F44336"
-      }
+const We = (o, s, t) => ({
+  ...t,
+  $_type: o,
+  id: pt(),
+  x: s.x,
+  y: s.y
+});
+function Ve(o, s, t) {
+  let i = s;
+  if (o.$_type === "image-marker" && o.$_bounds) {
+    const n = o.$_bounds;
+    i = {
+      x: ee(s.x, [n.x, n.x + n.width]),
+      y: ee(s.y, [n.y, n.y + n.height])
     };
   }
-  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])
-    };
-  }
-  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] = Xt(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, w.MIN_SIZE),
+      height: Math.max(r.y - n.y, w.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 Xt(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 Le = (o, s) => {
+  if (o.length !== s.length) return !1;
+  const t = new Set(o);
+  return s.every((i) => t.has(i));
+};
+var mt, I, U, W, C, j, Z, P, F, J, ut, O, ce, de, Pt, Ut, le;
+const at = class at extends De {
+  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();
+        scale: 1,
+        ...i?.viewport
       }
+    };
+    super(n);
+    d(this, O);
+    d(this, I);
+    d(this, U);
+    d(this, W);
+    d(this, C, null);
+    d(this, j);
+    d(this, Z, null);
+    d(this, P, null);
+    /** 节点映射，方便快速查找 */
+    d(this, F, /* @__PURE__ */ new Map());
+    d(this, J, null);
+    d(this, ut, (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, U, new D.Layer()), l(this, W, new Re(this)), e(this, I).getStage().add(e(this, U)), e(this, U).add(e(this, W).getTransformer()), this._renderCanvas(n), b(this, O, ce).call(this), b(this, O, de).call(this);
+  }
+  /**
+   * 注册全局主题
+   */
+  static registerTheme(t) {
+    l(at, mt, t);
+  }
+  /**
+   * 获取主题，如果没有注册过返回默认主题
+   */
+  getTheme() {
+    return e(at, mt) ?? Oe;
   }
   /**
    * 获取 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, W);
   }
   /**
    * 获取 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, U);
   }
   /**
    * 获取当前工具类型
@@ -1289,283 +967,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, F).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, W).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) => te(this, r.$_type, r, !1)).filter((r) => r !== null);
+    n.forEach((r) => {
+      e(this, U).add(r.getElement());
+    }), b(this, O, Ut).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((E) => {
+      E.$_type === "image-marker" && typeof E.$_markerNumber == "number" && (h = Math.max(h, E.$_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: "#F44336",
-        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, f = (n.y - r.y) / r.height, u = Math.min(i.x, n.x), x = Math.min(i.y, n.y), v = Math.abs(n.x - i.x), M = Math.abs(n.y - i.y), _ = {
+      id: pt(),
+      $_type: "image-marker",
+      x: u,
+      y: x,
+      width: v,
+      height: M,
+      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, f))
         }
       }
     };
-    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, U).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(), f = h.height();
+      if (t.x >= c && t.x <= c + m && t.y >= g && t.y <= g + f)
+        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, P, [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, P) && (e(this, P)[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, C) && e(this, C).destroy();
+    const n = We(t, e(this, P)[0], i);
+    l(this, C, te(this, t, n, !0)), e(this, C) && e(this, U).add(e(this, C).getElement());
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _updateDraftNode() {
+    if (!e(this, C)) return;
+    const t = e(this, C).getConfig(), i = Ve(
+      t,
+      e(this, P)[1],
+      e(this, P)[0]
+    );
+    e(this, C).updateNode(i);
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _finalizeDraftNode() {
+    if (!e(this, C)) return;
+    const t = pt(), i = e(this, C).getConfig();
+    if (i.$_type === "image-marker" && i.$_parentId) {
+      const r = i.$_bounds, a = e(this, P)[0], h = {
+        x: i.x + (i.width || 0),
+        y: i.y + (i.height || 0)
+      }, [c, g] = Xt(a, h), m = this.getState().nodes || [];
+      let f = 0;
+      m.forEach((E) => {
+        E.$_type === "image-marker" && E.$_parentId === i.$_parentId && typeof E.$_markerNumber == "number" && (f = Math.max(f, E.$_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 u = (c.x - r.x) / r.width, x = (c.y - r.y) / r.height, v = (g.x - r.x) / r.width, M = (g.y - r.y) / r.height, _ = {
+        ...i,
+        $_markerNumber: f + 1,
+        $_relativeBox: {
+          start: {
+            ratioX: Math.max(0, Math.min(1, u)),
+            ratioY: Math.max(0, Math.min(1, x))
+          },
+          end: {
+            ratioX: Math.max(0, Math.min(1, v)),
+            ratioY: Math.max(0, Math.min(1, M))
           }
         },
-        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, C).destroy(), l(this, C, 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, C).destroy(), l(this, C, null), this.setToolType("select");
+  }
+  /**
+   * @internal 仅供内部使用
+   */
+  _createSelectRect() {
+    e(this, Z) && e(this, Z).destroy(), l(this, Z, new D.Rect({
+      x: e(this, P)[0].x,
+      y: e(this, P)[0].y,
+      width: 0,
+      height: 0,
+      stroke: this.getTheme()["theme.select-rect-border"],
+      strokeWidth: 1,
+      fill: this.getTheme()["theme.select-rect-fill"]
+    })), e(this, U).add(e(this, Z));
+  }
+  /*
+   * @internal 仅供内部使用
+   */
+  _updateSelectRect() {
+    if (!e(this, Z)) return;
+    const [t, i] = Xt(...e(this, P));
+    e(this, Z).setAttrs({
+      x: t.x,
+      y: t.y,
+      width: i.x - t.x,
+      height: i.y - t.y
+    });
+    const n = e(this, Z).getClientRect(), a = e(this, U).find(`.${A.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, Z) && (e(this, Z).destroy(), l(this, Z, 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]), !Le(n, r)) {
+      if (r.length === 0)
+        e(this, W).clearNodes();
+      else {
+        const a = this.getStage().find(`.${A.selectable}`).filter((h) => r.includes(h.id()));
+        e(this, W).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 +1215,117 @@ 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();
+    }), b(this, O, le).call(this, Array.from(n), !0), e(this, W).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, ut)), e(this, J) && (e(this, J).disconnect(), l(this, J, null)), this.getCanvasTransformer().destroy(), this.getMainLayer().destroy(), this.getCanvasStage().destroy(), this._dispose();
+  }
+  /**
+   * @internal 仅供内部使用
+   * 在元素节点改变后（例如 tranfromEnd dragEnd）重建 state.nodes
+   */
+  _rebuildStateAfterNodeChange(t, i) {
+    b(this, O, Ut).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
+      },
+      !1
+    ), e(this, F).forEach((n, r) => {
+      n.destroy();
+    }), e(this, F).clear(), this.createNodes(t.nodes || [], !1);
+    const i = t.selectedNodeIds || [];
+    if (i.length === 0)
+      e(this, W).clearNodes();
+    else {
+      const n = this.getStage().find(`.${A.selectable}`).filter((r) => i.includes(r.id()));
+      e(this, W).setNodes(n);
+    }
   }
-}
-_canvasStage = new WeakMap();
-_mainLayer = new WeakMap();
-_canvasTransformer = new WeakMap();
-_draftNode = new WeakMap();
-_container = new WeakMap();
-_handleKeyDown = new WeakMap();
-_CanvasCore_instances = new WeakSet();
-/**
+};
+mt = new WeakMap(), I = new WeakMap(), U = new WeakMap(), W = new WeakMap(), C = new WeakMap(), j = new WeakMap(), Z = new WeakMap(), P = new WeakMap(), F = new WeakMap(), J = new WeakMap(), ut = new WeakMap(), O = new WeakSet(), /**
  * 设置键盘事件监听
  */
-setupKeyboardEvents_fn = function() {
-  __privateGet(this, _container).tabIndex = 0;
-  __privateGet(this, _container).addEventListener("keydown", __privateGet(this, _handleKeyDown));
-};
-class CanvasApi extends CanvasCore {
+ce = function() {
+  e(this, j).tabIndex = 0, e(this, j).addEventListener("keydown", e(this, ut));
+}, /**
+ * 设置尺寸变化监听
+ */
+de = function() {
+  l(this, J, new ResizeObserver((t) => {
+    for (const i of t) {
+      const { width: n, height: r } = i.contentRect, a = this.getStage(), h = this.getState().viewport, c = a.width(), g = a.height(), m = h.x + c / 2, f = h.y + g / 2;
+      a.width(n), a.height(r);
+      const u = m - n / 2, x = f - r / 2;
+      this._updateViewport(
+        {
+          x: u,
+          y: x
+        },
+        !1
+      );
+    }
+  })), e(this, J).observe(e(this, j));
+}, /**
+ * 根据canvas节点映射重建 state.nodes
+ */
+Pt = function(t) {
+  const i = {
+    nodes: Array.from(e(this, F).values()).map((n) => n.getConfig())
+  };
+  this._updateState(i, t);
+}, /**
+ * 更新 state.nodes
+ */
+Ut = function(t, i) {
+  t.forEach((n) => {
+    e(this, F).set(n.getID(), n);
+  }), t.length !== 0 && b(this, O, Pt).call(this, i);
+}, le = function(t, i = !1) {
+  t.forEach((n) => {
+    const r = e(this, F).get(n);
+    r && r.destroy(), e(this, F).delete(n);
+  }), t.length !== 0 && b(this, O, Pt).call(this, i);
+}, /** 全局注册的主题 */
+d(at, mt, null);
+let Zt = at;
+class Be extends Zt {
   /**
    * 获取所有可用的工具类型
    */
@@ -1696,76 +1335,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: pt(),
+      $_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 +1393,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 (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 f = this.getStage().findOne(`#${m.id}`);
+      if (f) {
+        const u = f.clone(), x = u.findOne(".rect"), v = u.findOne(".marker-group");
+        if (x && (x.strokeWidth(3), x.dash([5, 5]), x.cornerRadius(6)), v) {
+          const M = v.findOne("Circle"), _ = v.findOne("Text");
+          M && (M.radius(14), M.strokeWidth(3)), _ && (_.x(-14), _.y(-14), _.width(28), _.height(28), _.fontSize(16));
         }
-        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);
-          }
-        }
-        tempGroup.add(markerClone);
+        a.add(u);
       }
     });
-    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 +1469,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 +1500,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(), f = this.getState().selectedNodeIds || [], u = r && r.length > 0, x = !u && f.length > 0, v = u ? r : x ? f : null;
+    if (m.children.forEach((Y) => {
+      if (Y.visible() && Y.getClassName() !== "Transformer" && Y.hasName(A.selectable)) {
+        if (v) {
+          const K = Y.id();
+          if (!v.includes(K)) return;
         }
+        const Q = Y.getAttrs(), Ht = Q.x || 0, Gt = Q.y || 0, ge = Q.width || 0, me = Q.height || 0;
+        if (Q.rotation || 0) {
+          const K = Y.getClientRect({ skipTransform: !1 }), At = this.getStage(), ft = At.scaleX(), Kt = At.x(), qt = At.y(), ue = (K.x - Kt) / ft, fe = (K.y - qt) / ft, pe = (K.x + K.width - Kt) / ft, ye = (K.y + K.height - qt) / ft;
+          a = Math.min(a, ue), h = Math.min(h, fe), c = Math.max(c, pe), g = Math.max(g, ye);
+        } else
+          a = Math.min(a, Ht), h = Math.min(h, Gt), c = Math.max(c, Ht + ge), g = Math.max(g, Gt + me);
       }
-    });
-    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 M = c - a, _ = g - h, E = a + M / 2, Dt = h + _ / 2;
+    let G = this.getState().viewport.scale;
+    if (n) {
+      const Y = (this.getStage().width() - i * 2) / M, Q = (this.getStage().height() - i * 2) / _;
+      G = Math.min(Y, Q, 1);
     }
-    const x = viewport.width / 2 - contentCenterX * newScale;
-    const y = viewport.height / 2 - contentCenterY * newScale;
-    this.updateViewport({ x, y, scale: newScale }, true);
+    const rt = this.getStage().width() / 2 - E * G, Ft = this.getStage().height() / 2 - Dt * G;
+    this.updateViewport({ x: rt, y: Ft, 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 Fe(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 se = [
   {
     min: -1,
     mid: 0.15,
@@ -2012,20 +1567,15 @@ const gridSteps = [
     step: 1
   }
 ];
-function GridBackground({
-  viewportX,
-  viewportY,
-  scale,
-  size = 20,
-  showGrid = true
+function He({
+  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__ */ it(
     "svg",
     {
       className: "canvas-grid w-full h-full absolute top-0 left-0",
@@ -2033,43 +1583,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__ */ N("defs", { children: se.map(({ min: c, mid: g, step: m }, f) => {
+          const u = m * i * h, x = 0.5 + r * h, v = 0.5 + a * h, M = x > 0 ? x % u : u + x % u, _ = v > 0 ? v % u : u + v % u, E = h < g ? Fe(h, [c, g], [0, 1]) : 1;
+          return /* @__PURE__ */ N(
             "pattern",
             {
-              id: `grid_${step}`,
-              width: s,
-              height: s,
+              id: `grid_${m}`,
+              width: u,
+              height: u,
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ jsx(
+              children: /* @__PURE__ */ N(
                 "circle",
                 {
-                  className: "tl-grid-dot",
-                  cx: gxo,
-                  cy: gyo,
+                  className: "grid-dot",
+                  cx: M,
+                  cy: _,
                   r: 1,
-                  opacity
+                  opacity: E
                 }
               )
             },
-            i
+            f
           );
         }) }),
-        gridSteps.map(({ step }, i) => /* @__PURE__ */ jsx("rect", { width: "100%", height: "100%", fill: `url(#grid_${step})` }, i))
+        se.map(({ step: c }, g) => /* @__PURE__ */ N("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, g))
       ]
     }
-  );
+  ) : null;
 }
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
+function Ge(...o) {
+  return Ie(Me(o));
 }
-const buttonVariants = cva(
+const Ke = be(
   "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 +1641,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__ */ N(
+    i ? _e : "button",
     {
       "data-slot": "button",
-      "data-variant": variant,
-      "data-size": size,
-      className: cn(buttonVariants({ variant, size, className })),
-      ...props
+      "data-variant": s,
+      "data-size": t,
+      className: Ge(Ke({ 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 qe({ api: o }) {
+  const [s, t] = ht(o.getState().viewport);
+  Wt(() => {
+    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 = o.getStage().width() / 2, m = o.getStage().height() / 2, f = (g - s.x) / s.scale, u = (m - s.y) / s.scale, x = g - f * c, v = m - u * c;
+    o.updateViewport({ x, y: v, 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__ */ it("div", { className: "zoom-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ N(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleZoomOut,
+        onClick: r,
         title: "缩小",
-        children: /* @__PURE__ */ jsx(Minus, {})
+        children: /* @__PURE__ */ N(Ce, {})
       }
     ),
-    /* @__PURE__ */ jsxs(
-      Button,
+    /* @__PURE__ */ it(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleReset,
-        title: `${percent}%`,
+        onClick: a,
+        title: `${h}%`,
         className: "min-w-16",
         children: [
-          percent,
+          h,
           "%"
         ]
       }
     ),
-    /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ N(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        onClick: handleZoomIn,
+        onClick: n,
         title: "放大",
-        children: /* @__PURE__ */ jsx(Plus, {})
+        children: /* @__PURE__ */ N(Ee, {})
       }
     )
   ] });
 }
-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 je({ api: o }) {
+  const [s, t] = ht(o.canUndo()), [i, n] = ht(o.canRedo());
+  return Wt(() => {
+    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__ */ it("div", { className: "history-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ N(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !canUndo,
-        onClick: () => api.undo(),
+        disabled: !s,
+        onClick: () => o.undo(),
         title: "撤销",
-        children: /* @__PURE__ */ jsx(Undo2, {})
+        children: /* @__PURE__ */ N(ke, {})
       }
     ),
-    /* @__PURE__ */ jsx(
-      Button,
+    /* @__PURE__ */ N(
+      ot,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !canRedo,
-        onClick: () => api.redo(),
+        disabled: !i,
+        onClick: () => o.redo(),
         title: "重做",
-        children: /* @__PURE__ */ jsx(Redo2, {})
+        children: /* @__PURE__ */ N(Te, {})
       }
     )
   ] });
 }
-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 ls({ setApi: o }) {
+  const s = Se(null), [t, i] = ht(null), [n, r] = ht({ x: 0, y: 0, scale: 1 });
+  return Wt(() => {
+    if (!s.current) return;
+    const a = new Be(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__ */ it("div", { className: "whiteboard relative size-full", children: [
+    /* @__PURE__ */ N(
+      He,
+      {
+        viewportX: n.x,
+        viewportY: n.y,
+        scale: n.scale
+      }
+    ),
+    /* @__PURE__ */ N(
+      "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__ */ it(ve, { children: [
+      /* @__PURE__ */ N("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ N(je, { api: t }) }),
+      /* @__PURE__ */ N("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ N(qe, { api: t }) })
     ] })
   ] });
 }
 export {
-  CanvasApi,
-  NODE_NAMES,
-  PureCanvas
+  Be as CanvasApi,
+  A as NODE_NAMES,
+  ls as Whiteboard
 };