From cc7f30da719e7cfcc3e6c49f84a730ecb9e7f499 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Mon, 8 Jul 2024 15:01:03 +0200
Subject: [PATCH] Refactor example to use Canvas as children of GestureDector
 (#2520)

---
 example/jestSetup.mjs                         |  7 ++
 example/src/Examples/API/Touch.tsx            | 13 ++--
 .../components/CoonsPatchMeshGradient.tsx     | 62 ++++++++--------
 example/src/Examples/Gooey/Gooey.tsx          | 71 ++++++++++---------
 example/src/Examples/Graphs/Slider.tsx        | 50 ++++++-------
 example/src/Examples/Hue/Hue.tsx              | 27 ++++---
 .../Examples/Performance/PerformanceRects.tsx | 16 ++---
 example/src/Examples/Severance/Severance.tsx  | 46 ++++++------
 .../src/renderer/__tests__/e2e/Rect.spec.tsx  | 17 +++++
 9 files changed, 162 insertions(+), 147 deletions(-)

diff --git a/example/jestSetup.mjs b/example/jestSetup.mjs
index 52726852af..92d276e35e 100644
--- a/example/jestSetup.mjs
+++ b/example/jestSetup.mjs
@@ -56,3 +56,10 @@ jest.mock("@react-navigation/native", () => {
     }),
   };
 });
+
+jest.mock("react-native-gesture-handler", () => {
+  return {
+    ...jest.requireActual("react-native-gesture-handler"),
+    GestureDetector: jest.fn(),
+  };
+});
diff --git a/example/src/Examples/API/Touch.tsx b/example/src/Examples/API/Touch.tsx
index 6a8163cd43..c13c632007 100644
--- a/example/src/Examples/API/Touch.tsx
+++ b/example/src/Examples/API/Touch.tsx
@@ -71,14 +71,13 @@ export const Touch = () => {
     <View style={styles.container}>
       <Title>Touch handling</Title>
       <View style={{ flex: 1 }}>
-        <Canvas style={styles.container}>
-          <Fill color="white" />
-          <Group style="stroke" strokeWidth={8}>
-            <Picture picture={picture} />
-          </Group>
-        </Canvas>
         <GestureDetector gesture={gesture}>
-          <View style={StyleSheet.absoluteFill} />
+          <Canvas style={styles.container}>
+            <Fill color="white" />
+            <Group style="stroke" strokeWidth={8}>
+              <Picture picture={picture} />
+            </Group>
+          </Canvas>
         </GestureDetector>
       </View>
     </View>
diff --git a/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx b/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
index fd417036ce..264ac5f758 100644
--- a/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
+++ b/example/src/Examples/Aurora/components/CoonsPatchMeshGradient.tsx
@@ -12,12 +12,9 @@ import {
   useImage,
   useClock,
 } from "@shopify/react-native-skia";
-import { View, useWindowDimensions, StyleSheet } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 import { GestureDetector } from "react-native-gesture-handler";
 
 import { createNoise2D } from "../../../components/SimpleNoise";
@@ -178,39 +175,38 @@ export const CoonsPatchMeshGradient = ({
 
   return (
     <View>
-      <Canvas style={{ width, height }}>
-        <Group>
-          <ImageShader image={image} tx="repeat" ty="repeat" />
-          {rects.map((r, i) => {
+      <GestureDetector gesture={gesture}>
+        <Canvas style={{ width, height }}>
+          <Group>
+            <ImageShader image={image} tx="repeat" ty="repeat" />
+            {rects.map((r, i) => {
+              return (
+                <RectPatch
+                  key={i}
+                  r={r}
+                  mesh={mesh}
+                  debug={debug}
+                  lines={lines}
+                  colors={colors}
+                  defaultMesh={defaultMesh}
+                />
+              );
+            })}
+          </Group>
+          {defaultMesh.map(({ pos }, index) => {
+            if (isEdge(pos, window) || !handles) {
+              return null;
+            }
             return (
-              <RectPatch
-                key={i}
-                r={r}
+              <Cubic
+                key={index}
                 mesh={mesh}
-                debug={debug}
-                lines={lines}
-                colors={colors}
-                defaultMesh={defaultMesh}
+                index={index}
+                color={colors[index]}
               />
             );
           })}
-        </Group>
-        {defaultMesh.map(({ pos }, index) => {
-          if (isEdge(pos, window) || !handles) {
-            return null;
-          }
-          return (
-            <Cubic
-              key={index}
-              mesh={mesh}
-              index={index}
-              color={colors[index]}
-            />
-          );
-        })}
-      </Canvas>
-      <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        </Canvas>
       </GestureDetector>
     </View>
   );
diff --git a/example/src/Examples/Gooey/Gooey.tsx b/example/src/Examples/Gooey/Gooey.tsx
index a01da56f2c..8ce2eb5370 100644
--- a/example/src/Examples/Gooey/Gooey.tsx
+++ b/example/src/Examples/Gooey/Gooey.tsx
@@ -15,9 +15,9 @@ import {
   Blur,
   ColorMatrix,
 } from "@shopify/react-native-skia";
-import { View, useWindowDimensions, StyleSheet } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
+import {
   useDerivedValue,
   useSharedValue,
   withSpring,
@@ -111,42 +111,47 @@ export const Gooey = () => {
 
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={{ flex: 1 }}>
-        <Fill color={BG} />
-        <Group
-          layer={
-            <Paint>
-              <ColorMatrix
-                matrix={[
-                  1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18, -7,
-                ]}
+      <GestureDetector gesture={gesture}>
+        <Canvas style={{ flex: 1 }}>
+          <Fill color={BG} />
+          <Group
+            layer={
+              <Paint>
+                <ColorMatrix
+                  matrix={[
+                    1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 18,
+                    -7,
+                  ]}
+                />
+                <Blur blur={20} />
+              </Paint>
+            }
+          >
+            {icons.map((icon, i) => (
+              <IconBackground
+                key={i}
+                progress={progress}
+                c={c}
+                dst={icon.dst}
               />
-              <Blur blur={20} />
-            </Paint>
-          }
-        >
+            ))}
+            <Group transform={translate(c)}>
+              <Circle r={R} color={FG} />
+            </Group>
+          </Group>
           {icons.map((icon, i) => (
-            <IconBackground key={i} progress={progress} c={c} dst={icon.dst} />
+            <IconForeground
+              key={i}
+              progress={progress}
+              c={c}
+              dst={icon.dst}
+              path={icon.path}
+            />
           ))}
           <Group transform={translate(c)}>
-            <Circle r={R} color={FG} />
+            <Hamburger />
           </Group>
-        </Group>
-        {icons.map((icon, i) => (
-          <IconForeground
-            key={i}
-            progress={progress}
-            c={c}
-            dst={icon.dst}
-            path={icon.path}
-          />
-        ))}
-        <Group transform={translate(c)}>
-          <Hamburger />
-        </Group>
-      </Canvas>
-      <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        </Canvas>
       </GestureDetector>
     </View>
   );
diff --git a/example/src/Examples/Graphs/Slider.tsx b/example/src/Examples/Graphs/Slider.tsx
index f19289ea2a..40fc07719b 100644
--- a/example/src/Examples/Graphs/Slider.tsx
+++ b/example/src/Examples/Graphs/Slider.tsx
@@ -14,10 +14,7 @@ import {
 import React, { useMemo } from "react";
 import { StyleSheet, Text, View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
 import { createGraphPath } from "./createGraphPath";
 import type { GraphProps } from "./types";
@@ -54,30 +51,29 @@ export const Slider: React.FC<GraphProps> = ({ height, width }) => {
   });
   return (
     <View style={{ height, marginBottom: 10 }}>
-      <Canvas style={styles.graph}>
-        <Fill color="black" />
-        <Path
-          path={path}
-          strokeWidth={4}
-          style="stroke"
-          strokeJoin="round"
-          strokeCap="round"
-        >
-          <LinearGradient
-            start={vec(0, height * 0.5)}
-            end={vec(width * 0.5, height * 0.5)}
-            colors={["black", "#DA4167"]}
-          />
-        </Path>
-        <Group color="#fff">
-          <Circle c={touchPos} r={10} />
-          <Circle color="#DA4167" c={touchPos} r={7.5} />
-          <SkiaText font={font} x={textX} y={textY} text={label} />
-          <Line p1={lineP1} p2={lineP2} />
-        </Group>
-      </Canvas>
       <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        <Canvas style={styles.graph}>
+          <Fill color="black" />
+          <Path
+            path={path}
+            strokeWidth={4}
+            style="stroke"
+            strokeJoin="round"
+            strokeCap="round"
+          >
+            <LinearGradient
+              start={vec(0, height * 0.5)}
+              end={vec(width * 0.5, height * 0.5)}
+              colors={["black", "#DA4167"]}
+            />
+          </Path>
+          <Group color="#fff">
+            <Circle c={touchPos} r={10} />
+            <Circle color="#DA4167" c={touchPos} r={7.5} />
+            <SkiaText font={font} x={textX} y={textY} text={label} />
+            <Line p1={lineP1} p2={lineP2} />
+          </Group>
+        </Canvas>
       </GestureDetector>
       <Text>Touch and drag to move center point</Text>
     </View>
diff --git a/example/src/Examples/Hue/Hue.tsx b/example/src/Examples/Hue/Hue.tsx
index a2e718e138..24f399266f 100644
--- a/example/src/Examples/Hue/Hue.tsx
+++ b/example/src/Examples/Hue/Hue.tsx
@@ -12,9 +12,9 @@ import {
   polar2Canvas,
   Shader,
 } from "@shopify/react-native-skia";
-import { StyleSheet, View, useWindowDimensions } from "react-native";
+import { View, useWindowDimensions } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import Animated, { useSharedValue } from "react-native-reanimated";
+import { useSharedValue } from "react-native-reanimated";
 
 import { polar2Color } from "./Helpers";
 
@@ -57,19 +57,18 @@ export const Hue = () => {
   });
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={{ flex: 1 }}>
-        <Fill color={color} />
-        <Circle c={c} r={r}>
-          <BlurMask blur={40} style="solid" />
-          <Shader source={source} uniforms={{ c, r }} />
-        </Circle>
-        <Circle r={20} color="black" cx={translateX} cy={translateY}>
-          <BlurMask blur={10} style="solid" />
-        </Circle>
-        <Circle r={15} color={color} cx={translateX} cy={translateY} />
-      </Canvas>
       <GestureDetector gesture={gesture}>
-        <Animated.View style={StyleSheet.absoluteFill} />
+        <Canvas style={{ flex: 1 }}>
+          <Fill color={color} />
+          <Circle c={c} r={r}>
+            <BlurMask blur={40} style="solid" />
+            <Shader source={source} uniforms={{ c, r }} />
+          </Circle>
+          <Circle r={20} color="black" cx={translateX} cy={translateY}>
+            <BlurMask blur={10} style="solid" />
+          </Circle>
+          <Circle r={15} color={color} cx={translateX} cy={translateY} />
+        </Canvas>
       </GestureDetector>
     </View>
   );
diff --git a/example/src/Examples/Performance/PerformanceRects.tsx b/example/src/Examples/Performance/PerformanceRects.tsx
index cd4b1bc391..328609b91a 100644
--- a/example/src/Examples/Performance/PerformanceRects.tsx
+++ b/example/src/Examples/Performance/PerformanceRects.tsx
@@ -10,10 +10,7 @@ import {
 } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import type { SharedValue } from "react-native-reanimated";
-import Animated, {
-  useDerivedValue,
-  useSharedValue,
-} from "react-native-reanimated";
+import { useDerivedValue, useSharedValue } from "react-native-reanimated";
 
 const Size = 25;
 const Increaser = 50;
@@ -66,13 +63,12 @@ export const PerformanceDrawingTest: React.FC = () => {
         </View>
       </View>
       <View style={{ flex: 1 }}>
-        <Canvas style={styles.container} mode="default">
-          {rects.map((_, i) => (
-            <Rct pos={pos} key={i} rct={rects[i]} />
-          ))}
-        </Canvas>
         <GestureDetector gesture={gesture}>
-          <Animated.View style={StyleSheet.absoluteFill} />
+          <Canvas style={styles.container} mode="default">
+            {rects.map((_, i) => (
+              <Rct pos={pos} key={i} rct={rects[i]} />
+            ))}
+          </Canvas>
         </GestureDetector>
       </View>
     </View>
diff --git a/example/src/Examples/Severance/Severance.tsx b/example/src/Examples/Severance/Severance.tsx
index 78c4282845..f31f02e923 100644
--- a/example/src/Examples/Severance/Severance.tsx
+++ b/example/src/Examples/Severance/Severance.tsx
@@ -6,7 +6,7 @@ import {
   useFont,
 } from "@shopify/react-native-skia";
 import React from "react";
-import { useWindowDimensions, StyleSheet, View } from "react-native";
+import { useWindowDimensions, View } from "react-native";
 import { useSharedValue } from "react-native-reanimated";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 
@@ -28,29 +28,29 @@ export const Severance = () => {
   }
   return (
     <View style={{ flex: 1 }}>
-      <Canvas style={{ flex: 1 }}>
-        <CRT>
-          <Group>
-            <Fill color={BG} />
-            {rows.map((_i, i) =>
-              cols.map((_j, j) => {
-                return (
-                  <Symbol
-                    key={`${i}-${j}`}
-                    i={i}
-                    j={j}
-                    font={font}
-                    pointer={pointer}
-                    clock={clock}
-                  />
-                );
-              })
-            )}
-          </Group>
-        </CRT>
-      </Canvas>
+      {" "}
       <GestureDetector gesture={gesture}>
-        <View style={StyleSheet.absoluteFill} />
+        <Canvas style={{ flex: 1 }}>
+          <CRT>
+            <Group>
+              <Fill color={BG} />
+              {rows.map((_i, i) =>
+                cols.map((_j, j) => {
+                  return (
+                    <Symbol
+                      key={`${i}-${j}`}
+                      i={i}
+                      j={j}
+                      font={font}
+                      pointer={pointer}
+                      clock={clock}
+                    />
+                  );
+                })
+              )}
+            </Group>
+          </CRT>
+        </Canvas>
       </GestureDetector>
     </View>
   );
diff --git a/package/src/renderer/__tests__/e2e/Rect.spec.tsx b/package/src/renderer/__tests__/e2e/Rect.spec.tsx
index 940ddacf0b..ce706861ab 100644
--- a/package/src/renderer/__tests__/e2e/Rect.spec.tsx
+++ b/package/src/renderer/__tests__/e2e/Rect.spec.tsx
@@ -111,6 +111,23 @@ describe("Rects and rounded rects", () => {
     const image = await surface.draw(<Path path={path} color="lightblue" />);
     checkImage(image, docPath("rrect/nonuniform.png"));
   });
+  it("Should draw a rounded rect with non-uniform values (3)", async () => {
+    const { Skia } = importSkia();
+    const { width, height } = surface;
+    const r = width * 0.2;
+    const barPath = Skia.Path.Make();
+    barPath.addRRect({
+      rect: { x: 0, y: 0, width, height },
+      topLeft: { x: r, y: r },
+      topRight: { x: r, y: r },
+      bottomLeft: { x: 0, y: 0 },
+      bottomRight: { x: 0, y: 0 },
+    });
+    const image = await surface.draw(<Path path={barPath} color="lightblue" />);
+    checkImage(image, docPath("rrect/test.png"));
+  });
+  /*
+   */
   it("Supports CSS3 colors (1)", async () => {
     const image = await surface.draw(<Fill color="hsl(120, 100%, 50%)" />);
     checkImage(image, docPath("fill/green.png"));