@mint-ui/map 0.5.1-beta → 0.5.3-beta

package/dist/components/mint-map/MintMap.js

@@ -53,9 +53,15 @@ function MintMap(_a) {
   var loading = React.useMemo(function () {
     return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
   }, [mapLoadingComponent]);
+  var prevController = React.useRef();
   React.useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
+
+      if (prevController.current) {
+        prevController.current.destroyMap();
+      }
+
       var newController_1 = mapType === 'naver' ? new NaverMintMapController.NaverMintMapController(tslib.__assign(tslib.__assign({
         mapType: mapType
       }, props), {
@@ -69,24 +75,11 @@ function MintMap(_a) {
       }, props), {
         base: base
       })) : null;
+      newController_1 && (prevController.current = newController_1);
 
       if (newController_1) {
         newController_1.loadMapApi().then(function () {
-          setController(newController_1); // fade in 로직은 일단 스킵
-          // if(dissolveEffectWhenLoaded && loadingRef.current){
-          // 	const elemStyle = loadingRef.current.style
-          // 	elemStyle.background = 'white'
-          // 	elemStyle.opacity = '0'
-          // 	elemStyle.animationDuration = '0.1s'
-          // 	loadingRef.current.addEventListener('animationend', ()=>{
-          // 		setController(newController as MintMapController)
-          // 	}, {
-          // 		once:true
-          // 	})
-          // 	loadingRef.current.classList.add(cn('ani-fade-in'))
-          // }else{
-          // 	setController(newController as MintMapController)
-          // }
+          setController(newController_1);
         });
       } else {
         throw new Error("Not Supported Map type ".concat(mapType));

package/dist/components/mint-map/core/MintMapCore.js

@@ -35,6 +35,7 @@ function MintMapCore(_a) {
       mapInitialized = _d[0],
       setMapInitialized = _d[1];
 
+  var currMapInitialized = React.useRef(false);
   React.useEffect(function () {
     (function () {
       return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -47,16 +48,21 @@ function MintMapCore(_a) {
               , 2];
               return [4
               /*yield*/
-              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
-              ];
+              , controller.initializingMap(elementRef.current)];
 
             case 1:
-              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              map_1 = _a.sent();
+
+              if (!currMapInitialized.current) {
+                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                setTimeout(function () {
+                  // console.log('setMapInitialized true');
+                  setMapInitialized(true);
+                  onLoad && onLoad(map_1, controller);
+                }, 100);
+              }
 
-              setTimeout(function () {
-                setMapInitialized(true);
-                onLoad && onLoad(map_1, controller);
-              }, 100);
               _a.label = 2;
 
             case 2:
@@ -67,10 +73,6 @@ function MintMapCore(_a) {
         });
       });
     })();
-
-    return function () {
-      controller && controller.destroyMap();
-    };
   }, [controller, elementRef]); //줌레벨
 
   React.useEffect(function () {

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.d.ts

@@ -17,7 +17,17 @@ export interface MapMarkerMoving {
 export interface MapMarkerWrapperProps extends MarkerOptions {
     topOnClick?: boolean;
     topOnHover?: boolean;
+    /**
+     * 메모리 누수의 위험성이 존재하여 삭제될 예정
+     * animation 은 marker wrapper 의 children 레벨에서 구현하는것을 기본으로 한다.
+     * @deprecated
+     */
     startAnimationClassName?: string;
+    /**
+     * 메모리 누수의 위험성이 존재하여 삭제될 예정
+     * animation 은 marker wrapper 의 children 레벨에서 구현하는것을 기본으로 한다.
+     * @deprecated
+     */
     endAnimationClassName?: string;
     movingAnimation?: MapMarkerMoving;
     disablePointerEvent?: boolean;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -27,9 +27,9 @@ var offsetCalibration = function (mapType, divElement, options) {
 
 
 function MapMarkerWrapper(_a) {
-  var startAnimationClassName = _a.startAnimationClassName,
-      endAnimationClassName = _a.endAnimationClassName,
-      _b = _a.topOnClick,
+  _a.startAnimationClassName;
+      _a.endAnimationClassName;
+      var _b = _a.topOnClick,
       topOnClick = _b === void 0 ? false : _b,
       _c = _a.topOnHover,
       topOnHover = _c === void 0 ? false : _c,
@@ -43,9 +43,7 @@ function MapMarkerWrapper(_a) {
   var controller = MintMapProvider.useMintMapController(); //element
 
   var divRef = React.useRef(document.createElement('div'));
-  var divElement = divRef.current; //element clone for animation
-
-  var divCloneRef = React.useRef(); //marker
+  var divElement = divRef.current; //marker
 
   var markerRef = React.useRef(); //moving animation
 
@@ -120,32 +118,12 @@ function MapMarkerWrapper(_a) {
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
-      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
-      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
-      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
-      if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
-        divCloneRef.current.classList.add(endAnimationClassName);
-
-        var aniListener_1 = function () {
-          //console.log('animationend!!!', divCloneRef.current);
-          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
-
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-          }
-
-          divCloneRef.current = undefined;
-        };
+      divElement.removeEventListener('click', onClickHandler);
+      divElement.removeEventListener('mouseover', onMouseOverHandler);
 
-        divCloneRef.current.addEventListener('animationend', aniListener_1);
-        divElement.append(divCloneRef.current);
-      } else {
-        divElement.removeEventListener('click', onClickHandler);
-        divElement.removeEventListener('mouseover', onMouseOverHandler);
-
-        if (markerRef.current) {
-          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-        }
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined; // console.log('drawable cleared')
       }
     };
   }, []); //create / update object
@@ -190,31 +168,6 @@ function MapMarkerWrapper(_a) {
           setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
             marker: markerRef.current
           }));
-        } //start animation
-
-
-        if (startAnimationClassName) {
-          divElement.style.visibility = 'hidden';
-          setTimeout(function () {
-            var _a, _b;
-
-            divCloneRef.current = divElement.firstElementChild;
-            divElement.style.visibility = 'visible';
-            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
-
-            var aniListener = function () {
-              var _a, _b;
-
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-            };
-
-            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-          });
-        } else {
-          setTimeout(function () {
-            divCloneRef.current = divElement.firstElementChild;
-          });
         }
       }
     }

package/dist/components/mint-map/core/wrapper/MapPolygonWrapper.js

@@ -31,6 +31,7 @@ function MapPolygonWrapper(_a) {
       if (polygonRef.current) {
         // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
+        polygonRef.current = undefined;
       }
     };
   }, []); //create/update object

package/dist/components/mint-map/core/wrapper/MapPolylineWrapper.js

@@ -29,7 +29,8 @@ function MapPolylineWrapper(_a) {
   React.useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
+        controller.clearDrawable(polylineRef.current);
+        polylineRef.current = undefined; // console.log('polyline cleared')
       }
     };
   }, []); //create/update object

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -605,7 +605,6 @@ function (_super) {
         };
         callback(param);
       } else if (eventName in _this.mapUIEvent) {
-        if (eventName.startsWith('DRAG')) console.log(eventName, e);
         var position = null;
 
         if (e) {
@@ -621,7 +620,8 @@ function (_super) {
           vendorEventName: googleEventName,
           param: {
             position: position,
-            offset: position === null || position === void 0 ? void 0 : position.offset
+            offset: position === null || position === void 0 ? void 0 : position.offset,
+            pointerEvent: e.domEvent
           }
         };
         callback(param);

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -31,7 +31,9 @@ function (_super) {
     _this.dragged = false;
     _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
 
-    _this.mapEvent.ZOOMSTART = 'zoom_start';
+    _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+    _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
@@ -470,6 +472,7 @@ function (_super) {
                     minZoom = 14;
                   }
 
+                  divElement.innerHTML = '';
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
@@ -557,6 +560,7 @@ function (_super) {
     var _a;
 
     try {
+      this.removeAllEventListener();
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('kakao map destroy error', e);

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -29,7 +29,9 @@ function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    _this.eventMap = new Map();
+    _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+    _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
@@ -505,6 +507,7 @@ function (_super) {
 
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
+                  divElement.innerHTML = '';
                   map = new naver.maps.Map(divElement, options);
                   this.map = map; //@ts-ignore
 
@@ -671,7 +674,8 @@ function (_super) {
           vendorEventName: naverEventName,
           param: {
             position: position,
-            offset: position.offset
+            offset: position.offset,
+            pointerEvent: e.pointerEvent
           }
         };
         callback(param);

package/dist/components/mint-map/types/MapEventTypes.d.ts

@@ -19,6 +19,8 @@ export declare class MapUIEvent {
     DRAG: string;
     DRAGSTART: string;
     DRAGEND: string;
+    RIGHTCLICK: string;
+    CONTEXTMENU: string;
     get(eventName: MapEventName): string | undefined;
 }
 export declare type MapEventName = keyof MapEvent | keyof MapUIEvent;
@@ -30,6 +32,7 @@ export declare type MapEventParam = {
 export declare type MapUIEventParam = {
     offset: Offset;
     position: Position;
+    pointerEvent?: PointerEvent;
 };
 export declare type EventParamType = MapEventParam & MapUIEventParam;
 export interface EventParam<T> {

package/dist/components/mint-map/types/MapEventTypes.js

@@ -40,6 +40,8 @@ function () {
     this.DRAG = 'drag';
     this.DRAGSTART = 'dragstart';
     this.DRAGEND = 'dragend';
+    this.RIGHTCLICK = 'rightclick';
+    this.CONTEXTMENU = 'contextmenu';
   }
 
   MapUIEvent.prototype.get = function (eventName) {

package/dist/index.es.js

@@ -626,6 +626,7 @@ function MintMapCore(_a) {
       mapInitialized = _d[0],
       setMapInitialized = _d[1];
 
+  var currMapInitialized = useRef(false);
   useEffect(function () {
     (function () {
       return __awaiter(_this, void 0, void 0, function () {
@@ -638,16 +639,21 @@ function MintMapCore(_a) {
               , 2];
               return [4
               /*yield*/
-              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
-              ];
+              , controller.initializingMap(elementRef.current)];
 
             case 1:
-              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              map_1 = _a.sent();
+
+              if (!currMapInitialized.current) {
+                currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                setTimeout(function () {
+                  // console.log('setMapInitialized true');
+                  setMapInitialized(true);
+                  onLoad && onLoad(map_1, controller);
+                }, 100);
+              }
 
-              setTimeout(function () {
-                setMapInitialized(true);
-                onLoad && onLoad(map_1, controller);
-              }, 100);
               _a.label = 2;
 
             case 2:
@@ -658,10 +664,6 @@ function MintMapCore(_a) {
         });
       });
     })();
-
-    return function () {
-      controller && controller.destroyMap();
-    };
   }, [controller, elementRef]); //줌레벨
 
   useEffect(function () {
@@ -1121,6 +1123,8 @@ function () {
     this.DRAG = 'drag';
     this.DRAGSTART = 'dragstart';
     this.DRAGEND = 'dragend';
+    this.RIGHTCLICK = 'rightclick';
+    this.CONTEXTMENU = 'contextmenu';
   }
 
   MapUIEvent.prototype.get = function (eventName) {
@@ -1154,7 +1158,9 @@ function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    _this.eventMap = new Map();
+    _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+    _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
@@ -1630,6 +1636,7 @@ function (_super) {
 
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
+                  divElement.innerHTML = '';
                   map = new naver.maps.Map(divElement, options);
                   this.map = map; //@ts-ignore
 
@@ -1796,7 +1803,8 @@ function (_super) {
           vendorEventName: naverEventName,
           param: {
             position: position,
-            offset: position.offset
+            offset: position.offset,
+            pointerEvent: e.pointerEvent
           }
         };
         callback(param);
@@ -2446,7 +2454,6 @@ function (_super) {
         };
         callback(param);
       } else if (eventName in _this.mapUIEvent) {
-        if (eventName.startsWith('DRAG')) console.log(eventName, e);
         var position = null;
 
         if (e) {
@@ -2462,7 +2469,8 @@ function (_super) {
           vendorEventName: googleEventName,
           param: {
             position: position,
-            offset: position === null || position === void 0 ? void 0 : position.offset
+            offset: position === null || position === void 0 ? void 0 : position.offset,
+            pointerEvent: e.domEvent
           }
         };
         callback(param);
@@ -2541,7 +2549,9 @@ function (_super) {
     _this.dragged = false;
     _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
 
-    _this.mapEvent.ZOOMSTART = 'zoom_start';
+    _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+    _this.mapUIEvent.CONTEXTMENU = 'rightclick';
     Object.freeze(_this.mapEvent);
     Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
@@ -2980,6 +2990,7 @@ function (_super) {
                     minZoom = 14;
                   }
 
+                  divElement.innerHTML = '';
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
@@ -3067,6 +3078,7 @@ function (_super) {
     var _a;
 
     try {
+      this.removeAllEventListener();
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('kakao map destroy error', e);
@@ -3264,9 +3276,15 @@ function MintMap(_a) {
   var loading = useMemo(function () {
     return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
   }, [mapLoadingComponent]);
+  var prevController = useRef();
   useEffect(function () {
     if (mapType && mapType.length > 0) {
       setController(undefined);
+
+      if (prevController.current) {
+        prevController.current.destroyMap();
+      }
+
       var newController_1 = mapType === 'naver' ? new NaverMintMapController(__assign(__assign({
         mapType: mapType
       }, props), {
@@ -3280,24 +3298,11 @@ function MintMap(_a) {
       }, props), {
         base: base
       })) : null;
+      newController_1 && (prevController.current = newController_1);
 
       if (newController_1) {
         newController_1.loadMapApi().then(function () {
-          setController(newController_1); // fade in 로직은 일단 스킵
-          // if(dissolveEffectWhenLoaded && loadingRef.current){
-          // 	const elemStyle = loadingRef.current.style
-          // 	elemStyle.background = 'white'
-          // 	elemStyle.opacity = '0'
-          // 	elemStyle.animationDuration = '0.1s'
-          // 	loadingRef.current.addEventListener('animationend', ()=>{
-          // 		setController(newController as MintMapController)
-          // 	}, {
-          // 		once:true
-          // 	})
-          // 	loadingRef.current.classList.add(cn('ani-fade-in'))
-          // }else{
-          // 	setController(newController as MintMapController)
-          // }
+          setController(newController_1);
         });
       } else {
         throw new Error("Not Supported Map type ".concat(mapType));
@@ -3899,9 +3904,9 @@ var offsetCalibration = function (mapType, divElement, options) {
 
 
 function MapMarkerWrapper(_a) {
-  var startAnimationClassName = _a.startAnimationClassName,
-      endAnimationClassName = _a.endAnimationClassName,
-      _b = _a.topOnClick,
+  _a.startAnimationClassName;
+      _a.endAnimationClassName;
+      var _b = _a.topOnClick,
       topOnClick = _b === void 0 ? false : _b,
       _c = _a.topOnHover,
       topOnHover = _c === void 0 ? false : _c,
@@ -3915,9 +3920,7 @@ function MapMarkerWrapper(_a) {
   var controller = useMintMapController(); //element
 
   var divRef = useRef(document.createElement('div'));
-  var divElement = divRef.current; //element clone for animation
-
-  var divCloneRef = useRef(); //marker
+  var divElement = divRef.current; //marker
 
   var markerRef = useRef(); //moving animation
 
@@ -3992,32 +3995,12 @@ function MapMarkerWrapper(_a) {
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
-      //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
-      //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
-      //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
-      if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
-        divCloneRef.current.classList.add(endAnimationClassName);
-
-        var aniListener_1 = function () {
-          //console.log('animationend!!!', divCloneRef.current);
-          divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
-
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-          }
+      divElement.removeEventListener('click', onClickHandler);
+      divElement.removeEventListener('mouseover', onMouseOverHandler);
 
-          divCloneRef.current = undefined;
-        };
-
-        divCloneRef.current.addEventListener('animationend', aniListener_1);
-        divElement.append(divCloneRef.current);
-      } else {
-        divElement.removeEventListener('click', onClickHandler);
-        divElement.removeEventListener('mouseover', onMouseOverHandler);
-
-        if (markerRef.current) {
-          controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-        }
+      if (markerRef.current) {
+        controller.clearDrawable(markerRef.current);
+        markerRef.current = undefined; // console.log('drawable cleared')
       }
     };
   }, []); //create / update object
@@ -4062,31 +4045,6 @@ function MapMarkerWrapper(_a) {
           setMovingState(__assign(__assign({}, movingAnimation), {
             marker: markerRef.current
           }));
-        } //start animation
-
-
-        if (startAnimationClassName) {
-          divElement.style.visibility = 'hidden';
-          setTimeout(function () {
-            var _a, _b;
-
-            divCloneRef.current = divElement.firstElementChild;
-            divElement.style.visibility = 'visible';
-            (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
-
-            var aniListener = function () {
-              var _a, _b;
-
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-            };
-
-            (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-          });
-        } else {
-          setTimeout(function () {
-            divCloneRef.current = divElement.firstElementChild;
-          });
         }
       }
     }
@@ -4534,6 +4492,7 @@ function MapPolygonWrapper(_a) {
       if (polygonRef.current) {
         // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
+        polygonRef.current = undefined;
       }
     };
   }, []); //create/update object
@@ -5054,7 +5013,8 @@ function MapPolylineWrapper(_a) {
   useEffect(function () {
     return function () {
       if (polylineRef.current) {
-        controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
+        controller.clearDrawable(polylineRef.current);
+        polylineRef.current = undefined; // console.log('polyline cleared')
       }
     };
   }, []); //create/update object

package/dist/index.umd.js

@@ -630,6 +630,7 @@
         mapInitialized = _d[0],
         setMapInitialized = _d[1];
 
+    var currMapInitialized = React.useRef(false);
     React.useEffect(function () {
       (function () {
         return tslib.__awaiter(_this, void 0, void 0, function () {
@@ -642,16 +643,21 @@
                 , 2];
                 return [4
                 /*yield*/
-                , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
-                ];
+                , controller.initializingMap(elementRef.current)];
 
               case 1:
-                map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+                map_1 = _a.sent();
+
+                if (!currMapInitialized.current) {
+                  currMapInitialized.current = true; //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
+                  setTimeout(function () {
+                    // console.log('setMapInitialized true');
+                    setMapInitialized(true);
+                    onLoad && onLoad(map_1, controller);
+                  }, 100);
+                }
 
-                setTimeout(function () {
-                  setMapInitialized(true);
-                  onLoad && onLoad(map_1, controller);
-                }, 100);
                 _a.label = 2;
 
               case 2:
@@ -662,10 +668,6 @@
           });
         });
       })();
-
-      return function () {
-        controller && controller.destroyMap();
-      };
     }, [controller, elementRef]); //줌레벨
 
     React.useEffect(function () {
@@ -1125,6 +1127,8 @@
       this.DRAG = 'drag';
       this.DRAGSTART = 'dragstart';
       this.DRAGEND = 'dragend';
+      this.RIGHTCLICK = 'rightclick';
+      this.CONTEXTMENU = 'contextmenu';
     }
 
     MapUIEvent.prototype.get = function (eventName) {
@@ -1158,7 +1162,9 @@
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
       _this.dragStartPoint = [0, 0];
       _this.dragged = false;
-      _this.eventMap = new Map();
+      _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+      _this.mapUIEvent.CONTEXTMENU = 'rightclick';
       Object.freeze(_this.mapEvent);
       Object.freeze(_this.mapUIEvent);
       return _this; // console.log(`${this.type} controller loadded`);
@@ -1634,6 +1640,7 @@
 
                     options.minZoom = minZoom;
                     options.maxZoom = maxZoom;
+                    divElement.innerHTML = '';
                     map = new naver.maps.Map(divElement, options);
                     this.map = map; //@ts-ignore
 
@@ -1800,7 +1807,8 @@
             vendorEventName: naverEventName,
             param: {
               position: position,
-              offset: position.offset
+              offset: position.offset,
+              pointerEvent: e.pointerEvent
             }
           };
           callback(param);
@@ -2450,7 +2458,6 @@
           };
           callback(param);
         } else if (eventName in _this.mapUIEvent) {
-          if (eventName.startsWith('DRAG')) console.log(eventName, e);
           var position = null;
 
           if (e) {
@@ -2466,7 +2473,8 @@
             vendorEventName: googleEventName,
             param: {
               position: position,
-              offset: position === null || position === void 0 ? void 0 : position.offset
+              offset: position === null || position === void 0 ? void 0 : position.offset,
+              pointerEvent: e.domEvent
             }
           };
           callback(param);
@@ -2545,7 +2553,9 @@
       _this.dragged = false;
       _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
 
-      _this.mapEvent.ZOOMSTART = 'zoom_start';
+      _this.mapEvent.ZOOMSTART = 'zoom_start'; //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
+
+      _this.mapUIEvent.CONTEXTMENU = 'rightclick';
       Object.freeze(_this.mapEvent);
       Object.freeze(_this.mapUIEvent);
       return _this; // console.log(`${this.type} controller loadded`);
@@ -2984,6 +2994,7 @@
                       minZoom = 14;
                     }
 
+                    divElement.innerHTML = '';
                     map = new kakao.maps.Map(divElement, options);
                     map.setMaxLevel(minZoom);
                     map.setMinLevel(maxZoom);
@@ -3071,6 +3082,7 @@
       var _a;
 
       try {
+        this.removeAllEventListener();
         (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
       } catch (e) {
         console.log('kakao map destroy error', e);
@@ -3268,9 +3280,15 @@
     var loading = React.useMemo(function () {
       return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
     }, [mapLoadingComponent]);
+    var prevController = React.useRef();
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
         setController(undefined);
+
+        if (prevController.current) {
+          prevController.current.destroyMap();
+        }
+
         var newController_1 = mapType === 'naver' ? new NaverMintMapController(tslib.__assign(tslib.__assign({
           mapType: mapType
         }, props), {
@@ -3284,24 +3302,11 @@
         }, props), {
           base: base
         })) : null;
+        newController_1 && (prevController.current = newController_1);
 
         if (newController_1) {
           newController_1.loadMapApi().then(function () {
-            setController(newController_1); // fade in 로직은 일단 스킵
-            // if(dissolveEffectWhenLoaded && loadingRef.current){
-            // 	const elemStyle = loadingRef.current.style
-            // 	elemStyle.background = 'white'
-            // 	elemStyle.opacity = '0'
-            // 	elemStyle.animationDuration = '0.1s'
-            // 	loadingRef.current.addEventListener('animationend', ()=>{
-            // 		setController(newController as MintMapController)
-            // 	}, {
-            // 		once:true
-            // 	})
-            // 	loadingRef.current.classList.add(cn('ani-fade-in'))
-            // }else{
-            // 	setController(newController as MintMapController)
-            // }
+            setController(newController_1);
           });
         } else {
           throw new Error("Not Supported Map type ".concat(mapType));
@@ -3903,9 +3908,9 @@
 
 
   function MapMarkerWrapper(_a) {
-    var startAnimationClassName = _a.startAnimationClassName,
-        endAnimationClassName = _a.endAnimationClassName,
-        _b = _a.topOnClick,
+    _a.startAnimationClassName;
+        _a.endAnimationClassName;
+        var _b = _a.topOnClick,
         topOnClick = _b === void 0 ? false : _b,
         _c = _a.topOnHover,
         topOnHover = _c === void 0 ? false : _c,
@@ -3919,9 +3924,7 @@
     var controller = useMintMapController(); //element
 
     var divRef = React.useRef(document.createElement('div'));
-    var divElement = divRef.current; //element clone for animation
-
-    var divCloneRef = React.useRef(); //marker
+    var divElement = divRef.current; //marker
 
     var markerRef = React.useRef(); //moving animation
 
@@ -3996,32 +3999,12 @@
       divElement.addEventListener('click', onClickHandler);
       divElement.addEventListener('mouseover', onMouseOverHandler);
       return function () {
-        //** kakao 는 viewport 안에 있는 마커만 렌더링하므로, 
-        //마커 해제가 되더라도 애니메이션 이벤트가 일어나지 않아서 해지된 마커가 잠시 보이는 현상이 있음
-        //그래서 kakao 일때는 endAnimationClassName 영향을 받지 않도록 처리함
-        if (divCloneRef.current && endAnimationClassName && controller.getMapType() !== 'kakao') {
-          divCloneRef.current.classList.add(endAnimationClassName);
-
-          var aniListener_1 = function () {
-            //console.log('animationend!!!', divCloneRef.current);
-            divCloneRef.current && divCloneRef.current.removeEventListener('animationend', aniListener_1);
-
-            if (markerRef.current) {
-              controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-            }
+        divElement.removeEventListener('click', onClickHandler);
+        divElement.removeEventListener('mouseover', onMouseOverHandler);
 
-            divCloneRef.current = undefined;
-          };
-
-          divCloneRef.current.addEventListener('animationend', aniListener_1);
-          divElement.append(divCloneRef.current);
-        } else {
-          divElement.removeEventListener('click', onClickHandler);
-          divElement.removeEventListener('mouseover', onMouseOverHandler);
-
-          if (markerRef.current) {
-            controller.clearDrawable(markerRef.current); // console.log('drawable cleared')
-          }
+        if (markerRef.current) {
+          controller.clearDrawable(markerRef.current);
+          markerRef.current = undefined; // console.log('drawable cleared')
         }
       };
     }, []); //create / update object
@@ -4066,31 +4049,6 @@
             setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
               marker: markerRef.current
             }));
-          } //start animation
-
-
-          if (startAnimationClassName) {
-            divElement.style.visibility = 'hidden';
-            setTimeout(function () {
-              var _a, _b;
-
-              divCloneRef.current = divElement.firstElementChild;
-              divElement.style.visibility = 'visible';
-              (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.add(startAnimationClassName);
-
-              var aniListener = function () {
-                var _a, _b;
-
-                (_a = divElement.firstElementChild) === null || _a === void 0 ? void 0 : _a.classList.remove(startAnimationClassName);
-                (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.removeEventListener('animationend', aniListener);
-              };
-
-              (_b = divElement.firstElementChild) === null || _b === void 0 ? void 0 : _b.addEventListener('animationend', aniListener);
-            });
-          } else {
-            setTimeout(function () {
-              divCloneRef.current = divElement.firstElementChild;
-            });
           }
         }
       }
@@ -4538,6 +4496,7 @@
         if (polygonRef.current) {
           // console.log('polygon cleared')
           controller.clearDrawable(polygonRef.current);
+          polygonRef.current = undefined;
         }
       };
     }, []); //create/update object
@@ -5058,7 +5017,8 @@
     React.useEffect(function () {
       return function () {
         if (polylineRef.current) {
-          controller.clearDrawable(polylineRef.current); // console.log('polyline cleared')
+          controller.clearDrawable(polylineRef.current);
+          polylineRef.current = undefined; // console.log('polyline cleared')
         }
       };
     }, []); //create/update object

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.5.1-beta",
+  "version": "0.5.3-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",