github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

Allow moving layers using the keyboard

Browse Source
This commit is contained in:
Hippalectryon
2024-10-26 00:39:55 +02:00
committed by psychedelicious
parent 92f71d99ee
commit 28d169f859
2 changed files with 41 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasMoveToolModule.ts
View File

@@ -4,6 +4,12 @@ import type { CanvasToolModule } from 'features/controlLayers/konva/CanvasTool/C
import { getPrefixedId } from 'features/controlLayers/konva/util';
import type { Logger } from 'roarr';
// Typo insurance
const KEY_LEFT = 'ArrowLeft';
const KEY_RIGHT = 'ArrowRight';
const KEY_UP = 'ArrowUp';
const KEY_DOWN = 'ArrowDown';
export class CanvasMoveToolModule extends CanvasModuleBase {
readonly type = 'move_tool';
readonly id: string;
@@ -32,4 +38,31 @@ export class CanvasMoveToolModule extends CanvasModuleBase {
selectedEntity.transformer.syncCursorStyle();
}
};
onKeyDown = (e: KeyboardEvent) => {
// Support moving via arrow keys
const selectedEntity = this.manager.stateApi.getSelectedEntityAdapter();
let offset_x;
let offset_y;
switch (e.key) {
case KEY_LEFT:
offset_x = -1;
break;
case KEY_RIGHT:
offset_x = 1;
break;
case KEY_UP:
offset_y = -1;
break;
case KEY_DOWN:
offset_y = 1;
break;
}
if (offset_x !== undefined) {
selectedEntity?.konva.layer.x(selectedEntity?.konva.layer.x() + offset_x);
}
if (offset_y !== undefined) {
selectedEntity?.konva.layer.y(selectedEntity?.konva.layer.y() + offset_y);
}
};
}

10
invokeai/frontend/web/src/features/controlLayers/konva/CanvasTool/CanvasToolModule.ts
View File

@@ -528,11 +528,17 @@ export class CanvasToolModule extends CanvasModuleBase {
};
onKeyDown = (e: KeyboardEvent) => {
if (e.repeat) {
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
return;
}
if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
switch (this.$tool.get()) { // before repeat, as we may want to catch repeating keys
case 'move':
this.tools.move.onKeyDown(e);
break
}
if (e.repeat) {
return;
}