From 2d1c5f6d83acbf9d45cebf48c1727206d1a6c1a5 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Mon, 19 May 2025 13:46:36 +0200 Subject: [PATCH 1/9] source/Controlled.tsx: add zoomAlignment prop to control zoomed image alignment to viewport --- source/Controlled.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/source/Controlled.tsx b/source/Controlled.tsx index b05723d1..238a3fe7 100644 --- a/source/Controlled.tsx +++ b/source/Controlled.tsx @@ -73,6 +73,7 @@ export interface ControlledProps { }) => React.ReactElement zoomImg?: React.ImgHTMLAttributes zoomMargin?: number + zoomAlignment?: 'center' | 'top' } export function Controlled (props: ControlledProps) { @@ -88,6 +89,7 @@ interface ControlledDefaultProps { swipeToUnzoomThreshold: number wrapElement: 'div' | 'span' zoomMargin: number + zoomAlignment: 'center' | 'top' } type ControlledPropsWithDefaults = ControlledDefaultProps & ControlledProps @@ -111,6 +113,7 @@ class ControlledBase extends React.Component Date: Mon, 19 May 2025 13:47:45 +0200 Subject: [PATCH 2/9] source/utils.ts: getStyleModalImg() pass prop zoomAlignment to control how translateY get calculated --- source/utils.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/source/utils.ts b/source/utils.ts index d730d405..f8c7bdaf 100644 --- a/source/utils.ts +++ b/source/utils.ts @@ -438,6 +438,7 @@ export interface GetStyleModalImg { offset: number, shouldRefresh: boolean, targetEl: SupportedImage, + zoomAlignment: 'top' | 'center' }): React.CSSProperties } @@ -450,6 +451,7 @@ export const getStyleModalImg: GetStyleModalImg = ({ offset, shouldRefresh, targetEl, + zoomAlignment }) => { const hasScalableSrc = isSvg || @@ -519,7 +521,19 @@ export const getStyleModalImg: GetStyleModalImg = ({ const childCenterY = parseFloat(String(style.top || 0)) + (parseFloat(String(style.height || 0)) / 2) const translateX = viewportX - childCenterX - const translateY = viewportY - childCenterY + const translateY = zoomAlignment === 'center' ? viewportY - childCenterY : -style.top + + console.log('zoomAlignment',zoomAlignment); + console.log('viewportY',viewportY) + console.log('childCenterY',childCenterY); + console.log('translateY',translateY); + console.log('-style.top',-style.top) + + /** + * translateY current: -106 + * translateY needed: -253 + * */ + // For scenarios like resizing the browser window if (shouldRefresh) { From 145479c7e07b9064f11f067b1cb89dd1b6794e79 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Mon, 19 May 2025 13:48:08 +0200 Subject: [PATCH 3/9] source/utils.ts: remove debug logs --- source/utils.ts | 14 +------------- 1 file changed, 1 insertion(+), 13 deletions(-) diff --git a/source/utils.ts b/source/utils.ts index f8c7bdaf..eec2d094 100644 --- a/source/utils.ts +++ b/source/utils.ts @@ -522,19 +522,7 @@ export const getStyleModalImg: GetStyleModalImg = ({ const translateX = viewportX - childCenterX const translateY = zoomAlignment === 'center' ? viewportY - childCenterY : -style.top - - console.log('zoomAlignment',zoomAlignment); - console.log('viewportY',viewportY) - console.log('childCenterY',childCenterY); - console.log('translateY',translateY); - console.log('-style.top',-style.top) - - /** - * translateY current: -106 - * translateY needed: -253 - * */ - - + // For scenarios like resizing the browser window if (shouldRefresh) { style.transitionDuration = '0.01ms' From 011c0428eaa9c637f4e14ff1bfa31d73341b2da3 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Mon, 19 May 2025 13:54:29 +0200 Subject: [PATCH 4/9] source/Controlled.tsx, utils.ts: rename prop zoomAlignment to zoomAlignmentY --- source/Controlled.tsx | 10 +++++----- source/utils.ts | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/source/Controlled.tsx b/source/Controlled.tsx index 238a3fe7..9a01a437 100644 --- a/source/Controlled.tsx +++ b/source/Controlled.tsx @@ -73,7 +73,7 @@ export interface ControlledProps { }) => React.ReactElement zoomImg?: React.ImgHTMLAttributes zoomMargin?: number - zoomAlignment?: 'center' | 'top' + zoomAlignmentY?: 'center' | 'top' } export function Controlled (props: ControlledProps) { @@ -89,7 +89,7 @@ interface ControlledDefaultProps { swipeToUnzoomThreshold: number wrapElement: 'div' | 'span' zoomMargin: number - zoomAlignment: 'center' | 'top' + zoomAlignmentY: 'center' | 'top' } type ControlledPropsWithDefaults = ControlledDefaultProps & ControlledProps @@ -113,7 +113,7 @@ class ControlledBase extends React.Component { const hasScalableSrc = isSvg || @@ -521,8 +521,8 @@ export const getStyleModalImg: GetStyleModalImg = ({ const childCenterY = parseFloat(String(style.top || 0)) + (parseFloat(String(style.height || 0)) / 2) const translateX = viewportX - childCenterX - const translateY = zoomAlignment === 'center' ? viewportY - childCenterY : -style.top - + const translateY = zoomAlignmentY === 'center' ? viewportY - childCenterY : -style.top + // For scenarios like resizing the browser window if (shouldRefresh) { style.transitionDuration = '0.01ms' From b5a9b43247e6e7f91844620056a1fddb292dc538 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Mon, 19 May 2025 13:54:56 +0200 Subject: [PATCH 5/9] README.md: add prop zoomAlignmentY to API --- README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/README.md b/README.md index e4d16688..3252e008 100644 --- a/README.md +++ b/README.md @@ -121,6 +121,10 @@ export interface UncontrolledProps { // be from the window's boundaries. // Default: 0 zoomMargin?: number + + // Align the zoomed image vertically to the top or center of the viewport. + // Default: 'center' + zoomAlignmentY?: 'center' | 'top' } ``` From 7b0cc793efddcdd582302283d602b0c8e3a08bf4 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Mon, 19 May 2025 19:12:42 +0200 Subject: [PATCH 6/9] Controlled.tsx, utils.ts: fix linting errors --- source/Controlled.tsx | 6 +++--- source/utils.ts | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/source/Controlled.tsx b/source/Controlled.tsx index 9a01a437..32828510 100644 --- a/source/Controlled.tsx +++ b/source/Controlled.tsx @@ -113,7 +113,7 @@ class ControlledBase extends React.Component { const hasScalableSrc = isSvg || From 3bbec735a13d17e24ac6723116c4113081922167 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Tue, 20 May 2025 13:40:39 +0200 Subject: [PATCH 7/9] source/Controlled.tsx: zoomAlignmentY add bottom alignment fix props order by making it alphabetical --- source/Controlled.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/source/Controlled.tsx b/source/Controlled.tsx index 32828510..3f12e11f 100644 --- a/source/Controlled.tsx +++ b/source/Controlled.tsx @@ -72,8 +72,8 @@ export interface ControlledProps { onUnzoom: () => void }) => React.ReactElement zoomImg?: React.ImgHTMLAttributes + zoomAlignmentY?: 'top' | 'center' | 'bottom' zoomMargin?: number - zoomAlignmentY?: 'center' | 'top' } export function Controlled (props: ControlledProps) { @@ -88,8 +88,8 @@ interface ControlledDefaultProps { IconZoom: React.ElementType swipeToUnzoomThreshold: number wrapElement: 'div' | 'span' + zoomAlignmentY: 'top' | 'center' | 'bottom' zoomMargin: number - zoomAlignmentY: 'center' | 'top' } type ControlledPropsWithDefaults = ControlledDefaultProps & ControlledProps @@ -112,8 +112,8 @@ class ControlledBase extends React.Component Date: Tue, 20 May 2025 13:42:40 +0200 Subject: [PATCH 8/9] source/utils.ts: getStyleModalImg() handle case when zoomAlignmentY == bottom --- source/utils.ts | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/source/utils.ts b/source/utils.ts index a0b37e12..cc9b1c2d 100644 --- a/source/utils.ts +++ b/source/utils.ts @@ -438,7 +438,7 @@ export interface GetStyleModalImg { offset: number, shouldRefresh: boolean, targetEl: SupportedImage, - zoomAlignmentY: 'top' | 'center' + zoomAlignmentY: 'top' | 'center' | 'bottom' }): React.CSSProperties } @@ -521,7 +521,20 @@ export const getStyleModalImg: GetStyleModalImg = ({ const childCenterY = parseFloat(String(style.top || 0)) + (parseFloat(String(style.height || 0)) / 2) const translateX = viewportX - childCenterX - const translateY = zoomAlignmentY === 'center' ? viewportY - childCenterY : -style.top + let translateY + + switch (zoomAlignmentY) { + case 'top': + translateY = -style.top; + break + case 'bottom': + translateY = window.innerHeight - style.height - style.top; + break + case 'center': + default: + translateY = viewportY - childCenterY + break + } // For scenarios like resizing the browser window if (shouldRefresh) { From 72b4e30ad12629df15c864c08647e0341ec55070 Mon Sep 17 00:00:00 2001 From: alessandro stoppato Date: Tue, 20 May 2025 21:08:19 +0200 Subject: [PATCH 9/9] README.md: update prop zoomAlignmentY with all allowed values --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3252e008..8df7584c 100644 --- a/README.md +++ b/README.md @@ -124,7 +124,7 @@ export interface UncontrolledProps { // Align the zoomed image vertically to the top or center of the viewport. // Default: 'center' - zoomAlignmentY?: 'center' | 'top' + zoomAlignmentY?: 'top' | 'center' | 'bottom' } ```