refactor: clean up util api

src/js/core/createLines.js

@@ -1,4 +1,4 @@
-import Util from '../util/index'
+import { merge } from '../util/index'
 import Line from '../elements/line'
 
 function createLineUid(from, to) {
@@ -33,9 +33,9 @@ export default function createLines(lines, markers, isRecentlyCreated = false) {
         index: index,
         map: this,
         // Merge the lineStyle object with the line config style
-        style: Util.mergeDeeply({ initial: this.params.lineStyle }, {
+        style: merge({ initial: this.params.lineStyle }, {
           initial: lineConfig.style || {}
-        }),
+        }, true),
         x1: point1.x,
         y1: point1.y,
         x2: point2.x,
@@ -58,4 +58,4 @@ export default function createLines(lines, markers, isRecentlyCreated = false) {
       }
     }
   }
-}
+}

src/js/core/createMarkers.js

@@ -1,4 +1,4 @@
-import Util from '../util/index'
+import { merge } from '../util/index'
 import Marker from '../elements/marker'
 
 export default function createMarkers(markers = {}, isRecentlyCreated = false) {
@@ -20,30 +20,26 @@ export default function createMarkers(markers = {}, isRecentlyCreated = false) {
     // Becuase we may have more than one marker.
     if (isRecentlyCreated) {
       if (
-        Util.keys(this.markers).filter(i => this.markers[i]._uid === uid).length
+        Object.keys(this.markers).filter(i => this.markers[i]._uid === uid).length
       ) {
         continue
       }
 
-      index = Util.keys(this.markers).length
+      index = Object.keys(this.markers).length
     }
 
     if (point !== false) {
       marker = new Marker({
         index,
         map: this,
         // Merge the `markerStyle` object with the marker config `style` if presented.
-        style: Util.mergeDeeply(this.params.markerStyle, { initial: markerConfig.style || {} }),
+        style: merge(this.params.markerStyle, { initial: markerConfig.style || {} }, true),
         label: this.params.labels && this.params.labels.markers,
         labelsGroup: this.markerLabelsGroup,
         cx: point.x,
         cy: point.y,
         group: this.markersGroup,
         marker: markerConfig,
-        // @TODO: this may be a little bit complicated :(
-        // When adding a new marker by `addMarker` method and labels.markers.render() key exists
-        // the render function may returns something like that: return markers[name].name;
-        // it will throw an error and the label won't be shown: this was created to solve showing the label
         isRecentlyCreated,
       })
 
@@ -61,4 +57,4 @@ export default function createMarkers(markers = {}, isRecentlyCreated = false) {
       }
     }
   }
-}
+}

src/js/core/createRegions.js

@@ -1,5 +1,5 @@
+import { merge } from '../util/index'
 import Region from '../elements/region'
-import Util from '../util/index'
 
 export default function createRegions() {
   let code, region
@@ -11,7 +11,7 @@ export default function createRegions() {
       map: this,
       code: code,
       path: this.mapData.paths[code].path,
-      style: Util.merge({}, this.params.regionStyle),
+      style: merge({}, this.params.regionStyle),
       labelStyle: this.params.regionLabelStyle, 
       labelsGroup: this.regionLabelsGroup,
       label: this.params.labels && this.params.labels.regions,
@@ -22,4 +22,4 @@ export default function createRegions() {
       element: region
     }
   }
-}
+}

src/js/core/createSeries.js

@@ -10,4 +10,4 @@ export default function createSeries() {
       )
     }
   }
-}
+}

src/js/core/createTooltip.js

@@ -1,13 +1,18 @@
-import Util from '../util/index'
+import {
+  $,
+  createElement,
+  findElement
+} from '../util/index'
+import EventHandler from '../eventHandler'
 
 export default function createTooltip() {
-  const tooltip = Util.createElement('div', 'jvm-tooltip')
+  const tooltip = createElement('div', 'jvm-tooltip')
 
-  this.tooltip = Util.$(document.body.appendChild(tooltip))
+  this.tooltip = $(document.body.appendChild(tooltip))
 
-  this.container.on('mousemove', event => {
+  EventHandler.on(this.container, 'mousemove', event => {
     if (this.tooltip.selector.style.display === 'block') {
-      const container = this.container.selector.querySelector('#jvm-regions-group').getBoundingClientRect()
+      const container = findElement(this.container, '#jvm-regions-group').getBoundingClientRect()
       const space = 5 // Space between the cursor and tooltip element
 
       // Tooltip

src/js/core/handleContainerEvents.js

@@ -1,40 +1,43 @@
-import Util from '../util/index'
+import EventHandler from '../eventHandler'
+import { getElement } from '../util/index'
 
 export default function handleContainerEvents() {
   let mouseDown = false, oldPageX, oldPageY, map = this
 
   if (this.params.draggable) {
-    this.container
-      .on('mousemove', (e) => {
-        if (mouseDown) {
-          map.transX -= (oldPageX - e.pageX) / map.scale
-          map.transY -= (oldPageY - e.pageY) / map.scale
-          map.applyTransform()
-          oldPageX = e.pageX
-          oldPageY = e.pageY
-          this.isBeingDragged = true
-        }
+    EventHandler.on(this.container, 'mousemove', (e) => {
+      if (!mouseDown) {
         return false
-      }).on('mousedown', (e) => {
-        mouseDown = true
-        oldPageX = e.pageX
-        oldPageY = e.pageY
-        return false
-      })
+      }
+
+      map.transX -= (oldPageX - e.pageX) / map.scale
+      map.transY -= (oldPageY - e.pageY) / map.scale
+      map.applyTransform()
+      oldPageX = e.pageX
+      oldPageY = e.pageY
+      this.isBeingDragged = true
+    })
 
-    Util.$('body').on('mouseup', () => {
+    EventHandler.on(this.container, 'mousedown', (e) => {
+      mouseDown = true
+      oldPageX = e.pageX
+      oldPageY = e.pageY
+      return false
+    })
+
+    EventHandler.on(getElement('body'), 'mouseup', () => {
       mouseDown = false
     })
   }
 
   if (this.params.zoomOnScroll) {
-    this.container.on('wheel', event => {
+    EventHandler.on(this.container, 'wheel', event => {
       let deltaY = 0
 
       deltaY = ((event.deltaY || -event.wheelDelta || event.detail) >> 10) || 1
       deltaY = deltaY * 75
 
-      const rect = this.container.selector.getBoundingClientRect(),
+      const rect = this.container.getBoundingClientRect(),
         offsetX = event.pageX - rect.left - window.pageXOffset,
         offsetY = event.pageY - rect.top - window.pageYOffset,
         zoomStep = Math.pow(1 + (map.params.zoomOnScrollSpeed / 1000), -1.5 * deltaY)
@@ -45,6 +48,6 @@ export default function handleContainerEvents() {
       map.setScale(map.scale * zoomStep, offsetX, offsetY)
 
       event.preventDefault()
-    });
+    })
   }
 }

src/js/core/handleElementEvents.js

@@ -1,7 +1,8 @@
-import Util from '../util/index'
+import { $ } from '../util/index'
+import EventHandler from '../eventHandler'
 
 function parseEvent(map, selector, isTooltip) {
-  var ele = Util.$(selector),
+  var ele = $(selector),
     elClassList = ele.attr('class'),
     type = elClassList.indexOf('jvm-region') === -1 ? 'marker' : 'region',
     code = type === 'region' ? ele.attr('data-code') : ele.attr('data-index'),
@@ -22,14 +23,14 @@ function parseEvent(map, selector, isTooltip) {
 }
 
 export default function handleElementEvents() {
-  const map = this
+  const map = this, container = this.container
 
-  this.container.delegate('.jvm-element', 'mousedown', () => {
+  EventHandler.delegate(container, 'mousedown', '.jvm-element', () => {
     this.isBeingDragged = false
   })
 
   // When the mouse is over the region/marker | When the mouse is out the region/marker
-  this.container.delegate('.jvm-element', 'mouseover mouseout', function (event) {
+  EventHandler.delegate(container, 'mouseover mouseout', '.jvm-element', function (event) {
     const data = parseEvent(map, this, true)
     const showTooltip = map.params.showTooltip
 
@@ -55,7 +56,7 @@ export default function handleElementEvents() {
   })
 
   // When the click is released
-  this.container.delegate('.jvm-element', 'mouseup', function (event) {
+  EventHandler.delegate(container, '.jvm-element', 'mouseup', function (event) {
     const data = parseEvent(map, this)
 
     if (map.isBeingDragged || event.defaultPrevented) {

src/js/core/handleZoomButtons.js

@@ -1,12 +1,12 @@
-import Util from '../util/index'
 import EventHandler from '../eventHandler'
 
 export default function handleZoomButtons() {
   const map = this
-  const zoomin = Util.createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
-  const zoomout = Util.createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
+  const zoomin = createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
+  const zoomout = createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
 
-  this.container.append(zoomin).append(zoomout)
+  this.container.appendChild(zoomin)
+  this.container.appendChild(zoomout)
 
   EventHandler.on(zoomin, 'click', () => {
     this.setScale(
@@ -27,4 +27,4 @@ export default function handleZoomButtons() {
       map.params.zoomAnimate
     )
   })
-}
+}

src/js/core/index.js

@@ -20,7 +20,7 @@ import repositionMarkers from './repositionMarkers'
 import repositionLabels from './repositionLabels'
 import visualizeData from './visualizeData'
 
-export {
+export default {
   handleContainerEvents,
   handleElementEvents,
   handleZoomButtons,

src/js/core/updateSize.js

@@ -1,6 +1,6 @@
 export default function updateSize() {
-  this.width = this.container.width()
-  this.height = this.container.height()
+  this.width = this.container.offsetWidth
+  this.height = this.container.offsetHeight
   this.resize()
   this.canvas.setSize(this.width, this.height)
   this.applyTransform()

src/js/core/visualizeData.js

@@ -1,8 +1,7 @@
-import Util from '../util/index'
 import DataVisualization from '../dataVisualization'
 
 export default function visualizeData(data) {
-  if (Util.isObj(data)) {
+  if (typeof data === 'object') {
     this.dataVisualization = new DataVisualization(data, this)
   }
-}
+}

src/js/elements/baseElement.js

@@ -1,4 +1,3 @@
-import Util from '../util/index'
 
 /**
  * ------------------------------------------------------------------------
@@ -11,7 +10,7 @@ class MapElement {
       return
     }
 
-    if (Util.isFunc(label.render)) {
+    if (typeof label.render === 'function') {
       let params = []
 
       // Pass additional paramater (Marker config object) in case it's a Marker.
@@ -29,12 +28,12 @@ class MapElement {
   }
 
   getLabelOffsets(key, label) {
-    if (Util.isFunc(label.offsets)) {
+    if (typeof label.offsets === 'function') {
       return label.offsets(key)
     }
 
     // If offsets are an array of offsets e.g offsets: [ [0, 25], [10, 15] ]
-    if (Util.isArr(label.offsets)) {
+    if (Array.isArray(label.offsets)) {
       return label.offsets[key]
     }
 
@@ -72,4 +71,4 @@ class MapElement {
   }
 }
 
-export default MapElement
+export default MapElement

src/js/eventHandler.js

@@ -19,17 +19,29 @@ const EventHandler = {
 
     element.addEventListener(event, handler, options)
   },
+  delegate(element, event, selector, handler) {
+    event = event.split(' ')
+
+    event.forEach(eventName => {
+      EventHandler.on(element, eventName, (e) => {
+        const target = e.target
+
+        if (target.matches(selector)) {
+          handler.call(target, e)
+        }
+      })
+    })
+  },
   off(element, event, handler) {
     const eventType = event.split(':')[1]
 
     element.removeEventListener(eventType, handler)
 
-    // Remove reference
     delete eventRegistry[handler._uid]
   },
   getEventRegistry() {
     return eventRegistry
   },
 }
 
-export default EventHandler
+export default EventHandler