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

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('@mint-ui/tools'), require('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', '@mint-ui/tools', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.tools, global.reactDom));
-})(this, (function (exports, tslib, React, classNames, styleInject, tools, reactDom) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('tslib'), require('react'), require('classnames/bind'), require('style-inject'), require('uuid'), require('@mint-ui/tools'), require('react-dom')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', 'uuid', '@mint-ui/tools', 'react-dom'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.uuid, global.tools, global.reactDom));
+})(this, (function (exports, tslib, React, classNames, styleInject, uuid, tools, reactDom) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -380,12 +380,21 @@
       return new Position(latVal, lngVal);
     };
 
-    MintMapController.prototype.loadScript = function (url, id) {
+    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) {
-            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;
             }
 
@@ -393,8 +402,9 @@
             script.src = url;
             script.async = true;
             script.defer = true;
+            id && (script.id = id);
             script.addEventListener('load', function () {
-              resolve();
+              resolve(true);
             });
             document.body.appendChild(script);
           })];
@@ -402,6 +412,10 @@
       });
     };
 
+    MintMapController.prototype.getRandomFunctionName = function (prefix) {
+      return "".concat(prefix, "_").concat(uuid.v4().replace(/-/g, '_'));
+    };
+
     MintMapController.prototype.buildUrl = function (baseUrl, param) {
       var params = Object.entries(param).map(function (_a) {
         var key = _a[0],
@@ -964,6 +978,12 @@
       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 tslib.__awaiter(this, void 0, void 0, function () {
         var _this = this;
@@ -971,11 +991,11 @@
         return tslib.__generator(this, function (_a) {
           return [2, new Promise(function (resolve, error) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
-              var callbackName, loaded, params, ok;
+              var callbackName, loaded, params, callbackExecFlag, ok;
               return tslib.__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 () {
@@ -988,10 +1008,15 @@
                       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;
@@ -1490,6 +1515,12 @@
       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 tslib.__awaiter(this, void 0, void 0, function () {
         var _this = this;
@@ -1497,11 +1528,11 @@
         return tslib.__generator(this, function (_a) {
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
-              var callbackName, loaded, params, ok;
+              var callbackName, loaded, params, callbackExecFlag, ok;
               return tslib.__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 () {
@@ -1515,10 +1546,15 @@
                       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;
@@ -1964,6 +2000,12 @@
       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 tslib.__awaiter(this, void 0, void 0, function () {
         var _this = this;
@@ -1972,6 +2014,9 @@
           return [2, new Promise(function (resolve) {
             return tslib.__awaiter(_this, void 0, void 0, function () {
               var params, ok;
+
+              var _this = this;
+
               return tslib.__generator(this, function (_a) {
                 switch (_a.label) {
                   case 0:
@@ -1980,14 +2025,14 @@
                       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:
@@ -2346,23 +2391,25 @@
   };
   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 = tslib.__rest(_a, ["mapLoadingComponent", "mapType", "children", "base"]);
+    } : _c,
+        props = tslib.__rest(_a, ["mapLoadingComponent", "dissolveEffectWhenLoaded", "mapType", "children", "base"]);
 
-    var _c = React.useState(),
-        controller = _c[0],
-        setController = _c[1];
+    var loadingRef = React.useRef(null);
+
+    var _d = React.useState(),
+        controller = _d[0],
+        setController = _d[1];
 
     var loading = React.useMemo(function () {
-      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(PointLoading, {
-        text: "Loading"
-      });
+      return mapLoadingComponent ? mapLoadingComponent() : React__default["default"].createElement(React__default["default"].Fragment, null);
     }, [mapLoadingComponent]);
     React.useEffect(function () {
       if (mapType && mapType.length > 0) {
@@ -2394,28 +2441,56 @@
     }, [mapType]);
     return React__default["default"].createElement(React__default["default"].Fragment, null, controller ? React__default["default"].createElement(MintMapProvider, {
       controller: controller
-    }, React__default["default"].createElement(MintMapCore, tslib.__assign({
+    }, dissolveEffectWhenLoaded && React__default["default"].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__default["default"].createElement(MintMapCore, tslib.__assign({
       mapType: mapType
     }, props, {
       base: base
-    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, loading));
+    }), children)) : React__default["default"].createElement(React__default["default"].Fragment, null, dissolveEffectWhenLoaded && React__default["default"].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 = React.useState(Array.from(Array(pointCount)).map(function (_el, idx) {
       return Array.from(Array(idx + 1)).map(function () {
         return '.';
       }).join('');
     }))[0];
 
-    var _d = React.useState(''),
-        pointString = _d[0],
-        setPointString = _d[1];
+    var _e = React.useState(''),
+        pointString = _e[0],
+        setPointString = _e[1];
 
     React.useEffect(function () {
       var pointStringIndex = 0;
@@ -2444,6 +2519,202 @@
       }
     }, "".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$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__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)"
+    }))));
+  }
 
   var MintMapCanvasRenderer = function () {
     function MintMapCanvasRenderer(context) {
@@ -3398,7 +3669,7 @@
     var renderItemsOnView = React.useRef([]);
     var renderItemsMouseOverStatus = React.useRef(new Set());
     React.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 = [];
@@ -3497,6 +3768,7 @@
   exports.MapCanvasMarkerWrapper = MapCanvasMarkerWrapper;
   exports.MapCanvasWrapper = MapCanvasWrapper;
   exports.MapControlWrapper = MapControlWrapper;
+  exports.MapLoadingWithImage = MapLoadingWithImage;
   exports.MapMarkerWrapper = MapMarkerWrapper;
   exports.MapPolygonWrapper = MapPolygonWrapper;
   exports.MapPolylineWrapper = MapPolylineWrapper;
@@ -3508,6 +3780,7 @@
   exports.MintMapProvider = MintMapProvider;
   exports.NaverMintMapController = NaverMintMapController;
   exports.Offset = Offset;
+  exports.PointLoading = PointLoading;
   exports.Polygon = Polygon;
   exports.PolygonCalculator = PolygonCalculator;
   exports.Polyline = Polyline;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.4.2-beta",
+  "version": "0.4.4-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",