feat: add multi line support

Author: fredj

demos/simple/demo.js

@@ -60,7 +60,8 @@ function main() {
     style: styleRules,
     deleteCondition: deleteCondition,
     hitTolerance: 10,
-    densifier
+    densifier,
+    switchPartOnDrag: true,
   });
 
   window.trackManager = trackManager;
@@ -133,6 +134,18 @@ function main() {
       trackManager.addPOI(event.coordinate);
     });
   });
+
+  document.querySelector('#createNewPart').addEventListener('click', () => {
+    trackManager.createNewPart();
+  });
+  document.querySelector('#changeActivePart').addEventListener('click', () => {
+    const nextPart = (trackManager.activePart() + 1) % trackManager.partsCount();
+    trackManager.workOnPart(nextPart);
+  });
+  document.querySelector('#deleteActivePart').addEventListener('click', () => {
+    const activePart = trackManager.activePart();
+    trackManager.deletePart(activePart);
+  });
 }
 
 main();

demos/simple/simple.html

@@ -53,7 +53,13 @@
       <a href="#" id="reverse_no_routing">reverse without re-routing</a>
       <br />
       <a href="#" id="addPoi">Add poi</a>
-  </div>
+      <br />
+      <a href="#" id="createNewPart">Add a new line string</a>
+      <br />
+      <a href="#" id="changeActivePart">Change active line string</a>
+      <br />
+      <a href="#" id="deleteActivePart">Delete active line string</a>
+    </div>
     <div id="map"></div>
   </main>
 </body>

demos/simple/style.js

@@ -11,7 +11,9 @@ export const sketchControlPoint = {
 
 export const trackLine = {
   "stroke-width": 6,
-  "stroke-color": "purple",
+  "stroke-color": ["case", ["==", ["get", "active"], false], "#00883c80", "#00883cff"],
+  "text-value": ["concat", "", ["get", "part"]],
+  "text-fill-color": "#fff",
 };
 
 export const trackLineModifying = {
@@ -27,25 +29,25 @@ export const poiPoint = {
   "text-font": "bold 11px Inter",
   "text-fill-color": "#000",
   // use 'concat' to convert number to string
-  "text-value": ["concat", ["get", "index"], ""],
+  "text-value": ["concat", "", ["get", "part"]],
 };
 
 export const numberedControlPoint = {
   ...controlPoint,
   "circle-fill-color": "#ffffffdd",
   "text-color": "blue",
   // use 'concat' to convert number to string
-  "text-value": ["concat", ["get", "index"], ""],
+  "text-value": ["concat", "", ["get", "part"]],
 };
 
 export const snappedTrue = {
   ...controlPoint,
-  "circle-fill-color": "green",
+  "circle-fill-color": ["case", ["==", ["get", "active"], false], "#0071ec80", "#0071ecff"],
 };
 
 export const snappedFalse = {
   ...controlPoint,
-  "circle-fill-color": "red",
+  "circle-fill-color": ["case", ["==", ["get", "active"], false], "#b45f0480", "#b45f04ff"],
 };
 
 export const sketchLabel = {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@geoblocks/edittrack",
-  "version": "1.3.32",
+  "version": "2.0.0-beta.30",
   "description": "Geoblocks edittrack",
   "scripts": {
     "eslint": "eslint src test demos",

package.json

@@ -31,10 +31,25 @@ interface DeletedControlPoint {
 }
 
 export default class TrackData {
+  private part_: number;
   private segments: Feature<LineString>[] = [];
   private controlPoints: Feature<Point>[] = [];
   private pois: Feature<Point>[] = [];
 
+  constructor(part: number) {
+    this.part_ = part;
+  }
+
+  get part() {
+    return this.part_;
+  }
+
+  set part(n: number) {
+    // make sure part is a positive integer
+    console.assert(Number.isInteger(n) && n >= 0);
+    this.part_ = n;
+  }
+
   parseFeatures(features: Feature<Point|LineString>[]): ParsedFeatures {
     const parsed: ParsedFeatures = {
       segments: [],