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

package/dist/index.mjs

@@ -1,4 +1,11 @@
 import {
+  TEXT_FIT_SLACK,
+  TextWrapManager,
+  applyMatrix,
+  applyRelativeMatrix,
+  applyTextWrapToObject,
+  asObject,
+  asText,
   computeCoverPlacement,
   computePrintAreaClip,
   displaceRgba,
@@ -7,8 +14,19 @@ import {
   exportMockup,
   exportPNG,
   exportPrintArea,
-  exportSVG
-} from "./chunk-MCBRZQ4M.mjs";
+  exportSVG,
+  fitTextWidth,
+  fitToBox,
+  matrixOf,
+  preWrapWordSplit,
+  readTextWrap,
+  relativeMatrix,
+  textInk,
+  toCanvasSpace,
+  toHostSpace,
+  toMatrix,
+  unwrapGroup
+} from "./chunk-XNGPX7FG.mjs";
 
 // src/editor.ts
 import { Canvas, FabricImage as FabricImage3, Group as Group7, Textbox as Textbox2, filters } from "fabric";
@@ -1143,60 +1161,7 @@ var STROKE2 = "#22c55e";
 import { util } from "fabric";
 
 // src/pattern/tiled-pattern-object.ts
-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;
-}
+import { FabricObject, Point } from "fabric";
 
 // src/pattern/tile-geometry.ts
 var MAX_TILES_PER_AXIS = 200;
@@ -1353,7 +1318,7 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
     const centre = this.getCenterPoint();
     const shift = this.shiftVector(tileW, tileH, this.liveAngle());
     const ink = this.inkOffset();
-    return new Point2(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
+    return new Point(centre.x - shift.x - ink.x, centre.y - shift.y - ink.y);
   }
   _render(ctx) {
     const { width, height } = this.area;
@@ -1485,12 +1450,12 @@ var TiledPatternObject = class _TiledPatternObject extends FabricObject {
    */
   inkOffset() {
     const text = asText(this.source);
-    if (!text) return new Point2(0, 0);
+    if (!text) return new Point(0, 0);
     const { dx } = textInk(text);
-    if (!dx) return new Point2(0, 0);
+    if (!dx) return new Point(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));
+    return new Point(scaled * Math.cos(radians), scaled * Math.sin(radians));
   }
   /** The source's on-canvas width, before the tile scale. */
   baseW() {
@@ -1551,11 +1516,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 Point2(dx * cos - dy * sin, dx * sin + dy * cos);
+    return new Point(dx * cos - dy * sin, dx * sin + dy * cos);
   }
   anchorFromOrigin(origin, tileW, tileH, angle) {
     const shift = this.shiftVector(tileW, tileH, angle);
-    return new Point2(origin.x + shift.x, origin.y + shift.y);
+    return new Point(origin.x + shift.x, origin.y + shift.y);
   }
   /**
    * Snapshot the source at (at least) `scale`, reusing the cached one while it
@@ -1875,7 +1840,11 @@ function normalizeTextCurve(config) {
     shape: config.shape ?? inferred,
     arc,
     wave,
-    waveLength: clamp(config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength, MIN_WAVE_LENGTH, MAX_WAVE_LENGTH),
+    waveLength: clamp(
+      config.waveLength ?? DEFAULT_TEXT_CURVE.waveLength,
+      MIN_WAVE_LENGTH,
+      MAX_WAVE_LENGTH
+    ),
     offset: clamp(config.offset ?? 0, -100, 100),
     centerOffset: clamp(config.centerOffset ?? 0, -100, 100)
   };
@@ -1965,7 +1934,7 @@ function buildCurvePathData(config, width, fontSize) {
 }
 
 // src/text-curve.ts
-var MEASURE_WIDTH2 = 1e5;
+var MEASURE_WIDTH = 1e5;
 var PATH_SLACK = 0.06;
 var FALLBACK_LINE_HEIGHT = 1.16;
 var patches = /* @__PURE__ */ new WeakMap();
@@ -2013,7 +1982,7 @@ function isCurvable(object) {
 function measureText(text) {
   const authored = text.width;
   try {
-    text.set({ width: MEASURE_WIDTH2 });
+    text.set({ width: MEASURE_WIDTH });
     text.initDimensions?.();
     return Math.max(1, text.calcTextWidth?.() ?? text.width ?? 1);
   } finally {
@@ -2483,6 +2452,7 @@ var MaskPresetManager = class {
     object.dirty = true;
     object.setCoords();
     this.canvas.requestRenderAll();
+    this.events.emit("masks:changed", { target: layerId });
     this.events.emit("layer:modified", { layerId });
     if (save) this.history.save();
     return true;
@@ -2757,6 +2727,7 @@ async function deserializeEditor(editor, state) {
   for (const item of staged) {
     restoreLayer(editor, item.serialized, item.fabricObject);
   }
+  editor.wrap.refreshAll();
   editor.canvas.requestRenderAll();
 }
 function restoreLayer(editor, serialized, fabricObject) {
@@ -3408,76 +3379,7 @@ function needsAbsoluteSpace(entries) {
 }
 
 // src/masks/edit.ts
-import { util as util4 } from "fabric";
-
-// src/masks/space.ts
 import { util as util3 } from "fabric";
-function matrixOf(object) {
-  return object.calcTransformMatrix();
-}
-function applyMatrix(object, matrix) {
-  const decomposed = util3.qrDecompose(matrix);
-  object.set({
-    flipX: false,
-    flipY: false,
-    originX: "center",
-    originY: "center",
-    left: decomposed.translateX,
-    top: decomposed.translateY,
-    scaleX: decomposed.scaleX,
-    scaleY: decomposed.scaleY,
-    angle: decomposed.angle,
-    skewX: decomposed.skewX,
-    skewY: 0
-  });
-  object.setCoords();
-}
-function toCanvasSpace(object, host) {
-  applyMatrix(object, util3.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
-}
-function toHostSpace(object, host) {
-  applyMatrix(
-    object,
-    util3.multiplyTransformMatrices(util3.invertTransform(matrixOf(host)), matrixOf(object))
-  );
-}
-function relativeMatrix(object, host) {
-  return util3.multiplyTransformMatrices(util3.invertTransform(matrixOf(host)), matrixOf(object));
-}
-function applyRelativeMatrix(object, host, rel) {
-  applyMatrix(object, util3.multiplyTransformMatrices(matrixOf(host), rel));
-}
-function asObject(clip) {
-  return clip;
-}
-function toMatrix(values) {
-  if (!values || values.length !== 6 || values.some((value) => !Number.isFinite(value)))
-    return null;
-  return [values[0], values[1], values[2], values[3], values[4], values[5]];
-}
-function fitToBox(object, box, zoom = 1) {
-  const width = Math.max(1, box.width) * zoom;
-  const height = Math.max(1, box.height) * zoom;
-  object.set({
-    originX: "center",
-    originY: "center",
-    angle: 0,
-    skewX: 0,
-    skewY: 0,
-    left: box.left + box.width / 2,
-    top: box.top + box.height / 2,
-    scaleX: width / Math.max(1, object.width ?? 1),
-    scaleY: height / Math.max(1, object.height ?? 1)
-  });
-  object.setCoords();
-}
-function unwrapGroup(group) {
-  const children = group.removeAll();
-  for (const child of children) child.setCoords();
-  return children;
-}
-
-// src/masks/edit.ts
 var MaskEditController = class {
   constructor(canvas, onCommit) {
     this.canvas = canvas;
@@ -3558,8 +3460,8 @@ var MaskEditController = class {
     if (!this.handle || !this.child || !this.group) return;
     applyMatrix(
       this.child,
-      util4.multiplyTransformMatrices(
-        util4.invertTransform(matrixOf(this.group)),
+      util3.multiplyTransformMatrices(
+        util3.invertTransform(matrixOf(this.group)),
         matrixOf(this.handle)
       )
     );
@@ -3709,6 +3611,24 @@ var MaskStackStore = class {
       this.pinning = false;
     }
   }
+  /**
+   * Is the host's own `clipPath` the wrap manager's box clip rather than a mask?
+   *
+   * Adoption rescues a clip whose provenance is UNKNOWN — a mask preset, or a
+   * hand-set `clipPath` from before stacks existed — so the first add() cannot
+   * silently throw it away. A text layer's box clip is the opposite case: its
+   * provenance is known exactly (the wrap manager derives it from
+   * `meta.overflow` on every pass and re-installs it under whatever owns the
+   * property next), and it is not a mask. Adopted, it becomes a stack row the
+   * user never made whose 'add' union covers the whole box — swallowing the mask
+   * they actually added.
+   *
+   * Only meaningful with an empty stack: once there are entries the top-level
+   * clip is the composed group and the box clip is nested underneath it.
+   */
+  holdsBoxClip(meta) {
+    return meta?.overflow === "hidden" && !meta.maskPreset;
+  }
   /**
    * Take the current geometry back out of the composed clip, entry-aligned.
    *
@@ -3721,7 +3641,13 @@ var MaskStackStore = class {
     const clip = host.clipPath;
     if (!clip) return [];
     const entries = this.list(target);
-    if (entries.length === 0 || !(clip instanceof Group5)) return [asObject(clip)];
+    const meta = this.hostLayer(target)?.meta;
+    if (entries.length === 0 && this.holdsBoxClip(meta)) return [];
+    if (entries.length === 0 || !(clip instanceof Group5)) {
+      const source = asObject(clip);
+      if (meta?.overflow === "hidden") source.clipPath = void 0;
+      return [source];
+    }
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
     return extra > 0 ? children.slice(extra) : children;
@@ -4002,6 +3928,9 @@ var LayerMaskManager = class extends MaskStackStore {
     if (resolved === layerId) return null;
     const object = layer.fabricObject;
     if (!object.fill && object.type !== "image") object.set({ fill: "#000000" });
+    const stackHost = this.host(resolved);
+    const absolute = resolved === CANVAS_MASK_TARGET || needsAbsoluteSpace(this.list(resolved));
+    if (!absolute && stackHost) toHostSpace(object, stackHost);
     this.history.beginTransaction();
     try {
       if (this.canvas.getActiveObject() === object) this.canvas.discardActiveObject();
@@ -4049,6 +3978,7 @@ var LayerMaskManager = class extends MaskStackStore {
     const clip = layer?.fabricObject.clipPath;
     if (!layer || !clip || layer.meta.pattern) return null;
     if ((layer.meta.maskStack ?? []).length > 0) return null;
+    if (this.holdsBoxClip(layer.meta)) return null;
     const entry = {
       ...DEFAULT_ENTRY,
       id: generateId(),
@@ -4101,6 +4031,7 @@ var CanvasEditor = class {
   crop;
   patterns;
   curves;
+  wrap;
   maskPresets;
   /** Stacked boolean masks, per layer and for the design as a whole. */
   layerMasks;
@@ -4151,6 +4082,7 @@ var CanvasEditor = class {
     this.crop = new CropController(this.canvas, this.history, this.events);
     this.patterns = new PatternManager(this.canvas, this.layers, this.history, this.events);
     this.curves = new TextCurveManager(this.canvas, this.layers, this.history, this.events);
+    this.wrap = new TextWrapManager(this.canvas, this.layers, this.history, this.events);
     this.maskPresets = new MaskPresetManager(this.canvas, this.layers, this.history, this.events);
     this.layerMasks = new LayerMaskManager(this.canvas, this.layers, this.history, this.events);
     this.setupCanvasEvents();
@@ -4907,15 +4839,34 @@ var CanvasEditor = class {
   }
   // ─── Text curve ─────────────────────────────────────
   applyTextCurve(layerId, config) {
-    return this.curves.apply(layerId, config);
+    const applied = this.curves.apply(layerId, config);
+    if (applied) this.wrap.refresh(layerId);
+    return applied;
   }
   clearTextCurve(layerId) {
-    return this.curves.clear(layerId);
+    const cleared = this.curves.clear(layerId);
+    if (cleared) this.wrap.refresh(layerId);
+    return cleared;
   }
   getTextCurve(layerId) {
     return this.curves.get(layerId);
   }
+  // ─── Text wrap ──────────────────────────────────────
+  applyTextWrap(layerId, wrap) {
+    return this.wrap.apply(layerId, wrap);
+  }
+  setTextOverflow(layerId, overflow) {
+    return this.wrap.setOverflow(layerId, overflow);
+  }
+  getTextWrap(layerId) {
+    return this.wrap.get(layerId);
+  }
   // ─── Mask presets ───────────────────────────────────
+  // A preset assigns `clipPath` wholesale, so a text layer clipping to its box
+  // loses that clip the moment a mask lands on it. Putting it back is NOT wired
+  // here: the preset manager announces `masks:changed` and the wrap manager
+  // re-derives from that, which covers this facade, the manager called directly,
+  // and `refreshAll()` on a restore — all with one mechanism.
   applyMaskPreset(layerId, id) {
     return this.maskPresets.apply(layerId, id);
   }
@@ -5004,6 +4955,7 @@ var CanvasEditor = class {
     this.history.dispose();
     this.patterns.dispose();
     this.curves.dispose();
+    this.wrap.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -5152,12 +5104,14 @@ export {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TextWrapManager,
   TiledPatternObject,
   UnitConverter,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  applyTextWrapToObject,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5185,7 +5139,9 @@ export {
   isTextureMaskId,
   needsAbsoluteSpace,
   normalizeTextCurve,
+  preWrapWordSplit,
   readLayerShadow,
+  readTextWrap,
   renderTextureMask,
   resetTransform,
   restoreLocks,