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

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

@@ -5,10 +5,12 @@ 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 KakaoMintMapController = function (_super) {
+var KakaoMintMapController =
+/** @class */
+function (_super) {
   tslib.__extends(KakaoMintMapController, _super);
 
   function KakaoMintMapController(props) {
@@ -23,21 +25,30 @@ var KakaoMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    return _this;
+    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 +64,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 +76,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 +91,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 +132,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 +151,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 +167,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 +207,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 +223,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 +236,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 +250,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 +269,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 +349,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 +357,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 +373,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 +396,9 @@ var KakaoMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -364,7 +413,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 +426,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 +441,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 +464,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 +525,14 @@ var KakaoMintMapController = function (_super) {
   };
 
   KakaoMintMapController.prototype.getSafeZoomValue = function (value) {
+    /**
+     * 카카오는 구글/네이버와 다르게 줌레벨이 작아질수록 확대된다 (가장 확대된 것이 0)
+     * - 가장 확대된 값 : 1
+     * - 가장 축소된 값 : 14
+     *
+     * 그래서 세계지도가 없는 카카오는 동일한 사정인 네이버와 매핑하기로 한다.
+     * 문제는 둘 간의 줌 레벨별 축척이 일치하지 않는다. 그래서 가장 유사한 레벨 끼리 매핑이 필요하다
+    */
     var mapValue = this.getBaseToMapZoom(value);
 
     if (mapValue > 14) {
@@ -470,7 +551,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 +561,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 +591,11 @@ 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);
   };
 
   return KakaoMintMapController;

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

@@ -1,42 +1,45 @@
-/// <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;
-    polygonEvents: string[];
-    createPolygon(polygon: Polygon): void;
-    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
-    markerEvents: string[];
-    createMarker(marker: Marker): void;
-    updateMarker(marker: Marker, options: MarkerOptions): void;
-    private markerMaxZIndex;
-    private getMaxZIndex;
-    setMarkerZIndex(marker: Marker, zIndex: number): void;
-    markerToTheTop(marker: Marker): void;
-    clearDrawable(drawable: Drawable): boolean;
-    private dragStartPoint;
-    private dragged;
-    isMapDragged(): boolean;
-    setMapDragged(value: boolean): void;
-    private checkLoaded;
-    loadMapApi(): Promise<boolean>;
-    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
-    private getSafeZoomValue;
-    destroyMap(): void;
-    getCurrBounds(): Bounds;
-    panningTo(targetCenter: Position): void;
-    getZoomLevel(): number;
-    setZoomLevel(zoom: number): void;
-    getCenter(): Position;
-    setCenter(position: Position): void;
-}
+/// <reference types="navermaps" />
+import { MintMapController } from "../core/MintMapController";
+import { ObjectPool } from '@mint-ui/tools';
+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";
+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;
+    polygonEvents: string[];
+    createPolygon(polygon: Polygon): void;
+    updatePolygon(polygon: Polygon, options: PolygonOptions): void;
+    markerEvents: string[];
+    createMarker(marker: Marker): void;
+    updateMarker(marker: Marker, options: MarkerOptions): void;
+    private markerMaxZIndex;
+    private getMaxZIndex;
+    setMarkerZIndex(marker: Marker, zIndex: number): void;
+    markerToTheTop(marker: Marker): void;
+    clearDrawable(drawable: Drawable): boolean;
+    private dragStartPoint;
+    private dragged;
+    isMapDragged(): boolean;
+    setMapDragged(value: boolean): void;
+    private checkLoaded;
+    loadMapApi(): Promise<boolean>;
+    initializingMap(divElement: HTMLDivElement): Promise<MapVendorType>;
+    private getSafeZoomValue;
+    destroyMap(): void;
+    getCurrBounds(): Bounds;
+    panningTo(targetCenter: Position): void;
+    getZoomLevel(): number;
+    setZoomLevel(zoom: number): void;
+    getCenter(): Position;
+    setCenter(position: Position): void;
+}