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

package/dist/index.d.mts

@@ -81,6 +81,12 @@ interface PrintifyPositioning {
 type TileMode = 'grid' | 'brick-horizontal' | 'brick-vertical';
 interface PatternConfig {
     mode: TileMode;
+    /**
+     * Tile size as a % of the source image's on-canvas size (100 = natural).
+     * Smaller values pack more repeats across the print area; larger values make
+     * fewer, bigger tiles. Independent of how the source layer was placed.
+     */
+    scale: number;
     /** Extra horizontal gap between tiles, as % of tile width. */
     horizontalSpacing: number;
     /** Extra vertical gap between tiles, as % of tile height. */
@@ -99,6 +105,14 @@ interface PatternState {
     config: PatternConfig;
     /** Original (pre-pattern) image source, as a durable data URL when possible. */
     originalSrc: string;
+    /**
+     * Serialized `clipPath` the image carried before it became a pattern, or null
+     * if it had none. A pattern must fill the whole print area, so any pre-pattern
+     * clip (e.g. a template crop sized to the original box) is stripped while the
+     * pattern is on and re-applied when it is turned off. Persisted so it survives
+     * serialization / reload / undo.
+     */
+    originalClip?: Record<string, unknown> | null;
     /** Original fabric transform, restored when the pattern is turned off. */
     original: {
         left: number;
@@ -330,6 +344,25 @@ declare class PatternManager {
     private enqueue;
     private renderLayer;
 }
+/**
+ * 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.
+ */
+declare function resolvePatternPlacement(pin: boolean, current: {
+    left?: number;
+    top?: number;
+    angle?: number;
+}): {
+    left: number;
+    top: number;
+    angle: number;
+};
 /** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
 declare function clearPatternImageCache(): void;
 /**
@@ -460,4 +493,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, 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, 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 };

package/dist/index.d.ts

@@ -81,6 +81,12 @@ interface PrintifyPositioning {
 type TileMode = 'grid' | 'brick-horizontal' | 'brick-vertical';
 interface PatternConfig {
     mode: TileMode;
+    /**
+     * Tile size as a % of the source image's on-canvas size (100 = natural).
+     * Smaller values pack more repeats across the print area; larger values make
+     * fewer, bigger tiles. Independent of how the source layer was placed.
+     */
+    scale: number;
     /** Extra horizontal gap between tiles, as % of tile width. */
     horizontalSpacing: number;
     /** Extra vertical gap between tiles, as % of tile height. */
@@ -99,6 +105,14 @@ interface PatternState {
     config: PatternConfig;
     /** Original (pre-pattern) image source, as a durable data URL when possible. */
     originalSrc: string;
+    /**
+     * Serialized `clipPath` the image carried before it became a pattern, or null
+     * if it had none. A pattern must fill the whole print area, so any pre-pattern
+     * clip (e.g. a template crop sized to the original box) is stripped while the
+     * pattern is on and re-applied when it is turned off. Persisted so it survives
+     * serialization / reload / undo.
+     */
+    originalClip?: Record<string, unknown> | null;
     /** Original fabric transform, restored when the pattern is turned off. */
     original: {
         left: number;
@@ -330,6 +344,25 @@ declare class PatternManager {
     private enqueue;
     private renderLayer;
 }
+/**
+ * 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.
+ */
+declare function resolvePatternPlacement(pin: boolean, current: {
+    left?: number;
+    top?: number;
+    angle?: number;
+}): {
+    left: number;
+    top: number;
+    angle: number;
+};
 /** Clear the decoded-image cache (e.g. on teardown). Exported for completeness. */
 declare function clearPatternImageCache(): void;
 /**
@@ -460,4 +493,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, 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, 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 };

package/dist/index.js

@@ -50,13 +50,14 @@ __export(index_exports, {
   exportPNG: () => exportPNG,
   exportSVG: () => exportSVG,
   generateId: () => generateId,
+  resolvePatternPlacement: () => resolvePatternPlacement,
   round2: () => round2,
   serializeEditor: () => serializeEditor
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric3 = require("fabric");
+var import_fabric4 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -598,6 +599,8 @@ var CropController = class {
 var STROKE2 = "#22c55e";
 
 // src/pattern.ts
+var import_fabric2 = require("fabric");
+var MAX_TILES_PER_AXIS = 200;
 var PatternManager = class {
   constructor(canvas, layers, history) {
     this.canvas = canvas;
@@ -626,9 +629,11 @@ var PatternManager = class {
       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,
           original: {
             left: image.left ?? 0,
             top: image.top ?? 0,
@@ -645,7 +650,7 @@ var PatternManager = class {
         layer.meta.pattern.config = config;
       }
       try {
-        await this.renderLayer(layer);
+        await this.renderLayer(layer, firstEnable);
       } catch (err) {
         if (firstEnable) delete layer.meta.pattern;
         throw err;
@@ -672,6 +677,7 @@ var PatternManager = class {
         cropY: state.original.cropY,
         angle: state.original.angle
       });
+      image.clipPath = state.originalClip ? (await import_fabric2.util.enlivenObjects([state.originalClip]))[0] : void 0;
       image.setCoords();
       delete layer.meta.pattern;
       this.canvas.requestRenderAll();
@@ -688,14 +694,18 @@ var PatternManager = class {
     );
     return next;
   }
-  async renderLayer(layer) {
+  async renderLayer(layer, pin) {
     const state = layer.meta.pattern;
     if (!state) return;
     const image = layer.fabricObject;
     const cw = this.canvas.getWidth();
     const ch = this.canvas.getHeight();
-    const tileW = state.original.width * state.original.scaleX;
-    const tileH = state.original.height * state.original.scaleY;
+    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);
+    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,
@@ -705,11 +715,30 @@ var PatternManager = class {
       tileH
     );
     await image.setSrc(dataUrl);
-    image.set({ left: 0, top: 0, scaleX: 1, scaleY: 1, cropX: 0, cropY: 0, angle: 0 });
+    image.set({
+      left,
+      top,
+      scaleX: 1,
+      scaleY: 1,
+      width: cw,
+      height: ch,
+      cropX: 0,
+      cropY: 0,
+      angle
+    });
+    image.clipPath = void 0;
     image.setCoords();
     this.canvas.requestRenderAll();
   }
 };
+function resolvePatternPlacement(pin, current) {
+  if (pin) return { left: 0, top: 0, angle: 0 };
+  return {
+    left: current.left ?? 0,
+    top: current.top ?? 0,
+    angle: current.angle ?? 0
+  };
+}
 function elementToDataURL(image) {
   try {
     const el = image.getElement();
@@ -770,9 +799,10 @@ async function buildPatternDataURL(src, config, targetW, targetH, baseW, baseH)
   return off.toDataURL("image/png");
 }
 function computeTilePositions(config, targetW, targetH, baseW, baseH) {
-  const tileW = Math.max(1, baseW * (1 + config.horizontalSpacing / 100));
-  const tileH = Math.max(1, baseH * (1 + config.verticalSpacing / 100));
   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);
@@ -856,7 +886,7 @@ var UnitConverter = class {
 };
 
 // src/serialization.ts
-var import_fabric2 = require("fabric");
+var import_fabric3 = require("fabric");
 var VERSION = "1.0.0";
 function serializeEditor(editor) {
   return {
@@ -887,7 +917,7 @@ async function deserializeEditor(editor, state) {
   editor.canvas.requestRenderAll();
 }
 async function restoreLayer(editor, serialized) {
-  const objects = await import_fabric2.util.enlivenObjects([serialized.fabricObject]);
+  const objects = await import_fabric3.util.enlivenObjects([serialized.fabricObject]);
   const fabricObject = objects[0];
   const layer = editor.layers.add(serialized.type, fabricObject, serialized.name, serialized.id);
   if (serialized.meta) {
@@ -949,7 +979,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_fabric3.Canvas(canvasElement, {
+    this.canvas = new import_fabric4.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -975,13 +1005,13 @@ var CanvasEditor = class {
   }
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
-    const img = await import_fabric3.FabricImage.fromURL(url, {}, { originX: "left", originY: "top", ...options });
+    const img = await import_fabric4.FabricImage.fromURL(url, {}, { originX: "left", originY: "top", ...options });
     const layer = this.layers.add("image", img);
     this.history.save();
     return layer;
   }
   addText(text, options) {
-    const textbox = new import_fabric3.Textbox(text, {
+    const textbox = new import_fabric4.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -1256,6 +1286,7 @@ var CanvasEditor = class {
 // src/types.ts
 var DEFAULT_PATTERN_CONFIG = {
   mode: "grid",
+  scale: 100,
   horizontalSpacing: 0,
   verticalSpacing: 0,
   angle: 0,
@@ -1285,6 +1316,7 @@ var DEFAULT_PATTERN_CONFIG = {
   exportPNG,
   exportSVG,
   generateId,
+  resolvePatternPlacement,
   round2,
   serializeEditor
 });