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

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

@@ -7,6 +7,7 @@ var MintMapController = require('../core/MintMapController.js');
 var waiting = require('../core/util/waiting.js');
 var tools = require('@mint-ui/tools');
 var MapTypes = require('../types/MapTypes.js');
+var MapEventTypes = require('../types/MapEventTypes.js');
 
 var KakaoMintMapController =
 /** @class */
@@ -19,12 +20,20 @@ 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;
+    _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`);
   }
 
@@ -598,6 +607,114 @@ function (_super) {
     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;
 }(MintMapController.MintMapController);
 

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

@@ -5,11 +5,14 @@ import { MapType, MapVendorType } from "../types/CommonTypes";
 import { Drawable, Marker, MarkerOptions, Polygon, PolygonOptions, Polyline, PolylineOptions } from "../types/MapDrawables";
 import { Bounds, Position } from "../types/MapTypes";
 import { MintMapProps } from "../types/MintMapProps";
+import { EventCallback, EventParamType, MapEvent, MapEventName, MapUIEvent } from "../types/MapEventTypes";
 export declare class NaverMintMapController extends MintMapController {
     type: MapType;
     map: naver.maps.Map | null;
     scriptUrl: string;
     scriptModules: string[];
+    protected mapEvent: MapEvent;
+    protected mapUIEvent: MapUIEvent;
     markerPool?: ObjectPool<naver.maps.Marker>;
     constructor(props: MintMapProps);
     private initMarkerPool;
@@ -42,4 +45,9 @@ export declare class NaverMintMapController extends MintMapController {
     setZoomLevel(zoom: number): void;
     getCenter(): Position;
     setCenter(position: Position): void;
+    private eventMap;
+    addEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeEventListener(eventName: MapEventName, callback: EventCallback<EventParamType>): void;
+    removeAllEventListener(eventName?: MapEventName | undefined): void;
+    private clearEventListener;
 }

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

@@ -7,6 +7,7 @@ var MintMapController = require('../core/MintMapController.js');
 var waiting = require('../core/util/waiting.js');
 var tools = require('@mint-ui/tools');
 var MapTypes = require('../types/MapTypes.js');
+var MapEventTypes = require('../types/MapEventTypes.js');
 
 var NaverMintMapController =
 /** @class */
@@ -19,12 +20,18 @@ function (_super) {
     _this.type = 'naver';
     _this.map = null;
     _this.scriptUrl = 'https://openapi.map.naver.com/openapi/v3/maps.js';
-    _this.scriptModules = ['drawing'];
+    _this.scriptModules = ['drawing']; //  , '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;
+    _this.eventMap = new Map();
+    Object.freeze(_this.mapEvent);
+    Object.freeze(_this.mapUIEvent);
     return _this; // console.log(`${this.type} controller loadded`);
   }
 
@@ -574,6 +581,7 @@ function (_super) {
     var _a;
 
     try {
+      this.removeAllEventListener();
       this.map && this.map.destroy();
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
@@ -621,6 +629,98 @@ function (_super) {
     (_a = this.map) === null || _a === void 0 ? void 0 : _a.setCenter(position);
   };
 
+  NaverMintMapController.prototype.addEventListener = function (eventName, callback) {
+    var _this = this;
+
+    var naverEventName = this.mapEvent.get(eventName) || this.mapUIEvent.get(eventName);
+
+    if (!naverEventName) {
+      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: 'naver',
+          vendorEventName: naverEventName,
+          param: {
+            bounds: bounds,
+            center: bounds.getCenter(),
+            zoomLevel: _this.getZoomLevel()
+          }
+        };
+        callback(param);
+      } else if (eventName in _this.mapUIEvent) {
+        var position = new MapTypes.Position(e.coord.y, e.coord.x);
+        position.offset = new MapTypes.Offset(e.offset.x, e.offset.y);
+        var param = {
+          name: eventName,
+          mapType: 'naver',
+          vendorEventName: naverEventName,
+          param: {
+            position: position,
+            offset: position.offset
+          }
+        };
+        callback(param);
+      }
+    };
+
+    var naverEventListener = naver.maps.Event.addListener(this.map, naverEventName, wrappingCallback);
+    map.set(callback, naverEventListener);
+  };
+
+  NaverMintMapController.prototype.removeEventListener = function (eventName, callback) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      var naverEventListener = map.get(callback);
+
+      if (naverEventListener) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        naver.maps.Event.removeListener(naverEventListener);
+        map.delete(callback);
+      }
+    }
+  };
+
+  NaverMintMapController.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();
+    }
+  };
+
+  NaverMintMapController.prototype.clearEventListener = function (eventName) {
+    var map = this.eventMap.get(eventName);
+
+    if (map) {
+      map.forEach(function (naverEventListener) {
+        // console.log(`${naverEventListener.eventName} remove`);
+        naver.maps.Event.removeListener(naverEventListener);
+      });
+      this.eventMap.delete(eventName);
+    }
+  };
+
   return NaverMintMapController;
 }(MintMapController.MintMapController);
 

package/dist/components/mint-map/types/MapEventTypes.d.ts

@@ -0,0 +1,41 @@
+import { MapType } from "./CommonTypes";
+import { Bounds, Offset, Position } from "./MapTypes";
+export declare class MapEvent {
+    BOUNDS_CHANGED: string;
+    CENTER_CHANGED: string;
+    IDLE: string;
+    ZOOM_CHANGED: string;
+    ZOOMSTART: string;
+    get(eventName: MapEventName): string | undefined;
+}
+export declare class MapUIEvent {
+    CLICK: string;
+    DBLCLICK: string;
+    MOUSEDOWN: string;
+    MOUSEUP: string;
+    MOUSEOUT: string;
+    MOUSEMOVE: string;
+    MOUSEOVER: string;
+    DRAG: string;
+    DRAGSTART: string;
+    DRAGEND: string;
+    get(eventName: MapEventName): string | undefined;
+}
+export declare type MapEventName = keyof MapEvent | keyof MapUIEvent;
+export declare type MapEventParam = {
+    center: Position;
+    bounds: Bounds;
+    zoomLevel: number;
+};
+export declare type MapUIEventParam = {
+    offset: Offset;
+    position: Position;
+};
+export declare type EventParamType = MapEventParam & MapUIEventParam;
+export interface EventParam<T> {
+    mapType: MapType;
+    name: MapEventName;
+    vendorEventName: string;
+    param: T;
+}
+export declare type EventCallback<T> = (e: EventParam<T>) => void;

package/dist/components/mint-map/types/MapEventTypes.js

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// export type MapEvent = 'bounds_changed'|'center_changed'|'idle'|'zoom_changed'|'zoomstart'
+// export type MapUIEvent = 'click'|'dblclick'|''
+var MapEvent =
+/** @class */
+function () {
+  function MapEvent() {
+    this.BOUNDS_CHANGED = 'bounds_changed';
+    this.CENTER_CHANGED = 'center_changed';
+    this.IDLE = 'idle';
+    this.ZOOM_CHANGED = 'zoom_changed';
+    this.ZOOMSTART = 'zoomstart';
+  }
+
+  MapEvent.prototype.get = function (eventName) {
+    var value = this[eventName];
+
+    if (typeof value === 'string') {
+      return value;
+    }
+  };
+
+  return MapEvent;
+}();
+
+var MapUIEvent =
+/** @class */
+function () {
+  function MapUIEvent() {
+    this.CLICK = 'click';
+    this.DBLCLICK = 'dblclick';
+    this.MOUSEDOWN = 'mousedown';
+    this.MOUSEUP = 'mouseup';
+    this.MOUSEOUT = 'mouseout';
+    this.MOUSEMOVE = 'mousemove';
+    this.MOUSEOVER = 'mouseover';
+    this.DRAG = 'drag';
+    this.DRAGSTART = 'dragstart';
+    this.DRAGEND = 'dragend';
+  }
+
+  MapUIEvent.prototype.get = function (eventName) {
+    var value = this[eventName];
+
+    if (typeof value === 'string') {
+      return value;
+    }
+  };
+
+  return MapUIEvent;
+}();
+
+exports.MapEvent = MapEvent;
+exports.MapUIEvent = MapUIEvent;

package/dist/components/mint-map/types/MapTypes.d.ts

@@ -56,4 +56,5 @@ export declare class Offset {
      * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
      */
     constructor(x: number, y: number);
+    equals(other?: Offset): boolean | undefined;
 }

package/dist/components/mint-map/types/MapTypes.js

@@ -143,6 +143,10 @@ function () {
     this.y = y;
   }
 
+  Offset.prototype.equals = function (other) {
+    return other && this.x === other.x && this.y === other.y;
+  };
+
   return Offset;
 }();
 

package/dist/components/mint-map/types/index.d.ts

@@ -3,3 +3,4 @@ export * from './MapDrawables';
 export * from './MapTypes';
 export * from './MintMapEvents';
 export * from './MintMapProps';
+export * from './MapEventTypes';