@react-native-ohos/victory-native-xl 41.17.5 → 41.18.0-beta.1

package/README.md

@@ -1,6 +1,6 @@
 # @react-native-ohos/victory-native-xl
 
-本项目基于 [victory-native-xl@v41.17.4](https://github.com/FormidableLabs/victory-native-xl/tree/victory-native%4041.17.4)
+本项目基于 [victory-native-xl@v41.20.2](https://github.com/FormidableLabs/victory-native-xl/tree/victory-native%4041.20.2)
 
 ## 文档地址 / Documentation URL 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-native-ohos/victory-native-xl",
-  "version": "41.17.5",
+  "version": "41.18.0-beta.1",
   "private": false,
   "license": "MIT",
   "repository": {
@@ -24,9 +24,11 @@
   "dependencies": {
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
+    "d3-zoom": "^3.0.0",
     "its-fine": "^1.2.5",
     "react-fast-compare": "^3.2.2",
-    "react-native-reanimated": "3.18.0"
+    "react-native-reanimated": "3.18.0",
+    "victory-native": "41.20.2"
   },
   "peerDependencies": {
     "@react-native-ohos/react-native-skia": "file:packages/react-native-ohos-react-native-skia-1.3.7.tgz",
@@ -34,7 +36,8 @@
     "@react-native-ohos/react-native-reanimated": "file:packages/react-native-ohos-react-native-reanimated-3.18.0.tgz",
     "@shopify/react-native-skia": "^1.3.7",
     "react": "18.3.1",
-    "react-native": "0.77.1"
+    "react-native": "0.77.1",
+    "victory-native": "41.20.2"
   },
   "devDependencies": {
     "@types/d3-scale": "^4.0.3",

package/src/cartesian/CartesianChart.tsx

@@ -1,16 +1,17 @@
 import * as React from "react";
-import { type LayoutChangeEvent, Button, View } from "react-native";
-import { Canvas, Group, rect, Path } from "@shopify/react-native-skia";
-import { useSharedValue } from "react-native-reanimated";
+import { View, type LayoutChangeEvent } from "react-native";
+import { Canvas, Group, type CanvasRef } from "@shopify/react-native-skia";
+import { useSharedValue, useAnimatedReaction, runOnJS } from "react-native-reanimated";
 import {
   type ComposedGesture,
   Gesture,
-  GestureDetector,
   GestureHandlerRootView,
   type TouchData,
 } from "react-native-gesture-handler";
 import { type MutableRefObject } from "react";
-import type { ScaleLinear } from "d3-scale";
+import { ZoomTransform } from "d3-zoom";
+import type { ScaleLinear, ScaleLogarithmic } from "d3-scale";
+import isEqual from "react-fast-compare";
 import type {
   AxisProps,
   CartesianChartRenderArg,
@@ -19,23 +20,21 @@ import type {
   SidedNumber,
   TransformedData,
   ChartBounds,
-  Viewport,
-  ChartPressPanConfig,
   YAxisInputProps,
-  FrameInputProps,
   XAxisInputProps,
-  GestureHandlerConfig
+  FrameInputProps,
+  ChartPressPanConfig,
+  Viewport,
+  GestureHandlerConfig,
 } from "victory-native/src/types";
 import { transformInputData } from "victory-native/src/cartesian/utils/transformInputData";
 import { findClosestPoint } from "victory-native/src/utils/findClosestPoint";
 import { valueFromSidedNumber } from "victory-native/src/utils/valueFromSidedNumber";
-import {
-  CartesianAxis,
-  CartesianAxisDefaultProps,
-} from "victory-native/src/cartesian/components/CartesianAxis";
 import { asNumber } from "victory-native/src/utils/asNumber";
-import type { ChartPressState,
-  ChartPressStateInit, } from "victory-native/src/cartesian/hooks/useChartPressState";
+import type {
+  ChartPressState,
+  ChartPressStateInit,
+} from "victory-native/src/cartesian/hooks/useChartPressState";
 import { useFunctionRef } from "victory-native/src/hooks/useFunctionRef";
 import { CartesianChartProvider } from "victory-native/src/cartesian/contexts/CartesianChartContext";
 import { XAxis } from "victory-native/src/cartesian/components/XAxis";
@@ -54,12 +53,11 @@ import {
   useCartesianTransformContext,
 } from "victory-native/src/cartesian/contexts/CartesianTransformContext";
 import { downsampleTicks } from "victory-native/src/utils/tickHelpers";
-import { GestureHandler } from "victory-native/src/shared/GestureHandler";
+import { GestureHandler } from "../shared/GestureHandler";
 import { boundsToClip } from "victory-native/src/utils/boundsToClip";
 import { normalizeYAxisTicks } from "victory-native/src/utils/normalizeYAxisTicks";
 import { createFallbackChartState } from "victory-native/src/cartesian/utils/createFallbackChartState";
-import { ZoomTransform } from "d3-zoom";
-import isEqual from "react-fast-compare";
+
 export type CartesianActionsHandle<T = undefined> =
   T extends ChartPressState<infer S>
     ? S extends ChartPressStateInit
@@ -69,6 +67,11 @@ export type CartesianActionsHandle<T = undefined> =
       : never
     : never;
 
+export type CartesianChartRef<T = undefined> = {
+  canvas: CanvasRef | null;
+  actions: CartesianActionsHandle<T>;
+};
+
 type CartesianChartProps<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
@@ -93,7 +96,6 @@ type CartesianChartProps<
     args: CartesianChartRenderArg<RawData, YK>,
   ) => React.ReactNode;
   axisOptions?: Partial<Omit<AxisProps<RawData, XK, YK>, "xScale" | "yScale">>;
-
   onChartBoundsChange?: (bounds: ChartBounds) => void;
   onScaleChange?: (
     xScale: ScaleLinear<number, number>,
@@ -111,6 +113,8 @@ type CartesianChartProps<
     pan?: PanTransformGestureConfig;
     pinch?: PinchTransformGestureConfig;
   };
+  /** Optional hook for ScrollView coordination (e.g. disable scroll on pan/pinch). */
+  onTransformInteractionChange?: (active: boolean) => void;
   customGestures?: ComposedGesture;
   actionsRef?: MutableRefObject<CartesianActionsHandle<
     | ChartPressState<{
@@ -119,16 +123,30 @@ type CartesianChartProps<
       }>
     | undefined
   > | null>;
+  ref?: React.Ref<
+    CartesianChartRef<
+      | ChartPressState<{
+          x: InputFields<RawData>[XK];
+          y: Record<YK, number>;
+        }>
+      | undefined
+    >
+  >;
 };
 
 export function CartesianChart<
   RawData extends Record<string, unknown>,
   XK extends keyof InputFields<RawData>,
   YK extends keyof NumericalFields<RawData>,
->({ transformState, children, ...rest }: CartesianChartProps<RawData, XK, YK>) {
+>({
+  transformState,
+  children,
+  ref,
+  ...rest
+}: CartesianChartProps<RawData, XK, YK>) {
   return (
     <CartesianTransformProvider transformState={transformState}>
-      <CartesianChartContent {...{ ...rest, transformState }}>
+      <CartesianChartContent {...{ ...rest, transformState }} ref={ref}>
         {children}
       </CartesianChartContent>
     </CartesianTransformProvider>
@@ -160,18 +178,43 @@ function CartesianChartContent<
   frame,
   transformState,
   transformConfig,
+  onTransformInteractionChange,
   customGestures,
   actionsRef,
   viewport,
+  ref,
 }: CartesianChartProps<RawData, XK, YK>) {
+  const onTransformInteractionChangeRef = useFunctionRef(
+    onTransformInteractionChange,
+  );
+
+  useAnimatedReaction(
+    () =>
+      transformState
+        ? transformState.panActive.value || transformState.zoomActive.value
+        : false,
+    (active, prev) => {
+      if (
+        !onTransformInteractionChangeRef.current ||
+        prev === null ||
+        active === prev
+      ) {
+        return;
+      }
+      runOnJS(onTransformInteractionChangeRef.current)(active);
+    },
+  );
+
   const [size, setSize] = React.useState({ width: 0, height: 0 });
   const chartBoundsRef = React.useRef<ChartBounds | undefined>(undefined);
-  const xScaleRef = React.useRef<ScaleLinear<number, number> | undefined>(
-    undefined,
-  );
+  const xScaleRef = React.useRef<
+    ScaleLogarithmic<number, number> | ScaleLinear<number, number> | undefined
+  >(undefined);
+
   const yScaleRef = React.useRef<ScaleLinear<number, number> | undefined>(
     undefined,
   );
+  const canvasRef = React.useRef<CanvasRef | null>(null);
   const [hasMeasuredLayoutSize, setHasMeasuredLayoutSize] =
     React.useState(false);
   const onLayout = React.useCallback(
@@ -241,6 +284,7 @@ function CartesianChartContent<
         yAxes: normalizedAxisProps.yAxes,
         viewport,
         labelRotate: normalizedAxisProps.xAxis.labelRotate,
+        axisScales: axisOptions?.axisScales,
       });
 
     const primaryYAxis = yAxes[0];
@@ -298,7 +342,10 @@ function CartesianChartContent<
    * Take a "press value" and an x-value and update the shared values accordingly.
    */
   const handleTouch = (
-    v: ChartPressState<{ x: InputFields<RawData>[XK]; y: Record<YK, number> }>,
+    v: ChartPressState<{
+      x: InputFields<RawData>[XK];
+      y: Record<YK, number>;
+    }>,
     x: number,
     y: number,
   ) => {
@@ -308,7 +355,6 @@ function CartesianChartContent<
     if (typeof idx !== "number") return;
 
     const isInYs = (yk: string): yk is YK & string => yKeys.includes(yk as YK);
-
     // begin stacked bar handling:
     // store the heights of each bar segment
     const barHeights: number[] = [];
@@ -363,6 +409,18 @@ function CartesianChartContent<
     lastIdx.value = idx;
   };
 
+  React.useImperativeHandle(
+    ref,
+    () => ({
+      canvas: canvasRef.current,
+      actions: {
+        handleTouch,
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [canvasRef],
+  );
+
   if (actionsRef) {
     actionsRef.current = {
       handleTouch,
@@ -410,7 +468,16 @@ function CartesianChartContent<
             touchMap.value[touch.id] = i;
 
           v.isActive.value = true;
-          handleTouch(v, touch.x, touch.y);
+
+          // [3] and [7] are the X and Y translation components of the 4x4 transformation matrix, respectively.
+          const scrolledX = transformState?.matrix.value?.[3] || 0;
+          const scrolledY = transformState?.matrix.value?.[7] || 0;
+
+          handleTouch(
+            v,
+            touch.absoluteX - scrolledX,
+            touch.absoluteY - scrolledY,
+          );
         } else {
           gestureState.value.bootstrap.push([v, touch]);
         }
@@ -429,7 +496,15 @@ function CartesianChartContent<
           touchMap.value[touch.id] = i;
 
         v.isActive.value = true;
-        handleTouch(v, touch.x, touch.y);
+
+        const scrolledX = transformState?.matrix.value?.[3] || 0;
+        const scrolledY = transformState?.matrix.value?.[7] || 0;
+
+        handleTouch(
+          v,
+          touch.absoluteX - scrolledX,
+          touch.absoluteY - scrolledY,
+        );
       }
     })
     /**
@@ -454,7 +529,15 @@ function CartesianChartContent<
 
         if (!v || !touch) continue;
         if (!v.isActive.value) v.isActive.value = true;
-        handleTouch(v, touch.x, touch.y);
+
+        const scrolledX = transformState?.matrix.value?.[3] || 0;
+        const scrolledY = transformState?.matrix.value?.[7] || 0;
+
+        handleTouch(
+          v,
+          touch.absoluteX - scrolledX,
+          touch.absoluteY - scrolledY,
+        );
       }
     })
     /**
@@ -650,7 +733,7 @@ function CartesianChartContent<
 
   // Body of the chart.
   const body = (
-    <Canvas style={{ flex: 1 }} onLayout={onLayout}>
+    <Canvas ref={canvasRef} style={{ flex: 1 }}>
       {YAxisComponents}
       {XAxisComponents}
       {FrameComponent}
@@ -690,20 +773,23 @@ function CartesianChartContent<
   }
 
   return (
-    <GestureHandlerRootView style={{ flex: 1, overflow: "hidden" }}>
-      {body}
-      <GestureHandler
-        config={gestureHandlerConfig}
-        gesture={composed}
-        transformState={transformState}
-        dimensions={{
-          x: Math.min(xScale.range()[0]!, 0),
-          y: Math.min(primaryYScale.range()[0]!, 0),
-          width: xScale.range()[1]! - Math.min(xScale.range()[0]!, 0),
-          height:
-            primaryYScale.range()[1]! - Math.min(primaryYScale.range()[0]!, 0),
-        }}
-      />
+    <GestureHandlerRootView style={{ flex: 1}}>
+      <View style={{ flex: 1, overflow: "hidden" }} onLayout={onLayout}>
+        {body}
+        <GestureHandler
+          config={gestureHandlerConfig}
+          gesture={composed}
+          transformState={transformState}
+          dimensions={{
+            x: Math.min(xScale.range()[0]!, 0),
+            y: Math.min(primaryYScale.range()[0]!, 0),
+            width: xScale.range()[1]! - Math.min(xScale.range()[0]!, 0),
+            height:
+              primaryYScale.range()[1]! -
+              Math.min(primaryYScale.range()[0]!, 0),
+          }}
+        />
+      </View>
     </GestureHandlerRootView>
   );
 }

package/src/index.ts

@@ -1,12 +1,16 @@
 /**
  * Cartesian chart exports (including useful types)
  */
-export { CartesianChart } from "./cartesian/CartesianChart";
+export {
+  CartesianChart,
+  type CartesianActionsHandle,
+  type CartesianChartRef,
+} from "./cartesian/CartesianChart";
 export { PolarChart } from "./polar/PolarChart";
 
-
 export { type CurveType } from "victory-native";
 export { type RoundedCorners } from "victory-native";
+export { type AxisScaleType, type AxisScales } from "victory-native/src/types";
 
 export { useAnimatedPath } from "victory-native";
 export { AnimatedPath } from "victory-native";

package/src/polar/PolarChart.tsx

@@ -52,9 +52,11 @@ const PolarChartBase = (
   const ctx = usePolarChartContext();
   const ContextBridge = useContextBridge();
   return (
-    <View style={[styles.baseContainer, containerStyle]}>
+    <View
+      style={[styles.baseContainer, containerStyle]}
+      onLayout={onLayout}
+    >
       <Canvas
-        onLayout={onLayout}
         style={StyleSheet.flatten([
           styles.canvasContainer,
           hasMeasuredLayoutSize ? { width, height } : null,

package/src/shared/GestureHandler.tsx

@@ -0,0 +1,45 @@
+import {
+  type ComposedGesture,
+  GestureDetector,
+  type GestureType,
+} from "react-native-gesture-handler";
+import { type SkRect } from "@shopify/react-native-skia";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import * as React from "react";
+import { type ChartTransformState } from "victory-native/src/cartesian/hooks/useChartTransformState";
+import type { GestureHandlerConfig } from "victory-native/src/types";
+
+type GestureHandlerProps = {
+  gesture: ComposedGesture | GestureType;
+  dimensions?: SkRect;
+  transformState?: ChartTransformState;
+  debug?: boolean;
+  config?: GestureHandlerConfig;
+};
+
+/**
+ * OHOS: Keep the gesture overlay fixed to the chart container instead of
+ * following transformState.matrix. Upstream 41.20.2 moves the overlay with
+ * matrix transforms, which breaks pan/pinch on HarmonyOS RNGH (e.g. Y pan
+ * requires a horizontal move first). Aligns with upstream main PR #664.
+ */
+export const GestureHandler = ({
+  gesture,
+  debug = false,
+  config,
+}: GestureHandlerProps) => {
+  const style = useAnimatedStyle(() => ({
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: debug ? "rgba(100, 200, 255, 0.4)" : "transparent",
+  }));
+
+  return (
+    <GestureDetector {...config} gesture={gesture}>
+      <Animated.View style={style} />
+    </GestureDetector>
+  );
+};