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';