@mint-ui/map 0.4.2-beta → 0.4.4-beta

package/dist/index.es.js

@@ -2,6 +2,7 @@ import { __awaiter, __generator, __extends, __assign, __rest, __spreadArray } fr
 import React, { createContext, useContext, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
+import { v4 } from 'uuid';
 import { ObjectPool } from '@mint-ui/tools';
 import { createPortal } from 'react-dom';
 
@@ -375,12 +376,21 @@ var MintMapController = function () {
     return new Position(latVal, lngVal);
   };
 
-  MintMapController.prototype.loadScript = function (url, id) {
+  MintMapController.prototype.loadScript = function (url, id, checkLoaded) {
     return __awaiter(this, void 0, void 0, function () {
       return __generator(this, function (_a) {
         return [2, new Promise(function (resolve) {
-          if (id && document.getElementById(id)) {
-            resolve();
+          if (checkLoaded()) {
+            resolve(false);
+            return;
+          }
+
+          var prevElement = id ? document.getElementById(id) : undefined;
+
+          if (prevElement) {
+            prevElement.addEventListener('load', function () {
+              resolve(false);
+            });
             return;
           }
 
@@ -388,8 +398,9 @@ var MintMapController = function () {
           script.src = url;
           script.async = true;
           script.defer = true;
+          id && (script.id = id);
           script.addEventListener('load', function () {
-            resolve();
+            resolve(true);
           });
           document.body.appendChild(script);
         })];
@@ -397,6 +408,10 @@ var MintMapController = function () {
     });
   };
 
+  MintMapController.prototype.getRandomFunctionName = function (prefix) {
+    return "".concat(prefix, "_").concat(v4().replace(/-/g, '_'));
+  };
+
   MintMapController.prototype.buildUrl = function (baseUrl, param) {
     var params = Object.entries(param).map(function (_a) {
       var key = _a[0],
@@ -959,6 +974,12 @@ var NaverMintMapController = function (_super) {
     this.dragged = false;
   };
 
+  NaverMintMapController.prototype.checkLoaded = function () {
+    var _a, _b;
+
+    return (_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+  };
+
   NaverMintMapController.prototype.loadMapApi = function () {
     return __awaiter(this, void 0, void 0, function () {
       var _this = this;
@@ -966,11 +987,11 @@ var NaverMintMapController = function (_super) {
       return __generator(this, function (_a) {
         return [2, new Promise(function (resolve, error) {
           return __awaiter(_this, void 0, void 0, function () {
-            var callbackName, loaded, params, ok;
+            var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
-                  callbackName = "load".concat(new Date().getTime());
+                  callbackName = this.getRandomFunctionName('load_naver');
                   loaded = false;
 
                   window[callbackName] = function () {
@@ -983,10 +1004,15 @@ var NaverMintMapController = function (_super) {
                     submodules: this.scriptModules.join(','),
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naverscript')];
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
 
                 case 1:
-                  _a.sent();
+                  callbackExecFlag = _a.sent();
+
+                  if (!callbackExecFlag) {
+                    loaded = true;
+                    delete window[callbackName];
+                  }
 
                   return [4, waiting(function () {
                     return loaded;
@@ -1485,6 +1511,12 @@ var GoogleMintMapController = function (_super) {
     this.dragged = false;
   };
 
+  GoogleMintMapController.prototype.checkLoaded = function () {
+    var _a, _b;
+
+    return (_b = (_a = window.google) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+  };
+
   GoogleMintMapController.prototype.loadMapApi = function () {
     return __awaiter(this, void 0, void 0, function () {
       var _this = this;
@@ -1492,11 +1524,11 @@ var GoogleMintMapController = function (_super) {
       return __generator(this, function (_a) {
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
-            var callbackName, loaded, params, ok;
+            var callbackName, loaded, params, callbackExecFlag, ok;
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
-                  callbackName = "load".concat(new Date().getTime());
+                  callbackName = this.getRandomFunctionName('load_google');
                   loaded = false;
 
                   window[callbackName] = function () {
@@ -1510,10 +1542,15 @@ var GoogleMintMapController = function (_super) {
                     v: 'beta',
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'googlescript')];
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'google_map_script', this.checkLoaded)];
 
                 case 1:
-                  _a.sent();
+                  callbackExecFlag = _a.sent();
+
+                  if (!callbackExecFlag) {
+                    loaded = true;
+                    delete window[callbackName];
+                  }
 
                   return [4, waiting(function () {
                     return loaded;
@@ -1959,6 +1996,12 @@ var KakaoMintMapController = function (_super) {
     this.dragged = false;
   };
 
+  KakaoMintMapController.prototype.checkLoaded = function () {
+    var _a, _b;
+
+    return (_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map;
+  };
+
   KakaoMintMapController.prototype.loadMapApi = function () {
     return __awaiter(this, void 0, void 0, function () {
       var _this = this;
@@ -1967,6 +2010,9 @@ var KakaoMintMapController = function (_super) {
         return [2, new Promise(function (resolve) {
           return __awaiter(_this, void 0, void 0, function () {
             var params, ok;
+
+            var _this = this;
+
             return __generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
@@ -1975,14 +2021,14 @@ var KakaoMintMapController = function (_super) {
                     libraries: this.scriptModules.join(','),
                     autoload: false
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakaoscript')];
+                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
 
                 case 1:
                   _a.sent();
 
                   window.kakao.maps.load();
                   return [4, waiting(function () {
-                    return window.kakao.maps.Map ? true : false;
+                    return _this.checkLoaded() ? true : false;
                   })];
 
                 case 2:
@@ -2341,23 +2387,25 @@ var DEFAULT_CENTER = {
 };
 function MintMap(_a) {
   var mapLoadingComponent = _a.mapLoadingComponent,
+      _b = _a.dissolveEffectWhenLoaded,
+      dissolveEffectWhenLoaded = _b === void 0 ? true : _b,
       mapType = _a.mapType,
       children = _a.children,
-      _b = _a.base,
-      base = _b === void 0 ? {
+      _c = _a.base,
+      base = _c === void 0 ? {
     center: DEFAULT_CENTER,
     zoomLevel: 12
-  } : _b,
-      props = __rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
+  } : _c,
+      props = __rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
 
-  var _c = useState(),
-      controller = _c[0],
-      setController = _c[1];
+  var loadingRef = useRef(null);
+
+  var _d = useState(),
+      controller = _d[0],
+      setController = _d[1];
 
   var loading = useMemo(function () {
-    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(PointLoading, {
-      text: "Loading"
-    });
+    return mapLoadingComponent ? mapLoadingComponent() : React.createElement(React.Fragment, null);
   }, [mapLoadingComponent]);
   useEffect(function () {
     if (mapType && mapType.length > 0) {
@@ -2389,28 +2437,56 @@ function MintMap(_a) {
   }, [mapType]);
   return React.createElement(React.Fragment, null, controller ? React.createElement(MintMapProvider, {
     controller: controller
-  }, React.createElement(MintMapCore, __assign({
+  }, dissolveEffectWhenLoaded && React.createElement("div", {
+    className: cn$1('ani-fade-out'),
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      background: 'white',
+      zIndex: 1000,
+      animationFillMode: 'forwards',
+      animationDuration: '0.7s'
+    },
+    onAnimationEnd: function (e) {
+      e.target.style.display = 'none';
+    }
+  }), React.createElement(MintMapCore, __assign({
     mapType: mapType
   }, props, {
     base: base
-  }), children)) : React.createElement(React.Fragment, null, loading));
+  }), children)) : React.createElement(React.Fragment, null, dissolveEffectWhenLoaded && React.createElement("div", {
+    ref: function (refs) {
+      loadingRef.current = refs;
+    },
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%',
+      height: '100%',
+      zIndex: 1000
+    }
+  }), loading));
 }
-
 function PointLoading(_a) {
-  var text = _a.text,
-      _b = _a.pointCount,
-      pointCount = _b === void 0 ? 4 : _b,
-      _c = _a.speedMs,
-      speedMs = _c === void 0 ? 200 : _c;
+  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 = useState(Array.from(Array(pointCount)).map(function (_el, idx) {
     return Array.from(Array(idx + 1)).map(function () {
       return '.';
     }).join('');
   }))[0];
 
-  var _d = useState(''),
-      pointString = _d[0],
-      setPointString = _d[1];
+  var _e = useState(''),
+      pointString = _e[0],
+      setPointString = _e[1];
 
   useEffect(function () {
     var pointStringIndex = 0;
@@ -2439,6 +2515,202 @@ function PointLoading(_a) {
     }
   }, "".concat(text, " ").concat(pointString)));
 }
+function MapLoadingWithImage(_a) {
+  var _b = _a.size,
+      size = _b === void 0 ? 256 : _b;
+
+  var _c = useState(),
+      width = _c[0],
+      setWidth = _c[1];
+
+  var _d = useState(),
+      height = _d[0],
+      setHeight = _d[1];
+
+  var render = 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.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.createElement(LoadingImage, {
+          size: size,
+          duration: duration,
+          delay: delay
+        });
+      }));
+    });
+  }, [width, height]);
+  return React.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.createElement("svg", {
+    className: cn$1("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.createElement("g", {
+    transform: "scale(".concat(scale, ")"),
+    "clip-path": "url(#clip0_5_701)"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    transform: "translate(0 4000) rotate(-90)",
+    fill: "#F8F8F8"
+  }), React.createElement("path", {
+    d: "M2996.5 780L3624 309L3928.5 789.5L3422 1080.5L2996.5 780Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M522.5 449.5L1156.5 48.4999L1197.5 64.4999L1502.5 485.5L822.5 918L522.5 449.5Z",
+    fill: "#F6E4DD"
+  }), React.createElement("path", {
+    d: "M1149.5 1386.5L2468 516L2931.5 1286.5L2966 1415L1650.5 2248L1149.5 1386.5Z",
+    fill: "#DCEACA"
+  }), React.createElement("path", {
+    d: "M1840.5 2838.5L2609 2313L3047.5 2599.5L3073.5 2745.5L2176.5 3311L1840.5 2838.5Z",
+    fill: "#E6E6E6"
+  }), React.createElement("path", {
+    d: "M594 3013.5L1080.5 2681.5L1744 3615L1162.5 4002.5L594 3013.5Z",
+    fill: "#DCEACA"
+  }), React.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.createElement("circle", {
+    cx: "958",
+    cy: "3092",
+    r: "95",
+    fill: "#A2CAEE"
+  }), React.createElement("circle", {
+    cx: "1127",
+    cy: "3176",
+    r: "56",
+    fill: "#A2CAEE"
+  }), React.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.createElement("defs", null, React.createElement("clipPath", {
+    id: "clip0_5_701"
+  }, React.createElement("rect", {
+    width: "4000",
+    height: "4000",
+    fill: "white",
+    transform: "translate(0 4000) rotate(-90)"
+  }))));
+}
 
 var MintMapCanvasRenderer = function () {
   function MintMapCanvasRenderer(context) {
@@ -3393,7 +3665,7 @@ function MapCanvasWrapper(_a) {
   var renderItemsOnView = useRef([]);
   var renderItemsMouseOverStatus = useRef(new Set());
   useEffect(function () {
-    renderItems.current = (Array.isArray(children) ? children : [children]).map(function (item) {
+    renderItems.current = (Array.isArray(children) ? children : children ? [children] : []).map(function (item) {
       return item.props;
     });
     var zIndexList = [];
@@ -3483,4 +3755,4 @@ function MapCanvasMarkerWrapper(_props) {
   return React.createElement(React.Fragment, null);
 }
 
-export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };
+export { AnimationPlayer, Bounds, Drawable, GeoCalulator, GoogleMintMapController, MapBuildingProjection, MapCanvasMarkerWrapper, MapCanvasWrapper, MapControlWrapper, MapLoadingWithImage, MapMarkerWrapper, MapPolygonWrapper, MapPolylineWrapper, Marker, MintMap, MintMapCanvasRenderer, MintMapController, MintMapCore, MintMapProvider, NaverMintMapController, Offset, PointLoading, Polygon, PolygonCalculator, Polyline, Position, getClusterInfo, useMarkerMoving, useMintMapController, waiting };

package/dist/index.js

@@ -26,9 +26,11 @@ var GoogleMintMapController = require('./components/mint-map/google/GoogleMintMa
 
 exports.Bounds = MintMap.Bounds;
 exports.Drawable = MintMap.Drawable;
+exports.MapLoadingWithImage = MintMap.MapLoadingWithImage;
 exports.Marker = MintMap.Marker;
 exports.MintMap = MintMap.MintMap;
 exports.Offset = MintMap.Offset;
+exports.PointLoading = MintMap.PointLoading;
 exports.Polygon = MintMap.Polygon;
 exports.Polyline = MintMap.Polyline;
 exports.Position = MintMap.Position;