feat: save/load settings with export/import and auto-save

Add preset export/import via .bumpmesh files (ZIP containing settings,
optional model STL, optional custom texture PNG). Two icon buttons in
the header open an export dialog with checkboxes and a file picker.

- Export dialog lets users choose what to include (settings always,
  model and custom texture optionally)
- Import via file picker or drag & drop of .bumpmesh files
- Auto-save to localStorage on every settings change, restore on reload
- Uses fflate (already bundled) for ZIP creation/extraction
- Full i18n support (EN/DE) for all new UI elements

Author: Avatarsia

index.html

@@ -44,6 +44,21 @@
       <span>BumpMesh <small style="opacity:.6;font-weight:400">by CNC Kitchen</small></span>
     </div>
     <div class="header-actions">
+      <div class="preset-io">
+        <button id="export-settings-btn" class="icon-btn" data-i18n-title="header.exportSettings" title="Export settings">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+        </button>
+        <input type="file" id="import-settings-input" accept=".bumpmesh,.json" hidden />
+        <label for="import-settings-input" class="icon-btn" data-i18n-title="header.importSettings" title="Import settings" role="button" tabindex="0">
+          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+        </label>
+        <div id="export-dialog" class="export-dialog hidden">
+          <label><input type="checkbox" id="export-settings-chk" checked disabled /> <span data-i18n="header.exportSettingsLabel">Settings</span></label>
+          <label><input type="checkbox" id="export-model-chk" /> <span data-i18n="header.exportModelLabel">Model (STL)</span></label>
+          <label id="export-texture-row" class="hidden"><input type="checkbox" id="export-texture-chk" /> <span data-i18n="header.exportTextureLabel">Custom Texture</span></label>
+          <button id="export-go-btn" class="export-go-btn" data-i18n="header.exportGo">Export</button>
+        </div>
+      </div>
       <div class="lang-seg">
         <button class="lang-btn active" data-lang-code="en">EN</button>
         <button class="lang-btn" data-lang-code="de">DE</button>

js/i18n.js

@@ -9,6 +9,17 @@ export const TRANSLATIONS = {
     'theme.toggleTitle':       'Toggle light / dark mode',
     'theme.toggleAriaLabel':   'Toggle light/dark mode',
 
+    // Export / Import settings
+    'header.exportSettings':     'Export settings',
+    'header.importSettings':     'Import settings',
+    'header.exportSettingsLabel':'Settings',
+    'header.exportModelLabel':   'Model (STL)',
+    'header.exportTextureLabel': 'Custom Texture',
+    'header.exportGo':           'Export',
+    'alerts.importSuccess':      'Settings imported successfully',
+    'alerts.importFailed':       'Failed to import settings: {msg}',
+    'alerts.importNoFile':       'No .bumpmesh file selected',
+
     // Drop zone
     'dropHint.text': 'Drop an <strong>.stl</strong>, <strong>.obj</strong> or <strong>.3mf</strong> file here<br/>or <label for="stl-file-input" class="link-label">click to browse</label>',
 
@@ -194,6 +205,17 @@ export const TRANSLATIONS = {
     'theme.toggleTitle':       'Hell/Dunkel-Modus wechseln',
     'theme.toggleAriaLabel':   'Hell/Dunkel-Modus wechseln',
 
+    // Export / Import Einstellungen
+    'header.exportSettings':     'Einstellungen exportieren',
+    'header.importSettings':     'Einstellungen importieren',
+    'header.exportSettingsLabel':'Einstellungen',
+    'header.exportModelLabel':   'Modell (STL)',
+    'header.exportTextureLabel': 'Eigene Textur',
+    'header.exportGo':           'Exportieren',
+    'alerts.importSuccess':      'Einstellungen erfolgreich importiert',
+    'alerts.importFailed':       'Import fehlgeschlagen: {msg}',
+    'alerts.importNoFile':       'Keine .bumpmesh-Datei ausgewählt',
+
     // Drop zone
     'dropHint.text': '<strong>.stl</strong>-, <strong>.obj</strong>- oder <strong>.3mf</strong>-Datei hier ablegen<br/>oder <label for="stl-file-input" class="link-label">zum Durchsuchen klicken</label>',
 

js/main.js

@@ -12,6 +12,7 @@ import { exportSTL }          from './exporter.js';
 import { buildAdjacency, bucketFill,
          buildExclusionOverlayGeo, buildFaceWeights } from './exclusion.js';
 import { t, initLang, setLang, getLang, applyTranslations } from './i18n.js';
+import { zipSync, unzipSync, strToU8, strFromU8 } from 'fflate';
 
 // ── State ─────────────────────────────────────────────────────────────────────
 
@@ -370,6 +371,8 @@ function wireEvents() {
   dropZone.addEventListener('drop', (e) => {
     e.preventDefault();
     dropZone.classList.remove('drag-over');
+    const bmFile = [...e.dataTransfer.files].find(f => /\.bumpmesh$/i.test(f.name));
+    if (bmFile) { importBumpmesh(bmFile); return; }
     const file = [...e.dataTransfer.files].find(f => /\.(stl|obj|3mf)$/i.test(f.name));
     if (file) handleModelFile(file);
   });
@@ -1676,6 +1679,8 @@ function updatePreview() {
   }
 
   exportBtn.disabled = false;
+
+  _saveToLocalStorage();
 }
 
 // ── Displacement preview ──────────────────────────────────────────────────────
@@ -2260,3 +2265,237 @@ function runAsync(fn) {
 function yieldFrame() {
   return new Promise(r => requestAnimationFrame(r));
 }
+
+// ── Export/Import Settings (.bumpmesh) ───────────────────────────────────────
+
+const exportSettingsBtn = document.getElementById('export-settings-btn');
+const exportDialog      = document.getElementById('export-dialog');
+const exportGoBtn       = document.getElementById('export-go-btn');
+const exportModelChk    = document.getElementById('export-model-chk');
+const exportTextureChk  = document.getElementById('export-texture-chk');
+const exportTextureRow  = document.getElementById('export-texture-row');
+const importInput       = document.getElementById('import-settings-input');
+
+// Export dialog toggle
+exportSettingsBtn.addEventListener('click', () => {
+  exportDialog.classList.toggle('hidden');
+  // Show texture checkbox only if custom texture is loaded
+  exportTextureRow.classList.toggle('hidden', !activeMapEntry || !activeMapEntry.isCustom);
+  // Enable model checkbox only if a model is loaded
+  exportModelChk.disabled = !currentGeometry;
+});
+
+// Close dialog when clicking outside
+document.addEventListener('click', (e) => {
+  if (!exportDialog.contains(e.target) && e.target !== exportSettingsBtn && !exportSettingsBtn.contains(e.target)) {
+    exportDialog.classList.add('hidden');
+  }
+});
+
+// Export: build .bumpmesh ZIP and download
+exportGoBtn.addEventListener('click', async () => {
+  exportDialog.classList.add('hidden');
+
+  const includeModel = exportModelChk.checked && currentGeometry;
+  const includeTexture = exportTextureChk.checked && activeMapEntry && activeMapEntry.isCustom;
+
+  const data = {
+    version: 1,
+    texture: activeMapEntry ? activeMapEntry.name : null,
+    settings: { ...settings },
+  };
+
+  const zipFiles = {};
+
+  // Settings JSON (always included)
+  zipFiles['settings.json'] = strToU8(JSON.stringify(data, null, 2));
+
+  // Model as binary STL
+  if (includeModel) {
+    const posArr = currentGeometry.attributes.position.array;
+    const norArr = currentGeometry.attributes.normal ? currentGeometry.attributes.normal.array : null;
+    const triCount = (posArr.length / 9) | 0;
+    const buf = new ArrayBuffer(84 + 50 * triCount);
+    const bytes = new Uint8Array(buf);
+    const view = new DataView(buf);
+    view.setUint32(80, triCount, true);
+    if (norArr) {
+      const posSrc = new Uint8Array(posArr.buffer, posArr.byteOffset, posArr.byteLength);
+      const norSrc = new Uint8Array(norArr.buffer, norArr.byteOffset, norArr.byteLength);
+      for (let i = 0; i < triCount; i++) {
+        const dst = 84 + i * 50, srcOff = i * 36;
+        bytes.set(norSrc.subarray(srcOff, srcOff + 12), dst);
+        bytes.set(posSrc.subarray(srcOff, srcOff + 36), dst + 12);
+      }
+    }
+    zipFiles['model.stl'] = new Uint8Array(buf);
+  }
+
+  // Custom texture as PNG
+  if (includeTexture && activeMapEntry.fullCanvas) {
+    const blob = await new Promise(r => activeMapEntry.fullCanvas.toBlob(r, 'image/png'));
+    const arrBuf = await blob.arrayBuffer();
+    zipFiles['texture.png'] = new Uint8Array(arrBuf);
+  }
+
+  // Create ZIP and download
+  const zipped = zipSync(zipFiles);
+  const blob = new Blob([zipped], { type: 'application/octet-stream' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = (currentStlName || 'bumpmesh') + '.bumpmesh';
+  a.style.display = 'none';
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  setTimeout(() => URL.revokeObjectURL(url), 10000);
+});
+
+// Import: file input handler
+importInput.addEventListener('change', async (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+  importInput.value = ''; // reset for re-import
+  try {
+    await importBumpmesh(file);
+  } catch (err) {
+    alert(t('alerts.importFailed', { msg: err.message }));
+  }
+});
+
+async function importBumpmesh(file) {
+  const buf = await file.arrayBuffer();
+  const unzipped = unzipSync(new Uint8Array(buf));
+
+  // 1. Settings
+  if (unzipped['settings.json']) {
+    const json = JSON.parse(strFromU8(unzipped['settings.json']));
+    if (json.settings) {
+      // Apply settings to sliders/controls
+      for (const [key, value] of Object.entries(json.settings)) {
+        if (key in settings) settings[key] = value;
+      }
+      // Update all UI elements to reflect new settings
+      _syncUIFromSettings();
+    }
+    // Select texture preset if it matches
+    if (json.texture && !unzipped['texture.png']) {
+      _selectPresetByName(json.texture);
+    }
+  }
+
+  // 2. Model
+  if (unzipped['model.stl']) {
+    const stlBlob = new Blob([unzipped['model.stl']], { type: 'application/octet-stream' });
+    const stlFile = new File([stlBlob], 'model.stl');
+    await handleModelFile(stlFile);
+  }
+
+  // 3. Custom texture
+  if (unzipped['texture.png']) {
+    const texBlob = new Blob([unzipped['texture.png']], { type: 'image/png' });
+    const texFile = new File([texBlob], 'custom-texture.png');
+    activeMapEntry = await loadCustomTexture(texFile);
+    activeMapEntry.isCustom = true;
+    // Update preview
+    updatePreview();
+  }
+}
+
+// ── Helper: Sync UI from Settings ────────────────────────────────────────────
+
+function _syncUIFromSettings() {
+  // Mapping mode
+  if (mappingSelect) mappingSelect.value = settings.mappingMode;
+  capAngleRow.style.display = settings.mappingMode === 3 ? '' : 'none';
+
+  // Scale sliders (logarithmic — convert value to slider position)
+  scaleUSlider.value = scaleToPos(settings.scaleU);
+  scaleUVal.value = settings.scaleU;
+  scaleVSlider.value = scaleToPos(settings.scaleV);
+  scaleVVal.value = settings.scaleV;
+
+  // Linear sliders + their value displays
+  const sliderMap = {
+    'amplitude': 'amplitude',
+    'offset-u': 'offsetU',
+    'offset-v': 'offsetV',
+    'rotation': 'rotation',
+    'refine-length': 'refineLength',
+    'bottom-angle-limit': 'bottomAngleLimit',
+    'top-angle-limit': 'topAngleLimit',
+    'seam-blend': 'mappingBlend',
+    'seam-band-width': 'seamBandWidth',
+    'texture-smoothing': 'textureSmoothing',
+    'cap-angle': 'capAngle',
+  };
+  for (const [sliderId, settingKey] of Object.entries(sliderMap)) {
+    const slider = document.getElementById(sliderId);
+    if (slider) {
+      slider.value = settings[settingKey];
+      slider.dispatchEvent(new Event('input', { bubbles: true }));
+    }
+  }
+
+  // Checkboxes
+  if (symmetricDispToggle) symmetricDispToggle.checked = settings.symmetricDisplacement;
+
+  // Lock scale button
+  if (lockScaleBtn) {
+    lockScaleBtn.classList.toggle('active', settings.lockScale);
+    lockScaleBtn.setAttribute('aria-pressed', String(settings.lockScale));
+  }
+
+  // Max triangles slider
+  if (maxTriSlider) {
+    maxTriSlider.value = settings.maxTriangles;
+    maxTriSlider.dispatchEvent(new Event('input', { bubbles: true }));
+  }
+}
+
+// ── Helper: Select Preset by Name ────────────────────────────────────────────
+
+function _selectPresetByName(name) {
+  const swatches = document.querySelectorAll('.preset-swatch');
+  for (const swatch of swatches) {
+    if (swatch.title === name || swatch.querySelector('.preset-label')?.textContent === name) {
+      swatch.click();
+      return;
+    }
+  }
+}
+
+// ── Auto-Save (localStorage) ─────────────────────────────────────────────────
+
+const STORAGE_KEY = 'bumpmesh-settings';
+
+function _saveToLocalStorage() {
+  const data = {
+    version: 1,
+    texture: activeMapEntry ? activeMapEntry.name : null,
+    settings: { ...settings },
+  };
+  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(data)); } catch (e) { /* quota exceeded, ignore */ }
+}
+
+function _loadFromLocalStorage() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (!raw) return;
+    const data = JSON.parse(raw);
+    if (data.settings) {
+      for (const [key, value] of Object.entries(data.settings)) {
+        if (key in settings) settings[key] = value;
+      }
+      // Defer UI sync until DOM is ready
+      requestAnimationFrame(() => {
+        _syncUIFromSettings();
+        if (data.texture) _selectPresetByName(data.texture);
+      });
+    }
+  } catch (e) { /* corrupted data, ignore */ }
+}
+
+// Restore settings from localStorage on startup
+_loadFromLocalStorage();

style.css

@@ -1139,4 +1139,70 @@ input[type="number"].val:focus { outline: none; border-color: var(--accent); }
   background: var(--border);
   border-color: var(--accent);
   color: var(--text);
-}
+}
+
+/* ── Preset I/O (export/import settings) ──────────────────────────────── */
+.preset-io {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.icon-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  border-radius: 6px;
+  transition: background 0.15s;
+}
+.icon-btn:hover { background: rgba(255,255,255,0.1); }
+[data-theme="light"] .icon-btn:hover { background: rgba(0,0,0,0.08); }
+
+.export-dialog {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 6px;
+  background: var(--bg-sidebar, #1e1e2e);
+  border: 1px solid rgba(255,255,255,0.12);
+  border-radius: 8px;
+  padding: 10px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: 180px;
+  z-index: 100;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.3);
+}
+.export-dialog.hidden { display: none; }
+[data-theme="light"] .export-dialog {
+  background: #fff;
+  border-color: rgba(0,0,0,0.12);
+  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
+}
+.export-dialog label {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 0.85em;
+  cursor: pointer;
+}
+.export-go-btn {
+  margin-top: 4px;
+  padding: 5px 12px;
+  border: none;
+  border-radius: 5px;
+  background: var(--accent, #6c8cff);
+  color: #fff;
+  cursor: pointer;
+  font-size: 0.85em;
+  font-weight: 500;
+  transition: background 0.15s;
+}
+.export-go-btn:hover { filter: brightness(1.15); }