mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Lightbox zoom improvements

Browse source
This commit is contained in:
Josh Perez 2022-01-19 15:21:12 -05:00 • committed by GitHub
parent c1e3e87b99
commit 3eddd06e5c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

29
ts/components/Lightbox.tsx
View file

@ -281,7 +281,10 @@ export function Lightbox({
return;
}
const { screenWidth, screenHeight } = zoomCache;
const { maxX, maxY, screenWidth, screenHeight } = zoomCache;
const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
const offsetX = screenWidth / 2 - ev.clientX;
const offsetY = screenHeight / 2 - ev.clientY;
@ -291,8 +294,8 @@ export function Lightbox({
springApi.start({
scale: ZOOM_SCALE,
translateX: x,
translateY: y,
translateX: shouldTranslateX ? x : undefined,
translateY: shouldTranslateY ? y : undefined,
});
},
[maxBoundsLimiter, springApi]
@ -349,13 +352,21 @@ export function Lightbox({
}
if (!isZoomed) {
const maxX = imageNode.offsetWidth;
const maxY = imageNode.offsetHeight;
const screenHeight = window.innerHeight;
const screenWidth = window.innerWidth;
zoomCacheRef.current = {
maxX: imageNode.offsetWidth,
maxY: imageNode.offsetHeight,
screenHeight: window.innerHeight,
screenWidth: window.innerWidth,
maxX,
maxY,
screenHeight,
screenWidth,
};
const shouldTranslateX = maxX * ZOOM_SCALE > screenWidth;
const shouldTranslateY = maxY * ZOOM_SCALE > screenHeight;
const { height, left, top, width } =
animateNode.getBoundingClientRect();
@ -367,8 +378,8 @@ export function Lightbox({
springApi.start({
scale: ZOOM_SCALE,
translateX: x,
translateY: y,
translateX: shouldTranslateX ? x : undefined,
translateY: shouldTranslateY ? y : undefined,
});
setIsZoomed(true);