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

package/dist/index.umd.js

@@ -441,23 +441,23 @@
     return GeoCalulator;
   }();
 
-  /**
-   * 좌표값
-   * @description 위도/경도, DOM 상의 X/Y 좌표
+  /**
+   * 좌표값
+   * @description 위도/경도, DOM 상의 X/Y 좌표
    */
 
   var Position =
   /** @class */
   function () {
     function Position(lat, lng) {
-      /**
-       * 위도
-       * @description 위도(latitude)
+      /**
+       * 위도
+       * @description 위도(latitude)
        */
       this.lat = 0;
-      /**
-       * 경도
-       * @description 경도(longitude)
+      /**
+       * 경도
+       * @description 경도(longitude)
        */
 
       this.lng = 0;
@@ -565,15 +565,15 @@
 
     return Bounds;
   }();
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
 
   var Offset =
   /** @class */
   function () {
-    /**
-     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+    /**
+     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
      */
     function Offset(x, y) {
       this.x = x;
@@ -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 () {
@@ -799,12 +801,12 @@
     MintMapController.prototype.getRandomFunctionName = function (prefix) {
       return "".concat(prefix, "_").concat(uuid.v4().replace(/-/g, '_'));
     };
-    /**
-     * URL 빌더 메서드
-     *
-     * @param {string} baseUrl: 기본 URL
-     * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
-     * @returns {string} URL
+    /**
+     * URL 빌더 메서드
+     *
+     * @param {string} baseUrl: 기본 URL
+     * @param {{ [ key: string ]: string | string[] }} param: 파라미터 JSON
+     * @returns {string} URL
      */
 
 
@@ -817,9 +819,9 @@
       }).join('&');
       return "".concat(baseUrl, "?").concat(params);
     };
-    /**
-     * 쓰로틀링 처리
-     * @returns
+    /**
+     * 쓰로틀링 처리
+     * @returns
      */
 
 
@@ -1380,11 +1382,11 @@
         var map = marker.native.getMap();
 
         if (map) {
-          /** 중요!!!!
-           * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
-           * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
-           * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
-           * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+          /** 중요!!!!
+           * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+           * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+           * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+           * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
           */
           //Position
           if (options.position && options.position instanceof Position) {
@@ -1638,6 +1640,7 @@
 
                     options.minZoom = minZoom;
                     options.maxZoom = maxZoom;
+                    divElement.innerHTML = '';
                     map = new naver.maps.Map(divElement, options);
                     this.map = map; //@ts-ignore
 
@@ -2991,6 +2994,7 @@
                       minZoom = 14;
                     }
 
+                    divElement.innerHTML = '';
                     map = new kakao.maps.Map(divElement, options);
                     map.setMaxLevel(minZoom);
                     map.setMinLevel(maxZoom);
@@ -3055,13 +3059,13 @@
     };
 
     KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-      /**
-       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-       * - 가장 확대된 값 : 1
-       * - 가장 축소된 값 : 14
-       *
-       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+      /**
+       * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+       * - 가장 확대된 값 : 1
+       * - 가장 축소된 값 : 14
+       *
+       * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+       * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
       */
       var mapValue = this.getBaseToMapZoom(value);
 
@@ -3246,12 +3250,12 @@
     lat: 37.5036845,
     lng: 127.0448698
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MintMapProps} MintMapProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MintMapProps} MintMapProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MintMap(_a) {
@@ -3276,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), {
@@ -3292,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));
@@ -3681,8 +3678,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Marker, _super);
-    /**
-     * 지도에 표시할 마커정보
+    /**
+     * 지도에 표시할 마커정보
      */
 
 
@@ -3700,8 +3697,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polyline, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3719,8 +3716,8 @@
   /** @class */
   function (_super) {
     tslib.__extends(Polygon, _super);
-    /**
-     * 지도에 표시할 폴리곤정보
+    /**
+     * 지도에 표시할 폴리곤정보
      */
 
 
@@ -3730,8 +3727,8 @@
       _this.options = options;
       return _this;
     }
-    /**
-     * 폴리곤의 중점을 구한다.
+    /**
+     * 폴리곤의 중점을 구한다.
      */
 
 
@@ -3901,19 +3898,19 @@
       divElement.style.transform = "translate(-".concat(options.anchor ? options.anchor.x : '0', "px, -").concat(options.anchor ? options.anchor.y : '0', "px)");
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
 
   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,
@@ -3927,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
 
@@ -4004,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')
-            }
-
-            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
@@ -4074,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;
-            });
           }
         }
       }
@@ -4241,12 +4191,12 @@
     return Number((sum / nums.length).toFixed(7));
   };
 
-  /**
-   * CircleMarker
-   *
-   * @param {CircleMarkerProps} CircleMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * CircleMarker
+   *
+   * @param {CircleMarkerProps} CircleMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function CircleMarker(_a) {
@@ -4358,12 +4308,12 @@
     }, children)));
   }
 
-  /**
-   *PolygonMarker
-   *
-   * @param {PolygonMarkerProps} PolygonMarkerProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   *PolygonMarker
+   *
+   * @param {PolygonMarkerProps} PolygonMarkerProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function PolygonMarker(_a) {
@@ -4526,12 +4476,12 @@
     }, children)));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolygonWrapper(_a) {
@@ -4546,6 +4496,7 @@
         if (polygonRef.current) {
           // console.log('polygon cleared')
           controller.clearDrawable(polygonRef.current);
+          polygonRef.current = undefined;
         }
       };
     }, []); //create/update object
@@ -5018,12 +4969,12 @@
 
     throw new Error("Size [".concat(value, "] is not valid. (Should be % or pixel number)"));
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
 
@@ -5048,12 +4999,12 @@
     }, children);
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapPolylineWrapper(_a) {
@@ -5066,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
@@ -5093,12 +5045,12 @@
     log: function () {
     }
   };
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasWrapper(_a) {
@@ -5417,12 +5369,12 @@
     }), renderFlag && React__default["default"].createElement(React__default["default"].Fragment, null));
   }
 
-  /**
-   * Mint Map 컴포넌트
-   *
-   * @param {MapControlWrapperProps} MapControlWrapperProps
-   *
-   * @returns {JSX.Element} JSX
+  /**
+   * Mint Map 컴포넌트
+   *
+   * @param {MapControlWrapperProps} MapControlWrapperProps
+   *
+   * @returns {JSX.Element} JSX
    */
 
   function MapCanvasMarkerWrapper(_props) {