@pixerate/editor-react 0.61.0 → 0.63.0

package/dist/image-editor/index.cjs

@@ -1020,7 +1020,7 @@ var BrushOptionsBar = ({ controller, className }) => {
   (0, import_react6.useEffect)(() => controller.subscribe(() => setTick((n) => n + 1)), [controller]);
   const [error, setError] = (0, import_react6.useState)(null);
   const state = controller.getState();
-  const { brush, foreground, background } = state.paint;
+  const { brush, foreground, background, mixer, mixerLoad } = state.paint;
   const attempt = (fn) => {
     try {
       setError(null);
@@ -1081,6 +1081,62 @@ var BrushOptionsBar = ({ controller, className }) => {
       },
       spec.id
     )),
+    state.activeTool === "mixer" && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col gap-2 border-t border-slate-800 pt-2", role: "group", "aria-label": "Mixer Brush", "data-testid": "mixer-options", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "span",
+          {
+            "aria-label": "Brush load",
+            title: mixerLoad.reservoir ? `Loaded ${(0, import_image_editor7.rgbUnitToHex)(mixerLoad.reservoir)}, ${Math.round(mixerLoad.amount * 100)}% left` : "Unloaded",
+            className: "h-6 w-6 rounded border border-slate-700",
+            style: { background: mixerLoad.reservoir ? (0, import_image_editor7.rgbUnitToHex)(mixerLoad.reservoir) : "transparent" }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", title: "Fill the reservoir with the foreground colour", className: chip(false), onClick: () => controller.loadMixerBrush(), children: "Load brush" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", title: "Empty the picked-up colour", className: chip(false), onClick: () => controller.cleanMixerBrush(), children: "Clean brush" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex gap-1", role: "group", "aria-label": "Mixing", children: import_image_editor7.MIXER_MIXING_OPTIONS.map((m) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        "button",
+        {
+          type: "button",
+          "aria-pressed": mixer.mixing === m.id,
+          title: m.title,
+          className: chip(mixer.mixing === m.id),
+          onClick: () => controller.setPaintOptions({ mixer: { mixing: m.id } }),
+          children: m.label
+        },
+        m.id
+      )) }),
+      import_image_editor7.MIXER_OPTION_CONTROLS.map((spec) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ControlSlider, { spec, value: mixer[spec.id], onChange: (v) => controller.setPaintOptions({ mixer: { [spec.id]: v } }) }, spec.id)),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Load the brush after each stroke",
+              checked: mixer.loadEachStroke,
+              onChange: (e) => controller.setPaintOptions({ mixer: { loadEachStroke: e.target.checked } }),
+              className: "accent-indigo-500"
+            }
+          ),
+          "Load each stroke"
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              "aria-label": "Clean the brush after each stroke",
+              checked: mixer.cleanEachStroke,
+              onChange: (e) => controller.setPaintOptions({ mixer: { cleanEachStroke: e.target.checked } }),
+              className: "accent-indigo-500"
+            }
+          ),
+          "Clean each stroke"
+        ] })
+      ] })
+    ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap gap-3 text-slate-300", role: "group", "aria-label": "Pressure", children: [
       /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1.5", children: [
         /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(