-
Neues Farbschema
+
Neues Farbschema
diff --git a/js/app.js b/js/app.js
index 4cbd683..7441a05 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1,8 +1,8 @@
import { initEingabe } from './eingabe.js';
import { initPicker } from './picker.js';
import { initHarmonien } from './harmonien.js';
-import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema } from './collection.js';
-import { initSchemaModal } from './schema-modal.js';
+import { addFavorit, addColorToSchema, addToHistory, renderSammlung, exportCollection, importCollection, saveSchema, setEditSchemaHandler } from './collection.js';
+import { initSchemaModal, openForEdit } from './schema-modal.js';
// state.color is read-only from outside — always use setColor() to update,
// so that the colorChanged event is dispatched to all listening modules.
@@ -39,3 +39,4 @@ document.getElementById('sammlung-import-btn').addEventListener('click', importC
renderSammlung();
initSchemaModal(saveSchema);
+setEditSchemaHandler(openForEdit);
diff --git a/js/collection.js b/js/collection.js
index dd7d4c0..c98df95 100644
--- a/js/collection.js
+++ b/js/collection.js
@@ -1,6 +1,9 @@
import { hslToHex } from './converter.js';
const STORAGE_KEY = 'pigmento';
+
+let editSchemaHandler = null;
+export function setEditSchemaHandler(fn) { editSchemaHandler = fn; }
const HISTORY_MAX = 20;
function load() {
@@ -74,8 +77,11 @@ export function addColorToSchema(hsl) {
}
}
-export function saveSchema(name, farben, bild) {
+export function saveSchema(name, farben, bild, originalName) {
const data = load();
+ if (originalName && originalName !== name) {
+ data.schemata = data.schemata.filter(s => s.name !== originalName);
+ }
const existing = data.schemata.find(s => s.name === name);
if (existing) {
existing.farben = farben;
@@ -243,14 +249,25 @@ export function renderSammlung() {
nameEl.textContent = schema.name;
nameRow.appendChild(nameEl);
+ const editBtn = document.createElement('button');
+ editBtn.className = 'action-btn';
+ editBtn.textContent = 'Schema bearbeiten';
+ editBtn.style.fontSize = '0.75rem';
+ editBtn.addEventListener('click', () => editSchemaHandler?.(schema));
+
const delBtn = document.createElement('button');
delBtn.className = 'action-btn';
delBtn.textContent = 'Schema löschen';
delBtn.style.fontSize = '0.75rem';
delBtn.addEventListener('click', () => deleteSchema(schema.name));
+ const btnGroup = document.createElement('div');
+ btnGroup.style.cssText = 'display:flex;gap:0.4rem';
+ btnGroup.appendChild(editBtn);
+ btnGroup.appendChild(delBtn);
+
header.appendChild(nameRow);
- header.appendChild(delBtn);
+ header.appendChild(btnGroup);
const swatchesDiv = document.createElement('div');
swatchesDiv.style.cssText = 'display:flex;gap:0.5rem;flex-wrap:wrap';
diff --git a/js/schema-modal.js b/js/schema-modal.js
index 288523a..ab600d3 100644
--- a/js/schema-modal.js
+++ b/js/schema-modal.js
@@ -82,9 +82,11 @@ function extractDominantColors(dataUrl, callback) {
}
// Aktuell gesammelter Zustand des Modals
-let farben = []; // Array von HSL-Objekten
-let aktuelleHex = ''; // Hex-Wert des aktuellen Eingabefelds
-let vorschaubild = null; // Base64-String des Thumbnails oder null
+let farben = []; // Array von HSL-Objekten
+let aktuelleHex = ''; // Hex-Wert des aktuellen Eingabefelds
+let vorschaubild = null; // Base64-String des Thumbnails oder null
+let editOriginalName = null; // Name des zu bearbeitenden Schemas (null = neu)
+let savedOnSave = null; // onSave-Callback aus initSchemaModal
function compressToThumbnail(file) {
return new Promise((resolve) => {
@@ -120,6 +122,8 @@ function resetModal() {
document.getElementById('schema-vorschlag').style.display = 'none';
document.getElementById('schema-farbe-eingabe').style.display = 'none';
document.getElementById('schema-abschliessen-btn').disabled = true;
+ editOriginalName = null;
+ document.getElementById('schema-modal-title').textContent = 'Neues Farbschema';
const preview = document.getElementById('schema-bild-preview');
preview.style.backgroundImage = '';
preview.classList.remove('hat-bild');
@@ -223,7 +227,36 @@ function setAktuelleHex(hex) {
document.getElementById('schema-hex-preview').style.background = hex;
}
+export function openForEdit(schema) {
+ resetModal();
+ editOriginalName = schema.name;
+ document.getElementById('schema-modal-title').textContent = 'Schema bearbeiten';
+ document.getElementById('schema-name-input').value = schema.name;
+
+ if (schema.bild) {
+ vorschaubild = schema.bild;
+ const preview = document.getElementById('schema-bild-preview');
+ preview.style.backgroundImage = 'url(' + schema.bild + ')';
+ preview.classList.add('hat-bild');
+ document.getElementById('schema-bild-entfernen-btn').style.display = 'inline-block';
+ }
+
+ farben = schema.farben.map(hsl => ({ ...hsl }));
+ renderFarbenPreview();
+ document.getElementById('schema-abschliessen-btn').disabled = false;
+
+ if (farben.length < MAX_FARBEN) {
+ updateFarbeLabel();
+ document.getElementById('schema-farbe-eingabe').style.display = 'block';
+ }
+
+ document.getElementById('schema-modal-overlay').style.display = 'flex';
+ document.getElementById('schema-name-input').focus();
+}
+
export function initSchemaModal(onSave) {
+ savedOnSave = onSave;
+
// Button öffnet Modal
document.getElementById('schema-erstellen-btn').addEventListener('click', () => {
resetModal();
@@ -314,7 +347,7 @@ export function initSchemaModal(onSave) {
}
if (farben.length === 0) return;
- onSave(name, farben, vorschaubild);
+ savedOnSave(name, farben, vorschaubild, editOriginalName);
document.getElementById('schema-modal-overlay').style.display = 'none';
});