@cratis/components 0.1.9 → 0.1.12

package/PivotViewer/hooks/useWheelZoom.ts

@@ -1,114 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-// 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

@@ -1,7 +0,0 @@
-// 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

@@ -1,59 +0,0 @@
-// 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

@@ -1,249 +0,0 @@
-// 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

@@ -1,20 +0,0 @@
-// 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

@@ -1,6 +0,0 @@
-// 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';