Merge pull request #184 from jgphilpott/copilot/add-folder-position-memory

Persist lil-gui folder open/closed states and improve reset icon UX in visualizer

Author: jgphilpott

examples/visualizer/modules/interactions.js

@@ -6,6 +6,9 @@
 import * as THREE from 'three';
 import { focusCameraOnPoint } from './camera.js';
 
+// Duration of the reset icon spin animation in milliseconds (matches CSS).
+const SPIN_ANIMATION_DURATION_MS = 500;
+
 /**
  * Setup main event listeners for upload, download, and reset buttons.
  */
@@ -24,7 +27,22 @@ export function setupEventListeners(handleFileUploadCallback, handleDownloadCall
   document.getElementById('download').addEventListener('click', handleDownloadCallback);
 
   // Reset button
-  document.getElementById('reset').addEventListener('click', resetViewCallback);
+  document.getElementById('reset').addEventListener('click', () => {
+    if (confirm('Are you sure you want to reset? This will restore all settings to their default values.')) {
+      const resetIcon = document.getElementById('reset');
+      // Force a reflow so the animation restarts even if clicked while still spinning.
+      resetIcon.classList.remove('spinning');
+      void resetIcon.offsetWidth;
+      resetIcon.classList.add('spinning');
+      // Remove the class when the animation ends; timeout fallback handles
+      // cases where animationend never fires (e.g. prefers-reduced-motion).
+      let spinTimeout;
+      const cleanup = () => { clearTimeout(spinTimeout); resetIcon.classList.remove('spinning'); };
+      resetIcon.addEventListener('animationend', cleanup, { once: true });
+      spinTimeout = setTimeout(cleanup, SPIN_ANIMATION_DURATION_MS + 100);
+      resetViewCallback();
+    }
+  });
 }
 
 /**

examples/visualizer/modules/state.js

@@ -180,3 +180,40 @@ export function clearSlicingSettings() {
     console.warn('Failed to clear slicing settings from localStorage:', error);
   }
 }
+
+/**
+ * Save folder open/closed states to localStorage.
+ */
+export function saveFolderStates(states) {
+  try {
+    localStorage.setItem('visualizer-folder-states', JSON.stringify(states));
+  } catch (error) {
+    console.warn('Failed to save folder states to localStorage:', error);
+  }
+}
+
+/**
+ * Load folder open/closed states from localStorage.
+ */
+export function loadFolderStates() {
+  try {
+    const saved = localStorage.getItem('visualizer-folder-states');
+    if (saved) {
+      return JSON.parse(saved);
+    }
+  } catch (error) {
+    console.warn('Failed to load folder states from localStorage:', error);
+  }
+  return null;
+}
+
+/**
+ * Clear folder open/closed states from localStorage.
+ */
+export function clearFolderStates() {
+  try {
+    localStorage.removeItem('visualizer-folder-states');
+  } catch (error) {
+    console.warn('Failed to clear folder states from localStorage:', error);
+  }
+}

examples/visualizer/modules/ui.js

@@ -4,7 +4,7 @@
  */
 
 import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-import { saveSlicingSettings, loadSlicingSettings } from './state.js';
+import { saveSlicingSettings, loadSlicingSettings, saveFolderStates, loadFolderStates } from './state.js';
 
 /**
  * Create the legends for movement types and axes.
@@ -166,7 +166,15 @@ export function createSlicingGUI(sliceCallback, useDefaults = false, rotateCallb
 
   slicingGUI = new GUI({ title: 'Slicer' });
 
-  let h = slicingGUI.addFolder('Model Rotation');
+  // Build a named folder map to avoid relying on lil-gui private properties.
+  // Each entry tracks the folder reference and its current open state.
+  const folderMap = {};
+  const trackFolder = (title, folder, defaultOpen) => {
+    folderMap[title] = { folder, isOpen: defaultOpen };
+    return folder;
+  };
+
+  let h = trackFolder('Model Rotation', slicingGUI.addFolder('Model Rotation'), true);
   h.add(params, 'rotationX', -180, 180, 1).name('Rotation X (°)').onChange((value) => {
     saveSlicingSettings(params);
     if (rotateCallback) rotateCallback('x', value);
@@ -187,26 +195,26 @@ export function createSlicingGUI(sliceCallback, useDefaults = false, rotateCallb
     rotateCallback('z', params.rotationZ);
   }
 
-  h = slicingGUI.addFolder('Printer & Filament');
+  h = trackFolder('Printer & Filament', slicingGUI.addFolder('Printer & Filament'), true);
   h.add(params, 'printer', PRINTER_OPTIONS).name('Printer').onChange(() => saveSlicingSettings(params));
   h.add(params, 'filament', FILAMENT_OPTIONS).name('Filament').onChange(() => saveSlicingSettings(params));
   h.add(params, 'nozzleTemperature', 150, 300, 5).name('Nozzle Temp (°C)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'bedTemperature', 0, 120, 5).name('Bed Temp (°C)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'fanSpeed', 0, 100, 5).name('Fan Speed (%)').onFinishChange(() => saveSlicingSettings(params));
 
-  h = slicingGUI.addFolder('Slicer Settings');
+  h = trackFolder('Slicer Settings', slicingGUI.addFolder('Slicer Settings'), true);
   h.add(params, 'shellWallThickness', 0.4, 2.0, 0.4).name('Shell Wall Thickness (mm)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'shellSkinThickness', 0.4, 2.0, 0.4).name('Shell Skin Thickness (mm)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'layerHeight', 0.1, 0.4, 0.05).name('Layer Height (mm)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'infillDensity', 0, 100, 5).name('Infill Density (%)').onFinishChange(() => saveSlicingSettings(params));
   h.add(params, 'infillPattern', INFILL_PATTERN_OPTIONS).name('Infill Pattern').onChange(() => saveSlicingSettings(params));
 
-  h = slicingGUI.addFolder('Adhesion');
+  h = trackFolder('Adhesion', slicingGUI.addFolder('Adhesion'), false);
   h.add(params, 'adhesionEnabled').name('Adhesion Enabled').onChange(() => saveSlicingSettings(params));
   h.add(params, 'adhesionType', ['skirt', 'brim', 'raft']).name('Adhesion Type').onChange(() => saveSlicingSettings(params));
   h.close();
 
-  h = slicingGUI.addFolder('Support');
+  h = trackFolder('Support', slicingGUI.addFolder('Support'), false);
   h.add(params, 'supportEnabled').name('Support Enabled').onChange(() => saveSlicingSettings(params));
   h.add(params, 'supportType', ['normal', 'tree']).name('Support Type').onChange(() => saveSlicingSettings(params));
   h.add(params, 'supportPlacement', ['buildPlate', 'everywhere']).name('Support Placement').onChange(() => saveSlicingSettings(params));
@@ -216,6 +224,28 @@ export function createSlicingGUI(sliceCallback, useDefaults = false, rotateCallb
   slicingGUI.add(params, 'slice').name('Slice');
   slicingGUI.open();
 
+  // Collect the current open/closed state of all folders.
+  const collectFolderStates = () =>
+    Object.fromEntries(Object.entries(folderMap).map(([title, entry]) => [title, entry.isOpen]));
+
+  // Apply saved folder states (skipped when resetting to defaults), then
+  // attach a click listener to each folder title to persist state on toggle.
+  const savedFolderStates = useDefaults ? null : loadFolderStates();
+  for (const [title, entry] of Object.entries(folderMap)) {
+    if (savedFolderStates && title in savedFolderStates) {
+      entry.isOpen = savedFolderStates[title];
+      if (entry.isOpen) {
+        entry.folder.open();
+      } else {
+        entry.folder.close();
+      }
+    }
+    entry.folder.$title.addEventListener('click', () => {
+      entry.isOpen = !entry.isOpen;
+      saveFolderStates(collectFolderStates());
+    });
+  }
+
   // Store params on the GUI instance for access in sliceModel
   slicingGUI.userData = params;
 

examples/visualizer/visualizer.css

@@ -52,6 +52,16 @@ body {
   transform: scale(1.1);
 }
 
+@keyframes spin-once {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+#reset.spinning {
+  animation: spin-once 0.5s ease-in-out;
+  transition: none;
+}
+
 .icon-row {
   display: flex;
   flex-direction: row;

examples/visualizer/visualizer.js

@@ -28,7 +28,7 @@ import {
   showGCodeLegends,
   updateDownloadButtonVisibility
 } from './modules/ui.js';
-import { clearSlicingSettings, saveCheckboxStates, saveAxisCheckboxStates, saveSettingsStates, saveSlicingSettings } from './modules/state.js';
+import { clearSlicingSettings, clearFolderStates, saveCheckboxStates, saveAxisCheckboxStates, saveSettingsStates, saveSlicingSettings } from './modules/state.js';
 import { centerCamera, resetCameraToDefault } from './modules/camera.js';
 import {
   setupMovementTypeToggles,
@@ -481,6 +481,7 @@ function resetView() {
 
   // Reset slicing settings
   clearSlicingSettings();
+  clearFolderStates();
 
   // Detach TransformControls before resetting rotation.
   if (transformControls) {