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

package/dist/index.mjs

@@ -1,4 +1,11 @@
 import {
+  TEXT_FIT_SLACK,
+  TextWrapManager,
+  applyMatrix,
+  applyRelativeMatrix,
+  applyTextWrapToObject,
+  asObject,
+  asText,
   computeCoverPlacement,
   computePrintAreaClip,
   displaceRgba,
@@ -7,11 +14,22 @@ 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";
+import { Canvas, FabricImage as FabricImage3, Group as Group7, Rect as Rect4, Textbox as Textbox2, filters } from "fabric";
 
 // src/events.ts
 var EventEmitter = class {
@@ -55,6 +73,53 @@ import { ActiveSelection } from "fabric";
 import { nanoid } from "nanoid";
 var generateId = () => nanoid(12);
 
+// src/blend.ts
+var BLEND_MODES = [
+  "normal",
+  "darken",
+  "multiply",
+  "color-burn",
+  "lighten",
+  "screen",
+  "color-dodge",
+  "linear-dodge",
+  "overlay",
+  "soft-light",
+  "hard-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity"
+];
+var OPERATION_EXCEPTIONS = {
+  normal: "source-over",
+  "linear-dodge": "lighter"
+};
+function blendOperation(mode) {
+  return OPERATION_EXCEPTIONS[mode] ?? mode;
+}
+function blendModeOf(operation) {
+  if (!operation) return "normal";
+  for (const mode of BLEND_MODES) {
+    if (blendOperation(mode) === operation) return mode;
+  }
+  return "normal";
+}
+var BLEND_GROUPS = [
+  { label: "Normal", modes: ["normal"] },
+  { label: "Darken", modes: ["darken", "multiply", "color-burn"] },
+  { label: "Lighten", modes: ["lighten", "screen", "color-dodge", "linear-dodge"] },
+  { label: "Contrast", modes: ["overlay", "soft-light", "hard-light"] },
+  { label: "Comparative", modes: ["difference", "exclusion"] },
+  { label: "Composite", modes: ["hue", "saturation", "color", "luminosity"] }
+];
+function blendModeLabel(mode) {
+  if (mode === "linear-dodge") return "Linear Dodge (Add)";
+  return mode.split("-").map((word) => (word[0] ?? "").toUpperCase() + word.slice(1)).join(" ");
+}
+
 // src/layer.ts
 var Layer = class {
   id;
@@ -98,6 +163,7 @@ var Layer = class {
     return Object.keys(this.meta).length > 0;
   }
   toData() {
+    const blend = blendModeOf(this.fabricObject.globalCompositeOperation);
     return {
       id: this.id,
       type: this.type,
@@ -105,6 +171,7 @@ var Layer = class {
       visible: this.visible,
       locked: this.locked,
       opacity: this.opacity,
+      ...blend !== "normal" ? { blend } : {},
       ...this.hasMeta() ? { meta: this.meta } : {},
       ...this.children.length > 0 ? { children: this.children.map((c) => c.toData()) } : {}
     };
@@ -266,7 +333,11 @@ var LayerManager = class {
       visible: layer.visible,
       opacity: layer.opacity,
       selectable: !layer.locked,
-      evented: !layer.locked
+      evented: !layer.locked,
+      // Compositing lives only on the fabric object (see `blendModeOf`); carry
+      // it from the object being replaced or a blend set before this call
+      // silently reverts to normal.
+      globalCompositeOperation: previous.globalCompositeOperation
     });
     this.canvas.insertAt(Math.max(0, stackIndex), fabricObject);
     if (layer.renderProxy) {
@@ -296,7 +367,12 @@ var LayerManager = class {
         visible: layer.visible,
         opacity: layer.opacity,
         selectable: !layer.locked,
-        evented: !layer.locked
+        evented: !layer.locked,
+        // The proxy is what actually draws once a layer has one (see
+        // `LayerManager`'s class doc); a blend set before the proxy existed
+        // must not silently stop applying. Read off the layer's own object —
+        // that stays the single source of truth (see `blendModeOf`).
+        globalCompositeOperation: layer.fabricObject.globalCompositeOperation
       });
       this.canvas.add(proxy);
       this.syncZOrder();
@@ -1143,60 +1219,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 +1376,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 +1508,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 +1574,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
@@ -1969,7 +1992,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();
@@ -2017,7 +2040,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 {
@@ -2487,6 +2510,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;
@@ -2761,6 +2785,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) {
@@ -3412,76 +3437,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;
@@ -3562,8 +3518,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)
       )
     );
@@ -3713,6 +3669,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.
    *
@@ -3725,7 +3699,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;
@@ -4056,6 +4036,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(),
@@ -4092,6 +4073,109 @@ var LayerMaskManager = class extends MaskStackStore {
   }
 };
 
+// src/gradient.ts
+import { Color, Gradient } from "fabric";
+var DEFAULT_GRADIENT_CONFIG = {
+  kind: "linear",
+  angle: 90,
+  center: { x: 0.5, y: 0.5 },
+  radius: 0.5,
+  stops: [
+    { color: "#ffffff", opacity: 1, position: 0 },
+    { color: "#000000", opacity: 1, position: 1 }
+  ]
+};
+var MIN_RADIUS = 1e-3;
+var FALLBACK_STOP_COLOR = DEFAULT_GRADIENT_CONFIG.stops[0].color;
+function linearCoords(angle, box) {
+  const radians = angle * Math.PI / 180;
+  const sin = Math.sin(radians);
+  const cos = Math.cos(radians);
+  const vx = box.width * sin;
+  const vy = -box.height * cos;
+  const length = Math.abs(box.width * sin) + Math.abs(box.height * cos);
+  const scale = length / (vx * vx + vy * vy || 1);
+  return {
+    x1: 0.5 - scale * vx / 2,
+    y1: 0.5 - scale * vy / 2,
+    x2: 0.5 + scale * vx / 2,
+    y2: 0.5 + scale * vy / 2
+  };
+}
+function angleFromCoords(coords, box) {
+  const dx = (coords.x2 - coords.x1) / (box.width || 1);
+  const dy = (coords.y2 - coords.y1) / (box.height || 1);
+  const degrees = Math.atan2(dx, -dy) * 180 / Math.PI;
+  return (degrees + 360) % 360;
+}
+function stopColor(stop) {
+  const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
+  const color = new Color(source);
+  const opacity = Number.isFinite(stop.opacity) ? stop.opacity : 1;
+  color.setAlpha(clamp(opacity, 0, 1));
+  return color.toRgba();
+}
+function toFabricGradient(config, box) {
+  const colorStops = [...config.stops].sort((a, b) => a.position - b.position).map((stop) => {
+    const position = Number.isFinite(stop.position) ? stop.position : 0;
+    return { offset: clamp(position, 0, 1), color: stopColor(stop) };
+  });
+  if (config.kind === "radial") {
+    const radius = Math.max(MIN_RADIUS, config.radius);
+    return new Gradient({
+      type: "radial",
+      gradientUnits: "percentage",
+      coords: {
+        x1: config.center.x,
+        y1: config.center.y,
+        r1: 0,
+        x2: config.center.x,
+        y2: config.center.y,
+        r2: radius
+      },
+      colorStops
+    });
+  }
+  return new Gradient({
+    type: "linear",
+    gradientUnits: "percentage",
+    coords: linearCoords(config.angle, box),
+    colorStops
+  });
+}
+function readGradientConfig(object) {
+  const fill = object.fill;
+  if (!fill || typeof fill === "string" || !(fill instanceof Gradient)) return null;
+  const stops = fill.colorStops.map((stop) => {
+    const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
+    const color = new Color(source);
+    const offset = Number.isFinite(stop.offset) ? stop.offset : 0;
+    return {
+      color: `#${color.toHex().toLowerCase()}`,
+      opacity: color.getAlpha(),
+      position: clamp(offset, 0, 1)
+    };
+  });
+  if (fill.type === "radial") {
+    const { x1, y1, r2 } = fill.coords;
+    return {
+      kind: "radial",
+      angle: DEFAULT_GRADIENT_CONFIG.angle,
+      center: { x: x1, y: y1 },
+      radius: r2,
+      stops
+    };
+  }
+  const box = { width: object.width || 1, height: object.height || 1 };
+  return {
+    kind: "linear",
+    angle: angleFromCoords(fill.coords, box),
+    center: { ...DEFAULT_GRADIENT_CONFIG.center },
+    radius: DEFAULT_GRADIENT_CONFIG.radius,
+    stops
+  };
+}
+
 // src/editor.ts
 var MIN_ZOOM = 0.1;
 var MAX_ZOOM = 8;
@@ -4108,6 +4192,7 @@ var CanvasEditor = class {
   crop;
   patterns;
   curves;
+  wrap;
   maskPresets;
   /** Stacked boolean masks, per layer and for the design as a whole. */
   layerMasks;
@@ -4158,6 +4243,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();
@@ -4246,6 +4332,65 @@ var CanvasEditor = class {
     this.history.save();
     return layer;
   }
+  /**
+   * Insert a gradient layer. It is an ordinary `Rect` with a gradient fill —
+   * which is exactly why the Node print compositor needs no code for it.
+   */
+  addGradient(config = DEFAULT_GRADIENT_CONFIG, box) {
+    const width = box?.width ?? this.canvas.getWidth();
+    const height = box?.height ?? this.canvas.getHeight();
+    const object = new Rect4({
+      left: box?.left ?? 0,
+      top: box?.top ?? 0,
+      originX: "left",
+      originY: "top",
+      width,
+      height,
+      // A gradient fill IS the artwork; an outline is not part of this
+      // layer's design, only its own gradient (unlike a plain shape, where a
+      // stroke is a legitimate look).
+      strokeWidth: 0,
+      fill: toFabricGradient(config, { width, height })
+    });
+    const layer = this.layers.add("gradient", object, "Gradient");
+    this.layers.select(layer.id);
+    this.history.save();
+    return layer;
+  }
+  /**
+   * Repaint a layer's gradient. `save: false` while a slider is being dragged —
+   * the settled value is the one worth an undo step.
+   */
+  setGradient(layerId, config, save = true) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    const object = layer.fabricObject;
+    object.set({
+      fill: toFabricGradient(config, {
+        width: object.width || 1,
+        height: object.height || 1
+      })
+    });
+    object.dirty = true;
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    if (save) this.history.save();
+  }
+  /** Set a layer's blend mode. Applied to the render proxy too, like opacity. */
+  setBlend(layerId, mode) {
+    const layer = this.layers.get(layerId);
+    if (!layer) return;
+    const operation = blendOperation(mode);
+    layer.fabricObject.set({ globalCompositeOperation: operation });
+    layer.fabricObject.dirty = true;
+    if (layer.renderProxy) {
+      layer.renderProxy.set({ globalCompositeOperation: operation });
+      layer.renderProxy.dirty = true;
+    }
+    this.canvas.requestRenderAll();
+    this.events.emit("layer:modified", { layerId });
+    this.history.save();
+  }
   async addTemplate(template, params) {
     const values = {};
     for (const parameter of template.parameters) {
@@ -4914,15 +5059,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);
   }
@@ -5011,6 +5175,7 @@ var CanvasEditor = class {
     this.history.dispose();
     this.patterns.dispose();
     this.curves.dispose();
+    this.wrap.dispose();
     this.events.removeAllListeners();
     this.canvas.dispose();
   }
@@ -5133,10 +5298,13 @@ var AnnotationOverlay = class {
 };
 export {
   AnnotationOverlay,
+  BLEND_GROUPS,
+  BLEND_MODES,
   CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS,
   CanvasEditor,
   CropController,
+  DEFAULT_GRADIENT_CONFIG,
   DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG,
   DEFAULT_SELECTION_STYLE,
@@ -5159,12 +5327,18 @@ export {
   TEXTURE_MASK_IDS,
   TEXTURE_MASK_SIZE,
   TextCurveManager,
+  TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
+  applyTextWrapToObject,
+  blendModeLabel,
+  blendModeOf,
+  blendOperation,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5190,9 +5364,13 @@ export {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
+  linearCoords,
   needsAbsoluteSpace,
   normalizeTextCurve,
+  preWrapWordSplit,
+  readGradientConfig,
   readLayerShadow,
+  readTextWrap,
   renderTextureMask,
   resetTransform,
   restoreLocks,
@@ -5203,6 +5381,7 @@ export {
   textPathCurve,
   textPathSpec,
   toCanvasSpace,
+  toFabricGradient,
   toHostSpace,
   unwrapGroup
 };