@8btc/whiteboard 0.0.20-alpha.39 → 0.0.20-alpha.40

package/dist/adapter/maze.d.ts

@@ -2,6 +2,36 @@ export * from '../app/adapter/maze'
 export {}
 
 
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        fontSize: {
+            setFontSize: (size: string) => ReturnType;
+            unsetFontSize: () => ReturnType;
+        };
+    }
+}
+
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        lineHeight: {
+            setLineHeight: (lineHeight: string) => ReturnType;
+            unsetLineHeight: () => ReturnType;
+        };
+    }
+}
+
+
+declare module "@tiptap/core" {
+    interface Commands<ReturnType> {
+        letterSpacing: {
+            setLetterSpacing: (spacing: string) => ReturnType;
+            unsetLetterSpacing: () => ReturnType;
+        };
+    }
+}
+
+
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         nodeBackground: {

package/dist/adapter/maze.js

@@ -1,12 +1,12 @@
-import { v4 as _ } from "uuid";
-import { N as M } from "../const-YEx1e3IJ.js";
+import { v4 as w } from "uuid";
+import { N as B } from "../const-B6DtCQRi.js";
 async function N(t) {
-  return new Promise((r, n) => {
+  return new Promise((n, o) => {
     const e = new Image();
     e.onload = () => {
-      r({ width: e.naturalWidth, height: e.naturalHeight });
+      n({ width: e.naturalWidth, height: e.naturalHeight });
     }, e.onerror = () => {
-      n(new Error(`Failed to load image: ${t}`));
+      o(new Error(`Failed to load image: ${t}`));
     }, e.src = t;
   });
 }
@@ -14,198 +14,289 @@ function v(t) {
   if (!t) return { x: 0, y: 0 };
   if ((t.getState().nodes || []).length > 0) {
     const e = t.getMainLayer();
-    let i = 1 / 0, o = -1 / 0;
+    let r = 1 / 0, i = -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;
-        i = Math.min(i, c), o = Math.max(o, d + l);
+      if (s.visible() && s.getClassName() !== "Transformer" && s.hasName(B.selectable)) {
+        const l = s.getAttrs(), a = l.x || 0, d = l.y || 0, c = l.height || 0;
+        r = Math.min(r, a), i = Math.max(i, d + c);
       }
-    }), i !== 1 / 0 && o !== -1 / 0)
-      return { x: i, y: o };
+    }), r !== 1 / 0 && i !== -1 / 0)
+      return { x: r, y: i };
   }
-  const n = t.getState().viewport;
+  const o = t.getState().viewport;
   return {
-    x: n.x,
-    y: n.y
+    x: o.x,
+    y: o.y
   };
 }
-async function E(t, r, n, e) {
+async function S(t, n, o, e) {
   if (!t) return;
-  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) => {
+  const r = Array.isArray(n) ? n : [n];
+  if (r.length === 0) return;
+  const i = e?.spacing ?? 20, s = e?.scrollToView ?? !0, l = e?.direction ?? "horizontal", a = e?.reuseExisting ?? !0, d = /* @__PURE__ */ new Map();
+  a && (t.getState().nodes || []).forEach((m) => {
     m.$_type === "image" && m.$_imageUrl && d.set(m.$_imageUrl, m.id);
   });
-  const l = await Promise.all(i.map((f) => N(f))), h = [], u = [];
-  let g = n.x, y = n.y;
-  return i.forEach((f, m) => {
-    if (c && d.has(f)) {
-      const w = d.get(f);
-      u.push(w);
+  const c = await Promise.all(r.map((f) => N(f))), h = [], g = [];
+  let u = o.x, y = o.y;
+  return r.forEach((f, m) => {
+    if (a && d.has(f)) {
+      const _ = d.get(f);
+      g.push(_);
       return;
     }
-    const { width: $, height: x } = l[m], I = _();
+    const { width: x, height: $ } = c[m], I = w();
     h.push({
       id: I,
       $_type: "image",
-      x: g,
+      x: u,
       y,
-      width: $,
-      height: x,
+      width: x,
+      height: $,
       $_imageUrl: f
-    }), 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;
+    }), g.push(I), l === "horizontal" ? u += x + i : y += $ + i;
+  }), h.length > 0 && t.createNodes(h, !0), s && t.scrollToContent({ scale: !1, nodeIds: g }), g;
 }
-async function B(t, r) {
+async function H(t, n) {
   if (!t) return;
-  const n = v(t);
-  return E(t, r, {
-    x: n.x,
-    y: n.y + 20
+  const o = v(t);
+  return S(t, n, {
+    x: o.x,
+    y: o.y + 20
   });
 }
-function L(t, r) {
+function L(t, n) {
   if (!t) return;
-  const n = t.getState().selectedNodeIds || [];
-  if (n.length === 0) return;
-  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), i = Math.min(i, g), o = Math.max(o, u + y), s = Math.max(s, g + f);
+  const o = t.getState().selectedNodeIds || [];
+  if (o.length === 0) return;
+  let e = 1 / 0, r = 1 / 0, i = -1 / 0, s = -1 / 0;
+  if (t.getMainLayer().children.forEach((c) => {
+    if (c.visible() && c.getClassName() !== "Transformer" && o.includes(c.id())) {
+      const h = c.getAttrs(), g = h.x || 0, u = h.y || 0, y = h.width || 0, f = h.height || 0;
+      e = Math.min(e, g), r = Math.min(r, u), i = Math.max(i, g + y), s = Math.max(s, u + f);
     }
-  }), e === 1 / 0 || i === 1 / 0 || o === -1 / 0 || s === -1 / 0)
+  }), e === 1 / 0 || r === 1 / 0 || i === -1 / 0 || s === -1 / 0)
     return;
-  const c = {
-    x: o + 20,
-    y: i,
-    width: o - e,
-    height: s - i
+  const a = {
+    x: i + 20,
+    y: r,
+    width: i - e,
+    height: s - r
   }, d = {
-    id: _(),
+    id: w(),
     $_type: "html",
     $_actualType: "loading",
-    x: c.x,
-    y: c.y,
-    width: c.width,
-    height: c.height,
-    $_imageUrl: r,
+    x: a.x,
+    y: a.y,
+    width: a.width,
+    height: a.height,
+    $_imageUrl: n,
     // 示例 loading 图片 URL
     $_htmlContent: `
-      <img alt="loading" src="${r}" style="width: 100%; height: 100%; object-fit: contain;" />
+      <img alt="loading" src="${n}" style="width: 100%; height: 100%; object-fit: contain;" />
     `
   };
   return t.createNodes([d], !0), d.id;
 }
-function X(t, r, n) {
+function R(t, n, o) {
   if (!t) return;
-  const e = t.getCanvasNodeById(r);
+  const e = t.getCanvasNodeById(n);
   if (!e) return;
-  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]);
+  const r = e.getConfig();
+  if (r.$_type !== "html") return;
+  const i = Array.isArray(o) ? o : [o];
+  if (i.length === 0) return;
+  const s = r.x, l = r.y;
+  S(t, i, { x: s, y: l }, { scrollToView: !1 }), t.deleteNodes([n]);
 }
-async function p(t, r, n, e, i) {
+async function T(t, n, o, e, r) {
   if (!t) return;
-  const o = i?.scrollToView ?? !0;
-  if (i?.reuseExisting ?? !0) {
+  const i = r?.scrollToView ?? !0;
+  if (r?.reuseExisting ?? !0) {
     const d = t.getState().nodes || [];
-    for (const l of d)
-      if (l.$_type === "video" && l.$_videoUrl === r)
-        return o && t.scrollToContent({ scale: !1, nodeIds: [l.id] }), l.id;
+    for (const c of d)
+      if (c.$_type === "video" && c.$_videoUrl === n)
+        return i && t.scrollToContent({ scale: !1, nodeIds: [c.id] }), c.id;
   }
-  let a = { width: 320, height: 180 };
+  let l = { width: 320, height: 180 };
   try {
-    a = await N(n);
+    l = await N(o);
   } catch (d) {
     console.warn("Failed to load cover image, using default size:", d);
   }
-  const c = {
-    id: _(),
+  const a = {
+    id: w(),
     $_type: "video",
     x: e.x,
     y: e.y,
-    width: a.width,
+    width: l.width,
     // 使用封面图片的宽度
-    height: a.height,
+    height: l.height,
     // 使用封面图片的高度
-    $_videoUrl: r,
-    $_coverUrl: n
+    $_videoUrl: n,
+    $_coverUrl: o
   };
-  return t.createNodes([c], !0), o && t.scrollToContent({ scale: !1, nodeIds: [c.id] }), c.id;
+  return t.createNodes([a], !0), i && t.scrollToContent({ scale: !1, nodeIds: [a.id] }), a.id;
 }
-async function Y(t, r, n) {
+async function k(t, n, o) {
   if (!t) return;
   const e = v(t);
-  return p(t, r, n, {
+  return T(t, n, o, {
     x: e.x,
     y: e.y + 20
   });
 }
-async function V(t, r) {
+async function F(t, n) {
   if (!t) return null;
-  const n = t.getCanvasNodeById(r);
-  if (!n) return null;
-  const e = n.getConfig();
+  const o = t.getCanvasNodeById(n);
+  if (!o) return null;
+  const e = o.getConfig();
   if (e.$_type !== "image-marker" || !e.$_relativeBox)
     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();
-    g.crossOrigin = "anonymous", g.onload = () => {
-      const y = g.naturalWidth, f = g.naturalHeight, m = c * y, $ = d * f, x = l * y, I = h * f, w = document.createElement("canvas");
-      w.width = x, w.height = I;
-      const C = w.getContext("2d");
-      if (!C) {
-        u(null);
+  const r = e.$_parentId;
+  if (!r) return null;
+  const i = t.getNodeConfigById(r);
+  if (!i || i.$_type !== "image" || !i.$_imageUrl) return null;
+  const { start: s, end: l } = e.$_relativeBox, a = s.ratioX, d = s.ratioY, c = l.ratioX - s.ratioX, h = l.ratioY - s.ratioY;
+  return new Promise((g) => {
+    const u = new Image();
+    u.crossOrigin = "anonymous", u.onload = () => {
+      const y = u.naturalWidth, f = u.naturalHeight, m = a * y, x = d * f, $ = c * y, I = h * f, _ = document.createElement("canvas");
+      _.width = $, _.height = I;
+      const p = _.getContext("2d");
+      if (!p) {
+        g(null);
         return;
       }
-      C.drawImage(
-        g,
+      p.drawImage(
+        u,
         m,
-        $,
         x,
+        $,
         I,
         0,
         0,
-        x,
+        $,
         I
       );
-      const S = w.toDataURL("image/png");
-      u(S);
-    }, g.onerror = () => {
-      console.error("Failed to load image:", o.$_imageUrl), u(null);
-    }, g.src = o.$_imageUrl;
+      const E = _.toDataURL("image/png");
+      g(E);
+    }, u.onerror = () => {
+      console.error("Failed to load image:", i.$_imageUrl), g(null);
+    }, u.src = i.$_imageUrl;
   });
 }
-function z(t, r) {
+function W(t, n) {
   if (!t) return null;
-  const n = t.getState().selectedNodeIds || [];
-  if (n.length === 0) return null;
-  if (n.length === 1) {
-    const e = t.getCanvasNodeById(n[0]);
+  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;
   }
-  return t.exportSelectionAsImage(r);
+  return t.exportSelectionAsImage(n);
+}
+function U(t) {
+  return t.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function M(t, n, o, e, r, i, s) {
+  return `<p><span style="${[
+    `font-family: ${n}`,
+    `font-size: ${o}px`,
+    `letter-spacing: ${e}px`,
+    `font-weight: ${r}`,
+    `color: ${i}`,
+    `line-height: ${s}`
+  ].join("; ")}">${U(t)}</span></p>`;
+}
+const C = /* @__PURE__ */ new Set();
+function X(t, n, o) {
+  const e = `${n}-${o || "all"}`;
+  if (C.has(e)) return;
+  C.add(e);
+  const r = o ? `:wght@${o}` : "", i = `https://fonts.googleapis.com/css2?family=${encodeURIComponent(t)}${r}&display=swap`, s = document.createElement("link");
+  s.rel = "stylesheet", s.href = i, s.onerror = () => {
+    const l = `https://cdn.jsdelivr.net/fontsource/fonts/${n}@latest/index.css`, a = document.createElement("link");
+    a.rel = "stylesheet", a.href = l, document.head.appendChild(a);
+  }, document.head.appendChild(s);
+}
+function b(t, n) {
+  if (!t) return;
+  X(n.fontFamily, n.fontId, n.fontWeight);
+  const o = w(), e = M(
+    n.text,
+    n.fontFamily,
+    n.fontSize,
+    n.letterSpacing,
+    n.fontWeight,
+    n.fontColor,
+    n.lineHeight
+  ), r = {
+    id: o,
+    $_type: "rich-text",
+    x: n.position.x,
+    y: n.position.y,
+    $_htmlContent: e,
+    scaleWhenCreate: 1,
+    image: void 0
+  };
+  return t.createNodes([r], !0), o;
+}
+function z(t, n, o) {
+  t && t.updateNodes([n], { $_imageUrl: o });
+}
+async function P(t, n) {
+  if (!t) return null;
+  const o = t.getCanvasNodeById(n);
+  if (!o) return null;
+  const e = o.getConfig();
+  if (e.$_type !== "font-replace" || !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 { start: s, end: l } = e.$_relativeBox, a = await new Promise((d) => {
+    const c = new window.Image();
+    c.crossOrigin = "anonymous", c.onload = () => {
+      const h = c.naturalWidth, g = c.naturalHeight, u = s.ratioX * h, y = s.ratioY * g, f = (l.ratioX - s.ratioX) * h, m = (l.ratioY - s.ratioY) * g, x = document.createElement("canvas");
+      x.width = f, x.height = m;
+      const $ = x.getContext("2d");
+      if (!$) {
+        d(null);
+        return;
+      }
+      $.drawImage(c, u, y, f, m, 0, 0, f, m), d({
+        regionImage: x.toDataURL("image/png"),
+        naturalWidth: h,
+        naturalHeight: g
+      });
+    }, c.onerror = () => d(null), c.src = i.$_imageUrl;
+  });
+  return a ? {
+    region_image: a.regionImage,
+    edit_urls: [i.$_imageUrl],
+    prompt: "去掉选区内的文字，保持背景完整",
+    relative_box: { start: s, end: l },
+    image_node_id: r,
+    font_replace_node_id: n,
+    natural_width: a.naturalWidth,
+    natural_height: a.naturalHeight
+  } : null;
 }
 export {
   v as calculateBottomLeftOfCanvasContent,
-  V as exportMarkedRegion,
-  z as exportSelectionAsImage,
-  B as insertImageBesideContent,
-  E as insertImagesAtPosition,
+  b as createRichTextFromFontReplace,
+  P as exportFontReplaceRegion,
+  F as exportMarkedRegion,
+  W as exportSelectionAsImage,
+  H as insertImageBesideContent,
+  S as insertImagesAtPosition,
   L as insertLoadingImageBesideSelection,
-  p as insertVideoAtPosition,
-  Y as insertVideoBesideContent,
-  X as replaceLoadingImageNode
+  T as insertVideoAtPosition,
+  k as insertVideoBesideContent,
+  z as replaceImageUrl,
+  R as replaceLoadingImageNode
 };

package/dist/{const-YEx1e3IJ.js → const-B6DtCQRi.js}

@@ -13,7 +13,8 @@ const i = {
   polygon: "polygon_intrinsic",
   arrow: "arrow_intrinsic",
   brush: "brush_intrinsic",
-  imageBrush: "image_brush_intrinsic"
+  imageBrush: "image_brush_intrinsic",
+  fontReplace: "font_replace_intrinsic"
 }, n = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10