@pixerate/editor-react 0.71.0 → 0.72.0

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

@@ -201,6 +201,9 @@ interface BrushOptionsBarProps {
  * smoothing, pressure toggles, the foreground and background colours (D resets, X swaps) and
  * Edit › Fill / Clear on the active layer. With the Mixer Brush: its load (Load brush / Clean
  * brush), Wet / Load / Mix, load and clean each stroke, and the RGB / Pigment mixing toggle.
+ * With a retouching tool: the clone source (Alt-click the canvas to set it), Sample, the Spot
+ * Healing type, the tone Range, Exposure / Strength and the Aligned / Protect tones / Vibrance
+ * toggles that tool uses.
  * Shortcuts are handled by `handlePaintShortcut` in the editor.
  */
 declare const BrushOptionsBar: React__default.FC<BrushOptionsBarProps>;

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

@@ -201,6 +201,9 @@ interface BrushOptionsBarProps {
  * smoothing, pressure toggles, the foreground and background colours (D resets, X swaps) and
  * Edit › Fill / Clear on the active layer. With the Mixer Brush: its load (Load brush / Clean
  * brush), Wet / Load / Mix, load and clean each stroke, and the RGB / Pigment mixing toggle.
+ * With a retouching tool: the clone source (Alt-click the canvas to set it), Sample, the Spot
+ * Healing type, the tone Range, Exposure / Strength and the Aligned / Protect tones / Vibrance
+ * toggles that tool uses.
  * Shortcuts are handled by `handlePaintShortcut` in the editor.
  */
 declare const BrushOptionsBar: React__default.FC<BrushOptionsBarProps>;

package/dist/image-editor/index.js

@@ -14,7 +14,7 @@ import {
   TypeOptionsBar,
   useImageEditor,
   useImageHistogram
-} from "../chunk-63FQB5BT.js";
+} from "../chunk-YAFNCBDA.js";
 export {
   AdjustmentLayersPanel,
   BrushOptionsBar,

package/dist/index.cjs

@@ -4836,7 +4836,8 @@ var BrushOptionsBar = ({ controller, className }) => {
   (0, import_react40.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react40.useState)(null);
   const state = controller.getState();
-  const { brush, foreground, background, mixer, mixerLoad } = state.paint;
+  const { brush, foreground, background, mixer, mixerLoad, retouch, cloneSource } = state.paint;
+  const tool = state.activeTool;
   const attempt = (fn) => {
     try {
       setError(null);
@@ -4846,12 +4847,12 @@ var BrushOptionsBar = ({ controller, className }) => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor8.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor8.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "button",
       {
         type: "button",
         "aria-pressed": state.activeTool === t.id,
-        title: `${t.label} (${t.shortcut})`,
+        title: t.shortcut ? `${t.label} (${t.shortcut})` : t.label,
         className: chip(state.activeTool === t.id),
         onClick: () => controller.setTool(t.id),
         children: t.label
@@ -4953,6 +4954,41 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
+    (0, import_image_editor8.isRetouchPaintTool)(tool) && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Retouch options", "data-testid": "retouch-options", children: [
+      (tool === "clone" || tool === "heal") && /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-slate-400", "data-testid": "clone-source", children: (0, import_image_editor8.cloneSourceLabel)(controller) }),
+        cloneSource && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
+      ] }),
+      import_image_editor8.RETOUCH_CHOICES.filter((c) => c.tools.includes(tool)).map((choice) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-slate-400", children: choice.label }),
+        choice.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": retouch[choice.id] === o.id,
+            title: o.title,
+            className: chip(retouch[choice.id] === o.id),
+            onClick: () => (0, import_image_editor8.setRetouchChoice)(controller, choice.id, o.id),
+            children: o.label
+          },
+          o.id
+        ))
+      ] }, choice.id)),
+      import_image_editor8.RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: import_image_editor8.RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            "aria-label": t.label,
+            checked: retouch[t.id],
+            onChange: (e) => controller.setPaintOptions({ retouch: { [t.id]: e.target.checked } }),
+            className: "accent-indigo-500"
+          }
+        ),
+        t.label
+      ] }, t.id)) })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
@@ -5911,7 +5947,7 @@ var ImageEditor = ({
     } catch {
     }
     const [first] = paintSamples(e);
-    setPaintError(paintGestureRef.current.down(first));
+    setPaintError(paintGestureRef.current.down({ ...first, altKey: e.altKey }));
   };
   const handlePaintPointerMove = (e) => {
     if (handleTransformPointerMove(e)) return;