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

fix(web): Improve zoom behavior in photo-viewer. (#18803)

Browse source 
* Fix an issue where clicking the zoom-button after having zoomed in
would not zoom completely out, but leave the image in the zoomed-in
state. The new behavior properly zoomes the image completely out after
clicking the zoom-button.
* Revert to the default setting for `wheelZoomRatio` as the previous
setting of 0.2 was borderline unusable on a trackpad. This could
probably be moved to a user setting if needed.
* Add a keyboard shortcut 'z' to toggle image zoom.
This commit is contained in:
Dag Stuan 2025-06-02 04:06:48 +02:00 • committed by GitHub
parent a53d033622
commit 5589616921
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 9 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,9 @@
<script lang="ts">
import { shortcuts } from '$lib/actions/shortcut';
import { zoomImageAction, zoomed } from '$lib/actions/zoom-image';
import { zoomImageAction } from '$lib/actions/zoom-image';
import FaceEditor from '$lib/components/asset-viewer/face-editor/face-editor.svelte';
import BrokenAsset from '$lib/components/assets/broken-asset.svelte';
import { castManager } from '$lib/managers/cast-manager.svelte';
import { photoViewerImgElement, type TimelineAsset } from '$lib/stores/assets-store.svelte';
import { isFaceEditMode } from '$lib/stores/face-edit.svelte';
import { boundingBoxesArray } from '$lib/stores/people.store';
@ -23,7 +24,6 @@
import { fade } from 'svelte/transition';
import LoadingSpinner from '../shared-components/loading-spinner.svelte';
import { NotificationType, notificationController } from '../shared-components/notification/notification';
import { castManager } from '$lib/managers/cast-manager.svelte';
interface Props {
asset: AssetResponseDto;
@ -65,7 +65,6 @@
currentPositionX: 0,
currentPositionY: 0,
});
$zoomed = false;
onDestroy(() => {
$boundingBoxesArray = [];
@ -108,7 +107,10 @@
};
zoomToggle = () => {
$zoomed = $zoomed ? false : true;
photoZoomState.set({
...$photoZoomState,
currentZoom: $photoZoomState.currentZoom > 1 ? 1 : 2,
});
};
$effect(() => {
@ -206,6 +208,7 @@
use:shortcuts={[
{ shortcut: { key: 'c', ctrl: true }, onShortcut: onCopyShortcut, preventDefault: false },
{ shortcut: { key: 'c', meta: true }, onShortcut: onCopyShortcut, preventDefault: false },
{ shortcut: { key: 'z' }, onShortcut: zoomToggle, preventDefault: false },
]}
/>
{#if imageError}