- {rowVirtualizer.getVirtualItems().map((virtualRow) => {
- const startIndex = virtualRow.index * itemsPerRow;
- const endIndex = Math.min(startIndex + itemsPerRow, items.length);
- const rowItems = items.slice(startIndex, endIndex);
+ // Calculate selection box dimensions
+ const selectionBoxStyle = isBoxSelecting && boxSelectStart && boxSelectEnd ? {
+ left: Math.min(boxSelectStart.x, boxSelectEnd.x),
+ top: Math.min(boxSelectStart.y, boxSelectEnd.y),
+ width: Math.abs(boxSelectEnd.x - boxSelectStart.x),
+ height: Math.abs(boxSelectEnd.y - boxSelectStart.y),
+ zIndex: Z_INDEX_SELECTION_BOX,
+ } : null;
- return (
-
+ // Calculate drop indicator position
+ const dropIndicatorStyle = useMemo(() => {
+ if (!hoveredItemId || !dropSide || !activeId) return null;
+
+ const element = itemRefs.current.get(hoveredItemId);
+ const container = containerRef.current;
+ if (!element || !container) return null;
+
+ const itemRect = element.getBoundingClientRect();
+ const containerRect = container.getBoundingClientRect();
+
+ const top = itemRect.top - containerRect.top;
+ const height = itemRect.height;
+ const left = dropSide === 'left'
+ ? itemRect.left - containerRect.left - itemGap / 2
+ : itemRect.right - containerRect.left + itemGap / 2;
+
+ return {
+ left: `${left}px`,
+ top: `${top}px`,
+ height: `${height}px`,
+ zIndex: Z_INDEX_DROP_INDICATOR,
+ };
+ }, [hoveredItemId, dropSide, activeId, itemGap, zoomLevel]);
+
+ const activeDragIds = useMemo(() => {
+ if (!activeId) return [];
+ if (boxSelectedPageIds.includes(activeId)) {
+ return boxSelectedPageIds;
+ }
+ return [activeId];
+ }, [activeId, boxSelectedPageIds]);
+
+ const handleWheelWhileDragging = useCallback((event: React.WheelEvent
) => {
+ if (!activeId) {
+ return;
+ }
+
+ const scrollElement = getScrollElement();
+ if (!scrollElement) {
+ return;
+ }
+
+ scrollElement.scrollBy({
+ top: event.deltaY,
+ left: event.deltaX,
+ });
+
+ event.preventDefault();
+ }, [activeId, getScrollElement]);
+
+ return (
+
+
+ {selectionBoxStyle && (
+
+ )}
+
+ {dropIndicatorStyle && (
+
+ )}
+
+
+ {rowVirtualizer.getVirtualItems().map((virtualRow) => {
+ const startIndex = virtualRow.index * itemsPerRow;
+ const endIndex = Math.min(startIndex + itemsPerRow, visibleItems.length);
+ const rowItems = visibleItems.slice(startIndex, endIndex);
+
+ return (
- {rowItems.map((item, itemIndex) => {
- const actualIndex = startIndex + itemIndex;
- return (
-
- {/* Item */}
- {renderItem(item, actualIndex, itemRefs)}
-
- );
- })}
-
+
+ {rowItems.map((item, itemIndex) => {
+ const actualIndex = startIndex + itemIndex;
+ return (
+
+ );
+ })}
+
-
-
+ );
+ })}
+