@printine/designer 0.1.0

package/dist/engine/processors/template.js

@@ -0,0 +1,314 @@
+import "../fabric.js";
+import { urlToDataURL as P, cloneObject as I } from "../utils/common.js";
+import { fabric as m } from "fabric";
+class X {
+  constructor(s) {
+    this.editor = s;
+  }
+  /**
+   * 获取当前选中的对象，将其组合转为临时模板
+   */
+  async saveAsTemplate() {
+    const e = this.editor.canvas.getActiveObjects();
+    if (!e.length) return null;
+    const n = this._getSelectionBoundingBox(e);
+    if (!n) return null;
+    const l = await this._generatePreviewImage(e, n), i = await Promise.all(
+      e.map(async (t) => {
+        const o = this._calculateRelativePosition(t, n);
+        if (t.type?.includes("i-text")) {
+          const a = t, c = typeof a.__lastCurvedWidth == "number" ? a.__lastCurvedWidth : t.width, g = typeof a.__lastCurvedHeight == "number" ? a.__lastCurvedHeight : t.height;
+          return {
+            type: t.type || "",
+            position: {
+              rotation: t.angle || 0,
+              width: (c || 0) * (t.scaleX || 1),
+              height: (g || 0) * (t.scaleY || 1),
+              left: o.left,
+              top: o.top
+            },
+            text: {
+              text: t.text || "",
+              color: t.fill?.toString() || "",
+              fontFamily: t.fontFamily || "",
+              fontWeight: t.fontWeight || 400,
+              fontStyle: t.fontStyle || "",
+              fontPath: t.fontPath || "",
+              fontSize: t.fontSize || 0,
+              textAlign: t.textAlign || "",
+              // 弧形字段：普通 IText 默认为 0
+              radius: typeof a.radius == "number" ? a.radius : 0,
+              spacing: typeof a.spacing == "number" ? a.spacing : 0
+            }
+          };
+        }
+        if (t.type === "image" && t.clipPath) {
+          const a = await this._rasterizeClippedImage(t, n, 2);
+          if (a)
+            return {
+              type: "image",
+              position: {
+                rotation: 0,
+                width: a.width,
+                height: a.height,
+                left: a.left,
+                top: a.top
+              },
+              image: {
+                url: a.dataUrl,
+                width: a.width,
+                height: a.height,
+                flipX: !1,
+                flipY: !1
+              }
+            };
+        }
+        return {
+          type: t.type || "",
+          position: {
+            rotation: t.angle || 0,
+            width: t.width * (t.scaleX || 1),
+            height: t.height * (t.scaleY || 1),
+            left: o.left,
+            top: o.top
+          },
+          image: {
+            url: t.originSrc || t.getSrc?.() || "",
+            width: t.width || 0,
+            height: t.height || 0,
+            flipX: t.flipX || !1,
+            flipY: t.flipY || !1,
+            fill: t.fill
+          }
+        };
+      })
+    );
+    return {
+      areaWidth: n.width,
+      areaHeight: n.height,
+      urlPreview: l || "",
+      elements: i
+    };
+  }
+  /**
+   * 计算选中对象的总边界框
+   */
+  _getSelectionBoundingBox(s) {
+    if (!s.length) return null;
+    let e = 0, n;
+    if (s.forEach((t) => {
+      const o = t.getBoundingRect(!0, !0), a = o.width * o.height;
+      a > e && (e = a, n = t);
+    }), !n) return null;
+    const l = n.getBoundingRect(!0, !0), i = {
+      left: l.left,
+      top: l.top,
+      width: l.width,
+      height: l.height,
+      right: l.left + l.width,
+      bottom: l.top + l.height
+    };
+    return s.forEach((t) => {
+      if (t === n) return;
+      const o = t.getBoundingRect(!0, !0);
+      i.left = Math.min(i.left, o.left), i.top = Math.min(i.top, o.top);
+      const a = o.left + o.width, c = o.top + o.height;
+      i.right = Math.max(i.right, a), i.bottom = Math.max(i.bottom, c);
+    }), i.width = i.right - i.left, i.height = i.bottom - i.top, i;
+  }
+  /**
+   * 计算对象相对于边界框的位置
+   */
+  _calculateRelativePosition(s, e) {
+    const n = s.getBoundingRect(!0, !0);
+    return {
+      left: n.left - e.left,
+      top: n.top - e.top
+    };
+  }
+  /**
+   * 生成预览图片
+   */
+  async _generatePreviewImage(s, e) {
+    const n = document.createElement("canvas");
+    n.width = e.width, n.height = e.height, n.className = "template-preview-canvas";
+    const l = new m.Canvas(n, {
+      backgroundColor: "transparent",
+      width: e.width,
+      height: e.height,
+      enableRetinaScaling: !1
+    });
+    try {
+      return (await Promise.all(
+        s.map(
+          (t) => new Promise((o) => {
+            try {
+              if (t.type === "image") {
+                const a = t.getSrc ? t.getSrc() : "";
+                m.Image.fromURL(
+                  a,
+                  async (c) => {
+                    const g = await P(a);
+                    let h;
+                    t.clipPath && (h = await I(t.clipPath, ["absolutePositioned"]), h.set({
+                      left: h.left - e.left,
+                      top: h.top - e.top
+                    })), c.setSrc(g, () => {
+                      c.set({
+                        left: t.left - e.left,
+                        top: t.top - e.top,
+                        angle: t.angle,
+                        flipX: t.flipX,
+                        flipY: t.flipY,
+                        scaleX: t.scaleX,
+                        scaleY: t.scaleY,
+                        clipPath: h
+                      }), o(c);
+                    });
+                  },
+                  { crossOrigin: "anonymous" }
+                );
+              } else {
+                const a = t.getBoundingRect(!0, !0);
+                t.cloneAsImage(
+                  (c) => {
+                    c.set({
+                      left: a.left - e.left,
+                      top: a.top - e.top,
+                      scaleX: 0.25,
+                      scaleY: 0.25,
+                      angle: 0,
+                      selectable: !1,
+                      hasControls: !1,
+                      hasBorders: !1
+                    }), o(c);
+                  },
+                  { multiplier: 4 }
+                );
+              }
+            } catch {
+              const c = new m.Text("Load error", {
+                left: t.left - e.left,
+                top: t.top - e.top,
+                fill: "red",
+                fontSize: 16
+              });
+              o(c);
+            }
+          })
+        )
+      )).forEach((t) => l.add(t)), new Promise((t) => {
+        setTimeout(() => {
+          l.renderAll();
+          try {
+            const o = l.toSVG({
+              viewBox: {
+                x: 0,
+                y: 0,
+                width: e.width,
+                height: e.height
+              },
+              width: e.width,
+              height: e.height
+            }), a = "data:image/svg+xml;base64," + btoa(unescape(encodeURIComponent(o)));
+            l.dispose(), t(a);
+          } catch {
+            t(
+              "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgZmlsbD0iI2Y1ZjVmNSIvPjx0ZXh0IHg9IjUwIiB5PSI1MCIgZm9udC1mYW1pbHk9IkFyaWFsIiBmb250LXNpemU9IjE0IiBmaWxsPSIjOTk5IiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkeT0iLjNlbSI+6ZSZ6K+vPC90ZXh0Pjwvc3ZnPg=="
+            );
+          }
+        }, 100);
+      });
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * 将带裁剪的图片对象栅格化为裁剪后的位图
+   * 离屏画布尺寸按裁剪外接框（非整图），避免透明区域“占位置”
+   * 返回的数据中的 left/top 为模板局部坐标（相对 boundingBox 左上角）
+   */
+  async _rasterizeClippedImage(s, e, n = 2) {
+    try {
+      s.setCoords();
+      const l = s.clipPath, i = l ? l.getBoundingRect(!0, !0) : s.getBoundingRect(!0, !0), t = (s.width || 1) * (s.scaleX || 1), o = (s.height || 1) * (s.scaleY || 1), a = (s.width || 1) / Math.max(1, t), c = (s.height || 1) / Math.max(1, o), g = Math.max(1, Math.round(i.width * a * n)), h = Math.max(1, Math.round(i.height * c * n)), u = new m.StaticCanvas(null, {
+        width: g,
+        height: h,
+        enableRetinaScaling: !1,
+        backgroundColor: "transparent"
+      }), p = await new Promise((r) => s.clone((d) => r(d)));
+      let f;
+      l && (f = await new Promise((r) => l.clone((d) => r(d)))), p.set({ originX: "left", originY: "top" }), f && f.set({ originX: "left", originY: "top" }), p.set({
+        left: (s.left - i.left) * a * n,
+        top: (s.top - i.top) * c * n,
+        angle: s.angle || 0,
+        flipX: s.flipX || !1,
+        flipY: s.flipY || !1,
+        skewX: s.skewX || 0,
+        skewY: s.skewY || 0,
+        scaleX: (s.scaleX || 1) * a * n,
+        scaleY: (s.scaleY || 1) * c * n,
+        selectable: !1,
+        evented: !1
+      }), f ? (l?.absolutePositioned ? f.set({
+        left: ((l?.left || 0) - i.left) * a * n,
+        top: ((l?.top || 0) - i.top) * c * n,
+        scaleX: (l?.scaleX || 1) * a * n,
+        scaleY: (l?.scaleY || 1) * c * n,
+        angle: l?.angle || 0,
+        selectable: !1,
+        evented: !1,
+        absolutePositioned: !0
+      }) : f.set({ selectable: !1, evented: !1, absolutePositioned: !1 }), p.set({ clipPath: f })) : p.set({ clipPath: void 0 }), u.add(p), u.renderAll();
+      const w = u.toDataURL({ format: "png" });
+      return u.dispose(), {
+        dataUrl: w,
+        left: i.left - e.left,
+        top: i.top - e.top,
+        width: Math.round(i.width),
+        height: Math.round(i.height)
+      };
+    } catch {
+      return null;
+    }
+  }
+  /**
+   * 将模板添加到画布中
+   */
+  async addTemplate(s) {
+    const e = this.editor.workspaceManager.dimension, n = s.areaWidth, l = s.areaHeight;
+    if (!n || !l) return;
+    let i = 1;
+    n > e.width && (i = e.width / n), l * i > e.height && (i = Math.min(i, e.height / l));
+    const t = this.editor.workspaceManager.scale, o = this.editor.workspaceManager.printAreaSize, a = Math.min(o.width, o.height), c = [];
+    for (const r of s.elements) {
+      if (r.type !== "image" || !r.image?.url) continue;
+      const d = a * t, v = Math.max(r.position.width, r.position.height) * i;
+      v > 0 && c.push(d / v);
+    }
+    const g = c.length ? Math.min(...c) : 1, h = i * Math.min(1, g), u = e.left + (e.width - n * h) / 2, p = e.top + (e.height - l * h) / 2, f = this.editor.canvas.getObjects().length;
+    let w = await Promise.all(
+      s.elements.map(async (r, d) => r.text ? this.editor.textProcessor.addTextFromTemplate(r, {
+        left: u,
+        top: p,
+        s: h,
+        zIndex: f + d
+      }) : await this.editor.imageProcessor.addImageFromTemplate(r, {
+        left: u,
+        top: p,
+        s: h,
+        zIndex: f + d
+      }))
+    );
+    if (w = w.filter((r) => r !== null), w.length) {
+      const r = new m.ActiveSelection(w, {
+        canvas: this.editor.canvas
+      });
+      this.editor.canvas.setActiveObject(r);
+    }
+  }
+}
+export {
+  X as TemplateProcessor,
+  X as default
+};

package/dist/engine/processors/text.d.ts

@@ -0,0 +1,74 @@
+import fabric from '../fabric';
+import '../../fabric-types';
+import type { TemplateElement } from '../../contracts/api-design';
+import type { Editor } from '../editor';
+/**
+ * Text authoring for the portable editor.
+ *
+ * The serialized output stays identical to the current Printine editor so that
+ * existing `design_data` documents keep loading without a migration step.
+ */
+export declare class TextProcessor {
+    static DEFAULT_TEXT_CONFIG: {
+        selectable: boolean;
+        hasControls: boolean;
+        lineHeight: number;
+        strokeWidth: number;
+        editingBorderColor: string;
+    };
+    private editor;
+    constructor(editor: Editor);
+    /**
+     * 按字体配置按需加载 font-face（有缓存时直接跳过）
+     */
+    ensureFontLoaded(config: Record<string, any>): Promise<void>;
+    /**
+     * 添加文本
+     */
+    addText(config: Record<string, any>): Promise<fabric.AdvancedIText | null>;
+    /**
+     * 更新文本显示属性：大小、颜色、字体
+     */
+    updateTextDisplay(config: fabric.ITextOptions): Promise<void>;
+    /**
+     * 更新文本阴影
+     */
+    updateTextShadow(config: fabric.IShadowOptions | null): Promise<void>;
+    /**
+     * 更新文本描边
+     */
+    updateTextStroke(config: {
+        stroke: string;
+        strokeWidth: number;
+    }): Promise<void>;
+    /**
+     * 更新文本弧度
+     */
+    updateTextCurved(config: {
+        radius?: number;
+        spacing?: number;
+        orientation?: 'vertical' | 'horizontal';
+    }): Promise<void>;
+    /**
+     * 更新文本排列方向
+     */
+    updateTextOrientation(orientation: 'vertical' | 'horizontal'): Promise<void>;
+    /**
+     * 将旧的 fabric.IText 升级为 fabric.AdvancedIText
+     * - 保留：文本内容、视觉样式、变换、zIndex、id/name 等自定义字段
+     * - 触发：object:removed + object:added（历史记录会自动入栈）
+     */
+    private __upgradeITextToAdvanced;
+    /** 从模板中添加文本 */
+    addTextFromTemplate(el: TemplateElement, area: {
+        left: number;
+        top: number;
+        s: number;
+        zIndex: number;
+    }): Promise<fabric.AdvancedIText>;
+    /**
+     * 从 state 中提取并预加载所有字体
+     */
+    preloadFontsFromState(state: Record<string, any>): Promise<void>;
+}
+export default TextProcessor;

package/dist/engine/processors/text.js

@@ -0,0 +1,215 @@
+import "../fabric.js";
+import { fontCache as m, loadFontface as u } from "../utils/font.js";
+import { HistoryManager as _ } from "../history.js";
+import { inchToPixel as A } from "../utils/measure.js";
+import { toVerticalStack as F, toHorizontalRaw as S } from "../utils/common.js";
+import { fabric as g } from "fabric";
+const p = class p {
+  constructor(e) {
+    this.editor = e;
+  }
+  /**
+   * 按字体配置按需加载 font-face（有缓存时直接跳过）
+   */
+  async ensureFontLoaded(e) {
+    if (!e?.fontPath) return;
+    const t = `${e.fontFamily}_${e.fontWeight}_${e.fontStyle}`;
+    m.has(t) || await u({
+      family: e.fontFamily,
+      weight: e.fontWeight || 400,
+      style: e.fontStyle || "normal",
+      url: e.fontPath
+    });
+  }
+  /**
+   * 添加文本
+   */
+  async addText(e) {
+    const { width: t, height: i, center: n, left: o } = this.editor.workspaceManager.dimension, s = this.editor.workspaceManager.scale, r = Math.min(t, i), c = `${e.family}_${e.weight}_${e.style}`, a = 0.25;
+    let h;
+    try {
+      m.has(c) || (h = this.editor.createLoading({
+        left: o + 20,
+        top: n.y - 40 / 2,
+        width: t - 40,
+        height: 40,
+        scaleX: 1,
+        scaleY: 1
+      }), h.addLoadingGroup(), await u({
+        family: e.family,
+        weight: e.weight,
+        style: e.style,
+        url: e.url
+      }), h.removeLoadingGroup());
+      const d = new g.AdvancedIText("Entry Text", {
+        ...p.DEFAULT_TEXT_CONFIG,
+        fontFamily: e.family,
+        fontWeight: e.weight,
+        fontStyle: e.style,
+        fontPath: e.url
+      }), l = Math.max(d.width, d.height), x = l < r / s ? s : r / s / l, y = A(a) / d.height, f = l * y > t ? t / l : Math.max(x, y);
+      return d.set({
+        scaleX: f,
+        scaleY: f,
+        left: n.x - d.width * f / 2,
+        top: n.y - d.height * f / 2
+      }), this.editor.addObject(d), d.enterEditing().selectAll(), d;
+    } catch {
+      return h && h.removeLoadingGroup(), null;
+    }
+  }
+  /**
+   * 更新文本显示属性：大小、颜色、字体
+   */
+  async updateTextDisplay(e) {
+    const t = this.editor.activeObject;
+    t && (await this.ensureFontLoaded(e), t.set(e), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", {
+      target: t
+    }));
+  }
+  /**
+   * 更新文本阴影
+   */
+  async updateTextShadow(e) {
+    const t = this.editor.activeObject;
+    if (!t) return;
+    const i = e ? new g.Shadow(e) : void 0;
+    t.set({
+      shadow: i
+    }), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: t });
+  }
+  /**
+   * 更新文本描边
+   */
+  async updateTextStroke(e) {
+    const t = this.editor.activeObject;
+    t && (t.set({
+      ...e
+    }), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: t }));
+  }
+  /**
+   * 更新文本弧度
+   */
+  async updateTextCurved(e) {
+    const t = this.editor.activeObject;
+    if (!t || !t.type || !t.type.includes("i-text")) return;
+    t.isEditing && t.exitEditing();
+    const i = t.type === "advanced-i-text" ? t : this.__upgradeITextToAdvanced(t);
+    i.set(e), i.setCoords(), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: i });
+  }
+  /**
+   * 更新文本排列方向
+   */
+  async updateTextOrientation(e) {
+    const t = this.editor.activeObject;
+    if (!t || !t.type || !t.type.includes("i-text")) return;
+    t.isEditing && t.exitEditing();
+    const i = t.getCenterPoint(), n = {
+      orientation: e
+    };
+    if (e === "vertical")
+      t.__rawText = t.text || "", n.text = F(t.__rawText), t.set(n);
+    else {
+      const o = t.text || "", s = t.__rawText || S(o);
+      n.text = s, t.set(n);
+    }
+    t.setPositionByOrigin(i, "center", "center"), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: t });
+  }
+  /**
+   * 将旧的 fabric.IText 升级为 fabric.AdvancedIText
+   * - 保留：文本内容、视觉样式、变换、zIndex、id/name 等自定义字段
+   * - 触发：object:removed + object:added（历史记录会自动入栈）
+   */
+  __upgradeITextToAdvanced(e) {
+    const t = this.editor.canvas;
+    if (e.group)
+      return e;
+    const n = t.getObjects().indexOf(e), o = e.id, s = e.name, r = e.toObject(_.DEFAULT_SAVE_PROPERTIES);
+    delete r.type, delete r.version;
+    const c = new g.AdvancedIText(e.text || "", {
+      ...r,
+      radius: 0,
+      spacing: 0
+    });
+    return c.id = o, c.name = s, t.remove(e), t.add(c), n >= 0 && t.moveTo(c, n), t.setActiveObject(c), c.setCoords(), t.requestRenderAll(), c;
+  }
+  /** 从模板中添加文本 */
+  async addTextFromTemplate(e, t) {
+    const i = e.text, n = `${i.fontFamily}_${i.fontWeight}_${i.fontStyle}`;
+    m.has(n) || await u({
+      family: i.fontFamily,
+      weight: Number.parseInt(i.fontWeight.toString()),
+      style: i.fontStyle,
+      url: i.fontPath
+    });
+    const o = t.left + e.position.left * t.s, s = t.top + e.position.top * t.s, r = e.position.width * t.s, c = e.position.height * t.s, a = new g.AdvancedIText(i.text || "", {
+      ...p.DEFAULT_TEXT_CONFIG,
+      fontFamily: i.fontFamily,
+      fontWeight: Number.parseInt(i.fontWeight.toString()),
+      fontStyle: i.fontStyle || "normal",
+      fontPath: i.fontPath,
+      fill: i.color || "#000",
+      textAlign: i.textAlign || "left",
+      left: 0,
+      top: 0,
+      angle: e.position.rotation || 0,
+      radius: 0,
+      spacing: 0
+    }), h = typeof i.radius == "number" ? i.radius : 0, d = typeof i.spacing == "number" ? i.spacing : 0;
+    (h !== 0 || d !== 0) && a.set({ radius: h, spacing: d }), a.setCoords();
+    let l = a.getBoundingRect(!0, !0);
+    const x = l.width > 0 ? r / l.width : 1, v = l.height > 0 ? c / l.height : 1, y = Math.min(x, v);
+    a.set({ scaleX: y, scaleY: y }), a.setCoords(), l = a.getBoundingRect(!0, !0);
+    const f = o - l.left, T = s - l.top;
+    return a.set({
+      left: (a.left || 0) + f,
+      top: (a.top || 0) + T
+    }), a.setCoords(), this.editor.addObject(a, !1), this.editor.canvas.moveTo(a, t.zIndex), this.editor.canvas.requestRenderAll(), a;
+  }
+  /**
+   * 从 state 中提取并预加载所有字体
+   */
+  async preloadFontsFromState(e) {
+    if (!e.objects || !Array.isArray(e.objects))
+      return;
+    const t = [], i = /* @__PURE__ */ new Set();
+    e.objects.forEach((n) => {
+      if (n.type.includes("text") && n.fontPath) {
+        const o = {
+          family: n.fontFamily || "Arial",
+          weight: n.fontWeight || 400,
+          style: n.fontStyle || "normal",
+          url: n.fontPath
+        }, s = `${o.family}_${o.weight}_${o.style}`;
+        !m.has(s) && !i.has(s) && (i.add(s), t.push(
+          u(o).catch((r) => (console.warn(`字体加载失败: ${o.family}`, r), Promise.resolve()))
+        ));
+      }
+      n.type === "group" && n.objects && Array.isArray(n.objects) && n.objects.forEach((o) => {
+        if ((o.type === "i-text" || o.type === "text") && o.fontPath) {
+          const s = {
+            family: o.fontFamily || "Arial",
+            weight: o.fontWeight || 400,
+            style: o.fontStyle || "normal",
+            url: o.fontPath
+          }, r = `${s.family}_${s.weight}_${s.style}`;
+          !m.has(r) && !i.has(r) && (i.add(r), t.push(
+            u(s).catch((c) => (console.warn(`字体加载失败: ${s.family}`, c), Promise.resolve()))
+          ));
+        }
+      });
+    }), t.length > 0 && await Promise.all(t);
+  }
+};
+p.DEFAULT_TEXT_CONFIG = {
+  selectable: !0,
+  hasControls: !0,
+  lineHeight: 1,
+  strokeWidth: 0,
+  editingBorderColor: "#67c23a"
+};
+let w = p;
+export {
+  w as TextProcessor,
+  w as default
+};