|
1 | | -import * as React from 'react'; |
2 | | - |
3 | | -import { StyleSheet, View, Text } from 'react-native'; |
4 | | -import MapsDraw from 'react-native-maps-draw'; |
| 1 | +import React, { useState, useCallback, useRef } from 'react'; |
| 2 | +import { StyleSheet, View, TouchableOpacity, Platform, Text } from 'react-native'; |
| 3 | +import MapView, { ILocationProps, IDrawResult, TouchPoint, Marker } from '../../src'; |
| 4 | +import { MarkerLocation } from './assets'; |
| 5 | +import AnimatedPolygon from './components/polygon'; |
5 | 6 |
|
6 | 7 | export default function App() { |
7 | | - const [result, setResult] = React.useState<number | undefined>(); |
| 8 | + const mapRef = useRef<MapView>(null); |
| 9 | + |
| 10 | + const initialPolygon = useRef({ |
| 11 | + polygons: [], |
| 12 | + distance: 0, |
| 13 | + lastLatLng: undefined, |
| 14 | + initialLatLng: undefined, |
| 15 | + centerLatLng: undefined, |
| 16 | + }); |
| 17 | + |
| 18 | + const [modePolygon, setPolygonCreated] = useState<boolean>(false); |
| 19 | + |
| 20 | + const [isActiveDraw, setDrawMode] = useState<boolean>(false); |
| 21 | + const [isReady, setIsReady] = useState<boolean>(false); |
| 22 | + const [points, setPoints] = useState<TouchPoint[]>([]); |
| 23 | + |
| 24 | + const [polygon, setPolygon] = useState<IDrawResult>(initialPolygon.current); |
| 25 | + |
| 26 | + const handleMapReady = useCallback(() => mapRef.current && setIsReady(true), []); |
8 | 27 |
|
9 | | - React.useEffect(() => { |
10 | | - MapsDraw.multiply(3, 7).then(setResult); |
| 28 | + const handleRemovePolygon = useCallback(() => { |
| 29 | + setPolygon(initialPolygon.current); |
| 30 | + setPolygonCreated(false); |
11 | 31 | }, []); |
12 | 32 |
|
| 33 | + const handleClear = useCallback(() => { |
| 34 | + setPolygon(initialPolygon.current); |
| 35 | + setPolygonCreated(false); |
| 36 | + setPoints([]); |
| 37 | + }, []); |
| 38 | + |
| 39 | + const handleIsDraw = useCallback(() => { |
| 40 | + if (!mapRef.current) return; |
| 41 | + if (!isActiveDraw) { |
| 42 | + zoomOut().then(handleClear); |
| 43 | + } |
| 44 | + setDrawMode((prevMode) => !prevMode); |
| 45 | + }, [handleClear, isActiveDraw]); |
| 46 | + |
| 47 | + const handleCanvasEndDraw = useCallback((locations) => { |
| 48 | + zoomCenterPolygon(locations.centerLatLng).then(() => { |
| 49 | + setPolygon(locations); |
| 50 | + setPolygonCreated(true); |
| 51 | + }); |
| 52 | + setDrawMode((prevMode) => !prevMode); |
| 53 | + }, []); |
| 54 | + |
| 55 | + const zoomCenterPolygon = async (center: ILocationProps) => { |
| 56 | + if (!mapRef.current) return; |
| 57 | + const camera = await mapRef.current.getCamera(); |
| 58 | + if (Platform.OS === 'ios') { |
| 59 | + mapRef.current.animateCamera({ |
| 60 | + center: center, |
| 61 | + // altitude: camera.altitude / 2, |
| 62 | + }); |
| 63 | + } |
| 64 | + if (Platform.OS === 'android') { |
| 65 | + // mapRef.current.animateCamera({ center, zoom: camera.zoom + 1 }); |
| 66 | + } |
| 67 | + }; |
| 68 | + |
| 69 | + const zoomOut = async () => { |
| 70 | + if (!mapRef.current) return false; |
| 71 | + |
| 72 | + const camera = await mapRef.current.getCamera(); |
| 73 | + if (Platform.OS === 'ios') { |
| 74 | + mapRef.current.animateCamera({ altitude: camera.altitude * 1 }); |
| 75 | + } |
| 76 | + |
| 77 | + if (Platform.OS === 'android') { |
| 78 | + mapRef.current.animateCamera({ zoom: camera.zoom - 1 }); |
| 79 | + } |
| 80 | + }; |
| 81 | + |
| 82 | + const hasMarkerClose = polygon.centerLatLng && ( |
| 83 | + <Marker onPress={handleRemovePolygon} coordinate={polygon.centerLatLng}> |
| 84 | + <MarkerLocation /> |
| 85 | + </Marker> |
| 86 | + ); |
| 87 | + |
| 88 | + const handlePolygon = useCallback( |
| 89 | + (item, index) => <AnimatedPolygon key={index} coordinates={polygon.polygons} />, |
| 90 | + [polygon.polygons] |
| 91 | + ); |
| 92 | + |
| 93 | + const onChangePoints = useCallback((value) => { |
| 94 | + setPoints(value); |
| 95 | + }, []); |
| 96 | + |
| 97 | + // |
| 98 | + // const hasOverlay = useMemo(() => { |
| 99 | + // if (renderOverlayPolygon === null) { |
| 100 | + // return null; |
| 101 | + // } |
| 102 | + // |
| 103 | + // return renderOverlayPolygon !== undefined |
| 104 | + // ? renderOverlayPolygon(path) |
| 105 | + // : !!path && ( |
| 106 | + // <OverlayPolygon |
| 107 | + // {...{ |
| 108 | + // path, |
| 109 | + // fillOverlay, |
| 110 | + // widthOverlayLine, |
| 111 | + // colorWidthOverlayLine, |
| 112 | + // backgroundOverlayPolygon, |
| 113 | + // }} |
| 114 | + // /> |
| 115 | + // ); |
| 116 | + // }, [ |
| 117 | + // path, |
| 118 | + // fillOverlay, |
| 119 | + // widthOverlayLine, |
| 120 | + // renderOverlayPolygon, |
| 121 | + // colorWidthOverlayLine, |
| 122 | + // backgroundOverlayPolygon, |
| 123 | + // ]); |
13 | 124 | return ( |
14 | 125 | <View style={styles.container}> |
15 | | - <Text>Result: {result}</Text> |
| 126 | + <MapView |
| 127 | + ref={mapRef} |
| 128 | + style={{ flex: 1 }} |
| 129 | + points={points} |
| 130 | + widthLine={3} |
| 131 | + onEndDraw={handleCanvasEndDraw} |
| 132 | + isDrawMode={isActiveDraw} |
| 133 | + onMapReady={handleMapReady} |
| 134 | + onStartDraw={handleClear} |
| 135 | + createdPolygon={modePolygon} |
| 136 | + onChangePoints={onChangePoints} |
| 137 | + backgroundCanvas={'rgba(0, 0, 0, 0.0)'} |
| 138 | + > |
| 139 | + {isReady && modePolygon && polygon.polygons && polygon.polygons.length > 0 && ( |
| 140 | + <> |
| 141 | + {hasMarkerClose} |
| 142 | + {polygon.polygons.map(handlePolygon)} |
| 143 | + </> |
| 144 | + )} |
| 145 | + </MapView> |
| 146 | + |
| 147 | + <TouchableOpacity style={styles.button} onPress={handleIsDraw}> |
| 148 | + {isActiveDraw ? ( |
| 149 | + <Text style={styles.title}>ON</Text> |
| 150 | + ) : ( |
| 151 | + <Text style={styles.title}>OFF</Text> |
| 152 | + )} |
| 153 | + </TouchableOpacity> |
16 | 154 | </View> |
17 | 155 | ); |
18 | 156 | } |
19 | 157 |
|
20 | 158 | const styles = StyleSheet.create({ |
21 | 159 | container: { |
22 | 160 | flex: 1, |
23 | | - alignItems: 'center', |
24 | | - justifyContent: 'center', |
25 | 161 | }, |
26 | | - box: { |
27 | | - width: 60, |
28 | | - height: 60, |
29 | | - marginVertical: 20, |
| 162 | + button: { |
| 163 | + top: '10%', |
| 164 | + right: '10%', |
| 165 | + position: 'absolute', |
| 166 | + backgroundColor: 'tomato', |
| 167 | + padding: 16, |
| 168 | + zIndex: 4, |
| 169 | + borderRadius: 18, |
| 170 | + }, |
| 171 | + title: { |
| 172 | + color: '#FFFFFF', |
| 173 | + fontSize: 12, |
30 | 174 | }, |
31 | 175 | }); |
0 commit comments