Projekt

Obecné

Profil

Stáhnout (2.66 KB) Statistiky
| Větev: | Tag: | Revize:
1
import { Box } from 'native-base';
2
import React, { useRef } from 'react';
3
import { StyleSheet, Dimensions } from 'react-native';
4
import { PinchGestureHandler } from 'react-native-gesture-handler';
5
import Animated, {
6
    useAnimatedGestureHandler,
7
    useAnimatedStyle,
8
    useSharedValue,
9
} from 'react-native-reanimated';
10
import { PlanImage } from '../../types/plan';
11
import { Room } from '../../types/searchFormTypes';
12
import Svg, { SvgXml } from 'react-native-svg';
13

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

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

    
19
    const translateX = useSharedValue(0);
20
    const translateY = useSharedValue(0);
21
    const scale = useSharedValue(1);
22

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

    
25
    const DEFAULT_SCALE = 0
26
    const MIN_SCALE = 0.95
27

    
28
    const onGestureEvent = useAnimatedGestureHandler({
29
        onActive: (event: any) => {
30
            
31
            // handle one finger -> drag
32
            if (event.numberOfPointers === 1) {
33
            
34
            }
35
            // handle two fingers -> zoom  + - 
36
            else if (event.numberOfPointers === 2) {
37

    
38
                if(event.scale < MIN_SCALE){
39
                    console.log("tohle je moc")
40
                    scale.value = MIN_SCALE
41
                }
42
                else{
43
                    scale.value = event.scale;
44
                }
45

    
46
                console.log(scale.value)
47
            }
48
        },
49
    });
50

    
51
    const animatedStyle = useAnimatedStyle(() => {
52
        return {
53
            transform: [
54
                { translateX: translateX.value },
55
                { translateY: translateY.value },
56
                { scale: scale.value },
57
            ],
58
        };
59
    });
60

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

    
71
                    >
72
                        {mapImage && mapImage.viewBox &&
73
                            // background image                    
74
                            <SvgXml
75
                                xml={mapImage.svg}
76
                                width={"100%"}
77
                                height={"100%"}
78

    
79
                            />}
80

    
81
                    </Svg>
82
                </Animated.View>
83
            </PinchGestureHandler>
84
        </Box>
85
    );
86
};
87

    
88
export default CastlePlanView;
89

    
    (1-1/1)