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

package/dist/index.mjs

@@ -11,7 +11,7 @@ import {
 } from "./chunk-MCBRZQ4M.mjs";
 
 // src/editor.ts
-import { Canvas, FabricImage as FabricImage4, Group, Textbox, filters, loadSVGFromString, util as util3 } from "fabric";
+import { Canvas, FabricImage as FabricImage3, Group, Textbox, filters, loadSVGFromString, util as util3 } from "fabric";
 
 // src/events.ts
 var EventEmitter = class {
@@ -63,6 +63,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;
@@ -72,6 +78,7 @@ var Layer = class {
     this.opacity = 1;
     this.meta = {};
     this.fabricObject = fabricObject;
+    this.renderProxy = null;
     this.fabricObject._layerId = this.id;
   }
   hasMeta() {
@@ -120,6 +127,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();
@@ -143,6 +151,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 });
@@ -150,6 +162,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;
@@ -158,9 +200,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?.();
@@ -197,6 +237,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?.();
@@ -218,7 +259,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?.();
@@ -266,6 +308,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();
@@ -799,199 +842,415 @@ var CropController = class {
 };
 var STROKE2 = "#22c55e";
 
-// src/pattern.ts
+// src/pattern/pattern-manager.ts
 import { util } from "fabric";
+
+// src/pattern/tiled-pattern-object.ts
+import { FabricObject } from "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 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 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 isLegacyState(state) {
+  return typeof state.originalSrc === "string" && state.originalSrc.length > 0;
 }
-function applyPatternLocks(obj) {
-  obj.set({
-    lockMovementX: true,
-    lockMovementY: true,
-    lockScalingX: true,
-    lockScalingY: true,
-    lockRotation: true,
-    hasControls: false
+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 util.enlivenObjects([state.originalClip]))[0] : void 0;
+  restoreLocks(image, state.originalLocks);
+  image.setCoords();
 }
 function restoreLocks(obj, locks) {
   obj.set(
@@ -1005,121 +1264,6 @@ 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
 import { Path } from "fabric";
@@ -1287,7 +1431,7 @@ var TextCurveManager = class {
 };
 
 // src/mask-presets/manager.ts
-import { FabricImage as FabricImage2, Path as Path2 } from "fabric";
+import { FabricImage, Path as Path2 } from "fabric";
 
 // src/mask-presets/shapes.ts
 var SHAPE_MASK_IDS = [
@@ -1560,7 +1704,7 @@ var MaskPresetManager = class {
         scaleY: height / SHAPE_MASK_BOX
       });
     }
-    return new FabricImage2(renderTextureMask(id), {
+    return new FabricImage(renderTextureMask(id), {
       ...shared,
       scaleX: width / TEXTURE_MASK_SIZE,
       scaleY: height / TEXTURE_MASK_SIZE
@@ -1616,6 +1760,43 @@ function applyLayerShadow(object, config) {
   });
 }
 
+// src/selection-style.ts
+var DEFAULT_SELECTION_STYLE = {
+  borderColor: "#c9a96e",
+  cornerColor: "#c9a96e",
+  cornerStrokeColor: "#101010",
+  cornerSize: 11,
+  cornerStyle: "circle",
+  borderWidth: 1,
+  borderDashArray: null,
+  padding: 0,
+  marqueeFill: "rgba(201, 169, 110, 0.12)"
+};
+function applyObjectSelectionStyle(object, style, zoom) {
+  const scale = zoom > 0 ? 1 / zoom : 1;
+  object.set({
+    cornerSize: style.cornerSize * scale,
+    cornerStyle: style.cornerStyle,
+    cornerColor: style.cornerColor,
+    cornerStrokeColor: style.cornerStrokeColor,
+    // A filled handle is what makes the stroke colour visible at all.
+    transparentCorners: false,
+    borderColor: style.borderColor,
+    borderScaleFactor: style.borderWidth * scale,
+    borderDashArray: style.borderDashArray?.map((segment) => segment * scale) ?? null,
+    padding: style.padding * scale
+  });
+}
+function applySelectionStyle(canvas, style, zoom) {
+  for (const object of canvas.getObjects()) applyObjectSelectionStyle(object, style, zoom);
+  const active = canvas.getActiveObject();
+  if (active) applyObjectSelectionStyle(active, style, zoom);
+  canvas.selectionColor = style.marqueeFill;
+  canvas.selectionBorderColor = style.borderColor;
+  canvas.selectionLineWidth = style.borderWidth * (zoom > 0 ? 1 / zoom : 1);
+  canvas.requestRenderAll();
+}
+
 // src/transform.ts
 var SIDE_CONTROLS = ["ml", "mr", "mt", "mb"];
 function applyAspectLock(object, locked) {
@@ -2091,7 +2272,7 @@ var ProjectManager = class {
 };
 
 // src/mask.ts
-import { FabricImage as FabricImage3 } from "fabric";
+import { FabricImage as FabricImage2 } from "fabric";
 var MaskRefinementError = class extends Error {
   constructor(code, message, cause) {
     super(message);
@@ -2123,7 +2304,7 @@ var MaskController = class {
       throw new Error("Mask dimensions must be positive integers");
     }
     const backing = this.makeCanvas(width, height);
-    const image = new FabricImage3(backing, {
+    const image = new FabricImage2(backing, {
       left: 0,
       top: 0,
       originX: "left",
@@ -2372,6 +2553,7 @@ var CanvasEditor = class {
   fileAdapter;
   imageProvider;
   zoomLevel = 1;
+  selectionStyle = { ...DEFAULT_SELECTION_STYLE };
   mockup = null;
   // The design's configured background. The live canvas background is forced
   // transparent while a mockup preview is shown, so this is the source of truth
@@ -2409,16 +2591,11 @@ 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();
+    this.refreshSelectionStyle();
     this.history.saveImmediate();
     this.pages = new ProjectManager(this);
     this.masks = new MaskController(this);
@@ -2426,7 +2603,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await FabricImage4.fromURL(
+      const img = await FabricImage3.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -2451,7 +2628,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await FabricImage4.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await FabricImage3.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -2567,9 +2744,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);
@@ -2582,6 +2757,7 @@ var CanvasEditor = class {
       evented: !layer.locked,
       opacity: layer.opacity
     });
+    this.patterns.attachTo(copy);
     this.canvas.setActiveObject(clone);
     this.canvas.requestRenderAll();
     this.history.save();
@@ -2661,7 +2837,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 });
@@ -2690,7 +2866,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 FabricImage4) {
+      if (options.resolution === "source" && layer.fabricObject instanceof FabricImage3) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -2710,7 +2886,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;
@@ -2962,7 +3142,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await FabricImage4.fromURL(
+      const image = await FabricImage3.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -3015,7 +3195,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,
@@ -3036,7 +3215,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", {});
@@ -3089,6 +3268,7 @@ var CanvasEditor = class {
     const next = clamp(round2(level), MIN_ZOOM, MAX_ZOOM);
     if (next === this.zoomLevel) return;
     this.zoomLevel = next;
+    this.refreshSelectionStyle();
     this.events.emit("zoom:changed", { zoom: next });
   }
   /** @deprecated use setZoom — kept for backward compatibility. */
@@ -3233,12 +3413,35 @@ var CanvasEditor = class {
     this.snapping.dispose();
     this.crop.dispose();
     this.history.dispose();
-    clearPatternImageCache();
+    this.patterns.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
+  // ─── Selection style ────────────────────────────────
+  /** Current look of the selection frame and its handles. */
+  getSelectionStyle() {
+    return { ...this.selectionStyle };
+  }
+  /**
+   * Restyles the selection frame and resize handles. Sizes are in screen
+   * pixels and stay constant across zoom levels (see `SelectionStyle`).
+   */
+  setSelectionStyle(style) {
+    this.selectionStyle = { ...this.selectionStyle, ...style };
+    this.refreshSelectionStyle();
+  }
+  refreshSelectionStyle() {
+    applySelectionStyle(this.canvas, this.selectionStyle, this.zoomLevel);
+  }
   // ─── Private ────────────────────────────────────────
   setupCanvasEvents() {
+    this.canvas.on("object:added", (e) => {
+      if (e.target) applyObjectSelectionStyle(e.target, this.selectionStyle, this.zoomLevel);
+    });
+    const styleActive = () => {
+      const active = this.canvas.getActiveObject();
+      if (active) applyObjectSelectionStyle(active, this.selectionStyle, this.zoomLevel);
+    };
     this.canvas.on("object:modified", (e) => {
       if (!e.target) return;
       const layer = this.layers.findByObject(e.target);
@@ -3248,10 +3451,12 @@ var CanvasEditor = class {
       }
     });
     this.canvas.on("selection:created", (e) => {
+      styleActive();
       const selected = (e.selected ?? []).map((obj) => this.layers.findByObject(obj)?.id).filter((id) => id !== void 0);
       this.events.emit("selection:changed", { selected });
     });
     this.canvas.on("selection:updated", (e) => {
+      styleActive();
       const selected = (e.selected ?? []).map((obj) => this.layers.findByObject(obj)?.id).filter((id) => id !== void 0);
       this.events.emit("selection:changed", { selected });
     });
@@ -3332,6 +3537,7 @@ export {
   CropController,
   DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG,
+  DEFAULT_SELECTION_STYLE,
   DEFAULT_TEXT_CURVE,
   EventEmitter,
   FontRegistry,
@@ -3350,15 +3556,14 @@ export {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TiledPatternObject,
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
-  applyPatternLocks,
+  applyObjectSelectionStyle,
+  applySelectionStyle,
   buildCurvePathData,
-  buildPatternDataURL,
-  captureLocks,
   clamp,
-  clearPatternImageCache,
   clearTextureMaskCache,
   computeCoverPlacement,
   computePrintAreaClip,
@@ -3377,7 +3582,6 @@ export {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
-  loadPatternImage,
   readLayerShadow,
   renderTextureMask,
   resetTransform,