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

package/dist/index.es.js

@@ -437,23 +437,23 @@ function () {
   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;
@@ -561,15 +561,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -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 () {
@@ -795,12 +797,12 @@ function () {
   MintMapController.prototype.getRandomFunctionName = function (prefix) {
     return "".concat(prefix, "_").concat(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
    */
 
 
@@ -813,9 +815,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -1376,11 +1378,11 @@ function (_super) {
       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) {
@@ -1634,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
 
@@ -2987,6 +2990,7 @@ function (_super) {
                     minZoom = 14;
                   }
 
+                  divElement.innerHTML = '';
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
@@ -3051,13 +3055,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3242,12 +3246,12 @@ var DEFAULT_CENTER = {
   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) {
@@ -3272,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), {
@@ -3288,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));
@@ -3677,8 +3674,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3696,8 +3693,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3715,8 +3712,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3726,8 +3723,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -3897,19 +3894,19 @@ var offsetCalibration = function (mapType, divElement, options) {
     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,
@@ -3923,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
 
@@ -4000,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')
-          }
-
-          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
@@ -4070,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;
-          });
         }
       }
     }
@@ -4237,12 +4187,12 @@ var calculateAverage = function (nums) {
   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) {
@@ -4354,12 +4304,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4522,12 +4472,12 @@ function PolygonMarker(_a) {
   }, children)));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolygonWrapper(_a) {
@@ -4542,6 +4492,7 @@ function MapPolygonWrapper(_a) {
       if (polygonRef.current) {
         // console.log('polygon cleared')
         controller.clearDrawable(polygonRef.current);
+        polygonRef.current = undefined;
       }
     };
   }, []); //create/update object
@@ -5014,12 +4965,12 @@ var getAlignPosition = function (value, align) {
 
   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
  */
 
 
@@ -5044,12 +4995,12 @@ function MapControlWrapper(_a) {
   }, children);
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapPolylineWrapper(_a) {
@@ -5062,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
@@ -5089,12 +5041,12 @@ var console$1 = {
   log: function () {
   }
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasWrapper(_a) {
@@ -5413,12 +5365,12 @@ function MapCanvasWrapper(_a) {
   }), renderFlag && React.createElement(React.Fragment, null));
 }
 
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapCanvasMarkerWrapper(_props) {