refactor(fe): reset view mode onBeforeUnmount

packages/frontend-2/components/viewer/Base.vue

@@ -8,6 +8,7 @@
 <script setup lang="ts">
 import { useInjectedViewer } from '~~/lib/viewer/composables/setup'
 import { useCommentContext } from '~~/lib/viewer/composables/commentManagement'
+import { useViewModeUtilities } from '~/lib/viewer/composables/ui'
 
 const rendererparent = ref<HTMLElement>()
 const {
@@ -17,6 +18,7 @@ const {
 } = useInjectedViewer()
 
 const { cleanupThreadContext } = useCommentContext()
+const { resetViewMode } = useViewModeUtilities()
 
 onMounted(async () => {
   if (!import.meta.client) return
@@ -34,6 +36,7 @@ onBeforeUnmount(() => {
   if (!import.meta.client) return
   container.style.display = 'none'
   cleanupThreadContext()
+  resetViewMode()
   document.body.appendChild(container)
 })
 </script>

packages/frontend-2/lib/viewer/composables/ui.ts

@@ -531,7 +531,6 @@ export function useViewModeUtilities() {
   const { viewMode } = useInjectedViewerInterfaceState()
   const { isLightTheme } = useTheme()
   const mp = useMixpanel()
-  const logger = useLogger()
 
   const edgesEnabled = ref(true)
   const edgesWeight = ref(1)
@@ -607,58 +606,15 @@ export function useViewModeUtilities() {
       color: color.toString(16).padStart(6, '0')
     })
   }
-  // Get the current view mode from the extension and sync the UI state
-  const initializeFromViewerState = () => {
-    try {
-      const viewModesExt = instance.getExtension(ViewModes)
-      if (viewModesExt) {
-        const extensionViewMode = viewModesExt.viewMode
-        if (extensionViewMode !== undefined) {
-          viewMode.value = extensionViewMode
-        }
 
-        const renderer = instance.getRenderer()
-        const currentPipeline = renderer?.pipeline
-
-        if (currentPipeline && currentPipeline.options) {
-          const currentOptions = currentPipeline.options as Record<string, unknown>
-
-          if (typeof currentOptions.edges === 'boolean') {
-            edgesEnabled.value = currentOptions.edges
-          }
-
-          const edgesPasses = currentPipeline.getPass('EDGES')
-          if (edgesPasses.length > 0) {
-            const edgesPass = edgesPasses[0] as unknown as Record<string, unknown>
-            const edgesPassOptions = edgesPass._options as Record<string, unknown>
-
-            if (
-              edgesPassOptions &&
-              typeof edgesPassOptions.outlineThickness === 'number'
-            ) {
-              edgesWeight.value = edgesPassOptions.outlineThickness
-            }
-            if (
-              edgesPassOptions &&
-              typeof edgesPassOptions.outlineOpacity === 'number'
-            ) {
-              outlineOpacity.value = edgesPassOptions.outlineOpacity
-            }
-            if (edgesPassOptions && typeof edgesPassOptions.outlineColor === 'number') {
-              edgesColor.value = edgesPassOptions.outlineColor
-            }
-          }
-        }
-      }
-    } catch (error) {
-      logger.warn('Could not initialize from viewer state, using defaults:', error)
-    }
+  const resetViewMode = () => {
+    setViewMode(ViewMode.DEFAULT)
+    edgesEnabled.value = true
+    edgesWeight.value = 1
+    outlineOpacity.value = 0.75
+    edgesColor.value = defaultColor.value
   }
 
-  onMounted(() => {
-    initializeFromViewerState()
-  })
-
   return {
     currentViewMode,
     setViewMode,
@@ -667,7 +623,8 @@ export function useViewModeUtilities() {
     edgesWeight,
     setEdgesWeight,
     setEdgesColor,
-    edgesColor
+    edgesColor,
+    resetViewMode
   }
 }