feat(lines): add curved lines with curvature option (#165)

* feat(lines): add curved lines with curvature option

* chore: set lines default options

Author: themustafaomar

packages/jsvectormap/src/js/components/line.js

@@ -1,17 +1,55 @@
 import BaseComponent from './base'
 
+const LINE_CLASS = 'jvm-line'
+
 class Line extends BaseComponent {
-  constructor({ index, map, style, x1, y1, x2, y2, group, config }) {
+  constructor(options, style) {
     super()
-
-    this.config = config
-    this.shape = map.canvas.createLine({ x1, y1, x2, y2, dataIndex: index }, style, group)
-    this.shape.addClass('jvm-line')
+    this._options = options
+    this._style = style
+    this._draw()
   }
 
   setStyle(property, value) {
     this.shape.setStyle(property, value)
   }
+
+  getConfig() {
+    return this._options.config
+  }
+
+  _draw() {
+    const { index, group, map, animate } = this._options
+    const config = {
+      d: this._getDAttribute(),
+      fill: 'none',
+      dataIndex: index,
+    }
+
+    this.shape = map.canvas.createPath(config, this._style, group)
+    this.shape.addClass(LINE_CLASS)
+
+    if (animate) {
+      this.shape.setStyle({ animation: true })
+    }
+  }
+
+  _getDAttribute() {
+    const { x1, y1, x2, y2 } = this._options
+    return `M${x1},${y1}${this._getQCommand(x1, y1, x2, y2)}${x2},${y2}`
+  }
+
+  _getQCommand(x1, y1, x2, y2) {
+    if (!this._options.curvature) {
+      return ' '
+    }
+
+    const curvature = this._options.curvature || 0.6
+    const curveX = (x1 + x2) / 2 + curvature * (y2 - y1)
+    const curveY = (y1 + y2) / 2 - curvature * (x2 - x1)
+
+    return ` Q${curveX},${curveY} `
+  }
 }
 
 export default Line

packages/jsvectormap/src/js/core/createLines.js

@@ -1,19 +1,26 @@
 import { merge, getLineUid } from '../util'
 import Line from '../components/line'
 
-export default function createLines(lines, markers, isRecentlyCreated = false) {
+const LINES_GROUP_CLASS = 'jvm-lines-group'
+
+export default function createLines(lines, isRecentlyCreated = false) {
+  // Create group for holding lines we're checking if `linesGroup`
+  // exists or not becuase we may add lines after the map has
+  // loaded so we will append the futured lines to this group as well.
+  this.linesGroup = this.linesGroup || this.canvas.createGroup(LINES_GROUP_CLASS)
+
+  const markers = this.params.markers || {}
+  const { style, elements: _, ...rest } = this.params.lines
+
   let point1 = false, point2 = false
 
-  // Create group for holding lines
-  // we're checking if `linesGroup` exists or not becuase we may add lines
-  // after the map has loaded so we will append the futured lines to this group as well.
-  this.linesGroup = this.linesGroup || this.canvas.createGroup('jvm-lines-group')
-  
   for (let index in lines) {
     const config = lines[index]
 
     for (let mindex in markers) {
-      const markerConfig = isRecentlyCreated ? markers[mindex].config : markers[mindex]
+      const markerConfig = isRecentlyCreated
+        ? markers[mindex].config
+        : markers[mindex]
 
       if (markerConfig.name === config.from) {
         point1 = this.getMarkerPosition(markerConfig)
@@ -25,19 +32,23 @@ 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({
-        index: index,
+      const options = {
+        index,
         map: this,
-        // Merge the default `lineStyle` object with the custom `line` config style
-        style: merge({ initial: this.params.lineStyle }, { initial: config.style || {} }, true),
+        group: this.linesGroup,
+        config,
         x1: point1.x,
         y1: point1.y,
         x2: point2.x,
         y2: point2.y,
-        group: this.linesGroup,
-        config
-      })
+        ...rest,
+      }
+
+      // Register lines with unique keys
+      this._lines[getLineUid(config.from, config.to)] = new Line(
+        options,
+        merge({ initial: style }, { initial: config.style || {} }, true)
+      )
     }
   }
 }

packages/jsvectormap/src/js/core/repositionLines.js

@@ -1,26 +1,27 @@
 export default function repositionLines() {
-  let point1 = false, point2 = false
+  const curvature = this.params.lines.curvature || 0.5
 
-  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 midX = (x1 + x2) / 2
+      const midY = (y1 + y2) / 2
+      const curveX = midX + curvature * (y2 - y1)
+      const curveY = midY - curvature * (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}`,
       })
     }
-  }
+  })
 }

packages/jsvectormap/src/js/defaults/options.js

@@ -13,10 +13,12 @@ export default {
   bindTouchEvents: true,
 
   // Line options
-  lineStyle: {
-    stroke: '#808080',
-    strokeWidth: 1,
-    strokeLinecap: 'round',
+  lines: {
+    style: {
+      stroke: '#808080',
+      strokeWidth: 1,
+      strokeLinecap: 'round',
+    }
   },
 
   // Marker options

packages/jsvectormap/src/js/map.js

@@ -71,7 +71,7 @@ class Map {
     this.updateSize()
 
     // Create lines
-    this._createLines(options.lines || {}, options.markers || {})
+    this._createLines(options.lines.elements || {})
 
     // Create markers
     this._createMarkers(options.markers)

packages/jsvectormap/src/js/svg/canvasElement.js

@@ -35,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