reorder pages

papermerge · Aug 23, 2024 · 37ae505 · 37ae505
1 parent 4e07ad4
commit 37ae505
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/ui2/src/components/Viewer/Thumbnail/Thumbnail.tsx b/ui2/src/components/Viewer/Thumbnail/Thumbnail.tsx
@@ -9,7 +9,8 @@ import {
   dropThumbnailPage,
   selectionAddPage,
   selectionRemovePage,
-  selectSelectedPageIds
+  selectSelectedPageIds,
+  selectSelectedPages
 } from "@/slices/dualPanel/dualPanel"
 import {
   dragPagesStart,
@@ -36,6 +37,9 @@ export default function Thumbnail({page}: Args) {
   const selectedIds = useSelector((state: RootState) =>
     selectSelectedPageIds(state, mode)
   )
+  const selectedPages = useSelector((state: RootState) =>
+    selectSelectedPages(state, mode)
+  )
   const ref = useRef<HTMLDivElement>(null)
   const [cssClassNames, setCssClassNames] = useState<Array<string>>([])
   const draggedPages = useSelector((state: RootState) =>
@@ -101,7 +105,7 @@ export default function Thumbnail({page}: Args) {
   }
 
   const onDragStart = () => {
-    dispatch(dragPagesStart([page]))
+    dispatch(dragPagesStart([page, ...selectedPages]))
   }
 
   const onDragEnd = () => {

diff --git a/ui2/src/slices/dualPanel/dualPanel.ts b/ui2/src/slices/dualPanel/dualPanel.ts
@@ -217,17 +217,17 @@ const dualPanelSlice = createSlice({
   initialState,
   reducers: {
     selectionAddPage: (state, action: PayloadAction<SelectionPagePayload>) => {
-      const nodeId = action.payload.selectionId
+      const pageId = action.payload.selectionId
       const mode = action.payload.mode
-      selectionAddPageHelper(state, nodeId, mode)
+      selectionAddPageHelper(state, pageId, mode)
     },
     selectionRemovePage: (
       state,
       action: PayloadAction<SelectionPagePayload>
     ) => {
-      const nodeId = action.payload.selectionId
+      const pageId = action.payload.selectionId
       const mode = action.payload.mode
-      selectionRemovePageHelper(state, nodeId, mode)
+      selectionRemovePageHelper(state, pageId, mode)
     },
     dropThumbnailPage(state, action: PayloadAction<DropThumbnailPageArgs>) {
       const {mode, sources, target, position} = action.payload
@@ -805,6 +805,56 @@ export const selectSelectedPageIds = (state: RootState, mode: PanelMode) => {
   return state.dualPanel.secondaryPanel?.viewer?.selectedIds
 }
 
+export const selectPagesRaw = (
+  state: RootState,
+  mode: PanelMode
+): Array<PageType> | undefined => {
+  let verNumber
+  let ver
+
+  if (mode == "main") {
+    verNumber = state.dualPanel.mainPanel?.viewer?.currentVersion
+    if (
+      verNumber &&
+      state.dualPanel.mainPanel?.viewer?.versions &&
+      state.dualPanel.mainPanel?.viewer?.versions.length >= verNumber
+    ) {
+      ver = state.dualPanel.mainPanel?.viewer?.versions[verNumber - 1]
+      if (ver) {
+        return ver.pages
+      }
+    }
+  } else {
+    verNumber = state.dualPanel.secondaryPanel?.viewer?.currentVersion
+    if (
+      verNumber &&
+      state.dualPanel.secondaryPanel?.viewer?.versions &&
+      state.dualPanel.secondaryPanel?.viewer?.versions.length >= verNumber
+    ) {
+      ver = state.dualPanel.secondaryPanel?.viewer?.versions[verNumber - 1]
+      if (ver) {
+        return ver.pages
+      }
+    }
+  }
+}
+
+export const selectSelectedPages = createSelector(
+  [selectSelectedPageIds, selectPagesRaw],
+  (
+    selectedIds: Array<string> | undefined,
+    allNodes: Array<PageType> | undefined
+  ): Array<PageType> => {
+    if (selectedIds && allNodes) {
+      return Object.values(allNodes).filter((i: PageType) =>
+        selectedIds.includes(i.id)
+      )
+    }
+
+    return []
+  }
+)
+
 export const selectSelectedNodes = createSelector(
   [selectSelectedNodeIds, selectNodesRaw],
   (

diff --git a/ui2/src/slices/dualPanel/helpers.ts b/ui2/src/slices/dualPanel/helpers.ts
@@ -12,18 +12,18 @@ import {reorder as reorder_pages} from "@/utils"
 
 export function selectionAddPageHelper(
   state: DualPanelState,
-  nodeId: string,
+  pageId: string,
   mode: PanelMode
 ) {
   switch (mode) {
     case "main":
       if (state.mainPanel.viewer) {
-        state.mainPanel.viewer.selectedIds.push(nodeId)
+        state.mainPanel.viewer.selectedIds.push(pageId)
       }
       break
     case "secondary":
       if (state.secondaryPanel?.viewer) {
-        state.secondaryPanel.viewer.selectedIds.push(nodeId)
+        state.secondaryPanel.viewer.selectedIds.push(pageId)
       }
       break
     default:
@@ -78,13 +78,13 @@ export function selectionRemoveNodeHelper(
 
 export function selectionRemovePageHelper(
   state: DualPanelState,
-  nodeId: string,
+  pageId: string,
   mode: PanelMode
 ) {
   if (mode == "main") {
     if (state.mainPanel.viewer) {
       const newSelectedIds = state.mainPanel.viewer.selectedIds.filter(
-        i => i != nodeId
+        i => i != pageId
       )
       state.mainPanel.viewer.selectedIds = newSelectedIds
     }
@@ -93,7 +93,7 @@ export function selectionRemovePageHelper(
   if (mode == "secondary") {
     if (state.secondaryPanel?.viewer) {
       const newSelectedIds = state.secondaryPanel.viewer.selectedIds.filter(
-        i => i != nodeId
+        i => i != pageId
       )
       state.secondaryPanel.viewer.selectedIds = newSelectedIds
     }