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 = {