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

package/dist/components/mint-map/core/hooks/index.d.ts

@@ -1 +1 @@
-export * from "./MarkerMovingHook";
+export * from "./MarkerMovingHook";

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

@@ -1,8 +1,8 @@
-export * from "./MintMapCore";
-export * from "./MintMapController";
-export * from './MintMapCanvasRenderer';
-export * from "./advanced";
-export * from "./hooks";
-export * from "./provider";
-export * from './util';
-export * from './wrapper';
+export * from "./MintMapCore";
+export * from "./MintMapController";
+export * from './MintMapCanvasRenderer';
+export * from "./advanced";
+export * from "./hooks";
+export * from "./provider";
+export * from './util';
+export * from './wrapper';

package/dist/components/mint-map/core/provider/MintMapProvider.d.ts

@@ -1,8 +1,8 @@
-import { PropsWithChildren } from "react";
-import { MintMapController } from "../MintMapController";
-interface MintMapProviderProps {
-    controller: MintMapController;
-}
-export declare function MintMapProvider({ controller, children }: PropsWithChildren<MintMapProviderProps>): JSX.Element;
-export declare function useMintMapController(): MintMapController;
-export {};
+import { PropsWithChildren } from "react";
+import { MintMapController } from "../MintMapController";
+interface MintMapProviderProps {
+    controller: MintMapController;
+}
+export declare function MintMapProvider({ controller, children }: PropsWithChildren<MintMapProviderProps>): JSX.Element;
+export declare function useMintMapController(): MintMapController;
+export {};

package/dist/components/mint-map/core/provider/index.d.ts

@@ -1 +1 @@
-export * from "./MintMapProvider";
+export * from "./MintMapProvider";

package/dist/components/mint-map/core/util/animation.d.ts

@@ -1,16 +1,16 @@
-export declare type DrawFunction = (frameGapTime: number, elapsedTime: number) => boolean | undefined;
-export declare class AnimationPlayer {
-    prevtime: number;
-    elapsedTime: number;
-    fps: number | null;
-    baseDrawGapTime: number | null;
-    private deltaTime;
-    private playing;
-    draw: DrawFunction;
-    constructor(drawFunction: DrawFunction, fps?: number);
-    init(): void;
-    start(): void;
-    stop(): void;
-    resume(): void;
-    makeFrame(timestamp: number): void;
-}
+export declare type DrawFunction = (frameGapTime: number, elapsedTime: number) => boolean | undefined;
+export declare class AnimationPlayer {
+    prevtime: number;
+    elapsedTime: number;
+    fps: number | null;
+    baseDrawGapTime: number | null;
+    private deltaTime;
+    private playing;
+    draw: DrawFunction;
+    constructor(drawFunction: DrawFunction, fps?: number);
+    init(): void;
+    start(): void;
+    stop(): void;
+    resume(): void;
+    makeFrame(timestamp: number): void;
+}

package/dist/components/mint-map/core/util/animation.js

@@ -2,7 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AnimationPlayer = function () {
+var AnimationPlayer =
+/** @class */
+function () {
   function AnimationPlayer(drawFunction, fps) {
     this.prevtime = 0;
     this.elapsedTime = 0;
@@ -37,21 +39,27 @@ var AnimationPlayer = function () {
   };
 
   AnimationPlayer.prototype.resume = function () {
-    this.playing = true;
+    this.playing = true; //@ts-ignore
+
     window.requestAnimationFrame(this.makeFrame.bind(this));
   };
 
   AnimationPlayer.prototype.makeFrame = function (timestamp) {
+    //frame 간 시간 변화
     if (this.prevtime === 0) {
       this.prevtime = timestamp;
     }
 
-    this.deltaTime += timestamp - this.prevtime;
+    this.deltaTime += timestamp - this.prevtime; //정해진 시간이 없거나, 정해진 시간이 지났으면 draw 호출
+
     this.prevtime = timestamp;
 
     if (!this.baseDrawGapTime || this.baseDrawGapTime <= this.deltaTime) {
-      this.elapsedTime += this.deltaTime;
-      var stopFlag = this.draw(this.deltaTime, this.elapsedTime);
+      //다음 루프 준비
+      this.elapsedTime += this.deltaTime; //draw 콜백에서 stop 신호오면 멈춤
+
+      var stopFlag = this.draw(this.deltaTime, this.elapsedTime); //delta 초기화
+
       this.deltaTime = 0;
 
       if (stopFlag) {
@@ -60,6 +68,7 @@ var AnimationPlayer = function () {
     }
 
     if (this.playing) {
+      //@ts-ignore
       window.requestAnimationFrame(this.makeFrame.bind(this));
     }
   };

package/dist/components/mint-map/core/util/calculate.d.ts

@@ -1,34 +1,39 @@
-import { Position } from "../../MintMap";
-export declare class PolygonCalculator {
-    static getCenter(positions: Position[]): Position;
-    static intersects(positions1: Position[], positions2: Position[]): boolean;
-    static getIncludedPositions(polygon: Position[], position: Position | Position[]): Position[];
-    private static convertPolygonToLinePoints;
-    private static convertPositionToPoints;
-    private static getCrossPoint;
-    private static toFixedPosition;
-    private static getCrossPointAll;
-    private static findCrossPoint;
-}
-export interface NextPositionContext {
-    pos1: Position;
-    pos2: Position;
-    velocityKmh: number;
-    elapsedTimeMs: number;
-    totalDistance: number;
-    currDistance: number;
-    distanceRemain: number;
-    prevPos2: Position;
-    prevVelocityKmh: number;
-    vPerMs: number;
-    nextPos: Position;
-}
-export declare class GeoCalulator {
-    private static readonly EARTH_RADIUS;
-    private static readonly LATITUDE_POSITION_VALUE_PER_METER;
-    static computeDistanceKiloMeter(pos1: Position, pos2: Position): number;
-    private static deg2rad;
-    static convertMeterToLatitudeValue(meter: number): number;
-    private static readonly MS_FROM_HOUR;
-    static computeNextPositionAndDistances(context: NextPositionContext): NextPositionContext;
-}
+declare class PositionMirror {
+    lat: number;
+    lng: number;
+    constructor(lat: number, lng: number);
+}
+export declare class PolygonCalculator {
+    static getCenter(positions: PositionMirror[]): PositionMirror;
+    static intersects(positions1: PositionMirror[], positions2: PositionMirror[]): boolean;
+    static getIncludedPositions(polygon: PositionMirror[], position: PositionMirror | PositionMirror[]): PositionMirror[];
+    private static convertPolygonToLinePoints;
+    private static convertPositionToPoints;
+    private static getCrossPoint;
+    private static toFixedPosition;
+    private static getCrossPointAll;
+    private static findCrossPoint;
+}
+export interface NextPositionContext {
+    pos1: PositionMirror;
+    pos2: PositionMirror;
+    velocityKmh: number;
+    elapsedTimeMs: number;
+    totalDistance: number;
+    currDistance: number;
+    distanceRemain: number;
+    prevPos2: PositionMirror;
+    prevVelocityKmh: number;
+    vPerMs: number;
+    nextPos: PositionMirror;
+}
+export declare class GeoCalulator {
+    private static readonly EARTH_RADIUS;
+    private static readonly LATITUDE_POSITION_VALUE_PER_METER;
+    static computeDistanceKiloMeter(pos1: PositionMirror, pos2: PositionMirror): number;
+    private static deg2rad;
+    static convertMeterToLatitudeValue(meter: number): number;
+    private static readonly MS_FROM_HOUR;
+    static computeNextPositionAndDistances(context: NextPositionContext): NextPositionContext;
+}
+export {};

package/dist/components/mint-map/core/util/calculate.js

@@ -2,9 +2,9 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MintMap = require('../../MintMap.js');
-
-var LinePoints = function () {
+var LinePoints =
+/** @class */
+function () {
   function LinePoints(x1, y1, x2, y2) {
     this.x1 = x1;
     this.y1 = y1;
@@ -15,7 +15,20 @@ var LinePoints = function () {
   return LinePoints;
 }();
 
-var PolygonCalculator = function () {
+var PositionMirror =
+/** @class */
+function () {
+  function PositionMirror(lat, lng) {
+    this.lat = lat;
+    this.lng = lng;
+  }
+
+  return PositionMirror;
+}();
+
+var PolygonCalculator =
+/** @class */
+function () {
   function PolygonCalculator() {}
 
   PolygonCalculator.getCenter = function (positions) {
@@ -39,10 +52,11 @@ var PolygonCalculator = function () {
       if (minY === undefined || pos.lng < minY) {
         minY = pos.lng;
       }
-    }
+    } //console.log('center min max => ', maxX, minX, maxY, minY)
+
 
     if (maxX && minX && maxY && minY) {
-      return new MintMap.Position(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
+      return new PositionMirror(minX + (maxX - minX) / 2, minY + (maxY - minY) / 2);
     }
 
     throw new Error('Calculate Center Error!!!');
@@ -75,9 +89,10 @@ var PolygonCalculator = function () {
     var lines = this.convertPolygonToLinePoints(polygon);
 
     for (var _i = 0, targets_1 = targets; _i < targets_1.length; _i++) {
-      var target = targets_1[_i];
-      var tempLine = this.convertPositionToPoints(target, new MintMap.Position(target.lat, maxX));
-      var crossPoints = this.getCrossPointAll(lines, tempLine);
+      var target = targets_1[_i]; //x 축으로 긴 직선과 폴리곤 path 와의 교차 수 비교
+
+      var tempLine = this.convertPositionToPoints(target, new PositionMirror(target.lat, maxX));
+      var crossPoints = this.getCrossPointAll(lines, tempLine); // console.log('crossPoints',crossPoints);
 
       if (crossPoints.length > 0 && crossPoints.length % 2 != 0) {
         result.push(target);
@@ -99,16 +114,20 @@ var PolygonCalculator = function () {
 
   PolygonCalculator.convertPositionToPoints = function (pos1, pos2) {
     return new LinePoints(pos1.lng, pos1.lat, pos2.lng, pos2.lat);
-  };
+  }; //두 직선의 교점 구하기
+
 
   PolygonCalculator.getCrossPoint = function (sr, tr) {
-    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2);
+    var p1 = (sr.x1 - sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 - tr.x2); //분모로 사용됨
+    // p1 ==0 이면 평행선 또는 일치 이므로 제외(분모)
 
     if (p1 != 0) {
       var x = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.x1 - tr.x2) - (sr.x1 - sr.x2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
       var y = ((sr.x1 * sr.y2 - sr.y1 * sr.x2) * (tr.y1 - tr.y2) - (sr.y1 - sr.y2) * (tr.x1 * tr.y2 - tr.y1 * tr.x2)) / p1;
 
-      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0) {
+      if (this.toFixedPosition((x - sr.x1) * (x - sr.x2)) <= 0 && this.toFixedPosition((y - sr.y1) * (y - sr.y2)) <= 0 //교점이 1선분 위에 있고
+      && this.toFixedPosition((x - tr.x1) * (x - tr.x2)) <= 0 && this.toFixedPosition((y - tr.y1) * (y - tr.y2)) <= 0 //교점이 2선분 위에 있을경우
+      ) {
         return {
           x: x,
           y: y
@@ -138,7 +157,7 @@ var PolygonCalculator = function () {
 
   PolygonCalculator.findCrossPoint = function (sr, tr) {
     for (var _i = 0, sr_2 = sr; _i < sr_2.length; _i++) {
-      var tmp = sr_2[_i];
+      var tmp = sr_2[_i]; //교점이 있으면 true
 
       if (this.getCrossPoint(tmp, tr)) {
         return true;
@@ -151,7 +170,9 @@ var PolygonCalculator = function () {
   return PolygonCalculator;
 }();
 
-var GeoCalulator = function () {
+var GeoCalulator =
+/** @class */
+function () {
   function GeoCalulator() {}
 
   GeoCalulator.computeDistanceKiloMeter = function (pos1, pos2) {
@@ -159,7 +180,8 @@ var GeoCalulator = function () {
     var dLon = this.deg2rad(pos2.lng - pos1.lng);
     var a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.deg2rad(pos1.lat)) * Math.cos(this.deg2rad(pos2.lat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
     var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
-    var d = this.EARTH_RADIUS * c;
+    var d = this.EARTH_RADIUS * c; // Distance in km
+
     return d;
   };
 
@@ -177,48 +199,65 @@ var GeoCalulator = function () {
         prevPos2 = context.prevPos2,
         velocityKmh = context.velocityKmh,
         prevVelocityKmh = context.prevVelocityKmh,
-        elapsedTimeMs = context.elapsedTimeMs;
+        elapsedTimeMs = context.elapsedTimeMs; // console.log('velocityKmh / elapsedTimeMs',velocityKmh , elapsedTimeMs);
+    //총 가야할 거리 (km)
 
     if (pos2 !== prevPos2) {
+      //목표가 바뀌면 거리 및 비율 재계산
       context.totalDistance = this.computeDistanceKiloMeter(pos1, pos2);
       context.currDistance = 0;
       context.prevPos2 = pos2;
     }
 
-    var totalDistance = context.totalDistance;
+    var totalDistance = context.totalDistance; // console.log('totalDistance', totalDistance);
+    //ms 속으로 환산
 
     if (velocityKmh !== prevVelocityKmh) {
+      //속도가 바뀌면 재계산
       context.vPerMs = velocityKmh / this.MS_FROM_HOUR;
       context.prevVelocityKmh = velocityKmh;
     }
 
-    var vPerMs = context.vPerMs;
-    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs;
+    var vPerMs = context.vPerMs; //console.log('vPerMs', vPerMs);
+    //실제 가는 거리 계산
+
+    var nextDistance = context.distanceRemain ? context.distanceRemain : context.currDistance + elapsedTimeMs * vPerMs; //console.log('nextDistance', nextDistance);
+    //목표점까지 이동 후에도 남는 거리
+
     context.currDistance = nextDistance;
 
     if (totalDistance < context.currDistance) {
+      //이동 거리가 현재 목표점을 넘어가는 경우
       context.distanceRemain = context.currDistance - totalDistance;
       context.nextPos = pos2;
       return context;
     } else {
       context.distanceRemain = 0;
-    }
+    } //각 축으로 나가야할 비율
+
+
+    var ratio = nextDistance / totalDistance; //console.log('ratio', ratio);
+    //방향값 체크
 
-    var ratio = nextDistance / totalDistance;
     var latCalib = pos2.lat > pos1.lat ? 1 : -1;
-    var lngCalib = pos2.lng > pos1.lng ? 1 : -1;
-    var newPos = new MintMap.Position(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
+    var lngCalib = pos2.lng > pos1.lng ? 1 : -1; //각 축에 보정된 새로운 지점 리턴
+
+    var newPos = new PositionMirror(pos1.lat + (pos2.lat - pos1.lat) * ratio, pos1.lng + (pos2.lng - pos1.lng) * ratio);
 
     if ((latCalib === 1 && pos2.lat <= newPos.lat || latCalib === -1 && pos2.lat >= newPos.lat) && (lngCalib === 1 && pos2.lng <= newPos.lng || lngCalib === -1 && pos2.lng >= newPos.lng)) {
       newPos = pos2;
-    }
+    } // console.log('newPos', newPos);
+    //console.log('==============================================================\n');
+
 
     context.nextPos = newPos;
     return context;
   };
 
-  GeoCalulator.EARTH_RADIUS = 6371;
-  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000);
+  GeoCalulator.EARTH_RADIUS = 6371; //in km (6,371.230 km)
+
+  GeoCalulator.LATITUDE_POSITION_VALUE_PER_METER = 1 / (110 * 1000); //위도 기준 1도는 110km
+
   GeoCalulator.MS_FROM_HOUR = 60 * 60 * 1000;
   return GeoCalulator;
 }();

package/dist/components/mint-map/core/util/cluster.d.ts

@@ -1,18 +1,18 @@
-import { Bounds, Position } from "../../MintMap";
-export interface ClusterInfo {
-    bounds: Bounds;
-    checked: boolean;
-    center: boolean;
-    centerPosition: Position;
-    incList: any;
-    itemList: Position[];
-    size: number;
-}
-export interface ClusterStatus {
-    total: number;
-    average: number;
-    min: number;
-    max: number;
-}
-export declare type ClusterSizeCalculator = (info: ClusterInfo, status: ClusterStatus) => number;
-export declare const getClusterInfo: (basePixelSize: number, mapBounds: Bounds, mapWidth: number, mapHeight: number, itemList: Position[], sizeFunction?: ClusterSizeCalculator) => ClusterInfo[];
+import { Bounds, Position } from "../../types/MapTypes";
+export interface ClusterInfo {
+    bounds: Bounds;
+    checked: boolean;
+    center: boolean;
+    centerPosition: Position;
+    incList: any;
+    itemList: Position[];
+    size: number;
+}
+export interface ClusterStatus {
+    total: number;
+    average: number;
+    min: number;
+    max: number;
+}
+export declare type ClusterSizeCalculator = (info: ClusterInfo, status: ClusterStatus) => number;
+export declare const getClusterInfo: (basePixelSize: number, mapBounds: Bounds, mapWidth: number, mapHeight: number, itemList: Position[], sizeFunction?: ClusterSizeCalculator) => ClusterInfo[];

package/dist/components/mint-map/core/util/cluster.js

@@ -2,15 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var MintMap = require('../../MintMap.js');
+var MapTypes = require('../../types/MapTypes.js');
 
 var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, itemList, sizeFunction) {
-  var _a;
+  var _a; //1. basePixelSize 기준으로 현재 지도 크기를 베이스로 영역 갯수 정하기
+
 
   var rowCount = Number((mapWidth / basePixelSize).toFixed(0)) || 1;
-  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1;
+  var colCount = Number((mapHeight / basePixelSize).toFixed(0)) || 1; //console.log('rowCount', rowCount, 'colCount', colCount)
+
   var boundsLineSizeX = Number(((mapBounds.ne.lng - mapBounds.nw.lng) / rowCount).toFixed(7));
-  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7));
+  var boundsLineSizeY = Number(((mapBounds.nw.lat - mapBounds.se.lat) / colCount).toFixed(7)); //console.log('boundsLineSize', boundsLineSizeX, boundsLineSizeY)
   var boundsPos = [];
   var tempX1, tempY1, tempX2, tempY2;
 
@@ -23,7 +25,7 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
     for (var k = 0; k < colCount; k++) {
       tempY2 = mapBounds.se.lat + boundsLineSizeY * k;
       tempY1 = mapBounds.se.lat + boundsLineSizeY * (k + 1);
-      var thisBounds = MintMap.Bounds.fromNWSE(new MintMap.Position(tempY1, tempX1), new MintMap.Position(tempY2, tempX2));
+      var thisBounds = MapTypes.Bounds.fromNWSE(new MapTypes.Position(tempY1, tempX1), new MapTypes.Position(tempY2, tempX2));
       var includedList = thisBounds.getIncludedPositions(itemList);
       rows.push({
         bounds: thisBounds,
@@ -35,7 +37,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
         size: basePixelSize
       });
     }
-  }
+  } //좌표마다 검사해서 인접셀 병합 처리
+
 
   var centerList = [];
   var totalItemCount = 0;
@@ -46,7 +49,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
     for (var k = 0; k < boundsPos[i].length; k++) {
       var curr = boundsPos[i][k];
       if (curr.checked) continue;
-      curr.checked = true;
+      curr.checked = true; //현재기준 8방향 객체 모으기
+
       var incList = [];
 
       if (boundsPos[i]) {
@@ -88,7 +92,7 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
         var avrLng = calculateAverage(curr.itemList.map(function (item) {
           return item.lng;
         }));
-        curr.centerPosition = new MintMap.Position(avrLat, avrLng);
+        curr.centerPosition = new MapTypes.Position(avrLat, avrLng);
         totalItemCount += curr.itemList.length;
 
         if (!min || curr.itemList.length < min) {
@@ -118,7 +122,8 @@ var getClusterInfo = function (basePixelSize, mapBounds, mapWidth, mapHeight, it
   for (var _b = 0, centerList_1 = centerList; _b < centerList_1.length; _b++) {
     var center = centerList_1[_b];
     center.size = sizeFunction(center, status);
-  }
+  } // console.log('centerList', centerList, status);
+
 
   return centerList;
 };

package/dist/components/mint-map/core/util/index.d.ts

@@ -1,4 +1,4 @@
-export * from './animation';
-export * from './calculate';
-export * from './waiting';
-export * from './cluster';
+export * from './animation';
+export * from './calculate';
+export * from './waiting';
+export * from './cluster';

package/dist/components/mint-map/core/util/waiting.d.ts

@@ -1 +1 @@
-export declare function waiting(evaluation: () => boolean, timeoutSeconds?: number): Promise<boolean>;
+export declare function waiting(evaluation: () => boolean, timeoutSeconds?: number): Promise<boolean>;

package/dist/components/mint-map/core/util/waiting.js

@@ -9,16 +9,20 @@ function waiting(evaluation, timeoutSeconds) {
     var max;
     return tslib.__generator(this, function (_a) {
       max = (timeoutSeconds || 5) * 1000;
-      return [2, new Promise(function (resolve) {
+      return [2
+      /*return*/
+      , new Promise(function (resolve) {
         var start = new Date().getTime();
         var inter = setInterval(function () {
+          //타임아웃 체크
           var time = new Date().getTime();
 
           if (time - start > max) {
             clearInterval(inter);
             resolve(false);
             return;
-          }
+          } //평가식 체크
+
 
           if (evaluation()) {
             clearInterval(inter);

package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.d.ts

@@ -1,19 +1,27 @@
-/// <reference types="react" />
-import { MarkerOptions, Offset } from "../../MintMap";
-import { MintMapCanvasRenderer } from "../MintMapCanvasRenderer";
-export declare type CanvasMarkerRenderer<T> = (ctx: MintMapCanvasRenderer, offset: Offset, payload?: T) => void;
-export interface CanvasMarkerMouseEvent {
-    x: number;
-    y: number;
-}
-export declare type CanvasMarkerMouseEventCallback = (e: CanvasMarkerMouseEvent) => boolean | undefined | void;
-export interface MapCanvasMarkerWrapperProps<T> extends MarkerOptions {
-    renderer: CanvasMarkerRenderer<T>;
-    payload?: T;
-    boxWidth: number;
-    boxHeight: number;
-    onClick?: CanvasMarkerMouseEventCallback;
-    onMouseOver?: CanvasMarkerMouseEventCallback;
-    onMouseOut?: CanvasMarkerMouseEventCallback;
-}
-export declare function MapCanvasMarkerWrapper<T>(_props: MapCanvasMarkerWrapperProps<T>): JSX.Element;
+/// <reference types="react" />
+import { MarkerOptions } from "../../types/MapDrawables";
+import { Offset } from "../../types/MapTypes";
+import { MintMapCanvasRenderer } from "../MintMapCanvasRenderer";
+export declare type CanvasMarkerRenderer<T> = (ctx: MintMapCanvasRenderer, offset: Offset, payload?: T) => void;
+export interface CanvasMarkerMouseEvent {
+    x: number;
+    y: number;
+}
+export declare type CanvasMarkerMouseEventCallback = (e: CanvasMarkerMouseEvent) => boolean | undefined | void;
+export interface MapCanvasMarkerWrapperProps<T> extends MarkerOptions {
+    renderer: CanvasMarkerRenderer<T>;
+    payload?: T;
+    boxWidth: number;
+    boxHeight: number;
+    onClick?: CanvasMarkerMouseEventCallback;
+    onMouseOver?: CanvasMarkerMouseEventCallback;
+    onMouseOut?: CanvasMarkerMouseEventCallback;
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapCanvasMarkerWrapper<T>(_props: MapCanvasMarkerWrapperProps<T>): JSX.Element;

package/dist/components/mint-map/core/wrapper/MapCanvasMarkerWrapper.js

@@ -8,7 +8,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+
 function MapCanvasMarkerWrapper(_props) {
+  //실제 렌더링처리는 MapCanvasWrapper 에서...
   return React__default["default"].createElement(React__default["default"].Fragment, null);
 }
 

package/dist/components/mint-map/core/wrapper/MapCanvasWrapper.d.ts

@@ -1,4 +1,11 @@
-import React from "react";
-export interface MapCanvasWrapperProps {
-}
-export declare function MapCanvasWrapper<T>({ children, ...props }: React.PropsWithChildren<MapCanvasWrapperProps>): JSX.Element;
+import React from "react";
+export interface MapCanvasWrapperProps {
+}
+/**
+ * Mint Map 컴포넌트
+ *
+ * @param {MapControlWrapperProps} MapControlWrapperProps
+ *
+ * @returns {JSX.Element} JSX
+ */
+export declare function MapCanvasWrapper<T>({ children, ...props }: React.PropsWithChildren<MapCanvasWrapperProps>): JSX.Element;