@pixerate/editor-react 0.71.0 → 0.72.0

package/dist/image-editor/index.cjs

@@ -1256,7 +1256,8 @@ var BrushOptionsBar = ({ controller, className }) => {
   (0, import_react7.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react7.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);
@@ -1266,12 +1267,12 @@ var BrushOptionsBar = ({ controller, className }) => {
     }
   };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `flex flex-col gap-2 text-xs text-slate-200 ${className ?? ""}`, "data-testid": "brush-options", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex gap-1", role: "toolbar", "aria-label": "Paint tools", children: import_image_editor8.PAINT_TOOLS.map((t) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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
@@ -1373,6 +1374,41 @@ var BrushOptionsBar = ({ controller, className }) => {
         ] })
       ] })
     ] }),
+    (0, import_image_editor8.isRetouchPaintTool)(tool) && /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", "data-testid": "clone-source", children: (0, import_image_editor8.cloneSourceLabel)(controller) }),
+        cloneSource && /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "flex flex-wrap items-center gap-1", role: "group", "aria-label": choice.label, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "text-slate-400", children: choice.label }),
+        choice.options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(ControlSlider, { spec, value: retouch[spec.id], onChange: (v) => controller.setPaintOptions({ retouch: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2331,7 +2367,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;