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

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/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

@@ -0,0 +1,60 @@
+/**
+ * 좌표값
+ * @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);
+    equals(other?: Offset): boolean | undefined;
+}

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

@@ -0,0 +1,155 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var calculate = require('../core/util/calculate.js');
+
+/**
+ * 좌표값
+ * @description 위도/경도, DOM 상의 X/Y 좌표
+ */
+
+var Position =
+/** @class */
+function () {
+  function Position(lat, lng) {
+    /**
+     * 위도
+     * @description 위도(latitude)
+     */
+    this.lat = 0;
+    /**
+     * 경도
+     * @description 경도(longitude)
+     */
+
+    this.lng = 0;
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  Position.equals = function (pos1, pos2) {
+    return pos1.lat === pos2.lat && pos1.lng === pos2.lng;
+  };
+
+  return Position;
+}();
+
+var Bounds =
+/** @class */
+function () {
+  function Bounds(nw, se, ne, sw) {
+    if (!(nw && se || ne && sw)) {
+      throw new Error('nw/se or ne/sw needed');
+    } //@ts-ignore
+
+
+    this.nw = nw;
+    this.se = se;
+    this.ne = ne;
+    this.sw = sw;
+
+    if (nw && se) {
+      this.covertNWSEtoNESW(nw, se);
+    } else if (ne && sw) {
+      this.covertNESWtoNWSE(ne, sw);
+    }
+  }
+
+  Bounds.fromNWSE = function (nw, se) {
+    return new Bounds(nw, se, undefined, undefined);
+  };
+
+  Bounds.fromNESW = function (ne, sw) {
+    return new Bounds(undefined, undefined, ne, sw);
+  };
+
+  Bounds.prototype.covertNWSEtoNESW = function (nw, se) {
+    this.ne = new Position(nw.lat, se.lng);
+    this.sw = new Position(se.lat, nw.lng);
+  };
+
+  Bounds.prototype.covertNESWtoNWSE = function (ne, sw) {
+    this.nw = new Position(ne.lat, sw.lng);
+    this.se = new Position(sw.lat, ne.lng);
+  };
+
+  Bounds.prototype.getCenter = function () {
+    return new Position(this.se.lat + (this.nw.lat - this.se.lat) / 2, this.nw.lng + (this.se.lng - this.nw.lng) / 2);
+  };
+
+  Bounds.prototype.includesPosition = function (pos) {
+    return this.nw.lng < pos.lng && this.se.lng > pos.lng && this.se.lat < pos.lat && this.nw.lat > pos.lat;
+  };
+
+  Bounds.prototype.getIncludedPositions = function (positions) {
+    var result = [];
+
+    for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
+      var pos = positions_1[_i];
+
+      if (this.includesPosition(pos)) {
+        result.push(pos);
+      }
+    }
+
+    return result;
+  };
+
+  Bounds.prototype.includes = function (positions) {
+    positions = Array.isArray(positions) ? positions : [positions];
+
+    for (var _i = 0, positions_2 = positions; _i < positions_2.length; _i++) {
+      var pos = positions_2[_i];
+
+      if (!this.includesPosition(pos)) {
+        return false;
+      }
+    }
+
+    return true;
+  };
+
+  Bounds.prototype.includesOnlyOnePoint = function (positions) {
+    for (var _i = 0, positions_3 = positions; _i < positions_3.length; _i++) {
+      var pos = positions_3[_i];
+
+      if (this.includesPosition(pos)) {
+        return true;
+      }
+    }
+
+    return false;
+  };
+
+  Bounds.prototype.intersects = function (positions) {
+    return calculate.PolygonCalculator.intersects([this.nw, this.se], positions);
+  };
+
+  return Bounds;
+}();
+/**
+ * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+ */
+
+var Offset =
+/** @class */
+function () {
+  /**
+   * DOM 상에서의 좌표를 표현 (픽셀을 나타내는 숫자)
+   */
+  function Offset(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+
+  Offset.prototype.equals = function (other) {
+    return other && this.x === other.x && this.y === other.y;
+  };
+
+  return Offset;
+}();
+
+exports.Bounds = Bounds;
+exports.Offset = Offset;
+exports.Position = Position;

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

@@ -0,0 +1,25 @@
+import { MapVendorType } from "./CommonTypes";
+import { Bounds, Position } from "./MapTypes";
+import { MintMapController } from "../core/MintMapController";
+export interface MintMapEvents {
+    /**
+     * 지도의 보여지는 영역이 변경되었을때 호출되는 콜백
+     */
+    onBoundsChanged?: (bounds: Bounds) => void;
+    /**
+       * 지도의 줌이 변경되었을때 호출되는 콜백
+       */
+    onZoomChanged?: (level: number) => void;
+    /**
+       * 지도 준비완료시 호출되는 콜백
+       */
+    onLoad?: (map: MapVendorType, controller: MintMapController) => void;
+    /**
+    * 지도 클릭시 호출되는 콜백
+    */
+    onClick?: (positon: Position) => void;
+    /**
+    * 지도 위에서 마우스 이동시 호출되는 콜백
+    */
+    onMouseMove?: (positon: Position) => void;
+}

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

@@ -0,0 +1,92 @@
+/// <reference types="react" />
+import { MapType } from "./CommonTypes";
+import { Position } from "./MapTypes";
+import { MintMapEvents } from "./MintMapEvents";
+/**
+ * Mint Map Props
+ */
+export interface MintMapProps extends MintMapEvents {
+    /**
+     * Mint Map 에서 지원하는 지도 타입
+     */
+    mapType: MapType | null;
+    /**
+     * Map 종류에 따른 인증키
+     * @description 각 지도 타입에 맞는 키를 입력해야한다.
+     */
+    mapKey: string;
+    /**
+       * Map 종류에 따른 추가 맵 ID
+       * @description 특정 지도에서는 맵ID 가 추가로 요구된다 (ex: Google Maps)
+       */
+    mapId?: string;
+    /**
+     * 지도의 기본 설정 정보
+     */
+    base?: BaseProps;
+    /**
+    * 지도의 보기 설정
+    */
+    visible?: boolean;
+    /**
+     * 지도 중심 좌표
+     */
+    center?: Position;
+    /**
+     * center 값을 통해 지도의 중심 으로 이동할때 panning 효과 적용 여부
+     */
+    centerMoveWithPanning?: boolean;
+    /**
+     * 지도 줌레벨
+     */
+    zoomLevel?: number;
+    /**
+     * 마우스의 드래그로 지도 위치 움직임 가능 여부
+     */
+    draggable?: boolean;
+    /**
+     * 키보드 방향키로 지도 위치 움직임 가능 여부
+     */
+    keyboardShortcuts?: boolean;
+    /**
+     * 마커 cache 사용 여부
+     */
+    markerCache?: boolean;
+    /**
+     * 마커 cache 사용시 초기 pool 갯수
+     */
+    markerCachePoolSize?: number;
+    /**
+     * 마커 cache 사용시 초기 pool 갯수
+     */
+    boundsChangeThrottlingTime?: number;
+    /**
+     * 로딩 완료 후 장면전환 효과 여부
+     */
+    dissolveEffectWhenLoaded?: boolean;
+    /**
+     * 맵 로딩화면
+     */
+    mapLoadingComponent?: () => JSX.Element;
+}
+/**
+ * 지도의 기본 설정
+ */
+export interface BaseProps {
+    /**
+     * 지도 시작시의 중심 좌표
+     */
+    center?: Position;
+    /**
+     * 지도 시작시의 줌레벨
+     */
+    zoomLevel?: number;
+    /**
+     * 지도의 최대 줌 레벨
+     */
+    maxZoomLevel?: number;
+    /**
+    * 지도의 최소 줌 레벨
+    */
+    minZoomLevel?: number;
+}

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

@@ -0,0 +1,6 @@
+export * from './CommonTypes';
+export * from './MapDrawables';
+export * from './MapTypes';
+export * from './MintMapEvents';
+export * from './MintMapProps';
+export * from './MapEventTypes';

package/dist/index.d.ts

@@ -1 +1,7 @@
-export * from './components/mint-map';
+/**
+ * 인덱스 모듈
+ *
+ * @author RWB
+ * @since 2022.05.19 Thu 01:37:54
+ */
+export * from './components/mint-map';