@pixerate/editor-react 0.71.0 → 0.72.0

package/dist/{chunk-63FQB5BT.js → chunk-YAFNCBDA.js}

@@ -1254,7 +1254,19 @@ var LayersPanel = ({ controller, thumbnailSize = 32, psd = true, psdFileName = "
 
 // src/image-editor/BrushOptionsBar.tsx
 import { useEffect as useEffect6, useState as useState7 } from "react";
-import { BRUSH_OPTION_CONTROLS, MIXER_MIXING_OPTIONS, MIXER_OPTION_CONTROLS, PAINT_TOOLS, rgbUnitToHex } from "@pixerate/editor/image-editor";
+import {
+  BRUSH_OPTION_CONTROLS,
+  MIXER_MIXING_OPTIONS,
+  MIXER_OPTION_CONTROLS,
+  PAINT_TOOLS,
+  RETOUCH_CHOICES,
+  RETOUCH_OPTION_CONTROLS,
+  RETOUCH_TOGGLES,
+  cloneSourceLabel,
+  isRetouchPaintTool,
+  rgbUnitToHex,
+  setRetouchChoice
+} from "@pixerate/editor/image-editor";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var chip = (on) => `px-2 py-1 rounded text-[11px] ${on ? "bg-indigo-600 text-white" : "bg-slate-800 text-slate-300 hover:text-white"}`;
 var BrushOptionsBar = ({ controller, className }) => {
@@ -1262,7 +1274,8 @@ var BrushOptionsBar = ({ controller, className }) => {
   useEffect6(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = useState7(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);
@@ -1272,12 +1285,12 @@ var BrushOptionsBar = ({ controller, className }) => {
     }
   };
   return /* @__PURE__ */ jsxs7("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ jsx7("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-1", role: "toolbar", "aria-label": "Paint tools", children: PAINT_TOOLS.map((t) => /* @__PURE__ */ jsx7(
       "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
@@ -1379,6 +1392,41 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
+    isRetouchPaintTool(tool) && /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", "data-testid": "clone-source", children: cloneSourceLabel(controller) }),
+        cloneSource && /* @__PURE__ */ jsx7("button", { type: "button", title: "Forget the source point", className: chip(false), onClick: () => controller.setCloneSource(null), children: "Clear source" })
+      ] }),
+      RETOUCH_CHOICES.filter((c) => c.tools.includes(tool)).map((choice) => /* @__PURE__ */ jsxs7("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
+        /* @__PURE__ */ jsx7("span", { className: "text-slate-400", children: choice.label }),
+        choice.options.map((o) => /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": retouch[choice.id] === o.id,
+            title: o.title,
+            className: chip(retouch[choice.id] === o.id),
+            onClick: () => setRetouchChoice(controller, choice.id, o.id),
+            children: o.label
+          },
+          o.id
+        ))
+      ] }, choice.id)),
+      RETOUCH_OPTION_CONTROLS.filter((c) => c.tools.includes(tool)).map((spec) => /* @__PURE__ */ jsx7(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ jsx7("div", { className: "flex flex-wrap gap-3 text-slate-300", children: RETOUCH_TOGGLES.filter((t) => t.tools.includes(tool)).map((t) => /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsxs7("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ jsxs7("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ jsx7(
@@ -2347,7 +2395,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;
@@ -3641,4 +3689,4 @@ export {
   TypeOptionsBar,
   ImageEditor
 };
-//# sourceMappingURL=chunk-63FQB5BT.js.map
+//# sourceMappingURL=chunk-YAFNCBDA.js.map