syntaxbullet/image-studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
syntaxbullet
2026-07-04 11:13:47 +02:00
parent e5c7f09cea
commit 6b6c2ebb80
16 changed files with 463 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
view/BottomControlsIsland.tsx
View File

@@ -1,7 +1,9 @@
import type { AppStore } from "@editor/store";
import type { MaskViewMode, ViewportState } from "@editor/state";
import type { BrushSettings, ToolId } from "@editor/tools";
import type { ImageDocument } from "@core/document";
import type { MaskViewMode, SelectionState, ViewportState } from "@editor/state";
import type { BrushSettings, ChromaKeySettings, ToolId } from "@editor/tools";
import { BrushControls } from "./bottom-controls/BrushControls";
import { ChromaKeyControls } from "./bottom-controls/ChromaKeyControls";
import { PanControls } from "./bottom-controls/PanControls";
import { TransformControls } from "./bottom-controls/TransformControls";
import { ZoomControls } from "./bottom-controls/ZoomControls";
@@ -10,11 +12,14 @@ import type { TransformTarget } from "@editor/transform";
export type BottomControlsAction = "pan" | "zoom";
export type BottomControlsIslandProps = {
document: ImageDocument;
selection: SelectionState;
viewport: ViewportState;
visible: boolean;
action: BottomControlsAction;
activeTool: ToolId;
brushSettings: BrushSettings;
chromaKeySettings: ChromaKeySettings;
editingMask?: boolean;
maskViewMode?: MaskViewMode;
transformBounds?: Rect;
@@ -23,7 +28,7 @@ export type BottomControlsIslandProps = {
dispatch: AppStore["dispatch"];
};
export function BottomControlsIsland({ viewport, visible, action, activeTool, brushSettings, editingMask = false, maskViewMode = "composite", transformBounds, transformTarget, brushHint, dispatch }: BottomControlsIslandProps) {
export function BottomControlsIsland({ document, selection, viewport, visible, action, activeTool, brushSettings, chromaKeySettings, 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);
@@ -39,6 +44,8 @@ export function BottomControlsIsland({ viewport, visible, action, activeTool, br
<BrushHint tool={activeTool} hint={brushHint} />
) : activeTool === "brush" || activeTool === "eraser" ? (
<BrushControls tool={activeTool} settings={brushSettings} editingMask={editingMask} maskViewMode={maskViewMode} dispatch={dispatch} />
) : activeTool === "chromaKey" ? (
<ChromaKeyControls document={document} selection={selection} settings={chromaKeySettings} dispatch={dispatch} />
) : transformBounds && transformTarget ? (
<TransformControls bounds={transformBounds} target={transformTarget} dispatch={dispatch} />
) : action === "pan" ? (