Feature/epmgcip 151/add image zooming

.prettierrc.json

@@ -1,7 +1,7 @@
 {
-    "semi": false,
-    "singleQuote": true,
-    "jsxSingleQuote": true,
-    "trailingComma": "all",
-    "printWidth": 80
-  }
+  "semi": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80
+}

src/components/organisms/ImageGallery/ImageGallery.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react'
 import Slider from 'react-slick'
 import { useShallow } from 'zustand/react/shallow'
 import clsx from 'clsx'
-import Lightbox, { ZoomRef } from 'yet-another-react-lightbox'
+import Lightbox, { ControllerRef, ZoomRef } from 'yet-another-react-lightbox'
 import 'yet-another-react-lightbox/styles.css'
 import Zoom from 'yet-another-react-lightbox/plugins/zoom'
 import 'slick-carousel/slick/slick.css'
@@ -21,8 +21,8 @@ interface Props {
 function ImageGallery({ images }: Props) {
   const zoomRef = useRef<ZoomRef>(null)
   const {
-    index: galleryIndex,
-    setIndex: setGalleryIndex,
+    id: galleryId,
+    setId: setGalleryId,
     isOpen,
     setIsOpen,
     isOpeningWithZoom,
@@ -33,8 +33,8 @@ function ImageGallery({ images }: Props) {
     setZoom,
   } = useImageGalleryStore(
     useShallow((state) => ({
-      index: state.index,
-      setIndex: state.setIndex,
+      id: state.id,
+      setId: state.setId,
       isOpeningWithZoom: state.isOpeningWithZoom,
       isOpen: state.isOpen,
       setIsOpen: state.setIsOpen,
@@ -46,10 +46,12 @@ 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 handleOnImageClick = (index: number) => {
+  const handleOnImageClick = (index: string) => {
     setIsOpeningWithZoom(true)
-    setGalleryIndex(index)
+    setGalleryId(index)
     setIsOpen(true)
   }
 
@@ -64,7 +66,7 @@ function ImageGallery({ images }: Props) {
         <button
           className={styles.lightboxButton}
           type='button'
-          onClick={() => handleOnImageClick(index)}
+          onClick={() => handleOnImageClick(image.id)}
         >
           <img
             data-testid={`image-gallery-image-${index}`}
@@ -104,15 +106,28 @@ function ImageGallery({ images }: Props) {
         plugins={[Zoom]}
         zoom={{ ref: zoomRef, maxZoomPixelRatio: 3 }}
         index={galleryIndex}
+        controller={{ ref }}
         on={{
           entered: () => {
             if (isOpeningWithZoom) {
-              zoomRef.current?.changeZoom(
-                zoomValue,
-                true,
-                zoomOffsetX,
-                zoomOffsetY,
-              )
+              const currentImage = new Image()
+              currentImage.src =
+                images.find((i) => i.id === galleryId)?.url || ''
+              currentImage.onload = () => {
+                const wrapperX =
+                  window.innerWidth < currentImage.width
+                    ? window.innerWidth
+                    : currentImage.width
+                const wrapperY =
+                  window.innerHeight < currentImage.height
+                    ? window.innerHeight
+                    : currentImage.height
+                const offsetX =
+                  (wrapperX / 100) * (zoomOffsetX - 50) * (1 + 1 / zoomValue)
+                const offsetY =
+                  (wrapperY / 100) * (zoomOffsetY - 50) * (1 + 1 / zoomValue)
+                zoomRef.current?.changeZoom(zoomValue, true, offsetX, offsetY)
+              }
             }
             setZoom(0, 0, 0)
             setIsOpeningWithZoom(false)

src/components/pages/Exhibit/Exhibit.tsx

@@ -58,13 +58,13 @@ interface Props {
 
 export default function ExhibitPage({ slug }: Props) {
   const {
-    setIndex: setGalleryIndex,
+    setId: setGalleryId,
     setIsOpen: setIsOpenGallery,
     setIsOpeningWithZoom: setIsOpeningGalleryWithZoom,
     setZoom: setGalleryZoom,
   } = useImageGalleryStore(
     useShallow((state) => ({
-      setIndex: state.setIndex,
+      setId: state.setId,
       setIsOpen: state.setIsOpen,
       setIsOpeningWithZoom: state.setIsOpeningWithZoom,
       setZoom: state.setZoom,
@@ -112,31 +112,29 @@ export default function ExhibitPage({ slug }: Props) {
   }, [exhibit?.sys.id, slug, i18n.language])
 
   useEffect(() => {
-    console.log('1111', document.getElementById('exhibit-description'))
     document
       .getElementById('exhibit-description')
       ?.querySelectorAll('a')
       .forEach((link) => {
         link.addEventListener('click', (e) => {
           const { href } = e?.target as HTMLAnchorElement
-          if (!href.includes('imageIndex')) {
+          if (!href.includes('imageId')) {
             return
           }
 
           e.preventDefault()
 
           const params = new URLSearchParams(new URL(href).search)
-          const indexString = params.get('imageIndex')
+          const idString = params.get('imageId') || ''
           const xString = params.get('x')
           const yString = params.get('y')
           const zoomString = params.get('zoom')
-          const index = indexString ? parseInt(indexString, 10) : 0
           const x = xString ? parseInt(xString, 10) : 0
           const y = yString ? parseInt(yString, 10) : 0
           const zoom = zoomString ? parseInt(zoomString, 10) : 0
 
           setIsOpeningGalleryWithZoom(true)
-          setGalleryIndex(index)
+          setGalleryId(idString)
           setGalleryZoom(zoom, x, y)
           setIsOpenGallery(true)
         })

src/interfaces/IImageGalleryState.ts

@@ -1,11 +1,11 @@
 interface IImageGalleryState {
-  index: number
+  id: string | undefined
   isOpen: boolean
   isOpeningWithZoom: boolean
   zoomValue: number
   zoomOffsetX: number
   zoomOffsetY: number
-  setIndex: (index: number) => void
+  setId: (id: string) => void
   setIsOpen: (isOpen: boolean) => void
   setIsOpeningWithZoom: (i: boolean) => void
   setZoom: (value: number, xOffset: number, yOffset: number) => void

src/stores/useImageGalleryStore.ts

@@ -2,17 +2,17 @@ import { create } from 'zustand'
 import IImageGalleryState from '../interfaces/IImageGalleryState'
 
 const useImageGalleryStore = create<IImageGalleryState>((set) => ({
-  index: 0,
+  id: undefined,
   isOpen: false,
   isOpeningWithZoom: false,
   zoomValue: 0,
   zoomOffsetX: 0,
   zoomOffsetY: 0,
-  setIndex: (i) => set(() => ({ index: i })),
+  setId: (i) => set(() => ({ id: i })),
   setIsOpen: (i) => set(() => ({ isOpen: i })),
   setIsOpeningWithZoom: (i) => set(() => ({ isOpeningWithZoom: i })),
   setZoom: (v, x, y) =>
-    set(() => ({ zoomValue: v, zoomOffsetX: x, zoomOffsety: y })),
+    set(() => ({ zoomValue: v, zoomOffsetX: x, zoomOffsetY: y })),
 }))
 
 export default useImageGalleryStore