@mint-ui/map 0.5.8-beta → 0.5.9-beta

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

@@ -70,13 +70,18 @@ function MapMarkerWrapper(_a) {
 
   var start = MarkerMovingHook.useMarkerMoving(movingState)[0]; //event handlers
 
+  var onMousedownHandler = function (e) {
+    // console.log('onMousedownHandler setMapDragged', false);
+    // 맵 드래그 여부 초기화
+    controller.setMapDragged(false);
+  };
+
   var onClickHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current; //console.log('onClickHandler', marker);
+    var marker = markerRef.current;
 
     if (marker) {
-      controller.setMapDragged(false);
       var clickHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('click');
       var next = true;
 
@@ -116,9 +121,14 @@ function MapMarkerWrapper(_a) {
     divElement.style.flexDirection = 'column';
     divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
     divElement.addEventListener('click', onClickHandler);
+    divElement.addEventListener('mousedown', onMousedownHandler, {
+      capture: true
+    }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
+
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
       divElement.removeEventListener('click', onClickHandler);
+      divElement.removeEventListener('mousedown', onMousedownHandler);
       divElement.removeEventListener('mouseover', onMouseOverHandler);
 
       if (markerRef.current) {

package/dist/components/mint-map/google/GoogleMintMapController.js

@@ -340,7 +340,7 @@ function (_super) {
   };
 
   GoogleMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   GoogleMintMapController.prototype.checkLoaded = function () {
@@ -476,6 +476,14 @@ function (_super) {
                   });
                   this.map = map; //@ts-ignore
 
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
                   map.addListener('idle', function () {
                     //onBoundsChanged event
                     _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());

package/dist/components/mint-map/kakao/KakaoMintMapController.d.ts

@@ -31,7 +31,6 @@ export declare class KakaoMintMapController extends MintMapController {
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
-    private dragStartPoint;
     private dragged;
     isMapDragged(): boolean;
     setMapDragged(value: boolean): void;

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

@@ -29,7 +29,6 @@ function (_super) {
     _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
 
@@ -361,7 +360,7 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   KakaoMintMapController.prototype.checkLoaded = function () {
@@ -501,6 +500,14 @@ function (_super) {
                   // })
                   //@ts-ignore
 
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
                   map.addListener('idle', function (e) {
                     //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());

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

@@ -30,7 +30,6 @@ export declare class NaverMintMapController extends MintMapController {
     setMarkerZIndex(marker: Marker, zIndex: number): void;
     markerToTheTop(marker: Marker): void;
     clearDrawable(drawable: Drawable): boolean;
-    private dragStartPoint;
     private dragged;
     isMapDragged(): boolean;
     setMapDragged(value: boolean): void;

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

@@ -29,7 +29,6 @@ function (_super) {
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
-    _this.dragStartPoint = [0, 0];
     _this.dragged = false;
     _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 
@@ -363,7 +362,7 @@ function (_super) {
   };
 
   NaverMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   NaverMintMapController.prototype.checkLoaded = function () {
@@ -518,20 +517,12 @@ function (_super) {
                   map = new naver.maps.Map(divElement, options);
                   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;
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
                   }); //@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)
-
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
                   }); //@ts-ignore
 
                   map.addListener('idle', function (e) {

package/dist/index.es.js

@@ -1469,7 +1469,6 @@ function (_super) {
     _this.polylineEvents = ['mouseover', 'mouseout'];
     _this.polygonEvents = ['mouseover', 'mouseout'];
     _this.markerEvents = ['click', 'mouseover', 'mouseout'];
-    _this.dragStartPoint = [0, 0];
     _this.dragged = false;
     _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 
@@ -1803,7 +1802,7 @@ function (_super) {
   };
 
   NaverMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   NaverMintMapController.prototype.checkLoaded = function () {
@@ -1958,20 +1957,12 @@ function (_super) {
                   map = new naver.maps.Map(divElement, options);
                   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;
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
                   }); //@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)
-
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
                   }); //@ts-ignore
 
                   map.addListener('idle', function (e) {
@@ -2514,7 +2505,7 @@ function (_super) {
   };
 
   GoogleMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   GoogleMintMapController.prototype.checkLoaded = function () {
@@ -2650,6 +2641,14 @@ function (_super) {
                   });
                   this.map = map; //@ts-ignore
 
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
                   map.addListener('idle', function () {
                     //onBoundsChanged event
                     _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
@@ -2878,7 +2877,6 @@ function (_super) {
     _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
 
@@ -3210,7 +3208,7 @@ function (_super) {
   };
 
   KakaoMintMapController.prototype.setMapDragged = function (value) {
-    this.dragged = false;
+    this.dragged = value;
   };
 
   KakaoMintMapController.prototype.checkLoaded = function () {
@@ -3350,6 +3348,14 @@ function (_super) {
                   // })
                   //@ts-ignore
 
+                  map.addListener('mousedown', function () {
+                    _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
+                  map.addListener('dragstart', function () {
+                    _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                  }); //@ts-ignore
+
                   map.addListener('idle', function (e) {
                     //onBoundsChanged event
                     _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
@@ -4211,13 +4217,18 @@ function MapMarkerWrapper(_a) {
 
   var start = useMarkerMoving(movingState)[0]; //event handlers
 
+  var onMousedownHandler = function (e) {
+    // console.log('onMousedownHandler setMapDragged', false);
+    // 맵 드래그 여부 초기화
+    controller.setMapDragged(false);
+  };
+
   var onClickHandler = function (e) {
     var _a;
 
-    var marker = markerRef.current; //console.log('onClickHandler', marker);
+    var marker = markerRef.current;
 
     if (marker) {
-      controller.setMapDragged(false);
       var clickHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('click');
       var next = true;
 
@@ -4257,9 +4268,14 @@ function MapMarkerWrapper(_a) {
     divElement.style.flexDirection = 'column';
     divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
     divElement.addEventListener('click', onClickHandler);
+    divElement.addEventListener('mousedown', onMousedownHandler, {
+      capture: true
+    }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
+
     divElement.addEventListener('mouseover', onMouseOverHandler);
     return function () {
       divElement.removeEventListener('click', onClickHandler);
+      divElement.removeEventListener('mousedown', onMousedownHandler);
       divElement.removeEventListener('mouseover', onMouseOverHandler);
 
       if (markerRef.current) {

package/dist/index.umd.js

@@ -1473,7 +1473,6 @@
       _this.polylineEvents = ['mouseover', 'mouseout'];
       _this.polygonEvents = ['mouseover', 'mouseout'];
       _this.markerEvents = ['click', 'mouseover', 'mouseout'];
-      _this.dragStartPoint = [0, 0];
       _this.dragged = false;
       _this.eventMap = new Map(); //contextmenu 는 지원하지 않지만 호환성을 위해 rightclick 으로 대체
 
@@ -1807,7 +1806,7 @@
     };
 
     NaverMintMapController.prototype.setMapDragged = function (value) {
-      this.dragged = false;
+      this.dragged = value;
     };
 
     NaverMintMapController.prototype.checkLoaded = function () {
@@ -1962,20 +1961,12 @@
                     map = new naver.maps.Map(divElement, options);
                     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;
+                    map.addListener('mousedown', function () {
+                      _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
                     }); //@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)
-
+                    map.addListener('dragstart', function () {
+                      _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
                     }); //@ts-ignore
 
                     map.addListener('idle', function (e) {
@@ -2518,7 +2509,7 @@
     };
 
     GoogleMintMapController.prototype.setMapDragged = function (value) {
-      this.dragged = false;
+      this.dragged = value;
     };
 
     GoogleMintMapController.prototype.checkLoaded = function () {
@@ -2654,6 +2645,14 @@
                     });
                     this.map = map; //@ts-ignore
 
+                    map.addListener('mousedown', function () {
+                      _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                    }); //@ts-ignore
+
+                    map.addListener('dragstart', function () {
+                      _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                    }); //@ts-ignore
+
                     map.addListener('idle', function () {
                       //onBoundsChanged event
                       _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
@@ -2882,7 +2881,6 @@
       _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
 
@@ -3214,7 +3212,7 @@
     };
 
     KakaoMintMapController.prototype.setMapDragged = function (value) {
-      this.dragged = false;
+      this.dragged = value;
     };
 
     KakaoMintMapController.prototype.checkLoaded = function () {
@@ -3354,6 +3352,14 @@
                     // })
                     //@ts-ignore
 
+                    map.addListener('mousedown', function () {
+                      _this.dragged = false; // console.log('map mousedown / dragged => ', this.dragged);
+                    }); //@ts-ignore
+
+                    map.addListener('dragstart', function () {
+                      _this.dragged = true; // console.log('map dragstart / dragged => ', this.dragged);
+                    }); //@ts-ignore
+
                     map.addListener('idle', function (e) {
                       //onBoundsChanged event
                       _this.map && _this.checkBoundsChangeThrottleTime() && _this.mapProps.onBoundsChanged && _this.mapProps.onBoundsChanged(_this.getCurrBounds());
@@ -4215,13 +4221,18 @@
 
     var start = useMarkerMoving(movingState)[0]; //event handlers
 
+    var onMousedownHandler = function (e) {
+      // console.log('onMousedownHandler setMapDragged', false);
+      // 맵 드래그 여부 초기화
+      controller.setMapDragged(false);
+    };
+
     var onClickHandler = function (e) {
       var _a;
 
-      var marker = markerRef.current; //console.log('onClickHandler', marker);
+      var marker = markerRef.current;
 
       if (marker) {
-        controller.setMapDragged(false);
         var clickHandler = (_a = options === null || options === void 0 ? void 0 : options.event) === null || _a === void 0 ? void 0 : _a.get('click');
         var next = true;
 
@@ -4261,9 +4272,14 @@
       divElement.style.flexDirection = 'column';
       divElement.style.pointerEvents = disablePointerEvent ? 'none' : '';
       divElement.addEventListener('click', onClickHandler);
+      divElement.addEventListener('mousedown', onMousedownHandler, {
+        capture: true
+      }); //드래그 여부 초기화를 먼저 수행하기 위해 capture : true 처리
+
       divElement.addEventListener('mouseover', onMouseOverHandler);
       return function () {
         divElement.removeEventListener('click', onClickHandler);
+        divElement.removeEventListener('mousedown', onMousedownHandler);
         divElement.removeEventListener('mouseover', onMouseOverHandler);
 
         if (markerRef.current) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mint-ui/map",
-  "version": "0.5.8-beta",
+  "version": "0.5.9-beta",
   "main": "./dist/index.js",
   "module": "./dist/index.es.js",
   "browser": "./dist/index.umd.js",