Merge pull request #17 from Cratis/Components:copilot/improve-pivotviewer-features

Improve PivotViewer: faster pinch zoom and fix grouped-mode fly-to animation

Author: einari

Source/PivotViewer/PivotViewer.css

@@ -799,16 +799,22 @@
   font-variant-numeric: tabular-nums;
 }
 
-/* Fade axis labels when switching views - matched to sprite animation duration (600ms) */
+/* Fade and collapse axis labels when switching views */
 .pivot-viewer .pv-axis-labels {
-  transition: opacity 600ms ease;
+  transition: opacity 600ms ease, max-height 600ms ease, padding 600ms ease, border-color 600ms ease;
+  overflow: hidden;
 }
 .pivot-viewer .pv-axis-labels.hidden {
   opacity: 0;
+  max-height: 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  border-top-color: transparent;
   pointer-events: none;
 }
 .pivot-viewer .pv-axis-labels.visible {
   opacity: 1;
+  max-height: 80px;
   pointer-events: auto;
 }
 

Source/PivotViewer/PivotViewer.tsx

@@ -277,6 +277,8 @@ export function PivotViewer<TItem extends object>({
         zoomLevel,
         viewMode,
         layout,
+        containerRef,
+        spacerRef,
         containerDimensions,
         scrollPosition,
         preSelectionState,
@@ -296,6 +298,7 @@ export function PivotViewer<TItem extends object>({
         zoomLevel,
         viewMode,
         layout,
+        containerRef,
         containerDimensions,
         grouping,
         data,

Source/PivotViewer/hooks/useCardSelection.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useCallback } from 'react';
+import type React from 'react';
 import { handleCardSelection } from '../utils/selection';
 import type { Layout } from '../utils/cardPosition';
 import type { ViewMode } from '../components/Toolbar';
@@ -20,6 +21,8 @@ interface UseCardSelectionParams<TItem extends object> {
     zoomLevel: number;
     viewMode: ViewMode;
     layout: Layout;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    spacerRef: React.RefObject<HTMLDivElement | null>;
     containerDimensions: { width: number; height: number };
     scrollPosition: { x: number; y: number };
     preSelectionState: { zoom: number; scrollLeft: number; scrollTop: number } | null;
@@ -39,6 +42,8 @@ export function useCardSelection<TItem extends object>({
     zoomLevel,
     viewMode,
     layout,
+    containerRef,
+    spacerRef,
     containerDimensions,
     scrollPosition,
     preSelectionState,
@@ -53,8 +58,8 @@ export function useCardSelection<TItem extends object>({
     return useCallback((item: TItem, e: MouseEvent, id?: number | string) => {
         if (isPanning) return;
 
-        // Get container element from event target
-        const container = (e.target as Element)?.closest('.pv-main')?.parentElement as HTMLDivElement | null;
+        // Use the containerRef directly as the scrollable viewport
+        const container = containerRef.current;
         if (!container) return;
 
         // Resolve item ID
@@ -111,7 +116,7 @@ export function useCardSelection<TItem extends object>({
             targetCardPosition,
             getCardPositionAtZoom: callbacks.getCardPositionAtZoom,
             getLayoutSizeAtZoom: callbacks.getLayoutSizeAtZoom,
-            spacer: container.querySelector('.pv-spacer') as HTMLDivElement,
+            spacer: spacerRef.current,
             preSelectionState,
             startScrollPosition: { x: scrollPosition.x, y: scrollPosition.y },
             setZoomLevel,
@@ -122,5 +127,5 @@ export function useCardSelection<TItem extends object>({
             zoomLevel,
             totalHeight: targetTotalHeight,
         });
-    }, [isPanning, selectedItem, zoomLevel, preSelectionState, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions, scrollPosition, data, getItemId]);
+    }, [isPanning, selectedItem, zoomLevel, preSelectionState, viewMode, resolveId, setZoomLevel, layout, grouping, containerRef, spacerRef, containerDimensions, scrollPosition, data, getItemId]);
 }

Source/PivotViewer/hooks/useDetailPanelClose.ts

@@ -2,6 +2,7 @@
 // Licensed under the MIT license. See LICENSE file in the project root for full license information.
 
 import { useCallback } from 'react';
+import type React from 'react';
 import { animateZoomAndScroll, smoothScrollTo } from '../utils/animations';
 import type { Layout } from '../utils/cardPosition';
 import type { ViewMode } from '../components/Toolbar';
@@ -18,6 +19,7 @@ interface UseDetailPanelCloseParams<TItem extends object> {
     zoomLevel: number;
     viewMode: ViewMode;
     layout: Layout;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     containerDimensions: { width: number; height: number };
     grouping: unknown;
     data: TItem[];
@@ -34,6 +36,7 @@ export function useDetailPanelClose<TItem extends object>({
     zoomLevel,
     viewMode,
     layout,
+    containerRef,
     containerDimensions,
     grouping,
     data,
@@ -44,8 +47,8 @@ export function useDetailPanelClose<TItem extends object>({
     setPreSelectionState,
 }: UseDetailPanelCloseParams<TItem>) {
     return useCallback(() => {
-        // Get container element
-        const container = document.querySelector('.pv-main')?.parentElement as HTMLDivElement | null;
+        // Use the containerRef directly as the scrollable viewport
+        const container = containerRef.current;
         if (!container || !selectedItem) {
             setSelectedItem(null);
             return;
@@ -116,5 +119,5 @@ export function useDetailPanelClose<TItem extends object>({
                 setPreSelectionState(null);
             },
         });
-    }, [preSelectionState, selectedItem, zoomLevel, viewMode, resolveId, setZoomLevel, layout, grouping, containerDimensions, data, setSelectedItem, setPreSelectionState, setIsZooming]);
+    }, [preSelectionState, selectedItem, zoomLevel, viewMode, resolveId, setZoomLevel, layout, grouping, containerRef, containerDimensions, data, setSelectedItem, setPreSelectionState, setIsZooming]);
 }

Source/PivotViewer/hooks/useWheelZoom.ts

@@ -24,7 +24,17 @@ export function useWheelZoom(
       const scrollX = container.scrollLeft;
       const scrollY = container.scrollTop;
 
-      const delta = -e.deltaY * 0.01;
+      // Normalize delta based on deltaMode:
+      //   0 = DOM_DELTA_PIXEL  (trackpad pinch — deltaY is in pixels, small values)
+      //   1 = DOM_DELTA_LINE   (mouse wheel   — deltaY is in lines, typically 3)
+      //   2 = DOM_DELTA_PAGE   (rare, treated same as pixel for safety)
+      let factor: number;
+      if (e.deltaMode === 1) {
+        factor = 0.12; // line-mode: each "line" gives a noticeable zoom step
+      } else {
+        factor = 0.01; // pixel-mode (trackpad pinch) and page-mode: fast zoom step
+      }
+      const delta = -e.deltaY * factor;
       const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomLevel + delta));
       const zoomRatio = newZoom / zoomLevel;
 

Source/PivotViewer/utils/selection.ts

@@ -101,13 +101,20 @@ export function handleCardSelection<TItem>({
 
   if (isFirstSelection) {
     if (viewMode === 'collection') {
-      // Collection mode: just smooth scroll to center, no zoom
+      // Collection mode: animate scroll to center the selected card (no zoom change)
       if (cardPosition) {
-        // In collection mode, we don't have a detail panel width offset because the panel is an overlay or separate
-        // But if we want to center it, we should consider if the detail panel pushes content
-        // For now, assume 0 offset as per original code
+        setIsZooming(true);
         const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, 0, totalHeight);
-        smoothScrollTo(container, scrollLeft, scrollTop, true);
+        animateZoomAndScroll({
+          container,
+          cardPosition,
+          startZoom: zoomLevel,
+          targetZoom: zoomLevel,
+          targetScrollLeft: scrollLeft,
+          targetScrollTop: scrollTop,
+          onUpdate: setZoomLevel,
+          onComplete: () => setIsZooming(false),
+        });
       }
     } else {
       // Grouped mode: animate zoom and scroll
@@ -127,13 +134,21 @@ export function handleCardSelection<TItem>({
       });
     }
   } else {
-    // Subsequent selections: just center the new card
+    // Subsequent selections: animate the scroll to center the new card
     if (cardPosition) {
-      // In collection mode, we don't zoom, so we just center.
-      // In grouped mode, we might be zoomed in, so we center with offset.
+      setIsZooming(true);
       const detailWidth = viewMode === 'collection' ? 0 : DETAIL_PANEL_WIDTH;
       const { scrollLeft, scrollTop } = calculateCenterScrollPosition(container, cardPosition, zoomLevel, detailWidth, totalHeight);
-      smoothScrollTo(container, scrollLeft, scrollTop, true);
+      animateZoomAndScroll({
+        container,
+        cardPosition,
+        startZoom: zoomLevel,
+        targetZoom: zoomLevel,
+        targetScrollLeft: scrollLeft,
+        targetScrollTop: scrollTop,
+        onUpdate: setZoomLevel,
+        onComplete: () => setIsZooming(false),
+      });
     }
   }
 }