From 05075b8ad7fb25730dfd09959743dc5d4c57e1f7 Mon Sep 17 00:00:00 2001 From: Frederick Fogerty Date: Sat, 7 Jul 2018 12:45:02 +1200 Subject: [PATCH 1/3] fix(zoom-pane): set min and max values correctly when image is smaller than container --- src/js/ZoomPane.js | 59 +++++++++++++++++++++++++++------------------- 1 file changed, 35 insertions(+), 24 deletions(-) diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index b061bb9f..3e753cce 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -80,10 +80,31 @@ export default class ZoomPane { // `percentageOffsetX` and `percentageOffsetY` must be percentages // expressed as floats between `0' and `1`. setPosition(percentageOffsetX, percentageOffsetY, triggerRect) { - let left = -(this.imgEl.clientWidth * percentageOffsetX - this.el.clientWidth / 2); - let top = -(this.imgEl.clientHeight * percentageOffsetY - this.el.clientHeight / 2); - let maxLeft = -(this.imgEl.clientWidth - this.el.clientWidth); - let maxTop = -(this.imgEl.clientHeight - this.el.clientHeight); + const { width: imgElWidth, height: imgElHeight } = this.imgEl.getBoundingClientRect(); + const { width: elWidth, height: elHeight } = this.el.getBoundingClientRect(); + + const centreOfContainerX = elWidth / 2; + const centreOfContainerY = elHeight / 2; + + const targetImgXToBeCentre = imgElWidth * percentageOffsetX; + const targetImgYToBeCentre = imgElHeight * percentageOffsetY; + + let left = centreOfContainerX - targetImgXToBeCentre; + let top = centreOfContainerY - targetImgYToBeCentre; + + const differenceBetweenContainerWidthAndImgWidth = elWidth - imgElWidth; + const differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight; + const isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0; + const isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0; + const minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0; + const minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0; + + const maxLeft = isContainerLargerThanImgX + ? differenceBetweenContainerWidthAndImgWidth / 2 + : differenceBetweenContainerWidthAndImgWidth; + const maxTop = isContainerLargerThanImgY + ? differenceBetweenContainerHeightAndImgHeight / 2 + : differenceBetweenContainerHeightAndImgHeight; if (this.el.parentElement === this.settings.inlineContainer) { // This may be needed in the future to deal with browser event @@ -94,31 +115,21 @@ export default class ZoomPane { let scrollY = window.pageYOffset; let inlineLeft = - triggerRect.left + - percentageOffsetX * triggerRect.width - - this.el.clientWidth / 2 + - this.settings.inlineOffsetX + - scrollX; + triggerRect.left + percentageOffsetX * triggerRect.width - elWidth / 2 + this.settings.inlineOffsetX + scrollX; let inlineTop = - triggerRect.top + - percentageOffsetY * triggerRect.height - - this.el.clientHeight / 2 + - this.settings.inlineOffsetY + - scrollY; + triggerRect.top + percentageOffsetY * triggerRect.height - elHeight / 2 + this.settings.inlineOffsetY + scrollY; if (this.settings.containInline) { - let elRect = this.el.getBoundingClientRect(); - if (inlineLeft < triggerRect.left + scrollX) { inlineLeft = triggerRect.left + scrollX; - } else if (inlineLeft + this.el.clientWidth > triggerRect.left + triggerRect.width + scrollX) { - inlineLeft = triggerRect.left + triggerRect.width - this.el.clientWidth + scrollX; + } else if (inlineLeft + elWidth > triggerRect.left + triggerRect.width + scrollX) { + inlineLeft = triggerRect.left + triggerRect.width - elWidth + scrollX; } if (inlineTop < triggerRect.top + scrollY) { inlineTop = triggerRect.top + scrollY; - } else if (inlineTop + this.el.clientHeight > triggerRect.top + triggerRect.height + scrollY) { - inlineTop = triggerRect.top + triggerRect.height - this.el.clientHeight + scrollY; + } else if (inlineTop + elHeight > triggerRect.top + triggerRect.height + scrollY) { + inlineTop = triggerRect.top + triggerRect.height - elHeight + scrollY; } } @@ -127,14 +138,14 @@ export default class ZoomPane { } if (!this.settings.showWhitespaceAtEdges) { - if (left > 0) { - left = 0; + if (left > minLeft) { + left = minLeft; } else if (left < maxLeft) { left = maxLeft; } - if (top > 0) { - top = 0; + if (top > minTop) { + top = minTop; } else if (top < maxTop) { top = maxTop; } From aba501c743d3f7f4c710e3654034270301ae68ad Mon Sep 17 00:00:00 2001 From: Frederick Fogerty Date: Mon, 9 Jul 2018 12:49:05 +1200 Subject: [PATCH 2/3] chore(zoom-pane): organise code slightly better --- src/js/ZoomPane.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index 3e753cce..6a061ccb 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -96,6 +96,7 @@ export default class ZoomPane { const differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight; const isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0; const isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0; + const minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0; const minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0; From b2a6e2fcfe7f6199d3915b61115f22cc227b4ca0 Mon Sep 17 00:00:00 2001 From: PrettierCI Date: Mon, 9 Jul 2018 00:49:12 +0000 Subject: [PATCH 3/3] Sync with Prettier --- src/js/ZoomPane.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/ZoomPane.js b/src/js/ZoomPane.js index 6a061ccb..ab38bd9d 100644 --- a/src/js/ZoomPane.js +++ b/src/js/ZoomPane.js @@ -96,7 +96,7 @@ export default class ZoomPane { const differenceBetweenContainerHeightAndImgHeight = elHeight - imgElHeight; const isContainerLargerThanImgX = differenceBetweenContainerWidthAndImgWidth > 0; const isContainerLargerThanImgY = differenceBetweenContainerHeightAndImgHeight > 0; - + const minLeft = isContainerLargerThanImgX ? differenceBetweenContainerWidthAndImgWidth / 2 : 0; const minTop = isContainerLargerThanImgY ? differenceBetweenContainerHeightAndImgHeight / 2 : 0;