From 6a8e64eda1a0c6daff26a27cc3468bb437dcb339 Mon Sep 17 00:00:00 2001
From: William Candillon <wcandillon@gmail.com>
Date: Fri, 14 Jun 2024 12:58:47 +0200
Subject: [PATCH] Revert "Add a magnifying glass example (#2419)" (#2483)

This reverts commit 391fb9a2735344027282db0f433226c68948f2e8.
---
 example/src/App.tsx                           |   3 -
 example/src/Examples/Examples.test.tsx        |   5 -
 .../MagnifyingGlass/MagnifyingGlass.tsx       | 193 ------------------
 .../src/Examples/MagnifyingGlass/index.tsx    |   1 -
 example/src/Examples/SpeedTest/Slider.tsx     |  10 +-
 example/src/Examples/index.ts                 |   1 -
 example/src/Home/HomeScreen.tsx               |   5 -
 example/src/types.ts                          |   1 -
 8 files changed, 1 insertion(+), 218 deletions(-)
 delete mode 100644 example/src/Examples/MagnifyingGlass/MagnifyingGlass.tsx
 delete mode 100644 example/src/Examples/MagnifyingGlass/index.tsx

diff --git a/example/src/App.tsx b/example/src/App.tsx
index 32c7319c2c..4fd9c447a9 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -14,7 +14,6 @@ import {
   Aurora,
   Breathe,
   Filters,
-  MagnifyingGlass,
   Gooey,
   GraphsScreen,
   Hue,
@@ -45,7 +44,6 @@ const linking: LinkingOptions<StackParamList> = {
       API: "api",
       Breathe: "breathe",
       Filters: "filters",
-      MagnifyingGlass: "magnifying-glass",
       Gooey: "gooey",
       Hue: "hue",
       Matrix: "matrix",
@@ -129,7 +127,6 @@ const App = () => {
             <Stack.Screen name="API" component={API} />
             <Stack.Screen name="Breathe" component={Breathe} />
             <Stack.Screen name="Filters" component={Filters} />
-            <Stack.Screen name="MagnifyingGlass" component={MagnifyingGlass} />
             <Stack.Screen name="Gooey" component={Gooey} />
             <Stack.Screen name="Hue" component={Hue} />
             <Stack.Screen
diff --git a/example/src/Examples/Examples.test.tsx b/example/src/Examples/Examples.test.tsx
index 803a471895..d47eaac754 100644
--- a/example/src/Examples/Examples.test.tsx
+++ b/example/src/Examples/Examples.test.tsx
@@ -16,7 +16,6 @@ import { Matrix } from "./Matrix";
 import { Hue } from "./Hue";
 import { Glassmorphism } from "./Glassmorphism";
 import { Filters } from "./Filters";
-import { MagnifyingGlass } from "./MagnifyingGlass";
 
 it("should render the Breathe example correctly", () => {
   render(<Breathe />);
@@ -70,8 +69,4 @@ it("should render the Filter example correctly", () => {
   render(<Filters />);
 });
 
-it("should render the MagnifyingGlass example correctly", () => {
-  render(<MagnifyingGlass />);
-});
-
 afterEach(cleanup);
diff --git a/example/src/Examples/MagnifyingGlass/MagnifyingGlass.tsx b/example/src/Examples/MagnifyingGlass/MagnifyingGlass.tsx
deleted file mode 100644
index 63538e5d77..0000000000
--- a/example/src/Examples/MagnifyingGlass/MagnifyingGlass.tsx
+++ /dev/null
@@ -1,193 +0,0 @@
-import React, { useState } from "react";
-import type { LayoutChangeEvent } from "react-native";
-import { Button, PixelRatio, StyleSheet, Text, View } from "react-native";
-import {
-  Canvas,
-  Group,
-  Image,
-  Paint,
-  Skia,
-  RuntimeShader,
-  useImage,
-  useTouchHandler,
-  vec,
-} from "@shopify/react-native-skia";
-import { useDerivedValue, useSharedValue } from "react-native-reanimated";
-
-import { Slider } from "../SpeedTest/Slider";
-
-const pd = PixelRatio.get();
-
-const source = Skia.RuntimeEffect.Make(`
-uniform shader image;
-uniform vec2 screen;
-uniform vec2 touchPos;
-uniform float drawing;
-uniform float zoomLevel;
-uniform float isFixed;
-
-const vec2 magnifier_center = vec2(80);
-
-half4 main(vec2 pos) {
-    if (drawing == 0)
-        return image.eval(pos);
-
-    // Convert to UV coordinates, accounting for aspect ratio
-    vec2 uv = pos / screen.y / ${pd};
-
-    vec2 touch = touchPos.xy;
-    if (touch == vec2(0))
-        touch = screen.xy / 2 / ${pd};
-
-    // UV coordinates of touch
-    vec2 touch_uv = touch / screen.y;
-
-    // Distance to touch
-    float touch_dist = distance(uv, touch_uv);
-
-     // UV coordinates of magnifier center
-    vec2 magnifier_uv = magnifier_center / screen.y;
-
-    // Distance from magnifier to touch
-    float magnifier_touch_dist = distance(magnifier_uv, touch_uv);
-
-    if (magnifier_touch_dist < 0.1)
-        magnifier_uv.x = (screen.x / screen.y) - magnifier_uv.x;
-
-    // Distance to magnifier center
-    float magnifier_dist = distance(uv, magnifier_uv);
-
-    // Draw the texture
-    half4 fragColor = image.eval(uv * screen.y * ${pd});
-
-    if (isFixed == 1) {
-        // Draw the outline of the glass
-        if (magnifier_dist < 0.102)
-            fragColor = half4(0.01, 0.01, 0.01, 1);
-    
-        // Draw a zoomed-in version of the texture
-        if (magnifier_dist < 0.1)
-            fragColor = image.eval((touch_uv - ((magnifier_uv - uv) * zoomLevel)) * screen.y * ${pd});
-    } else {
-        // Draw the outline of the glass
-        if (touch_dist < 0.102)
-            fragColor = half4(0.01, 0.01, 0.01, 1);
-    
-        // Draw a zoomed-in version of the texture
-        if (touch_dist < 0.1)
-            fragColor = image.eval((uv + (touch_uv - uv) * (1 - zoomLevel)) * screen.y * ${pd});
-    }
-
-    return fragColor;
-}`)!;
-
-export const MagnifyingGlass = () => {
-  const canvasWidth = useSharedValue(0);
-  const canvasHeight = useSharedValue(0);
-
-  const drawing = useSharedValue(0);
-  const touchPosX = useSharedValue(0);
-  const touchPosY = useSharedValue(0);
-
-  // 1 means no zoom and 0 max
-  const zoomLevel = useSharedValue(0.4);
-
-  const [isFixed, setIsFixed] = useState(true);
-  const isFixedSharedValue = useSharedValue(1);
-
-  const image = useImage(require("../../assets/oslo2.jpg"));
-
-  const onTouch = useTouchHandler({
-    onStart: ({ x, y }) => {
-      touchPosX.value = x;
-      touchPosY.value = y;
-      drawing.value = 1;
-    },
-    onActive: ({ x, y }) => {
-      touchPosX.value = x;
-      touchPosY.value = y;
-    },
-    onEnd: () => {
-      drawing.value = 0;
-    },
-  });
-
-  const uniforms = useDerivedValue(() => {
-    return {
-      screen: vec(canvasWidth.value, canvasHeight.value),
-      touchPos: vec(touchPosX.value, touchPosY.value),
-      drawing: drawing.value,
-      zoomLevel: zoomLevel.value,
-      isFixed: isFixedSharedValue.value,
-    };
-  }, [drawing, canvasWidth, canvasHeight, zoomLevel, isFixedSharedValue]);
-
-  if (!image) {
-    return (
-      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
-        <Text>Loading image...</Text>
-      </View>
-    );
-  }
-
-  const handleCanvasLayoutChange = (event: LayoutChangeEvent) => {
-    canvasWidth.value = event.nativeEvent.layout.width;
-    canvasHeight.value = event.nativeEvent.layout.height;
-  };
-
-  return (
-    <View style={{ flex: 1, flexDirection: "column-reverse" }}>
-      <Canvas
-        style={StyleSheet.absoluteFill}
-        mode="continuous"
-        onTouch={onTouch}
-        onLayout={handleCanvasLayoutChange}
-      >
-        <Group transform={[{ scale: 1 / pd }]}>
-          <Group
-            layer={
-              <Paint>
-                <RuntimeShader source={source} uniforms={uniforms} />
-              </Paint>
-            }
-            transform={[{ scale: pd }]}
-          >
-            <Image
-              image={image}
-              fit="cover"
-              x={0}
-              y={0}
-              width={canvasWidth}
-              height={canvasHeight}
-            />
-          </Group>
-        </Group>
-      </Canvas>
-      <View
-        style={{
-          height: 60,
-          flexDirection: "row",
-          justifyContent: "space-evenly",
-          alignItems: "center",
-          backgroundColor: "black",
-        }}
-      >
-        <Slider
-          initialValue={0.5}
-          minValue={1}
-          maxValue={0}
-          onValueChange={(value) => (zoomLevel.value = value)}
-        />
-        <Button
-          title={isFixed ? "Fixed" : "Following"}
-          onPress={() => {
-            setIsFixed((prev) => {
-              isFixedSharedValue.value = !prev ? 1 : 0;
-              return !prev;
-            });
-          }}
-        />
-      </View>
-    </View>
-  );
-};
diff --git a/example/src/Examples/MagnifyingGlass/index.tsx b/example/src/Examples/MagnifyingGlass/index.tsx
deleted file mode 100644
index 7fa2064a2d..0000000000
--- a/example/src/Examples/MagnifyingGlass/index.tsx
+++ /dev/null
@@ -1 +0,0 @@
-export { MagnifyingGlass } from "./MagnifyingGlass";
diff --git a/example/src/Examples/SpeedTest/Slider.tsx b/example/src/Examples/SpeedTest/Slider.tsx
index 66b1fa1431..9e1e1afc49 100644
--- a/example/src/Examples/SpeedTest/Slider.tsx
+++ b/example/src/Examples/SpeedTest/Slider.tsx
@@ -14,7 +14,6 @@ interface Props {
   onValueChange: (value: number) => void;
   minValue: number;
   maxValue: number;
-  initialValue?: number;
 }
 
 const size = 32;
@@ -28,7 +27,6 @@ export const Slider: React.FC<Props> = ({
   onValueChange,
   minValue,
   maxValue,
-  initialValue = minValue,
 }) => {
   const { width } = useWindowDimensions();
 
@@ -36,13 +34,7 @@ export const Slider: React.FC<Props> = ({
   const pickerR = size / 2;
   const progressBarHeight = 3;
 
-  const initialTranslateX = interpolate(
-    initialValue,
-    [minValue, maxValue],
-    [-pickerR, sliderWidth - pickerR]
-  );
-
-  const translateX = useSharedValue(initialTranslateX);
+  const translateX = useSharedValue(-pickerR);
   const contextX = useSharedValue(0);
   const scale = useSharedValue(1);
 
diff --git a/example/src/Examples/index.ts b/example/src/Examples/index.ts
index 2285ac8dcf..024a807cae 100644
--- a/example/src/Examples/index.ts
+++ b/example/src/Examples/index.ts
@@ -2,7 +2,6 @@ export * from "./Reanimated";
 export * from "./API";
 export * from "./Breathe";
 export * from "./Filters";
-export * from "./MagnifyingGlass";
 export * from "./Gooey";
 export * from "./Matrix";
 export * from "./Graphs";
diff --git a/example/src/Home/HomeScreen.tsx b/example/src/Home/HomeScreen.tsx
index bc9dc5020b..a96f939d12 100644
--- a/example/src/Home/HomeScreen.tsx
+++ b/example/src/Home/HomeScreen.tsx
@@ -27,11 +27,6 @@ export const HomeScreen = () => {
         description="Simple Image Filters"
         route="Filters"
       />
-      <HomeScreenButton
-        title="🔍 Magnifying Glass"
-        description="Magnifying glass filter"
-        route="MagnifyingGlass"
-      />
       <HomeScreenButton
         title="🟣 Gooey Effect"
         description="Simple Gooey effect"
diff --git a/example/src/types.ts b/example/src/types.ts
index ad3db638c0..08ffe4268e 100644
--- a/example/src/types.ts
+++ b/example/src/types.ts
@@ -8,7 +8,6 @@ export type StackParamList = {
   API: undefined;
   Breathe: undefined;
   Filters: undefined;
-  MagnifyingGlass: undefined;
   Gooey: undefined;
   Hue: undefined;
   Matrix: undefined;