react-native-vroom-chart 0.13.0 → 0.14.0

package/lib/index.mjs

@@ -1,7 +1,14 @@
 // src/VroomChart.tsx
 import React, { useEffect as useEffect2, useRef as useRef2, useCallback as useCallback2, useState as useState2, useMemo } from "react";
-import { View } from "react-native";
-import { Canvas, Picture, Skia } from "@shopify/react-native-skia";
+import { PixelRatio, View } from "react-native";
+import {
+  AlphaType,
+  Canvas,
+  ColorType,
+  Image,
+  Picture,
+  Skia
+} from "@shopify/react-native-skia";
 import {
   Gesture,
   GestureDetector,
@@ -349,11 +356,12 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
-  const animRef = useRef({ ms: 300, easing: void 0, reduceMotion: false });
+  const animRef = useRef({ ms: 300, easing: void 0, reduceMotion: false, interval: "transform" });
   animRef.current = {
     ms: Math.max(0, transition?.transitionMs ?? 300),
     easing: transition?.transitionEasing,
-    reduceMotion: transition?.reduceMotion ?? false
+    reduceMotion: transition?.reduceMotion ?? false,
+    interval: transition?.intervalTransition === "fade" ? "fade" : "transform"
   };
   const onFrameRef = useRef(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
@@ -426,7 +434,7 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
           morphing = animRef.current.ms > 0 && !animRef.current.reduceMotion && onFrameRef.current != null;
           if (morphing) {
             endIntervalMorph();
-            h.beginIntervalMorph();
+            h.beginIntervalMorph(animRef.current.interval);
           }
         } else if (transitionKind === "initial" || transitionKind === "reset") {
           endIntervalMorph();
@@ -479,6 +487,9 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
 }
 
 // src/VroomChart.tsx
+function isSkImage(frame) {
+  return typeof frame.getImageInfo === "function";
+}
 function VroomChart(props) {
   const {
     candles,
@@ -491,6 +502,7 @@ function VroomChart(props) {
     chartType,
     transitionMs,
     transitionEasing,
+    intervalTransition,
     theme,
     rsi,
     macd,
@@ -530,17 +542,38 @@ function VroomChart(props) {
     rec.beginRecording(Skia.XYWHRect(0, 0, 1, 1));
     return rec.finishRecordingAsPicture();
   }, []);
+  const emptyImage = useMemo(() => {
+    const data = Skia.Data.fromBytes(new Uint8Array(4));
+    return Skia.Image.MakeImage(
+      {
+        width: 1,
+        height: 1,
+        colorType: ColorType.RGBA_8888,
+        alphaType: AlphaType.Premul
+      },
+      data,
+      4
+    );
+  }, []);
   const pictureSV = useSharedValue(emptyPicture);
+  const imageSV = useSharedValue(emptyImage);
+  const applyFrame = useCallback2(
+    (frame) => {
+      if (isSkImage(frame)) imageSV.value = frame;
+      else pictureSV.value = frame;
+    },
+    [imageSV, pictureSV]
+  );
   const reduceMotion = useReducedMotion();
   const onFrame = useCallback2(
     (p) => {
-      pictureSV.value = p;
+      applyFrame(p);
     },
-    [pictureSV]
+    [applyFrame]
   );
   const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
-    { width, height },
+    { width, height, pxRatio: PixelRatio.get() },
     visibleRange,
     defaultCandleWidth,
     chartType,
@@ -552,7 +585,7 @@ function VroomChart(props) {
     bollingerBands,
     volume,
     priceLinesProp,
-    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
+    { seriesKey, transitionMs, transitionEasing, intervalTransition, reduceMotion, onFrame }
   );
   const crosshairActive = useRef2(false);
   const lastCrosshairTime = useRef2(null);
@@ -569,11 +602,11 @@ function VroomChart(props) {
     animRaf.current = null;
     if (!handle) return;
     const next = handle.render();
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     if (handle.isAnimating()) {
       animRaf.current = requestAnimationFrame(animTick);
     }
-  }, [handle, pictureSV]);
+  }, [handle, applyFrame]);
   const maybeStartAnim = useCallback2(() => {
     if (animRaf.current != null) return;
     if (!handle?.isAnimating()) return;
@@ -588,9 +621,9 @@ function VroomChart(props) {
     };
   }, []);
   useEffect2(() => {
-    if (picture) pictureSV.value = picture;
+    if (picture) applyFrame(picture);
     maybeStartAnim();
-  }, [picture, pictureSV, maybeStartAnim]);
+  }, [picture, applyFrame, maybeStartAnim]);
   const morphRaf = useRef2(null);
   const morphFade = useRef2(null);
   const morphHandle = useRef2(null);
@@ -604,7 +637,7 @@ function VroomChart(props) {
       morphFade.current = target;
       handle.setChartType(target);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -621,7 +654,7 @@ function VroomChart(props) {
       morphFade.current = target;
       handle.setChartType(target);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -634,7 +667,7 @@ function VroomChart(props) {
       morphFade.current = fade;
       handle.setMorph(reduceMotion ? 0 : fade, fade);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         morphRaf.current = requestAnimationFrame(step);
       } else {
@@ -642,7 +675,7 @@ function VroomChart(props) {
         morphFade.current = target;
         handle.setChartType(target);
         const q = handle.render();
-        if (q) pictureSV.value = q;
+        if (q) applyFrame(q);
         maybeStartAnim();
       }
     };
@@ -653,7 +686,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, reduceMotion, pictureSV, maybeStartAnim]);
+  }, [handle, chartType, transitionMs, reduceMotion, applyFrame, maybeStartAnim]);
   const volumeRaf = useRef2(null);
   const volumeHandle = useRef2(null);
   useEffect2(() => {
@@ -679,7 +712,7 @@ function VroomChart(props) {
       volumeCollapseRef.current = { t: target, easing };
       handle.setVolumeCollapse(target, easing);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -693,7 +726,7 @@ function VroomChart(props) {
       volumeCollapseRef.current = { t, easing: kind };
       handle.setVolumeCollapse(t, kind);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         volumeRaf.current = requestAnimationFrame(step);
       } else {
@@ -713,7 +746,7 @@ function VroomChart(props) {
     volume?.enabled,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     volumeCollapseRef,
     maybeStartAnim
   ]);
@@ -731,7 +764,7 @@ function VroomChart(props) {
       axisCollapse.current = { y: targetY, x: targetX };
       handle.setAxisCollapse(targetY, targetX);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -750,7 +783,7 @@ function VroomChart(props) {
       axisCollapse.current = { y: targetY, x: targetX };
       handle.setAxisCollapse(targetY, targetX);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       maybeStartAnim();
       return void 0;
     }
@@ -764,7 +797,7 @@ function VroomChart(props) {
       axisCollapse.current = { y, x };
       handle.setAxisCollapse(y, x);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (prog < 1) {
         axisRaf.current = requestAnimationFrame(step);
       } else {
@@ -785,7 +818,7 @@ function VroomChart(props) {
     showXAxis,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     maybeStartAnim
   ]);
   const hitAxis = useCallback2(
@@ -825,7 +858,7 @@ function VroomChart(props) {
         priceDrag.current = { index: pl.index, id: pl.line.id, price: pl.line.price };
         handle.setPriceLineDrag(pl.index, pl.line.price);
         const p = handle.render();
-        if (p) pictureSV.value = p;
+        if (p) applyFrame(p);
       }
     }
   }).onChange((e) => {
@@ -848,7 +881,7 @@ function VroomChart(props) {
       next = handle.render();
     } else if (crosshairActive.current) {
       const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
-      if (ch) pictureSV.value = ch;
+      if (ch) applyFrame(ch);
       const info = handle.getCrosshairInfo();
       const t = info?.timeMs ?? null;
       if (t !== lastCrosshairTime.current) {
@@ -859,7 +892,7 @@ function VroomChart(props) {
     } else {
       next = handle.translate(e.changeX, e.changeY);
     }
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     maybeStartAnim();
   }).onEnd((e) => {
     if (!handle) return;
@@ -868,7 +901,7 @@ function VroomChart(props) {
       priceDrag.current = null;
       handle.setPriceLineDrag(-1, 0);
       const p = handle.render();
-      if (p) pictureSV.value = p;
+      if (p) applyFrame(p);
       if (g) onPriceLineDragEnd?.(g.id, g.price);
       return;
     }
@@ -888,7 +921,7 @@ function VroomChart(props) {
       velocity *= Math.pow(0.5, dt / HALF_LIFE_S);
       const dx = velocity * dt;
       const next = handle.pan(dx, 0);
-      if (next) pictureSV.value = next;
+      if (next) applyFrame(next);
       maybeStartAnim();
       if (Math.abs(velocity) > MIN_STOP) {
         decayRaf.current = requestAnimationFrame(tick);
@@ -942,7 +975,7 @@ function VroomChart(props) {
     }
     if (frameX === 1 && frameY === 1) return;
     const next = handle.zoom(frameX, frameY, focalX, focalY);
-    if (next) pictureSV.value = next;
+    if (next) applyFrame(next);
     maybeStartAnim();
   });
   const longPress = Gesture.LongPress().runOnJS(true).onStart((e) => {
@@ -952,7 +985,7 @@ function VroomChart(props) {
     cancelDecay();
     crosshairActive.current = true;
     const ch = handle.setCrosshair(e.x, e.y - crosshairOffset);
-    if (ch) pictureSV.value = ch;
+    if (ch) applyFrame(ch);
     const info = handle.getCrosshairInfo();
     lastCrosshairTime.current = info?.timeMs ?? null;
     onCrosshair?.({
@@ -975,7 +1008,7 @@ function VroomChart(props) {
     if (hitAxis(e.x, e.y) !== "chart") return;
     crosshairActive.current = false;
     const ch = handle.clearCrosshair();
-    if (ch) pictureSV.value = ch;
+    if (ch) applyFrame(ch);
     lastCrosshairTime.current = null;
     onCrosshair?.({ active: false, candle: null, timeMs: null, price: null, reason: "hide" });
   });
@@ -990,11 +1023,17 @@ function VroomChart(props) {
         style
       ]
     },
-    /* @__PURE__ */ React.createElement(GestureDetector, { gesture }, /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Canvas, { style: { flex: 1 } }, width > 0 && height > 0 ? (
-      // pictureSV is always a valid picture (seeded empty, never null),
-      // so RN-Skia's UI-thread reader never sees null.
-      /* @__PURE__ */ React.createElement(Picture, { picture: pictureSV })
-    ) : null)))
+    /* @__PURE__ */ React.createElement(GestureDetector, { gesture }, /* @__PURE__ */ React.createElement(View, { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Canvas, { style: { flex: 1 } }, width > 0 && height > 0 ? /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Picture, { picture: pictureSV }), /* @__PURE__ */ React.createElement(
+      Image,
+      {
+        image: imageSV,
+        x: 0,
+        y: 0,
+        width,
+        height,
+        fit: "fill"
+      }
+    )) : null)))
   );
 }
 export {