From 16730cf9a1c40ff1083d13ef3646979b3f149f8a Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Sat, 28 Jun 2025 03:37:23 +0200 Subject: [PATCH] Refactor canvas help tooltip for mask mode support 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. --- js/CanvasView.js | 98 +++++++++++++++++++++++++++++------------------- 1 file changed, 60 insertions(+), 38 deletions(-) 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

- -

Clipboard & I/O

- -

Layer Interaction

- -

Transform Handles (on selected layer)

- - ` }); + const standardShortcuts = ` +

Canvas Control

+ +

Clipboard & I/O

+ +

Layer Interaction

+ +

Transform Handles (on selected layer)

+ + `; + + const maskShortcuts = ` +

Draw Mask Mode

+ +

Exiting Mask 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`;