From d7837092874bd00fae40924e018a3d3d5b4d9175 Mon Sep 17 00:00:00 2001 From: Dariusz L Date: Sat, 28 Jun 2025 04:01:04 +0200 Subject: [PATCH] Improve tooltip styling and positioning in CanvasView Refactors the .painter-tooltip CSS for better appearance, responsiveness, and usability, including new scaling classes, table-based layout, and improved scrollbar styling. Updates shortcut help content to use tables instead of lists for clarity. Enhances tooltip positioning logic to prevent overflow outside the viewport and ensures proper display near screen edges. --- js/CanvasView.js | 242 ++++++++++++++++++++++++++++++++++++----------- 1 file changed, 189 insertions(+), 53 deletions(-) diff --git a/js/CanvasView.js b/js/CanvasView.js index 0d6412f..94bab3e 100644 --- a/js/CanvasView.js +++ b/js/CanvasView.js @@ -173,19 +173,125 @@ async function createCanvasWidget(node, widget, app) { } .painter-tooltip { - position: fixed; /* Pozycjonowanie względem okna przeglądarki */ - display: none; /* Domyślnie ukryty */ + position: fixed; + display: none; background: #3a3a3a; color: #f0f0f0; border: 1px solid #555; border-radius: 8px; padding: 12px 18px; - z-index: 9999; /* Wyżej niż modal backdrop */ + z-index: 9999; font-size: 13px; line-height: 1.7; - max-width: 400px; + width: auto; + max-width: min(500px, calc(100vw - 40px)); box-shadow: 0 4px 12px rgba(0,0,0,0.3); - pointer-events: none; /* Zapobiega interakcji myszy z dymkiem */ + pointer-events: none; + transform-origin: top left; + transition: transform 0.2s ease; + will-change: transform; + } + + .painter-tooltip.scale-down { + transform: scale(0.9); + transform-origin: top; + } + + .painter-tooltip.scale-down-more { + transform: scale(0.8); + transform-origin: top; + } + + .painter-tooltip table { + width: 100%; + border-collapse: collapse; + margin: 8px 0; + } + + .painter-tooltip table td { + padding: 2px 8px; + vertical-align: middle; + } + + .painter-tooltip table td:first-child { + width: 45%; + white-space: nowrap; + } + + .painter-tooltip table td:last-child { + width: 55%; + } + + .painter-tooltip table tr:nth-child(odd) td { + background-color: rgba(0,0,0,0.1); + } + + @media (max-width: 600px) { + .painter-tooltip { + font-size: 11px; + padding: 8px 12px; + } + .painter-tooltip table td { + padding: 2px 4px; + } + .painter-tooltip kbd { + padding: 1px 4px; + font-size: 10px; + } + .painter-tooltip table td:first-child { + width: 40%; + } + .painter-tooltip table td:last-child { + width: 60%; + } + .painter-tooltip h4 { + font-size: 12px; + margin-top: 8px; + margin-bottom: 4px; + } + } + + @media (max-width: 400px) { + .painter-tooltip { + font-size: 10px; + padding: 6px 8px; + } + .painter-tooltip table td { + padding: 1px 3px; + } + .painter-tooltip kbd { + padding: 0px 3px; + font-size: 9px; + } + .painter-tooltip table td:first-child { + width: 35%; + } + .painter-tooltip table td:last-child { + width: 65%; + } + .painter-tooltip h4 { + font-size: 11px; + margin-top: 6px; + margin-bottom: 3px; + } + } + + .painter-tooltip::-webkit-scrollbar { + width: 8px; + } + + .painter-tooltip::-webkit-scrollbar-track { + background: #2a2a2a; + border-radius: 4px; + } + + .painter-tooltip::-webkit-scrollbar-thumb { + background: #555; + border-radius: 4px; + } + + .painter-tooltip::-webkit-scrollbar-thumb:hover { + background: #666; } .painter-tooltip h4 { @@ -288,57 +394,56 @@ async function createCanvasWidget(node, widget, app) { const standardShortcuts = `

Canvas Control

- + + + + + + +
Click + DragPan canvas view
Mouse WheelZoom view in/out
Shift + Click (background)Start resizing canvas area
Shift + Ctrl + ClickStart moving entire canvas
Double Click (background)Deselect all layers
+

Clipboard & I/O

- + + + + +
Ctrl + CCopy selected layer(s)
Ctrl + VPaste from clipboard (image or internal layers)
Drag & Drop Image FileAdd image as a new layer
+

Layer Interaction

- + + + + + + + + + + + + + +
Click + DragMove selected layer(s)
Ctrl + ClickAdd/Remove layer from selection
Alt + DragClone selected layer(s)
Shift + ClickShow blend mode & opacity menu
Mouse WheelScale layer (snaps to grid)
Ctrl + Mouse WheelFine-scale layer
Shift + Mouse WheelRotate layer by 5°
Arrow KeysNudge layer by 1px
Shift + Arrow KeysNudge layer by 10px
[ or ]Rotate by 1°
Shift + [ or ]Rotate by 10°
DeleteDelete selected layer(s)
+

Transform Handles (on selected layer)

- + + + + + +
Drag Corner/SideResize layer
Drag Rotation HandleRotate layer
Hold ShiftKeep aspect ratio / Snap rotation to 15°
Hold CtrlSnap to grid
`; const maskShortcuts = ` -

Draw Mask Mode

- -

Exiting Mask Mode

- +

Mask Mode

+ + + + + + + +
Click + DragPaint on the mask
Middle Mouse Button + DragPan canvas view
Mouse WheelZoom view in/out
Brush ControlsUse sliders to control brush Size, Strength, and Softness
Clear MaskRemove the entire mask
Exit ModeClick the "Draw Mask" button again
`; document.body.appendChild(helpTooltip); @@ -378,10 +483,41 @@ async function createCanvasWidget(node, widget, app) { } else { helpTooltip.innerHTML = standardShortcuts; } - const rect = e.target.getBoundingClientRect(); - helpTooltip.style.left = `${rect.left}px`; - helpTooltip.style.top = `${rect.bottom + 5}px`; + + // Najpierw wyświetlamy tooltip z visibility: hidden aby obliczyć jego wymiary + helpTooltip.style.visibility = 'hidden'; helpTooltip.style.display = 'block'; + + const buttonRect = e.target.getBoundingClientRect(); + const tooltipRect = helpTooltip.getBoundingClientRect(); + const viewportWidth = window.innerWidth; + const viewportHeight = window.innerHeight; + + // Obliczamy pozycję + let left = buttonRect.left; + let top = buttonRect.bottom + 5; + + // Sprawdzamy czy tooltip wychodzi poza prawy brzeg ekranu + if (left + tooltipRect.width > viewportWidth) { + left = viewportWidth - tooltipRect.width - 10; + } + + // Sprawdzamy czy tooltip wychodzi poza dolny brzeg ekranu + if (top + tooltipRect.height > viewportHeight) { + // Wyświetlamy nad przyciskiem zamiast pod + top = buttonRect.top - tooltipRect.height - 5; + } + + // Upewniamy się, że tooltip nie wychodzi poza lewy brzeg + if (left < 10) left = 10; + + // Upewniamy się, że tooltip nie wychodzi poza górny brzeg + if (top < 10) top = 10; + + // Ustawiamy finalną pozycję i pokazujemy tooltip + helpTooltip.style.left = `${left}px`; + helpTooltip.style.top = `${top}px`; + helpTooltip.style.visibility = 'visible'; }, onmouseleave: () => { helpTooltip.style.display = 'none';