@overtone-art/canvas-editor-core 0.8.4 → 0.8.6

package/dist/index.mjs

@@ -3387,6 +3387,123 @@ import { Group as Group6 } from "fabric";
 
 // src/masks/compose.ts
 import { Group as Group2, Rect as Rect2 } from "fabric";
+
+// 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 MAX_GRADIENT_STOPS = 256;
+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).slice(0, MAX_GRADIENT_STOPS).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 toFabricMaskGradient(config, box) {
+  const gradient = toFabricGradient(config, box);
+  gradient.colorStops = gradient.colorStops.map((stop) => {
+    const color = new Color(stop.color);
+    const [red, green, blue] = color.getSource();
+    const luminance = (0.2126 * red + 0.7152 * green + 0.0722 * blue) / 255;
+    color.setSource([255, 255, 255, clamp(luminance * color.getAlpha(), 0, 1)]);
+    return { offset: stop.offset, color: color.toRgba() };
+  });
+  return gradient;
+}
+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/masks/compose.ts
 var MODE_OPERATION = {
   add: "source-over",
   subtract: "destination-out",
@@ -3416,13 +3533,21 @@ function composeMaskGroup(children, entries, options) {
       neutralize(child);
       return;
     }
+    if (entry.gradient) {
+      child.set({
+        fill: toFabricMaskGradient(entry.gradient, {
+          width: Math.max(1, child.width ?? 1),
+          height: Math.max(1, child.height ?? 1)
+        })
+      });
+    }
     child.set({
       opacity: entry.opacity,
       globalCompositeOperation: MODE_OPERATION[entry.mode] ?? "source-over"
     });
   });
   const first = entries.find((entry) => entry.visible);
-  const withBase = first && first.mode !== "add" ? [baseRect(options.box), ...children] : [...children];
+  const withBase = !first || first.mode !== "add" ? [baseRect(options.box), ...children] : [...children];
   return new Group2(withBase, {
     absolutePositioned: options.absolute,
     // Cached, so the children's compositing operations resolve against each
@@ -3438,10 +3563,104 @@ function needsAbsoluteSpace(entries) {
 
 // src/masks/edit.ts
 import { util as util3 } from "fabric";
+
+// src/masks/edit-viewport.ts
+var MIN_PADDING = 48;
+var MAX_PADDING = 512;
+var PADDING_FRACTION = 0.35;
+var OUTSIDE_SHADE = "rgba(15, 15, 15, 0.55)";
+var MaskEditViewport = class {
+  constructor(canvas) {
+    this.canvas = canvas;
+  }
+  canvas;
+  state = null;
+  open(handle) {
+    if (this.state) return;
+    const width = this.canvas.getWidth();
+    const height = this.canvas.getHeight();
+    const base = Math.min(
+      MAX_PADDING,
+      Math.max(MIN_PADDING, Math.max(width, height) * PADDING_FRACTION)
+    );
+    handle.setCoords();
+    const bounds = handle.getBoundingRect();
+    const left = Math.min(MAX_PADDING, Math.max(base, -bounds.left + MIN_PADDING));
+    const top = Math.min(MAX_PADDING, Math.max(base, -bounds.top + MIN_PADDING));
+    const right = Math.min(
+      MAX_PADDING,
+      Math.max(base, bounds.left + bounds.width - width + MIN_PADDING)
+    );
+    const bottom = Math.min(
+      MAX_PADDING,
+      Math.max(base, bounds.top + bounds.height - height + MIN_PADDING)
+    );
+    const viewport = [...this.canvas.viewportTransform];
+    const wrapper = this.canvas.wrapperEl;
+    this.state = {
+      width,
+      height,
+      left,
+      top,
+      viewport,
+      wrapperCss: wrapper.style.cssText
+    };
+    this.canvas.setDimensions({ width: width + left + right, height: height + top + bottom });
+    const paddedViewport = [...viewport];
+    paddedViewport[4] += left;
+    paddedViewport[5] += top;
+    this.canvas.setViewportTransform(paddedViewport);
+    wrapper.style.position = "absolute";
+    wrapper.style.left = `${-left}px`;
+    wrapper.style.top = `${-top}px`;
+    wrapper.style.zIndex = "1";
+    this.canvas.on("after:render", this.onAfterRender);
+    this.canvas.calcOffset();
+    this.canvas.requestRenderAll();
+  }
+  close() {
+    const state = this.state;
+    if (!state) return;
+    this.canvas.off("after:render", this.onAfterRender);
+    this.canvas.setViewportTransform(state.viewport);
+    this.canvas.setDimensions({ width: state.width, height: state.height });
+    this.canvas.wrapperEl.style.cssText = state.wrapperCss;
+    this.canvas.calcOffset();
+    this.state = null;
+  }
+  /** Save with real document dimensions, then reopen the same editing view. */
+  checkpoint(handle, save) {
+    this.close();
+    try {
+      save();
+    } finally {
+      this.open(handle);
+    }
+  }
+  onAfterRender = ({ ctx }) => {
+    const state = this.state;
+    if (!state || ctx !== this.canvas.getContext()) return;
+    const fullWidth = this.canvas.getWidth();
+    const fullHeight = this.canvas.getHeight();
+    const right = state.left + state.width;
+    const bottom = state.top + state.height;
+    ctx.save();
+    ctx.fillStyle = OUTSIDE_SHADE;
+    ctx.fillRect(0, 0, fullWidth, state.top);
+    ctx.fillRect(0, bottom, fullWidth, fullHeight - bottom);
+    ctx.fillRect(0, state.top, state.left, state.height);
+    ctx.fillRect(right, state.top, fullWidth - right, state.height);
+    ctx.restore();
+    this.canvas.drawControls(ctx);
+  };
+};
+
+// src/masks/edit.ts
 var MaskEditController = class {
   constructor(canvas, onCommit) {
     this.canvas = canvas;
     this.onCommit = onCommit;
+    this.viewport = new MaskEditViewport(canvas);
   }
   canvas;
   onCommit;
@@ -3449,6 +3668,7 @@ var MaskEditController = class {
   editing = null;
   child = null;
   group = null;
+  viewport;
   active() {
     return this.editing;
   }
@@ -3479,6 +3699,7 @@ var MaskEditController = class {
     this.group = group;
     this.canvas.add(handle);
     this.canvas.setActiveObject(handle);
+    this.viewport.open(handle);
     this.canvas.on("object:moving", this.onTransform);
     this.canvas.on("object:scaling", this.onTransform);
     this.canvas.on("object:rotating", this.onTransform);
@@ -3493,6 +3714,7 @@ var MaskEditController = class {
     this.canvas.off("object:scaling", this.onTransform);
     this.canvas.off("object:rotating", this.onTransform);
     this.canvas.off("object:modified", this.onModified);
+    this.viewport.close();
     if (this.canvas.getActiveObject() === this.handle) this.canvas.discardActiveObject();
     this.canvas.remove(this.handle);
     this.handle = null;
@@ -3511,7 +3733,7 @@ var MaskEditController = class {
   onModified = (event) => {
     if (!this.handle || event.target !== this.handle) return;
     this.write();
-    this.onCommit();
+    this.viewport.checkpoint(this.handle, this.onCommit);
   };
   /** Handle transform (canvas space) → clip child transform (group-relative). */
   write() {
@@ -3530,7 +3752,7 @@ var MaskEditController = class {
 };
 
 // src/masks/store.ts
-import { Group as Group5 } from "fabric";
+import { Gradient as Gradient2, Group as Group5 } from "fabric";
 
 // src/masks/host.ts
 import { Rect as Rect3 } from "fabric";
@@ -3642,6 +3864,29 @@ var MaskStackStore = class {
   get(target, maskId) {
     return this.list(target).find((entry) => entry.id === maskId);
   }
+  /** Repaint a gradient mask without replacing or re-fitting its geometry. */
+  setGradient(target, maskId, gradient, options = {}) {
+    const host = this.host(target);
+    if (!host) return false;
+    const entries = [...this.list(target)];
+    const index = entries.findIndex((entry) => entry.id === maskId);
+    if (index === -1) return false;
+    const sources = this.unwrap(target, host);
+    const source = sources[index];
+    if (!source) return false;
+    source.set({
+      fill: toFabricGradient(gradient, {
+        width: Math.max(1, source.width ?? 1),
+        height: Math.max(1, source.height ?? 1)
+      })
+    });
+    entries[index] = {
+      ...entries[index],
+      ...options.meta ? { meta: options.meta } : {}
+    };
+    this.commit(target, host, entries, sources, options.save ?? true);
+    return true;
+  }
   /** Every target that currently carries at least one mask. */
   targets() {
     return this.layers.getAll().filter((layer) => (layer.meta.maskStack ?? []).length > 0).map((layer) => layer.meta.canvasMask ? CANVAS_MASK_TARGET : layer.id);
@@ -3705,11 +3950,11 @@ var MaskStackStore = class {
     if (entries.length === 0 || !(clip instanceof Group5)) {
       const source = asObject(clip);
       if (meta?.overflow === "hidden") source.clipPath = void 0;
-      return [source];
+      return restoreGradientPaint(entries, [source]);
     }
     const children = unwrapGroup(clip);
     const extra = children.length - entries.length;
-    return extra > 0 ? children.slice(extra) : children;
+    return restoreGradientPaint(entries, extra > 0 ? children.slice(extra) : children);
   }
   /**
    * Entries for a stack, adopting a pre-stack clip as the first one. Without
@@ -3742,7 +3987,8 @@ var MaskStackStore = class {
     if (!layer) return;
     const absolute = forceAbsolute || target === CANVAS_MASK_TARGET || needsAbsoluteSpace(entries);
     convertSpace(host, sources, absolute);
-    const next = withRelativeTransforms(entries, sources, host, absolute);
+    const painted = captureGradientPaint(entries, sources);
+    const next = withRelativeTransforms(painted, sources, host, absolute);
     installClip(host, next, sources, this.hostBox(target, absolute), absolute);
     if (next.length === 0) {
       delete layer.meta.maskStack;
@@ -3756,12 +4002,41 @@ var MaskStackStore = class {
     if (save) this.history.save();
   }
 };
+function restoreGradientPaint(entries, sources) {
+  entries.forEach((entry, index) => {
+    const source = sources[index];
+    if (!source || !entry.gradient) return;
+    const box = {
+      width: Math.max(1, source.width ?? 1),
+      height: Math.max(1, source.height ?? 1)
+    };
+    const fill = source.fill;
+    const rendered = toFabricMaskGradient(entry.gradient, box);
+    if (fill instanceof Gradient2 && JSON.stringify(fill.toObject()) !== JSON.stringify(rendered.toObject())) {
+      return;
+    }
+    source.set({
+      fill: toFabricGradient(entry.gradient, box)
+    });
+  });
+  return sources;
+}
+function captureGradientPaint(entries, sources) {
+  return entries.map((entry, index) => {
+    const gradient = sources[index] ? readGradientConfig(sources[index]) : null;
+    if (gradient) return { ...entry, gradient };
+    if (!entry.gradient) return entry;
+    const next = { ...entry };
+    delete next.gradient;
+    return next;
+  });
+}
 
 // src/masks/manager.ts
 var LayerMaskManager = class extends MaskStackStore {
   // Committing mid-drag would recompose the group the handle writes into and
   // leave it pointing at a discarded object; the geometry is settled on endEdit.
-  edits = new MaskEditController(this.canvas, () => this.history.save());
+  edits = new MaskEditController(this.canvas, () => this.history.saveImmediate());
   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.
@@ -4148,110 +4423,6 @@ function layerTypeOf(object) {
   return "shape";
 }
 
-// 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 MAX_GRADIENT_STOPS = 256;
-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).slice(0, MAX_GRADIENT_STOPS).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.01;
 var MAX_ZOOM = 8;