wip: add multi line support

Author: fredj

demos/simple/demo.js

@@ -124,6 +124,10 @@ function main() {
     }
     trackManager.addPOI(poiOverlay, onAddListener)
   });
+
+  document.querySelector('#createNewPart').addEventListener('click', () => {
+    trackManager.createNewPart();
+  });
 }
 
 main();

demos/simple/simple.html

@@ -56,6 +56,8 @@
         <button id="poiCancel">Cancel</button>
         <button id="poiSave">Save</button>
       </div>
+      <br />
+      <a href="#" id="createNewPart">Add a new line string</a>
   </div>
     <div id="map"></div>
   </main>

src/interaction/TrackInteraction.ts

@@ -8,10 +8,10 @@ import {FALSE} from 'ol/functions';
 import type {Feature, Map, MapBrowserEvent} from 'ol';
 import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
-import TrackData from './TrackData';
 import type {StyleLike} from 'ol/style/Style';
 import type {FlatStyleLike} from 'ol/style/flat';
 import type {Pixel} from 'ol/pixel';
+import type TrackData from './TrackData';
 import type {FeatureType} from './TrackData';
 import {Point} from 'ol/geom';
 
@@ -168,12 +168,9 @@ export default class TrackInteraction extends Interaction {
   }
 
   setActive(active: boolean) {
-    // Hack: the Interaction constructor calls setActive...
-    if (this.drawTrack_) {
-      this.drawTrack_.setActive(active);
-      this.modifyTrack_.setActive(active);
-      this.deletePoint_.setActive(active);
-    }
+    this.drawTrack_?.setActive(active);
+    this.modifyTrack_?.setActive(active);
+    this.deletePoint_?.setActive(active);
     super.setActive(active);
   }
 }

src/interaction/TrackInteractionModify.ts

@@ -66,9 +66,6 @@ export default class Modify extends PointerInteraction {
   private overlay_: VectorLayer<VectorSource<Feature>>;
   private lastPixel_ = [0, 0];
   private trackData_: Options['trackData'];
-  /**
-   * @type {Feature<Point>}
-   */
   private pointAtCursorFeature_ = new Feature({
     geometry: new Point([0, 0]),
     type: 'sketch',

src/interaction/TrackManager.ts

@@ -56,14 +56,8 @@ export interface Options {
 export default class TrackManager<POIMeta> {
 
   private map_: Map;
-  get map(): Map {
-    return this.map;
-  }
   private source_: VectorSource;
   private trackLayer_: VectorLayer<VectorSource>;
-  get trackLayer(): VectorLayer<VectorSource> {
-    return this.trackLayer_;
-  }
   private shadowTrackLayer_: VectorLayer<VectorSource>;
   private hitTolerance_: number;
   public snapping = true;
@@ -73,18 +67,14 @@ export default class TrackManager<POIMeta> {
   private trackChangeEventListeners_: Function[] = [];
   // eslint-disable-next-line @typescript-eslint/ban-types
   private trackHoverEventListeners_: Function[] = [];
-  private trackData_ = new TrackData();
+  // the data for the current line
+  private trackData_: TrackData;
   private router_: Router;
-  get router(): Router {
-    return this.router_;
-  }
   private profiler_: Profiler;
-  get profiler(): Profiler {
-    return this.profiler_;
-  }
   private updater_: TrackUpdater;
   private interaction_: TrackInteraction;
   private historyManager_ = new HistoryManager<Feature<Point|LineString>[]>();
+  parts: TrackData[] = [];
 
   constructor(options: Options) {
     this.map_ = options.map;
@@ -96,6 +86,9 @@ export default class TrackManager<POIMeta> {
 
     this.router_ = options.router;
     this.profiler_ = options.profiler;
+
+    this.createNewPart();
+
     this.updater_ = new TrackUpdater({
       profiler: this.profiler_,
       router: this.router_,
@@ -113,16 +106,7 @@ export default class TrackManager<POIMeta> {
       hitTolerance: this.hitTolerance_,
     });
 
-    // Hack to test profile synchro
-    // this.closestPointGeom_ = new Point([0, 0]);
-    // this.interaction_.modifyTrack_.overlay_.getSource().addFeature(new Feature({
-    //   geometry: this.closestPointGeom_,
-    //   type: 'controlPoint',
-    //   subtype: 'first',
-    // }));
-
-
-
+    // add a new control point
     // @ts-ignore too complicate to declare proper events
     this.interaction_.on('drawend',
     async (event: DrawEvent) => {
@@ -131,6 +115,7 @@ export default class TrackManager<POIMeta> {
       if (!this.snapping) {
         feature.set('snapped', false);
       }
+      // add control point to the current trackData
       const {pointFrom, pointTo, segment} = this.trackData_.pushControlPoint(feature);
       if (segment) {
         this.source_.addFeature(segment);
@@ -168,6 +153,7 @@ export default class TrackManager<POIMeta> {
       }
     });
 
+    // modify (move) a poi, control point or segment
     this.interaction_.on(
       // @ts-ignore too complicate to declare proper events
       'modifyend',
@@ -209,6 +195,7 @@ export default class TrackManager<POIMeta> {
         }
     });
 
+    // delete a poi or control point
     this.interaction_.on(
       // @ts-ignore too complicate to declare proper events
       'select',
@@ -262,6 +249,22 @@ export default class TrackManager<POIMeta> {
     });
   }
 
+  get map(): Map {
+    return this.map;
+  }
+
+  get trackLayer(): VectorLayer<VectorSource> {
+    return this.trackLayer_;
+  }
+
+  get router(): Router {
+    return this.router_;
+  }
+
+  get profiler(): Profiler {
+    return this.profiler_;
+  }
+
   private pushNewStateToHistoryManager_() {
     const segments = this.getSegments();
     const controlPoints = this.getControlPoints();
@@ -568,4 +571,11 @@ export default class TrackManager<POIMeta> {
     this.source_.changed();
     this.shadowTrackLayer_.getSource().changed();
   }
-}
+
+  // Add a new line string and set it add the "current" line string
+  createNewPart() {
+    this.trackData_ = new TrackData();
+
+    this.parts.push(this.trackData_);
+  }
+}