fix and simplify arrow coordinate system

Author: latekvo

packages/docs-gesture-handler/src/examples/GestureStateFlowExample/ChartItem.tsx

@@ -1,26 +1,35 @@
 import { Grid } from '@mui/material';
-import { useEffect } from 'react';
-import { StyleProp, StyleSheet, View, Text, ViewStyle } from 'react-native';
+import { useEffect, useLayoutEffect, useRef } from 'react';
+import { StyleProp, StyleSheet, Text, View, ViewStyle } from 'react-native';
 import ChartManager, { Item, WAVE_DELAY_MS } from './ChartManager';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withSpring,
 } from 'react-native-reanimated';
 
+export type Coordinate = {
+  x: number;
+  y: number;
+};
+
 interface ChartItemProps {
   item: Item;
   chartManager: ChartManager;
-  innerRef?: (element: View) => void;
+  updateCoordinates?: (id: number, coordinate: Coordinate) => void;
   style?: StyleProp<ViewStyle>;
 }
 
+const getCenter = (side: number, size: number) => side + size / 2;
+
 export default function ChartItem({
   item,
   chartManager,
-  innerRef,
+  updateCoordinates,
   style,
 }: ChartItemProps) {
+  const ref = useRef<View>(null);
+
   const progress = useSharedValue(0);
 
   useEffect(() => {
@@ -56,6 +65,21 @@ export default function ChartItem({
     };
   });
 
+  useLayoutEffect(() => {
+    const box = (
+      ref.current as unknown as HTMLElement
+    )?.getBoundingClientRect?.();
+
+    if (!box) {
+      return; // no-op on undefined view ref
+    }
+
+    updateCoordinates(item.id, {
+      x: getCenter(box.left, box.width),
+      y: getCenter(box.top, box.height),
+    });
+  }, [item, updateCoordinates]);
+
   return (
     // @ts-ignore This is legacy code, it works regardless of this error.
     <Grid item style={styles.box} xs={3}>
@@ -66,7 +90,7 @@ export default function ChartItem({
           animatedStyle,
           style,
         ]}
-        ref={innerRef}>
+        ref={ref}>
         <Animated.Text style={[animatedTextStyle, styles.label, style]}>
           {item.label}
         </Animated.Text>

packages/docs-gesture-handler/src/examples/GestureStateFlowExample/FlowChart.tsx

@@ -1,25 +1,33 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import ChartManager from './ChartManager';
 import { Grid } from '@mui/material';
-import ChartItem from './ChartItem';
+import ChartItem, { Coordinate } from './ChartItem';
 import Arrow from './Arrow';
 
-type Coordinate = {
-  x: number;
-  y: number;
-};
-
 type FlowChartProps = {
   chartManager: ChartManager;
 };
 
-const getCenter = (side: number, size: number) => side + size / 2;
-
 export default function FlowChart({ chartManager }: FlowChartProps) {
-  const itemsRef = useRef<View[]>([]);
+  const coordinates = useMemo<Map<number, Coordinate>>(() => new Map(), []);
+
   const rootRef = useRef<View>(null);
 
+  const updateCoordinates = useCallback(
+    (id: number, coordinate: Coordinate) => {
+      const htmlRootElement = rootRef.current as unknown as HTMLElement;
+      const root = htmlRootElement.getBoundingClientRect();
+
+      // Adjust to root relative positioning
+      coordinates.set(id, {
+        x: coordinate.x - root.left,
+        y: coordinate.y - root.top,
+      });
+    },
+    [coordinates]
+  );
+
   // Arrows are not shown on the first render on production builds.
   // This `counter` forces a re-render after the component is mounted.
   const [counter, setCounter] = useState(0);
@@ -30,31 +38,6 @@ export default function FlowChart({ chartManager }: FlowChartProps) {
     return () => clearTimeout(timeout);
   }, [counter]);
 
-  const itemsCoords = useMemo<Coordinate[]>(
-    () =>
-      itemsRef.current.map((element: View | undefined) => {
-        // During unloading or reresizing, element may reload itself, causing it to be undefined
-        if (!element) {
-          return {
-            x: 0,
-            y: 0,
-          } as Coordinate;
-        }
-
-        const htmlElement = element as unknown as HTMLElement;
-        const htmlRootElement = rootRef.current as unknown as HTMLElement;
-
-        const box = htmlElement.getBoundingClientRect();
-        const root = htmlRootElement.getBoundingClientRect();
-
-        return {
-          x: getCenter(box.left, box.width) - root.left,
-          y: getCenter(box.top, box.height) - root.top,
-        } as Coordinate;
-      }),
-    []
-  );
-
   return (
     <View style={styles.container} ref={rootRef}>
       <Grid container rowGap={4}>
@@ -65,9 +48,7 @@ export default function FlowChart({ chartManager }: FlowChartProps) {
               .map((item) => (
                 <ChartItem
                   key={item.id}
-                  innerRef={(el) => {
-                    itemsRef.current[item.id] = el;
-                  }}
+                  updateCoordinates={updateCoordinates}
                   item={item}
                   chartManager={chartManager}
                 />
@@ -78,19 +59,23 @@ export default function FlowChart({ chartManager }: FlowChartProps) {
       {chartManager.connections.map((connection) => {
         // we have all the connections layed out,
         // but the user may choose not to use some of the available items,
-        if (!itemsCoords[connection.from] || !itemsCoords[connection.to]) {
+        if (
+          !coordinates.get(connection.from) ||
+          !coordinates.get(connection.to)
+        ) {
           return <View key={connection.id} />;
         }
+
         return (
           <Arrow
             key={connection.id}
             startPoint={{
-              x: itemsCoords[connection.from].x,
-              y: itemsCoords[connection.from].y,
+              x: coordinates.get(connection.from).x,
+              y: coordinates.get(connection.from).y,
             }}
             endPoint={{
-              x: itemsCoords[connection.to].x,
-              y: itemsCoords[connection.to].y,
+              x: coordinates.get(connection.to).x,
+              y: coordinates.get(connection.to).y,
             }}
           />
         );