@overtone-art/canvas-editor-core 0.2.3 → 0.2.5

package/dist/index.mjs

@@ -576,6 +576,7 @@ var PatternManager = class {
           config,
           originalSrc: elementToDataURL(image) ?? image.getSrc(),
           originalClip: clip ? clip.toObject() : null,
+          originalLocks: captureLocks(image),
           original: {
             left: image.left ?? 0,
             top: image.top ?? 0,
@@ -592,7 +593,7 @@ var PatternManager = class {
         layer.meta.pattern.config = config;
       }
       try {
-        await this.renderLayer(layer, firstEnable);
+        await this.renderLayer(layer);
       } catch (err) {
         if (firstEnable) delete layer.meta.pattern;
         throw err;
@@ -600,6 +601,34 @@ var PatternManager = class {
       this.history.save();
     });
   }
+  /**
+   * 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 () => {
@@ -620,6 +649,7 @@ var PatternManager = class {
         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;
       this.canvas.requestRenderAll();
@@ -636,13 +666,12 @@ var PatternManager = class {
     );
     return next;
   }
-  async renderLayer(layer, pin) {
+  async renderLayer(layer) {
     const state = layer.meta.pattern;
     if (!state) return;
     const image = layer.fabricObject;
     const cw = this.canvas.getWidth();
     const ch = this.canvas.getHeight();
-    const { left, top, angle } = resolvePatternPlacement(pin, image);
     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);
@@ -658,29 +687,54 @@ var PatternManager = class {
     );
     await image.setSrc(dataUrl);
     image.set({
-      left,
-      top,
+      left: 0,
+      top: 0,
       scaleX: 1,
       scaleY: 1,
       width: cw,
       height: ch,
       cropX: 0,
       cropY: 0,
-      angle
+      angle: 0
     });
     image.clipPath = void 0;
+    applyPatternLocks(image);
     image.setCoords();
     this.canvas.requestRenderAll();
   }
 };
-function resolvePatternPlacement(pin, current) {
-  if (pin) return { left: 0, top: 0, angle: 0 };
+function captureLocks(obj) {
   return {
-    left: current.left ?? 0,
-    top: current.top ?? 0,
-    angle: current.angle ?? 0
+    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 restoreLocks(obj, locks) {
+  obj.set(
+    locks ?? {
+      lockMovementX: false,
+      lockMovementY: false,
+      lockScalingX: false,
+      lockScalingY: false,
+      lockRotation: false,
+      hasControls: true
+    }
+  );
+}
 function elementToDataURL(image) {
   try {
     const el = image.getElement();
@@ -749,11 +803,13 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH) {
   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;
-      let y = j * tileH;
+      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) {
@@ -778,6 +834,10 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH) {
   }
   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;
 }
@@ -1039,6 +1099,7 @@ var CanvasEditor = class {
   }
   async fromJSON(state) {
     await deserializeEditor(this, state);
+    this.patterns.repinAll();
   }
   // ─── Export ──────────────────────────────────────────
   async toPNG(options) {
@@ -1233,6 +1294,8 @@ var DEFAULT_PATTERN_CONFIG = {
   verticalSpacing: 0,
   angle: 0,
   horizontalOffset: 0,
+  offsetX: 0,
+  offsetY: 0,
   rotationStepH: 0,
   rotationStepV: 0
 };
@@ -1247,7 +1310,9 @@ export {
   PatternManager,
   SnapManager,
   UnitConverter,
+  applyPatternLocks,
   buildPatternDataURL,
+  captureLocks,
   clamp,
   clearPatternImageCache,
   computeTilePositions,
@@ -1257,7 +1322,7 @@ export {
   exportPNG,
   exportSVG,
   generateId,
-  resolvePatternPlacement,
+  restoreLocks,
   round2,
   serializeEditor
 };