add viewer context

ui2/src/features/document/components/Contextmenu.tsx

@@ -0,0 +1,89 @@
+import {useAppSelector} from "@/app/hooks"
+import type {Coord} from "@/types"
+import {Box, Menu, rem} from "@mantine/core"
+import {
+  IconEdit,
+  IconRotate,
+  IconRotateClockwise,
+  IconTrash,
+  IconX
+} from "@tabler/icons-react"
+import {useContext} from "react"
+
+import PanelContext from "@/contexts/PanelContext"
+import {selectSelectedPages} from "@/features/document/documentVersSlice"
+import type {PanelMode} from "@/types"
+
+interface Args {
+  opened: boolean
+  onChange: (opened: boolean) => void
+  position: Coord
+}
+
+export default function ContextMenu({position, opened, onChange}: Args) {
+  const mode: PanelMode = useContext(PanelContext)
+  const selectedPages = useAppSelector(s => selectSelectedPages(s, mode)) || []
+
+  return (
+    <Menu
+      position="top"
+      opened={opened}
+      onChange={onChange}
+      shadow="md"
+      width={230}
+    >
+      <Menu.Target>
+        <Box
+          style={{
+            position: "absolute",
+            top: `${position.y}px`,
+            left: `${position.x}px`
+          }}
+        ></Box>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          leftSection={<IconEdit style={{width: rem(14), height: rem(14)}} />}
+        >
+          Change title
+        </Menu.Item>
+        {selectedPages.length > 0 && (
+          <Menu.Item
+            leftSection={
+              <IconRotateClockwise style={{width: rem(14), height: rem(14)}} />
+            }
+          >
+            Rotate clockwise
+          </Menu.Item>
+        )}
+        {selectedPages.length > 0 && (
+          <Menu.Item
+            leftSection={
+              <IconRotate style={{width: rem(14), height: rem(14)}} />
+            }
+          >
+            Rotate couter-clockwise
+          </Menu.Item>
+        )}
+        {selectedPages.length > 0 && (
+          <Menu.Item
+            color="red"
+            leftSection={
+              <IconTrash style={{width: rem(14), height: rem(14)}} />
+            }
+          >
+            Delete pages
+          </Menu.Item>
+        )}
+
+        <Menu.Label>Danger zone</Menu.Label>
+        <Menu.Item
+          color="red"
+          leftSection={<IconX style={{width: rem(14), height: rem(14)}} />}
+        >
+          Delete Document
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  )
+}

ui2/src/features/document/components/Viewer.tsx

@@ -7,29 +7,45 @@ import {useNavigate} from "react-router-dom"
 import Breadcrumbs from "@/components/Breadcrumbs"
 import PanelContext from "@/contexts/PanelContext"
 import {useGetDocumentQuery} from "@/features/document/apiSlice"
+import {useRef, useState} from "react"
 
+import {HIDDEN} from "@/cconstants"
 import {
   currentDocVerUpdated,
   currentNodeChanged,
   selectContentHeight,
   selectCurrentNodeID
 } from "@/features/ui/uiSlice"
-import type {NType, PanelMode} from "@/types"
+import type {Coord, NType, PanelMode} from "@/types"
+import {useDisclosure} from "@mantine/hooks"
 import ActionButtons from "./ActionButtons"
+import ContextMenu from "./Contextmenu"
 import PagesHaveChangedDialog from "./PageHaveChangedDialog"
 import Pages from "./Pages"
 import Thumbnails from "./Thumbnails"
 import ThumbnailsToggle from "./ThumbnailsToggle"
 import classes from "./Viewer.module.css"
 
 export default function Viewer() {
+  const ref = useRef<HTMLDivElement>(null)
+  const [contextMenuPosition, setContextMenuPosition] = useState<Coord>(HIDDEN)
+  const [opened, {open, close}] = useDisclosure()
   const mode: PanelMode = useContext(PanelContext)
   const height = useAppSelector(s => selectContentHeight(s, mode))
   const navigate = useNavigate()
   const dispatch = useAppDispatch()
   const currentNodeID = useAppSelector(s => selectCurrentNodeID(s, mode))
   const {currentData: doc, isSuccess} = useGetDocumentQuery(currentNodeID!)
 
+  const onContextMenu = (ev: MouseEvent) => {
+    ev.preventDefault() // prevents default context menu
+
+    let new_y = ev.clientY
+    let new_x = ev.clientX
+    setContextMenuPosition({y: new_y, x: new_x})
+    open()
+  }
+
   const onClick = (node: NType) => {
     if (mode == "secondary" && node.ctype == "folder") {
       dispatch(
@@ -41,6 +57,12 @@ export default function Viewer() {
     }
   }
 
+  const onContextMenuChange = (cmOpened: boolean) => {
+    if (!cmOpened) {
+      close()
+    }
+  }
+
   useEffect(() => {
     if (doc) {
       const maxVerNum = Math.max(...doc.versions.map(v => v.number))
@@ -51,15 +73,33 @@ export default function Viewer() {
     }
   }, [isSuccess, doc])
 
+  useEffect(() => {
+    // detect right click outside
+    if (ref.current) {
+      ref.current.addEventListener("contextmenu", onContextMenu)
+    }
+
+    return () => {
+      if (ref.current) {
+        ref.current.removeEventListener("contextmenu", onContextMenu)
+      }
+    }
+  }, [])
+
   return (
     <div>
       <ActionButtons />
       <Breadcrumbs breadcrumb={doc?.breadcrumb} onClick={onClick} />
-      <Flex className={classes.inner} style={{height: `${height}px`}}>
+      <Flex ref={ref} className={classes.inner} style={{height: `${height}px`}}>
         <Thumbnails />
         <ThumbnailsToggle />
         <Pages />
         <PagesHaveChangedDialog />
+        <ContextMenu
+          opened={opened}
+          position={contextMenuPosition}
+          onChange={onContextMenuChange}
+        />
       </Flex>
     </div>
   )

ui2/src/types.ts

@@ -351,3 +351,8 @@ export type PaginatedArgs = {
   page_number?: number
   page_size?: number
 }
+
+export type Coord = {
+  x: number
+  y: number
+}