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

package/dist/components/mint-map/naver/NaverMintMapController.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 NaverMintMapController = function (_super) {
+var NaverMintMapController =
+/** @class */
+function (_super) {
   tslib.__extends(NaverMintMapController, _super);
 
   function NaverMintMapController(props) {
@@ -23,21 +25,30 @@ var NaverMintMapController = function (_super) {
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
     _this.dragStartPoint = [0, 0];
     _this.dragged = false;
-    return _this;
+    return _this; // console.log(`${this.type} controller loadded`);
   }
 
   NaverMintMapController.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 naver.maps.Marker({
-        position: new MintMap.Position(0, 0),
+        position: 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);
   };
 
   NaverMintMapController.prototype.createPolyline = function (polyline) {
@@ -55,11 +66,11 @@ var NaverMintMapController = function (_super) {
         visible = _e === void 0 ? true : _e,
         _f = _a.editable,
         editable = _f === void 0 ? false : _f,
-        event = _a.event;
+        event = _a.event; //console.log('controller createPolyline start', polyline);
 
     if (this.map && Array.isArray(position)) {
       var path = position.map(function (elem) {
-        return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+        return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
       });
       var pol_1 = new naver.maps.Polyline({
         map: this.map,
@@ -69,8 +80,13 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: lineOpacity,
         clickable: true,
         visible: visible
-      });
-      editable && pol_1.setEditable(editable);
+      }); //@ts-ignore
+
+      editable && pol_1.setEditable(editable); // if(editable){
+      //   //@ts-ignore
+      //   this.drawingManager.addDrawing(pol, naver.maps.drawing.DrawingMode.POLYLINE)
+      // }
+
       polyline.native = pol_1;
       event && event.forEach(function (handler, key) {
         if (_this.polylineEvents.includes(key)) {
@@ -81,12 +97,14 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updatePolyline = function (polyline, options) {
+    //console.log('controller updatePolyline', options);
     if (polyline && polyline.native && polyline.native instanceof naver.maps.Polyline) {
+      //console.log('controller updatePolyline start');
       var path = void 0;
 
       if (Array.isArray(options.position)) {
         path = options.position.map(function (elem) {
-          return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+          return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
         });
       }
 
@@ -96,7 +114,8 @@ var NaverMintMapController = function (_super) {
         strokeColor: options.lineColor,
         strokeWeight: options.lineSize,
         strokeOpacity: options.lineOpacity
-      });
+      }); //@ts-ignore
+
       options.editable !== undefined && polyline.native.setEditable(options.editable);
     }
   };
@@ -120,11 +139,11 @@ var NaverMintMapController = function (_super) {
         _g = _a.visible,
         visible = _g === void 0 ? true : _g;
         _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 Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+        return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
       });
       var paths = [outLine];
       innerPositions && paths.push.apply(paths, innerPositions);
@@ -138,7 +157,9 @@ var NaverMintMapController = function (_super) {
         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)) {
@@ -149,12 +170,14 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updatePolygon = function (polygon, options) {
+    //console.log('controller updatePolygon', options);
     if (polygon && polygon.native && polygon.native instanceof naver.maps.Polygon) {
+      //console.log('controller updatePolygon start');
       var paths = void 0;
 
       if (Array.isArray(options.position)) {
         var outLine = options.position.map(function (elem) {
-          return Array.isArray(elem) ? new MintMap.Position(elem[1], elem[0]) : elem;
+          return Array.isArray(elem) ? new MapTypes.Position(elem[1], elem[0]) : elem;
         });
         paths = [outLine];
         options.innerPositions && paths.push.apply(paths, options.innerPositions);
@@ -168,7 +191,8 @@ var NaverMintMapController = function (_super) {
         strokeOpacity: options.lineOpacity,
         fillColor: options.fillColor,
         fillOpacity: options.fillOpacity
-      });
+      }); //@ts-ignore
+
       options.editable !== undefined && polygon.native.setEditable(options.editable);
     }
   };
@@ -183,7 +207,8 @@ var NaverMintMapController = function (_super) {
         map: this.map,
         position: marker.options.position,
         visible: marker.options.visible === undefined || marker.options.visible
-      };
+      }; //console.log('controller createMarker', marker.options);
+
       marker.element && (options.icon = {
         content: marker.element,
         anchor: marker.options.anchor
@@ -210,11 +235,19 @@ var NaverMintMapController = function (_super) {
   };
 
   NaverMintMapController.prototype.updateMarker = function (marker, options) {
+    //console.log('controller updateMarker', options);
     if (marker && marker.native && marker.native instanceof naver.maps.Marker) {
       var map = marker.native.getMap();
 
       if (map) {
-        if (options.position && options.position instanceof MintMap.Position) {
+        /** 중요!!!!
+         * naver 마커의 setOption(MarkerOptions) 은 내부적으로 setMap 을 무조건 강제 처리한다!!!
+         * setMap 을 처리하면 맵의 이벤트리스너 등등이 모두 초기화 되고 다시 맵을 add 하면서 마커관련된 모든 초기화가 다시 일어난다.
+         * (심지어 map 이 기존과 같은 객체인데도 초기화 처리함)
+         * 그래서 민트맵에서는 update 를 지원하는 항목별로 명시적으로 각각 처리한다.
+        */
+        //Position
+        if (options.position && options.position instanceof MapTypes.Position) {
           marker.native.setPosition(options.position);
         }
 
@@ -226,7 +259,21 @@ var NaverMintMapController = function (_super) {
           marker.native.setIcon(tslib.__assign(tslib.__assign({}, marker.native.getIcon()), {
             anchor: options.anchor
           }));
-        }
+        } // const newOption = {
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        // } as naver.maps.MarkerOptions
+        // if(options.anchor){
+        //   newOption.icon = {...marker.native.getIcon(), anchor:options.anchor}
+        // }
+        // marker.native.setOptions({
+        //   map:map,
+        //   position:options.position instanceof Position?options.position:marker.native.getPosition(),
+        //   visible:options.visible === undefined || options.visible,
+        //   icon:{...marker.native.getIcon(), anchor:options.anchor}
+        // })
+
       }
     }
   };
@@ -306,7 +353,7 @@ var NaverMintMapController = function (_super) {
   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;
+    return ((_b = (_a = window.naver) === null || _a === void 0 ? void 0 : _a.maps) === null || _b === void 0 ? void 0 : _b.Map) ? true : false;
   };
 
   NaverMintMapController.prototype.loadMapApi = function () {
@@ -314,17 +361,21 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
-        return [2, new Promise(function (resolve, error) {
+        return [2
+        /*return*/
+        , new Promise(function (resolve, error) {
           return tslib.__awaiter(_this, void 0, void 0, function () {
             var callbackName, loaded, params, callbackExecFlag, ok;
             return tslib.__generator(this, function (_a) {
               switch (_a.label) {
                 case 0:
                   callbackName = this.getRandomFunctionName('load_naver');
-                  loaded = false;
+                  loaded = false; //@ts-ignore
 
                   window[callbackName] = function () {
-                    loaded = true;
+                    // console.log('naver api loaded');
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   };
 
@@ -333,17 +384,22 @@ var NaverMintMapController = function (_super) {
                     submodules: this.scriptModules.join(','),
                     callback: callbackName
                   };
-                  return [4, this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
+                  return [4
+                  /*yield*/
+                  , this.loadScript(this.buildUrl(this.scriptUrl, params), 'naver_map_script', this.checkLoaded)];
 
                 case 1:
                   callbackExecFlag = _a.sent();
 
                   if (!callbackExecFlag) {
-                    loaded = true;
+                    loaded = true; //@ts-ignore
+
                     delete window[callbackName];
                   }
 
-                  return [4, waiting.waiting(function () {
+                  return [4
+                  /*yield*/
+                  , waiting.waiting(function () {
                     return loaded;
                   })];
 
@@ -356,7 +412,9 @@ var NaverMintMapController = function (_super) {
 
                   this.mapApiLoaded = true;
                   resolve(true);
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -370,8 +428,11 @@ var NaverMintMapController = function (_super) {
       var _this = this;
 
       return tslib.__generator(this, function (_a) {
+        //div element
         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;
 
@@ -382,17 +443,26 @@ var NaverMintMapController = function (_super) {
             return tslib.__generator(this, function (_e) {
               switch (_e.label) {
                 case 0:
+                  //이미 생성했으면 
+                  //1. divElement 가 그대로인 경우 기존 map 객체 리턴
+                  //2. divElement 가 바뀐경우 기존 map 객체 destroy 하고 새로 생성
                   if (this.mapInitialized && this.map) {
                     if (this.map.getElement() === divElement) {
                       resolve(this.map);
-                      return [2];
+                      return [2
+                      /*return*/
+                      ];
                     } 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();
@@ -429,43 +499,59 @@ var NaverMintMapController = function (_super) {
                   options.minZoom = minZoom;
                   options.maxZoom = maxZoom;
                   map = new naver.maps.Map(divElement, options);
-                  this.map = map;
+                  this.map = map; //@ts-ignore
+
                   map.addListener('dragstart', function (e) {
+                    //console.log('map dragstart', e);
                     _this.dragStartPoint[0] = e.domEvent.clientX;
                     _this.dragStartPoint[1] = e.domEvent.clientY;
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('dragend', function (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());
                   });
                   map.addListener('zoom_changed', function () {
+                    //onZoomChanged event
+                    //console.log('zoom_changed');
                     _this.map && _this.mapProps.onZoomChanged && _this.mapProps.onZoomChanged(_this.map.getZoom());
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('click', function (e) {
+                    // console.log('map click', e);
                     if (!_this.mapProps.onClick) return;
-                    var pos = new MintMap.Position(e.coord.y, e.coord.x);
-                    pos.offset = new MintMap.Offset(e.offset.x, e.offset.y);
+                    var pos = new MapTypes.Position(e.coord.y, e.coord.x);
+                    pos.offset = new MapTypes.Offset(e.offset.x, e.offset.y);
 
                     _this.mapProps.onClick(pos);
-                  });
+                  }); //@ts-ignore
+
                   map.addListener('mousemove', function (e) {
                     if (!_this.mapProps.onMouseMove) return;
-                    var pos = new MintMap.Position(e.coord.y, e.coord.x);
-                    pos.offset = new MintMap.Offset(e.offset.x, e.offset.y);
+                    var pos = new MapTypes.Position(e.coord.y, e.coord.x);
+                    pos.offset = new MapTypes.Offset(e.offset.x, e.offset.y); // console.log('mousemove', pos)
 
                     _this.mapProps.onMouseMove(pos);
                   });
                   this.mapInitialized = true;
-                  this.initMarkerPool();
-                  resolve(map);
+                  this.initMarkerPool(); // console.log(`${this.type} map script initialized`, divElement);
+
+                  resolve(map); //네이버는 로드 후에 idle 이 발생 안해서 직접 일으켜준다
+
                   map.trigger('idle');
-                  return [2];
+                  return [2
+                  /*return*/
+                  ];
               }
             });
           });
@@ -492,7 +578,8 @@ var NaverMintMapController = function (_super) {
       (_a = this.markerPool) === null || _a === void 0 ? void 0 : _a.destroy();
     } catch (e) {
       console.log('naver map destroy error', e);
-    }
+    } // console.log(`${this.type} map destroyed`);
+
   };
 
   NaverMintMapController.prototype.getCurrBounds = function () {
@@ -501,7 +588,7 @@ var NaverMintMapController = function (_super) {
     }
 
     var bounds = this.map.getBounds();
-    return MintMap.Bounds.fromNWSE(new MintMap.Position(bounds.getMax().y, bounds.getMin().x), new MintMap.Position(bounds.getMin().y, bounds.getMax().x));
+    return MapTypes.Bounds.fromNWSE(new MapTypes.Position(bounds.getMax().y, bounds.getMin().x), new MapTypes.Position(bounds.getMin().y, bounds.getMax().x));
   };
 
   NaverMintMapController.prototype.panningTo = function (targetCenter) {

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

@@ -0,0 +1,11 @@
+/// <reference types="navermaps" />
+/// <reference types="google.maps" />
+/// <reference types="kakaomaps" />
+/**
+ * 지원되는 맵 종류
+ */
+export declare type MapType = 'naver' | 'google' | 'kakao';
+/**
+ * 맵 객체의 native 타입
+ */
+export declare type MapVendorType = naver.maps.Map | google.maps.Map | kakao.maps.Map;

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

@@ -0,0 +1,110 @@
+import { Offset, Position } from "./MapTypes";
+export interface DrawableOptions {
+    /**
+    * 좌표값
+    */
+    position: Position | Position[] | [number, number][];
+    /**
+      * 좌표값
+      */
+    visible?: boolean;
+    /**
+     * 이벤트 목록
+     */
+    event?: Map<keyof DocumentEventMap, (e: Event) => boolean | void>;
+}
+export declare abstract class Drawable {
+    /**
+     * 지도의 native drawable object
+     */
+    native?: any;
+    /**
+     * Drawable options
+     */
+    abstract options: DrawableOptions;
+}
+export interface MarkerOptions extends DrawableOptions {
+    /**
+     * 마커의 좌표와 Element 사이의 offset 값
+     */
+    anchor?: Offset;
+    /**
+     * zIndex 설정
+     */
+    zIndex?: number;
+}
+export declare class Marker extends Drawable {
+    /**
+     * Marker 의 옵션
+     */
+    options: MarkerOptions;
+    /**
+     * 커스텀 마커 Element
+     */
+    element?: string | HTMLElement;
+    /**
+     * 지도에 표시할 마커정보
+     */
+    constructor(options: MarkerOptions);
+}
+export interface PolylineOptions extends DrawableOptions {
+    /**
+    * 외곽선 의 색상
+    * @description css 의 color 에 준함
+    */
+    lineColor?: string;
+    /**
+    * 외곽선 의 굵기
+    * @description 픽셀
+    */
+    lineSize?: number;
+    /**
+      * 외곽선 의 투명도
+      * @description 0.0과 1.0 사이의 불투명도
+      */
+    lineOpacity?: number;
+    /**
+     * 편집가능 여부
+     */
+    editable?: boolean;
+}
+export declare class Polyline extends Drawable {
+    /**
+     * Polygon 의 옵션
+     */
+    options: PolylineOptions;
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+    constructor(options: PolylineOptions);
+}
+export interface PolygonOptions extends PolylineOptions {
+    /**
+     * 폴리곤 외곽선의 내부 다각형 position
+     */
+    innerPositions?: Position[][];
+    /**
+    * 면의 배경색
+    * @description css 의 color 에 준함
+    */
+    fillColor?: string;
+    /**
+    * 면의 투명도
+    * @description 0~1 의 값
+    */
+    fillOpacity?: number;
+}
+export declare class Polygon extends Drawable {
+    /**
+     * Polygon 의 옵션
+     */
+    options: PolygonOptions;
+    /**
+     * 지도에 표시할 폴리곤정보
+     */
+    constructor(options: PolygonOptions);
+    /**
+     * 폴리곤의 중점을 구한다.
+     */
+    getCenter(): Position;
+}

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

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var calculate = require('../core/util/calculate.js');
+var MapTypes = require('./MapTypes.js');
+
+var Drawable =
+/** @class */
+function () {
+  function Drawable() {}
+
+  return Drawable;
+}();
+
+var Marker =
+/** @class */
+function (_super) {
+  tslib.__extends(Marker, _super);
+  /**
+   * 지도에 표시할 마커정보
+   */
+
+
+  function Marker(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Marker;
+}(Drawable);
+
+var Polyline =
+/** @class */
+function (_super) {
+  tslib.__extends(Polyline, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polyline(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+
+  return Polyline;
+}(Drawable);
+
+var Polygon =
+/** @class */
+function (_super) {
+  tslib.__extends(Polygon, _super);
+  /**
+   * 지도에 표시할 폴리곤정보
+   */
+
+
+  function Polygon(options) {
+    var _this = _super.call(this) || this;
+
+    _this.options = options;
+    return _this;
+  }
+  /**
+   * 폴리곤의 중점을 구한다.
+   */
+
+
+  Polygon.prototype.getCenter = function () {
+    if (Array.isArray(this.options.position) && this.options.position.length > 0) {
+      var paths = this.options.position.map(function (elem) {
+        return elem instanceof MapTypes.Position ? elem : new MapTypes.Position(elem[0], elem[1]);
+      });
+      return calculate.PolygonCalculator.getCenter(paths);
+    }
+
+    throw new Error('center 를 찾을 수 없습니다.');
+  };
+
+  return Polygon;
+}(Drawable);
+
+exports.Drawable = Drawable;
+exports.Marker = Marker;
+exports.Polygon = Polygon;
+exports.Polyline = Polyline;

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

@@ -0,0 +1,59 @@
+/**
+ * 좌표값
+ * @description 위도/경도, DOM 상의 X/Y 좌표
+ */
+export declare class Position {
+    /**
+     * 위도
+     * @description 위도(latitude)
+     */
+    lat: number;
+    /**
+     * 경도
+     * @description 경도(longitude)
+     */
+    lng: number;
+    /**
+     * offset 좌표
+     * @description DOM 상에서의 offset 정보
+     */
+    offset?: Offset;
+    constructor(lat: number, lng: number);
+    static equals(pos1: Position, pos2: Position): boolean;
+}
+export declare class Bounds {
+    nw: Position;
+    se: Position;
+    ne: Position;
+    sw: Position;
+    constructor(nw?: Position, se?: Position, ne?: Position, sw?: Position);
+    static fromNWSE(nw: Position, se: Position): Bounds;
+    static fromNESW(ne: Position, sw: Position): Bounds;
+    private covertNWSEtoNESW;
+    private covertNESWtoNWSE;
+    getCenter(): Position;
+    includesPosition(pos: Position): boolean;
+    getIncludedPositions(positions: Position[]): Position[];
+    includes(positions: Position | Position[]): boolean;
+    includesOnlyOnePoint(positions: Position[]): boolean;
+    intersects(positions: Position[]): boolean;
+}
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+ */
+export declare class Offset {
+    /**
+     * x 좌표
+     * @description DOM 상에서의 offsetX
+     */
+    x: number;
+    /**
+        * y 좌표
+        * @description DOM 상에서의 offsetY
+        */
+    y: number;
+    /**
+     * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+     */
+    constructor(x: number, y: number);
+}