@mint-ui/map 0.6.2-beta-test1 → 0.6.2-beta-test4

package/dist/index.es.js

@@ -473,23 +473,23 @@ function () {
   return PolygonCalculator;
 }();
 
-/**
- * 좌표값
- * @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;
@@ -597,15 +597,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -1136,12 +1136,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
    */
 
 
@@ -1154,9 +1154,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -1698,11 +1698,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) {
@@ -3420,13 +3420,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3611,12 +3611,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) {
@@ -3778,8 +3778,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3797,8 +3797,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3816,8 +3816,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3827,8 +3827,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -4171,25 +4171,30 @@ function useMarkerMoving(_a) {
   return [start, stop, resume];
 }
 
-var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, mapDivElement) {
+var offsetCalibration = function (mapType, divElement, options, autoFitToViewport, autoAdjustAnchor, mapDivElement) {
   //google 맵의 anchor 보정 (네이버와 같이 왼쪽/위 기준으로 처리)
+  var baseTransform = '';
+
   if (mapType === 'google') {
-    divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
+    baseTransform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
   } else if (mapType === 'kakao') {
-    divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
+    baseTransform = "translate(".concat(options.anchor ? options.anchor.x * -1 : '0', "px, ").concat(options.anchor ? options.anchor.y * -1 : '0', "px)");
   }
 
-  if (autoFitToViewport) {
-    // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리
+  divElement.style.transform = baseTransform;
+
+  if (autoFitToViewport || autoAdjustAnchor) {
+    // google 은 마커의 getBoundingClientRect 값을 바로 얻을 수 없어서 next tick 에 처리 (50회 트라이)
     if (mapType === 'google') {
-      transformToFitWithNextTick(mapType, divElement, options, mapDivElement, 10);
+      divElement.style.visibility = 'hidden';
+      transformToFitWithNextTick(divElement, mapDivElement, baseTransform, autoAdjustAnchor, 50);
     } else {
-      transformToFit(mapType, divElement, options, mapDivElement);
+      transformToFit(divElement, mapDivElement, baseTransform, autoAdjustAnchor);
     }
   }
 };
 
-var transformToFitWithNextTick = function (mapType, divElement, options, mapDivElement, maxTryCount, nextCount) {
+var transformToFitWithNextTick = function (divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, nextCount) {
   var tryCount = nextCount || 0;
   setTimeout(function () {
     tryCount += 1;
@@ -4201,51 +4206,54 @@ var transformToFitWithNextTick = function (mapType, divElement, options, mapDivE
     var rect = divElement.getBoundingClientRect();
 
     if (rect.x === 0 && rect.y === 0 && rect.width === 0 && rect.height === 0) {
-      transformToFitWithNextTick(mapType, divElement, options, mapDivElement, maxTryCount, tryCount);
+      transformToFitWithNextTick(divElement, mapDivElement, baseTransform, anchorAdjust, maxTryCount, tryCount);
     } else {
-      transformToFit(mapType, divElement, options, mapDivElement);
+      transformToFit(divElement, mapDivElement, baseTransform, anchorAdjust);
+      divElement.style.visibility = 'visible';
     }
   }, 20);
 };
 
-var transformToFit = function (mapType, divElement, options, mapDivElement) {
+var transformToFit = function (divElement, mapDivElement, baseTransform, anchorAdjust) {
   var mapRect = mapDivElement.getBoundingClientRect();
   var rect = divElement.getBoundingClientRect(); // 보정 값 계산
 
   var xValue = getMarkersFitPosition(mapRect.x, mapRect.width, rect.x, rect.width);
   var yValue = getMarkersFitPosition(mapRect.y, mapRect.height, rect.y, rect.height);
 
-  if (xValue !== 0 || yValue !== 0) {
-    if (mapType === 'google') {
-      divElement.style.transform = "translate(50%, 100%) translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
-    } else if (mapType === 'kakao') {
-      divElement.style.transform = "translate(".concat(options.anchor ? options.anchor.x * -1 + xValue : xValue, "px, ").concat(options.anchor ? options.anchor.y * -1 + yValue : yValue, "px)");
-    } else {
-      divElement.style.transform = "translate(".concat(xValue, "px, ").concat(yValue, "px)");
-    }
+  if (anchorAdjust) {
+    var toLeft = xValue < 0;
+    var toRight = xValue > 0;
+    var toTop = yValue < 0;
+    var toBottom = yValue > 0;
+    var transX = toLeft ? rect.width * -1 : toRight ? rect.width : 0;
+    var transY = toTop ? rect.height * -1 : toBottom ? rect.height : 0;
+    divElement.style.transform = baseTransform + " translate(".concat(transX, "px, ").concat(transY, "px)");
+  } else {
+    divElement.style.transform = baseTransform + " translate(".concat(xValue, "px, ").concat(yValue, "px)");
   }
 };
 
 var getMarkersFitPosition = function (containerPosition, containerSize, markerPosition, markerSize) {
   var delta = markerPosition - containerPosition;
   var mapSize = containerSize;
-  var overflowMin = delta <= 0;
-  var overflowMax = delta + markerSize >= mapSize; // 한쪽만 넘어간 경우 처리
+  var overflowMin = delta < 0;
+  var overflowMax = delta + markerSize > mapSize; // 한쪽만 넘어간 경우 처리
 
   if (overflowMin && !overflowMax) {
-    return delta;
+    return delta * -1;
   } else if (!overflowMin && overflowMax) {
     return mapSize - delta - markerSize;
   }
 
   return 0;
 };
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 
@@ -4254,15 +4262,17 @@ function MapMarkerWrapper(_a) {
       _a.endAnimationClassName;
       var _b = _a.autoFitToViewport,
       autoFitToViewport = _b === void 0 ? false : _b,
-      _c = _a.topOnClick,
-      topOnClick = _c === void 0 ? false : _c,
-      _d = _a.topOnHover,
-      topOnHover = _d === void 0 ? false : _d,
+      _c = _a.autoAdjustAnchor,
+      autoAdjustAnchor = _c === void 0 ? false : _c,
+      _d = _a.topOnClick,
+      topOnClick = _d === void 0 ? false : _d,
+      _e = _a.topOnHover,
+      topOnHover = _e === void 0 ? false : _e,
       movingAnimation = _a.movingAnimation,
-      _e = _a.disablePointerEvent,
-      disablePointerEvent = _e === void 0 ? false : _e,
+      _f = _a.disablePointerEvent,
+      disablePointerEvent = _f === void 0 ? false : _f,
       children = _a.children,
-      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
+      options = __rest(_a, ["startAnimationClassName", "endAnimationClassName", "autoFitToViewport", "autoAdjustAnchor", "topOnClick", "topOnHover", "movingAnimation", "disablePointerEvent", "children"]); //controller
 
 
   var controller = useMintMapController(); //element
@@ -4272,9 +4282,9 @@ function MapMarkerWrapper(_a) {
 
   var markerRef = useRef(); //moving animation
 
-  var _f = useState({}),
-      movingState = _f[0],
-      setMovingState = _f[1];
+  var _g = useState({}),
+      movingState = _g[0],
+      setMovingState = _g[1];
 
   useEffect(function () {
     // console.log('movingState', movingState);
@@ -4340,10 +4350,11 @@ function MapMarkerWrapper(_a) {
 
   useEffect(function () {
     // console.log('drawable created')
-    divElement.style.display = 'flex';
-    divElement.style.justifyContent = 'flex-start';
-    divElement.style.alignItems = 'flex-start';
-    divElement.style.flexDirection = 'column';
+    // divElement.style.display = 'flex'
+    // divElement.style.justifyContent = 'flex-start'
+    // divElement.style.alignItems = 'flex-start'
+    // divElement.style.flexDirection = 'column'
+    divElement.style.width = 'fit-content';
     divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
     divElement.addEventListener('click', onClickHandler);
     divElement.addEventListener('mousedown', onMousedownHandler, {
@@ -4375,7 +4386,7 @@ function MapMarkerWrapper(_a) {
         } //marker offset 보정
 
 
-        offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
+        offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
 
         if (options.zIndex !== undefined) {
           controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4392,7 +4403,7 @@ function MapMarkerWrapper(_a) {
         } //marker offset 보정
 
 
-        offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, controller.mapDivElement); //z-index 처리
+        offsetCalibration(controller.getMapType(), divElement, options, autoFitToViewport, autoAdjustAnchor, controller.mapDivElement); //z-index 처리
 
         if (options.zIndex !== undefined) {
           controller.setMarkerZIndex(markerRef.current, options.zIndex);
@@ -4410,12 +4421,12 @@ function MapMarkerWrapper(_a) {
   return createPortal(children, divElement);
 }
 
-/**
- * CircleMarker
- *
- * @param {CircleMarkerProps} CircleMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * CircleMarker
+ *
+ * @param {CircleMarkerProps} CircleMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function CircleMarker(_a) {
@@ -4531,12 +4542,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4707,12 +4718,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) {
@@ -5158,12 +5169,12 @@ var styles = {"mint-map-control-wrapper-container":"MintMapWrapper-module_mint-m
 styleInject(css_248z);
 
 var cn = classNames.bind(styles);
-/**
- * Mint Map 컴포넌트
- *
- * @param {MapControlWrapperProps} MapControlWrapperProps
- *
- * @returns {JSX.Element} JSX
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function MapControlWrapper(_a) {
@@ -5191,12 +5202,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) {
@@ -5237,12 +5248,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) {
@@ -5561,12 +5572,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) {