@cratis/components 0.1.9 → 0.1.10

package/PivotViewer/components/pivot/animation.ts

@@ -1,108 +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 { CardSprite } from './constants';
-import type * as PIXI from 'pixi.js';
-
-export function updatePositions(sprites: Map<unknown, CardSprite>, isViewTransitionRef: { current: boolean }, animationSpeed = 0.15) {
-  let isAnimating = false;
-  const threshold = 0.5;
-  const shouldAnimate = isViewTransitionRef.current;
-  const now = Date.now();
-  const DURATION = 600; // ms
-
-  for (const sprite of sprites.values()) {
-    // Handle explicit time-based animation (view transitions)
-    if (sprite.animationStartTime !== undefined) {
-      const elapsed = now - sprite.animationStartTime;
-      const delay = sprite.animationDelay || 0;
-
-      if (elapsed < delay) {
-        isAnimating = true;
-        continue;
-      }
-
-      const progress = Math.min(1, (elapsed - delay) / DURATION);
-      // Ease out cubic: 1 - (1-t)^3
-      const t = 1 - Math.pow(1 - progress, 3);
-
-      if (sprite.startX !== undefined && sprite.startY !== undefined) {
-        sprite.currentX = sprite.startX + (sprite.targetX - sprite.startX) * t;
-        sprite.currentY = sprite.startY + (sprite.targetY - sprite.startY) * t;
-      }
-
-      sprite.container.position.set(sprite.currentX, sprite.currentY);
-
-      if (progress < 1) {
-        isAnimating = true;
-      } else {
-        // Animation finished, clean up
-        sprite.currentX = sprite.targetX;
-        sprite.currentY = sprite.targetY;
-        delete sprite.animationStartTime;
-        delete sprite.animationDelay;
-        delete sprite.startX;
-        delete sprite.startY;
-      }
-      continue;
-    }
-
-    const dx = sprite.targetX - sprite.currentX;
-    const dy = sprite.targetY - sprite.currentY;
-    const distance = Math.sqrt(dx * dx + dy * dy);
-
-    if (shouldAnimate && distance > threshold) {
-      sprite.currentX += dx * animationSpeed;
-      sprite.currentY += dy * animationSpeed;
-      sprite.container.position.set(sprite.currentX, sprite.currentY);
-      isAnimating = true;
-    } else if (distance > 0) {
-      sprite.currentX = sprite.targetX;
-      sprite.currentY = sprite.targetY;
-      sprite.container.position.set(sprite.currentX, sprite.currentY);
-    }
-  }
-
-  if (!isAnimating && isViewTransitionRef.current) {
-    isViewTransitionRef.current = false;
-  }
-
-  return isAnimating;
-}
-
-export function startAnimationLoop(
-  refs: {
-    mountedRef: { current: boolean };
-    appRef: { current: PIXI.Application | null };
-    animationFrameRef: { current: number };
-    isAnimatingRef: { current: boolean };
-    needsRenderRef: { current: boolean };
-    spritesRef: { current: Map<unknown, CardSprite> };
-    isViewTransitionRef: { current: boolean };
-  },
-  animationSpeed = 0.15,
-) {
-  const { mountedRef, appRef, animationFrameRef, isAnimatingRef, needsRenderRef, spritesRef, isViewTransitionRef } = refs;
-
-  const animate = () => {
-    if (!mountedRef.current) return;
-
-    const stillAnimating = updatePositions(spritesRef.current, isViewTransitionRef, animationSpeed);
-
-    if (stillAnimating || needsRenderRef.current) {
-      appRef.current?.renderer.render(appRef.current.stage);
-      needsRenderRef.current = false;
-    }
-
-    if (stillAnimating) {
-      animationFrameRef.current = requestAnimationFrame(animate);
-    } else {
-      isAnimatingRef.current = false;
-    }
-  };
-
-  if (!isAnimatingRef.current) {
-    isAnimatingRef.current = true;
-    animate();
-  }
-}

package/PivotViewer/components/pivot/buckets.ts

@@ -1,152 +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 * as PIXI from 'pixi.js';
-import type { CardColors } from './constants';
-import type { GroupingResult, LayoutResult } from '../../engine/types';
-
-export function updateBucketBackgrounds(
-  bucketsContainer: PIXI.Container | null,
-  container: HTMLDivElement | null,
-  grouping: GroupingResult,
-  layout: LayoutResult,
-  zoomLevel: number,
-  cardColors: CardColors,
-  viewMode: string,
-) {
-  if (!bucketsContainer) return;
-
-  // keep parameter referenced to avoid unused param lint when callers pass zoomLevel
-  void zoomLevel;
-
-  if (!container || grouping.groups.length === 0 || viewMode === 'collection') {
-    // If we shouldn't show anything, hide all existing backgrounds
-    // We keep the highlight if it exists
-    for (const child of bucketsContainer.children) {
-      if ((child as any).name !== 'highlight') {
-        child.visible = false;
-      }
-    }
-    return;
-  }
-
-  // Use layout's total height if available so backgrounds match sprite positions
-  const worldHeight = layout.totalHeight || container.clientHeight;
-
-  // Get existing background graphics (excluding highlight)
-  const backgroundGraphics = bucketsContainer.children.filter(c => (c as any).name !== 'highlight') as PIXI.Graphics[];
-  let bgIndex = 0;
-
-  // Instead of re-deriving bucket geometry from constants, compute bucket bounds
-  // directly from the positions stored in the layout so backgrounds align exactly.
-  for (let index = 0; index < grouping.groups.length; index++) {
-    const group = grouping.groups[index];
-    let minX = Infinity;
-    let maxX = -Infinity;
-
-    for (let j = 0; j < group.ids.length; j++) {
-      const id = group.ids[j];
-      const pos = layout.positions.get(id);
-      if (pos) {
-        minX = Math.min(minX, pos.x);
-        maxX = Math.max(maxX, pos.x);
-      }
-    }
-
-    if (minX === Infinity) continue;
-
-    // Prefer explicit bucket width from layout when available
-    const bucketWidths = layout.bucketWidths || [];
-    const widthFromLayout = bucketWidths[index];
-    const width = widthFromLayout && widthFromLayout > 0 ? widthFromLayout : (maxX - minX) || 0;
-
-    if (index % 2 === 0 && width > 0) {
-      let bg: PIXI.Graphics;
-
-      if (bgIndex < backgroundGraphics.length) {
-        bg = backgroundGraphics[bgIndex];
-        bg.clear();
-      } else {
-        bg = new PIXI.Graphics();
-        // Insert before highlight if it exists, otherwise at end
-        const highlightIndex = bucketsContainer.children.findIndex(c => (c as any).name === 'highlight');
-        if (highlightIndex >= 0) {
-          bucketsContainer.addChildAt(bg, highlightIndex);
-        } else {
-          bucketsContainer.addChild(bg);
-        }
-      }
-
-      bg.rect(minX, 0, width, worldHeight);
-      bg.fill(cardColors.base);
-      bg.alpha = 0.15;
-      bg.visible = true;
-      bgIndex++;
-    }
-  }
-
-  // Hide unused background graphics
-  for (let i = bgIndex; i < backgroundGraphics.length; i++) {
-    backgroundGraphics[i].visible = false;
-  }
-}
-
-export function updateHighlight(
-  bucketsContainer: PIXI.Container | null,
-  container: HTMLDivElement | null,
-  grouping: GroupingResult,
-  layout: LayoutResult,
-  hoveredGroupIndex: number | null,
-  cardWidth: number,
-  zoomLevel: number,
-) {
-  if (!bucketsContainer || !container || grouping.groups.length === 0) return;
-
-  // `zoomLevel` is part of the signature for future use; reference it
-  // to avoid unused-parameter lint errors when callers pass it.
-  void zoomLevel;
-
-  let highlight = bucketsContainer.children.find(child => (child as any).name === 'highlight') as PIXI.Graphics;
-
-  if (!highlight) {
-    highlight = new PIXI.Graphics();
-    (highlight as any).name = 'highlight';
-    bucketsContainer.addChild(highlight);
-  }
-
-  highlight.clear();
-
-  if (hoveredGroupIndex === null || hoveredGroupIndex < 0) {
-    highlight.visible = false;
-    return;
-  }
-
-  const group = grouping.groups[hoveredGroupIndex];
-  if (!group || group.ids.length === 0) {
-    highlight.visible = false;
-    return;
-  }
-
-  let minX = Infinity;
-  let maxX = -Infinity;
-
-  for (let j = 0; j < group.ids.length; j++) {
-    const id = group.ids[j];
-    const pos = layout.positions.get(id);
-    if (pos) {
-      minX = Math.min(minX, pos.x);
-      maxX = Math.max(maxX, pos.x + cardWidth);
-    }
-  }
-
-  if (minX === Infinity) {
-    highlight.visible = false;
-    return;
-  }
-
-  const worldHeight = layout.totalHeight || container.clientHeight;
-  highlight.rect(minX, 0, maxX - minX, worldHeight);
-  highlight.fill(0xffffff);
-  highlight.alpha = 0.05;
-  highlight.visible = true;
-}

package/PivotViewer/components/pivot/colorResolver.ts

@@ -1,67 +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 { DEFAULT_COLORS, type CardColors } from './constants';
-
-export function createCssColorResolver() {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
-
-  const parseHex = (val: string): number | null => {
-    if (!val.startsWith('#')) return null;
-    const hex = val.slice(1);
-    const normalized = hex.length === 3
-      ? hex.split('').map((c) => c + c).join('')
-      : hex.length === 4
-        ? hex.slice(0, 3).split('').map((c) => c + c).join('')
-        : hex.length === 6
-          ? hex
-          : hex.length === 8
-            ? hex.slice(0, 6)
-            : null;
-    return normalized ? Number.parseInt(normalized, 16) : null;
-  };
-
-  return (cssValue: string, fallback: number): number => {
-    if (!ctx) {
-      return fallback;
-    }
-    ctx.fillStyle = cssValue.trim();
-    const resolved = ctx.fillStyle; // normalized by canvas
-    const hex = parseHex(resolved);
-    if (hex !== null && Number.isFinite(hex)) {
-      return hex;
-    }
-
-    if (resolved.startsWith('rgb')) {
-      const nums = resolved
-        .replace(/rgba?\(/, '')
-        .replace(/\)/, '')
-        .split(',')
-        .map((n) => Number.parseFloat(n.trim()))
-        .filter((n) => !Number.isNaN(n));
-      if (nums.length >= 3) {
-        const [r, g, b] = nums;
-        return ((r & 0xff) << 16) | ((g & 0xff) << 8) | (b & 0xff);
-      }
-    }
-
-    return fallback;
-  };
-}
-
-export function resolveCardColors(cssColorResolver: (s: string, f: number) => number): CardColors {
-  const root = document.documentElement;
-  const style = getComputedStyle(root);
-  const getVar = (name: string, fallback: number) =>
-    cssColorResolver(style.getPropertyValue(name) || name, fallback);
-
-  return {
-    base: getVar('--surface-b', DEFAULT_COLORS.base),
-    mid: getVar('--surface-a', DEFAULT_COLORS.mid),
-    gradient: getVar('--surface-ground', DEFAULT_COLORS.gradient),
-    border: getVar('--surface-border', DEFAULT_COLORS.border),
-    text: getVar('--text-color', DEFAULT_COLORS.text),
-    textSecondary: getVar('--text-color-secondary', DEFAULT_COLORS.textSecondary),
-  };
-}

package/PivotViewer/components/pivot/constants.ts

@@ -1,46 +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 * as PIXI from 'pixi.js';
-
-export const ANIMATION_SPEED = 0.15;
-export const CARD_PADDING = 10;
-export const CARD_RADIUS = 12;
-export const CARD_GAP = 8; // Gap between cards (must match layout gap)
-
-export const DEFAULT_COLORS = {
-  base: 0x1b2b2f,
-  mid: 0x234445,
-  gradient: 0x2f5b56,
-  border: 0x5ad1a0,
-  text: 0xffffff,
-  textSecondary: 0x8899aa,
-};
-
-export type CardColors = typeof DEFAULT_COLORS;
-
-export interface CardSprite {
-  container: PIXI.Container;
-  graphics: PIXI.Graphics;
-  titleText: PIXI.Text;
-  labelsText: PIXI.Text;
-  valuesText: PIXI.Text;
-  itemId: number | string;
-  targetX: number;
-  targetY: number;
-  currentX: number;
-  currentY: number;
-  // Animation state
-  animationStartTime?: number;
-  animationDelay?: number;
-  startX?: number;
-  startY?: number;
-  // Cache state to avoid unnecessary redraws
-  lastSelectedId?: string | number | null;
-  lastCardColors?: CardColors;
-  lastTitle?: string;
-  lastLabels?: string;
-  lastValues?: string;
-}
-
-export default {};

package/PivotViewer/components/pivot/sprites.ts

@@ -1,265 +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 * as PIXI from 'pixi.js';
-import { CARD_GAP, CARD_PADDING, CARD_RADIUS } from './constants';
-import type { CardSprite, CardColors } from './constants';
-
-const spritePool: CardSprite[] = [];
-
-export function createCardSprite<TItem extends object>(
-  id: number | string,
-  x: number,
-  y: number,
-  items: TItem[],
-  onCardClick: (item: TItem, e: MouseEvent, id: number | string) => void,
-  onPanStart: (e: MouseEvent) => void,
-  cardWidth: number,
-  cardHeight: number,
-  cardColors: CardColors,
-): CardSprite {
-  if (spritePool.length > 0) {
-    const sprite = spritePool.pop()!;
-    sprite.container.visible = true;
-    sprite.container.alpha = 1;
-    sprite.container.position.set(x, y);
-    sprite.itemId = id;
-    sprite.targetX = x;
-    sprite.targetY = y;
-    sprite.currentX = x;
-    sprite.currentY = y;
-
-    // Reset animation state
-    delete sprite.animationStartTime;
-    delete sprite.animationDelay;
-    delete sprite.startX;
-    delete sprite.startY;
-
-    // Reset cache
-    sprite.lastSelectedId = null;
-    sprite.lastCardColors = undefined;
-    sprite.lastTitle = undefined;
-    sprite.lastLabels = undefined;
-    sprite.lastValues = undefined;
-
-    // Update event context
-    (sprite.container as any)._eventContext = { items, onCardClick, id };
-
-    return sprite;
-  }
-
-  const container = new PIXI.Container();
-  container.eventMode = 'static';
-  container.cursor = 'pointer';
-  container.position.set(x, y);
-
-  // Store context for event handlers
-  (container as any)._eventContext = { items, onCardClick, id };
-
-  const graphics = new PIXI.Graphics();
-
-  const actualWidth = cardWidth - CARD_GAP;
-  const actualHeight = cardHeight - CARD_GAP;
-  const offsetX = CARD_GAP / 2;
-  const offsetY = CARD_GAP / 2;
-
-  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-  gradient.addColorStop(0, cardColors.mid);
-  gradient.addColorStop(1, cardColors.base);
-
-  graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
-  graphics.fill(gradient);
-
-  container.addChild(graphics);
-
-  const titleText = new PIXI.Text('', {
-    fontSize: 13,
-    fill: cardColors.text as any,
-    fontWeight: '600',
-    lineHeight: 18,
-    wordWrap: false,
-  } as any);
-  titleText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING);
-  container.addChild(titleText);
-
-  const labelsText = new PIXI.Text('', {
-    fontSize: 11,
-    fill: cardColors.textSecondary as any,
-    fontWeight: '400',
-    lineHeight: 18,
-  } as any);
-  labelsText.position.set(offsetX + CARD_PADDING, offsetY + CARD_PADDING + 40);
-  container.addChild(labelsText);
-
-  const valuesText = new PIXI.Text('', {
-    fontSize: 11,
-    fill: cardColors.text as any,
-    fontWeight: '500',
-    lineHeight: 18,
-    wordWrap: false,
-  } as any);
-  valuesText.position.set(offsetX + CARD_PADDING + 65, offsetY + CARD_PADDING + 40);
-  container.addChild(valuesText);
-
-  container.on('click', (e: PIXI.FederatedPointerEvent) => {
-    e.stopPropagation();
-    const ctx = (container as any)._eventContext as { items: any; onCardClick: (item: any, e: MouseEvent, id: number | string) => void; id: number | string };
-    const itemsMap = ctx.items as Record<string, any>;
-    const item = itemsMap[String(ctx.id)];
-    if (item) {
-      ctx.onCardClick(item, e.nativeEvent as MouseEvent, ctx.id);
-    }
-  });
-
-  container.on('pointerdown', (e: PIXI.FederatedPointerEvent) => {
-    e.stopPropagation();
-    // onPanStart(e.nativeEvent as MouseEvent);
-  });
-
-  return {
-    container,
-    graphics,
-    titleText,
-    labelsText,
-    valuesText,
-    itemId: id,
-    targetX: x,
-    targetY: y,
-    currentX: x,
-    currentY: y,
-  };
-}
-
-export function destroySprite(sprite: CardSprite) {
-  if (sprite.container && sprite.container.parent) {
-    sprite.container.parent.removeChild(sprite.container);
-  }
-  // Reset visibility to ensure it doesn't ghost if something goes wrong
-  if (sprite.container) {
-    sprite.container.visible = false;
-  }
-  spritePool.push(sprite);
-}
-
-export function clearSpritePool() {
-  for (const sprite of spritePool) {
-    try {
-      sprite.graphics?.destroy();
-      sprite.titleText?.destroy();
-      sprite.labelsText?.destroy();
-      sprite.valuesText?.destroy();
-      sprite.container?.destroy();
-    } catch (e) {
-      void e;
-    }
-  }
-  spritePool.length = 0;
-}
-
-export function updateCardContent<TItem extends object>(
-  sprite: CardSprite,
-  item: TItem,
-  selectedId: string | number | null,
-  cardWidth: number,
-  cardHeight: number,
-  cardColors: CardColors,
-) {
-  if (!item) return;
-
-  const event = item as any;
-  const eventType = event.type || event.name || event.title || 'Event';
-
-  const timeStr = event.occurred ? new Date(event.occurred).toLocaleString('en-US', {
-    month: '2-digit',
-    day: '2-digit',
-    year: 'numeric',
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: false
-  }).replace(',', '') : '';
-
-  const correlation = event.correlationId || event.correlation || '';
-  const correlationShort = correlation ? String(correlation).substring(0, 12) + '...' : '';
-
-  const maxTitleLength = 20;
-  const titleDisplay = eventType.length > maxTitleLength
-    ? eventType.substring(0, maxTitleLength) + '...'
-    : eventType;
-
-  const maxTypeLength = 16;
-  const typeDisplay = eventType.length > maxTypeLength
-    ? eventType.substring(0, maxTypeLength) + '...'
-    : eventType;
-
-  const colors = cardColors;
-  const labelsText = 'Type\nOccurred\nCorrelation';
-  const valuesText = `${typeDisplay}\n${timeStr}\n${correlationShort}`;
-  const colorsChanged = sprite.lastCardColors !== colors;
-
-  if (sprite.lastTitle !== titleDisplay) {
-    sprite.titleText.text = titleDisplay;
-    sprite.lastTitle = titleDisplay;
-  }
-
-    if (sprite.lastLabels !== labelsText) {
-    sprite.labelsText.text = labelsText;
-    sprite.lastLabels = labelsText;
-  }
-
-  if (colorsChanged) {
-    (sprite.labelsText.style as any).fill = colors.textSecondary as any;
-  }
-
-  if (sprite.lastValues !== valuesText) {
-    sprite.valuesText.text = valuesText;
-    sprite.lastValues = valuesText;
-  }
-
-  if (colorsChanged) {
-    (sprite.valuesText.style as any).fill = colors.text as any;
-  }
-
-  sprite.titleText.visible = true;
-  sprite.labelsText.visible = true;
-  sprite.valuesText.visible = true;
-
-  const isSelected = sprite.itemId === selectedId;
-
-  // Only redraw graphics if selection state or colors changed
-  if (sprite.lastSelectedId === selectedId && !colorsChanged && sprite.graphics) {
-    return;
-  }
-
-  sprite.lastSelectedId = selectedId;
-  sprite.lastCardColors = cardColors;
-
-  if (sprite.graphics) {
-    sprite.graphics.clear();
-  } else {
-    sprite.graphics = new PIXI.Graphics();
-    sprite.container.addChildAt(sprite.graphics, 0);
-  }
-
-  const actualWidth = cardWidth - CARD_GAP;
-  const actualHeight = cardHeight - CARD_GAP;
-  const offsetX = CARD_GAP / 2;
-  const offsetY = CARD_GAP / 2;
-
-  const gradient = new PIXI.FillGradient(0, offsetY, 0, offsetY + actualHeight);
-  if (isSelected) {
-    gradient.addColorStop(0, colors.gradient);
-    gradient.addColorStop(1, colors.mid);
-  } else {
-    gradient.addColorStop(0, colors.mid);
-    gradient.addColorStop(1, colors.base);
-  }
-
-  sprite.graphics.roundRect(offsetX, offsetY, actualWidth, actualHeight, CARD_RADIUS);
-  sprite.graphics.fill(gradient);
-
-  if (isSelected) {
-    sprite.graphics.stroke({ width: 2, color: colors.border });
-  } else {
-    sprite.graphics.stroke({ width: 1, color: colors.border, alpha: 0.35 });
-  }
-}