@cratis/components 0.1.9

package/PivotViewer/hooks/useWheelZoom.ts

@@ -0,0 +1,114 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCallback, useEffect } from 'react';
+import { ZOOM_MIN, ZOOM_MAX } from '../utils/utils';
+
+export function useWheelZoom(
+  containerRef: React.RefObject<HTMLDivElement | null>,
+  zoomLevel: number,
+  setZoomLevel: (zoom: number) => void
+) {
+  const handleWheel = useCallback((e: WheelEvent) => {
+    if (e.ctrlKey || e.metaKey) {
+      e.preventDefault();
+
+      const container = containerRef.current;
+      if (!container) return;
+
+      container.style.scrollBehavior = 'auto';
+
+      const rect = container.getBoundingClientRect();
+      const cursorX = e.clientX - rect.left;
+      const cursorY = e.clientY - rect.top;
+      const scrollX = container.scrollLeft;
+      const scrollY = container.scrollTop;
+
+      const delta = -e.deltaY * 0.01;
+      const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, zoomLevel + delta));
+      const zoomRatio = newZoom / zoomLevel;
+
+      const newScrollLeft = (scrollX + cursorX) * zoomRatio - cursorX;
+      const newScrollTop = (scrollY + cursorY) * zoomRatio - cursorY;
+
+      setZoomLevel(newZoom);
+
+      setTimeout(() => {
+        container.scrollLeft = Math.max(0, newScrollLeft);
+        container.scrollTop = Math.max(0, newScrollTop);
+        setTimeout(() => {
+          container.style.scrollBehavior = '';
+        }, 50);
+      }, 0);
+    }
+  }, [zoomLevel, setZoomLevel, containerRef]);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    container.addEventListener('wheel', handleWheel, { passive: false });
+
+    let lastTouchDistance = 0;
+    let currentZoom = zoomLevel;
+
+    const handleTouchStart = (e: TouchEvent) => {
+      if (e.touches.length === 2) {
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        lastTouchDistance = Math.sqrt(dx * dx + dy * dy);
+        currentZoom = zoomLevel;
+      }
+    };
+
+    const handleTouchMove = (e: TouchEvent) => {
+      if (e.touches.length === 2) {
+        e.preventDefault();
+        const dx = e.touches[0].clientX - e.touches[1].clientX;
+        const dy = e.touches[0].clientY - e.touches[1].clientY;
+        const distance = Math.sqrt(dx * dx + dy * dy);
+
+        const centerX = (e.touches[0].clientX + e.touches[1].clientX) / 2;
+        const centerY = (e.touches[0].clientY + e.touches[1].clientY) / 2;
+        const rect = container.getBoundingClientRect();
+        const cursorX = centerX - rect.left;
+        const cursorY = centerY - rect.top;
+
+        if (lastTouchDistance > 0) {
+          const scale = distance / lastTouchDistance;
+          const newZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, currentZoom * scale));
+          const zoomRatio = newZoom / zoomLevel;
+
+          const contentX = container.scrollLeft + cursorX;
+          const contentY = container.scrollTop + cursorY;
+
+          const newScrollLeft = contentX * zoomRatio - cursorX;
+          const newScrollTop = contentY * zoomRatio - cursorY;
+
+          setZoomLevel(newZoom);
+
+          requestAnimationFrame(() => {
+            container.scrollLeft = Math.max(0, newScrollLeft);
+            container.scrollTop = Math.max(0, newScrollTop);
+          });
+        }
+        lastTouchDistance = distance;
+      }
+    };
+
+    const handleTouchEnd = () => {
+      lastTouchDistance = 0;
+    };
+
+    container.addEventListener('touchstart', handleTouchStart, { passive: true });
+    container.addEventListener('touchmove', handleTouchMove, { passive: false });
+    container.addEventListener('touchend', handleTouchEnd, { passive: true });
+
+    return () => {
+      container.removeEventListener('wheel', handleWheel);
+      container.removeEventListener('touchstart', handleTouchStart);
+      container.removeEventListener('touchmove', handleTouchMove);
+      container.removeEventListener('touchend', handleTouchEnd);
+    };
+  }, [handleWheel, zoomLevel, setZoomLevel, containerRef]);
+}

package/PivotViewer/hooks/useZoomState.ts

@@ -0,0 +1,34 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useState, useCallback } from 'react';
+import { ZOOM_MIN, ZOOM_MAX } from '../utils/utils';
+
+export function useZoomState(initialZoom = 1) {
+  const [zoomLevel, setZoomLevel] = useState(initialZoom);
+
+  const handleZoomChange = useCallback((newZoom: number) => {
+    setZoomLevel(Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, newZoom)));
+  }, []);
+
+  const handleZoomIn = useCallback(() => {
+    handleZoomChange(zoomLevel + 0.2);
+  }, [zoomLevel, handleZoomChange]);
+
+  const handleZoomOut = useCallback(() => {
+    handleZoomChange(zoomLevel - 0.2);
+  }, [zoomLevel, handleZoomChange]);
+
+  const handleZoomSlider = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    handleZoomChange(parseFloat(e.target.value));
+  }, [handleZoomChange]);
+
+  return {
+    zoomLevel,
+    setZoomLevel,
+    handleZoomChange,
+    handleZoomIn,
+    handleZoomOut,
+    handleZoomSlider,
+  };
+}

package/PivotViewer/index.ts

@@ -0,0 +1,7 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { PivotViewer } from './PivotViewer';
+
+export { PivotViewer, PivotViewer as PivotViewerOptimized };
+export type { PivotViewerProps, PivotDimension, PivotFilter, PivotFilterOption, PivotGroup, PivotPrimitive } from './types';

package/PivotViewer/types.ts

@@ -0,0 +1,59 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import type { ReactNode } from 'react';
+
+export type PivotPrimitive = string | number | boolean | Date | null | undefined;
+
+export interface PivotGroup<TItem extends object> {
+  key: string;
+  label: string;
+  value: PivotPrimitive;
+  items: TItem[];
+  count?: number;
+}
+
+export interface PivotDimension<TItem extends object> {
+  key: string;
+  label: string;
+  getValue: (item: TItem) => PivotPrimitive;
+  formatValue?: (value: PivotPrimitive) => string;
+  sort?: (a: PivotGroup<TItem>, b: PivotGroup<TItem>) => number;
+}
+
+export interface PivotFilterOption {
+  key: string;
+  label: string;
+  value: PivotPrimitive;
+  count: number;
+}
+
+export interface PivotFilter<TItem extends object> {
+  key: string;
+  label: string;
+  getValue: (item: TItem) => PivotPrimitive;
+  multi?: boolean;
+  options?: PivotFilterOption[];
+  sort?: (a: PivotFilterOption, b: PivotFilterOption) => number;
+  /** For numeric filters, enables range picker with histogram */
+  type?: 'string' | 'number' | 'date';
+  /** Number of buckets for the histogram in range filters */
+  buckets?: number;
+}
+
+export interface PivotViewerProps<TItem extends object> {
+  data: TItem[];
+  dimensions: PivotDimension<TItem>[];
+  filters?: PivotFilter<TItem>[];
+  defaultDimensionKey?: string;
+  cardRenderer?: (item: TItem) => ReactNode;
+  getItemId?: (item: TItem, index: number) => string | number;
+  searchFields?: (keyof TItem)[];
+  className?: string;
+  emptyContent?: ReactNode;
+  isLoading?: boolean;
+}
+
+export type FilterState = Record<string, Set<string>>;
+
+export type RangeFilterState = Record<string, [number, number] | null>;

package/PivotViewer/utils/animations.ts

@@ -0,0 +1,249 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export type EasingFunction = (t: number) => number;
+
+export const easeOutCubic: EasingFunction = (t: number) => 1 - Math.pow(1 - t, 3);
+
+export interface ZoomAnimationParams {
+  startZoom: number;
+  targetZoom: number;
+  duration?: number;
+  easing?: EasingFunction;
+}
+
+export interface ScrollAnimationParams {
+  targetScrollLeft: number;
+  targetScrollTop: number;
+}
+
+export interface ZoomScrollAnimationParams extends ZoomAnimationParams, ScrollAnimationParams {
+  container: HTMLElement;
+  cardPosition?: { x: number; y: number; width: number; height: number } | null;
+  targetCardPosition?: { x: number; y: number; width: number; height: number } | null;
+  getCardPositionAtZoom?: (zoom: number) => { x: number; y: number; width: number; height: number } | null;
+  getLayoutSizeAtZoom?: (zoom: number) => { width: number; height: number };
+  spacer?: HTMLElement | null;
+  onUpdate: (zoom: number) => void;
+  onComplete?: () => void;
+  startScrollLeft?: number; // Optional explicit start scroll
+  startScrollTop?: number; // Optional explicit start scroll
+}
+
+/**
+ * Animate zoom and scroll together, keeping a specific element centered
+ */
+export function animateZoomAndScroll({
+  container,
+  cardPosition,
+  targetCardPosition,
+  getCardPositionAtZoom,
+  getLayoutSizeAtZoom,
+  spacer,
+  startZoom,
+  targetZoom,
+  targetScrollLeft,
+  targetScrollTop,
+  duration = 300,
+  easing = easeOutCubic,
+  onUpdate,
+  onComplete,
+  startScrollLeft,
+  startScrollTop,
+}: ZoomScrollAnimationParams): () => void {
+  container.style.scrollBehavior = 'auto';
+
+  let startTime: number | null = null;
+  let rafId: number | null = null;
+
+  // Capture start scroll if not provided
+  const initialScrollLeft = startScrollLeft ?? container.scrollLeft;
+  const initialScrollTop = startScrollTop ?? container.scrollTop;
+
+  // Calculate initial center point relative to viewport
+  const startCardCenterX = cardPosition ? (cardPosition.x * startZoom + (cardPosition.width * startZoom) / 2) : 0;
+  const startCardCenterY = cardPosition ? (cardPosition.y * startZoom + (cardPosition.height * startZoom) / 2) : 0;
+
+  const startCardScreenX = startCardCenterX - initialScrollLeft;
+  const startCardScreenY = startCardCenterY - initialScrollTop;
+
+  const animate = (timestamp: number) => {
+    if (startTime === null) {
+      startTime = timestamp;
+    }
+
+    const elapsed = timestamp - startTime;
+    const progress = Math.min(1, elapsed / duration);
+    const easedProgress = easing(progress);
+
+    const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
+
+    // Update spacer size synchronously if possible
+    if (spacer && getLayoutSizeAtZoom) {
+        const size = getLayoutSizeAtZoom(currentZoom);
+        if (size) {
+            spacer.style.width = `${size.width * currentZoom}px`;
+            spacer.style.height = `${size.height * currentZoom}px`;
+        }
+    }
+
+    onUpdate(currentZoom);
+
+    if (cardPosition) {
+      let currentCardX: number;
+      let currentCardY: number;
+
+      if (getCardPositionAtZoom) {
+        const pos = getCardPositionAtZoom(currentZoom);
+        if (pos) {
+          currentCardX = pos.x;
+          currentCardY = pos.y;
+        } else {
+          currentCardX = cardPosition.x;
+          currentCardY = cardPosition.y;
+        }
+      } else {
+        // Interpolate card position if target is provided (for layouts that change with zoom)
+        currentCardX = targetCardPosition
+          ? cardPosition.x + (targetCardPosition.x - cardPosition.x) * easedProgress
+          : cardPosition.x;
+        currentCardY = targetCardPosition
+          ? cardPosition.y + (targetCardPosition.y - cardPosition.y) * easedProgress
+          : cardPosition.y;
+      }
+
+      // Calculate where the card center is at current zoom
+      const currentCardCenterX = currentCardX * currentZoom + (cardPosition.width * currentZoom) / 2;
+      const currentCardCenterY = currentCardY * currentZoom + (cardPosition.height * currentZoom) / 2;
+
+      // Calculate where the card center will be at the end of animation (relative to viewport)
+      // Target scroll position is where we want to end up
+      const endCardX = targetCardPosition ? targetCardPosition.x : cardPosition.x;
+      const endCardY = targetCardPosition ? targetCardPosition.y : cardPosition.y;
+
+      const endCardCenterX = endCardX * targetZoom + (cardPosition.width * targetZoom) / 2;
+      const endCardCenterY = endCardY * targetZoom + (cardPosition.height * targetZoom) / 2;
+
+      const endCardScreenX = endCardCenterX - targetScrollLeft;
+      const endCardScreenY = endCardCenterY - targetScrollTop;
+
+      // Interpolate the desired screen position
+      const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
+      const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
+
+      // Calculate needed scroll position to put card at desired screen position
+      const neededScrollLeft = currentCardCenterX - desiredScreenX;
+      const neededScrollTop = currentCardCenterY - desiredScreenY;
+
+      let maxScrollLeft = container.scrollWidth - container.clientWidth;
+      let maxScrollTop = container.scrollHeight - container.clientHeight;
+
+      // If we have explicit layout size, use it for clamping to avoid DOM sync issues
+      if (getLayoutSizeAtZoom) {
+        const size = getLayoutSizeAtZoom(currentZoom);
+        if (size) {
+           maxScrollLeft = Math.max(0, size.width * currentZoom - container.clientWidth);
+           maxScrollTop = Math.max(0, size.height * currentZoom - container.clientHeight);
+        }
+      }
+
+      // We can't clamp strictly during animation because the scrollWidth/Height might not have updated yet
+      // if the spacer hasn't resized. But usually spacer resizes immediately on zoom update.
+      // For safety, we just set it.
+      container.scrollLeft = Math.min(Math.max(0, neededScrollLeft), maxScrollLeft);
+      container.scrollTop = Math.min(Math.max(0, neededScrollTop), maxScrollTop);
+    } else {
+      // If no card position, just interpolate scroll position
+      // Use captured initial scroll positions for linear interpolation
+      const currentScrollLeft = initialScrollLeft + (targetScrollLeft - initialScrollLeft) * easedProgress;
+      const currentScrollTop = initialScrollTop + (targetScrollTop - initialScrollTop) * easedProgress;
+
+      container.scrollLeft = currentScrollLeft;
+      container.scrollTop = currentScrollTop;
+    }
+
+    if (progress < 1) {
+      rafId = requestAnimationFrame(animate);
+    } else {
+      container.style.scrollBehavior = '';
+      container.scrollLeft = targetScrollLeft;
+      container.scrollTop = targetScrollTop;
+      onComplete?.();
+    }
+  };
+
+  rafId = requestAnimationFrame(animate);
+
+  return () => {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      container.style.scrollBehavior = '';
+    }
+  };
+}
+
+/**
+ * Calculate scroll position to center a card in viewport, accounting for detail panel
+ */
+export function calculateCenterScrollPosition(
+  container: HTMLElement,
+  cardPosition: { x: number; y: number; width: number; height: number },
+  zoomLevel: number,
+  detailPanelWidth: number = 0,
+  totalHeight?: number
+): { scrollLeft: number; scrollTop: number } {
+  const cardCenterX = cardPosition.x * zoomLevel + (cardPosition.width * zoomLevel) / 2;
+  const cardCenterY = cardPosition.y * zoomLevel + (cardPosition.height * zoomLevel) / 2;
+
+  const availableWidth = container.clientWidth - detailPanelWidth;
+  const targetX = availableWidth / 2;
+  const targetY = container.clientHeight / 2;
+
+  const scrollLeft = Math.max(0, cardCenterX - targetX);
+  let scrollTop = Math.max(0, cardCenterY - targetY);
+
+  console.log('[Animation] calculateCenterScrollPosition', {
+    cardY: cardPosition.y,
+    zoomLevel,
+    cardCenterY,
+    targetY,
+    initialScrollTop: scrollTop,
+    totalHeight,
+    containerHeight: container.clientHeight
+  });
+
+  // If totalHeight is provided, clamp to valid scroll range
+  if (totalHeight) {
+    const contentHeight = totalHeight * zoomLevel;
+    const viewportHeight = container.clientHeight;
+    const maxScrollTop = Math.max(0, contentHeight - viewportHeight);
+
+    console.log('[Animation] Clamping', {
+      contentHeight,
+      viewportHeight,
+      maxScrollTop,
+      currentScrollTop: scrollTop,
+      clamped: Math.min(scrollTop, maxScrollTop)
+    });
+
+    scrollTop = Math.min(scrollTop, maxScrollTop);
+  }
+
+  return { scrollLeft, scrollTop };
+}
+
+/**
+ * Smooth scroll to position
+ */
+export function smoothScrollTo(
+  container: HTMLElement,
+  scrollLeft: number,
+  scrollTop: number,
+  smooth: boolean = true
+): void {
+  container.scrollTo({
+    left: scrollLeft,
+    top: scrollTop,
+    behavior: smooth ? 'smooth' : 'auto',
+  });
+}

package/PivotViewer/utils/constants.ts

@@ -0,0 +1,20 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+// Zoom constants
+export const ZOOM_MIN = 0.1;
+export const ZOOM_MAX = 3;
+export const ZOOM_STEP = 0.05;
+
+// Layout constants
+export const GROUP_SPACING = 40;
+export const CARD_GAP = 8;
+export const CARDS_PER_COLUMN = 5;
+export const BASE_CARD_WIDTH = 180;
+export const BASE_CARD_HEIGHT = 140;
+export const DETAIL_PANEL_WIDTH = 380;
+
+// Animation constants
+export const ZOOM_ANIMATION_DURATION = 300;
+export const ZOOM_MULTIPLIER = 1.15;
+export const MIN_ZOOM_ON_SELECT = 1.2;

package/PivotViewer/utils/index.ts

@@ -0,0 +1,6 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './utils';
+export * from './animations';
+export * from './selection';