@8btc/whiteboard 0.0.3 → 0.0.5

package/dist/index.js

@@ -1,47 +1,47 @@
-var qt = Object.defineProperty;
+var Kt = Object.defineProperty;
 var Rt = (o) => {
   throw TypeError(o);
 };
-var Kt = (o, e, t) => e in o ? qt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
-var D = (o, e, t) => Kt(o, typeof e != "symbol" ? e + "" : e, t), wt = (o, e, t) => e.has(o) || Rt("Cannot " + t);
-var r = (o, e, t) => (wt(o, e, "read from private field"), t ? t.call(o) : e.get(o)), l = (o, e, t) => e.has(o) ? Rt("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), N = (o, e, t, s) => (wt(o, e, "write to private field"), s ? s.call(o, t) : e.set(o, t), t), _ = (o, e, t) => (wt(o, e, "access private method"), t);
-import { jsxs as W, jsx as v, Fragment as jt } from "react/jsx-runtime";
-import { useState as q, useEffect as It, useRef as Bt } from "react";
+var qt = (o, e, t) => e in o ? Kt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var Z = (o, e, t) => qt(o, typeof e != "symbol" ? e + "" : e, t), wt = (o, e, t) => e.has(o) || Rt("Cannot " + t);
+var r = (o, e, t) => (wt(o, e, "read from private field"), t ? t.call(o) : e.get(o)), d = (o, e, t) => e.has(o) ? Rt("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(o) : e.set(o, t), v = (o, e, t, s) => (wt(o, e, "write to private field"), s ? s.call(o, t) : e.set(o, t), t), M = (o, e, t) => (wt(o, e, "access private method"), t);
+import { jsxs as W, jsx as w, Fragment as jt } from "react/jsx-runtime";
+import { useState as K, useEffect as It, useRef as Bt } from "react";
 import Y from "konva";
 import Jt from "mitt";
-import { v4 as K } from "uuid";
+import { v4 as Q } from "uuid";
 import { Slot as Qt } from "@radix-ui/react-slot";
 import { cva as te } from "class-variance-authority";
 import { clsx as ee } from "clsx";
 import { twMerge as se } from "tailwind-merge";
 import { Minus as ie, Plus as ne, Undo2 as re, Redo2 as oe } from "lucide-react";
-var y, m, R, et, st, it, nt, rt, ot, at, ht, Zt;
+var y, l, R, tt, et, st, it, nt, rt, ot, at, zt;
 class ae {
   constructor(e, t) {
-    l(this, ht);
-    l(this, y);
-    l(this, m);
-    l(this, R, { x: 0, y: 0, scale: 1 });
+    d(this, at);
+    d(this, y);
+    d(this, l);
+    d(this, R, { x: 0, y: 0, scale: 1 });
     /**
      * 处理滚轮缩放和平移
      */
-    l(this, et, (e) => {
+    d(this, tt, (e) => {
       e.evt.preventDefault();
-      const s = r(this, m).getPointerPosition();
+      const s = r(this, l).getPointerPosition();
       if (s)
         if (e.evt.ctrlKey) {
           const i = r(this, R).scale, n = {
             x: (s.x - r(this, R).x) / i,
             y: (s.y - r(this, R).y) / i
           }, a = 1.01, h = e.evt.deltaY > 0 ? -1 : 1, c = Math.min(Math.abs(e.evt.deltaY), 10);
-          let d = i;
+          let m = i;
           for (let p = 0; p < c; p++)
-            d = h > 0 ? d * a : d / a;
-          const g = Math.max(0.1, Math.min(5, d)), x = {
+            m = h > 0 ? m * a : m / a;
+          const g = Math.max(0.1, Math.min(5, m)), S = {
             x: s.x - n.x * g,
             y: s.y - n.y * g
           };
-          r(this, y).updateViewport({ x: x.x, y: x.y, scale: g });
+          r(this, y).updateViewport({ x: S.x, y: S.y, scale: g });
         } else {
           const i = e.evt.shiftKey ? e.evt.deltaY : e.evt.deltaX, n = e.evt.shiftKey ? 0 : e.evt.deltaY;
           r(this, y).updateViewport({
@@ -50,11 +50,11 @@ class ae {
           });
         }
     });
-    l(this, st, (e) => {
+    d(this, et, (e) => {
       const t = r(this, y).getState().toolType;
       if (e.evt.button !== 0 || t === "hand")
         return;
-      const s = e.target === r(this, m), i = r(this, m).getRelativePointerPosition();
+      const s = e.target === r(this, l), i = r(this, l).getRelativePointerPosition();
       if (t === "select" && !s) {
         const n = e.target.id();
         n && r(this, y).selectNode(n, e.evt.shiftKey);
@@ -81,36 +81,36 @@ class ae {
       }
       r(this, y).selectNode();
     });
-    l(this, it, () => {
+    d(this, st, () => {
       const e = r(this, y).getState().toolType;
       if (e === "hand")
         return;
-      const t = r(this, m).getRelativePointerPosition();
+      const t = r(this, l).getRelativePointerPosition();
       (e === "rectangle" || e === "image-marker") && t && r(this, y).updateDraftNode(t);
     });
-    l(this, nt, () => {
+    d(this, it, () => {
       const e = r(this, y).getState().toolType;
       e !== "hand" && (e === "rectangle" || e === "image-marker") && r(this, y).finalizeDraftNode();
     });
-    l(this, rt, (e) => {
-      if (e.target !== r(this, m))
+    d(this, nt, (e) => {
+      if (e.target !== r(this, l))
         return;
       const t = r(this, y).getState().toolType;
       t === "hand" ? this.setCursor("grabbing") : t === "select" && this.setCursor("all-scroll");
     });
-    l(this, ot, (e) => {
-      e.target === r(this, m) && r(this, y).updateViewport({
-        x: r(this, m).x(),
-        y: r(this, m).y()
+    d(this, rt, (e) => {
+      e.target === r(this, l) && r(this, y).updateViewport({
+        x: r(this, l).x(),
+        y: r(this, l).y()
       });
     });
-    l(this, at, (e) => {
-      e.target === r(this, m) && (r(this, y).updateViewport({
-        x: r(this, m).x(),
-        y: r(this, m).y()
+    d(this, ot, (e) => {
+      e.target === r(this, l) && (r(this, y).updateViewport({
+        x: r(this, l).x(),
+        y: r(this, l).y()
       }), this.resetCursor());
     });
-    N(this, y, e), N(this, m, new Y.Stage({
+    v(this, y, e), v(this, l, new Y.Stage({
       container: t.container,
       width: t.width,
       height: t.height,
@@ -120,13 +120,13 @@ class ae {
       scaleY: 1,
       draggable: t.draggable ?? !1,
       className: t.className
-    })), _(this, ht, Zt).call(this);
+    })), M(this, at, zt).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
    */
   getStage() {
-    return r(this, m);
+    return r(this, l);
   }
   /**
    * 获取当前视口状态
@@ -139,26 +139,26 @@ class ae {
    */
   setViewport(e) {
     const t = { ...r(this, R), ...e };
-    N(this, R, t), e.x !== void 0 && r(this, m).x(e.x), e.y !== void 0 && r(this, m).y(e.y), e.scale !== void 0 && (r(this, m).scaleX(e.scale), r(this, m).scaleY(e.scale)), e.width !== void 0 && r(this, m).width(e.width), e.height !== void 0 && r(this, m).height(e.height);
+    v(this, R, t), e.x !== void 0 && r(this, l).x(e.x), e.y !== void 0 && r(this, l).y(e.y), e.scale !== void 0 && (r(this, l).scaleX(e.scale), r(this, l).scaleY(e.scale)), e.width !== void 0 && r(this, l).width(e.width), e.height !== void 0 && r(this, l).height(e.height);
   }
   /**
    * 设置是否可拖拽
    */
   setDraggable(e) {
-    r(this, m).draggable(e);
+    r(this, l).draggable(e);
   }
   /**
    * 设置光标样式
    */
   setCursor(e) {
-    const t = r(this, m).container();
+    const t = r(this, l).container();
     t.style.cursor = e;
   }
   /**
    * 重置光标样式
    */
   resetCursor() {
-    const e = r(this, m).container();
+    const e = r(this, l).container();
     if (r(this, y).getState().toolType === "hand") {
       e.style.cursor = "grab";
       return;
@@ -169,65 +169,65 @@ class ae {
    * 销毁 Stage
    */
   destroy() {
-    r(this, m).destroy();
+    r(this, l).destroy();
   }
 }
-y = new WeakMap(), m = new WeakMap(), R = new WeakMap(), et = new WeakMap(), st = new WeakMap(), it = new WeakMap(), nt = new WeakMap(), rt = new WeakMap(), ot = new WeakMap(), at = new WeakMap(), ht = new WeakSet(), /**
+y = new WeakMap(), l = new WeakMap(), R = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), st = new WeakMap(), it = new WeakMap(), nt = new WeakMap(), rt = new WeakMap(), ot = new WeakMap(), at = new WeakSet(), /**
  * 设置事件监听器
  */
-Zt = function() {
-  r(this, m).on("wheel", r(this, et)), r(this, m).on("pointerdown", r(this, st)), r(this, m).on("pointermove", r(this, it)), r(this, m).on("pointerup", r(this, nt)), r(this, m).on("dragstart", r(this, rt)), r(this, m).on("dragmove", r(this, ot)), r(this, m).on("dragend", r(this, at));
+zt = function() {
+  r(this, l).on("wheel", r(this, tt)), r(this, l).on("pointerdown", r(this, et)), r(this, l).on("pointermove", r(this, st)), r(this, l).on("pointerup", r(this, it)), r(this, l).on("dragstart", r(this, nt)), r(this, l).on("dragmove", r(this, rt)), r(this, l).on("dragend", r(this, ot));
 };
-var B, f, ct, dt, lt, mt, gt, pt, ut, At;
+var q, f, ht, ct, dt, lt, mt, gt, pt, At;
 class he {
   constructor(e, t) {
-    l(this, ut);
-    l(this, B);
-    l(this, f);
+    d(this, pt);
+    d(this, q);
+    d(this, f);
     /**
      * 处理 transformstart 事件
      */
-    l(this, ct, () => {
+    d(this, ht, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transform 事件
      */
-    l(this, dt, () => {
+    d(this, ct, () => {
       console.log("transforming..."), this.emitPositionChange();
     });
     /**
      * 处理 transformend 事件
      */
-    l(this, lt, () => {
+    d(this, dt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragstart 事件
      */
-    l(this, mt, () => {
+    d(this, lt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragmove 事件
      */
-    l(this, gt, () => {
+    d(this, mt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragend 事件
      */
-    l(this, pt, () => {
+    d(this, gt, () => {
       this.emitPositionChange();
     });
-    N(this, B, e), N(this, f, new Y.Transformer({
+    v(this, q, e), v(this, f, new Y.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
-    })), _(this, ut, At).call(this);
+    })), M(this, pt, At).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
@@ -277,7 +277,7 @@ class he {
    */
   emitPositionChange() {
     const e = this.getPosition();
-    r(this, B).emitEvent("transformer:positionChange", e);
+    r(this, q).emitEvent("transformer:positionChange", e);
   }
   /**
    * 销毁 Transformer
@@ -286,18 +286,18 @@ class he {
     r(this, f).destroy();
   }
 }
-B = new WeakMap(), f = new WeakMap(), ct = new WeakMap(), dt = new WeakMap(), lt = new WeakMap(), mt = new WeakMap(), gt = new WeakMap(), pt = new WeakMap(), ut = new WeakSet(), /**
+q = new WeakMap(), f = new WeakMap(), ht = new WeakMap(), ct = new WeakMap(), dt = new WeakMap(), lt = new WeakMap(), mt = new WeakMap(), gt = new WeakMap(), pt = new WeakSet(), /**
  * 设置事件监听器
  */
 At = function() {
-  r(this, f).on("transformstart", r(this, ct)), r(this, f).on("transform", r(this, dt)), r(this, f).on("transformend", r(this, lt)), r(this, f).on("dragstart", r(this, mt)), r(this, f).on("dragmove", r(this, gt)), r(this, f).on("dragend", r(this, pt));
+  r(this, f).on("transformstart", r(this, ht)), r(this, f).on("transform", r(this, ct)), r(this, f).on("transformend", r(this, dt)), r(this, f).on("dragstart", r(this, lt)), r(this, f).on("dragmove", r(this, mt)), r(this, f).on("dragend", r(this, gt));
 };
 class ce {
   constructor(e) {
-    D(this, "_past", []);
-    D(this, "_present");
-    D(this, "_future", []);
-    D(this, "_emitter");
+    Z(this, "_past", []);
+    Z(this, "_present");
+    Z(this, "_future", []);
+    Z(this, "_emitter");
     this._present = e, this._emitter = Jt();
   }
   /**
@@ -391,7 +391,7 @@ class ce {
     this._emitter.all.clear();
   }
 }
-const j = "shapeNameForSelect", u = {
+const yt = "shapeNameForSelect", u = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
 }, F = {
@@ -434,7 +434,7 @@ function me(o) {
 function ge(o) {
   return Array.isArray(o) && o.length > 1 ? o[0] + o[1] : 0;
 }
-function Xt(o) {
+function Dt(o) {
   return {
     width: Math.max(Yt.MIN_SIZE, o.width() * o.scaleX()),
     height: Math.max(Yt.MIN_SIZE, o.height() * o.scaleY())
@@ -442,10 +442,10 @@ function Xt(o) {
 }
 class bt {
   constructor(e, t) {
-    D(this, "core");
-    D(this, "node");
-    D(this, "element");
-    D(this, "toolTypeChangeHandler");
+    Z(this, "core");
+    Z(this, "node");
+    Z(this, "element");
+    Z(this, "toolTypeChangeHandler");
     this.core = e, this.node = t, this.element = this.createElement(), this.toolTypeChangeHandler = (s) => {
       const i = s === "select";
       this.element.listening(i);
@@ -484,13 +484,13 @@ function pe(o, e) {
     isRunning: () => t.isRunning()
   };
 }
-var b, X, vt, Nt, Vt;
+var I, D, vt, Nt, Vt;
 class ue extends bt {
   constructor(t, s) {
     super(t, s);
-    l(this, X);
-    l(this, b, null);
-    s.style.animated && _(this, X, vt).call(this), _(this, X, Vt).call(this, this.getElement());
+    d(this, D);
+    d(this, I, null);
+    s.style.animated && M(this, D, vt).call(this), M(this, D, Vt).call(this, this.getElement());
   }
   createElement() {
     const t = Math.max(
@@ -506,7 +506,7 @@ class ue extends bt {
       width: t,
       height: s,
       cornerRadius: u.CORNER_RADIUS,
-      name: j,
+      name: yt,
       draggable: !0,
       stroke: "black",
       strokeWidth: 2
@@ -547,44 +547,44 @@ class ue extends bt {
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
     );
-    s.width(i), s.height(n), this.node.style.animated && !r(this, b) ? _(this, X, vt).call(this) : !this.node.style.animated && r(this, b) && _(this, X, Nt).call(this);
+    s.width(i), s.height(n), this.node.style.animated && !r(this, I) ? M(this, D, vt).call(this) : !this.node.style.animated && r(this, I) && M(this, D, Nt).call(this);
   }
   /**
    * 销毁
    */
   destroy() {
-    _(this, X, Nt).call(this), super.destroy();
+    M(this, D, Nt).call(this), super.destroy();
   }
 }
-b = new WeakMap(), X = new WeakSet(), /**
+I = new WeakMap(), D = new WeakSet(), /**
  * 初始化动画
  */
 vt = function() {
   const t = this.getElement(), s = t.dash();
   if (!s || s.length === 0) return;
   const i = ge(s);
-  N(this, b, pe(t, i)), r(this, b) && r(this, b).start();
+  v(this, I, pe(t, i)), r(this, I) && r(this, I).start();
 }, /**
  * 销毁动画
  */
 Nt = function() {
-  r(this, b) && (r(this, b).stop(), N(this, b, null));
+  r(this, I) && (r(this, I).stop(), v(this, I, null));
 }, /**
  * 设置事件处理器
  */
 Vt = function(t = void 0) {
   const s = t ?? this.getElement();
   s.on("transformstart", () => {
-    this.node.style.animated && r(this, b) && r(this, b).stop();
+    this.node.style.animated && r(this, I) && r(this, I).stop();
   }), s.on("transform", (i) => {
-    const n = i.target, { width: a, height: h } = Xt(n), c = de(a, h, u.CORNER_RADIUS), d = le(
+    const n = i.target, { width: a, height: h } = Dt(n), c = de(a, h, u.CORNER_RADIUS), m = le(
       c,
       me(this.node.style.size),
       this.node.style.line
     );
-    n.scale({ x: 1, y: 1 }), n.width(a), n.height(h), n.dash(d.map((g) => g * this.core.getStageScale()));
+    n.scale({ x: 1, y: 1 }), n.width(a), n.height(h), n.dash(m.map((g) => g * this.core.getStageScale()));
   }), s.on("transformend", (i) => {
-    const n = i.target, { width: a, height: h } = Xt(n), c = {
+    const n = i.target, { width: a, height: h } = Dt(n), c = {
       ...this.node.props,
       x: n.x(),
       y: n.y(),
@@ -594,7 +594,7 @@ Vt = function(t = void 0) {
     };
     this.node.props = c, this.core._syncNodeFromElement(this.node.id, {
       props: c
-    }), this.node.style.animated && r(this, b)?.isRunning() === !1 && r(this, b).start();
+    }), this.node.style.animated && r(this, I)?.isRunning() === !1 && r(this, I).start();
   }), s.on("dragend", (i) => {
     const n = i.target, a = {
       ...this.node.props,
@@ -610,8 +610,8 @@ var k, St, Ut, Mt, _t;
 class ye extends bt {
   constructor(t, s) {
     super(t, s);
-    l(this, k);
-    _(this, k, St).call(this), _(this, k, Ut).call(this, this.getElement());
+    d(this, k);
+    M(this, k, St).call(this), M(this, k, Ut).call(this, this.getElement());
   }
   createElement() {
     const t = document.createElement("canvas");
@@ -619,7 +619,7 @@ class ye extends bt {
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
-      name: j,
+      name: yt,
       draggable: !0,
       image: t
     });
@@ -655,7 +655,7 @@ class ye extends bt {
       const i = Math.max(this.node.props.width, F.MIN_SIZE), n = Math.max(this.node.props.height, F.MIN_SIZE);
       s.width(i), s.height(n);
     }
-    this.node.props.rotation !== void 0 && s.rotation(this.node.props.rotation), t.meta?.imageUrl && t.meta.imageUrl !== this.node.meta.imageUrl && _(this, k, St).call(this);
+    this.node.props.rotation !== void 0 && s.rotation(this.node.props.rotation), t.meta?.imageUrl && t.meta.imageUrl !== this.node.meta.imageUrl && M(this, k, St).call(this);
   }
   /**
    * 销毁
@@ -687,7 +687,7 @@ St = function() {
 Ut = function(t) {
   t.on("transform", (s) => {
     const i = s.target, n = Math.max(F.MIN_SIZE, i.width() * i.scaleX()), a = Math.max(F.MIN_SIZE, i.height() * i.scaleY());
-    i.scale({ x: 1, y: 1 }), i.width(n), i.height(a), _(this, k, Mt).call(this);
+    i.scale({ x: 1, y: 1 }), i.width(n), i.height(a), M(this, k, Mt).call(this);
   }), t.on("transformend", (s) => {
     const i = s.target, n = {
       ...this.node.props,
@@ -699,9 +699,9 @@ Ut = function(t) {
     };
     this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
       props: n
-    }), _(this, k, _t).call(this);
+    }), M(this, k, _t).call(this);
   }), t.on("dragmove", () => {
-    _(this, k, Mt).call(this);
+    M(this, k, Mt).call(this);
   }), t.on("dragend", (s) => {
     const i = s.target, n = {
       ...this.node.props,
@@ -710,7 +710,7 @@ Ut = function(t) {
     };
     this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
       props: n
-    }), _(this, k, _t).call(this);
+    }), M(this, k, _t).call(this);
   });
 }, /**
  * 同步 image-marker 节点的位置（实时更新 Konva 元素）
@@ -720,12 +720,12 @@ Mt = function() {
   if (!s) return;
   const i = t.x(), n = t.y(), a = t.width(), h = t.height(), c = s.find(
     (g) => g.hasName(this.node.id)
-  ), d = this.core.getState().nodes || [];
+  ), m = this.core.getState().nodes || [];
   c.forEach((g) => {
-    const x = d.find((p) => p.id === g.id());
-    if (x?.type === "image-marker" && x.meta.relativePosition) {
-      const { start: p, end: M } = x.meta.relativePosition, I = i + p.percentX / 100 * a, E = n + p.percentY / 100 * h, z = i + M.percentX / 100 * a, P = n + M.percentY / 100 * h, ft = Math.min(I, z), L = Math.min(E, P), V = Math.abs(z - I), G = Math.abs(P - E);
-      g.position({ x: ft, y: L }), g.setAttrs({ width: V, height: G }), g.getChildren().forEach((C) => {
+    const S = m.find((p) => p.id === g.id());
+    if (S?.type === "image-marker" && S.meta.relativePosition) {
+      const { start: p, end: b } = S.meta.relativePosition, _ = i + p.percentX / 100 * a, E = n + p.percentY / 100 * h, X = i + b.percentX / 100 * a, P = n + b.percentY / 100 * h, ft = Math.min(_, X), O = Math.min(E, P), V = Math.abs(X - _), G = Math.abs(P - E);
+      g.position({ x: ft, y: O }), g.setAttrs({ width: V, height: G }), g.getChildren().forEach((C) => {
         C.getClassName() === "Rect" ? C.setAttrs({ width: V, height: G }) : C.getClassName() === "Group" && C.setAttrs({ x: V, y: G });
       });
     }
@@ -749,17 +749,17 @@ _t = function() {
     });
   });
 };
-var H, T, J, Q, yt, Ht;
+var H, T, j, B, ut, Ht;
 class fe extends bt {
   constructor(t, s) {
     super(t, s);
-    l(this, yt);
-    l(this, H);
-    l(this, T);
-    l(this, J);
-    l(this, Q);
+    d(this, ut);
+    d(this, H);
+    d(this, T);
+    d(this, j);
+    d(this, B);
     const i = this.getElement();
-    N(this, H, i.findOne(".rect")), N(this, T, i.findOne(".marker-group")), N(this, J, r(this, T).findOne("Circle")), N(this, Q, r(this, T).findOne("Text")), _(this, yt, Ht).call(this);
+    v(this, H, i.findOne(".rect")), v(this, T, i.findOne(".marker-group")), v(this, j, r(this, T).findOne("Circle")), v(this, B, r(this, T).findOne("Text")), M(this, ut, Ht).call(this);
   }
   createElement() {
     const t = Math.max(
@@ -790,7 +790,7 @@ class fe extends bt {
       name: "marker-group",
       x: t,
       y: s
-    }), c = 16 / this.core.getStageScale(), d = new Y.Circle({
+    }), c = 16 / this.core.getStageScale(), m = new Y.Circle({
       radius: c,
       fill: "red",
       stroke: "black",
@@ -806,7 +806,7 @@ class fe extends bt {
       fontSize: 16,
       fill: "white"
     });
-    return a.add(d), a.add(g), i.add(n), i.add(a), i;
+    return a.add(m), a.add(g), i.add(n), i.add(a), i;
   }
   /**
    * 获取 Konva.Group 实例
@@ -843,7 +843,7 @@ class fe extends bt {
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
     );
-    s.width(i), s.height(n), r(this, H).width(i), r(this, H).height(n), r(this, T).x(i), r(this, T).y(n), t.style?.color && r(this, H).stroke(t.style.color), t.meta?.markerNumber !== void 0 && r(this, Q).text(String(t.meta.markerNumber));
+    s.width(i), s.height(n), r(this, H).width(i), r(this, H).height(n), r(this, T).x(i), r(this, T).y(n), t.style?.color && r(this, H).stroke(t.style.color), t.meta?.markerNumber !== void 0 && r(this, B).text(String(t.meta.markerNumber));
   }
   /**
    * 销毁
@@ -856,10 +856,10 @@ class fe extends bt {
    */
   setFocusState(t) {
     const s = t ? 3 : 2, i = t ? 1.2 : 1;
-    r(this, H).strokeWidth(s), r(this, J).strokeWidth(s), r(this, T).scaleX(i), r(this, T).scaleY(i);
+    r(this, H).strokeWidth(s), r(this, j).strokeWidth(s), r(this, T).scaleX(i), r(this, T).scaleY(i);
   }
 }
-H = new WeakMap(), T = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), yt = new WeakSet(), /**
+H = new WeakMap(), T = new WeakMap(), j = new WeakMap(), B = new WeakMap(), ut = new WeakSet(), /**
  * 设置事件处理器
  */
 Ht = function() {
@@ -872,7 +872,7 @@ Ht = function() {
     this.core.selectNode(this.node.id);
   });
 };
-function zt(o, e, t) {
+function Xt(o, e, t) {
   switch (e) {
     case "rectangle":
       return new ue(o, t);
@@ -887,7 +887,7 @@ function zt(o, e, t) {
 const xe = (o, e, t, s) => {
   const i = {
     type: o,
-    id: K(),
+    id: Q(),
     text: null,
     style: {
       opacity: 1,
@@ -941,7 +941,7 @@ function ve(o, e) {
     { x: i, y: n }
   ];
 }
-var w, Z, A, S;
+var x, z, A, N;
 class Ne extends ce {
   constructor(t) {
     super({
@@ -955,23 +955,23 @@ class Ne extends ce {
       toolType: "select",
       nodes: []
     });
-    l(this, w);
-    l(this, Z);
-    l(this, A);
-    l(this, S, null);
-    N(this, w, new ae(this, {
+    d(this, x);
+    d(this, z);
+    d(this, A);
+    d(this, N, null);
+    v(this, x, new ae(this, {
       container: t,
       width: t.clientWidth,
       height: t.clientHeight,
       draggable: !1,
       className: "touch-none"
-    })), N(this, Z, new Y.Layer()), N(this, A, new he(this)), r(this, w).getStage().add(r(this, Z)), r(this, Z).add(r(this, A).getTransformer()), this.updateViewport(this.getState().viewport, !1);
+    })), v(this, z, new Y.Layer()), v(this, A, new he(this)), r(this, x).getStage().add(r(this, z)), r(this, z).add(r(this, A).getTransformer()), this.updateViewport(this.getState().viewport, !1);
   }
   /**
    * 获取 CanvasStage 实例
    */
   getCanvasStage() {
-    return r(this, w);
+    return r(this, x);
   }
   /**
    * 获取 CanvasTransformer 实例
@@ -989,19 +989,19 @@ class Ne extends ce {
    * 获取 Konva.Stage 实例
    */
   getStage() {
-    return r(this, w).getStage();
+    return r(this, x).getStage();
   }
   /**
    * 获取 Stage 容器元素
    */
   getContainer() {
-    return r(this, w).getStage().container();
+    return r(this, x).getStage().container();
   }
   /**
    * 获取主图层
    */
   getMainLayer() {
-    return r(this, Z);
+    return r(this, z);
   }
   /**
    * 获取当前工具类型
@@ -1018,40 +1018,40 @@ class Ne extends ce {
         toolType: t
       },
       !1
-    ), this.emit("toolType:change", t), t === "hand" ? (r(this, w).setDraggable(!0), r(this, w).setCursor("grab")) : (r(this, w).setDraggable(!1), r(this, w).resetCursor());
+    ), this.emit("toolType:change", t), t === "hand" ? (r(this, x).setDraggable(!0), r(this, x).setCursor("grab")) : (r(this, x).setDraggable(!1), r(this, x).resetCursor());
   }
   /**
    * 设置是否可拖拽（内部使用）
    */
   setDraggable(t) {
-    r(this, w).setDraggable(t);
+    r(this, x).setDraggable(t);
   }
   /**
    * 设置光标
    * @internal 仅供内部使用
    */
   setCursor(t) {
-    r(this, w).setCursor(t);
+    r(this, x).setCursor(t);
   }
   /**
    * 重置光标
    * @internal 仅供内部使用
    */
   resetCursor() {
-    r(this, w).resetCursor();
+    r(this, x).resetCursor();
   }
   /**
    * 获取当前 Stage 缩放比例
    */
   getStageScale() {
-    return r(this, w).getStage().scaleX();
+    return r(this, x).getStage().scaleX();
   }
   /**
    * 更新视口位置
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
   updateViewport(t, s = !1) {
-    r(this, w).setViewport(t);
+    r(this, x).setViewport(t);
     const i = {
       ...this.getState().viewport,
       ...t
@@ -1064,8 +1064,8 @@ class Ne extends ce {
     ), this.emit("viewport:change", i), r(this, A).emitPositionChange();
   }
   createNodes(t) {
-    t.map((n) => zt(this, n.type, n)).filter((n) => n !== null).forEach((n) => {
-      r(this, Z).add(n.getElement());
+    t.map((n) => Xt(this, n.type, n)).filter((n) => n !== null).forEach((n) => {
+      r(this, z).add(n.getElement());
     });
     const i = [...this.getState().nodes || [], ...t];
     this._updateState(
@@ -1084,13 +1084,13 @@ class Ne extends ce {
     a.forEach((P) => {
       P.type === "image-marker" && P.meta.parent === t && typeof P.meta.markerNumber == "number" && (h = Math.max(h, P.meta.markerNumber));
     });
-    const c = (s.x - n.x) / n.width * 100, d = (s.y - n.y) / n.height * 100, g = (i.x - n.x) / n.width * 100, x = (i.y - n.y) / n.height * 100, p = Math.min(s.x, i.x), M = Math.min(s.y, i.y), I = Math.abs(i.x - s.x), E = Math.abs(i.y - s.y), z = {
-      id: K(),
+    const c = (s.x - n.x) / n.width * 100, m = (s.y - n.y) / n.height * 100, g = (i.x - n.x) / n.width * 100, S = (i.y - n.y) / n.height * 100, p = Math.min(s.x, i.x), b = Math.min(s.y, i.y), _ = Math.abs(i.x - s.x), E = Math.abs(i.y - s.y), X = {
+      id: Q(),
       type: "image-marker",
       props: {
         x: p,
-        y: M,
-        width: I,
+        y: b,
+        width: _,
         height: E,
         rotation: 0,
         visible: !0
@@ -1107,23 +1107,23 @@ class Ne extends ce {
         relativePosition: {
           start: {
             percentX: Math.max(0, Math.min(100, c)),
-            percentY: Math.max(0, Math.min(100, d))
+            percentY: Math.max(0, Math.min(100, m))
           },
           end: {
             percentX: Math.max(0, Math.min(100, g)),
-            percentY: Math.max(0, Math.min(100, x))
+            percentY: Math.max(0, Math.min(100, S))
           }
         }
       }
     };
-    this.createNodes([z]);
+    this.createNodes([X]);
   }
   /**
    * 在指定位置查找图片节点
    * @internal 仅供内部使用
    */
   findImageAtPosition(t) {
-    const s = r(this, w).getStage(), i = s.find(
+    const s = r(this, x).getStage(), i = s.find(
       (a) => a.getClassName() === "Image"
     ), n = i.map(
       (a) => a.listening()
@@ -1144,34 +1144,34 @@ class Ne extends ce {
    * @internal 仅供内部使用
    */
   createDraftNode(t, s, i) {
-    r(this, S) && r(this, S).destroy();
+    r(this, N) && r(this, N).destroy();
     const n = xe(t, s, void 0, i);
-    N(this, S, zt(this, t, n)), console.log(r(this, S)), r(this, S) && r(this, Z).add(r(this, S).getElement());
+    v(this, N, Xt(this, t, n)), console.log(r(this, N)), r(this, N) && r(this, z).add(r(this, N).getElement());
   }
   /**
    * @internal 仅供内部使用
    */
   updateDraftNode(t, s) {
-    if (!r(this, S)) return;
-    const i = r(this, S).getNode(), n = we(i, t, s);
-    r(this, S).updateNode(n);
+    if (!r(this, N)) return;
+    const i = r(this, N).getNode(), n = we(i, t, s);
+    r(this, N).updateNode(n);
   }
   /**
    * @internal 仅供内部使用
    */
   finalizeDraftNode() {
-    if (!r(this, S)) return;
-    const t = K(), s = r(this, S).getNode();
+    if (!r(this, N)) return;
+    const t = Q(), s = r(this, N).getNode();
     if (s.type === "image-marker" && s.meta.parent) {
       const n = s.meta.bounds, a = s.meta.startPosition, h = {
         x: s.props.x + (s.props.width || 0),
         y: s.props.y + (s.props.height || 0)
       }, c = this.getState().nodes || [];
-      let d = 0;
+      let m = 0;
       c.forEach((E) => {
-        E.type === "image-marker" && E.meta.parent === s.meta.parent && typeof E.meta.markerNumber == "number" && (d = Math.max(d, E.meta.markerNumber));
+        E.type === "image-marker" && E.meta.parent === s.meta.parent && typeof E.meta.markerNumber == "number" && (m = Math.max(m, E.meta.markerNumber));
       });
-      const g = (a.x - n.x) / n.width * 100, x = (a.y - n.y) / n.height * 100, p = (h.x - n.x) / n.width * 100, M = (h.y - n.y) / n.height * 100, I = {
+      const g = (a.x - n.x) / n.width * 100, S = (a.y - n.y) / n.height * 100, p = (h.x - n.x) / n.width * 100, b = (h.y - n.y) / n.height * 100, _ = {
         ...s,
         props: {
           ...s.props
@@ -1181,22 +1181,22 @@ class Ne extends ce {
         },
         meta: {
           parent: s.meta.parent,
-          markerNumber: d + 1,
+          markerNumber: m + 1,
           relativePosition: {
             start: {
               percentX: Math.max(0, Math.min(100, g)),
-              percentY: Math.max(0, Math.min(100, x))
+              percentY: Math.max(0, Math.min(100, S))
             },
             end: {
               percentX: Math.max(0, Math.min(100, p)),
-              percentY: Math.max(0, Math.min(100, M))
+              percentY: Math.max(0, Math.min(100, b))
             }
           }
         },
         id: t,
         type: "image-marker"
       };
-      this.createNodes([I]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
+      this.createNodes([_]), r(this, N).destroy(), v(this, N, null), this.setToolType("select");
       return;
     }
     const i = {
@@ -1212,7 +1212,7 @@ class Ne extends ce {
       },
       id: t
     };
-    this.createNodes([i]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
+    this.createNodes([i]), r(this, N).destroy(), v(this, N, null), this.setToolType("select");
   }
   /**
    * 选择节点
@@ -1233,7 +1233,7 @@ class Ne extends ce {
     }
     let n = [];
     s ? n = i.length ? [...i, t] : [t] : n = [t];
-    const a = this.getStage().find(`.${j}`).filter((h) => {
+    const a = this.getStage().find(`.${yt}`).filter((h) => {
       const c = h.id();
       return n.includes(c);
     });
@@ -1248,7 +1248,7 @@ class Ne extends ce {
    * 销毁 canvas
    */
   dispose() {
-    this.getCanvasTransformer().destroy(), this.getCanvasStage().destroy(), this._dispose();
+    this.getCanvasTransformer().destroy(), this.getMainLayer().destroy(), this.getCanvasStage().destroy(), this._dispose();
   }
   /**
    * 从元素同步节点数据（供节点类内部使用）
@@ -1284,7 +1284,7 @@ class Ne extends ce {
    * 当 undo/redo 时被调用
    */
   _syncState(t) {
-    r(this, w).setViewport({
+    r(this, x).setViewport({
       x: t.viewport.x,
       y: t.viewport.y,
       scale: t.viewport.scale,
@@ -1293,7 +1293,7 @@ class Ne extends ce {
     });
   }
 }
-w = new WeakMap(), Z = new WeakMap(), A = new WeakMap(), S = new WeakMap();
+x = new WeakMap(), z = new WeakMap(), A = new WeakMap(), N = new WeakMap();
 class Se extends Ne {
   /**
    * 获取所有可用的工具类型
@@ -1307,6 +1307,13 @@ class Se extends Ne {
   setToolType(e) {
     super.setToolType(e);
   }
+  /**
+   * 手动创建多个节点
+   * 如果你不知道自己在干什么，请使用更高层的封装方法，如 createImageNode
+   */
+  createNodes(e) {
+    super.createNodes(e);
+  }
   /**
    * 更新视口位置
    */
@@ -1318,7 +1325,7 @@ class Se extends Ne {
    */
   createImageNode(e, t) {
     const s = t ?? { x: 100, y: 100 }, i = {
-      id: K(),
+      id: Q(),
       type: "image",
       props: {
         x: s.x,
@@ -1340,58 +1347,6 @@ class Se extends Ne {
     };
     this.createNodes([i]);
   }
-  /**
-   * 在当前所有节点的左下角插入图片，并将其居中显示
-   * 如果没有节点，插入到画布中心
-   * @param imageUrl - 图片 URL
-   * @param options - 配置选项
-   * @param options.width - 图片宽度
-   * @param options.height - 图片高度
-   */
-  insertImageAtBottomLeft(e, t) {
-    const s = this.getState().nodes || [];
-    let i = { x: 0, y: 0 };
-    if (s.length > 0) {
-      const a = this.getMainLayer();
-      let h = 1 / 0, c = -1 / 0;
-      a.children.forEach((d) => {
-        if (d.visible() && d.getClassName() !== "Transformer" && d.hasName(j)) {
-          const g = d.getAttrs(), x = g.x || 0, p = g.y || 0, M = g.height || 0;
-          h = Math.min(h, x), c = Math.max(c, p + M);
-        }
-      }), h !== 1 / 0 && c !== -1 / 0 && (i = { x: h, y: c + 20 });
-    } else {
-      const a = this.getState().viewport;
-      i = {
-        x: (a.width / 2 - a.x) / a.scale,
-        y: (a.height / 2 - a.y) / a.scale
-      };
-    }
-    const n = {
-      id: K(),
-      type: "image",
-      props: {
-        x: i.x,
-        y: i.y,
-        width: t?.width,
-        height: t?.height,
-        rotation: 0,
-        visible: !0
-      },
-      style: {
-        color: "#000000",
-        line: "solid",
-        size: "medium",
-        opacity: 1
-      },
-      meta: {
-        imageUrl: e
-      }
-    };
-    this.createNodes([n]), requestAnimationFrame(() => {
-      this.scrollToContent({ scale: !0 });
-    });
-  }
   /**
    * 导出全部图形为图片
    * @param options - 导出配置
@@ -1419,7 +1374,7 @@ class Se extends Ne {
     const t = this.getCanvasTransformer().getPosition();
     if (!t)
       return console.warn("No selection to export"), null;
-    const s = this.getStage(), i = e?.padding ?? 10, n = this.getCanvasTransformer().getTransformer(), a = n.visible();
+    const s = this.getStage(), i = e?.padding ?? 0, n = this.getCanvasTransformer().getTransformer(), a = n.visible();
     n.visible(!1);
     try {
       return s.toDataURL({
@@ -1427,7 +1382,7 @@ class Se extends Ne {
         y: t.y - i,
         width: t.width + i * 2,
         height: t.height + i * 2,
-        pixelRatio: e?.pixelRatio ?? 2,
+        pixelRatio: e?.pixelRatio ?? 1,
         mimeType: e?.mimeType ?? "image/png",
         quality: e?.quality ?? 1
       });
@@ -1481,29 +1436,29 @@ class Se extends Ne {
   scrollToContent(e) {
     if ((this.getState().nodes || []).length === 0) return;
     const s = e?.padding ?? 50, i = e?.scale === !0, n = e?.nodeIds;
-    let a = 1 / 0, h = 1 / 0, c = -1 / 0, d = -1 / 0;
-    const g = this.getMainLayer(), x = this.getState().selectedNodeIds || [], p = n && n.length > 0, M = !p && x.length > 0, I = p ? n : M ? x : null;
+    let a = 1 / 0, h = 1 / 0, c = -1 / 0, m = -1 / 0;
+    const g = this.getMainLayer(), S = this.getState().selectedNodeIds || [], p = n && n.length > 0, b = !p && S.length > 0, _ = p ? n : b ? S : null;
     if (g.children.forEach((C) => {
-      if (C.visible() && C.getClassName() !== "Transformer" && C.hasName(j)) {
-        if (I) {
+      if (C.visible() && C.getClassName() !== "Transformer" && C.hasName(yt)) {
+        if (_) {
           const U = C.id();
-          if (!I.includes(U)) return;
+          if (!_.includes(U)) return;
         }
-        const O = C.getAttrs(), Ct = O.x || 0, Tt = O.y || 0, Lt = O.width || 0, Ot = O.height || 0;
-        if (O.rotation || 0) {
-          const U = C.getClientRect({ skipTransform: !1 }), xt = this.getStage(), tt = xt.scaleX(), kt = xt.x(), Pt = xt.y(), Ft = (U.x - kt) / tt, Wt = (U.y - Pt) / tt, Gt = (U.x + U.width - kt) / tt, $t = (U.y + U.height - Pt) / tt;
-          a = Math.min(a, Ft), h = Math.min(h, Wt), c = Math.max(c, Gt), d = Math.max(d, $t);
+        const L = C.getAttrs(), Ct = L.x || 0, Tt = L.y || 0, Ot = L.width || 0, Lt = L.height || 0;
+        if (L.rotation || 0) {
+          const U = C.getClientRect({ skipTransform: !1 }), xt = this.getStage(), J = xt.scaleX(), kt = xt.x(), Pt = xt.y(), Ft = (U.x - kt) / J, Wt = (U.y - Pt) / J, Gt = (U.x + U.width - kt) / J, $t = (U.y + U.height - Pt) / J;
+          a = Math.min(a, Ft), h = Math.min(h, Wt), c = Math.max(c, Gt), m = Math.max(m, $t);
         } else
-          a = Math.min(a, Ct), h = Math.min(h, Tt), c = Math.max(c, Ct + Lt), d = Math.max(d, Tt + Ot);
+          a = Math.min(a, Ct), h = Math.min(h, Tt), c = Math.max(c, Ct + Ot), m = Math.max(m, Tt + Lt);
       }
     }), a === 1 / 0 || h === 1 / 0) return;
-    const E = c - a, z = d - h, P = a + E / 2, ft = h + z / 2, L = this.getState().viewport;
-    let V = L.scale;
+    const E = c - a, X = m - h, P = a + E / 2, ft = h + X / 2, O = this.getState().viewport;
+    let V = O.scale;
     if (i) {
-      const C = (L.width - s * 2) / E, O = (L.height - s * 2) / z;
-      V = Math.min(C, O, 1);
+      const C = (O.width - s * 2) / E, L = (O.height - s * 2) / X;
+      V = Math.min(C, L, 1);
     }
-    const G = L.width / 2 - P * V, Et = L.height / 2 - ft * V;
+    const G = O.width / 2 - P * V, Et = O.height / 2 - ft * V;
     this.updateViewport({ x: G, y: Et, scale: V }, !0);
   }
 }
@@ -1511,7 +1466,7 @@ function Me(o, e, t, s = !1) {
   const [i, n] = e, [a, h] = t, c = a + (o - i) / (n - i) * (h - a);
   return s ? a < h ? Math.max(Math.min(c, h), a) : Math.max(Math.min(c, a), h) : c;
 }
-const Dt = [
+const Zt = [
   {
     min: -1,
     mid: 0.15,
@@ -1549,30 +1504,30 @@ function _e({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ v("defs", { children: Dt.map(({ min: c, mid: d, step: g }, x) => {
-          const p = g * s * h, M = 0.5 + n * h, I = 0.5 + a * h, E = M > 0 ? M % p : p + M % p, z = I > 0 ? I % p : p + I % p, P = h < d ? Me(h, [c, d], [0, 1]) : 1;
-          return /* @__PURE__ */ v(
+        /* @__PURE__ */ w("defs", { children: Zt.map(({ min: c, mid: m, step: g }, S) => {
+          const p = g * s * h, b = 0.5 + n * h, _ = 0.5 + a * h, E = b > 0 ? b % p : p + b % p, X = _ > 0 ? _ % p : p + _ % p, P = h < m ? Me(h, [c, m], [0, 1]) : 1;
+          return /* @__PURE__ */ w(
             "pattern",
             {
               id: `grid_${g}`,
               width: p,
               height: p,
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ v(
+              children: /* @__PURE__ */ w(
                 "circle",
                 {
                   className: "tl-grid-dot",
                   cx: E,
-                  cy: z,
+                  cy: X,
                   r: 1,
                   opacity: P
                 }
               )
             },
-            x
+            S
           );
         }) }),
-        Dt.map(({ step: c }, d) => /* @__PURE__ */ v("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, d))
+        Zt.map(({ step: c }, m) => /* @__PURE__ */ w("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, m))
       ]
     }
   ) : null;
@@ -1614,7 +1569,7 @@ function $({
   asChild: s = !1,
   ...i
 }) {
-  return /* @__PURE__ */ v(
+  return /* @__PURE__ */ w(
     s ? Qt : "button",
     {
       "data-slot": "button",
@@ -1626,15 +1581,15 @@ function $({
   );
 }
 function Ee({ api: o }) {
-  const [e, t] = q(o.getState().viewport);
+  const [e, t] = K(o.getState().viewport);
   It(() => {
     o.on("viewport:change", (c) => {
       t(c);
     });
   }, [t, o]);
   const s = (c) => {
-    const d = e.width / 2, g = e.height / 2, x = (d - e.x) / e.scale, p = (g - e.y) / e.scale, M = d - x * c, I = g - p * c;
-    o.updateViewport({ x: M, y: I, scale: c });
+    const m = e.width / 2, g = e.height / 2, S = (m - e.x) / e.scale, p = (g - e.y) / e.scale, b = m - S * c, _ = g - p * c;
+    o.updateViewport({ x: b, y: _, scale: c });
   }, i = () => {
     const c = Math.min(e.scale * 1.2, 5);
     s(c);
@@ -1645,14 +1600,14 @@ function Ee({ api: o }) {
     s(1);
   }, h = Math.round(e.scale * 100);
   return /* @__PURE__ */ W("div", { className: "zoom-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ w(
       $,
       {
         size: "sm",
         variant: "secondary",
         onClick: n,
         title: "缩小",
-        children: /* @__PURE__ */ v(ie, {})
+        children: /* @__PURE__ */ w(ie, {})
       }
     ),
     /* @__PURE__ */ W(
@@ -1669,20 +1624,20 @@ function Ee({ api: o }) {
         ]
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ w(
       $,
       {
         size: "sm",
         variant: "secondary",
         onClick: i,
         title: "放大",
-        children: /* @__PURE__ */ v(ne, {})
+        children: /* @__PURE__ */ w(ne, {})
       }
     )
   ] });
 }
 function Ce({ api: o }) {
-  const [e, t] = q(o.canUndo()), [s, i] = q(o.canRedo());
+  const [e, t] = K(o.canUndo()), [s, i] = K(o.canRedo());
   return It(() => {
     const n = () => {
       t(o.canUndo()), i(o.canRedo());
@@ -1691,7 +1646,7 @@ function Ce({ api: o }) {
       o.off("state:change", n);
     };
   }, [o]), /* @__PURE__ */ W("div", { className: "history-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ w(
       $,
       {
         size: "sm",
@@ -1699,10 +1654,10 @@ function Ce({ api: o }) {
         disabled: !e,
         onClick: () => o.undo(),
         title: "撤销",
-        children: /* @__PURE__ */ v(re, {})
+        children: /* @__PURE__ */ w(re, {})
       }
     ),
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ w(
       $,
       {
         size: "sm",
@@ -1710,13 +1665,13 @@ function Ce({ api: o }) {
         disabled: !s,
         onClick: () => o.redo(),
         title: "重做",
-        children: /* @__PURE__ */ v(oe, {})
+        children: /* @__PURE__ */ w(oe, {})
       }
     )
   ] });
 }
 function He({ setApi: o }) {
-  const e = Bt(null), [t, s] = q(null), [i, n] = q({ x: 0, y: 0, scale: 1 });
+  const e = Bt(null), [t, s] = K(null), [i, n] = K({ x: 0, y: 0, scale: 1 });
   return It(() => {
     if (!e.current) return;
     const a = new Se(e.current);
@@ -1728,7 +1683,7 @@ function He({ setApi: o }) {
       a.dispose();
     };
   }, [o]), /* @__PURE__ */ W("div", { className: "pure-canvas relative size-full", children: [
-    /* @__PURE__ */ v(
+    /* @__PURE__ */ w(
       _e,
       {
         viewportX: i.x,
@@ -1736,14 +1691,16 @@ function He({ setApi: o }) {
         scale: i.scale
       }
     ),
-    /* @__PURE__ */ v("div", { ref: e, className: "size-full" }),
+    /* @__PURE__ */ w("div", { ref: e, className: "size-full" }),
     t && /* @__PURE__ */ W(jt, { children: [
-      /* @__PURE__ */ v("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ v(Ce, { api: t }) }),
-      /* @__PURE__ */ v("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ v(Ee, { api: t }) })
+      /* @__PURE__ */ w("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ w(Ce, { api: t }) }),
+      /* @__PURE__ */ w("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ w(Ee, { api: t }) })
     ] })
   ] });
 }
 export {
   Se as CanvasApi,
+  yt as NODE_NAME_FOR_SELECT,
   He as PureCanvas
 };
+//# sourceMappingURL=index.js.map