react-native-vroom-chart 0.12.0 → 0.13.1

package/lib/index.js

@@ -514,6 +514,9 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
 }
 
 // src/VroomChart.tsx
+function isSkImage(frame) {
+  return typeof frame.getImageInfo === "function";
+}
 function VroomChart(props) {
   const {
     candles,
@@ -565,17 +568,38 @@ function VroomChart(props) {
     rec.beginRecording(import_react_native_skia.Skia.XYWHRect(0, 0, 1, 1));
     return rec.finishRecordingAsPicture();
   }, []);
+  const emptyImage = (0, import_react2.useMemo)(() => {
+    const data = import_react_native_skia.Skia.Data.fromBytes(new Uint8Array(4));
+    return import_react_native_skia.Skia.Image.MakeImage(
+      {
+        width: 1,
+        height: 1,
+        colorType: import_react_native_skia.ColorType.RGBA_8888,
+        alphaType: import_react_native_skia.AlphaType.Premul
+      },
+      data,
+      4
+    );
+  }, []);
   const pictureSV = (0, import_react_native_reanimated.useSharedValue)(emptyPicture);
+  const imageSV = (0, import_react_native_reanimated.useSharedValue)(emptyImage);
+  const applyFrame = (0, import_react2.useCallback)(
+    (frame) => {
+      if (isSkImage(frame)) imageSV.value = frame;
+      else pictureSV.value = frame;
+    },
+    [imageSV, pictureSV]
+  );
   const reduceMotion = (0, import_react_native_reanimated.useReducedMotion)();
   const onFrame = (0, import_react2.useCallback)(
     (p) => {
-      pictureSV.value = p;
+      applyFrame(p);
     },
-    [pictureSV]
+    [applyFrame]
   );
   const { handle, picture, volumeCollapseRef } = useChartCore(
     candles,
-    { width, height },
+    { width, height, pxRatio: import_react_native2.PixelRatio.get() },
     visibleRange,
     defaultCandleWidth,
     chartType,
@@ -604,11 +628,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 = (0, import_react2.useCallback)(() => {
     if (animRaf.current != null) return;
     if (!handle?.isAnimating()) return;
@@ -623,9 +647,9 @@ function VroomChart(props) {
     };
   }, []);
   (0, import_react2.useEffect)(() => {
-    if (picture) pictureSV.value = picture;
+    if (picture) applyFrame(picture);
     maybeStartAnim();
-  }, [picture, pictureSV, maybeStartAnim]);
+  }, [picture, applyFrame, maybeStartAnim]);
   const morphRaf = (0, import_react2.useRef)(null);
   const morphFade = (0, import_react2.useRef)(null);
   const morphHandle = (0, import_react2.useRef)(null);
@@ -639,7 +663,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;
     }
@@ -656,7 +680,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;
     }
@@ -669,7 +693,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 {
@@ -677,7 +701,7 @@ function VroomChart(props) {
         morphFade.current = target;
         handle.setChartType(target);
         const q = handle.render();
-        if (q) pictureSV.value = q;
+        if (q) applyFrame(q);
         maybeStartAnim();
       }
     };
@@ -688,7 +712,7 @@ function VroomChart(props) {
         morphRaf.current = null;
       }
     };
-  }, [handle, chartType, transitionMs, reduceMotion, pictureSV, maybeStartAnim]);
+  }, [handle, chartType, transitionMs, reduceMotion, applyFrame, maybeStartAnim]);
   const volumeRaf = (0, import_react2.useRef)(null);
   const volumeHandle = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
@@ -714,7 +738,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;
     }
@@ -728,7 +752,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 {
@@ -748,7 +772,7 @@ function VroomChart(props) {
     volume?.enabled,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     volumeCollapseRef,
     maybeStartAnim
   ]);
@@ -766,7 +790,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;
     }
@@ -785,7 +809,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;
     }
@@ -799,7 +823,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 {
@@ -820,7 +844,7 @@ function VroomChart(props) {
     showXAxis,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     maybeStartAnim
   ]);
   const hitAxis = (0, import_react2.useCallback)(
@@ -860,7 +884,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) => {
@@ -883,7 +907,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) {
@@ -894,7 +918,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;
@@ -903,7 +927,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;
     }
@@ -923,7 +947,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);
@@ -977,7 +1001,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 = import_react_native_gesture_handler.Gesture.LongPress().runOnJS(true).onStart((e) => {
@@ -987,7 +1011,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?.({
@@ -1010,7 +1034,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" });
   });
@@ -1025,11 +1049,17 @@ function VroomChart(props) {
         style
       ]
     },
-    /* @__PURE__ */ import_react2.default.createElement(import_react_native_gesture_handler.GestureDetector, { gesture }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.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__ */ import_react2.default.createElement(import_react_native_skia.Picture, { picture: pictureSV })
-    ) : null)))
+    /* @__PURE__ */ import_react2.default.createElement(import_react_native_gesture_handler.GestureDetector, { gesture }, /* @__PURE__ */ import_react2.default.createElement(import_react_native2.View, { style: { flex: 1 } }, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Canvas, { style: { flex: 1 } }, width > 0 && height > 0 ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_native_skia.Picture, { picture: pictureSV }), /* @__PURE__ */ import_react2.default.createElement(
+      import_react_native_skia.Image,
+      {
+        image: imageSV,
+        x: 0,
+        y: 0,
+        width,
+        height,
+        fit: "fill"
+      }
+    )) : null)))
   );
 }
 // Annotate the CommonJS export names for ESM import in node: