diff --git a/frontend/src/components/pageEditor/DragDropGrid.tsx b/frontend/src/components/pageEditor/DragDropGrid.tsx index 715929567..f73b77e4b 100644 --- a/frontend/src/components/pageEditor/DragDropGrid.tsx +++ b/frontend/src/components/pageEditor/DragDropGrid.tsx @@ -6,6 +6,7 @@ import { GRID_CONSTANTS } from './constants'; interface DragDropItem { id: string; splitAfter?: boolean; + isPlaceholder?: boolean; } interface DragDropGridProps { @@ -25,9 +26,12 @@ const DragDropGrid = ({ const itemRefs = useRef>(new Map()); const containerRef = useRef(null); + // Filter out placeholder items (invisible pages for deselected files) + const visibleItems = items.filter(item => !item.isPlaceholder); + // Responsive grid configuration const [itemsPerRow, setItemsPerRow] = useState(4); - const OVERSCAN = items.length > 1000 ? GRID_CONSTANTS.OVERSCAN_LARGE : GRID_CONSTANTS.OVERSCAN_SMALL; + const OVERSCAN = visibleItems.length > 1000 ? GRID_CONSTANTS.OVERSCAN_LARGE : GRID_CONSTANTS.OVERSCAN_SMALL; // Calculate items per row based on container width const calculateItemsPerRow = useCallback(() => { @@ -76,7 +80,7 @@ const DragDropGrid = ({ // Virtualization with react-virtual library const rowVirtualizer = useVirtualizer({ - count: Math.ceil(items.length / itemsPerRow), + count: Math.ceil(visibleItems.length / itemsPerRow), getScrollElement: () => containerRef.current?.closest('[data-scrolling-container]') as Element, estimateSize: () => { const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize); @@ -111,8 +115,8 @@ const DragDropGrid = ({ > {rowVirtualizer.getVirtualItems().map((virtualRow) => { const startIndex = virtualRow.index * itemsPerRow; - const endIndex = Math.min(startIndex + itemsPerRow, items.length); - const rowItems = items.slice(startIndex, endIndex); + const endIndex = Math.min(startIndex + itemsPerRow, visibleItems.length); + const rowItems = visibleItems.slice(startIndex, endIndex); return (
void; + onConfirm: (settings: PageBreakSettings) => void; + selectedPageCount: number; +} + +const PAGE_SIZES: { value: PageSize; label: string; dimensions: string }[] = [ + { value: 'A4', label: 'A4', dimensions: '210 × 297 mm' }, + { value: 'Letter', label: 'Letter', dimensions: '8.5 × 11 in' }, + { value: 'Legal', label: 'Legal', dimensions: '8.5 × 14 in' }, + { value: 'A3', label: 'A3', dimensions: '297 × 420 mm' }, + { value: 'A5', label: 'A5', dimensions: '148 × 210 mm' }, +]; + +export const PageBreakSettingsModal: React.FC = ({ + opened, + onClose, + onConfirm, + selectedPageCount, +}) => { + const [size, setSize] = useState('A4'); + const [orientation, setOrientation] = useState('portrait'); + + const handleConfirm = () => { + onConfirm({ size, orientation }); + onClose(); + }; + + return ( + 1 ? 's' : ''}`} + centered + size="md" + > + +