@printine/designer 0.1.0

package/dist/engine/managers/event.js

@@ -0,0 +1,410 @@
+import "../fabric.js";
+import A from "lodash-es/debounce";
+import P from "lodash-es/throttle";
+import { HistoryManager as D } from "../history.js";
+import { SnaplineManager as L } from "./snapline.js";
+import { TextProcessor as T } from "../processors/text.js";
+import { toVerticalStack as z } from "../utils/common.js";
+import { useDesignerStore as R } from "../../state/designer-store.js";
+import { fabric as x } from "fabric";
+class V {
+  constructor(t, o) {
+    this.eventHandlers = /* @__PURE__ */ new Map(), this.isDragging = !1, this.isSpacePressed = !1, this.lastPostion = { x: 0, y: 0 }, this.hammerCanvas = null, this.updateCurrentState = (d) => new Promise((v) => {
+      this.disableHistory(), this.editor.canvas.loadFromJSON(d, () => {
+        this.editor.relinkClipPaths(), this.editor.canvas.renderAll(), v(!0), this.events.emit("design:objectChange"), setTimeout(() => {
+          this.enableHistory();
+        }, 300);
+      });
+    }), this.editor = t, this.events = t.events, this.alignmentManager = new L(), this.historyManager = o, this.enableCavansPan().enableHistory().enableRightClick().enableAlignment().enableSelection().enableLayerChange().enableRotationIndicator().enableTextChanged();
+  }
+  updateHistoryManager(t) {
+    this.historyManager = t;
+  }
+  /**
+   * 画布缩放
+   * viewportTransform [水平缩放, 垂直倾斜或旋转, 横向倾斜或旋转, 垂直缩放, 水平平移, 垂直平移]
+   */
+  enableCanvasZoom() {
+    const v = (h) => {
+      const s = h.e.deltaY;
+      let e = this.editor.canvas.getZoom();
+      s < 0 ? e += 0.05 : e -= 0.05, e = Math.max(0.2, Math.min(5, e));
+      const r = new x.Point(h.e.offsetX, h.e.offsetY);
+      this.editor.canvas.zoomToPoint(r, e), h.e.preventDefault(), h.e.stopPropagation();
+    };
+    return this.editor.canvas.on("mouse:wheel", v), this.eventHandlers.set("zoom", [{ event: "mouse:wheel", handler: v }]), this;
+  }
+  /** Attaches an optional Hammer.js manager so a host can opt into touch gestures. */
+  setTouchGestureManager(t) {
+    return this.hammerCanvas = t, this;
+  }
+  /**
+   * 触摸缩放画布（需要先注入 Hammer.js 管理器）
+   */
+  enableTouchZoom(t = {}) {
+    const { minScale: o = 0.2, maxScale: d = 3 } = t;
+    if (!this.hammerCanvas) return this;
+    let v = 1;
+    return this.hammerCanvas.get("pinch").set({ enable: !0 }), this.hammerCanvas.on("pinchstart", () => {
+      v = this.editor.canvas.getZoom();
+    }), this.hammerCanvas.on("pinch", (h) => {
+      const s = Math.max(o, Math.min(d, v * h.scale)), e = h.center, c = this.editor.canvas.getElement().getBoundingClientRect(), i = new x.Point(e.x - c.left, e.y - c.top);
+      this.editor.canvas.zoomToPoint(i, s), h.srcEvent && h.srcEvent.preventDefault();
+    }), this;
+  }
+  /**
+   * 单指触摸移动画布
+   */
+  enableTouchPan() {
+    return this.hammerCanvas ? (this.hammerCanvas.get("pan").set({
+      pointers: 1
+    }), this.hammerCanvas.get("press").set({ pointers: 1, time: 500 }), this.hammerCanvas.on("press", (t) => {
+      this.isDragging = !0, this.lastPostion.x = t.center.x, this.lastPostion.y = t.center.y;
+    }), this.hammerCanvas.on("pan", (t) => {
+      if (!this.isDragging) return;
+      const o = t.center.x - this.lastPostion.x, d = t.center.y - this.lastPostion.y;
+      this.lastPostion.x = t.center.x, this.lastPostion.y = t.center.y;
+      const v = this.editor.canvas.viewportTransform;
+      v[4] += o, v[5] += d, this.editor.canvas.setViewportTransform(v);
+    }), this.hammerCanvas.on("pressup", () => {
+      this.isDragging = !1;
+    }), this) : this;
+  }
+  /**
+   * 更新画布鼠标样式
+   */
+  updateCursor(t) {
+    this.editor.canvas.defaultCursor = t, this.editor.canvas.setCursor(t);
+  }
+  /**
+   * 画布平移、键盘快捷键、hover 高亮
+   */
+  enableCavansPan() {
+    const t = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], o = A((n) => {
+      this.editor.canvas.fire("object:modified", {
+        target: n
+      });
+    }, 500), d = (n) => {
+      if (document.activeElement?.tagName === "INPUT" || document.activeElement?.tagName === "TEXTAREA" || document.activeElement?.isContentEditable) return;
+      const f = n.metaKey || n.ctrlKey;
+      if (n.code === "Space" && !n.repeat)
+        this.isSpacePressed = !0, this.events.emit("design:updateGrabState", !0), this.updateCursor("grab");
+      else if (n.code === "Delete" || n.code === "Backspace")
+        this.editor.canvas.getActiveObjects().length > 0 && n.preventDefault(), this.editor.deleteObject();
+      else if (f && !n.shiftKey && n.key === "z") {
+        const l = this.historyManager.undo();
+        l && this.updateCurrentState(l);
+      } else if (f && n.shiftKey && n.key === "z") {
+        const l = this.historyManager.redo();
+        l && this.updateCurrentState(l);
+      } else if (t.includes(n.code)) {
+        const l = this.editor.activeObject;
+        if (!l) return;
+        n.preventDefault();
+        const p = this.editor.canvas.viewportTransform[0] || 1;
+        let S = 0, w = 0;
+        n.code === "ArrowLeft" && (S -= p), n.code === "ArrowRight" && (S += p), n.code === "ArrowUp" && (w -= p), n.code === "ArrowDown" && (w += p), (S !== 0 || w !== 0) && (l?.set({
+          left: (l?.left || 0) + S,
+          top: (l?.top || 0) + w
+        }), this.alignmentManager.snapToObjectGuideLines(this.editor.canvas, l), this.editor.canvas.requestRenderAll(), o(l));
+      } else f && n.key.toLowerCase() === "a" ? (n.preventDefault(), this.events.emit("design:editorCommand", "SELECT_ALL")) : f && n.key.toLowerCase() === "c" ? (n.preventDefault(), this.events.emit("design:editorCommand", "COPY")) : f && n.key.toLowerCase() === "v" && (n.preventDefault(), this.events.emit("design:editorCommand", "PASTE"));
+    }, v = (n) => {
+      n.code === "Space" ? (this.isSpacePressed = !1, this.events.emit("design:updateGrabState", !1), this.updateCursor("default")) : t.includes(n.code) && (this.alignmentManager.clearGuideLines(), this.editor.canvas.requestRenderAll());
+    };
+    let h = !1;
+    const s = (n) => {
+      if (this.isSpacePressed) {
+        n.target || (this.isDragging = !0, this.updateCursor("grabbing"), this.lastPostion.x = n.e.clientX, this.lastPostion.y = n.e.clientY);
+        return;
+      }
+      n.target && (h = !0, a());
+    };
+    let e = null;
+    const r = 2, c = "#3540a5", i = (n) => {
+      e = n, e.setCoords(), this.editor.canvas.requestRenderAll();
+    }, a = () => {
+      e && (e = null, this.editor.canvas.requestRenderAll());
+    }, g = () => {
+      if (!e || this.editor.canvas.getActiveObjects().some((b) => b === e || b.id === e?.id)) return;
+      e.setCoords();
+      const u = e.aCoords;
+      if (!u) return;
+      const { tl: f, tr: l, br: E, bl: p } = u, S = this.editor.canvas.viewportTransform || x.iMatrix, w = [f, l, E, p].map((b) => x.util.transformPoint(new x.Point(b.x, b.y), S)), y = this.editor.canvas.getContext();
+      y.save(), y.beginPath(), w.forEach((b, _) => {
+        _ === 0 ? y.moveTo(b.x, b.y) : y.lineTo(b.x, b.y);
+      }), y.closePath(), y.lineWidth = r, y.strokeStyle = c, y.stroke(), y.restore();
+    }, m = (n) => {
+      if (this.isDragging && this.isSpacePressed) {
+        const u = n.e, f = this.editor.canvas.viewportTransform;
+        f[4] += u.clientX - this.lastPostion.x, f[5] += u.clientY - this.lastPostion.y, this.lastPostion.x = u.clientX, this.lastPostion.y = u.clientY, this.editor.canvas.requestRenderAll();
+      } else {
+        if (h) return;
+        const u = this.editor.canvas.getActiveObjects();
+        if (u.length && n.target && u.some((E) => E === n.target || E.id === n.target.id))
+          return;
+        const f = n.target?.isMoving;
+        if (n.transform || f) {
+          a();
+          return;
+        }
+        const l = n.target ?? (u.length === 0 ? this.editor.canvas.findTarget(n.e, !1) : void 0);
+        if (l && l.selectable) {
+          if (u.some((p) => p === l || p.id === l.id)) {
+            a();
+            return;
+          }
+          l.id !== e?.id && i(l);
+        } else
+          a();
+      }
+    }, C = () => {
+      this.isDragging && (this.isDragging = !1, this.updateCursor("grab")), h = !1, this.alignmentManager.clearGuideLines();
+    };
+    return window.addEventListener("keydown", d), window.addEventListener("keyup", v), this.editor.canvas.on("mouse:down", s), this.editor.canvas.on("mouse:move", m), this.editor.canvas.on("mouse:up", C), this.editor.canvas.on("selection:created", a), this.editor.canvas.on("selection:updated", a), this.editor.canvas.on("after:render", g), this.eventHandlers.set("pan", [
+      { event: "mouse:down", handler: s },
+      { event: "mouse:move", handler: m },
+      { event: "mouse:up", handler: C },
+      { event: "keydown", handler: d },
+      { event: "keyup", handler: v },
+      { event: "selection:created", handler: a },
+      { event: "selection:updated", handler: a },
+      { event: "after:render", handler: g }
+    ]), this;
+  }
+  /**
+   * 解除历史记录事件监听
+   */
+  disableHistory() {
+    ["object:modified", "object:added", "object:removed"].forEach((o) => this.editor.canvas.off(o));
+  }
+  /**
+   * 历史记录
+   */
+  enableHistory(t = {}) {
+    const o = [...D.DEFAULT_SAVE_PROPERTIES, ...t.properties || []], d = ["object:added", "object:removed", "object:modified", "editing:exited"], v = (e) => {
+      if (e.target.excludeHistory) return;
+      const r = this.editor.canvas.toJSON(o);
+      r.objects.forEach((c) => {
+        c.type.includes("i-text") && Object.keys(T.DEFAULT_TEXT_CONFIG).forEach((i) => {
+          c[i] !== T.DEFAULT_TEXT_CONFIG[i] && (c[i] = T.DEFAULT_TEXT_CONFIG[i]);
+        });
+      }), this.historyManager.add(r), this.events.emit("design:objectChange");
+    }, h = P((e) => {
+      !e.target || !e.target.type?.includes("i-text") || R.setState({ activeObjects: [e.target] });
+    }, 100), s = A(v, 500);
+    return d.forEach((e) => {
+      this.editor.canvas.on(e, s), this.eventHandlers.has("history") || this.eventHandlers.set("history", []), this.eventHandlers.get("history").push({
+        event: e,
+        handler: s
+      });
+    }), this.editor.canvas.on("object:modified", h), this.eventHandlers.set("activeText", [{ event: "object:modified", handler: h }]), this;
+  }
+  /**
+   * 竖排文字编辑时的文本重排
+   */
+  enableTextChanged() {
+    const t = (s) => {
+      const e = new Array(s.length + 1);
+      let r = "", c = 0, i = 0;
+      for (; i <= s.length && (e[i] = c, i !== s.length); ) {
+        const a = s[i];
+        if (a === `
+`) {
+          if (s[i + 1] === "​" && s[i + 2] === `
+`) {
+            r += `
+`, c += 1, e[i + 1] = c, e[i + 2] = c, i += 3;
+            continue;
+          }
+          i += 1;
+          continue;
+        }
+        r += a, c += 1, i += 1;
+      }
+      return { raw: r, stackedToRaw: e };
+    }, o = (s) => {
+      const e = new Array(s.length + 1);
+      let r = 0;
+      for (let c = 0; c < s.length; c++) {
+        if (e[c] = r, s[c] === `
+`) {
+          r += 3;
+          continue;
+        }
+        r += 1;
+        const a = c + 1 < s.length ? s[c + 1] : void 0;
+        typeof a < "u" && a !== `
+` && (r += 1);
+      }
+      return e[s.length] = r, e;
+    }, d = (s, e, r, c) => {
+      const i = Math.max(0, Math.min(r, s.length));
+      return c === "left" && i > 0 && s[i - 1] !== `
+` ? (e[i - 1] ?? 0) + 1 : e[i] ?? 0;
+    }, v = (s, e) => {
+      const r = e.value ?? "", c = e.selectionStart ?? 0, i = e.selectionEnd ?? c, a = s.__prevStacked, g = s.__prevSelStart, m = s.__prevSelEnd, C = typeof a == "string" ? r.length - a.length : 0, n = typeof a == "string" ? C < 0 : !1, u = n && typeof g == "number" && typeof m == "number" ? c < g && i <= m : !1, { raw: f, stackedToRaw: l } = t(r);
+      s.__rawText = f;
+      const E = z(f), p = o(f), S = Math.max(0, Math.min(c, l.length - 1)), w = Math.max(0, Math.min(i, l.length - 1)), y = l[S] ?? 0, b = l[w] ?? y, _ = Math.max(0, Math.min(y, f.length)), H = Math.max(0, Math.min(b, f.length)), M = n ? "left" : S > 0 && r[S - 1] === `
+` ? "right" : "left", k = n ? "left" : w > 0 && r[w - 1] === `
+` ? "right" : "left", O = d(f, p, _, M), j = d(f, p, H, k);
+      e.value = E, e.setSelectionRange(O, j), s.updateFromTextArea?.(), s.__prevStacked = e.value ?? "", s.__prevSelStart = e.selectionStart ?? 0, s.__prevSelEnd = e.selectionEnd ?? s.__prevSelStart, s.__lastEditWasBackspace = u;
+    }, h = (s) => {
+      const e = s.target;
+      if (e?.type?.includes("i-text") && !(e.orientation !== "vertical" || !e.isEditing || e.__isReflowing)) {
+        e.__isReflowing = !0;
+        try {
+          const r = e.hiddenTextarea;
+          if (!r) return;
+          const c = r;
+          if (c.__verticalKeydownBound || (c.__verticalKeydownBound = !0, r.addEventListener(
+            "keydown",
+            (i) => {
+              const a = e;
+              if (!a?.isEditing || a.orientation !== "vertical" || a.inCompositionMode || i.key !== "Enter") return;
+              i.preventDefault(), i.stopPropagation();
+              const g = `
+​
+`, m = i.target, C = m.selectionStart ?? 0, n = m.selectionEnd ?? C, u = (m.value || "").slice(0, C), f = (m.value || "").slice(n);
+              m.value = u + g + f;
+              const l = C + g.length;
+              if (m.setSelectionRange(l, l), !a.__isReflowing) {
+                a.__isReflowing = !0;
+                try {
+                  v(a, m), this.editor.canvas.requestRenderAll();
+                } finally {
+                  a.__isReflowing = !1;
+                }
+              }
+            },
+            { passive: !1 }
+          )), e.inCompositionMode) {
+            e.__pendingVerticalNormalize = !0;
+            const i = r;
+            i.__verticalCompositionBound || (i.__verticalCompositionBound = !0, r.addEventListener(
+              "compositionend",
+              () => {
+                setTimeout(() => {
+                  const a = e;
+                  if (!(!a?.isEditing || a.orientation !== "vertical") && !a.__isReflowing) {
+                    a.__isReflowing = !0;
+                    try {
+                      const g = a.hiddenTextarea;
+                      if (!g) return;
+                      v(a, g), a.__pendingVerticalNormalize = !1, this.editor.canvas.requestRenderAll();
+                    } finally {
+                      a.__isReflowing = !1;
+                    }
+                  }
+                }, 0);
+              },
+              { passive: !0 }
+            ));
+            return;
+          }
+          v(e, r), this.editor.canvas.requestRenderAll();
+        } finally {
+          e.__isReflowing = !1;
+        }
+      }
+    };
+    return this.editor.canvas.on("text:changed", h), this.eventHandlers.set("textChanged", [{ event: "text:changed", handler: h }]), this;
+  }
+  /**
+   * 对象对齐、控制器缩放显示对齐辅助线
+   */
+  enableAlignment() {
+    const t = (d) => {
+      d.target.excludeHistory || this.alignmentManager.snapToGuidelines(this.editor.canvas, d.target, this.editor.workspaceManager.dimension);
+    }, o = () => {
+      this.alignmentManager.drawGuideLines(this.editor.canvas.getContext());
+    };
+    return this.editor.canvas.on("after:render", o), this.editor.canvas.on("object:moving", t), this.editor.canvas.on("object:scaling", t), this.eventHandlers.set("alignment", [
+      { event: "after:render", handler: o },
+      { event: "object:moving", handler: t },
+      { event: "object:scaling", handler: t }
+    ]), this;
+  }
+  enableSelection() {
+    const t = (o) => {
+      R.setState({ activeObjects: o.selected || [] });
+    };
+    return this.editor.canvas.on("selection:created", t), this.editor.canvas.on("selection:updated", t), this.editor.canvas.on("selection:cleared", t), this.eventHandlers.set("selection", [
+      { event: "selection:created", handler: t },
+      { event: "selection:updated", handler: t },
+      { event: "selection:cleared", handler: t }
+    ]), this;
+  }
+  /**
+   * 图层信息变动
+   */
+  enableLayerChange() {
+    const t = P(() => {
+      this.events.emit("design:layerChange");
+    }, 300);
+    return this.editor.canvas.on("after:render", t), this.eventHandlers.set("layerChange", [{ event: "after:render", handler: t }]), this;
+  }
+  /**
+   * 对象旋转时显示旋转角度
+   */
+  enableRotationIndicator() {
+    let t = null;
+    const o = (v) => {
+      const h = v.target;
+      if (!h) return;
+      let s = Math.round(h.angle || 0) % 360;
+      s < 0 && (s += 360), t || (t = document.createElement("div"), t.style.cssText = `
+          position: fixed;
+          background: #3540a5;
+          color: #fff;
+          padding: 4px 8px;
+          border-radius: 4px;
+          font-size: 12px;
+          font-weight: 500;
+          pointer-events: none;
+          z-index: 9999;
+          box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+        `, document.body.appendChild(t)), t.textContent = `${s}°`;
+      const e = this.editor.canvas.getZoom(), r = this.editor.canvas.viewportTransform || [1, 0, 0, 1, 0, 0], i = this.editor.canvas.getElement().getBoundingClientRect(), a = i.left + (h.left + r[4]) * e, g = i.top + (h.top + r[5]) * e - 40;
+      t.style.left = `${a}px`, t.style.top = `${g}px`, t.style.transform = "translateX(-50%)";
+    };
+    this.editor.canvas.on("object:rotating", o);
+    const d = () => {
+      t && (document.body.removeChild(t), t = null);
+    };
+    return this.editor.canvas.on("object:modified", d), this.editor.canvas.on("selection:cleared", d), this.editor.canvas.on("mouse:up", d), this.eventHandlers.set("rotationIndicator", [
+      { event: "object:rotating", handler: o },
+      { event: "object:modified", handler: d },
+      { event: "selection:cleared", handler: d },
+      { event: "mouse:up", handler: d }
+    ]), this;
+  }
+  /**
+   * 移除所有的事件监听
+   */
+  removeAllEventListeners() {
+    this.eventHandlers.forEach((t) => {
+      t.forEach((o) => {
+        ["keydown", "keyup"].includes(o.event) ? window.removeEventListener(o.event, o.handler) : this.editor.canvas.off(o.event, o.handler);
+      });
+    }), this.hammerCanvas && (this.hammerCanvas.destroy(), this.hammerCanvas = null);
+  }
+  /**
+   * 右键点击识别选中元素
+   */
+  enableRightClick() {
+    const t = (o) => {
+      if (o.button === 3)
+        if (o.target) {
+          if (this.editor.canvas.getActiveObjects().includes(o.target))
+            return;
+          this.editor.canvas.setActiveObject(o.target), this.editor.canvas.requestRenderAll();
+        } else
+          this.editor.canvas.discardActiveObject(), this.editor.canvas.requestRenderAll();
+    };
+    return this.editor.canvas.on("mouse:down", t), this.eventHandlers.set("rightClick", [{ event: "mouse:down", handler: t }]), this;
+  }
+}
+export {
+  V as EventManager,
+  V as default
+};

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

@@ -0,0 +1,24 @@
+import { fabric } from 'fabric';
+import type { RenderableBox } from '../types';
+export interface ResizeEditor {
+    canvas: fabric.Canvas;
+    workspaceManager: {
+        workspace?: fabric.Object;
+        dimension: RenderableBox;
+    };
+}
+/** Keeps the Fabric canvas, overlay and printable workspace in sync with its host element. */
+export declare class ResizeManager {
+    private readonly editor;
+    private readonly resizeObserver;
+    constructor(editor: ResizeEditor, target: HTMLDivElement);
+    private resizeCanvasBackground;
+    resizeWorkspace(): void;
+    resizeObjects(previousWorkspace: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    }): void;
+    destroy(): void;
+}

package/dist/engine/managers/resize.js

@@ -0,0 +1,63 @@
+import { fabric as c } from "fabric";
+import { debounce as M } from "lodash-es";
+import { designerEventBus as T } from "../events.js";
+class S {
+  constructor(t, e) {
+    this.editor = t;
+    const r = (a) => {
+      const { width: s, height: n } = a[0].contentRect;
+      if (s === this.editor.canvas.width || !this.editor.workspaceManager.workspace) return;
+      const h = this.editor.workspaceManager.dimension;
+      this.editor.canvas.setDimensions({ width: s, height: n }), this.resizeCanvasBackground({ width: s, height: n }), this.resizeWorkspace(), this.resizeObjects(h), this.editor.canvas.requestRenderAll();
+    };
+    this.resizeObserver = new ResizeObserver(M(r, 100)), this.resizeObserver.observe(e);
+  }
+  resizeCanvasBackground(t) {
+    const e = this.editor.canvas.overlayImage;
+    if (!e) return;
+    const r = window.innerWidth < 768 ? 0.9 : 0.85, a = Math.min(t.width, t.height) * r, s = Math.min(a / e.width, a / e.height);
+    s !== e.scaleX && (this.editor.canvas.setViewportTransform([1, 0, 0, 1, 0, 0]), T.emit("design:changeScale", s)), e.set({
+      scaleX: s,
+      scaleY: s,
+      left: (t.width - e.width * s) / 2,
+      top: (t.height - e.height * s) / 2
+    }), e.setCoords();
+  }
+  resizeWorkspace() {
+    const t = this.editor.canvas.clipPath;
+    if (!t) return;
+    const e = this.editor.canvas.overlayImage?.scaleX || 1, r = {
+      left: (this.editor.canvas.width - t.width * e) / 2,
+      top: (this.editor.canvas.height - t.height * e) / 2,
+      scaleX: e,
+      scaleY: e
+    };
+    this.editor.workspaceManager.workspace.set(r), this.editor.canvas.clipPath?.set(r), this.editor.canvas.renderAll();
+  }
+  resizeObjects(t) {
+    const { width: e, height: r, left: a, top: s } = this.editor.workspaceManager.dimension, n = e / t.width, h = r / t.height, p = /* @__PURE__ */ new Set();
+    this.editor.canvas.getObjects().forEach((i) => {
+      let l = i.left, f = i.top, o;
+      if (i.group) {
+        o = i.group;
+        const d = c.util.transformPoint(new c.Point(l, f), o.calcTransformMatrix());
+        l = d.x, f = d.y;
+      }
+      const z = (l - t.left) / t.width, X = (f - t.top) / t.height, g = a + z * e, w = s + X * r, v = i.scaleX || 1, m = i.scaleY || 1;
+      if (o) {
+        const d = c.util.invertTransform(o.calcTransformMatrix()), u = c.util.transformPoint(new c.Point(g, w), d);
+        i.set({ left: u.x, top: u.y, scaleX: v * n, scaleY: m * h }), p.add(o);
+      } else
+        i.set({ left: g, top: w, scaleX: v * n, scaleY: m * h });
+      i.setCoords();
+    }), p.forEach((i) => {
+      i.addWithUpdate(), i.setCoords();
+    });
+  }
+  destroy() {
+    this.resizeObserver.disconnect();
+  }
+}
+export {
+  S as ResizeManager
+};

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

@@ -0,0 +1,70 @@
+import type { fabric } from 'fabric';
+import '../../fabric-types';
+import type { RenderableBox, Size } from '../types';
+interface LinePositions {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    centerX: number;
+    centerY: number;
+}
+export interface BoundingPoints extends Size {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+    centerX: number;
+    centerY: number;
+}
+interface ObjectGuideLine {
+    pos: number;
+    start: number;
+    end: number;
+}
+/** Canvas-workspace and object-to-object alignment helpers. */
+export declare class SnaplineManager {
+    horizontalLine: {
+        top: number[];
+        centerX: number[];
+        bottom: number[];
+    } | null;
+    verticalLine: {
+        left: number[];
+        centerY: number[];
+        right: number[];
+    } | null;
+    objectsVerticalLines: ObjectGuideLine[];
+    objectsHorizontalLines: ObjectGuideLine[];
+    snapThreshold: number;
+    snapThresholdForObject: number;
+    isSnapping: boolean;
+    snappedLineTypes: {
+        left: boolean;
+        top: boolean;
+        bottom: boolean;
+        right: boolean;
+        centerX: boolean;
+        centerY: boolean;
+    };
+    clearGuideLines(): void;
+    drawGuideLines(context: CanvasRenderingContext2D): void;
+    private drawAlignLine;
+    private drawObjectGuideLine;
+    showGuideLines(guidePositions: LinePositions): void;
+    snapToGuidelines(canvas: fabric.Canvas, object: fabric.Object, targetDimension: RenderableBox): void;
+    snapToObjectGuideLines(canvas: fabric.Canvas, object: fabric.Object): void;
+    private calcGuidePositions;
+    private calcObjectDimensions;
+    private generateGuideLines;
+    private checkSnapConditions;
+    checkSnapConditionsForAllObjects({ canvas, currentObject, currentObjectDimension, snap }: {
+        canvas: fabric.Canvas;
+        currentObject: fabric.Object;
+        currentObjectDimension: BoundingPoints;
+        snap?: boolean;
+    }): void;
+    private addVerticalObjectLines;
+    private addHorizontalObjectLines;
+}
+export {};