@printine/designer 0.1.0

package/dist/engine/canvas-designer.d.ts

@@ -0,0 +1,101 @@
+import { fabric } from 'fabric';
+import '../fabric-types';
+import type { Mockup, TemplateBaseInfo } from '../contracts/api-design';
+import type { FontStyle } from '../contracts/design';
+export type CanvasDesignState = Record<string, unknown> & {
+    objects?: unknown[];
+    background?: string;
+};
+export interface CanvasDesignerOptions {
+    canvas: HTMLCanvasElement;
+    width: number;
+    height: number;
+    overlayScale?: number;
+    onChange?: () => void;
+}
+export interface PlacementPreviewOptions {
+    placements: Mockup[];
+    designData: Record<string, CanvasDesignState>;
+    backgroundColor?: string;
+    width?: number;
+    height?: number;
+}
+/**
+ * Framework-independent Fabric runtime used by `PrintineDesigner`.
+ *
+ * It deliberately stores the same Fabric JSON shape that the existing
+ * `products/design-save` endpoint already receives, so a host never needs to
+ * translate editor data before saving it.
+ */
+export declare class CanvasDesigner {
+    readonly canvas: fabric.Canvas;
+    private readonly onChange?;
+    private readonly overlayScale;
+    private placement?;
+    private placementStates;
+    private history;
+    private future;
+    private isRestoring;
+    private cropTarget?;
+    private cropRect?;
+    constructor({ canvas, width, height, overlayScale, onChange }: CanvasDesignerOptions);
+    get activeObject(): fabric.Object | null;
+    get currentPlacement(): Mockup | undefined;
+    get isCropping(): boolean;
+    resize(width: number, height: number): void;
+    switchPlacement(placement: Mockup, color?: string, state?: CanvasDesignState): Promise<void>;
+    setBackground(color: string): Promise<void>;
+    addText(config?: {
+        text?: string;
+        fontFamily?: string;
+        fontSize?: number;
+        fill?: string;
+        fontPath?: string;
+        fontWeight?: number;
+        fontStyle?: FontStyle;
+    }): Promise<fabric.AdvancedIText>;
+    addImage(url: string, name?: string): Promise<fabric.Image>;
+    addSvg(url: string, name?: string): Promise<fabric.Group>;
+    addFile(file: File): Promise<fabric.Image | fabric.Group>;
+    /** Adds a saved Printine template without converting its existing JSON contract. */
+    addTemplate(template: TemplateBaseInfo): Promise<void>;
+    deleteActive(): void;
+    /** Starts a non-destructive Fabric clip-path crop for the selected bitmap image. */
+    beginCrop(): boolean;
+    applyCrop(): boolean;
+    cancelCrop(): boolean;
+    duplicateActive(): void;
+    bringForward(): void;
+    sendBackwards(): void;
+    setActiveFill(fill: string): void;
+    setActiveTextStyle(config: {
+        fontFamily: string;
+        fontPath?: string;
+        fontWeight?: number;
+        fontStyle?: FontStyle;
+    }): Promise<boolean>;
+    setActiveTextCurve(radius: number, spacing?: number): boolean;
+    getDesignData(): {
+        [k: string]: CanvasDesignState;
+    };
+    setDesignData(data: Record<string, CanvasDesignState>): void;
+    exportPreview(): string;
+    undo(): Promise<void>;
+    redo(): Promise<void>;
+    destroy(): void;
+    private renderOverlay;
+    private placeImage;
+    private persistCurrentPlacement;
+    private readState;
+    private serializeCanvas;
+    private recordChange;
+    private restoreSerialized;
+    private loadState;
+    private removeCropRect;
+}
+/**
+ * Renders every printable placement in an offscreen Fabric canvas. The result
+ * is keyed by both placement name and id so it can feed existing 2D and 3D
+ * render area contracts without a host-side translation layer.
+ */
+export declare function renderPlacementPreviews({ placements, designData, backgroundColor, width, height, }: PlacementPreviewOptions): Promise<Record<string, string>>;

package/dist/engine/canvas-designer.js

@@ -0,0 +1,313 @@
+import { fabric as h } from "fabric";
+import { loadImage as d, loadSvgImage as f, loadOverlaySvgImage as p } from "./utils/image.js";
+import { setDefaultControls as m } from "./utils/setting.js";
+import { loadFontface as u } from "./utils/font.js";
+class y {
+  constructor({ canvas: t, width: e, height: s, overlayScale: i = 0.85, onChange: n }) {
+    this.placementStates = /* @__PURE__ */ new Map(), this.history = [], this.future = [], this.isRestoring = !1, m(), this.canvas = new h.Canvas(t, {
+      enableRetinaScaling: !0,
+      width: e,
+      height: s,
+      preserveObjectStacking: !0,
+      centeredRotation: !0,
+      hoverCursor: "grab",
+      moveCursor: "grabbing",
+      selection: !0,
+      controlsAboveOverlay: !0,
+      fireRightClick: !0
+    }), this.onChange = n, this.overlayScale = i;
+    const a = () => this.recordChange();
+    this.canvas.on("object:added", a), this.canvas.on("object:modified", a), this.canvas.on("object:removed", a), this.canvas.on("text:changed", a), this.recordChange();
+  }
+  get activeObject() {
+    return this.canvas.getActiveObject();
+  }
+  get currentPlacement() {
+    return this.placement;
+  }
+  get isCropping() {
+    return !!this.cropRect;
+  }
+  resize(t, e) {
+    this.canvas.setDimensions({ width: t, height: e }), this.placement && this.renderOverlay(this.placement);
+  }
+  async switchPlacement(t, e = "", s) {
+    this.cropRect && this.applyCrop(), this.persistCurrentPlacement(), this.placement = t, this.isRestoring = !0, this.canvas.clear(), await this.setBackground(e), await this.renderOverlay(t);
+    const i = s ?? this.placementStates.get(t.name);
+    i && await this.loadState(i, !1), this.history = [this.serializeCanvas()], this.future = [], this.isRestoring = !1, this.onChange?.();
+  }
+  async setBackground(t) {
+    await new Promise((e) => this.canvas.setBackgroundColor(t || "transparent", () => e())), this.canvas.requestRenderAll();
+  }
+  async addText(t = {}) {
+    t.fontPath && t.fontFamily && await u({
+      family: t.fontFamily,
+      url: t.fontPath,
+      weight: t.fontWeight || 400,
+      style: t.fontStyle || "normal"
+    });
+    const e = new h.AdvancedIText(t.text || "Entry Text", {
+      left: this.canvas.getWidth() / 2,
+      top: this.canvas.getHeight() / 2,
+      originX: "center",
+      originY: "center",
+      fontFamily: t.fontFamily || "Arial",
+      fontWeight: t.fontWeight || 400,
+      fontStyle: t.fontStyle || "normal",
+      fontPath: t.fontPath || "",
+      fontSize: t.fontSize || 32,
+      fill: t.fill || "#111827",
+      editable: !0
+    });
+    return this.canvas.add(e), this.canvas.setActiveObject(e), this.canvas.requestRenderAll(), e.enterEditing().selectAll(), e;
+  }
+  async addImage(t, e) {
+    const s = await d(t);
+    return this.placeImage(s, t, e), s;
+  }
+  async addSvg(t, e) {
+    const s = await f(t);
+    return this.placeImage(s, t, e), s;
+  }
+  async addFile(t) {
+    const e = await new Promise((s, i) => {
+      const n = new FileReader();
+      n.onload = () => s(String(n.result)), n.onerror = () => i(n.error || new Error("Unable to read image file")), n.readAsDataURL(t);
+    });
+    return t.type === "image/svg+xml" || t.name.toLowerCase().endsWith(".svg") ? this.addSvg(e, t.name) : this.addImage(e, t.name);
+  }
+  /** Adds a saved Printine template without converting its existing JSON contract. */
+  async addTemplate(t) {
+    if (!t.areaWidth || !t.areaHeight) return;
+    const e = Math.min(
+      1,
+      this.canvas.getWidth() * 0.7 / t.areaWidth,
+      this.canvas.getHeight() * 0.7 / t.areaHeight
+    ), s = (this.canvas.getWidth() - t.areaWidth * e) / 2, i = (this.canvas.getHeight() - t.areaHeight * e) / 2, n = [];
+    for (const a of t.elements) {
+      const r = a.position;
+      if (a.text) {
+        const l = await this.addText({
+          text: a.text.text,
+          fontFamily: a.text.fontFamily,
+          fontPath: a.text.fontPath,
+          fontWeight: typeof a.text.fontWeight == "number" ? a.text.fontWeight : Number(a.text.fontWeight) || 400,
+          fontStyle: a.text.fontStyle,
+          fontSize: Math.max(8, a.text.fontSize * e),
+          fill: a.text.color
+        });
+        l.set({
+          left: s + r.left * e,
+          top: i + r.top * e,
+          originX: "left",
+          originY: "top",
+          angle: r.rotation || 0,
+          scaleX: e,
+          scaleY: e
+        }), n.push(l);
+        continue;
+      }
+      if (!a.image?.url) continue;
+      const c = a.image.url, o = c.toLowerCase().includes(".svg") || c.startsWith("data:image/svg") ? await f(c) : await d(c);
+      o.set({
+        left: s + r.left * e,
+        top: i + r.top * e,
+        originX: "left",
+        originY: "top",
+        angle: r.rotation || 0,
+        scaleX: e,
+        scaleY: e,
+        flipX: a.image.flipX || !1,
+        flipY: a.image.flipY || !1,
+        originSrc: c
+      }), this.canvas.add(o), n.push(o);
+    }
+    n.length > 1 ? this.canvas.setActiveObject(new h.ActiveSelection(n, { canvas: this.canvas })) : n[0] && this.canvas.setActiveObject(n[0]), this.canvas.requestRenderAll();
+  }
+  deleteActive() {
+    const t = this.canvas.getActiveObjects();
+    t.length && (t.forEach((e) => this.canvas.remove(e)), this.canvas.discardActiveObject(), this.canvas.requestRenderAll());
+  }
+  /** Starts a non-destructive Fabric clip-path crop for the selected bitmap image. */
+  beginCrop() {
+    const t = this.canvas.getActiveObject();
+    if (!t || t.type !== "image" || this.cropRect) return !1;
+    const e = t, s = e.getBoundingRect(!0, !0), i = new h.Rect({
+      left: s.left,
+      top: s.top,
+      width: s.width,
+      height: s.height,
+      fill: "rgba(53, 64, 165, 0.08)",
+      stroke: "#3540a5",
+      strokeWidth: 2,
+      strokeDashArray: [6, 4],
+      originX: "left",
+      originY: "top",
+      lockRotation: !0,
+      name: "__printine_crop__",
+      excludeFromExport: !0
+    });
+    return e.set({ selectable: !1, evented: !1 }), this.cropTarget = e, this.cropRect = i, this.canvas.add(i), this.canvas.setActiveObject(i), this.canvas.requestRenderAll(), !0;
+  }
+  applyCrop() {
+    const t = this.cropTarget, e = this.cropRect;
+    if (!t || !e) return !1;
+    const s = new h.Rect({
+      left: e.left,
+      top: e.top,
+      width: e.width,
+      height: e.height,
+      scaleX: e.scaleX,
+      scaleY: e.scaleY,
+      angle: e.angle,
+      originX: e.originX,
+      originY: e.originY,
+      selectable: !1,
+      evented: !1,
+      fill: "#000",
+      absolutePositioned: !0
+    });
+    return t.set({ clipPath: s, selectable: !0, evented: !0 }), this.removeCropRect(), this.canvas.setActiveObject(t), this.canvas.requestRenderAll(), this.recordChange(), !0;
+  }
+  cancelCrop() {
+    const t = this.cropTarget;
+    return !this.cropRect || !t ? !1 : (t.set({ selectable: !0, evented: !0 }), this.removeCropRect(), this.canvas.setActiveObject(t), this.canvas.requestRenderAll(), !0);
+  }
+  duplicateActive() {
+    const t = this.canvas.getActiveObject();
+    t && t.clone((e) => {
+      e.set({ left: (e.left || 0) + 16, top: (e.top || 0) + 16 }), this.canvas.add(e), this.canvas.setActiveObject(e), this.canvas.requestRenderAll();
+    }, ["id", "originSrc", "fontPath", "radius", "spacing"]);
+  }
+  bringForward() {
+    const t = this.canvas.getActiveObject();
+    t && this.canvas.bringForward(t), this.canvas.requestRenderAll();
+  }
+  sendBackwards() {
+    const t = this.canvas.getActiveObject();
+    t && this.canvas.sendBackwards(t), this.canvas.requestRenderAll();
+  }
+  setActiveFill(t) {
+    const e = this.canvas.getActiveObject();
+    e && (e.set("fill", t), this.canvas.requestRenderAll(), this.recordChange());
+  }
+  async setActiveTextStyle(t) {
+    const e = this.canvas.getActiveObject();
+    return !e || !e.type?.includes("text") ? !1 : (t.fontPath && await u({
+      family: t.fontFamily,
+      url: t.fontPath,
+      weight: t.fontWeight || 400,
+      style: t.fontStyle || "normal"
+    }), e.set({
+      fontFamily: t.fontFamily,
+      fontPath: t.fontPath || "",
+      fontWeight: t.fontWeight || 400,
+      fontStyle: t.fontStyle || "normal"
+    }), this.canvas.requestRenderAll(), this.recordChange(), !0);
+  }
+  setActiveTextCurve(t, e = 0) {
+    const s = this.canvas.getActiveObject();
+    return !s || s.type !== "advanced-i-text" ? !1 : (s.set({ radius: t, spacing: e }), s.setCoords(), this.canvas.requestRenderAll(), this.recordChange(), !0);
+  }
+  getDesignData() {
+    return this.cropRect && this.applyCrop(), this.persistCurrentPlacement(), Object.fromEntries(this.placementStates.entries());
+  }
+  setDesignData(t) {
+    this.placementStates = new Map(Object.entries(t));
+  }
+  exportPreview() {
+    return this.canvas.toDataURL({ format: "png", multiplier: 2, enableRetinaScaling: !0 });
+  }
+  async undo() {
+    if (this.history.length < 2) return;
+    const t = this.history.pop();
+    t && this.future.push(t);
+    const e = this.history[this.history.length - 1];
+    e && await this.restoreSerialized(e);
+  }
+  async redo() {
+    const t = this.future.pop();
+    t && (this.history.push(t), await this.restoreSerialized(t));
+  }
+  destroy() {
+    this.cancelCrop(), this.placementStates.clear(), this.history = [], this.future = [], this.canvas.dispose();
+  }
+  async renderOverlay(t) {
+    const { image: e } = await p(t.image), s = Math.min(this.canvas.getWidth(), this.canvas.getHeight()) * this.overlayScale, i = Math.min(s / (e.width || 1), s / (e.height || 1));
+    e.set({
+      scaleX: i,
+      scaleY: i,
+      left: (this.canvas.getWidth() - (e.width || 0) * i) / 2,
+      top: (this.canvas.getHeight() - (e.height || 0) * i) / 2,
+      selectable: !1,
+      evented: !1
+    }), await new Promise((n) => this.canvas.setOverlayImage(e, () => n())), this.canvas.requestRenderAll();
+  }
+  placeImage(t, e, s) {
+    const i = Math.min(this.canvas.getWidth(), this.canvas.getHeight()) * 0.55, n = t.width || i, a = t.height || i, r = Math.min(1, i / Math.max(n, a));
+    t.set({
+      left: this.canvas.getWidth() / 2,
+      top: this.canvas.getHeight() / 2,
+      originX: "center",
+      originY: "center",
+      scaleX: r,
+      scaleY: r,
+      name: s || e.split("/").pop() || "image",
+      originSrc: e
+    }), this.canvas.add(t), this.canvas.setActiveObject(t), this.canvas.requestRenderAll();
+  }
+  persistCurrentPlacement() {
+    this.placement && this.placementStates.set(this.placement.name, this.readState());
+  }
+  readState() {
+    return {
+      ...this.canvas.toJSON(["id", "name", "originSrc", "fontPath", "radius", "spacing"]),
+      color: typeof this.canvas.backgroundColor == "string" ? this.canvas.backgroundColor : ""
+    };
+  }
+  serializeCanvas() {
+    return JSON.stringify(this.readState());
+  }
+  recordChange() {
+    if (this.isRestoring || this.cropRect) return;
+    const t = this.serializeCanvas();
+    this.history[this.history.length - 1] !== t && (this.history.push(t), this.history.length > 50 && this.history.shift(), this.future = []), this.persistCurrentPlacement(), this.onChange?.();
+  }
+  async restoreSerialized(t) {
+    await this.loadState(JSON.parse(t), !0), this.persistCurrentPlacement(), this.onChange?.();
+  }
+  async loadState(t, e) {
+    this.isRestoring = !0;
+    const s = e ? this.canvas.overlayImage : void 0;
+    await new Promise((i) => this.canvas.loadFromJSON(t, () => i())), s && this.canvas.setOverlayImage(s, () => {
+    }), await this.setBackground(typeof t.color == "string" ? t.color : ""), this.canvas.requestRenderAll(), this.isRestoring = !1;
+  }
+  removeCropRect() {
+    this.cropRect && this.canvas.remove(this.cropRect), this.cropRect = void 0, this.cropTarget = void 0;
+  }
+}
+async function A({
+  placements: v,
+  designData: t,
+  backgroundColor: e = "",
+  width: s = 900,
+  height: i = 900
+}) {
+  const n = document.createElement("canvas"), a = new y({ canvas: n, width: s, height: i, overlayScale: 0.85 }), r = {};
+  try {
+    a.setDesignData(t);
+    for (const c of v) {
+      const o = t[c.name], l = typeof o?.color == "string" ? o.color : e;
+      await a.switchPlacement(c, l, o);
+      const g = a.exportPreview();
+      r[c.name] = g, r[String(c.id)] = g;
+    }
+    return r;
+  } finally {
+    a.destroy();
+  }
+}
+export {
+  y as CanvasDesigner,
+  A as renderPlacementPreviews
+};

package/dist/engine/constants.d.ts

@@ -0,0 +1,27 @@
+import type { DesignerElementType } from './types';
+import { BLEND_MODES } from 'pixi.js';
+/** Fabric helper objects that must never be exposed as editable design layers. */
+export declare const LAYER_BLACK_LIST: string[];
+/** Text sizes offered by the toolbar, expressed as a fraction of the print area. */
+export declare const DEFAULT_FONT_SIZE: number[];
+export declare const ALIGN_TYPES: ('left' | 'center' | 'right')[];
+/** Human labels for the font weight/style variants returned by the fonts endpoint. */
+export declare const FONT_WEIGHT: Record<string, string>;
+export declare const DEFAULT_FILL_COLOR_LIST: string[];
+/** Pixi blend modes accepted by mockup render-area configuration. */
+export declare const BLEND_MODES_MAP: {
+    normal: BLEND_MODES;
+    multiply: BLEND_MODES;
+    screen: BLEND_MODES;
+    overlay: BLEND_MODES;
+    'soft-light': BLEND_MODES;
+    'hard-light': BLEND_MODES;
+    'color-dodge': BLEND_MODES;
+    'color-burn': BLEND_MODES;
+    darken: BLEND_MODES;
+    lighten: BLEND_MODES;
+    difference: BLEND_MODES;
+    exclusion: BLEND_MODES;
+};
+/** Panel titles for each editor tool. */
+export declare const ELEMENT_TITLE_MAP: Record<DesignerElementType, string>;

package/dist/engine/constants.js

@@ -0,0 +1,148 @@
+import { BLEND_MODES as E } from "pixi.js";
+const t = ["cropRect", "cropOverlay", "workspace", "loading", "bg"], i = [0.01, 0.02, 0.03, 0.04, 0.05, 0.07, 0.09, 0.1, 0.12], a = ["left", "center", "right"], l = {
+  100: "Thin",
+  200: "Extra Light",
+  300: "Light",
+  400: "Regular",
+  500: "Medium",
+  600: "Semi Bold",
+  700: "Bold",
+  800: "Extra Bold",
+  900: "Black",
+  "100italic": "Thin Italic",
+  "200italic": "Extra Light Italic",
+  "300italic": "Light Italic",
+  "400italic": "Italic",
+  "500italic": "Medium Italic",
+  "600italic": "Semi Bold Italic",
+  "700italic": "Bold Italic",
+  "800italic": "Extra Bold Italic",
+  "900italic": "Black Italic"
+}, B = [
+  "#000000",
+  "#FFFFFF",
+  "#FAFAFA",
+  "#F5F5F5",
+  "#EEEEEE",
+  "#E0E0E0",
+  "#BDBDBD",
+  "#9E9E9E",
+  "#757575",
+  "#616161",
+  "#424242",
+  "#FFEbEE",
+  "#FFCDD2",
+  "#EF9A9A",
+  "#E57373",
+  "#EF5350",
+  "#F44336",
+  "#E53935",
+  "#D32F2F",
+  "#C62828",
+  "#B71C1C",
+  "#FCE4EC",
+  "#F8BBD9",
+  "#F48FB1",
+  "#F06292",
+  "#EC407A",
+  "#E91E63",
+  "#D81B60",
+  "#C2185B",
+  "#AD1457",
+  "#880E4F",
+  "#FFF3E0",
+  "#FFE0B2",
+  "#FFCC80",
+  "#FFB74D",
+  "#FFA726",
+  "#FF9800",
+  "#FB8C00",
+  "#F57C00",
+  "#EF6C00",
+  "#E65100",
+  "#EFEBE9",
+  "#D7CCC8",
+  "#BCAAA4",
+  "#A1887F",
+  "#8D6E63",
+  "#795548",
+  "#6D4C41",
+  "#5D4037",
+  "#4E342E",
+  "#3E2723",
+  "#E8F5E8",
+  "#C8E6C9",
+  "#A5D6A7",
+  "#81C784",
+  "#66BB6A",
+  "#4CAF50",
+  "#43A047",
+  "#388E3C",
+  "#2E7D32",
+  "#1B5E20",
+  "#E0F2F1",
+  "#B2DFDB",
+  "#80CBC4",
+  "#4DB6AC",
+  "#26A69A",
+  "#009688",
+  "#00897B",
+  "#00796B",
+  "#00695C",
+  "#004D40",
+  "#E3F2FD",
+  "#BBDEFB",
+  "#90CAF9",
+  "#64B5F6",
+  "#42A5F5",
+  "#2196F3",
+  "#1E88E5",
+  "#1976D2",
+  "#1565C0",
+  "#0D47A1",
+  "#F3E5F5",
+  "#E1BEE7",
+  "#CE93D8",
+  "#BA68C8",
+  "#AB47BC",
+  "#9C27B0",
+  "#8E24AA",
+  "#7B1FA2",
+  "#6A1B9A",
+  "#4A148C"
+], c = {
+  normal: E.NORMAL,
+  multiply: E.MULTIPLY,
+  screen: E.SCREEN,
+  overlay: E.OVERLAY,
+  "soft-light": E.SOFT_LIGHT,
+  "hard-light": E.HARD_LIGHT,
+  "color-dodge": E.COLOR_DODGE,
+  "color-burn": E.COLOR_BURN,
+  darken: E.DARKEN,
+  lighten: E.LIGHTEN,
+  difference: E.DIFFERENCE,
+  exclusion: E.EXCLUSION
+}, e = {
+  product: "Product information",
+  shapes: "Shapes",
+  images: "Upload images",
+  text: "Text",
+  textEffects: "Text effects",
+  layer: "Layers",
+  templates: "Designs",
+  clipart: "Clipart",
+  ai: "AI image generator",
+  files: "My files",
+  background: "Background color",
+  sca: "Custom"
+};
+export {
+  a as ALIGN_TYPES,
+  c as BLEND_MODES_MAP,
+  B as DEFAULT_FILL_COLOR_LIST,
+  i as DEFAULT_FONT_SIZE,
+  e as ELEMENT_TITLE_MAP,
+  l as FONT_WEIGHT,
+  t as LAYER_BLACK_LIST
+};