@printine/designer 0.1.0

package/dist/engine/managers/snapline.js

@@ -0,0 +1,124 @@
+const d = (u) => Math.floor(u) + 0.5;
+class Y {
+  constructor() {
+    this.horizontalLine = null, this.verticalLine = null, this.objectsVerticalLines = [], this.objectsHorizontalLines = [], this.snapThreshold = 5, this.snapThresholdForObject = 2, this.isSnapping = !1, this.snappedLineTypes = {
+      left: !1,
+      top: !1,
+      bottom: !1,
+      right: !1,
+      centerX: !1,
+      centerY: !1
+    };
+  }
+  clearGuideLines() {
+    this.horizontalLine = null, this.verticalLine = null, this.objectsVerticalLines = [], this.objectsHorizontalLines = [];
+  }
+  drawGuideLines(e) {
+    this.horizontalLine && this.verticalLine && (Object.keys(this.horizontalLine).forEach((t) => {
+      this.drawAlignLine(e, t, this.horizontalLine[t]);
+    }), Object.keys(this.verticalLine).forEach((t) => {
+      this.drawAlignLine(e, t, this.verticalLine[t]);
+    })), this.objectsHorizontalLines.forEach((t) => this.drawObjectGuideLine(e, [t.start, t.pos, t.end, t.pos])), this.objectsVerticalLines.forEach((t) => this.drawObjectGuideLine(e, [t.pos, t.start, t.pos, t.end]));
+  }
+  drawAlignLine(e, t, h) {
+    e.save(), e.strokeStyle = "#C9CACC", this.snappedLineTypes[t] ? e.strokeStyle = "#F35B37" : e.setLineDash([5, 4]), e.lineWidth = 1.5, e.beginPath(), e.moveTo(h[0], h[1]), e.lineTo(h[2], h[3]), e.stroke(), e.restore();
+  }
+  drawObjectGuideLine(e, t) {
+    e.save(), e.strokeStyle = "rgb(255, 0, 119)", e.lineWidth = 1, e.beginPath(), e.moveTo(d(t[0]), d(t[1])), e.lineTo(d(t[2]), d(t[3])), e.stroke();
+  }
+  showGuideLines(e) {
+    if (this.horizontalLine || this.verticalLine) return;
+    const t = this.generateGuideLines(e);
+    this.horizontalLine = { top: t.top, centerX: t.centerX, bottom: t.bottom }, this.verticalLine = { left: t.left, centerY: t.centerY, right: t.right };
+  }
+  snapToGuidelines(e, t, h) {
+    const s = e.viewportTransform, a = this.calcGuidePositions(h, s);
+    this.showGuideLines(a);
+    const i = this.calcObjectDimensions(t, s);
+    if (this.checkSnapConditionsForAllObjects({ canvas: e, currentObject: t, currentObjectDimension: i }), this.isSnapping) return;
+    const { newLeft: l, newTop: r } = this.checkSnapConditions(i, a, s);
+    if (l !== i.left || r !== i.top) {
+      this.isSnapping = !0;
+      const f = (l - s[4]) / s[0], L = (r - s[5]) / s[3], o = t.getBoundingRect(!0, !0);
+      t.set({ left: t.left + f - o.left, top: t.top + L - o.top }), t.setCoords();
+    }
+    requestAnimationFrame(() => {
+      this.isSnapping = !1;
+    });
+  }
+  snapToObjectGuideLines(e, t) {
+    this.checkSnapConditionsForAllObjects({
+      canvas: e,
+      currentObject: t,
+      currentObjectDimension: this.calcObjectDimensions(t, e.viewportTransform),
+      snap: !1
+    });
+  }
+  calcGuidePositions(e, t) {
+    return {
+      left: e.left * t[0] + t[4],
+      right: e.right * t[0] + t[4],
+      top: e.top * t[3] + t[5],
+      bottom: e.bottom * t[3] + t[5],
+      centerX: e.center.x * t[0] + t[4],
+      centerY: e.center.y * t[3] + t[5]
+    };
+  }
+  calcObjectDimensions(e, t) {
+    const h = e.getBoundingRect(!0, !0), s = h.left * t[0] + t[4], a = h.top * t[3] + t[5], i = h.width * t[0], l = h.height * t[3];
+    return { width: h.width, height: h.height, left: s, top: a, right: s + i, bottom: a + l, centerX: s + i / 2, centerY: a + l / 2 };
+  }
+  generateGuideLines(e) {
+    return {
+      left: [e.left, e.top, e.left, e.bottom],
+      right: [e.right, e.top, e.right, e.bottom],
+      centerX: [e.centerX, e.top, e.centerX, e.bottom],
+      top: [e.left, e.top, e.right, e.top],
+      bottom: [e.left, e.bottom, e.right, e.bottom],
+      centerY: [e.left, e.centerY, e.right, e.centerY]
+    };
+  }
+  checkSnapConditions(e, t, h) {
+    let s = e.left, a = e.top;
+    const i = this.snapThreshold;
+    return Math.abs(e.left - t.left) < i ? (s = t.left, this.snappedLineTypes.left = !0) : this.snappedLineTypes.left = !1, Math.abs(e.right - t.right) < i ? (s = t.right - e.width * h[0], this.snappedLineTypes.right = !0) : this.snappedLineTypes.right = !1, Math.abs(e.centerX - t.centerX) < i ? (s = t.centerX - e.width * h[0] / 2, this.snappedLineTypes.centerX = !0) : this.snappedLineTypes.centerX = !1, Math.abs(e.top - t.top) < i ? (a = t.top, this.snappedLineTypes.top = !0) : this.snappedLineTypes.top = !1, Math.abs(e.bottom - t.bottom) < i ? (a = t.bottom - e.height * h[3], this.snappedLineTypes.bottom = !0) : this.snappedLineTypes.bottom = !1, Math.abs(e.centerY - t.centerY) < i ? (a = t.centerY - e.height * h[3] / 2, this.snappedLineTypes.centerY = !0) : this.snappedLineTypes.centerY = !1, t.left - e.right >= 0 && (s = t.left - e.width * h[0]), t.right - e.left <= 0 && (s = t.right), t.top - e.bottom >= 0 && (a = t.top - e.height * h[3]), t.bottom - e.top <= 0 && (a = t.bottom), { newLeft: s, newTop: a };
+  }
+  checkSnapConditionsForAllObjects({ canvas: e, currentObject: t, currentObjectDimension: h, snap: s = !0 }) {
+    this.objectsHorizontalLines = [], this.objectsVerticalLines = [];
+    const a = [], i = [], l = s ? this.snapThresholdForObject : 1;
+    let r = l + 1, f = l + 1, L = 0, o = 0, m = h.top, M = h.left;
+    const y = { left: h.left, center: h.centerX, right: h.right }, X = { top: h.top, center: h.centerY, bottom: h.bottom };
+    e._objects.forEach((b) => {
+      if (b === t || b.excludeHistory || !b.visible || !b.isOnScreen()) return;
+      const n = this.calcObjectDimensions(b, e.viewportTransform);
+      [n.left, n.centerX, n.right].forEach((g) => {
+        Object.values(y).forEach((p) => {
+          const c = p - g;
+          Math.abs(c) < r && (r = Math.abs(c), L = c, a.length = 0), Math.abs(c) === r && a.push({ pos: g, min: n.top, max: n.bottom });
+        });
+      }), [n.top, n.centerY, n.bottom].forEach((g) => {
+        Object.values(X).forEach((p) => {
+          const c = p - g;
+          Math.abs(c) < f && (f = Math.abs(c), o = c, i.length = 0), Math.abs(c) === f && i.push({ pos: g, min: n.left, max: n.right });
+        });
+      });
+    }), r <= l && s && (t.set({ left: t.left - L }), M -= L), f <= l && s && (t.set({ top: t.top - o }), m -= o), r <= l && this.addVerticalObjectLines(a, m, h.height), f <= l && this.addHorizontalObjectLines(i, M, h.width);
+  }
+  addVerticalObjectLines(e, t, h) {
+    const s = /* @__PURE__ */ new Map();
+    e.forEach((a) => {
+      const i = s.get(a.pos) ?? { min: t, max: t + h };
+      i.min = Math.min(i.min, a.min), i.max = Math.max(i.max, a.max), s.set(a.pos, i);
+    }), s.forEach((a, i) => this.objectsVerticalLines.push({ pos: i, start: a.min, end: a.max }));
+  }
+  addHorizontalObjectLines(e, t, h) {
+    const s = /* @__PURE__ */ new Map();
+    e.forEach((a) => {
+      const i = s.get(a.pos) ?? { min: t, max: t + h };
+      i.min = Math.min(i.min, a.min), i.max = Math.max(i.max, a.max), s.set(a.pos, i);
+    }), s.forEach((a, i) => this.objectsHorizontalLines.push({ pos: i, start: a.min, end: a.max }));
+  }
+}
+export {
+  Y as SnaplineManager
+};

package/dist/engine/managers/workspace.d.ts

@@ -0,0 +1,26 @@
+import { fabric } from 'fabric';
+import type { PrintArea, RenderableBox, Size } from '../types';
+export interface WorkspaceEditor {
+    canvas: fabric.Canvas;
+}
+export interface WorkspaceManagerOptions {
+    /** Public path or CDN URL for the transparent-background SVG asset. */
+    transparentPatternUrl?: string;
+    dpi?: number;
+}
+/** Owns the printable Fabric clip path and its physical print-area mapping. */
+export declare class WorkspaceManager {
+    private readonly editor;
+    workspace: fabric.Object;
+    printAreaSize?: Size;
+    private readonly transparentPatternUrl;
+    private readonly dpi;
+    constructor(editor: WorkspaceEditor, options?: WorkspaceManagerOptions);
+    get dimension(): RenderableBox;
+    get scale(): number;
+    setPrintAreaSize(size: PrintArea): void;
+    setClipPath(clipPath: fabric.Object, size: Size): void;
+    setFillColor(color: string): void;
+    setFillImage(image: string, callback?: () => void): Promise<void>;
+    setTransparentPattern(): Promise<void>;
+}

package/dist/engine/managers/workspace.js

@@ -0,0 +1,53 @@
+import { fabric as s } from "fabric";
+import { loadImage as a } from "../utils/image.js";
+import { d as n } from "../../config-D2qm60gf.js";
+class d {
+  constructor(t, e = {}) {
+    this.editor = t, this.transparentPatternUrl = e.transparentPatternUrl ?? n("/images/design/transparent_pattern.svg"), this.dpi = e.dpi ?? 300;
+  }
+  get dimension() {
+    if (!this.workspace)
+      return { left: 0, top: 0, width: 0, height: 0, right: 0, bottom: 0, center: { x: 0, y: 0 } };
+    const t = this.workspace.left ?? 0, e = this.workspace.top ?? 0, i = (this.workspace.width ?? 0) * (this.workspace.scaleX || 1), r = (this.workspace.height ?? 0) * (this.workspace.scaleY || 1);
+    return { left: t, top: e, width: i, height: r, right: t + i, bottom: e + r, center: { x: t + i / 2, y: e + r / 2 } };
+  }
+  get scale() {
+    const { width: t, height: e } = this.dimension, i = this.printAreaSize?.width ?? t, r = this.printAreaSize?.height ?? e;
+    return i / r - t / e > 0.01 && console.warn("Canvas workspace and physical print area dimensions differ"), t / i;
+  }
+  setPrintAreaSize(t) {
+    this.printAreaSize = { width: t.widthInInch * this.dpi, height: t.heightInInch * this.dpi };
+  }
+  setClipPath(t, e) {
+    this.workspace = t, this.editor.canvas.clipPath = t, this.printAreaSize = { width: e.width, height: e.height };
+  }
+  setFillColor(t) {
+    this.editor.canvas.setBackgroundColor(t, this.editor.canvas.renderAll.bind(this.editor.canvas));
+  }
+  async setFillImage(t, e) {
+    const i = await a(t);
+    i.set({
+      left: this.workspace.left,
+      top: this.workspace.top,
+      scaleX: this.workspace.width / i.width,
+      scaleY: this.workspace.height / i.height,
+      originSrc: t
+    }), this.editor.canvas.setBackgroundImage(i, () => {
+      this.editor.canvas.renderAll(), e?.();
+    });
+  }
+  async setTransparentPattern() {
+    const t = new Image();
+    return t.crossOrigin = "anonymous", t.src = this.transparentPatternUrl, new Promise((e) => {
+      t.onload = () => {
+        const i = new s.Pattern({ source: t, repeat: "repeat" });
+        this.editor.canvas.setBackgroundColor(i, () => {
+          this.editor.canvas.renderAll(), e();
+        });
+      }, t.onerror = () => e();
+    });
+  }
+}
+export {
+  d as WorkspaceManager
+};

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

@@ -0,0 +1,88 @@
+import fabric from '../fabric';
+import '../../fabric-types';
+import type { RenderableBox } from '../types';
+import type { ImageFile } from '../../contracts/design';
+import type { TemplateElement } from '../../contracts/api-design';
+import type { Editor } from '../editor';
+/**
+ * 图片处理器
+ *
+ * Handles adding, replacing, mirroring, fitting and non-destructive cropping of
+ * bitmap and SVG layers. Crop results stay serializable as plain Fabric objects.
+ */
+export declare class ImageProcessor {
+    private editor;
+    /** 裁剪框 */
+    private cropRect;
+    /** 遮罩层 */
+    private overlay;
+    constructor(editor: Editor);
+    /**
+     * 给图片添加 svg 形状图片蒙层
+     */
+    addShapeImage(file: ImageFile, shape: fabric.Object, config?: Record<string, any>): Promise<void>;
+    /**
+     * 添加图片（本地图片）
+     */
+    addImage(file: ImageFile, config?: Record<string, any>): Promise<void>;
+    /** 添加图片（远程图片），自动区分位图和 SVG */
+    addImageFromUrl(url: string, config?: Record<string, any>): Promise<void>;
+    /**
+     * 添加图片（远程图片），只支持位图
+     */
+    addBitmapImage(url: string, config?: Record<string, any>): Promise<void>;
+    /**
+     * 从模板中添加图片
+     */
+    addImageFromTemplate(el: TemplateElement, area: {
+        left: number;
+        top: number;
+        s: number;
+        zIndex: number;
+    }): Promise<fabric.Object | null>;
+    /**
+     * 添加 svg 图片
+     */
+    addSvgImage(url: string, config?: Record<string, any>): Promise<void>;
+    /**
+     * 替换图片对象
+     */
+    replaceImage(replaceObj: fabric.Image, file: ImageFile, config?: Record<string, any>): Promise<void>;
+    /**
+     * 修改图片对象配置
+     */
+    updateImageConfig(config: Record<string, any>): void;
+    /**
+     * 修改 svg 对象填充色
+     */
+    updateSvgColor(color: string): void;
+    /**
+     * 图片在可编辑区域内的适配
+     */
+    fitToEditableArea(type: string): void;
+    /**
+     * 图片镜像
+     */
+    flip(type: string): void;
+    /**
+     * 图片复制
+     */
+    copy(): void;
+    /**
+     * 监听裁剪框的 scaling、moving、deselected 事件
+     */
+    _startCropListener(activeObjBounds: RenderableBox): void;
+    /**
+     * 清除裁剪框
+     */
+    clearCropRect(activeObject: fabric.Object): void;
+    /**
+     * 显示裁剪框
+     */
+    showCropRect(): Promise<void>;
+    /** 对图片进行裁剪 */
+    onCrop(activeObject: fabric.Image): Promise<void>;
+    _calcOuterClipPath(imgBounds: RenderableBox): string;
+    _updateOverlayClipPath(imgBounds: RenderableBox): void;
+}
+export default ImageProcessor;