@mint-ui/map 0.4.5-beta → 0.4.6-beta

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

@@ -3,16 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
-var MintMap = require('../MintMap.js');
 var uuid = require('uuid');
+var MapTypes = require('../types/MapTypes.js');
 
-var MintMapController = function () {
+var MintMapController =
+/** @class */
+function () {
+  //constructor
   function MintMapController(props) {
     this.mapApiLoaded = false;
     this.mapInitialized = false;
-    this.processedTime = 0;
+    this.processedTime = 0; //props
+
     this.mapProps = props;
-  }
+  } //기본 기능
+
 
   MintMapController.prototype.getMap = function () {
     return this.map;
@@ -20,7 +25,8 @@ var MintMapController = function () {
 
   MintMapController.prototype.getMapType = function () {
     return this.type;
-  };
+  }; //기본 기능 - 좌표 변환
+
 
   MintMapController.prototype.positionToOffset = function (position) {
     var div = this.mapDivElement;
@@ -35,7 +41,7 @@ var MintMapController = function () {
     var minLat = bounds.sw.lat;
     var lat = Math.abs(maxLat - minLat);
     var y = h * (maxLat - position.lat) / lat;
-    return new MintMap.Offset(x, y);
+    return new MapTypes.Offset(x, y);
   };
 
   MintMapController.prototype.offsetToPosition = function (offset) {
@@ -45,32 +51,44 @@ var MintMapController = function () {
     var bounds = this.getCurrBounds();
     var maxLng = bounds.ne.lng;
     var minLng = bounds.sw.lng;
-    var lng = Math.abs(maxLng - minLng);
+    var lng = Math.abs(maxLng - minLng); //const x = w * (position.lng - minLng) / lng
+
     var lngVal = offset.x * lng / w + minLng;
     var maxLat = bounds.ne.lat;
     var minLat = bounds.sw.lat;
-    var lat = Math.abs(maxLat - minLat);
+    var lat = Math.abs(maxLat - minLat); //const y = h * (maxLat - position.lat) / lat
+
     var latVal = (offset.y * lat / h - maxLat) * -1;
-    return new MintMap.Position(latVal, lngVal);
-  };
+    return new MapTypes.Position(latVal, lngVal);
+  }; //스크립트 로드
+
 
   MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
     return tslib.__awaiter(this, void 0, void 0, function () {
       return tslib.__generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        //boolean -> script 로드 후 callback 실행 여부
+        //** callback 실행이 여기서 안된 경우는 바깥에서 해줘야한다.
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
+          //이미 로드되어 있으면 종료
           if (checkLoaded()) {
             resolve(false);
             return;
           }
 
-          var prevElement = id ? document.getElementById(id) : undefined;
+          var prevElement = id ? document.getElementById(id) : undefined; //기존 스크립트 로드 정보가 있으면
 
           if (prevElement) {
+            // console.log(`already loaded script => ${id}`)
+            //로드 되어 있지 않으면 스크립트 load 이벤트 끼워넣기
             prevElement.addEventListener('load', function () {
+              // console.log('script loaded!!!')
               resolve(false);
             });
             return;
-          }
+          } //스크립트 로드 처리
+
 
           var script = document.createElement('script');
           script.src = url;
@@ -89,6 +107,14 @@ var MintMapController = function () {
   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
+   */
+
 
   MintMapController.prototype.buildUrl = function (baseUrl, param) {
     var params = Object.entries(param).map(function (_a) {
@@ -99,9 +125,15 @@ var MintMapController = function () {
     }).join('&');
     return "".concat(baseUrl, "?").concat(params);
   };
+  /**
+   * 쓰로틀링 처리
+   * @returns
+   */
+
 
   MintMapController.prototype.checkBoundsChangeThrottleTime = function () {
-    if (!this.mapProps.boundsChangeThrottlingTime) return true;
+    if (!this.mapProps.boundsChangeThrottlingTime) return true; //boundsChangeThrottlingTime 이내의 연속 요청은 제외시킴
+
     var time = new Date().getTime();
 
     if (this.processedTime > 0 && time - this.processedTime < this.mapProps.boundsChangeThrottlingTime) {
@@ -139,7 +171,9 @@ var MintMapController = function () {
   return MintMapController;
 }();
 
-var MapZoomInfo = function () {
+var MapZoomInfo =
+/** @class */
+function () {
   function MapZoomInfo() {}
 
   MapZoomInfo.BASE_TO_MAP = new Map([[1, new Map([['google', {

package/dist/components/mint-map/core/MintMapCore.d.ts

@@ -1,3 +1,3 @@
-import { PropsWithChildren } from "react";
-import { MintMapProps } from "../MintMap";
-export declare function MintMapCore({ onLoad, visible, zoomLevel, center, centerMoveWithPanning, children }: PropsWithChildren<MintMapProps>): JSX.Element;
+import { PropsWithChildren } from "react";
+import { MintMapProps } from "../types/MintMapProps";
+export declare function MintMapCore({ onLoad, visible, zoomLevel, center, centerMoveWithPanning, children }: PropsWithChildren<MintMapProps>): JSX.Element;

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

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var tslib = require('tslib');
 var classNames = require('classnames/bind');
 var React = require('react');
-var MintMap = require('../MintMap.js');
+var MapTypes = require('../types/MapTypes.js');
 var MintMapProvider = require('./provider/MintMapProvider.js');
 var MintMapCore_module = require('./MintMapCore.module.scss.js');
 
@@ -25,8 +25,10 @@ function MintMapCore(_a) {
       center = _a.center,
       _c = _a.centerMoveWithPanning,
       centerMoveWithPanning = _c === void 0 ? false : _c,
-      children = _a.children;
-  var controller = MintMapProvider.useMintMapController();
+      children = _a.children; //controller
+
+  var controller = MintMapProvider.useMintMapController(); //맵 초기화
+
   var elementRef = React.useRef(null);
 
   var _d = React.useState(false),
@@ -40,11 +42,17 @@ function MintMapCore(_a) {
         return tslib.__generator(this, function (_a) {
           switch (_a.label) {
             case 0:
-              if (!(elementRef && elementRef.current)) return [3, 2];
-              return [4, controller.initializingMap(elementRef.current)];
+              if (!(elementRef && elementRef.current)) return [3
+              /*break*/
+              , 2];
+              return [4
+              /*yield*/
+              , controller.initializingMap(elementRef.current) //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+              ];
 
             case 1:
-              map_1 = _a.sent();
+              map_1 = _a.sent(); //onload callback (setTimeout 으로 맵이 초기화 될 텀을 준다. 특히 google map..)
+
               setTimeout(function () {
                 setMapInitialized(true);
                 onLoad && onLoad(map_1, controller);
@@ -52,7 +60,9 @@ function MintMapCore(_a) {
               _a.label = 2;
 
             case 2:
-              return [2];
+              return [2
+              /*return*/
+              ];
           }
         });
       });
@@ -61,7 +71,8 @@ function MintMapCore(_a) {
     return function () {
       controller && controller.destroyMap();
     };
-  }, [controller, elementRef]);
+  }, [controller, elementRef]); //줌레벨
+
   React.useEffect(function () {
     if (zoomLevel && controller && mapInitialized) {
       var prevZoomLevel = controller === null || controller === void 0 ? void 0 : controller.getZoomLevel();
@@ -70,12 +81,13 @@ function MintMapCore(_a) {
         controller === null || controller === void 0 ? void 0 : controller.setZoomLevel(zoomLevel);
       }
     }
-  }, [zoomLevel]);
+  }, [zoomLevel]); //센터
+
   React.useEffect(function () {
     if (center && controller && mapInitialized) {
       var prevCenter = controller.getCenter();
 
-      if (!MintMap.Position.equals(prevCenter, center)) {
+      if (!MapTypes.Position.equals(prevCenter, center)) {
         centerMoveWithPanning ? controller === null || controller === void 0 ? void 0 : controller.panningTo(center) : controller === null || controller === void 0 ? void 0 : controller.setCenter(center);
       }
     }

package/dist/components/mint-map/core/advanced/MapBuildingProjection.d.ts

@@ -1,15 +1,15 @@
-/// <reference types="react" />
-import { Position } from "../../MintMap";
-interface MapBuildingProjectionProps {
-    basePolygonPath: Position[];
-    numberOfFloor: number;
-    heightOfFloor?: number;
-    lineColor?: string;
-    lineOpacity?: number;
-    fillColor?: string;
-    fillOpacity?: number;
-    title?: string;
-    titleElement?: JSX.Element;
-}
-export declare function MapBuildingProjection(props: MapBuildingProjectionProps): JSX.Element;
-export {};
+/// <reference types="react" />
+import { Position } from "../../types/MapTypes";
+interface MapBuildingProjectionProps {
+    basePolygonPath: Position[];
+    numberOfFloor: number;
+    heightOfFloor?: number;
+    lineColor?: string;
+    lineOpacity?: number;
+    fillColor?: string;
+    fillOpacity?: number;
+    title?: string;
+    titleElement?: JSX.Element;
+}
+export declare function MapBuildingProjection(props: MapBuildingProjectionProps): JSX.Element;
+export {};

package/dist/components/mint-map/core/advanced/MapBuildingProjection.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var tslib = require('tslib');
 var React = require('react');
-var MintMap = require('../../MintMap.js');
+var MapTypes = require('../../types/MapTypes.js');
 var calculate = require('../util/calculate.js');
 var MapMarkerWrapper = require('../wrapper/MapMarkerWrapper.js');
 var MapPolygonWrapper = require('../wrapper/MapPolygonWrapper.js');
@@ -77,21 +77,24 @@ function MapBuildingProjection(props) {
   var wallPolygons = React.useRef();
   var titlePosition = React.useRef();
   React.useEffect(function () {
+    //베이스 폴리곤
     var base = {
       position: basePolygonPath
     };
     var height = numberOfFloor * heightOfFloor;
-    var projectionHeight = calculate.GeoCalulator.convertMeterToLatitudeValue(height);
+    var projectionHeight = calculate.GeoCalulator.convertMeterToLatitudeValue(height); //roof
+
     var roofPaths = [];
 
     for (var _i = 0, basePolygonPath_1 = basePolygonPath; _i < basePolygonPath_1.length; _i++) {
       var pos = basePolygonPath_1[_i];
-      roofPaths.push(new MintMap.Position(pos.lat + projectionHeight, pos.lng));
+      roofPaths.push(new MapTypes.Position(pos.lat + projectionHeight, pos.lng));
     }
 
     roofPolygon.current = {
       position: roofPaths
-    };
+    }; //walls
+
     wallPolygons.current = [];
 
     for (var i = 0; i < basePolygonPath.length; i++) {
@@ -102,13 +105,14 @@ function MapBuildingProjection(props) {
       wallPolygons.current.push({
         position: [start, startNext, endNext, end]
       });
-    }
+    } //latitude 기준으로 배열 재정렬
+
 
     wallPolygons.current.sort(function (a, b) {
       var maxA = getMaxLat(a.position);
       var maxB = getMaxLat(b.position);
       return maxA.lat < maxB.lat ? 1 : -1;
-    });
+    }); //latitude 가장 높은값과 longitude 중간값으로 타이틀 위치 결정
 
     if (title || titleElement) {
       var maxPos = getMaxLat(wallPolygons.current[0].position);
@@ -118,7 +122,7 @@ function MapBuildingProjection(props) {
       var minLng = getLngMinMax(minLngPos.position, false);
       var mid = minLng.lng + (maxLng.lng - minLng.lng) / 2;
       titlePosition.current = {
-        position: new MintMap.Position(maxPos.lat, mid)
+        position: new MapTypes.Position(maxPos.lat, mid)
       };
     } else {
       titlePosition.current = undefined;

package/dist/components/mint-map/core/advanced/MapLoadingComponents.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+/**
+ * 유틸 컴포넌트 : 텍스트 로딩
+ */
+export interface PointLoadingProps {
+    text?: string;
+    pointCount?: number;
+    speedMs?: number;
+}
+export declare function PointLoading({ text, pointCount, speedMs }: PointLoadingProps): JSX.Element;
+export declare function MapLoadingWithImage({ size }: MapImageLoadingProps): JSX.Element;
+interface MapImageLoadingProps {
+    size?: number;
+    duration?: number;
+    delay?: number;
+}
+export {};

package/dist/components/mint-map/core/advanced/MapLoadingComponents.js

@@ -0,0 +1,257 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var classNames = require('classnames/bind');
+var MintMap_module = require('../../MintMap.module.scss.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+var cn = classNames__default["default"].bind(MintMap_module);
+function PointLoading(_a) {
+  var _b = _a.text,
+      text = _b === void 0 ? 'Loading' : _b,
+      _c = _a.pointCount,
+      pointCount = _c === void 0 ? 4 : _c,
+      _d = _a.speedMs,
+      speedMs = _d === void 0 ? 200 : _d;
+  var pointStringPool = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
+    return Array.from(Array(idx + 1)).map(function () {
+      return '.';
+    }).join('');
+  }))[0];
+
+  var _e = React.useState(''),
+      pointString = _e[0],
+      setPointString = _e[1];
+
+  React.useEffect(function () {
+    var pointStringIndex = 0;
+    var interval = setInterval(function () {
+      pointStringIndex += 1;
+
+      if (pointStringIndex >= pointCount) {
+        pointStringIndex = 0;
+      }
+
+      setPointString(pointStringPool[pointStringIndex]);
+    }, speedMs);
+    return function () {
+      interval && clearInterval(interval);
+    };
+  }, []);
+  return React__default["default"].createElement("div", {
+    className: cn('loading-point-container')
+  }, React__default["default"].createElement("div", {
+    style: {
+      width: '300px',
+      fontSize: '16px',
+      fontWeight: 600,
+      color: 'gray',
+      transform: 'translateX(130px)'
+    }
+  }, "".concat(text, " ").concat(pointString)));
+}
+function MapLoadingWithImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b;
+
+  var _c = React.useState(),
+      width = _c[0],
+      setWidth = _c[1];
+
+  var _d = React.useState(),
+      height = _d[0],
+      setHeight = _d[1];
+
+  var render = React.useMemo(function () {
+    if (!height || !width) {
+      return;
+    }
+
+    var row = Math.ceil(height / size);
+    var col = Math.ceil(width / size);
+    console.log('re render', width, height, row, col);
+    return Array.from(Array(row)).map(function () {
+      return React__default["default"].createElement("div", {
+        style: {
+          display: 'flex'
+        }
+      }, Array.from(Array(col)).map(function () {
+        var duration = Number((Math.random() * 4).toFixed(1)) + 1;
+        var delay = Number((Math.random() * 4).toFixed(1)) + 2;
+        return React__default["default"].createElement(LoadingImage, {
+          size: size,
+          duration: duration,
+          delay: delay
+        });
+      }));
+    });
+  }, [width, height]);
+  return React__default["default"].createElement("div", {
+    ref: function (refs) {
+      setWidth(refs === null || refs === void 0 ? void 0 : refs.offsetWidth);
+      setHeight(refs === null || refs === void 0 ? void 0 : refs.offsetHeight);
+    },
+    style: {
+      width: '100%',
+      height: '100%',
+      overflow: 'hidden'
+    }
+  }, render);
+}
+
+function LoadingImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b,
+      _c = _a.duration,
+      duration = _c === void 0 ? 1 : _c,
+      _d = _a.delay,
+      delay = _d === void 0 ? 1 : _d;
+  var scale = 256 / 4000;
+  return React__default["default"].createElement("svg", {
+    className: cn("ani-fade-in"),
+    style: {
+      flex: "0 0 ".concat(size, "px"),
+      opacity: 0,
+      animationDelay: "".concat(delay, "s"),
+      animationDuration: "".concat(duration, "s"),
+      animationFillMode: 'forwards'
+    },
+    width: size,
+    height: size,
+    viewBox: "0 0 ".concat(size, " ").concat(size),
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, React__default["default"].createElement("g", {
+    transform: "scale(".concat(scale, ")"),
+    "clip-path": "url(#clip0_5_701)"
+  }, React__default["default"].createElement("rect", {
+    width: "4000",
+    height: "4000",
+    transform: "translate(0 4000) rotate(-90)",
+    fill: "#F8F8F8"
+  }), React__default["default"].createElement("path", {
+    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+    fill: "#E6E6E6"
+  }), React__default["default"].createElement("path", {
+    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+    fill: "#F6E4DD"
+  }), React__default["default"].createElement("path", {
+    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+    fill: "#DCEACA"
+  }), React__default["default"].createElement("path", {
+    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+    fill: "#E6E6E6"
+  }), React__default["default"].createElement("path", {
+    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+    fill: "#DCEACA"
+  }), React__default["default"].createElement("path", {
+    d: "M2094.05 1450.88C2127.97 1531.67 2192.23 1496.11 2250.02 1514.4C2567.73 1559.37 2608.68 1362.05 2668.2 1302.01C2736.79 1232.83 2612.15 1065.8 2523.28 1090.46C2434.42 1115.13 2432.96 1150.53 2415.25 1229.76C2397.53 1308.98 2233.45 1247.46 2177.4 1257.03C2121.35 1266.61 2051.65 1349.89 2094.05 1450.88Z",
+    fill: "#A2CAEE"
+  }), React__default["default"].createElement("circle", {
+    cx: "958",
+    cy: "3092",
+    r: "95",
+    fill: "#A2CAEE"
+  }), React__default["default"].createElement("circle", {
+    cx: "1127",
+    cy: "3176",
+    r: "56",
+    fill: "#A2CAEE"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3459.68 1085.96L4058.54 2069.19L4001.32 2104.04L3402.46 1120.82L3459.68 1085.96Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-317.721 1447.99L595.333 2953.94L1201.76 4004.26L1143.74 4037.76L537.668 2988.06L-375.013 1482.72L-317.721 1447.99ZM1058.06 1406.15L1789.22 920.04L1109.17 -5.66436L1163.17 -45.3311L1844.92 882.695L2486.62 448.527L3047.72 1427.91L2989.59 1461.22L2464.38 544.474L1855.66 956.322L1855.55 956.398L1095.15 1461.94L1058.06 1406.15ZM1384.39 3114.5L2197.8 2552.05L1838.4 2105.93L1890.57 2063.9L2253.06 2513.84L2642 2244.89L2680.11 2300L1883.89 2850.56L2238.69 3352.52L2183.98 3391.19L1828.78 2888.67L1422.5 3169.61L1384.39 3114.5Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-100.246 749.04L1266.96 -152.746L1346.25 -32.5396L-20.9597 869.247L-100.246 749.04Z",
+    fill: "#FBEDB1"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M5229.83 1392.22L2830.78 2477.33L2803.17 2416.28L5202.22 1331.17L5229.83 1392.22Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2486.94 449.315L3519.19 1097.44L3483.56 1154.18L2451.32 506.057L2486.94 449.315Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2352.16 -273.141L2533.64 518.164L2468.34 533.141L2286.86 -258.164L2352.16 -273.141Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2237.62 3336.43L2440.07 4086.61L2375.39 4104.07L2172.93 3353.89L2237.62 3336.43Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M1204.91 1396.51L-54.5055 1973.41L-82.4082 1912.49L1177.01 1335.59L1204.91 1396.51Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2694.5 2950.14L4158.86 4928.5L4105.01 4968.36L2640.64 2990L2694.5 2950.14Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3441.72 -42.6462L3995.65 846.725L3938.77 882.146L3384.85 -7.2254L3441.72 -42.6462Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M2282.81 3631.14L2925.81 3304.14L2956.19 3363.86L2313.19 3690.86L2282.81 3631.14Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M466.178 1695.89L522.822 1660.11L813.709 2120.58L1365.65 1773.15L1401.35 1829.85L849.492 2177.23L1140.32 2637.61L1083.68 2673.39L466.178 1695.89Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M790.24 914.745L1475.24 451.745L1512.76 507.255L827.76 970.255L790.24 914.745Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3410.6 2192.45L2986.6 1469.45L3044.4 1435.55L3468.4 2158.55L3410.6 2192.45Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M3637.26 329.182L3012.26 803.682L2971.74 750.318L3596.74 275.818L3637.26 329.182Z",
+    fill: "white"
+  }), React__default["default"].createElement("path", {
+    "fill-rule": "evenodd",
+    "clip-rule": "evenodd",
+    d: "M-102.531 3333.52L1563.16 2259.21L418.867 413.751L541.25 337.866L1684.19 2181.14L4025.32 666.934L4103.57 787.82L2336.63 1931.51L3187.41 2659.17L4104.73 3340.1L4018.9 3455.73L3139.75 2803.13L956.929 4221.62L878.381 4100.93L1666.1 3588.26L1086.77 2737.81L-24.4816 3454.53L-102.531 3333.52ZM1207.82 2659.74L1786.86 3509.76L3022.47 2707.58L2210.46 2013.07L1207.82 2659.74Z",
+    fill: "#FBEDB1"
+  })), React__default["default"].createElement("defs", null, React__default["default"].createElement("clipPath", {
+    id: "clip0_5_701"
+  }, React__default["default"].createElement("rect", {
+    width: "4000",
+    height: "4000",
+    fill: "white",
+    transform: "translate(0 4000) rotate(-90)"
+  }))));
+}
+
+exports.MapLoadingWithImage = MapLoadingWithImage;
+exports.PointLoading = PointLoading;

package/dist/components/mint-map/core/advanced/index.d.ts

@@ -1 +1,2 @@
-export * from './MapBuildingProjection';
+export * from './MapBuildingProjection';
+export * from './MapLoadingComponents';

package/dist/components/mint-map/core/hooks/MarkerMovingHook.d.ts

@@ -1,6 +1,6 @@
-import { Marker } from "../../MintMap";
-import { MapMarkerMoving } from "../wrapper/MapMarkerWrapper";
-export interface MapMarkerMovingHookProps extends MapMarkerMoving {
-    marker?: Marker;
-}
-export declare function useMarkerMoving({ marker, positions, positionClosed, loop, fps, startPositionIndex, velocity, onMovingStart, onMovingEnd }: MapMarkerMovingHookProps): (() => void)[];
+import { Marker } from "../../types/MapDrawables";
+import { MapMarkerMoving } from "../wrapper/MapMarkerWrapper";
+export interface MapMarkerMovingHookProps extends MapMarkerMoving {
+    marker?: Marker;
+}
+export declare function useMarkerMoving({ marker, positions, positionClosed, loop, fps, startPositionIndex, velocity, onMovingStart, onMovingEnd }: MapMarkerMovingHookProps): (() => void)[];

package/dist/components/mint-map/core/hooks/MarkerMovingHook.js

@@ -33,13 +33,16 @@ function useMarkerMoving(_a) {
       _h = _a.velocity,
       velocity = _h === void 0 ? 10 : _h,
       onMovingStart = _a.onMovingStart,
-      onMovingEnd = _a.onMovingEnd;
+      onMovingEnd = _a.onMovingEnd; //controller
+
   var controller = MintMapProvider.useMintMapController();
   React.useEffect(function () {
+    //console.log('velocity changed!!!!', velocity);
     contextRef.current && (contextRef.current.velocityKmh = velocity);
   }, [velocity]);
   var contextRef = React.useRef();
   React.useEffect(function () {
+    //console.log('ani marker', marker);
     if (marker) {
       var currTargetIndex_1 = nextIndex(positions, startPositionIndex);
       var stopNext_1 = false;
@@ -57,15 +60,19 @@ function useMarkerMoving(_a) {
       var draw = function (frameGapTime, _elapsedTime) {
         if (!marker) {
           console.log('myMarker is not exist!!!');
-          return true;
-        }
+          return true; //종료
+        } //지난 시간
+
 
-        context_1.elapsedTimeMs = frameGapTime;
+        context_1.elapsedTimeMs = frameGapTime; //next position 계산
 
         while (true) {
-          calculate.GeoCalulator.computeNextPositionAndDistances(context_1);
+          //계산
+          calculate.GeoCalulator.computeNextPositionAndDistances(context_1); //타겟에 도착했으면, 원래 얼마나 더 갈수 있었는지 체크해서
+          //그 만큼 더 가도록 계속 처리하기위해 다시 계산
 
           if (context_1.nextPos === context_1.pos2) {
+            //다음 목표가 시작점과 같으면 loop 카운트 +1
             if (currTargetIndex_1 === startPositionIndex) {
               loopCount_1 += 1;
             }
@@ -73,9 +80,11 @@ function useMarkerMoving(_a) {
             if (!loop && loopCount_1 > 0) {
               stopNext_1 = true;
               break;
-            }
+            } //현재 출발점
+
+
+            context_1.pos1 = positions[currTargetIndex_1]; //현재 목표점
 
-            context_1.pos1 = positions[currTargetIndex_1];
             currTargetIndex_1 = nextIndex(positions, currTargetIndex_1);
 
             if (currTargetIndex_1 === 0 && !positionClosed) {
@@ -95,7 +104,7 @@ function useMarkerMoving(_a) {
 
         if (stopNext_1) {
           onMovingEnd && onMovingEnd();
-          return true;
+          return true; //종료
         }
 
         return false;