@cratis/components 0.1.9 → 0.1.12

package/PivotViewer/hooks/usePivotEngine.ts

@@ -1,252 +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 { useEffect, useRef, useState, useCallback } from 'react';
-import type {
-  PivotStore,
-  PivotIndexes,
-  FilterSpec,
-  FilterResult,
-  GroupSpec,
-  GroupingResult,
-  WorkerInMessage,
-  WorkerOutMessage,
-  FieldValue,
-} from '../engine/types';
-import { buildStore, buildIndexes, applyFilters, computeGrouping, sortIds } from '../engine/store';
-
-export interface UsePivotEngineOptions<TItem extends object> {
-  data: TItem[];
-  fieldExtractors: Map<string, (item: TItem) => FieldValue>;
-  indexFields: string[];
-}
-
-export interface UsePivotEngineResult {
-  ready: boolean;
-  applyFilters: (filters: FilterSpec[]) => Promise<FilterResult>;
-  computeGrouping: (visibleIds: Uint32Array, groupBy: GroupSpec) => Promise<GroupingResult>;
-  sortIds: (visibleIds: Uint32Array, sortBy: string) => Promise<Uint32Array>;
-}
-
-export function usePivotEngine<TItem extends object>({
-  data,
-  fieldExtractors,
-  indexFields,
-}: UsePivotEngineOptions<TItem>): UsePivotEngineResult {
-  const [ready, setReady] = useState(false);
-  const workerRef = useRef<Worker | null>(null);
-  const indexesRef = useRef<PivotIndexes | null>(null);
-  const fallbackRef = useRef(false);
-  const storeRef = useRef<PivotStore | null>(null);
-  const pendingCallbacksRef = useRef<Map<string, (result: unknown) => void>>(new Map());
-
-  useEffect(() => {
-    const worker = new Worker(
-      new URL('../engine/pivot.worker.ts', import.meta.url),
-      { type: 'module' }
-    );
-
-    workerRef.current = worker;
-
-    worker.onmessage = (e: MessageEvent<WorkerOutMessage>) => {
-      const message = e.data;
-
-      switch (message.type) {
-        case 'indexesReady':
-          console.log('[PivotEngine] Indexes ready');
-          setReady(true);
-          break;
-
-        case 'filterResult': {
-          const callback = pendingCallbacksRef.current.get('filter');
-          if (callback) {
-            callback(message.result);
-            pendingCallbacksRef.current.delete('filter');
-          }
-          break;
-        }
-
-        case 'groupingResult': {
-          const callback = pendingCallbacksRef.current.get('grouping');
-          if (callback) {
-            callback(message.result);
-            pendingCallbacksRef.current.delete('grouping');
-          }
-          break;
-        }
-
-        case 'sortResult': {
-          const callback = pendingCallbacksRef.current.get('sort');
-          if (callback) {
-            callback(message.result);
-            pendingCallbacksRef.current.delete('sort');
-          }
-          break;
-        }
-      }
-    };
-
-    worker.onerror = (error) => {
-      console.error('[PivotEngine] Worker error:', error);
-      // enable synchronous fallback so UI can still function without worker
-      fallbackRef.current = true;
-      workerRef.current = null;
-      // if we already built store/indexes, mark ready so UI can use fallback
-      if (storeRef.current) {
-        try {
-          indexesRef.current = buildIndexes(storeRef.current, indexFields);
-        } catch (e) {
-          console.error('[PivotEngine] Failed to build indexes in fallback:', e);
-          indexesRef.current = null;
-        }
-        setReady(true);
-      }
-    };
-
-    return () => {
-      worker.terminate();
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!workerRef.current) return;
-
-    console.log('[PivotEngine] Building indexes for', data.length, 'items');
-    setReady(false);
-
-    const store = buildStore(data, fieldExtractors);
-    storeRef.current = store;
-
-    // compute indexes locally for immediate fallback and cache
-    try {
-      indexesRef.current = buildIndexes(store, indexFields);
-    } catch (e) {
-      console.error('[PivotEngine] buildIndexes failed:', e);
-      indexesRef.current = null;
-    }
-
-    if (workerRef.current) {
-      const message: WorkerInMessage = {
-        type: 'buildIndexes',
-        store,
-        fields: indexFields,
-      };
-
-      workerRef.current.postMessage(message);
-    } else {
-      // no worker available, mark ready to allow fallback synchronous usage
-      setReady(true);
-    }
-  }, [data, fieldExtractors, indexFields]);
-
-  const applyFiltersCallback = useCallback(
-    (filters: FilterSpec[]): Promise<FilterResult> => {
-      return new Promise((resolve) => {
-        // If worker is not available, use synchronous fallback using local indexes
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            const indexes = indexesRef.current;
-            if (store && indexes) {
-              const result = applyFilters(store, indexes, filters);
-              resolve(result);
-              return;
-            }
-          } catch (e) {
-            console.error('[PivotEngine] fallback applyFilters error:', e);
-          }
-
-          // if fallback not possible, return empty result
-          resolve({ visibleIds: new Uint32Array(0), count: 0 });
-          return;
-        }
-
-        pendingCallbacksRef.current.set('filter', resolve as (result: unknown) => void);
-
-        const message: WorkerInMessage = {
-          type: 'applyFilters',
-          filters,
-        };
-
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  const computeGroupingCallback = useCallback(
-    (visibleIds: Uint32Array, groupBy: GroupSpec): Promise<GroupingResult> => {
-      return new Promise((resolve) => {
-        // synchronous fallback if worker unavailable
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            const indexes = indexesRef.current;
-            if (store && indexes) {
-              const result = computeGrouping(store, indexes, visibleIds, groupBy);
-              resolve(result);
-              return;
-            }
-          } catch (e) {
-            console.error('[PivotEngine] fallback computeGrouping error:', e);
-          }
-
-          resolve({ groups: [] });
-          return;
-        }
-
-        pendingCallbacksRef.current.set('grouping', resolve as (result: unknown) => void);
-
-        const message: WorkerInMessage = {
-          type: 'computeGrouping',
-          visibleIds,
-          groupBy,
-        };
-
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  const sortIdsCallback = useCallback(
-    (visibleIds: Uint32Array, sortBy: string): Promise<Uint32Array> => {
-      return new Promise((resolve) => {
-        // synchronous fallback if worker unavailable
-        if (!workerRef.current || fallbackRef.current) {
-          try {
-            const store = storeRef.current;
-            if (store) {
-              const result = sortIds(store, visibleIds, sortBy);
-              resolve(result);
-              return;
-            }
-          } catch (e) {
-            console.error('[PivotEngine] fallback sortIds error:', e);
-          }
-
-          resolve(visibleIds);
-          return;
-        }
-
-        pendingCallbacksRef.current.set('sort', resolve as (result: unknown) => void);
-
-        const message: WorkerInMessage = {
-          type: 'sort',
-          ids: visibleIds,
-          sortBy,
-        };
-
-        workerRef.current.postMessage(message);
-      });
-    },
-    [ready]
-  );
-
-  return {
-    ready,
-    applyFilters: applyFiltersCallback,
-    computeGrouping: computeGroupingCallback,
-    sortIds: sortIdsCallback,
-  };
-}

package/PivotViewer/hooks/useSelectedItem.ts

@@ -1,402 +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, useRef, useCallback, useEffect } from 'react';
-import { flushSync } from 'react-dom';
-import { ZOOM_MAX } from '../utils/utils';
-
-function getOffsetWithin(element: HTMLElement, ancestor: HTMLElement) {
-  let current: HTMLElement | null = element;
-  let x = 0;
-  let y = 0;
-
-  while (current && current !== ancestor) {
-    x += current.offsetLeft;
-    y += current.offsetTop;
-    current = current.offsetParent as HTMLElement | null;
-  }
-
-  if (current !== ancestor) {
-    const containerRect = ancestor.getBoundingClientRect();
-    const elementRect = element.getBoundingClientRect();
-    x = elementRect.left - containerRect.left + ancestor.scrollLeft;
-    y = elementRect.top - containerRect.top + ancestor.scrollTop;
-  }
-
-  return { x, y };
-}
-
-function scrollCardToCenter(
-  container: HTMLElement,
-  card: HTMLElement,
-  smooth: boolean = true,
-  detailPanelWidth: number = 0
-) {
-  const { x, y } = getOffsetWithin(card, container);
-  const cardCenterX = x + card.offsetWidth / 2;
-  const cardCenterY = y + card.offsetHeight / 2;
-
-  const availableWidth = container.clientWidth - detailPanelWidth;
-  const targetX = availableWidth / 2;
-  const targetY = container.clientHeight / 2;
-
-  const maxScrollLeft = Math.max(0, container.scrollWidth - container.clientWidth);
-  const maxScrollTop = Math.max(0, container.scrollHeight - container.clientHeight);
-  const targetLeft = Math.min(maxScrollLeft, Math.max(0, cardCenterX - targetX));
-  const targetTop = Math.min(maxScrollTop, Math.max(0, cardCenterY - targetY));
-
-  container.scrollTo({
-    left: targetLeft,
-    top: targetTop,
-    behavior: smooth ? 'smooth' : 'auto'
-  });
-}
-
-function escapeAttributeSelectorValue(value: string) {
-  return value.replace(/\\/g, '\\\\').replace(/"/g, '\\"');
-}
-
-export function useSelectedItem<TItem extends object>(
-  containerRef: React.RefObject<HTMLDivElement | null>,
-  zoomLevel: number,
-  setZoomLevel: (zoom: number) => void,
-  resolveId: (item: TItem, index: number) => string | number,
-  viewMode: 'collection' | 'grouped' = 'grouped'
-) {
-  const [selectedItem, setSelectedItem] = useState<TItem | null>(null);
-  const [preSelectionState, setPreSelectionState] = useState<{ zoom: number; scrollLeft: number; scrollTop: number } | null>(null);
-  const [isZooming, setIsZooming] = useState(false);
-  const pendingCenterRaf = useRef<number | null>(null);
-
-  const focusCardById = useCallback((targetId: string | number, detailPanelWidth: number = 380) => {
-    const container = containerRef.current;
-    if (!container) {
-      return;
-    }
-    const selector = `[data-card-id="${escapeAttributeSelectorValue(String(targetId))}"]`;
-    const latestCard = container.querySelector(selector) as HTMLElement | null;
-    if (latestCard) {
-      scrollCardToCenter(container, latestCard, true, detailPanelWidth);
-    }
-  }, [containerRef]);
-
-  const handleCardClick = useCallback((item: TItem, e: React.MouseEvent) => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    const card = (e.target as HTMLElement).closest('.pv-card') as HTMLElement;
-    if (!card) return;
-
-    const itemId = resolveId(item, 0);
-    const selectedId = selectedItem ? resolveId(selectedItem, 0) : null;
-
-    if (selectedId === itemId) {
-      if (pendingCenterRaf.current !== null && typeof window !== 'undefined') {
-        window.clearTimeout(pendingCenterRaf.current);
-        pendingCenterRaf.current = null;
-      }
-
-      if (viewMode === 'collection') {
-        setSelectedItem(null);
-        if (preSelectionState) {
-          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
-          setPreSelectionState(null);
-        }
-        return;
-      }
-
-      if (!preSelectionState || Math.abs(preSelectionState.zoom - zoomLevel) <= 0.001) {
-        setSelectedItem(null);
-        if (preSelectionState) {
-          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
-          setPreSelectionState(null);
-        }
-        return;
-      }
-
-      setIsZooming(true);
-      container.style.scrollBehavior = 'auto';
-
-      const startZoom = zoomLevel;
-      const targetZoom = preSelectionState.zoom;
-      const targetScrollLeft = preSelectionState.scrollLeft;
-      const targetScrollTop = preSelectionState.scrollTop;
-
-      const startOffset = getOffsetWithin(card, container);
-      const startCardScreenX = startOffset.x + card.offsetWidth / 2 - container.scrollLeft;
-      const startCardScreenY = startOffset.y + card.offsetHeight / 2 - container.scrollTop;
-
-      const duration = 300;
-      let startTime: number | null = null;
-
-      const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
-
-      const animate = (timestamp: number) => {
-        if (startTime === null) {
-          startTime = timestamp;
-        }
-
-        const elapsed = timestamp - startTime;
-        const progress = Math.min(1, elapsed / duration);
-        const easedProgress = easeOutCubic(progress);
-
-        const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
-
-        flushSync(() => {
-          setZoomLevel(currentZoom);
-        });
-
-        const currentOffset = getOffsetWithin(card, container);
-        const currentCardCenterX = currentOffset.x + card.offsetWidth / 2;
-        const currentCardCenterY = currentOffset.y + card.offsetHeight / 2;
-
-        const endCardScreenX = currentCardCenterX - targetScrollLeft;
-        const endCardScreenY = currentCardCenterY - targetScrollTop;
-
-        const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
-        const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
-
-        const neededScrollLeft = currentCardCenterX - desiredScreenX;
-        const neededScrollTop = currentCardCenterY - desiredScreenY;
-
-        const maxScrollLeft = container.scrollWidth - container.clientWidth;
-        const maxScrollTop = container.scrollHeight - container.clientHeight;
-        container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
-        container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
-
-        if (progress < 1) {
-          requestAnimationFrame(animate);
-        } else {
-          container.style.scrollBehavior = '';
-          setIsZooming(false);
-          setSelectedItem(null);
-          setPreSelectionState(null);
-          container.scrollLeft = targetScrollLeft;
-          container.scrollTop = targetScrollTop;
-        }
-      };
-
-      requestAnimationFrame(animate);
-      return;
-    }
-
-    const isFirstSelection = selectedItem === null;
-
-    if (isFirstSelection) {
-      setPreSelectionState({
-        zoom: zoomLevel,
-        scrollLeft: container.scrollLeft,
-        scrollTop: container.scrollTop,
-      });
-    }
-
-    setSelectedItem(item);
-
-    if (isFirstSelection) {
-      if (viewMode === 'collection') {
-        focusCardById(itemId, 0);
-      } else {
-        const zoomMultiplier = 1.15;
-        const minZoom = 1.2;
-        const targetZoom = Math.min(ZOOM_MAX, Math.max(minZoom, zoomLevel * zoomMultiplier));
-        const shouldZoom = Math.abs(targetZoom - zoomLevel) > 0.001;
-
-        if (shouldZoom) {
-          const selector = `[data-card-id="${escapeAttributeSelectorValue(String(itemId))}"]`;
-          const cardEl = container.querySelector(selector) as HTMLElement | null;
-
-          if (cardEl) {
-            setIsZooming(true);
-            container.style.scrollBehavior = 'auto';
-
-            const detailPanelWidth = 380;
-            const availableWidth = container.clientWidth - detailPanelWidth;
-            const targetScreenX = availableWidth / 2;
-            const targetScreenY = container.clientHeight / 2;
-
-            const startZoom = zoomLevel;
-
-            const startOffset = getOffsetWithin(cardEl, container);
-            const startCardScreenX = startOffset.x + cardEl.offsetWidth / 2 - container.scrollLeft;
-            const startCardScreenY = startOffset.y + cardEl.offsetHeight / 2 - container.scrollTop;
-
-            const duration = 300;
-            let startTime: number | null = null;
-
-            const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
-
-            const animate = (timestamp: number) => {
-              if (startTime === null) {
-                startTime = timestamp;
-              }
-
-              const elapsed = timestamp - startTime;
-              const progress = Math.min(1, elapsed / duration);
-              const easedProgress = easeOutCubic(progress);
-
-              const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
-
-              flushSync(() => {
-                setZoomLevel(currentZoom);
-              });
-
-              const currentOffset = getOffsetWithin(cardEl, container);
-              const currentCardCenterX = currentOffset.x + cardEl.offsetWidth / 2;
-              const currentCardCenterY = currentOffset.y + cardEl.offsetHeight / 2;
-
-              const desiredScreenX = startCardScreenX + (targetScreenX - startCardScreenX) * easedProgress;
-              const desiredScreenY = startCardScreenY + (targetScreenY - startCardScreenY) * easedProgress;
-
-              const neededScrollLeft = currentCardCenterX - desiredScreenX;
-              const neededScrollTop = currentCardCenterY - desiredScreenY;
-
-              const maxScrollLeft = container.scrollWidth - container.clientWidth;
-              const maxScrollTop = container.scrollHeight - container.clientHeight;
-              container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
-              container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
-
-              if (progress < 1) {
-                requestAnimationFrame(animate);
-              } else {
-                container.style.scrollBehavior = '';
-                setIsZooming(false);
-                requestAnimationFrame(() => {
-                  focusCardById(itemId, 380);
-                });
-              }
-            };
-
-            requestAnimationFrame(animate);
-          }
-        } else {
-          focusCardById(itemId, 380);
-        }
-      }
-    } else {
-      focusCardById(itemId, viewMode === 'collection' ? 0 : 380);
-    }
-  }, [selectedItem, zoomLevel, preSelectionState, resolveId, setZoomLevel, containerRef, viewMode]);
-
-  const closeDetail = useCallback(() => {
-    const container = containerRef.current;
-
-    if (pendingCenterRaf.current !== null && typeof window !== 'undefined') {
-      window.clearTimeout(pendingCenterRaf.current);
-      pendingCenterRaf.current = null;
-    }
-
-    if (preSelectionState && container && selectedItem) {
-      const itemId = resolveId(selectedItem, 0);
-      const selector = `[data-card-id="${escapeAttributeSelectorValue(String(itemId))}"]`;
-      const cardEl = container.querySelector(selector) as HTMLElement | null;
-
-      if (viewMode === 'collection') {
-        setSelectedItem(null);
-        container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
-        setPreSelectionState(null);
-        return;
-      }
-
-      if (cardEl && Math.abs(preSelectionState.zoom - zoomLevel) > 0.001) {
-        setIsZooming(true);
-        container.style.scrollBehavior = 'auto';
-
-        const startZoom = zoomLevel;
-        const targetZoom = preSelectionState.zoom;
-        const targetScrollLeft = preSelectionState.scrollLeft;
-        const targetScrollTop = preSelectionState.scrollTop;
-
-        const startOffset = getOffsetWithin(cardEl, container);
-        const startCardScreenX = startOffset.x + cardEl.offsetWidth / 2 - container.scrollLeft;
-        const startCardScreenY = startOffset.y + cardEl.offsetHeight / 2 - container.scrollTop;
-
-        const duration = 300;
-        let startTime: number | null = null;
-
-        const easeOutCubic = (t: number) => 1 - Math.pow(1 - t, 3);
-
-        const animate = (timestamp: number) => {
-          if (startTime === null) {
-            startTime = timestamp;
-          }
-
-          const elapsed = timestamp - startTime;
-          const progress = Math.min(1, elapsed / duration);
-          const easedProgress = easeOutCubic(progress);
-
-          const currentZoom = startZoom + (targetZoom - startZoom) * easedProgress;
-
-          flushSync(() => {
-            setZoomLevel(currentZoom);
-          });
-
-          const currentOffset = getOffsetWithin(cardEl, container);
-          const currentCardCenterX = currentOffset.x + cardEl.offsetWidth / 2;
-          const currentCardCenterY = currentOffset.y + cardEl.offsetHeight / 2;
-
-          const endCardScreenX = currentCardCenterX - targetScrollLeft;
-          const endCardScreenY = currentCardCenterY - targetScrollTop;
-
-          const desiredScreenX = startCardScreenX + (endCardScreenX - startCardScreenX) * easedProgress;
-          const desiredScreenY = startCardScreenY + (endCardScreenY - startCardScreenY) * easedProgress;
-
-          const neededScrollLeft = currentCardCenterX - desiredScreenX;
-          const neededScrollTop = currentCardCenterY - desiredScreenY;
-
-          const maxScrollLeft = container.scrollWidth - container.clientWidth;
-          const maxScrollTop = container.scrollHeight - container.clientHeight;
-          container.scrollLeft = Math.max(0, Math.min(neededScrollLeft, maxScrollLeft));
-          container.scrollTop = Math.max(0, Math.min(neededScrollTop, maxScrollTop));
-
-          if (progress < 1) {
-            requestAnimationFrame(animate);
-          } else {
-            container.style.scrollBehavior = '';
-            setIsZooming(false);
-            setSelectedItem(null);
-            setPreSelectionState(null);
-            container.scrollLeft = targetScrollLeft;
-            container.scrollTop = targetScrollTop;
-          }
-        };
-
-        requestAnimationFrame(animate);
-      } else {
-        setSelectedItem(null);
-        if (preSelectionState) {
-          setZoomLevel(preSelectionState.zoom);
-          container.scrollTo({ left: preSelectionState.scrollLeft, top: preSelectionState.scrollTop, behavior: 'smooth' });
-          setPreSelectionState(null);
-        }
-      }
-    } else {
-      setSelectedItem(null);
-      if (preSelectionState) {
-        setPreSelectionState(null);
-      }
-    }
-  }, [preSelectionState, selectedItem, zoomLevel, setZoomLevel, containerRef, resolveId, viewMode]);
-
-  const clearSelection = useCallback(() => {
-    if (selectedItem) {
-      closeDetail();
-    }
-  }, [selectedItem, closeDetail]);
-
-  useEffect(() => {
-    return () => {
-      if (typeof window !== 'undefined' && pendingCenterRaf.current !== null) {
-        window.clearTimeout(pendingCenterRaf.current);
-        pendingCenterRaf.current = null;
-      }
-    };
-  }, []);
-
-  return {
-    selectedItem,
-    isZooming,
-    handleCardClick,
-    closeDetail,
-    clearSelection,
-  };
-}