diff --git a/frontend/package-lock.json b/frontend/package-lock.json index cbb08a209..407f8ca06 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -10,7 +10,7 @@ "license": "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE", "dependencies": { "@atlaskit/pragmatic-drag-and-drop": "^1.7.7", - "@dnd-kit/core": "^6.3.1", + "@dnd-kit/core": "^6.3.1", "@embedpdf/core": "^1.4.1", "@embedpdf/engines": "^1.4.1", "@embedpdf/plugin-annotation": "^1.4.1", diff --git a/frontend/src/core/components/layout/Workbench.tsx b/frontend/src/core/components/layout/Workbench.tsx index d425d1e45..dfb7ae32c 100644 --- a/frontend/src/core/components/layout/Workbench.tsx +++ b/frontend/src/core/components/layout/Workbench.tsx @@ -156,13 +156,11 @@ export default function Workbench() { return ( 0 ? '3.5rem' : '0'), - }} + className={`flex-1 h-full min-w-80 relative flex flex-col z-10 ${styles.workbenchScrollable}`} + data-tour="workbench" + style={{ + backgroundColor: isRainbowMode ? undefined : 'var(--bg-background)', + }} > {/* Top Controls */} {activeFiles.length > 0 && ( @@ -187,7 +185,7 @@ export default function Workbench() { className="flex-1 min-h-0 relative z-10 workbench-scrollable " style={{ transition: 'opacity 0.15s ease-in-out', - paddingTop: 0, + paddingTop: currentView === 'viewer' ? '0' : (activeFiles.length > 0 ? '2rem' : '0'), }} > {renderMainContent()} @@ -202,5 +200,6 @@ export default function Workbench() { accessibilityStatement={config?.accessibilityStatement} /> + ); } diff --git a/frontend/src/core/components/pageEditor/DragDropGrid.tsx b/frontend/src/core/components/pageEditor/DragDropGrid.tsx index 794dea3cb..9c7c192c5 100644 --- a/frontend/src/core/components/pageEditor/DragDropGrid.tsx +++ b/frontend/src/core/components/pageEditor/DragDropGrid.tsx @@ -1,13 +1,13 @@ import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react'; import { Box } from '@mantine/core'; import { useVirtualizer } from '@tanstack/react-virtual'; -import { GRID_CONSTANTS } from './constants'; -import styles from './DragDropGrid.module.css'; +import { GRID_CONSTANTS } from '@app/components/pageEditor/constants'; +import styles from '@app/components/pageEditor/DragDropGrid.module.css'; import { Z_INDEX_SELECTION_BOX, Z_INDEX_DROP_INDICATOR, Z_INDEX_DRAG_BADGE, -} from '../../styles/zIndex'; +} from '@app/styles/zIndex'; import { DndContext, DragEndEvent, @@ -55,7 +55,7 @@ function resolveDropHint( } const items: ItemRect[] = Array.from(itemRefs.current.entries()) - .filter(([itemId, element]): element is HTMLDivElement => !!element && itemId !== activeId) + .filter((entry): entry is [string, HTMLDivElement] => !!entry[1] && entry[0] !== activeId) .map(([itemId, element]) => ({ id: itemId, rect: element.getBoundingClientRect(), diff --git a/frontend/src/core/components/pageEditor/PageEditor.tsx b/frontend/src/core/components/pageEditor/PageEditor.tsx index 3640d5bee..a3f0872b4 100644 --- a/frontend/src/core/components/pageEditor/PageEditor.tsx +++ b/frontend/src/core/components/pageEditor/PageEditor.tsx @@ -9,11 +9,11 @@ import { pdfExportService } from "@app/services/pdfExportService"; import { documentManipulationService } from "@app/services/documentManipulationService"; import { exportProcessedDocumentsToFiles } from "@app/services/pdfExportHelpers"; // Thumbnail generation is now handled by individual PageThumbnail components -import './PageEditor.module.css'; -import PageThumbnail from './PageThumbnail'; -import DragDropGrid from './DragDropGrid'; -import SkeletonLoader from '../shared/SkeletonLoader'; -import NavigationWarningModal from '../shared/NavigationWarningModal'; +import '@app/components/pageEditor/PageEditor.module.css'; +import PageThumbnail from '@app/components/pageEditor/PageThumbnail'; +import DragDropGrid from '@app/components/pageEditor/DragDropGrid'; +import SkeletonLoader from '@app/components/shared/SkeletonLoader'; +import NavigationWarningModal from '@app/components/shared/NavigationWarningModal'; import { FileId } from "@app/types/file"; import { @@ -23,11 +23,11 @@ import { BulkRotateCommand, PageBreakCommand, UndoManager -} from './commands/pageCommands'; -import { GRID_CONSTANTS } from './constants'; -import { useInitialPageDocument } from './hooks/useInitialPageDocument'; -import { usePageDocument } from './hooks/usePageDocument'; -import { usePageEditorState } from './hooks/usePageEditorState'; +} from '@app/components/pageEditor/commands/pageCommands'; +import { GRID_CONSTANTS } from '@app/components/pageEditor/constants'; +import { useInitialPageDocument } from '@app/components/pageEditor/hooks/useInitialPageDocument'; +import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument'; +import { usePageEditorState } from '@app/components/pageEditor/hooks/usePageEditorState'; import { parseSelection } from "@app/utils/bulkselection/parseSelection"; import { usePageEditorRightRailButtons } from "@app/components/pageEditor/pageEditorRightRailButtons"; import { useFileColorMap } from "@app/components/pageEditor/hooks/useFileColorMap"; @@ -345,27 +345,6 @@ const PageEditor = ({ setHasUnsavedChanges(true); }, [setHasUnsavedChanges]); - // Watch for container size changes to update split line positions - useEffect(() => { - const container = gridContainerRef.current; - if (!container) return; - - const resizeObserver = new ResizeObserver((entries) => { - const entry = entries[0]; - if (entry) { - setContainerDimensions({ - width: entry.contentRect.width, - height: entry.contentRect.height - }); - } - }); - - resizeObserver.observe(container); - - return () => { - resizeObserver.disconnect(); - }; - }, []); // Interface functions for parent component const displayDocument = editedDocument || initialDocument; diff --git a/frontend/src/core/components/pageEditor/commands/pageCommands.ts b/frontend/src/core/components/pageEditor/commands/pageCommands.ts index a133bfbf8..4819c8509 100644 --- a/frontend/src/core/components/pageEditor/commands/pageCommands.ts +++ b/frontend/src/core/components/pageEditor/commands/pageCommands.ts @@ -1,5 +1,5 @@ import { FileId } from '@app/types/file'; -import { PDFDocument, PDFPage, PageBreakSettings, PageSize, PageOrientation } from '@app/types/pageEditor'; +import { PDFDocument, PDFPage, PageBreakSettings } from '@app/types/pageEditor'; // V1-style DOM-first command system (replaces the old React state commands) export abstract class DOMCommand { diff --git a/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts index 617633e5c..e77e526c9 100644 --- a/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts +++ b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts @@ -1,5 +1,5 @@ import { useState, useEffect } from 'react'; -import { usePageDocument } from './usePageDocument'; +import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument'; import { PDFDocument } from '@app/types/pageEditor'; /** diff --git a/frontend/src/core/components/shared/TopControls.tsx b/frontend/src/core/components/shared/TopControls.tsx index f07b6fafd..c417451f8 100644 --- a/frontend/src/core/components/shared/TopControls.tsx +++ b/frontend/src/core/components/shared/TopControls.tsx @@ -58,7 +58,6 @@ const createViewOptions = ( ) : ( )} - {displayName} ), value: "viewer", diff --git a/frontend/src/core/hooks/useWheelZoom.ts b/frontend/src/core/hooks/useWheelZoom.ts index a999566f8..66dd2e294 100644 --- a/frontend/src/core/hooks/useWheelZoom.ts +++ b/frontend/src/core/hooks/useWheelZoom.ts @@ -54,16 +54,17 @@ export function useWheelZoom({ let accumulator = 0; - const handleWheel = (event: WheelEvent) => { - const hasModifier = event.ctrlKey || event.metaKey; + const handleWheel = (event: Event) => { + const wheelEvent = event as WheelEvent; + const hasModifier = wheelEvent.ctrlKey || wheelEvent.metaKey; if (requireModifierKey && !hasModifier) { return; } - event.preventDefault(); - event.stopPropagation(); + wheelEvent.preventDefault(); + wheelEvent.stopPropagation(); - accumulator += event.deltaY; + accumulator += wheelEvent.deltaY; if (accumulator <= -threshold) { onZoomIn();