@visualli/react 0.1.7 → 0.2.0

package/src/config/textScaling.ts

@@ -1,69 +0,0 @@
-// ─── Text Scaling Helpers ─────────────────────────────────────────────────────
-//
-// Determines the scale applied to node title text, keeping text legible and
-// fitted inside the blob shape across the full zoom range.
-//
-// Matches the visualli.ai textScaling logic exactly.
-
-import { NODE_HEIGHT } from '@visualli/core';
-
-export const NODE_TEXT_BASE_FONT_PX = 30;
-export const DESCRIPTION_TEXT_BASE_FONT_PX = 12;
-export const CONTAINER_LABEL_BASE_FONT_PX = 24;
-export const EDGE_LABEL_BASE_FONT_PX = 18;
-export const OVERLAY_FONT_UPPER_BOOST_PX = 8;
-
-// Keep text away from blob edges
-const NODE_TEXT_SAFE_BLOB_FILL_RATIO = 0.88;
-
-/**
- * Computes world-space text scale for node title:
- * - inverse zoom for screen-space consistency
- * - clamped so text stays inside the node blob with safe padding
- * - uses base width of 300px for consistent text sizing
- * - allows taller text box for multi-line wrapping
- *
- * Improved from visualli.ai to handle long labels better with multi-line support.
- */
-export function computeNodeTextWorldScale(nodeWidth: number, zoomLevel: number): number {
-  const safeZoom = Math.max(zoomLevel, 0.0001);
-  
-  // Use a consistent base width (300px) for text scaling
-  // This keeps font size more consistent across different node widths
-  const baseWidth = 300;
-  
-  const baseRadiusX = baseWidth / 2;
-  const baseRadiusY = Math.max((NODE_HEIGHT * 1.6) / 2, baseRadiusX * 0.74);
-  const textNaturalWidth  = baseWidth - 40;
-  // Increase text height to allow 2-3 lines of wrapped text
-  const textNaturalHeight = NODE_HEIGHT * 1.2;
-
-  const maxScaleX = ((baseRadiusX * 2) * NODE_TEXT_SAFE_BLOB_FILL_RATIO) / Math.max(textNaturalWidth, 1);
-  const maxScaleY = ((baseRadiusY * 2) * NODE_TEXT_SAFE_BLOB_FILL_RATIO) / Math.max(textNaturalHeight, 1);
-  const fitScale  = Math.max(0.01, Math.min(maxScaleX, maxScaleY));
-
-  return Math.min(1 / safeZoom, fitScale);
-}
-
-/** Screen-space scale (zoom-adjusted) for text overlays. */
-export function computeNodeTextScreenScale(nodeWidth: number, zoomLevel: number): number {
-  return computeNodeTextWorldScale(nodeWidth, zoomLevel) * zoomLevel;
-}
-
-/**
- * Screen-space overlay scale for description/semantic tooltips.
- * - lower bound: 1x
- * - upper bound: node-title-root + OVERLAY_FONT_UPPER_BOOST_PX
- */
-export function computeOverlayScale(zoomLevel: number): number {
-  const safeZoom = Math.max(zoomLevel, 0.0001);
-  const inverseScale = 1 / safeZoom;
-  const maxScale = (NODE_TEXT_BASE_FONT_PX + OVERLAY_FONT_UPPER_BOOST_PX) / NODE_TEXT_BASE_FONT_PX;
-  return Math.min(Math.max(inverseScale, 1), maxScale);
-}
-
-/** Scale for edge path labels in screen pixels. */
-export function computeEdgeLabelScale(zoomLevel: number): number {
-  const safeZoom = Math.max(zoomLevel, 0.0001);
-  return Math.min(Math.max(EDGE_LABEL_BASE_FONT_PX / safeZoom, 10), 32);
-}

package/src/hooks/useKonvaLayerTransition.ts

@@ -1,221 +0,0 @@
-// ─── useKonvaLayerTransition ──────────────────────────────────────────────────
-//
-// Manages layer navigation animations (zoom into child layer, zoom back to
-// parent). Uses the same callback-driven pattern as the visualli.ai reference:
-//   - onViewportChange: imperatively updates the Konva stage each rAF frame
-//   - onOpacityChange: writes directly to canvasWrapperRef DOM (no React state)
-//   - onBackgroundColorChange: writes directly to bgRef DOM
-//   - onPhaseChange('swap'|'zoom-back'): triggers React layer content swap
-//   - onComplete: syncs final viewport to Zustand and ends transition
-
-import { useCallback, useRef, useEffect } from 'react';
-import type Konva from 'konva';
-import type { VisualliDocument, FlatNode } from '@visualli/core';
-import { useViewportStore } from '../stores/useViewportStore';
-import { konvaLayerTransitionAnimator } from '../animations/konvaLayerTransition';
-import type { AnimatorViewport } from '../animations/konvaLayerTransition';
-import { calculateFitView } from '../utils/layerNavigation';
-
-export interface LayerTransitionOptions {
-  /** Ref to the Konva Stage for imperative position/scale updates each frame. */
-  stageRef:          React.RefObject<Konva.Stage | null>;
-  /** Ref to the wrapping div whose CSS `opacity` is driven during transitions. */
-  canvasWrapperRef:  React.RefObject<HTMLDivElement | null>;
-  /** Ref to the background color div. */
-  bgRef?:            React.RefObject<HTMLDivElement | null>;
-  /** Called at the content-swap point — use to switch the displayed layer. */
-  onSwapLayer:       (newLayerId: string) => void;
-  /** Called when a zoom-out swap happens — use to update the nav stack. */
-  onSwapBack:        () => void;
-  /** Called after the transition fully completes. */
-  onComplete:        () => void;
-  /**
-   * GPU CSS-transform mode: called each rAF frame instead of applyViewport.
-   * When provided, the caller is responsible for moving the canvas content.
-   */
-  onViewportFrame?:     (vp: AnimatorViewport) => void;
-  /**
-   * Called once when the animation reaches its final viewport.
-   * When provided, replaces the default applyViewport call at completion.
-   */
-  onViewportFinal?:     (vp: AnimatorViewport) => void;
-  /**
-   * Called at phase-change points ('swap', 'zoom-back') in addition to the
-   * internal content-swap logic. Use to reset CSS transforms before Konva redraws.
-   */
-  onPhaseChange?:       (phase: string) => void;
-  /**
-   * Called with 'start' before the animator fires its first frame and with
-   * 'end' after onComplete. Use to set up / tear down GPU hints (willChange, etc.).
-   */
-  onTransitionLifecycle?: (phase: 'start' | 'end') => void;
-}
-
-export interface LayerTransitionHandlers {
-  zoomIntoLayer: (
-    doc:         VisualliDocument,
-    targetNode:  FlatNode,
-    childLayerId: string,
-    childNodes:  FlatNode[],
-    fromColor:   string,
-    toColor:     string,
-  ) => void;
-  zoomOutToParent: (
-    parentViewport: AnimatorViewport,
-    fromColor:      string,
-    toColor:        string,
-  ) => void;
-  isTransitioning: () => boolean;
-}
-
-export function useKonvaLayerTransition(opts: LayerTransitionOptions): LayerTransitionHandlers {
-  const {
-    stageRef, canvasWrapperRef, bgRef,
-    onSwapLayer, onSwapBack, onComplete,
-    onViewportFrame, onViewportFinal, onPhaseChange: onPhaseChangeExt,
-    onTransitionLifecycle,
-  } = opts;
-  const setZoom   = useViewportStore(s => s.setZoom);
-  const setCenter = useViewportStore(s => s.setCenter);
-  const getState  = useViewportStore.getState;
-
-  const swappedRef = useRef(false);
-  const canvasSizeRef = useRef({ width: 800, height: 600 });
-
-  // Keep canvas size ref fresh from viewport store (updated by ResizeObserver in useKonvaRenderer)
-  useEffect(() => {
-    const update = () => {
-      const vp = useViewportStore.getState();
-      canvasSizeRef.current = { width: vp.canvasWidth || 800, height: vp.canvasHeight || 600 };
-    };
-    update();
-    // Subscribe to viewport store changes instead of window resize
-    const unsubscribe = useViewportStore.subscribe(update);
-    return unsubscribe;
-  }, []);
-
-  // Apply viewport to Konva stage imperatively (no React re-render per frame)
-  const applyViewport = useCallback((vp: AnimatorViewport) => {
-    const stage = stageRef.current;
-    if (!stage) return;
-    const { width, height } = canvasSizeRef.current;
-    stage.x(width / 2 - vp.centerX * vp.zoomLevel);
-    stage.y(height / 2 - vp.centerY * vp.zoomLevel);
-    stage.scaleX(vp.zoomLevel);
-    stage.scaleY(vp.zoomLevel);
-    stage.getLayers().forEach(l => l.drawScene());
-    // Sync to Zustand so viewport store reflects reality
-    setCenter(vp.centerX, vp.centerY);
-    setZoom(vp.zoomLevel);
-  }, [stageRef, setCenter, setZoom]);
-
-  const applyOpacity = useCallback((opacity: number) => {
-    if (canvasWrapperRef.current) {
-      canvasWrapperRef.current.style.opacity = String(opacity);
-    }
-  }, [canvasWrapperRef]);
-
-  const applyBgColor = useCallback((color: string) => {
-    if (bgRef?.current) {
-      bgRef.current.style.backgroundColor = color;
-    }
-  }, [bgRef]);
-
-  const zoomIntoLayer = useCallback((
-    _doc:        VisualliDocument,
-    targetNode:  FlatNode,
-    childLayerId: string,
-    childNodes:  FlatNode[],
-    fromColor:   string,
-    toColor:     string,
-  ): void => {
-    if (konvaLayerTransitionAnimator.active) return;
-
-    const vp    = getState();
-    const stage = stageRef.current;
-    const w     = stage?.width()  ?? 800;
-    const h     = stage?.height() ?? 600;
-    const fit   = calculateFitView(childNodes, w, h);
-
-    swappedRef.current = false;
-
-    onTransitionLifecycle?.('start');
-    konvaLayerTransitionAnimator.animateZoomIntoLayer(
-      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
-      { x: targetNode.x, y: targetNode.y, width: targetNode.width, height: targetNode.height },
-      { x: fit.centerX, y: fit.centerY },
-      fromColor,
-      toColor,
-      {
-        onUpdate: ({ viewport, opacity, backgroundColor }) => {
-          if (onViewportFrame) { onViewportFrame(viewport); } else { applyViewport(viewport); }
-          applyOpacity(opacity);
-          applyBgColor(backgroundColor);
-        },
-        onComplete: () => {
-          const finalVp = { centerX: fit.centerX, centerY: fit.centerY, zoomLevel: fit.zoomLevel };
-          if (onViewportFinal) { onViewportFinal(finalVp); } else { applyViewport(finalVp); }
-          applyOpacity(1);
-          onComplete();
-          onTransitionLifecycle?.('end');
-        },
-        onPhaseChange: (phase) => {
-          onPhaseChangeExt?.(phase);
-          if (phase === 'swap' && !swappedRef.current) {
-            swappedRef.current = true;
-            onSwapLayer(childLayerId);
-          }
-        },
-      },
-      fit.zoomLevel,
-      w,
-      h,
-    );
-  }, [stageRef, getState, applyViewport, applyOpacity, applyBgColor, onSwapLayer, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
-
-  const zoomOutToParent = useCallback((
-    parentViewport: AnimatorViewport,
-    fromColor:      string,
-    toColor:        string,
-  ): void => {
-    if (konvaLayerTransitionAnimator.active) return;
-
-    const vp = getState();
-    swappedRef.current = false;
-
-    onTransitionLifecycle?.('start');
-    konvaLayerTransitionAnimator.animateZoomOutToParent(
-      { centerX: vp.centerX, centerY: vp.centerY, zoomLevel: vp.zoomLevel },
-      parentViewport,
-      fromColor,
-      toColor,
-      {
-        onUpdate: ({ viewport, opacity, backgroundColor }) => {
-          if (onViewportFrame) { onViewportFrame(viewport); } else { applyViewport(viewport); }
-          applyOpacity(opacity);
-          applyBgColor(backgroundColor);
-        },
-        onComplete: () => {
-          if (onViewportFinal) { onViewportFinal(parentViewport); } else { applyViewport(parentViewport); }
-          applyOpacity(1);
-          onComplete();
-          onTransitionLifecycle?.('end');
-        },
-        onPhaseChange: (phase) => {
-          onPhaseChangeExt?.(phase);
-          if (phase === 'zoom-back' && !swappedRef.current) {
-            swappedRef.current = true;
-            onSwapBack();
-          }
-        },
-      },
-    );
-  }, [getState, applyViewport, applyOpacity, applyBgColor, onSwapBack, onComplete, onViewportFrame, onViewportFinal, onPhaseChangeExt, onTransitionLifecycle]);
-
-  const isTransitioning = useCallback(() => konvaLayerTransitionAnimator.active, []);
-
-  // Cancel on unmount
-  useEffect(() => () => { konvaLayerTransitionAnimator.cancel(); }, []);
-
-  return { zoomIntoLayer, zoomOutToParent, isTransitioning };
-}