github-mirror/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2026-05-31 08:46:58 +02:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity Graph

fix(editor): Restore NDV panel proportions after zoom changes (#30573)

Browse Source 
Co-authored-by: Nikhil Kuriakose <nikhilkuria@gmail.com>
This commit is contained in:
ABDUL ALMAS 2026-05-19 15:32:48 +05:30 committed by GitHub
parent f155aceed9
commit 3d67664817
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
packages/frontend/editor-ui/src/features/ndv/panel/composables/useNdvLayout.test.ts
View File

@ -1,16 +1,16 @@
import { ref, type Ref } from 'vue';
import { nextTick, ref, type Ref } from 'vue';
import { useNdvLayout } from './useNdvLayout';
import { LOCAL_STORAGE_NDV_PANEL_WIDTH } from '@/features/ndv/shared/ndv.constants';
import { mock } from 'vitest-mock-extended';
vi.mock('@vueuse/core', () => {
return {
useElementSize: () => ({
width: ref(1000),
height: ref(500),
}),
};
});
const containerWidth = ref(1000);
vi.mock('@vueuse/core', () => ({
useElementSize: vi.fn(() => ({
width: containerWidth,
height: ref(500),
})),
}));
describe('useNdvLayout', () => {
let containerRef: HTMLDivElement;
@ -23,6 +23,7 @@ describe('useNdvLayout', () => {
container = ref(containerRef);
hasInputPanel = ref(true);
paneType = ref('regular');
containerWidth.value = 1000;
localStorage.clear();
});
@ -84,4 +85,28 @@ describe('useNdvLayout', () => {
onResizeEnd();
expect(spy).toHaveBeenCalledWith(expect.stringContaining('_REGULAR'), expect.any(String));
});
it('restores correct proportions after container width changes (zoom simulation)', async () => {
const key = `${LOCAL_STORAGE_NDV_PANEL_WIDTH}_REGULAR`;
localStorage.setItem(key, JSON.stringify({ left: 29, main: 42, right: 29 }));
const { panelWidthPercentage } = useNdvLayout({ container, hasInputPanel, paneType });
// Manually corrupt in-memory state to simulate what the old code did when
// zooming in inflated minMainPanelWidthPercentage and clamped main upward.
panelWidthPercentage.value = { left: 15, main: 70, right: 15 };
// Simulate zoom in — should reload from storage and restore correct proportions.
containerWidth.value = 600;
await nextTick();
await nextTick();
containerWidth.value = 1000;
await nextTick();
await nextTick();
expect(panelWidthPercentage.value.left).toBeCloseTo(29);
expect(panelWidthPercentage.value.main).toBeCloseTo(42);
expect(panelWidthPercentage.value.right).toBeCloseTo(29);
});
});

8
packages/frontend/editor-ui/src/features/ndv/panel/composables/useNdvLayout.ts
View File

@ -172,14 +172,10 @@ export function useNdvLayout(options: UseNdvLayoutOptions) {
panelWidthPercentage.value.right = newRight;
};
watch(containerWidth, (newWidth, oldWidth) => {
watch(containerWidth, (newWidth) => {
if (!newWidth) return;
if (!oldWidth) {
loadPanelSize();
} else {
panelWidthPercentage.value = safePanelWidth(panelWidthPercentage.value);
}
loadPanelSize();
});
watch(