fix: improve fullscreen mode

packages/client/components/FullscreenButton.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { useDevToolsClient } from '../logic/client'
 
-const isFullscreen = ref(false)
+const { viewMode } = useFrameState()
 const client = useDevToolsClient()
-
+const isFullscreen = computed(() => viewMode.value === 'fullscreen')
 function toggleFullscreen() {
   client.value.panel?.toggleViewMode(isFullscreen.value ? 'default' : 'fullscreen')
-  isFullscreen.value = !isFullscreen.value
 }
 </script>
 

packages/client/composables/state.ts

@@ -12,6 +12,7 @@ export interface DevToolsFrameState {
   isFirstVisit: boolean
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
+  viewMode: ViewMode
 }
 
 const frameState = useLocalStorage<DevToolsFrameState>(FRAME_STATE_STORAGE_KEY, {
@@ -25,6 +26,7 @@ const frameState = useLocalStorage<DevToolsFrameState>(FRAME_STATE_STORAGE_KEY,
   isFirstVisit: true,
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
+  viewMode: 'default',
 }, { mergeDefaults: true })
 
 const frameStateRefs = toRefs(frameState)

packages/node/src/views/FrameBox.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
       disable: () => void
     } | undefined
   }
-  viewMode: 'xs' | 'default' | 'fullscreen'
+  viewMode: ViewMode
 }>()
 
 const container = ref<HTMLElement>()

packages/node/src/views/Main.vue

@@ -6,7 +6,7 @@ import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import { DevToolsHooks, collectDevToolsHookBuffer } from '@vite-plugin-vue-devtools/core'
 import Frame from './FrameBox.vue'
 import ComponentInspector from './ComponentInspector.vue'
-import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition, useRerenderHighlight } from './composables'
+import { useHighlightComponent, useIframe, useInspector, usePanelState, usePanelVisible, usePiPMode, usePosition, useRerenderHighlight } from './composables'
 import { checkIsSafari, useColorScheme, usePreferredColorScheme, warn } from './utils'
 import RerenderIndicator from './RerenderIndicator.vue'
 
@@ -22,15 +22,11 @@ const hook = props.hook
 const { hookBuffer, collect } = collectDevToolsHookBuffer()
 
 let isAppCreated = false
-const panelState = ref<{
-  viewMode: ViewMode
-}>({
-  viewMode: 'default',
-})
 
 const { togglePanelVisible, closePanel, panelVisible } = usePanelVisible()
 const panelEl = ref<HTMLDivElement>()
 const { onPointerDown, bringUp, anchorStyle, iframeStyle, isDragging, isVertical, isHidden, panelStyle } = usePosition(panelEl)
+const { viewMode, toggleViewMode } = usePanelState()
 const vars = computed(() => {
   const colorScheme = useColorScheme()
   const dark = colorScheme.value === 'auto'
@@ -91,9 +87,7 @@ async function setupClient(iframe: HTMLIFrameElement) {
     hook,
     hookBuffer,
     panel: {
-      toggleViewMode: (mode?: ViewMode) => {
-        panelState.value.viewMode = mode ?? 'default'
-      },
+      toggleViewMode,
       toggle: togglePanelVisible,
       popup,
     },
@@ -237,7 +231,7 @@ collectHookBuffer()
     :class="{
       'vue-devtools-vertical': isVertical,
       'vue-devtools-hide': isHidden,
-      'fullscreen': panelState.viewMode === 'fullscreen',
+      'fullscreen': viewMode === 'fullscreen',
     }"
     @mousemove="bringUp"
   >
@@ -284,7 +278,7 @@ collectHookBuffer()
         },
         getIFrame: getIframe,
       }"
-      :view-mode="panelState.viewMode"
+      :view-mode="viewMode"
     />
   </div>
   <!-- component inspector -->

packages/node/src/views/composables.ts

@@ -14,6 +14,7 @@ interface DevToolsFrameState {
   isFirstVisit: boolean
   closeOnOutsideClick: boolean
   minimizePanelInactive: number
+  viewMode: ViewMode
 }
 
 interface ComponentInspectorBounds {
@@ -41,6 +42,7 @@ export const state = useObjectStorage<DevToolsFrameState>('__vue-devtools-frame-
   isFirstVisit: true,
   closeOnOutsideClick: false,
   minimizePanelInactive: 5000,
+  viewMode: 'default',
 })
 
 // ---- useIframe ----
@@ -501,6 +503,29 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
   }
 }
 
+// ---- usePanelState ----
+export function usePanelState() {
+  const viewMode = computed({
+    get() {
+      return state.value.viewMode
+    },
+    set(value) {
+      state.value.viewMode = value
+    },
+  })
+  let perViewMode = viewMode.value
+
+  function toggleViewMode(mode: ViewMode) {
+    const newMode = mode ?? perViewMode
+    setTimeout(() => {
+      perViewMode = viewMode.value
+      viewMode.value = newMode
+    }, 0)
+  }
+
+  return { viewMode, toggleViewMode }
+}
+
 // ---- useHighlightComponent ----
 
 export function useHighlightComponent() {