@8btc/whiteboard 0.0.2 → 0.0.3

package/dist/index.js

@@ -1,116 +1,116 @@
-var Wt = Object.defineProperty;
-var Tt = (o) => {
+var qt = Object.defineProperty;
+var Rt = (o) => {
   throw TypeError(o);
 };
-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 {
+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";
+import Y from "konva";
+import Jt from "mitt";
+import { v4 as K } 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;
+class ae {
   constructor(e, t) {
-    d(this, ot);
-    d(this, f);
-    d(this, l);
-    d(this, X, { x: 0, y: 0, scale: 1 });
+    l(this, ht);
+    l(this, y);
+    l(this, m);
+    l(this, R, { x: 0, y: 0, scale: 1 });
     /**
      * 处理滚轮缩放和平移
      */
-    d(this, Q, (e) => {
+    l(this, et, (e) => {
       e.evt.preventDefault();
-      const s = r(this, l).getPointerPosition();
+      const s = r(this, m).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
+          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 g = n;
+          let d = i;
           for (let p = 0; p < c; p++)
-            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
+            d = h > 0 ? d * a : d / a;
+          const g = Math.max(0.1, Math.min(5, d)), x = {
+            x: s.x - n.x * g,
+            y: s.y - n.y * g
           };
-          r(this, f).updateViewport({ x: v.x, y: v.y, scale: m });
+          r(this, y).updateViewport({ x: x.x, y: x.y, scale: g });
         } else {
-          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
+          const i = e.evt.shiftKey ? e.evt.deltaY : e.evt.deltaX, n = e.evt.shiftKey ? 0 : e.evt.deltaY;
+          r(this, y).updateViewport({
+            x: r(this, R).x - i,
+            y: r(this, R).y - n
           });
         }
     });
-    d(this, tt, (e) => {
-      const t = r(this, f).getState().toolType;
+    l(this, st, (e) => {
+      const t = r(this, y).getState().toolType;
       if (e.evt.button !== 0 || t === "hand")
         return;
-      const s = e.target === r(this, l), n = r(this, l).getRelativePointerPosition();
+      const s = e.target === r(this, m), i = r(this, m).getRelativePointerPosition();
       if (t === "select" && !s) {
-        const i = e.target.id();
-        i && r(this, f).selectNode(i, e.evt.shiftKey);
+        const n = e.target.id();
+        n && r(this, y).selectNode(n, e.evt.shiftKey);
         return;
       }
-      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 (t === "rectangle" && i && r(this, y).createDraftNode(t, i), t === "image-marker" && i) {
+        const n = r(this, y).findImageAtPosition(i);
+        if (console.log(n, "imageShape"), n) {
+          const a = n.width(), h = n.height();
           if (a && h) {
             const c = {
-              x: i.x(),
-              y: i.y(),
+              x: n.x(),
+              y: n.y(),
               width: a,
               height: h
             };
-            r(this, f).createDraftNode(t, n, {
-              parent: i.id(),
+            r(this, y).createDraftNode(t, i, {
+              parent: n.id(),
               bounds: c,
-              startPosition: n
+              startPosition: i
             });
           }
         }
       }
-      r(this, f).selectNode();
+      r(this, y).selectNode();
     });
-    d(this, et, () => {
-      const e = r(this, f).getState().toolType;
+    l(this, it, () => {
+      const e = r(this, y).getState().toolType;
       if (e === "hand")
         return;
-      const t = r(this, l).getRelativePointerPosition();
-      (e === "rectangle" || e === "image-marker") && t && r(this, f).updateDraftNode(t);
+      const t = r(this, m).getRelativePointerPosition();
+      (e === "rectangle" || e === "image-marker") && t && r(this, y).updateDraftNode(t);
     });
-    d(this, st, () => {
-      const e = r(this, f).getState().toolType;
-      e !== "hand" && (e === "rectangle" || e === "image-marker") && r(this, f).finalizeDraftNode();
+    l(this, nt, () => {
+      const e = r(this, y).getState().toolType;
+      e !== "hand" && (e === "rectangle" || e === "image-marker") && r(this, y).finalizeDraftNode();
     });
-    d(this, it, (e) => {
-      if (e.target !== r(this, l))
+    l(this, rt, (e) => {
+      if (e.target !== r(this, m))
         return;
-      const t = r(this, f).getState().toolType;
+      const t = r(this, y).getState().toolType;
       t === "hand" ? this.setCursor("grabbing") : t === "select" && this.setCursor("all-scroll");
     });
-    d(this, nt, (e) => {
-      e.target === r(this, l) && r(this, f).updateViewport({
-        x: r(this, l).x(),
-        y: r(this, l).y()
+    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, f).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()
       }), this.resetCursor());
     });
-    N(this, f, e), N(this, l, new D.Stage({
+    N(this, y, e), N(this, m, new Y.Stage({
       container: t.container,
       width: t.width,
       height: t.height,
@@ -120,46 +120,46 @@ class ne {
       scaleY: 1,
       draggable: t.draggable ?? !1,
       className: t.className
-    })), M(this, ot, Xt).call(this);
+    })), _(this, ht, Zt).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
    */
   getStage() {
-    return r(this, l);
+    return r(this, m);
   }
   /**
    * 获取当前视口状态
    */
   getViewport() {
-    return { ...r(this, X) };
+    return { ...r(this, R) };
   }
   /**
    * 设置视口（包括位置、缩放和尺寸）
    */
   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);
+    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);
   }
   /**
    * 设置是否可拖拽
    */
   setDraggable(e) {
-    r(this, l).draggable(e);
+    r(this, m).draggable(e);
   }
   /**
    * 设置光标样式
    */
   setCursor(e) {
-    const t = r(this, l).container();
+    const t = r(this, m).container();
     t.style.cursor = e;
   }
   /**
    * 重置光标样式
    */
   resetCursor() {
-    const e = r(this, l).container();
-    if (r(this, f).getState().toolType === "hand") {
+    const e = r(this, m).container();
+    if (r(this, y).getState().toolType === "hand") {
       e.style.cursor = "grab";
       return;
     }
@@ -169,85 +169,85 @@ class ne {
    * 销毁 Stage
    */
   destroy() {
-    r(this, l).destroy();
+    r(this, m).destroy();
   }
 }
-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(), /**
+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(), /**
  * 设置事件监听器
  */
-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));
+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));
 };
-var q, y, at, ht, ct, dt, lt, mt, gt, Dt;
-class re {
+var B, f, ct, dt, lt, mt, gt, pt, ut, At;
+class he {
   constructor(e, t) {
-    d(this, gt);
-    d(this, q);
-    d(this, y);
+    l(this, ut);
+    l(this, B);
+    l(this, f);
     /**
      * 处理 transformstart 事件
      */
-    d(this, at, () => {
+    l(this, ct, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 transform 事件
      */
-    d(this, ht, () => {
+    l(this, dt, () => {
       console.log("transforming..."), this.emitPositionChange();
     });
     /**
      * 处理 transformend 事件
      */
-    d(this, ct, () => {
+    l(this, lt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragstart 事件
      */
-    d(this, dt, () => {
+    l(this, mt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragmove 事件
      */
-    d(this, lt, () => {
+    l(this, gt, () => {
       this.emitPositionChange();
     });
     /**
      * 处理 dragend 事件
      */
-    d(this, mt, () => {
+    l(this, pt, () => {
       this.emitPositionChange();
     });
-    N(this, q, e), N(this, y, new D.Transformer({
+    N(this, B, e), N(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
-    })), M(this, gt, Dt).call(this);
+    })), _(this, ut, At).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return r(this, y);
+    return r(this, f);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    if (r(this, y).nodes().length === 0)
+    if (r(this, f).nodes().length === 0)
       return null;
-    const t = r(this, y).getClientRect();
+    const t = r(this, f).getClientRect();
     return {
       x: t.x,
       y: t.y,
       width: t.width,
       height: t.height,
-      rotation: r(this, y).rotation()
+      rotation: r(this, f).rotation()
     };
   }
   /**
@@ -258,47 +258,47 @@ class re {
       this.clearNodes();
       return;
     }
-    r(this, y).nodes(e), r(this, y).moveToTop(), this.emitPositionChange();
+    r(this, f).nodes(e), r(this, f).moveToTop(), this.emitPositionChange();
   }
   /**
    * 获取当前变换的节点
    */
   getNodes() {
-    return r(this, y).nodes();
+    return r(this, f).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    r(this, y).nodes([]), r(this, y).moveToBottom(), this.emitPositionChange();
+    r(this, f).nodes([]), r(this, f).moveToBottom(), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
    */
   emitPositionChange() {
     const e = this.getPosition();
-    r(this, q).emitEvent("transformer:positionChange", e);
+    r(this, B).emitEvent("transformer:positionChange", e);
   }
   /**
    * 销毁 Transformer
    */
   destroy() {
-    r(this, y).destroy();
+    r(this, f).destroy();
   }
 }
-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(), /**
+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(), /**
  * 设置事件监听器
  */
-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));
+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));
 };
-class oe {
+class ce {
   constructor(e) {
-    z(this, "_past", []);
-    z(this, "_present");
-    z(this, "_future", []);
-    z(this, "_emitter");
-    this._present = e, this._emitter = Kt();
+    D(this, "_past", []);
+    D(this, "_present");
+    D(this, "_future", []);
+    D(this, "_emitter");
+    this._present = e, this._emitter = Jt();
   }
   /**
    * 获取当前状态
@@ -391,33 +391,33 @@ class oe {
     this._emitter.all.clear();
   }
 }
-const $ = "shapeNameForSelect", u = {
+const j = "shapeNameForSelect", u = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
-}, O = {
+}, F = {
   MIN_SIZE: 10
-}, kt = {
+}, Yt = {
   MIN_SIZE: 10
 };
-function ae(o, e, t) {
+function de(o, e, t) {
   return 2 * (e + o - t * (4 - Math.PI));
 }
-function he(o, e, t) {
-  let s = 1, n = 0, i = 0;
+function le(o, e, t) {
+  let s = 1, i = 0, n = 0;
   switch (t) {
     case "dashed":
-      n = Math.min(e * 2, o / 4);
+      i = Math.min(e * 2, o / 4);
       break;
     case "dotted":
-      s = 8, n = e / s;
+      s = 8, i = e / s;
       break;
     default:
       return [];
   }
-  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];
+  let a = Math.floor(o / i / (2 * s));
+  return a = Math.max(a, 3), i = o / a / (2 * s), n = (o - a * i) / a, [i, n];
 }
-function ce(o) {
+function me(o) {
   switch (o) {
     case "small":
       return 2;
@@ -431,24 +431,24 @@ function ce(o) {
       return 3;
   }
 }
-function de(o) {
+function ge(o) {
   return Array.isArray(o) && o.length > 1 ? o[0] + o[1] : 0;
 }
-function Pt(o) {
+function Xt(o) {
   return {
-    width: Math.max(kt.MIN_SIZE, o.width() * o.scaleX()),
-    height: Math.max(kt.MIN_SIZE, o.height() * o.scaleY())
+    width: Math.max(Yt.MIN_SIZE, o.width() * o.scaleX()),
+    height: Math.max(Yt.MIN_SIZE, o.height() * o.scaleY())
   };
 }
 class bt {
   constructor(e, t) {
-    z(this, "core");
-    z(this, "node");
-    z(this, "element");
-    z(this, "toolTypeChangeHandler");
+    D(this, "core");
+    D(this, "node");
+    D(this, "element");
+    D(this, "toolTypeChangeHandler");
     this.core = e, this.node = t, this.element = this.createElement(), this.toolTypeChangeHandler = (s) => {
-      const n = s === "select";
-      this.element.listening(n);
+      const i = s === "select";
+      this.element.listening(i);
     }, this.toolTypeChangeHandler(this.core.getToolType()), this.core.on("toolType:change", this.toolTypeChangeHandler);
   }
   /**
@@ -470,13 +470,13 @@ class bt {
     this.core.off("toolType:change", this.toolTypeChangeHandler), this.element.destroy();
   }
 }
-function le(o, e) {
+function pe(o, e) {
   if (!e || e === 0)
     return null;
-  const t = new D.Animation((s) => {
+  const t = new Y.Animation((s) => {
     if (!s) return;
-    const n = -s.time / 10 % e;
-    o.dashOffset(n);
+    const i = -s.time / 10 % e;
+    o.dashOffset(i);
   }, o.getLayer());
   return {
     start: () => t.start(),
@@ -484,13 +484,13 @@ function le(o, e) {
     isRunning: () => t.isRunning()
   };
 }
-var I, Z, vt, Nt, Zt;
-class me extends bt {
+var b, X, vt, Nt, Vt;
+class ue 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());
+    l(this, X);
+    l(this, b, null);
+    s.style.animated && _(this, X, vt).call(this), _(this, X, Vt).call(this, this.getElement());
   }
   createElement() {
     const t = Math.max(
@@ -499,22 +499,22 @@ class me extends bt {
     ), s = Math.max(
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
-    ), n = {
+    ), i = {
       id: this.node.id,
       ...this.node.props,
       ...this.node.style,
       width: t,
       height: s,
       cornerRadius: u.CORNER_RADIUS,
-      name: $,
+      name: j,
       draggable: !0,
       stroke: "black",
       strokeWidth: 2
-    }, i = new D.Rect(n);
-    return i.setAttrs({
+    }, n = new Y.Rect(i);
+    return n.setAttrs({
       width: t,
       height: s
-    }), i;
+    }), n;
   }
   /**
    * 获取 Konva.Rect 实例
@@ -540,86 +540,86 @@ class me extends bt {
     };
     const s = this.getElement();
     s.x(this.node.props.x), s.y(this.node.props.y);
-    const n = Math.max(
+    const i = Math.max(
       this.node.props.width ?? u.MIN_SIZE,
       u.MIN_SIZE
-    ), i = Math.max(
+    ), n = Math.max(
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
     );
-    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);
+    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);
   }
   /**
    * 销毁
    */
   destroy() {
-    M(this, Z, Nt).call(this), super.destroy();
+    _(this, X, Nt).call(this), super.destroy();
   }
 }
-I = new WeakMap(), Z = new WeakSet(), /**
+b = new WeakMap(), X = new WeakSet(), /**
  * 初始化动画
  */
 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();
+  const i = ge(s);
+  N(this, b, pe(t, i)), r(this, b) && r(this, b).start();
 }, /**
  * 销毁动画
  */
 Nt = function() {
-  r(this, I) && (r(this, I).stop(), N(this, I, null));
+  r(this, b) && (r(this, b).stop(), N(this, b, null));
 }, /**
  * 设置事件处理器
  */
-Zt = function(t = void 0) {
+Vt = 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(
+    this.node.style.animated && r(this, b) && r(this, b).stop();
+  }), s.on("transform", (i) => {
+    const n = i.target, { width: a, height: h } = Xt(n), c = de(a, h, u.CORNER_RADIUS), d = le(
       c,
-      ce(this.node.style.size),
+      me(this.node.style.size),
       this.node.style.line
     );
-    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 = {
+    n.scale({ x: 1, y: 1 }), n.width(a), n.height(h), n.dash(d.map((g) => g * this.core.getStageScale()));
+  }), s.on("transformend", (i) => {
+    const n = i.target, { width: a, height: h } = Xt(n), c = {
       ...this.node.props,
-      x: i.x(),
-      y: i.y(),
+      x: n.x(),
+      y: n.y(),
       width: a,
       height: h,
-      rotation: i.rotation()
+      rotation: n.rotation()
     };
     this.node.props = c, this.core._syncNodeFromElement(this.node.id, {
       props: c
-    }), this.node.style.animated && r(this, I)?.isRunning() === !1 && r(this, I).start();
-  }), s.on("dragend", (n) => {
-    const i = n.target, a = {
+    }), this.node.style.animated && r(this, b)?.isRunning() === !1 && r(this, b).start();
+  }), s.on("dragend", (i) => {
+    const n = i.target, a = {
       ...this.node.props,
-      x: i.x(),
-      y: i.y()
+      x: n.x(),
+      y: n.y()
     };
     this.node.props = a, this.core._syncNodeFromElement(this.node.id, {
       props: a
     });
   });
 };
-var k, St, zt, Mt, _t;
-class ge extends bt {
+var k, St, Ut, Mt, _t;
+class ye 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());
+    l(this, k);
+    _(this, k, St).call(this), _(this, k, Ut).call(this, this.getElement());
   }
   createElement() {
     const t = document.createElement("canvas");
-    return t.width = 1, t.height = 1, new D.Image({
+    return t.width = 1, t.height = 1, new Y.Image({
       id: this.node.id,
       x: this.node.props.x,
       y: this.node.props.y,
-      name: $,
+      name: j,
       draggable: !0,
       image: t
     });
@@ -652,10 +652,10 @@ class ge extends bt {
     };
     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);
+      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 && M(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 && _(this, k, St).call(this);
   }
   /**
    * 销毁
@@ -676,41 +676,41 @@ St = function() {
   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));
+    const i = this.node.props.width ?? s.width, n = this.node.props.height ?? s.height;
+    this.getElement().width(Math.max(i, F.MIN_SIZE)), this.getElement().height(Math.max(n, F.MIN_SIZE));
   }, s.onerror = () => {
     console.error("Failed to load image:", t);
   };
 }, /**
  * 设置事件处理器
  */
-zt = function(t) {
+Ut = 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);
+    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);
   }), t.on("transformend", (s) => {
-    const n = s.target, i = {
+    const i = s.target, n = {
       ...this.node.props,
-      x: n.x(),
-      y: n.y(),
-      width: n.width(),
-      height: n.height(),
-      rotation: n.rotation()
+      x: i.x(),
+      y: i.y(),
+      width: i.width(),
+      height: i.height(),
+      rotation: i.rotation()
     };
-    this.node.props = i, this.core._syncNodeFromElement(this.node.id, {
-      props: i
-    }), M(this, k, _t).call(this);
+    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
+      props: n
+    }), _(this, k, _t).call(this);
   }), t.on("dragmove", () => {
-    M(this, k, Mt).call(this);
+    _(this, k, Mt).call(this);
   }), t.on("dragend", (s) => {
-    const n = s.target, i = {
+    const i = s.target, n = {
       ...this.node.props,
-      x: n.x(),
-      y: n.y()
+      x: i.x(),
+      y: i.y()
     };
-    this.node.props = i, this.core._syncNodeFromElement(this.node.id, {
-      props: i
-    }), M(this, k, _t).call(this);
+    this.node.props = n, this.core._syncNodeFromElement(this.node.id, {
+      props: n
+    }), _(this, k, _t).call(this);
   });
 }, /**
  * 同步 image-marker 节点的位置（实时更新 Konva 元素）
@@ -718,15 +718,15 @@ zt = function(t) {
 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 });
+  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 || [];
+  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) => {
+        C.getClassName() === "Rect" ? C.setAttrs({ width: V, height: G }) : C.getClassName() === "Group" && C.setAttrs({ x: V, y: G });
       });
     }
   });
@@ -737,29 +737,29 @@ _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(), {
+    (n) => n.hasName(this.node.id)
+  ).forEach((n) => {
+    this.core._syncNodeFromElement(n.id(), {
       props: {
-        x: i.x(),
-        y: i.y(),
-        width: i.width(),
-        height: i.height()
+        x: n.x(),
+        y: n.y(),
+        width: n.width(),
+        height: n.height()
       }
     });
   });
 };
-var H, T, K, j, pt, At;
-class pe extends bt {
+var H, T, J, Q, yt, Ht;
+class fe 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);
+    l(this, yt);
+    l(this, H);
+    l(this, T);
+    l(this, J);
+    l(this, Q);
+    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);
   }
   createElement() {
     const t = Math.max(
@@ -768,14 +768,14 @@ class pe extends bt {
     ), s = Math.max(
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
-    ), n = new D.Group({
+    ), i = new Y.Group({
       id: this.node.id,
       name: `static ${this.node.meta.parent}`,
       x: this.node.props.x,
       y: this.node.props.y,
       width: t,
       height: s
-    }), i = new D.Rect({
+    }), n = new Y.Rect({
       name: "rect",
       x: 0,
       y: 0,
@@ -786,16 +786,16 @@ class pe extends bt {
       dash: [5, 5],
       fill: "transparent",
       cornerRadius: u.CORNER_RADIUS
-    }), a = new D.Group({
+    }), a = new Y.Group({
       name: "marker-group",
       x: t,
       y: s
-    }), c = 16 / this.core.getStageScale(), g = new D.Circle({
+    }), c = 16 / this.core.getStageScale(), d = new Y.Circle({
       radius: c,
       fill: "red",
       stroke: "black",
       strokeWidth: 2
-    }), m = new D.Text({
+    }), g = new Y.Text({
       x: -c,
       y: -c,
       width: c * 2,
@@ -806,7 +806,7 @@ class pe extends bt {
       fontSize: 16,
       fill: "white"
     });
-    return a.add(g), a.add(m), n.add(i), n.add(a), n;
+    return a.add(d), a.add(g), i.add(n), i.add(a), i;
   }
   /**
    * 获取 Konva.Group 实例
@@ -836,14 +836,14 @@ class pe extends bt {
     };
     const s = this.getElement();
     s.x(this.node.props.x), s.y(this.node.props.y);
-    const n = Math.max(
+    const i = Math.max(
       this.node.props.width ?? u.MIN_SIZE,
       u.MIN_SIZE
-    ), i = Math.max(
+    ), n = Math.max(
       this.node.props.height ?? u.MIN_SIZE,
       u.MIN_SIZE
     );
-    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));
+    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));
   }
   /**
    * 销毁
@@ -855,14 +855,14 @@ class pe extends bt {
    * 更新焦点状态（hover 或 selected）
    */
   setFocusState(t) {
-    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);
+    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);
   }
 }
-H = new WeakMap(), T = new WeakMap(), K = new WeakMap(), j = new WeakMap(), pt = new WeakSet(), /**
+H = new WeakMap(), T = new WeakMap(), J = new WeakMap(), Q = new WeakMap(), yt = new WeakSet(), /**
  * 设置事件处理器
  */
-At = function() {
+Ht = function() {
   r(this, T).on("pointerover", () => {
     this.setFocusState(!0), this.core.setCursor("pointer");
   }), r(this, T).on("pointerout", () => {
@@ -872,22 +872,22 @@ At = function() {
     this.core.selectNode(this.node.id);
   });
 };
-function Rt(o, e, t) {
+function zt(o, e, t) {
   switch (e) {
     case "rectangle":
-      return new me(o, t);
+      return new ue(o, t);
     case "image":
-      return new ge(o, t);
+      return new ye(o, t);
     case "image-marker":
-      return new pe(o, t);
+      return new fe(o, t);
     default:
       return null;
   }
 }
-const ue = (o, e, t, s) => {
-  const n = {
+const xe = (o, e, t, s) => {
+  const i = {
     type: o,
-    id: J(),
+    id: K(),
     text: null,
     style: {
       opacity: 1,
@@ -905,21 +905,21 @@ const ue = (o, e, t, s) => {
     meta: s ?? {}
   };
   return o === "image-marker" ? {
-    ...n,
+    ...i,
     style: {
-      ...n.style,
+      ...i.style,
       color: "#ff0000",
       line: "dashed"
     }
-  } : n;
+  } : i;
 };
-function fe(o, e, t) {
+function we(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 [n, i] = ye(
+  const [i, n] = ve(
     { x: o.props.x, y: o.props.y },
     s
   );
@@ -927,22 +927,22 @@ function fe(o, e, t) {
     ...o,
     props: {
       ...o.props,
-      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)
+      x: i.x,
+      y: i.y,
+      width: Math.max(n.x - i.x, u.MIN_SIZE),
+      height: Math.max(n.y - i.y, u.MIN_SIZE)
     }
   } : o;
 }
-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), [
+function ve(o, e) {
+  let t = o.x, s = o.y, i = e.x, n = e.y, a;
+  return t > i && (a = Math.abs(t - i), t = i, i = t + a), s > n && (a = Math.abs(s - n), s = n, n = s + a), [
     { x: t, y: s },
-    { x: n, y: i }
+    { x: i, y: n }
   ];
 }
-var x, A, V, S;
-class xe extends oe {
+var w, Z, A, S;
+class Ne extends ce {
   constructor(t) {
     super({
       viewport: {
@@ -955,29 +955,29 @@ class xe extends oe {
       toolType: "select",
       nodes: []
     });
-    d(this, x);
-    d(this, A);
-    d(this, V);
-    d(this, S, null);
-    N(this, x, new ne(this, {
+    l(this, w);
+    l(this, Z);
+    l(this, A);
+    l(this, S, null);
+    N(this, w, new ae(this, {
       container: t,
       width: t.clientWidth,
       height: t.clientHeight,
       draggable: !1,
       className: "touch-none"
-    })), 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);
+    })), 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);
   }
   /**
    * 获取 CanvasStage 实例
    */
   getCanvasStage() {
-    return r(this, x);
+    return r(this, w);
   }
   /**
    * 获取 CanvasTransformer 实例
    */
   getCanvasTransformer() {
-    return r(this, V);
+    return r(this, A);
   }
   /**
    * 发射事件（供内部类使用）
@@ -989,19 +989,19 @@ class xe extends oe {
    * 获取 Konva.Stage 实例
    */
   getStage() {
-    return r(this, x).getStage();
+    return r(this, w).getStage();
   }
   /**
    * 获取 Stage 容器元素
    */
   getContainer() {
-    return r(this, x).getStage().container();
+    return r(this, w).getStage().container();
   }
   /**
    * 获取主图层
    */
   getMainLayer() {
-    return r(this, A);
+    return r(this, Z);
   }
   /**
    * 获取当前工具类型
@@ -1018,59 +1018,59 @@ class xe extends oe {
         toolType: t
       },
       !1
-    ), 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());
+    ), 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());
   }
   /**
    * 设置是否可拖拽（内部使用）
    */
   setDraggable(t) {
-    r(this, x).setDraggable(t);
+    r(this, w).setDraggable(t);
   }
   /**
    * 设置光标
    * @internal 仅供内部使用
    */
   setCursor(t) {
-    r(this, x).setCursor(t);
+    r(this, w).setCursor(t);
   }
   /**
    * 重置光标
    * @internal 仅供内部使用
    */
   resetCursor() {
-    r(this, x).resetCursor();
+    r(this, w).resetCursor();
   }
   /**
    * 获取当前 Stage 缩放比例
    */
   getStageScale() {
-    return r(this, x).getStage().scaleX();
+    return r(this, w).getStage().scaleX();
   }
   /**
    * 更新视口位置
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
   updateViewport(t, s = !1) {
-    r(this, x).setViewport(t);
-    const n = {
+    r(this, w).setViewport(t);
+    const i = {
       ...this.getState().viewport,
       ...t
     };
     this._updateState(
       {
-        viewport: n
+        viewport: i
       },
       s
-    ), this.emit("viewport:change", n), r(this, V).emitPositionChange();
+    ), this.emit("viewport:change", i), r(this, A).emitPositionChange();
   }
   createNodes(t) {
-    t.map((i) => Rt(this, i.type, i)).filter((i) => i !== null).forEach((i) => {
-      r(this, A).add(i.getElement());
+    t.map((n) => zt(this, n.type, n)).filter((n) => n !== null).forEach((n) => {
+      r(this, Z).add(n.getElement());
     });
-    const n = [...this.getState().nodes || [], ...t];
+    const i = [...this.getState().nodes || [], ...t];
     this._updateState(
       {
-        nodes: n
+        nodes: i
       },
       !0
     );
@@ -1078,20 +1078,20 @@ class xe extends oe {
   /**
    * 创建图片标注节点（内部使用）
    */
-  createImageMarkerNode(t, s, n, i) {
+  createImageMarkerNode(t, s, i, n) {
     const a = this.getState().nodes || [];
     let h = 0;
-    a.forEach((E) => {
-      E.type === "image-marker" && E.meta.parent === t && typeof E.meta.markerNumber == "number" && (h = Math.max(h, E.meta.markerNumber));
+    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 - 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(),
+    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(),
       type: "image-marker",
       props: {
         x: p,
-        y: _,
-        width: b,
-        height: C,
+        y: M,
+        width: I,
+        height: E,
         rotation: 0,
         visible: !0
       },
@@ -1107,71 +1107,71 @@ class xe extends oe {
         relativePosition: {
           start: {
             percentX: Math.max(0, Math.min(100, c)),
-            percentY: Math.max(0, Math.min(100, g))
+            percentY: Math.max(0, Math.min(100, d))
           },
           end: {
-            percentX: Math.max(0, Math.min(100, m)),
-            percentY: Math.max(0, Math.min(100, v))
+            percentX: Math.max(0, Math.min(100, g)),
+            percentY: Math.max(0, Math.min(100, x))
           }
         }
       }
     };
-    this.createNodes([P]);
+    this.createNodes([z]);
   }
   /**
    * 在指定位置查找图片节点
    * @internal 仅供内部使用
    */
   findImageAtPosition(t) {
-    const s = r(this, x).getStage(), n = s.find(
+    const s = r(this, w).getStage(), i = s.find(
       (a) => a.getClassName() === "Image"
-    ), i = n.map(
+    ), n = i.map(
       (a) => a.listening()
     );
-    n.forEach((a) => a.listening(!0));
+    i.forEach((a) => a.listening(!0));
     try {
       const h = s.getAllIntersections(t).filter(
         (c) => c.getClassName() === "Image"
       );
       return h.length === 0 ? null : h[h.length - 1];
     } finally {
-      n.forEach((a, h) => {
-        a.listening(i[h]);
+      i.forEach((a, h) => {
+        a.listening(n[h]);
       });
     }
   }
   /**
    * @internal 仅供内部使用
    */
-  createDraftNode(t, s, n) {
+  createDraftNode(t, s, i) {
     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());
+    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());
   }
   /**
    * @internal 仅供内部使用
    */
   updateDraftNode(t, s) {
     if (!r(this, S)) return;
-    const n = r(this, S).getNode(), i = fe(n, t, s);
-    r(this, S).updateNode(i);
+    const i = r(this, S).getNode(), n = we(i, t, s);
+    r(this, S).updateNode(n);
   }
   /**
    * @internal 仅供内部使用
    */
   finalizeDraftNode() {
     if (!r(this, S)) return;
-    const t = J(), s = r(this, S).getNode();
+    const t = K(), s = r(this, S).getNode();
     if (s.type === "image-marker" && s.meta.parent) {
-      const i = s.meta.bounds, a = s.meta.startPosition, h = {
+      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 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));
+      let d = 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));
       });
-      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 = {
+      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 = {
         ...s,
         props: {
           ...s.props
@@ -1181,25 +1181,25 @@ class xe extends oe {
         },
         meta: {
           parent: s.meta.parent,
-          markerNumber: g + 1,
+          markerNumber: d + 1,
           relativePosition: {
             start: {
-              percentX: Math.max(0, Math.min(100, m)),
-              percentY: Math.max(0, Math.min(100, v))
+              percentX: Math.max(0, Math.min(100, g)),
+              percentY: Math.max(0, Math.min(100, x))
             },
             end: {
               percentX: Math.max(0, Math.min(100, p)),
-              percentY: Math.max(0, Math.min(100, _))
+              percentY: Math.max(0, Math.min(100, M))
             }
           }
         },
         id: t,
         type: "image-marker"
       };
-      this.createNodes([b]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
+      this.createNodes([I]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
       return;
     }
-    const n = {
+    const i = {
       ...s,
       props: {
         ...s.props
@@ -1212,18 +1212,18 @@ class xe extends oe {
       },
       id: t
     };
-    this.createNodes([n]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
+    this.createNodes([i]), r(this, S).destroy(), N(this, S, null), this.setToolType("select");
   }
   /**
    * 选择节点
    * @internal 仅供内部使用，外部请使用 CanvasApi
    */
   selectNode(t, s = !1) {
-    const n = this.getState().selectedNodeIds ?? [];
-    if (n.length === 0 && !t)
+    const i = this.getState().selectedNodeIds ?? [];
+    if (i.length === 0 && !t)
       return;
     if (!t) {
-      r(this, V).clearNodes(), this._updateState(
+      r(this, A).clearNodes(), this._updateState(
         {
           selectedNodeIds: []
         },
@@ -1231,15 +1231,15 @@ class xe extends oe {
       );
       return;
     }
-    let i = [];
-    s ? i = n.length ? [...n, t] : [t] : i = [t];
-    const a = this.getStage().find(`.${$}`).filter((h) => {
+    let n = [];
+    s ? n = i.length ? [...i, t] : [t] : n = [t];
+    const a = this.getStage().find(`.${j}`).filter((h) => {
       const c = h.id();
-      return i.includes(c);
+      return n.includes(c);
     });
-    r(this, V).setNodes(a), this._updateState(
+    r(this, A).setNodes(a), this._updateState(
       {
-        selectedNodeIds: i
+        selectedNodeIds: n
       },
       !1
     );
@@ -1254,25 +1254,25 @@ class xe extends oe {
    * 从元素同步节点数据（供节点类内部使用）
    */
   _syncNodeFromElement(t, s) {
-    const n = this.getState().nodes || [], i = n.findIndex((c) => c.id === t);
-    if (i === -1) return;
+    const i = this.getState().nodes || [], n = i.findIndex((c) => c.id === t);
+    if (n === -1) return;
     const a = {
-      ...n[i],
+      ...i[n],
       ...s,
       props: {
-        ...n[i].props,
+        ...i[n].props,
         ...s.props
       },
       style: {
-        ...n[i].style,
+        ...i[n].style,
         ...s.style
       },
       meta: {
-        ...n[i].meta,
+        ...i[n].meta,
         ...s.meta
       }
-    }, h = [...n];
-    h[i] = a, this._updateState(
+    }, h = [...i];
+    h[n] = a, this._updateState(
       {
         nodes: h
       },
@@ -1284,7 +1284,7 @@ class xe extends oe {
    * 当 undo/redo 时被调用
    */
   _syncState(t) {
-    r(this, x).setViewport({
+    r(this, w).setViewport({
       x: t.viewport.x,
       y: t.viewport.y,
       scale: t.viewport.scale,
@@ -1293,8 +1293,8 @@ class xe extends oe {
     });
   }
 }
-x = new WeakMap(), A = new WeakMap(), V = new WeakMap(), S = new WeakMap();
-class we extends xe {
+w = new WeakMap(), Z = new WeakMap(), A = new WeakMap(), S = new WeakMap();
+class Se extends Ne {
   /**
    * 获取所有可用的工具类型
    */
@@ -1317,8 +1317,8 @@ class we extends xe {
    * 创建图片节点
    */
   createImageNode(e, t) {
-    const s = t ?? { x: 100, y: 100 }, n = {
-      id: J(),
+    const s = t ?? { x: 100, y: 100 }, i = {
+      id: K(),
       type: "image",
       props: {
         x: s.x,
@@ -1338,26 +1338,57 @@ class we extends xe {
         imageUrl: e
       }
     };
-    this.createNodes([n]);
+    this.createNodes([i]);
   }
   /**
    * 在当前所有节点的左下角插入图片，并将其居中显示
+   * 如果没有节点，插入到画布中心
    * @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);
+   * @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);
         }
-      }), i !== 1 / 0 && a !== -1 / 0 && (s = { x: i, y: a + 20 });
+      }), 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
+      };
     }
-    this.createImageNode(e, s), requestAnimationFrame(() => {
+    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 });
     });
   }
@@ -1367,7 +1398,7 @@ class we extends xe {
    * @returns DataURL 格式的图片数据
    */
   exportAsImage(e) {
-    const t = this.getStage(), s = this.getCanvasTransformer().getTransformer(), n = s.visible();
+    const t = this.getStage(), s = this.getCanvasTransformer().getTransformer(), i = s.visible();
     s.visible(!1);
     try {
       return t.toDataURL({
@@ -1376,7 +1407,7 @@ class we extends xe {
         quality: e?.quality ?? 1
       });
     } finally {
-      s.visible(n);
+      s.visible(i);
     }
   }
   /**
@@ -1388,20 +1419,20 @@ class we extends xe {
     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);
+    const s = this.getStage(), i = e?.padding ?? 10, n = this.getCanvasTransformer().getTransformer(), a = n.visible();
+    n.visible(!1);
     try {
       return s.toDataURL({
-        x: t.x - n,
-        y: t.y - n,
-        width: t.width + n * 2,
-        height: t.height + n * 2,
+        x: t.x - i,
+        y: t.y - i,
+        width: t.width + i * 2,
+        height: t.height + i * 2,
         pixelRatio: e?.pixelRatio ?? 2,
         mimeType: e?.mimeType ?? "image/png",
         quality: e?.quality ?? 1
       });
     } finally {
-      i.visible(a);
+      n.visible(a);
     }
   }
   /**
@@ -1420,18 +1451,18 @@ class we extends xe {
   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);
+    e.forEach((n) => {
+      t.find((h) => h.id === n)?.type === "image" && t.forEach((h) => {
+        h.type === "image-marker" && h.meta.parent === n && s.add(h.id);
       });
-    }), s.forEach((i) => {
-      const a = this.getStage().findOne(`#${i}`);
+    }), s.forEach((n) => {
+      const a = this.getStage().findOne(`#${n}`);
       a && a.destroy();
     });
-    const n = t.filter((i) => !s.has(i.id));
+    const i = t.filter((n) => !s.has(n.id));
     this.getCanvasTransformer().clearNodes(), this._updateState(
       {
-        nodes: n,
+        nodes: i,
         selectedNodeIds: []
       },
       !0
@@ -1439,46 +1470,48 @@ class we extends xe {
   }
   /**
    * 滚动到内容区域
-   * - 如果有选中的节点，将选中节点居中显示
+   * - 如果提供了 nodeIds，将指定的节点居中显示
+   * - 如果没有提供 nodeIds 但有选中的节点，将选中节点居中显示
    * - 如果没有选中节点，将所有内容居中显示
    * @param options - 配置选项
    * @param options.padding - 内容周围的留白，默认 50px
    * @param options.scale - 是否自动调整缩放以适应内容，默认 false
+   * @param options.nodeIds - 要滚动到的节点 ID 数组
    */
   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 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;
+    if (g.children.forEach((C) => {
+      if (C.visible() && C.getClassName() !== "Transformer" && C.hasName(j)) {
+        if (I) {
+          const U = C.id();
+          if (!I.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);
+        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);
         } else
-          i = Math.min(i, yt), a = Math.min(a, L), h = Math.max(h, yt + Vt), c = Math.max(c, L + Ut);
+          a = Math.min(a, Ct), h = Math.min(h, Tt), c = Math.max(c, Ct + Lt), d = Math.max(d, Tt + Ot);
       }
-    }), 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);
+    }), 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;
+    if (i) {
+      const C = (L.width - s * 2) / E, O = (L.height - s * 2) / z;
+      V = Math.min(C, O, 1);
     }
-    const ut = P.width / 2 - b * E, ft = P.height / 2 - C * E;
-    this.updateViewport({ x: ut, y: ft, scale: E }, !0);
+    const G = L.width / 2 - P * V, Et = L.height / 2 - ft * V;
+    this.updateViewport({ x: G, y: Et, scale: V }, !0);
   }
 }
-function ve(o, e, t, s = !1) {
-  const [n, i] = e, [a, h] = t, c = a + (o - n) / (i - n) * (h - a);
+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 Yt = [
+const Dt = [
   {
     min: -1,
     mid: 0.15,
@@ -1500,15 +1533,15 @@ const Yt = [
     step: 1
   }
 ];
-function Ne({
+function _e({
   viewportX: o,
   viewportY: e,
   scale: t,
   size: s = 20,
-  showGrid: n = !0
+  showGrid: i = !0
 }) {
-  const i = o / t, a = e / t, h = t;
-  return n ? /* @__PURE__ */ F(
+  const n = o / t, a = e / t, h = t;
+  return i ? /* @__PURE__ */ W(
     "svg",
     {
       className: "canvas-grid w-full h-full absolute top-0 left-0",
@@ -1516,38 +1549,38 @@ function Ne({
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__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(
+        /* @__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(
             "pattern",
             {
-              id: `grid_${m}`,
+              id: `grid_${g}`,
               width: p,
               height: p,
               patternUnits: "userSpaceOnUse",
-              children: /* @__PURE__ */ w(
+              children: /* @__PURE__ */ v(
                 "circle",
                 {
                   className: "tl-grid-dot",
-                  cx: C,
-                  cy: P,
+                  cx: E,
+                  cy: z,
                   r: 1,
-                  opacity: E
+                  opacity: P
                 }
               )
             },
-            v
+            x
           );
         }) }),
-        Yt.map(({ step: c }, g) => /* @__PURE__ */ w("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, g))
+        Dt.map(({ step: c }, d) => /* @__PURE__ */ v("rect", { width: "100%", height: "100%", fill: `url(#grid_${c})` }, d))
       ]
     }
   ) : null;
 }
-function Se(...o) {
-  return Qt(Jt(o));
+function Ie(...o) {
+  return se(ee(o));
 }
-const Me = Bt(
+const be = te(
   "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: {
@@ -1574,56 +1607,56 @@ const Me = Bt(
     }
   }
 );
-function W({
+function $({
   className: o,
   variant: e = "default",
   size: t = "default",
   asChild: s = !1,
-  ...n
+  ...i
 }) {
-  return /* @__PURE__ */ w(
-    s ? jt : "button",
+  return /* @__PURE__ */ v(
+    s ? Qt : "button",
     {
       "data-slot": "button",
       "data-variant": e,
       "data-size": t,
-      className: Se(Me({ variant: e, size: t, className: o })),
-      ...n
+      className: Ie(be({ variant: e, size: t, className: o })),
+      ...i
     }
   );
 }
-function _e({ api: o }) {
-  const [e, t] = G(o.getState().viewport);
+function Ee({ api: o }) {
+  const [e, t] = q(o.getState().viewport);
   It(() => {
     o.on("viewport:change", (c) => {
       t(c);
     });
   }, [t, o]);
   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 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 });
+  }, i = () => {
     const c = Math.min(e.scale * 1.2, 5);
     s(c);
-  }, i = () => {
+  }, n = () => {
     const c = Math.max(e.scale / 1.2, 0.1);
     s(c);
   }, a = () => {
     s(1);
   }, h = Math.round(e.scale * 100);
-  return /* @__PURE__ */ F("div", { className: "zoom-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ w(
-      W,
+  return /* @__PURE__ */ W("div", { className: "zoom-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ v(
+      $,
       {
         size: "sm",
         variant: "secondary",
-        onClick: i,
+        onClick: n,
         title: "缩小",
-        children: /* @__PURE__ */ w(te, {})
+        children: /* @__PURE__ */ v(ie, {})
       }
     ),
-    /* @__PURE__ */ F(
-      W,
+    /* @__PURE__ */ W(
+      $,
       {
         size: "sm",
         variant: "secondary",
@@ -1636,81 +1669,81 @@ function _e({ api: o }) {
         ]
       }
     ),
-    /* @__PURE__ */ w(
-      W,
+    /* @__PURE__ */ v(
+      $,
       {
         size: "sm",
         variant: "secondary",
-        onClick: n,
+        onClick: i,
         title: "放大",
-        children: /* @__PURE__ */ w(ee, {})
+        children: /* @__PURE__ */ v(ne, {})
       }
     )
   ] });
 }
-function Ie({ api: o }) {
-  const [e, t] = G(o.canUndo()), [s, n] = G(o.canRedo());
+function Ce({ api: o }) {
+  const [e, t] = q(o.canUndo()), [s, i] = q(o.canRedo());
   return It(() => {
-    const i = () => {
-      t(o.canUndo()), n(o.canRedo());
+    const n = () => {
+      t(o.canUndo()), i(o.canRedo());
     };
-    return o.on("state:change", i), () => {
-      o.off("state:change", i);
+    return o.on("state:change", n), () => {
+      o.off("state:change", n);
     };
-  }, [o]), /* @__PURE__ */ F("div", { className: "history-panel flex items-center gap-2", children: [
-    /* @__PURE__ */ w(
-      W,
+  }, [o]), /* @__PURE__ */ W("div", { className: "history-panel flex items-center gap-2", children: [
+    /* @__PURE__ */ v(
+      $,
       {
         size: "sm",
         variant: "secondary",
         disabled: !e,
         onClick: () => o.undo(),
         title: "撤销",
-        children: /* @__PURE__ */ w(se, {})
+        children: /* @__PURE__ */ v(re, {})
       }
     ),
-    /* @__PURE__ */ w(
-      W,
+    /* @__PURE__ */ v(
+      $,
       {
         size: "sm",
         variant: "secondary",
         disabled: !s,
         onClick: () => o.redo(),
         title: "重做",
-        children: /* @__PURE__ */ w(ie, {})
+        children: /* @__PURE__ */ v(oe, {})
       }
     )
   ] });
 }
-function Ae({ setApi: o }) {
-  const e = qt(null), [t, s] = G(null), [n, i] = G({ x: 0, y: 0, scale: 1 });
+function He({ setApi: o }) {
+  const e = Bt(null), [t, s] = q(null), [i, n] = q({ x: 0, y: 0, scale: 1 });
   return It(() => {
     if (!e.current) return;
-    const a = new we(e.current);
+    const a = new Se(e.current);
     return s(a), o?.(a), a.on("viewport:change", (h) => {
-      i(h);
+      n(h);
     }), a.on("transformer:positionChange", (h) => {
       console.log("Transformer position changed:", h);
     }), () => {
       a.dispose();
     };
-  }, [o]), /* @__PURE__ */ F("div", { className: "pure-canvas relative size-full", children: [
-    /* @__PURE__ */ w(
-      Ne,
+  }, [o]), /* @__PURE__ */ W("div", { className: "pure-canvas relative size-full", children: [
+    /* @__PURE__ */ v(
+      _e,
       {
-        viewportX: n.x,
-        viewportY: n.y,
-        scale: n.scale
+        viewportX: i.x,
+        viewportY: i.y,
+        scale: i.scale
       }
     ),
-    /* @__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 }) })
+    /* @__PURE__ */ v("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 }) })
     ] })
   ] });
 }
 export {
-  we as CanvasApi,
-  Ae as PureCanvas
+  Se as CanvasApi,
+  He as PureCanvas
 };