feat(tools): add brush controls

commands/tool.ts

@@ -1,4 +1,4 @@
-import type { ToolId } from "@editor/tools";
+import type { BrushSettings, ToolId } from "@editor/tools";
 import type { Command } from "./command";
 import { commandIds } from "./ids";
 
@@ -6,6 +6,8 @@ export type ToolSetActivePayload = {
   tool: ToolId;
 };
 
+export type ToolSetBrushSettingsPayload = Partial<BrushSettings>;
+
 export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
   id: commandIds.toolSetActive,
   name: "Set active tool",
@@ -15,6 +17,7 @@ export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
       editor: {
         ...state.editor,
         tools: {
+          ...state.editor.tools,
           activeTool: payload.tool,
           interactionMode: { type: "tool", tool: payload.tool },
         },
@@ -23,6 +26,27 @@ export const toolSetActiveCommand: Command<ToolSetActivePayload> = {
   },
 };
 
+export const toolSetBrushSettingsCommand: Command<ToolSetBrushSettingsPayload> = {
+  id: commandIds.toolSetBrushSettings,
+  name: "Set brush settings",
+  execute({ state }, payload) {
+    return {
+      ...state,
+      editor: {
+        ...state.editor,
+        tools: {
+          ...state.editor.tools,
+          brush: {
+            color: payload.color ?? state.editor.tools.brush.color,
+            size: clampNumber(payload.size ?? state.editor.tools.brush.size, 1, 200),
+            hardness: clampNumber(payload.hardness ?? state.editor.tools.brush.hardness, 0, 100),
+          },
+        },
+      },
+    };
+  },
+};
+
 export const toolEnterTemporaryPanCommand: Command = {
   id: commandIds.toolEnterTemporaryPan,
   name: "Enter temporary pan",
@@ -54,6 +78,7 @@ export const toolExitTemporaryPanCommand: Command = {
       editor: {
         ...state.editor,
         tools: {
+          ...state.editor.tools,
           activeTool: mode.previousTool,
           interactionMode: { type: "tool", tool: mode.previousTool },
         },
@@ -62,4 +87,9 @@ export const toolExitTemporaryPanCommand: Command = {
   },
 };
 
-export const toolCommands = [toolSetActiveCommand, toolEnterTemporaryPanCommand, toolExitTemporaryPanCommand] satisfies Command<unknown>[];
+export const toolCommands = [toolSetActiveCommand, toolSetBrushSettingsCommand, toolEnterTemporaryPanCommand, toolExitTemporaryPanCommand] satisfies Command<unknown>[];
+
+function clampNumber(value: number, min: number, max: number) {
+  if (!Number.isFinite(value)) return min;
+  return Math.max(min, Math.min(max, value));
+}