feat: Picker-Tab mit Upload, Paste und Eyedropper

js/app.js

@@ -1,4 +1,5 @@
 import { initEingabe } from './eingabe.js';
+import { initPicker } from './picker.js';
 
 // Globaler State — aktive Farbe als { h, s, l } (HSL, 0-360, 0-100, 0-100)
 // state.color is read-only from outside — always use setColor() to update,
@@ -28,3 +29,4 @@ function addFavorit(hsl) { console.log('addFavorit', hsl); }
 function addColorToSchema(hsl) { console.log('addColorToSchema', hsl); }
 
 initEingabe(addFavorit, addColorToSchema);
+initPicker(addFavorit, addColorToSchema);

js/picker.js

@@ -0,0 +1,83 @@
+import { rgbToHex, rgbToHsl } from './converter.js';
+import { state } from './app.js';
+
+function rgbToDisplay({ r, g, b }) { return r + ', ' + g + ', ' + b; }
+function hslToDisplay({ h, s, l }) { return h + ', ' + s + '%, ' + l + '%'; }
+
+function showColor(r, g, b) {
+  const hex = rgbToHex({ r, g, b });
+  const hsl = rgbToHsl({ r, g, b });
+  state.setColor(hsl);
+  document.getElementById('picker-preview').style.background = hex;
+  document.getElementById('picker-hex').value = hex;
+  document.getElementById('picker-rgb').value = rgbToDisplay({ r, g, b });
+  document.getElementById('picker-hsl').value = hslToDisplay(hsl);
+  document.getElementById('picker-result').style.display = 'block';
+}
+
+function loadImage(file) {
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    const img = new Image();
+    img.onload = () => {
+      const canvas = document.getElementById('picker-canvas');
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext('2d');
+      ctx.drawImage(img, 0, 0);
+      canvas.style.display = 'block';
+
+      // Mittlerer Pixel als Vorschlag
+      const mx = Math.floor(img.width / 2);
+      const my = Math.floor(img.height / 2);
+      const px = ctx.getImageData(mx, my, 1, 1).data;
+      showColor(px[0], px[1], px[2]);
+
+      // Eyedropper: Klick wählt Pixel frei
+      canvas.onclick = (ev) => {
+        const rect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / rect.width;
+        const scaleY = canvas.height / rect.height;
+        const x = Math.floor((ev.clientX - rect.left) * scaleX);
+        const y = Math.floor((ev.clientY - rect.top) * scaleY);
+        const d = ctx.getImageData(x, y, 1, 1).data;
+        showColor(d[0], d[1], d[2]);
+      };
+    };
+    img.src = e.target.result;
+  };
+  reader.readAsDataURL(file);
+}
+
+export function initPicker(onSaveFavorit, onSaveSchema) {
+  const dropzone = document.getElementById('picker-dropzone');
+
+  document.getElementById('picker-file-trigger').addEventListener('click', () => {
+    document.getElementById('picker-file-input').click();
+  });
+
+  document.getElementById('picker-file-input').addEventListener('change', (e) => {
+    if (e.target.files[0]) loadImage(e.target.files[0]);
+  });
+
+  dropzone.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    dropzone.classList.add('drag-over');
+  });
+  dropzone.addEventListener('dragleave', () => dropzone.classList.remove('drag-over'));
+  dropzone.addEventListener('drop', (e) => {
+    e.preventDefault();
+    dropzone.classList.remove('drag-over');
+    const file = e.dataTransfer.files[0];
+    if (file && file.type.startsWith('image/')) loadImage(file);
+  });
+
+  // Paste (Strg+V / Cmd+V)
+  document.addEventListener('paste', (e) => {
+    const item = Array.from(e.clipboardData.items).find(i => i.type.startsWith('image/'));
+    if (item) loadImage(item.getAsFile());
+  });
+
+  document.getElementById('picker-fav-btn').addEventListener('click', () => onSaveFavorit(state.color));
+  document.getElementById('picker-schema-btn').addEventListener('click', () => onSaveSchema(state.color));
+}