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

package/dist/adapter/maze.d.ts

@@ -1,2 +1,43 @@
 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: {
+            setNodeBackgroundColor: (backgroundColor: string) => ReturnType;
+            unsetNodeBackgroundColor: () => ReturnType;
+            toggleNodeBackgroundColor: (backgroundColor: string) => ReturnType;
+        };
+    }
+}

package/dist/adapter/maze.js

@@ -1,213 +1,302 @@
-import { v4 as C } from "uuid";
-import { N as p } from "../const-CNw7pZuI.js";
-async function v(t) {
-  return new Promise((o, n) => {
+import { v4 as w } from "uuid";
+import { N as B } from "../const-B6DtCQRi.js";
+async function N(t) {
+  return new Promise((n, o) => {
     const e = new Image();
     e.onload = () => {
-      o({ 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;
   });
 }
-function E(t) {
+function v(t) {
   if (!t) return { x: 0, y: 0 };
   if ((t.getState().nodes || []).length > 0) {
     const e = t.getMainLayer();
-    let i = 1 / 0, r = -1 / 0;
+    let r = 1 / 0, i = -1 / 0;
     if (e.children.forEach((s) => {
-      if (s.visible() && s.getClassName() !== "Transformer" && s.hasName(p.selectable)) {
-        const a = s.getAttrs(), c = a.x || 0, g = a.y || 0, l = a.height || 0;
-        i = Math.min(i, c), r = Math.max(r, g + 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 && r !== -1 / 0)
-      return { x: i, y: r };
+    }), 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 S(t, o, n, e) {
+async function S(t, n, o, e) {
   if (!t) return;
-  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, g = /* @__PURE__ */ new Map();
-  c && (t.getState().nodes || []).forEach((y) => {
-    y.$_type === "image" && y.$_imageUrl && g.set(y.$_imageUrl, y.id);
+  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((u) => v(u))), f = [], h = [];
-  let m = n.x, d = n.y;
-  return i.forEach((u, y) => {
-    if (c && g.has(u)) {
-      const I = g.get(u);
-      h.push(I);
+  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: w, height: $ } = l[y], x = C();
-    f.push({
-      id: x,
+    const { width: x, height: $ } = c[m], I = w();
+    h.push({
+      id: I,
       $_type: "image",
-      x: m,
-      y: d,
-      width: w,
+      x: u,
+      y,
+      width: x,
       height: $,
-      $_imageUrl: u
-    }), h.push(x), a === "horizontal" ? m += w + r : d += $ + r;
-  }), f.length > 0 && t.createNodes(f, !0), s && t.scrollToContent({ scale: !1, nodeIds: h }), h;
+      $_imageUrl: f
+    }), 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 L(t, o) {
+async function H(t, n) {
   if (!t) return;
-  const n = E(t);
-  return S(t, o, {
-    x: n.x,
-    y: n.y + 20
+  const o = v(t);
+  return S(t, n, {
+    x: o.x,
+    y: o.y + 20
   });
 }
-function X(t, o) {
+function L(t, n) {
   if (!t) return;
-  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((l) => {
-    if (l.visible() && l.getClassName() !== "Transformer" && n.includes(l.id())) {
-      const f = l.getAttrs(), h = f.x || 0, m = f.y || 0, d = f.width || 0, u = f.height || 0;
-      e = Math.min(e, h), i = Math.min(i, m), r = Math.max(r, h + d), s = Math.max(s, m + u);
+  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 || r === -1 / 0 || s === -1 / 0)
+  }), e === 1 / 0 || r === 1 / 0 || i === -1 / 0 || s === -1 / 0)
     return;
-  const c = {
-    x: r + 20,
-    y: i,
-    width: r - e,
-    height: s - i
-  }, g = {
-    id: C(),
+  const a = {
+    x: i + 20,
+    y: r,
+    width: i - e,
+    height: s - r
+  }, d = {
+    id: w(),
     $_type: "html",
     $_actualType: "loading",
-    x: c.x,
-    y: c.y,
-    width: c.width,
-    height: c.height,
-    $_imageUrl: o,
+    x: a.x,
+    y: a.y,
+    width: a.width,
+    height: a.height,
+    $_imageUrl: n,
     // 示例 loading 图片 URL
     $_htmlContent: `
-      <img alt="loading" src="${o}" style="width: 100%; height: 100%; object-fit: contain;" />
+      <img alt="loading" src="${n}" style="width: 100%; height: 100%; object-fit: contain;" />
     `
   };
-  return t.createNodes([g], !0), g.id;
+  return t.createNodes([d], !0), d.id;
 }
-function Y(t, o, n) {
+function R(t, n, o) {
   if (!t) return;
-  const e = t.getCanvasNodeById(o);
+  const e = t.getCanvasNodeById(n);
   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;
-  S(t, r, { x: s, y: a }, { scrollToView: !1 }), t.deleteNodes([o]);
+  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 A(t, o, n, e, i) {
+async function T(t, n, o, e, r) {
   if (!t) return;
-  const r = i?.scrollToView ?? !0;
-  if (i?.reuseExisting ?? !0) {
-    const g = t.getState().nodes || [];
-    for (const l of g)
-      if (l.$_type === "video" && l.$_videoUrl === o)
-        return r && t.scrollToContent({ scale: !1, nodeIds: [l.id] }), l.id;
+  const i = r?.scrollToView ?? !0;
+  if (r?.reuseExisting ?? !0) {
+    const d = t.getState().nodes || [];
+    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 v(n);
-  } catch (g) {
-    console.warn("Failed to load cover image, using default size:", g);
+    l = await N(o);
+  } catch (d) {
+    console.warn("Failed to load cover image, using default size:", d);
   }
-  const c = {
-    id: C(),
+  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: o,
-    $_coverUrl: n
+    $_videoUrl: n,
+    $_coverUrl: o
   };
-  return t.createNodes([c], !0), r && 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 V(t, o, n) {
+async function k(t, n, o) {
   if (!t) return;
-  const e = E(t);
-  return A(t, o, n, {
+  const e = v(t);
+  return T(t, n, o, {
     x: e.x,
     y: e.y + 20
   });
 }
-async function z(t, o) {
+async function F(t, n) {
   if (!t) return null;
-  const n = t.getCanvasNodeById(o);
-  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 r = t.getCanvasNodeById(i);
+  const r = e.$_parentId;
   if (!r) return null;
-  const s = r.getConfig();
-  if (s.$_type !== "image" || !s.$_imageUrl) return null;
-  const { start: a, end: c } = e.$_relativeBox, g = a.ratioX, l = a.ratioY, f = c.ratioX - a.ratioX, h = c.ratioY - a.ratioY;
-  return new Promise((m) => {
-    const d = new Image();
-    d.crossOrigin = "anonymous", d.onload = () => {
-      const u = d.naturalWidth, y = d.naturalHeight, w = g * u, $ = l * y, x = f * u, I = h * y, _ = document.createElement("canvas");
-      _.width = x, _.height = I;
-      const N = _.getContext("2d");
-      if (!N) {
-        m(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;
       }
-      N.drawImage(
-        d,
-        w,
-        $,
+      p.drawImage(
+        u,
+        m,
         x,
+        $,
         I,
         0,
         0,
-        x,
+        $,
         I
       );
-      const M = _.toDataURL("image/png");
-      m(M);
-    }, d.onerror = () => {
-      console.error("Failed to load image:", s.$_imageUrl), m(null);
-    }, d.src = s.$_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 R(t) {
+function W(t, n) {
   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 e = t.getCanvasNodeById(o[0]);
+    if (!e) return null;
+    if (e.getConfig().$_type === "image")
+      return e.getConfig().$_imageUrl || null;
   }
-  return t.exportSelectionAsImage();
+  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 {
-  E as calculateBottomLeftOfCanvasContent,
-  z as exportMarkedRegion,
-  R as exportSelectionAsImage,
-  L as insertImageBesideContent,
+  v as calculateBottomLeftOfCanvasContent,
+  b as createRichTextFromFontReplace,
+  P as exportFontReplaceRegion,
+  F as exportMarkedRegion,
+  W as exportSelectionAsImage,
+  H as insertImageBesideContent,
   S as insertImagesAtPosition,
-  X as insertLoadingImageBesideSelection,
-  A as insertVideoAtPosition,
-  V as insertVideoBesideContent,
-  Y as replaceLoadingImageNode
+  L as insertLoadingImageBesideSelection,
+  T as insertVideoAtPosition,
+  k as insertVideoBesideContent,
+  z as replaceImageUrl,
+  R as replaceLoadingImageNode
 };

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

@@ -7,15 +7,22 @@ const i = {
   html: "html_intrinsic",
   text: "text_intrinsic",
   richText: "rich_text_intrinsic",
-  video: "video_intrinsic"
-}, t = {
+  video: "video_intrinsic",
+  star: "star_intrinsic",
+  ellipse: "ellipse_intrinsic",
+  polygon: "polygon_intrinsic",
+  arrow: "arrow_intrinsic",
+  brush: "brush_intrinsic",
+  imageBrush: "image_brush_intrinsic",
+  fontReplace: "font_replace_intrinsic"
+}, n = {
   CORNER_RADIUS: 6,
   MIN_SIZE: 10
-}, e = {
+}, t = {
   MIN_SIZE: 10
 };
 export {
-  e as I,
+  t as I,
   i as N,
-  t as R
+  n as R
 };