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

package/dist/adapter/maze.js

@@ -1,5 +1,5 @@
-import { v4 as _ } from "uuid";
-import { N as M } from "../const-Das6lRi-.js";
+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();
@@ -17,8 +17,8 @@ function B(t) {
     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, d = s.y || 0, c = s.height || 0;
-        r = Math.min(r, l), i = Math.max(i, d + c);
+        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);
       }
     }), r !== 1 / 0 && i !== -1 / 0)
       return { x: r, y: i };
@@ -29,29 +29,29 @@ function B(t) {
     y: e.y
   };
 }
-async function $(t, o, e, n) {
+async function _(t, o, e, n) {
   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((f) => A(f))), d = [], c = [];
+  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((f, g) => {
-    const { width: y, height: h } = l[g], I = _();
-    d.push({
+  return r.forEach((d, g) => {
+    const { width: h, height: y } = l[g], I = $();
+    f.push({
       id: I,
       $_type: "image",
       x: u,
       y: m,
-      width: y,
-      height: h,
-      $_imageUrl: f
-    }), c.push(I), s === "horizontal" ? u += y + i : m += h + i;
-  }), t.createNodes(d, !0), t.getMainLayer().draw(), a && t.scrollToContent({ scale: !1, nodeIds: c }), c;
+      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;
 }
 async function X(t, o) {
   if (!t) return;
   const e = B(t);
-  return $(t, o, {
+  return _(t, o, {
     x: e.x,
     y: e.y + 20
   });
@@ -63,8 +63,8 @@ function Y(t, o) {
   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, f = u.y || 0, g = u.width || 0, y = u.height || 0;
-      n = Math.min(n, m), r = Math.min(r, f), i = Math.max(i, m + g), a = Math.max(a, f + y);
+      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);
     }
   }), n === 1 / 0 || r === 1 / 0 || i === -1 / 0 || a === -1 / 0)
     return;
@@ -73,30 +73,33 @@ function Y(t, o) {
     y: r,
     width: i - n,
     height: a - r
-  }, d = {
-    id: _(),
-    $_type: "image",
+  }, f = {
+    id: $(),
+    $_type: "html",
     x: l.x,
     y: l.y,
     width: l.width,
     height: l.height,
-    $_imageUrl: o
+    $_imageUrl: o,
     // 示例 loading 图片 URL
+    $_htmlContent: `
+      <img alt="loading" src="${o}" style="width: 100%; height: 100%; object-fit: contain;" />
+    `
   };
-  return t.createNodes([d], !0), t.scrollToContent({ scale: !1, nodeIds: [d.id] }), d.id;
+  return t.createNodes([f], !0), f.id;
 }
 function E(t, o, e) {
   if (!t) return;
   const n = t.getCanvasNodeById(o);
   if (!n) return;
   const r = n.getConfig();
-  if (r.$_type !== "image") return;
+  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]);
+  _(t, i, { x: a, y: s }), t.deleteNodes([o]);
 }
-async function T(t, o) {
+async function H(t, o) {
   if (!t) return null;
   const e = t.getCanvasNodeById(o);
   if (!e) return null;
@@ -109,15 +112,15 @@ async function T(t, o) {
   if (!i) return null;
   const a = i.getConfig();
   if (a.$_type !== "image" || !a.$_imageUrl) return null;
-  const { start: s, end: l } = n.$_relativeBox, d = s.ratioX, c = s.ratioY, u = l.ratioX - s.ratioX, m = l.ratioY - s.ratioY;
-  return new Promise((f) => {
+  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 g = new Image();
     g.crossOrigin = "anonymous", g.onload = () => {
-      const y = g.naturalWidth, h = g.naturalHeight, I = d * y, v = c * h, w = u * y, C = m * h, x = document.createElement("canvas");
+      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");
       if (!N) {
-        f(null);
+        d(null);
         return;
       }
       N.drawImage(
@@ -132,13 +135,13 @@ async function T(t, o) {
         C
       );
       const p = x.toDataURL("image/png");
-      f(p);
+      d(p);
     }, g.onerror = () => {
-      console.error("Failed to load image:", a.$_imageUrl), f(null);
+      console.error("Failed to load image:", a.$_imageUrl), d(null);
     }, g.src = a.$_imageUrl;
   });
 }
-function H(t) {
+function R(t) {
   if (!t) return null;
   const o = t.getState().selectedNodeIds || [];
   if (o.length === 0) return null;
@@ -152,10 +155,10 @@ function H(t) {
 }
 export {
   B as calculateBottomLeftOfCanvasContent,
-  T as cropImageBaseOnImageMarker,
-  H as exportSelectionAsImage,
+  H as cropImageBaseOnImageMarker,
+  R as exportSelectionAsImage,
   X as insertImageBesideContent,
-  $ as insertImagesAtPosition,
+  _ as insertImagesAtPosition,
   Y as insertLoadingImageBesideSelection,
   E as replaceLoadingImageNode
 };

package/dist/{const-Das6lRi-.js → const-CpLk0Av6.js}

@@ -3,15 +3,16 @@ const i = {
   selectable: "selectable_intrinsic",
   rect: "rect_intrinsic",
   image: "image_intrinsic",
-  imageMarker: "image_marker_intrinsic"
-}, e = {
+  imageMarker: "image_marker_intrinsic",
+  html: "html_intrinsic"
+}, t = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
-}, n = {
+}, e = {
   MIN_SIZE: 10
 };
 export {
-  n as I,
+  e as I,
   i as N,
-  e as R
+  t as R
 };

package/dist/index.d.ts

@@ -407,6 +407,7 @@ export declare const NODE_NAMES: {
     rect: string;
     image: string;
     imageMarker: string;
+    html: string;
 };
 
 declare interface NodeStyle {
@@ -414,7 +415,7 @@ declare interface NodeStyle {
     $_fillColor: "theme.fill-color.1" | "theme.fill-color.2" | "theme.fill-color.3";
 }
 
-export declare type NodeType = "rectangle" | "image" | "image-marker";
+export declare type NodeType = "rectangle" | "image" | "image-marker" | "html";
 
 declare type StageConfig = {
     container: HTMLDivElement;