helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-07 17:27:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

feat(web): add zoom toggle icon (#2873)

Browse source 
* feat(web): add zoom toggle icon

* update zoom-image dependency

* fix lint issues

* remove variable testing line

* Simplify code using ternary conditional

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>

* fix typo

---------

Co-authored-by: Thomas <9749173+uhthomas@users.noreply.github.com>
This commit is contained in:
Manuel Taberna 2023-06-20 16:36:38 +02:00 • committed by GitHub
parent f9fbf1a2a5
commit 48e4ea5231
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 45 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

20
web/src/lib/components/asset-viewer/photo-viewer.svelte
View file

@ -8,6 +8,7 @@
NotificationType
} from '../shared-components/notification/notification';
import { useZoomImageWheel } from '@zoom-image/svelte';
import { photoZoomState } from '$lib/stores/zoom-image.store';
export let asset: AssetResponseDto;
export let publicSharedKey = '';
@ -73,7 +74,22 @@
}
};
const { createZoomImage: createZoomImageWheel } = useZoomImageWheel();
const doZoomImage = async () => {
setZoomImageWheelState({
currentZoom: $zoomImageWheelState.currentZoom === 1 ? 2 : 1
});
};
const {
createZoomImage: createZoomImageWheel,
zoomImageState: zoomImageWheelState,
setZoomImageState: setZoomImageWheelState
} = useZoomImageWheel();
zoomImageWheelState.subscribe((state) => {
photoZoomState.set(state);
});
$: if (imgElement) {
createZoomImageWheel(imgElement, {
wheelZoomRatio: 0.06
@ -81,7 +97,7 @@
}
</script>
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} />
<svelte:window on:keydown={handleKeypress} on:copyImage={doCopy} on:zoomImage={doZoomImage} />
<div
transition:fade={{ duration: 150 }}