Skip to content

Commit 06474a0

Browse files
dev-chiefdev-chief
committed
Merge branch 'features/fix-draw-android'
2 parents c970741 + a63f5d5 commit 06474a0

File tree

5 files changed

+206
-226
lines changed

5 files changed

+206
-226
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,7 @@
139139
"dependencies": {
140140
"geolib": "^3.3.1",
141141
"invariant": "^2.2.4",
142+
"react-native-gesture-handler": "^1.10.3",
142143
"react-native-maps": "^0.28.0",
143144
"react-native-reanimated": "2.1.0",
144145
"react-native-svg": "^12.1.1"

‎src/canvas/canvas.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,17 @@ import type { ICanvasProps } from './types';
44
import React, { FC } from 'react';
55

66
const Canvas: FC<ICanvasProps> = ({ path, colorLine, widthLine, fillColorCanvas }) => {
7-
const { width, height } = useWindowDimensions();
8-
return (
9-
<Svg height="100%" width="100%" viewBox={`0 0 ${width} ${height}`}>
10-
<Polyline
11-
fill={fillColorCanvas}
12-
stroke={colorLine}
13-
points={path}
14-
strokeWidth={widthLine}
15-
/>
16-
</Svg>
17-
);
7+
const { width, height } = useWindowDimensions();
8+
return (
9+
<Svg height="100%" width="100%" viewBox={`0 0 ${width} ${height}`}>
10+
<Polyline
11+
fill={fillColorCanvas}
12+
stroke={colorLine}
13+
points={path}
14+
strokeWidth={widthLine}
15+
/>
16+
</Svg>
17+
);
1818
};
1919

2020
export default Canvas;

‎src/gesture/gesture-responder.tsx‎

Lines changed: 33 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -2,66 +2,45 @@ import React, { FC, useRef } from 'react';
22
import { PanResponder, StyleSheet, View } from 'react-native';
33
import type { TouchPoint } from '../types';
44
import type { IGestureProps } from './types';
5-
/**
6-
* PanResponder & native event descriptions
7-
* NATIVE_EVENT
8-
* - changedTouches - Array of all touch events that have changed since the last event
9-
* - identifier - The ID of the touch
10-
* - locationX - The X position of the touch, relative to the element
11-
* - locationY - The Y position of the touch, relative to the element
12-
* - pageX - The X position of the touch, relative to the root element
13-
* - pageY - The Y position of the touch, relative to the root element
14-
* - target - The node id of the element receiving the touch event
15-
* - timestamp - A time identifier for the touch, useful for velocity calculation
16-
* - touches - Array of all current touches on the screen
17-
*
18-
* GESTURE_STATE
19-
* - stateID - ID of the gestureState- persisted as long as there at least one touch on screen
20-
* - moveX - the latest screen coordinates of the recently-moved touch
21-
* - moveY - the latest screen coordinates of the recently-moved touch
22-
* - x0 - the screen coordinates of the responder grant
23-
* - y0 - the screen coordinates of the responder grant
24-
* - dx - accumulated distance of the gesture since the touch started
25-
* - dy - accumulated distance of the gesture since the touch started
26-
* - vx - current velocity of the gesture
27-
* - vy - current velocity of the gesture
28-
* - numberActiveTouches - Number of touches currently on screen
29-
*/
305

316
const GestureHandler: FC<IGestureProps> = ({
32-
onEndTouchEvents,
33-
onStartTouchEvents,
34-
onChangeTouchEvents,
7+
onEndTouchEvents,
8+
onStartTouchEvents,
9+
onChangeTouchEvents,
3510
}) => {
36-
const pathRef = useRef<TouchPoint[]>([]);
11+
const pathRef = useRef<TouchPoint[]>([]);
3712

38-
const panResponder = useRef(
39-
PanResponder.create({
40-
onStartShouldSetPanResponder: () => true,
41-
onStartShouldSetPanResponderCapture: () => true,
42-
onMoveShouldSetPanResponder: () => true,
43-
onMoveShouldSetPanResponderCapture: () => true,
13+
const panResponder = PanResponder.create({
14+
onStartShouldSetPanResponder: () => true,
15+
onStartShouldSetPanResponderCapture: () => true,
16+
onMoveShouldSetPanResponder: () => true,
17+
onMoveShouldSetPanResponderCapture: () => true,
4418

45-
onPanResponderGrant: (e, gestureState) => {
46-
pathRef.current = [];
47-
onStartTouchEvents && onStartTouchEvents(e, gestureState);
48-
},
49-
onPanResponderMove: (event) => {
50-
pathRef.current.push({
51-
x: event.nativeEvent.locationX,
52-
y: event.nativeEvent.locationY,
53-
});
54-
onChangeTouchEvents([...pathRef.current]);
55-
},
56-
onPanResponderRelease: () => {
57-
const points = [...pathRef.current];
58-
onChangeTouchEvents(points);
59-
onEndTouchEvents && onEndTouchEvents(points);
60-
},
61-
})
62-
).current;
19+
onPanResponderGrant: (e, gestureState) => {
20+
pathRef.current = [];
21+
onStartTouchEvents?.(e, gestureState);
22+
},
23+
onPanResponderMove: (event) => {
24+
pathRef.current.push({
25+
x: event.nativeEvent.locationX,
26+
y: event.nativeEvent.locationY,
27+
});
28+
onChangeTouchEvents?.([...pathRef.current]);
29+
},
30+
onPanResponderRelease: () => {
31+
const points = [...pathRef.current];
32+
onChangeTouchEvents(points);
6333

64-
return <View style={StyleSheet.absoluteFill} {...panResponder.panHandlers} />;
34+
onEndTouchEvents?.(points);
35+
},
36+
});
37+
38+
return (
39+
<View
40+
style={{ ...StyleSheet.absoluteFill, ...{ backgroundColor: 'transparent' } }}
41+
{...panResponder.panHandlers}
42+
/>
43+
);
6544
};
6645

6746
export default GestureHandler;

‎src/maps/maps.tsx‎

Lines changed: 119 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -5,140 +5,140 @@ import { Canvas } from '../canvas';
55
import { GestureHandler } from '../gesture';
66
import type { IMapProps } from './types';
77
import {
8-
DEFAULT_ACTIVE_COLOR_LINE_WIDTH,
9-
DEFAULT_FILL_BACKGROUND_CANVAS,
10-
DEFAULT_BACKGROUND_VIEW_CANVAS,
11-
DEFAULT_INDEX_INITIAL_LAT_LNG,
12-
DEFAULT_CREATED_NEW_POLYGON,
13-
DEFAULT_ACTIVE_COLOR_LINE,
14-
DEFAULT_UNIT_DISTANCE,
15-
DEFAULT_DRAW_MODE,
8+
DEFAULT_ACTIVE_COLOR_LINE_WIDTH,
9+
DEFAULT_FILL_BACKGROUND_CANVAS,
10+
DEFAULT_BACKGROUND_VIEW_CANVAS,
11+
DEFAULT_INDEX_INITIAL_LAT_LNG,
12+
DEFAULT_CREATED_NEW_POLYGON,
13+
DEFAULT_ACTIVE_COLOR_LINE,
14+
DEFAULT_UNIT_DISTANCE,
15+
DEFAULT_DRAW_MODE,
1616
} from './contstant';
1717
import * as _GEO from 'geolib';
1818
import type { ILocationProps } from './types';
1919
import useValidator from '../hooks/use-validator';
2020

2121
export default forwardRef<MapView, IMapProps>((props, ref) => {
22-
useValidator(props);
23-
const {
24-
points,
25-
children,
26-
colorLine = DEFAULT_ACTIVE_COLOR_LINE,
27-
widthLine = DEFAULT_ACTIVE_COLOR_LINE_WIDTH,
28-
onEndDraw,
29-
isDrawMode = DEFAULT_DRAW_MODE,
30-
renderPath,
31-
onStartDraw,
32-
unitDistance = DEFAULT_UNIT_DISTANCE,
33-
onChangePoints,
34-
createdPolygon = DEFAULT_CREATED_NEW_POLYGON,
35-
fillColorCanvas = DEFAULT_FILL_BACKGROUND_CANVAS,
36-
styleViewGesture,
37-
backgroundCanvas = DEFAULT_BACKGROUND_VIEW_CANVAS,
38-
...rest
39-
} = props;
40-
const internalRef = useRef<MapView>(null);
41-
const mapRef = (ref as RefObject<MapView>) || internalRef;
22+
useValidator(props);
23+
const {
24+
points,
25+
children,
26+
colorLine = DEFAULT_ACTIVE_COLOR_LINE,
27+
widthLine = DEFAULT_ACTIVE_COLOR_LINE_WIDTH,
28+
onEndDraw,
29+
isDrawMode = DEFAULT_DRAW_MODE,
30+
renderPath,
31+
onStartDraw,
32+
unitDistance = DEFAULT_UNIT_DISTANCE,
33+
onChangePoints,
34+
createdPolygon = DEFAULT_CREATED_NEW_POLYGON,
35+
fillColorCanvas = DEFAULT_FILL_BACKGROUND_CANVAS,
36+
styleViewGesture,
37+
backgroundCanvas = DEFAULT_BACKGROUND_VIEW_CANVAS,
38+
...rest
39+
} = props;
40+
const internalRef = useRef<MapView>(null);
41+
const mapRef = (ref as RefObject<MapView>) || internalRef;
4242

43-
const containerStyle = useMemo(
44-
() => [
45-
{ zIndex: 1, backgroundColor: backgroundCanvas },
46-
StyleSheet.absoluteFill,
47-
styleViewGesture,
48-
],
49-
[backgroundCanvas, styleViewGesture]
50-
);
43+
const containerStyle = useMemo(
44+
() => [
45+
{ zIndex: 1, backgroundColor: backgroundCanvas },
46+
StyleSheet.absoluteFill,
47+
styleViewGesture,
48+
],
49+
[backgroundCanvas, styleViewGesture],
50+
);
51+
52+
const path = useMemo(
53+
() => points.map((item) => `${item.x},${item.y}`).join(' '),
54+
[points],
55+
);
56+
57+
const calculatedCenterPolygon = (coordinates: ILocationProps[]) =>
58+
Promise.resolve(_GEO.getCenter(coordinates));
59+
60+
const convertPointToCoordinates = useCallback(
61+
(polygons) => {
62+
if (polygons && polygons.length > 0) {
63+
calculatedCenterPolygon(polygons).then((centerLatLng) => {
64+
if (onEndDraw && centerLatLng) {
65+
const distance = _GEO.convertDistance(
66+
_GEO.getPathLength(polygons),
67+
unitDistance,
68+
);
69+
const initialLatLng = polygons[DEFAULT_INDEX_INITIAL_LAT_LNG];
70+
const lastLatLng = polygons[polygons.length - 1];
71+
onEndDraw({
72+
polygons,
73+
distance,
74+
centerLatLng,
75+
initialLatLng,
76+
lastLatLng,
77+
});
78+
}
79+
});
80+
}
81+
},
82+
[onEndDraw, unitDistance],
83+
);
5184

52-
const path = useMemo(
53-
() => points.map((item) => `${item.x},${item.y}`).join(' '),
54-
[points]
55-
);
85+
const convertByPoint = useCallback(
86+
async (item) => await mapRef.current?.coordinateForPoint(item),
87+
[mapRef],
88+
);
5689

57-
const calculatedCenterPolygon = (coordinates: ILocationProps[]) =>
58-
Promise.resolve(_GEO.getCenter(coordinates));
90+
const handleEndDraw = useCallback(
91+
async (data) => {
92+
await Promise.all(data.map(convertByPoint)).then(convertPointToCoordinates);
93+
},
94+
[convertByPoint, convertPointToCoordinates],
95+
);
5996

60-
const convertPointToCoordinates = useCallback(
61-
(polygons) => {
62-
if (polygons && polygons.length > 0) {
63-
calculatedCenterPolygon(polygons).then((centerLatLng) => {
64-
if (onEndDraw && centerLatLng) {
65-
const distance = _GEO.convertDistance(
66-
_GEO.getPathLength(polygons),
67-
unitDistance
68-
);
69-
const initialLatLng = polygons[DEFAULT_INDEX_INITIAL_LAT_LNG];
70-
const lastLatLng = polygons[polygons.length - 1];
71-
onEndDraw({
72-
polygons,
73-
distance,
74-
centerLatLng,
75-
initialLatLng,
76-
lastLatLng,
77-
});
78-
}
79-
});
80-
}
81-
},
82-
[onEndDraw, unitDistance]
83-
);
97+
const hasCanvas = useMemo(() => {
98+
return (
99+
<View style={containerStyle}>
100+
<>
101+
{renderPath ? (
102+
renderPath(path)
103+
) : (
104+
<Canvas
105+
path={path}
106+
widthLine={widthLine}
107+
colorLine={colorLine}
108+
fillColorCanvas={fillColorCanvas}
109+
/>
110+
)}
84111

85-
const convertByPoint = useCallback(
86-
async (item) => await mapRef.current?.coordinateForPoint(item),
87-
[mapRef]
88-
);
112+
<GestureHandler
113+
onEndTouchEvents={handleEndDraw}
114+
onStartTouchEvents={onStartDraw}
115+
onChangeTouchEvents={onChangePoints}
116+
/>
117+
</>
118+
</View>
119+
);
120+
}, [
121+
path,
122+
widthLine,
123+
colorLine,
124+
renderPath,
125+
onStartDraw,
126+
handleEndDraw,
127+
containerStyle,
128+
onChangePoints,
129+
fillColorCanvas,
130+
]);
89131

90-
const handleEndDraw = useCallback(
91-
async (data) => {
92-
await Promise.all(data.map(convertByPoint)).then(convertPointToCoordinates);
93-
},
94-
[convertByPoint, convertPointToCoordinates]
95-
);
132+
const hasMap = (
133+
<MapView scrollEnabled={!isDrawMode} ref={mapRef} {...rest}>
134+
{children}
135+
</MapView>
136+
);
96137

97-
const hasCanvas = useMemo(() => {
98138
return (
99-
<View style={containerStyle}>
100139
<>
101-
{renderPath ? (
102-
renderPath(path)
103-
) : (
104-
<Canvas
105-
path={path}
106-
widthLine={widthLine}
107-
colorLine={colorLine}
108-
fillColorCanvas={fillColorCanvas}
109-
/>
110-
)}
111-
112-
<GestureHandler
113-
onEndTouchEvents={handleEndDraw}
114-
onStartTouchEvents={onStartDraw}
115-
onChangeTouchEvents={onChangePoints}
116-
/>
140+
{hasMap}
141+
{!createdPolygon && hasCanvas}
117142
</>
118-
</View>
119143
);
120-
}, [
121-
path,
122-
widthLine,
123-
colorLine,
124-
renderPath,
125-
onStartDraw,
126-
handleEndDraw,
127-
containerStyle,
128-
onChangePoints,
129-
fillColorCanvas,
130-
]);
131-
132-
const hasMap = (
133-
<MapView scrollEnabled={!isDrawMode} ref={mapRef} {...rest}>
134-
{children}
135-
</MapView>
136-
);
137-
138-
return (
139-
<>
140-
{!createdPolygon && hasCanvas}
141-
{hasMap}
142-
</>
143-
);
144144
});

0 commit comments

Comments
 (0)