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

package/dist/index.d.mts

@@ -95,11 +95,29 @@ interface PatternConfig {
     angle: number;
     /** Brick row/column shift, as % of tile size. */
     horizontalOffset: number;
+    /**
+     * Phase shift of the whole tile grid inside the print area, as % of tile
+     * width. The pattern object itself is pinned to the print area (it can't be
+     * dragged — that would expose bare edges), so this is how the tiling is
+     * nudged into alignment. Clamped to ±100% so coverage is never broken.
+     */
+    offsetX: number;
+    /** Phase shift of the tile grid, as % of tile height. See {@link offsetX}. */
+    offsetY: number;
     /** Added rotation per horizontal step, in degrees. */
     rotationStepH: number;
     /** Added rotation per vertical step, in degrees. */
     rotationStepV: number;
 }
+/** Fabric interaction flags frozen while a layer is rendered as a pattern. */
+interface PatternLocks {
+    lockMovementX: boolean;
+    lockMovementY: boolean;
+    lockScalingX: boolean;
+    lockScalingY: boolean;
+    lockRotation: boolean;
+    hasControls: boolean;
+}
 /** Persisted on a layer's meta while it is rendered as a repeating pattern. */
 interface PatternState {
     config: PatternConfig;
@@ -113,6 +131,13 @@ interface PatternState {
      * serialization / reload / undo.
      */
     originalClip?: Record<string, unknown> | null;
+    /**
+     * Interaction flags the object carried before it became a pattern. A pattern
+     * fills the whole print area, so while it is on the object is locked in place
+     * (a drag/resize would slide the tiled bitmap off the area and leave a bare
+     * band); the captured flags are restored when the pattern is turned off.
+     */
+    originalLocks?: PatternLocks;
     /** Original fabric transform, restored when the pattern is turned off. */
     original: {
         left: number;
@@ -338,31 +363,31 @@ declare class PatternManager {
     getConfig(layerId: string): PatternConfig | null;
     /** Turn a plain image layer into a pattern, or update an existing one. */
     apply(layerId: string, config: PatternConfig): Promise<void>;
+    /**
+     * 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(): void;
     /** Restore the original image and drop the pattern. */
     disable(layerId: string): Promise<void>;
     /** Run `task` after any in-flight work for this layer, regardless of outcome. */
     private enqueue;
     private renderLayer;
 }
+/** Interaction flags to restore when a pattern is turned off. */
+declare function captureLocks(obj: FabricObject): PatternLocks;
+/** Pin a pattern object: no move, scale or rotate while the pattern is on. */
+declare function applyPatternLocks(obj: FabricObject): void;
 /**
- * Object placement for a pattern re-render.
- *
- * The FIRST enable pins the pattern to the print-area origin (0,0, unrotated) so
- * it fills the whole area. A later config update (scale/angle/spacing slider)
- * preserves the object's current placement — otherwise tweaking a slider would
- * snap a pattern the user had dragged/rotated back to the top-left corner.
- *
- * Exported for unit testing.
+ * Restore pre-pattern interaction flags. States saved before locking existed
+ * carry no snapshot — fall back to a fully interactive object rather than
+ * leaving it frozen forever.
  */
-declare function resolvePatternPlacement(pin: boolean, current: {
-    left?: number;
-    top?: number;
-    angle?: number;
-}): {
-    left: number;
-    top: number;
-    angle: number;
-};
+declare function restoreLocks(obj: FabricObject, locks: PatternLocks | undefined): void;
 /** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
 declare function clearPatternImageCache(): void;
 /**
@@ -493,4 +518,4 @@ declare function round2(v: number): number;
 declare function serializeEditor(editor: CanvasEditor): EditorState;
 declare function deserializeEditor(editor: CanvasEditor, state: EditorState): Promise<void>;
 
-export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, buildPatternDataURL, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, resolvePatternPlacement, round2, serializeEditor };
+export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, type PatternLocks, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, applyPatternLocks, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, restoreLocks, round2, serializeEditor };

package/dist/index.d.ts

@@ -95,11 +95,29 @@ interface PatternConfig {
     angle: number;
     /** Brick row/column shift, as % of tile size. */
     horizontalOffset: number;
+    /**
+     * Phase shift of the whole tile grid inside the print area, as % of tile
+     * width. The pattern object itself is pinned to the print area (it can't be
+     * dragged — that would expose bare edges), so this is how the tiling is
+     * nudged into alignment. Clamped to ±100% so coverage is never broken.
+     */
+    offsetX: number;
+    /** Phase shift of the tile grid, as % of tile height. See {@link offsetX}. */
+    offsetY: number;
     /** Added rotation per horizontal step, in degrees. */
     rotationStepH: number;
     /** Added rotation per vertical step, in degrees. */
     rotationStepV: number;
 }
+/** Fabric interaction flags frozen while a layer is rendered as a pattern. */
+interface PatternLocks {
+    lockMovementX: boolean;
+    lockMovementY: boolean;
+    lockScalingX: boolean;
+    lockScalingY: boolean;
+    lockRotation: boolean;
+    hasControls: boolean;
+}
 /** Persisted on a layer's meta while it is rendered as a repeating pattern. */
 interface PatternState {
     config: PatternConfig;
@@ -113,6 +131,13 @@ interface PatternState {
      * serialization / reload / undo.
      */
     originalClip?: Record<string, unknown> | null;
+    /**
+     * Interaction flags the object carried before it became a pattern. A pattern
+     * fills the whole print area, so while it is on the object is locked in place
+     * (a drag/resize would slide the tiled bitmap off the area and leave a bare
+     * band); the captured flags are restored when the pattern is turned off.
+     */
+    originalLocks?: PatternLocks;
     /** Original fabric transform, restored when the pattern is turned off. */
     original: {
         left: number;
@@ -338,31 +363,31 @@ declare class PatternManager {
     getConfig(layerId: string): PatternConfig | null;
     /** Turn a plain image layer into a pattern, or update an existing one. */
     apply(layerId: string, config: PatternConfig): Promise<void>;
+    /**
+     * 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(): void;
     /** Restore the original image and drop the pattern. */
     disable(layerId: string): Promise<void>;
     /** Run `task` after any in-flight work for this layer, regardless of outcome. */
     private enqueue;
     private renderLayer;
 }
+/** Interaction flags to restore when a pattern is turned off. */
+declare function captureLocks(obj: FabricObject): PatternLocks;
+/** Pin a pattern object: no move, scale or rotate while the pattern is on. */
+declare function applyPatternLocks(obj: FabricObject): void;
 /**
- * Object placement for a pattern re-render.
- *
- * The FIRST enable pins the pattern to the print-area origin (0,0, unrotated) so
- * it fills the whole area. A later config update (scale/angle/spacing slider)
- * preserves the object's current placement — otherwise tweaking a slider would
- * snap a pattern the user had dragged/rotated back to the top-left corner.
- *
- * Exported for unit testing.
+ * Restore pre-pattern interaction flags. States saved before locking existed
+ * carry no snapshot — fall back to a fully interactive object rather than
+ * leaving it frozen forever.
  */
-declare function resolvePatternPlacement(pin: boolean, current: {
-    left?: number;
-    top?: number;
-    angle?: number;
-}): {
-    left: number;
-    top: number;
-    angle: number;
-};
+declare function restoreLocks(obj: FabricObject, locks: PatternLocks | undefined): void;
 /** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
 declare function clearPatternImageCache(): void;
 /**
@@ -493,4 +518,4 @@ declare function round2(v: number): number;
 declare function serializeEditor(editor: CanvasEditor): EditorState;
 declare function deserializeEditor(editor: CanvasEditor, state: EditorState): Promise<void>;
 
-export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, buildPatternDataURL, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, resolvePatternPlacement, round2, serializeEditor };
+export { CanvasEditor, CropController, DEFAULT_PATTERN_CONFIG, type EditorConfig, type EditorEvents, type EditorState, EventEmitter, type ExportFormat, type FileAdapter, HistoryManager, type ImageProvider, type ImageProviderResult, Layer, type LayerData, LayerManager, type LayerMeta, type LayerType, type MockupConfig, type MockupPrintArea, type PatternConfig, type PatternLocks, PatternManager, type PatternState, type PngExportOptions, type PrintifyPositioning, type SerializedLayer, type ShapePlugin, SnapManager, type TemplateDefinition, type TemplateParameter, type TileMode, type TilePlacement, type Unit, UnitConverter, applyPatternLocks, buildPatternDataURL, captureLocks, clamp, clearPatternImageCache, computeTilePositions, deserializeEditor, drawTiles, exportDataURL, exportPNG, exportSVG, generateId, restoreLocks, round2, serializeEditor };

package/dist/index.js

@@ -40,7 +40,9 @@ __export(index_exports, {
   PatternManager: () => PatternManager,
   SnapManager: () => SnapManager,
   UnitConverter: () => UnitConverter,
+  applyPatternLocks: () => applyPatternLocks,
   buildPatternDataURL: () => buildPatternDataURL,
+  captureLocks: () => captureLocks,
   clamp: () => clamp,
   clearPatternImageCache: () => clearPatternImageCache,
   computeTilePositions: () => computeTilePositions,
@@ -50,7 +52,7 @@ __export(index_exports, {
   exportPNG: () => exportPNG,
   exportSVG: () => exportSVG,
   generateId: () => generateId,
-  resolvePatternPlacement: () => resolvePatternPlacement,
+  restoreLocks: () => restoreLocks,
   round2: () => round2,
   serializeEditor: () => serializeEditor
 });
@@ -634,6 +636,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,
@@ -650,7 +653,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;
@@ -658,6 +661,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 () => {
@@ -678,6 +709,7 @@ var PatternManager = class {
         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;
       this.canvas.requestRenderAll();
@@ -694,13 +726,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);
@@ -716,29 +747,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();
@@ -807,11 +863,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) {
@@ -836,6 +894,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;
 }
@@ -1097,6 +1159,7 @@ var CanvasEditor = class {
   }
   async fromJSON(state) {
     await deserializeEditor(this, state);
+    this.patterns.repinAll();
   }
   // ─── Export ──────────────────────────────────────────
   async toPNG(options) {
@@ -1291,6 +1354,8 @@ var DEFAULT_PATTERN_CONFIG = {
   verticalSpacing: 0,
   angle: 0,
   horizontalOffset: 0,
+  offsetX: 0,
+  offsetY: 0,
   rotationStepH: 0,
   rotationStepV: 0
 };
@@ -1306,7 +1371,9 @@ var DEFAULT_PATTERN_CONFIG = {
   PatternManager,
   SnapManager,
   UnitConverter,
+  applyPatternLocks,
   buildPatternDataURL,
+  captureLocks,
   clamp,
   clearPatternImageCache,
   computeTilePositions,
@@ -1316,7 +1383,7 @@ var DEFAULT_PATTERN_CONFIG = {
   exportPNG,
   exportSVG,
   generateId,
-  resolvePatternPlacement,
+  restoreLocks,
   round2,
   serializeEditor
 });