From f532052f4d84bbd588abee667323fa8a5804747a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=90=89/=EC=9B=90=EA=B8=B8/OneGil?= Date: Thu, 24 Aug 2023 10:37:42 +0800 Subject: [PATCH 1/7] fix: "Exit Fullscreen" button is invalid --- .../client/components/FullscreenButton.vue | 5 ++-- packages/client/composables/state.ts | 2 ++ packages/node/src/views/FrameBox.vue | 2 +- packages/node/src/views/Main.vue | 16 ++++-------- packages/node/src/views/composables.ts | 25 +++++++++++++++++++ 5 files changed, 35 insertions(+), 15 deletions(-) diff --git a/packages/client/components/FullscreenButton.vue b/packages/client/components/FullscreenButton.vue index d1356b70..0f153f33 100644 --- a/packages/client/components/FullscreenButton.vue +++ b/packages/client/components/FullscreenButton.vue @@ -1,12 +1,11 @@ diff --git a/packages/client/composables/state.ts b/packages/client/composables/state.ts index fbd617e8..cad987dc 100644 --- a/packages/client/composables/state.ts +++ b/packages/client/composables/state.ts @@ -12,6 +12,7 @@ export interface DevToolsFrameState { isFirstVisit: boolean closeOnOutsideClick: boolean minimizePanelInactive: number + viewMode: ViewMode } const frameState = useLocalStorage(FRAME_STATE_STORAGE_KEY, { @@ -25,6 +26,7 @@ const frameState = useLocalStorage(FRAME_STATE_STORAGE_KEY, isFirstVisit: true, closeOnOutsideClick: false, minimizePanelInactive: 5000, + viewMode: 'default', }, { mergeDefaults: true }) const frameStateRefs = toRefs(frameState) diff --git a/packages/node/src/views/FrameBox.vue b/packages/node/src/views/FrameBox.vue index b3cc9a04..26d5f32d 100644 --- a/packages/node/src/views/FrameBox.vue +++ b/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() diff --git a/packages/node/src/views/Main.vue b/packages/node/src/views/Main.vue index b2dacfa8..2742eeb1 100644 --- a/packages/node/src/views/Main.vue +++ b/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() 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" /> diff --git a/packages/node/src/views/composables.ts b/packages/node/src/views/composables.ts index 186c0913..00fa2b4f 100644 --- a/packages/node/src/views/composables.ts +++ b/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('__vue-devtools-frame- isFirstVisit: true, closeOnOutsideClick: false, minimizePanelInactive: 5000, + viewMode: 'default', }) // ---- useIframe ---- @@ -501,6 +503,29 @@ export function usePosition(panelEl: Ref) { } } +// ---- 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() { From 7ed50450bd73434ac015ddbf2a0c99f155d10f01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=90=89/=EC=9B=90=EA=B8=B8/OneGil?= Date: Thu, 24 Aug 2023 11:03:53 +0800 Subject: [PATCH 2/7] fix: disabled resize in non "default" view mode --- packages/node/src/views/FrameBox.vue | 20 +++++++++----------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/node/src/views/FrameBox.vue b/packages/node/src/views/FrameBox.vue index 26d5f32d..6a9c2493 100644 --- a/packages/node/src/views/FrameBox.vue +++ b/packages/node/src/views/FrameBox.vue @@ -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() @@ -118,49 +116,49 @@ const viewModeClass = computed(() => { >
Date: Thu, 24 Aug 2023 11:40:45 +0800 Subject: [PATCH 3/7] fix: set correct anchor position in fullscreen --- packages/node/src/views/Main.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/node/src/views/Main.vue b/packages/node/src/views/Main.vue index 2742eeb1..66b638e5 100644 --- a/packages/node/src/views/Main.vue +++ b/packages/node/src/views/Main.vue @@ -295,7 +295,6 @@ collectHookBuffer() } #vue-devtools-anchor.fullscreen { transform: none !important; - left: 0 !important; } #vue-devtools-anchor .vue-devtools-icon-button { From f836c07339033ac3e00d08b875aa2aadb7851df4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=90=89/=EC=9B=90=EA=B8=B8/OneGil?= Date: Wed, 30 Aug 2023 12:54:04 +0800 Subject: [PATCH 4/7] fix: edge case --- packages/node/src/views/FrameBox.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/node/src/views/FrameBox.vue b/packages/node/src/views/FrameBox.vue index 6a9c2493..c44d6ab8 100644 --- a/packages/node/src/views/FrameBox.vue +++ b/packages/node/src/views/FrameBox.vue @@ -219,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; } From 0846d5ff086082497c1eff7634807758bc2631fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=90=89/=EC=9B=90=EA=B8=B8/OneGil?= Date: Tue, 12 Sep 2023 01:03:59 +0800 Subject: [PATCH 5/7] chore: extracted "props.viewMode === 'default'" --- packages/node/src/views/FrameBox.vue | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/packages/node/src/views/FrameBox.vue b/packages/node/src/views/FrameBox.vue index c44d6ab8..0bb54f7f 100644 --- a/packages/node/src/views/FrameBox.vue +++ b/packages/node/src/views/FrameBox.vue @@ -18,6 +18,9 @@ const props = defineProps<{ }>() const container = ref() +const ableToResize = computed(() => { + return props.viewMode === 'default' +}) const isResizing = ref(false) watchEffect(() => { @@ -116,49 +119,49 @@ const viewModeClass = computed(() => { >
Date: Tue, 12 Sep 2023 01:05:28 +0800 Subject: [PATCH 6/7] chore: remove setTimeout and fix typo --- packages/node/src/views/composables.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/node/src/views/composables.ts b/packages/node/src/views/composables.ts index 00fa2b4f..e4096066 100644 --- a/packages/node/src/views/composables.ts +++ b/packages/node/src/views/composables.ts @@ -513,14 +513,12 @@ export function usePanelState() { state.value.viewMode = value }, }) - let perViewMode = viewMode.value + let preViewMode = viewMode.value function toggleViewMode(mode: ViewMode) { - const newMode = mode ?? perViewMode - setTimeout(() => { - perViewMode = viewMode.value - viewMode.value = newMode - }, 0) + const newMode = mode ?? preViewMode + preViewMode = viewMode.value + viewMode.value = newMode } return { viewMode, toggleViewMode } From 074a18c84c8306a57250274f223961babe19280a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=85=83=E5=90=89/=EC=9B=90=EA=B8=B8/OneGil?= Date: Tue, 12 Sep 2023 01:08:32 +0800 Subject: [PATCH 7/7] fix: correct mode when restoring panel from sx --- packages/client/pages/__eyedropper.vue | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/client/pages/__eyedropper.vue b/packages/client/pages/__eyedropper.vue index 4590c6a8..7a843ff4 100644 --- a/packages/client/pages/__eyedropper.vue +++ b/packages/client/pages/__eyedropper.vue @@ -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() + }) } const inSecurityContext = checkIsSecurityContext()