@pixerate/editor-react 0.68.1 → 0.70.0

package/dist/paint-editor/index.cjs

@@ -25,9 +25,11 @@ __export(paint_editor_exports, {
   PaintCanvas: () => PaintCanvas,
   PaintEditor: () => PaintEditor,
   PaintLayersPanel: () => PaintLayersPanel,
+  PaintPresenceLayer: () => PaintPresenceLayer,
   PaintSlider: () => PaintSlider,
   PaintToolbar: () => PaintToolbar,
   PaperPanel: () => PaperPanel,
+  usePaintDirector: () => usePaintDirector,
   usePaintEditor: () => usePaintEditor,
   usePaintEditorState: () => usePaintEditorState
 });
@@ -48,12 +50,19 @@ function usePaintEditorState(controller) {
     () => controller.getState()
   );
 }
+function usePaintDirector(controller, options = {}) {
+  const [value] = (0, import_react.useState)(() => {
+    const presence = new import_paint_editor.PaintPresence();
+    return { presence, director: new import_paint_editor.PaintDirector(controller, presence, options) };
+  });
+  return value;
+}
 
 // src/paint-editor/PaintCanvas.tsx
 var import_react2 = require("react");
 var import_paint_editor2 = require("@pixerate/editor/paint-editor");
 var import_jsx_runtime = require("react/jsx-runtime");
-var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount = true, onError, className }) => {
+var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount = true, onError, presence, className }) => {
   const state = usePaintEditorState(controller);
   const viewport = (0, import_react2.useRef)(null);
   const canvas = (0, import_react2.useRef)(null);
@@ -168,6 +177,7 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
           predicted.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: predicted.map((p) => `${p.x},${p.y}`).join(" "), fill: "none", stroke: state.color, strokeOpacity: 0.5, strokeWidth: Math.max(1, state.brush.tip.size / 2), strokeLinecap: "round" })
         ] }),
         state.guides.references.filter((r) => r.visible).map((r) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ReferencePanel, { controller, id: r.id }, r.id)),
+        presence && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaintPresenceLayer, { presence, view: state.view, canvas: doc, viewport: size }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute bottom-1 right-2 text-[10px] text-slate-500 pointer-events-none", "data-testid": "paint-view-status", children: [
           Math.round(state.view.zoom * 100),
           "% \xB7 ",
@@ -179,6 +189,16 @@ var PaintCanvas = ({ controller, tool = "brush", showGuides = true, fitOnMount =
     }
   );
 };
+var PaintPresenceLayer = ({ presence, view, canvas, viewport }) => {
+  const { actors } = (0, import_react2.useSyncExternalStore)(presence.subscribe, presence.getState, presence.getState);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "pointer-events-none absolute inset-0 overflow-hidden", "data-paint-presence": "", "aria-hidden": "true", children: actors.map((a) => {
+    const p = (0, import_paint_editor2.documentToScreen)(view, canvas, viewport, a.x, a.y);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute", style: { left: p.x, top: p.y }, "data-actor": a.id, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "18", height: "20", viewBox: "0 0 18 20", className: "drop-shadow-md", style: { transform: a.pressed ? "scale(0.85)" : void 0, transformOrigin: "0 0" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M0 0 L0 15 L4.5 10.8 L7.6 17 L10.2 15.8 L7.2 9.7 L13.5 9.4 Z", fill: a.color, stroke: "white", strokeWidth: "1.4", strokeLinejoin: "round" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "absolute left-4 top-4 w-max max-w-[240px] rounded-md px-2 py-0.5 text-[11px] font-semibold text-white shadow", style: { background: a.color }, children: a.message ?? a.name })
+    ] }, a.id);
+  }) });
+};
 var ReferencePanel = ({ controller, id }) => {
   const state = usePaintEditorState(controller);
   const ref = state.guides.references.find((r) => r.id === id);
@@ -501,6 +521,10 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [controller, brushes, paper, thumbnailWidth, thumbnailHeight]
   );
+  const engine = (0, import_paint_editor4.brushEngineControls)(brush);
+  const mc = brush.behavior.multicolor;
+  const carried = (0, import_paint_editor4.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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: `${panel} ${className ?? ""}`, "data-testid": "brush-panel", children: [
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "grid grid-cols-2 gap-1", role: "listbox", "aria-label": "Brushes", children: brushes.map((b) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -532,6 +556,68 @@ var BrushPanel = ({ controller, thumbnailWidth = 112, thumbnailHeight = 32, clas
       /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("input", { type: "checkbox", checked: brush.tip.pressureOpacity, onChange: (e) => controller.setBrush({ tip: { pressureOpacity: e.target.checked } }) }),
         " Pressure \u2192 opacity"
+      ] }),
+      brush.engine === "dab" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Blend" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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: import_paint_editor4.BLEND_MENU_GROUPS.map((g) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("optgroup", { label: g.label, children: g.modes.map((m) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: m.id, title: m.description, children: m.label }, m.id)) }, g.label)) })
+      ] })
+    ] }),
+    engine && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "brush-engine", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-medium text-slate-300", children: engine.title }),
+      engine.sliders.map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor4.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor4.patchPath)(brush, c.path, v)) }, c.path)),
+      engine.mixingPath && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Mixing" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          "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((0, import_paint_editor4.patchBrushValue)(brush, engine.mixingPath, e.target.value)),
+            className: "rounded bg-slate-800 px-1 py-0.5",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "pigment", children: "Pigment" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "rgb", children: "RGB" })
+            ]
+          }
+        )
+      ] }),
+      engine.dirty && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col gap-1.5", "data-testid": "multicolor", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Multi-colour" }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "off", children: "Off" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "tip", children: "Across the tip" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "dab", children: "Per dab" })
+          ] })
+        ] }),
+        mc.mode !== "off" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", "aria-label": "Multi-colour colours", children: [
+            mc.colors.map((col, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-[10px] text-slate-500", children: "Uses the paint and second colours" })
+          ] }),
+          mc.mode === "dab" && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("label", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Order" }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("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__ */ (0, import_jsx_runtime4.jsx)("option", { value: "sequence", children: "In order" }),
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: "random", children: "Random" })
+            ] })
+          ] }),
+          (0, import_paint_editor4.multiColorSliders)(mc.mode).map((c) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(PaintSlider, { control: c, value: (0, import_paint_editor4.readPath)(brush, c.path), onChange: (v) => controller.setBrush((0, import_paint_editor4.patchPath)(brush, c.path, v)) }, c.path))
+        ] })
+      ] }),
+      engine.load && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-slate-400", children: "Carries" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => controller.loadMixerBrush(), children: "Load" }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("button", { type: "button", className: button, onClick: () => controller.cleanMixerBrush(brush.engine === "mixer"), children: "Clean" })
       ] })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
@@ -611,6 +697,9 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
   const [wheel, setWheel] = (0, import_react7.useState)("ryb");
   const [kind, setKind] = (0, import_react7.useState)("complementary");
   const [padTool, setPadTool] = (0, import_react7.useState)("paint");
+  const [sample, setSample] = (0, import_react7.useState)(3);
+  const [parts, setParts] = (0, import_react7.useState)([1, 1]);
+  const [padName, setPadName] = (0, import_react7.useState)("");
   const padPoints = (0, import_react7.useRef)(null);
   const ring = (0, import_react7.useMemo)(() => (0, import_paint_editor6.renderColorWheel)(wheelSize, wheel), [wheelSize, wheel]);
   const color = state.color;
@@ -722,7 +811,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: (0, import_paint_editor6.padSampleRadius)(sample) }));
               return;
             }
             padPoints.current = [p];
@@ -736,7 +825,44 @@ var ColorPanel = ({ controller, wheelSize = 168, mixingPad = true, className })
           },
           children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PixelCanvas, { pixels: pad, label: "Mixing pad pixels", className: "w-full rounded", style: { aspectRatio: `${import_paint_editor6.MIXING_PAD_WIDTH} / ${import_paint_editor6.MIXING_PAD_HEIGHT}` } })
         }
-      )
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex flex-wrap items-center gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("label", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-400", children: "Sample" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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: import_paint_editor6.PAD_SAMPLE_SIZES.map((n) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: n, children: n === 1 ? "1 px" : `${n}\xD7${n}` }, n)) })
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: color } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "text-slate-500", children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("span", { className: "h-4 w-4 rounded ring-1 ring-slate-700", style: { background: state.secondaryColor } }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "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__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-wrap items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("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__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, onClick: () => attempt(() => (controller.saveMixingPad(padName || void 0), setPadName(""))), children: "Keep pad" })
+      ] }),
+      state.savedMixingPads.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "flex flex-col gap-0.5", "aria-label": "Kept pads", children: state.savedMixingPads.map((p) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("li", { className: "flex items-center gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: `${button} flex-1 text-left`, onClick: () => attempt(() => controller.loadMixingPad(p.id)), children: p.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: button, "aria-label": `Remove ${p.name}`, onClick: () => attempt(() => controller.removeMixingPad(p.id)), children: "\xD7" })
+      ] }, p.id)) })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorLine, { error })
   ] });
@@ -856,7 +982,7 @@ var PaintLayersPanel = ({ controller, className }) => {
 // src/paint-editor/PaintEditor.tsx
 var import_react9 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var PaintEditor = ({ controller, fileName, height = 720, className }) => {
+var PaintEditor = ({ controller, fileName, height = 720, presence, className }) => {
   const [tool, setTool] = (0, import_react9.useState)("brush");
   const [tab, setTab] = (0, import_react9.useState)("color");
   const [error, setError] = (0, import_react9.useState)(null);
@@ -865,7 +991,7 @@ var PaintEditor = ({ controller, fileName, height = 720, className }) => {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-h-0 flex-1 gap-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BrushPanel, { controller, className: "w-60 shrink-0 overflow-y-auto pr-1" }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintCanvas, { controller, tool, onError: setError, className: "flex-1 rounded-lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(PaintCanvas, { controller, tool, onError: setError, presence, className: "flex-1 rounded-lg" }),
         error && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { role: "alert", className: "mt-1 text-[11px] text-rose-400", children: error })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex w-64 shrink-0 flex-col gap-2 overflow-y-auto pr-1", children: [
@@ -884,9 +1010,11 @@ var PaintEditor = ({ controller, fileName, height = 720, className }) => {
   PaintCanvas,
   PaintEditor,
   PaintLayersPanel,
+  PaintPresenceLayer,
   PaintSlider,
   PaintToolbar,
   PaperPanel,
+  usePaintDirector,
   usePaintEditor,
   usePaintEditorState
 });