it works!

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

@@ -6,17 +6,17 @@ import {
   selectDocumentCurrentPage,
   selectZoomFactor
 } from "@/slices/dualPanel/dualPanel"
-import {PageType, PanelMode} from "@/types"
+import {PageAndRotOp, PanelMode} from "@/types"
 import {useProtectedJpg} from "@/hooks/protected_image"
 import {RootState} from "@/app/types"
 import classes from "./Page.module.css"
 
 type Args = {
-  page: PageType
+  page: PageAndRotOp
 }
 
 export default function Page({page}: Args) {
-  const protectedImage = useProtectedJpg(page.jpg_url)
+  const protectedImage = useProtectedJpg(page.page.jpg_url)
   const mode: PanelMode = useContext(PanelContext)
   const currentPage = useSelector((state: RootState) =>
     selectDocumentCurrentPage(state, mode)
@@ -27,21 +27,21 @@ export default function Page({page}: Args) {
   )
 
   useEffect(() => {
-    if (currentPage == page.number) {
+    if (currentPage == page.page.number) {
       if (targetRef.current) {
         targetRef.current.scrollIntoView(false)
       }
     }
-  }, [currentPage, protectedImage, page.number])
+  }, [currentPage, protectedImage, page.page.number])
 
   return (
     <Stack className={classes.page}>
       <img
-        style={{width: `${zoomFactor}%`}}
+        style={{transform: `rotate(${page.angle}deg)`, width: `${zoomFactor}%`}}
         ref={targetRef}
         src={protectedImage.data || ""}
       />
-      <div>{page.number}</div>
+      <div>{page.page.number}</div>
     </Stack>
   )
 }

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

@@ -16,7 +16,7 @@ export default function Pages() {
     selectDocumentCurrentVersion(state, mode)
   )
 
-  const pages = docVersion?.pages.map(p => <Page key={p.id} page={p} />)
+  const pages = docVersion?.pages.map(p => <Page key={p.page.id} page={p} />)
 
   return (
     <Stack justify="center" className={classes.pages}>

ui2/src/components/Viewer/RotateButton.tsx

@@ -1,8 +1,22 @@
+import {useContext} from "react"
+import {useDispatch, useSelector} from "react-redux"
 import {Tooltip, ActionIcon} from "@mantine/core"
 import {IconRotateClockwise} from "@tabler/icons-react"
+import {rotatePages, selectSelectedPages} from "@/slices/dualPanel/dualPanel"
+import PanelContext from "@/contexts/PanelContext"
+import {PanelMode} from "@/types"
+import type {RootState} from "@/app/types"
 
 export default function RotateCCButton() {
-  const onClick = () => {}
+  const mode: PanelMode = useContext(PanelContext)
+  const dispatch = useDispatch()
+  const selectedPages = useSelector((state: RootState) =>
+    selectSelectedPages(state, mode)
+  )
+  const onClick = () => {
+    const pages = selectedPages.map(p => p.page)
+    dispatch(rotatePages({mode, pages, angle: 90}))
+  }
 
   return (
     <Tooltip label="Rotate selected pages clockwise" withArrow>

ui2/src/components/Viewer/Thumbnail/Thumbnail.tsx

@@ -17,7 +17,7 @@ import {
   dragPagesEnd,
   selectDraggedPages
 } from "@/slices/dragndrop"
-import type {PanelMode, PageType, DroppedThumbnailPosition} from "@/types"
+import type {PanelMode, PageAndRotOp, DroppedThumbnailPosition} from "@/types"
 
 import classes from "./Thumbnail.module.scss"
 import {RootState} from "@/app/types"
@@ -27,12 +27,12 @@ const BORDERLINE_BOTTOM = "borderline-bottom"
 const DRAGGED = "dragged"
 
 type Args = {
-  page: PageType
+  page: PageAndRotOp
 }
 
 export default function Thumbnail({page}: Args) {
   const dispatch = useDispatch()
-  const protectedImage = useProtectedJpg(page.jpg_url)
+  const protectedImage = useProtectedJpg(page.page.jpg_url)
   const mode: PanelMode = useContext(PanelContext)
   const selectedIds = useSelector((state: RootState) =>
     selectSelectedPageIds(state, mode)
@@ -47,7 +47,9 @@ export default function Thumbnail({page}: Args) {
   )
 
   useEffect(() => {
-    const cur_page_is_being_dragged = draggedPages?.find(p => p.id == page.id)
+    const cur_page_is_being_dragged = draggedPages?.find(
+      p => p.page.id == page.page.id
+    )
     if (cur_page_is_being_dragged) {
       if (cssClassNames.indexOf(DRAGGED) < 0) {
         setCssClassNames([...cssClassNames, DRAGGED])
@@ -62,7 +64,7 @@ export default function Thumbnail({page}: Args) {
   }, [draggedPages?.length])
 
   const onClick = () => {
-    dispatch(setCurrentPage({mode, page: page.number}))
+    dispatch(setCurrentPage({mode, page: page.page.number}))
   }
 
   const onLocalDragOver = (event: React.DragEvent<HTMLDivElement>) => {
@@ -155,9 +157,9 @@ export default function Thumbnail({page}: Args) {
 
   const onCheck = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (e.currentTarget.checked) {
-      dispatch(selectionAddPage({selectionId: page.id, mode}))
+      dispatch(selectionAddPage({selectionId: page.page.id, mode}))
     } else {
-      dispatch(selectionRemovePage({selectionId: page.id, mode}))
+      dispatch(selectionRemovePage({selectionId: page.page.id, mode}))
     }
   }
 
@@ -177,11 +179,15 @@ export default function Thumbnail({page}: Args) {
     >
       <Checkbox
         onChange={onCheck}
-        checked={selectedIds && selectedIds.includes(page.id)}
+        checked={selectedIds && selectedIds.includes(page.page.id)}
         className={classes.checkbox}
       />
-      <img onClick={onClick} src={protectedImage.data || ""} />
-      {page.number}
+      <img
+        style={{transform: `rotate(${page.angle}deg)`}}
+        onClick={onClick}
+        src={protectedImage.data || ""}
+      />
+      {page.page.number}
     </Stack>
   )
 }

ui2/src/components/Viewer/Thumbnails/Thumbnails.tsx

@@ -22,7 +22,7 @@ export default function Thumbnails() {
   )
 
   const thumbnails = docVersion?.pages.map(p => (
-    <Thumbnail key={p.id} page={p} />
+    <Thumbnail key={p.page.id} page={p} />
   ))
   // display: none
   if (thumbnailsIsOpen) {

ui2/src/slices/dragndrop.ts

@@ -1,9 +1,9 @@
-import {PageType} from "@/types"
+import {PageAndRotOp} from "@/types"
 import {createSlice, PayloadAction} from "@reduxjs/toolkit"
 import {RootState} from "@/app/types"
 
 type DragNDrop = {
-  pages: Array<PageType> | null
+  pages: Array<PageAndRotOp> | null
 }
 
 const initialState: DragNDrop = {
@@ -14,7 +14,7 @@ const dragndropSlice = createSlice({
   name: "dragndrop",
   initialState,
   reducers: {
-    dragPagesStart(state, action: PayloadAction<Array<PageType>>) {
+    dragPagesStart(state, action: PayloadAction<Array<PageAndRotOp>>) {
       state.pages = action.payload
     },
     dragPagesEnd(state) {

ui2/src/slices/dualPanel/dualPanel.ts

@@ -32,6 +32,7 @@ import {
 import type {
   SliceState,
   NodeType,
+  PageType,
   PanelMode,
   PanelType,
   Paginated,
@@ -44,8 +45,10 @@ import type {
   SearchResultNode,
   PaginatedSearchResult,
   DroppedThumbnailPosition,
-  PageType,
-  BooleanString
+  BooleanString,
+  PageAndRotOp,
+  DocumentVersion,
+  DocumentVersionWithPageRot
 } from "@/types"
 import {
   DualPanelState,
@@ -215,15 +218,41 @@ type SetCurrentPageArg = {
 
 type DropThumbnailPageArgs = {
   mode: PanelMode
-  sources: PageType[]
-  target: PageType
+  sources: PageAndRotOp[]
+  target: PageAndRotOp
   position: DroppedThumbnailPosition
 }
 
+type RotatePageArg = {
+  mode: PanelMode
+  angle: number
+  pages: PageType[]
+}
+
 const dualPanelSlice = createSlice({
   name: "dualPanel",
   initialState,
   reducers: {
+    rotatePages: (state, action: PayloadAction<RotatePageArg>) => {
+      const {pages, mode, angle} = action.payload
+      const page_ids = pages.map(p => p.id)
+
+      let curVer
+      if (mode == "main") {
+        curVer = state.mainPanel.viewer?.currentVersion
+        if (curVer && curVer > 0) {
+          let foundPages = state.mainPanel.viewer?.versions[
+            curVer - 1
+          ].pages.filter(p => page_ids.includes(p.page.id))
+          if (foundPages) {
+            for (let i = 0; i < foundPages.length; i++) {
+              foundPages[i].angle = foundPages[i].angle + angle
+            }
+          }
+        }
+      }
+    },
+    rotatePageCC: (state, action: PayloadAction<RotatePageArg>) => {},
     resetPageChanges: (state, action: PayloadAction<PanelMode>) => {
       const mode = action.payload
       resetPageChangesHelper(state, mode)
@@ -528,12 +557,13 @@ const dualPanelSlice = createSlice({
         const versionNumbers = action.payload.versions.map(v => v.number)
         state.mainPanel.viewer = {
           breadcrumb: action.payload.breadcrumb,
-          versions: action.payload.versions,
+          versions: injectPageRotOp(action.payload.versions),
           currentVersion: Math.max(...versionNumbers),
           currentPage: action.meta.arg.page || 1,
           thumbnailsPanelOpen: mainThumbnailsPanelInitialState(),
           zoomFactor: 100,
           selectedIds: [],
+          //@ts-ignore
           initialPages: getLatestVersionPages(action.payload.versions)
         }
         return
@@ -546,12 +576,13 @@ const dualPanelSlice = createSlice({
           searchResults: null,
           viewer: {
             breadcrumb: action.payload.breadcrumb,
-            versions: action.payload.versions,
+            versions: injectPageRotOp(action.payload.versions),
             currentVersion: Math.max(...versionNumbers),
             currentPage: action.meta.arg.page || 1,
             thumbnailsPanelOpen: secondaryThumbnailsPanelInitialState(),
             zoomFactor: 100,
             selectedIds: [],
+            //@ts-ignore
             initialPages: getLatestVersionPages(action.payload.versions)
           }
         }
@@ -582,6 +613,7 @@ const dualPanelSlice = createSlice({
 })
 
 export const {
+  rotatePages,
   incZoomFactor,
   decZoomFactor,
   fitZoomFactor,
@@ -833,7 +865,7 @@ export const selectSelectedPageIds = (state: RootState, mode: PanelMode) => {
 export const selectInitialPages = (
   state: RootState,
   mode: PanelMode
-): Array<PageType> | undefined => {
+): Array<PageAndRotOp> | undefined => {
   if (mode == "main") {
     return state.dualPanel.mainPanel.viewer?.initialPages
   }
@@ -844,7 +876,7 @@ export const selectInitialPages = (
 export const selectPagesRaw = (
   state: RootState,
   mode: PanelMode
-): Array<PageType> | undefined => {
+): Array<PageAndRotOp> | undefined => {
   let verNumber
   let ver
 
@@ -879,11 +911,11 @@ export const selectSelectedPages = createSelector(
   [selectSelectedPageIds, selectPagesRaw],
   (
     selectedIds: Array<string> | undefined,
-    allNodes: Array<PageType> | undefined
-  ): Array<PageType> => {
+    allNodes: Array<PageAndRotOp> | undefined
+  ): Array<PageAndRotOp> => {
     if (selectedIds && allNodes) {
-      return Object.values(allNodes).filter((i: PageType) =>
-        selectedIds.includes(i.id)
+      return Object.values(allNodes).filter((i: PageAndRotOp) =>
+        selectedIds.includes(i.page.id)
       )
     }
 
@@ -894,8 +926,8 @@ export const selectSelectedPages = createSelector(
 export const selectPagesHaveChanged = createSelector(
   [selectInitialPages, selectPagesRaw],
   (
-    initialPages: Array<PageType> | undefined,
-    currentPages: Array<PageType> | undefined
+    initialPages: Array<PageAndRotOp> | undefined,
+    currentPages: Array<PageAndRotOp> | undefined
   ): boolean => {
     if (!initialPages) {
       return false
@@ -910,11 +942,15 @@ export const selectPagesHaveChanged = createSelector(
     }
 
     for (let i = 0; i < (initialPages?.length || 0); i++) {
-      if (initialPages[i].id != currentPages[i].id) {
+      if (initialPages[i].page.id != currentPages[i].page.id) {
+        return true
+      }
+
+      if (initialPages[i].page.number != currentPages[i].page.number) {
         return true
       }
 
-      if (initialPages[i].number != currentPages[i].number) {
+      if (initialPages[i].angle != currentPages[i].angle) {
         return true
       }
     }
@@ -1058,3 +1094,22 @@ function secondaryThumbnailsPanelInitialState(): boolean {
 
   return false
 }
+
+function injectPageRotOp(
+  vers: DocumentVersion[]
+): DocumentVersionWithPageRot[] {
+  return vers.map(raw => injectPageRotOpForDocVer(raw))
+}
+
+function injectPageRotOpForDocVer(
+  ver: DocumentVersion
+): DocumentVersionWithPageRot {
+  let result = ver
+  // @ts-ignore
+  result.pages = ver.pages.map(p => {
+    return {page: p, angle: 0}
+  })
+
+  //@ts-ignore
+  return result
+}