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

package/dist/chunk-XNGPX7FG.mjs

@@ -0,0 +1,641 @@
+// src/text-fit.ts
+import { Point } from "fabric";
+var TEXT_FIT_SLACK = 0.5;
+var MEASURE_WIDTH = 1e5;
+var GROWTH_FACTOR = 1.1;
+var GROWTH_TRIES = 8;
+var SEARCH_TRIES = 24;
+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 wrapsAt(text, width) {
+  text.set({ width });
+  text.initDimensions?.();
+  const authored = text.text.split("\n").length;
+  return (text._textLines?.length ?? 0) > authored;
+}
+function widenPastSoftWrap(text, fitted) {
+  if (!wrapsAt(text, fitted)) return fitted;
+  let low = fitted;
+  let high = fitted;
+  let bracketed = false;
+  for (let tries = 0; tries < GROWTH_TRIES; tries += 1) {
+    low = high;
+    high = high * GROWTH_FACTOR + 1;
+    if (!wrapsAt(text, high)) {
+      bracketed = true;
+      break;
+    }
+  }
+  if (!bracketed) return high;
+  for (let tries = 0; tries < SEARCH_TRIES && high - low > TEXT_FIT_SLACK; tries += 1) {
+    const mid = (low + high) / 2;
+    if (wrapsAt(text, mid)) low = mid;
+    else high = mid;
+  }
+  if (text.width !== high) wrapsAt(text, high);
+  return high;
+}
+function restoreWidth(text, width) {
+  try {
+    text.set({ width });
+    text.initDimensions?.();
+  } catch {
+  }
+}
+function isSettled(text, width) {
+  if (wrapsAt(text, width)) return false;
+  const tight = wrapsAt(text, width - TEXT_FIT_SLACK);
+  wrapsAt(text, width);
+  return tight;
+}
+function fitTextWidth(object) {
+  const text = asText(object);
+  if (!text || text.path) return false;
+  const authored = text.width;
+  try {
+    const before = textInk(text);
+    const fitted = unwrappedWidth(text) + TEXT_FIT_SLACK;
+    if (Math.abs(fitted - authored) < TEXT_FIT_SLACK) return false;
+    const nearFit = authored > fitted && authored <= fitted * GROWTH_FACTOR + 1;
+    if (nearFit && isSettled(text, authored)) return false;
+    const centre = text.getCenterPoint();
+    const settled = widenPastSoftWrap(text, fitted);
+    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 Math.abs(settled - authored) >= TEXT_FIT_SLACK;
+  } catch (error) {
+    restoreWidth(text, authored);
+    throw error;
+  }
+}
+
+// src/text-wrap-split.ts
+var WHITESPACE = /[ \t\r]/;
+function preWrapWordSplit(value) {
+  const tokens = [];
+  let index = 0;
+  let first = true;
+  while (index < value.length) {
+    let space = "";
+    while (index < value.length && WHITESPACE.test(value[index])) {
+      space += value[index];
+      index += 1;
+    }
+    let word = "";
+    while (index < value.length && !WHITESPACE.test(value[index])) {
+      word += value[index];
+      index += 1;
+    }
+    tokens.push((first ? space : space.slice(1)) + word);
+    first = false;
+  }
+  return tokens.length > 0 ? tokens : [""];
+}
+
+// src/masks/space.ts
+import { util } from "fabric";
+function matrixOf(object) {
+  return object.calcTransformMatrix();
+}
+function applyMatrix(object, matrix) {
+  const decomposed = util.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, util.multiplyTransformMatrices(matrixOf(host), matrixOf(object)));
+}
+function toHostSpace(object, host) {
+  applyMatrix(
+    object,
+    util.multiplyTransformMatrices(util.invertTransform(matrixOf(host)), matrixOf(object))
+  );
+}
+function relativeMatrix(object, host) {
+  return util.multiplyTransformMatrices(util.invertTransform(matrixOf(host)), matrixOf(object));
+}
+function applyRelativeMatrix(object, host, rel) {
+  applyMatrix(object, util.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/text-wrap.ts
+import { Rect } from "fabric";
+function patchWordSplit(text) {
+  if (Object.prototype.hasOwnProperty.call(text, "wordSplit")) return;
+  Object.defineProperty(text, "wordSplit", {
+    value: preWrapWordSplit,
+    configurable: true,
+    writable: true
+  });
+}
+function unpatchWordSplit(text) {
+  if (Object.prototype.hasOwnProperty.call(text, "wordSplit")) {
+    delete text.wordSplit;
+  }
+}
+function readTextWrap(meta) {
+  return { wrap: meta?.wrap ?? "none", overflow: meta?.overflow ?? "visible" };
+}
+function boxClip(text, makeRect) {
+  return makeRect({
+    width: Math.max(1, text.width ?? 1),
+    height: Math.max(1, text.height ?? 1),
+    originX: "center",
+    originY: "center",
+    left: 0,
+    top: 0,
+    objectCaching: false
+  });
+}
+function hasMask(meta) {
+  return !!meta.maskPreset || (meta.maskStack?.length ?? 0) > 0;
+}
+function applyTextWrapToObject(object, meta, makeRect = (options) => new Rect(options)) {
+  const text = asText(object);
+  if (!text) return;
+  const state = readTextWrap(meta);
+  if (!text.path) {
+    text.set({ splitByGrapheme: state.wrap === "break-all" });
+    if (state.wrap === "pre-wrap") patchWordSplit(text);
+    else unpatchWordSplit(text);
+    text.initDimensions?.();
+  }
+  const clip = state.overflow === "hidden" ? boxClip(text, makeRect) : void 0;
+  if (meta && hasMask(meta)) {
+    const host = text.clipPath;
+    if (host) {
+      if (clip) toHostSpace(clip, asObject(host));
+      host.clipPath = clip;
+    }
+  } else {
+    text.clipPath = clip;
+  }
+}
+var TextWrapManager = class {
+  constructor(canvas, layers, history, events) {
+    this.canvas = canvas;
+    this.layers = layers;
+    this.history = history;
+    this.events = events;
+    this.canvas.on("text:changed", this.onTextChanged);
+    this.events.on("masks:changed", this.onMasksChanged);
+  }
+  canvas;
+  layers;
+  history;
+  events;
+  /**
+   * Typing changes the run the box was fitted to, so an auto-width layer has to
+   * re-fit. No history entry: fabric records the edit when editing exits, and a
+   * save per keystroke would bury every earlier step.
+   */
+  onTextChanged = (event) => {
+    const layer = event.target ? this.layers.findByObject(event.target) : void 0;
+    if (!layer) return;
+    this.refresh(layer.id, false);
+  };
+  /**
+   * Both mask owners — the preset manager and every mask-stack mutation —
+   * install their clip straight onto `clipPath`, dropping whatever was there,
+   * and neither knows this layer had a box clip. Re-deriving on the one event
+   * they both announce puts it back where it now belongs: nested under the new
+   * mask, or at the top level when the last mask leaves. Waiting for the next
+   * keystroke instead would leave a layer that should clip inside its box
+   * serialized unclipped — which is what the print renderer reads.
+   */
+  onMasksChanged = ({ target }) => {
+    this.refresh(target);
+  };
+  dispose() {
+    this.canvas.off("text:changed", this.onTextChanged);
+    this.events.off("masks:changed", this.onMasksChanged);
+  }
+  /** Both properties for a text layer, or null when it is not text. */
+  get(layerId) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return null;
+    return readTextWrap(layer.meta);
+  }
+  apply(layerId, wrap, save = true) {
+    const layer = this.layers.get(layerId);
+    const text = layer ? asText(layer.fabricObject) : null;
+    if (!layer || !text) return false;
+    if (wrap === "none") {
+      const curved = !!text.path;
+      if (layer.meta.wrapWidth === void 0 && !curved) {
+        layer.meta.wrapWidth = text.width ?? 0;
+      }
+    }
+    layer.meta.wrap = wrap;
+    return this.derive(layerId, save);
+  }
+  setOverflow(layerId, overflow, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    layer.meta.overflow = overflow;
+    return this.derive(layerId, save);
+  }
+  /** Back to the defaults: auto-width, unclipped. */
+  clear(layerId, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    delete layer.meta.overflow;
+    return this.apply(layerId, "none", save);
+  }
+  /** Re-derive from the stored mode — after a text, font or size change. */
+  refresh(layerId, save = false) {
+    const layer = this.layers.get(layerId);
+    if (!layer || !asText(layer.fabricObject)) return false;
+    return this.derive(layerId, save);
+  }
+  /**
+   * Re-derive every text layer — used after a state restore.
+   *
+   * Recursive because a template inserts as a group of real child layers, and
+   * text inside one would otherwise keep whatever box it was restored with.
+   */
+  refreshAll() {
+    const visit = (layers) => {
+      for (const layer of layers) {
+        if (asText(layer.fabricObject)) this.refresh(layer.id);
+        if (layer.children.length > 0) visit(layer.children);
+      }
+    };
+    visit(this.layers.getAll());
+  }
+  derive(layerId, save) {
+    const layer = this.layers.get(layerId);
+    const text = layer ? asText(layer.fabricObject) : null;
+    if (!layer || !text) return false;
+    const state = readTextWrap(layer.meta);
+    if (!text.path) {
+      if (state.wrap === "none") {
+        fitTextWidth(text);
+      } else if (layer.meta.wrapWidth !== void 0) {
+        text.set({ width: layer.meta.wrapWidth });
+        delete layer.meta.wrapWidth;
+      }
+    }
+    applyTextWrapToObject(text, layer.meta);
+    text.dirty = true;
+    text.setCoords();
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    if (save) this.history.save();
+    return true;
+  }
+};
+
+// src/displacement.ts
+var CHANNEL_INDEX = {
+  red: 0,
+  green: 1,
+  blue: 2,
+  alpha: 3
+};
+function finiteScale(value, fallback, label) {
+  const resolved = value ?? fallback;
+  if (!Number.isFinite(resolved)) throw new Error(`${label} must be finite`);
+  return resolved;
+}
+function sample(source, width, height, x, y, channel) {
+  const clampedX = Math.max(0, Math.min(width - 1, x));
+  const clampedY = Math.max(0, Math.min(height - 1, y));
+  const x0 = Math.floor(clampedX);
+  const y0 = Math.floor(clampedY);
+  const x1 = Math.min(width - 1, x0 + 1);
+  const y1 = Math.min(height - 1, y0 + 1);
+  const tx = clampedX - x0;
+  const ty = clampedY - y0;
+  const top = source[(y0 * width + x0) * 4 + channel] * (1 - tx) + source[(y0 * width + x1) * 4 + channel] * tx;
+  const bottom = source[(y1 * width + x0) * 4 + channel] * (1 - tx) + source[(y1 * width + x1) * 4 + channel] * tx;
+  return top * (1 - ty) + bottom * ty;
+}
+function displaceRgba(source, map, width, height, options) {
+  if (!Number.isInteger(width) || !Number.isInteger(height) || width <= 0 || height <= 0) {
+    throw new Error("Displacement dimensions must be positive integers");
+  }
+  const expectedLength = width * height * 4;
+  if (source.length !== expectedLength || map.length !== expectedLength) {
+    throw new Error("Displacement source and map must match the requested dimensions");
+  }
+  const scaleX = finiteScale(options.scaleX, 10, "Displacement scaleX");
+  const scaleY = finiteScale(options.scaleY, 10, "Displacement scaleY");
+  const channelX = CHANNEL_INDEX[options.channelX ?? "red"];
+  const channelY = CHANNEL_INDEX[options.channelY ?? "green"];
+  const output = new Uint8ClampedArray(expectedLength);
+  for (let y = 0; y < height; y += 1) {
+    for (let x = 0; x < width; x += 1) {
+      const offset = (y * width + x) * 4;
+      const sourceX = x + (map[offset + channelX] - 128) / 127 * scaleX;
+      const sourceY = y + (map[offset + channelY] - 128) / 127 * scaleY;
+      for (let channel = 0; channel < 4; channel += 1) {
+        output[offset + channel] = Math.round(
+          sample(source, width, height, sourceX, sourceY, channel)
+        );
+      }
+    }
+  }
+  return output;
+}
+
+// src/export.ts
+import { StaticCanvas } from "fabric";
+function computePrintAreaClip(area, scaleX, scaleY, targetWidth, targetHeight) {
+  const left = Math.max(0, Math.min(targetWidth, area.left * scaleX));
+  const top = Math.max(0, Math.min(targetHeight, area.top * scaleY));
+  const right = Math.max(left, Math.min(targetWidth, (area.left + area.width) * scaleX));
+  const bottom = Math.max(top, Math.min(targetHeight, (area.top + area.height) * scaleY));
+  return { left, top, width: right - left, height: bottom - top };
+}
+function computeCoverPlacement(sourceWidth, sourceHeight, targetWidth, targetHeight) {
+  if (sourceWidth <= 0 || sourceHeight <= 0 || targetWidth <= 0 || targetHeight <= 0) {
+    throw new Error("Cover dimensions must be positive");
+  }
+  const scale = Math.max(targetWidth / sourceWidth, targetHeight / sourceHeight);
+  const width = sourceWidth * scale;
+  const height = sourceHeight * scale;
+  return {
+    left: (targetWidth - width) / 2,
+    top: (targetHeight - height) / 2,
+    width,
+    height
+  };
+}
+function canvasElementToBlob(output, format, quality) {
+  const mime = format === "jpeg" ? "image/jpeg" : `image/${format}`;
+  return new Promise((resolve, reject) => {
+    output.toBlob(
+      (blob) => blob ? resolve(blob) : reject(new Error(`Failed to export ${format}`)),
+      mime,
+      quality
+    );
+  });
+}
+async function exportPNG(canvas, options = {}) {
+  const { multiplier = 1, format = "png", quality = 1 } = options;
+  const output = canvas.toCanvasElement(multiplier);
+  return canvasElementToBlob(output, format, quality);
+}
+async function exportIsolatedPNG(source, objects, options = {}) {
+  const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
+  const canvas = new StaticCanvas(element, {
+    width: options.width ?? source.getWidth(),
+    height: options.height ?? source.getHeight(),
+    backgroundColor: options.backgroundColor || void 0
+  });
+  try {
+    const clones = options.cloneObjects === false ? objects : await Promise.all(objects.map((object) => object.clone()));
+    if (clones.length) canvas.add(...clones);
+    if (options.backgroundImage) canvas.backgroundImage = await options.backgroundImage.clone();
+    canvas.requestRenderAll();
+    return await exportPNG(canvas, options);
+  } finally {
+    canvas.dispose();
+  }
+}
+async function exportPrintArea(source, area, options = {}) {
+  const { multiplier = 1, format = "png", quality = 1 } = options;
+  const width = source.getWidth();
+  const height = source.getHeight();
+  const clip = computePrintAreaClip(
+    area,
+    multiplier,
+    multiplier,
+    width * multiplier,
+    height * multiplier
+  );
+  if (clip.width <= 0 || clip.height <= 0) {
+    throw new Error("Print area does not overlap the canvas");
+  }
+  const element = source.lowerCanvasEl.ownerDocument.createElement("canvas");
+  const canvas = new StaticCanvas(element, { width, height });
+  try {
+    const clones = await Promise.all(source.getObjects().map((object) => object.clone()));
+    if (clones.length) canvas.add(...clones);
+    canvas.requestRenderAll();
+    const rendered = canvas.toCanvasElement(multiplier);
+    const output = rendered.ownerDocument.createElement("canvas");
+    output.width = Math.max(1, Math.round(clip.width));
+    output.height = Math.max(1, Math.round(clip.height));
+    const context = output.getContext("2d");
+    if (!context) throw new Error("2D canvas context is unavailable");
+    context.drawImage(rendered, -clip.left, -clip.top);
+    return await canvasElementToBlob(output, format, quality);
+  } finally {
+    canvas.dispose();
+  }
+}
+async function exportMockup(canvas, mockup, options = {}) {
+  const { multiplier = 1, format = "png", quality = 1 } = options;
+  const design = canvas.toCanvasElement(multiplier);
+  const output = design.ownerDocument.createElement("canvas");
+  output.width = design.width;
+  output.height = design.height;
+  const context = output.getContext("2d");
+  if (!context) throw new Error("2D canvas context is unavailable");
+  const loadImage = (url) => new Promise((resolve, reject) => {
+    const element = new Image();
+    element.crossOrigin = "anonymous";
+    element.onload = () => resolve(element);
+    element.onerror = () => reject(new Error(`Failed to load mockup image: ${url}`));
+    element.src = url;
+  });
+  const drawCover = (image, targetContext = context) => {
+    const placement = computeCoverPlacement(
+      image.naturalWidth || image.width,
+      image.naturalHeight || image.height,
+      output.width,
+      output.height
+    );
+    targetContext.drawImage(
+      image,
+      placement.left,
+      placement.top,
+      placement.width,
+      placement.height
+    );
+  };
+  const scratch = [design];
+  try {
+    drawCover(await loadImage(mockup.image));
+    let compositedDesign = design;
+    if (mockup.displacement) {
+      const sourceContext = design.getContext("2d");
+      if (!sourceContext) throw new Error("2D design context is unavailable");
+      const mapCanvas = design.ownerDocument.createElement("canvas");
+      scratch.push(mapCanvas);
+      mapCanvas.width = design.width;
+      mapCanvas.height = design.height;
+      const mapContext = mapCanvas.getContext("2d");
+      if (!mapContext) throw new Error("2D displacement-map context is unavailable");
+      drawCover(await loadImage(mockup.displacement.image), mapContext);
+      const warped = design.ownerDocument.createElement("canvas");
+      scratch.push(warped);
+      warped.width = design.width;
+      warped.height = design.height;
+      const warpedContext = warped.getContext("2d");
+      if (!warpedContext) throw new Error("2D displaced-design context is unavailable");
+      let sourcePixels;
+      let mapPixels;
+      try {
+        sourcePixels = sourceContext.getImageData(0, 0, design.width, design.height).data;
+        mapPixels = mapContext.getImageData(0, 0, design.width, design.height).data;
+      } catch (error) {
+        throw new Error("Failed to apply mockup displacement map; verify image CORS access", {
+          cause: error
+        });
+      }
+      const pixels = displaceRgba(sourcePixels, mapPixels, design.width, design.height, {
+        ...mockup.displacement,
+        scaleX: (mockup.displacement.scaleX ?? 10) * multiplier,
+        scaleY: (mockup.displacement.scaleY ?? 10) * multiplier
+      });
+      const imageData = warpedContext.createImageData(design.width, design.height);
+      imageData.data.set(pixels);
+      warpedContext.putImageData(imageData, 0, 0);
+      compositedDesign = warped;
+    }
+    context.save();
+    if (mockup.printArea && mockup.clipToPrintArea !== false) {
+      const clip = computePrintAreaClip(
+        mockup.printArea,
+        output.width / canvas.getWidth(),
+        output.height / canvas.getHeight(),
+        output.width,
+        output.height
+      );
+      context.beginPath();
+      context.rect(clip.left, clip.top, clip.width, clip.height);
+      context.clip();
+    }
+    context.globalAlpha = Math.max(0, Math.min(1, mockup.designOpacity ?? 1));
+    context.globalCompositeOperation = !mockup.designBlendMode || mockup.designBlendMode === "normal" ? "source-over" : mockup.designBlendMode;
+    context.drawImage(compositedDesign, 0, 0);
+    context.restore();
+    if (mockup.overlay) {
+      context.save();
+      context.globalAlpha = Math.max(0, Math.min(1, mockup.overlay.opacity ?? 1));
+      context.globalCompositeOperation = mockup.overlay.blendMode === "normal" ? "source-over" : mockup.overlay.blendMode ?? "multiply";
+      drawCover(await loadImage(mockup.overlay.image));
+      context.restore();
+    }
+    return await canvasElementToBlob(output, format, quality);
+  } finally {
+    for (const element of scratch) {
+      element.width = 0;
+      element.height = 0;
+    }
+  }
+}
+function exportSVG(canvas) {
+  return canvas.toSVG();
+}
+function exportDataURL(canvas, format = "png", multiplier = 1) {
+  return canvas.toDataURL({ format, multiplier });
+}
+
+export {
+  TEXT_FIT_SLACK,
+  asText,
+  textInk,
+  fitTextWidth,
+  preWrapWordSplit,
+  matrixOf,
+  applyMatrix,
+  toCanvasSpace,
+  toHostSpace,
+  relativeMatrix,
+  applyRelativeMatrix,
+  asObject,
+  toMatrix,
+  fitToBox,
+  unwrapGroup,
+  readTextWrap,
+  applyTextWrapToObject,
+  TextWrapManager,
+  displaceRgba,
+  computePrintAreaClip,
+  computeCoverPlacement,
+  exportPNG,
+  exportIsolatedPNG,
+  exportPrintArea,
+  exportMockup,
+  exportSVG,
+  exportDataURL
+};
+//# sourceMappingURL=chunk-XNGPX7FG.mjs.map