react-native-vroom-chart 0.11.1 → 0.13.0

package/src/VroomChart.tsx

@@ -212,6 +212,13 @@ export function VroomChart(props: VroomChartProps) {
     if (!handle) return undefined;
     const target = chartType === 'line' ? 1 : 0;
 
+    // Every exit below hands off to maybeStartAnim. Landing in line mode turns
+    // tip_pulse_active() on, and the pulse only moves while that loop is
+    // requeueing frames — this loop's own clock stops here. Without the handoff
+    // the ring sits frozen until some gesture happens to restart the other loop.
+    // It no-ops when a frame is already queued or nothing is animating, so
+    // landing in candle mode costs nothing.
+
     // Fresh handle (first load / recreate): snap, don't animate.
     if (morphHandle.current !== handle || morphFade.current == null) {
       morphHandle.current = handle;
@@ -219,9 +226,13 @@ export function VroomChart(props: VroomChartProps) {
       handle.setChartType(target);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return undefined;
+    }
+    if (morphFade.current === target) {
+      maybeStartAnim();
       return undefined;
     }
-    if (morphFade.current === target) return undefined;
 
     if (morphRaf.current != null) {
       cancelAnimationFrame(morphRaf.current);
@@ -233,6 +244,7 @@ export function VroomChart(props: VroomChartProps) {
       handle.setChartType(target);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
       return undefined;
     }
 
@@ -255,6 +267,7 @@ export function VroomChart(props: VroomChartProps) {
         handle.setChartType(target); // lock the exact endpoint
         const q = handle.render();
         if (q) pictureSV.value = q;
+        maybeStartAnim();
       }
     };
     morphRaf.current = requestAnimationFrame(step);
@@ -265,7 +278,10 @@ export function VroomChart(props: VroomChartProps) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, reduceMotion, pictureSV]);
+    // maybeStartAnim is memoized on [handle, animTick] and animTick on
+    // [handle, pictureSV], both already deps here — so it adds no new restarts
+    // of this clock.
+  }, [handle, chartType, transitionMs, reduceMotion, pictureSV, maybeStartAnim]);
 
   // Volume-bar collapse. The core staggers the bars itself — tallest falling
   // first, all landing together — so unlike the loop above this one hands it
@@ -281,12 +297,19 @@ export function VroomChart(props: VroomChartProps) {
 
     // Fresh handle (first load / recreate): the data effect's setVolume already
     // snapped it, so a chart that mounts with bars doesn't animate them in.
+    // Every exit below hands off to maybeStartAnim, for the same reason the
+    // morph loop does: this clock stops here, and anything the core is still
+    // animating (the line-tip pulse) needs the other loop requeueing frames.
     if (volumeHandle.current !== handle || volumeCollapseRef.current == null) {
       volumeHandle.current = handle;
       volumeCollapseRef.current = { t: target, easing };
+      maybeStartAnim();
+      return undefined;
+    }
+    if (volumeCollapseRef.current.t === target) {
+      maybeStartAnim();
       return undefined;
     }
-    if (volumeCollapseRef.current.t === target) return undefined;
 
     if (volumeRaf.current != null) {
       cancelAnimationFrame(volumeRaf.current);
@@ -299,6 +322,7 @@ export function VroomChart(props: VroomChartProps) {
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
       if (p) pictureSV.value = p;
+      maybeStartAnim();
       return undefined;
     }
 
@@ -315,7 +339,12 @@ export function VroomChart(props: VroomChartProps) {
       handle.setVolumeCollapse(t, kind);
       const p = handle.render();
       if (p) pictureSV.value = p;
-      volumeRaf.current = prog < 1 ? requestAnimationFrame(step) : null;
+      if (prog < 1) {
+        volumeRaf.current = requestAnimationFrame(step);
+      } else {
+        volumeRaf.current = null;
+        maybeStartAnim();
+      }
     };
     volumeRaf.current = requestAnimationFrame(step);
 
@@ -325,7 +354,102 @@ export function VroomChart(props: VroomChartProps) {
         volumeRaf.current = null;
       }
     };
-  }, [handle, volume?.enabled, transitionMs, reduceMotion, pictureSV, volumeCollapseRef]);
+  }, [
+    handle,
+    volume?.enabled,
+    transitionMs,
+    reduceMotion,
+    pictureSV,
+    volumeCollapseRef,
+    maybeStartAnim,
+  ]);
+
+  // Axis-strip collapse. Unlike the volume bars there is no per-element stagger
+  // for the core to distribute, so this pre-eases in JS and hands over the eased
+  // scalar. Both axes ride one clock so toggling them together stays in step.
+  // This one moves the *layout* — the plot reflows into the reclaimed space
+  // every frame. Mirrors the web driver in react/src/useChartCore.ts.
+  const axisRaf = useRef<number | null>(null);
+  const axisHandle = useRef<typeof handle>(null);
+  const axisCollapse = useRef<{ y: number; x: number } | null>(null);
+  const showYAxis = theme?.showYAxis ?? true;
+  const showXAxis = theme?.showXAxis ?? true;
+  useEffect(() => {
+    if (!handle) return undefined;
+    const targetY = showYAxis ? 0 : 1;
+    const targetX = showXAxis ? 0 : 1;
+
+    // Fresh handle (first load / recreate): snap, so a chart that mounts with an
+    // axis already hidden doesn't play it out.
+    if (axisHandle.current !== handle || axisCollapse.current == null) {
+      axisHandle.current = handle;
+      axisCollapse.current = { y: targetY, x: targetX };
+      handle.setAxisCollapse(targetY, targetX);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return undefined;
+    }
+
+    const fromY = axisCollapse.current.y;
+    const fromX = axisCollapse.current.x;
+    if (fromY === targetY && fromX === targetX) {
+      maybeStartAnim();
+      return undefined;
+    }
+
+    if (axisRaf.current != null) {
+      cancelAnimationFrame(axisRaf.current);
+      axisRaf.current = null;
+    }
+
+    const dur = Math.max(0, transitionMs ?? 300);
+    if (dur === 0 || reduceMotion) {
+      axisCollapse.current = { y: targetY, x: targetX };
+      handle.setAxisCollapse(targetY, targetX);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      maybeStartAnim();
+      return undefined;
+    }
+
+    // From wherever the last frame left off, so toggling mid-flight reverses
+    // instead of jumping.
+    let startTs: number | null = null;
+    const step = (now: number) => {
+      if (startTs == null) startTs = now;
+      const prog = Math.min(1, (now - startTs) / dur);
+      const e = ease(easingRef.current, prog);
+      const y = prog < 1 ? fromY + (targetY - fromY) * e : targetY;
+      const x = prog < 1 ? fromX + (targetX - fromX) * e : targetX;
+      axisCollapse.current = { y, x };
+      handle.setAxisCollapse(y, x);
+      const p = handle.render();
+      if (p) pictureSV.value = p;
+      if (prog < 1) {
+        axisRaf.current = requestAnimationFrame(step);
+      } else {
+        axisRaf.current = null;
+        maybeStartAnim();
+      }
+    };
+    axisRaf.current = requestAnimationFrame(step);
+
+    return () => {
+      if (axisRaf.current != null) {
+        cancelAnimationFrame(axisRaf.current);
+        axisRaf.current = null;
+      }
+    };
+  }, [
+    handle,
+    showYAxis,
+    showXAxis,
+    transitionMs,
+    reduceMotion,
+    pictureSV,
+    maybeStartAnim,
+  ]);
 
   // Classifies a touch point into the candle area vs. an axis strip. Axis
   // strips always own their gesture (scale price/time) and take priority over

package/src/jsi.d.ts

@@ -269,6 +269,13 @@ export interface ChartHandle {
    * match its `enabled`, so it's only needed while animating.
    */
   setVolumeCollapse(t: number, easing: number): void;
+  /**
+   * Collapses the axis strips: 0 leaves a strip at full size, 1 hides it. The
+   * plot grows into whatever the strips give up, and their contents fade out
+   * over the first half of the collapse so text is never squeezed into a strip
+   * too narrow for it. Unlike setVolumeCollapse, both take **eased** progress.
+   */
+  setAxisCollapse(yT: number, xT: number): void;
   /**
    * The continuous data coordinate at pixel (x, y) — not snapped to a candle
    * slot. Null when there are no candles or the viewport is degenerate. Cheap to

package/src/theme.ts

@@ -11,6 +11,7 @@ export const COLOR_KEYS: Partial<Record<keyof VroomTheme, number>> = {
   grid: 4, // VROOM_COLOR_GRID
   axisText: 5, // VROOM_COLOR_AXIS_TEXT
   crosshair: 6, // VROOM_COLOR_CROSSHAIR
+  badgeText: 8, // VROOM_COLOR_BADGE_TEXT (7 is a retired slot)
   crosshairTarget: 9, // VROOM_COLOR_CROSSHAIR_TARGET
   borderBull: 10, // VROOM_COLOR_BORDER_BULL
   borderBear: 11, // VROOM_COLOR_BORDER_BEAR
@@ -36,6 +37,10 @@ export const FLOAT_KEYS: Partial<Record<keyof VroomTheme, number>> = {
 export const FLOAT_LINE_TIP_PULSE = 15; // VROOM_FLOAT_LINE_TIP_PULSE
 
 // Maps each boolean VroomTheme field to its VroomFloatKey index (pushed as 0/1).
+//
+// `showXAxis` / `showYAxis` are absent on purpose: they animate, so VroomChart
+// drives them as a collapse scalar through setAxisCollapse. A float slot here
+// would let this sweep snap them behind the animation's back.
 export const BOOL_KEYS: Partial<Record<keyof VroomTheme, number>> = {
   wickRoundCap: 9, // VROOM_FLOAT_WICK_ROUND_CAP
   lineTipDot: 14, // VROOM_FLOAT_LINE_TIP_DOT