-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(browser): restore the original viewport when unselecting the pres…
…et viewport (#5821)
- Loading branch information
1 parent
2e874f8
commit 5ebb3ab
Showing
12 changed files
with
114 additions
and
125 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,6 @@ | ||
| import type { File } from '@vitest/runner' | ||
| import type { BrowserUI } from 'vitest' | ||
|
|
||
| interface UiAPI { | ||
| currentModule: File | ||
| setCurrentById: (fileId: string) => void | ||
| resetDetailSizes: () => void | ||
| recalculateDetailPanels: () => void | ||
| } | ||
|
|
||
| export function getUiAPI(): UiAPI | undefined { | ||
| export function getUiAPI(): BrowserUI | undefined { | ||
| // @ts-expect-error not typed global | ||
| return window.__vitest_ui_api__ | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import type { BrowserUI } from 'vitest' | ||
| import { findById } from './client' | ||
| import { customViewport, viewport } from './browser' | ||
| import { detailSizes } from '~/composables/navigation' | ||
|
|
||
| const ui: BrowserUI = { | ||
| setCurrentFileId(fileId: string) { | ||
| activeFileId.value = fileId | ||
| currentModule.value = findById(fileId) | ||
| showDashboard(false) | ||
| }, | ||
| async setIframeViewport(width: number, height: number) { | ||
| // reset the button before setting a custom viewport | ||
| viewport.value = 'custom' | ||
| customViewport.value = [width, height] | ||
| await setIframeViewport(width, height) | ||
| }, | ||
| } | ||
|
|
||
| // @ts-expect-error not typed global | ||
| window.__vitest_ui_api__ = ui | ||
|
|
||
| function recalculateDetailPanels() { | ||
| const iframe = getCurrentBrowserIframe() | ||
| const panel = document.querySelector<HTMLDivElement>('#details-splitpanes')! | ||
| const panelWidth = panel.clientWidth | ||
| const iframeWidth = iframe.clientWidth | ||
| const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95) | ||
| const detailsPercent = 100 - iframePercent | ||
| detailSizes.value = [iframePercent, detailsPercent] | ||
| } | ||
|
|
||
| export function getCurrentBrowserIframe() { | ||
| return document.querySelector<HTMLIFrameElement>('#tester-ui iframe[data-vitest]')! | ||
| } | ||
|
|
||
| export async function setIframeViewport(width: number | string, height: number | string) { | ||
| const iframe = getCurrentBrowserIframe() | ||
| // change the viewport of the iframe | ||
| iframe.style.width = typeof width === 'string' ? width : `${width}px` | ||
| iframe.style.height = typeof height === 'string' ? height : `${height}px` | ||
| // wait until it renders the new size and resize the panel to make the iframe visible | ||
| // this will not make it fully visible if viewport is too wide, but it's better than nothing | ||
| await new Promise(r => requestAnimationFrame(r)) | ||
| recalculateDetailPanels() | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,11 @@ | ||
| import type { Ref } from 'vue' | ||
| import { detailSizes } from '~/composables/navigation' | ||
| export type ViewportSize = 'small-mobile' | 'large-mobile' | 'tablet' | 'full' | 'custom' | ||
| export const viewport = ref<ViewportSize>('full') | ||
| export const customViewport = ref<[number, number]>() | ||
|
|
||
| type ResizingListener = (isResizing: boolean) => void | ||
| export function onBrowserPanelResizing(isResizing: boolean) { | ||
| const tester = document.querySelector<HTMLDivElement>('#tester-ui') | ||
| if (!tester) | ||
| return | ||
|
|
||
| const resizingListeners = new Set<ResizingListener>() | ||
|
|
||
| export function recalculateDetailPanels() { | ||
| const iframe = document.querySelector('#tester-ui iframe[data-vitest]')! | ||
| const panel = document.querySelector('#details-splitpanes')! | ||
| const panelWidth = panel.clientWidth | ||
| const iframeWidth = iframe.clientWidth | ||
| const iframePercent = Math.min((iframeWidth / panelWidth) * 100, 95) | ||
| const detailsPercent = 100 - iframePercent | ||
| detailSizes.value = [iframePercent, detailsPercent] | ||
| } | ||
|
|
||
| export function useResizing(testerRef: Ref<HTMLDivElement | undefined>) { | ||
| function onResizing(isResizing: boolean) { | ||
| const tester = testerRef.value | ||
| if (!tester) | ||
| return | ||
|
|
||
| tester.style.pointerEvents = isResizing ? 'none' : '' | ||
| } | ||
|
|
||
| onMounted(() => { | ||
| resizingListeners.add(onResizing) | ||
| }) | ||
|
|
||
| onUnmounted(() => { | ||
| resizingListeners.delete(onResizing) | ||
| }) | ||
|
|
||
| return { recalculateDetailPanels } | ||
| } | ||
|
|
||
| export function useNotifyResizing() { | ||
| function notifyResizing(isResizing: boolean) { | ||
| for (const listener of resizingListeners) | ||
| listener(isResizing) | ||
| } | ||
|
|
||
| return { notifyResizing } | ||
| tester.style.pointerEvents = isResizing ? 'none' : '' | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.