feat: ability to remove a line or multiple lines

src/js/core/createLines.js

@@ -1,25 +1,25 @@
-import { merge, getLineUid } from '../util/index'
+import { merge, getLineUid } from '../util'
 import Line from '../components/line'
 
 export default function createLines(lines, markers, isRecentlyCreated = false) {
   let line, 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.
+  // 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 lineConfig = lines[index]
+    const config = lines[index]
 
     for (let mindex in markers) {
       const markerConfig = isRecentlyCreated ? markers[mindex].config : markers[mindex]
 
-      if (markerConfig.name === lineConfig.from) {
+      if (markerConfig.name === config.from) {
         point1 = this.getMarkerPosition(markerConfig)
       }
 
-      if (markerConfig.name === lineConfig.to) {
+      if (markerConfig.name === config.to) {
         point2 = this.getMarkerPosition(markerConfig)
       }
     }
@@ -28,29 +28,18 @@ export default function createLines(lines, markers, isRecentlyCreated = false) {
       line = new Line({
         index: index,
         map: this,
-        // Merge the lineStyle object with the line config style
-        style: merge({ initial: this.params.lineStyle }, {
-          initial: lineConfig.style || {}
-        }, true),
+        // Merge the default `lineStyle` object with the custom `line` config style
+        style: merge({ initial: this.params.lineStyle }, { initial: config.style || {} }, true),
         x1: point1.x,
         y1: point1.y,
         x2: point2.x,
         y2: point2.y,
         group: this.linesGroup,
       })
 
-      // Prevent line duplication elements in the DOM
-      if (isRecentlyCreated) {
-        Object.keys(this.lines).forEach(key => {
-          if (key === getLineUid(lines[0].from, lines[0].to)) {
-            this.lines[key].element.remove()
-          }
-        })
-      }
-
       // Register lines with unique keys
-      this.lines[getLineUid(lineConfig.from, lineConfig.to)] = {
-        element: line, config: lineConfig
+      this.lines[getLineUid(config.from, config.to)] = {
+        element: line, config
       }
     }
   }

src/js/map.js

@@ -244,11 +244,23 @@ class Map {
     this.createLines([{ from, to, style }], this.markers, true)
   }
 
+  addLines(config) {
+    const uids = this._getLinesAsUids()
+
+    if (!Array.isArray(config)) {
+      config = [config]
+    }
+
+    this._createLines(config.filter(line => {
+      return !(uids.indexOf(getLineUid(line.from, line.to)) > -1)
+    }), this.markers, true)
+  }
+
   removeLines(lines) {
     if (Array.isArray(lines)) {
       lines = lines.map(line => getLineUid(line.from, line.to))
     } else {
-      lines = Object.keys(this.lines)
+      lines = this._getLinesAsUids()
     }
 
     lines.forEach(uid => {
@@ -257,6 +269,10 @@ class Map {
     })
   }
 
+  _getLinesAsUids() {
+    return Object.keys(this.lines)
+  }
+
   removeLine(from, to) {
     const uid = getLineUid(from, to)