fix: shaky click selects a region (#47)

Fixes: #47
themustafaomar · Jul 6, 2022 · 184c1fc · 184c1fc
1 parent be73166
commit 184c1fc
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 16 deletions.
diff --git a/src/js/core/setupContainerEvents.js b/src/js/core/setupContainerEvents.js
@@ -14,7 +14,6 @@ export default function setupContainerEvents() {
       map._applyTransform()
       oldPageX = e.pageX
       oldPageY = e.pageY
-      this.isBeingDragged = true
     })
 
     EventHandler.on(this.container, 'mousedown', (e) => {

diff --git a/src/js/core/setupElementEvents.js b/src/js/core/setupElementEvents.js
@@ -2,10 +2,10 @@ import { getElement } from '../util/index'
 import EventHandler from '../eventHandler'
 
 function parseEvent(map, selector, isTooltip) {
-  var ele = getElement(selector),
-    elClassList = ele.getAttribute('class'),
-    type = elClassList.indexOf('jvm-region') === -1 ? 'marker' : 'region',
-    code = type === 'region' ? ele.getAttribute('data-code') : ele.getAttribute('data-index'),
+  var element = getElement(selector),
+    classes = element.getAttribute('class'),
+    type = classes.indexOf('jvm-region') === -1 ? 'marker' : 'region',
+    code = type === 'region' ? element.getAttribute('data-code') : element.getAttribute('data-index'),
     event = `${type}:selected`
 
   // Init tooltip event
@@ -24,10 +24,19 @@ function parseEvent(map, selector, isTooltip) {
 
 export default function setupElementEvents() {
   const map = this, container = this.container
+  let pageX, pageY, mouseMoved
+
+  EventHandler.on(container, 'mousemove', (event) => {
+    if (Math.abs(pageX - event.pageX) + Math.abs(pageY - event.pageY) > 2) {
+      mouseMoved = true
+    }
+  })
 
   // When the mouse is pressed
-  EventHandler.delegate(container, 'mousedown', '.jvm-element', () => {
-    this.isBeingDragged = false
+  EventHandler.delegate(container, 'mousedown', '.jvm-element', (event) => {
+    pageX = event.pageX
+    pageY = event.pageY
+    mouseMoved = false
   })
 
   // When the mouse is over the region/marker | When the mouse is out the region/marker
@@ -46,7 +55,6 @@ export default function setupElementEvents() {
       map._emit(data.event, [event, map.tooltip, data.code])
 
       if (!defaultPrevented) {
-
         if (showTooltip) {
           map.tooltip.show()
         }
@@ -64,30 +72,29 @@ export default function setupElementEvents() {
   EventHandler.delegate(container, 'mouseup', '.jvm-element', function (event) {
     const data = parseEvent(map, this)
 
-    if (map.isBeingDragged || event.defaultPrevented) {
+    if (mouseMoved) {
       return
     }
 
     if (
-      (data.type === 'region' && map.params.regionsSelectable) ||
-      (data.type === 'marker' && map.params.markersSelectable)
+      (data.type === 'region' && map.params.regionsSelectable) || (data.type === 'marker' && map.params.markersSelectable)
     ) {
-      const ele = data.element
+      const element = data.element
 
       // We're checking if regions/markers|SelectableOne option is presented
       if (map.params[`${data.type}sSelectableOne`]) {
         map._clearSelected(`${data.type}s`)
       }
 
       if (data.element.isSelected) {
-        ele.select(false)
+        element.select(false)
       } else {
-        ele.select(true)
+        element.select(true)
       }
 
       map._emit(data.event, [
         data.code,
-        ele.isSelected,
+        element.isSelected,
         map._getSelected(`${data.type}s`)
       ])
     }

diff --git a/src/js/map.js b/src/js/map.js
@@ -49,7 +49,6 @@ class Map {
     this.transY = 0
     this.baseTransX = 0
     this.baseTransY = 0
-    this.isBeingDragged = false
 
     // `document` is already ready, just initialise now
     if (document.readyState !== 'loading') {