alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-21 20:52:12 -03:00
Code Issues Packages Projects Releases Wiki Activity

unify modifier key handling in CanvasInteractions

Browse Source 
Implemented centralized modifier state management with ModifierState interface and getModifierState() method. This eliminates inconsistencies between event-based and state-based modifier checking across mouse, wheel, and keyboard interactions.
This commit is contained in:
Dariusz L
2025-08-08 13:50:13 +02:00
parent e4f44c10e8
commit 176b9d03ac
2 changed files with 50 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
js/CanvasInteractions.js
View File

@@ -49,6 +49,14 @@ export class CanvasInteractions {
view: this.canvas.getMouseViewCoordinates(e)
};
}
getModifierState(e) {
return {
ctrl: this.interaction.isCtrlPressed || e?.ctrlKey || false,
shift: this.interaction.isShiftPressed || e?.shiftKey || false,
alt: this.interaction.isAltPressed || e?.altKey || false,
meta: this.interaction.isMetaPressed || e?.metaKey || false,
};
}
preventEventDefaults(e) {
e.preventDefault();
e.stopPropagation();
@@ -150,6 +158,7 @@ export class CanvasInteractions {
handleMouseDown(e) {
this.canvas.canvas.focus();
const coords = this.getMouseCoordinates(e);
const mods = this.getModifierState(e);
if (this.interaction.mode === 'drawingMask') {
this.canvas.maskTool.handleMouseDown(coords.world, coords.view);
this.canvas.render();
@@ -161,11 +170,11 @@ export class CanvasInteractions {
}
// --- Ostateczna, poprawna kolejność sprawdzania ---
// 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
if (e.shiftKey && e.ctrlKey) {
if (mods.shift && mods.ctrl) {
this.startCanvasMove(coords.world);
return;
}
if (e.shiftKey) {
if (mods.shift) {
// Clear custom shape when starting canvas resize
if (this.canvas.outputAreaShape) {
// If auto-apply shape mask is enabled, remove the mask before clearing the shape
@@ -350,14 +359,15 @@ export class CanvasInteractions {
}
}
handleLayerWheelTransformation(e) {
const mods = this.getModifierState(e);
const rotationStep = 5 * (e.deltaY > 0 ? -1 : 1);
const direction = e.deltaY < 0 ? 1 : -1;
this.canvas.canvasSelection.selectedLayers.forEach((layer) => {
if (e.shiftKey) {
this.handleLayerRotation(layer, e.ctrlKey, direction, rotationStep);
if (mods.shift) {
this.handleLayerRotation(layer, mods.ctrl, direction, rotationStep);
}
else {
this.handleLayerScaling(layer, e.ctrlKey, e.deltaY);
this.handleLayerScaling(layer, mods.ctrl, e.deltaY);
}
});
}
@@ -446,11 +456,12 @@ export class CanvasInteractions {
return;
}
// Globalne skróty (Undo/Redo/Copy/Paste)
if (e.ctrlKey || e.metaKey) {
const mods = this.getModifierState(e);
if (mods.ctrl || mods.meta) {
let handled = true;
switch (e.key.toLowerCase()) {
case 'z':
if (e.shiftKey) {
if (mods.shift) {
this.canvas.redo();
}
else {
@@ -477,7 +488,7 @@ export class CanvasInteractions {
}
// Skróty kontekstowe (zależne od zaznaczenia)
if (this.canvas.canvasSelection.selectedLayers.length > 0) {
const step = e.shiftKey ? 10 : 1;
const step = mods.shift ? 10 : 1;
let needsRender = false;
// Używamy e.code dla spójności i niezależności od układu klawiatury
const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
@@ -609,7 +620,8 @@ export class CanvasInteractions {
prepareForDrag(layer, worldCoords) {
// Zaktualizuj zaznaczenie, ale nie zapisuj stanu
// Support both Ctrl (Windows/Linux) and Cmd (macOS) for multi-selection
if (this.interaction.isCtrlPressed || this.interaction.isMetaPressed) {
const mods = this.getModifierState();
if (mods.ctrl || mods.meta) {
const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
if (index === -1) {
this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);

38
src/CanvasInteractions.ts
View File

@@ -10,6 +10,13 @@ interface MouseCoordinates {
view: Point;
}
interface ModifierState {
ctrl: boolean;
shift: boolean;
alt: boolean;
meta: boolean;
}
interface TransformOrigin {
x: number;
y: number;
@@ -100,6 +107,15 @@ export class CanvasInteractions {
};
}
private getModifierState(e?: MouseEvent | WheelEvent | KeyboardEvent): ModifierState {
return {
ctrl: this.interaction.isCtrlPressed || (e as any)?.ctrlKey || false,
shift: this.interaction.isShiftPressed || (e as any)?.shiftKey || false,
alt: this.interaction.isAltPressed || (e as any)?.altKey || false,
meta: this.interaction.isMetaPressed || (e as any)?.metaKey || false,
};
}
private preventEventDefaults(e: Event): void {
e.preventDefault();
e.stopPropagation();
@@ -223,6 +239,7 @@ export class CanvasInteractions {
handleMouseDown(e: MouseEvent): void {
this.canvas.canvas.focus();
const coords = this.getMouseCoordinates(e);
const mods = this.getModifierState(e);
if (this.interaction.mode === 'drawingMask') {
this.canvas.maskTool.handleMouseDown(coords.world, coords.view);
@@ -238,11 +255,11 @@ export class CanvasInteractions {
// --- Ostateczna, poprawna kolejność sprawdzania ---
// 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
if (e.shiftKey && e.ctrlKey) {
if (mods.shift && mods.ctrl) {
this.startCanvasMove(coords.world);
return;
}
if (e.shiftKey) {
if (mods.shift) {
// Clear custom shape when starting canvas resize
if (this.canvas.outputAreaShape) {
// If auto-apply shape mask is enabled, remove the mask before clearing the shape
@@ -454,14 +471,15 @@ export class CanvasInteractions {
}
private handleLayerWheelTransformation(e: WheelEvent): void {
const mods = this.getModifierState(e);
const rotationStep = 5 * (e.deltaY > 0 ? -1 : 1);
const direction = e.deltaY < 0 ? 1 : -1;
this.canvas.canvasSelection.selectedLayers.forEach((layer: Layer) => {
if (e.shiftKey) {
this.handleLayerRotation(layer, e.ctrlKey, direction, rotationStep);
if (mods.shift) {
this.handleLayerRotation(layer, mods.ctrl, direction, rotationStep);
} else {
this.handleLayerScaling(layer, e.ctrlKey, e.deltaY);
this.handleLayerScaling(layer, mods.ctrl, e.deltaY);
}
});
}
@@ -552,11 +570,12 @@ export class CanvasInteractions {
}
// Globalne skróty (Undo/Redo/Copy/Paste)
if (e.ctrlKey || e.metaKey) {
const mods = this.getModifierState(e);
if (mods.ctrl || mods.meta) {
let handled = true;
switch (e.key.toLowerCase()) {
case 'z':
if (e.shiftKey) {
if (mods.shift) {
this.canvas.redo();
} else {
this.canvas.undo();
@@ -583,7 +602,7 @@ export class CanvasInteractions {
// Skróty kontekstowe (zależne od zaznaczenia)
if (this.canvas.canvasSelection.selectedLayers.length > 0) {
const step = e.shiftKey ? 10 : 1;
const step = mods.shift ? 10 : 1;
let needsRender = false;
// Używamy e.code dla spójności i niezależności od układu klawiatury
@@ -719,7 +738,8 @@ export class CanvasInteractions {
prepareForDrag(layer: Layer, worldCoords: Point): void {
// Zaktualizuj zaznaczenie, ale nie zapisuj stanu
// Support both Ctrl (Windows/Linux) and Cmd (macOS) for multi-selection
if (this.interaction.isCtrlPressed || this.interaction.isMetaPressed) {
const mods = this.getModifierState();
if (mods.ctrl || mods.meta) {
const index = this.canvas.canvasSelection.selectedLayers.indexOf(layer);
if (index === -1) {
this.canvas.canvasSelection.updateSelection([...this.canvas.canvasSelection.selectedLayers, layer]);