alphard/Comfyui-LayerForge
1
0
Fork 0
mirror of https://github.com/Azornes/Comfyui-LayerForge.git synced 2026-03-25 06:22:14 -03:00
Code Issues Packages Projects Releases Wiki Activity

Add draggable blend mode menu and improve right-click UX

Browse Source 
Introduces a draggable title bar to the blend mode menu for better usability and restricts its movement within the viewport. Right-clicking on selected layers now opens the blend mode menu, and the default context menu is suppressed on the canvas. Also refines tooltip table cell sizing for improved display.
This commit is contained in:
Dariusz L
2025-07-01 16:37:18 +02:00
parent 5a473cc14a
commit b2ff5666f9
3 changed files with 98 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
js/CanvasInteractions.js
View File

@@ -51,6 +51,9 @@ export class CanvasInteractions {
this.canvas.canvas.addEventListener('dragenter', this.handleDragEnter.bind(this));
this.canvas.canvas.addEventListener('dragleave', this.handleDragLeave.bind(this));
this.canvas.canvas.addEventListener('drop', this.handleDrop.bind(this));
// Prevent default context menu on canvas
this.canvas.canvas.addEventListener('contextmenu', this.handleContextMenu.bind(this));
}
resetInteractionState() {
@@ -95,6 +98,23 @@ export class CanvasInteractions {
}
this.interaction.lastClickTime = currentTime;
// Check for right click to show blend mode menu on selected layers
if (e.button === 2) {
const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
if (clickedLayerResult && this.canvas.selectedLayers.includes(clickedLayerResult.layer)) {
e.preventDefault(); // Prevent context menu
this.canvas.canvasLayers.showBlendModeMenu(viewCoords.x ,viewCoords.y);
return;
}
}
// Check for Shift key first to start output area drawing, ignoring layers
if (e.shiftKey) {
this.startCanvasResize(worldCoords);
this.canvas.render();
return;
}
const transformTarget = this.canvas.canvasLayers.getHandleAtPosition(worldCoords.x, worldCoords.y);
if (transformTarget) {
this.startLayerTransform(transformTarget.layer, transformTarget.handle, worldCoords);
@@ -103,18 +123,11 @@ export class CanvasInteractions {
const clickedLayerResult = this.canvas.canvasLayers.getLayerAtPosition(worldCoords.x, worldCoords.y);
if (clickedLayerResult) {
if (e.shiftKey && this.canvas.selectedLayers.includes(clickedLayerResult.layer)) {
this.canvas.canvasLayers.showBlendModeMenu(e.clientX, e.clientY);
return;
}
this.startLayerDrag(clickedLayerResult.layer, worldCoords);
return;
}
if (e.shiftKey) {
this.startCanvasResize(worldCoords);
} else {
this.startPanning(e);
}
this.startPanning(e);
this.canvas.render();
}
@@ -216,6 +229,11 @@ export class CanvasInteractions {
}
}
handleContextMenu(e) {
// Prevent default context menu on canvas
e.preventDefault();
}
handleWheel(e) {
e.preventDefault();
if (this.canvas.maskTool.isActive) {