@mint-ui/map 0.4.5-beta → 0.4.6-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 +58 -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 +2 -1
- package/dist/components/mint-map/core/hooks/MarkerMovingHook.d.ts +6 -6
- package/dist/components/mint-map/core/hooks/MarkerMovingHook.js +17 -8
- 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 +39 -34
- package/dist/components/mint-map/core/util/calculate.js +65 -26
- 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 +31 -23
- package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +54 -25
- 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 +42 -39
- package/dist/components/mint-map/google/GoogleMintMapController.js +90 -44
- package/dist/components/mint-map/index.d.ts +5 -4
- package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +48 -44
- package/dist/components/mint-map/kakao/KakaoMintMapController.js +147 -65
- package/dist/components/mint-map/naver/NaverMintMapController.d.ts +45 -42
- package/dist/components/mint-map/naver/NaverMintMapController.js +136 -49
- 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/MapTypes.d.ts +59 -0
- package/dist/components/mint-map/types/MapTypes.js +151 -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 +5 -0
- package/dist/index.d.ts +7 -1
- package/dist/index.es.js +1505 -946
- package/dist/index.js +12 -9
- package/dist/index.umd.js +1505 -946
- package/package.json +77 -77
- package/test.ts +0 -7
|
@@ -6,7 +6,7 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var MintMapProvider = require('../provider/MintMapProvider.js');
|
|
8
8
|
var MintMapCanvasRenderer = require('../MintMapCanvasRenderer.js');
|
|
9
|
-
var
|
|
9
|
+
var MapTypes = require('../../types/MapTypes.js');
|
|
10
10
|
|
|
11
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
12
|
|
|
@@ -16,10 +16,19 @@ var console = {
|
|
|
16
16
|
log: function () {
|
|
17
17
|
}
|
|
18
18
|
};
|
|
19
|
+
/**
|
|
20
|
+
* Mint Map 컴포넌트
|
|
21
|
+
*
|
|
22
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
23
|
+
*
|
|
24
|
+
* @returns {JSX.Element} JSX
|
|
25
|
+
*/
|
|
26
|
+
|
|
19
27
|
function MapCanvasWrapper(_a) {
|
|
20
28
|
var children = _a.children;
|
|
21
29
|
tslib.__rest(_a, ["children"]);
|
|
22
|
-
|
|
30
|
+
|
|
31
|
+
var controller = MintMapProvider.useMintMapController(); //render switch
|
|
23
32
|
|
|
24
33
|
var _b = React.useState(false),
|
|
25
34
|
renderFlag = _b[0],
|
|
@@ -27,18 +36,28 @@ function MapCanvasWrapper(_a) {
|
|
|
27
36
|
|
|
28
37
|
var invokeRender = React.useCallback(function () {
|
|
29
38
|
setRenderFlag(!renderFlag);
|
|
30
|
-
}, []);
|
|
31
|
-
|
|
32
|
-
var
|
|
33
|
-
|
|
34
|
-
var
|
|
39
|
+
}, []); //canvas renderer
|
|
40
|
+
|
|
41
|
+
var renderer = React.useRef(); //canvas container ref
|
|
42
|
+
|
|
43
|
+
var containerRef = React.useRef(null); //canvas ref
|
|
44
|
+
|
|
45
|
+
var canvasRef = React.useRef(null); //canvas context
|
|
46
|
+
|
|
47
|
+
var contextRef = React.useRef(); //clear rect
|
|
48
|
+
|
|
35
49
|
var clearRect = React.useCallback(function () {
|
|
36
50
|
if (contextRef.current && canvasRef.current) {
|
|
37
51
|
contextRef.current.clearRect(canvasRef.current.width * -1, canvasRef.current.height * -1, canvasRef.current.width * 3, canvasRef.current.height * 3);
|
|
38
52
|
}
|
|
39
53
|
|
|
40
54
|
return true;
|
|
41
|
-
}, []);
|
|
55
|
+
}, []); //offset values
|
|
56
|
+
// const offsetProvider = useRef(new Offset(0, 0))
|
|
57
|
+
// const prevX = useRef(0)
|
|
58
|
+
// const prevY = useRef(0)
|
|
59
|
+
//scaling
|
|
60
|
+
|
|
42
61
|
var scaleCanvas = React.useCallback(function (containerRef, canvasElement, canvasContext) {
|
|
43
62
|
var devicePixelRatio = window.devicePixelRatio;
|
|
44
63
|
var width = containerRef.offsetWidth;
|
|
@@ -48,7 +67,16 @@ function MapCanvasWrapper(_a) {
|
|
|
48
67
|
canvasElement.style.width = "".concat(width, "px");
|
|
49
68
|
canvasElement.style.height = "".concat(height, "px");
|
|
50
69
|
canvasContext.scale(devicePixelRatio, devicePixelRatio);
|
|
51
|
-
}, []);
|
|
70
|
+
}, []); //init transform
|
|
71
|
+
// const initTransform = useCallback(()=>{
|
|
72
|
+
// offsetProvider.current.x = 0
|
|
73
|
+
// offsetProvider.current.y = 0
|
|
74
|
+
// containerRef.current && (containerRef.current.style.transform = `translate(0px, 0px)`)
|
|
75
|
+
// console.log('initTransform');
|
|
76
|
+
// return true
|
|
77
|
+
// }, [])
|
|
78
|
+
//parse click param
|
|
79
|
+
|
|
52
80
|
var parseClickParamToPosition = React.useCallback(function (mapType, e) {
|
|
53
81
|
var latlng = e.latlng || e.latLng;
|
|
54
82
|
|
|
@@ -56,7 +84,7 @@ function MapCanvasWrapper(_a) {
|
|
|
56
84
|
throw new Error("Map Type ".concat(mapType, " canvas marker click not supported (latlng not found)"));
|
|
57
85
|
}
|
|
58
86
|
|
|
59
|
-
var clickPosition = new
|
|
87
|
+
var clickPosition = new MapTypes.Position(0, 0);
|
|
60
88
|
|
|
61
89
|
if (mapType === 'naver') {
|
|
62
90
|
clickPosition.lat = latlng._lat;
|
|
@@ -72,15 +100,17 @@ function MapCanvasWrapper(_a) {
|
|
|
72
100
|
}
|
|
73
101
|
|
|
74
102
|
return clickPosition;
|
|
75
|
-
}, []);
|
|
103
|
+
}, []); //box includes
|
|
76
104
|
|
|
77
105
|
var includes = function (point, targetPoint, width, height) {
|
|
106
|
+
// console.log('includes', point, targetPoint, width, height);
|
|
78
107
|
if (point.x >= targetPoint.x && point.x <= targetPoint.x + width && point.y >= targetPoint.y && point.y <= targetPoint.y + height) {
|
|
79
108
|
return true;
|
|
80
109
|
}
|
|
81
110
|
|
|
82
111
|
return false;
|
|
83
|
-
};
|
|
112
|
+
}; //process mouse event
|
|
113
|
+
|
|
84
114
|
|
|
85
115
|
var processMouseEvent = React.useCallback(function (clickedOffset, eventName) {
|
|
86
116
|
var items = renderItemsOnView.current;
|
|
@@ -94,9 +124,10 @@ function MapCanvasWrapper(_a) {
|
|
|
94
124
|
|
|
95
125
|
if (!event_1) {
|
|
96
126
|
continue;
|
|
97
|
-
}
|
|
127
|
+
} //includes check
|
|
98
128
|
|
|
99
|
-
|
|
129
|
+
|
|
130
|
+
var pos = item.position; // console.log('canvas mouseevent check', pos.offset);
|
|
100
131
|
|
|
101
132
|
if (pos && !pos.offset) {
|
|
102
133
|
pos.offset = controller.positionToOffset(pos);
|
|
@@ -104,61 +135,92 @@ function MapCanvasWrapper(_a) {
|
|
|
104
135
|
|
|
105
136
|
if (!pos || !pos.offset || !includes(clickedOffset, pos.offset, item.boxWidth, item.boxHeight)) {
|
|
106
137
|
continue;
|
|
107
|
-
}
|
|
138
|
+
} // const propagation =
|
|
139
|
+
|
|
108
140
|
|
|
109
141
|
event_1(clickedOffset);
|
|
110
|
-
hitSet.add(item);
|
|
111
|
-
|
|
142
|
+
hitSet.add(item); // if(eventName === 'onMouseOver' || propagation === false){
|
|
143
|
+
|
|
144
|
+
break; // }
|
|
112
145
|
}
|
|
113
146
|
}
|
|
114
147
|
|
|
115
148
|
return hitSet;
|
|
116
|
-
}, []);
|
|
149
|
+
}, []); //initialize
|
|
150
|
+
|
|
117
151
|
React.useEffect(function () {
|
|
118
152
|
var resizeObserver;
|
|
119
153
|
|
|
120
154
|
if (canvasRef.current && containerRef.current) {
|
|
121
155
|
resizeObserver = new ResizeObserver(function (entries) {
|
|
122
156
|
var elem = entries[0];
|
|
123
|
-
canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current);
|
|
157
|
+
canvasRef.current && contextRef.current && scaleCanvas(elem.target, canvasRef.current, contextRef.current); // initTransform()
|
|
158
|
+
|
|
124
159
|
renderMain();
|
|
125
160
|
});
|
|
126
161
|
resizeObserver.observe(containerRef.current);
|
|
127
162
|
var map = controller.getMap();
|
|
128
163
|
|
|
129
164
|
if (map) {
|
|
165
|
+
// const center = controller.getCenter()
|
|
166
|
+
// center.offset = controller.positionToOffset(center)
|
|
167
|
+
// if(center.offset){
|
|
168
|
+
// prevX.current = center.offset.x
|
|
169
|
+
// prevY.current = center.offset.y
|
|
170
|
+
// }
|
|
171
|
+
//naver 전용 이벤트 'zooming' 일때 캔버스 클리어처리
|
|
172
|
+
//@ts-ignore
|
|
130
173
|
map.addListener('zooming', function () {
|
|
131
174
|
clearRect();
|
|
132
|
-
});
|
|
175
|
+
}); //kakao 전용 이벤트 'zoom_start' 일때 캔버스 클리어처리
|
|
176
|
+
//@ts-ignore
|
|
177
|
+
|
|
133
178
|
map.addListener('zoom_start', function () {
|
|
134
179
|
clearRect();
|
|
135
|
-
});
|
|
180
|
+
}); //@ts-ignore
|
|
181
|
+
|
|
136
182
|
map.addListener('center_changed', function () {
|
|
137
183
|
|
|
138
184
|
if (containerRef.current) {
|
|
185
|
+
// const pos = controller.getCenter()
|
|
186
|
+
// pos.offset = controller.positionToOffset(pos)
|
|
187
|
+
// const deltaX = prevX.current - pos.offset.x
|
|
188
|
+
// const deltaY = prevY.current - pos.offset.y
|
|
189
|
+
// offsetProvider.current.x += deltaX
|
|
190
|
+
// offsetProvider.current.y += deltaY
|
|
191
|
+
// prevX.current = pos.offset.x
|
|
192
|
+
// prevY.current = pos.offset.y
|
|
193
|
+
// containerRef.current.style.transform = `translate(${offsetProvider.current.x}px, ${offsetProvider.current.y}px)`
|
|
139
194
|
containerRef.current.style.visibility = 'hidden';
|
|
140
195
|
}
|
|
141
|
-
});
|
|
196
|
+
}); //@ts-ignore
|
|
197
|
+
|
|
142
198
|
map.addListener('idle', function () {
|
|
143
199
|
|
|
144
200
|
if (containerRef.current) {
|
|
145
201
|
containerRef.current.style.visibility = '';
|
|
146
202
|
}
|
|
147
203
|
|
|
148
|
-
clearRect();
|
|
204
|
+
clearRect(); // contextRef.current?.translate(offsetProvider.current.x, offsetProvider.current.y)
|
|
205
|
+
// initTransform()
|
|
206
|
+
|
|
149
207
|
invokeRender();
|
|
150
|
-
});
|
|
208
|
+
}); //@ts-ignore
|
|
209
|
+
|
|
151
210
|
map.addListener('mousemove', function (e) {
|
|
152
211
|
var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
|
|
153
|
-
var clickedOffset = controller.positionToOffset(clickPosition);
|
|
154
|
-
|
|
212
|
+
var clickedOffset = controller.positionToOffset(clickPosition); // console.log('canvas mousemove', clickedOffset);
|
|
213
|
+
|
|
214
|
+
var hitSet = processMouseEvent(clickedOffset, 'onMouseOver'); //mouse out 처리
|
|
215
|
+
|
|
155
216
|
renderItemsMouseOverStatus.current.forEach(function (item) {
|
|
156
217
|
if (!hitSet.has(item)) {
|
|
157
218
|
item.onMouseOut && item.onMouseOut(clickedOffset);
|
|
158
219
|
}
|
|
159
220
|
});
|
|
160
221
|
renderItemsMouseOverStatus.current = hitSet;
|
|
161
|
-
});
|
|
222
|
+
}); //@ts-ignore
|
|
223
|
+
|
|
162
224
|
map.addListener('click', function (e) {
|
|
163
225
|
var clickPosition = parseClickParamToPosition(controller.getMapType(), e);
|
|
164
226
|
var clickedOffset = controller.positionToOffset(clickPosition);
|
|
@@ -177,14 +239,18 @@ function MapCanvasWrapper(_a) {
|
|
|
177
239
|
return function () {
|
|
178
240
|
resizeObserver && resizeObserver.disconnect();
|
|
179
241
|
};
|
|
180
|
-
}, []);
|
|
242
|
+
}, []); //items setting
|
|
243
|
+
|
|
181
244
|
var renderItems = React.useRef([]);
|
|
182
245
|
var renderItemsOnView = React.useRef([]);
|
|
183
246
|
var renderItemsMouseOverStatus = React.useRef(new Set());
|
|
184
247
|
React.useEffect(function () {
|
|
185
248
|
renderItems.current = (Array.isArray(children) ? children : children ? [children] : []).map(function (item) {
|
|
186
249
|
return item.props;
|
|
187
|
-
});
|
|
250
|
+
}); //draw 를 위한 정렬 조건
|
|
251
|
+
//1. zIndex 가 있는 것들 끼리 정렬처리
|
|
252
|
+
//2. zIndex 가 없는 것들은 원래 배열 순서대로
|
|
253
|
+
|
|
188
254
|
var zIndexList = [];
|
|
189
255
|
var undefinedList = [];
|
|
190
256
|
|
|
@@ -204,16 +270,19 @@ function MapCanvasWrapper(_a) {
|
|
|
204
270
|
}).forEach(function (item) {
|
|
205
271
|
renderItems.current.push(item);
|
|
206
272
|
});
|
|
207
|
-
}, [children]);
|
|
273
|
+
}, [children]); //rendering main
|
|
274
|
+
|
|
208
275
|
var renderMain = React.useCallback(function () {
|
|
209
276
|
var ctx = contextRef.current;
|
|
210
277
|
var container = containerRef.current;
|
|
211
278
|
|
|
212
279
|
if (!ctx || !container || !renderer.current) {
|
|
213
280
|
return;
|
|
214
|
-
}
|
|
281
|
+
} //all clear
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
clearRect(); //draw
|
|
215
285
|
|
|
216
|
-
clearRect();
|
|
217
286
|
var t = new Date().getTime();
|
|
218
287
|
var items = renderItems.current;
|
|
219
288
|
renderItemsOnView.current.length = 0;
|
|
@@ -223,7 +292,8 @@ function MapCanvasWrapper(_a) {
|
|
|
223
292
|
var item = items_1[_i];
|
|
224
293
|
|
|
225
294
|
if (item.visible === undefined || item.visible) {
|
|
226
|
-
var pos = item.position;
|
|
295
|
+
var pos = item.position; //위치 변환
|
|
296
|
+
|
|
227
297
|
pos.offset = controller.positionToOffset(pos);
|
|
228
298
|
|
|
229
299
|
if (item.anchor) {
|
|
@@ -235,7 +305,8 @@ function MapCanvasWrapper(_a) {
|
|
|
235
305
|
|
|
236
306
|
if (pos.offset.x < 0 || pos.offset.x > container.offsetWidth || pos.offset.y < 0 || pos.offset.y > container.offsetHeight) {
|
|
237
307
|
continue;
|
|
238
|
-
}
|
|
308
|
+
} //그리기
|
|
309
|
+
|
|
239
310
|
|
|
240
311
|
item.renderer(renderer.current, pos.offset, item.payload);
|
|
241
312
|
renderItemsOnView.current.push(item);
|
|
@@ -249,7 +320,8 @@ function MapCanvasWrapper(_a) {
|
|
|
249
320
|
}
|
|
250
321
|
});
|
|
251
322
|
console.log("[render ends] ".concat(new Date().getTime() - t, " ms"));
|
|
252
|
-
}, []);
|
|
323
|
+
}, []); //render!!!
|
|
324
|
+
|
|
253
325
|
renderMain();
|
|
254
326
|
return React__default["default"].createElement("div", {
|
|
255
327
|
ref: containerRef,
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
2
|
-
declare type AlignHorizontal = 'left' | 'right' | 'center';
|
|
3
|
-
declare type AlignVertical = 'top' | 'bottom' | 'center';
|
|
4
|
-
export interface MapControlWrapperProps {
|
|
5
|
-
width?: number | string;
|
|
6
|
-
height?: number | string;
|
|
7
|
-
positionHorizontal?: AlignHorizontal;
|
|
8
|
-
positionVertical?: AlignVertical;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
declare type AlignHorizontal = 'left' | 'right' | 'center';
|
|
3
|
+
declare type AlignVertical = 'top' | 'bottom' | 'center';
|
|
4
|
+
export interface MapControlWrapperProps {
|
|
5
|
+
width?: number | string;
|
|
6
|
+
height?: number | string;
|
|
7
|
+
positionHorizontal?: AlignHorizontal;
|
|
8
|
+
positionVertical?: AlignVertical;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Mint Map 컴포넌트
|
|
12
|
+
*
|
|
13
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
14
|
+
*
|
|
15
|
+
* @returns {JSX.Element} JSX
|
|
16
|
+
*/
|
|
17
|
+
export declare function MapControlWrapper({ width, height, positionHorizontal, positionVertical, children }: PropsWithChildren<MapControlWrapperProps>): JSX.Element;
|
|
18
|
+
export {};
|
|
@@ -54,6 +54,14 @@ var getAlignPosition = function (value, align) {
|
|
|
54
54
|
|
|
55
55
|
throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
|
|
56
56
|
};
|
|
57
|
+
/**
|
|
58
|
+
* Mint Map 컴포넌트
|
|
59
|
+
*
|
|
60
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
61
|
+
*
|
|
62
|
+
* @returns {JSX.Element} JSX
|
|
63
|
+
*/
|
|
64
|
+
|
|
57
65
|
|
|
58
66
|
function MapControlWrapper(_a) {
|
|
59
67
|
var _b = _a.width,
|
|
@@ -1,23 +1,31 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
2
|
-
import { MarkerOptions
|
|
3
|
-
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
import { MarkerOptions } from "../../types/MapDrawables";
|
|
3
|
+
import { Position } from "../../types/MapTypes";
|
|
4
|
+
export declare type MovingEventFunciton = () => void;
|
|
5
|
+
export interface MapMarkerMoving {
|
|
6
|
+
positions?: Position[];
|
|
7
|
+
positionClosed?: boolean;
|
|
8
|
+
startPositionIndex?: number;
|
|
9
|
+
velocity?: number;
|
|
10
|
+
loop?: boolean;
|
|
11
|
+
delay?: number;
|
|
12
|
+
autoStart?: boolean;
|
|
13
|
+
fps?: number;
|
|
14
|
+
onMovingStart?: MovingEventFunciton;
|
|
15
|
+
onMovingEnd?: MovingEventFunciton;
|
|
16
|
+
}
|
|
17
|
+
export interface MapMarkerWrapperProps extends MarkerOptions {
|
|
18
|
+
topOnClick?: boolean;
|
|
19
|
+
topOnHover?: boolean;
|
|
20
|
+
startAnimationClassName?: string;
|
|
21
|
+
endAnimationClassName?: string;
|
|
22
|
+
movingAnimation?: MapMarkerMoving;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Mint Map 컴포넌트
|
|
26
|
+
*
|
|
27
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
28
|
+
*
|
|
29
|
+
* @returns {JSX.Element} JSX
|
|
30
|
+
*/
|
|
31
|
+
export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
|
|
@@ -6,16 +6,25 @@ var tslib = require('tslib');
|
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var reactDom = require('react-dom');
|
|
8
8
|
var MintMapProvider = require('../provider/MintMapProvider.js');
|
|
9
|
-
var MintMap = require('../../MintMap.js');
|
|
10
9
|
var MarkerMovingHook = require('../hooks/MarkerMovingHook.js');
|
|
10
|
+
var MapDrawables = require('../../types/MapDrawables.js');
|
|
11
11
|
|
|
12
12
|
var offsetCalibration = function (mapType, divElement, options) {
|
|
13
|
+
//google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
|
|
13
14
|
if (mapType === 'google') {
|
|
14
15
|
divElement.style.transform = "translate(50%, 100%) translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
|
|
15
16
|
} else if (mapType === 'kakao') {
|
|
16
17
|
divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
|
|
17
18
|
}
|
|
18
19
|
};
|
|
20
|
+
/**
|
|
21
|
+
* Mint Map 컴포넌트
|
|
22
|
+
*
|
|
23
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
24
|
+
*
|
|
25
|
+
* @returns {JSX.Element} JSX
|
|
26
|
+
*/
|
|
27
|
+
|
|
19
28
|
|
|
20
29
|
function MapMarkerWrapper(_a) {
|
|
21
30
|
var startAnimationClassName = _a.startAnimationClassName,
|
|
@@ -26,19 +35,24 @@ function MapMarkerWrapper(_a) {
|
|
|
26
35
|
topOnHover = _c === void 0 ? false : _c,
|
|
27
36
|
movingAnimation = _a.movingAnimation,
|
|
28
37
|
children = _a.children,
|
|
29
|
-
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]);
|
|
38
|
+
options = tslib.__rest(_a, ["startAnimationClassName", "endAnimationClassName", "topOnClick", "topOnHover", "movingAnimation", "children"]); //controller
|
|
39
|
+
|
|
40
|
+
|
|
41
|
+
var controller = MintMapProvider.useMintMapController(); //element
|
|
30
42
|
|
|
31
|
-
var controller = MintMapProvider.useMintMapController();
|
|
32
43
|
var divRef = React.useRef(document.createElement('div'));
|
|
33
|
-
var divElement = divRef.current;
|
|
34
|
-
|
|
35
|
-
var
|
|
44
|
+
var divElement = divRef.current; //element clone for animation
|
|
45
|
+
|
|
46
|
+
var divCloneRef = React.useRef(); //marker
|
|
47
|
+
|
|
48
|
+
var markerRef = React.useRef(); //moving animation
|
|
36
49
|
|
|
37
50
|
var _d = React.useState({}),
|
|
38
51
|
movingState = _d[0],
|
|
39
52
|
setMovingState = _d[1];
|
|
40
53
|
|
|
41
54
|
React.useEffect(function () {
|
|
55
|
+
// console.log('movingState', movingState);
|
|
42
56
|
if (movingState.autoStart) {
|
|
43
57
|
setTimeout(function () {
|
|
44
58
|
start();
|
|
@@ -46,18 +60,20 @@ function MapMarkerWrapper(_a) {
|
|
|
46
60
|
}
|
|
47
61
|
}, [movingState]);
|
|
48
62
|
React.useEffect(function () {
|
|
63
|
+
// console.log('movingAnimation changed', movingAnimation);
|
|
49
64
|
if (movingAnimation) {
|
|
50
65
|
setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
|
|
51
66
|
marker: markerRef.current
|
|
52
67
|
}));
|
|
53
68
|
}
|
|
54
|
-
}, [movingAnimation]);
|
|
55
|
-
|
|
69
|
+
}, [movingAnimation]); //marker moving hook
|
|
70
|
+
|
|
71
|
+
var start = MarkerMovingHook.useMarkerMoving(movingState)[0]; //event handlers
|
|
56
72
|
|
|
57
73
|
var onClickHandler = function (e) {
|
|
58
74
|
var _a;
|
|
59
75
|
|
|
60
|
-
var marker = markerRef.current;
|
|
76
|
+
var marker = markerRef.current; //console.log('onClickHandler', marker);
|
|
61
77
|
|
|
62
78
|
if (marker) {
|
|
63
79
|
controller.setMapDragged(false);
|
|
@@ -76,7 +92,7 @@ function MapMarkerWrapper(_a) {
|
|
|
76
92
|
var onMouseOverHandler = function (e) {
|
|
77
93
|
var _a;
|
|
78
94
|
|
|
79
|
-
var marker = markerRef.current;
|
|
95
|
+
var marker = markerRef.current; //console.log('onMouseOverHandler', marker);
|
|
80
96
|
|
|
81
97
|
if (marker) {
|
|
82
98
|
var mouseOverHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('mouseover');
|
|
@@ -89,20 +105,26 @@ function MapMarkerWrapper(_a) {
|
|
|
89
105
|
|
|
90
106
|
next && topOnHover && controller.markerToTheTop(marker);
|
|
91
107
|
}
|
|
92
|
-
};
|
|
108
|
+
}; //create object
|
|
109
|
+
|
|
93
110
|
|
|
94
111
|
React.useEffect(function () {
|
|
112
|
+
// console.log('drawable created')
|
|
95
113
|
divElement.addEventListener('click', onClickHandler);
|
|
96
114
|
divElement.addEventListener('mouseover', onMouseOverHandler);
|
|
97
115
|
return function () {
|
|
116
|
+
//** kakao 는 viewport 안에 있는 마커만 렌더링하므로,
|
|
117
|
+
//마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
|
|
118
|
+
//그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
|
|
98
119
|
if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
|
|
99
120
|
divCloneRef.current.classList.add(endAnimationClassName);
|
|
100
121
|
|
|
101
122
|
var aniListener_1 = function () {
|
|
123
|
+
//console.log('animationend!!!', divCloneRef.current);
|
|
102
124
|
divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
|
|
103
125
|
|
|
104
126
|
if (markerRef.current) {
|
|
105
|
-
controller.clearDrawable(markerRef.current);
|
|
127
|
+
controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
|
|
106
128
|
}
|
|
107
129
|
|
|
108
130
|
divCloneRef.current = undefined;
|
|
@@ -115,35 +137,42 @@ function MapMarkerWrapper(_a) {
|
|
|
115
137
|
divElement.removeEventListener('mouseover', onMouseOverHandler);
|
|
116
138
|
|
|
117
139
|
if (markerRef.current) {
|
|
118
|
-
controller.clearDrawable(markerRef.current);
|
|
140
|
+
controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
|
|
119
141
|
}
|
|
120
142
|
}
|
|
121
143
|
};
|
|
122
|
-
}, []);
|
|
144
|
+
}, []); //create / update object
|
|
145
|
+
|
|
123
146
|
React.useEffect(function () {
|
|
124
147
|
if (options) {
|
|
125
148
|
if (markerRef.current) {
|
|
126
|
-
|
|
127
|
-
|
|
149
|
+
//console.log('update Marker')
|
|
150
|
+
controller.updateMarker(markerRef.current, options); //marker offset 보정
|
|
151
|
+
|
|
152
|
+
offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
|
|
128
153
|
|
|
129
|
-
if (
|
|
130
|
-
controller.setMarkerZIndex(markerRef.current,
|
|
154
|
+
if (options.zIndex !== undefined) {
|
|
155
|
+
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
131
156
|
}
|
|
132
157
|
} else {
|
|
133
|
-
|
|
158
|
+
//console.log('create Marker')
|
|
159
|
+
markerRef.current = new MapDrawables.Marker(options);
|
|
134
160
|
markerRef.current.element = divElement;
|
|
135
|
-
controller.createMarker(markerRef.current);
|
|
136
|
-
|
|
161
|
+
controller.createMarker(markerRef.current); //marker offset 보정
|
|
162
|
+
|
|
163
|
+
offsetCalibration(controller.getMapType(), divElement, options); //z-index 처리
|
|
164
|
+
|
|
165
|
+
if (options.zIndex !== undefined) {
|
|
166
|
+
controller.setMarkerZIndex(markerRef.current, options.zIndex);
|
|
167
|
+
} //moving 애니메이션 시작
|
|
137
168
|
|
|
138
|
-
if (markerRef.current.options.zIndex !== undefined) {
|
|
139
|
-
controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
|
|
140
|
-
}
|
|
141
169
|
|
|
142
170
|
if (movingAnimation) {
|
|
143
171
|
setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
|
|
144
172
|
marker: markerRef.current
|
|
145
173
|
}));
|
|
146
|
-
}
|
|
174
|
+
} //start animation
|
|
175
|
+
|
|
147
176
|
|
|
148
177
|
if (startAnimationClassName) {
|
|
149
178
|
divElement.style.visibility = 'hidden';
|
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
2
|
-
import { PolygonOptions } from "../../
|
|
3
|
-
export interface MapPolygonWrapperProps extends PolygonOptions {
|
|
4
|
-
}
|
|
5
|
-
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
import { PolygonOptions } from "../../types/MapDrawables";
|
|
3
|
+
export interface MapPolygonWrapperProps extends PolygonOptions {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Mint Map 컴포넌트
|
|
7
|
+
*
|
|
8
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
9
|
+
*
|
|
10
|
+
* @returns {JSX.Element} JSX
|
|
11
|
+
*/
|
|
12
|
+
export declare function MapPolygonWrapper({ children, ...options }: PropsWithChildren<MapPolygonWrapperProps>): JSX.Element;
|
|
@@ -5,32 +5,47 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var tslib = require('tslib');
|
|
6
6
|
var React = require('react');
|
|
7
7
|
var MintMapProvider = require('../provider/MintMapProvider.js');
|
|
8
|
-
var
|
|
8
|
+
var MapDrawables = require('../../types/MapDrawables.js');
|
|
9
9
|
|
|
10
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
11
|
|
|
12
12
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
13
13
|
|
|
14
|
+
/**
|
|
15
|
+
* Mint Map 컴포넌트
|
|
16
|
+
*
|
|
17
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
18
|
+
*
|
|
19
|
+
* @returns {JSX.Element} JSX
|
|
20
|
+
*/
|
|
21
|
+
|
|
14
22
|
function MapPolygonWrapper(_a) {
|
|
15
23
|
var children = _a.children,
|
|
16
|
-
options = tslib.__rest(_a, ["children"]);
|
|
24
|
+
options = tslib.__rest(_a, ["children"]); //controller
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
var controller = MintMapProvider.useMintMapController(); //lifecycle
|
|
17
28
|
|
|
18
|
-
var controller = MintMapProvider.useMintMapController();
|
|
19
29
|
React.useEffect(function () {
|
|
20
30
|
return function () {
|
|
21
31
|
if (polygonRef.current) {
|
|
32
|
+
// console.log('polygon cleared')
|
|
22
33
|
controller.clearDrawable(polygonRef.current);
|
|
23
34
|
}
|
|
24
35
|
};
|
|
25
|
-
}, []);
|
|
36
|
+
}, []); //create/update object
|
|
37
|
+
|
|
26
38
|
var polygonRef = React.useRef();
|
|
27
39
|
React.useEffect(function () {
|
|
40
|
+
//console.log('Polygon useEffect')
|
|
28
41
|
if (options) {
|
|
29
42
|
if (polygonRef.current) {
|
|
43
|
+
//console.log('update Polygon', options)
|
|
30
44
|
controller.updatePolygon(polygonRef.current, options);
|
|
31
45
|
} else {
|
|
32
|
-
var polygon = new
|
|
33
|
-
polygonRef.current = polygon;
|
|
46
|
+
var polygon = new MapDrawables.Polygon(options);
|
|
47
|
+
polygonRef.current = polygon; //console.log('create Polygon', options)
|
|
48
|
+
|
|
34
49
|
controller.createPolygon(polygon);
|
|
35
50
|
}
|
|
36
51
|
}
|
|
@@ -1,5 +1,12 @@
|
|
|
1
|
-
import { PropsWithChildren } from "react";
|
|
2
|
-
import { PolylineOptions } from "../../
|
|
3
|
-
export interface MapPolylineWrapperProps extends PolylineOptions {
|
|
4
|
-
}
|
|
5
|
-
|
|
1
|
+
import { PropsWithChildren } from "react";
|
|
2
|
+
import { PolylineOptions } from "../../types/MapDrawables";
|
|
3
|
+
export interface MapPolylineWrapperProps extends PolylineOptions {
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Mint Map 컴포넌트
|
|
7
|
+
*
|
|
8
|
+
* @param {MapControlWrapperProps} MapControlWrapperProps
|
|
9
|
+
*
|
|
10
|
+
* @returns {JSX.Element} JSX
|
|
11
|
+
*/
|
|
12
|
+
export declare function MapPolylineWrapper({ children, ...options }: PropsWithChildren<MapPolylineWrapperProps>): JSX.Element;
|