@mint-ui/map 0.5.5-beta → 0.5.7-beta

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } from 'tslib';
+import { __awaiter, __generator, __spreadArray, __extends, __assign, __rest } from 'tslib';
 import React, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
@@ -361,9 +361,30 @@ function () {
     return false;
   };
 
-  PolygonCalculator.simplifyPoints = function (polygon, tolerance, lastRepeated) {
-    var target = lastRepeated ? polygon.slice(0, polygon.length - 1) : polygon;
-    return this.simplify(target, tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+  PolygonCalculator.simplifyPoints = function (polygon, tolerance, _lastRepeated) {
+    return this.simplify(this.pathCleaning(polygon), tolerance !== undefined ? tolerance : this.TOLERANCE_NAVER_STYLE);
+  };
+
+  PolygonCalculator.pathCleaning = function (polygon) {
+    if (polygon.length < 3) {
+      return polygon;
+    }
+
+    var main = polygon[0];
+    var delCount = 0;
+
+    for (var i = polygon.length - 1; i >= 0; i--) {
+      if (main.equals(polygon[i])) {
+        delCount += 1;
+      } else {
+        break;
+      }
+    }
+
+    delCount > 0 && polygon.splice(polygon.length - delCount, delCount);
+    var out = [];
+    out.push.apply(out, polygon);
+    return out;
   };
 
   PolygonCalculator.simplify = function (points, tolerance) {
@@ -374,8 +395,10 @@ function () {
     var dMax = 0;
     var index = 0; // Find the point with the maximum distance from the line segment
 
+    var denominator = this.perpendicularDistanceDenominator(points[0], points[points.length - 1]);
+
     for (var i = 1; i < points.length - 1; i++) {
-      var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1]);
+      var d = this.perpendicularDistance(points[i], points[0], points[points.length - 1], denominator);
 
       if (d > dMax) {
         dMax = d;
@@ -393,19 +416,25 @@ function () {
       // If the maximum distance is less than or equal to the tolerance, return the endpoints
       return [points[0], points[points.length - 1]];
     }
+  };
+
+  PolygonCalculator.perpendicularDistanceDenominator = function (lineStart, lineEnd) {
+    var x1 = lineStart.x,
+        y1 = lineStart.y;
+    var x2 = lineEnd.x,
+        y2 = lineEnd.y;
+    return Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
   }; // Calculate the perpendicular distance from a point to a line segment
 
 
-  PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd) {
+  PolygonCalculator.perpendicularDistance = function (point, lineStart, lineEnd, denominator) {
     var x = point.x;
     var y = point.y;
     var x1 = lineStart.x;
     var y1 = lineStart.y;
     var x2 = lineEnd.x;
     var y2 = lineEnd.y;
-    var numerator = Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1);
-    var denominator = Math.sqrt(Math.pow(y2 - y1, 2) + Math.pow(x2 - x1, 2));
-    return numerator / denominator;
+    return Math.abs((y2 - y1) * x - (x2 - x1) * y + x2 * y1 - y2 * x1) / denominator;
   };
 
   PolygonCalculator.calculatePolygonSize = function (polygon, innerPolygons) {
@@ -444,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;
@@ -568,15 +597,15 @@ function () {
 
   return Bounds;
 }();
-/**
- * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
  */
 
 var Offset =
 /** @class */
 function () {
-  /**
-   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
    */
   function Offset(x, y) {
     this.x = x;
@@ -703,6 +732,309 @@ function MintMapCore(_a) {
   }));
 }
 
+var AnimationPlayer =
+/** @class */
+function () {
+  function AnimationPlayer(drawFunction, fps) {
+    this.prevtime = 0;
+    this.elapsedTime = 0;
+    this.fps = null;
+    this.baseDrawGapTime = null;
+    this.deltaTime = 0;
+    this.playing = false;
+    this.draw = drawFunction;
+    this.fps = fps || null;
+
+    if (fps !== undefined) {
+      this.baseDrawGapTime = 1000 / fps;
+    }
+
+    this.init();
+  }
+
+  AnimationPlayer.prototype.init = function () {
+    this.deltaTime = 0;
+    this.prevtime = 0;
+    this.elapsedTime = 0;
+    this.playing = false;
+  };
+
+  AnimationPlayer.prototype.start = function () {
+    this.init();
+    this.resume();
+  };
+
+  AnimationPlayer.prototype.stop = function () {
+    this.playing = false;
+  };
+
+  AnimationPlayer.prototype.resume = function () {
+    this.playing = true; //@ts-ignore
+
+    window.requestAnimationFrame(this.makeFrame.bind(this));
+  };
+
+  AnimationPlayer.prototype.makeFrame = function (timestamp) {
+    //frame 간 시간 변화
+    if (this.prevtime === 0) {
+      this.prevtime = timestamp;
+    }
+
+    this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
+
+    this.prevtime = timestamp;
+
+    if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
+      //다음 루프 준비
+      this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
+
+      var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
+
+      this.deltaTime = 0;
+
+      if (stopFlag) {
+        this.stop();
+      }
+    }
+
+    if (this.playing) {
+      //@ts-ignore
+      window.requestAnimationFrame(this.makeFrame.bind(this));
+    }
+  };
+
+  return AnimationPlayer;
+}();
+
+function waiting(evaluation, timeoutSeconds) {
+  return __awaiter(this, void 0, void 0, function () {
+    var max;
+    return __generator(this, function (_a) {
+      max = (timeoutSeconds || 5) * 1000;
+      return [2
+      /*return*/
+      , new Promise(function (resolve) {
+        var start = new Date().getTime();
+        var inter = setInterval(function () {
+          //타임아웃 체크
+          var time = new Date().getTime();
+
+          if (time - start > max) {
+            clearInterval(inter);
+            resolve(false);
+            return;
+          } //평가식 체크
+
+
+          if (evaluation()) {
+            clearInterval(inter);
+            resolve(true);
+          }
+        }, 100);
+      })];
+    });
+  });
+}
+
+var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
+  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
+
+
+  var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
+  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
+
+  var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
+  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
+  var boundsPos = [];
+  var tempX1, tempY1, tempX2, tempY2;
+
+  for (var i = 0; i < rowCount; i++) {
+    tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
+    tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
+    var rows = [];
+    boundsPos.push(rows);
+
+    for (var k = 0; k < colCount; k++) {
+      tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
+      tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
+      var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
+      var includedList = thisBounds.getIncludedPositions(itemList);
+      rows.push({
+        bounds: thisBounds,
+        checked: false,
+        center: false,
+        centerPosition: thisBounds.getCenter(),
+        incList: [],
+        itemList: includedList,
+        size: basePixelSize
+      });
+    }
+  } //좌표마다 검사해서 인접셀 병합 처리
+
+
+  var centerList = [];
+  var totalItemCount = 0;
+  var min;
+  var max;
+
+  for (var i = 0; i < boundsPos.length; i++) {
+    for (var k = 0; k < boundsPos[i].length; k++) {
+      var curr = boundsPos[i][k];
+      if (curr.checked) continue;
+      curr.checked = true; //현재기준 8방향 객체 모으기
+
+      var incList = [];
+
+      if (boundsPos[i]) {
+        boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
+        boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
+      }
+
+      if (boundsPos[i - 1]) {
+        boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
+        boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
+        boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
+      }
+
+      if (boundsPos[i + 1]) {
+        boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
+        boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
+        boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
+      }
+
+      for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
+        var inc = incList_1[_i];
+        if (inc.checked) continue;
+        inc.checked = true;
+
+        if (inc.itemList && inc.itemList.length > 0) {
+          curr.incList.push(inc);
+
+          (_a = curr.itemList).push.apply(_a, inc.itemList);
+
+          curr.center = true;
+        }
+      }
+
+      if (curr.center) {
+        centerList.push(curr);
+        var avrLat = calculateAverage(curr.itemList.map(function (item) {
+          return item.lat;
+        }));
+        var avrLng = calculateAverage(curr.itemList.map(function (item) {
+          return item.lng;
+        }));
+        curr.centerPosition = new Position(avrLat, avrLng);
+        totalItemCount += curr.itemList.length;
+
+        if (!min || curr.itemList.length < min) {
+          min = curr.itemList.length;
+        }
+
+        if (!max || curr.itemList.length > max) {
+          max = curr.itemList.length;
+        }
+      }
+    }
+  }
+
+  var status = {
+    total: totalItemCount,
+    average: totalItemCount / centerList.length,
+    min: min,
+    max: max
+  };
+
+  sizeFunction = sizeFunction || function (info, status) {
+    var minSize = basePixelSize / 4;
+    var maxSize = basePixelSize;
+    return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
+  };
+
+  for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
+    var center = centerList_1[_b];
+    center.size = sizeFunction(center, status);
+  } // console.log('centerList', centerList, status);
+
+
+  return centerList;
+};
+
+var calculateAverage = function (nums) {
+  var sum = 0;
+
+  for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
+    var num = nums_1[_i];
+    sum += num;
+  }
+
+  return Number((sum / nums.length).toFixed(7));
+};
+
+function log(debug, label) {
+  var args = [];
+
+  for (var _i = 2; _i < arguments.length; _i++) {
+    args[_i - 2] = arguments[_i];
+  }
+
+  if (!debug) return;
+  args && console.log.apply(console, __spreadArray(['[mint-map debug]', label || ''], args, false));
+}
+
+var MintMapStatus =
+/** @class */
+function () {
+  function MintMapStatus() {
+    this.marker = 0;
+    this.byLabel = new Map();
+  }
+
+  MintMapStatus.prototype.init = function () {
+    this.marker = 0;
+    this.byLabel.clear();
+  };
+
+  MintMapStatus.prototype.print = function () {
+    var str = "[mint-map status]\n\nmarker : ".concat(this.marker, "\n ");
+
+    if (this.byLabel.size > 0) {
+      str += '\n-------- status detail (by label) ----------';
+      this.byLabel.forEach(function (val, key) {
+        str += "\n(".concat(key, ") : ").concat(val);
+      });
+      str += '\n\n';
+    }
+
+    console.log(str);
+  };
+
+  MintMapStatus.prototype.setMarker = function (inc, label) {
+    this.marker += inc;
+
+    if (label) {
+      var curr = this.byLabel.get(label);
+      var calc = 0;
+
+      if (curr === undefined) {
+        calc = inc;
+      } else {
+        calc = curr + inc;
+      }
+
+      if (calc === 0) {
+        this.byLabel.delete(label);
+      } else {
+        this.byLabel.set(label, calc);
+      }
+    }
+  };
+
+  return MintMapStatus;
+}();
+
+var Status = new MintMapStatus();
+
 var MintMapController =
 /** @class */
 function () {
@@ -804,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
    */
 
 
@@ -822,9 +1154,9 @@ function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
-  /**
-   * 쓰로틀링 처리
-   * @returns
+  /**
+   * 쓰로틀링 처리
+   * @returns
    */
 
 
@@ -865,6 +1197,10 @@ function () {
     throw new Error("[getMapToBaseZoom][".concat(mapZoom, "] is not valid zoom level"));
   };
 
+  MintMapController.prototype.printStatus = function () {
+    Status.print();
+  };
+
   return MintMapController;
 }();
 
@@ -1062,36 +1398,6 @@ function () {
   return MapZoomInfo;
 }();
 
-function waiting(evaluation, timeoutSeconds) {
-  return __awaiter(this, void 0, void 0, function () {
-    var max;
-    return __generator(this, function (_a) {
-      max = (timeoutSeconds || 5) * 1000;
-      return [2
-      /*return*/
-      , new Promise(function (resolve) {
-        var start = new Date().getTime();
-        var inter = setInterval(function () {
-          //타임아웃 체크
-          var time = new Date().getTime();
-
-          if (time - start > max) {
-            clearInterval(inter);
-            resolve(false);
-            return;
-          } //평가식 체크
-
-
-          if (evaluation()) {
-            clearInterval(inter);
-            resolve(true);
-          }
-        }, 100);
-      })];
-    });
-  });
-}
-
 // export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
 // export type MapUIEvent = 'click'|'dblclick'|''
 var MapEvent =
@@ -1352,8 +1658,7 @@ function (_super) {
         map: this.map,
         position: marker.options.position,
         visible: marker.options.visible === undefined || marker.options.visible
-      }; //console.log('controller createMarker', marker.options);
-
+      };
       marker.element && (options.icon = {
         content: marker.element,
         anchor: marker.options.anchor
@@ -1371,6 +1676,8 @@ function (_super) {
         marker.native = naverMarker_1;
       }
 
+      log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+      Status.setMarker(1, marker.options.debugLabel);
       ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
         if (_this.markerEvents.includes(key)) {
           naver.maps.Event.addListener(naverMarker_1, key, handler);
@@ -1385,11 +1692,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) {
@@ -1404,7 +1711,9 @@ function (_super) {
           marker.native.setIcon(__assign(__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
           }));
-        } // const newOption = {
+        }
+
+        log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated'); // const newOption = {
         //   map:map,
         //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
         //   visible:options.visible === undefined || options.visible,
@@ -1418,7 +1727,6 @@ function (_super) {
         //   visible:options.visible === undefined || options.visible,
         //   icon:{...marker.native.getIcon(), anchor:options.anchor}
         // })
-
       }
     }
   };
@@ -1476,6 +1784,9 @@ function (_super) {
         } else {
           drawable.native.setMap(null);
         }
+
+        log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+        Status.setMarker(-1, drawable.options.debugLabel);
       } else {
         drawable.native.setMap(null);
       }
@@ -2081,6 +2392,8 @@ function (_super) {
         googleMarker_1 = new google.maps.Marker(options);
       }
 
+      log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+      Status.setMarker(1, marker.options.debugLabel);
       marker.native = googleMarker_1;
       ((_a = marker.options) === null || _a === void 0 ? void 0 : _a.event) && marker.options.event.forEach(function (handler, key) {
         if (_this.markerEvents.includes(key)) {
@@ -2119,6 +2432,8 @@ function (_super) {
           marker.native.position = options.position;
         }
       }
+
+      log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated');
     }
   };
 
@@ -2185,6 +2500,8 @@ function (_super) {
       } else if (drawable.native instanceof google.maps.marker.AdvancedMarkerView) {
         google.maps.event.clearInstanceListeners(drawable.native);
         drawable.native.map = null;
+        log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+        Status.setMarker(-1, drawable.options.debugLabel);
         return true;
       }
     }
@@ -2767,6 +3084,8 @@ function (_super) {
         this.updateMarker(marker, marker.options);
       } else {
         kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
+        log(this.mapProps.debug || marker.options.debug, marker.options.debugLabel, this.type + ' marker created');
+        Status.setMarker(1, marker.options.debugLabel);
         marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
         this.removeParentElementsMargin(marker);
         marker.native = kakaoMarker_1;
@@ -2795,6 +3114,7 @@ function (_super) {
           marker.native.setVisible(options.visible);
         }
 
+        log(this.mapProps.debug || options.debug, marker.options.debugLabel, this.type + ' marker updated');
         this.removeParentElementsMargin(marker);
       }
     }
@@ -2867,6 +3187,8 @@ function (_super) {
           (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
         } else {
           drawable.native.setMap(null);
+          log(this.mapProps.debug || drawable.options.debug, drawable.options.debugLabel, this.type + ' marker cleared');
+          Status.setMarker(-1, drawable.options.debugLabel);
         }
       } else {
         drawable.native.setMap(null);
@@ -3071,13 +3393,13 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
-    /**
-     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
-     * - 가장 확대된 값 : 1
-     * - 가장 축소된 값 : 14
-     *
-     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
-     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
     */
     var mapValue = this.getBaseToMapZoom(value);
 
@@ -3262,12 +3584,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) {
@@ -3604,80 +3926,6 @@ function SVGRect(_a) {
   }, children));
 }
 
-var AnimationPlayer =
-/** @class */
-function () {
-  function AnimationPlayer(drawFunction, fps) {
-    this.prevtime = 0;
-    this.elapsedTime = 0;
-    this.fps = null;
-    this.baseDrawGapTime = null;
-    this.deltaTime = 0;
-    this.playing = false;
-    this.draw = drawFunction;
-    this.fps = fps || null;
-
-    if (fps !== undefined) {
-      this.baseDrawGapTime = 1000 / fps;
-    }
-
-    this.init();
-  }
-
-  AnimationPlayer.prototype.init = function () {
-    this.deltaTime = 0;
-    this.prevtime = 0;
-    this.elapsedTime = 0;
-    this.playing = false;
-  };
-
-  AnimationPlayer.prototype.start = function () {
-    this.init();
-    this.resume();
-  };
-
-  AnimationPlayer.prototype.stop = function () {
-    this.playing = false;
-  };
-
-  AnimationPlayer.prototype.resume = function () {
-    this.playing = true; //@ts-ignore
-
-    window.requestAnimationFrame(this.makeFrame.bind(this));
-  };
-
-  AnimationPlayer.prototype.makeFrame = function (timestamp) {
-    //frame 간 시간 변화
-    if (this.prevtime === 0) {
-      this.prevtime = timestamp;
-    }
-
-    this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
-
-    this.prevtime = timestamp;
-
-    if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
-      //다음 루프 준비
-      this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
-
-      var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
-
-      this.deltaTime = 0;
-
-      if (stopFlag) {
-        this.stop();
-      }
-    }
-
-    if (this.playing) {
-      //@ts-ignore
-      window.requestAnimationFrame(this.makeFrame.bind(this));
-    }
-  };
-
-  return AnimationPlayer;
-}();
-
 var Drawable =
 /** @class */
 function () {
@@ -3690,8 +3938,8 @@ var Marker =
 /** @class */
 function (_super) {
   __extends(Marker, _super);
-  /**
-   * 지도에 표시할 마커정보
+  /**
+   * 지도에 표시할 마커정보
    */
 
 
@@ -3709,8 +3957,8 @@ var Polyline =
 /** @class */
 function (_super) {
   __extends(Polyline, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3728,8 +3976,8 @@ var Polygon =
 /** @class */
 function (_super) {
   __extends(Polygon, _super);
-  /**
-   * 지도에 표시할 폴리곤정보
+  /**
+   * 지도에 표시할 폴리곤정보
    */
 
 
@@ -3739,8 +3987,8 @@ function (_super) {
     _this.options = options;
     return _this;
   }
-  /**
-   * 폴리곤의 중점을 구한다.
+  /**
+   * 폴리곤의 중점을 구한다.
    */
 
 
@@ -3910,12 +4158,12 @@ 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
  */
 
 
@@ -4068,147 +4316,12 @@ function MapMarkerWrapper(_a) {
   return createPortal(children, divElement);
 }
 
-var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
-
-
-  var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
-
-  var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
-  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
-  var boundsPos = [];
-  var tempX1, tempY1, tempX2, tempY2;
-
-  for (var i = 0; i < rowCount; i++) {
-    tempX1 = mapBounds.nw.lng + boundsLineSizeX * i;
-    tempX2 = mapBounds.nw.lng + boundsLineSizeX * (i + 1);
-    var rows = [];
-    boundsPos.push(rows);
-
-    for (var k = 0; k < colCount; k++) {
-      tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
-      tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
-      var thisBounds = Bounds.fromNWSE(new Position(tempY1, tempX1), new Position(tempY2, tempX2));
-      var includedList = thisBounds.getIncludedPositions(itemList);
-      rows.push({
-        bounds: thisBounds,
-        checked: false,
-        center: false,
-        centerPosition: thisBounds.getCenter(),
-        incList: [],
-        itemList: includedList,
-        size: basePixelSize
-      });
-    }
-  } //좌표마다 검사해서 인접셀 병합 처리
-
-
-  var centerList = [];
-  var totalItemCount = 0;
-  var min;
-  var max;
-
-  for (var i = 0; i < boundsPos.length; i++) {
-    for (var k = 0; k < boundsPos[i].length; k++) {
-      var curr = boundsPos[i][k];
-      if (curr.checked) continue;
-      curr.checked = true; //현재기준 8방향 객체 모으기
-
-      var incList = [];
-
-      if (boundsPos[i]) {
-        boundsPos[i][k - 1] && incList.push(boundsPos[i][k - 1]);
-        boundsPos[i][k + 1] && incList.push(boundsPos[i][k + 1]);
-      }
-
-      if (boundsPos[i - 1]) {
-        boundsPos[i - 1][k - 1] && incList.push(boundsPos[i - 1][k - 1]);
-        boundsPos[i - 1][k] && incList.push(boundsPos[i - 1][k]);
-        boundsPos[i - 1][k + 1] && incList.push(boundsPos[i - 1][k + 1]);
-      }
-
-      if (boundsPos[i + 1]) {
-        boundsPos[i + 1][k + 1] && incList.push(boundsPos[i + 1][k + 1]);
-        boundsPos[i + 1][k] && incList.push(boundsPos[i + 1][k]);
-        boundsPos[i + 1][k - 1] && incList.push(boundsPos[i + 1][k - 1]);
-      }
-
-      for (var _i = 0, incList_1 = incList; _i < incList_1.length; _i++) {
-        var inc = incList_1[_i];
-        if (inc.checked) continue;
-        inc.checked = true;
-
-        if (inc.itemList && inc.itemList.length > 0) {
-          curr.incList.push(inc);
-
-          (_a = curr.itemList).push.apply(_a, inc.itemList);
-
-          curr.center = true;
-        }
-      }
-
-      if (curr.center) {
-        centerList.push(curr);
-        var avrLat = calculateAverage(curr.itemList.map(function (item) {
-          return item.lat;
-        }));
-        var avrLng = calculateAverage(curr.itemList.map(function (item) {
-          return item.lng;
-        }));
-        curr.centerPosition = new Position(avrLat, avrLng);
-        totalItemCount += curr.itemList.length;
-
-        if (!min || curr.itemList.length < min) {
-          min = curr.itemList.length;
-        }
-
-        if (!max || curr.itemList.length > max) {
-          max = curr.itemList.length;
-        }
-      }
-    }
-  }
-
-  var status = {
-    total: totalItemCount,
-    average: totalItemCount / centerList.length,
-    min: min,
-    max: max
-  };
-
-  sizeFunction = sizeFunction || function (info, status) {
-    var minSize = basePixelSize / 4;
-    var maxSize = basePixelSize;
-    return Math.min(Math.max(basePixelSize * info.itemList.length / status.average, minSize), maxSize);
-  };
-
-  for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
-    var center = centerList_1[_b];
-    center.size = sizeFunction(center, status);
-  } // console.log('centerList', centerList, status);
-
-
-  return centerList;
-};
-
-var calculateAverage = function (nums) {
-  var sum = 0;
-
-  for (var _i = 0, nums_1 = nums; _i < nums_1.length; _i++) {
-    var num = nums_1[_i];
-    sum += num;
-  }
-
-  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) {
@@ -4320,12 +4433,12 @@ function CircleMarker(_a) {
   }, children)));
 }
 
-/**
- *PolygonMarker
- *
- * @param {PolygonMarkerProps} PolygonMarkerProps
- *
- * @returns {JSX.Element} JSX
+/**
+ *PolygonMarker
+ *
+ * @param {PolygonMarkerProps} PolygonMarkerProps
+ *
+ * @returns {JSX.Element} JSX
  */
 
 function PolygonMarker(_a) {
@@ -4476,12 +4589,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) {
@@ -4969,12 +5082,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
  */
 
 
@@ -4999,12 +5112,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) {
@@ -5045,12 +5158,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) {
@@ -5369,12 +5482,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) {
@@ -5382,4 +5495,4 @@ function MapCanvasMarkerWrapper(_props) {
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, CircleMarker, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapEvent, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, MapUIEvent, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, PolygonMarker, Polyline, Position, SVGCircle, SVGPolygon, SVGRect, Status, getClusterInfo, log, useMarkerMoving, useMintMapController, waiting };