Scarriffle/Calendarr
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: Color-Picker-Cursor korrekt auf Palette ausgerichtet

Browse Source 
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.
This commit is contained in:
Scarriffle
2026-04-13 09:22:42 +02:00
parent d6e67a97c8
commit 978ad55af4
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/js/color-picker.js
View File

@@ -128,14 +128,16 @@ export function openColorPicker(anchorEl, currentColor = '#4285f4') {
function updateUI() { function updateUI() {
const [r, g, b] = hsvToRgb(h, s, v); const [r, g, b] = hsvToRgb(h, s, v);
const hex = rgbToHex(r, g, b); 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 svRect = svCanvas.getBoundingClientRect();
const pickerRect = picker.getBoundingClientRect();
const hueRect = hueCanvas.getBoundingClientRect(); const hueRect = hueCanvas.getBoundingClientRect();
// SV cursor position const hueTrackRect = hueTrack.getBoundingClientRect();
svCursor.style.left = (s * svRect.width) + 'px'; // SV cursor: offset canvas position within picker + position within canvas
svCursor.style.top = ((1 - v) * svRect.height) + 'px'; svCursor.style.left = (svRect.left - pickerRect.left + s * svRect.width) + 'px';
// Hue thumb position svCursor.style.top = (svRect.top - pickerRect.top + (1 - v) * svRect.height) + 'px';
hueThumb.style.left = (h / 360 * hueRect.width) + '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 + hex
preview.style.background = hex; preview.style.background = hex;
hexInput.value = hex.toUpperCase(); hexInput.value = hex.toUpperCase();