persist viewer preferences

packages/viewer/src/store/use-viewer.ts

@@ -10,6 +10,7 @@ import type {
 import type { Object3D } from "three";
 
 import { create } from "zustand";
+import { persist } from "zustand/middleware";
 
 type SelectionPath = {
   buildingId: BuildingNode["id"] | null;
@@ -57,62 +58,76 @@ type ViewerState = {
   setCameraDragging: (dragging: boolean) => void
 }
 
-const useViewer = create<ViewerState>()((set, get) => ({
+const useViewer = create<ViewerState>()(
-  selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+  persist(
-  hoveredId: null,
+    (set) => ({
-  setHoveredId: (id) => set({ hoveredId: id }),
+      selection: { buildingId: null, levelId: null, zoneId: null, selectedIds: [] },
+      hoveredId: null,
+      setHoveredId: (id) => set({ hoveredId: id }),
 
-  cameraMode: "perspective",
+      cameraMode: "perspective",
-  setCameraMode: (mode) => set({ cameraMode: mode }),
+      setCameraMode: (mode) => set({ cameraMode: mode }),
 
-  levelMode: "stacked",
+      levelMode: "stacked",
-  setLevelMode: (mode) => set({ levelMode: mode }),
+      setLevelMode: (mode) => set({ levelMode: mode }),
 
-  wallMode: 'cutaway',
+      wallMode: 'cutaway',
-  setWallMode: (mode) => set({ wallMode: mode }),
+      setWallMode: (mode) => set({ wallMode: mode }),
 
-  showScans: true,
+      showScans: true,
-  setShowScans: (show) => set({ showScans: show }),
+      setShowScans: (show) => set({ showScans: show }),
 
-  showGuides: true,
+      showGuides: true,
-  setShowGuides: (show) => set({ showGuides: show }),
+      setShowGuides: (show) => set({ showGuides: show }),
 
-  setSelection: (updates) =>
+      setSelection: (updates) =>
-    set((state) => {
+        set((state) => {
-      const newSelection = { ...state.selection, ...updates };
+          const newSelection = { ...state.selection, ...updates };
 
-      // Hierarchy Guard: If we change a high-level parent, reset the children
+          // Hierarchy Guard: If we change a high-level parent, reset the children
-      if (updates.buildingId !== undefined) {
+          if (updates.buildingId !== undefined) {
-        newSelection.levelId = null;
+            newSelection.levelId = null;
-        newSelection.zoneId = null;
+            newSelection.zoneId = null;
-        newSelection.selectedIds = [];
+            newSelection.selectedIds = [];
-      } else if (updates.levelId !== undefined) {
+          } else if (updates.levelId !== undefined) {
-        newSelection.zoneId = null;
+            newSelection.zoneId = null;
-        newSelection.selectedIds = [];
+            newSelection.selectedIds = [];
-      } else if (updates.zoneId !== undefined) {
+          } else if (updates.zoneId !== undefined) {
-        newSelection.selectedIds = [];
+            newSelection.selectedIds = [];
-      }
+          }
 
-      return { selection: newSelection };
+          return { selection: newSelection };
+        }),
+
+      resetSelection: () =>
+        set({
+          selection: {
+            buildingId: null,
+            levelId: null,
+            zoneId: null,
+            selectedIds: [],
+          },
+        }),
+
+      outliner: { selectedObjects: [], hoveredObjects: [] },
+
+      exportScene: null,
+      setExportScene: (fn) => set({ exportScene: fn }),
+
+      cameraDragging: false,
+      setCameraDragging: (dragging) => set({ cameraDragging: dragging }),
     }),
-
+    {
-  resetSelection: () =>
+      name: 'viewer-preferences',
-    set({
+      partialize: (state) => ({
-      selection: {
+        cameraMode: state.cameraMode,
-        buildingId: null,
+        levelMode: state.levelMode,
-        levelId: null,
+        wallMode: state.wallMode,
-        zoneId: null,
+        showScans: state.showScans,
-        selectedIds: [],
+        showGuides: state.showGuides,
-      },
+      }),
-    }),
+    },
-
+  ),
-  outliner: { selectedObjects: [], hoveredObjects: [] },
+);
-
-  exportScene: null,
-  setExportScene: (fn) => set({ exportScene: fn }),
-
-  cameraDragging: false,
-  setCameraDragging: (dragging) => set({ cameraDragging: dragging }),
-}));
 
 export default useViewer;