@printine/designer 0.1.0

package/dist/engine/processors/image.js

@@ -0,0 +1,473 @@
+import "../fabric.js";
+import { getImageControls as F } from "../utils/setting.js";
+import { loadImage as b, loadSvgImage as $ } from "../utils/image.js";
+import { isSvg as D } from "../utils/measure.js";
+import { HistoryManager as O } from "../history.js";
+import { fabric as C } from "fabric";
+class tt {
+  constructor(t) {
+    this.cropRect = null, this.overlay = null, this.editor = t;
+  }
+  /**
+   * 给图片添加 svg 形状图片蒙层
+   */
+  async addShapeImage(t, e, o = {}) {
+    const { width: g, height: i } = e.getBoundingRect(), n = Math.max(g, i), s = Math.min(t.width, t.height), a = s < n ? 1 : n / s, r = e.getCenterPoint(), h = r.x - t.width * a / 2, d = r.y - t.height * a / 2, l = this.editor.createLoading({
+      left: h,
+      top: d,
+      width: t.width,
+      height: t.height,
+      scaleX: a,
+      scaleY: a
+    });
+    try {
+      l.addLoadingGroup();
+      const c = t.file && !o.fullSizeSrc ? URL.createObjectURL(t.file) : "", m = await b(c || t.uri);
+      e.set({
+        absolutePositioned: !0
+      }), l.removeLoadingGroup(), m.set({
+        name: t.name,
+        scaleX: a,
+        scaleY: a,
+        originSrc: t.uri,
+        strokeWidth: 0,
+        left: h,
+        top: d,
+        clipPath: e,
+        ...o
+      }), this.editor.addObject(m), this.editor.canvas.requestRenderAll();
+    } catch {
+      l.removeLoadingGroup();
+    }
+  }
+  /**
+   * 添加图片（本地图片）
+   */
+  async addImage(t, e = {}) {
+    const o = this.editor.workspaceManager.printAreaSize, { center: g } = this.editor.workspaceManager.dimension, i = this.editor.workspaceManager.scale, n = o.width / t.width, s = o.height / t.height;
+    let a = Math.min(n, s);
+    t.width * 2 <= o.width && t.height * 2 <= o.height && (a = Math.min(a * 2, 2));
+    const r = a * i, h = g.x - t.width * r / 2, d = g.y - t.height * r / 2, l = this.editor.createLoading({
+      left: h,
+      top: d,
+      width: t.width,
+      height: t.height,
+      scaleX: r,
+      scaleY: r
+    });
+    try {
+      l.addLoadingGroup();
+      const c = t.file && !e.fullSizeSrc ? URL.createObjectURL(t.file) : "", m = await b(c || t.uri);
+      l.removeLoadingGroup(), m.set({
+        name: t.name,
+        scaleX: r,
+        scaleY: r,
+        originSrc: t.uri,
+        strokeWidth: 0,
+        left: h,
+        top: d,
+        ...e
+      }), this.editor.registerImageCache(t.uri, m, c || void 0), this.editor.addObject(m);
+    } catch {
+      l.removeLoadingGroup();
+    }
+  }
+  /** 添加图片（远程图片），自动区分位图和 SVG */
+  async addImageFromUrl(t, e = {}) {
+    D(t) ? await this.addSvgImage(t, e) : await this.addBitmapImage(t, e);
+  }
+  /**
+   * 添加图片（远程图片），只支持位图
+   */
+  async addBitmapImage(t, e = {}) {
+    const { center: o } = this.editor.workspaceManager.dimension, g = this.editor.workspaceManager.scale, i = this.editor.workspaceManager.printAreaSize, n = this.editor.createLoading({
+      left: o.x - 30,
+      top: o.y - 30,
+      width: 60,
+      height: 60,
+      scaleX: 1,
+      scaleY: 1
+    });
+    try {
+      n.addLoadingGroup();
+      const s = await b(t), { width: a = 0, height: r = 0 } = s, h = i.width / a, d = i.height / r;
+      let l = Math.min(h, d);
+      a * 2 <= i.width && r * 2 <= i.height && (l = Math.min(l * 2, 2));
+      const c = l * g, m = o.x - a * c / 2, w = o.y - r * c / 2;
+      n.removeLoadingGroup(), s.set({
+        scaleX: c,
+        scaleY: c,
+        originSrc: t,
+        strokeWidth: 0,
+        left: m,
+        top: w,
+        ...e
+      }), this.editor.registerImageCache(t, s), this.editor.addObject(s);
+    } catch {
+      n.removeLoadingGroup();
+    }
+  }
+  /**
+   * 从模板中添加图片
+   */
+  async addImageFromTemplate(t, e) {
+    const o = e.left + t.position.left * e.s, g = e.top + t.position.top * e.s, i = t.position.width * e.s, n = t.position.height * e.s, s = this.editor.createLoading({
+      left: o,
+      top: g,
+      width: t.image.width,
+      height: t.image.height,
+      scaleX: i / t.image.width,
+      scaleY: n / t.image.height
+    });
+    try {
+      s.addLoadingGroup();
+      const a = t.type === "image" ? await b(t.image.url) : await $(t.image.url), r = i / (a.width || 1), h = n / (a.height || 1);
+      let d;
+      return t.image.mask && (d = await new Promise((l) => {
+        C.util.enlivenObjects(
+          [t.image.mask],
+          ([c]) => {
+            c.set({ originX: "left", originY: "top" }), c.absolutePositioned ? c.set({
+              left: e.left + (c.left || 0) * e.s,
+              top: e.top + (c.top || 0) * e.s,
+              scaleX: (c.scaleX || 1) * e.s,
+              scaleY: (c.scaleY || 1) * e.s,
+              evented: !1,
+              selectable: !1
+            }) : c.set({
+              evented: !1,
+              selectable: !1
+            }), c.setCoords(), l(c);
+          },
+          ""
+        );
+      })), s.removeLoadingGroup(), a instanceof C.Image ? (a.set({
+        scaleX: r,
+        scaleY: h,
+        originSrc: t.image.url,
+        strokeWidth: 0,
+        left: o,
+        top: g,
+        angle: t.position.rotation || 0,
+        flipX: t.image?.flipX || !1,
+        flipY: t.image?.flipY || !1,
+        clipPath: d
+      }), this.editor.registerImageCache(t.image.url, a)) : a.set({
+        scaleX: r,
+        scaleY: h,
+        originSrc: t.image.url,
+        left: o,
+        top: g,
+        angle: t.position.rotation || 0,
+        flipX: t.image?.flipX || !1,
+        flipY: t.image?.flipY || !1,
+        fill: t.image?.fill
+      }), this.editor.addObject(a, !1), this.editor.canvas.moveTo(a, e.zIndex), a;
+    } catch {
+      return s.removeLoadingGroup(), null;
+    }
+  }
+  /**
+   * 添加 svg 图片
+   */
+  async addSvgImage(t, e = {}) {
+    const { width: o, height: g, center: i } = this.editor.workspaceManager.dimension, n = this.editor.createLoading({
+      left: i.x - 30,
+      top: i.y - 30,
+      width: 60,
+      height: 60,
+      scaleX: 1,
+      scaleY: 1
+    });
+    try {
+      n.addLoadingGroup();
+      const s = await $(t), a = Math.min(o, g), r = Math.max(s.width, s.height), h = r >= a ? a / r : s.scaleX ?? 1, d = i.x - s.width * h / 2, l = i.y - s.height * h / 2;
+      s.set({
+        originSrc: t,
+        scaleX: h,
+        scaleY: h,
+        left: d,
+        top: l,
+        sourceType: "svg",
+        ...e
+      }), n.removeLoadingGroup(), this.editor.addObject(s);
+    } catch {
+      n.removeLoadingGroup();
+    }
+  }
+  /**
+   * 替换图片对象
+   */
+  async replaceImage(t, e, o = {}) {
+    t.visible = !1, this.editor.canvas.requestRenderAll();
+    const g = this.editor.createLoading({
+      left: t.left ?? 0,
+      top: t.top ?? 0,
+      width: e.width,
+      height: e.height,
+      scaleX: t.scaleX ?? 1,
+      scaleY: t.scaleY ?? 1
+    });
+    try {
+      g.addLoadingGroup();
+      const i = e.file ? URL.createObjectURL(e.file) : "", n = await b(i || e.uri);
+      t.setSrc(e.uri, () => {
+        g.removeLoadingGroup(), t.set({
+          name: n.name,
+          originSrc: e.uri,
+          visible: !0,
+          ...o
+        }), this.editor.registerImageCache(e.uri, n, i || void 0), this.editor.canvas.renderAll(), this.editor.canvas.fire("object:modified", {
+          target: t
+        });
+      });
+    } catch {
+      g.removeLoadingGroup();
+    }
+  }
+  /**
+   * 修改图片对象配置
+   */
+  updateImageConfig(t) {
+    const e = this.editor.activeObject;
+    e && (e.set(t), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: e }));
+  }
+  /**
+   * 修改 svg 对象填充色
+   */
+  updateSvgColor(t) {
+    const e = this.editor.activeObject;
+    e && (e.stroke ? e.set({
+      stroke: t
+    }) : e.fill && e.set({
+      fill: t
+    }), e.type === "group" && e._objects.forEach((o) => {
+      o.stroke ? o.set({
+        stroke: t
+      }) : o.fill && o.set({
+        fill: t
+      });
+    }), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: e }));
+  }
+  /**
+   * 图片在可编辑区域内的适配
+   */
+  fitToEditableArea(t) {
+    const e = this.editor.activeObject, { width: o, height: g, center: i } = this.editor.workspaceManager.dimension;
+    if (!e || !o || !g || !i) return;
+    const n = e.width || 0, s = e.height || 0;
+    if (!n || !s) return;
+    const a = C.util.degreesToRadians(e.angle || 0), r = Math.abs(Math.cos(a)), h = Math.abs(Math.sin(a)), d = n * r + s * h, l = n * h + s * r;
+    if (!d || !l) return;
+    const c = Math.min(o / d, g / l), m = Math.max(o / d, g / l), w = e.scaleX || 1, p = e.scaleY || 1, f = w >= 0 ? 1 : -1, X = p >= 0 ? 1 : -1;
+    let u = w;
+    t === "fit" ? u = c : t === "fill" && (u = m), e.set({
+      scaleX: u * f,
+      scaleY: u * X
+    }), e.setPositionByOrigin(new C.Point(i.x, i.y), "center", "center"), e.setCoords(), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: e });
+  }
+  /**
+   * 图片镜像
+   */
+  flip(t) {
+    const e = this.editor.canvas.getActiveObject();
+    e && (t === "horizontal" ? e.set({
+      scaleX: e.scaleX * -1
+    }) : e.set({
+      scaleY: e.scaleY * -1
+    }), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:modified", { target: e }));
+  }
+  /**
+   * 图片复制
+   */
+  copy() {
+    const t = this.editor.canvas.getActiveObjects();
+    if (t.length === 0) return;
+    this.editor.canvas.discardActiveObject();
+    const e = t.map((o) => new Promise((g) => {
+      o.clone((i) => {
+        g(i);
+      }, O.DEFAULT_SAVE_PROPERTIES);
+    }));
+    Promise.all(e).then((o) => {
+      o.forEach((g) => {
+        this.editor.addObject(g);
+      });
+    });
+  }
+  /**
+   * 监听裁剪框的 scaling、moving、deselected 事件
+   */
+  _startCropListener(t) {
+    const e = (i, n) => {
+      const s = i.width * Math.abs(i.scaleX), a = i.height * Math.abs(i.scaleY), r = s / 2, h = a / 2, d = i.getCenterPoint(), l = d.x, c = d.y, w = (n.angle || 0) * Math.PI / 180, p = Math.cos(-w), f = Math.sin(-w), X = l - n.centerX, u = c - n.centerY, Y = X * p - u * f, y = X * f + u * p, M = n.originalWidth / 2, x = n.originalHeight / 2, R = Y - r, P = Y + r, v = y - h, S = y + h;
+      return R >= -M && P <= M && v >= -x && S <= x;
+    }, o = () => {
+      const i = this.cropRect, n = 20;
+      let s = i.width * Math.abs(i.scaleX), a = i.height * Math.abs(i.scaleY);
+      s < n && (i.set({ scaleX: n / i.width * (i.scaleX > 0 ? 1 : -1) }), s = n), a < n && (i.set({ scaleY: n / i.height * (i.scaleY > 0 ? 1 : -1) }), a = n);
+      const r = t.originalWidth, h = t.originalHeight;
+      if (s > r && (i.set({ scaleX: r / i.width * (i.scaleX > 0 ? 1 : -1) }), s = r), a > h && (i.set({ scaleY: h / i.height * (i.scaleY > 0 ? 1 : -1) }), a = h), !e(i, t)) {
+        s = i.width * Math.abs(i.scaleX), a = i.height * Math.abs(i.scaleY);
+        const d = s / 2, l = a / 2, c = i.getCenterPoint(), m = c.x, w = c.y, f = (t.angle || 0) * Math.PI / 180, X = Math.cos(-f), u = Math.sin(-f), Y = m - t.centerX, y = w - t.centerY, M = Y * X - y * u, x = Y * u + y * X, R = r / 2, P = h / 2, v = R - d, S = P - l, H = Math.max(-v, Math.min(v, M)), I = Math.max(-S, Math.min(S, x)), A = t.centerX + (H * Math.cos(f) - I * Math.sin(f)), k = t.centerY + (H * Math.sin(f) + I * Math.cos(f));
+        i.setPositionByOrigin(new C.Point(A, k), "center", "center");
+      }
+      i.setCoords(), this._updateOverlayClipPath(t);
+    }, g = () => {
+      const i = this.cropRect;
+      if (!e(i, t)) {
+        const s = (t.angle || 0) * Math.PI / 180, a = Math.cos(-s), r = Math.sin(-s), h = i.width * Math.abs(i.scaleX), d = i.height * Math.abs(i.scaleY), l = h / 2, c = d / 2, m = i.getCenterPoint(), w = m.x, p = m.y, f = w - t.centerX, X = p - t.centerY, u = f * a - X * r, Y = f * r + X * a, y = t.originalWidth / 2 - l, M = t.originalHeight / 2 - c, x = Math.max(-y, Math.min(y, u)), R = Math.max(-M, Math.min(M, Y)), P = t.centerX + (x * Math.cos(s) - R * Math.sin(s)), v = t.centerY + (x * Math.sin(s) + R * Math.cos(s));
+        i.setPositionByOrigin(new C.Point(P, v), "center", "center"), i.setCoords();
+      }
+      this._updateOverlayClipPath(t);
+    };
+    this.cropRect.on("scaling", o), this.cropRect.on("moving", g), this.cropRect.on("deselected", () => this.editor.events.emit("design:hideCrop"));
+  }
+  /**
+   * 清除裁剪框
+   */
+  clearCropRect(t) {
+    this.cropRect && (this.editor.canvas.remove(this.cropRect), this.editor.canvas.remove(this.overlay), this.cropRect = null, this.overlay = null, this.editor.canvas.requestRenderAll(), t.set({ selectable: !0, evented: !0 }));
+  }
+  /**
+   * 显示裁剪框
+   */
+  async showCropRect() {
+    const t = this.editor.activeObject;
+    if (!t) return;
+    t.set({ selectable: !1, evented: !1 });
+    const e = F(), o = t.angle || 0, g = o * Math.PI / 180, i = t.width * Math.abs(t.scaleX), n = t.height * Math.abs(t.scaleY), s = t.getCenterPoint(), a = s.x, r = s.y, h = Math.cos(g), d = Math.sin(g), l = i / 2, c = n / 2, m = [
+      { x: -l, y: -c },
+      { x: l, y: -c },
+      { x: l, y: c },
+      { x: -l, y: c }
+    ].map((M) => ({
+      x: a + M.x * h - M.y * d,
+      y: r + M.x * d + M.y * h
+    })), w = m.map((M) => M.x), p = m.map((M) => M.y), f = Math.min(...w), X = Math.min(...p), u = Math.max(...w), Y = Math.max(...p), y = {
+      scaleX: t.scaleX,
+      scaleY: t.scaleY,
+      left: f,
+      top: X,
+      right: u,
+      bottom: Y,
+      width: u - f,
+      height: Y - X,
+      angle: o,
+      // 保存原始图片信息（用于计算）
+      centerX: a,
+      centerY: r,
+      originalWidth: i,
+      originalHeight: n
+    };
+    this.cropRect = new C.Rect({
+      angle: t.angle,
+      id: "cropRect",
+      left: t.left,
+      top: t.top,
+      width: t.width,
+      height: t.height,
+      scaleX: t.scaleX,
+      scaleY: t.scaleY,
+      fill: "transparent",
+      strokeWidth: 0,
+      excludeHistory: !0,
+      lockRotation: !0,
+      controls: e,
+      originX: "left",
+      originY: "top"
+    }), this.overlay = new C.Rect({
+      id: "cropOverlay",
+      left: y.left,
+      top: y.top,
+      width: y.width,
+      height: y.height,
+      strokeWidth: 0,
+      fill: "#fff",
+      opacity: 0.8,
+      selectable: !1,
+      evented: !1,
+      excludeHistory: !0,
+      originX: "left",
+      originY: "top"
+    }), this._startCropListener(y), this._updateOverlayClipPath(y), this.editor.canvas.add(this.overlay), this.editor.canvas.add(this.cropRect), this.editor.canvas.bringToFront(this.overlay), this.editor.canvas.bringToFront(this.cropRect), this.editor.canvas.setActiveObject(this.cropRect), this.editor.canvas.requestRenderAll();
+  }
+  /** 对图片进行裁剪 */
+  async onCrop(t) {
+    if (!this.cropRect) return;
+    const e = this.cropRect, o = t.getElement(), g = t.width * Math.abs(t.scaleX), i = t.height * Math.abs(t.scaleY), n = t.angle || 0, s = n * Math.PI / 180, a = t.getCenterPoint(), r = a.x, h = a.y, d = e.width * Math.abs(e.scaleX), l = e.height * Math.abs(e.scaleY), c = e.getCenterPoint(), m = c.x, w = c.y;
+    try {
+      let p, f;
+      o && o.naturalWidth ? (p = o.naturalWidth, f = o.naturalHeight) : o && o.width ? (p = o.width, f = o.height) : (p = t.width, f = t.height);
+      const X = g / p, u = i / f, Y = m - r, y = w - h, M = Math.cos(-s), x = Math.sin(-s), R = Y * M - y * x, P = Y * x + y * M, v = {
+        x: p / 2,
+        y: f / 2
+      }, S = {
+        x: v.x + R / X,
+        y: v.y + P / u
+      }, H = d / X, I = l / u, A = S.x - H / 2, k = S.y - I / 2, E = t.getSrc ? t.getSrc() : t.getElement() ? t.getElement().src : t.originSrc || "", U = await b(E), W = document.createElement("canvas");
+      W.width = Math.round(H), W.height = Math.round(I), W.getContext("2d").drawImage(
+        U.getElement(),
+        Math.round(A),
+        Math.round(k),
+        Math.round(H),
+        Math.round(I),
+        0,
+        0,
+        Math.round(H),
+        Math.round(I)
+      );
+      const _ = await new Promise((z, q) => {
+        W.toBlob((T) => T ? z(T) : q(new Error("toBlob failed")), "image/png", 1);
+      }), G = URL.createObjectURL(_), L = await b(G);
+      L.set({
+        scaleX: t.scaleX,
+        scaleY: t.scaleY,
+        angle: n,
+        name: t.name,
+        id: t.id,
+        originX: "left",
+        originY: "top"
+      }), this.editor.registerImageCache(G, L, G), L.cropBlob = _, L.isCropped = !0, L.setPositionByOrigin(new C.Point(m, w), "center", "center"), this.editor.canvas.remove(t), this.editor.canvas.add(L), this.editor.canvas.setActiveObject(L), this.editor.canvas.requestRenderAll(), this.editor.canvas.fire("object:added", { target: L });
+    } catch (p) {
+      console.error("裁剪过程发生错误:", p);
+    }
+  }
+  _calcOuterClipPath(t) {
+    const e = this.cropRect, o = e.width * Math.abs(e.scaleX), g = e.height * Math.abs(e.scaleY), n = (e.angle || 0) * Math.PI / 180, s = e.getCenterPoint(), a = s.x, r = s.y, h = o / 2, d = g / 2, l = Math.cos(n), c = Math.sin(n), m = [
+      { x: -h, y: -d },
+      { x: -h, y: d },
+      { x: h, y: d },
+      { x: h, y: -d }
+    ].map((p) => ({
+      x: a + p.x * l - p.y * c,
+      y: r + p.x * c + p.y * l
+    }));
+    return [
+      `M ${t.left} ${t.top}`,
+      `L ${t.right} ${t.top}`,
+      `L ${t.right} ${t.bottom}`,
+      `L ${t.left} ${t.bottom}`,
+      "Z",
+      `M ${m[0].x} ${m[0].y}`,
+      `L ${m[1].x} ${m[1].y}`,
+      `L ${m[2].x} ${m[2].y}`,
+      `L ${m[3].x} ${m[3].y}`,
+      "Z"
+    ].join(" ");
+  }
+  _updateOverlayClipPath(t) {
+    if (!this.cropRect || !this.overlay) return;
+    const e = this._calcOuterClipPath(t), o = new C.Path(e);
+    o.set({
+      fill: "white",
+      absolutePositioned: !0
+    }), this.overlay.set({
+      clipPath: o
+    }), this.editor.canvas.requestRenderAll();
+  }
+}
+export {
+  tt as ImageProcessor,
+  tt as default
+};

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

@@ -0,0 +1,45 @@
+import fabric from '../fabric';
+import '../../fabric-types';
+import type { RenderableBox } from '../types';
+import type { TemplateBaseInfo, TemplateData } from '../../contracts/api-design';
+import type { Editor } from '../editor';
+/**
+ * 模板处理
+ *
+ * Produces and consumes the same template payload the existing Printine
+ * `user-templates` and `template-categories` endpoints already exchange.
+ */
+export declare class TemplateProcessor {
+    private editor;
+    constructor(editor: Editor);
+    /**
+     * 获取当前选中的对象，将其组合转为临时模板
+     */
+    saveAsTemplate(): Promise<TemplateData | null>;
+    /**
+     * 计算选中对象的总边界框
+     */
+    _getSelectionBoundingBox(objects: fabric.Object[]): RenderableBox | null;
+    /**
+     * 计算对象相对于边界框的位置
+     */
+    _calculateRelativePosition(obj: fabric.Object, boundingBox: RenderableBox): {
+        left: number;
+        top: number;
+    };
+    /**
+     * 生成预览图片
+     */
+    _generatePreviewImage(objects: fabric.Object[], boundingBox: RenderableBox): Promise<string | null>;
+    /**
+     * 将带裁剪的图片对象栅格化为裁剪后的位图
+     * 离屏画布尺寸按裁剪外接框（非整图），避免透明区域“占位置”
+     * 返回的数据中的 left/top 为模板局部坐标（相对 boundingBox 左上角）
+     */
+    private _rasterizeClippedImage;
+    /**
+     * 将模板添加到画布中
+     */
+    addTemplate(template: TemplateBaseInfo): Promise<void>;
+}
+export default TemplateProcessor;