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

Add ShapeTool for custom output area selection

Browse Source 
Introduces ShapeTool to allow users to define custom polygonal output areas by holding Shift+S and clicking to add points. The selected shape is used to crop and mask images and layers, and is visualized on the canvas. Updates Canvas, CanvasIO, CanvasInteractions, CanvasLayers, CanvasRenderer, and types to support shape-based output areas, including shape-aware import, export, and rendering logic.
This commit is contained in:
Dariusz L
2025-07-24 15:12:53 +02:00
parent b655b68412
commit 2778b8df9f
13 changed files with 664 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
js/CanvasInteractions.js
View File

@@ -14,6 +14,8 @@ export class CanvasInteractions {
canvasResizeStart: { x: 0, y: 0 },
isCtrlPressed: false,
isAltPressed: false,
isShiftPressed: false,
isSPressed: false,
hasClonedInDrag: false,
lastClickTime: 0,
transformingLayer: null,
@@ -67,6 +69,10 @@ export class CanvasInteractions {
this.canvas.render();
return;
}
if (this.canvas.shapeTool.isActive) {
this.canvas.shapeTool.addPoint(worldCoords);
return;
}
// --- Ostateczna, poprawna kolejność sprawdzania ---
// 1. Akcje globalne z modyfikatorami (mają najwyższy priorytet)
if (e.shiftKey && e.ctrlKey) {
@@ -74,6 +80,11 @@ export class CanvasInteractions {
return;
}
if (e.shiftKey) {
// Clear custom shape when starting canvas resize
if (this.canvas.outputAreaShape) {
this.canvas.outputAreaShape = null;
this.canvas.render();
}
this.startCanvasResize(worldCoords);
return;
}
@@ -295,10 +306,22 @@ export class CanvasInteractions {
handleKeyDown(e) {
if (e.key === 'Control')
this.interaction.isCtrlPressed = true;
if (e.key === 'Shift')
this.interaction.isShiftPressed = true;
if (e.key === 'Alt') {
this.interaction.isAltPressed = true;
e.preventDefault();
}
if (e.key.toLowerCase() === 's') {
this.interaction.isSPressed = true;
e.preventDefault();
e.stopPropagation();
}
// Check if Shift+S is being held down
if (this.interaction.isShiftPressed && this.interaction.isSPressed && !this.interaction.isCtrlPressed && !this.canvas.shapeTool.isActive) {
this.canvas.shapeTool.activate();
return;
}
// Globalne skróty (Undo/Redo/Copy/Paste)
if (e.ctrlKey || e.metaKey) {
let handled = true;
@@ -367,8 +390,16 @@ export class CanvasInteractions {
handleKeyUp(e) {
if (e.key === 'Control')
this.interaction.isCtrlPressed = false;
if (e.key === 'Shift')
this.interaction.isShiftPressed = false;
if (e.key === 'Alt')
this.interaction.isAltPressed = false;
if (e.key.toLowerCase() === 's')
this.interaction.isSPressed = false;
// Deactivate shape tool when Shift or S is released
if (this.canvas.shapeTool.isActive && (!this.interaction.isShiftPressed || !this.interaction.isSPressed)) {
this.canvas.shapeTool.deactivate();
}
const movementKeys = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'BracketLeft', 'BracketRight'];
if (movementKeys.includes(e.code) && this.interaction.keyMovementInProgress) {
this.canvas.requestSaveState(); // Użyj opóźnionego zapisu
@@ -379,7 +410,13 @@ export class CanvasInteractions {
log.debug('Window lost focus, resetting key states.');
this.interaction.isCtrlPressed = false;
this.interaction.isAltPressed = false;
this.interaction.isShiftPressed = false;
this.interaction.isSPressed = false;
this.interaction.keyMovementInProgress = false;
// Deactivate shape tool when window loses focus
if (this.canvas.shapeTool.isActive) {
this.canvas.shapeTool.deactivate();
}
// Also reset any interaction that relies on a key being held down
if (this.interaction.mode === 'dragging' && this.interaction.hasClonedInDrag) {
// If we were in the middle of a cloning drag, finalize it