@8btc/whiteboard 0.0.20-alpha.27 → 0.0.20-alpha.28

package/dist/adapter/maze.js

@@ -1,10 +1,10 @@
 import { v4 as _ } from "uuid";
 import { N as M } from "../const-CNw7pZuI.js";
 async function N(t) {
-  return new Promise((o, n) => {
+  return new Promise((r, n) => {
     const e = new Image();
     e.onload = () => {
-      o({ width: e.naturalWidth, height: e.naturalHeight });
+      r({ width: e.naturalWidth, height: e.naturalHeight });
     }, e.onerror = () => {
       n(new Error(`Failed to load image: ${t}`));
     }, e.src = t;
@@ -14,14 +14,14 @@ function v(t) {
   if (!t) return { x: 0, y: 0 };
   if ((t.getState().nodes || []).length > 0) {
     const e = t.getMainLayer();
-    let r = 1 / 0, i = -1 / 0;
+    let i = 1 / 0, o = -1 / 0;
     if (e.children.forEach((s) => {
       if (s.visible() && s.getClassName() !== "Transformer" && s.hasName(M.selectable)) {
         const a = s.getAttrs(), c = a.x || 0, d = a.y || 0, l = a.height || 0;
-        r = Math.min(r, c), i = Math.max(i, d + l);
+        i = Math.min(i, c), o = Math.max(o, d + l);
       }
-    }), r !== 1 / 0 && i !== -1 / 0)
-      return { x: r, y: i };
+    }), i !== 1 / 0 && o !== -1 / 0)
+      return { x: i, y: o };
   }
   const n = t.getState().viewport;
   return {
@@ -29,17 +29,17 @@ function v(t) {
     y: n.y
   };
 }
-async function E(t, o, n, e) {
+async function E(t, r, n, e) {
   if (!t) return;
-  const r = Array.isArray(o) ? o : [o];
-  if (r.length === 0) return;
-  const i = e?.spacing ?? 20, s = e?.scrollToView ?? !0, a = e?.direction ?? "horizontal", c = e?.reuseExisting ?? !0, d = /* @__PURE__ */ new Map();
+  const i = Array.isArray(r) ? r : [r];
+  if (i.length === 0) return;
+  const o = e?.spacing ?? 20, s = e?.scrollToView ?? !0, a = e?.direction ?? "horizontal", c = e?.reuseExisting ?? !0, d = /* @__PURE__ */ new Map();
   c && (t.getState().nodes || []).forEach((m) => {
     m.$_type === "image" && m.$_imageUrl && d.set(m.$_imageUrl, m.id);
   });
-  const l = await Promise.all(r.map((f) => N(f))), h = [], u = [];
+  const l = await Promise.all(i.map((f) => N(f))), h = [], u = [];
   let g = n.x, y = n.y;
-  return r.forEach((f, m) => {
+  return i.forEach((f, m) => {
     if (c && d.has(f)) {
       const w = d.get(f);
       u.push(w);
@@ -54,34 +54,34 @@ async function E(t, o, n, e) {
       width: $,
       height: x,
       $_imageUrl: f
-    }), u.push(I), a === "horizontal" ? g += $ + i : y += x + i;
+    }), u.push(I), a === "horizontal" ? g += $ + o : y += x + o;
   }), h.length > 0 && t.createNodes(h, !0), s && t.scrollToContent({ scale: !1, nodeIds: u }), u;
 }
-async function B(t, o) {
+async function B(t, r) {
   if (!t) return;
   const n = v(t);
-  return E(t, o, {
+  return E(t, r, {
     x: n.x,
     y: n.y + 20
   });
 }
-function L(t, o) {
+function L(t, r) {
   if (!t) return;
   const n = t.getState().selectedNodeIds || [];
   if (n.length === 0) return;
-  let e = 1 / 0, r = 1 / 0, i = -1 / 0, s = -1 / 0;
+  let e = 1 / 0, i = 1 / 0, o = -1 / 0, s = -1 / 0;
   if (t.getMainLayer().children.forEach((l) => {
     if (l.visible() && l.getClassName() !== "Transformer" && n.includes(l.id())) {
       const h = l.getAttrs(), u = h.x || 0, g = h.y || 0, y = h.width || 0, f = h.height || 0;
-      e = Math.min(e, u), r = Math.min(r, g), i = Math.max(i, u + y), s = Math.max(s, g + f);
+      e = Math.min(e, u), i = Math.min(i, g), o = Math.max(o, u + y), s = Math.max(s, g + f);
     }
-  }), e === 1 / 0 || r === 1 / 0 || i === -1 / 0 || s === -1 / 0)
+  }), e === 1 / 0 || i === 1 / 0 || o === -1 / 0 || s === -1 / 0)
     return;
   const c = {
-    x: i + 20,
-    y: r,
-    width: i - e,
-    height: s - r
+    x: o + 20,
+    y: i,
+    width: o - e,
+    height: s - i
   }, d = {
     id: _(),
     $_type: "html",
@@ -90,33 +90,33 @@ function L(t, o) {
     y: c.y,
     width: c.width,
     height: c.height,
-    $_imageUrl: o,
+    $_imageUrl: r,
     // 示例 loading 图片 URL
     $_htmlContent: `
-      <img alt="loading" src="${o}" style="width: 100%; height: 100%; object-fit: contain;" />
+      <img alt="loading" src="${r}" style="width: 100%; height: 100%; object-fit: contain;" />
     `
   };
   return t.createNodes([d], !0), d.id;
 }
-function X(t, o, n) {
+function X(t, r, n) {
   if (!t) return;
-  const e = t.getCanvasNodeById(o);
+  const e = t.getCanvasNodeById(r);
   if (!e) return;
-  const r = e.getConfig();
-  if (r.$_type !== "html") return;
-  const i = Array.isArray(n) ? n : [n];
-  if (i.length === 0) return;
-  const s = r.x, a = r.y;
-  E(t, i, { x: s, y: a }, { scrollToView: !1 }), t.deleteNodes([o]);
+  const i = e.getConfig();
+  if (i.$_type !== "html") return;
+  const o = Array.isArray(n) ? n : [n];
+  if (o.length === 0) return;
+  const s = i.x, a = i.y;
+  E(t, o, { x: s, y: a }, { scrollToView: !1 }), t.deleteNodes([r]);
 }
-async function p(t, o, n, e, r) {
+async function p(t, r, n, e, i) {
   if (!t) return;
-  const i = r?.scrollToView ?? !0;
-  if (r?.reuseExisting ?? !0) {
+  const o = i?.scrollToView ?? !0;
+  if (i?.reuseExisting ?? !0) {
     const d = t.getState().nodes || [];
     for (const l of d)
-      if (l.$_type === "video" && l.$_videoUrl === o)
-        return i && t.scrollToContent({ scale: !1, nodeIds: [l.id] }), l.id;
+      if (l.$_type === "video" && l.$_videoUrl === r)
+        return o && t.scrollToContent({ scale: !1, nodeIds: [l.id] }), l.id;
   }
   let a = { width: 320, height: 180 };
   try {
@@ -133,30 +133,30 @@ async function p(t, o, n, e, r) {
     // 使用封面图片的宽度
     height: a.height,
     // 使用封面图片的高度
-    $_videoUrl: o,
+    $_videoUrl: r,
     $_coverUrl: n
   };
-  return t.createNodes([c], !0), i && t.scrollToContent({ scale: !1, nodeIds: [c.id] }), c.id;
+  return t.createNodes([c], !0), o && t.scrollToContent({ scale: !1, nodeIds: [c.id] }), c.id;
 }
-async function Y(t, o, n) {
+async function Y(t, r, n) {
   if (!t) return;
   const e = v(t);
-  return p(t, o, n, {
+  return p(t, r, n, {
     x: e.x,
     y: e.y + 20
   });
 }
-async function V(t, o) {
+async function V(t, r) {
   if (!t) return null;
-  const n = t.getCanvasNodeById(o);
+  const n = t.getCanvasNodeById(r);
   if (!n) return null;
   const e = n.getConfig();
   if (e.$_type !== "image-marker" || !e.$_relativeBox)
     return null;
-  const r = e.$_parentId;
-  if (!r) return null;
-  const i = t.getNodeConfigById(r);
-  if (!i || i.$_type !== "image" || !i.$_imageUrl) return null;
+  const i = e.$_parentId;
+  if (!i) return null;
+  const o = t.getNodeConfigById(i);
+  if (!o || o.$_type !== "image" || !o.$_imageUrl) return null;
   const { start: s, end: a } = e.$_relativeBox, c = s.ratioX, d = s.ratioY, l = a.ratioX - s.ratioX, h = a.ratioY - s.ratioY;
   return new Promise((u) => {
     const g = new Image();
@@ -182,21 +182,21 @@ async function V(t, o) {
       const S = w.toDataURL("image/png");
       u(S);
     }, g.onerror = () => {
-      console.error("Failed to load image:", i.$_imageUrl), u(null);
-    }, g.src = i.$_imageUrl;
+      console.error("Failed to load image:", o.$_imageUrl), u(null);
+    }, g.src = o.$_imageUrl;
   });
 }
-function z(t) {
+function z(t, r) {
   if (!t) return null;
-  const o = t.getState().selectedNodeIds || [];
-  if (o.length === 0) return null;
-  if (o.length === 1) {
-    const n = t.getCanvasNodeById(o[0]);
-    if (!n) return null;
-    if (n.getConfig().$_type === "image")
-      return n.getConfig().$_imageUrl || null;
+  const n = t.getState().selectedNodeIds || [];
+  if (n.length === 0) return null;
+  if (n.length === 1) {
+    const e = t.getCanvasNodeById(n[0]);
+    if (!e) return null;
+    if (e.getConfig().$_type === "image")
+      return e.getConfig().$_imageUrl || null;
   }
-  return t.exportSelectionAsImage();
+  return t.exportSelectionAsImage(r);
 }
 export {
   v as calculateBottomLeftOfCanvasContent,

package/dist/index.js

@@ -4,9 +4,9 @@ var Xe = (n) => {
 };
 var on = (n, e, t) => e in n ? nn(n, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : n[e] = t;
 var C = (n, e, t) => on(n, typeof e != "symbol" ? e + "" : e, t), Ce = (n, e, t) => e.has(n) || Xe("Cannot " + t);
-var r = (n, e, t) => (Ce(n, e, "read from private field"), t ? t.call(n) : e.get(n)), f = (n, e, t) => e.has(n) ? Xe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), b = (n, e, t, i) => (Ce(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), _ = (n, e, t) => (Ce(n, e, "access private method"), t);
+var r = (n, e, t) => (Ce(n, e, "read from private field"), t ? t.call(n) : e.get(n)), f = (n, e, t) => e.has(n) ? Xe("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(n) : e.set(n, t), b = (n, e, t, i) => (Ce(n, e, "write to private field"), i ? i.call(n, t) : e.set(n, t), t), M = (n, e, t) => (Ce(n, e, "access private method"), t);
 import { jsxs as k, jsx as c, Fragment as me } from "react/jsx-runtime";
-import { useState as R, useEffect as V, useRef as Me, useMemo as pt, forwardRef as $, createContext as sn, isValidElement as Ye, version as rn, cloneElement as an, useContext as ln, Fragment as hn, useCallback as K, memo as ot } from "react";
+import { useState as R, useEffect as V, useRef as _e, useMemo as pt, forwardRef as $, createContext as sn, isValidElement as Ye, version as rn, cloneElement as an, useContext as ln, Fragment as hn, useCallback as K, memo as ot } from "react";
 import I from "konva";
 import { N as T, I as q, R as S } from "./const-CNw7pZuI.js";
 import cn from "mitt";
@@ -15,16 +15,16 @@ import gn from "@tiptap/starter-kit";
 import un from "@tiptap/extension-highlight";
 import { TextStyle as mn, Color as fn, FontFamily as pn } from "@tiptap/extension-text-style";
 import { toCanvas as yn } from "html-to-image";
-import { v4 as _t } from "uuid";
+import { v4 as Mt } from "uuid";
 import { Slot as vn } from "@radix-ui/react-slot";
 import { cva as Cn } from "class-variance-authority";
 import { clsx as xn } from "clsx";
 import { twMerge as bn } from "tailwind-merge";
 import { Minus as wn, Plus as En, Undo2 as Sn, Redo2 as Nn } from "lucide-react";
 import { BubbleMenu as Tn } from "@tiptap/react/menus";
-import { NodeSelection as _n } from "@tiptap/pm/state";
+import { NodeSelection as Mn } from "@tiptap/pm/state";
 import "@tiptap/pm/tables";
-import { useCurrentEditor as Mn, useEditorState as In } from "@tiptap/react";
+import { useCurrentEditor as _n, useEditorState as In } from "@tiptap/react";
 import { FloatingDelayGroup as kn, useMergeRefs as ri, FloatingPortal as Rn, useFloating as $n, offset as Fn, flip as An, shift as Hn, autoUpdate as Ln, useHover as Dn, useFocus as Bn, useDismiss as Vn, useRole as On, useInteractions as Pn } from "@floating-ui/react";
 import * as zt from "@radix-ui/react-popover";
 import { useHotkeys as ai } from "react-hotkeys-hook";
@@ -160,7 +160,7 @@ class Zn {
       scaleY: 1,
       draggable: t.draggable ?? !1,
       className: t.className
-    })), _(this, Qt, li).call(this);
+    })), M(this, Qt, li).call(this);
   }
   /**
    * 获取原生 Konva.Stage 实例
@@ -218,12 +218,12 @@ E = new WeakMap(), w = new WeakMap(), j = new WeakMap(), Wt = new WeakMap(), Xt
 li = function() {
   r(this, w).on("wheel", r(this, Wt)), r(this, w).on("pointerdown", r(this, Xt)), r(this, w).on("pointermove", r(this, Yt)), r(this, w).on("pointerup", r(this, Gt)), r(this, w).on("dragstart", r(this, Kt)), r(this, w).on("dragmove", r(this, qt)), r(this, w).on("dragend", r(this, jt)), r(this, w).on("contextmenu", r(this, Jt));
 };
-var kt, M, te, ee, ie, ne, oe, se, re, hi;
+var kt, _, te, ee, ie, ne, oe, se, re, hi;
 class Un {
   constructor(e, t) {
     f(this, re);
     f(this, kt);
-    f(this, M);
+    f(this, _);
     /**
      * 处理 transformstart 事件
      */
@@ -260,7 +260,7 @@ class Un {
     f(this, se, () => {
       this.emitPositionChange();
     });
-    b(this, kt, e), b(this, M, new I.Transformer({
+    b(this, kt, e), b(this, _, new I.Transformer({
       rotateEnabled: t?.rotateEnabled ?? !0,
       ignoreStroke: t?.ignoreStroke ?? !0,
       anchorSize: t?.anchorSize ?? 8,
@@ -268,27 +268,27 @@ class Un {
       anchorCornerRadius: t?.anchorCornerRadius ?? 4,
       padding: t?.padding ?? 6,
       shouldOverdrawWholeArea: !0
-    })), _(this, re, hi).call(this);
+    })), M(this, re, hi).call(this);
   }
   /**
    * 获取原生 Konva.Transformer 实例
    */
   getTransformer() {
-    return r(this, M);
+    return r(this, _);
   }
   /**
    * 获取 Transformer 的位置信息
    */
   getPosition() {
-    if (r(this, M).nodes().length === 0)
+    if (r(this, _).nodes().length === 0)
       return null;
-    const t = r(this, M).getClientRect();
+    const t = r(this, _).getClientRect();
     return {
       x: t.x,
       y: t.y,
       width: t.width,
       height: t.height,
-      rotation: r(this, M).rotation()
+      rotation: r(this, _).rotation()
     };
   }
   /**
@@ -299,11 +299,11 @@ class Un {
       this.clearNodes();
       return;
     }
-    r(this, M).nodes(e), r(this, M).moveToTop(), r(this, M).rotateEnabled(
+    r(this, _).nodes(e), r(this, _).moveToTop(), r(this, _).rotateEnabled(
       !e.some(
         (t) => ["rich-text", "html"].includes(t.getAttr("$_type"))
       )
-    ), e.length === 1 && e[0].getAttr("$_type") === "rich-text" && r(this, M).enabledAnchors([
+    ), e.length === 1 && e[0].getAttr("$_type") === "rich-text" && r(this, _).enabledAnchors([
       "top-left",
       "top-right",
       "bottom-left",
@@ -316,13 +316,13 @@ class Un {
    * 获取当前变换的节点
    */
   getNodes() {
-    return r(this, M).nodes();
+    return r(this, _).nodes();
   }
   /**
    * 清除所有节点
    */
   clearNodes() {
-    r(this, M).nodes([]), this.emitPositionChange();
+    r(this, _).nodes([]), this.emitPositionChange();
   }
   /**
    * emit Transformer 位置
@@ -335,15 +335,15 @@ class Un {
    * 销毁 Transformer
    */
   destroy() {
-    r(this, M).destroy();
+    r(this, _).destroy();
   }
 }
-kt = new WeakMap(), M = new WeakMap(), te = new WeakMap(), ee = new WeakMap(), ie = new WeakMap(), ne = new WeakMap(), oe = new WeakMap(), se = new WeakMap(), re = new WeakSet(), /**
+kt = new WeakMap(), _ = new WeakMap(), te = new WeakMap(), ee = new WeakMap(), ie = new WeakMap(), ne = new WeakMap(), oe = new WeakMap(), se = new WeakMap(), re = new WeakSet(), /**
  * 设置事件监听器
  */
 hi = function() {
-  r(this, M).on("transformstart", r(this, te)), r(this, M).on("transform", r(this, ee)), r(this, M).on("transformend", r(this, ie)), r(this, M).on("dragstart", r(this, ne)), r(this, M).on("dragmove", r(this, oe)), r(this, M).on("dragend", r(this, se)), r(this, M).on("pointerdblclick", (e) => {
-    const t = r(this, M).nodes();
+  r(this, _).on("transformstart", r(this, te)), r(this, _).on("transform", r(this, ee)), r(this, _).on("transformend", r(this, ie)), r(this, _).on("dragstart", r(this, ne)), r(this, _).on("dragmove", r(this, oe)), r(this, _).on("dragend", r(this, se)), r(this, _).on("pointerdblclick", (e) => {
+    const t = r(this, _).nodes();
     if (t.length === 1) {
       const i = t[0];
       i.fire("pointerdblclick", {
@@ -628,7 +628,7 @@ class Kn extends yt {
       const i = t === "select";
       this.element.listening(i && (this.config.$_listening ?? !0));
     });
-    this.core = t, this.config = Ge(i, this.core.getTheme()), this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, _(this, ae, gi).call(this);
+    this.core = t, this.config = Ge(i, this.core.getTheme()), this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, M(this, ae, gi).call(this);
   }
   getID() {
     return this.config.id;
@@ -709,7 +709,7 @@ class qn extends yt {
         !0
       );
     });
-    this.core = t, this.config = Ke(i, this.core.getTheme()), this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, _(this, nt, xe).call(this), _(this, nt, ui).call(this, this.getElement());
+    this.core = t, this.config = Ke(i, this.core.getTheme()), this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, M(this, nt, xe).call(this), M(this, nt, ui).call(this, this.getElement());
   }
   getID() {
     return this.config.id;
@@ -740,7 +740,7 @@ class qn extends yt {
         ...t
       },
       this.core.getTheme()
-    ), delete this.config.image, this.getElement().setAttrs(this.config), t.$_imageUrl && t.$_imageUrl !== i.$_imageUrl && _(this, nt, xe).call(this);
+    ), delete this.config.image, this.getElement().setAttrs(this.config), t.$_imageUrl && t.$_imageUrl !== i.$_imageUrl && M(this, nt, xe).call(this);
   }
   /**
    * 销毁
@@ -778,11 +778,11 @@ xe = function() {
 ui = function(t) {
   this.core.on("toolType:change", r(this, $t)), t.on("transform", (i) => {
     const o = i.target, s = Math.max(q.MIN_SIZE, o.width() * o.scaleX()), a = Math.max(q.MIN_SIZE, o.height() * o.scaleY());
-    o.scale({ x: 1, y: 1 }), o.width(s), o.height(a), _(this, nt, be).call(this);
+    o.scale({ x: 1, y: 1 }), o.width(s), o.height(a), M(this, nt, be).call(this);
   }), t.on("transformend", () => {
     this.syncConfigFromElement(), r(this, Ft).call(this);
   }), t.on("dragmove", () => {
-    _(this, nt, be).call(this);
+    M(this, nt, be).call(this);
   }), t.on("dragend", () => {
     this.syncConfigFromElement(), r(this, Ft).call(this);
   });
@@ -827,8 +827,8 @@ class jn extends yt {
     f(this, bt);
     this.core = t, this.config = je(i, this.core.getTheme()), this.isDraft = o, this.element = this.createElement(), Ct(this.element, this);
     const s = this.getElement();
-    b(this, J, s.findOne(".rect")), b(this, U, s.findOne(".marker-group")), b(this, lt, r(this, U).findOne("Circle")), b(this, et, r(this, U).findOne("Text")), _(this, Nt, fi).call(this), b(this, xt, () => {
-      _(this, Nt, mi).call(this);
+    b(this, J, s.findOne(".rect")), b(this, U, s.findOne(".marker-group")), b(this, lt, r(this, U).findOne("Circle")), b(this, et, r(this, U).findOne("Text")), M(this, Nt, fi).call(this), b(this, xt, () => {
+      M(this, Nt, mi).call(this);
     }), this.core.on("viewport:scale:change", r(this, xt)), b(this, bt, (a) => {
       const h = a.includes(this.config.id);
       this.setFocusState(h);
@@ -967,7 +967,7 @@ class Jn extends yt {
     });
     this.core = t, this.config = Je(i, this.core.getTheme()), this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, this.htmlElement = document.createElement("div"), this.htmlElement.style.position = "absolute", this.htmlElement.style.pointerEvents = "none", this.htmlElement.innerHTML = this.config.$_htmlContent, this.core.getContainer().appendChild(this.htmlElement), setTimeout(() => {
       r(this, rt).call(this);
-    }), _(this, le, pi).call(this);
+    }), M(this, le, pi).call(this);
   }
   getID() {
     return this.config.id;
@@ -1070,7 +1070,7 @@ class Qn extends yt {
         this.core.on("viewport:change", m), window.addEventListener("click", d), window.addEventListener("touchstart", d);
       });
     });
-    this.core = t, this.config = Qe(i, this.core.getTheme()), this.element = this.createElement(), this.rect = new I.Rect(this.config), Ct(this.element, this), this.isDraft = o, _(this, ce, yi).call(this), setTimeout(() => {
+    this.core = t, this.config = Qe(i, this.core.getTheme()), this.element = this.createElement(), this.rect = new I.Rect(this.config), Ct(this.element, this), this.isDraft = o, M(this, ce, yi).call(this), setTimeout(() => {
       r(this, he).call(this);
     });
   }
@@ -1140,7 +1140,7 @@ class to extends yt {
     C(this, "resizeObserver");
     C(this, "editor");
     C(this, "attachEditor", () => {
-      this.htmlElement.id = "rich-text-html-element", this.htmlElement.style.transition = "none", this.htmlElement.style.opacity = "1", this.element.opacity(0), this.element.listening(!1), this.core._selectNodes(), this.core.isEditingText = !0, this.htmlElement.style.pointerEvents = "auto";
+      this.htmlElement.id = "rich-text-html-element", this.htmlElement.style.transition = "none", this.htmlElement.style.opacity = "1", this.element.opacity(0), this.core._selectNodes(), this.core.isEditingText = !0, this.htmlElement.style.pointerEvents = "auto";
       const t = this.htmlEditorElement.innerHTML;
       this.htmlEditorElement.innerHTML = "";
       const i = new dn({
@@ -1155,7 +1155,7 @@ class to extends yt {
         content: t,
         autofocus: !0
       });
-      i.scaleWhenCreate = this.config.scaleWhenCreate || 1, this.editor = i, this.core._registerTextEditor(i), i.on("focus", () => {
+      i.scaleWhenCreate = this.config.scaleWhenCreate || 1, this.editor = i, this.core._registerTextEditor(i), this.core.getMainLayer().listening(!1), i.on("focus", () => {
         window.addEventListener("click", r(this, Vt));
       }), window.addEventListener("keydown", r(this, Bt));
     });
@@ -1184,7 +1184,7 @@ class to extends yt {
       });
     });
     C(this, "detachEditor", () => {
-      this.editor && (this.htmlElement.id = "", this.htmlEditorElement.innerHTML = this.editor.getHTML(), this.config.$_htmlContent = this.editor.getHTML(), this.editor.commands.blur(), this.htmlElement.style.pointerEvents = "none", this.element.listening(!0), this.core.isEditingText = !1, this.core._unregisterTextEditor(), window.removeEventListener("keydown", r(this, Bt)), window.removeEventListener("click", r(this, Vt)), this.editor.destroy(), this.editor = void 0, r(this, wt).call(this).then(() => {
+      this.editor && (this.htmlElement.id = "", this.htmlEditorElement.innerHTML = this.editor.getHTML(), this.config.$_htmlContent = this.editor.getHTML(), this.editor.commands.blur(), this.htmlElement.style.pointerEvents = "none", this.core.isEditingText = !1, this.core._unregisterTextEditor(), window.removeEventListener("keydown", r(this, Bt)), window.removeEventListener("click", r(this, Vt)), this.editor.destroy(), this.editor = void 0, this.core.getMainLayer().listening(!0), r(this, wt).call(this).then(() => {
         this.htmlElement.style.transition = "opacity 0.1s", this.htmlElement.style.opacity = "0", this.element.opacity(1);
       }).finally(() => {
         this.syncConfigFromElement(), this.core._rebuildStateAfterNodeChange(this, !1);
@@ -1220,7 +1220,7 @@ class to extends yt {
       const i = t.target;
       this.htmlElement.contains(i) || this.detachEditor();
     });
-    this.core = t, this.config = ti(i, this.core.getTheme()), this.config.scaleWhenCreate = this.config.scaleWhenCreate || this.core.getState().viewport.scale || 1, this.config.htmlScale = this.config.htmlScale || 1, this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, this.htmlElement = document.createElement("div"), this.htmlElement.style.position = "absolute", this.htmlElement.style.pointerEvents = "none", this.htmlElement.style.overflowWrap = "break-word", this.htmlElement.style.transformOrigin = "top left", this.htmlElement.style.opacity = "0", this.htmlElement.style.transition = "opacity 0.1s", this.htmlEditorElement = document.createElement("div"), this.htmlEditorElement.style.transformOrigin = "top left", this.htmlEditorElement.style.width = "max-content", this.htmlEditorElement.innerHTML = this.config.$_htmlContent || "", this.htmlElement.appendChild(this.htmlEditorElement), this.core.getStage().content.appendChild(this.htmlElement), r(this, de).call(this), _(this, ge, vi).call(this), setTimeout(() => {
+    this.core = t, this.config = ti(i, this.core.getTheme()), this.config.scaleWhenCreate = this.config.scaleWhenCreate || this.core.getState().viewport.scale || 1, this.config.htmlScale = this.config.htmlScale || 1, this.element = this.createElement(), Ct(this.element, this), this.isDraft = o, this.htmlElement = document.createElement("div"), this.htmlElement.style.position = "absolute", this.htmlElement.style.pointerEvents = "none", this.htmlElement.style.overflowWrap = "break-word", this.htmlElement.style.transformOrigin = "top left", this.htmlElement.style.opacity = "0", this.htmlElement.style.transition = "opacity 0.1s", this.htmlEditorElement = document.createElement("div"), this.htmlEditorElement.style.transformOrigin = "top left", this.htmlEditorElement.style.width = "max-content", this.htmlEditorElement.innerHTML = this.config.$_htmlContent || "", this.htmlElement.appendChild(this.htmlEditorElement), this.core.getStage().content.appendChild(this.htmlElement), r(this, de).call(this), M(this, ge, vi).call(this), setTimeout(() => {
       r(this, ht).call(this), this.htmlElement.style.transform = `scale(${this.core.getState().viewport.scale / this.config.scaleWhenCreate})`, r(this, wt).call(this);
     });
   }
@@ -1309,7 +1309,7 @@ class eo extends yt {
     });
     this.core = t, this.config = qe(i, this.core.getTheme());
     const { group: s, image: a, imgCover: h, playIcon: l } = this.createElement();
-    this.element = s, this.cover = a, this.imgCover = h, this.playIcon = l, this.element = s, Ct(this.element, this), this.isDraft = o, _(this, ft, we).call(this), _(this, ft, Ci).call(this, this.getElement());
+    this.element = s, this.cover = a, this.imgCover = h, this.playIcon = l, this.element = s, Ct(this.element, this), this.isDraft = o, M(this, ft, we).call(this), M(this, ft, Ci).call(this, this.getElement());
   }
   getID() {
     return this.config.id;
@@ -1378,7 +1378,7 @@ class eo extends yt {
     ), this.getElement().setAttrs(this.config), this.cover.setAttrs({
       ...this.config,
       id: `${this.config.id}-image`
-    }), t.$_coverUrl && t.$_coverUrl !== i.$_coverUrl && _(this, ft, we).call(this);
+    }), t.$_coverUrl && t.$_coverUrl !== i.$_coverUrl && M(this, ft, we).call(this);
   }
   /**
    * 销毁
@@ -1466,7 +1466,7 @@ function ni(n, e) {
 const io = (n, e, t) => ({
   ...t,
   $_type: n,
-  id: _t(),
+  id: Mt(),
   x: e.x,
   y: e.y
 });
@@ -1544,7 +1544,7 @@ class so extends zn {
       height: t.clientHeight,
       draggable: !1,
       className: "touch-none"
-    })), b(this, G, new I.Layer()), b(this, Q, new Un(this)), r(this, H).getStage().add(r(this, G)), r(this, G).add(r(this, Q).getTransformer()), this._renderCanvas(s), _(this, O, bi).call(this), _(this, O, wi).call(this);
+    })), b(this, G, new I.Layer()), b(this, Q, new Un(this)), r(this, H).getStage().add(r(this, G)), r(this, G).add(r(this, Q).getTransformer()), this._renderCanvas(s), M(this, O, bi).call(this), M(this, O, wi).call(this);
   }
   /**
    * 获取当前主题
@@ -1664,7 +1664,7 @@ class so extends zn {
     const o = t.map((s) => ii(this, s.$_type, s, !1)).filter((s) => s !== null);
     o.forEach((s) => {
       r(this, G).add(s.getElement());
-    }), _(this, O, Se).call(this, o, i), this._emit("nodes:created", t);
+    }), M(this, O, Se).call(this, o, i), this._emit("nodes:created", t);
   }
   /**
    * 创建图片标注节点（内部使用）
@@ -1676,7 +1676,7 @@ class so extends zn {
       v.$_type === "image-marker" && typeof v.$_markerNumber == "number" && (h = Math.max(h, v.$_markerNumber));
     });
     const l = (i.x - s.x) / s.width, d = (i.y - s.y) / s.height, m = (o.x - s.x) / s.width, u = (o.y - s.y) / s.height, g = Math.min(i.x, o.x), p = Math.min(i.y, o.y), x = Math.abs(o.x - i.x), y = Math.abs(o.y - i.y), N = {
-      id: _t(),
+      id: Mt(),
       $_type: "image-marker",
       x: g,
       y: p,
@@ -1755,7 +1755,7 @@ class so extends zn {
    */
   _finalizeDraftNode() {
     if (!r(this, F)) return;
-    const t = _t(), i = r(this, F).getConfig();
+    const t = Mt(), i = r(this, F).getConfig();
     if (i.$_type === "image-marker") {
       const s = i.$_bounds, a = {
         x: i.x,
@@ -1802,7 +1802,7 @@ class so extends zn {
    */
   _createTextNodeAtDrawingPosition(t) {
     const i = r(this, W)[1], o = {
-      id: _t(),
+      id: Mt(),
       $_type: "text",
       x: i.x,
       y: i.y,
@@ -1888,7 +1888,7 @@ class so extends zn {
     return o.forEach((a) => {
       const h = this.getStage().findOne(`#${a}`);
       h && h.destroy();
-    }), _(this, O, Ei).call(this, Array.from(o), !0), r(this, Q).clearNodes(), this._updateState(
+    }), M(this, O, Ei).call(this, Array.from(o), !0), r(this, Q).clearNodes(), this._updateState(
       {
         selectedNodeIds: []
       },
@@ -1914,7 +1914,7 @@ class so extends zn {
    * 在元素节点改变后（例如 tranfromEnd dragEnd）重建 state.nodes
    */
   _rebuildStateAfterNodeChange(t, i) {
-    _(this, O, Se).call(this, Array.isArray(t) ? t : [t], i);
+    M(this, O, Se).call(this, Array.isArray(t) ? t : [t], i);
   }
   /**
    * 实现父类的状态同步方法
@@ -2005,12 +2005,12 @@ Ee = function(t) {
 Se = function(t, i) {
   t.length !== 0 && (t.forEach((o) => {
     r(this, it).set(o.getID(), o);
-  }), _(this, O, Ee).call(this, i));
+  }), M(this, O, Ee).call(this, i));
 }, Ei = function(t, i = !1) {
   t.length !== 0 && (t.forEach((o) => {
     const s = r(this, it).get(o);
     s && s.destroy(), r(this, it).delete(o);
-  }), _(this, O, Ee).call(this, i));
+  }), M(this, O, Ee).call(this, i));
 };
 class ro extends so {
   /**
@@ -2049,7 +2049,7 @@ class ro extends so {
    */
   createImageNode(e, t) {
     const i = t ?? { x: 100, y: 100 }, o = {
-      id: _t(),
+      id: Mt(),
       $_type: "image",
       x: i.x,
       y: i.y,
@@ -2418,7 +2418,7 @@ const co = Cn(
     }
   }
 );
-function Mt({
+function _t({
   className: n,
   variant: e = "default",
   size: t = "default",
@@ -2457,7 +2457,7 @@ function go({ api: n }) {
   }, h = Math.round(e.scale * 100);
   return /* @__PURE__ */ k("div", { className: "zoom-panel flex items-center gap-2", children: [
     /* @__PURE__ */ c(
-      Mt,
+      _t,
       {
         size: "sm",
         variant: "secondary",
@@ -2467,7 +2467,7 @@ function go({ api: n }) {
       }
     ),
     /* @__PURE__ */ k(
-      Mt,
+      _t,
       {
         size: "sm",
         variant: "secondary",
@@ -2481,7 +2481,7 @@ function go({ api: n }) {
       }
     ),
     /* @__PURE__ */ c(
-      Mt,
+      _t,
       {
         size: "sm",
         variant: "secondary",
@@ -2503,7 +2503,7 @@ function uo({ api: n }) {
     };
   }, [n]), /* @__PURE__ */ k("div", { className: "history-panel flex items-center gap-2", children: [
     /* @__PURE__ */ c(
-      Mt,
+      _t,
       {
         size: "sm",
         variant: "secondary",
@@ -2514,7 +2514,7 @@ function uo({ api: n }) {
       }
     ),
     /* @__PURE__ */ c(
-      Mt,
+      _t,
       {
         size: "sm",
         variant: "secondary",
@@ -2527,7 +2527,7 @@ function uo({ api: n }) {
   ] });
 }
 function fs({ setApi: n, theme: e }) {
-  const t = Me(null), [i, o] = R(null), [s, a] = R({ x: 0, y: 0, scale: 1 });
+  const t = _e(null), [i, o] = R(null), [s, a] = R({ x: 0, y: 0, scale: 1 });
   return V(() => {
     if (!t.current) return;
     const h = new ro(t.current, {
@@ -2689,7 +2689,7 @@ function Ie(n, e = [], t = !1) {
   if (!n || !n.state.selection) return !1;
   const { selection: i } = n.state;
   if (i.empty) return !1;
-  if (i instanceof _n) {
+  if (i instanceof Mn) {
     const o = i.node;
     return o ? e.includes(o.type.name) : !1;
   }
@@ -2704,7 +2704,7 @@ function Ie(n, e = [], t = !1) {
   return !1;
 }
 function dt(n) {
-  const { editor: e } = Mn(), t = pt(
+  const { editor: e } = _n(), t = pt(
     () => n || e,
     [n, e]
   );
@@ -2784,7 +2784,7 @@ function Ti({ children: n, ...e }) {
     }
   ) : /* @__PURE__ */ c(Ne.Provider, { value: t, children: n });
 }
-const _i = $(
+const Mi = $(
   function({ children: e, asChild: t = !1, ...i }, o) {
     const s = Ni(), a = Ye(e) ? parseInt(rn, 10) >= 19 ? (
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -2817,7 +2817,7 @@ const _i = $(
       }
     );
   }
-), Mi = $(
+), _i = $(
   function({ style: e, children: t, portal: i = !0, portalProps: o = {}, ...s }, a) {
     const h = Ni(), l = ri([h.refs.setFloating, a]);
     if (!h.open) return null;
@@ -2838,8 +2838,8 @@ const _i = $(
   }
 );
 Ti.displayName = "Tooltip";
-_i.displayName = "TooltipTrigger";
-Mi.displayName = "TooltipContent";
+Mi.displayName = "TooltipTrigger";
+_i.displayName = "TooltipContent";
 const vo = ({
   shortcuts: n
 }) => n.length === 0 ? null : /* @__PURE__ */ c("div", { children: n.map((e, t) => /* @__PURE__ */ k(hn, { children: [
@@ -2872,7 +2872,7 @@ const vo = ({
       }
     ) : /* @__PURE__ */ k(Ti, { delay: 200, children: [
       /* @__PURE__ */ c(
-        _i,
+        Mi,
         {
           className: tt("tiptap-button", n),
           ref: l,
@@ -2882,7 +2882,7 @@ const vo = ({
           children: e
         }
       ),
-      /* @__PURE__ */ k(Mi, { children: [
+      /* @__PURE__ */ k(_i, { children: [
         t,
         /* @__PURE__ */ c(vo, { shortcuts: d })
       ] })
@@ -3453,7 +3453,7 @@ const Le = $(({ className: n, orientation: e = "vertical", ...t }, i) => /* @__P
   }
 ));
 Le.displayName = "CardItemGroup";
-const _o = $(
+const Mo = $(
   ({ className: n, ...e }, t) => /* @__PURE__ */ c(
     "div",
     {
@@ -3463,8 +3463,8 @@ const _o = $(
     }
   )
 );
-_o.displayName = "CardGroupLabel";
-const Mo = $(
+Mo.displayName = "CardGroupLabel";
+const _o = $(
   ({ className: n, ...e }, t) => /* @__PURE__ */ c(
     "div",
     {
@@ -3474,7 +3474,7 @@ const Mo = $(
     }
   )
 );
-Mo.displayName = "CardFooter";
+_o.displayName = "CardFooter";
 function Io({
   shortcutKeys: n = Te
 }) {
@@ -3760,7 +3760,7 @@ function Ao({
   ]),
   useColorValue: t = !1
 }) {
-  const { handleRemoveHighlight: i } = Be({ editor: n }), o = ye(), s = Me(null), a = pt(
+  const { handleRemoveHighlight: i } = Be({ editor: n }), o = ye(), s = _e(null), a = pt(
     () => [...e, { label: "Remove highlight", value: "none" }],
     [e]
   ), { selectedIndex: h } = Di({
@@ -3867,7 +3867,7 @@ const Ve = ot(({ className: n, ...e }) => /* @__PURE__ */ k("svg", { xmlns: "htt
 ] }));
 Ve.displayName = "PaletteIcon";
 function Lo({
-  shortcutKeys: n = _e
+  shortcutKeys: n = Me
 }) {
   return /* @__PURE__ */ c(pe, { children: fe({ shortcutKeys: n }) });
 }
@@ -3943,7 +3943,7 @@ const Wi = $(
   }
 );
 Wi.displayName = "TextColorButton";
-const _e = "mod+shift+c", Xi = [
+const Me = "mod+shift+c", Xi = [
   {
     label: "Black",
     value: "var(--tt-color-text-black)",
@@ -4048,7 +4048,7 @@ function Pe({
     Bo(a);
   }, [a]);
   return ai(
-    _e,
+    Me,
     (y) => {
       y.preventDefault(), p();
     },
@@ -4064,7 +4064,7 @@ function Pe({
     handleTextColor: p,
     handleRemoveTextColor: x,
     label: t,
-    shortcutKeys: _e,
+    shortcutKeys: Me,
     Icon: Ve
   };
 }
@@ -4097,7 +4097,7 @@ function Oo({
   ]),
   useColorValue: t = !1
 }) {
-  const { handleRemoveTextColor: i } = Pe({ editor: n }), o = ye(), s = Me(null), a = pt(
+  const { handleRemoveTextColor: i } = Pe({ editor: n }), o = ye(), s = _e(null), a = pt(
     () => [...e, { label: "Remove color", value: "none" }],
     [e]
   ), { selectedIndex: h } = Di({

package/dist/maze.d.ts

@@ -478,7 +478,12 @@ export declare function exportMarkedRegion(api: CanvasApi | null | undefined, im
  * @param api
  * @returns
  */
-export declare function exportSelectionAsImage(api: CanvasApi | null | undefined): string | null;
+export declare function exportSelectionAsImage(api: CanvasApi | null | undefined, options?: {
+    pixelRatio?: number;
+    mimeType?: string;
+    quality?: number;
+    padding?: number;
+}): string | null;
 
 declare type HistoryState<T> = {
     past: T[];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.20-alpha.27",
+  "version": "0.0.20-alpha.28",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",