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

package/dist/index.js

@@ -21,10 +21,13 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   AnnotationOverlay: () => AnnotationOverlay,
+  BLEND_GROUPS: () => BLEND_GROUPS,
+  BLEND_MODES: () => BLEND_MODES,
   CANVAS_MASK_TARGET: () => CANVAS_MASK_TARGET,
   CANVAS_SIZE_PRESETS: () => CANVAS_SIZE_PRESETS,
   CanvasEditor: () => CanvasEditor,
   CropController: () => CropController,
+  DEFAULT_GRADIENT_CONFIG: () => DEFAULT_GRADIENT_CONFIG,
   DEFAULT_LAYER_SHADOW: () => DEFAULT_LAYER_SHADOW,
   DEFAULT_PATTERN_CONFIG: () => DEFAULT_PATTERN_CONFIG,
   DEFAULT_SELECTION_STYLE: () => DEFAULT_SELECTION_STYLE,
@@ -50,11 +53,15 @@ __export(index_exports, {
   TextWrapManager: () => TextWrapManager,
   TiledPatternObject: () => TiledPatternObject,
   UnitConverter: () => UnitConverter,
+  angleFromCoords: () => angleFromCoords,
   applyAspectLock: () => applyAspectLock,
   applyLayerShadow: () => applyLayerShadow,
   applyObjectSelectionStyle: () => applyObjectSelectionStyle,
   applySelectionStyle: () => applySelectionStyle,
   applyTextWrapToObject: () => applyTextWrapToObject,
+  blendModeLabel: () => blendModeLabel,
+  blendModeOf: () => blendModeOf,
+  blendOperation: () => blendOperation,
   buildCurveLinePaths: () => buildCurveLinePaths,
   buildCurvePathData: () => buildCurvePathData,
   clamp: () => clamp,
@@ -80,9 +87,11 @@ __export(index_exports, {
   isMaskPresetId: () => isMaskPresetId,
   isShapeMaskId: () => isShapeMaskId,
   isTextureMaskId: () => isTextureMaskId,
+  linearCoords: () => linearCoords,
   needsAbsoluteSpace: () => needsAbsoluteSpace,
   normalizeTextCurve: () => normalizeTextCurve,
   preWrapWordSplit: () => preWrapWordSplit,
+  readGradientConfig: () => readGradientConfig,
   readLayerShadow: () => readLayerShadow,
   readTextWrap: () => readTextWrap,
   renderTextureMask: () => renderTextureMask,
@@ -95,13 +104,14 @@ __export(index_exports, {
   textPathCurve: () => textPathCurve,
   textPathSpec: () => textPathSpec,
   toCanvasSpace: () => toCanvasSpace,
+  toFabricGradient: () => toFabricGradient,
   toHostSpace: () => toHostSpace,
   unwrapGroup: () => unwrapGroup
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/editor.ts
-var import_fabric21 = require("fabric");
+var import_fabric22 = require("fabric");
 
 // src/events.ts
 var EventEmitter = class {
@@ -145,6 +155,53 @@ var import_fabric = require("fabric");
 var import_nanoid = require("nanoid");
 var generateId = () => (0, import_nanoid.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;
@@ -188,6 +245,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,
@@ -195,6 +253,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()) } : {}
     };
@@ -356,7 +415,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) {
@@ -386,7 +449,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();
@@ -4702,6 +4770,109 @@ var LayerMaskManager = class extends MaskStackStore {
   }
 };
 
+// src/gradient.ts
+var import_fabric21 = require("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 import_fabric21.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 import_fabric21.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 import_fabric21.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 import_fabric21.Gradient)) return null;
+  const stops = fill.colorStops.map((stop) => {
+    const source = isCssColor(stop.color) ? stop.color : FALLBACK_STOP_COLOR;
+    const color = new import_fabric21.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;
@@ -4746,7 +4917,7 @@ var CanvasEditor = class {
     const widthPx = this.units.toPixels(config.width);
     const heightPx = this.units.toPixels(config.height);
     this.designBackground = config.backgroundColor ?? "#ffffff";
-    this.canvas = new import_fabric21.Canvas(canvasElement, {
+    this.canvas = new import_fabric22.Canvas(canvasElement, {
       width: widthPx,
       height: heightPx,
       backgroundColor: this.designBackground,
@@ -4781,7 +4952,7 @@ var CanvasEditor = class {
   // ─── Layer Operations ────────────────────────────────
   async addImage(url, options) {
     try {
-      const img = await import_fabric21.FabricImage.fromURL(
+      const img = await import_fabric22.FabricImage.fromURL(
         url,
         {},
         { originX: "left", originY: "top", ...options }
@@ -4807,7 +4978,7 @@ var CanvasEditor = class {
     if (this.crop.activeLayerId() === layerId) this.crop.cancel();
     const previous = layer.fabricObject;
     try {
-      const replacement = await import_fabric21.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
+      const replacement = await import_fabric22.FabricImage.fromURL(url, {}, { originX: "left", originY: "top" });
       replacement.set({
         left: previous.left,
         top: previous.top,
@@ -4836,7 +5007,7 @@ var CanvasEditor = class {
     }
   }
   addText(text, options) {
-    const textbox = new import_fabric21.Textbox(text, {
+    const textbox = new import_fabric22.Textbox(text, {
       fontSize: 32,
       fontFamily: "Arial",
       fill: "#000000",
@@ -4858,6 +5029,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 import_fabric22.Rect({
+      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) {
@@ -4967,10 +5197,10 @@ var CanvasEditor = class {
     const next = { ...previous, ...adjustments };
     const clampAdjustment = (value, min = -1) => clamp(value ?? 0, min, 1);
     image.filters = [
-      new import_fabric21.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
-      new import_fabric21.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
-      new import_fabric21.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
-      new import_fabric21.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
+      new import_fabric22.filters.Brightness({ brightness: clampAdjustment(next.brightness) }),
+      new import_fabric22.filters.Contrast({ contrast: clampAdjustment(next.contrast) }),
+      new import_fabric22.filters.Saturation({ saturation: clampAdjustment(next.saturation) }),
+      new import_fabric22.filters.Blur({ blur: clampAdjustment(next.blur, 0) })
     ];
     layer.meta.imageAdjustments = next;
     image.applyFilters();
@@ -5011,7 +5241,7 @@ var CanvasEditor = class {
           this.layers.detach(layer.id);
         }
       }
-      const group = new import_fabric21.Group(objects);
+      const group = new import_fabric22.Group(objects);
       const grouped = this.layers.add("group", group, name);
       this.layers.adoptChildren(grouped, children);
       this.layers.reorder(grouped.id, insertIndex);
@@ -5073,7 +5303,7 @@ var CanvasEditor = class {
     const layer = this.layers.get(id);
     if (!layer) throw new Error(`Layer not found: ${id}`);
     try {
-      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric21.FabricImage) {
+      if (options.resolution === "source" && layer.fabricObject instanceof import_fabric22.FabricImage) {
         const image = await layer.fabricObject.clone();
         image.set({
           left: 0,
@@ -5349,7 +5579,7 @@ var CanvasEditor = class {
       return;
     }
     try {
-      const image = await import_fabric21.FabricImage.fromURL(
+      const image = await import_fabric22.FabricImage.fromURL(
         url,
         { crossOrigin: options.crossOrigin ?? null, signal: options.signal },
         { originX: "left", originY: "top" }
@@ -5766,10 +5996,13 @@ var AnnotationOverlay = class {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   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,
@@ -5795,11 +6028,15 @@ var AnnotationOverlay = class {
   TextWrapManager,
   TiledPatternObject,
   UnitConverter,
+  angleFromCoords,
   applyAspectLock,
   applyLayerShadow,
   applyObjectSelectionStyle,
   applySelectionStyle,
   applyTextWrapToObject,
+  blendModeLabel,
+  blendModeOf,
+  blendOperation,
   buildCurveLinePaths,
   buildCurvePathData,
   clamp,
@@ -5825,9 +6062,11 @@ var AnnotationOverlay = class {
   isMaskPresetId,
   isShapeMaskId,
   isTextureMaskId,
+  linearCoords,
   needsAbsoluteSpace,
   normalizeTextCurve,
   preWrapWordSplit,
+  readGradientConfig,
   readLayerShadow,
   readTextWrap,
   renderTextureMask,
@@ -5840,6 +6079,7 @@ var AnnotationOverlay = class {
   textPathCurve,
   textPathSpec,
   toCanvasSpace,
+  toFabricGradient,
   toHostSpace,
   unwrapGroup
 });