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

feat: implement chroma key operation and related keybinds, update workspace panel management

Browse Source
This commit is contained in:
syntaxbullet
2026-07-11 00:09:41 +02:00
parent 51a54dbdb2
commit 556fd685a2
21 changed files with 134 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
view/App.tsx
View File

@@ -13,7 +13,7 @@ import { ShortcutsDisplay } from "./ShortcutsDisplay";
import { ToolOverlay } from "./ToolOverlay";
import { resolveTransformTargetBounds, selectedTransformTarget } from "@editor/transform-targets";
import type { AppState } from "@editor/state";
import { handleCommandPaletteKey, handleDeleteSelectionKey, handleHistoryKey, handleToolKey, keybindEventFromKeyboardEvent } from "@input/index";
import { handleCommandPaletteKey, handleDeleteSelectionKey, handleHistoryKey, handleOperationKey, handleToolKey, keybindEventFromKeyboardEvent } from "@input/index";
import { shallowEqual, useAppState } from "./useAppState";
import { downloadArtboardPng } from "@operations/export/downloadArtboard";
import { useImageImport } from "./useImageImport";
@@ -34,6 +34,7 @@ export function App({ app }: AppProps) {
const transformTarget = transformSession?.target ?? selectedTransformTarget(document, selection);
const activeArtboard = document.artboards.find((artboard) => artboard.id === selection.artboardId) ?? document.artboards[0];
const generateOpen = workspace.panel === "generate";
const chromaKeyOpen = workspace.panel === "chromaKey";
const layersOpen = workspace.panel === "layers";
useEffect(() => {
@@ -105,6 +106,12 @@ export function App({ app }: AppProps) {
const key = event.key.toLowerCase();
const operationConsumed = handleOperationKey({ event: keybindEvent, dispatch: app.store.dispatch });
if (operationConsumed) {
event.preventDefault();
return;
}
const toolConsumed = handleToolKey({ event: keybindEvent, dispatch: app.store.dispatch });
if (toolConsumed) {
event.preventDefault();
@@ -179,6 +186,7 @@ export function App({ app }: AppProps) {
<ToolOverlay
activeTool={tools.activeTool}
interactionMode={tools.interactionMode}
panel={workspace.panel}
dispatch={app.store.dispatch}
/>
</div>
@@ -200,9 +208,10 @@ export function App({ app }: AppProps) {
document={document}
selection={selection}
viewport={viewport}
visible={tools.activeTool === "generate" || tools.activeTool === "brush" || tools.activeTool === "eraser" || tools.activeTool === "chromaKey" || tools.activeTool === "magicWand" || Boolean(transformBounds) || viewportActivityIsland.visible}
visible={generateOpen || chromaKeyOpen || tools.activeTool === "brush" || tools.activeTool === "eraser" || tools.activeTool === "magicWand" || Boolean(transformBounds) || viewportActivityIsland.visible}
action={viewportActivityIsland.action}
activeTool={tools.activeTool}
operation={generateOpen ? "generate" : chromaKeyOpen ? "chromaKey" : undefined}
brushSettings={tools.brush}
generateSettings={tools.generate}
generation={generation}