@8btc/whiteboard 0.0.1 → 0.0.2

package/dist/index.js

@@ -1,116 +1,116 @@
-var Dt = Object.defineProperty;
-var vt = (o) => {
+var Wt = Object.defineProperty;
+var Tt = (o) => {
   throw TypeError(o);
 };
-var Zt = (o, s, t) => s in o ? Dt(o, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[s] = t;
-var z = (o, s, t) => Zt(o, typeof s != "symbol" ? s + "" : s, t), mt = (o, s, t) => s.has(o) || vt("Cannot " + t);
-var i = (o, s, t) => (mt(o, s, "read from private field"), t ? t.call(o) : s.get(o)), d = (o, s, t) => s.has(o) ? vt("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(o) : s.set(o, t), N = (o, s, t, e) => (mt(o, s, "write to private field"), e ? e.call(o, t) : s.set(o, t), t), S = (o, s, t) => (mt(o, s, "access private method"), t);
-import { jsxs as U, jsx as w, Fragment as zt } from "react/jsx-runtime";
-import { useState as O, useEffect as xt, useRef as At } from "react";
-import R from "konva";
-import Yt from "mitt";
-import { v4 as $ } from "uuid";
-import { Slot as Xt } from "@radix-ui/react-slot";
-import { cva as Vt } from "class-variance-authority";
-import { clsx as Ut } from "clsx";
-import { twMerge as Ht } from "tailwind-merge";
-import { Minus as Ot, Plus as Ft, Undo2 as Lt, Redo2 as Wt } from "lucide-react";
-var f, l, P, K, q, j, B, J, Q, tt, et, bt;
-class Gt {
-  constructor(s, t) {
-    d(this, et);
+var Gt = (o, e, t) => e in o ? Wt(o, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : o[e] = t;
+var z = (o, e, t) => Gt(o, typeof e != "symbol" ? e + "" : e, t), wt = (o, e, t) => e.has(o) || Tt("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) ? Tt("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), M = (o, e, t) => (wt(o, e, "access private method"), t);
+import { jsxs as F, jsx as w, Fragment as $t } from "react/jsx-runtime";
+import { useState as G, useEffect as It, useRef as qt } from "react";
+import D from "konva";
+import Kt from "mitt";
+import { v4 as J } from "uuid";
+import { Slot as jt } from "@radix-ui/react-slot";
+import { cva as Bt } from "class-variance-authority";
+import { clsx as Jt } from "clsx";
+import { twMerge as Qt } from "tailwind-merge";
+import { Minus as te, Plus as ee, Undo2 as se, Redo2 as ie } from "lucide-react";
+var f, l, X, Q, tt, et, st, it, nt, rt, ot, Xt;
+class ne {
+  constructor(e, t) {
+    d(this, ot);
     d(this, f);
     d(this, l);
-    d(this, P, { x: 0, y: 0, scale: 1 });
+    d(this, X, { x: 0, y: 0, scale: 1 });
     /**
      * 处理滚轮缩放和平移
      */
-    d(this, K, (s) => {
-      s.evt.preventDefault();
-      const e = i(this, l).getPointerPosition();
-      if (e)
-        if (s.evt.ctrlKey) {
-          const r = i(this, P).scale, n = {
-            x: (e.x - i(this, P).x) / r,
-            y: (e.y - i(this, P).y) / r
-          }, a = 1.01, h = s.evt.deltaY > 0 ? -1 : 1, c = Math.min(Math.abs(s.evt.deltaY), 10);
-          let m = r;
+    d(this, Q, (e) => {
+      e.evt.preventDefault();
+      const s = r(this, l).getPointerPosition();
+      if (s)
+        if (e.evt.ctrlKey) {
+          const n = r(this, X).scale, i = {
+            x: (s.x - r(this, X).x) / n,
+            y: (s.y - r(this, X).y) / n
+          }, a = 1.01, h = e.evt.deltaY > 0 ? -1 : 1, c = Math.min(Math.abs(e.evt.deltaY), 10);
+          let g = n;
           for (let p = 0; p < c; p++)
-            m = h > 0 ? m * a : m / a;
-          const g = Math.max(0.1, Math.min(5, m)), I = {
-            x: e.x - n.x * g,
-            y: e.y - n.y * g
+            g = h > 0 ? g * a : g / a;
+          const m = Math.max(0.1, Math.min(5, g)), v = {
+            x: s.x - i.x * m,
+            y: s.y - i.y * m
           };
-          i(this, f).updateViewport({ x: I.x, y: I.y, scale: g });
+          r(this, f).updateViewport({ x: v.x, y: v.y, scale: m });
         } else {
-          const r = s.evt.shiftKey ? s.evt.deltaY : s.evt.deltaX, n = s.evt.shiftKey ? 0 : s.evt.deltaY;
-          i(this, f).updateViewport({
-            x: i(this, P).x - r,
-            y: i(this, P).y - n
+          const n = e.evt.shiftKey ? e.evt.deltaY : e.evt.deltaX, i = e.evt.shiftKey ? 0 : e.evt.deltaY;
+          r(this, f).updateViewport({
+            x: r(this, X).x - n,
+            y: r(this, X).y - i
           });
         }
     });
-    d(this, q, (s) => {
-      const t = i(this, f).getState().toolType;
-      if (s.evt.button !== 0 || t === "hand")
+    d(this, tt, (e) => {
+      const t = r(this, f).getState().toolType;
+      if (e.evt.button !== 0 || t === "hand")
         return;
-      const e = s.target === i(this, l), r = i(this, l).getRelativePointerPosition();
-      if (t === "select" && !e) {
-        const n = s.target.id();
-        n && i(this, f).selectNode(n, s.evt.shiftKey);
+      const s = e.target === r(this, l), n = r(this, l).getRelativePointerPosition();
+      if (t === "select" && !s) {
+        const i = e.target.id();
+        i && r(this, f).selectNode(i, e.evt.shiftKey);
         return;
       }
-      if (t === "rectangle" && r && i(this, f).createDraftNode(t, r), t === "image-marker" && r) {
-        const n = i(this, f).findImageAtPosition(r);
-        if (console.log(n, "imageShape"), n) {
-          const a = n.width(), h = n.height();
+      if (t === "rectangle" && n && r(this, f).createDraftNode(t, n), t === "image-marker" && n) {
+        const i = r(this, f).findImageAtPosition(n);
+        if (console.log(i, "imageShape"), i) {
+          const a = i.width(), h = i.height();
           if (a && h) {
             const c = {
-              x: n.x(),
-              y: n.y(),
+              x: i.x(),
+              y: i.y(),
               width: a,
               height: h
             };
-            i(this, f).createDraftNode(t, r, {
-              parent: n.id(),
+            r(this, f).createDraftNode(t, n, {
+              parent: i.id(),
               bounds: c,
-              startPosition: r
+              startPosition: n
             });
           }
         }
       }
-      i(this, f).selectNode();
+      r(this, f).selectNode();
     });
-    d(this, j, () => {
-      const s = i(this, f).getState().toolType;
-      if (s === "hand")
+    d(this, et, () => {
+      const e = r(this, f).getState().toolType;
+      if (e === "hand")
         return;
-      const t = i(this, l).getRelativePointerPosition();
-      (s === "rectangle" || s === "image-marker") && t && i(this, f).updateDraftNode(t);
+      const t = r(this, l).getRelativePointerPosition();
+      (e === "rectangle" || e === "image-marker") && t && r(this, f).updateDraftNode(t);
     });
-    d(this, B, () => {
-      const s = i(this, f).getState().toolType;
-      s !== "hand" && (s === "rectangle" || s === "image-marker") && i(this, f).finalizeDraftNode();
+    d(this, st, () => {
+      const e = r(this, f).getState().toolType;
+      e !== "hand" && (e === "rectangle" || e === "image-marker") && r(this, f).finalizeDraftNode();
     });
-    d(this, J, (s) => {
-      if (s.target !== i(this, l))
+    d(this, it, (e) => {
+      if (e.target !== r(this, l))
         return;
-      const t = i(this, f).getState().toolType;
+      const t = r(this, f).getState().toolType;
       t === "hand" ? this.setCursor("grabbing") : t === "select" && this.setCursor("all-scroll");
     });
-    d(this, Q, (s) => {
-      s.target === i(this, l) && i(this, f).updateViewport({
-        x: i(this, l).x(),
-        y: i(this, l).y()
+    d(this, nt, (e) => {
+      e.target === r(this, l) && r(this, f).updateViewport({
+        x: r(this, l).x(),
+        y: r(this, l).y()
       });
     });
-    d(this, tt, (s) => {
-      s.target === i(this, l) && (i(this, f).updateViewport({
-        x: i(this, l).x(),
-        y: i(this, l).y()
+    d(this, rt, (e) => {
+      e.target === r(this, l) && (r(this, f).updateViewport({
+        x: r(this, l).x(),
+        y: r(this, l).y()
       }), this.resetCursor());
     });
-    N(this, f, s), N(this, l, new R.Stage({
+    N(this, f, e), N(this, l, new D.Stage({
       container: t.container,
       width: t.width,
       height: t.height,
@@ -120,185 +120,185 @@ class Gt {
       scaleY: 1,
       draggable: t.draggable ?? !1,
       className: t.className
-    })), S(this, et, bt).call(this);
+    })), M(this, ot, Xt).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
    */
   getStage() {
-    return i(this, l);
+    return r(this, l);
   }
   /**
    * 获取当前视口状态
    */
   getViewport() {
-    return { ...i(this, P) };
+    return { ...r(this, X) };
   }
   /**
    * 设置视口（包括位置、缩放和尺寸）
    */
-  setViewport(s) {
-    const t = { ...i(this, P), ...s };
-    N(this, P, t), s.x !== void 0 && i(this, l).x(s.x), s.y !== void 0 && i(this, l).y(s.y), s.scale !== void 0 && (i(this, l).scaleX(s.scale), i(this, l).scaleY(s.scale)), s.width !== void 0 && i(this, l).width(s.width), s.height !== void 0 && i(this, l).height(s.height);
+  setViewport(e) {
+    const t = { ...r(this, X), ...e };
+    N(this, X, 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(s) {
-    i(this, l).draggable(s);
+  setDraggable(e) {
+    r(this, l).draggable(e);
   }
   /**
    * 设置光标样式
    */
-  setCursor(s) {
-    const t = i(this, l).container();
-    t.style.cursor = s;
+  setCursor(e) {
+    const t = r(this, l).container();
+    t.style.cursor = e;
   }
   /**
    * 重置光标样式
    */
   resetCursor() {
-    const s = i(this, l).container();
-    if (i(this, f).getState().toolType === "hand") {
-      s.style.cursor = "grab";
+    const e = r(this, l).container();
+    if (r(this, f).getState().toolType === "hand") {
+      e.style.cursor = "grab";
       return;
     }
-    s.style.cursor = "default";
+    e.style.cursor = "default";
   }
   /**
    * 销毁 Stage
    */
   destroy() {
-    i(this, l).destroy();
+    r(this, l).destroy();
   }
 }
-f = new WeakMap(), l = new WeakMap(), P = new WeakMap(), K = new WeakMap(), q = new WeakMap(), j = new WeakMap(), B = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), tt = new WeakMap(), et = new WeakSet(), /**
+f = new WeakMap(), l = new WeakMap(), X = new WeakMap(), Q = new WeakMap(), tt = new WeakMap(), et = new WeakMap(), st = new WeakMap(), it = new WeakMap(), nt = new WeakMap(), rt = new WeakMap(), ot = new WeakSet(), /**
  * 设置事件监听器
  */
-bt = function() {
-  i(this, l).on("wheel", i(this, K)), i(this, l).on("pointerdown", i(this, q)), i(this, l).on("pointermove", i(this, j)), i(this, l).on("pointerup", i(this, B)), i(this, l).on("dragstart", i(this, J)), i(this, l).on("dragmove", i(this, Q)), i(this, l).on("dragend", i(this, tt));
+Xt = function() {
+  r(this, l).on("wheel", r(this, Q)), r(this, l).on("pointerdown", r(this, tt)), r(this, l).on("pointermove", r(this, et)), r(this, l).on("pointerup", r(this, st)), r(this, l).on("dragstart", r(this, it)), r(this, l).on("dragmove", r(this, nt)), r(this, l).on("dragend", r(this, rt));
 };
-var F, x, st, it, rt, nt, ot, at, ht, Et;
-class $t {
-  constructor(s, t) {
-    d(this, ht);
-    d(this, F);
-    d(this, x);
+var q, y, at, ht, ct, dt, lt, mt, gt, Dt;
+class re {
+  constructor(e, t) {
+    d(this, gt);
+    d(this, q);
+    d(this, y);
     /**
      * 处理 transformstart 事件
      */
-    d(this, st, () => {
+    d(this, at, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transform 事件
      */
-    d(this, it, () => {
+    d(this, ht, () => {
       console.log("transforming..."), this.emitPositionChange();
     });
     /**
      * 处理 transformend 事件
      */
-    d(this, rt, () => {
+    d(this, ct, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragstart 事件
      */
-    d(this, nt, () => {
+    d(this, dt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragmove 事件
      */
-    d(this, ot, () => {
+    d(this, lt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragend 事件
      */
-    d(this, at, () => {
+    d(this, mt, () => {
       this.emitPositionChange();
     });
-    N(this, F, s), N(this, x, new R.Transformer({
+    N(this, q, e), N(this, y, 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
-    })), S(this, ht, Et).call(this);
+    })), M(this, gt, Dt).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return i(this, x);
+    return r(this, y);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    if (i(this, x).nodes().length === 0)
+    if (r(this, y).nodes().length === 0)
       return null;
-    const t = i(this, x).getClientRect();
+    const t = r(this, y).getClientRect();
     return {
       x: t.x,
       y: t.y,
       width: t.width,
       height: t.height,
-      rotation: i(this, x).rotation()
+      rotation: r(this, y).rotation()
     };
   }
   /**
    * 设置要变换的节点
    */
-  setNodes(s) {
-    if (s.length === 0) {
+  setNodes(e) {
+    if (e.length === 0) {
       this.clearNodes();
       return;
     }
-    i(this, x).nodes(s), i(this, x).moveToTop(), this.emitPositionChange();
+    r(this, y).nodes(e), r(this, y).moveToTop(), this.emitPositionChange();
   }
   /**
    * 获取当前变换的节点
    */
   getNodes() {
-    return i(this, x).nodes();
+    return r(this, y).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    i(this, x).nodes([]), i(this, x).moveToBottom(), this.emitPositionChange();
+    r(this, y).nodes([]), r(this, y).moveToBottom(), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
    */
   emitPositionChange() {
-    const s = this.getPosition();
-    i(this, F).emitEvent("transformer:positionChange", s);
+    const e = this.getPosition();
+    r(this, q).emitEvent("transformer:positionChange", e);
   }
   /**
    * 销毁 Transformer
    */
   destroy() {
-    i(this, x).destroy();
+    r(this, y).destroy();
   }
 }
-F = new WeakMap(), x = new WeakMap(), st = new WeakMap(), it = new WeakMap(), rt = new WeakMap(), nt = new WeakMap(), ot = new WeakMap(), at = new WeakMap(), ht = new WeakSet(), /**
+q = new WeakMap(), y = new WeakMap(), at = new WeakMap(), ht = new WeakMap(), ct = new WeakMap(), dt = new WeakMap(), lt = new WeakMap(), mt = new WeakMap(), gt = new WeakSet(), /**
  * 设置事件监听器
  */
-Et = function() {
-  i(this, x).on("transformstart", i(this, st)), i(this, x).on("transform", i(this, it)), i(this, x).on("transformend", i(this, rt)), i(this, x).on("dragstart", i(this, nt)), i(this, x).on("dragmove", i(this, ot)), i(this, x).on("dragend", i(this, at));
+Dt = function() {
+  r(this, y).on("transformstart", r(this, at)), r(this, y).on("transform", r(this, ht)), r(this, y).on("transformend", r(this, ct)), r(this, y).on("dragstart", r(this, dt)), r(this, y).on("dragmove", r(this, lt)), r(this, y).on("dragend", r(this, mt));
 };
-class Kt {
-  constructor(s) {
+class oe {
+  constructor(e) {
     z(this, "_past", []);
     z(this, "_present");
     z(this, "_future", []);
     z(this, "_emitter");
-    this._present = s, this._emitter = Yt();
+    this._present = e, this._emitter = Kt();
   }
   /**
    * 获取当前状态
@@ -331,36 +331,36 @@ class Kt {
   /**
    * 订阅状态事件
    */
-  on(s, t) {
-    this._emitter.on(s, t);
+  on(e, t) {
+    this._emitter.on(e, t);
   }
   /**
    * 取消订阅状态事件
    */
-  off(s, t) {
-    this._emitter.off(s, t);
+  off(e, t) {
+    this._emitter.off(e, t);
   }
   /**
    * 发送事件
    */
-  emit(s, t) {
-    this._emitter.emit(s, t);
+  emit(e, t) {
+    this._emitter.emit(e, t);
   }
   /**
    * 撤销操作
    */
   undo() {
     if (this._past.length === 0) return;
-    const s = this._past[this._past.length - 1], t = this._past.slice(0, this._past.length - 1);
-    this._past = t, this._future = [this._present, ...this._future], this._present = s, this._syncState(s), this._emitter.emit("state:undo", s), this._emitter.emit("state:change", s);
+    const e = this._past[this._past.length - 1], t = this._past.slice(0, this._past.length - 1);
+    this._past = t, this._future = [this._present, ...this._future], this._present = e, this._syncState(e), this._emitter.emit("state:undo", e), this._emitter.emit("state:change", e);
   }
   /**
    * 重做操作
    */
   redo() {
     if (this._future.length === 0) return;
-    const s = this._future[0], t = this._future.slice(1);
-    this._past = [...this._past, this._present], this._future = t, this._present = s, this._syncState(s), this._emitter.emit("state:redo", s), this._emitter.emit("state:change", s);
+    const e = this._future[0], t = this._future.slice(1);
+    this._past = [...this._past, this._present], this._future = t, this._present = e, this._syncState(e), this._emitter.emit("state:redo", e), this._emitter.emit("state:change", e);
   }
   /**
    * 重置历史记录
@@ -373,16 +373,16 @@ class Kt {
    * @param partial - 部分状态更新
    * @param addToHistory - 是否添加到历史记录
    */
-  _updateState(s, t = !0) {
-    const e = { ...this._present, ...s };
-    t && (this._past = [...this._past, this._present], this._future = []), this._present = e, this._emitter.emit("state:change", e);
+  _updateState(e, t = !0) {
+    const s = { ...this._present, ...e };
+    t && (this._past = [...this._past, this._present], this._future = []), this._present = s, this._emitter.emit("state:change", s);
   }
   /**
    * 同步状态到外部系统（由子类实现）
    * @param _state - 要同步的状态
    */
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  _syncState(s) {
+  _syncState(e) {
   }
   /**
    * 清理资源
@@ -391,33 +391,33 @@ class Kt {
     this._emitter.all.clear();
   }
 }
-const wt = "shapeNameForSelect", y = {
+const $ = "shapeNameForSelect", u = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
-}, V = {
+}, O = {
   MIN_SIZE: 10
-}, St = {
+}, kt = {
   MIN_SIZE: 10
 };
-function qt(o, s, t) {
-  return 2 * (s + o - t * (4 - Math.PI));
+function ae(o, e, t) {
+  return 2 * (e + o - t * (4 - Math.PI));
 }
-function jt(o, s, t) {
-  let e = 1, r = 0, n = 0;
+function he(o, e, t) {
+  let s = 1, n = 0, i = 0;
   switch (t) {
     case "dashed":
-      r = Math.min(s * 2, o / 4);
+      n = Math.min(e * 2, o / 4);
       break;
     case "dotted":
-      e = 8, r = s / e;
+      s = 8, n = e / s;
       break;
     default:
       return [];
   }
-  let a = Math.floor(o / r / (2 * e));
-  return a = Math.max(a, 3), r = o / a / (2 * e), n = (o - a * r) / a, [r, n];
+  let a = Math.floor(o / n / (2 * s));
+  return a = Math.max(a, 3), n = o / a / (2 * s), i = (o - a * n) / a, [n, i];
 }
-function Bt(o) {
+function ce(o) {
   switch (o) {
     case "small":
       return 2;
@@ -431,24 +431,24 @@ function Bt(o) {
       return 3;
   }
 }
-function Jt(o) {
+function de(o) {
   return Array.isArray(o) && o.length > 1 ? o[0] + o[1] : 0;
 }
-function _t(o) {
+function Pt(o) {
   return {
-    width: Math.max(St.MIN_SIZE, o.width() * o.scaleX()),
-    height: Math.max(St.MIN_SIZE, o.height() * o.scaleY())
+    width: Math.max(kt.MIN_SIZE, o.width() * o.scaleX()),
+    height: Math.max(kt.MIN_SIZE, o.height() * o.scaleY())
   };
 }
-class Nt {
-  constructor(s, t) {
+class bt {
+  constructor(e, t) {
     z(this, "core");
     z(this, "node");
     z(this, "element");
     z(this, "toolTypeChangeHandler");
-    this.core = s, this.node = t, this.element = this.createElement(), this.toolTypeChangeHandler = (e) => {
-      const r = e === "select";
-      this.element.listening(r);
+    this.core = e, this.node = t, this.element = this.createElement(), this.toolTypeChangeHandler = (s) => {
+      const n = s === "select";
+      this.element.listening(n);
     }, this.toolTypeChangeHandler(this.core.getToolType()), this.core.on("toolType:change", this.toolTypeChangeHandler);
   }
   /**
@@ -470,13 +470,13 @@ class Nt {
     this.core.off("toolType:change", this.toolTypeChangeHandler), this.element.destroy();
   }
 }
-function Qt(o, s) {
-  if (!s || s === 0)
+function le(o, e) {
+  if (!e || e === 0)
     return null;
-  const t = new R.Animation((e) => {
-    if (!e) return;
-    const r = -e.time / 10 % s;
-    o.dashOffset(r);
+  const t = new D.Animation((s) => {
+    if (!s) return;
+    const n = -s.time / 10 % e;
+    o.dashOffset(n);
   }, o.getLayer());
   return {
     start: () => t.start(),
@@ -484,37 +484,37 @@ function Qt(o, s) {
     isRunning: () => t.isRunning()
   };
 }
-var _, D, gt, pt, kt;
-class te extends Nt {
-  constructor(t, e) {
-    super(t, e);
-    d(this, D);
-    d(this, _, null);
-    e.style.animated && S(this, D, gt).call(this), S(this, D, kt).call(this, this.getElement());
+var I, Z, vt, Nt, Zt;
+class me extends bt {
+  constructor(t, s) {
+    super(t, s);
+    d(this, Z);
+    d(this, I, null);
+    s.style.animated && M(this, Z, vt).call(this), M(this, Z, Zt).call(this, this.getElement());
   }
   createElement() {
     const t = Math.max(
-      this.node.props.width ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), e = Math.max(
-      this.node.props.height ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), r = {
+      this.node.props.width ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), s = Math.max(
+      this.node.props.height ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), n = {
       id: this.node.id,
       ...this.node.props,
       ...this.node.style,
       width: t,
-      height: e,
-      cornerRadius: y.CORNER_RADIUS,
-      name: wt,
+      height: s,
+      cornerRadius: u.CORNER_RADIUS,
+      name: $,
       draggable: !0,
       stroke: "black",
       strokeWidth: 2
-    }, n = new R.Rect(r);
-    return n.setAttrs({
+    }, i = new D.Rect(n);
+    return i.setAttrs({
       width: t,
-      height: e
-    }), n;
+      height: s
+    }), i;
   }
   /**
    * 获取 Konva.Rect 实例
@@ -538,88 +538,88 @@ class te extends Nt {
         ...t.style
       }
     };
-    const e = this.getElement();
-    e.x(this.node.props.x), e.y(this.node.props.y);
-    const r = Math.max(
-      this.node.props.width ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), n = Math.max(
-      this.node.props.height ?? y.MIN_SIZE,
-      y.MIN_SIZE
+    const s = this.getElement();
+    s.x(this.node.props.x), s.y(this.node.props.y);
+    const n = Math.max(
+      this.node.props.width ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), i = Math.max(
+      this.node.props.height ?? u.MIN_SIZE,
+      u.MIN_SIZE
     );
-    e.width(r), e.height(n), this.node.style.animated && !i(this, _) ? S(this, D, gt).call(this) : !this.node.style.animated && i(this, _) && S(this, D, pt).call(this);
+    s.width(n), s.height(i), this.node.style.animated && !r(this, I) ? M(this, Z, vt).call(this) : !this.node.style.animated && r(this, I) && M(this, Z, Nt).call(this);
   }
   /**
    * 销毁
    */
   destroy() {
-    S(this, D, pt).call(this), super.destroy();
+    M(this, Z, Nt).call(this), super.destroy();
   }
 }
-_ = new WeakMap(), D = new WeakSet(), /**
+I = new WeakMap(), Z = new WeakSet(), /**
  * 初始化动画
  */
-gt = function() {
-  const t = this.getElement(), e = t.dash();
-  if (!e || e.length === 0) return;
-  const r = Jt(e);
-  N(this, _, Qt(t, r)), i(this, _) && i(this, _).start();
+vt = function() {
+  const t = this.getElement(), s = t.dash();
+  if (!s || s.length === 0) return;
+  const n = de(s);
+  N(this, I, le(t, n)), r(this, I) && r(this, I).start();
 }, /**
  * 销毁动画
  */
-pt = function() {
-  i(this, _) && (i(this, _).stop(), N(this, _, null));
+Nt = function() {
+  r(this, I) && (r(this, I).stop(), N(this, I, null));
 }, /**
  * 设置事件处理器
  */
-kt = function(t = void 0) {
-  const e = t ?? this.getElement();
-  e.on("transformstart", () => {
-    this.node.style.animated && i(this, _) && i(this, _).stop();
-  }), e.on("transform", (r) => {
-    const n = r.target, { width: a, height: h } = _t(n), c = qt(a, h, y.CORNER_RADIUS), m = jt(
+Zt = function(t = void 0) {
+  const s = t ?? this.getElement();
+  s.on("transformstart", () => {
+    this.node.style.animated && r(this, I) && r(this, I).stop();
+  }), s.on("transform", (n) => {
+    const i = n.target, { width: a, height: h } = Pt(i), c = ae(a, h, u.CORNER_RADIUS), g = he(
       c,
-      Bt(this.node.style.size),
+      ce(this.node.style.size),
       this.node.style.line
     );
-    n.scale({ x: 1, y: 1 }), n.width(a), n.height(h), n.dash(m.map((g) => g * this.core.getStageScale()));
-  }), e.on("transformend", (r) => {
-    const n = r.target, { width: a, height: h } = _t(n), c = {
+    i.scale({ x: 1, y: 1 }), i.width(a), i.height(h), i.dash(g.map((m) => m * this.core.getStageScale()));
+  }), s.on("transformend", (n) => {
+    const i = n.target, { width: a, height: h } = Pt(i), c = {
       ...this.node.props,
-      x: n.x(),
-      y: n.y(),
+      x: i.x(),
+      y: i.y(),
       width: a,
       height: h,
-      rotation: n.rotation()
+      rotation: i.rotation()
     };
     this.node.props = c, this.core._syncNodeFromElement(this.node.id, {
       props: c
-    }), this.node.style.animated && i(this, _)?.isRunning() === !1 && i(this, _).start();
-  }), e.on("dragend", (r) => {
-    const n = r.target, a = {
+    }), this.node.style.animated && r(this, I)?.isRunning() === !1 && r(this, I).start();
+  }), s.on("dragend", (n) => {
+    const i = n.target, a = {
       ...this.node.props,
-      x: n.x(),
-      y: n.y()
+      x: i.x(),
+      y: i.y()
     };
     this.node.props = a, this.core._syncNodeFromElement(this.node.id, {
       props: a
     });
   });
 };
-var E, ut, Ct, yt, ft;
-class ee extends Nt {
-  constructor(t, e) {
-    super(t, e);
-    d(this, E);
-    S(this, E, ut).call(this), S(this, E, Ct).call(this, this.getElement());
+var k, St, zt, Mt, _t;
+class ge extends bt {
+  constructor(t, s) {
+    super(t, s);
+    d(this, k);
+    M(this, k, St).call(this), M(this, k, zt).call(this, this.getElement());
   }
   createElement() {
     const t = document.createElement("canvas");
-    return t.width = 1, t.height = 1, new R.Image({
+    return t.width = 1, t.height = 1, new D.Image({
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
-      name: wt,
+      name: $,
       draggable: !0,
       image: t
     });
@@ -650,12 +650,12 @@ class ee extends Nt {
         ...t.meta
       }
     };
-    const e = this.getElement();
-    if (e.x(this.node.props.x), e.y(this.node.props.y), this.node.props.width && this.node.props.height) {
-      const r = Math.max(this.node.props.width, V.MIN_SIZE), n = Math.max(this.node.props.height, V.MIN_SIZE);
-      e.width(r), e.height(n);
+    const s = this.getElement();
+    if (s.x(this.node.props.x), s.y(this.node.props.y), this.node.props.width && this.node.props.height) {
+      const n = Math.max(this.node.props.width, O.MIN_SIZE), i = Math.max(this.node.props.height, O.MIN_SIZE);
+      s.width(n), s.height(i);
     }
-    this.node.props.rotation !== void 0 && e.rotation(this.node.props.rotation), t.meta?.imageUrl && t.meta.imageUrl !== this.node.meta.imageUrl && S(this, E, ut).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);
   }
   /**
    * 销毁
@@ -664,138 +664,138 @@ class ee extends Nt {
     super.destroy();
   }
 }
-E = new WeakSet(), /**
+k = new WeakSet(), /**
  * 加载图片
  */
-ut = function() {
+St = function() {
   const t = this.node.meta.imageUrl;
   if (!t) {
     console.warn("Image URL is missing");
     return;
   }
-  const e = new window.Image();
-  e.crossOrigin = "anonymous", e.src = t, e.onload = () => {
-    this.getElement().image(e);
-    const r = this.node.props.width ?? e.width, n = this.node.props.height ?? e.height;
-    this.getElement().width(Math.max(r, V.MIN_SIZE)), this.getElement().height(Math.max(n, V.MIN_SIZE));
-  }, e.onerror = () => {
+  const s = new window.Image();
+  s.crossOrigin = "anonymous", s.src = t, s.onload = () => {
+    this.getElement().image(s);
+    const n = this.node.props.width ?? s.width, i = this.node.props.height ?? s.height;
+    this.getElement().width(Math.max(n, O.MIN_SIZE)), this.getElement().height(Math.max(i, O.MIN_SIZE));
+  }, s.onerror = () => {
     console.error("Failed to load image:", t);
   };
 }, /**
  * 设置事件处理器
  */
-Ct = function(t) {
-  t.on("transform", (e) => {
-    const r = e.target, n = Math.max(V.MIN_SIZE, r.width() * r.scaleX()), a = Math.max(V.MIN_SIZE, r.height() * r.scaleY());
-    r.scale({ x: 1, y: 1 }), r.width(n), r.height(a), S(this, E, yt).call(this);
-  }), t.on("transformend", (e) => {
-    const r = e.target, n = {
+zt = function(t) {
+  t.on("transform", (s) => {
+    const n = s.target, i = Math.max(O.MIN_SIZE, n.width() * n.scaleX()), a = Math.max(O.MIN_SIZE, n.height() * n.scaleY());
+    n.scale({ x: 1, y: 1 }), n.width(i), n.height(a), M(this, k, Mt).call(this);
+  }), t.on("transformend", (s) => {
+    const n = s.target, i = {
       ...this.node.props,
-      x: r.x(),
-      y: r.y(),
-      width: r.width(),
-      height: r.height(),
-      rotation: r.rotation()
+      x: n.x(),
+      y: n.y(),
+      width: n.width(),
+      height: n.height(),
+      rotation: n.rotation()
     };
-    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
-      props: n
-    }), S(this, E, ft).call(this);
+    this.node.props = i, this.core._syncNodeFromElement(this.node.id, {
+      props: i
+    }), M(this, k, _t).call(this);
   }), t.on("dragmove", () => {
-    S(this, E, yt).call(this);
-  }), t.on("dragend", (e) => {
-    const r = e.target, n = {
+    M(this, k, Mt).call(this);
+  }), t.on("dragend", (s) => {
+    const n = s.target, i = {
       ...this.node.props,
-      x: r.x(),
-      y: r.y()
+      x: n.x(),
+      y: n.y()
     };
-    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
-      props: n
-    }), S(this, E, ft).call(this);
+    this.node.props = i, this.core._syncNodeFromElement(this.node.id, {
+      props: i
+    }), M(this, k, _t).call(this);
   });
 }, /**
  * 同步 image-marker 节点的位置（实时更新 Konva 元素）
  */
-yt = function() {
-  const t = this.getElement(), e = t.getLayer();
-  if (!e) return;
-  const r = t.x(), n = t.y(), a = t.width(), h = t.height(), c = e.find(
-    (g) => g.hasName(this.node.id)
-  ), m = this.core.getState().nodes || [];
-  c.forEach((g) => {
-    const I = m.find((p) => p.id === g.id());
-    if (I?.type === "image-marker" && I.meta.relativePosition) {
-      const { start: p, end: k } = I.meta.relativePosition, C = r + p.percentX / 100 * a, T = n + p.percentY / 100 * h, X = r + k.percentX / 100 * a, Z = n + k.percentY / 100 * h, Pt = Math.min(C, X), Rt = Math.min(T, Z), dt = Math.abs(X - C), lt = Math.abs(Z - T);
-      g.position({ x: Pt, y: Rt }), g.setAttrs({ width: dt, height: lt }), g.getChildren().forEach((G) => {
-        G.getClassName() === "Rect" ? G.setAttrs({ width: dt, height: lt }) : G.getClassName() === "Group" && G.setAttrs({ x: dt, y: lt });
+Mt = function() {
+  const t = this.getElement(), s = t.getLayer();
+  if (!s) return;
+  const n = t.x(), i = t.y(), a = t.width(), h = t.height(), c = s.find(
+    (m) => m.hasName(this.node.id)
+  ), g = this.core.getState().nodes || [];
+  c.forEach((m) => {
+    const v = g.find((p) => p.id === m.id());
+    if (v?.type === "image-marker" && v.meta.relativePosition) {
+      const { start: p, end: _ } = v.meta.relativePosition, b = n + p.percentX / 100 * a, C = i + p.percentY / 100 * h, P = n + _.percentX / 100 * a, E = i + _.percentY / 100 * h, ut = Math.min(b, P), ft = Math.min(C, E), R = Math.abs(P - b), Y = Math.abs(E - C);
+      m.position({ x: ut, y: ft }), m.setAttrs({ width: R, height: Y }), m.getChildren().forEach((L) => {
+        L.getClassName() === "Rect" ? L.setAttrs({ width: R, height: Y }) : L.getClassName() === "Group" && L.setAttrs({ x: R, y: Y });
       });
     }
   });
 }, /**
  * 同步 image-marker 节点到状态
  */
-ft = function() {
-  const e = this.getElement().getLayer();
-  if (!e) return;
-  e.find(
-    (n) => n.hasName(this.node.id)
-  ).forEach((n) => {
-    this.core._syncNodeFromElement(n.id(), {
+_t = function() {
+  const s = this.getElement().getLayer();
+  if (!s) return;
+  s.find(
+    (i) => i.hasName(this.node.id)
+  ).forEach((i) => {
+    this.core._syncNodeFromElement(i.id(), {
       props: {
-        x: n.x(),
-        y: n.y(),
-        width: n.width(),
-        height: n.height()
+        x: i.x(),
+        y: i.y(),
+        width: i.width(),
+        height: i.height()
       }
     });
   });
 };
-var Y, b, L, W, ct, Tt;
-class se extends Nt {
-  constructor(t, e) {
-    super(t, e);
-    d(this, ct);
-    d(this, Y);
-    d(this, b);
-    d(this, L);
-    d(this, W);
-    const r = this.getElement();
-    N(this, Y, r.findOne(".rect")), N(this, b, r.findOne(".marker-group")), N(this, L, i(this, b).findOne("Circle")), N(this, W, i(this, b).findOne("Text")), S(this, ct, Tt).call(this);
+var H, T, K, j, pt, At;
+class pe extends bt {
+  constructor(t, s) {
+    super(t, s);
+    d(this, pt);
+    d(this, H);
+    d(this, T);
+    d(this, K);
+    d(this, j);
+    const n = this.getElement();
+    N(this, H, n.findOne(".rect")), N(this, T, n.findOne(".marker-group")), N(this, K, r(this, T).findOne("Circle")), N(this, j, r(this, T).findOne("Text")), M(this, pt, At).call(this);
   }
   createElement() {
     const t = Math.max(
-      this.node.props.width ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), e = Math.max(
-      this.node.props.height ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), r = new R.Group({
+      this.node.props.width ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), s = Math.max(
+      this.node.props.height ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), n = new D.Group({
       id: this.node.id,
       name: `static ${this.node.meta.parent}`,
       x: this.node.props.x,
       y: this.node.props.y,
       width: t,
-      height: e
-    }), n = new R.Rect({
+      height: s
+    }), i = new D.Rect({
       name: "rect",
       x: 0,
       y: 0,
       width: t,
-      height: e,
+      height: s,
       stroke: this.node.style.color,
       strokeWidth: 2,
       dash: [5, 5],
       fill: "transparent",
-      cornerRadius: y.CORNER_RADIUS
-    }), a = new R.Group({
+      cornerRadius: u.CORNER_RADIUS
+    }), a = new D.Group({
       name: "marker-group",
       x: t,
-      y: e
-    }), c = 16 / this.core.getStageScale(), m = new R.Circle({
+      y: s
+    }), c = 16 / this.core.getStageScale(), g = new D.Circle({
       radius: c,
       fill: "red",
       stroke: "black",
       strokeWidth: 2
-    }), g = new R.Text({
+    }), m = new D.Text({
       x: -c,
       y: -c,
       width: c * 2,
@@ -806,7 +806,7 @@ class se extends Nt {
       fontSize: 16,
       fill: "white"
     });
-    return a.add(m), a.add(g), r.add(n), r.add(a), r;
+    return a.add(g), a.add(m), n.add(i), n.add(a), n;
   }
   /**
    * 获取 Konva.Group 实例
@@ -834,16 +834,16 @@ class se extends Nt {
         ...t.meta
       }
     };
-    const e = this.getElement();
-    e.x(this.node.props.x), e.y(this.node.props.y);
-    const r = Math.max(
-      this.node.props.width ?? y.MIN_SIZE,
-      y.MIN_SIZE
-    ), n = Math.max(
-      this.node.props.height ?? y.MIN_SIZE,
-      y.MIN_SIZE
+    const s = this.getElement();
+    s.x(this.node.props.x), s.y(this.node.props.y);
+    const n = Math.max(
+      this.node.props.width ?? u.MIN_SIZE,
+      u.MIN_SIZE
+    ), i = Math.max(
+      this.node.props.height ?? u.MIN_SIZE,
+      u.MIN_SIZE
     );
-    e.width(r), e.height(n), i(this, Y).width(r), i(this, Y).height(n), i(this, b).x(r), i(this, b).y(n), t.style?.color && i(this, Y).stroke(t.style.color), t.meta?.markerNumber !== void 0 && i(this, W).text(String(t.meta.markerNumber));
+    s.width(n), s.height(i), r(this, H).width(n), r(this, H).height(i), r(this, T).x(n), r(this, T).y(i), t.style?.color && r(this, H).stroke(t.style.color), t.meta?.markerNumber !== void 0 && r(this, j).text(String(t.meta.markerNumber));
   }
   /**
    * 销毁
@@ -855,39 +855,39 @@ class se extends Nt {
    * 更新焦点状态（hover 或 selected）
    */
   setFocusState(t) {
-    const e = t ? 3 : 2, r = t ? 1.2 : 1;
-    i(this, Y).strokeWidth(e), i(this, L).strokeWidth(e), i(this, b).scaleX(r), i(this, b).scaleY(r);
+    const s = t ? 3 : 2, n = t ? 1.2 : 1;
+    r(this, H).strokeWidth(s), r(this, K).strokeWidth(s), r(this, T).scaleX(n), r(this, T).scaleY(n);
   }
 }
-Y = new WeakMap(), b = new WeakMap(), L = new WeakMap(), W = new WeakMap(), ct = new WeakSet(), /**
+H = new WeakMap(), T = new WeakMap(), K = new WeakMap(), j = new WeakMap(), pt = new WeakSet(), /**
  * 设置事件处理器
  */
-Tt = function() {
-  i(this, b).on("pointerover", () => {
+At = function() {
+  r(this, T).on("pointerover", () => {
     this.setFocusState(!0), this.core.setCursor("pointer");
-  }), i(this, b).on("pointerout", () => {
-    const e = (this.core.getState().selectedNodeIds || []).includes(this.node.id);
-    this.setFocusState(e), this.core.resetCursor();
-  }), i(this, b).on("pointerdown", () => {
+  }), r(this, T).on("pointerout", () => {
+    const s = (this.core.getState().selectedNodeIds || []).includes(this.node.id);
+    this.setFocusState(s), this.core.resetCursor();
+  }), r(this, T).on("pointerdown", () => {
     this.core.selectNode(this.node.id);
   });
 };
-function Mt(o, s, t) {
-  switch (s) {
+function Rt(o, e, t) {
+  switch (e) {
     case "rectangle":
-      return new te(o, t);
+      return new me(o, t);
     case "image":
-      return new ee(o, t);
+      return new ge(o, t);
     case "image-marker":
-      return new se(o, t);
+      return new pe(o, t);
     default:
       return null;
   }
 }
-const ie = (o, s, t, e) => {
-  const r = {
+const ue = (o, e, t, s) => {
+  const n = {
     type: o,
-    id: $(),
+    id: J(),
     text: null,
     style: {
       opacity: 1,
@@ -897,52 +897,52 @@ const ie = (o, s, t, e) => {
       animated: !1
     },
     props: {
-      x: s.x,
-      y: s.y,
+      x: e.x,
+      y: e.y,
       rotation: 0,
       visible: !0
     },
-    meta: e ?? {}
+    meta: s ?? {}
   };
   return o === "image-marker" ? {
-    ...r,
+    ...n,
     style: {
-      ...r.style,
+      ...n.style,
       color: "#ff0000",
       line: "dashed"
     }
-  } : r;
+  } : n;
 };
-function re(o, s, t) {
-  let e = s;
-  o.type === "image-marker" && t && (e = {
-    x: Math.max(t.x, Math.min(t.x + t.width, s.x)),
-    y: Math.max(t.y, Math.min(t.y + t.height, s.y))
+function fe(o, e, t) {
+  let s = e;
+  o.type === "image-marker" && t && (s = {
+    x: Math.max(t.x, Math.min(t.x + t.width, e.x)),
+    y: Math.max(t.y, Math.min(t.y + t.height, e.y))
   });
-  const [r, n] = ne(
+  const [n, i] = ye(
     { x: o.props.x, y: o.props.y },
-    e
+    s
   );
   return o.type === "rectangle" || o.type === "image-marker" ? {
     ...o,
     props: {
       ...o.props,
-      x: r.x,
-      y: r.y,
-      width: Math.max(n.x - r.x, y.MIN_SIZE),
-      height: Math.max(n.y - r.y, y.MIN_SIZE)
+      x: n.x,
+      y: n.y,
+      width: Math.max(i.x - n.x, u.MIN_SIZE),
+      height: Math.max(i.y - n.y, u.MIN_SIZE)
     }
   } : o;
 }
-function ne(o, s) {
-  let t = o.x, e = o.y, r = s.x, n = s.y, a;
-  return t > r && (a = Math.abs(t - r), t = r, r = t + a), e > n && (a = Math.abs(e - n), e = n, n = e + a), [
-    { x: t, y: e },
-    { x: r, y: n }
+function ye(o, e) {
+  let t = o.x, s = o.y, n = e.x, i = e.y, a;
+  return t > n && (a = Math.abs(t - n), t = n, n = t + a), s > i && (a = Math.abs(s - i), s = i, i = s + a), [
+    { x: t, y: s },
+    { x: n, y: i }
   ];
 }
-var u, A, M, v;
-class oe extends Kt {
+var x, A, V, S;
+class xe extends oe {
   constructor(t) {
     super({
       viewport: {
@@ -955,53 +955,53 @@ class oe extends Kt {
       toolType: "select",
       nodes: []
     });
-    d(this, u);
+    d(this, x);
     d(this, A);
-    d(this, M);
-    d(this, v, null);
-    N(this, u, new Gt(this, {
+    d(this, V);
+    d(this, S, null);
+    N(this, x, new ne(this, {
       container: t,
       width: t.clientWidth,
       height: t.clientHeight,
       draggable: !1,
       className: "touch-none"
-    })), N(this, A, new R.Layer()), N(this, M, new $t(this)), i(this, u).getStage().add(i(this, A)), i(this, A).add(i(this, M).getTransformer()), this.updateViewport(this.getState().viewport, !1);
+    })), N(this, A, new D.Layer()), N(this, V, new re(this)), r(this, x).getStage().add(r(this, A)), r(this, A).add(r(this, V).getTransformer()), this.updateViewport(this.getState().viewport, !1);
   }
   /**
    * 获取 CanvasStage 实例
    */
   getCanvasStage() {
-    return i(this, u);
+    return r(this, x);
   }
   /**
    * 获取 CanvasTransformer 实例
    */
   getCanvasTransformer() {
-    return i(this, M);
+    return r(this, V);
   }
   /**
    * 发射事件（供内部类使用）
    */
-  emitEvent(t, e) {
-    this.emit(t, e);
+  emitEvent(t, s) {
+    this.emit(t, s);
   }
   /**
    * 获取 Konva.Stage 实例
    */
   getStage() {
-    return i(this, u).getStage();
+    return r(this, x).getStage();
   }
   /**
    * 获取 Stage 容器元素
    */
   getContainer() {
-    return i(this, u).getStage().container();
+    return r(this, x).getStage().container();
   }
   /**
    * 获取主图层
    */
   getMainLayer() {
-    return i(this, A);
+    return r(this, A);
   }
   /**
    * 获取当前工具类型
@@ -1018,108 +1018,80 @@ class oe extends Kt {
         toolType: t
       },
       !1
-    ), this.emit("toolType:change", t), t === "hand" ? (i(this, u).setDraggable(!0), i(this, u).setCursor("grab")) : (i(this, u).setDraggable(!1), i(this, u).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) {
-    i(this, u).setDraggable(t);
+    r(this, x).setDraggable(t);
   }
   /**
    * 设置光标
    * @internal 仅供内部使用
    */
   setCursor(t) {
-    i(this, u).setCursor(t);
+    r(this, x).setCursor(t);
   }
   /**
    * 重置光标
    * @internal 仅供内部使用
    */
   resetCursor() {
-    i(this, u).resetCursor();
+    r(this, x).resetCursor();
   }
   /**
    * 获取当前 Stage 缩放比例
    */
   getStageScale() {
-    return i(this, u).getStage().scaleX();
+    return r(this, x).getStage().scaleX();
   }
   /**
    * 更新视口位置
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
-  updateViewport(t, e = !1) {
-    i(this, u).setViewport(t);
-    const r = {
+  updateViewport(t, s = !1) {
+    r(this, x).setViewport(t);
+    const n = {
       ...this.getState().viewport,
       ...t
     };
     this._updateState(
       {
-        viewport: r
+        viewport: n
       },
-      e
-    ), this.emit("viewport:change", r), i(this, M).emitPositionChange();
+      s
+    ), this.emit("viewport:change", n), r(this, V).emitPositionChange();
   }
   createNodes(t) {
-    t.map((n) => Mt(this, n.type, n)).filter((n) => n !== null).forEach((n) => {
-      i(this, A).add(n.getElement());
+    t.map((i) => Rt(this, i.type, i)).filter((i) => i !== null).forEach((i) => {
+      r(this, A).add(i.getElement());
     });
-    const r = [...this.getState().nodes || [], ...t];
+    const n = [...this.getState().nodes || [], ...t];
     this._updateState(
       {
-        nodes: r
+        nodes: n
       },
       !0
     );
   }
-  /**
-   * 创建图片节点（内部使用）
-   */
-  _createImageNode(t, e) {
-    const r = e ?? { x: 100, y: 100 }, n = {
-      id: $(),
-      type: "image",
-      props: {
-        x: r.x,
-        y: r.y,
-        width: void 0,
-        // 将在图片加载后设置
-        height: void 0,
-        rotation: 0,
-        visible: !0
-      },
-      style: {
-        color: "#000000",
-        line: "solid",
-        size: "medium",
-        opacity: 1
-      },
-      meta: {
-        imageUrl: t
-      }
-    };
-    this.createNodes([n]);
-  }
   /**
    * 创建图片标注节点（内部使用）
    */
-  createImageMarkerNode(t, e, r, n) {
+  createImageMarkerNode(t, s, n, i) {
     const a = this.getState().nodes || [];
     let h = 0;
-    a.forEach((Z) => {
-      Z.type === "image-marker" && Z.meta.parent === t && typeof Z.meta.markerNumber == "number" && (h = Math.max(h, Z.meta.markerNumber));
+    a.forEach((E) => {
+      E.type === "image-marker" && E.meta.parent === t && typeof E.meta.markerNumber == "number" && (h = Math.max(h, E.meta.markerNumber));
     });
-    const c = (e.x - n.x) / n.width * 100, m = (e.y - n.y) / n.height * 100, g = (r.x - n.x) / n.width * 100, I = (r.y - n.y) / n.height * 100, p = Math.min(e.x, r.x), k = Math.min(e.y, r.y), C = Math.abs(r.x - e.x), T = Math.abs(r.y - e.y), X = {
-      id: $(),
+    const c = (s.x - i.x) / i.width * 100, g = (s.y - i.y) / i.height * 100, m = (n.x - i.x) / i.width * 100, v = (n.y - i.y) / i.height * 100, p = Math.min(s.x, n.x), _ = Math.min(s.y, n.y), b = Math.abs(n.x - s.x), C = Math.abs(n.y - s.y), P = {
+      id: J(),
       type: "image-marker",
       props: {
         x: p,
-        y: k,
-        width: C,
-        height: T,
+        y: _,
+        width: b,
+        height: C,
         rotation: 0,
         visible: !0
       },
@@ -1135,123 +1107,123 @@ class oe extends Kt {
         relativePosition: {
           start: {
             percentX: Math.max(0, Math.min(100, c)),
-            percentY: Math.max(0, Math.min(100, m))
+            percentY: Math.max(0, Math.min(100, g))
           },
           end: {
-            percentX: Math.max(0, Math.min(100, g)),
-            percentY: Math.max(0, Math.min(100, I))
+            percentX: Math.max(0, Math.min(100, m)),
+            percentY: Math.max(0, Math.min(100, v))
           }
         }
       }
     };
-    this.createNodes([X]);
+    this.createNodes([P]);
   }
   /**
    * 在指定位置查找图片节点
    * @internal 仅供内部使用
    */
   findImageAtPosition(t) {
-    const e = i(this, u).getStage(), r = e.find(
+    const s = r(this, x).getStage(), n = s.find(
       (a) => a.getClassName() === "Image"
-    ), n = r.map(
+    ), i = n.map(
       (a) => a.listening()
     );
-    r.forEach((a) => a.listening(!0));
+    n.forEach((a) => a.listening(!0));
     try {
-      const h = e.getAllIntersections(t).filter(
+      const h = s.getAllIntersections(t).filter(
         (c) => c.getClassName() === "Image"
       );
       return h.length === 0 ? null : h[h.length - 1];
     } finally {
-      r.forEach((a, h) => {
-        a.listening(n[h]);
+      n.forEach((a, h) => {
+        a.listening(i[h]);
       });
     }
   }
   /**
    * @internal 仅供内部使用
    */
-  createDraftNode(t, e, r) {
-    i(this, v) && i(this, v).destroy();
-    const n = ie(t, e, void 0, r);
-    N(this, v, Mt(this, t, n)), console.log(i(this, v)), i(this, v) && i(this, A).add(i(this, v).getElement());
+  createDraftNode(t, s, n) {
+    r(this, S) && r(this, S).destroy();
+    const i = ue(t, s, void 0, n);
+    N(this, S, Rt(this, t, i)), console.log(r(this, S)), r(this, S) && r(this, A).add(r(this, S).getElement());
   }
   /**
    * @internal 仅供内部使用
    */
-  updateDraftNode(t, e) {
-    if (!i(this, v)) return;
-    const r = i(this, v).getNode(), n = re(r, t, e);
-    i(this, v).updateNode(n);
+  updateDraftNode(t, s) {
+    if (!r(this, S)) return;
+    const n = r(this, S).getNode(), i = fe(n, t, s);
+    r(this, S).updateNode(i);
   }
   /**
    * @internal 仅供内部使用
    */
   finalizeDraftNode() {
-    if (!i(this, v)) return;
-    const t = $(), e = i(this, v).getNode();
-    if (e.type === "image-marker" && e.meta.parent) {
-      const n = e.meta.bounds, a = e.meta.startPosition, h = {
-        x: e.props.x + (e.props.width || 0),
-        y: e.props.y + (e.props.height || 0)
+    if (!r(this, S)) return;
+    const t = J(), s = r(this, S).getNode();
+    if (s.type === "image-marker" && s.meta.parent) {
+      const i = 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 m = 0;
-      c.forEach((T) => {
-        T.type === "image-marker" && T.meta.parent === e.meta.parent && typeof T.meta.markerNumber == "number" && (m = Math.max(m, T.meta.markerNumber));
+      let g = 0;
+      c.forEach((C) => {
+        C.type === "image-marker" && C.meta.parent === s.meta.parent && typeof C.meta.markerNumber == "number" && (g = Math.max(g, C.meta.markerNumber));
       });
-      const g = (a.x - n.x) / n.width * 100, I = (a.y - n.y) / n.height * 100, p = (h.x - n.x) / n.width * 100, k = (h.y - n.y) / n.height * 100, C = {
-        ...e,
+      const m = (a.x - i.x) / i.width * 100, v = (a.y - i.y) / i.height * 100, p = (h.x - i.x) / i.width * 100, _ = (h.y - i.y) / i.height * 100, b = {
+        ...s,
         props: {
-          ...e.props
+          ...s.props
         },
         style: {
-          ...e.style
+          ...s.style
         },
         meta: {
-          parent: e.meta.parent,
-          markerNumber: m + 1,
+          parent: s.meta.parent,
+          markerNumber: g + 1,
           relativePosition: {
             start: {
-              percentX: Math.max(0, Math.min(100, g)),
-              percentY: Math.max(0, Math.min(100, I))
+              percentX: Math.max(0, Math.min(100, m)),
+              percentY: Math.max(0, Math.min(100, v))
             },
             end: {
               percentX: Math.max(0, Math.min(100, p)),
-              percentY: Math.max(0, Math.min(100, k))
+              percentY: Math.max(0, Math.min(100, _))
             }
           }
         },
         id: t,
         type: "image-marker"
       };
-      this.createNodes([C]), i(this, v).destroy(), N(this, v, null), this.setToolType("select");
+      this.createNodes([b]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
       return;
     }
-    const r = {
-      ...e,
+    const n = {
+      ...s,
       props: {
-        ...e.props
+        ...s.props
       },
       style: {
-        ...e.style
+        ...s.style
       },
       meta: {
-        ...e.meta
+        ...s.meta
       },
       id: t
     };
-    this.createNodes([r]), i(this, v).destroy(), N(this, v, null), this.setToolType("select");
+    this.createNodes([n]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
   }
   /**
    * 选择节点
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
-  selectNode(t, e = !1) {
-    const r = this.getState().selectedNodeIds ?? [];
-    if (r.length === 0 && !t)
+  selectNode(t, s = !1) {
+    const n = this.getState().selectedNodeIds ?? [];
+    if (n.length === 0 && !t)
       return;
     if (!t) {
-      i(this, M).clearNodes(), this._updateState(
+      r(this, V).clearNodes(), this._updateState(
         {
           selectedNodeIds: []
         },
@@ -1259,139 +1231,60 @@ class oe extends Kt {
       );
       return;
     }
-    let n = [];
-    e ? n = r.length ? [...r, t] : [t] : n = [t];
-    const a = this.getStage().find(`.${wt}`).filter((h) => {
+    let i = [];
+    s ? i = n.length ? [...n, t] : [t] : i = [t];
+    const a = this.getStage().find(`.${$}`).filter((h) => {
       const c = h.id();
-      return n.includes(c);
+      return i.includes(c);
     });
-    i(this, M).setNodes(a), this._updateState(
+    r(this, V).setNodes(a), this._updateState(
       {
-        selectedNodeIds: n
+        selectedNodeIds: i
       },
       !1
     );
   }
+  /**
+   * 销毁 canvas
+   */
+  dispose() {
+    this.getCanvasTransformer().destroy(), this.getCanvasStage().destroy(), this._dispose();
+  }
   /**
    * 从元素同步节点数据（供节点类内部使用）
    */
-  _syncNodeFromElement(t, e) {
-    const r = this.getState().nodes || [], n = r.findIndex((c) => c.id === t);
-    if (n === -1) return;
+  _syncNodeFromElement(t, s) {
+    const n = this.getState().nodes || [], i = n.findIndex((c) => c.id === t);
+    if (i === -1) return;
     const a = {
-      ...r[n],
-      ...e,
+      ...n[i],
+      ...s,
       props: {
-        ...r[n].props,
-        ...e.props
+        ...n[i].props,
+        ...s.props
       },
       style: {
-        ...r[n].style,
-        ...e.style
+        ...n[i].style,
+        ...s.style
       },
       meta: {
-        ...r[n].meta,
-        ...e.meta
+        ...n[i].meta,
+        ...s.meta
       }
-    }, h = [...r];
-    h[n] = a, this._updateState(
+    }, h = [...n];
+    h[i] = a, this._updateState(
       {
         nodes: h
       },
       !0
     );
   }
-  /**
-   * 删除节点（内部使用）
-   */
-  _deleteNodes(t) {
-    if (t.length === 0) return;
-    const e = this.getState().nodes || [], r = new Set(t);
-    t.forEach((a) => {
-      e.find((c) => c.id === a)?.type === "image" && e.forEach((c) => {
-        c.type === "image-marker" && c.meta.parent === a && r.add(c.id);
-      });
-    }), r.forEach((a) => {
-      const h = this.getStage().findOne(`#${a}`);
-      h && h.destroy();
-    });
-    const n = e.filter((a) => !r.has(a.id));
-    i(this, M).clearNodes(), this._updateState(
-      {
-        nodes: n,
-        selectedNodeIds: []
-      },
-      !0
-    );
-  }
-  /**
-   * 删除当前选中的节点（内部使用）
-   */
-  _deleteSelectedNodes() {
-    const t = this.getState().selectedNodeIds || [];
-    t.length !== 0 && this._deleteNodes(t);
-  }
-  /**
-   * 获取 Transformer 的位置信息（内部使用）
-   */
-  getTransformerPosition() {
-    return i(this, M).getPosition();
-  }
-  /**
-   * 导出全部图形为图片（内部使用）
-   * @param options - 导出配置
-   * @returns DataURL 格式的图片数据
-   */
-  _exportAsImage(t) {
-    const e = i(this, u).getStage(), r = i(this, M).getTransformer(), n = r.visible();
-    r.visible(!1);
-    try {
-      return e.toDataURL({
-        pixelRatio: t?.pixelRatio ?? 2,
-        mimeType: t?.mimeType ?? "image/png",
-        quality: t?.quality ?? 1
-      });
-    } finally {
-      r.visible(n);
-    }
-  }
-  /**
-   * 导出当前选区为图片（内部使用）
-   * @param options - 导出配置
-   * @returns DataURL 格式的图片数据，如果没有选区则返回 null
-   */
-  _exportSelectionAsImage(t) {
-    const e = i(this, M).getPosition();
-    if (!e)
-      return console.warn("No selection to export"), null;
-    const r = i(this, u).getStage(), n = t?.padding ?? 10, a = i(this, M).getTransformer(), h = a.visible();
-    a.visible(!1);
-    try {
-      return r.toDataURL({
-        x: e.x - n,
-        y: e.y - n,
-        width: e.width + n * 2,
-        height: e.height + n * 2,
-        pixelRatio: t?.pixelRatio ?? 2,
-        mimeType: t?.mimeType ?? "image/png",
-        quality: t?.quality ?? 1
-      });
-    } finally {
-      a.visible(h);
-    }
-  }
-  /**
-   * 销毁 core（内部使用）
-   */
-  _dispose() {
-    i(this, M).destroy(), i(this, u).destroy(), super._dispose();
-  }
   /**
    * 实现父类的状态同步方法
    * 当 undo/redo 时被调用
    */
   _syncState(t) {
-    i(this, u).setViewport({
+    r(this, x).setViewport({
       x: t.viewport.x,
       y: t.viewport.y,
       scale: t.viewport.scale,
@@ -1400,8 +1293,8 @@ class oe extends Kt {
     });
   }
 }
-u = new WeakMap(), A = new WeakMap(), M = new WeakMap(), v = new WeakMap();
-class ae extends oe {
+x = new WeakMap(), A = new WeakMap(), V = new WeakMap(), S = new WeakMap();
+class we extends xe {
   /**
    * 获取所有可用的工具类型
    */
@@ -1411,64 +1304,181 @@ class ae extends oe {
   /**
    * 设置当前工具类型
    */
-  setToolType(s) {
-    super.setToolType(s);
+  setToolType(e) {
+    super.setToolType(e);
   }
   /**
    * 更新视口位置
    */
-  updateViewport(s, t = !1) {
-    super.updateViewport(s, t);
+  updateViewport(e, t = !1) {
+    super.updateViewport(e, t);
   }
   /**
    * 创建图片节点
    */
-  createImageNode(s, t) {
-    this._createImageNode(s, t);
+  createImageNode(e, t) {
+    const s = t ?? { x: 100, y: 100 }, n = {
+      id: J(),
+      type: "image",
+      props: {
+        x: s.x,
+        y: s.y,
+        width: void 0,
+        height: void 0,
+        rotation: 0,
+        visible: !0
+      },
+      style: {
+        color: "#000000",
+        line: "solid",
+        size: "medium",
+        opacity: 1
+      },
+      meta: {
+        imageUrl: e
+      }
+    };
+    this.createNodes([n]);
+  }
+  /**
+   * 在当前所有节点的左下角插入图片，并将其居中显示
+   * @param imageUrl - 图片 URL
+   */
+  insertImageAtBottomLeft(e) {
+    const t = this.getState().nodes || [];
+    let s = { x: 100, y: 100 };
+    if (t.length > 0) {
+      const n = this.getMainLayer();
+      let i = 1 / 0, a = -1 / 0;
+      n.children.forEach((h) => {
+        if (h.visible() && h.getClassName() !== "Transformer" && h.hasName($)) {
+          const c = h.getAttrs(), g = c.x || 0, m = c.y || 0, v = c.height || 0;
+          i = Math.min(i, g), a = Math.max(a, m + v);
+        }
+      }), i !== 1 / 0 && a !== -1 / 0 && (s = { x: i, y: a + 20 });
+    }
+    this.createImageNode(e, s), requestAnimationFrame(() => {
+      this.scrollToContent({ scale: !0 });
+    });
   }
   /**
    * 导出全部图形为图片
    * @param options - 导出配置
    * @returns DataURL 格式的图片数据
    */
-  exportAsImage(s) {
-    return this._exportAsImage(s);
+  exportAsImage(e) {
+    const t = this.getStage(), s = this.getCanvasTransformer().getTransformer(), n = s.visible();
+    s.visible(!1);
+    try {
+      return t.toDataURL({
+        pixelRatio: e?.pixelRatio ?? 2,
+        mimeType: e?.mimeType ?? "image/png",
+        quality: e?.quality ?? 1
+      });
+    } finally {
+      s.visible(n);
+    }
   }
   /**
    * 导出当前选区为图片
    * @param options - 导出配置
    * @returns DataURL 格式的图片数据，如果没有选区则返回 null
    */
-  exportSelectionAsImage(s) {
-    return this._exportSelectionAsImage(s);
+  exportSelectionAsImage(e) {
+    const t = this.getCanvasTransformer().getPosition();
+    if (!t)
+      return console.warn("No selection to export"), null;
+    const s = this.getStage(), n = e?.padding ?? 10, i = this.getCanvasTransformer().getTransformer(), a = i.visible();
+    i.visible(!1);
+    try {
+      return s.toDataURL({
+        x: t.x - n,
+        y: t.y - n,
+        width: t.width + n * 2,
+        height: t.height + n * 2,
+        pixelRatio: e?.pixelRatio ?? 2,
+        mimeType: e?.mimeType ?? "image/png",
+        quality: e?.quality ?? 1
+      });
+    } finally {
+      i.visible(a);
+    }
   }
   /**
    * 删除当前选中的节点
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
    */
   deleteSelectedNodes() {
-    this._deleteSelectedNodes();
+    const e = this.getState().selectedNodeIds || [];
+    e.length !== 0 && this.deleteNodes(e);
   }
   /**
    * 删除指定的节点
    * 如果删除的是 image 节点，会同步删除所有关联的 image-marker
    * @param nodeIds - 要删除的节点 ID 数组
    */
-  deleteNodes(s) {
-    this._deleteNodes(s);
+  deleteNodes(e) {
+    if (e.length === 0) return;
+    const t = this.getState().nodes || [], s = new Set(e);
+    e.forEach((i) => {
+      t.find((h) => h.id === i)?.type === "image" && t.forEach((h) => {
+        h.type === "image-marker" && h.meta.parent === i && s.add(h.id);
+      });
+    }), s.forEach((i) => {
+      const a = this.getStage().findOne(`#${i}`);
+      a && a.destroy();
+    });
+    const n = t.filter((i) => !s.has(i.id));
+    this.getCanvasTransformer().clearNodes(), this._updateState(
+      {
+        nodes: n,
+        selectedNodeIds: []
+      },
+      !0
+    );
   }
   /**
-   * 销毁 canvas
-   */
-  dispose() {
-    super._dispose();
+   * 滚动到内容区域
+   * - 如果有选中的节点，将选中节点居中显示
+   * - 如果没有选中节点，将所有内容居中显示
+   * @param options - 配置选项
+   * @param options.padding - 内容周围的留白，默认 50px
+   * @param options.scale - 是否自动调整缩放以适应内容，默认 false
+   */
+  scrollToContent(e) {
+    if ((this.getState().nodes || []).length === 0) return;
+    const s = e?.padding ?? 50, n = e?.scale === !0;
+    let i = 1 / 0, a = 1 / 0, h = -1 / 0, c = -1 / 0;
+    const g = this.getMainLayer(), m = this.getState().selectedNodeIds || [], v = m.length > 0;
+    if (g.children.forEach((R) => {
+      if (R.visible() && R.getClassName() !== "Transformer" && R.hasName($)) {
+        if (v) {
+          const U = R.id();
+          if (!m.includes(U)) return;
+        }
+        const Y = R.getAttrs(), yt = Y.x || 0, L = Y.y || 0, Vt = Y.width || 0, Ut = Y.height || 0;
+        if (Y.rotation || 0) {
+          const U = R.getClientRect({ skipTransform: !1 }), xt = this.getStage(), B = xt.scaleX(), Et = xt.x(), Ct = xt.y(), Ht = (U.x - Et) / B, Lt = (U.y - Ct) / B, Ot = (U.x + U.width - Et) / B, Ft = (U.y + U.height - Ct) / B;
+          i = Math.min(i, Ht), a = Math.min(a, Lt), h = Math.max(h, Ot), c = Math.max(c, Ft);
+        } else
+          i = Math.min(i, yt), a = Math.min(a, L), h = Math.max(h, yt + Vt), c = Math.max(c, L + Ut);
+      }
+    }), i === 1 / 0 || a === 1 / 0) return;
+    const p = h - i, _ = c - a, b = i + p / 2, C = a + _ / 2, P = this.getState().viewport;
+    let E = P.scale;
+    if (n) {
+      const R = (P.width - s * 2) / p, Y = (P.height - s * 2) / _;
+      E = Math.min(R, Y, 1);
+    }
+    const ut = P.width / 2 - b * E, ft = P.height / 2 - C * E;
+    this.updateViewport({ x: ut, y: ft, scale: E }, !0);
   }
 }
-function he(o, s, t, e = !1) {
-  const [r, n] = s, [a, h] = t, c = a + (o - r) / (n - r) * (h - a);
-  return e ? a < h ? Math.max(Math.min(c, h), a) : Math.max(Math.min(c, a), h) : c;
+function ve(o, e, t, s = !1) {
+  const [n, i] = e, [a, h] = t, c = a + (o - n) / (i - n) * (h - a);
+  return s ? a < h ? Math.max(Math.min(c, h), a) : Math.max(Math.min(c, a), h) : c;
 }
-const It = [
+const Yt = [
   {
     min: -1,
     mid: 0.15,
@@ -1490,15 +1500,15 @@ const It = [
     step: 1
   }
 ];
-function ce({
+function Ne({
   viewportX: o,
-  viewportY: s,
+  viewportY: e,
   scale: t,
-  size: e = 20,
-  showGrid: r = !0
+  size: s = 20,
+  showGrid: n = !0
 }) {
-  const n = o / t, a = s / t, h = t;
-  return r ? /* @__PURE__ */ U(
+  const i = o / t, a = e / t, h = t;
+  return n ? /* @__PURE__ */ F(
     "svg",
     {
       className: "canvas-grid w-full h-full absolute top-0 left-0",
@@ -1506,12 +1516,12 @@ function ce({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ w("defs", { children: It.map(({ min: c, mid: m, step: g }, I) => {
-          const p = g * e * h, k = 0.5 + n * h, C = 0.5 + a * h, T = k > 0 ? k % p : p + k % p, X = C > 0 ? C % p : p + C % p, Z = h < m ? he(h, [c, m], [0, 1]) : 1;
+        /* @__PURE__ */ w("defs", { children: Yt.map(({ min: c, mid: g, step: m }, v) => {
+          const p = m * s * h, _ = 0.5 + i * h, b = 0.5 + a * h, C = _ > 0 ? _ % p : p + _ % p, P = b > 0 ? b % p : p + b % p, E = h < g ? ve(h, [c, g], [0, 1]) : 1;
           return /* @__PURE__ */ w(
             "pattern",
             {
-              id: `grid_${g}`,
+              id: `grid_${m}`,
               width: p,
               height: p,
               patternUnits: "userSpaceOnUse",
@@ -1519,25 +1529,25 @@ function ce({
                 "circle",
                 {
                   className: "tl-grid-dot",
-                  cx: T,
-                  cy: X,
+                  cx: C,
+                  cy: P,
                   r: 1,
-                  opacity: Z
+                  opacity: E
                 }
               )
             },
-            I
+            v
           );
         }) }),
-        It.map(({ step: c }, m) => /* @__PURE__ */ w("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, m))
+        Yt.map(({ step: c }, g) => /* @__PURE__ */ w("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, g))
       ]
     }
   ) : null;
 }
-function de(...o) {
-  return Ht(Ut(o));
+function Se(...o) {
+  return Qt(Jt(o));
 }
-const le = Vt(
+const Me = Bt(
   "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: {
@@ -1564,56 +1574,56 @@ const le = Vt(
     }
   }
 );
-function H({
+function W({
   className: o,
-  variant: s = "default",
+  variant: e = "default",
   size: t = "default",
-  asChild: e = !1,
-  ...r
+  asChild: s = !1,
+  ...n
 }) {
   return /* @__PURE__ */ w(
-    e ? Xt : "button",
+    s ? jt : "button",
     {
       "data-slot": "button",
-      "data-variant": s,
+      "data-variant": e,
       "data-size": t,
-      className: de(le({ variant: s, size: t, className: o })),
-      ...r
+      className: Se(Me({ variant: e, size: t, className: o })),
+      ...n
     }
   );
 }
-function me({ api: o }) {
-  const [s, t] = O(o.getState().viewport);
-  xt(() => {
+function _e({ api: o }) {
+  const [e, t] = G(o.getState().viewport);
+  It(() => {
     o.on("viewport:change", (c) => {
       t(c);
     });
   }, [t, o]);
-  const e = (c) => {
-    const m = s.width / 2, g = s.height / 2, I = (m - s.x) / s.scale, p = (g - s.y) / s.scale, k = m - I * c, C = g - p * c;
-    o.updateViewport({ x: k, y: C, scale: c });
-  }, r = () => {
-    const c = Math.min(s.scale * 1.2, 5);
-    e(c);
+  const s = (c) => {
+    const g = e.width / 2, m = e.height / 2, v = (g - e.x) / e.scale, p = (m - e.y) / e.scale, _ = g - v * c, b = m - p * c;
+    o.updateViewport({ x: _, y: b, scale: c });
   }, n = () => {
-    const c = Math.max(s.scale / 1.2, 0.1);
-    e(c);
+    const c = Math.min(e.scale * 1.2, 5);
+    s(c);
+  }, i = () => {
+    const c = Math.max(e.scale / 1.2, 0.1);
+    s(c);
   }, a = () => {
-    e(1);
-  }, h = Math.round(s.scale * 100);
-  return /* @__PURE__ */ U("div", { className: "zoom-panel flex items-center gap-2", children: [
+    s(1);
+  }, h = Math.round(e.scale * 100);
+  return /* @__PURE__ */ F("div", { className: "zoom-panel flex items-center gap-2", children: [
     /* @__PURE__ */ w(
-      H,
+      W,
       {
         size: "sm",
         variant: "secondary",
-        onClick: n,
+        onClick: i,
         title: "缩小",
-        children: /* @__PURE__ */ w(Ot, {})
+        children: /* @__PURE__ */ w(te, {})
       }
     ),
-    /* @__PURE__ */ U(
-      H,
+    /* @__PURE__ */ F(
+      W,
       {
         size: "sm",
         variant: "secondary",
@@ -1627,80 +1637,80 @@ function me({ api: o }) {
       }
     ),
     /* @__PURE__ */ w(
-      H,
+      W,
       {
         size: "sm",
         variant: "secondary",
-        onClick: r,
+        onClick: n,
         title: "放大",
-        children: /* @__PURE__ */ w(Ft, {})
+        children: /* @__PURE__ */ w(ee, {})
       }
     )
   ] });
 }
-function ge({ api: o }) {
-  const [s, t] = O(o.canUndo()), [e, r] = O(o.canRedo());
-  return xt(() => {
-    const n = () => {
-      t(o.canUndo()), r(o.canRedo());
+function Ie({ api: o }) {
+  const [e, t] = G(o.canUndo()), [s, n] = G(o.canRedo());
+  return It(() => {
+    const i = () => {
+      t(o.canUndo()), n(o.canRedo());
     };
-    return o.on("state:change", n), () => {
-      o.off("state:change", n);
+    return o.on("state:change", i), () => {
+      o.off("state:change", i);
     };
-  }, [o]), /* @__PURE__ */ U("div", { className: "history-panel flex items-center gap-2", children: [
+  }, [o]), /* @__PURE__ */ F("div", { className: "history-panel flex items-center gap-2", children: [
     /* @__PURE__ */ w(
-      H,
+      W,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !s,
+        disabled: !e,
         onClick: () => o.undo(),
         title: "撤销",
-        children: /* @__PURE__ */ w(Lt, {})
+        children: /* @__PURE__ */ w(se, {})
       }
     ),
     /* @__PURE__ */ w(
-      H,
+      W,
       {
         size: "sm",
         variant: "secondary",
-        disabled: !e,
+        disabled: !s,
         onClick: () => o.redo(),
         title: "重做",
-        children: /* @__PURE__ */ w(Wt, {})
+        children: /* @__PURE__ */ w(ie, {})
       }
     )
   ] });
 }
-function be({ setApi: o }) {
-  const s = At(null), [t, e] = O(null), [r, n] = O({ x: 0, y: 0, scale: 1 });
-  return xt(() => {
-    if (!s.current) return;
-    const a = new ae(s.current);
-    return e(a), o?.(a), a.on("viewport:change", (h) => {
-      n(h);
+function Ae({ setApi: o }) {
+  const e = qt(null), [t, s] = G(null), [n, i] = G({ x: 0, y: 0, scale: 1 });
+  return It(() => {
+    if (!e.current) return;
+    const a = new we(e.current);
+    return s(a), o?.(a), a.on("viewport:change", (h) => {
+      i(h);
     }), a.on("transformer:positionChange", (h) => {
       console.log("Transformer position changed:", h);
     }), () => {
       a.dispose();
     };
-  }, [o]), /* @__PURE__ */ U("div", { className: "pure-canvas relative size-full", children: [
+  }, [o]), /* @__PURE__ */ F("div", { className: "pure-canvas relative size-full", children: [
     /* @__PURE__ */ w(
-      ce,
+      Ne,
       {
-        viewportX: r.x,
-        viewportY: r.y,
-        scale: r.scale
+        viewportX: n.x,
+        viewportY: n.y,
+        scale: n.scale
       }
     ),
-    /* @__PURE__ */ w("div", { ref: s, className: "size-full" }),
-    t && /* @__PURE__ */ U(zt, { children: [
-      /* @__PURE__ */ w("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ w(ge, { api: t }) }),
-      /* @__PURE__ */ w("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ w(me, { api: t }) })
+    /* @__PURE__ */ w("div", { ref: e, className: "size-full" }),
+    t && /* @__PURE__ */ F($t, { children: [
+      /* @__PURE__ */ w("div", { className: "history-panel-wrapper absolute bottom-4 left-4 z-10", children: /* @__PURE__ */ w(Ie, { api: t }) }),
+      /* @__PURE__ */ w("div", { className: "zoom-panel-wrapper absolute bottom-4 right-4 z-10", children: /* @__PURE__ */ w(_e, { api: t }) })
     ] })
   ] });
 }
 export {
-  ae as CanvasApi,
-  be as PureCanvas
+  we as CanvasApi,
+  Ae as PureCanvas
 };