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

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

import { Box, Flex, Text, Image, Popover, Pressable, VStack, View, Modal, Overlay, HStack } from "native-base"
import { PinchGestureHandler, PanGestureHandler, State, GestureHandlerRootView } 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 imgRef = useRef<React.ReactElement>();
    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 },
            ],
        };
    });

    const zoomOut = () => {
        translateX.value = 0;
        translateY.value = 0;
        scale.value = DEFAULT_SCALE;
    }

    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">
                <View
                    flex={1}
                    justifyContent="center"
                    alignItems="center"
                    backgroundColor="white" // Make the background transparent
                >
                    <Flex direction="row" alignItems="center" justify="flex-end" style={{ height: 50, width: 100, bottom: fullScreenMode ? 10 : 0, right: fullScreenMode ? 20 : 15, position: "absolute", zIndex: 5 }}>
                        <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={1} onPress={() => { zoomOut()}}>
                            <ExitfullscreenIcon color="white" />
                        </Pressable>
                        <Pressable padding={1.5} backgroundColor={"#654B07"} borderRadius={5} marginRight={-2} onPress={() => setFullScreenMode(false)}>
                            <FullscreenIcon color="white" />
                        </Pressable>

                    </Flex>
                    <GestureHandlerRootView>
                        <PinchGestureHandler
                            ref={pinchRef}
                            // @ts-ignore
                            onGestureEvent={onGestureEvent}
                            simultaneousHandlers={[imgRef, panRef]}>
                            <Animated.View style={[{ flex: 1 }, animatedStyle]}>
                                <PanGestureHandler
                                    ref={panRef}
                                    simultaneousHandlers={[imgRef, pinchRef]}
                                    onGestureEvent={onPanEvent}
                                    onHandlerStateChange={(nativeEvent: any) => {
                                        if (nativeEvent.state === State.END) {
                                            console.log(nativeEvent)
                                        }
                                    }}
                                >
                                    <Animated.View style={[{
                                        flex: 1,
                                    }]}>
                                        <Image
                                            ref={imgRef}
                                            height={viewSize.height}
                                            width={viewSize.width}
                                            alt="image"
                                            source={{ uri: props.imageUri }}
                                            resizeMode={"contain"}
                                        />
                                    </Animated.View>
                                </PanGestureHandler>
                            </Animated.View>
                        </PinchGestureHandler >
                    </GestureHandlerRootView>
                </View>
            </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>
    )

}