@pixerate/editor-react 0.69.0 → 0.70.0

package/dist/paint-editor/index.js

@@ -477,8 +477,19 @@ var PaintToolbar = ({ controller, tool, onToolChange, fileName = "painting", cla
 
 // src/paint-editor/BrushPanel.tsx
 import { useMemo as useMemo3, useRef as useRef4, useState as useState4 } from "react";
-import { BRUSH_ROTATIONS, BRUSH_SLIDERS, downloadBytes as downloadBytes2, patchPath, readPath } from "@pixerate/editor/paint-editor";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+import {
+  BLEND_MENU_GROUPS,
+  BRUSH_ROTATIONS,
+  BRUSH_SLIDERS,
+  brushEngineControls,
+  brushLoadColor,
+  downloadBytes as downloadBytes2,
+  multiColorSliders,
+  patchBrushValue,
+  patchPath,
+  readPath
+} from "@pixerate/editor/paint-editor";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, className }) => {
   const state = usePaintEditorState(controller);
   const [error, attempt] = useAttempt();
@@ -492,6 +503,10 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, brushes, paper, thumbnailWidth, thumbnailHeight]
   );
+  const engine = brushEngineControls(brush);
+  const mc = brush.behavior.multicolor;
+  const carried = brushLoadColor(state.mixerLoad);
+  const setColors = (colors) => controller.setBrush({ behavior: { multicolor: { colors } } });
   const slug = (name) => name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60) || "brush";
   return /* @__PURE__ */ jsxs4("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
     /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ jsxs4(
@@ -523,6 +538,68 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
       /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx4("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
         " Pressure \u2192 opacity"
+      ] }),
+      brush.engine === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ jsx4("select", { "aria-label": "Brush blend", value: brush.tip.blend, onChange: (e) => controller.setBrush({ tip: { blend: e.target.value } }), className: "rounded bg-slate-800 px-1 py-0.5", children: BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx4("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx4("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
+      ] })
+    ] }),
+    engine && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
+      /* @__PURE__ */ jsx4("span", { className: "font-medium text-slate-300", children: engine.title }),
+      engine.sliders.map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path)),
+      engine.mixingPath && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Mixing" }),
+        /* @__PURE__ */ jsxs4(
+          "select",
+          {
+            "aria-label": "Brush mixing",
+            value: engine.mixingPath === "blender.mixing" ? brush.blender.mixing : engine.mixingPath === "smudge.mixing" ? brush.smudge.mixing : brush.behavior.mixing,
+            onChange: (e) => controller.setBrush(patchBrushValue(brush, engine.mixingPath, e.target.value)),
+            className: "rounded bg-slate-800 px-1 py-0.5",
+            children: [
+              /* @__PURE__ */ jsx4("option", { value: "pigment", children: "Pigment" }),
+              /* @__PURE__ */ jsx4("option", { value: "rgb", children: "RGB" })
+            ]
+          }
+        )
+      ] }),
+      engine.dirty && /* @__PURE__ */ jsxs4("label", { className: "flex items-center gap-2", title: "Keep the colour the brush picked up for the next stroke (needs Pick-up above 0)", children: [
+        /* @__PURE__ */ jsx4("input", { type: "checkbox", "aria-label": "Dirty brush", checked: brush.behavior.dirty, onChange: (e) => controller.setBrush({ behavior: { dirty: e.target.checked } }) }),
+        " Dirty brush"
+      ] }),
+      engine.multicolor && /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-1.5", "data-testid": "multicolor", children: [
+        /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Multi-colour" }),
+          /* @__PURE__ */ jsxs4("select", { "aria-label": "Multi-colour", value: mc.mode, onChange: (e) => controller.setBrush({ behavior: { multicolor: { mode: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
+            /* @__PURE__ */ jsx4("option", { value: "off", children: "Off" }),
+            /* @__PURE__ */ jsx4("option", { value: "tip", children: "Across the tip" }),
+            /* @__PURE__ */ jsx4("option", { value: "dab", children: "Per dab" })
+          ] })
+        ] }),
+        mc.mode !== "off" && /* @__PURE__ */ jsxs4(Fragment2, { children: [
+          /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", "aria-label": "Multi-colour colours", children: [
+            mc.colors.map((col, i) => /* @__PURE__ */ jsxs4("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ jsx4("input", { type: "color", "aria-label": `Multi-colour ${i + 1}`, value: col, onChange: (e) => setColors(mc.colors.map((x, j) => j === i ? e.target.value : x)), className: "h-5 w-6 rounded bg-transparent" }),
+              /* @__PURE__ */ jsx4("button", { type: "button", "aria-label": `Remove multi-colour ${i + 1}`, className: "px-0.5 text-slate-500 hover:text-white", onClick: () => setColors(mc.colors.filter((_, j) => j !== i)), children: "\xD7" })
+            ] }, i)),
+            mc.colors.length < 8 && /* @__PURE__ */ jsx4("button", { type: "button", className: button, "aria-label": "Add multi-colour", onClick: () => setColors([...mc.colors.length ? mc.colors : [state.color, state.secondaryColor], state.color].slice(0, 8)), children: "+" }),
+            mc.colors.length < 2 && /* @__PURE__ */ jsx4("span", { className: "text-[10px] text-slate-500", children: "Uses the paint and second colours" })
+          ] }),
+          mc.mode === "dab" && /* @__PURE__ */ jsxs4("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Order" }),
+            /* @__PURE__ */ jsxs4("select", { "aria-label": "Colour order", value: mc.order, onChange: (e) => controller.setBrush({ behavior: { multicolor: { order: e.target.value } } }), className: "rounded bg-slate-800 px-1 py-0.5", children: [
+              /* @__PURE__ */ jsx4("option", { value: "sequence", children: "In order" }),
+              /* @__PURE__ */ jsx4("option", { value: "random", children: "Random" })
+            ] })
+          ] }),
+          multiColorSliders(mc.mode).map((c) => /* @__PURE__ */ jsx4(PaintSlider, { control: c, value: readPath(brush, c.path), onChange: (v) => controller.setBrush(patchPath(brush, c.path, v)) }, c.path))
+        ] })
+      ] }),
+      engine.load && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx4("span", { className: "text-slate-400", children: "Carries" }),
+        /* @__PURE__ */ jsx4("span", { "aria-label": "Brush load", title: carried ?? "Clean", className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: carried ?? "transparent" } }),
+        brush.engine === "mixer" && /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
+        /* @__PURE__ */ jsx4("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
       ] })
     ] }),
     /* @__PURE__ */ jsxs4("div", { className: "flex flex-wrap items-center gap-1", children: [
@@ -598,7 +675,9 @@ import {
   HARMONY_KINDS,
   MIXING_PAD_HEIGHT,
   MIXING_PAD_WIDTH,
+  PAD_SAMPLE_SIZES,
   hsvToRgb,
+  padSampleRadius,
   hueToWheel,
   parseHexColor,
   renderColorWheel,
@@ -614,6 +693,9 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
   const [wheel, setWheel] = useState5("ryb");
   const [kind, setKind] = useState5("complementary");
   const [padTool, setPadTool] = useState5("paint");
+  const [sample, setSample] = useState5(3);
+  const [parts, setParts] = useState5([1, 1]);
+  const [padName, setPadName] = useState5("");
   const padPoints = useRef5(null);
   const ring = useMemo5(() => renderColorWheel(wheelSize, wheel), [wheelSize, wheel]);
   const color = state.color;
@@ -725,7 +807,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           onPointerDown: (e) => {
             const p = padPoint(e);
             if (padTool === "pick") {
-              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true }));
+              attempt(() => controller.mixingPadPick(p.x, p.y, { setColor: true, radius: padSampleRadius(sample) }));
               return;
             }
             padPoints.current = [p];
@@ -739,7 +821,44 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           },
           children: /* @__PURE__ */ jsx6(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${MIXING_PAD_WIDTH} / ${MIXING_PAD_HEIGHT}` } })
         }
-      )
+      ),
+      /* @__PURE__ */ jsx6("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ jsxs6("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("span", { className: "text-slate-400", children: "Sample" }),
+        /* @__PURE__ */ jsx6("select", { "aria-label": "Pick sample size", value: sample, onChange: (e) => setSample(Number(e.target.value)), className: "rounded bg-slate-800 px-1 py-0.5", children: PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ jsx6("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
+      ] }) }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
+        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Paint colour parts", min: 0, max: 20, value: parts[0], onChange: (e) => setParts([Number(e.target.value), parts[1]]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx6("span", { className: "text-slate-500", children: ":" }),
+        /* @__PURE__ */ jsx6("input", { type: "number", "aria-label": "Second colour parts", min: 0, max: 20, value: parts[1], onChange: (e) => setParts([parts[0], Number(e.target.value)]), className: "w-10 rounded bg-slate-800 px-1 py-0.5" }),
+        /* @__PURE__ */ jsx6("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
+        /* @__PURE__ */ jsx6(
+          "button",
+          {
+            type: "button",
+            className: button,
+            title: "Mix the paint and second colours in these parts on the pad, and use the mix",
+            onClick: () => attempt(
+              () => controller.mixOnPad(
+                [
+                  { color, parts: parts[0] },
+                  { color: state.secondaryColor, parts: parts[1] }
+                ],
+                { setColor: true }
+              )
+            ),
+            children: "Mix"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs6("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("input", { value: padName, placeholder: "Pad name", "aria-label": "Pad name", onChange: (e) => setPadName(e.target.value), className: "w-24 rounded bg-slate-800 px-1.5 py-0.5" }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
+      ] }),
+      state.savedMixingPads.length > 0 && /* @__PURE__ */ jsx6("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ jsxs6("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ jsx6("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
+        /* @__PURE__ */ jsx6("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
+      ] }, p.id)) })
     ] }),
     /* @__PURE__ */ jsx6(ErrorLine, { error })
   ] });
@@ -747,7 +866,7 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
 
 // src/paint-editor/PaintLayersPanel.tsx
 import { useState as useState6 } from "react";
-import { BLEND_MENU_GROUPS } from "@pixerate/editor/paint-editor";
+import { BLEND_MENU_GROUPS as BLEND_MENU_GROUPS2 } from "@pixerate/editor/paint-editor";
 import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 function siblingIndex(layers, l) {
   const sibs = layers.filter((x) => x.parentId === l.parentId).reverse();
@@ -844,7 +963,7 @@ var PaintLayersPanel = ({ controller, className }) => {
         /* @__PURE__ */ jsx7("span", { className: "w-14 text-slate-400", children: "Blend" }),
         /* @__PURE__ */ jsxs7("select", { "aria-label": "Layer blend", value: active.blend, onChange: (e) => attempt(() => controller.updateLayer(active.id, { blend: e.target.value })), className: "flex-1 rounded bg-slate-800 px-1 py-0.5", children: [
           active.type === "group" && /* @__PURE__ */ jsx7("option", { value: "pass-through", children: "Pass through" }),
-          BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ jsx7("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
+          BLEND_MENU_GROUPS2.map((g) => /* @__PURE__ */ jsx7("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ jsx7("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label))
         ] })
       ] }),
       /* @__PURE__ */ jsxs7("div", { className: "flex gap-1", children: [