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

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

import { Flex, Image, Pressable, View } 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 { 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 },
            ],
        };
    });


    return (
        <View
            // height={viewSize.height}
            width={viewSize.width}
            // @ts-ignore
            style={
                fullScreenMode ? {
                    position: "absolute",
                    top: -230,
                    left: 0,
                    zIndex: 1000,
                    backgroundColor: "white",
                }
                    :
                    {
                        overflow: "hidden",
                    }
            }
            borderColor={fullScreenMode ? "light.300" : undefined}
            borderRadius={fullScreenMode ? 10 : 0}
            borderWidth={fullScreenMode ? 0 : 1}
        >
            {/* control panel */}
            <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>

            <PinchGestureHandler
                ref={pinchRef}
                // @ts-ignore
                onGestureEvent={onGestureEvent}
                simultaneousHandlers={[panRef]}>
                <Animated.View style={[{ flex: 1 }, animatedStyle]}>
                    <PanGestureHandler
                        ref={panRef}
                        simultaneousHandlers={[pinchRef]}
                        onGestureEvent={onPanEvent}
                        onHandlerStateChange={(nativeEvent: any) => {
                            if (nativeEvent.state === State.END) {
                                console.log(nativeEvent)
                            }
                        }}
                    >
                        <Animated.View style={[{
                            flex: 1,
                        }]}>
                            <Pressable onPress={() => console.log("toggle fullscreen image")}>
                                <Image size={viewSize.width} source={{uri: props.imageUri}} resizeMode={"contain"} />
                            </Pressable>
                        </Animated.View>
                    </PanGestureHandler>
                </Animated.View>
            </PinchGestureHandler >
        </View >
    )

}