react-native-vroom-chart 0.13.0 → 0.14.0

package/lib/index.d.ts

@@ -187,6 +187,13 @@ type ChartType = 'candles' | 'line';
  * Defaults to `'ease-in-out'`.
  */
 type TransitionEasing = 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out';
+/**
+ * How a same-asset interval switch animates. `'transform'` (default) lerps
+ * each visible column into its counterpart. `'fade'` fades the old scene out
+ * then the new one in — use when the two windows don’t share a 1:1 pairing
+ * (e.g. a fixed lookback).
+ */
+type IntervalTransition = 'transform' | 'fade';
 /** Active drawing tool while in `draw` mode. `null` draws nothing. */
 type DrawTool = null | 'line' | 'box' | 'pencil' | 'path';
 /** A drawing anchor in data space, so it stays glued to the candles on pan/zoom. */
@@ -200,9 +207,12 @@ type DrawPoint = {
 type DrawingBase = {
     /** Stable unique id (the chart generates one for drawings it creates). */
     id: string;
-    /** Stroke color (hex string or packed ARGB number). Default solid blue. */
+    /**
+     * Stroke color (hex string or packed ARGB number). New drawings take
+     * `drawingStyle.color` when set; otherwise `#ff2962ff`.
+     */
     color?: VroomColor;
-    /** Stroke width in px. Default 2. */
+    /** Stroke width in px. New drawings take `drawingStyle.width` when set; otherwise 2. */
     width?: number;
     /**
      * Protect the drawing from editing. A locked drawing still renders and can
@@ -295,6 +305,29 @@ type DrawingStyle = {
     fill?: VroomColor;
     locked?: boolean;
 };
+/**
+ * Default appearance for drawings the user creates — the live draft and the
+ * object handed to `onDrawingComplete`. Paste copies the source drawing's
+ * style instead of this default.
+ *
+ * Omitted fields keep the library defaults: a 2px `#ff2962ff` stroke, and for
+ * boxes a 10% tint of the stroke as fill.
+ *
+ * Prefer 6-digit hex for `color` (`'#00FFFF'`). vroom treats that as opaque,
+ * and CSS swatches preview it correctly. 8-digit hex is `#aarrggbb`, not CSS
+ * `#rrggbbaa`.
+ */
+type DefaultDrawingStyle = {
+    /** Stroke color, used for the live draft and stamped onto the committed drawing. */
+    color?: VroomColor;
+    /** Stroke width in px. Default 2. */
+    width?: number;
+    /**
+     * Box interior fill. Omitted, new boxes keep the default 10% stroke tint.
+     * Ignored by line, pencil, and path.
+     */
+    fill?: VroomColor;
+};
 /**
  * Storage adapter for **managed** drawing persistence. Provide it via the
  * `drawingStore` prop and the chart owns the drawings array itself — loading and
@@ -720,16 +753,23 @@ type VroomChartCoreProps = {
     chartType?: ChartType;
     /**
      * Duration (ms) of the animated transitions: the candle↔line switch when
-     * `chartType` changes, and the candle reshape when the `candles` array is
+     * `chartType` changes, and the interval switch when the `candles` array is
      * swapped for a different interval of the same asset. Default ~300. `0` snaps
-     * instantly. Ignored (snaps) when the OS requests reduced motion, which
-     * instead uses a plain cross-fade.
+     * instantly. Ignored (snaps) when the OS requests reduced motion.
      */
     transitionMs?: number;
     /**
      * Easing curve applied to those transitions. Default `'ease-in-out'`.
      */
     transitionEasing?: TransitionEasing;
+    /**
+     * How a same-asset interval switch animates. `'transform'` (default) lerps
+     * each visible column into its counterpart. `'fade'` fades the old scene out
+     * then the new one in — use when the two windows don’t share a 1:1 pairing
+     * (e.g. a fixed lookback). Same duration/easing as `transitionMs`. Reduced
+     * motion still snaps.
+     */
+    intervalTransition?: IntervalTransition;
     theme?: VroomTheme;
     /** RSI indicator (pane below the candles). Omit/disable to hide it. */
     rsi?: RSIConfig;
@@ -802,6 +842,12 @@ type VroomChartCoreProps = {
     mode?: ChartMode;
     /** Active drawing tool while in `draw` mode. Default `null` (draws nothing). */
     tool?: DrawTool;
+    /**
+     * Default appearance for drawings the user creates (live draft + the object
+     * handed to `onDrawingComplete`). Paste copies the source drawing's style
+     * instead of this. Omitted fields keep the library defaults.
+     */
+    drawingStyle?: DefaultDrawingStyle;
     /**
      * Committed drawings to render, anchored to data so they track the candles on
      * pan/zoom. This is a controlled prop: append the value the chart hands you in
@@ -945,4 +991,4 @@ declare function classifyTransition(prev: Candle[] | null, next: Candle[], serie
  */
 declare function timeframeWindow(oldWindow: VisibleRange, oldStepMs: number, oldLastMs: number, newStepMs: number, newLastMs: number): VisibleRange;
 
-export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type DataTransition, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme, classifyTransition, inferStepMs, timeframeWindow };
+export { type BollingerBandsConfig, type Candle, type ChartType, type CrosshairEvent, type DataTransition, type DefaultDrawingStyle, type IntervalTransition, type MACDConfig, type MAKind, type MASource, type MovingAverageOverlay, type PriceLine, type PriceLinesStyle, type RSIConfig, type TransitionEasing, type VWAPConfig, type VisibleRange, type VolumeConfig, VroomChart, type VroomChartProps, type VroomColor, type VroomTheme, classifyTransition, inferStepMs, timeframeWindow };

package/lib/index.js

@@ -384,11 +384,12 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
     ensureInstalled();
     handleRef.current = globalThis.VroomChartJSI.create();
   }
-  const animRef = (0, import_react.useRef)({ ms: 300, easing: void 0, reduceMotion: false });
+  const animRef = (0, import_react.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 = (0, import_react.useRef)(transition?.onFrame);
   onFrameRef.current = transition?.onFrame;
@@ -461,7 +462,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();
@@ -514,6 +515,9 @@ function useChartCore(candles, size, visibleRange, defaultCandleWidth, chartType
 }
 
 // src/VroomChart.tsx
+function isSkImage(frame) {
+  return typeof frame.getImageInfo === "function";
+}
 function VroomChart(props) {
   const {
     candles,
@@ -526,6 +530,7 @@ function VroomChart(props) {
     chartType,
     transitionMs,
     transitionEasing,
+    intervalTransition,
     theme,
     rsi,
     macd,
@@ -565,17 +570,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,
@@ -587,7 +613,7 @@ function VroomChart(props) {
     bollingerBands,
     volume,
     priceLinesProp,
-    { seriesKey, transitionMs, transitionEasing, reduceMotion, onFrame }
+    { seriesKey, transitionMs, transitionEasing, intervalTransition, reduceMotion, onFrame }
   );
   const crosshairActive = (0, import_react2.useRef)(false);
   const lastCrosshairTime = (0, import_react2.useRef)(null);
@@ -604,11 +630,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 +649,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 +665,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 +682,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 +695,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 +703,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 +714,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 +740,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 +754,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 +774,7 @@ function VroomChart(props) {
     volume?.enabled,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     volumeCollapseRef,
     maybeStartAnim
   ]);
@@ -766,7 +792,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 +811,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 +825,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 +846,7 @@ function VroomChart(props) {
     showXAxis,
     transitionMs,
     reduceMotion,
-    pictureSV,
+    applyFrame,
     maybeStartAnim
   ]);
   const hitAxis = (0, import_react2.useCallback)(
@@ -860,7 +886,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 +909,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 +920,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 +929,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 +949,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 +1003,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 +1013,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 +1036,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 +1051,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: