refactor: improve code consistency

src/js/core/applyTransform.js

@@ -1,20 +1,20 @@
 export default function applyTransform() {
   let maxTransX, maxTransY, minTransX, minTransY
 
-  if (this.defaultWidth * this.scale <= this.width) {
-    maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale)
-    minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale)
+  if (this._defaultWidth * this.scale <= this._width) {
+    maxTransX = (this._width - this._defaultWidth * this.scale) / (2 * this.scale)
+    minTransX = (this._width - this._defaultWidth * this.scale) / (2 * this.scale)
   } else {
     maxTransX = 0
-    minTransX = (this.width - this.defaultWidth * this.scale) / this.scale
+    minTransX = (this._width - this._defaultWidth * this.scale) / this.scale
   }
 
-  if (this.defaultHeight * this.scale <= this.height) {
-    maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale)
-    minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale)
+  if (this._defaultHeight * this.scale <= this._height) {
+    maxTransY = (this._height - this._defaultHeight * this.scale) / (2 * this.scale)
+    minTransY = (this._height - this._defaultHeight * this.scale) / (2 * this.scale)
   } else {
     maxTransY = 0
-    minTransY = (this.height - this.defaultHeight * this.scale) / this.scale
+    minTransY = (this._height - this._defaultHeight * this.scale) / this.scale
   }
 
   if (this.transY > maxTransY) {
@@ -31,13 +31,13 @@ export default function applyTransform() {
 
   this.canvas.applyTransformParams(this.scale, this.transX, this.transY)
 
-  if (this.markers) {
+  if (this._markers) {
     this._repositionMarkers()
   }
 
-  if (this.lines) {
+  if (this._lines) {
     this._repositionLines()
   }
 
   this._repositionLabels()
-}
+}

src/js/core/createLines.js

@@ -26,7 +26,7 @@ export default function createLines(lines, markers, isRecentlyCreated = false) {
 
     if (point1 !== false && point2 !== false) {
       // Register lines with unique keys
-      this.lines[getLineUid(config.from, config.to)] = new Line({
+      this._lines[getLineUid(config.from, config.to)] = new Line({
         index: index,
         map: this,
         // Merge the default `lineStyle` object with the custom `line` config style

src/js/core/createMarkers.js

@@ -2,37 +2,35 @@ import { merge } from '../util'
 import Marker from '../components/marker'
 
 export default function createMarkers(markers = {}, isRecentlyCreated = false) {
-  let config, marker, point, uid
-
   // Create groups for holding markers and markers labels
   // We're checking if `markersGroup` exists or not becuase we may add markers after the map has loaded
   // So we will append the futured markers to this group as well.
   this._markersGroup = this._markersGroup || this.canvas.createGroup('jvm-markers-group')
   this._markerLabelsGroup = this._markerLabelsGroup || this.canvas.createGroup('jvm-markers-labels-group')
 
   for (let index in markers) {
-    config = markers[index]
-    point = this.getMarkerPosition(config)
-    uid = config.coords.join(':')
+    const config = markers[index]
+    const point = this.getMarkerPosition(config)
+    const uid = config.coords.join(':')
 
     if (!point) {
       continue
     }
 
     // We're checking if recently created marker does already exist
-    // If exists we don't need to create it again, so we'll continute
+    // If it does we don't need to create it again, so we'll continue
     // Becuase we may have more than one marker submitted via `addMarkers` method.
     if (isRecentlyCreated) {
       if (
-        Object.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 = Object.keys(this.markers).length
+      index = Object.keys(this._markers).length
     }
 
-    marker = new Marker({
+    const marker = new Marker({
       index,
       map: this,
       // Merge the `markerStyle` object with the marker config `style` if presented.
@@ -49,14 +47,14 @@ export default function createMarkers(markers = {}, isRecentlyCreated = false) {
     // Check for marker duplication
     // this is useful when for example: a user clicks a button for creating marker two times
     // so it will remove the old one and the new one will take its place.
-    if (this.markers[index]) {
+    if (this._markers[index]) {
       this.removeMarkers([index])
     }
 
-    this.markers[index] = {
+    this._markers[index] = {
       _uid: uid,
       config: config,
-      element: marker
+      element: marker,
     }
   }
 }

src/js/core/createRegions.js

@@ -2,12 +2,10 @@ import { merge } from '../util'
 import Region from '../components/region'
 
 export default function createRegions() {
-  let code, region
-
   this._regionLabelsGroup = this._regionLabelsGroup || this.canvas.createGroup('jvm-regions-labels-group')
 
-  for (code in this.mapData.paths) {
-    region = new Region({
+  for (let code in this.mapData.paths) {
+    const region = new Region({
       map: this,
       code: code,
       path: this.mapData.paths[code].path,
@@ -19,7 +17,7 @@ export default function createRegions() {
 
     this.regions[code] = {
       config: this.mapData.paths[code],
-      element: region
+      element: region,
     }
   }
 }

src/js/core/repositionLabels.js

@@ -14,8 +14,8 @@ export default function repositionLabels() {
 
   // Markers labels
   if (labels.markers) {
-    for (let key in this.markers) {
-      this.markers[key].element.updateLabelPosition()
+    for (let key in this._markers) {
+      this._markers[key].element.updateLabelPosition()
     }
   }
 }

src/js/core/repositionLines.js

@@ -1,22 +1,21 @@
 export default function repositionLines() {
   let point1 = false, point2 = false
 
-  for (let index in this.lines) {
-    for (let mindex in this.markers) {
-      const marker = this.markers[mindex]
-      // console.log(this.lines[index], index);
+  for (let index in this._lines) {
+    for (let mindex in this._markers) {
+      const marker = this._markers[mindex]
 
-      if (marker.config.name === this.lines[index].config.from) {
+      if (marker.config.name === this._lines[index].config.from) {
         point1 = this.getMarkerPosition(marker.config)
       }
 
-      if (marker.config.name === this.lines[index].config.to) {
+      if (marker.config.name === this._lines[index].config.to) {
         point2 = this.getMarkerPosition(marker.config)
       }
     }
 
     if (point1 !== false && point2 !== false) {
-      this.lines[index].setStyle({
+      this._lines[index].setStyle({
         x1: point1.x,
         y1: point1.y,
         x2: point2.x,

src/js/core/repositionMarkers.js

@@ -1,13 +1,13 @@
 export default function repositionMarkers() {
   let point
 
-  for (let index in this.markers) {
-    point = this.getMarkerPosition(this.markers[index].config)
+  for (let index in this._markers) {
+    point = this.getMarkerPosition(this._markers[index].config)
 
     if (point !== false) {
-      this.markers[index].element.setStyle({
+      this._markers[index].element.setStyle({
         cx: point.x, cy: point.y
       })
     }
   }
-}
+}

src/js/core/resize.js

@@ -1,15 +1,15 @@
 export default function resize() {
-  const curBaseScale = this.baseScale
+  const curBaseScale = this._baseScale
 
-  if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
-    this.baseScale = this.height / this.defaultHeight
-    this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale)
+  if (this._width / this._height > this._defaultWidth / this._defaultHeight) {
+    this._baseScale = this._height / this._defaultHeight
+    this._baseTransX = Math.abs(this._width - this._defaultWidth * this._baseScale) / (2 * this._baseScale)
   } else {
-    this.baseScale = this.width / this.defaultWidth
-    this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale)
+    this._baseScale = this._width / this._defaultWidth
+    this._baseTransY = Math.abs(this._height - this._defaultHeight * this._baseScale) / (2 * this._baseScale)
   }
 
-  this.scale *= this.baseScale / curBaseScale
-  this.transX *= this.baseScale / curBaseScale
-  this.transY *= this.baseScale / curBaseScale
+  this.scale *= this._baseScale / curBaseScale
+  this.transX *= this._baseScale / curBaseScale
+  this.transY *= this._baseScale / curBaseScale
 }

src/js/core/setFocus.js

@@ -31,7 +31,7 @@ export default function setFocus(config = {}) {
     })
 
     return this._setScale(
-      Math.min(this.width / bbox.width, this.height / bbox.height),
+      Math.min(this._width / bbox.width, this._height / bbox.height),
       -(bbox.x + bbox.width / 2),
       -(bbox.y + bbox.height / 2),
       true,
@@ -41,6 +41,6 @@ export default function setFocus(config = {}) {
     const point = this.coordsToPoint(config.coords[0], config.coords[1])
     const x = this.transX - point.x / this.scale
     const y = this.transY - point.y / this.scale
-    return this._setScale(config.scale * this.baseScale, x, y, true, config.animate)
+    return this._setScale(config.scale * this._baseScale, x, y, true, config.animate)
   }
-}
+}

src/js/core/setScale.js

@@ -14,17 +14,17 @@ export default function setScale(scale, anchorX, anchorY, isCentered, animate) {
     transX,
     transY
 
-  if (scale > this.params.zoomMax * this.baseScale) {
-    scale = this.params.zoomMax * this.baseScale
-  } else if (scale < this.params.zoomMin * this.baseScale) {
-    scale = this.params.zoomMin * this.baseScale
+  if (scale > this.params.zoomMax * this._baseScale) {
+    scale = this.params.zoomMax * this._baseScale
+  } else if (scale < this.params.zoomMin * this._baseScale) {
+    scale = this.params.zoomMin * this._baseScale
   }
 
   if (typeof anchorX != 'undefined' && typeof anchorY != 'undefined') {
     zoomStep = scale / this.scale
     if (isCentered) {
-      transX = anchorX + this.defaultWidth * (this.width / (this.defaultWidth * scale)) / 2
-      transY = anchorY + this.defaultHeight * (this.height / (this.defaultHeight * scale)) / 2
+      transX = anchorX + this._defaultWidth * (this._width / (this._defaultWidth * scale)) / 2
+      transY = anchorY + this._defaultHeight * (this._height / (this._defaultHeight * scale)) / 2
     } else {
       transX = this.transX - (zoomStep - 1) / scale * anchorX
       transY = this.transY - (zoomStep - 1) / scale * anchorY

src/js/core/setupContainerTouchEvents.js

@@ -1,4 +1,4 @@
-import EventHandler from "../eventHandler"
+import EventHandler from '../eventHandler'
 
 export default function setupContainerTouchEvents() {
   let map = this,
@@ -38,7 +38,6 @@ export default function setupContainerTouchEvents() {
 
       touchX = touches[0].pageX
       touchY = touches[0].pageY
-
     } else if (touches.length == 2) {
       if (lastTouchesLength == 2) {
         scale = Math.sqrt(

src/js/core/setupElementEvents.js

@@ -18,8 +18,8 @@ function parseEvent(map, selector, isTooltip) {
     event,
     type,
     code,
-    element: type === 'region' ? map.regions[code].element : map.markers[code].element,
-    tooltipText: type === 'region' ? map.mapData.paths[code].name || '' : (map.markers[code].config.name || '')
+    element: type === 'region' ? map.regions[code].element : map._markers[code].element,
+    tooltipText: type === 'region' ? map.mapData.paths[code].name || '' : (map._markers[code].config.name || '')
   }
 }
 

src/js/core/setupZoomButtons.js

@@ -12,8 +12,8 @@ export default function setupZoomButtons() {
   EventHandler.on(zoomin, 'click', () => {
     this._setScale(
       map.scale * map.params.zoomStep,
-      map.width / 2,
-      map.height / 2,
+      map._width / 2,
+      map._height / 2,
       false,
       map.params.zoomAnimate
     )
@@ -22,8 +22,8 @@ export default function setupZoomButtons() {
   EventHandler.on(zoomout, 'click', () => {
     this._setScale(
       map.scale / map.params.zoomStep,
-      map.width / 2,
-      map.height / 2,
+      map._width / 2,
+      map._height / 2,
       false,
       map.params.zoomAnimate
     )

src/js/core/updateSize.js

@@ -1,7 +1,7 @@
 export default function updateSize() {
-  this.width = this.container.offsetWidth
-  this.height = this.container.offsetHeight
+  this._width = this.container.offsetWidth
+  this._height = this.container.offsetHeight
   this._resize()
-  this.canvas.setSize(this.width, this.height)
+  this.canvas.setSize(this._width, this._height)
   this._applyTransform()
 }

src/js/dataVisualization.js

@@ -1,6 +1,5 @@
 class DataVisualization {
   constructor({ scale, values }, map) {
-    // Private
     this._scale = scale
     this._values = values
     this._fromColor = this.hexToRgb(scale[0])
@@ -51,14 +50,14 @@ class DataVisualization {
   }
 
   getValue(value) {
-    let hex, color = "#"
+    let hex, color = '#'
 
     for (var i = 0; i < 3; i++) {
       hex = Math.round(
         this._fromColor[i] + (this._toColor[i] - this._fromColor[i]) * ((value - this.min) / (this.max - this.min))
       ).toString(16)
 
-      color += (hex.length === 1 ? "0" : "") + hex
+      color += (hex.length === 1 ? '0' : '') + hex
     }
 
     return color
@@ -68,17 +67,17 @@ class DataVisualization {
     let r = 0, g = 0, b = 0
 
     if (h.length == 4) {
-      r = "0x" + h[1] + h[1]
-      g = "0x" + h[2] + h[2]
-      b = "0x" + h[3] + h[3]
+      r = '0x' + h[1] + h[1]
+      g = '0x' + h[2] + h[2]
+      b = '0x' + h[3] + h[3]
     } else if (h.length == 7) {
-      r = "0x" + h[1] + h[2]
-      g = "0x" + h[3] + h[4]
-      b = "0x" + h[5] + h[6]
+      r = '0x' + h[1] + h[2]
+      g = '0x' + h[3] + h[4]
+      b = '0x' + h[5] + h[6]
     }
 
     return [parseInt(r), parseInt(g), parseInt(b)]
   }
 }
 
-export default DataVisualization
+export default DataVisualization

src/js/defaults/events.js

@@ -1,11 +1,11 @@
 export default {
+  onLoaded: 'map:loaded',
   onViewportChange: 'viewport:changed',
   onRegionClick: 'region:clicked',
   onMarkerClick: 'marker:clicked',
   onRegionSelected: 'region:selected',
   onMarkerSelected: 'marker:selected',
   onRegionTooltipShow: 'region.tooltip:show',
   onMarkerTooltipShow: 'marker.tooltip:show',
-  onLoaded: 'map:loaded',
   onDestroyed: 'map:destroyed'
 }