Skip to content
This repository was 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 4 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
23 changes: 11 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,7 +14,7 @@ const props = defineProps<{
disable: () => void
} | undefined
}
viewMode: 'xs' | 'default' | 'fullscreen'
viewMode: ViewMode
}>()

const container = ref<HTMLElement>()
Expand Down Expand Up @@ -61,9 +61,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 +116,49 @@ const viewModeClass = computed(() => {
>
<!-- Handlers -->
<div
v-show="state.position !== 'top'"
v-show="state.position !== 'top' && props.viewMode === 'default'"
Copy link
Collaborator

Choose a reason for hiding this comment

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

Extracting props.viewMode === 'default' to a computed variable called ableToResize or something, which will be more maintainable.

Copy link
Contributor Author

@OneGIl OneGIl Sep 11, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

@alexzhang1030 got it~

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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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' && props.viewMode === 'default'"
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 +219,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
25 changes: 25 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,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
Copy link
Collaborator

Choose a reason for hiding this comment

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

preViewMode? Looks like a typo here.


function toggleViewMode(mode: ViewMode) {
const newMode = mode ?? perViewMode
setTimeout(() => {
Copy link
Contributor Author

@OneGIl OneGIl Aug 24, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

这里使用setTimeout是因为在eyedropper里close方法里会同时修改client和node中的frameState，这会赋给viewMode错误的值。暂时没找到合适的解决方法。所以在这里用了setTimeout。

Copy link
Collaborator

Choose a reason for hiding this comment

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

可以针对 eyeDropper 这种 viewMode 是 xs 的单独写一个判断逻辑

Copy link
Contributor Author

Choose a reason for hiding this comment

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

感谢建议，这部分我会再考虑一下~

perViewMode = viewMode.value
viewMode.value = newMode
}, 0)
}

return { viewMode, toggleViewMode }
}

// ---- useHighlightComponent ----

export function useHighlightComponent() {
Expand Down