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;