Projekt

Obecné

Profil

Stáhnout (3.76 KB) Statistiky
| Větev: | Tag: | Revize:
1 8d384539 Fantič
import { Box } from 'native-base';
2
import React, { useRef } from 'react';
3
import { StyleSheet, Dimensions } from 'react-native';
4 28ab969f Fantič
import { PanGestureHandler, PinchGestureHandler } from 'react-native-gesture-handler';
5 8d384539 Fantič
import Animated, {
6
    useAnimatedGestureHandler,
7
    useAnimatedStyle,
8
    useSharedValue,
9
} from 'react-native-reanimated';
10 28ab969f Fantič
import { PlanImage, Room } from '../../types/plan';
11 8d384539 Fantič
import Svg, { SvgXml } from 'react-native-svg';
12 aac857cf Fantič
13 28ab969f Fantič
const CastlePlanView = (props: { mapImage: PlanImage, roomList: Room[], selectedRoom?: Room }) => {
14 8d384539 Fantič
15 28ab969f Fantič
    const DEFAULT_SCALE = 1
16
    const MIN_SCALE = 0.95
17
18
    const MAP_VIEW_SIZE = {
19
        height : 400,
20
        width : "100%"
21
    }
22
23
    const { mapImage, roomList, selectedRoom } = props;
24
25
    const panRef = useRef<React.ReactElement>();
26
    const pinchRef = useRef<React.ReactElement>();
27 8d384539 Fantič
    const svgRef = useRef<React.ReactElement>();
28
29
    const translateX = useSharedValue(0);
30
    const translateY = useSharedValue(0);
31 28ab969f Fantič
    const scale = useSharedValue(DEFAULT_SCALE);
32 8d384539 Fantič
33 28ab969f Fantič
    console.log(mapImage.svg.substring(0, 500))
34 8d384539 Fantič
35 28ab969f Fantič
    const onPanEvent = useAnimatedGestureHandler({
36
        // handle one finger -> drag / move
37
        onStart: (_, ctx: any) => {
38
            ctx.startX = translateX.value;
39
            ctx.startY = translateY.value;
40
        },
41
        onActive: (event, ctx: any) => {
42
            translateX.value = ctx.startX + event.translationX;
43
            translateY.value = ctx.startY + event.translationY;
44
        },
45
    });
46 aac857cf Fantič
47 8d384539 Fantič
    const onGestureEvent = useAnimatedGestureHandler({
48
        onActive: (event: any) => {
49
            // handle two fingers -> zoom  + - 
50 28ab969f Fantič
            if (event.numberOfPointers === 2) {
51
                if (event.scale < MIN_SCALE) {
52 8d384539 Fantič
                    scale.value = MIN_SCALE
53
                }
54 28ab969f Fantič
                else {
55 8d384539 Fantič
                    scale.value = event.scale;
56
                }
57
            }
58
        },
59
    });
60 f220395e Fantič
61 8d384539 Fantič
    const animatedStyle = useAnimatedStyle(() => {
62
        return {
63
            transform: [
64
                { translateX: translateX.value },
65
                { translateY: translateY.value },
66
                { scale: scale.value },
67
            ],
68
        };
69
    });
70 aac857cf Fantič
71
    return (
72 8d384539 Fantič
        // container
73 28ab969f Fantič
        <Box width={MAP_VIEW_SIZE.width} height={MAP_VIEW_SIZE.height} style={{ borderColor: "#F5F5F", borderWidth: 1, overflow: "hidden" }}>
74
            <PinchGestureHandler
75
                ref={pinchRef}
76
                // @ts-ignore
77
                onGestureEvent={onGestureEvent}
78
                simultaneousHandlers={[svgRef, panRef]}>
79
                <Animated.View style={{ flex: 1 }}>
80
                    <PanGestureHandler
81
                        ref={panRef}
82
                        simultaneousHandlers={[svgRef, pinchRef]}
83
                        onGestureEvent={onPanEvent}
84 8d384539 Fantič
                    >
85 28ab969f Fantič
                        <Animated.View style={[{
86
                            flex: 1,
87
                        }, animatedStyle]}>
88
                            <Svg
89
                                ref={(ref: any) => (svgRef.current = ref)}
90
                            >
91
                                {mapImage && mapImage.viewBox &&
92
                                    // background image                    
93
                                    <SvgXml
94
                                        xml={mapImage.svg}
95
                                        width={"100%"}
96
                                        height={"100%"}
97 8d384539 Fantič
98 28ab969f Fantič
                                    />}
99
                                {mapImage && roomList && roomList.length > 0 &&
100
                                    <></>}
101 8d384539 Fantič
102 28ab969f Fantič
                            </Svg>
103
                        </Animated.View>
104
                    </PanGestureHandler>
105 8d384539 Fantič
                </Animated.View>
106
            </PinchGestureHandler>
107 aac857cf Fantič
        </Box>
108
    );
109 8d384539 Fantič
};
110
111
export default CastlePlanView;