fix/epmgcip-143/adjust-shift-calculation (#23)

Co-authored-by: Siarhei Balonikau <[email protected]>
epam · Sep 12, 2024 · 78f6280 · 78f6280
1 parent 6562786
commit 78f6280
Showing 1 changed file with 19 additions and 7 deletions.
diff --git a/src/components/organisms/ImageGallery/ImageGallery.tsx b/src/components/organisms/ImageGallery/ImageGallery.tsx
@@ -48,6 +48,7 @@ function ImageGallery({ images }: Props) {
   const lighboxImages = images.map((i) => ({ src: i.url }))
   const ref = useRef<ControllerRef>(null)
   const galleryIndex = images.findIndex((i) => i.id === galleryId)
+  const carouselPadding = 16
 
   const handleOnImageClick = (index: string) => {
     setIsOpeningWithZoom(true)
@@ -104,28 +105,39 @@ function ImageGallery({ images }: Props) {
         close={handleOnCloseLightbox}
         slides={lighboxImages}
         plugins={[Zoom]}
-        zoom={{ ref: zoomRef, maxZoomPixelRatio: 3 }}
+        zoom={{ ref: zoomRef, maxZoomPixelRatio: 20 }}
         index={galleryIndex}
         controller={{ ref }}
+        carousel={{
+          padding: carouselPadding,
+        }}
         on={{
           entered: () => {
             if (isOpeningWithZoom) {
               const currentImage = new Image()
               currentImage.src =
                 images.find((i) => i.id === galleryId)?.url || ''
               currentImage.onload = () => {
+                // determining the container size for the translate
                 const wrapperX =
                   window.innerWidth < currentImage.width
-                    ? window.innerWidth
+                    ? window.innerWidth - carouselPadding * 2
                     : currentImage.width
                 const wrapperY =
                   window.innerHeight < currentImage.height
-                    ? window.innerHeight
+                    ? window.innerHeight - carouselPadding * 2
                     : currentImage.height
-                const offsetX =
-                  (wrapperX / 100) * (zoomOffsetX - 50) * (1 + 1 / zoomValue)
-                const offsetY =
-                  (wrapperY / 100) * (zoomOffsetY - 50) * (1 + 1 / zoomValue)
+
+                // removing shifting in the zoom plagin of the yet-another-react-lightbox
+                const removeShift = 1 + 1 / zoomValue
+
+                // zoomOffset has top left corner as an origin, but translate will be from center of the screen
+                const translateX = zoomOffsetX - 50
+                const translateY = zoomOffsetY - 50
+
+                // calculating the shift, considering that 'translateX/Y' is in percentages, but the yet-another-react-lightbox deals with pixels
+                const offsetX = (wrapperX / 100) * translateX * removeShift
+                const offsetY = (wrapperY / 100) * translateY * removeShift
                 zoomRef.current?.changeZoom(zoomValue, true, offsetX, offsetY)
               }
             }