mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-11 16:30:57 +00:00
e5c81488e4
## Summary When the properties panel is open, toggling focus mode on then off causes the panel to resize unexpectedly. The root cause is that `splitterRefreshKey` in `LiteGraphCanvasSplitterOverlay.vue` does not include `focusMode`, so the PrimeVue Splitter component instance is reused across focus mode transitions and restores stale panel sizes from localStorage. Fix: add `focusMode` to `splitterRefreshKey` so the Splitter is recreated when focus mode toggles. ## Red-Green Verification | Commit | CI Status | Purpose | |--------|-----------|---------| | `test: add failing test for focus mode toggle resizing properties panel` | 🔴 Red | Proves the test catches the bug | | `fix: include focusMode in splitter refresh key to prevent panel resize` | 🟢 Green | Proves the fix resolves the bug | ## demo ### AS IS https://github.com/user-attachments/assets/95f6a9e3-e4c7-4aba-8e17-0eee11f70491 ### TO BE https://github.com/user-attachments/assets/595eafcd-6a80-443d-a6f3-bb7605ed0758 ## Test Plan - [ ] CI red on test-only commit - [ ] CI green on fix commit - [ ] E2E regression test added in `browser_tests/tests/focusMode.spec.ts` ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-11295-fix-include-focusMode-in-splitter-refresh-key-to-prevent-panel-resize-3446d73d365081b7bc3ac65338e17a8f) by [Unito](https://www.unito.io)
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import {
|
|
comfyExpect as expect,
|
|
comfyPageFixture as test
|
|
} from '@e2e/fixtures/ComfyPage'
|
|
|
|
test.describe('Focus Mode', { tag: '@ui' }, () => {
|
|
test('Focus mode hides UI chrome', async ({ comfyPage }) => {
|
|
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
|
|
|
await comfyPage.setFocusMode(true)
|
|
|
|
await expect(comfyPage.menu.sideToolbar).toBeHidden()
|
|
})
|
|
|
|
test('Focus mode restores UI chrome', async ({ comfyPage }) => {
|
|
await comfyPage.setFocusMode(true)
|
|
await expect(comfyPage.menu.sideToolbar).toBeHidden()
|
|
|
|
await comfyPage.setFocusMode(false)
|
|
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
|
})
|
|
|
|
test('Toggle focus mode command works', async ({ comfyPage }) => {
|
|
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
|
|
|
await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
|
|
await expect(comfyPage.menu.sideToolbar).toBeHidden()
|
|
|
|
await comfyPage.command.executeCommand('Workspace.ToggleFocusMode')
|
|
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
|
})
|
|
|
|
test('Focus mode hides topbar', async ({ comfyPage }) => {
|
|
const topMenu = comfyPage.page.locator('.comfy-menu-button-wrapper')
|
|
await expect(topMenu).toBeVisible()
|
|
|
|
await comfyPage.setFocusMode(true)
|
|
|
|
await expect(topMenu).toBeHidden()
|
|
})
|
|
|
|
test('Canvas remains visible in focus mode', async ({ comfyPage }) => {
|
|
await comfyPage.setFocusMode(true)
|
|
|
|
await expect(comfyPage.canvas).toBeVisible()
|
|
})
|
|
|
|
test('Focus mode can be toggled multiple times', async ({ comfyPage }) => {
|
|
await comfyPage.setFocusMode(true)
|
|
await expect(comfyPage.menu.sideToolbar).toBeHidden()
|
|
|
|
await comfyPage.setFocusMode(false)
|
|
await expect(comfyPage.menu.sideToolbar).toBeVisible()
|
|
|
|
await comfyPage.setFocusMode(true)
|
|
await expect(comfyPage.menu.sideToolbar).toBeHidden()
|
|
})
|
|
|
|
test('Focus mode toggle preserves properties panel width', async ({
|
|
comfyPage
|
|
}) => {
|
|
// Open the properties panel
|
|
await comfyPage.actionbar.propertiesButton.click()
|
|
await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
|
|
|
|
// Record the initial panel width
|
|
const initialBox = await comfyPage.menu.propertiesPanel.root.boundingBox()
|
|
expect(initialBox).not.toBeNull()
|
|
const initialWidth = initialBox!.width
|
|
|
|
// Toggle focus mode on then off
|
|
await comfyPage.setFocusMode(true)
|
|
await comfyPage.setFocusMode(false)
|
|
|
|
// Properties panel should be visible again with the same width
|
|
await expect(comfyPage.menu.propertiesPanel.root).toBeVisible()
|
|
await expect
|
|
.poll(async () => {
|
|
const box = await comfyPage.menu.propertiesPanel.root.boundingBox()
|
|
return box ? Math.abs(box.width - initialWidth) : Infinity
|
|
})
|
|
.toBeLessThan(2)
|
|
})
|
|
})
|