@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.
Files changed (65) hide show
  1. package/.eslintrc.js +109 -109
  2. package/LICENSE +21 -21
  3. package/README.md +73 -73
  4. package/dist/components/mint-map/MintMap.d.ts +10 -117
  5. package/dist/components/mint-map/MintMap.js +24 -421
  6. package/dist/components/mint-map/core/MintMapCanvasRenderer.d.ts +4 -4
  7. package/dist/components/mint-map/core/MintMapCanvasRenderer.js +3 -1
  8. package/dist/components/mint-map/core/MintMapController.d.ts +58 -44
  9. package/dist/components/mint-map/core/MintMapController.js +49 -15
  10. package/dist/components/mint-map/core/MintMapCore.d.ts +3 -3
  11. package/dist/components/mint-map/core/MintMapCore.js +22 -10
  12. package/dist/components/mint-map/core/advanced/MapBuildingProjection.d.ts +15 -15
  13. package/dist/components/mint-map/core/advanced/MapBuildingProjection.js +11 -7
  14. package/dist/components/mint-map/core/advanced/MapLoadingComponents.d.ts +17 -0
  15. package/dist/components/mint-map/core/advanced/MapLoadingComponents.js +257 -0
  16. package/dist/components/mint-map/core/advanced/index.d.ts +2 -1
  17. package/dist/components/mint-map/core/hooks/MarkerMovingHook.d.ts +6 -6
  18. package/dist/components/mint-map/core/hooks/MarkerMovingHook.js +17 -8
  19. package/dist/components/mint-map/core/hooks/index.d.ts +1 -1
  20. package/dist/components/mint-map/core/index.d.ts +8 -8
  21. package/dist/components/mint-map/core/provider/MintMapProvider.d.ts +8 -8
  22. package/dist/components/mint-map/core/provider/index.d.ts +1 -1
  23. package/dist/components/mint-map/core/util/animation.d.ts +16 -16
  24. package/dist/components/mint-map/core/util/animation.js +14 -5
  25. package/dist/components/mint-map/core/util/calculate.d.ts +39 -34
  26. package/dist/components/mint-map/core/util/calculate.js +65 -26
  27. package/dist/components/mint-map/core/util/cluster.d.ts +18 -18
  28. package/dist/components/mint-map/core/util/cluster.js +14 -9
  29. package/dist/components/mint-map/core/util/index.d.ts +4 -4
  30. package/dist/components/mint-map/core/util/waiting.d.ts +1 -1
  31. package/dist/components/mint-map/core/util/waiting.js +6 -2
  32. package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.d.ts +27 -19
  33. package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js +9 -0
  34. package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.d.ts +11 -4
  35. package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.js +107 -35
  36. package/dist/components/mint-map/core/wrapper/MapControlWrapper.d.ts +18 -11
  37. package/dist/components/mint-map/core/wrapper/MapControlWrapper.js +8 -0
  38. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts +31 -23
  39. package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js +54 -25
  40. package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.d.ts +12 -5
  41. package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.js +21 -6
  42. package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.d.ts +12 -5
  43. package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js +21 -7
  44. package/dist/components/mint-map/core/wrapper/index.d.ts +6 -6
  45. package/dist/components/mint-map/google/GoogleMintMapController.d.ts +42 -39
  46. package/dist/components/mint-map/google/GoogleMintMapController.js +90 -44
  47. package/dist/components/mint-map/index.d.ts +5 -4
  48. package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts +48 -44
  49. package/dist/components/mint-map/kakao/KakaoMintMapController.js +147 -65
  50. package/dist/components/mint-map/naver/NaverMintMapController.d.ts +45 -42
  51. package/dist/components/mint-map/naver/NaverMintMapController.js +136 -49
  52. package/dist/components/mint-map/types/CommonTypes.d.ts +11 -0
  53. package/dist/components/mint-map/types/MapDrawables.d.ts +110 -0
  54. package/dist/components/mint-map/types/MapDrawables.js +92 -0
  55. package/dist/components/mint-map/types/MapTypes.d.ts +59 -0
  56. package/dist/components/mint-map/types/MapTypes.js +151 -0
  57. package/dist/components/mint-map/types/MintMapEvents.d.ts +25 -0
  58. package/dist/components/mint-map/types/MintMapProps.d.ts +92 -0
  59. package/dist/components/mint-map/types/index.d.ts +5 -0
  60. package/dist/index.d.ts +7 -1
  61. package/dist/index.es.js +1505 -946
  62. package/dist/index.js +12 -9
  63. package/dist/index.umd.js +1505 -946
  64. package/package.json +77 -77
  65. 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 MintMap = require('../../MintMap.js');
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
- var controller = MintMapProvider.useMintMapController();
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
- var renderer = React.useRef();
32
- var containerRef = React.useRef(null);
33
- var canvasRef = React.useRef(null);
34
- var contextRef = React.useRef();
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 MintMap.Position(0, 0);
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
- var pos = item.position;
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
- break;
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
- var hitSet = processMouseEvent(clickedOffset, 'onMouseOver');
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
- export declare function MapControlWrapper({ width, height, positionHorizontal, positionVertical, children }: PropsWithChildren<MapControlWrapperProps>): JSX.Element;
11
- export {};
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, Position } from "../../MintMap";
3
- export declare type MovingEventFunciton = () => void;
4
- export interface MapMarkerMoving {
5
- positions?: Position[];
6
- positionClosed?: boolean;
7
- startPositionIndex?: number;
8
- velocity?: number;
9
- loop?: boolean;
10
- delay?: number;
11
- autoStart?: boolean;
12
- fps?: number;
13
- onMovingStart?: MovingEventFunciton;
14
- onMovingEnd?: MovingEventFunciton;
15
- }
16
- export interface MapMarkerWrapperProps extends MarkerOptions {
17
- topOnClick?: boolean;
18
- topOnHover?: boolean;
19
- startAnimationClassName?: string;
20
- endAnimationClassName?: string;
21
- movingAnimation?: MapMarkerMoving;
22
- }
23
- export declare function MapMarkerWrapper({ startAnimationClassName, endAnimationClassName, topOnClick, topOnHover, movingAnimation, children, ...options }: PropsWithChildren<MapMarkerWrapperProps>): JSX.Element;
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
- var divCloneRef = React.useRef();
35
- var markerRef = React.useRef();
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
- var start = MarkerMovingHook.useMarkerMoving(movingState)[0];
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
- controller.updateMarker(markerRef.current, options);
127
- offsetCalibration(controller.getMapType(), divElement, options);
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 (markerRef.current.options.zIndex !== undefined) {
130
- controller.setMarkerZIndex(markerRef.current, markerRef.current.options.zIndex);
154
+ if (options.zIndex !== undefined) {
155
+ controller.setMarkerZIndex(markerRef.current, options.zIndex);
131
156
  }
132
157
  } else {
133
- markerRef.current = new MintMap.Marker(options);
158
+ //console.log('create Marker')
159
+ markerRef.current = new MapDrawables.Marker(options);
134
160
  markerRef.current.element = divElement;
135
- controller.createMarker(markerRef.current);
136
- offsetCalibration(controller.getMapType(), divElement, options);
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 "../../MintMap";
3
- export interface MapPolygonWrapperProps extends PolygonOptions {
4
- }
5
- export declare function MapPolygonWrapper({ children, ...options }: PropsWithChildren<MapPolygonWrapperProps>): JSX.Element;
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 MintMap = require('../../MintMap.js');
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 MintMap.Polygon(options);
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 "../../MintMap";
3
- export interface MapPolylineWrapperProps extends PolylineOptions {
4
- }
5
- export declare function MapPolylineWrapper({ children, ...options }: PropsWithChildren<MapPolylineWrapperProps>): JSX.Element;
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;