bhetherman/open-webui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): ChatItem document listener teardown and shared drag image (#23209)

Browse Source
This commit is contained in:
Shirasawa
2026-04-01 06:40:02 -05:00
committed by GitHub
parent 3d6e5ff8f9
commit 2734fcad63
1 changed files with 20 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/layout/Sidebar/ChatItem.svelte
+20 -23
View File
@@ -1,7 +1,14 @@
<script context="module" lang="ts">
/** Shared 1×1 transparent drag preview; avoids one Image per sidebar row */
const invisibleDragImage = new Image();
invisibleDragImage.src =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
</script>
<script lang="ts">
import { toast } from 'svelte-sonner';
import { goto, invalidate, invalidateAll } from '$app/navigation';
import { onMount, getContext, createEventDispatcher, tick, onDestroy } from 'svelte';
import { onMount, getContext, createEventDispatcher, tick } from 'svelte';
const i18n = getContext('i18n');
const dispatch = createEventDispatcher();
@@ -224,14 +231,10 @@
let x = 0;
let y = 0;
const dragImage = new Image();
dragImage.src =
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
const onDragStart = (event) => {
event.stopPropagation();
event.dataTransfer.setDragImage(dragImage, 0, 0);
event.dataTransfer.setDragImage(invisibleDragImage, 0, 0);
// Set the data to be transferred
event.dataTransfer.setData(
@@ -276,26 +279,20 @@
};
onMount(() => {
if (itemElement) {
document.addEventListener('click', onClickOutside, true);
const el = itemElement;
if (!el) return;
// Event listener for when dragging starts
itemElement.addEventListener('dragstart', onDragStart);
// Event listener for when dragging occurs (optional)
itemElement.addEventListener('drag', onDrag);
// Event listener for when dragging ends
itemElement.addEventListener('dragend', onDragEndHandler);
}
});
document.addEventListener('click', onClickOutside, true);
el.addEventListener('dragstart', onDragStart);
el.addEventListener('drag', onDrag);
el.addEventListener('dragend', onDragEndHandler);
onDestroy(() => {
if (itemElement) {
return () => {
document.removeEventListener('click', onClickOutside, true);
itemElement.removeEventListener('dragstart', onDragStart);
itemElement.removeEventListener('drag', onDrag);
itemElement.removeEventListener('dragend', onDragEndHandler);
}
el.removeEventListener('dragstart', onDragStart);
el.removeEventListener('drag', onDrag);
el.removeEventListener('dragend', onDragEndHandler);
};
});
let showDeleteConfirm = false;