Fix using scroll + scrubbing together (#633)

Co-authored-by: Eli Zibin <1131641+zibs@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: 3 people

.changeset/strange-points-train.md

@@ -0,0 +1,6 @@
+---
+"example": patch
+"victory-native": patch
+---
+
+all scrolling and scrubbing

example/app/scroll-scrub.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import { View } from "react-native";
+import {
+  CartesianChart,
+  Line,
+  useChartPressState,
+  useChartTransformState,
+} from "victory-native";
+import { Circle, useFont } from "@shopify/react-native-skia";
+import type { SharedValue } from "react-native-reanimated";
+import inter from "../assets/inter-medium.ttf";
+
+export default function ScrollAndScrub() {
+  const font = useFont(inter, 12);
+  const { state, isActive } = useChartPressState({ x: 0, y: { highTmp: 0 } });
+  const { state: transformState } = useChartTransformState();
+
+  return (
+    <View style={{ maxHeight: 400, flex: 1 }}>
+      <CartesianChart
+        data={DATA}
+        xKey="day"
+        yKeys={["highTmp"]}
+        axisOptions={{
+          font,
+        }}
+        transformConfig={{
+          pan: {
+            enabled: true,
+            dimensions: ["x"],
+          },
+        }}
+        viewport={{
+          x: [15, 30],
+          y: [40, 85],
+        }}
+        chartPressState={state}
+        transformState={transformState}
+      >
+        {({ points }) => (
+          <>
+            <Line points={points.highTmp} color="red" strokeWidth={3} />
+            {isActive && (
+              <ToolTip x={state.x.position} y={state.y.highTmp.position} />
+            )}
+          </>
+        )}
+      </CartesianChart>
+    </View>
+  );
+}
+
+function ToolTip({ x, y }: { x: SharedValue<number>; y: SharedValue<number> }) {
+  return <Circle cx={x} cy={y} r={8} color="black" />;
+}
+
+const DATA = Array.from({ length: 31 }, (_, i) => ({
+  day: i,
+  highTmp: 40 + 30 * Math.random(),
+}));

example/consts/routes.ts

@@ -153,6 +153,11 @@ export const ChartRoutes: {
     description: "Show example of scrolling chart data.",
     path: "/scroll",
   },
+  {
+    title: "Scroll + Scrub",
+    description: "Show example of scrolling/panning + scrubbing chart values.",
+    path: "/scroll-scrub",
+  },
   {
     title: "Chart Refs",
     description: "This example demonstrates chart interactions using refs.",

lib/src/cartesian/CartesianChart.tsx

@@ -444,7 +444,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]);
         }
@@ -463,7 +472,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,
+        );
       }
     })
     /**
@@ -488,7 +505,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,
+        );
       }
     })
     /**