@overtone-art/canvas-editor-core 0.5.0 → 0.5.1

package/dist/index.mjs

@@ -886,8 +886,10 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   }
   return placements;
 }
-function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
+function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin, draw) {
   const anchor = origin ?? { x: targetW / 2, y: targetH / 2 };
+  const drawW = draw && draw.width > 0 ? draw.width : baseW;
+  const drawH = draw && draw.height > 0 ? draw.height : baseH;
   ctx.save();
   ctx.translate(anchor.x, anchor.y);
   ctx.rotate(config.angle * Math.PI / 180);
@@ -895,7 +897,7 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin) {
     ctx.save();
     ctx.translate(tile.x, tile.y);
     ctx.rotate(tile.rotation);
-    ctx.drawImage(img, -baseW / 2, -baseH / 2, baseW, baseH);
+    ctx.drawImage(img, -drawW / 2, -drawH / 2, drawW, drawH);
     ctx.restore();
   }
   ctx.restore();
@@ -917,6 +919,7 @@ function mod2(n) {
 var MAX_SNAPSHOT_PIXELS = 16e6;
 var MAX_SNAPSHOT_SCALE = 8;
 var SNAPSHOT_SHRINK_FACTOR = 2;
+var TILE_BLEED_DEVICE_PX = 2;
 var TiledPatternObject = class _TiledPatternObject extends FabricObject {
   static type = "TiledPattern";
   /** The layer's real object. Never rendered directly (it is kept at opacity 0). */
@@ -1006,7 +1009,8 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const { width, height } = this.area;
     if (width <= 0 || height <= 0) return;
     const { tileW, tileH } = this.liveTile();
-    const snapshot = this.ensureSnapshot(contextScale(ctx) * (tileW / Math.max(1, this.baseW())));
+    const scale = contextScale(ctx);
+    const snapshot = this.ensureSnapshot(scale * (tileW / Math.max(1, this.baseW())));
     if (!snapshot) return;
     const centre = this.getCenterPoint();
     const angle = this.liveAngle();
@@ -1017,7 +1021,17 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const shift = this.shiftVector(tileW, tileH, angle);
     const origin = { x: centre.x - shift.x, y: centre.y - shift.y };
     const config = { ...this.config, angle, offsetX: 0, offsetY: 0 };
-    drawTiles(ctx, snapshot, config, width, height, tileW, tileH, origin);
+    drawTiles(
+      ctx,
+      snapshot,
+      config,
+      width,
+      height,
+      tileW,
+      tileH,
+      origin,
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX / scale)
+    );
     ctx.restore();
   }
   /** Raster fallback for SVG export — one `<image>` covering the print area. */
@@ -1043,7 +1057,9 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       height,
       tileW,
       tileH,
-      { x: centre.x - shift.x, y: centre.y - shift.y }
+      { x: centre.x - shift.x, y: centre.y - shift.y },
+      // The fallback raster is built at 1:1, so a device pixel is a canvas unit.
+      this.drawSize(tileW, tileH, TILE_BLEED_DEVICE_PX)
     );
     return [
       `<g transform="rotate(${-angle}) translate(${-centre.x} ${-centre.y})">`,
@@ -1083,18 +1099,64 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     });
     return Promise.resolve(copy);
   }
+  /**
+   * The source's tile footprint: its bounding box, minus a stroke it reserves
+   * room for but never paints.
+   *
+   * fabric keeps `strokeWidth` inside an object's box whether or not a `stroke`
+   * colour paints it, and the built-in shapes arrive with `strokeWidth: 1` and no
+   * stroke. Stepping the grid by that box puts a transparent seam between every
+   * pair of neighbours at zero spacing: the artwork is a pixel narrower than the
+   * box it is stepped by.
+   */
+  sourceBox() {
+    const rect = this.source.getBoundingRect();
+    if (paintsStroke(this.source)) return { width: rect.width, height: rect.height };
+    const dims = this.source._getTransformedDimensions({ strokeWidth: 0 });
+    const radians = (this.source.angle ?? 0) * Math.PI / 180;
+    const cos = Math.abs(Math.cos(radians));
+    const sin = Math.abs(Math.sin(radians));
+    return {
+      width: dims.x * cos + dims.y * sin,
+      height: dims.x * sin + dims.y * cos
+    };
+  }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
-    return Math.max(1, this.source.getBoundingRect().width);
+    return Math.max(1, this.sourceBox().width);
+  }
+  /** The source's on-canvas height, before the tile scale. */
+  baseH() {
+    return Math.max(1, this.sourceBox().height);
+  }
+  /**
+   * Size to paint the snapshot at, for a tile of `tileW × tileH`.
+   *
+   * The snapshot is NOT exactly the source's box: `toCanvasElement` rounds the
+   * raster up to whole pixels and pads it further for a shadow. Painting it into
+   * the tile step would squeeze the artwork inside that padding — every tile
+   * shrinks by up to a pixel and the grid shows transparent seams at zero
+   * spacing. So the bitmap is painted at its own footprint, scaled by the same
+   * factor the tile is, and the step stays the source's box.
+   */
+  drawSize(tileW, tileH, bleed = 0) {
+    const snapshot = this.snapshotEl;
+    if (!snapshot || this.snapshotScale <= 0) {
+      return { width: tileW + bleed, height: tileH + bleed };
+    }
+    return {
+      width: snapshot.width / this.snapshotScale * (tileW / this.baseW()) + bleed,
+      height: snapshot.height / this.snapshotScale * (tileH / this.baseH()) + bleed
+    };
   }
   /** Tile size from the config alone, ignoring any in-flight gesture. */
   baseTile() {
-    const rect = this.source.getBoundingRect();
+    const box = this.sourceBox();
     const scale = Math.max(1, this.config.scale ?? 100) / 100;
     const floor = this.tileFloor();
     return {
-      tileW: Math.max(floor, rect.width * scale),
-      tileH: Math.max(floor, rect.height * scale)
+      tileW: Math.max(floor, box.width * scale),
+      tileH: Math.max(floor, box.height * scale)
     };
   }
   /** Tile size as drawn right now, including a live scale gesture. */
@@ -1157,6 +1219,12 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     return Math.max(0.05, Math.min(requested, budgeted));
   }
 };
+function paintsStroke(object) {
+  if (!object.strokeWidth || object.strokeWidth <= 0) return false;
+  const { stroke } = object;
+  if (typeof stroke === "string") return stroke !== "" && stroke !== "transparent";
+  return stroke !== null && stroke !== void 0;
+}
 function clampPercent(value) {
   if (typeof value !== "number" || !Number.isFinite(value)) return 0;
   return Math.max(-100, Math.min(100, value));