aswi2023one-team-to-rule-them-all-gitlab/src/components/plan/CastlePlanView.tsx @ 8d384539

import { Box } from 'native-base';
import React, { useRef } from 'react';
import { StyleSheet, Dimensions } from 'react-native';
import { PinchGestureHandler } from 'react-native-gesture-handler';
import Animated, {
    useAnimatedGestureHandler,
    useAnimatedStyle,
    useSharedValue,
} from 'react-native-reanimated';
import { PlanImage } from '../../types/plan';
import { Room } from '../../types/searchFormTypes';
import Svg, { SvgXml } from 'react-native-svg';

const CastlePlanView = (props: { mapImage: PlanImage, selectedRoom?: Room }) => {
    const { mapImage } = props;

    const svgRef = useRef<React.ReactElement>();

    const translateX = useSharedValue(0);
    const translateY = useSharedValue(0);
    const scale = useSharedValue(1);

    console.log(mapImage.svg.substring(0,500))

    const DEFAULT_SCALE = 0
    const MIN_SCALE = 0.95

    const onGestureEvent = useAnimatedGestureHandler({
        onActive: (event: any) => {
            
            // handle one finger -> drag
            if (event.numberOfPointers === 1) {
            
            }
            // handle two fingers -> zoom  + - 
            else if (event.numberOfPointers === 2) {

                if(event.scale < MIN_SCALE){
                    console.log("tohle je moc")
                    scale.value = MIN_SCALE
                }
                else{
                    scale.value = event.scale;
                }

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

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

    return (
        // container
        <Box width="100%" height={370} style={{ borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }}>
            <PinchGestureHandler onGestureEvent={onGestureEvent} simultaneousHandlers={svgRef}>
                <Animated.View style={[{
                    flex: 1,
                }, animatedStyle]}>
                    <Svg
                        ref={(ref: any) => (svgRef.current = ref)}

                    >
                        {mapImage && mapImage.viewBox &&
                            // background image                    
                            <SvgXml
                                xml={mapImage.svg}
                                width={"100%"}
                                height={"100%"}

                            />}

                    </Svg>
                </Animated.View>
            </PinchGestureHandler>
        </Box>
    );
};

export default CastlePlanView;