From cf50e5eeeeba4dc7e365da7ba34c7d620fe0d82e Mon Sep 17 00:00:00 2001 From: Hippalectryon Date: Sat, 26 Oct 2024 09:34:29 +0200 Subject: [PATCH] Make sure the canvas is focused --- invokeai/frontend/web/src/common/hooks/focus.ts | 2 +- .../controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts | 7 ++++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/invokeai/frontend/web/src/common/hooks/focus.ts b/invokeai/frontend/web/src/common/hooks/focus.ts index a5d4e1de44..8f3389cb32 100644 --- a/invokeai/frontend/web/src/common/hooks/focus.ts +++ b/invokeai/frontend/web/src/common/hooks/focus.ts @@ -46,7 +46,7 @@ const REGION_TARGETS: Record> = { /** * The currently-focused region or `null` if no region is focused. */ -const $focusedRegion = atom(null); +export const $focusedRegion = atom(null); /** * A map of focus regions to atoms that indicate if that region is focused. diff --git a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts index 578c5304e9..48d04f49b5 100644 --- a/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts +++ b/invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts @@ -1,3 +1,4 @@ +import { $focusedRegion } from 'common/hooks/focus'; import type { CanvasManager } from 'features/controlLayers/konva/CanvasManager'; import { CanvasModuleBase } from 'features/controlLayers/konva/CanvasModuleBase'; import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/CanvasToolModule'; @@ -35,7 +36,7 @@ export class CanvasMoveToolModule extends CanvasModuleBase { onKeyDown = (e: KeyboardEvent) => { // Support moving via arrow keys - const OFFSET = 1; // Define a constant for the movement offset + const OFFSET = 1; // How much to move, in px const offsets: Record = { ArrowLeft: { x: -OFFSET, y: 0 }, ArrowRight: { x: OFFSET, y: 0 }, @@ -45,8 +46,8 @@ export class CanvasMoveToolModule extends CanvasModuleBase { const { key } = e; const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter(); - if (!(selectedEntity && selectedEntity.$isInteractable.get())) { - return; // Early return if no entity is selected or it is disabled + if (!(selectedEntity && selectedEntity.$isInteractable.get() && $focusedRegion.get() === 'canvas')) { + return; // Early return if no entity is selected or it is disabled or canvas is not focused } const { x: offsetX = 0, y: offsetY = 0 } = offsets[key] || {};