@8btc/whiteboard 0.0.19-beta.2 → 0.0.19-beta.4

package/dist/adapter/maze.js

@@ -1,164 +1,173 @@
-import { v4 as $ } from "uuid";
+import { v4 as _ } from "uuid";
 import { N as M } from "../const-CpLk0Av6.js";
-async function A(t) {
-  return new Promise((o, e) => {
-    const n = new Image();
-    n.onload = () => {
-      o({ width: n.naturalWidth, height: n.naturalHeight });
-    }, n.onerror = () => {
-      e(new Error(`Failed to load image: ${t}`));
-    }, n.src = t;
+async function S(t) {
+  return new Promise((o, n) => {
+    const e = new Image();
+    e.onload = () => {
+      o({ width: e.naturalWidth, height: e.naturalHeight });
+    }, e.onerror = () => {
+      n(new Error(`Failed to load image: ${t}`));
+    }, e.src = t;
   });
 }
-function B(t) {
+function A(t) {
   if (!t) return { x: 0, y: 0 };
   if ((t.getState().nodes || []).length > 0) {
-    const n = t.getMainLayer();
-    let r = 1 / 0, i = -1 / 0;
-    if (n.children.forEach((a) => {
-      if (a.visible() && a.getClassName() !== "Transformer" && a.hasName(M.selectable)) {
-        const s = a.getAttrs(), l = s.x || 0, f = s.y || 0, c = s.height || 0;
-        r = Math.min(r, l), i = Math.max(i, f + c);
+    const e = t.getMainLayer();
+    let i = 1 / 0, r = -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, f = a.height || 0;
+        i = Math.min(i, c), r = Math.max(r, d + f);
       }
-    }), r !== 1 / 0 && i !== -1 / 0)
-      return { x: r, y: i };
+    }), i !== 1 / 0 && r !== -1 / 0)
+      return { x: i, y: r };
   }
-  const e = t.getState().viewport;
+  const n = t.getState().viewport;
   return {
-    x: e.x,
-    y: e.y
+    x: n.x,
+    y: n.y
   };
 }
-async function _(t, o, e, n) {
+async function p(t, o, n, e) {
   if (!t) return;
-  const r = Array.isArray(o) ? o : [o];
-  if (r.length === 0) return;
-  const i = n?.spacing ?? 20, a = n?.scrollToView ?? !0, s = n?.direction ?? "vertical", l = await Promise.all(r.map((d) => A(d))), f = [], c = [];
-  let u = e.x, m = e.y;
-  return r.forEach((d, g) => {
-    const { width: h, height: y } = l[g], I = $();
-    f.push({
+  const i = Array.isArray(o) ? o : [o];
+  if (i.length === 0) return;
+  const r = e?.spacing ?? 20, s = e?.scrollToView ?? !0, a = e?.direction ?? "horizontal", c = e?.reuseExisting ?? !0, d = /* @__PURE__ */ new Map();
+  c && (t.getState().nodes || []).forEach((y) => {
+    y.$_type === "image" && y.$_imageUrl && d.set(y.$_imageUrl, y.id);
+  });
+  const f = await Promise.all(i.map((l) => S(l))), u = [], m = [];
+  let h = n.x, g = n.y;
+  return i.forEach((l, y) => {
+    if (c && d.has(l)) {
+      const x = d.get(l);
+      m.push(x);
+      return;
+    }
+    const { width: w, height: $ } = f[y], I = _();
+    u.push({
       id: I,
       $_type: "image",
-      x: u,
-      y: m,
-      width: h,
-      height: y,
-      $_imageUrl: d
-    }), c.push(I), s === "horizontal" ? u += h + i : m += y + i;
-  }), t.createNodes(f, !0), t.getMainLayer().draw(), a && t.scrollToContent({ scale: !1, nodeIds: c }), c;
+      x: h,
+      y: g,
+      width: w,
+      height: $,
+      $_imageUrl: l
+    }), m.push(I), a === "horizontal" ? h += w + r : g += $ + r;
+  }), u.length > 0 && t.createNodes(u, !0), s && t.scrollToContent({ scale: !1, nodeIds: m }), m;
 }
-async function X(t, o) {
+async function L(t, o) {
   if (!t) return;
-  const e = B(t);
-  return _(t, o, {
-    x: e.x,
-    y: e.y + 20
+  const n = A(t);
+  return p(t, o, {
+    x: n.x,
+    y: n.y + 20
   });
 }
-function Y(t, o) {
+function X(t, o) {
   if (!t) return;
-  const e = t.getState().selectedNodeIds || [];
-  if (e.length === 0) return;
-  let n = 1 / 0, r = 1 / 0, i = -1 / 0, a = -1 / 0;
-  if (t.getMainLayer().children.forEach((c) => {
-    if (c.visible() && c.getClassName() !== "Transformer" && e.includes(c.id())) {
-      const u = c.getAttrs(), m = u.x || 0, d = u.y || 0, g = u.width || 0, h = u.height || 0;
-      n = Math.min(n, m), r = Math.min(r, d), i = Math.max(i, m + g), a = Math.max(a, d + h);
+  const n = t.getState().selectedNodeIds || [];
+  if (n.length === 0) return;
+  let e = 1 / 0, i = 1 / 0, r = -1 / 0, s = -1 / 0;
+  if (t.getMainLayer().children.forEach((f) => {
+    if (f.visible() && f.getClassName() !== "Transformer" && n.includes(f.id())) {
+      const u = f.getAttrs(), m = u.x || 0, h = u.y || 0, g = u.width || 0, l = u.height || 0;
+      e = Math.min(e, m), i = Math.min(i, h), r = Math.max(r, m + g), s = Math.max(s, h + l);
     }
-  }), n === 1 / 0 || r === 1 / 0 || i === -1 / 0 || a === -1 / 0)
+  }), e === 1 / 0 || i === 1 / 0 || r === -1 / 0 || s === -1 / 0)
     return;
-  const l = {
-    x: i + 20,
-    y: r,
-    width: i - n,
-    height: a - r
-  }, f = {
-    id: $(),
+  const c = {
+    x: r + 20,
+    y: i,
+    width: r - e,
+    height: s - i
+  }, d = {
+    id: _(),
     $_type: "html",
-    x: l.x,
-    y: l.y,
-    width: l.width,
-    height: l.height,
+    x: c.x,
+    y: c.y,
+    width: c.width,
+    height: c.height,
     $_imageUrl: o,
     // 示例 loading 图片 URL
     $_htmlContent: `
       <img alt="loading" src="${o}" style="width: 100%; height: 100%; object-fit: contain;" />
     `
   };
-  return t.createNodes([f], !0), f.id;
+  return t.createNodes([d], !0), d.id;
 }
-function E(t, o, e) {
+function Y(t, o, n) {
   if (!t) return;
-  const n = t.getCanvasNodeById(o);
-  if (!n) return;
-  const r = n.getConfig();
-  if (r.$_type !== "html") return;
-  const i = Array.isArray(e) ? e : [e];
-  if (i.length === 0) return;
-  const a = r.x, s = r.y;
-  _(t, i, { x: a, y: s }), t.deleteNodes([o]);
+  const e = t.getCanvasNodeById(o);
+  if (!e) return;
+  const i = e.getConfig();
+  if (i.$_type !== "html") return;
+  const r = Array.isArray(n) ? n : [n];
+  if (r.length === 0) return;
+  const s = i.x, a = i.y;
+  p(t, r, { x: s, y: a }), t.deleteNodes([o]);
 }
-async function H(t, o) {
+async function R(t, o) {
   if (!t) return null;
-  const e = t.getCanvasNodeById(o);
-  if (!e) return null;
-  const n = e.getConfig();
-  if (n.$_type !== "image-marker" || !n.$_relativeBox)
+  const n = t.getCanvasNodeById(o);
+  if (!n) return null;
+  const e = n.getConfig();
+  if (e.$_type !== "image-marker" || !e.$_relativeBox)
     return null;
-  const r = n.$_parentId;
-  if (!r) return null;
-  const i = t.getCanvasNodeById(r);
+  const i = e.$_parentId;
   if (!i) return null;
-  const a = i.getConfig();
-  if (a.$_type !== "image" || !a.$_imageUrl) return null;
-  const { start: s, end: l } = n.$_relativeBox, f = s.ratioX, c = s.ratioY, u = l.ratioX - s.ratioX, m = l.ratioY - s.ratioY;
-  return new Promise((d) => {
+  const r = t.getCanvasNodeById(i);
+  if (!r) return null;
+  const s = r.getConfig();
+  if (s.$_type !== "image" || !s.$_imageUrl) return null;
+  const { start: a, end: c } = e.$_relativeBox, d = a.ratioX, f = a.ratioY, u = c.ratioX - a.ratioX, m = c.ratioY - a.ratioY;
+  return new Promise((h) => {
     const g = new Image();
     g.crossOrigin = "anonymous", g.onload = () => {
-      const h = g.naturalWidth, y = g.naturalHeight, I = f * h, v = c * y, w = u * h, C = m * y, x = document.createElement("canvas");
-      x.width = w, x.height = C;
-      const N = x.getContext("2d");
+      const l = g.naturalWidth, y = g.naturalHeight, w = d * l, $ = f * y, I = u * l, x = m * y, C = document.createElement("canvas");
+      C.width = I, C.height = x;
+      const N = C.getContext("2d");
       if (!N) {
-        d(null);
+        h(null);
         return;
       }
       N.drawImage(
         g,
-        I,
-        v,
         w,
-        C,
+        $,
+        I,
+        x,
         0,
         0,
-        w,
-        C
+        I,
+        x
       );
-      const p = x.toDataURL("image/png");
-      d(p);
+      const v = C.toDataURL("image/png");
+      h(v);
     }, g.onerror = () => {
-      console.error("Failed to load image:", a.$_imageUrl), d(null);
-    }, g.src = a.$_imageUrl;
+      console.error("Failed to load image:", s.$_imageUrl), h(null);
+    }, g.src = s.$_imageUrl;
   });
 }
-function R(t) {
+function H(t) {
   if (!t) return null;
   const o = t.getState().selectedNodeIds || [];
   if (o.length === 0) return null;
   if (o.length === 1) {
-    const e = t.getCanvasNodeById(o[0]);
-    if (!e) return null;
-    if (e.getConfig().$_type === "image")
-      return e.getConfig().$_imageUrl || null;
+    const n = t.getCanvasNodeById(o[0]);
+    if (!n) return null;
+    if (n.getConfig().$_type === "image")
+      return n.getConfig().$_imageUrl || null;
   }
   return t.exportSelectionAsImage();
 }
 export {
-  B as calculateBottomLeftOfCanvasContent,
-  H as cropImageBaseOnImageMarker,
-  R as exportSelectionAsImage,
-  X as insertImageBesideContent,
-  _ as insertImagesAtPosition,
-  Y as insertLoadingImageBesideSelection,
-  E as replaceLoadingImageNode
+  A as calculateBottomLeftOfCanvasContent,
+  R as exportMarkedRegion,
+  H as exportSelectionAsImage,
+  L as insertImageBesideContent,
+  p as insertImagesAtPosition,
+  X as insertLoadingImageBesideSelection,
+  Y as replaceLoadingImageNode
 };

package/dist/index.d.ts

@@ -411,8 +411,8 @@ export declare const NODE_NAMES: {
 };
 
 declare interface NodeStyle {
-    $_strokeColor: "theme.stroke-color.1" | "theme.stroke-color.2" | "theme.stroke-color.3";
-    $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
+    $_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
+    $_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
 }
 
 export declare type NodeType = "rectangle" | "image" | "image-marker" | "html";
@@ -454,6 +454,8 @@ export declare interface Theme {
     "theme.fill-color.3": string;
 }
 
+declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
+
 export declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
 
 declare type TransformerConfig = {

package/dist/index.js

@@ -307,12 +307,12 @@ ct = new WeakMap(), S = new WeakMap(), bt = new WeakMap(), It = new WeakMap(), C
 ae = function() {
   e(this, S).on("transformstart", e(this, bt)), e(this, S).on("transform", e(this, It)), e(this, S).on("transformend", e(this, Ct)), e(this, S).on("dragstart", e(this, kt)), e(this, S).on("dragmove", e(this, $t)), e(this, S).on("dragend", e(this, Tt));
 };
-var T, R, X, D;
+var $, R, X, D;
 class ze {
   // todo: 优化 selectedNodeIds 的存储和查询性能
   // private _selectedNodeIds: Set<string> = new Set();
   constructor(i) {
-    l(this, T, []);
+    l(this, $, []);
     l(this, R);
     l(this, X, []);
     l(this, D);
@@ -329,7 +329,7 @@ class ze {
    */
   getHistory() {
     return {
-      past: [...e(this, T)],
+      past: [...e(this, $)],
       present: { ...e(this, R) },
       future: [...e(this, X)]
     };
@@ -338,7 +338,7 @@ class ze {
    * 是否可以撤销
    */
   canUndo() {
-    return e(this, T).length > 0;
+    return e(this, $).length > 0;
   }
   /**
    * 是否可以重做
@@ -369,9 +369,9 @@ class ze {
    * 撤销操作
    */
   undo() {
-    if (e(this, T).length === 0) return;
-    const i = e(this, T)[e(this, T).length - 1], t = e(this, T).slice(0, e(this, T).length - 1);
-    d(this, T, t), d(this, X, [e(this, R), ...e(this, X)]), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:undo", i), e(this, D).emit("state:change", i);
+    if (e(this, $).length === 0) return;
+    const i = e(this, $)[e(this, $).length - 1], t = e(this, $).slice(0, e(this, $).length - 1);
+    d(this, $, t), d(this, X, [e(this, R), ...e(this, X)]), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:undo", i), e(this, D).emit("state:change", i);
   }
   /**
    * 重做操作
@@ -379,13 +379,13 @@ class ze {
   redo() {
     if (e(this, X).length === 0) return;
     const i = e(this, X)[0], t = e(this, X).slice(1);
-    d(this, T, [...e(this, T), e(this, R)]), d(this, X, t), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:redo", i), e(this, D).emit("state:change", i);
+    d(this, $, [...e(this, $), e(this, R)]), d(this, X, t), d(this, R, i), this._renderCanvas(i), e(this, D).emit("state:redo", i), e(this, D).emit("state:change", i);
   }
   /**
    * 重置历史记录
    */
   resetHistory() {
-    d(this, T, []), d(this, X, []), e(this, D).emit("state:reset", e(this, R)), e(this, D).emit("state:change", e(this, R));
+    d(this, $, []), d(this, X, []), e(this, D).emit("state:reset", e(this, R)), e(this, D).emit("state:change", e(this, R));
   }
   /**
    * 更新状态
@@ -394,7 +394,7 @@ class ze {
    */
   _updateState(i, t) {
     const s = { ...e(this, R), ...i };
-    t && (d(this, T, [...e(this, T), e(this, R)]), d(this, X, [])), d(this, R, s), e(this, D).emit("state:change", s);
+    t && (d(this, $, [...e(this, $), e(this, R)]), d(this, X, [])), d(this, R, s), e(this, D).emit("state:change", s);
   }
   /**
    * 清理资源
@@ -403,7 +403,7 @@ class ze {
     e(this, D).all.clear();
   }
 }
-T = new WeakMap(), R = new WeakMap(), X = new WeakMap(), D = new WeakMap();
+$ = new WeakMap(), R = new WeakMap(), X = new WeakMap(), D = new WeakMap();
 class Ot {
 }
 const Xe = {
@@ -434,7 +434,7 @@ function Yt(r, i) {
     if (n in r) {
       const o = r[n];
       let a = o;
-      o.startsWith("theme.") && (a = i[o]), a && (t[s] = a);
+      o.startsWith("theme.") && o in i && (a = i[o]), a && (t[s] = a);
     }
   }), t;
 }
@@ -683,7 +683,7 @@ Ht = function() {
   c.forEach((m) => {
     const f = g.find((u) => u.id === m.id());
     if (f?.$_type === "image-marker" && f.$_relativeBox) {
-      const { start: u, end: w } = f.$_relativeBox, v = n + u.ratioX * a, b = o + u.ratioY * h, M = n + w.ratioX * a, $ = o + w.ratioY * h, zt = Math.min(v, M), Ft = Math.min(b, $), G = Math.abs(M - v), ot = Math.abs($ - b);
+      const { start: u, end: w } = f.$_relativeBox, v = n + u.ratioX * a, b = o + u.ratioY * h, M = n + w.ratioX * a, T = o + w.ratioY * h, zt = Math.min(v, M), Ft = Math.min(b, T), G = Math.abs(M - v), ot = Math.abs(T - b);
       m.setAttrs({
         x: zt,
         y: Ft,
@@ -1126,8 +1126,8 @@ const at = class at extends ze {
   createImageMarkerNode(t, s, n, o) {
     const a = this.getState().nodes || [];
     let h = 0;
-    a.forEach(($) => {
-      $.$_type === "image-marker" && typeof $.$_markerNumber == "number" && (h = Math.max(h, $.$_markerNumber));
+    a.forEach((T) => {
+      T.$_type === "image-marker" && typeof T.$_markerNumber == "number" && (h = Math.max(h, T.$_markerNumber));
     });
     const c = (s.x - o.x) / o.width, g = (s.y - o.y) / o.height, m = (n.x - o.x) / o.width, f = (n.y - o.y) / o.height, u = Math.min(s.x, n.x), w = Math.min(s.y, n.y), v = Math.abs(n.x - s.x), b = Math.abs(n.y - s.y), M = {
       id: yt(),
@@ -1212,8 +1212,8 @@ const at = class at extends ze {
         y: s.y + (s.height || 0)
       }, [c, g] = Ut(a, h), m = this.getState().nodes || [];
       let f = 0;
-      m.forEach(($) => {
-        $.$_type === "image-marker" && $.$_parentId === s.$_parentId && typeof $.$_markerNumber == "number" && (f = Math.max(f, $.$_markerNumber));
+      m.forEach((T) => {
+        T.$_type === "image-marker" && typeof T.$_markerNumber == "number" && (f = Math.max(f, T.$_markerNumber));
       });
       const u = (c.x - o.x) / o.width, w = (c.y - o.y) / o.height, v = (g.x - o.x) / o.width, b = (g.y - o.y) / o.height, M = {
         ...s,
@@ -1404,14 +1404,14 @@ Vt = function(t) {
  * 更新 state.nodes
  */
 Lt = function(t, s) {
-  t.forEach((n) => {
+  t.length !== 0 && (t.forEach((n) => {
     e(this, B).set(n.getID(), n);
-  }), t.length !== 0 && _(this, Y, Vt).call(this, s);
+  }), _(this, Y, Vt).call(this, s));
 }, fe = function(t, s = !1) {
-  t.forEach((n) => {
+  t.length !== 0 && (t.forEach((n) => {
     const o = e(this, B).get(n);
     o && o.destroy(), e(this, B).delete(n);
-  }), t.length !== 0 && _(this, Y, Vt).call(this, s);
+  }), _(this, Y, Vt).call(this, s));
 }, /** 全局注册的主题 */
 l(at, ut, null);
 let Wt = at;
@@ -1609,13 +1609,13 @@ class qe extends Wt {
           a = Math.min(a, Kt), h = Math.min(h, qt), c = Math.max(c, Kt + pe), g = Math.max(g, qt + ye);
       }
     }), a === 1 / 0 || h === 1 / 0) return;
-    const b = c - a, M = g - h, $ = a + b / 2, zt = h + M / 2;
+    const b = c - a, M = g - h, T = a + b / 2, zt = h + M / 2;
     let G = this.getState().viewport.scale;
     if (n) {
       const z = (this.getStage().width() - s * 2) / b, Q = (this.getStage().height() - s * 2) / M;
       G = Math.min(z, Q, 1);
     }
-    const ot = this.getStage().width() / 2 - $ * G, Gt = this.getStage().height() / 2 - zt * G;
+    const ot = this.getStage().width() / 2 - T * G, Gt = this.getStage().height() / 2 - zt * G;
     this.updateViewport({ x: ot, y: Gt, scale: G }, !0);
   }
   /**
@@ -1674,7 +1674,7 @@ function Je({
       "aria-hidden": "true",
       children: [
         /* @__PURE__ */ E("defs", { children: oe.map(({ min: c, mid: g, step: m }, f) => {
-          const u = m * s * h, w = 0.5 + o * h, v = 0.5 + a * h, b = w > 0 ? w % u : u + w % u, M = v > 0 ? v % u : u + v % u, $ = h < g ? je(h, [c, g], [0, 1]) : 1;
+          const u = m * s * h, w = 0.5 + o * h, v = 0.5 + a * h, b = w > 0 ? w % u : u + w % u, M = v > 0 ? v % u : u + v % u, T = h < g ? je(h, [c, g], [0, 1]) : 1;
           return /* @__PURE__ */ E(
             "pattern",
             {
@@ -1689,7 +1689,7 @@ function Je({
                   cx: b,
                   cy: M,
                   r: 1,
-                  opacity: $
+                  opacity: T
                 }
               )
             },

package/dist/maze.d.ts

@@ -365,7 +365,7 @@ declare interface CommonNodeConfig<T = NodeType> extends Partial<NodeStyle> {
  * @param imageMarkerNodeId 图片标注节点 ID
  * @returns Promise<string | null> 裁剪后的图片 base64 字符串，失败返回 null
  */
-export declare function cropImageBaseOnImageMarker(api: CanvasApi | null | undefined, imageMarkerNodeId: string): Promise<string | null>;
+export declare function exportMarkedRegion(api: CanvasApi | null | undefined, imageMarkerNodeId: string): Promise<string | null>;
 
 /**
  * 导出当前选中节点为图片
@@ -443,6 +443,7 @@ export declare function insertImagesAtPosition(api: CanvasApi | null | undefined
     spacing?: number;
     scrollToView?: boolean;
     direction?: "horizontal" | "vertical";
+    reuseExisting?: boolean;
 }): Promise<string[] | undefined>;
 
 /**
@@ -460,8 +461,8 @@ declare interface IViewport {
 }
 
 declare interface NodeStyle {
-    $_strokeColor: "theme.stroke-color.1" | "theme.stroke-color.2" | "theme.stroke-color.3";
-    $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
+    $_strokeColor: ThemeKeysStartingWith<"theme.stroke-color."> | string;
+    $_fillColor: ThemeKeysStartingWith<"theme.fill-color."> | string;
 }
 
 declare type NodeType = "rectangle" | "image" | "image-marker" | "html";
@@ -505,6 +506,8 @@ declare interface Theme {
     "theme.fill-color.3": string;
 }
 
+declare type ThemeKeysStartingWith<Prefix extends string> = Extract<keyof Theme, `${Prefix}${string}`>;
+
 declare type ToolType = "select" | "hand" | "rectangle" | "image-marker";
 
 declare type TransformerConfig = {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@8btc/whiteboard",
   "private": false,
-  "version": "0.0.19-beta.2",
+  "version": "0.0.19-beta.4",
   "type": "module",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.js",