From c36acb3cfa2a46ea1b3bb1af6621e42fc21d11c6 Mon Sep 17 00:00:00 2001 From: Andrey Sobolev Date: Fri, 28 Nov 2025 14:45:00 +0700 Subject: [PATCH 1/2] Improve performance for separator Signed-off-by: Andrey Sobolev --- packages/ui/src/components/Separator.svelte | 34 ++++++++++++++++++--- 1 file changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte index 90548bac36e..a5a10962fc6 100644 --- a/packages/ui/src/components/Separator.svelte +++ b/packages/ui/src/components/Separator.svelte @@ -73,6 +73,15 @@ const remToPx = (rem: number): number => rem * fs const pxToRem = (px: number): number => px / fs + const disableUserSelect = (): void => { + document.body.style.userSelect = 'none' + document.body.style.webkitUserSelect = 'none' + } + const enableUserSelect = (): void => { + document.body.style.userSelect = '' + document.body.style.webkitUserSelect = '' + } + const fetchSeparators = (): void => { const res = getSeparators(name, float) if (res !== null && !Array.isArray(res)) panel = res @@ -313,7 +322,7 @@ function floatMouseMove (event: PointerEvent): void { if (!isSeparate || parentSize === null || parentElement === null) return - const coord: number = Math.round(direction === 'horizontal' ? event.x - offset : event.y - offset) + const coord: number = Math.round(direction === 'horizontal' ? event.clientX - offset : event.clientY - offset) const parentCoord: number = coord - parentSize.start const min = remToPx(panel.minSize === 'auto' ? 10 : panel.minSize) const max = remToPx(panel.maxSize === 'auto' ? 30 : panel.maxSize) @@ -335,7 +344,7 @@ function normalMouseMove (event: PointerEvent): void { if (!isSeparate || separatorMap === undefined || parentSize === null || separatorsSizes === null) return - const coord: number = Math.round(direction === 'horizontal' ? event.x - offset : event.y - offset) + const coord: number = Math.round(direction === 'horizontal' ? event.clientX - offset : event.clientY - offset) let parentCoord: number = coord - parentSize.start let prevCoord: number = separatorMap .filter((f) => f.begin) @@ -411,7 +420,6 @@ if (needAdd > 0) needAdd = resizeContainer(box.id, box.size, box.maxSize, needAdd, true) }) } - separatorMap = separatorMap } applyStyles() if ($panelstore.panel?.refit !== undefined) $panelstore.panel.refit() @@ -419,6 +427,7 @@ function pointerUp (): void { finalSeparation() + enableUserSelect() document.removeEventListener('pointermove', pointerMove) document.removeEventListener('pointerup', pointerUp) } @@ -457,6 +466,8 @@ function pointerDown (event: PointerEvent): void { if (checkFullWidth()) return + event.preventDefault() + disableUserSelect() prepareSeparation(event) document.addEventListener('pointermove', pointerMove) document.addEventListener('pointerup', pointerUp) @@ -470,7 +481,6 @@ checkSibling() return } - offset = Math.round(direction === 'horizontal' ? event.offsetX : event.offsetY) const p = parentElement.getBoundingClientRect() parentSize = direction === 'horizontal' @@ -480,7 +490,20 @@ calculateSeparators() generateMap() applyStyles(true) - } else if (sState === SeparatorState.FLOAT) preparePanel() + // Calculate offset based on separator's actual position after generateMap + // prevCoord is the sum of all elements before separator + separators before + const prevCoord: number = + separatorMap + .filter((f) => f.begin) + .map((m) => m.size) + .reduce((prev, a) => prev + a, 0) + separatorsWide.before + const mousePos = direction === 'horizontal' ? event.clientX : event.clientY + // offset = mouse position relative to where separator should be + offset = mousePos - parentSize.start - prevCoord + } else if (sState === SeparatorState.FLOAT) { + offset = Math.round(direction === 'horizontal' ? event.offsetX : event.offsetY) + preparePanel() + } document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize' } @@ -658,6 +681,7 @@ .antiSeparator { position: relative; flex-shrink: 0; + touch-action: none; &::after, &::before { From 10b0cae8c129645e91f43570b2e4be984499d54e Mon Sep 17 00:00:00 2001 From: Andrey Sobolev Date: Fri, 28 Nov 2025 14:54:45 +0700 Subject: [PATCH 2/2] Prevent mouse events during separator move Signed-off-by: Andrey Sobolev --- packages/ui/src/components/Separator.svelte | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/ui/src/components/Separator.svelte b/packages/ui/src/components/Separator.svelte index a5a10962fc6..498ffd9b73f 100644 --- a/packages/ui/src/components/Separator.svelte +++ b/packages/ui/src/components/Separator.svelte @@ -76,10 +76,12 @@ const disableUserSelect = (): void => { document.body.style.userSelect = 'none' document.body.style.webkitUserSelect = 'none' + document.body.style.pointerEvents = 'none' } const enableUserSelect = (): void => { document.body.style.userSelect = '' document.body.style.webkitUserSelect = '' + document.body.style.pointerEvents = '' } const fetchSeparators = (): void => { @@ -323,21 +325,24 @@ function floatMouseMove (event: PointerEvent): void { if (!isSeparate || parentSize === null || parentElement === null) return const coord: number = Math.round(direction === 'horizontal' ? event.clientX - offset : event.clientY - offset) - const parentCoord: number = coord - parentSize.start + let parentCoord: number = coord - parentSize.start const min = remToPx(panel.minSize === 'auto' ? 10 : panel.minSize) const max = remToPx(panel.maxSize === 'auto' ? 30 : panel.maxSize) + // Clamp parentCoord to valid range to prevent panel from going off-screen + if (parentCoord < 0) parentCoord = 0 + if (parentCoord > parentSize.size - separatorSize) parentCoord = parentSize.size - separatorSize const newCoord = side === 'start' - ? parentSize.size - parentCoord < min - separatorSize + ? parentSize.size - parentCoord < min ? min - : parentSize.size - parentCoord > max - separatorSize + : parentSize.size - parentCoord > max ? max : parentSize.size - parentCoord - : parentCoord < min - separatorSize + : parentCoord < min ? min - : parentCoord > max - separatorSize + : parentCoord > max ? max - : parentCoord - separatorSize + : parentCoord panel.size = pxToRem(newCoord) setSize(parentElement, newCoord) }