feat: add chroma key tool and settings, including UI components and controls

commands/tool.ts

@@ -3,7 +3,7 @@ import type { Vec2D } from "@core/geometry";
 import type { LayerId, ArtboardId, AssetId } from "@core/id";
 import type { Layer } from "@core/layer";
 import type { MaskViewMode } from "@editor/state";
-import type { BrushSettings, ToolId } from "@editor/tools";
+import type { BrushSettings, ChromaKeySettings, ToolId } from "@editor/tools";
 import type { Command } from "./command";
 import { commandIds } from "./ids";
 
@@ -13,6 +13,8 @@ export type ToolSetActivePayload = {
 
 export type ToolSetBrushSettingsPayload = Partial<BrushSettings>;
 
+export type ToolSetChromaKeySettingsPayload = Partial<ChromaKeySettings>;
+
 export type ToolSetBrushPreviewPayload = { position: Vec2D } | undefined;
 
 export type ToolSetBrushStrokePreviewPayload =
@@ -73,6 +75,31 @@ export const toolSetBrushSettingsCommand: Command<ToolSetBrushSettingsPayload> =
   },
 };
 
+export const toolSetChromaKeySettingsCommand: Command<ToolSetChromaKeySettingsPayload> = {
+  id: commandIds.toolSetChromaKeySettings,
+  name: "Set chroma key settings",
+  execute({ state }, payload) {
+    return {
+      ...state,
+      editor: {
+        ...state.editor,
+        tools: {
+          ...state.editor.tools,
+          chromaKey: {
+            color: payload.color ?? state.editor.tools.chromaKey.color,
+            tolerance: clampNumber(payload.tolerance ?? state.editor.tools.chromaKey.tolerance, 0, 255),
+            softness: clampNumber(payload.softness ?? state.editor.tools.chromaKey.softness, 0, 255),
+            feather: clampNumber(payload.feather ?? state.editor.tools.chromaKey.feather, 0, 20),
+            choke: clampNumber(payload.choke ?? state.editor.tools.chromaKey.choke, -20, 20),
+            despeckle: clampNumber(payload.despeckle ?? state.editor.tools.chromaKey.despeckle, 0, 20),
+            spill: clampNumber(payload.spill ?? state.editor.tools.chromaKey.spill, 0, 100),
+          },
+        },
+      },
+    };
+  },
+};
+
 export const toolSetBrushPreviewCommand: Command<ToolSetBrushPreviewPayload> = {
   id: commandIds.toolSetBrushPreview,
   name: "Set brush preview",
@@ -222,6 +249,7 @@ export const toolExitTemporaryPanCommand: Command = {
 export const toolCommands = [
   toolSetActiveCommand,
   toolSetBrushSettingsCommand,
+  toolSetChromaKeySettingsCommand,
   toolSetBrushPreviewCommand,
   toolSetBrushStrokePreviewCommand,
   toolSetMaskViewModeCommand,