@mint-ui/map 0.4.5-beta → 0.5.0-beta
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +109 -109
- package/LICENSE +21 -21
- package/README.md +73 -73
- package/dist/components/mint-map/MintMap.d.ts +10 -117
- package/dist/components/mint-map/MintMap.js +24 -421
- package/dist/components/mint-map/core/MintMapCanvasRenderer.d.ts +4 -4
- package/dist/components/mint-map/core/MintMapCanvasRenderer.js +3 -1
- package/dist/components/mint-map/core/MintMapController.d.ts +64 -44
- package/dist/components/mint-map/core/MintMapController.js +49 -15
- package/dist/components/mint-map/core/MintMapCore.d.ts +3 -3
- package/dist/components/mint-map/core/MintMapCore.js +22 -10
- package/dist/components/mint-map/core/advanced/MapBuildingProjection.d.ts +15 -15
- package/dist/components/mint-map/core/advanced/MapBuildingProjection.js +11 -7
- package/dist/components/mint-map/core/advanced/MapLoadingComponents.d.ts +17 -0
- package/dist/components/mint-map/core/advanced/MapLoadingComponents.js +257 -0
- package/dist/components/mint-map/core/advanced/index.d.ts +3 -1
- package/dist/components/mint-map/core/advanced/shapes/CircleMarker.d.ts +20 -0
- package/dist/components/mint-map/core/advanced/shapes/CircleMarker.js +137 -0
- package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.d.ts +23 -0
- package/dist/components/mint-map/core/advanced/shapes/PolygonMarker.js +188 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.d.ts +8 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGCircle.js +54 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.d.ts +12 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGPolygon.js +152 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.d.ts +10 -0
- package/dist/components/mint-map/core/advanced/shapes/base/SVGRect.js +60 -0
- package/dist/components/mint-map/core/advanced/shapes/base/index.d.ts +3 -0
- package/dist/components/mint-map/core/advanced/shapes/index.d.ts +3 -0
- package/dist/components/mint-map/core/hooks/MarkerMovingHook.d.ts +6 -6
- package/dist/components/mint-map/core/hooks/MarkerMovingHook.js +21 -9
- package/dist/components/mint-map/core/hooks/index.d.ts +1 -1
- package/dist/components/mint-map/core/index.d.ts +8 -8
- package/dist/components/mint-map/core/provider/MintMapProvider.d.ts +8 -8
- package/dist/components/mint-map/core/provider/index.d.ts +1 -1
- package/dist/components/mint-map/core/util/animation.d.ts +16 -16
- package/dist/components/mint-map/core/util/animation.js +14 -5
- package/dist/components/mint-map/core/util/calculate.d.ts +66 -34
- package/dist/components/mint-map/core/util/calculate.js +233 -27
- package/dist/components/mint-map/core/util/cluster.d.ts +18 -18
- package/dist/components/mint-map/core/util/cluster.js +14 -9
- package/dist/components/mint-map/core/util/index.d.ts +4 -4
- package/dist/components/mint-map/core/util/waiting.d.ts +1 -1
- package/dist/components/mint-map/core/util/waiting.js +6 -2
- package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.d.ts +27 -19
- package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js +9 -0
- package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.d.ts +11 -4
- package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.js +107 -35
- package/dist/components/mint-map/core/wrapper/MapControlWrapper.d.ts +18 -11
- package/dist/components/mint-map/core/wrapper/MapControlWrapper.js +8 -0
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts +32 -23
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +76 -28
- package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.d.ts +12 -5
- package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.js +21 -6
- package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.d.ts +12 -5
- package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js +21 -7
- package/dist/components/mint-map/core/wrapper/index.d.ts +6 -6
- package/dist/components/mint-map/google/GoogleMintMapController.d.ts +51 -39
- package/dist/components/mint-map/google/GoogleMintMapController.js +224 -44
- package/dist/components/mint-map/index.d.ts +5 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +56 -44
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +265 -66
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +53 -42
- package/dist/components/mint-map/naver/NaverMintMapController.js +237 -50
- package/dist/components/mint-map/types/CommonTypes.d.ts +11 -0
- package/dist/components/mint-map/types/MapDrawables.d.ts +110 -0
- package/dist/components/mint-map/types/MapDrawables.js +92 -0
- package/dist/components/mint-map/types/MapEventTypes.d.ts +41 -0
- package/dist/components/mint-map/types/MapEventTypes.js +57 -0
- package/dist/components/mint-map/types/MapTypes.d.ts +60 -0
- package/dist/components/mint-map/types/MapTypes.js +155 -0
- package/dist/components/mint-map/types/MintMapEvents.d.ts +25 -0
- package/dist/components/mint-map/types/MintMapProps.d.ts +92 -0
- package/dist/components/mint-map/types/index.d.ts +6 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.es.js +2638 -975
- package/dist/index.js +25 -9
- package/dist/index.umd.js +2644 -974
- package/package.json +77 -77
- package/test.ts +0 -7
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
var MintMapProvider = require('../../provider/MintMapProvider.js');
|
|
8
|
+
var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
|
|
9
|
+
require('../../../types/MapDrawables.js');
|
|
10
|
+
var MapTypes = require('../../../types/MapTypes.js');
|
|
11
|
+
require('../../../types/MapEventTypes.js');
|
|
12
|
+
var SVGCircle = require('./base/SVGCircle.js');
|
|
13
|
+
require('../../util/animation.js');
|
|
14
|
+
var calculate = require('../../util/calculate.js');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* CircleMarker
|
|
22
|
+
*
|
|
23
|
+
* @param {CircleMarkerProps} CircleMarkerProps
|
|
24
|
+
*
|
|
25
|
+
* @returns {JSX.Element} JSX
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
function CircleMarker(_a) {
|
|
29
|
+
var children = _a.children,
|
|
30
|
+
center = _a.center,
|
|
31
|
+
radius = _a.radius,
|
|
32
|
+
_b = _a.radiusUnit,
|
|
33
|
+
radiusUnit = _b === void 0 ? 'PIXEL' : _b,
|
|
34
|
+
_c = _a.background,
|
|
35
|
+
background = _c === void 0 ? 'lightgreen' : _c,
|
|
36
|
+
_d = _a.svgProperties,
|
|
37
|
+
svgProperties = _d === void 0 ? {} : _d,
|
|
38
|
+
_e = _a.shapeProperties,
|
|
39
|
+
shapeProperties = _e === void 0 ? {} : _e,
|
|
40
|
+
_f = _a.visible,
|
|
41
|
+
visible = _f === void 0 ? true : _f,
|
|
42
|
+
zIndex = _a.zIndex; //controller
|
|
43
|
+
|
|
44
|
+
var controller = MintMapProvider.useMintMapController(); //zoom start event
|
|
45
|
+
|
|
46
|
+
var onZoomStart = React.useCallback(function () {
|
|
47
|
+
setMapVisible(false);
|
|
48
|
+
}, []); //idle event
|
|
49
|
+
|
|
50
|
+
var onIdle = React.useCallback(function () {
|
|
51
|
+
var newZoomLevel = controller.getZoomLevel();
|
|
52
|
+
|
|
53
|
+
if (zoomLevel.current !== newZoomLevel) {
|
|
54
|
+
zoomLevel.current = newZoomLevel;
|
|
55
|
+
renderCircleBase();
|
|
56
|
+
setTimeout(function () {
|
|
57
|
+
setMapVisible(true);
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
}, []);
|
|
61
|
+
var zoomLevel = React.useRef(controller.getZoomLevel());
|
|
62
|
+
React.useEffect(function () {
|
|
63
|
+
controller.addEventListener("ZOOMSTART", onZoomStart);
|
|
64
|
+
controller.addEventListener("IDLE", onIdle);
|
|
65
|
+
return function () {
|
|
66
|
+
controller.removeEventListener("ZOOMSTART", onZoomStart);
|
|
67
|
+
controller.removeEventListener("IDLE", onIdle);
|
|
68
|
+
};
|
|
69
|
+
}, []); //offsets
|
|
70
|
+
|
|
71
|
+
var _g = React.useState(),
|
|
72
|
+
computedRadius = _g[0],
|
|
73
|
+
setComputedRadius = _g[1];
|
|
74
|
+
|
|
75
|
+
var _h = React.useState(new MapTypes.Offset(0, 0)),
|
|
76
|
+
anchor = _h[0],
|
|
77
|
+
setAnchor = _h[1]; //circle props ref
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
var circlePropsRef = React.useRef({
|
|
81
|
+
center: center,
|
|
82
|
+
radius: radius,
|
|
83
|
+
radiusUnit: radiusUnit
|
|
84
|
+
}); //circle 생성 effect
|
|
85
|
+
|
|
86
|
+
React.useEffect(function () {
|
|
87
|
+
circlePropsRef.current = {
|
|
88
|
+
center: center,
|
|
89
|
+
radius: radius,
|
|
90
|
+
radiusUnit: radiusUnit
|
|
91
|
+
};
|
|
92
|
+
renderCircleBase();
|
|
93
|
+
}, [center, radius, radiusUnit]); //render
|
|
94
|
+
|
|
95
|
+
var _j = React.useState(true),
|
|
96
|
+
mapVisible = _j[0],
|
|
97
|
+
setMapVisible = _j[1];
|
|
98
|
+
|
|
99
|
+
var renderCircleBase = React.useCallback(function () {
|
|
100
|
+
var _a = circlePropsRef.current,
|
|
101
|
+
center = _a.center,
|
|
102
|
+
radius = _a.radius,
|
|
103
|
+
radiusUnit = _a.radiusUnit;
|
|
104
|
+
|
|
105
|
+
if (radiusUnit === 'METER') {
|
|
106
|
+
var latMargin = calculate.GeoCalulator.convertMeterToLatitudeValue(radius);
|
|
107
|
+
var targetPos = new MapTypes.Position(center.lat + latMargin, center.lng);
|
|
108
|
+
var tempComputedRadius = calcRadius(center, targetPos);
|
|
109
|
+
setComputedRadius(tempComputedRadius);
|
|
110
|
+
setAnchor(new MapTypes.Offset(tempComputedRadius, tempComputedRadius)); // console.log(`${radius} meter => `, tempComputedRadius);
|
|
111
|
+
} else {
|
|
112
|
+
setComputedRadius(radius);
|
|
113
|
+
setAnchor(new MapTypes.Offset(radius, radius)); // console.log(`${radius} pixel => `, radius);
|
|
114
|
+
}
|
|
115
|
+
}, []);
|
|
116
|
+
var calcRadius = React.useCallback(function (center, targetPos) {
|
|
117
|
+
var c = controller.positionToOffset(center);
|
|
118
|
+
var t = controller.positionToOffset(targetPos);
|
|
119
|
+
return Math.round(Math.sqrt(Math.pow(Math.abs(c.x - t.x), 2) + Math.pow(Math.abs(c.y - t.y), 2)));
|
|
120
|
+
}, []);
|
|
121
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, computedRadius && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, {
|
|
122
|
+
position: center,
|
|
123
|
+
anchor: anchor,
|
|
124
|
+
visible: visible,
|
|
125
|
+
disablePointerEvent: true,
|
|
126
|
+
zIndex: zIndex
|
|
127
|
+
}, mapVisible && React__default["default"].createElement(SVGCircle.SVGCircle, {
|
|
128
|
+
radius: computedRadius,
|
|
129
|
+
background: background,
|
|
130
|
+
shapeProperties: tslib.__assign({
|
|
131
|
+
pointerEvents: 'none'
|
|
132
|
+
}, shapeProperties),
|
|
133
|
+
svgProperties: svgProperties
|
|
134
|
+
}, children)));
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
exports.CircleMarker = CircleMarker;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
|
2
|
+
import { Position } from "../../../types";
|
|
3
|
+
export interface PolygonMarkerProps {
|
|
4
|
+
position: Position[];
|
|
5
|
+
innerPositions?: Position[][];
|
|
6
|
+
background?: string;
|
|
7
|
+
visible?: boolean;
|
|
8
|
+
zIndex?: number;
|
|
9
|
+
simplifyPath?: boolean;
|
|
10
|
+
simplifyTolerance?: number;
|
|
11
|
+
lastReapeated?: boolean;
|
|
12
|
+
mode?: 'POLYGON' | 'POLYLINE';
|
|
13
|
+
svgProperties?: React.SVGProps<SVGSVGElement>;
|
|
14
|
+
shapeProperties?: React.SVGProps<SVGPathElement>;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
*PolygonMarker
|
|
18
|
+
*
|
|
19
|
+
* @param {PolygonMarkerProps} PolygonMarkerProps
|
|
20
|
+
*
|
|
21
|
+
* @returns {JSX.Element} JSX
|
|
22
|
+
*/
|
|
23
|
+
export declare function PolygonMarker({ children, position, background, innerPositions, simplifyPath, simplifyTolerance, lastReapeated, svgProperties, shapeProperties, visible, zIndex, mode, }: PropsWithChildren<PolygonMarkerProps>): JSX.Element;
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var React = require('react');
|
|
6
|
+
var MintMapProvider = require('../../provider/MintMapProvider.js');
|
|
7
|
+
var MapMarkerWrapper = require('../../wrapper/MapMarkerWrapper.js');
|
|
8
|
+
var SVGPolygon = require('./base/SVGPolygon.js');
|
|
9
|
+
require('../../../types/MapDrawables.js');
|
|
10
|
+
var MapTypes = require('../../../types/MapTypes.js');
|
|
11
|
+
require('../../../types/MapEventTypes.js');
|
|
12
|
+
require('../../util/animation.js');
|
|
13
|
+
var calculate = require('../../util/calculate.js');
|
|
14
|
+
require('tslib');
|
|
15
|
+
|
|
16
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
17
|
+
|
|
18
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
*PolygonMarker
|
|
22
|
+
*
|
|
23
|
+
* @param {PolygonMarkerProps} PolygonMarkerProps
|
|
24
|
+
*
|
|
25
|
+
* @returns {JSX.Element} JSX
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
function PolygonMarker(_a) {
|
|
29
|
+
var children = _a.children,
|
|
30
|
+
position = _a.position,
|
|
31
|
+
_b = _a.background,
|
|
32
|
+
background = _b === void 0 ? 'lightgreen' : _b,
|
|
33
|
+
innerPositions = _a.innerPositions,
|
|
34
|
+
_c = _a.simplifyPath,
|
|
35
|
+
simplifyPath = _c === void 0 ? true : _c,
|
|
36
|
+
simplifyTolerance = _a.simplifyTolerance,
|
|
37
|
+
_d = _a.lastReapeated,
|
|
38
|
+
lastReapeated = _d === void 0 ? false : _d,
|
|
39
|
+
_e = _a.svgProperties,
|
|
40
|
+
svgProperties = _e === void 0 ? {} : _e,
|
|
41
|
+
_f = _a.shapeProperties,
|
|
42
|
+
shapeProperties = _f === void 0 ? {} : _f,
|
|
43
|
+
_g = _a.visible,
|
|
44
|
+
visible = _g === void 0 ? true : _g,
|
|
45
|
+
zIndex = _a.zIndex,
|
|
46
|
+
_h = _a.mode,
|
|
47
|
+
mode = _h === void 0 ? 'POLYGON' : _h; //controller
|
|
48
|
+
|
|
49
|
+
var controller = MintMapProvider.useMintMapController(); //zoom start event
|
|
50
|
+
|
|
51
|
+
var onZoomStart = React.useCallback(function () {
|
|
52
|
+
setMapVisible(false);
|
|
53
|
+
}, []); //idle event
|
|
54
|
+
|
|
55
|
+
var onIdle = React.useCallback(function () {
|
|
56
|
+
var newZoomLevel = controller.getZoomLevel();
|
|
57
|
+
|
|
58
|
+
if (zoomLevel.current !== newZoomLevel) {
|
|
59
|
+
zoomLevel.current = newZoomLevel;
|
|
60
|
+
renderPolygonBase();
|
|
61
|
+
setTimeout(function () {
|
|
62
|
+
setMapVisible(true);
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}, []);
|
|
66
|
+
var zoomLevel = React.useRef(controller.getZoomLevel());
|
|
67
|
+
React.useEffect(function () {
|
|
68
|
+
controller.addEventListener("ZOOMSTART", onZoomStart);
|
|
69
|
+
controller.addEventListener("IDLE", onIdle);
|
|
70
|
+
return function () {
|
|
71
|
+
controller.removeEventListener("ZOOMSTART", onZoomStart);
|
|
72
|
+
controller.removeEventListener("IDLE", onIdle);
|
|
73
|
+
};
|
|
74
|
+
}, []); //center
|
|
75
|
+
|
|
76
|
+
var _j = React.useState(),
|
|
77
|
+
polygonStart = _j[0],
|
|
78
|
+
setPolygonStart = _j[1]; //offsets
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
var _k = React.useState([]),
|
|
82
|
+
offsets = _k[0],
|
|
83
|
+
setOffsets = _k[1]; //inner offsets
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
var _l = React.useState([]),
|
|
87
|
+
innerOffsets = _l[0],
|
|
88
|
+
setInnerOffsets = _l[1]; //offset cache
|
|
89
|
+
|
|
90
|
+
|
|
91
|
+
var offsetCache = React.useRef(new Map()); //polygon props ref
|
|
92
|
+
|
|
93
|
+
var polygonPropsRef = React.useRef({
|
|
94
|
+
position: position,
|
|
95
|
+
innerPositions: innerPositions,
|
|
96
|
+
simplifyPath: simplifyPath,
|
|
97
|
+
simplifyTolerance: simplifyTolerance,
|
|
98
|
+
lastReapeated: lastReapeated
|
|
99
|
+
}); //polygon 생성 effect
|
|
100
|
+
|
|
101
|
+
React.useEffect(function () {
|
|
102
|
+
// console.log('polygon changed');
|
|
103
|
+
offsetCache.current.clear();
|
|
104
|
+
polygonPropsRef.current = {
|
|
105
|
+
position: position,
|
|
106
|
+
innerPositions: innerPositions,
|
|
107
|
+
simplifyPath: simplifyPath,
|
|
108
|
+
simplifyTolerance: simplifyTolerance,
|
|
109
|
+
lastReapeated: lastReapeated
|
|
110
|
+
};
|
|
111
|
+
renderPolygonBase();
|
|
112
|
+
}, [position, innerPositions, simplifyPath, simplifyTolerance, lastReapeated]); //render
|
|
113
|
+
|
|
114
|
+
var _m = React.useState(true),
|
|
115
|
+
mapVisible = _m[0],
|
|
116
|
+
setMapVisible = _m[1];
|
|
117
|
+
|
|
118
|
+
var renderPolygonBase = React.useCallback(function () {
|
|
119
|
+
// console.log('renderPolygonBase');
|
|
120
|
+
var _a = polygonPropsRef.current,
|
|
121
|
+
position = _a.position,
|
|
122
|
+
innerPositions = _a.innerPositions,
|
|
123
|
+
simplifyPath = _a.simplifyPath,
|
|
124
|
+
simplifyTolerance = _a.simplifyTolerance,
|
|
125
|
+
lastReapeated = _a.lastReapeated;
|
|
126
|
+
var prevCache = offsetCache.current.get(zoomLevel.current);
|
|
127
|
+
|
|
128
|
+
if (prevCache) {
|
|
129
|
+
var offsets_1 = [];
|
|
130
|
+
offsets_1.push.apply(offsets_1, prevCache.offsets);
|
|
131
|
+
setOffsets(offsets_1);
|
|
132
|
+
var innerOffsets_1 = [];
|
|
133
|
+
innerOffsets_1.push.apply(innerOffsets_1, prevCache.innerOffsets);
|
|
134
|
+
setInnerOffsets(innerOffsets_1);
|
|
135
|
+
setPolygonStart(prevCache.start);
|
|
136
|
+
} else {
|
|
137
|
+
// path
|
|
138
|
+
var simplified = simplifyPath ? calculate.PolygonCalculator.simplifyPoints(position, simplifyTolerance, lastReapeated) : position;
|
|
139
|
+
var offsets_2 = simplified.map(function (pos) {
|
|
140
|
+
var off = controller.positionToOffset(pos);
|
|
141
|
+
return new MapTypes.Offset(Math.floor(off.x), Math.floor(off.y));
|
|
142
|
+
});
|
|
143
|
+
setOffsets(offsets_2); //inner path
|
|
144
|
+
|
|
145
|
+
var innerPath = [];
|
|
146
|
+
|
|
147
|
+
if (innerPositions) {
|
|
148
|
+
for (var _i = 0, innerPositions_1 = innerPositions; _i < innerPositions_1.length; _i++) {
|
|
149
|
+
var innerPosition = innerPositions_1[_i];
|
|
150
|
+
var simplified_1 = simplifyPath ? calculate.PolygonCalculator.simplifyPoints(innerPosition, simplifyTolerance, lastReapeated) : innerPosition;
|
|
151
|
+
var offsets_3 = simplified_1.map(function (pos) {
|
|
152
|
+
var off = controller.positionToOffset(pos);
|
|
153
|
+
return new MapTypes.Offset(Math.floor(off.x), Math.floor(off.y));
|
|
154
|
+
});
|
|
155
|
+
innerPath.push(offsets_3);
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
setInnerOffsets(innerPath);
|
|
159
|
+
} //start point
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
var regionInfo = calculate.PolygonCalculator.getRegionInfo(simplified);
|
|
163
|
+
var startPosition = regionInfo.maxLat && regionInfo.minLng ? new MapTypes.Position(regionInfo.maxLat, regionInfo.minLng) : undefined;
|
|
164
|
+
setPolygonStart(startPosition); //cache set
|
|
165
|
+
|
|
166
|
+
offsetCache.current.set(zoomLevel.current, {
|
|
167
|
+
start: startPosition,
|
|
168
|
+
offsets: offsets_2,
|
|
169
|
+
innerOffsets: innerPath
|
|
170
|
+
});
|
|
171
|
+
}
|
|
172
|
+
}, []);
|
|
173
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, polygonStart && React__default["default"].createElement(MapMarkerWrapper.MapMarkerWrapper, {
|
|
174
|
+
position: polygonStart,
|
|
175
|
+
visible: visible,
|
|
176
|
+
disablePointerEvent: true,
|
|
177
|
+
zIndex: zIndex
|
|
178
|
+
}, mapVisible && React__default["default"].createElement(SVGPolygon.SVGPolygon, {
|
|
179
|
+
path: offsets,
|
|
180
|
+
innerPath: innerOffsets,
|
|
181
|
+
mode: mode,
|
|
182
|
+
background: background,
|
|
183
|
+
shapeProperties: shapeProperties,
|
|
184
|
+
svgProperties: svgProperties
|
|
185
|
+
}, children)));
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
exports.PolygonMarker = PolygonMarker;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React, { PropsWithChildren } from "react";
|
|
2
|
+
export interface SVGCircleProps {
|
|
3
|
+
radius?: number;
|
|
4
|
+
background?: string;
|
|
5
|
+
svgProperties?: React.SVGProps<SVGSVGElement>;
|
|
6
|
+
shapeProperties?: React.SVGProps<SVGCircleElement>;
|
|
7
|
+
}
|
|
8
|
+
export declare function SVGCircle({ radius, background, children, svgProperties, shapeProperties, }: PropsWithChildren<SVGCircleProps>): JSX.Element;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
function SVGCircle(_a) {
|
|
13
|
+
var _b = _a.radius,
|
|
14
|
+
radius = _b === void 0 ? 100 : _b,
|
|
15
|
+
_c = _a.background,
|
|
16
|
+
background = _c === void 0 ? 'lightgreen' : _c,
|
|
17
|
+
children = _a.children,
|
|
18
|
+
_d = _a.svgProperties,
|
|
19
|
+
svgProperties = _d === void 0 ? {} : _d,
|
|
20
|
+
_e = _a.shapeProperties,
|
|
21
|
+
shapeProperties = _e === void 0 ? {} : _e;
|
|
22
|
+
|
|
23
|
+
var _f = React.useState(radius * 2),
|
|
24
|
+
boxSize = _f[0],
|
|
25
|
+
setBoxSize = _f[1];
|
|
26
|
+
|
|
27
|
+
React.useEffect(function () {
|
|
28
|
+
// console.log('SVGCircle radius', radius);
|
|
29
|
+
setBoxSize(radius * 2);
|
|
30
|
+
}, [radius]);
|
|
31
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
|
|
32
|
+
pointerEvents: "none",
|
|
33
|
+
width: boxSize,
|
|
34
|
+
height: boxSize,
|
|
35
|
+
viewBox: "0 0 100 100"
|
|
36
|
+
}, svgProperties), React__default["default"].createElement("circle", tslib.__assign({
|
|
37
|
+
pointerEvents: "visiblepainted",
|
|
38
|
+
cx: '50',
|
|
39
|
+
cy: '50',
|
|
40
|
+
r: '50',
|
|
41
|
+
fill: background
|
|
42
|
+
}, shapeProperties))), React__default["default"].createElement("div", {
|
|
43
|
+
style: {
|
|
44
|
+
pointerEvents: 'none',
|
|
45
|
+
position: 'absolute',
|
|
46
|
+
left: '0px',
|
|
47
|
+
top: '0px',
|
|
48
|
+
width: "".concat(boxSize, "px"),
|
|
49
|
+
height: "".concat(boxSize, "px")
|
|
50
|
+
}
|
|
51
|
+
}, children));
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
exports.SVGCircle = SVGCircle;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PropsWithChildren } from "react";
|
|
3
|
+
import { Offset } from "../../../../types";
|
|
4
|
+
export interface SVGPolygonProps {
|
|
5
|
+
path: Offset[];
|
|
6
|
+
innerPath?: Offset[][];
|
|
7
|
+
background?: string;
|
|
8
|
+
mode?: 'POLYGON' | 'POLYLINE';
|
|
9
|
+
svgProperties?: React.SVGProps<SVGSVGElement>;
|
|
10
|
+
shapeProperties?: React.SVGProps<SVGPathElement>;
|
|
11
|
+
}
|
|
12
|
+
export declare function SVGPolygon({ path, innerPath, background, svgProperties, shapeProperties, mode, children, }: PropsWithChildren<SVGPolygonProps>): JSX.Element;
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
function SVGPolygon(_a) {
|
|
13
|
+
var path = _a.path,
|
|
14
|
+
_b = _a.innerPath,
|
|
15
|
+
innerPath = _b === void 0 ? [] : _b,
|
|
16
|
+
_c = _a.background,
|
|
17
|
+
background = _c === void 0 ? 'lightblue' : _c,
|
|
18
|
+
_d = _a.svgProperties,
|
|
19
|
+
svgProperties = _d === void 0 ? {} : _d,
|
|
20
|
+
_e = _a.shapeProperties,
|
|
21
|
+
shapeProperties = _e === void 0 ? {} : _e,
|
|
22
|
+
_f = _a.mode,
|
|
23
|
+
mode = _f === void 0 ? 'POLYGON' : _f,
|
|
24
|
+
children = _a.children;
|
|
25
|
+
var getPolygonInfo = React.useCallback(function (path) {
|
|
26
|
+
var maxX, minX, maxY, minY;
|
|
27
|
+
|
|
28
|
+
for (var _i = 0, path_1 = path; _i < path_1.length; _i++) {
|
|
29
|
+
var offset = path_1[_i];
|
|
30
|
+
|
|
31
|
+
if (maxX === undefined || offset.x > maxX) {
|
|
32
|
+
maxX = offset.x;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
if (minX === undefined || offset.x < minX) {
|
|
36
|
+
minX = offset.x;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
if (maxY === undefined || offset.y > maxY) {
|
|
40
|
+
maxY = offset.y;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
if (minY === undefined || offset.y < minY) {
|
|
44
|
+
minY = offset.y;
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
if (!maxX || !minX || !maxY || !minY) {
|
|
49
|
+
return {
|
|
50
|
+
containerLeft: 0,
|
|
51
|
+
containerTop: 0,
|
|
52
|
+
containerWidth: 0,
|
|
53
|
+
containerHeight: 0
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
var width = maxX - minX;
|
|
58
|
+
var height = maxY - minY;
|
|
59
|
+
return {
|
|
60
|
+
containerLeft: Math.floor(minX),
|
|
61
|
+
containerTop: Math.floor(minY),
|
|
62
|
+
containerWidth: Math.floor(width),
|
|
63
|
+
containerHeight: Math.floor(height)
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
var getD = React.useCallback(function (_a) {
|
|
67
|
+
var path = _a.path,
|
|
68
|
+
containerLeft = _a.containerLeft,
|
|
69
|
+
containerTop = _a.containerTop,
|
|
70
|
+
mode = _a.mode;
|
|
71
|
+
var left = containerLeft;
|
|
72
|
+
var top = containerTop;
|
|
73
|
+
var isPolygon = mode === 'POLYGON';
|
|
74
|
+
var out = ''; //path
|
|
75
|
+
|
|
76
|
+
out += getLine(path, left, top, isPolygon); //inner path
|
|
77
|
+
|
|
78
|
+
for (var _i = 0, innerPath_1 = innerPath; _i < innerPath_1.length; _i++) {
|
|
79
|
+
var inner = innerPath_1[_i];
|
|
80
|
+
out += ' ' + getLine(inner, left, top, isPolygon);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
return out;
|
|
84
|
+
}, []);
|
|
85
|
+
var getLine = React.useCallback(function (path, offsetLeft, offsetTop, closePath) {
|
|
86
|
+
return path.map(function (offset, idx) {
|
|
87
|
+
if (idx === 0) {
|
|
88
|
+
return "M ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
|
|
89
|
+
} else if (idx === 1) {
|
|
90
|
+
return "L ".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
|
|
91
|
+
} else {
|
|
92
|
+
if (offset.equals(path[idx - 1])) {
|
|
93
|
+
return '';
|
|
94
|
+
} else {
|
|
95
|
+
return "".concat(offset.x - offsetLeft, ",").concat(offset.y - offsetTop);
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}).join(' ') + " ".concat(closePath ? 'Z' : '');
|
|
99
|
+
}, []);
|
|
100
|
+
|
|
101
|
+
var _g = React.useState(0),
|
|
102
|
+
width = _g[0],
|
|
103
|
+
setWidth = _g[1];
|
|
104
|
+
|
|
105
|
+
var _h = React.useState(0),
|
|
106
|
+
height = _h[0],
|
|
107
|
+
setHeight = _h[1];
|
|
108
|
+
|
|
109
|
+
var _j = React.useState('M0 0'),
|
|
110
|
+
d = _j[0],
|
|
111
|
+
setD = _j[1];
|
|
112
|
+
|
|
113
|
+
React.useEffect(function () {
|
|
114
|
+
var info = getPolygonInfo(path);
|
|
115
|
+
setWidth(info.containerWidth);
|
|
116
|
+
setHeight(info.containerHeight);
|
|
117
|
+
setD(getD(tslib.__assign(tslib.__assign({}, info), {
|
|
118
|
+
path: path,
|
|
119
|
+
innerPath: innerPath,
|
|
120
|
+
mode: mode
|
|
121
|
+
})));
|
|
122
|
+
}, [path, innerPath]);
|
|
123
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
|
|
124
|
+
pointerEvents: "none",
|
|
125
|
+
width: width,
|
|
126
|
+
height: height,
|
|
127
|
+
viewBox: "0 0 ".concat(width, " ").concat(height)
|
|
128
|
+
}, svgProperties), React__default["default"].createElement("path", tslib.__assign({
|
|
129
|
+
fillRule: "evenodd",
|
|
130
|
+
pointerEvents: "visiblepainted",
|
|
131
|
+
x: "0",
|
|
132
|
+
y: "0",
|
|
133
|
+
width: width,
|
|
134
|
+
height: height,
|
|
135
|
+
fill: mode === 'POLYLINE' ? 'none' : background,
|
|
136
|
+
stroke: mode === 'POLYLINE' ? 'black' : 'green',
|
|
137
|
+
strokeLinejoin: "round",
|
|
138
|
+
strokeLinecap: "butt",
|
|
139
|
+
d: d
|
|
140
|
+
}, shapeProperties))), React__default["default"].createElement("div", {
|
|
141
|
+
style: {
|
|
142
|
+
pointerEvents: 'none',
|
|
143
|
+
position: 'absolute',
|
|
144
|
+
left: '0px',
|
|
145
|
+
top: '0px',
|
|
146
|
+
width: "".concat(width, "px"),
|
|
147
|
+
height: "".concat(height, "px")
|
|
148
|
+
}
|
|
149
|
+
}, children));
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
exports.SVGPolygon = SVGPolygon;
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { PropsWithChildren } from "react";
|
|
3
|
+
export interface SVGRectProps {
|
|
4
|
+
width?: number;
|
|
5
|
+
height?: number;
|
|
6
|
+
background?: string;
|
|
7
|
+
svgProperties?: React.SVGProps<SVGSVGElement>;
|
|
8
|
+
shapeProperties?: React.SVGProps<SVGRectElement>;
|
|
9
|
+
}
|
|
10
|
+
export declare function SVGRect({ width, height, background, svgProperties, shapeProperties, children }: PropsWithChildren<SVGRectProps>): JSX.Element;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var tslib = require('tslib');
|
|
6
|
+
var React = require('react');
|
|
7
|
+
|
|
8
|
+
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
9
|
+
|
|
10
|
+
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
11
|
+
|
|
12
|
+
function SVGRect(_a) {
|
|
13
|
+
var _b = _a.width,
|
|
14
|
+
width = _b === void 0 ? 100 : _b,
|
|
15
|
+
_c = _a.height,
|
|
16
|
+
height = _c === void 0 ? 100 : _c,
|
|
17
|
+
_d = _a.background,
|
|
18
|
+
background = _d === void 0 ? 'lightblue' : _d,
|
|
19
|
+
_e = _a.svgProperties,
|
|
20
|
+
svgProperties = _e === void 0 ? {} : _e,
|
|
21
|
+
_f = _a.shapeProperties,
|
|
22
|
+
shapeProperties = _f === void 0 ? {} : _f,
|
|
23
|
+
children = _a.children;
|
|
24
|
+
var getViewHeight = React.useCallback(function (width, height) {
|
|
25
|
+
return Number((100 * height / width).toFixed(0));
|
|
26
|
+
}, []);
|
|
27
|
+
var viewWidth = React.useRef(100);
|
|
28
|
+
|
|
29
|
+
var _g = React.useState(getViewHeight(width, height)),
|
|
30
|
+
viewHeight = _g[0],
|
|
31
|
+
setViewHeight = _g[1];
|
|
32
|
+
|
|
33
|
+
React.useEffect(function () {
|
|
34
|
+
setViewHeight(getViewHeight(width, height));
|
|
35
|
+
}, [width, height]);
|
|
36
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("svg", tslib.__assign({
|
|
37
|
+
pointerEvents: "none",
|
|
38
|
+
width: width,
|
|
39
|
+
height: height,
|
|
40
|
+
viewBox: "0 0 ".concat(viewWidth.current, " ").concat(viewHeight)
|
|
41
|
+
}, svgProperties), React__default["default"].createElement("rect", tslib.__assign({
|
|
42
|
+
pointerEvents: "visiblepainted",
|
|
43
|
+
x: "0",
|
|
44
|
+
y: "0",
|
|
45
|
+
width: viewWidth.current,
|
|
46
|
+
height: viewHeight,
|
|
47
|
+
fill: background
|
|
48
|
+
}, shapeProperties))), React__default["default"].createElement("div", {
|
|
49
|
+
style: {
|
|
50
|
+
pointerEvents: 'none',
|
|
51
|
+
position: 'absolute',
|
|
52
|
+
left: '0px',
|
|
53
|
+
top: '0px',
|
|
54
|
+
width: "".concat(width, "px"),
|
|
55
|
+
height: "".concat(height, "px")
|
|
56
|
+
}
|
|
57
|
+
}, children));
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
exports.SVGRect = SVGRect;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Marker } from "../../
|
|
2
|
-
import { MapMarkerMoving } from "../wrapper/MapMarkerWrapper";
|
|
3
|
-
export interface MapMarkerMovingHookProps extends MapMarkerMoving {
|
|
4
|
-
marker?: Marker;
|
|
5
|
-
}
|
|
6
|
-
export declare function useMarkerMoving({ marker, positions, positionClosed, loop, fps, startPositionIndex, velocity, onMovingStart, onMovingEnd }: MapMarkerMovingHookProps): (() => void)[];
|
|
1
|
+
import { Marker } from "../../types/MapDrawables";
|
|
2
|
+
import { MapMarkerMoving } from "../wrapper/MapMarkerWrapper";
|
|
3
|
+
export interface MapMarkerMovingHookProps extends MapMarkerMoving {
|
|
4
|
+
marker?: Marker;
|
|
5
|
+
}
|
|
6
|
+
export declare function useMarkerMoving({ marker, positions, positionClosed, loop, fps, startPositionIndex, velocity, onMovingStart, onMovingEnd }: MapMarkerMovingHookProps): (() => void)[];
|