@mint-ui/map 0.1.5-beta → 0.1.7-beta

package/dist/components/mint-map/MintMap.d.ts

@@ -10,6 +10,7 @@ export interface MintMapProps extends MintMapEvents {
     mapId?: string;
     base?: BaseProps;
     visible?: boolean;
+    markerCache?: boolean;
 }
 export interface MintMapEvents {
     onBoundsChanged?: (bounds: Bounds) => void;

package/dist/components/mint-map/core/wrapper/MapMarkerWrapper.js

@@ -44,9 +44,11 @@ function MapMarkerWrapper(_a) {
     }
   }, [movingState]);
   React.useEffect(function () {
-    setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
-      marker: markerRef.current
-    }));
+    if (movingAnimation) {
+      setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
+        marker: markerRef.current
+      }));
+    }
   }, [movingAnimation]);
   var start = MarkerMovingHook.useMarkerMoving(movingState)[0];
 
@@ -119,9 +121,11 @@ function MapMarkerWrapper(_a) {
   React.useEffect(function () {
     if (options) {
       if (markerRef.current) {
+        console.log('update Marker');
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
       } else {
+        console.log('create Marker');
         markerRef.current = new MintMap.Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);

package/dist/components/mint-map/naver/NaverMintMapController.d.ts

@@ -1,12 +1,15 @@
 /// <reference types="navermaps" />
 import { MintMapController } from "../core/MintMapController";
 import { Bounds, Drawable, MapType, MapVendorType, Marker, MarkerOptions, MintMapProps, Polygon, PolygonOptions, Polyline, PolylineOptions, Position } from "../MintMap";
+import { ObjectPool } from '@mint-ui/tools';
 export declare class NaverMintMapController extends MintMapController {
     type: MapType;
     map: naver.maps.Map | null;
     scriptUrl: string;
     scriptModules: string[];
+    markerPool?: ObjectPool<naver.maps.Marker>;
     constructor(props: MintMapProps);
+    private initMarkerPool;
     polylineEvents: string[];
     createPolyline(polyline: Polyline): void;
     updatePolyline(polyline: Polyline, options: PolylineOptions): void;

package/dist/components/mint-map/naver/NaverMintMapController.js

@@ -6,6 +6,7 @@ var tslib = require('tslib');
 var MintMapController = require('../core/MintMapController.js');
 var waiting = require('../core/util/waiting.js');
 var MintMap = require('../MintMap.js');
+var tools = require('@mint-ui/tools');
 
 var NaverMintMapController = function (_super) {
   tslib.__extends(NaverMintMapController, _super);
@@ -26,6 +27,20 @@ var NaverMintMapController = function (_super) {
     return _this;
   }
 
+  NaverMintMapController.prototype.initMarkerPool = function () {
+    var _this = this;
+
+    if (!this.mapProps.markerCache) return;
+    this.markerPool = new tools.ObjectPool().setFactory(function () {
+      return new naver.maps.Marker({
+        position: new MintMap.Position(0, 0),
+        map: _this.map || undefined
+      });
+    }).setClear(function (item) {
+      item.setMap(null);
+    }).createPool(1000).setCheckLiveTimeInterval(1000);
+  };
+
   NaverMintMapController.prototype.createPolyline = function (polyline) {
     var _this = this;
 
@@ -163,8 +178,19 @@ var NaverMintMapController = function (_super) {
         content: marker.element,
         anchor: marker.options.anchor
       });
-      var naverMarker_1 = new naver.maps.Marker(options);
-      marker.native = naverMarker_1;
+      var naverMarker_1;
+
+      if (this.mapProps.markerCache && this.markerPool) {
+        naverMarker_1 = this.markerPool.getPoolItem();
+        naverMarker_1.setVisible(true);
+        options.icon && naverMarker_1.setIcon(options.icon);
+        marker.native = naverMarker_1;
+        this.updateMarker(marker, marker.options);
+      } else {
+        naverMarker_1 = new naver.maps.Marker(options);
+        marker.native = naverMarker_1;
+      }
+
       ((_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);
@@ -178,26 +204,19 @@ var NaverMintMapController = function (_super) {
       var map = marker.native.getMap();
 
       if (map) {
-        var newOption = {
-          map: map,
-          position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
-          visible: options.visible === undefined || options.visible
-        };
+        if (options.position && options.position instanceof MintMap.Position) {
+          marker.native.setPosition(options.position);
+        }
 
-        if (options.anchor) {
-          newOption.icon = tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
-            anchor: options.anchor
-          });
+        if (options.visible !== undefined) {
+          marker.native.setVisible(options.visible);
         }
 
-        marker.native.setOptions({
-          map: map,
-          position: options.position instanceof MintMap.Position ? options.position : marker.native.getPosition(),
-          visible: options.visible === undefined || options.visible,
-          icon: tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
+        if (options.anchor) {
+          marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
-          })
-        });
+          }));
+        }
       }
     }
   };
@@ -241,8 +260,23 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
+    var _a;
+
     if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
-      drawable.native.setMap(null);
+      if (drawable.native instanceof naver.maps.Marker) {
+        if (this.mapProps.markerCache && this.markerPool) {
+          drawable.native.setVisible(false);
+          this.markerEvents.map(function (eName) {
+            drawable.native.clearListeners(eName);
+          });
+          (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
+        } else {
+          drawable.native.setMap(null);
+        }
+      } else {
+        drawable.native.setMap(null);
+      }
+
       return true;
     }
 
@@ -377,6 +411,7 @@ var NaverMintMapController = function (_super) {
                   });
                   this.map = map;
                   this.mapInitialized = true;
+                  this.initMarkerPool();
                   console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
@@ -389,10 +424,13 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.destroyMap = function () {
+    var _a;
+
     console.log("".concat(this.type, " map destroyed"));
 
     try {
       this.map && this.map.destroy();
+      (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('naver map destroy error', e);
     }

package/dist/index.es.js

@@ -2,6 +2,7 @@ import { __awaiter, __generator, __extends, __spreadArray, __assign, __rest } fr
 import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
 import classNames from 'classnames/bind';
 import styleInject from 'style-inject';
+import { ObjectPool } from '@mint-ui/tools';
 import { createPortal } from 'react-dom';
 
 var css_248z$2 = ".MintMap-module_loading-point-container__znk6l {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n}\n\n.MintMap-module_ani-blink__K89JK {\n  animation: MintMap-module_blink__mqfeV infinite 0.6s;\n}\n\n@keyframes MintMap-module_blink__mqfeV {\n  0% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.3;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-in__lpHuy {\n  animation: MintMap-module_fade-in__jHpv1 1s;\n}\n\n@keyframes MintMap-module_fade-in__jHpv1 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n.MintMap-module_ani-fade-out__5-esw {\n  animation: MintMap-module_fade-out__CIjGe 1s;\n}\n\n@keyframes MintMap-module_fade-out__CIjGe {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n.MintMap-module_ani-expansion__S2vOZ {\n  animation: MintMap-module_expansion__WMo5- ease 0.6s;\n}\n\n@keyframes MintMap-module_expansion__WMo5- {\n  0% {\n    width: 0%;\n  }\n  100% {\n    width: 100%;\n  }\n}";
@@ -340,6 +341,20 @@ var NaverMintMapController = function (_super) {
     return _this;
   }
 
+  NaverMintMapController.prototype.initMarkerPool = function () {
+    var _this = this;
+
+    if (!this.mapProps.markerCache) return;
+    this.markerPool = new ObjectPool().setFactory(function () {
+      return new naver.maps.Marker({
+        position: new Position(0, 0),
+        map: _this.map || undefined
+      });
+    }).setClear(function (item) {
+      item.setMap(null);
+    }).createPool(1000).setCheckLiveTimeInterval(1000);
+  };
+
   NaverMintMapController.prototype.createPolyline = function (polyline) {
     var _this = this;
 
@@ -477,8 +492,19 @@ var NaverMintMapController = function (_super) {
         content: marker.element,
         anchor: marker.options.anchor
       });
-      var naverMarker_1 = new naver.maps.Marker(options);
-      marker.native = naverMarker_1;
+      var naverMarker_1;
+
+      if (this.mapProps.markerCache && this.markerPool) {
+        naverMarker_1 = this.markerPool.getPoolItem();
+        naverMarker_1.setVisible(true);
+        options.icon && naverMarker_1.setIcon(options.icon);
+        marker.native = naverMarker_1;
+        this.updateMarker(marker, marker.options);
+      } else {
+        naverMarker_1 = new naver.maps.Marker(options);
+        marker.native = naverMarker_1;
+      }
+
       ((_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);
@@ -492,26 +518,19 @@ var NaverMintMapController = function (_super) {
       var map = marker.native.getMap();
 
       if (map) {
-        var newOption = {
-          map: map,
-          position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-          visible: options.visible === undefined || options.visible
-        };
+        if (options.position && options.position instanceof Position) {
+          marker.native.setPosition(options.position);
+        }
 
-        if (options.anchor) {
-          newOption.icon = __assign(__assign({}, marker.native.getIcon()), {
-            anchor: options.anchor
-          });
+        if (options.visible !== undefined) {
+          marker.native.setVisible(options.visible);
         }
 
-        marker.native.setOptions({
-          map: map,
-          position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-          visible: options.visible === undefined || options.visible,
-          icon: __assign(__assign({}, marker.native.getIcon()), {
+        if (options.anchor) {
+          marker.native.setIcon(__assign(__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
-          })
-        });
+          }));
+        }
       }
     }
   };
@@ -555,8 +574,23 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.clearDrawable = function (drawable) {
+    var _a;
+
     if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
-      drawable.native.setMap(null);
+      if (drawable.native instanceof naver.maps.Marker) {
+        if (this.mapProps.markerCache && this.markerPool) {
+          drawable.native.setVisible(false);
+          this.markerEvents.map(function (eName) {
+            drawable.native.clearListeners(eName);
+          });
+          (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
+        } else {
+          drawable.native.setMap(null);
+        }
+      } else {
+        drawable.native.setMap(null);
+      }
+
       return true;
     }
 
@@ -691,6 +725,7 @@ var NaverMintMapController = function (_super) {
                   });
                   this.map = map;
                   this.mapInitialized = true;
+                  this.initMarkerPool();
                   console.log("".concat(this.type, " map script initialized"), divElement);
                   resolve(map);
                   return [2];
@@ -703,10 +738,13 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.destroyMap = function () {
+    var _a;
+
     console.log("".concat(this.type, " map destroyed"));
 
     try {
       this.map && this.map.destroy();
+      (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('naver map destroy error', e);
     }
@@ -1623,9 +1661,11 @@ function MapMarkerWrapper(_a) {
     }
   }, [movingState]);
   useEffect(function () {
-    setMovingState(__assign(__assign({}, movingAnimation), {
-      marker: markerRef.current
-    }));
+    if (movingAnimation) {
+      setMovingState(__assign(__assign({}, movingAnimation), {
+        marker: markerRef.current
+      }));
+    }
   }, [movingAnimation]);
   var start = useMarkerMoving(movingState)[0];
 
@@ -1698,9 +1738,11 @@ function MapMarkerWrapper(_a) {
   useEffect(function () {
     if (options) {
       if (markerRef.current) {
+        console.log('update Marker');
         controller.updateMarker(markerRef.current, options);
         offsetCalibration(controller.getMapType(), divElement, options);
       } else {
+        console.log('create Marker');
         markerRef.current = new Marker(options);
         markerRef.current.element = divElement;
         controller.createMarker(markerRef.current);

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('react-dom')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'tslib', 'react', 'classnames/bind', 'style-inject', 'react-dom'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@mint-ui/map"] = {}, global.tslib, global.React, global.classNames, global.styleInject, global.reactDom));
-})(this, (function (exports, tslib, React, classNames, styleInject, reactDom) { 'use strict';
+  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';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -346,6 +346,20 @@
       return _this;
     }
 
+    NaverMintMapController.prototype.initMarkerPool = function () {
+      var _this = this;
+
+      if (!this.mapProps.markerCache) return;
+      this.markerPool = new tools.ObjectPool().setFactory(function () {
+        return new naver.maps.Marker({
+          position: new Position(0, 0),
+          map: _this.map || undefined
+        });
+      }).setClear(function (item) {
+        item.setMap(null);
+      }).createPool(1000).setCheckLiveTimeInterval(1000);
+    };
+
     NaverMintMapController.prototype.createPolyline = function (polyline) {
       var _this = this;
 
@@ -483,8 +497,19 @@
           content: marker.element,
           anchor: marker.options.anchor
         });
-        var naverMarker_1 = new naver.maps.Marker(options);
-        marker.native = naverMarker_1;
+        var naverMarker_1;
+
+        if (this.mapProps.markerCache && this.markerPool) {
+          naverMarker_1 = this.markerPool.getPoolItem();
+          naverMarker_1.setVisible(true);
+          options.icon && naverMarker_1.setIcon(options.icon);
+          marker.native = naverMarker_1;
+          this.updateMarker(marker, marker.options);
+        } else {
+          naverMarker_1 = new naver.maps.Marker(options);
+          marker.native = naverMarker_1;
+        }
+
         ((_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);
@@ -498,26 +523,19 @@
         var map = marker.native.getMap();
 
         if (map) {
-          var newOption = {
-            map: map,
-            position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-            visible: options.visible === undefined || options.visible
-          };
+          if (options.position && options.position instanceof Position) {
+            marker.native.setPosition(options.position);
+          }
 
-          if (options.anchor) {
-            newOption.icon = tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
-              anchor: options.anchor
-            });
+          if (options.visible !== undefined) {
+            marker.native.setVisible(options.visible);
           }
 
-          marker.native.setOptions({
-            map: map,
-            position: options.position instanceof Position ? options.position : marker.native.getPosition(),
-            visible: options.visible === undefined || options.visible,
-            icon: tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
+          if (options.anchor) {
+            marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
               anchor: options.anchor
-            })
-          });
+            }));
+          }
         }
       }
     };
@@ -561,8 +579,23 @@
     };
 
     NaverMintMapController.prototype.clearDrawable = function (drawable) {
+      var _a;
+
       if (drawable && drawable.native && drawable.native instanceof naver.maps.OverlayView) {
-        drawable.native.setMap(null);
+        if (drawable.native instanceof naver.maps.Marker) {
+          if (this.mapProps.markerCache && this.markerPool) {
+            drawable.native.setVisible(false);
+            this.markerEvents.map(function (eName) {
+              drawable.native.clearListeners(eName);
+            });
+            (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.releasePoolItem(drawable.native);
+          } else {
+            drawable.native.setMap(null);
+          }
+        } else {
+          drawable.native.setMap(null);
+        }
+
         return true;
       }
 
@@ -697,6 +730,7 @@
                     });
                     this.map = map;
                     this.mapInitialized = true;
+                    this.initMarkerPool();
                     console.log("".concat(this.type, " map script initialized"), divElement);
                     resolve(map);
                     return [2];
@@ -709,10 +743,13 @@
     };
 
     NaverMintMapController.prototype.destroyMap = function () {
+      var _a;
+
       console.log("".concat(this.type, " map destroyed"));
 
       try {
         this.map && this.map.destroy();
+        (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
       } catch (e) {
         console.log('naver map destroy error', e);
       }
@@ -1629,9 +1666,11 @@
       }
     }, [movingState]);
     React.useEffect(function () {
-      setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
-        marker: markerRef.current
-      }));
+      if (movingAnimation) {
+        setMovingState(tslib.__assign(tslib.__assign({}, movingAnimation), {
+          marker: markerRef.current
+        }));
+      }
     }, [movingAnimation]);
     var start = useMarkerMoving(movingState)[0];
 
@@ -1704,9 +1743,11 @@
     React.useEffect(function () {
       if (options) {
         if (markerRef.current) {
+          console.log('update Marker');
           controller.updateMarker(markerRef.current, options);
           offsetCalibration(controller.getMapType(), divElement, options);
         } else {
+          console.log('create Marker');
           markerRef.current = new Marker(options);
           markerRef.current.element = divElement;
           controller.createMarker(markerRef.current);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.1.5-beta",
+  "version": "0.1.7-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",
@@ -59,6 +59,7 @@
   "dependencies": {
     "@types/google.maps": "^3.50.5",
     "@types/navermaps": "^3.6.1",
+    "@mint-ui/tools":"1.0.3",
     "axios": "^1.2.0",
     "classnames": "^2.3.1",
     "style-inject": "^0.3.0",