@printine/designer 0.1.0

package/dist/engine/events.d.ts

@@ -0,0 +1,34 @@
+import { type Emitter } from 'mitt';
+import type { DesignerElementType } from './types';
+/** Events shared by the editor engine and its complete UI package. */
+export type AppEvents = {
+    'design:objectChange': void;
+    'design:layerChange': void;
+    'design:objectLoading': void;
+    'design:changeScale': number;
+    'design:updateGrabState': boolean;
+    'design:crop': void;
+    'design:hideCrop': void;
+    'design:menuContent': {
+        type: DesignerElementType;
+        extraData?: any;
+    };
+    'design:menuContentSheet': boolean;
+    'design:back': void;
+    'desgin:assetAdd': {
+        url: string;
+    };
+    'design:refreshUserTemplates': void;
+    'design:elementMenuShow': {
+        type: DesignerElementType;
+        extraData?: any;
+    };
+    'design:preview': void;
+    'design:editorCommand': 'SELECT_ALL' | 'COPY' | 'PASTE';
+    'search:open': void;
+};
+export type DesignerEventBus = Emitter<AppEvents>;
+/** Singleton used by one mounted editor. Future multi-instance support will inject a bus per Designer. */
+export declare const designerEventBus: DesignerEventBus;
+export declare const createEventBus: <T extends Record<string, unknown>>() => Emitter<T>;
+export default designerEventBus;

package/dist/engine/events.js

@@ -0,0 +1,7 @@
+import t from "mitt";
+const s = t(), n = () => t();
+export {
+  n as createEventBus,
+  s as default,
+  s as designerEventBus
+};

package/dist/engine/extensions/curved-text.d.ts

@@ -0,0 +1,59 @@
+import { fabric } from 'fabric';
+import '../../fabric-types';
+export declare class AdvancedIText extends fabric.IText {
+    radius: number;
+    spacing: number;
+    __baseWidth?: number;
+    __baseHeight?: number;
+    __basePadding?: number;
+    __baseObjectCaching?: boolean;
+    __curvedCenterX: number;
+    __curvedCenterY: number;
+    __lastCurvedWidth?: number;
+    __lastCurvedHeight?: number;
+    __lastCurvedCenterX?: number;
+    __lastCurvedCenterY?: number;
+    orientation?: 'vertical' | 'horizontal';
+    __rawText?: string;
+    __isReflowing: boolean;
+    readonly type = "advanced-i-text";
+    constructor(text: string, options?: fabric.AdvancedITextOptions);
+    /**
+     * 像素级扫描获取精确边界（借鉴 fabric.CurvedText 的 _trimCanvas 思路）
+     */
+    private __scanBounds;
+    /**
+     * 计算弧形文字的真实 AABB 包围盒，更新 width/height 让选择框贴合
+     * 使用像素扫描获取精确边界
+     */
+    private __updateCurvedBounds;
+    /**
+     * Fabric 重新计算直文本尺寸时（字体/内容变化），更新弧形包围盒
+     */
+    initDimensions(): void;
+    /**
+     * 重写坐标偏移方法：始终基于"直文本尺寸"，避免 radius 切换时位置跳变
+     */
+    _getLeftOffset(): any;
+    _getTopOffset(): any;
+    /**
+     * 重写行对齐方法：始终基于直文本宽度计算，避免 radius 切换时偏移跳变
+     */
+    _getLineLeftOffset(lineIndex: number): number;
+    /**
+     * 进入编辑状态：恢复直文本尺寸，避免文字修改时位置偏移
+     */
+    enterEditing(): fabric.IText;
+    /**
+     * 退出编辑状态：如果有弧度，重新计算弧形包围盒
+     */
+    exitEditing(): fabric.IText;
+    _set(key: string, value: any): fabric.Object;
+    /**
+     * 弧形文字渲染核心逻辑（可被 _render 和 __updateCurvedBounds 复用）
+     */
+    private __renderCurved;
+    _render(ctx: CanvasRenderingContext2D): void;
+    toObject(propertiesToInclude?: string[]): any;
+    static fromObject(object: any, callback?: (obj: AdvancedIText) => void): AdvancedIText;
+}

package/dist/engine/fabric.d.ts

@@ -0,0 +1,4 @@
+import { fabric } from 'fabric';
+import { AdvancedIText } from './extensions/curved-text';
+export default fabric;
+export { AdvancedIText, fabric };

package/dist/engine/fabric.js

@@ -0,0 +1,187 @@
+import { fabric as w } from "fabric";
+import { fabric as D, fabric as S } from "fabric";
+class x extends w.IText {
+  constructor(t, s = {}) {
+    super(t, s), this.__curvedCenterX = 0, this.__curvedCenterY = 0, this.__isReflowing = !1, this.type = "advanced-i-text", this.radius = s.radius || 0, this.spacing = s.spacing ?? 0, this.orientation = s.orientation, this.__rawText = s.__rawText;
+    const e = s;
+    typeof e.__baseWidth == "number" && (this.__baseWidth = e.__baseWidth, this.__baseHeight = e.__baseHeight, this.__basePadding = e.__basePadding, this.__baseObjectCaching = e.__baseObjectCaching, this.__curvedCenterX = e.__curvedCenterX, this.__curvedCenterY = e.__curvedCenterY, this.__restoredGeometry = !0);
+  }
+  /**
+   * 像素级扫描获取精确边界（借鉴 fabric.CurvedText 的 _trimCanvas 思路）
+   */
+  __scanBounds(t) {
+    const s = t.getContext("2d");
+    if (!s) return null;
+    const e = t.width, d = t.height;
+    if (e <= 0 || d <= 0)
+      return null;
+    const i = s.getImageData(0, 0, e, d).data;
+    let r = e, _ = d, o = 0, a = 0, l = !1;
+    for (let c = 0; c < d; c++)
+      for (let f = 0; f < e; f++)
+        i[(c * e + f) * 4 + 3] > 0 && (l = !0, f < r && (r = f), f > o && (o = f), c < _ && (_ = c), c > a && (a = c));
+    return l ? { minX: r, minY: _, maxX: o, maxY: a } : null;
+  }
+  /**
+   * 计算弧形文字的真实 AABB 包围盒，更新 width/height 让选择框贴合
+   * 使用像素扫描获取精确边界
+   */
+  __updateCurvedBounds() {
+    const t = this;
+    if (typeof this.__baseWidth != "number" && (this.__baseWidth = this.width), typeof this.__baseHeight != "number" && (this.__baseHeight = this.height), typeof this.__basePadding != "number" && (this.__basePadding = typeof t.padding == "number" ? t.padding : 0), typeof this.__baseObjectCaching != "boolean" && (this.__baseObjectCaching = !!t.objectCaching), !(!this.__baseWidth || !this.__baseHeight || this.__baseWidth <= 0 || this.__baseHeight <= 0)) {
+      if (!this.radius || this.radius === 0) {
+        const s = this.__baseWidth, e = this.__baseHeight, d = this.left, h = this.top, i = this.width, r = this.height;
+        if (d != null && h != null && i != null && r != null) {
+          const _ = d + i / 2, o = h + r / 2;
+          this.left = _ - s / 2, this.top = o - e / 2;
+        }
+        this.width = s, this.height = e, t.padding = this.__basePadding, t.objectCaching = this.__baseObjectCaching, this.__curvedCenterX = 0, this.__curvedCenterY = 0;
+        return;
+      }
+      t.objectCaching = !1, t.padding = this.__basePadding;
+      try {
+        const s = t._textLines || [], e = t.__charBounds || [];
+        if (!s.length || !e.length)
+          return;
+        const d = w.util.createCanvasElement(), h = Math.max(this.__baseWidth, this.__baseHeight) * 3;
+        d.width = h, d.height = h;
+        const i = d.getContext("2d");
+        if (!i) return;
+        i.font = t._getFontDeclaration(), i.textBaseline = t.textBaseline || "alphabetic", i.textAlign = t.textAlign || "left", t.fill && (i.fillStyle = t.fill), t.stroke && (i.strokeStyle = t.stroke, i.lineWidth = t.strokeWidth || 1), i.save(), i.translate(h / 2, h / 2), this.__renderCurved(i), i.restore();
+        const r = this.__scanBounds(d);
+        if (!r) return;
+        const _ = r.maxX - r.minX + 1, o = r.maxY - r.minY + 1, a = (r.minX + r.maxX) / 2 - h / 2, l = (r.minY + r.maxY) / 2 - h / 2, c = _ + 4, f = o + 4, b = this.left, C = this.top, p = this.width, u = this.height;
+        if (b != null && C != null && p != null && u != null) {
+          const n = b + p / 2, H = C + u / 2;
+          this.left = n - c / 2, this.top = H - f / 2;
+        }
+        this.width = c, this.height = f, this.__curvedCenterX = a, this.__curvedCenterY = l, this.__lastCurvedWidth = this.width, this.__lastCurvedHeight = this.height, this.__lastCurvedCenterX = this.__curvedCenterX, this.__lastCurvedCenterY = this.__curvedCenterY;
+      } catch (s) {
+        console.error("Failed to calculate curved bounds:", s);
+      }
+    }
+  }
+  /**
+   * Fabric 重新计算直文本尺寸时（字体/内容变化），更新弧形包围盒
+   */
+  initDimensions() {
+    if (this.__restoredGeometry && this.radius && this.radius !== 0) {
+      const s = this.width, e = this.height;
+      super.initDimensions(), this.__baseWidth = this.width, this.__baseHeight = this.height, this.width = s, this.height = e;
+      return;
+    }
+    super.initDimensions(), this.__baseWidth = this.width, this.__baseHeight = this.height, this.radius && this.radius !== 0 && !this.isEditing && this.__updateCurvedBounds();
+  }
+  /**
+   * 重写坐标偏移方法：始终基于"直文本尺寸"，避免 radius 切换时位置跳变
+   */
+  // @ts-ignore
+  _getLeftOffset() {
+    return typeof this.__baseWidth == "number" ? -this.__baseWidth / 2 : super._getLeftOffset();
+  }
+  // @ts-ignore
+  _getTopOffset() {
+    return typeof this.__baseHeight == "number" ? -this.__baseHeight / 2 : super._getTopOffset();
+  }
+  /**
+   * 重写行对齐方法：始终基于直文本宽度计算，避免 radius 切换时偏移跳变
+   */
+  // @ts-ignore
+  _getLineLeftOffset(t) {
+    if (typeof this.__baseWidth == "number") {
+      const s = this.getLineWidth(t) || 0, e = this.__baseWidth - s, d = this, h = d.textAlign, i = d.direction, r = d.isEndOfWrapping?.(t);
+      if (h === "justify" || h === "justify-center" && !r || h === "justify-right" && !r || h === "justify-left" && !r)
+        return 0;
+      let _ = 0;
+      return h === "center" && (_ = e / 2), h === "right" && (_ = e), h === "justify-center" && (_ = e / 2), h === "justify-right" && (_ = e), i === "rtl" && (_ -= e), _;
+    }
+    return super._getLineLeftOffset(t);
+  }
+  /**
+   * 进入编辑状态：恢复直文本尺寸，避免文字修改时位置偏移
+   */
+  enterEditing() {
+    const t = super.enterEditing();
+    if (this.radius && this.radius !== 0) {
+      const s = this;
+      this.__lastCurvedWidth = this.width, this.__lastCurvedHeight = this.height, this.__lastCurvedCenterX = this.__curvedCenterX, this.__lastCurvedCenterY = this.__curvedCenterY;
+      const e = this.__baseWidth, d = this.__baseHeight, h = this.left, i = this.top, r = this.width, _ = this.height;
+      if (h != null && i != null && r != null && _ != null) {
+        const o = h + r / 2, a = i + _ / 2;
+        this.left = o - e / 2, this.top = a - d / 2;
+      }
+      this.width = e, this.height = d, s.padding = this.__basePadding, s.objectCaching = this.__baseObjectCaching, this.setCoords();
+    }
+    return t;
+  }
+  /**
+   * 退出编辑状态：如果有弧度，重新计算弧形包围盒
+   */
+  exitEditing() {
+    const t = super.exitEditing();
+    return this.radius && this.radius !== 0 && (this.__restoredGeometry = !1, this.initDimensions(), this.setCoords()), t;
+  }
+  _set(t, s) {
+    const e = super._set(t, s);
+    return (t === "radius" || t === "spacing" || t === "text") && (this.set("dirty", !0), this.isEditing || (this.__restoredGeometry = !1, this.__updateCurvedBounds(), this.setCoords())), e;
+  }
+  /**
+   * 弧形文字渲染核心逻辑（可被 _render 和 __updateCurvedBounds 复用）
+   */
+  __renderCurved(t) {
+    const s = this.radius >= 0 ? 1 : -1, e = Math.abs(this.radius), d = this.spacing || 0, h = s > 0 ? 1 : -1, i = this, r = i._textLines || [], _ = i.__charBounds || [];
+    let o = 0;
+    for (let a = 0; a < r.length; a++) {
+      const l = r[a];
+      if (!l || !l.length) {
+        o += i.getHeightOfLine(a);
+        continue;
+      }
+      const c = i.getHeightOfLine(a), f = c / i.lineHeight, b = i.getLineWidth(a) || 0, C = i._getLeftOffset() + i._getLineLeftOffset(a), u = i._getTopOffset() + o + f - c * i._fontSizeFraction / i.lineHeight, n = C + b / 2, H = u;
+      for (let g = 0; g < l.length; g++) {
+        const v = l[g], m = _?.[a]?.[g];
+        if (!m) continue;
+        const Y = C + m.left + m.width / 2 - n, X = (g - (l.length - 1) / 2) * d, O = Y + X, j = h * (O / e);
+        t.save(), t.translate(n, H + s * e), t.rotate(j), t.translate(0, -s * e);
+        const y = -(m.width || 0) / 2, W = 0;
+        i.paintFirst === "stroke" ? (i._renderChar("strokeText", t, a, g, v, y, W), i._renderChar("fillText", t, a, g, v, y, W)) : (i._renderChar("fillText", t, a, g, v, y, W), i._renderChar("strokeText", t, a, g, v, y, W)), t.restore();
+      }
+      o += c;
+    }
+  }
+  _render(t) {
+    if (this.isEditing || !this.radius || this.radius === 0) {
+      super._render(t);
+      return;
+    }
+    this.text && (t.save(), t.translate(-this.__curvedCenterX, -this.__curvedCenterY), this.__renderCurved(t), t.restore());
+  }
+  toObject(t = []) {
+    const s = super.toObject([
+      ...t,
+      "radius",
+      "spacing",
+      "orientation",
+      "__baseWidth",
+      "__baseHeight",
+      "__basePadding",
+      "__baseObjectCaching",
+      "__curvedCenterX",
+      "__curvedCenterY",
+      "__rawText"
+    ]);
+    return this.isEditing && this.radius && this.radius !== 0 && (typeof this.__lastCurvedWidth == "number" && (s.width = this.__lastCurvedWidth), typeof this.__lastCurvedHeight == "number" && (s.height = this.__lastCurvedHeight), typeof this.__lastCurvedCenterX == "number" && (s.__curvedCenterX = this.__lastCurvedCenterX), typeof this.__lastCurvedCenterY == "number" && (s.__curvedCenterY = this.__lastCurvedCenterY)), s;
+  }
+  static fromObject(t, s) {
+    const e = t || {}, d = e.text || "", h = typeof e.radius == "number" ? e.radius : 0, i = typeof e.spacing == "number" ? e.spacing : 0, r = e.left, _ = e.top, o = e.width, a = e.height, l = e.__baseWidth, c = e.__baseHeight, f = e.__basePadding, b = e.__baseObjectCaching, C = e.__curvedCenterX, p = e.__curvedCenterY, u = { ...e };
+    delete u.radius, delete u.spacing, delete u.__baseWidth, delete u.__baseHeight, delete u.__basePadding, delete u.__baseObjectCaching, delete u.__curvedCenterX, delete u.__curvedCenterY, delete u.width, delete u.height;
+    const n = new x(d, u);
+    return n.radius = h, n.spacing = i, n.__baseWidth = typeof l == "number" ? l : n.width, n.__baseHeight = typeof c == "number" ? c : n.height, n.__basePadding = typeof f == "number" ? f : typeof n.padding == "number" ? n.padding : 0, n.__baseObjectCaching = typeof b == "boolean" ? b : !!n.objectCaching, n.__curvedCenterX = typeof C == "number" ? C : 0, n.__curvedCenterY = typeof p == "number" ? p : 0, typeof o == "number" && (n.width = o), typeof a == "number" && (n.height = a), typeof r == "number" && (n.left = r), typeof _ == "number" && (n.top = _), h && h !== 0 && (n.objectCaching = !1, n.padding = n.__basePadding), n.__lastCurvedWidth = typeof o == "number" ? o : n.width, n.__lastCurvedHeight = typeof a == "number" ? a : n.height, n.__lastCurvedCenterX = n.__curvedCenterX, n.__lastCurvedCenterY = n.__curvedCenterY, n.__restoredGeometry = !0, n.setCoords(), s && s(n), n;
+  }
+}
+w.AdvancedIText = x;
+export {
+  x as AdvancedIText,
+  D as default,
+  S as fabric
+};

package/dist/engine/history.d.ts

@@ -0,0 +1,27 @@
+import type { fabric } from 'fabric';
+import '../fabric-types';
+/** A snapshot of one printable area's Fabric objects. */
+export interface HistoryRecord {
+    version: string;
+    objects: fabric.Object[];
+}
+/**
+ * Per-design-area undo/redo history.
+ *
+ * The implementation preserves the current editor's snapshot behaviour and
+ * serialized Fabric property list, so existing design documents remain valid.
+ */
+export declare class HistoryManager {
+    readonly id: string;
+    private readonly limit;
+    static readonly DEFAULT_SAVE_PROPERTIES: string[];
+    readonly stack: HistoryRecord[];
+    pointer: number;
+    constructor(id: string, limit?: number);
+    get canUndo(): boolean;
+    get canRedo(): boolean;
+    add(record: HistoryRecord): void;
+    undo(): HistoryRecord | null;
+    redo(): HistoryRecord | null;
+}
+export default HistoryManager;

package/dist/engine/history.js

@@ -0,0 +1,56 @@
+const e = class e {
+  constructor(t, s = 50) {
+    this.id = t, this.limit = s, this.stack = [], this.pointer = -1;
+  }
+  get canUndo() {
+    return this.pointer > 0;
+  }
+  get canRedo() {
+    return this.pointer < this.stack.length - 1;
+  }
+  add(t) {
+    this.stack.push(t), this.stack.length > this.limit ? this.stack.shift() : this.pointer += 1;
+  }
+  undo() {
+    return this.canUndo ? (this.pointer -= 1, this.stack[this.pointer] ?? null) : null;
+  }
+  redo() {
+    return this.canRedo ? (this.pointer += 1, this.stack[this.pointer] ?? null) : null;
+  }
+};
+e.DEFAULT_SAVE_PROPERTIES = [
+  "selectable",
+  "evented",
+  "originLeft",
+  "originTop",
+  "id",
+  "name",
+  "originSrc",
+  "objectCaching",
+  "clip",
+  "sourceType",
+  "ccProjectId",
+  "fontPath",
+  "ungroupable",
+  "fullSizeSrc",
+  "thumbnailScale",
+  "radius",
+  "spacing",
+  "orientation",
+  "__rawText",
+  "__baseWidth",
+  "__baseHeight",
+  "__basePadding",
+  "__baseObjectCaching",
+  "__curvedCenterX",
+  "__curvedCenterY",
+  "__lastCurvedWidth",
+  "__lastCurvedHeight",
+  "__lastCurvedCenterX",
+  "__lastCurvedCenterY"
+];
+let i = e;
+export {
+  i as HistoryManager,
+  i as default
+};

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

@@ -0,0 +1,101 @@
+import '../../fabric-types';
+import { HistoryManager } from '../history';
+import type { Editor } from '../editor';
+/** Minimal Hammer.js surface used for optional touch gestures, kept dependency-free. */
+interface TouchGestureManager {
+    get(name: string): {
+        set(options: Record<string, unknown>): void;
+    };
+    on(event: string, handler: (event: any) => void): void;
+    destroy(): void;
+}
+/**
+ * 事件管理器
+ *
+ * Owns every canvas and window listener the editor needs: panning, zooming,
+ * history, snapping, selection sync, layer notifications, rotation feedback and
+ * vertical-text reflow. Selection state is published to the package store only.
+ */
+export declare class EventManager {
+    private editor;
+    /** 事件处理 */
+    private eventHandlers;
+    /** 画布拖动状态 */
+    private isDragging;
+    /** 空格键状态 */
+    isSpacePressed: boolean;
+    /** 上次鼠标位置 */
+    private lastPostion;
+    /** 对齐线管理器 */
+    private alignmentManager;
+    /** 历史记录管理器 */
+    private historyManager;
+    /** 移动设备下手指操作 */
+    private hammerCanvas;
+    private readonly events;
+    constructor(editor: Editor, historyManager: HistoryManager);
+    updateHistoryManager(historyManager: HistoryManager): void;
+    /**
+     * 画布缩放
+     * viewportTransform [水平缩放, 垂直倾斜或旋转, 横向倾斜或旋转, 垂直缩放, 水平平移, 垂直平移]
+     */
+    enableCanvasZoom(): this;
+    /** Attaches an optional Hammer.js manager so a host can opt into touch gestures. */
+    setTouchGestureManager(manager: TouchGestureManager | null): this;
+    /**
+     * 触摸缩放画布（需要先注入 Hammer.js 管理器）
+     */
+    enableTouchZoom(options?: {
+        minScale?: number;
+        maxScale?: number;
+    }): this;
+    /**
+     * 单指触摸移动画布
+     */
+    enableTouchPan(): this;
+    /**
+     * 更新画布鼠标样式
+     */
+    updateCursor(style: string): void;
+    /**
+     * 画布平移、键盘快捷键、hover 高亮
+     */
+    enableCavansPan(): this;
+    /**
+     * 解除历史记录事件监听
+     */
+    disableHistory(): void;
+    /**
+     * 历史记录
+     */
+    enableHistory(options?: {
+        properties?: string[];
+    }): this;
+    /**
+     * 竖排文字编辑时的文本重排
+     */
+    enableTextChanged(): this;
+    updateCurrentState: (state: Record<string, any>) => Promise<unknown>;
+    /**
+     * 对象对齐、控制器缩放显示对齐辅助线
+     */
+    enableAlignment(): this;
+    enableSelection(): this;
+    /**
+     * 图层信息变动
+     */
+    enableLayerChange(): this;
+    /**
+     * 对象旋转时显示旋转角度
+     */
+    enableRotationIndicator(): this;
+    /**
+     * 移除所有的事件监听
+     */
+    removeAllEventListeners(): void;
+    /**
+     * 右键点击识别选中元素
+     */
+    enableRightClick(): this;
+}
+export default EventManager;