@overtone-art/canvas-editor-core 0.6.1 → 0.6.3

package/dist/index.mjs

@@ -209,6 +209,19 @@ var LayerManager = class {
     this.layers = this.layers.filter((l) => l.id !== group.id);
     this.syncZOrder();
   }
+  /**
+   * Move existing layer records under a group, and announce the new tree.
+   * Assigning `group.children` directly emits nothing, and the reorder that
+   * follows a grouping is a no-op whenever the group already sits where it
+   * belongs — leaving `layers:changed` describing a childless group, so a panel
+   * built on it renders the group with nothing inside.
+   */
+  adoptChildren(group, children) {
+    for (const child of children) child.parentId = group.id;
+    group.children = children;
+    this.emitChanged();
+    this.onPropertyChanged?.();
+  }
   /**
    * Re-attach child records to an enlivened group. `data[i]` describes
    * `group._objects[i]` — the order fabric serializes and restores them in. A
@@ -1130,7 +1143,60 @@ var STROKE2 = "#22c55e";
 import { util } from "fabric";
 
 // src/pattern/tiled-pattern-object.ts
-import { FabricObject, Point } from "fabric";
+import { FabricObject, Point as Point2 } from "fabric";
+
+// src/text-fit.ts
+import { Point } from "fabric";
+var TEXT_FIT_SLACK = 0.5;
+var MEASURE_WIDTH = 1e5;
+function unwrappedWidth(text) {
+  const authored = text.width;
+  try {
+    text.set({ width: MEASURE_WIDTH });
+    text.initDimensions?.();
+    const measured = text.calcTextWidth?.() ?? authored;
+    return Number.isFinite(measured) && measured > 0 ? measured : authored;
+  } finally {
+    text.set({ width: authored });
+    text.initDimensions?.();
+  }
+}
+function asText(object) {
+  if (!object) return null;
+  const text = object;
+  return typeof text.text === "string" && typeof text.calcTextWidth === "function" ? text : null;
+}
+function textInk(text) {
+  const boxWidth = Math.max(0, text.width ?? 0);
+  const measured = text.calcTextWidth?.() ?? boxWidth;
+  const width = Math.max(1, Math.min(boxWidth, Number.isFinite(measured) ? measured : boxWidth));
+  const slack = (boxWidth - width) / 2;
+  const align = text.textAlign ?? "left";
+  if (align.includes("center")) return { width, dx: 0 };
+  const flip = text.flipX ? -1 : 1;
+  return { width, dx: flip * (align.includes("right") ? slack : -slack) };
+}
+function fitTextWidth(object) {
+  const text = asText(object);
+  if (!text || text.path) return false;
+  const before = textInk(text);
+  const fitted = unwrappedWidth(text) + TEXT_FIT_SLACK;
+  if (Math.abs(fitted - text.width) < TEXT_FIT_SLACK) return false;
+  const centre = text.getCenterPoint();
+  text.set({ width: fitted });
+  text.initDimensions?.();
+  const after = textInk(text);
+  const shift = (before.dx - after.dx) * (text.scaleX ?? 1);
+  const radians = (text.angle ?? 0) * Math.PI / 180;
+  const moved = new Point(
+    centre.x + shift * Math.cos(radians),
+    centre.y + shift * Math.sin(radians)
+  );
+  text.setPositionByOrigin(moved, "center", "center");
+  text.setCoords();
+  text.dirty = true;
+  return true;
+}
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -1143,13 +1209,13 @@ function computeTilePositions(config, targetW, targetH, baseW, baseH, origin) {
   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 [colFrom, colTo] = axisRange(config.horizontalLimit, Math.ceil(cols / 2));
+  const [rowFrom, rowTo] = axisRange(config.verticalLimit, 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++) {
+  for (let j = rowFrom; j <= rowTo; j++) {
+    for (let i = colFrom; i <= colTo; i++) {
       let x = i * tileW + shiftX;
       let y = j * tileH + shiftY;
       if (config.mode === "brick-horizontal" && mod2(j) === 1) {
@@ -1179,6 +1245,12 @@ function drawTiles(ctx, img, config, targetW, targetH, baseW, baseH, origin, dra
   }
   ctx.restore();
 }
+function axisRange(limit, half) {
+  const count = Number.isFinite(limit) ? Math.floor(limit) : 0;
+  if (!count || count <= 0) return [-half, half];
+  const from = -Math.floor((count - 1) / 2);
+  return [from, from + count - 1];
+}
 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));
@@ -1250,7 +1322,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
    */
   syncBox() {
     const { tileW, tileH } = this.baseTile();
-    const origin = this.source.getCenterPoint();
+    const origin = this.source.getCenterPoint().add(this.inkOffset());
     const anchor = this.anchorFromOrigin(origin, tileW, tileH, this.config.angle);
     this.set({
       left: anchor.x,
@@ -1280,7 +1352,8 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const { tileW, tileH } = this.liveTile();
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
-    return new Point(centre.x - shift.x, centre.y - shift.y);
+    const ink = this.inkOffset();
+    return new Point2(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1295,8 +1368,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     ctx.scale(1 / (this.scaleX || 1), 1 / (this.scaleY || 1));
     ctx.rotate(-angle * Math.PI / 180);
     ctx.translate(-centre.x, -centre.y);
-    const shift = this.shiftVector(tileW, tileH, angle);
-    const origin = { x: centre.x - shift.x, y: centre.y - shift.y };
+    const origin = { x: centre.x, y: centre.y };
     const config = { ...this.config, angle, offsetX: 0, offsetY: 0 };
     drawTiles(
       ctx,
@@ -1325,7 +1397,6 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     if (!snapshot) return [];
     const centre = this.getCenterPoint();
     const angle = this.liveAngle();
-    const shift = this.shiftVector(tileW, tileH, angle);
     drawTiles(
       ctx,
       snapshot,
@@ -1334,7 +1405,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       height,
       tileW,
       tileH,
-      { x: centre.x - shift.x, y: centre.y - shift.y },
+      { x: centre.x, y: centre.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)
     );
@@ -1377,7 +1448,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     return Promise.resolve(copy);
   }
   /**
-   * The source's tile footprint: its bounding box, minus a stroke it reserves
+   * The source's tile footprint: the art it paints, minus a stroke it reserves
    * room for but never paints.
    *
    * fabric keeps `strokeWidth` inside an object's box whether or not a `stroke`
@@ -1385,11 +1456,18 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
    * 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.
+   *
+   * Text is the same problem an order of magnitude larger — see {@link textInk}.
    */
   sourceBox() {
+    const text = asText(this.source);
+    const paints = paintsStroke(this.source);
     const rect = this.source.getBoundingRect();
-    if (paintsStroke(this.source)) return { width: rect.width, height: rect.height };
-    const dims = this.source._getTransformedDimensions({ strokeWidth: 0 });
+    if (paints && !text) return { width: rect.width, height: rect.height };
+    const options = {};
+    if (!paints) options.strokeWidth = 0;
+    if (text) options.width = textInk(text).width;
+    const dims = this.source._getTransformedDimensions(options);
     const radians = (this.source.angle ?? 0) * Math.PI / 180;
     const cos = Math.abs(Math.cos(radians));
     const sin = Math.abs(Math.sin(radians));
@@ -1398,6 +1476,22 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       height: dims.x * sin + dims.y * cos
     };
   }
+  /**
+   * Vector from the source's centre to the centre of the art it paints.
+   *
+   * Zero for everything except text that does not fill its box: the tile has to
+   * sit on the glyphs, or the frame the user drags frames empty space and the
+   * grid registers off the run by half the padding.
+   */
+  inkOffset() {
+    const text = asText(this.source);
+    if (!text) return new Point2(0, 0);
+    const { dx } = textInk(text);
+    if (!dx) return new Point2(0, 0);
+    const scaled = dx * (this.source.scaleX ?? 1);
+    const radians = (this.source.angle ?? 0) * Math.PI / 180;
+    return new Point2(scaled * Math.cos(radians), scaled * Math.sin(radians));
+  }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
     return Math.max(1, this.sourceBox().width);
@@ -1457,11 +1551,11 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const radians = angle * Math.PI / 180;
     const cos = Math.cos(radians);
     const sin = Math.sin(radians);
-    return new Point(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new Point2(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new Point(origin.x + shift.x, origin.y + shift.y);
+    return new Point2(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1474,7 +1568,15 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const source = this.source;
     const opacity = source.opacity;
     source.opacity = 1;
+    const text = asText(source);
+    const authoredWidth = text?.width;
+    const fitted = text ? textInk(text).width + TEXT_FIT_SLACK : 0;
+    const hug = text !== null && authoredWidth !== void 0 && fitted < authoredWidth;
     try {
+      if (hug && text) {
+        text.set({ width: fitted });
+        text.initDimensions?.();
+      }
       const el = source.toCanvasElement({ multiplier: wanted, enableRetinaScaling: false });
       if (!el.width || !el.height) return null;
       this.snapshotEl = el;
@@ -1483,6 +1585,10 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
       return this.snapshotEl;
     } finally {
       source.opacity = opacity;
+      if (hug && text && authoredWidth !== void 0) {
+        text.set({ width: authoredWidth });
+        text.initDimensions?.();
+      }
       source.dirty = false;
     }
     return this.snapshotEl;
@@ -1859,17 +1965,55 @@ function buildCurvePathData(config, width, fontSize) {
 }
 
 // src/text-curve.ts
-var MEASURE_WIDTH = 1e5;
+var MEASURE_WIDTH2 = 1e5;
 var PATH_SLACK = 0.06;
 var FALLBACK_LINE_HEIGHT = 1.16;
 var patches = /* @__PURE__ */ new WeakMap();
+var dimensionPatches = /* @__PURE__ */ new WeakMap();
+var authoredCaching = /* @__PURE__ */ new WeakMap();
+var GLYPH_HALF_HEIGHT = 0.7;
+function curvedInkSize(text) {
+  const lineCount = text._textLines?.length ?? 0;
+  for (let index = 0; index < lineCount; index += 1) text.getLineWidth?.(index);
+  const lines = text.__charBounds;
+  if (!lines?.length) return null;
+  let halfWidth = 0;
+  let halfHeight = 0;
+  for (const line of lines) {
+    for (const box of line ?? []) {
+      const { renderLeft, renderTop } = box;
+      if (typeof renderLeft !== "number" || typeof renderTop !== "number") continue;
+      const halfGlyphWidth = (box.kernedWidth ?? box.width ?? 0) / 2;
+      const halfGlyphHeight = (box.height ?? text.fontSize) * GLYPH_HALF_HEIGHT;
+      const angle = box.angle ?? 0;
+      const cos = Math.abs(Math.cos(angle));
+      const sin = Math.abs(Math.sin(angle));
+      halfWidth = Math.max(
+        halfWidth,
+        Math.abs(renderLeft) + halfGlyphWidth * cos + halfGlyphHeight * sin
+      );
+      halfHeight = Math.max(
+        halfHeight,
+        Math.abs(renderTop) + halfGlyphWidth * sin + halfGlyphHeight * cos
+      );
+    }
+  }
+  if (halfWidth === 0 && halfHeight === 0) return null;
+  return { width: halfWidth * 2, height: halfHeight * 2 };
+}
+function growBoxToInk(text) {
+  const ink = curvedInkSize(text);
+  if (!ink) return;
+  if (ink.width > (text.width ?? 0)) text.width = ink.width;
+  if (ink.height > (text.height ?? 0)) text.height = ink.height;
+}
 function isCurvable(object) {
   return !!object && typeof object.text === "string";
 }
 function measureText(text) {
   const authored = text.width;
   try {
-    text.set({ width: MEASURE_WIDTH });
+    text.set({ width: MEASURE_WIDTH2 });
     text.initDimensions?.();
     return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
   } finally {
@@ -1894,11 +2038,29 @@ var TextCurveManager = class {
     this.layers = layers;
     this.history = history;
     this.events = events;
+    this.canvas.on("text:changed", this.onTextChanged);
   }
   canvas;
   layers;
   history;
   events;
+  /**
+   * Typing on the canvas changes the run the paths were built for. Fabric drops
+   * a glyph whose centre falls past the end of the path, so without rebuilding
+   * here a longer replacement simply vanishes — select-all-and-retype rendered
+   * an empty box — and a shorter one piles up on a path built for the old text.
+   *
+   * No history entry: fabric records the edit when editing exits, and one save
+   * per keystroke would bury every earlier step under the typing.
+   */
+  onTextChanged = (event) => {
+    const layer = event.target ? this.layers.findByObject(event.target) : void 0;
+    if (!layer?.meta.curve) return;
+    this.refresh(layer.id, false);
+  };
+  dispose() {
+    this.canvas.off("text:changed", this.onTextChanged);
+  }
   /** Curve parameters for a layer, or null when it is not curved text. */
   get(layerId) {
     const layer = this.layers.get(layerId);
@@ -1983,6 +2145,8 @@ var TextCurveManager = class {
    * outside the layer's box — where object caching clips it away.
    */
   attach(text, curves) {
+    if (!authoredCaching.has(text)) authoredCaching.set(text, text.objectCaching);
+    text.set({ objectCaching: false });
     const paths = curves.map(toFabricPath);
     const union = paths.length === 1 ? paths[0] : toFabricPath({ data: curves.map((c) => c.data).join(" "), length: 0 });
     text.set({
@@ -1994,6 +2158,35 @@ var TextCurveManager = class {
       pathStartOffset: 0
     });
     this.patchLineMeasure(text, paths, union);
+    this.patchDimensions(text);
+  }
+  /**
+   * Re-apply {@link growBoxToInk} after every one of fabric's own dimension
+   * passes. Typing, a font change, a style edit and a state restore all call
+   * `initDimensions`, and each one puts the box back to the path's bounding box
+   * — so growing it once, here, would hold only until the next keystroke.
+   */
+  patchDimensions(text) {
+    if (dimensionPatches.has(text)) return;
+    const original = text.initDimensions;
+    if (typeof original !== "function") return;
+    const installed = function() {
+      original.call(this);
+      growBoxToInk(this);
+    };
+    const ownedOriginal = Object.prototype.hasOwnProperty.call(text, "initDimensions");
+    text.initDimensions = installed;
+    dimensionPatches.set(text, { original, installed, ownedOriginal });
+  }
+  /** Restore fabric's own dimension pass, if this manager replaced it. */
+  unpatchDimensions(text) {
+    const patch = dimensionPatches.get(text);
+    if (!patch) return;
+    if (text.initDimensions === patch.installed) {
+      if (patch.ownedOriginal) text.initDimensions = patch.original;
+      else delete text.initDimensions;
+    }
+    dimensionPatches.delete(text);
   }
   /**
    * Fabric lays every line of a text object along `this.path`, from one
@@ -2045,6 +2238,12 @@ var TextCurveManager = class {
   }
   detach(text, authoredWidth) {
     this.unpatchLineMeasure(text);
+    this.unpatchDimensions(text);
+    const caching = authoredCaching.get(text);
+    if (caching !== void 0) {
+      text.set({ objectCaching: caching });
+      authoredCaching.delete(text);
+    }
     text.set({ path: null, pathStartOffset: 0 });
     if (authoredWidth !== void 0 && authoredWidth > 0) text.set({ width: authoredWidth });
   }
@@ -3581,8 +3780,8 @@ var LayerMaskManager = class extends MaskStackStore {
   onLayersChanged = () => this.pin();
   // Selecting a layer means the user has moved on from the mask they had open;
   // leaving both selected would show mask controls for an unrelated layer.
-  onLayerSelected = () => {
-    if (this.selected) this.select(null, null);
+  onLayerSelected = ({ layerId }) => {
+    if (layerId && this.selected) this.select(null, null);
   };
   onObjectModified = (event) => {
     const object = event.target;
@@ -3642,6 +3841,7 @@ var LayerMaskManager = class extends MaskStackStore {
   }
   select(target, maskId) {
     this.selected = target && maskId ? { target, maskId } : null;
+    if (this.selected) this.layers.select(null);
     this.events.emit("mask:selected", { target, maskId: this.selected ? maskId : null });
   }
   // ─── Mutations ───────────────────────────────────────
@@ -4194,8 +4394,7 @@ var CanvasEditor = class {
       }
       const group = new Group7(objects);
       const grouped = this.layers.add("group", group, name);
-      for (const child of children) child.parentId = grouped.id;
-      grouped.children = children;
+      this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
       this.layers.select(grouped.id);
       this.history.save();
@@ -4804,6 +5003,7 @@ var CanvasEditor = class {
     this.crop.dispose();
     this.history.dispose();
     this.patterns.dispose();
+    this.curves.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -4863,11 +5063,15 @@ var DEFAULT_PATTERN_CONFIG = {
   horizontalSpacing: 0,
   verticalSpacing: 0,
   angle: 0,
-  horizontalOffset: 0,
+  // Half a tile: the offset only bites in the brick modes, and a brick course
+  // that is not half-shifted is just a grid with extra steps.
+  horizontalOffset: 50,
   offsetX: 0,
   offsetY: 0,
   rotationStepH: 0,
-  rotationStepV: 0
+  rotationStepV: 0,
+  horizontalLimit: 0,
+  verticalLimit: 0
 };
 
 // src/presets.ts
@@ -4972,6 +5176,7 @@ export {
   exportPNG,
   exportPrintArea,
   exportSVG,
+  fitTextWidth,
   fitToBox,
   generateId,
   isCssColor,