OpenWebUI/open-webui
1
0
Fork 0
mirror of https://github.com/open-webui/open-webui synced 2025-06-26 18:26:48 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

enh: image panzoom

Browse Source
This commit is contained in:
Timothy Jaeryang Baek 2025-03-09 14:39:54 +00:00
parent 1c211e32b3
commit 5cc43ae880
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/components/common/ImagePreview.svelte
View File

@ -1,5 +1,6 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import panzoom, { type PanZoom } from 'panzoom';
export let show = false;
export let src = '';
@ -9,6 +10,25 @@
let previewElement = null;
let instance: PanZoom;
let sceneParentElement: HTMLElement;
let sceneElement: HTMLElement;
$: if (sceneElement) {
instance = panzoom(sceneElement, {
bounds: true,
boundsPadding: 0.1,
zoomSpeed: 0.065
});
}
const resetPanZoomViewport = () => {
instance.moveTo(0, 0);
instance.zoomAbs(0, 0, 1);
console.log(instance.getTransform());
};
const downloadImage = (url, filename, prefixName = '') => {
fetch(url)
.then((response) => response.blob())
@ -106,6 +126,8 @@
</button>
</div>
</div>
<img {src} {alt} class=" mx-auto h-full object-scale-down select-none" draggable="false" />
<div bind:this={sceneElement} class="flex h-full max-h-full justify-center items-center">
<img {src} {alt} class=" mx-auto h-full object-scale-down select-none" draggable="false" />
</div>
</div>
{/if}