@overtone-art/canvas-editor-core 0.3.2 → 0.4.0

package/dist/index.js

@@ -45,17 +45,14 @@ __export(index_exports, {
   TEXTURE_MASK_IDS: () => TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE: () => TEXTURE_MASK_SIZE,
   TextCurveManager: () => TextCurveManager,
+  TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
-  applyPatternLocks: () => applyPatternLocks,
   applySelectionStyle: () => applySelectionStyle,
   buildCurvePathData: () => buildCurvePathData,
-  buildPatternDataURL: () => buildPatternDataURL,
-  captureLocks: () => captureLocks,
   clamp: () => clamp,
-  clearPatternImageCache: () => clearPatternImageCache,
   clearTextureMaskCache: () => clearTextureMaskCache,
   computeCoverPlacement: () => computeCoverPlacement,
   computePrintAreaClip: () => computePrintAreaClip,
@@ -74,7 +71,6 @@ __export(index_exports, {
   isMaskPresetId: () => isMaskPresetId,
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
-  loadPatternImage: () => loadPatternImage,
   readLayerShadow: () => readLayerShadow,
   renderTextureMask: () => renderTextureMask,
   resetTransform: () => resetTransform,
@@ -87,7 +83,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric9 = require("fabric");
+var import_fabric10 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -139,6 +135,12 @@ var Layer = class {
   /** Non-fabric data (e.g. pattern config) that must persist with the layer. */
   meta;
   fabricObject;
+  /**
+   * Stand-in object drawn in place of `fabricObject` (the tiled pattern). It is
+   * part of the canvas but never part of the document: it is not serialized, and
+   * the layer's real object stays the one every editor API talks to.
+   */
+  renderProxy;
   constructor(type, fabricObject, name, id) {
     this.id = id ?? generateId();
     this.type = type;
@@ -148,6 +150,7 @@ var Layer = class {
     this.opacity = 1;
     this.meta = {};
     this.fabricObject = fabricObject;
+    this.renderProxy = null;
     this.fabricObject._layerId = this.id;
   }
   hasMeta() {
@@ -196,6 +199,7 @@ var LayerManager = class {
     if (index === -1) return false;
     const layer = this.layers[index];
     this.canvas.remove(layer.fabricObject);
+    if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     this.layers.splice(index, 1);
     this.events.emit("layer:removed", { layerId: id });
     this.emitChanged();
@@ -219,6 +223,10 @@ var LayerManager = class {
       evented: !layer.locked
     });
     this.canvas.insertAt(Math.max(0, stackIndex), fabricObject);
+    if (layer.renderProxy) {
+      fabricObject.set({ opacity: 0 });
+      this.syncZOrder();
+    }
     if (wasActive) this.canvas.setActiveObject(fabricObject);
     this.canvas.requestRenderAll();
     this.events.emit("layer:modified", { layerId: id });
@@ -226,6 +234,36 @@ var LayerManager = class {
     this.onPropertyChanged?.();
     return true;
   }
+  /**
+   * Attach (or clear) the object drawn in place of a layer's own object. The
+   * proxy tracks the layer's stacking position, visibility and opacity, and is
+   * removed with the layer — it must never outlive or drift from its source.
+   */
+  setRenderProxy(id, proxy) {
+    const layer = this.get(id);
+    if (!layer || layer.renderProxy === proxy) return;
+    if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
+    layer.renderProxy = proxy;
+    if (proxy) {
+      proxy.set({ visible: layer.visible, opacity: layer.opacity });
+      this.canvas.add(proxy);
+      this.syncZOrder();
+    }
+    this.canvas.requestRenderAll();
+    this.emitChanged();
+  }
+  /**
+   * Re-stack every canvas object to match layer order, keeping each proxy
+   * directly above the source it stands in for. Canvas indices can't be derived
+   * from layer indices once proxies are in the array, so the order is rebuilt
+   * front-to-back instead of computed.
+   */
+  syncZOrder() {
+    for (const layer of this.layers) {
+      this.canvas.bringObjectToFront(layer.fabricObject);
+      if (layer.renderProxy) this.canvas.bringObjectToFront(layer.renderProxy);
+    }
+  }
   reorder(id, newIndex) {
     const oldIndex = this.layers.findIndex((l) => l.id === id);
     if (oldIndex === -1) return false;
@@ -234,9 +272,7 @@ var LayerManager = class {
     if (oldIndex === clamped) return false;
     const [layer] = this.layers.splice(oldIndex, 1);
     this.layers.splice(clamped, 0, layer);
-    this.layers.forEach((l, i) => {
-      this.canvas.moveObjectTo(l.fabricObject, i);
-    });
+    this.syncZOrder();
     this.events.emit("layer:reordered", { layerIds: this.layers.map((l) => l.id) });
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -273,6 +309,7 @@ var LayerManager = class {
     if (layer.visible === visible) return;
     layer.visible = visible;
     layer.fabricObject.visible = visible;
+    if (layer.renderProxy) layer.renderProxy.visible = visible;
     this.canvas.requestRenderAll();
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -294,7 +331,8 @@ var LayerManager = class {
     const next = Math.max(0, Math.min(1, opacity));
     if (layer.opacity === next) return;
     layer.opacity = next;
-    layer.fabricObject.opacity = next;
+    if (layer.renderProxy) layer.renderProxy.opacity = next;
+    else layer.fabricObject.opacity = next;
     this.canvas.requestRenderAll();
     this.emitChanged();
     this.onPropertyChanged?.();
@@ -342,6 +380,7 @@ var LayerManager = class {
   clear() {
     for (const layer of this.layers) {
       this.canvas.remove(layer.fabricObject);
+      if (layer.renderProxy) this.canvas.remove(layer.renderProxy);
     }
     this.layers = [];
     this.emitChanged();
@@ -875,199 +914,415 @@ var CropController = class {
 };
 var STROKE2 = "#22c55e";
 
-// src/pattern.ts
+// src/pattern/pattern-manager.ts
+var import_fabric3 = require("fabric");
+
+// src/pattern/tiled-pattern-object.ts
 var import_fabric2 = require("fabric");
+
+// src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
+function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
+  const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  const radius = cornerRadius(anchor, targetW, targetH);
+  const span = radius * 2;
+  const minTile = Math.max(1, span / MAX_TILES_PER_AXIS);
+  const tileW = Math.max(minTile, baseW * (1 + config.horizontalSpacing / 100));
+  const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
+  const cols = Math.ceil(span / tileW) + 2;
+  const rows = Math.ceil(span / tileH) + 2;
+  const halfCols = Math.ceil(cols / 2);
+  const halfRows = Math.ceil(rows / 2);
+  const shiftX = tileW * (clampOffset(config.offsetX) / 100);
+  const shiftY = tileH * (clampOffset(config.offsetY) / 100);
+  const placements = [];
+  for (let j = -halfRows; j <= halfRows; j++) {
+    for (let i = -halfCols; i <= halfCols; i++) {
+      let x = i * tileW + shiftX;
+      let y = j * tileH + shiftY;
+      if (config.mode === "brick-horizontal" && mod2(j) === 1) {
+        x += tileW * (config.horizontalOffset / 100);
+      } else if (config.mode === "brick-vertical" && mod2(i) === 1) {
+        y += tileH * (config.horizontalOffset / 100);
+      }
+      const rotation = (i * config.rotationStepH + j * config.rotationStepV) * Math.PI / 180;
+      placements.push({ x, y, rotation });
+    }
+  }
+  return placements;
+}
+function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
+  const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  ctx.save();
+  ctx.translate(anchor.x, anchor.y);
+  ctx.rotate(config.angle * Math.PI / 180);
+  for (const tile of computeTilePositions(config, targetW, targetH, baseW, baseH, anchor)) {
+    ctx.save();
+    ctx.translate(tile.x, tile.y);
+    ctx.rotate(tile.rotation);
+    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
+    ctx.restore();
+  }
+  ctx.restore();
+}
+function cornerRadius(origin, w, h) {
+  const dx = Math.max(Math.abs(origin.x), Math.abs(w - origin.x));
+  const dy = Math.max(Math.abs(origin.y), Math.abs(h - origin.y));
+  return Math.sqrt(dx * dx + dy * dy);
+}
+function clampOffset(value) {
+  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
+  return Math.max(-100, Math.min(100, value));
+}
+function mod2(n) {
+  return (n % 2 + 2) % 2;
+}
+
+// src/pattern/tiled-pattern-object.ts
+var MAX_SNAPSHOT_PIXELS = 16e6;
+var MAX_SNAPSHOT_SCALE = 8;
+var SNAPSHOT_SHRINK_FACTOR = 2;
+var TiledPatternObject = class _TiledPatternObject extends import_fabric2.FabricObject {
+  static type = "TiledPattern";
+  /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
+  source;
+  config;
+  snapshotEl = null;
+  snapshotScale = 0;
+  constructor(source, config, width, height) {
+    super({
+      // Explicit origin: fabric v7 defaults to `center`, and a centre-origin
+      // object placed at 0,0 covers a quarter of the canvas. That exact bug is
+      // why the old bake-into-the-layer pattern landed in the top-left corner.
+      originX: "left",
+      originY: "top",
+      left: 0,
+      top: 0,
+      width,
+      height,
+      // Pointer events belong to the source underneath, and fabric's object
+      // cache would freeze the tiling at screen resolution.
+      selectable: false,
+      evented: false,
+      objectCaching: false,
+      hasControls: false,
+      hasBorders: false
+    });
+    this.source = source;
+    this.config = config;
+  }
+  /** Swap in a new config; the next render picks it up. */
+  setConfig(config) {
+    this.config = config;
+    this.dirty = true;
+  }
+  /** Resize to a new print area. */
+  setArea(width, height) {
+    this.set({ width, height });
+    this.setCoords();
+  }
+  /** Drop the cached source snapshot (e.g. the source was edited). */
+  invalidate() {
+    this.snapshotEl = null;
+    this.snapshotScale = 0;
+    this.dirty = true;
+  }
+  /** Free the offscreen snapshot. */
+  dispose() {
+    this.snapshotEl = null;
+    this.snapshotScale = 0;
+  }
+  _render(ctx) {
+    const width = this.width ?? 0;
+    const height = this.height ?? 0;
+    if (width <= 0 || height <= 0) return;
+    const tileScale = Math.max(1, this.config.scale ?? 100) / 100;
+    const snapshot = this.ensureSnapshot(contextScale(ctx) * tileScale);
+    if (!snapshot) return;
+    const { tileW, tileH } = this.tileSize(snapshot, tileScale, width, height);
+    ctx.save();
+    ctx.translate(-width / 2, -height / 2);
+    drawTiles(ctx, snapshot, this.config, width, height, tileW, tileH, this.gridOrigin());
+    ctx.restore();
+  }
+  /** Raster fallback for SVG export — one `<image>` covering the print area. */
+  _toSVG() {
+    const width = this.width ?? 0;
+    const height = this.height ?? 0;
+    if (width <= 0 || height <= 0) return [];
+    const el = document.createElement("canvas");
+    el.width = Math.max(1, Math.round(width));
+    el.height = Math.max(1, Math.round(height));
+    const ctx = el.getContext("2d");
+    if (!ctx) return [];
+    const tileScale = Math.max(1, this.config.scale ?? 100) / 100;
+    const snapshot = this.ensureSnapshot(tileScale);
+    if (!snapshot) return [];
+    const { tileW, tileH } = this.tileSize(snapshot, tileScale, width, height);
+    drawTiles(ctx, snapshot, this.config, width, height, tileW, tileH, this.gridOrigin());
+    return [
+      `<image x="${-width / 2}" y="${-height / 2}" width="${width}" height="${height}" `,
+      `xlink:href="${el.toDataURL("image/png")}"></image>
+`
+    ];
+  }
+  /**
+   * Fabric's generic clone round-trips through `toObject()` + the class
+   * registry, which cannot carry a live source reference. Export paths clone
+   * every canvas object, so without this a print export would silently lose the
+   * tiling. The copy shares the source (it only ever reads from it).
+   */
+  clone() {
+    const copy = new _TiledPatternObject(
+      this.source,
+      this.config,
+      this.width ?? 0,
+      this.height ?? 0
+    );
+    copy.set({
+      left: this.left,
+      top: this.top,
+      visible: this.visible,
+      opacity: this.opacity
+    });
+    return Promise.resolve(copy);
+  }
+  /**
+   * The proxy holds a live reference to its source, which would make a
+   * serialized canvas circular. Nothing persists this object (only layers are
+   * serialized) — this keeps an accidental `canvas.toObject()` from throwing.
+   */
+  toObject() {
+    const plain = super.toObject();
+    delete plain.source;
+    return plain;
+  }
+  /** Tile size in canvas units, floored so a tiny tile can't spawn a huge loop. */
+  tileSize(snapshot, tileScale, width, height) {
+    const floor = Math.max(2, Math.sqrt(width * width + height * height) / 200);
+    return {
+      tileW: Math.max(floor, snapshot.width / this.snapshotScale * tileScale),
+      tileH: Math.max(floor, snapshot.height / this.snapshotScale * tileScale)
+    };
+  }
+  /** Grid anchor: the source's centre, in this object's coordinates. */
+  gridOrigin() {
+    const centre = this.source.getCenterPoint();
+    return { x: centre.x - (this.left ?? 0), y: centre.y - (this.top ?? 0) };
+  }
+  /**
+   * Snapshot the source at (at least) `scale`, reusing the cached one when it is
+   * still sharp enough and the source has not changed.
+   */
+  ensureSnapshot(scale) {
+    const wanted = this.clampScale(scale);
+    const stale = this.source.dirty || !this.snapshotEl || this.snapshotScale < wanted || this.snapshotScale > wanted * SNAPSHOT_SHRINK_FACTOR;
+    if (!stale) return this.snapshotEl;
+    const source = this.source;
+    const opacity = source.opacity;
+    source.opacity = 1;
+    try {
+      const el = source.toCanvasElement({ multiplier: wanted, enableRetinaScaling: false });
+      if (!el.width || !el.height) return null;
+      this.snapshotEl = el;
+      this.snapshotScale = wanted;
+    } catch {
+      return this.snapshotEl;
+    } finally {
+      source.opacity = opacity;
+      source.dirty = false;
+    }
+    return this.snapshotEl;
+  }
+  /** Bound the snapshot by both a linear scale and a total pixel budget. */
+  clampScale(scale) {
+    const requested = Math.min(MAX_SNAPSHOT_SCALE, Math.max(0.05, scale));
+    const rect = this.source.getBoundingRect();
+    const area = Math.max(1, rect.width * rect.height);
+    const budgeted = Math.sqrt(MAX_SNAPSHOT_PIXELS / area);
+    return Math.max(0.05, Math.min(requested, budgeted));
+  }
+};
+function contextScale(ctx) {
+  if (typeof ctx.getTransform !== "function") return 1;
+  try {
+    const t = ctx.getTransform();
+    return Math.max(Math.hypot(t.a, t.b), Math.hypot(t.c, t.d), 0.05);
+  } catch {
+    return 1;
+  }
+}
+
+// src/pattern/pattern-manager.ts
 var PatternManager = class {
-  constructor(canvas, layers, history, events, sourceResolver) {
+  constructor(canvas, layers, history, events) {
     this.canvas = canvas;
     this.layers = layers;
     this.history = history;
     this.events = events;
-    this.sourceResolver = sourceResolver;
+    this.canvas.on("object:modified", this.onSourceModified);
+    this.canvas.on("text:changed", this.onSourceModified);
+    this.events.on("layer:removed", this.onLayerRemoved);
   }
   canvas;
   layers;
   history;
   events;
-  sourceResolver;
-  // Per-layer task chain. apply()/disable() both await an async setSrc on the
-  // same fabric image; running two concurrently lets their setSrc resolutions
-  // interleave (wrong image installed, original lost). Serialising per layer
-  // guarantees the last-requested operation wins and state stays consistent.
-  chains = /* @__PURE__ */ new Map();
+  proxies = /* @__PURE__ */ new Map();
+  onSourceModified = (event) => {
+    this.invalidateFor(event.target);
+  };
+  onLayerRemoved = ({ layerId }) => {
+    const proxy = this.proxies.get(layerId);
+    if (!proxy) return;
+    proxy.dispose();
+    this.proxies.delete(layerId);
+  };
   isPattern(layerId) {
     return !!this.layers.get(layerId)?.meta.pattern;
   }
   getConfig(layerId) {
     return this.layers.get(layerId)?.meta.pattern?.config ?? null;
   }
-  /** Turn a plain image layer into a pattern, or update an existing one. */
-  apply(layerId, config) {
-    return this.enqueue(layerId, async () => {
-      const layer = this.layers.get(layerId);
-      if (!layer || layer.type !== "image") return;
-      const image = layer.fabricObject;
-      const firstEnable = !layer.meta.pattern;
-      if (!layer.meta.pattern) {
-        const clip = image.clipPath;
-        layer.meta.pattern = {
-          config,
-          originalSrc: elementToDataURL(image) ?? image.getSrc(),
-          originalClip: clip ? clip.toObject() : null,
-          originalLocks: captureLocks(image),
-          original: {
-            left: image.left ?? 0,
-            top: image.top ?? 0,
-            scaleX: image.scaleX ?? 1,
-            scaleY: image.scaleY ?? 1,
-            width: image.width ?? 0,
-            height: image.height ?? 0,
-            angle: image.angle ?? 0,
-            cropX: image.cropX ?? 0,
-            cropY: image.cropY ?? 0
-          }
-        };
+  /** Turn a layer into a repeating pattern, or update an existing one. */
+  async apply(layerId, config) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    try {
+      this.layers.setMeta(layerId, { pattern: { config } });
+      const proxy = this.proxies.get(layerId);
+      if (proxy) {
+        proxy.setConfig(config);
+        this.canvas.requestRenderAll();
       } else {
-        layer.meta.pattern.config = config;
-      }
-      try {
-        await this.renderLayer(layer);
-      } catch (err) {
-        if (firstEnable) delete layer.meta.pattern;
-        throw err;
+        this.attach(layer, config);
       }
       this.history.save();
-    }).catch((error) => {
-      this.events.emit("error", { message: "Failed to apply image pattern", error });
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to apply pattern", error });
       throw error;
-    });
-  }
-  /**
-   * Stretch every restored pattern layer back over the full print area and
-   * re-freeze it, without re-rasterising: the baked bitmap keeps whatever size
-   * it was saved at, so it is scaled (not re-tiled) to the current canvas. Used
-   * after a state restore, where the canvas may be a different display size
-   * than when the pattern was baked — and to repair states saved while a
-   * pattern could still be dragged out of the print area.
-   */
-  repinAll() {
-    const cw = this.canvas.getWidth();
-    const ch = this.canvas.getHeight();
-    let changed = false;
-    for (const layer of this.layers.getAll()) {
-      if (!layer.meta.pattern || layer.type !== "image") continue;
-      const image = layer.fabricObject;
-      image.set({
-        left: 0,
-        top: 0,
-        angle: 0,
-        scaleX: cw / (image.width || cw),
-        scaleY: ch / (image.height || ch)
-      });
-      applyPatternLocks(image);
-      image.setCoords();
-      changed = true;
     }
-    if (changed) this.canvas.requestRenderAll();
   }
-  /** Restore the original image and drop the pattern. */
-  disable(layerId) {
-    return this.enqueue(layerId, async () => {
-      const layer = this.layers.get(layerId);
-      const state = layer?.meta.pattern;
-      if (!layer || !state) return;
-      const image = layer.fabricObject;
-      await image.setSrc(state.originalSrc);
-      image.set({
-        left: state.original.left,
-        top: state.original.top,
-        scaleX: state.original.scaleX,
-        scaleY: state.original.scaleY,
-        width: state.original.width,
-        height: state.original.height,
-        cropX: state.original.cropX,
-        cropY: state.original.cropY,
-        angle: state.original.angle
-      });
-      image.clipPath = state.originalClip ? (await import_fabric2.util.enlivenObjects([state.originalClip]))[0] : void 0;
-      restoreLocks(image, state.originalLocks);
-      image.setCoords();
-      delete layer.meta.pattern;
+  /** Drop the tiling and show the source again. */
+  async disable(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer?.meta.pattern) return;
+    try {
+      this.detach(layerId);
+      restoreLocks(layer.fabricObject, layer.meta.pattern.originalLocks);
+      layer.fabricObject.set({ opacity: layer.opacity });
+      this.layers.setMeta(layerId, { pattern: void 0 });
       this.canvas.requestRenderAll();
       this.history.save();
-    }).catch((error) => {
-      this.events.emit("error", { message: "Failed to clear image pattern", error });
+    } catch (error) {
+      this.events.emit("error", { message: "Failed to clear pattern", error });
       throw error;
-    });
+    }
   }
-  /** Run `task` after any in-flight work for this layer, regardless of outcome. */
-  enqueue(layerId, task) {
-    const prev = this.chains.get(layerId) ?? Promise.resolve();
-    const next = prev.then(task, task);
-    this.chains.set(
-      layerId,
-      next.catch(() => void 0)
-    );
-    return next;
+  /**
+   * Rebuild every proxy after a state restore, migrating any layer that was
+   * saved by the old bake-into-the-layer engine.
+   */
+  async rehydrateAll() {
+    this.clearProxies();
+    for (const layer of this.layers.getAll()) {
+      const state = layer.meta.pattern;
+      if (!state) continue;
+      try {
+        if (isLegacyState(state)) {
+          await unbakeLegacyLayer(layer, state);
+          this.layers.setMeta(layer.id, { pattern: { config: state.config } });
+        }
+        this.attach(layer, state.config);
+      } catch (error) {
+        this.events.emit("error", { message: "Failed to restore pattern layer", error });
+      }
+    }
+    this.canvas.requestRenderAll();
   }
-  async renderLayer(layer) {
+  /** Re-fit every proxy to the print area (canvas resize). */
+  syncArea() {
+    const width = this.canvas.getWidth();
+    const height = this.canvas.getHeight();
+    for (const proxy of this.proxies.values()) {
+      proxy.setArea(width, height);
+      proxy.invalidate();
+    }
+    if (this.proxies.size > 0) this.canvas.requestRenderAll();
+  }
+  /** Drop a layer's cached source snapshot (its content changed). */
+  invalidate(layerId) {
+    const proxy = this.proxies.get(layerId);
+    if (!proxy) return;
+    proxy.invalidate();
+    this.canvas.requestRenderAll();
+  }
+  /** Give a freshly cloned layer its own proxy (duplicating a pattern layer). */
+  attachTo(layer) {
     const state = layer.meta.pattern;
-    if (!state) return;
-    const image = layer.fabricObject;
-    const cw = this.canvas.getWidth();
-    const ch = this.canvas.getHeight();
-    const scale = Math.max(1, state.config.scale ?? 100) / 100;
-    const diag = Math.sqrt(cw * cw + ch * ch);
-    const minTile = Math.max(2, diag / MAX_TILES_PER_AXIS);
-    const tileW = Math.max(minTile, state.original.width * state.original.scaleX * scale);
-    const tileH = Math.max(minTile, state.original.height * state.original.scaleY * scale);
-    const dataUrl = await buildPatternDataURL(
-      state.originalSrc,
-      state.config,
-      cw,
-      ch,
-      tileW,
-      tileH,
-      this.sourceResolver
+    if (!state || this.proxies.has(layer.id)) return;
+    this.attach(layer, state.config);
+  }
+  dispose() {
+    this.canvas.off("object:modified", this.onSourceModified);
+    this.canvas.off("text:changed", this.onSourceModified);
+    this.events.off("layer:removed", this.onLayerRemoved);
+    this.clearProxies();
+  }
+  /** Release every proxy and the offscreen snapshot it holds. */
+  clearProxies() {
+    for (const proxy of this.proxies.values()) proxy.dispose();
+    this.proxies.clear();
+  }
+  attach(layer, config) {
+    const proxy = new TiledPatternObject(
+      layer.fabricObject,
+      config,
+      this.canvas.getWidth(),
+      this.canvas.getHeight()
     );
-    await image.setSrc(dataUrl);
-    image.set({
-      left: 0,
-      top: 0,
-      scaleX: 1,
-      scaleY: 1,
-      width: cw,
-      height: ch,
-      cropX: 0,
-      cropY: 0,
-      angle: 0
-    });
-    image.clipPath = void 0;
-    applyPatternLocks(image);
-    image.setCoords();
+    layer.fabricObject.set({ opacity: 0 });
+    this.proxies.set(layer.id, proxy);
+    this.layers.setRenderProxy(layer.id, proxy);
     this.canvas.requestRenderAll();
   }
+  detach(layerId) {
+    const proxy = this.proxies.get(layerId);
+    if (!proxy) {
+      this.layers.setRenderProxy(layerId, null);
+      return;
+    }
+    this.layers.setRenderProxy(layerId, null);
+    proxy.dispose();
+    this.proxies.delete(layerId);
+  }
+  invalidateFor(target) {
+    if (!target) return;
+    const layer = this.layers.findByObject(target);
+    if (layer) this.invalidate(layer.id);
+  }
 };
-function captureLocks(obj) {
-  return {
-    lockMovementX: obj.lockMovementX ?? false,
-    lockMovementY: obj.lockMovementY ?? false,
-    lockScalingX: obj.lockScalingX ?? false,
-    lockScalingY: obj.lockScalingY ?? false,
-    lockRotation: obj.lockRotation ?? false,
-    hasControls: obj.hasControls ?? true
-  };
-}
-function applyPatternLocks(obj) {
-  obj.set({
-    lockMovementX: true,
-    lockMovementY: true,
-    lockScalingX: true,
-    lockScalingY: true,
-    lockRotation: true,
-    hasControls: false
+function isLegacyState(state) {
+  return typeof state.originalSrc === "string" && state.originalSrc.length > 0;
+}
+async function unbakeLegacyLayer(layer, state) {
+  const image = layer.fabricObject;
+  if (typeof image.setSrc !== "function" || !state.original) return;
+  await image.setSrc(state.originalSrc);
+  image.set({
+    left: state.original.left,
+    top: state.original.top,
+    scaleX: state.original.scaleX,
+    scaleY: state.original.scaleY,
+    width: state.original.width,
+    height: state.original.height,
+    cropX: state.original.cropX,
+    cropY: state.original.cropY,
+    angle: state.original.angle
   });
+  image.clipPath = state.originalClip ? (await import_fabric3.util.enlivenObjects([state.originalClip]))[0] : void 0;
+  restoreLocks(image, state.originalLocks);
+  image.setCoords();
 }
 function restoreLocks(obj, locks) {
   obj.set(
@@ -1081,124 +1336,9 @@ function restoreLocks(obj, locks) {
     }
   );
 }
-function elementToDataURL(image) {
-  try {
-    const el = image.getElement();
-    const w = el.naturalWidth || el.width;
-    const h = el.naturalHeight || el.height;
-    if (!w || !h) return null;
-    const off = document.createElement("canvas");
-    off.width = w;
-    off.height = h;
-    const ctx = off.getContext("2d");
-    if (!ctx) return null;
-    ctx.drawImage(el, 0, 0);
-    return off.toDataURL("image/png");
-  } catch {
-    return null;
-  }
-}
-var IMAGE_CACHE_MAX = 16;
-var imageCache = /* @__PURE__ */ new Map();
-function loadPatternImage(src, resolver) {
-  const cached = imageCache.get(src);
-  if (cached) {
-    imageCache.delete(src);
-    imageCache.set(src, cached);
-    return cached;
-  }
-  const promise = decodeImage(src).catch(async (originalError) => {
-    if (!resolver) throw originalError;
-    const resolved = await resolver(src);
-    if (!resolved || resolved === src) {
-      throw new Error("Pattern source resolver did not return a usable alternate URL", {
-        cause: originalError
-      });
-    }
-    return decodeImage(resolved);
-  });
-  promise.catch(() => {
-    if (imageCache.get(src) === promise) imageCache.delete(src);
-  });
-  imageCache.set(src, promise);
-  if (imageCache.size > IMAGE_CACHE_MAX) {
-    const oldest = imageCache.keys().next().value;
-    if (oldest !== void 0) imageCache.delete(oldest);
-  }
-  return promise;
-}
-function decodeImage(src) {
-  return new Promise((resolve, reject) => {
-    const img = new Image();
-    img.crossOrigin = "anonymous";
-    img.onload = () => resolve(img);
-    img.onerror = () => reject(new Error(`Failed to load pattern source: ${src}`));
-    img.src = src;
-  });
-}
-function clearPatternImageCache() {
-  imageCache.clear();
-}
-async function buildPatternDataURL(src, config, targetW, targetH, baseW, baseH, sourceResolver) {
-  const img = await loadPatternImage(src, sourceResolver);
-  const off = document.createElement("canvas");
-  off.width = Math.max(1, Math.round(targetW));
-  off.height = Math.max(1, Math.round(targetH));
-  const ctx = off.getContext("2d");
-  if (!ctx) return off.toDataURL("image/png");
-  drawTiles(ctx, img, config, targetW, targetH, baseW, baseH);
-  return off.toDataURL("image/png");
-}
-function computeTilePositions(config, targetW, targetH, baseW, baseH) {
-  const diag = Math.sqrt(targetW * targetW + targetH * targetH);
-  const minTile = Math.max(1, diag / MAX_TILES_PER_AXIS);
-  const tileW = Math.max(minTile, baseW * (1 + config.horizontalSpacing / 100));
-  const tileH = Math.max(minTile, baseH * (1 + config.verticalSpacing / 100));
-  const cols = Math.ceil(diag / tileW) + 2;
-  const rows = Math.ceil(diag / tileH) + 2;
-  const halfCols = Math.ceil(cols / 2);
-  const halfRows = Math.ceil(rows / 2);
-  const shiftX = tileW * (clampOffset(config.offsetX) / 100);
-  const shiftY = tileH * (clampOffset(config.offsetY) / 100);
-  const placements = [];
-  for (let j = -halfRows; j <= halfRows; j++) {
-    for (let i = -halfCols; i <= halfCols; i++) {
-      let x = i * tileW + shiftX;
-      let y = j * tileH + shiftY;
-      if (config.mode === "brick-horizontal" && mod2(j) === 1) {
-        x += tileW * (config.horizontalOffset / 100);
-      } else if (config.mode === "brick-vertical" && mod2(i) === 1) {
-        y += tileH * (config.horizontalOffset / 100);
-      }
-      const rotation = (i * config.rotationStepH + j * config.rotationStepV) * Math.PI / 180;
-      placements.push({ x, y, rotation });
-    }
-  }
-  return placements;
-}
-function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH) {
-  ctx.save();
-  ctx.translate(targetW / 2, targetH / 2);
-  ctx.rotate(config.angle * Math.PI / 180);
-  for (const tile of computeTilePositions(config, targetW, targetH, baseW, baseH)) {
-    ctx.save();
-    ctx.translate(tile.x, tile.y);
-    ctx.rotate(tile.rotation);
-    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
-    ctx.restore();
-  }
-  ctx.restore();
-}
-function clampOffset(value) {
-  if (typeof value !== "number" || !Number.isFinite(value)) return 0;
-  return Math.max(-100, Math.min(100, value));
-}
-function mod2(n) {
-  return (n % 2 + 2) % 2;
-}
 
 // src/text-curve.ts
-var import_fabric3 = require("fabric");
+var import_fabric4 = require("fabric");
 var DEFAULT_TEXT_CURVE = { arc: 0, wave: 0 };
 var MIN_ARC = 0.5;
 var FULL_CIRCLE_ARC = 99.5;
@@ -1321,7 +1461,7 @@ var TextCurveManager = class {
       if (layer.meta.curveWidth === void 0) layer.meta.curveWidth = text.width ?? 0;
       text.set({ width: Math.max(layer.meta.curveWidth, run + 2) });
       text.set({
-        path: new import_fabric3.Path(curve.data, { visible: false, objectCaching: false }),
+        path: new import_fabric4.Path(curve.data, { visible: false, objectCaching: false }),
         pathAlign: "center",
         pathSide: "left",
         pathStartOffset: Math.max(0, (curve.length - run) / 2)
@@ -1363,7 +1503,7 @@ var TextCurveManager = class {
 };
 
 // src/mask-presets/manager.ts
-var import_fabric4 = require("fabric");
+var import_fabric5 = require("fabric");
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -1630,13 +1770,13 @@ var MaskPresetManager = class {
       objectCaching: false
     };
     if (isShapeMaskId(id)) {
-      return new import_fabric4.Path(shapeMaskPathData(id), {
+      return new import_fabric5.Path(shapeMaskPathData(id), {
         ...shared,
         scaleX: width / SHAPE_MASK_BOX,
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new import_fabric4.FabricImage(renderTextureMask(id), {
+    return new import_fabric5.FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -1645,7 +1785,7 @@ var MaskPresetManager = class {
 };
 
 // src/shadow.ts
-var import_fabric5 = require("fabric");
+var import_fabric6 = require("fabric");
 
 // src/utils/color.ts
 var CSS_COLOR = /^(?:#[\da-f]{3,8}|(?:rgb|hsl)a?\([\d.%+\-\s,/]+\)|[a-z]+)$/i;
@@ -1683,7 +1823,7 @@ function applyLayerShadow(object, config) {
   }
   const color = isCssColor(next.color) ? next.color : DEFAULT_LAYER_SHADOW.color;
   object.set({
-    shadow: new import_fabric5.Shadow({
+    shadow: new import_fabric6.Shadow({
       color,
       blur: Math.max(0, next.blur),
       offsetX: next.offsetX,
@@ -1797,7 +1937,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric6 = require("fabric");
+var import_fabric7 = require("fabric");
 var VERSION = "2.0.0";
 function serializeEditor(editor) {
   return {
@@ -1833,7 +1973,7 @@ async function deserializeEditor(editor, state) {
   }
   const staged = await Promise.all(
     state.layers.map(async (serialized) => {
-      const fabricObject = (await import_fabric6.util.enlivenObjects([serialized.fabricObject]))[0];
+      const fabricObject = (await import_fabric7.util.enlivenObjects([serialized.fabricObject]))[0];
       if (!fabricObject) {
         const source = serialized.fabricObject.src;
         if (typeof source === "string" && source.startsWith("blob:")) {
@@ -1844,7 +1984,7 @@ async function deserializeEditor(editor, state) {
       return { serialized, fabricObject };
     })
   );
-  const stagedBackground = state.backgroundImage ? (await import_fabric6.util.enlivenObjects([state.backgroundImage]))[0] : null;
+  const stagedBackground = state.backgroundImage ? (await import_fabric7.util.enlivenObjects([state.backgroundImage]))[0] : null;
   if (state.backgroundImage && !stagedBackground) {
     const source = state.backgroundImage.src;
     if (typeof source === "string" && source.startsWith("blob:")) {
@@ -1891,7 +2031,7 @@ function restoreLayer(editor, serialized, fabricObject) {
 }
 
 // src/export.ts
-var import_fabric7 = require("fabric");
+var import_fabric8 = require("fabric");
 
 // src/displacement.ts
 var CHANNEL_INDEX = {
@@ -1985,7 +2125,7 @@ async function exportPNG(canvas, options = {}) {
 }
 async function exportIsolatedPNG(source, objects, options = {}) {
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric7.StaticCanvas(element, {
+  const canvas = new import_fabric8.StaticCanvas(element, {
     width: options.width ?? source.getWidth(),
     height: options.height ?? source.getHeight(),
     backgroundColor: options.backgroundColor || void 0
@@ -2015,7 +2155,7 @@ async function exportPrintArea(source, area, options = {}) {
     throw new Error("Print area does not overlap the canvas");
   }
   const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
-  const canvas = new import_fabric7.StaticCanvas(element, { width, height });
+  const canvas = new import_fabric8.StaticCanvas(element, { width, height });
   try {
     const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
     if (clones.length) canvas.add(...clones);
@@ -2455,7 +2595,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-var import_fabric8 = require("fabric");
+var import_fabric9 = require("fabric");
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -2487,7 +2627,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new import_fabric8.FabricImage(backing, {
+    const image = new import_fabric9.FabricImage(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -2753,7 +2893,7 @@ var CanvasEditor = class {
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric9.Canvas(canvasElement, {
+    this.canvas = new import_fabric10.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -2774,13 +2914,7 @@ var CanvasEditor = class {
     this.layers.setHistoryCallback(() => this.history.save());
     this.snapping = new SnapManager(this.canvas, this.events);
     this.crop = new CropController(this.canvas, this.history, this.events);
-    this.patterns = new PatternManager(
-      this.canvas,
-      this.layers,
-      this.history,
-      this.events,
-      config.patternSourceResolver
-    );
+    this.patterns = new PatternManager(this.canvas, this.layers, this.history, this.events);
     this.curves = new TextCurveManager(this.canvas, this.layers, this.history, this.events);
     this.maskPresets = new MaskPresetManager(this.canvas, this.layers, this.history, this.events);
     this.setupCanvasEvents();
@@ -2792,7 +2926,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric9.FabricImage.fromURL(
+      const img = await import_fabric10.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -2817,7 +2951,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric9.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric10.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -2846,7 +2980,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric9.Textbox(text, {
+    const textbox = new import_fabric10.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -2885,10 +3019,10 @@ var CanvasEditor = class {
         return value === void 0 ? token : escapeXml(value);
       })
     );
-    const { objects, options } = await (0, import_fabric9.loadSVGFromString)(resolved);
+    const { objects, options } = await (0, import_fabric10.loadSVGFromString)(resolved);
     const validObjects = objects.filter((object) => object !== null);
     if (validObjects.length === 0) throw new Error("Template SVG contains no renderable objects");
-    const group = import_fabric9.util.groupSVGElements(validObjects, options);
+    const group = import_fabric10.util.groupSVGElements(validObjects, options);
     group.set({
       left: this.canvas.getWidth() / 2,
       top: this.canvas.getHeight() / 2,
@@ -2933,9 +3067,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) return null;
     const clone = await layer.fabricObject.clone();
-    if (!layer.meta.pattern) {
-      clone.set({ left: (clone.left ?? 0) + 15, top: (clone.top ?? 0) + 15 });
-    }
+    clone.set({ left: (clone.left ?? 0) + 15, top: (clone.top ?? 0) + 15 });
     clone.setCoords();
     const copy = this.layers.add(layer.type, clone, `${layer.name} copy`);
     copy.meta = structuredClone(layer.meta);
@@ -2948,6 +3080,7 @@ var CanvasEditor = class {
       evented: !layer.locked,
       opacity: layer.opacity
     });
+    this.patterns.attachTo(copy);
     this.canvas.setActiveObject(clone);
     this.canvas.requestRenderAll();
     this.history.save();
@@ -2961,10 +3094,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric9.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric9.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric9.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric9.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      new import_fabric10.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric10.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric10.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric10.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -2981,7 +3114,7 @@ var CanvasEditor = class {
       const childData = children.map((layer) => structuredClone(layer.toData()));
       const objects = children.map((layer) => layer.fabricObject);
       for (const layer of children) this.layers.remove(layer.id);
-      const group = new import_fabric9.Group(objects);
+      const group = new import_fabric10.Group(objects);
       const grouped = this.layers.add("group", group, name);
       grouped.meta.groupChildren = childData;
       this.layers.select(grouped.id);
@@ -3000,7 +3133,7 @@ var CanvasEditor = class {
       const objects = group.removeAll();
       this.layers.remove(id);
       const restored = objects.map((object, index) => {
-        import_fabric9.util.addTransformToObject(object, transform);
+        import_fabric10.util.addTransformToObject(object, transform);
         object.setCoords();
         const data = childData[index];
         const layer = this.layers.add(data?.type ?? "group", object, data?.name, data?.id);
@@ -3027,7 +3160,7 @@ var CanvasEditor = class {
     }
     try {
       await deserializeEditor(this, state);
-      this.patterns.repinAll();
+      await this.patterns.rehydrateAll();
     } catch (error) {
       if (!managedByHistory) {
         this.events.emit("error", { message: "Failed to load editor state", error });
@@ -3056,7 +3189,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) throw new Error(`Layer not found: ${id}`);
     try {
-      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric9.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric10.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -3076,7 +3209,11 @@ var CanvasEditor = class {
           cloneObjects: false
         });
       }
-      return await exportIsolatedPNG(this.canvas, [layer.fabricObject], options);
+      return await exportIsolatedPNG(
+        this.canvas,
+        [layer.renderProxy ?? layer.fabricObject],
+        options
+      );
     } catch (error) {
       this.events.emit("error", { message: `Failed to export layer: ${id}`, error });
       throw error;
@@ -3328,7 +3465,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric9.FabricImage.fromURL(
+      const image = await import_fabric10.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -3381,7 +3518,6 @@ var CanvasEditor = class {
       const sx = widthPx / oldWidth;
       const sy = heightPx / oldHeight;
       for (const layer of this.layers.getAll()) {
-        if (layer.meta.pattern) continue;
         const object = layer.fabricObject;
         object.set({
           left: (object.left ?? 0) * sx,
@@ -3402,7 +3538,7 @@ var CanvasEditor = class {
       }
     }
     this.canvas.setDimensions({ width: widthPx, height: heightPx });
-    this.patterns.repinAll();
+    this.patterns.syncArea();
     this.canvas.requestRenderAll();
     this.history.save();
     this.events.emit("canvas:modified", {});
@@ -3600,7 +3736,7 @@ var CanvasEditor = class {
     this.snapping.dispose();
     this.crop.dispose();
     this.history.dispose();
-    clearPatternImageCache();
+    this.patterns.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -3744,17 +3880,14 @@ var AnnotationOverlay = class {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TiledPatternObject,
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
-  applyPatternLocks,
   applySelectionStyle,
   buildCurvePathData,
-  buildPatternDataURL,
-  captureLocks,
   clamp,
-  clearPatternImageCache,
   clearTextureMaskCache,
   computeCoverPlacement,
   computePrintAreaClip,
@@ -3773,7 +3906,6 @@ var AnnotationOverlay = class {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
-  loadPatternImage,
   readLayerShadow,
   renderTextureMask,
   resetTransform,