@pixerate/editor-react 0.78.1 → 0.80.0

package/dist/paint-editor/index.d.cts

@@ -1,6 +1,8 @@
-import { PaintEditorController, PaintEditorState, PaintDirectorOptions, PaintPresence, PaintDirector, PaintEditorOptions, PaintTool, PaintView, SliderControl } from '@pixerate/editor/paint-editor';
+import { PaintEditorController, PaintEditorState, PaintDirectorOptions, PaintPresence, PaintDirector, PaintEditorOptions, PaintTool, PaintView, SliderControl, PaintEffectsToolProviderOptions } from '@pixerate/editor/paint-editor';
 import React__default from 'react';
 import { P as PaintGradientEditorProps } from '../PaintGradientEditorView-CCPCY5Ib.cjs';
+import { EffectProvider } from '@pixerate/editor/effects';
+import { ToolRegistry } from '@pixerate/editor/tools';
 
 interface UsePaintEditorReturn {
     controller: PaintEditorController;
@@ -171,7 +173,8 @@ interface PaintEditorProps {
 }
 /**
  * The paint editor: toolbar, brush library on the left, the canvas, and colour (wheel,
- * harmonies, swatches, mixing pad), wet media, paper and layers on the right.
+ * harmonies, swatches, mixing pad), wet media, paper and layers on the right, and provider effects
+ * when an effects provider is registered.
  */
 declare const PaintEditor: React__default.FC<PaintEditorProps>;
 
@@ -189,4 +192,20 @@ declare const PaintSlider: React__default.FC<{
 /** The gradient paint editor (see `PaintGradientEditorView`). */
 declare const PaintGradientEditor: React__default.FC<PaintGradientEditorProps>;
 
-export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintGradientEditor, PaintGradientEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState };
+interface PaintEffectsPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/** The controller's effects provider, following `setEffectsProvider`. */
+declare function usePaintEffectsProvider(controller: PaintEditorController): EffectProvider | null;
+/** Registers the paint effect tools (`set_paper_effect`, `add_effect_layer`, `apply_effect`, …) while mounted. */
+declare function usePaintEffectsTools(registry: ToolRegistry | null | undefined, controller: PaintEditorController, options?: PaintEffectsToolProviderOptions): void;
+/**
+ * Provider effects in the paint editor: effect paper (a generator over the sheet, multiplied so
+ * the grain shows), effect layers, effect fills and light baked onto the active layer's dried
+ * paint; plus the controls of the effect paper and of an active effect layer. Each change is one
+ * undo step (a slider drag is one). Without a provider it says why nothing can be added.
+ */
+declare const PaintEffectsPanel: React__default.FC<PaintEffectsPanelProps>;
+
+export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintEffectsPanel, type PaintEffectsPanelProps, PaintGradientEditor, PaintGradientEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState, usePaintEffectsProvider, usePaintEffectsTools };

package/dist/paint-editor/index.d.ts

@@ -1,6 +1,8 @@
-import { PaintEditorController, PaintEditorState, PaintDirectorOptions, PaintPresence, PaintDirector, PaintEditorOptions, PaintTool, PaintView, SliderControl } from '@pixerate/editor/paint-editor';
+import { PaintEditorController, PaintEditorState, PaintDirectorOptions, PaintPresence, PaintDirector, PaintEditorOptions, PaintTool, PaintView, SliderControl, PaintEffectsToolProviderOptions } from '@pixerate/editor/paint-editor';
 import React__default from 'react';
 import { P as PaintGradientEditorProps } from '../PaintGradientEditorView-CCPCY5Ib.js';
+import { EffectProvider } from '@pixerate/editor/effects';
+import { ToolRegistry } from '@pixerate/editor/tools';
 
 interface UsePaintEditorReturn {
     controller: PaintEditorController;
@@ -171,7 +173,8 @@ interface PaintEditorProps {
 }
 /**
  * The paint editor: toolbar, brush library on the left, the canvas, and colour (wheel,
- * harmonies, swatches, mixing pad), wet media, paper and layers on the right.
+ * harmonies, swatches, mixing pad), wet media, paper and layers on the right, and provider effects
+ * when an effects provider is registered.
  */
 declare const PaintEditor: React__default.FC<PaintEditorProps>;
 
@@ -189,4 +192,20 @@ declare const PaintSlider: React__default.FC<{
 /** The gradient paint editor (see `PaintGradientEditorView`). */
 declare const PaintGradientEditor: React__default.FC<PaintGradientEditorProps>;
 
-export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintGradientEditor, PaintGradientEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState };
+interface PaintEffectsPanelProps {
+    controller: PaintEditorController;
+    className?: string;
+}
+/** The controller's effects provider, following `setEffectsProvider`. */
+declare function usePaintEffectsProvider(controller: PaintEditorController): EffectProvider | null;
+/** Registers the paint effect tools (`set_paper_effect`, `add_effect_layer`, `apply_effect`, …) while mounted. */
+declare function usePaintEffectsTools(registry: ToolRegistry | null | undefined, controller: PaintEditorController, options?: PaintEffectsToolProviderOptions): void;
+/**
+ * Provider effects in the paint editor: effect paper (a generator over the sheet, multiplied so
+ * the grain shows), effect layers, effect fills and light baked onto the active layer's dried
+ * paint; plus the controls of the effect paper and of an active effect layer. Each change is one
+ * undo step (a slider drag is one). Without a provider it says why nothing can be added.
+ */
+declare const PaintEffectsPanel: React__default.FC<PaintEffectsPanelProps>;
+
+export { BrushPanel, type BrushPanelProps, ColorPanel, type ColorPanelProps, PaintCanvas, type PaintCanvasProps, PaintEditor, type PaintEditorProps, PaintEffectsPanel, type PaintEffectsPanelProps, PaintGradientEditor, PaintGradientEditorProps, PaintLayersPanel, type PaintLayersPanelProps, PaintPresenceLayer, PaintSlider, PaintToolbar, type PaintToolbarProps, PaperPanel, type PaperPanelProps, StickerPanel, type StickerPanelProps, type UsePaintEditorReturn, WetPanel, type WetPanelProps, usePaintDirector, usePaintEditor, usePaintEditorState, usePaintEffectsProvider, usePaintEffectsTools };

package/dist/paint-editor/index.js

@@ -1,6 +1,12 @@
 import {
   PaintGradientEditorView
 } from "../chunk-MO354USR.js";
+import {
+  EffectParameters,
+  EffectsBrowser,
+  useEffectDescription
+} from "../chunk-WOQ3H7KA.js";
+import "../chunk-ZQZAKUUM.js";
 
 // src/paint-editor/usePaintEditor.ts
 import { useMemo, useState, useSyncExternalStore } from "react";
@@ -1209,27 +1215,172 @@ var StickerPanel = ({ controller, className }) => {
 };
 
 // src/paint-editor/PaintEditor.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
+
+// src/paint-editor/PaintEffectsPanel.tsx
+import { useEffect as useEffect3, useRef as useRef6, useState as useState9 } from "react";
+import { createPaintEffectsToolProvider, PAPER_EFFECT_BLENDS } from "@pixerate/editor/paint-editor";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function usePaintEffectsProvider(controller) {
+  const [provider, setProvider] = useState9(controller.effectsProvider);
+  useEffect3(() => {
+    setProvider(controller.effectsProvider);
+    return controller.effects.subscribe(setProvider);
+  }, [controller]);
+  return provider;
+}
+function usePaintEffectsTools(registry, controller, options = {}) {
+  const { id, namespace, readOnly } = options;
+  useEffect3(() => {
+    if (!registry) return;
+    return registry.register(createPaintEffectsToolProvider(controller, { id, namespace, readOnly }));
+  }, [registry, controller, id, namespace, readOnly]);
+}
+function Controls({ provider, effect, name, values, apply }) {
+  const { description, error } = useEffectDescription(provider, effect);
+  const drags = useRef6(/* @__PURE__ */ new Set());
+  if (!provider) return /* @__PURE__ */ jsxs10("p", { className: "text-[11px] text-slate-400", children: [
+    'No effects provider: "',
+    name ?? effect,
+    '" is kept as it was drawn.'
+  ] });
+  if (error) return /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-amber-400", children: error });
+  if (!description) return /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-slate-400", children: "Loading\u2026" });
+  const commit = (gesture) => {
+    if (!gesture || drags.current.has(gesture)) return !gesture;
+    drags.current.add(gesture);
+    return true;
+  };
+  return /* @__PURE__ */ jsx11(
+    EffectParameters,
+    {
+      description,
+      values,
+      onChange: (k, v, gesture) => apply({ [k]: v }, commit(gesture)),
+      onReset: (k) => apply({ [k]: null }, true),
+      onPreset: (v) => apply({ ...v }, true)
+    }
+  );
+}
+var BROWSERS = {
+  paper: { uses: ["generator"], title: "Effect paper" },
+  layer: { uses: ["generator", "overlay", "title"], title: "Effect layer" },
+  fill: { uses: ["generator", "overlay", "title"], title: "Fill the layer" },
+  light: { uses: ["filter"], title: "Light on the paint" }
+};
+var PaintEffectsPanel = ({ controller, className }) => {
+  const state = usePaintEditorState(controller);
+  const provider = usePaintEffectsProvider(controller);
+  const [error, attempt] = useAttempt();
+  const [browse, setBrowse] = useState9(null);
+  const [busy, setBusy] = useState9(false);
+  const paper = controller.getPaperEffect();
+  const activeId = state.document.activeLayerId;
+  const layerEffect = activeId ? controller.getEffectLayer(activeId) : void 0;
+  const active = activeId ? controller.getLayer(activeId) : void 0;
+  const run = (work) => attempt(() => {
+    setBusy(true);
+    return work().finally(() => setBusy(false));
+  });
+  const pick = (id) => {
+    const kind = browse;
+    setBrowse(null);
+    if (kind === "paper") run(() => controller.setPaperEffect(id));
+    else if (kind === "layer") run(() => controller.addEffectLayer(id));
+    else if (kind === "fill") run(() => controller.fillLayerWithEffect(id));
+    else if (kind === "light" && activeId) run(() => controller.applyLightEffect(activeId, id));
+  };
+  const toggle = (b) => setBrowse(browse === b ? null : b);
+  const pixel = active?.type === "pixel";
+  return /* @__PURE__ */ jsxs10("div", { className: `${panel} ${className ?? ""}`, "data-testid": "paint-effects-panel", "aria-busy": busy, children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-1", children: [
+      /* @__PURE__ */ jsx11("span", { className: "flex-1 font-medium text-slate-300", children: "Effects" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button, disabled: !provider, "aria-pressed": browse === "paper", onClick: () => toggle("paper"), children: "Paper\u2026" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button, disabled: !provider, "aria-pressed": browse === "layer", onClick: () => toggle("layer"), children: "Layer\u2026" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button, disabled: !provider || !pixel, "aria-pressed": browse === "fill", onClick: () => toggle("fill"), children: "Fill\u2026" }),
+      /* @__PURE__ */ jsx11("button", { type: "button", className: button, disabled: !provider || !pixel, "aria-pressed": browse === "light", onClick: () => toggle("light"), title: "Bake a light, glow or grade into the active layer's dried paint", children: "Light\u2026" })
+    ] }),
+    !provider && /* @__PURE__ */ jsx11("p", { className: "text-[11px] text-slate-400", children: "No effects provider is registered. Effects in the painting are kept." }),
+    browse && /* @__PURE__ */ jsx11(EffectsBrowser, { provider, uses: BROWSERS[browse].uses, title: BROWSERS[browse].title, onPick: (e) => pick(e.id) }),
+    paper && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1 rounded border border-slate-700 p-1", "data-effect-part": "paper", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs10("span", { className: "flex-1 truncate", children: [
+          "Paper: ",
+          paper.name ?? paper.effect
+        ] }),
+        /* @__PURE__ */ jsx11("button", { type: "button", className: button, "aria-label": "Remove the effect paper", onClick: () => run(() => controller.setPaperEffect(null)), children: "\u2715" })
+      ] }),
+      /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx11("span", { className: "w-14 text-[11px] text-slate-400", children: "Opacity" }),
+        /* @__PURE__ */ jsx11(
+          "input",
+          {
+            type: "range",
+            min: 0,
+            max: 1,
+            step: 0.01,
+            className: "flex-1",
+            "aria-label": "Effect paper opacity",
+            defaultValue: paper.opacity,
+            onPointerUp: (e) => {
+              const opacity = Number(e.currentTarget.value);
+              run(() => controller.updatePaperEffect({ opacity }));
+            },
+            onKeyUp: (e) => {
+              const opacity = Number(e.currentTarget.value);
+              run(() => controller.updatePaperEffect({ opacity }));
+            }
+          },
+          `o${paper.opacity}`
+        )
+      ] }),
+      /* @__PURE__ */ jsxs10("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx11("span", { className: "w-14 text-[11px] text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ jsx11("select", { className: "flex-1 rounded bg-slate-800 px-1 py-0.5 text-[11px]", "aria-label": "Effect paper blend", value: paper.blend, onChange: (e) => {
+          const blend = e.currentTarget.value;
+          run(() => controller.updatePaperEffect({ blend }));
+        }, children: PAPER_EFFECT_BLENDS.map((b) => /* @__PURE__ */ jsx11("option", { value: b, children: b }, b)) })
+      ] }),
+      /* @__PURE__ */ jsx11(Controls, { provider, effect: paper.effect, name: paper.name, values: paper.values, apply: (values, commit) => run(() => controller.updatePaperEffect({ values }, commit)) })
+    ] }),
+    layerEffect && activeId && /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-1 rounded border border-slate-700 p-1", "data-effect-part": "layer", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxs10("span", { className: "flex-1 truncate", children: [
+          "Layer: ",
+          layerEffect.name ?? layerEffect.effect
+        ] }),
+        /* @__PURE__ */ jsx11("button", { type: "button", className: button, title: "Keep the pixels as a plain layer", onClick: () => attempt(() => controller.rasterizeEffectLayer(activeId)), children: "Rasterize" })
+      ] }),
+      /* @__PURE__ */ jsx11(Controls, { provider, effect: layerEffect.effect, name: layerEffect.name, values: layerEffect.values, apply: (values, commit) => run(() => controller.updateEffectLayer(activeId, { values }, commit)) })
+    ] }),
+    /* @__PURE__ */ jsx11(ErrorLine, { error })
+  ] });
+};
+
+// src/paint-editor/PaintEditor.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
-  const [tool, setTool] = useState9("brush");
-  const [tab, setTab] = useState9("color");
-  const [error, setError] = useState9(null);
-  return /* @__PURE__ */ jsxs10("div", { className: `flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className ?? ""}`, style: { height }, "data-testid": "paint-editor", children: [
-    /* @__PURE__ */ jsx11(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex min-h-0 flex-1 gap-2", children: [
-      /* @__PURE__ */ jsx11(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ jsx11(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
-        error && /* @__PURE__ */ jsx11("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
+  const [tool, setTool] = useState10("brush");
+  const [tab, setTab] = useState10("color");
+  const [error, setError] = useState10(null);
+  const effects = usePaintEffectsProvider(controller);
+  const tabs = effects ? ["color", "wet", "paper", "layers", "effects"] : ["color", "wet", "paper", "layers"];
+  return /* @__PURE__ */ jsxs11("div", { className: `flex flex-col gap-2 rounded-xl border border-slate-800 bg-slate-900 p-2 ${className ?? ""}`, style: { height }, "data-testid": "paint-editor", children: [
+    /* @__PURE__ */ jsx12(PaintToolbar, { controller, tool, onToolChange: setTool, fileName }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex min-h-0 flex-1 gap-2", children: [
+      /* @__PURE__ */ jsx12(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx12(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
+        error && /* @__PURE__ */ jsx12("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
-        /* @__PURE__ */ jsx11("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: ["color", "wet", "paper", "layers"].map((t) => /* @__PURE__ */ jsx11("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "wet" ? "Wet" : t === "paper" ? "Paper" : "Layers" }, t)) }),
-        tab === "color" && /* @__PURE__ */ jsx11(ColorPanel, { controller }),
-        tab === "wet" && /* @__PURE__ */ jsx11(WetPanel, { controller }),
-        tab === "paper" && /* @__PURE__ */ jsx11(PaperPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ jsx11(PaintLayersPanel, { controller }),
-        tab === "layers" && /* @__PURE__ */ jsx11(StickerPanel, { controller })
+      /* @__PURE__ */ jsxs11("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
+        /* @__PURE__ */ jsx12("div", { className: "flex gap-1", role: "tablist", "aria-label": "Paint panels", children: tabs.map((t) => /* @__PURE__ */ jsx12("button", { type: "button", role: "tab", "aria-selected": tab === t, className: chip(tab === t), onClick: () => setTab(t), children: t === "color" ? "Colour" : t === "wet" ? "Wet" : t === "paper" ? "Paper" : t === "layers" ? "Layers" : "Effects" }, t)) }),
+        tab === "color" && /* @__PURE__ */ jsx12(ColorPanel, { controller }),
+        tab === "wet" && /* @__PURE__ */ jsx12(WetPanel, { controller }),
+        tab === "paper" && /* @__PURE__ */ jsx12(PaperPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx12(PaintLayersPanel, { controller }),
+        tab === "layers" && /* @__PURE__ */ jsx12(StickerPanel, { controller }),
+        tab === "effects" && effects && /* @__PURE__ */ jsx12(PaintEffectsPanel, { controller })
       ] })
     ] })
   ] });
@@ -1239,6 +1390,7 @@ export {
   ColorPanel,
   PaintCanvas,
   PaintEditor,
+  PaintEffectsPanel,
   PaintGradientEditor,
   PaintLayersPanel,
   PaintPresenceLayer,
@@ -1249,6 +1401,8 @@ export {
   WetPanel,
   usePaintDirector,
   usePaintEditor,
-  usePaintEditorState
+  usePaintEditorState,
+  usePaintEffectsProvider,
+  usePaintEffectsTools
 };
 //# sourceMappingURL=index.js.map