zoom in / zoom out (#430)

ui2/src/cconstants.ts

@@ -44,3 +44,6 @@ export const STORAGE_KEY_PAGINATION_SITEMS_PER_PAGE = "sitems_per_page"
 
 export const PAGINATION_PAGE_SIZES = ["5", "10", "15", "25", "50"]
 export const INITIAL_PAGE_SIZE = 5
+export const ZOOM_FACTOR_STEP = 10 // percents
+export const MIN_ZOOM_FACTOR = 25 // percents
+export const MAX_ZOOM_FACTOR = 300 // percents

ui2/src/components/Viewer/Page/Page.module.css

@@ -0,0 +1,4 @@
+.page {
+  display: block;
+  text-align: center;
+}

ui2/src/components/Viewer/Page.tsx → ui2/src/components/Viewer/Page/Page.tsx

@@ -2,10 +2,14 @@ import {useEffect, useContext, useRef} from "react"
 import {useSelector} from "react-redux"
 import {Stack} from "@mantine/core"
 import PanelContext from "@/contexts/PanelContext"
-import {selectDocumentCurrentPage} from "@/slices/dualPanel/dualPanel"
+import {
+  selectDocumentCurrentPage,
+  selectZoomFactor
+} from "@/slices/dualPanel/dualPanel"
 import {PageType, PanelMode} from "@/types"
 import {useProtectedJpg} from "@/hooks/protected_image"
 import {RootState} from "@/app/types"
+import classes from "./Page.module.css"
 
 type Args = {
   page: PageType
@@ -18,6 +22,9 @@ export default function Page({page}: Args) {
     selectDocumentCurrentPage(state, mode)
   )
   const targetRef = useRef<HTMLImageElement | null>(null)
+  const zoomFactor = useSelector((state: RootState) =>
+    selectZoomFactor(state, mode)
+  )
 
   useEffect(() => {
     if (currentPage == page.number) {
@@ -28,8 +35,13 @@ export default function Page({page}: Args) {
   }, [currentPage, protectedImage, page.number])
 
   return (
-    <Stack className="page" align="center">
-      <img ref={targetRef} src={protectedImage.data || ""} /> {page.number}
+    <Stack className={classes.page}>
+      <img
+        style={{width: `${zoomFactor}%`}}
+        ref={targetRef}
+        src={protectedImage.data || ""}
+      />
+      <div>{page.number}</div>
     </Stack>
   )
 }

ui2/src/components/Viewer/Page/index.tsx

@@ -0,0 +1,3 @@
+import Page from "./Page"
+
+export default Page

ui2/src/components/Viewer/Pages/Pages.tsx

@@ -6,6 +6,7 @@ import {useContext} from "react"
 import PanelContext from "@/contexts/PanelContext"
 import type {PanelMode} from "@/types"
 import {RootState} from "@/app/types"
+import Zoom from "../Zoom"
 import Page from "../Page"
 import classes from "./Pages.module.css"
 
@@ -20,6 +21,7 @@ export default function Pages() {
   return (
     <Stack justify="center" className={classes.pages}>
       {pages}
+      <Zoom />
     </Stack>
   )
 }

ui2/src/components/Viewer/Viewer.module.css

@@ -1,3 +1,3 @@
 .inner {
-  outline: 1px solid #ccc;
+  outline: 1px solid light-dark(#ccc, #666);
 }

ui2/src/components/Viewer/Zoom/Zoom.module.css

@@ -0,0 +1,9 @@
+.zoom {
+  background-color: hsla(0, 0%, 83%, 0.49);
+  color: #3e3e3e;
+  width: 40%;
+  position: sticky;
+  bottom: 1rem;
+  padding: 0.5rem;
+  margin: auto;
+}

ui2/src/components/Viewer/Zoom/Zoom.tsx

@@ -0,0 +1,36 @@
+import {useContext} from "react"
+import {useDispatch} from "react-redux"
+import {Group} from "@mantine/core"
+import {IconZoomIn, IconZoomOut} from "@tabler/icons-react"
+import classes from "./Zoom.module.css"
+import PanelContext from "@/contexts/PanelContext"
+import type {PanelMode} from "@/types"
+import {
+  incZoomFactor,
+  decZoomFactor,
+  fitZoomFactor
+} from "@/slices/dualPanel/dualPanel"
+
+export default function Zoom() {
+  const mode: PanelMode = useContext(PanelContext)
+  const dispatch = useDispatch()
+
+  const incZoom = () => {
+    dispatch(incZoomFactor(mode))
+  }
+  const decZoom = () => {
+    dispatch(decZoomFactor(mode))
+  }
+
+  const fitZoom = () => {
+    dispatch(fitZoomFactor(mode))
+  }
+
+  return (
+    <Group justify={"center"} className={classes.zoom}>
+      <IconZoomIn onClick={incZoom} />
+      <IconZoomOut onClick={decZoom} />
+      <div onClick={fitZoom}>Fit</div>
+    </Group>
+  )
+}

ui2/src/components/Viewer/Zoom/index.tsx

@@ -0,0 +1,3 @@
+import Zoom from "./Zoom"
+
+export default Zoom

ui2/src/slices/dualPanel/dualPanel.ts

@@ -46,7 +46,12 @@ import {
   NodeWithSpinner,
   SelectionNodePayload
 } from "./types"
-import {INITIAL_PAGE_SIZE} from "@/cconstants"
+import {
+  INITIAL_PAGE_SIZE,
+  MIN_ZOOM_FACTOR,
+  MAX_ZOOM_FACTOR,
+  ZOOM_FACTOR_STEP
+} from "@/cconstants"
 
 const initialState: DualPanelState = {
   mainPanel: {
@@ -198,6 +203,57 @@ const dualPanelSlice = createSlice({
   name: "dualPanel",
   initialState,
   reducers: {
+    incZoomFactor(state, action: PayloadAction<PanelMode>) {
+      const mode = action.payload
+      if (mode == "main") {
+        if (state.mainPanel.viewer) {
+          let zoom = state.mainPanel.viewer?.zoomFactor
+          if (zoom && zoom + ZOOM_FACTOR_STEP < MAX_ZOOM_FACTOR) {
+            state.mainPanel.viewer.zoomFactor = zoom + ZOOM_FACTOR_STEP
+          }
+        }
+      }
+      if (mode == "secondary") {
+        if (state.secondaryPanel?.viewer) {
+          let zoom = state.secondaryPanel.viewer.zoomFactor
+          if (zoom && zoom + ZOOM_FACTOR_STEP < MAX_ZOOM_FACTOR) {
+            state.secondaryPanel.viewer.zoomFactor = zoom + ZOOM_FACTOR_STEP
+          }
+        }
+      }
+    },
+    decZoomFactor(state, action: PayloadAction<PanelMode>) {
+      const mode = action.payload
+      if (mode == "main") {
+        if (state.mainPanel.viewer) {
+          let zoom = state.mainPanel.viewer?.zoomFactor
+          if (zoom && zoom - ZOOM_FACTOR_STEP > MIN_ZOOM_FACTOR) {
+            state.mainPanel.viewer.zoomFactor = zoom - ZOOM_FACTOR_STEP
+          }
+        }
+      }
+      if (mode == "secondary") {
+        if (state.secondaryPanel?.viewer) {
+          let zoom = state.secondaryPanel.viewer.zoomFactor
+          if (zoom && zoom - ZOOM_FACTOR_STEP > MIN_ZOOM_FACTOR) {
+            state.secondaryPanel.viewer.zoomFactor = zoom - ZOOM_FACTOR_STEP
+          }
+        }
+      }
+    },
+    fitZoomFactor(state, action: PayloadAction<PanelMode>) {
+      const mode = action.payload
+      if (mode == "main") {
+        if (state.mainPanel.viewer) {
+          state.mainPanel.viewer.zoomFactor = 100
+        }
+      }
+      if (mode == "secondary") {
+        if (state.secondaryPanel?.viewer) {
+          state.secondaryPanel.viewer.zoomFactor = 100
+        }
+      }
+    },
     toggleThumbnailsPanel(state, action: PayloadAction<PanelMode>) {
       const mode = action.payload
 
@@ -416,7 +472,8 @@ const dualPanelSlice = createSlice({
           versions: action.payload.versions,
           currentVersion: Math.max(...versionNumbers),
           currentPage: action.meta.arg.page || 1,
-          thumbnailsPanelOpen: false
+          thumbnailsPanelOpen: false,
+          zoomFactor: 100
         }
         return
       }
@@ -431,7 +488,8 @@ const dualPanelSlice = createSlice({
             versions: action.payload.versions,
             currentVersion: Math.max(...versionNumbers),
             currentPage: action.meta.arg.page || 1,
-            thumbnailsPanelOpen: false
+            thumbnailsPanelOpen: false,
+            zoomFactor: 100
           }
         }
         return
@@ -461,6 +519,9 @@ const dualPanelSlice = createSlice({
 })
 
 export const {
+  incZoomFactor,
+  decZoomFactor,
+  fitZoomFactor,
   toggleThumbnailsPanel,
   setCurrentNode,
   folderAdded,
@@ -797,3 +858,11 @@ export const selectThumbnailsPanelOpen = (
 
   return Boolean(state.dualPanel?.secondaryPanel?.viewer?.thumbnailsPanelOpen)
 }
+
+export const selectZoomFactor = (state: RootState, mode: PanelMode) => {
+  if (mode == "main") {
+    return state.dualPanel.mainPanel.viewer?.zoomFactor
+  }
+
+  return state.dualPanel.secondaryPanel?.viewer?.zoomFactor
+}

ui2/src/slices/dualPanel/helpers.ts

@@ -124,7 +124,8 @@ export function setCurrentNodeHelper({
         versions: [],
         currentVersion: null,
         currentPage: 1,
-        thumbnailsPanelOpen: false
+        thumbnailsPanelOpen: false,
+        zoomFactor: 100
       }
     }
   }
@@ -163,7 +164,8 @@ export function setCurrentNodeHelper({
           versions: [],
           currentVersion: null,
           currentPage: 1,
-          thumbnailsPanelOpen: false
+          thumbnailsPanelOpen: false,
+          zoomFactor: 100
         },
         searchResults: null
       }

ui2/src/slices/dualPanel/types.ts

@@ -50,6 +50,10 @@ export interface Viewer {
   currentPage: number
   // is thumbnails panel open?
   thumbnailsPanelOpen: boolean
+  // zoom factor is expressed as percentage.
+  // 5 -> means 5%
+  // 100 -> means 100% i.e exact fit
+  zoomFactor: number
 }
 
 export interface SearchResults {