Lightbox zoom improvements
This commit is contained in:
parent
c1e3e87b99
commit
3eddd06e5c
2 changed files with 21 additions and 16 deletions
|
@ -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);
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue