Mirrors/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-09-02 12:14:48 +02:00
Code Issues Packages Projects Releases Wiki Activity

refac

Browse Source
This commit is contained in:
Timothy Jaeryang Baek
2026-08-30 12:42:13 -04:00
parent b9765fe979
commit cfa2d25317
1 changed files with 24 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/lib/components/common/ResizableSidePanel.svelte
View File

@@ -15,6 +15,8 @@
let panelElement: HTMLDivElement | null = null;
let isResizing = false;
let activePointerId: number | null = null;
let activeResizer: HTMLElement | null = null;
let startClientX = 0;
let startWidth = 0;
@@ -48,19 +50,31 @@
onClose();
};
const resizeStartHandler = (e: MouseEvent) => {
const resizeStartHandler = (e: PointerEvent) => {
if (!open) return;
e.preventDefault();
isResizing = true;
activePointerId = e.pointerId;
activeResizer = e.currentTarget as HTMLElement;
activeResizer.setPointerCapture?.(e.pointerId);
startClientX = e.clientX;
startWidth = width;
document.body.style.userSelect = 'none';
};
const resizeEndHandler = () => {
const resizeEndHandler = (e?: PointerEvent) => {
if (!isResizing) return;
if (e && activePointerId !== null && e.pointerId !== activePointerId) return;
isResizing = false;
if (activePointerId !== null) {
if (activeResizer?.hasPointerCapture?.(activePointerId)) {
activeResizer.releasePointerCapture(activePointerId);
}
}
activePointerId = null;
activeResizer = null;
document.body.style.userSelect = '';
persistWidth();
};
@@ -109,14 +123,16 @@
</script>
<svelte:window
on:mousemove={(e) => {
on:pointermove={(e) => {
if (!isResizing) return;
if (activePointerId !== null && e.pointerId !== activePointerId) return;
resizeHandler(e.clientX);
}}
on:resize={() => {
if (open) width = clamp(width);
}}
on:mouseup={resizeEndHandler}
on:pointerup={resizeEndHandler}
on:pointercancel={resizeEndHandler}
/>
{#if open}
@@ -125,7 +141,7 @@
<div
class="relative flex items-center justify-center group border-l border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20 bg-transparent p-0 appearance-none"
id={resizerId}
on:mousedown={resizeStartHandler}
on:pointerdown={resizeStartHandler}
on:keydown={resizeKeyHandler}
role="separator"
tabindex="0"
@@ -134,6 +150,7 @@
>
<span
class="absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
style="touch-action: none;"
></span>
</div>
{/if}
@@ -147,7 +164,7 @@
<div
class="relative flex items-center justify-center group border-r border-gray-50 dark:border-gray-850/30 hover:border-gray-200 dark:hover:border-gray-800 transition z-20 bg-transparent p-0 appearance-none"
id={resizerId}
on:mousedown={resizeStartHandler}
on:pointerdown={resizeStartHandler}
on:keydown={resizeKeyHandler}
role="separator"
tabindex="0"
@@ -156,6 +173,7 @@
>
<span
class="absolute -left-1.5 -right-1.5 -top-0 -bottom-0 z-20 cursor-col-resize bg-transparent"
style="touch-action: none;"
></span>
</div>
{/if}