Skip to content
This repository has been archived by the owner on Jan 6, 2024. It is now read-only.

fix: improve fullscreen mode #217

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

fix: improve fullscreen mode #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f532052
fix: "Exit Fullscreen" button is invalid
OneGIl Aug 24, 2023
7ed5045
fix: disabled resize in non "default" view mode
OneGIl Aug 24, 2023
2b275f7
fix: set correct anchor position in fullscreen
OneGIl Aug 24, 2023
f836c07
fix: edge case
OneGIl Aug 30, 2023
0846d5f
chore: extracted "props.viewMode === 'default'"
OneGIl Sep 11, 2023
983717e
chore: remove setTimeout and fix typo
OneGIl Sep 11, 2023
074a18c
fix: correct mode when restoring panel from sx
OneGIl Sep 11, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/client/components/FullscreenButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>

Expand Down
2 changes: 2 additions & 0 deletions packages/client/composables/state.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ export interface DevToolsFrameState {
isFirstVisit: boolean
closeOnOutsideClick: boolean
minimizePanelInactive: number
viewMode: ViewMode
}

const frameState = useLocalStorage<DevToolsFrameState>(FRAME_STATE_STORAGE_KEY, {
Expand All @@ -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)
Expand Down
5 changes: 3 additions & 2 deletions packages/client/pages/__eyedropper.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,9 @@ useEventListener('keydown', (e) => {
})

function close() {
client.value?.panel?.toggleViewMode()
router.replace(frameState.route.value)
router.replace(frameState.route.value).then(() => {
client.value?.panel?.toggleViewMode()
})
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里无法通过同步的方式调用router.replace和toggleViewMode，否则就会设置成错误值。 也尝试在toggleViewMode方法中解决，可惜没找到好的方法。

"可能"的原因：

  • 梳理了代码后发现在client中的路由守卫会设置state的route值，而toggleViewMode方法也会改变state里的viewMode值。只不过这两个改变值的方式不同。在useObjectStorage中，前者通过useWindowEventListener方式监听localStorage并用新值覆盖hook中的state，而后者是用watch监听state并用新值覆盖localStorage。由于路由是异步的，处理速度上会比toggleViewMode慢一点（？），这将在设置route值的时候拿到了老的viewMode，最终赋值错误。
  • 但上面的原因好像不能解释为什么用setTimeout就可以解决赋值错误的问题。

所以，我有一个不成熟的想法，不知道是否可行？就是在client端只通过client实例(useDevToolsClient)来获取state状态，以及修改state。而不是在client端使用useLocalStorage来获取state。

}

const inSecurityContext = checkIsSecurityContext()
Expand Down
26 changes: 14 additions & 12 deletions packages/node/src/views/FrameBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,13 @@ const props = defineProps<{
disable: () => void
} | undefined
}
viewMode: 'xs' | 'default' | 'fullscreen'
viewMode: ViewMode
}>()

const container = ref<HTMLElement>()
const ableToResize = computed(() => {
return props.viewMode === 'default'
})
const isResizing = ref<false | { top?: boolean; left?: boolean; right?: boolean; bottom?: boolean }>(false)

watchEffect(() => {
Expand Down Expand Up @@ -61,9 +64,7 @@ useWindowEventListener('mousedown', (e: MouseEvent) => {
})

useWindowEventListener('mousemove', (e) => {
if (!isResizing.value)
return
if (!state.value.open)
if (!isResizing.value || !state.value.open)
return

const iframe = props.client.getIFrame()
Expand Down Expand Up @@ -118,49 +119,49 @@ const viewModeClass = computed(() => {
>
<!-- Handlers -->
<div
v-show="state.position !== 'top'"
v-show="state.position !== 'top' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
:style="{ top: 0 }"
@mousedown.prevent="() => isResizing = { top: true }"
/>
<div
v-show="state.position !== 'bottom'"
v-show="state.position !== 'bottom' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-horizontal"
:style="{ bottom: 0 }"
@mousedown.prevent="() => isResizing = { bottom: true }"
/>
<div
v-show="state.position !== 'left'"
v-show="state.position !== 'left' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
:style="{ left: 0 }"
@mousedown.prevent="() => isResizing = { left: true }"
/>
<div
v-show="state.position !== 'right'"
v-show="state.position !== 'right' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-vertical"
:style="{ right: 0 }"
@mousedown.prevent="() => isResizing = { right: true }"
/>
<div
v-show="state.position !== 'top' && state.position !== 'left'"
v-show="state.position !== 'top' && state.position !== 'left' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
:style="{ top: 0, left: 0, cursor: 'nwse-resize' }"
@mousedown.prevent="() => isResizing = { top: true, left: true }"
/>
<div
v-show="state.position !== 'top' && state.position !== 'right'"
v-show="state.position !== 'top' && state.position !== 'right' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
:style="{ top: 0, right: 0, cursor: 'nesw-resize' }"
@mousedown.prevent="() => isResizing = { top: true, right: true }"
/>
<div
v-show="state.position !== 'bottom' && state.position !== 'left'"
v-show="state.position !== 'bottom' && state.position !== 'left' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
:style="{ bottom: 0, left: 0, cursor: 'nesw-resize' }"
@mousedown.prevent="() => isResizing = { bottom: true, left: true }"
/>
<div
v-show="state.position !== 'bottom' && state.position !== 'right'"
v-show="state.position !== 'bottom' && state.position !== 'right' && ableToResize"
class="vue-devtools-resize-handle vue-devtools-resize-handle-corner"
:style="{ bottom: 0, right: 0, cursor: 'nwse-resize' }"
@mousedown.prevent="() => isResizing = { bottom: true, right: true }"
Expand Down Expand Up @@ -221,6 +222,7 @@ const viewModeClass = computed(() => {
width: 100vw !important;
height: 100vh !important;
z-index: 1 !important;
left: 0 !important;
bottom: 0 !important;
transform: none !important;
}
Expand Down
17 changes: 5 additions & 12 deletions packages/node/src/views/Main.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand All @@ -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'
Expand Down Expand Up @@ -91,9 +87,7 @@ async function setupClient(iframe: HTMLIFrameElement) {
hook,
hookBuffer,
panel: {
toggleViewMode: (mode?: ViewMode) => {
panelState.value.viewMode = mode ?? 'default'
},
toggleViewMode,
toggle: togglePanelVisible,
popup,
},
Expand Down Expand Up @@ -237,7 +231,7 @@ collectHookBuffer()
:class="{
'vue-devtools-vertical': isVertical,
'vue-devtools-hide': isHidden,
'fullscreen': panelState.viewMode === 'fullscreen',
'fullscreen': viewMode === 'fullscreen',
}"
@mousemove="bringUp"
>
Expand Down Expand Up @@ -284,7 +278,7 @@ collectHookBuffer()
},
getIFrame: getIframe,
}"
:view-mode="panelState.viewMode"
:view-mode="viewMode"
/>
</div>
<!-- component inspector -->
Expand All @@ -301,7 +295,6 @@ collectHookBuffer()
}
#vue-devtools-anchor.fullscreen {
transform: none !important;
left: 0 !important;
}

#vue-devtools-anchor .vue-devtools-icon-button {
Expand Down
23 changes: 23 additions & 0 deletions packages/node/src/views/composables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ interface DevToolsFrameState {
isFirstVisit: boolean
closeOnOutsideClick: boolean
minimizePanelInactive: number
viewMode: ViewMode
}

interface ComponentInspectorBounds {
Expand Down Expand Up @@ -41,6 +42,7 @@ export const state = useObjectStorage<DevToolsFrameState>('__vue-devtools-frame-
isFirstVisit: true,
closeOnOutsideClick: false,
minimizePanelInactive: 5000,
viewMode: 'default',
})

// ---- useIframe ----
Expand Down Expand Up @@ -501,6 +503,27 @@ 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 preViewMode = viewMode.value

function toggleViewMode(mode: ViewMode) {
const newMode = mode ?? preViewMode
preViewMode = viewMode.value
viewMode.value = newMode
}

return { viewMode, toggleViewMode }
}

// ---- useHighlightComponent ----

export function useHighlightComponent() {
Expand Down