aswi2023one-team-to-rule-them-all-gitlab/src/components/item/ZoomableImage.tsx @ 6020775f

import React, { useState, useEffect, useRef } from "react";

import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay } from "native-base"
import { PinchGestureHandler, PanGestureHandler, State } from "react-native-gesture-handler";
import Animated, { useAnimatedGestureHandler, useAnimatedStyle, useSharedValue } from "react-native-reanimated";
import Svg, { SvgXml, Path } from "react-native-svg";
import { FullscreenIcon, ExitfullscreenIcon } from "../general/Icons";
import { Button, Dimensions } from "react-native";

export const ZoomableImage = (props: { size: number, imageUri: string, fullScreen?: boolean }) => {
    const DEFAULT_SCALE = 1
    const MIN_SCALE = 0.95

    const [fullScreenMode, setFullScreenMode] = useState<boolean>(false);
    const [viewSize, setViewSize] = useState({ height: 0, width: 0 });

    const panRef = useRef<React.ReactElement>();
    const pinchRef = useRef<React.ReactElement>();


    useEffect(() => {
        if (props.fullScreen != undefined) {
            setFullScreenMode(props.fullScreen)
        }
    }, [props.fullScreen])

    useEffect(() => {
        setViewSize({
            width: fullScreenMode ?
                Dimensions.get('window').width - 20 : // full screen
                Dimensions.get('window').width - 20, // not full screen
            height: fullScreenMode ?
                Dimensions.get('window').height - 122.5 : // full scren
                Dimensions.get('window').height - 350, // not full screen
        })
    }, [fullScreenMode])
    const translateX = useSharedValue(0);
    const translateY = useSharedValue(0);
    const scale = useSharedValue(DEFAULT_SCALE);

    const onPanEvent = useAnimatedGestureHandler({
        // handle one finger -> drag / move
        onStart: (event, ctx: any) => {
            if (event.numberOfPointers === 1) {
                ctx.startX = translateX.value;
                ctx.startY = translateY.value;
            }
        },
        onActive: (event, ctx: any) => {
            if (event.numberOfPointers === 1) {
                translateX.value = ctx.startX + event.translationX;
                translateY.value = ctx.startY + event.translationY;

                console.log("xTranslate " + translateX.value + " yTranslate " + translateY.value)
            }
        },
    });

    const onGestureEvent = useAnimatedGestureHandler({
        onStart: (_, ctx: any) => {
            ctx.startScale = scale.value;
        },
        onActive: (event: any, ctx: any) => {
            // handle two fingers -> zoom + -
            if (event.numberOfPointers === 2) {
                scale.value = ctx.startScale * event.scale;
            }
        },
        onEnd: (event) => {
            // handle two fingers -> zoom + -
            if (event.numberOfPointers === 2) {
                if (scale.value < MIN_SCALE) {
                    scale.value = MIN_SCALE;
                }
                // You may add additional logic for maximum scale if needed

                console.log("scale")
                console.log(scale.value)
            }
        },
    });

    const animatedStyle = useAnimatedStyle(() => {
        return {
            transform: [
                { translateX: translateX.value },
                { translateY: translateY.value },
                { scale: scale.value },
            ],
        };
    });


    console.log(viewSize)
    console.log(fullScreenMode)
    return (
        <View>
            <Pressable onPress={() => setFullScreenMode(true)}>
                <Image size={viewSize.width} source={{ uri: props.imageUri }} alt="image" resizeMode={"contain"} />
            </Pressable>

            <Modal isOpen={fullScreenMode} onClose={() => setFullScreenMode(false)} size="full">
                <Box
                    flex={1}
                    justifyContent="center"
                    alignItems="center"
                    backgroundColor="transparent" // Make the background transparent
                >
                    <Pressable
                        position="absolute"
                        bottom={20}
                        right={0}
                        padding={2}
                        zIndex={1000}
                        onPress={() => setFullScreenMode(false)}
                    >
                        {/* Your close button (you can replace this with an icon) */}
                        <Box style={{width: 70, height: 30, backgroundColor:"white", borderRadius: 10}} alignItems={"center"} justifyContent="center">
                            <Text>Close</Text>
                        </Box>
                    </Pressable>
                    <Image
                        height={viewSize.height}
                        width={viewSize.width}
                        alt="image"
                        source={{ uri: props.imageUri }}
                        resizeMode={"contain"}
                    />
                </Box>
            </Modal>
        </View>
        // <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, top: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
        //     {
        //         fullScreenMode &&
        //         <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
        //             <FullscreenIcon color="white" />
        //         </Pressable>
        //     }

        // </Flex>
    )

}