From 978ad55af41dbbadd22ff1a12b74424d7f2aaee4 Mon Sep 17 00:00:00 2001 From: Scarriffle Date: Mon, 13 Apr 2026 09:22:42 +0200 Subject: [PATCH] fix: Color-Picker-Cursor korrekt auf Palette ausgerichtet Der Cursor war relativ zum .gcp-Container positioniert, aber ohne den Offset des Canvas innerhalb des Containers (Padding). Jetzt wird die Canvas-Position via getBoundingClientRect() eingerechnet, sodass der Cursor exakt auf der Farbpalette bleibt. --- frontend/js/color-picker.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/frontend/js/color-picker.js b/frontend/js/color-picker.js index e4ec37b..ce7f88f 100644 --- a/frontend/js/color-picker.js +++ b/frontend/js/color-picker.js @@ -128,14 +128,16 @@ export function openColorPicker(anchorEl, currentColor = '#4285f4') { function updateUI() { const [r, g, b] = hsvToRgb(h, s, v); const hex = rgbToHex(r, g, b); - // Use rendered size so cursor matches the visible palette area + // Use rendered rects to position cursor relative to the picker container const svRect = svCanvas.getBoundingClientRect(); + const pickerRect = picker.getBoundingClientRect(); const hueRect = hueCanvas.getBoundingClientRect(); - // SV cursor position - svCursor.style.left = (s * svRect.width) + 'px'; - svCursor.style.top = ((1 - v) * svRect.height) + 'px'; - // Hue thumb position - hueThumb.style.left = (h / 360 * hueRect.width) + 'px'; + const hueTrackRect = hueTrack.getBoundingClientRect(); + // SV cursor: offset canvas position within picker + position within canvas + svCursor.style.left = (svRect.left - pickerRect.left + s * svRect.width) + 'px'; + svCursor.style.top = (svRect.top - pickerRect.top + (1 - v) * svRect.height) + 'px'; + // Hue thumb: offset canvas position within track + position within canvas + hueThumb.style.left = (hueRect.left - hueTrackRect.left + (h / 360) * hueRect.width) + 'px'; // Preview + hex preview.style.background = hex; hexInput.value = hex.toUpperCase();