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;
|