@tabler/core 1.3.2 → 1.4.0

package/dist/libs/jsvectormap/src/js/core/createMarkers.js

@@ -2,12 +2,6 @@ import { merge } from '../util'
 import Marker from '../components/marker'
 
 export default function createMarkers(markers = {}, isRecentlyCreated = false) {
-  // 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) {
     const config = markers[index]
     const point = this.getMarkerPosition(config)
@@ -30,19 +24,20 @@ export default function createMarkers(markers = {}, isRecentlyCreated = false) {
       index = Object.keys(this._markers).length
     }
 
-    const marker = new Marker({
-      index,
-      map: this,
-      // Merge the `markerStyle` object with the marker config `style` if presented.
-      style: merge(this.params.markerStyle, { ...config.style || {} }, true),
-      label: this.params.labels && this.params.labels.markers,
-      labelsGroup: this._markerLabelsGroup,
-      cx: point.x,
-      cy: point.y,
-      group: this._markersGroup,
-      marker: config,
-      isRecentlyCreated,
-    })
+    const marker = new Marker(
+      {
+        index,
+        map: this,
+        label: this.params.labels && this.params.labels.markers,
+        labelsGroup: this._markerLabelsGroup,
+        cx: point.x,
+        cy: point.y,
+        group: this._markersGroup,
+        config,
+        isRecentlyCreated,
+      },
+      merge(this.params.markerStyle, { ...(config.style || {}) }, true)
+    )
 
     // Check for marker duplication
     // this is useful when for example: a user clicks a button for creating marker two times
@@ -57,4 +52,4 @@ export default function createMarkers(markers = {}, isRecentlyCreated = false) {
       element: marker,
     }
   }
-}
+}

package/dist/libs/jsvectormap/src/js/core/createRoutes.js

@@ -0,0 +1,16 @@
+import waypoints from "../../../../playground/data/waypoints"
+import { Route } from "../components/route"
+
+export default function createRoutes(routes) {
+  this._routes = {}
+
+  let index = 0
+  for (let route of routes) {
+    this._routes[route.name] = new Route({
+      map: this,
+      group: this._routesGroup,
+      waypoints: route.data,
+      index: index++,
+    }, {})
+  }
+}

package/dist/libs/jsvectormap/src/js/core/repositionLines.js

@@ -1,26 +1,30 @@
 export default function repositionLines() {
-  let point1 = false, point2 = false
+  const curvature = this.params.lineStyle.curvature
 
-  for (let index in this._lines) {
-    for (let mindex in this._markers) {
-      const marker = this._markers[mindex]
+  Object.values(this._lines).forEach((line) => {
+    const startMarker = Object.values(this._markers).find(
+      ({ config }) => config.name === line.getConfig().from
+    )
 
-      if (marker.config.name === this._lines[index].config.from) {
-        point1 = this.getMarkerPosition(marker.config)
-      }
+    const endMarker = Object.values(this._markers).find(
+      ({ config }) => config.name === line.getConfig().to
+    )
 
-      if (marker.config.name === this._lines[index].config.to) {
-        point2 = this.getMarkerPosition(marker.config)
-      }
-    }
+    if (startMarker && endMarker) {
+      const { x: x1, y: y1 } = this.getMarkerPosition(startMarker.config)
+      const { x: x2, y: y2 } = this.getMarkerPosition(endMarker.config)
+      const curvatureOption = line._options.curvature == 0
+        ? 0
+        : line._options.curvature || curvature
+
+      const midX = (x1 + x2) / 2
+      const midY = (y1 + y2) / 2
+      const curveX = midX + curvatureOption * (y2 - y1)
+      const curveY = midY - curvatureOption * (x2 - x1)
 
-    if (point1 !== false && point2 !== false) {
-      this._lines[index].setStyle({
-        x1: point1.x,
-        y1: point1.y,
-        x2: point2.x,
-        y2: point2.y,
+      line.setStyle({
+        d: `M${x1},${y1} Q${curveX},${curveY} ${x2},${y2}`,
       })
     }
-  }
+  })
 }

package/dist/libs/jsvectormap/src/js/core/setupContainerEvents.js

@@ -35,8 +35,8 @@ export default function setupContainerEvents() {
     EventHandler.on(this.container, 'wheel', event => {
       const deltaY = (((event.deltaY || -event.wheelDelta || event.detail) >> 10) || 1) * 75
       const rect = this.container.getBoundingClientRect()
-      const offsetX = event.pageX - rect.left - window.pageXOffset
-      const offsetY = event.pageY - rect.top - window.pageYOffset
+      const offsetX = event.pageX - rect.left - window.scrollX
+      const offsetY = event.pageY - rect.top - window.scrollY
       const zoomStep = Math.pow(1 + (map.params.zoomOnScrollSpeed / 1000), -1.5 * deltaY)
 
       if (map.tooltip) {

package/dist/libs/jsvectormap/src/js/core/setupContainerTouchEvents.js

@@ -25,7 +25,7 @@ export default function setupContainerTouchEvents() {
         map.transX -= (touchX - touches[0].pageX) / map.scale
         map.transY -= (touchY - touches[0].pageY) / map.scale
 
-        map._tooltip.hide()
+        map._tooltip?.hide()
         map._applyTransform()
 
         if (transXOld != map.transX || transYOld != map.transY) {
@@ -44,7 +44,7 @@ export default function setupContainerTouchEvents() {
 
         map._setScale(touchStartScale * scale, centerTouchX, centerTouchY)
 
-        map._tooltip.hide()
+        map._tooltip?.hide()
         e.preventDefault()
       } else {
         let rect = map.container.getBoundingClientRect()

package/dist/libs/jsvectormap/src/js/core/setupElementEvents.js

@@ -51,8 +51,10 @@ export default function setupElementEvents() {
 
       if (showTooltip) {
         map._tooltip.text(data.tooltipText)
-        map._tooltip.show()
         map._emit(data.event, [event, map._tooltip, data.code])
+        if (!event.defaultPrevented) {
+          map._tooltip.show()
+        }
       }
     } else {
       data.element.hover(false)
@@ -79,7 +81,7 @@ export default function setupElementEvents() {
 
       // We're checking if regions/markers|SelectableOne option is presented
       if (map.params[`${data.type}sSelectableOne`]) {
-        map._clearSelected(`${data.type}s`)
+        data.type === 'region' ? map.clearSelectedRegions() : map.clearSelectedMarkers()
       }
 
       if (data.element.isSelected) {
@@ -91,7 +93,9 @@ export default function setupElementEvents() {
       map._emit(data.event, [
         data.code,
         element.isSelected,
-        map._getSelected(`${data.type}s`)
+        data.type === 'region'
+          ? map.getSelectedRegions()
+          : map.getSelectedMarkers()
       ])
     }
   })

package/dist/libs/jsvectormap/src/js/core/setupZoomButtons.js

@@ -2,11 +2,28 @@ import { createElement } from '../util'
 import EventHandler from '../eventHandler'
 
 export default function setupZoomButtons() {
-  const zoomin = createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
-  const zoomout = createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
+  const zoomInOption = this.params.zoomInButton
+  const zoomOutOption = this.params.zoomOutButton
 
-  this.container.appendChild(zoomin)
-  this.container.appendChild(zoomout)
+  const getZoomButton = (zoomOption) => typeof zoomOption === 'string'
+    ? document.querySelector(zoomOption)
+    : zoomOption
+
+  const zoomIn = zoomInOption
+    ? getZoomButton(zoomInOption)
+    : createElement('div', 'jvm-zoom-btn jvm-zoomin', '+', true)
+
+  const zoomOut = zoomOutOption
+    ? getZoomButton(zoomOutOption)
+    : createElement('div', 'jvm-zoom-btn jvm-zoomout', '&#x2212', true)
+
+  if (!zoomInOption) {
+    this.container.appendChild(zoomIn)
+  }
+
+  if (!zoomOutOption) {
+    this.container.appendChild(zoomOut)
+  }
 
   const handler = (zoomin = true) => {
     return () => this._setScale(
@@ -18,6 +35,6 @@ export default function setupZoomButtons() {
     )
   }
 
-  EventHandler.on(zoomin, 'click', handler())
-  EventHandler.on(zoomout, 'click', handler(false))
+  EventHandler.on(zoomIn, 'click', handler())
+  EventHandler.on(zoomOut, 'click', handler(false))
 }

package/dist/libs/jsvectormap/src/js/defaults/options.js

@@ -14,6 +14,7 @@ export default {
 
   // Line options
   lineStyle: {
+    curvature: 0,
     stroke: '#808080',
     strokeWidth: 1,
     strokeLinecap: 'round',

package/dist/libs/jsvectormap/src/js/eventHandler.js

@@ -1,11 +1,6 @@
 let eventRegistry = {}
 let eventUid = 1
 
-/**
- * ------------------------------------------------------------------------
- * Event Handler
- * ------------------------------------------------------------------------
- */
 const EventHandler = {
   on(element, event, handler, options = {}) {
     const uid = `jvm:${event}::${eventUid++}`

package/dist/libs/jsvectormap/src/js/index.js

@@ -7,11 +7,6 @@ import Map from './map'
 
 import '../scss/jsvectormap.scss'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class jsVectorMap {
   constructor(options = {}) {
     if (!options.selector) {

package/dist/libs/jsvectormap/src/js/legend.js

@@ -1,10 +1,5 @@
 import { createElement, isImageUrl } from './util'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class Legend {
   constructor(options = {}) {
     this._options = options
@@ -27,7 +22,6 @@ class Legend {
 
   render() {
     let ticks = this._series.scale.getTicks()
-    let inner = createElement('div', 'jvm-legend-inner')
 
     this._body.innderHTML = ''
 
@@ -36,8 +30,6 @@ class Legend {
       this._body.appendChild(legendTitle)
     }
 
-    this._body.appendChild(inner)
-
     for (let i = 0; i < ticks.length; i++) {
       let tick = createElement('div', 'jvm-legend-tick',)
       let sample = createElement('div', 'jvm-legend-tick-sample')
@@ -69,7 +61,7 @@ class Legend {
       const tickText = createElement('div', 'jvm-legend-tick-text', label)
 
       tick.appendChild(tickText)
-      inner.appendChild(tick)
+      this._body.appendChild(tick)
     }
   }
 }

package/dist/libs/jsvectormap/src/js/map.js

@@ -13,11 +13,15 @@ import EventHandler from './eventHandler'
 import Tooltip from './components/tooltip'
 import DataVisualization from './dataVisualization'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
+const JVM_PREFIX = 'jvm-'
+const CONTAINER_CLASS = `${JVM_PREFIX}container`
+const MARKERS_GROUP_ID = `${JVM_PREFIX}markers-group`
+const MARKERS_LABELS_GROUP_ID = `${JVM_PREFIX}markers-labels-group`
+const LINES_GROUP_ID = `${JVM_PREFIX}lines-group`
+const SERIES_CONTAINER_CLASS = `${JVM_PREFIX}series-container`
+const SERIES_CONTAINER_H_CLASS = `${SERIES_CONTAINER_CLASS} ${JVM_PREFIX}series-h`
+const SERIES_CONTAINER_V_CLASS = `${SERIES_CONTAINER_CLASS} ${JVM_PREFIX}series-v`
+
 class Map {
   static maps = {}
   static defaults = Defaults
@@ -61,7 +65,7 @@ class Map {
     const options = this.params
 
     this.container = getElement(options.selector)
-    this.container.classList.add('jvm-container')
+    this.container.classList.add(CONTAINER_CLASS)
 
     // The map canvas element
     this.canvas = new SVGCanvasElement(this.container)
@@ -75,12 +79,23 @@ class Map {
     // Update size
     this.updateSize()
 
-    // Create lines
-    this._createLines(options.lines || {}, options.markers || {})
+    // Lines group must be created before markers
+    // Otherwise the lines will be drawn on top of the markers.
+    if (options.lines) {
+      this._linesGroup = this.canvas.createGroup(LINES_GROUP_ID)
+    }
+
+    if (options.markers) {
+      this._markersGroup = this.canvas.createGroup(MARKERS_GROUP_ID)
+      this._markerLabelsGroup = this.canvas.createGroup(MARKERS_LABELS_GROUP_ID)
+    }
 
     // Create markers
     this._createMarkers(options.markers)
 
+    // Create lines
+    this._createLines(options.lines || {})
+
     // Position labels
     this._repositionLabels()
 
@@ -132,11 +147,11 @@ class Map {
     // Create series if any
     if (options.series) {
       this.container.appendChild(this.legendHorizontal = createElement(
-        'div', 'jvm-series-container jvm-series-h'
+        'div', SERIES_CONTAINER_H_CLASS
       ))
 
       this.container.appendChild(this.legendVertical = createElement(
-        'div', 'jvm-series-container jvm-series-v'
+        'div', SERIES_CONTAINER_V_CLASS
       ))
 
       this._createSeries()
@@ -152,7 +167,8 @@ class Map {
     this.container.style.backgroundColor = color
   }
 
-  // Region methods
+  // Regions
+
   getSelectedRegions() {
     return this._getSelected('regions')
   }
@@ -169,7 +185,8 @@ class Map {
     this._setSelected('regions', this._normalizeRegions(regions))
   }
 
-  // Markers methods
+  // Markers
+
   getSelectedMarkers() {
     return this._getSelected('_markers')
   }
@@ -178,6 +195,10 @@ class Map {
     this._clearSelected('_markers')
   }
 
+  setSelectedMarkers(markers) {
+    this._setSelected('_markers', markers)
+  }
+
   addMarkers(config) {
     config = Array.isArray(config) ? config : [config]
     this._createMarkers(config, true)
@@ -196,6 +217,8 @@ class Map {
     })
   }
 
+  // Lines
+
   addLine(from, to, style = {}) {
     console.warn('`addLine` method is deprecated, please use `addLines` instead.')
     this._createLines([{ from, to, style }], this._markers, true)
@@ -210,7 +233,7 @@ class Map {
 
     this._createLines(config.filter(line => {
       return !(uids.indexOf(getLineUid(line.from, line.to)) > -1)
-    }), this._markers, true)
+    }), true)
   }
 
   removeLines(lines) {

package/dist/libs/jsvectormap/src/js/scales/ordinalScale.js

@@ -1,8 +1,3 @@
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class OrdinalScale {
   constructor(scale) {
     this._scale = scale

package/dist/libs/jsvectormap/src/js/series.js

@@ -2,11 +2,6 @@ import { merge } from './util/index'
 import Legend from './legend'
 import OrdinalScale from './scales/ordinalScale'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class Series {
   constructor(config = {}, elements, map) {
     // Private

package/dist/libs/jsvectormap/src/js/svg/baseElement.js

@@ -3,11 +3,6 @@ import {
   removeElement
 } from '../util/index'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class SVGElement {
   constructor(name, config) {
     this.node = this._createElement(name)

package/dist/libs/jsvectormap/src/js/svg/canvasElement.js

@@ -3,11 +3,6 @@ import SVGShapeElement from './shapeElement'
 import SVGTextElement from './textElement'
 import SVGImageElement from './imageElement'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class SVGCanvasElement extends SVGElement {
   constructor(container) {
     super('svg') // Create svg element for holding the whole map
@@ -40,12 +35,12 @@ class SVGCanvasElement extends SVGElement {
   }
 
   // Create `path` element
-  createPath(config, style) {
+  createPath(config, style, group) {
     const path = new SVGShapeElement('path', config, style)
 
     path.node.setAttribute('fill-rule', 'evenodd')
 
-    return this._add(path)
+    return this._add(path, group)
   }
 
   // Create `circle` element

package/dist/libs/jsvectormap/src/js/svg/imageElement.js

@@ -1,10 +1,5 @@
 import SVGShapeElement from './shapeElement'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class SVGImageElement extends SVGShapeElement {
   constructor(config, style) {
     super('image', config, style)

package/dist/libs/jsvectormap/src/js/svg/shapeElement.js

@@ -1,11 +1,6 @@
 import { merge } from '../util/index'
 import SVGElement from './baseElement'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class SVGShapeElement extends SVGElement {
   constructor(name, config, style = {}) {
     super(name, config)

package/dist/libs/jsvectormap/src/js/svg/textElement.js

@@ -1,10 +1,5 @@
 import SVGShapeElement from './shapeElement'
 
-/**
- * ------------------------------------------------------------------------
- * Class Definition
- * ------------------------------------------------------------------------
- */
 class SVGTextElement extends SVGShapeElement {
   constructor(config, style) {
     super('text', config, style)

package/dist/libs/jsvectormap/src/scss/_variables.scss

@@ -0,0 +1,37 @@
+$border-color: #E5E6E7 !default;
+$box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05) !default;
+
+// Tooltip
+$tooltip-font-size: 0.9rem !default;
+$tooltip-bg-color: #337FFA !default;
+$tooltip-color: #FFF !default;
+$tooltip-padding: 3px 5px !default;
+$tooltip-shadow: 1px 2px 12px rgba(0, 0, 0, .2) !default;
+$tooltip-radius: 3px !default;
+
+// Zoom buttons
+$zoom-btn-bg-color: #292929 !default;
+$zoom-btn-color: #FFF !default;
+$zoom-btn-size: 15px !default;
+$zoom-btn-radius: 3px !default;
+
+// Series
+$series-container-right: 15px !default;
+
+// Legends
+$legend-bg-color: #FFF !default;
+$legend-radius: .15rem !default;
+$legend-margin-left: .75rem !default;
+$legend-padding: .6rem !default;
+
+// Legend title
+$legend-title-padding-bottom: .5rem !default;
+$legend-title-margin-bottom: .575rem !default;
+
+// Legend ticks
+$legend-tick-margin-top: .575rem !default;
+$legend-tick-sample-radius: 0 !default;
+$legend-tick-sample-height: 12px !default;
+$legend-tick-sample-width: 30px !default;
+$legend-tick-text-font-size: 12px !default;
+$legend-tick-text-margin-top: 3px !default;