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

package/dist/index.mjs

@@ -29,7 +29,7 @@ import {
 } 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 {
@@ -73,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;
@@ -116,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,
@@ -123,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()) } : {}
     };
@@ -284,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) {
@@ -314,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();
@@ -4015,6 +4073,110 @@ 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 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.1;
 var MAX_ZOOM = 8;
@@ -4171,6 +4333,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) {
@@ -5078,10 +5299,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,
@@ -5107,11 +5331,15 @@ export {
   TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
   applyTextWrapToObject,
+  blendModeLabel,
+  blendModeOf,
+  blendOperation,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5137,9 +5365,11 @@ export {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
+  linearCoords,
   needsAbsoluteSpace,
   normalizeTextCurve,
   preWrapWordSplit,
+  readGradientConfig,
   readLayerShadow,
   readTextWrap,
   renderTextureMask,
@@ -5152,6 +5382,7 @@ export {
   textPathCurve,
   textPathSpec,
   toCanvasSpace,
+  toFabricGradient,
   toHostSpace,
   unwrapGroup
 };