feat: add magic wand tool with settings and controls, including UI integration and functionality

This commit is contained in:
syntaxbullet
2026-07-04 11:49:35 +02:00
parent 6b6c2ebb80
commit af50a165da
19 changed files with 382 additions and 18 deletions

View File

@@ -1,9 +1,10 @@
import type { AppStore } from "@editor/store";
import type { ImageDocument } from "@core/document";
import type { MaskViewMode, SelectionState, ViewportState } from "@editor/state";
import type { BrushSettings, ChromaKeySettings, ToolId } from "@editor/tools";
import type { BrushSettings, ChromaKeySettings, MagicWandSettings, ToolId } from "@editor/tools";
import { BrushControls } from "./bottom-controls/BrushControls";
import { ChromaKeyControls } from "./bottom-controls/ChromaKeyControls";
import { MagicWandControls } from "./bottom-controls/MagicWandControls";
import { PanControls } from "./bottom-controls/PanControls";
import { TransformControls } from "./bottom-controls/TransformControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
@@ -20,6 +21,7 @@ export type BottomControlsIslandProps = {
activeTool: ToolId;
brushSettings: BrushSettings;
chromaKeySettings: ChromaKeySettings;
magicWandSettings: MagicWandSettings;
editingMask?: boolean;
maskViewMode?: MaskViewMode;
transformBounds?: Rect;
@@ -28,7 +30,7 @@ export type BottomControlsIslandProps = {
dispatch: AppStore["dispatch"];
};
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, brushSettings, chromaKeySettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, brushSettings, chromaKeySettings, magicWandSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
const zoomPercent = Math.round(viewport.zoom * 100);
const x = Math.round(viewport.center.x);
const y = Math.round(viewport.center.y);
@@ -46,6 +48,8 @@ export function BottomControlsIsland({ document, selection, viewport, visible, a
<BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />
) : activeTool === "chromaKey" ? (
<ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
) : activeTool === "magicWand" ? (
<MagicWandControls settings={magicWandSettings} dispatch={dispatch} />
) : transformBounds && transformTarget ? (
<TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
) : action === "pan" ? (