diff --git a/js/CanvasView.js b/js/CanvasView.js
index a38e61c..0d6412f 100644
--- a/js/CanvasView.js
+++ b/js/CanvasView.js
@@ -284,46 +284,63 @@ async function createCanvasWidget(node, widget, app) {
const helpTooltip = $el("div.painter-tooltip", {
id: `painter-help-tooltip-${node.id}`,
- innerHTML: `
- Canvas Control
-
- - Click + Drag - Pan canvas view
- - Mouse Wheel - Zoom view in/out
- - Shift + Click (background) - Start resizing canvas area
- - Shift + Ctrl + Click - Start moving entire canvas
- - Double Click (background) - Deselect all layers
-
- Clipboard & I/O
-
- - Ctrl + C - Copy selected layer(s)
- - Ctrl + V - Paste from clipboard (image or internal layers)
- - Drag & Drop Image File - Add image as a new layer
-
- Layer Interaction
-
- - Click + Drag - Move selected layer(s)
- - Ctrl + Click - Add/Remove layer from selection
- - Alt + Drag - Clone selected layer(s)
- - Shift + Click - Show blend mode & opacity menu
- - Mouse Wheel - Scale layer (snaps to grid)
- - Ctrl + Mouse Wheel - Fine-scale layer
- - Shift + Mouse Wheel - Rotate layer by 5°
- - Arrow Keys - Nudge layer by 1px
- - Shift + Arrow Keys - Nudge layer by 10px
- - [ or ] - Rotate by 1°
- - Shift + [ or ] - Rotate by 10°
- - Delete - Delete selected layer(s)
-
- Transform Handles (on selected layer)
-
- - Drag Corner/Side - Resize layer
- - Drag Rotation Handle - Rotate layer
- - Hold Shift - Keep aspect ratio / Snap rotation to 15°
- - Hold Ctrl - Snap to grid
-
- `
});
+ const standardShortcuts = `
+ Canvas Control
+
+ - Click + Drag - Pan canvas view
+ - Mouse Wheel - Zoom view in/out
+ - Shift + Click (background) - Start resizing canvas area
+ - Shift + Ctrl + Click - Start moving entire canvas
+ - Double Click (background) - Deselect all layers
+
+ Clipboard & I/O
+
+ - Ctrl + C - Copy selected layer(s)
+ - Ctrl + V - Paste from clipboard (image or internal layers)
+ - Drag & Drop Image File - Add image as a new layer
+
+ Layer Interaction
+
+ - Click + Drag - Move selected layer(s)
+ - Ctrl + Click - Add/Remove layer from selection
+ - Alt + Drag - Clone selected layer(s)
+ - Shift + Click - Show blend mode & opacity menu
+ - Mouse Wheel - Scale layer (snaps to grid)
+ - Ctrl + Mouse Wheel - Fine-scale layer
+ - Shift + Mouse Wheel - Rotate layer by 5°
+ - Arrow Keys - Nudge layer by 1px
+ - Shift + Arrow Keys - Nudge layer by 10px
+ - [ or ] - Rotate by 1°
+ - Shift + [ or ] - Rotate by 10°
+ - Delete - Delete selected layer(s)
+
+ Transform Handles (on selected layer)
+
+ - Drag Corner/Side - Resize layer
+ - Drag Rotation Handle - Rotate layer
+ - Hold Shift - Keep aspect ratio / Snap rotation to 15°
+ - Hold Ctrl - Snap to grid
+
+ `;
+
+ const maskShortcuts = `
+ Draw Mask Mode
+
+ - Click + Drag - Paint on the mask
+ - Use the sliders to control brush Size, Strength, and Softness.
+ - Clear Mask will remove the entire mask.
+ - The mask is applied to the final image composition.
+ - Middle Mouse Button + Drag - Pan canvas view
+ - Mouse Wheel - Zoom view in/out
+
+ Exiting Mask Mode
+
+ - Click the "Draw Mask" button again to exit the mode.
+
+ `;
+
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`;