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

package/dist/components/mint-map/kakao/KakaoMintMapController.js

@@ -5,10 +5,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 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 MapTypes = require('../types/MapTypes.js');
+var MapEventTypes = require('../types/MapEventTypes.js');
 
-var KakaoMintMapController = function (_super) {
+var KakaoMintMapController =
+/** @class */
+function (_super) {
   tslib.__extends(KakaoMintMapController, _super);
 
   function KakaoMintMapController(props) {
@@ -17,27 +20,44 @@ var KakaoMintMapController = function (_super) {
     _this.type = 'kakao';
     _this.map = null;
     _this.scriptUrl = 'https://dapi.kakao.com/v2/maps/sdk.js';
-    _this.scriptModules = ['services', 'clusterer'];
+    _this.scriptModules = ['services', 'clusterer']; //  , 'geocoder' , 'panorama' , 'visualization']
+
+    _this.mapEvent = new MapEventTypes.MapEvent();
+    _this.mapUIEvent = new MapEventTypes.MapUIEvent();
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    return _this;
+    _this.eventMap = new Map(); //kakao only 이벤트이름 재정의 zoom_start
+
+    _this.mapEvent.ZOOMSTART = 'zoom_start';
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
+    return _this; // console.log(`${this.type} controller loadded`);
   }
 
   KakaoMintMapController.prototype.initMarkerPool = function () {
     var _this = this;
 
-    if (!this.mapProps.markerCache) return;
-    this.markerPool = new tools.ObjectPool().setFactory(function () {
+    if (!this.mapProps.markerCache) return; //marker pool setting
+
+    this.markerPool = new tools.ObjectPool() //logging on
+    //.setLog(true)
+    //factory 셋팅
+    .setFactory(function () {
+      //console.log('pool item created');
       return new kakao.maps.CustomOverlay({
-        position: _this.positionToLatLng(new MintMap.Position(0, 0)),
+        position: _this.positionToLatLng(new MapTypes.Position(0, 0)),
         map: _this.map || undefined
       });
-    }).setClear(function (item) {
+    }) //clear function 셋팅
+    .setClear(function (item) {
+      //console.log('pool item cleared');
       item.setMap(null);
-    }).createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000).setCheckLiveTimeInterval(1000);
+    }) //초기 pool 사이즈
+    .createPool(this.mapProps.markerCachePoolSize && this.mapProps.markerCachePoolSize > 0 ? this.mapProps.markerCachePoolSize : 1000) //TTL 체크 간격 (기본 5초)
+    .setCheckLiveTimeInterval(1000);
   };
 
   KakaoMintMapController.prototype.createPolyline = function (polyline) {
@@ -53,11 +73,11 @@ var KakaoMintMapController = function (_super) {
         lineOpacity = _d === void 0 ? 1 : _d;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('controller createPolyline start', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
-        return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+        return _this.positionToLatLng(Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem);
       });
       var pol_1 = new kakao.maps.Polyline({
         map: this.map,
@@ -65,7 +85,11 @@ var KakaoMintMapController = function (_super) {
         strokeColor: lineColor,
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity
-      });
+      }); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, kakao.maps.drawing.DrawingMode.POLYLINE)
+      // }
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -76,19 +100,22 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     var _this = this;
 
     if (polyline && polyline.native && polyline.native instanceof kakao.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
 
       if (Array.isArray(options.position)) {
         path = options.position.map(function (elem) {
-          return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+          return _this.positionToLatLng(Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem);
         });
       }
 
       polyline.native.setOptions({
         path: path || polyline.native.getPath(),
+        //visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
@@ -114,15 +141,17 @@ var KakaoMintMapController = function (_super) {
         fillOpacity = _f === void 0 ? 0.5 : _f;
         _a.visible;
         _a.editable;
-        var event = _a.event;
+        var event = _a.event; //console.log('polygon', polygon);
 
     if (this.map && Array.isArray(position)) {
       var outLine = position.map(function (elem) {
-        return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+        return _this.positionToLatLng(Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem);
       });
       var path = [outLine];
-      innerPositions && path.push(innerPositions.map(function (inner) {
-        return _this.positionToLatLng(inner);
+      innerPositions && path.push.apply(path, innerPositions.map(function (inner) {
+        return inner.map(function (innerItem) {
+          return _this.positionToLatLng(innerItem);
+        });
       }));
       var pol_2 = new kakao.maps.Polygon({
         map: this.map,
@@ -131,8 +160,12 @@ var KakaoMintMapController = function (_super) {
         strokeWeight: lineSize,
         strokeOpacity: lineOpacity,
         fillColor: fillColor,
-        fillOpacity: fillOpacity
-      });
+        fillOpacity: fillOpacity // clickable:true,
+        // visible:visible,
+
+      }); //@ts-ignore
+      //pol.setEditable(editable)
+
       polygon.native = pol_2;
       event && event.forEach(function (handler, key) {
         if (_this.polygonEvents.includes(key)) {
@@ -143,29 +176,35 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     var _this = this;
 
     if (polygon && polygon.native && polygon.native instanceof kakao.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
 
       if (Array.isArray(options.position)) {
         var outLine = options.position.map(function (elem) {
-          return _this.positionToLatLng(Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem);
+          return _this.positionToLatLng(Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem);
         });
         paths = [outLine];
         options.innerPositions && paths.push.apply(paths, options.innerPositions.map(function (inner) {
-          return _this.positionToLatLng(inner);
+          return inner.map(function (innerItem) {
+            return _this.positionToLatLng(innerItem);
+          });
         }));
       }
 
       polygon.native.setOptions({
         path: paths || polygon.native.getPath(),
+        // visible:options.visible === undefined || options.visible,
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
+      // options.editable !== undefined && polygon.native.setEditable(options.editable)
     }
   };
 
@@ -177,8 +216,10 @@ var KakaoMintMapController = function (_super) {
     if (this.map) {
       var options = {
         map: this.map,
-        position: this.positionToLatLng(marker.options.position)
-      };
+        position: this.positionToLatLng(marker.options.position) // visible:marker.options.visible === undefined || marker.options.visible,
+
+      }; //console.log('controller createMarker', marker.options);
+
       marker.element && (options.content = marker.element);
       var kakaoMarker_1;
 
@@ -191,7 +232,7 @@ var KakaoMintMapController = function (_super) {
       } else {
         kakaoMarker_1 = new kakao.maps.CustomOverlay(options);
         marker.options.visible !== undefined && kakaoMarker_1.setVisible(marker.options.visible);
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
         marker.native = kakaoMarker_1;
       }
 
@@ -204,11 +245,13 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof kakao.maps.CustomOverlay) {
       var map = marker.native.getMap();
 
       if (map) {
-        if (options.position && options.position instanceof MintMap.Position) {
+        //Position
+        if (options.position && options.position instanceof MapTypes.Position) {
           marker.native.setPosition(this.positionToLatLng(options.position));
         }
 
@@ -216,11 +259,16 @@ var KakaoMintMapController = function (_super) {
           marker.native.setVisible(options.visible);
         }
 
-        marker.element.parentElement.style.margin = '0';
+        this.removeParentElementsMargin(marker);
       }
     }
   };
 
+  KakaoMintMapController.prototype.removeParentElementsMargin = function (marker) {
+    //맵 별로 offset 통일을 위해서 margin 제거
+    marker.element && marker.element instanceof HTMLElement && marker.element.parentElement && (marker.element.parentElement.style.margin = '0');
+  };
+
   KakaoMintMapController.prototype.getMaxZIndex = function (increment, parent) {
     if (increment === void 0) {
       increment = 0;
@@ -230,14 +278,16 @@ var KakaoMintMapController = function (_super) {
       var targetPane = parent.parentElement;
       var max = 0;
 
-      for (var i = 0; i < targetPane.childElementCount; i++) {
-        var elem = targetPane.children[i];
+      if (targetPane) {
+        for (var i = 0; i < targetPane.childElementCount; i++) {
+          var elem = targetPane.children[i];
 
-        if (elem instanceof HTMLElement) {
-          var index = Number(elem.style.zIndex);
+          if (elem instanceof HTMLElement) {
+            var index = Number(elem.style.zIndex);
 
-          if (!isNaN(index) && index > max) {
-            max = index;
+            if (!isNaN(index) && index > max) {
+              max = index;
+            }
           }
         }
       }
@@ -308,7 +358,7 @@ var KakaoMintMapController = function (_super) {
   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;
+    return ((_b = (_a = window.kakao) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
 
   KakaoMintMapController.prototype.loadMapApi = function () {
@@ -316,7 +366,9 @@ var KakaoMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var params, ok;
 
@@ -330,13 +382,17 @@ var KakaoMintMapController = function (_super) {
                     libraries: this.scriptModules.join(','),
                     autoload: false
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'kakao_map_script', this.checkLoaded)];
 
                 case 1:
                   _a.sent();
 
-                  window.kakao.maps.load();
-                  return [4, waiting.waiting(function () {
+                  window.kakao.maps.load(function () {});
+                  return [4
+                  /*yield*/
+                  , waiting.waiting(function () {
                     return _this.checkLoaded() ? true : false;
                   })];
 
@@ -349,7 +405,9 @@ var KakaoMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -364,7 +422,9 @@ var KakaoMintMapController = function (_super) {
 
       return tslib.__generator(this, function (_a) {
         this.mapDivElement = divElement;
-        return [2, new Promise(function (resolve) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var options, maxZoom, minZoom, map;
 
@@ -375,17 +435,12 @@ var KakaoMintMapController = function (_super) {
             return tslib.__generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
-                  if (this.mapInitialized && this.map) {
-                    if (this.map.getElement() === divElement) {
-                      resolve(this.map);
-                      return [2];
-                    } else {
-                      this.map.destroy();
-                    }
-                  }
-
-                  if (!!this.mapApiLoaded) return [3, 2];
-                  return [4, this.loadMapApi()];
+                  if (!!this.mapApiLoaded) return [3
+                  /*break*/
+                  , 2];
+                  return [4
+                  /*yield*/
+                  , this.loadMapApi()];
 
                 case 1:
                   _e.sent();
@@ -395,7 +450,7 @@ var KakaoMintMapController = function (_super) {
                 case 2:
                   options = {
                     center: this.positionToLatLng((_a = this.mapProps.base) === null || _a === void 0 ? void 0 : _a.center),
-                    level: this.getBaseToMapZoom((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel),
+                    level: this.getBaseToMapZoom(((_b = this.mapProps.base) === null || _b === void 0 ? void 0 : _b.zoomLevel) || 10),
                     draggable: this.mapProps.draggable === false ? false : true,
                     scrollWheel: this.mapProps.draggable === false ? false : true,
                     keyboardShortcuts: this.mapProps.keyboardShortcuts === false ? false : true
@@ -418,31 +473,58 @@ var KakaoMintMapController = function (_super) {
                   map = new kakao.maps.Map(divElement, options);
                   map.setMaxLevel(minZoom);
                   map.setMinLevel(maxZoom);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+                  // map.addListener('dragstart', (e)=>{
+                  //   //console.log('map dragstart', e);
+                  //   this.dragStartPoint[0] = e.domEvent.clientX
+                  //   this.dragStartPoint[1] = e.domEvent.clientY
+                  // })
+                  //@ts-ignore
+                  // map.addListener('dragend', (e)=>{
+                  //   //console.log('map dragend', e);
+                  //   if(this.dragStartPoint[0] === e.domEvent.clientX && this.dragStartPoint[1] === e.domEvent.clientY){
+                  //     this.dragged = false
+                  //   }else{
+                  //     this.dragged = true
+                  //   }
+                  //   //console.log('map dragend', this.dragged)
+                  // })
+                  //@ts-ignore
+
                   map.addListener('idle', function (e) {
+                    //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.getZoomLevel());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
-                    var pos = new MintMap.Position(e.latLng.getLat(), e.latLng.getLng());
-                    pos.offset = new MintMap.Offset(e.point.x, e.point.y);
+                    var pos = new MapTypes.Position(e.latLng.getLat(), e.latLng.getLng());
+                    pos.offset = new MapTypes.Offset(e.point.x, e.point.y);
 
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
-                    var pos = new MintMap.Position(e.latLng.getLat(), e.latLng.getLng());
-                    pos.offset = new MintMap.Offset(e.point.x, e.point.y);
+                    var pos = new MapTypes.Position(e.latLng.getLat(), e.latLng.getLng());
+                    pos.offset = new MapTypes.Offset(e.point.x, e.point.y); // console.log('mousemove', pos)
 
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
+
                   resolve(map);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -452,6 +534,14 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    */
     var mapValue = this.getBaseToMapZoom(value);
 
     if (mapValue > 14) {
@@ -470,7 +560,8 @@ var KakaoMintMapController = function (_super) {
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('kakao map destroy error', e);
-    }
+    } // console.log(`${this.type} map destroyed`);
+
   };
 
   KakaoMintMapController.prototype.getCurrBounds = function () {
@@ -479,7 +570,7 @@ var KakaoMintMapController = function (_super) {
     }
 
     var bounds = this.map.getBounds();
-    return MintMap.Bounds.fromNESW(this.latLngToPosition(bounds.getNorthEast()), this.latLngToPosition(bounds.getSouthWest()));
+    return MapTypes.Bounds.fromNESW(this.latLngToPosition(bounds.getNorthEast()), this.latLngToPosition(bounds.getSouthWest()));
   };
 
   KakaoMintMapController.prototype.panningTo = function (targetCenter) {
@@ -509,11 +600,119 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.positionToLatLng = function (pos) {
-    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : undefined;
+    return pos ? new kakao.maps.LatLng(pos.lat, pos.lng) : new kakao.maps.LatLng(0, 0);
   };
 
   KakaoMintMapController.prototype.latLngToPosition = function (latLng) {
-    return latLng ? new MintMap.Position(latLng.getLat(), latLng.getLng()) : undefined;
+    return latLng ? new MapTypes.Position(latLng.getLat(), latLng.getLng()) : new MapTypes.Position(0, 0);
+  };
+
+  KakaoMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    } // console.log(`${eventName} add`);
+
+
+    var map = this.eventMap.get(eventName);
+
+    if (!map) {
+      map = new Map();
+      this.eventMap.set(eventName, map);
+    }
+
+    var wrappingCallback = function (e) {
+      if (eventName in _this.mapEvent) {
+        var bounds = _this.getCurrBounds();
+
+        var param = {
+          name: eventName,
+          mapType: 'kakao',
+          vendorEventName: kakaoEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        var position = new MapTypes.Position(e.latLng.getLat(), e.latLng.getLng());
+        position.offset = new MapTypes.Offset(e.point.x, e.point.y);
+        var param = {
+          name: eventName,
+          mapType: 'kakao',
+          vendorEventName: kakaoEventName,
+          param: {
+            position: position,
+            offset: position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    kakao.maps.event.addListener(this.map, kakaoEventName, wrappingCallback);
+    map.set(callback, wrappingCallback);
+  };
+
+  KakaoMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    }
+
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var wrappingCallback = map.get(callback);
+
+      if (wrappingCallback) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        kakao.maps.event.removeListener(this.map, kakaoEventName, wrappingCallback);
+        map.delete(callback);
+      }
+    }
+  };
+
+  KakaoMintMapController.prototype.removeAllEventListener = function (eventName) {
+    var _this = this;
+
+    if (eventName) {
+      this.clearEventListener(eventName);
+    } else {
+      this.eventMap.forEach(function (_map, eventName) {
+        _this.clearEventListener(eventName);
+      });
+      this.eventMap.clear();
+    }
+  };
+
+  KakaoMintMapController.prototype.clearEventListener = function (eventName) {
+    var _this = this;
+
+    var kakaoEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!kakaoEventName) {
+      console.warn("MapEventName ".concat(eventName, " is not supported"));
+      return;
+    }
+
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (wrappingCallback) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        kakao.maps.event.removeListener(_this.map, kakaoEventName, wrappingCallback);
+      });
+      this.eventMap.delete(eventName);
+    }
   };
 
   return KakaoMintMapController;