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

Refactor canvas help tooltip for mask mode support

Browse Source 
Split help tooltip content into standard and mask mode shortcuts. Tooltip now dynamically displays relevant shortcuts based on whether the mask tool is active, improving user guidance during mask editing.
This commit is contained in:
Dariusz L
2025-06-28 03:37:23 +02:00
parent 4c569a0130
commit 16730cf9a1
1 changed files with 60 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

98
js/CanvasView.js
View File

@@ -284,46 +284,63 @@ async function createCanvasWidget(node, widget, app) {
const helpTooltip = $el("div.painter-tooltip", {
id: `painter-help-tooltip-${node.id}`,
innerHTML: `
<h4>Canvas Control</h4>
<ul>
<li><kbd>Click + Drag</kbd> - Pan canvas view</li>
<li><kbd>Mouse Wheel</kbd> - Zoom view in/out</li>
<li><kbd>Shift + Click (background)</kbd> - Start resizing canvas area</li>
<li><kbd>Shift + Ctrl + Click</kbd> - Start moving entire canvas</li>
<li><kbd>Double Click (background)</kbd> - Deselect all layers</li>
</ul>
<h4>Clipboard & I/O</h4>
<ul>
<li><kbd>Ctrl + C</kbd> - Copy selected layer(s)</li>
<li><kbd>Ctrl + V</kbd> - Paste from clipboard (image or internal layers)</li>
<li><kbd>Drag & Drop Image File</kbd> - Add image as a new layer</li>
</ul>
<h4>Layer Interaction</h4>
<ul>
<li><kbd>Click + Drag</kbd> - Move selected layer(s)</li>
<li><kbd>Ctrl + Click</kbd> - Add/Remove layer from selection</li>
<li><kbd>Alt + Drag</kbd> - Clone selected layer(s)</li>
<li><kbd>Shift + Click</kbd> - Show blend mode & opacity menu</li>
<li><kbd>Mouse Wheel</kbd> - Scale layer (snaps to grid)</li>
<li><kbd>Ctrl + Mouse Wheel</kbd> - Fine-scale layer</li>
<li><kbd>Shift + Mouse Wheel</kbd> - Rotate layer by 5°</li>
<li><kbd>Arrow Keys</kbd> - Nudge layer by 1px</li>
<li><kbd>Shift + Arrow Keys</kbd> - Nudge layer by 10px</li>
<li><kbd>[</kbd> or <kbd>]</kbd> - Rotate by 1°</li>
<li><kbd>Shift + [</kbd> or <kbd>]</kbd> - Rotate by 10°</li>
<li><kbd>Delete</kbd> - Delete selected layer(s)</li>
</ul>
<h4>Transform Handles (on selected layer)</h4>
<ul>
<li><kbd>Drag Corner/Side</kbd> - Resize layer</li>
<li><kbd>Drag Rotation Handle</kbd> - Rotate layer</li>
<li><kbd>Hold Shift</kbd> - Keep aspect ratio / Snap rotation to 15°</li>
<li><kbd>Hold Ctrl</kbd> - Snap to grid</li>
</ul>
`
});
const standardShortcuts = `
<h4>Canvas Control</h4>
<ul>
<li><kbd>Click + Drag</kbd> - Pan canvas view</li>
<li><kbd>Mouse Wheel</kbd> - Zoom view in/out</li>
<li><kbd>Shift + Click (background)</kbd> - Start resizing canvas area</li>
<li><kbd>Shift + Ctrl + Click</kbd> - Start moving entire canvas</li>
<li><kbd>Double Click (background)</kbd> - Deselect all layers</li>
</ul>
<h4>Clipboard & I/O</h4>
<ul>
<li><kbd>Ctrl + C</kbd> - Copy selected layer(s)</li>
<li><kbd>Ctrl + V</kbd> - Paste from clipboard (image or internal layers)</li>
<li><kbd>Drag & Drop Image File</kbd> - Add image as a new layer</li>
</ul>
<h4>Layer Interaction</h4>
<ul>
<li><kbd>Click + Drag</kbd> - Move selected layer(s)</li>
<li><kbd>Ctrl + Click</kbd> - Add/Remove layer from selection</li>
<li><kbd>Alt + Drag</kbd> - Clone selected layer(s)</li>
<li><kbd>Shift + Click</kbd> - Show blend mode & opacity menu</li>
<li><kbd>Mouse Wheel</kbd> - Scale layer (snaps to grid)</li>
<li><kbd>Ctrl + Mouse Wheel</kbd> - Fine-scale layer</li>
<li><kbd>Shift + Mouse Wheel</kbd> - Rotate layer by 5°</li>
<li><kbd>Arrow Keys</kbd> - Nudge layer by 1px</li>
<li><kbd>Shift + Arrow Keys</kbd> - Nudge layer by 10px</li>
<li><kbd>[</kbd> or <kbd>]</kbd> - Rotate by 1°</li>
<li><kbd>Shift + [</kbd> or <kbd>]</kbd> - Rotate by 10°</li>
<li><kbd>Delete</kbd> - Delete selected layer(s)</li>
</ul>
<h4>Transform Handles (on selected layer)</h4>
<ul>
<li><kbd>Drag Corner/Side</kbd> - Resize layer</li>
<li><kbd>Drag Rotation Handle</kbd> - Rotate layer</li>
<li><kbd>Hold Shift</kbd> - Keep aspect ratio / Snap rotation to 15°</li>
<li><kbd>Hold Ctrl</kbd> - Snap to grid</li>
</ul>
`;
const maskShortcuts = `
<h4>Draw Mask Mode</h4>
<ul>
<li><kbd>Click + Drag</kbd> - Paint on the mask</li>
<li>Use the sliders to control brush <strong>Size</strong>, <strong>Strength</strong>, and <strong>Softness</strong>.</li>
<li><strong>Clear Mask</strong> will remove the entire mask.</li>
<li>The mask is applied to the final image composition.</li>
<li><kbd>Middle Mouse Button + Drag</kbd> - Pan canvas view</li>
<li><kbd>Mouse Wheel</kbd> - Zoom view in/out</li>
</ul>
<h4>Exiting Mask Mode</h4>
<ul>
<li>Click the "Draw Mask" button again to exit the mode.</li>
</ul>
`;
document.body.appendChild(helpTooltip);
const controlPanel = $el("div.painterControlPanel", {}, [
$el("div.controls.painter-controls", {
@@ -356,6 +373,11 @@ async function createCanvasWidget(node, widget, app) {
fontWeight: "bold",
},
onmouseenter: (e) => {
if (canvas.maskTool.isActive) {
helpTooltip.innerHTML = maskShortcuts;
} else {
helpTooltip.innerHTML = standardShortcuts;
}
const rect = e.target.getBoundingClientRect();
helpTooltip.style.left = `${rect.left}px`;
helpTooltip.style.top = `${rect.bottom + 5}px`;