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

package/dist/node.d.mts

@@ -1,4 +1,5 @@
-import { g as EditorState } from './types-F2GH3dcU.mjs';
+import { h as EditorState } from './specs-B_jOmY6u.mjs';
+export { I as IMAGE_FILTER_PRESETS, aC as imageEffectsFilterSpecs } from './specs-B_jOmY6u.mjs';
 import 'fabric';
 
 interface PrintPdfOptions {

package/dist/node.d.ts

@@ -1,4 +1,5 @@
-import { g as EditorState } from './types-F2GH3dcU.js';
+import { h as EditorState } from './specs-B_jOmY6u.js';
+export { I as IMAGE_FILTER_PRESETS, aC as imageEffectsFilterSpecs } from './specs-B_jOmY6u.js';
 import 'fabric';
 
 interface PrintPdfOptions {

package/dist/node.js

@@ -679,9 +679,261 @@ var init_print = __esm({
   }
 });
 
+// src/image-effects/presets.ts
+function imageFilterPreset(id) {
+  return IMAGE_FILTER_PRESETS.find((preset) => preset.id === id);
+}
+var LUMA, rows, IMAGE_FILTER_PRESETS;
+var init_presets = __esm({
+  "src/image-effects/presets.ts"() {
+    "use strict";
+    LUMA = [0.299, 0.587, 0.114];
+    rows = (r, g, b) => [...r, ...g, ...b, 0, 0, 0, 1, 0];
+    IMAGE_FILTER_PRESETS = [
+      { id: "original", name: "Original", version: 1, adjust: {} },
+      {
+        id: "black-white",
+        name: "Black & White",
+        version: 1,
+        adjust: {},
+        matrix: rows([...LUMA, 0, 0], [...LUMA, 0, 0], [...LUMA, 0, 0])
+      },
+      {
+        id: "sepia",
+        name: "Sepia",
+        version: 1,
+        adjust: {},
+        matrix: rows(
+          [0.393, 0.769, 0.189, 0, 0],
+          [0.349, 0.686, 0.168, 0, 0],
+          [0.272, 0.534, 0.131, 0, 0]
+        )
+      },
+      {
+        id: "fade",
+        name: "Fade",
+        version: 1,
+        adjust: { contrast: -0.2, saturation: -0.25, brightness: 0.08 }
+      },
+      {
+        id: "vivid",
+        name: "Vivid",
+        version: 1,
+        adjust: { vibrance: 0.5, contrast: 0.15, saturation: 0.15 }
+      },
+      { id: "fuchsia", name: "Fuchsia", version: 1, adjust: { tint: 0.5, saturation: 0.2 } },
+      { id: "cool", name: "Cool", version: 1, adjust: { temperature: -0.45 } },
+      { id: "warm", name: "Warm", version: 1, adjust: { temperature: 0.45 } },
+      {
+        id: "duotone",
+        name: "Duotone",
+        version: 1,
+        adjust: {},
+        matrix: rows(
+          [0.2544, 0.4995, 0.097, 0, 0.1059],
+          [0.2216, 0.435, 0.0845, 0, 0.1647],
+          [0.1453, 0.2853, 0.0554, 0, 0.2863]
+        )
+      },
+      {
+        id: "nashville",
+        name: "Nashville",
+        version: 1,
+        adjust: { temperature: 0.25, tint: -0.1, contrast: 0.2, saturation: 0.15, brightness: 0.05 }
+      },
+      {
+        id: "valencia",
+        name: "Valencia",
+        version: 1,
+        adjust: { temperature: 0.2, contrast: 0.08, brightness: 0.08, saturation: -0.05 }
+      },
+      {
+        id: "clarendon",
+        name: "Clarendon",
+        version: 1,
+        adjust: { contrast: 0.2, saturation: 0.35, temperature: -0.1 }
+      },
+      {
+        id: "reyes",
+        name: "Reyes",
+        version: 1,
+        adjust: { brightness: 0.1, contrast: -0.15, saturation: -0.35, temperature: 0.15 }
+      },
+      {
+        id: "lark",
+        name: "Lark",
+        version: 1,
+        adjust: { brightness: 0.08, contrast: -0.05, saturation: 0.1, temperature: -0.15 }
+      },
+      {
+        id: "juno",
+        name: "Juno",
+        version: 1,
+        adjust: { saturation: 0.3, contrast: 0.1, temperature: 0.15, tint: 0.1 }
+      }
+    ];
+  }
+});
+
+// src/utils/clamp.ts
+function clamp(v, min, max) {
+  return Math.min(max, Math.max(min, v));
+}
+var init_clamp = __esm({
+  "src/utils/clamp.ts"() {
+    "use strict";
+  }
+});
+
+// src/image-effects/types.ts
+var ADJUST_KEYS, NEUTRAL_ADJUST, ADJUST_RANGES;
+var init_types = __esm({
+  "src/image-effects/types.ts"() {
+    "use strict";
+    ADJUST_KEYS = [
+      "temperature",
+      "tint",
+      "brightness",
+      "contrast",
+      "highlights",
+      "shadows",
+      "whites",
+      "blacks",
+      "invert",
+      "vibrance",
+      "saturation",
+      "hue",
+      "sharpness",
+      "clarity",
+      "vignette",
+      "blur",
+      "noise",
+      "pixelate"
+    ];
+    NEUTRAL_ADJUST = Object.fromEntries(
+      ADJUST_KEYS.map((k) => [k, 0])
+    );
+    ADJUST_RANGES = {
+      invert: [0, 1],
+      vignette: [0, 1],
+      blur: [0, 1],
+      noise: [0, 1],
+      pixelate: [0, 1]
+    };
+  }
+});
+
+// src/image-effects/specs.ts
+function clampAdjust(adjust) {
+  const out = {};
+  for (const key of ADJUST_KEYS) {
+    const value = adjust[key];
+    if (typeof value !== "number" || !Number.isFinite(value)) continue;
+    const [min, max] = ADJUST_RANGES[key] ?? [-1, 1];
+    out[key] = key === "invert" ? value >= 0.5 ? 1 : 0 : clamp(value, min, max);
+  }
+  return out;
+}
+function clampAlphaClip(clip) {
+  if (!clip || typeof clip !== "object") return void 0;
+  const high = clamp(Number(clip.high) || 0, 1, 255);
+  const low = clamp(Math.min(Number(clip.low) || 0, high - 1), 0, 254);
+  return low === 0 && high === 255 ? void 0 : { low, high };
+}
+function alphaClipMatrix({ low, high }) {
+  const span = Math.max(1, high - low);
+  return [1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 255 / span, -low / span];
+}
+function specFor(key, v) {
+  if (v === 0) return null;
+  switch (key) {
+    case "highlights":
+      return { type: "Highlights", amount: v };
+    case "shadows":
+      return { type: "Shadows", amount: v };
+    case "whites":
+      return { type: "Whites", amount: v };
+    case "blacks":
+      return { type: "Blacks", amount: v };
+    case "brightness":
+      return { type: "Brightness", brightness: v };
+    case "contrast":
+      return { type: "Contrast", contrast: v };
+    case "temperature":
+      return { type: "Temperature", amount: v };
+    case "tint":
+      return { type: "Tint", amount: v };
+    case "vibrance":
+      return { type: "Vibrance", vibrance: v };
+    case "saturation":
+      return { type: "Saturation", saturation: v };
+    case "hue":
+      return { type: "HueRotation", rotation: v };
+    case "invert":
+      return { type: "Invert", alpha: false, invert: true };
+    case "clarity":
+      return { type: "Clarity", amount: v };
+    case "sharpness":
+      return { type: "Convolute", opaque: false, matrix: [0, -v, 0, -v, 1 + 4 * v, -v, 0, -v, 0] };
+    case "noise":
+      return { type: "Noise", noise: Math.round(v * 300) };
+    case "pixelate":
+      return { type: "Pixelate", blocksize: Math.max(1, Math.round(1 + v * 40)) };
+    case "blur":
+      return { type: "Blur", blur: v };
+    case "vignette":
+      return { type: "Vignette", amount: v };
+  }
+}
+function imageEffectsFilterSpecs(state) {
+  const specs = [];
+  const preset = state.preset ? imageFilterPreset(state.preset.id) : void 0;
+  if (preset?.matrix)
+    specs.push({ type: "ColorMatrix", matrix: [...preset.matrix], colorsOnly: true });
+  const adjust = clampAdjust(state.adjust);
+  for (const key of ORDER) {
+    const spec = specFor(key, adjust[key] ?? 0);
+    if (spec) specs.push(spec);
+  }
+  const clip = clampAlphaClip(state.alphaClip);
+  if (clip) specs.push({ type: "ColorMatrix", matrix: alphaClipMatrix(clip), colorsOnly: false });
+  return specs;
+}
+var ORDER;
+var init_specs = __esm({
+  "src/image-effects/specs.ts"() {
+    "use strict";
+    init_clamp();
+    init_presets();
+    init_types();
+    ORDER = [
+      "highlights",
+      "shadows",
+      "whites",
+      "blacks",
+      "brightness",
+      "contrast",
+      "temperature",
+      "tint",
+      "vibrance",
+      "saturation",
+      "hue",
+      "invert",
+      "clarity",
+      "sharpness",
+      "noise",
+      "pixelate",
+      "blur",
+      "vignette"
+    ];
+  }
+});
+
 // src/node.ts
 var node_exports = {};
 __export(node_exports, {
+  IMAGE_FILTER_PRESETS: () => IMAGE_FILTER_PRESETS,
+  imageEffectsFilterSpecs: () => imageEffectsFilterSpecs,
   renderEditorState: () => renderEditorState,
   renderEditorStateBatch: () => renderEditorStateBatch,
   renderMockupState: () => renderMockupState,
@@ -936,14 +1188,19 @@ async function renderEditorStateBatch(states, options = {}) {
 async function renderMockupStateBatch(states, options = {}) {
   return renderBatch(states, options, renderMockupState);
 }
-var import_node, ALLOWED_PROTOCOLS, URL_KEYS;
+var import_node, fabricNode, import_canvas_editor_effects, ALLOWED_PROTOCOLS, URL_KEYS;
 var init_node = __esm({
   "src/node.ts"() {
     import_node = require("fabric/node");
+    fabricNode = __toESM(require("fabric/node"));
+    import_canvas_editor_effects = require("@overtone-art/canvas-editor-effects");
     init_export();
     init_displacement();
     init_text_wrap();
     init_print();
+    init_presets();
+    init_specs();
+    (0, import_canvas_editor_effects.registerEffects)(fabricNode);
     ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "data:"]);
     URL_KEYS = /* @__PURE__ */ new Set(["src", "image"]);
   }
@@ -951,6 +1208,8 @@ var init_node = __esm({
 init_node();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  IMAGE_FILTER_PRESETS,
+  imageEffectsFilterSpecs,
   renderEditorState,
   renderEditorStateBatch,
   renderMockupState,