From bdf137f5b74795d4bae3bfd4116f675e37361c09 Mon Sep 17 00:00:00 2001
From: ponlawat-w <ponlawat_w@outlook.co.th>
Date: Tue, 28 Nov 2023 17:04:17 +0700
Subject: [PATCH] Added events dispatching

---
 README.md                        | 17 ++++++---
 examples/index.html              | 23 ++++++++++--
 package.json                     |  2 +-
 src/event.ts                     | 55 ++++++++++++++++++++++++++++
 src/index.ts                     |  1 +
 src/interaction.ts               | 62 +++++++++++++++++++++++++++++---
 tests/common.ts                  | 14 ++++----
 tests/interaction.create.test.ts | 47 +++++++++++++++++++++++-
 tests/interaction.edit.test.ts   | 48 ++++++++++++++++++++++++-
 webpack.config.js                |  1 +
 10 files changed, 247 insertions(+), 23 deletions(-)
 create mode 100644 src/event.ts

diff --git a/README.md b/README.md
index 1615534..c4f4bc4 100644
--- a/README.md
+++ b/README.md
@@ -70,9 +70,20 @@ map.addInteraction(interaction);
 
 If `waySource` is not provided, `OSMOverpass` will be used as source for snapping, so the constructor options for `OSMWaySnap` will be extended to include [thoses options from `OSMOverpassSourceBase`](https://github.com/ponlawat-w/ol-osmoverpass#constructor-options).
 
+## Events
+
+All event objects dispatched have property `feature` being the active feature of the interaction.
+
+Event types:
+- `waysnapstart`: when the interaction starts on a feature whether creation or edition.
+- `waysnapstartcreate`: when the interaction has created a new feature.
+- `waysnapstartedit`: when the interaction has started edition an existing feature.
+- `waysnapupdate`: when the interaction has updated the active feature.
+- `waysnapend`: when interaction has finished.
+
 ## Examples
 
-[Full page example using the library from CDN](./examples/index.html)
+[Examples in HTML using CDN](./examples/index.html)
 
 ### Using as module
 
@@ -110,8 +121,4 @@ const interaction = new OSMWaySnap({
 map.addInteraction(interaction);
 ```
 
-### Using as CDN
-
-[HTML Example](./examples/index.html)
-
 ---
diff --git a/examples/index.html b/examples/index.html
index d9d4f2e..08da00e 100644
--- a/examples/index.html
+++ b/examples/index.html
@@ -37,9 +37,11 @@
       </div>
     </div>
 
+    <div>
+      <span id="status"></span>
+      |
+      <span id="event"></span>
     </div>
-
-    <div id="status"></div>
     <script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>
     <script src="https://www.unpkg.com/ol-osmwaysnap/dist/bundle/index.js"></script>
     <script lang="js">
@@ -76,12 +78,27 @@
         document.getElementById('status').innerHTML = 'Loading from OSM…';
       });
       interaction.getWaySource().on('featuresloadend', () => {
-        document.getElementById('status').innerHTML = '';
+        document.getElementById('status').innerHTML = 'Idle';
       });
       interaction.getWaySource().on('featuresloaderror', () => {
         document.getElementById('status').innerHTML = 'ERROR';
       });
 
+      interaction.on('waysnapstartcreate', () => {
+        document.getElementById('event').innerHTML = 'A new feature has been created.';
+      });
+      interaction.on('waysnapstartedit', () => {
+        document.getElementById('event').innerHTML = 'A feature edition has started.';
+      });
+      interaction.on('waysnapupdate', e => {
+        const n = e.feature.getGeometry().getCoordinates().length;
+        document.getElementById('event').innerHTML = `The feature has been updated with vertices: ${n}`;
+      });
+      interaction.on('waysnapend', e => {
+        const n = e.feature.getGeometry().getCoordinates().length;
+        document.getElementById('event').innerHTML = `Feature edition ended with total vertices: ${n}`;
+      });
+
       const wkt = new ol.format.WKT();
       const geojson = new ol.format.GeoJSON();
 
diff --git a/package.json b/package.json
index 6310ff7..1eddb21 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "ol-osmwaysnap",
   "type": "module",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "OpenLayers Interaction Extension for Snapping Ways from OSM using Overpass API",
   "keywords": [
     "osm",
diff --git a/src/event.ts b/src/event.ts
new file mode 100644
index 0000000..e803d63
--- /dev/null
+++ b/src/event.ts
@@ -0,0 +1,55 @@
+import Event from 'ol/events/Event';
+import type { Feature } from 'ol';
+import type { ObjectEvent } from 'ol/Object';
+import type { Types as ObjectEventTypes } from 'ol/ObjectEventType';
+import type { CombinedOnSignature, EventTypes as ObservableEventTypes, OnSignature } from 'ol/Observable';
+import type { LineString } from 'ol/geom';
+
+/**
+ * Event type for OSMWaySnapInteraction
+ */
+export const OSMWaySnapEventType = {
+  /** Event when OSMWaySnap interaction starts on a feature whether creation or edition. */
+  WAYSNAPSTART: 'waysnapstart',
+
+  /** Event when OSMWaySnap interaction has created a new feature. */
+  WAYSNAPSTARTCREATE: 'waysnapstartcreate',
+
+  /** Event when OSMWaySnap has started edition an existing feature. */
+  WAYSNAPSTARTEDIT: 'waysnapstartedit',
+
+  /** Event when OSMWaySnap has updated the active feature. */
+  WAYSNAPUPDATE: 'waysnapupdate',
+
+  /** Event when OSMWaySnap has finished. */
+  WAYSNAPEND: 'waysnapend'
+} as const;
+
+type OSMWaySnapEventType = typeof OSMWaySnapEventType[keyof typeof OSMWaySnapEventType];
+
+/**
+ * Event for OSMWaySnap interaction
+ */
+export class OSMWaySnapEvent extends Event {
+  /** Active feature for the event */
+  private _feature: Feature<LineString>;
+
+  /** Active feature for the event */
+  public get feature(): Feature<LineString> { return this._feature };
+
+  /**
+   * Constructor
+   * @param type Type of event
+   * @param feature Active feature for the event
+   */
+  constructor(type: OSMWaySnapEventType, feature: Feature<LineString>) {
+    super(type);
+    this._feature = feature;
+  }
+}
+
+/** Type signature for OSMWaySnap interaction event dispatcher */
+export type OSMWaySnapOnSignature<Return> = OnSignature<ObservableEventTypes, Event, Return>
+  & OnSignature<ObjectEventTypes|'change:active', ObjectEvent, Return>
+  & OnSignature<OSMWaySnapEventType, OSMWaySnapEvent, Return>
+  & CombinedOnSignature<ObservableEventTypes|ObjectEventTypes|'change:active'|OSMWaySnapEventType, Return>;
diff --git a/src/index.ts b/src/index.ts
index 9291f2f..8760e1f 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,3 @@
+export { OSMWaySnapEventType, OSMWaySnapEvent, type OSMWaySnapOnSignature } from './event';
 export { default as OSMWaySnap, type OSMWaySnapOptions } from './interaction';
 export { default as LineStringUtils } from './line-string-utils';
diff --git a/src/interaction.ts b/src/interaction.ts
index 97382a4..191bc35 100644
--- a/src/interaction.ts
+++ b/src/interaction.ts
@@ -8,10 +8,13 @@ import { Vector as VectorSource } from 'ol/source';
 import { Circle, Fill, Stroke } from 'ol/style';
 import Style, { createEditingStyle } from 'ol/style/Style';
 import { OSMOverpassWaySource, type OSMOverpassSourceOptions } from 'ol-osmoverpass';
+import { OSMWaySnapEvent, OSMWaySnapEventType } from './event';
 import LineStringUtils from './line-string-utils';
+import type { MapBrowserEvent } from 'ol';
+import type { EventsKey } from 'ol/events';
 import type { Coordinate } from 'ol/coordinate';
 import type { StyleLike } from 'ol/style/Style';
-import type { MapBrowserEvent } from 'ol';
+import type { OSMWaySnapOnSignature } from './event';
 
 /** Options for OSMWaySnap interaction */
 type SnapOptions = {
@@ -47,6 +50,7 @@ type SnapOptionsOSMOverpassWaySource = Omit<SnapOptions, 'waySource'> & {
   waySource?: undefined
 } & Partial<OSMOverpassSourceOptions>;
 
+/** Options for OSMWaySnap interaction */
 export type OSMWaySnapOptions = SnapOptions | SnapOptionsOSMOverpassWaySource;
 
 /**
@@ -128,6 +132,10 @@ export default class OSMWaySnap extends PointerInteraction {
     this.addChangeListener('active', this.activeChanged.bind(this));
   }
 
+  declare on: OSMWaySnapOnSignature<EventsKey>;
+  declare once: OSMWaySnapOnSignature<EventsKey>;
+  declare un: OSMWaySnapOnSignature<EventsKey>;
+
   /**
    * Remove the interaction from its current map and attach it to the new map.
    * Subclasses may set up event handlers to get notified about changes to
@@ -172,11 +180,14 @@ export default class OSMWaySnap extends PointerInteraction {
     return this.activeFeature;
   }
 
-  /** Called when the editing is finished, clear all the sketching and candidates. */
+  /**
+   * Called when the editing is finished, clear all the sketching and candidates.
+   */
   public finishEditing() {
     if (this.autoFocus && this.map && this.activeFeature && this.coordinates.length > 1) {
       this.map.getView().fit(this.activeFeature.getGeometry()!.getExtent(), { padding: Array(4).fill(this.focusPadding) });
     }
+    const feature = this.activeFeature;
     this.activeFeature = undefined;
     this.coordinates = [];
     this.removeSketchPoint();
@@ -188,6 +199,8 @@ export default class OSMWaySnap extends PointerInteraction {
     }
     this.draftOriginalLine = undefined;
     this.mergingDraftOriginalLine = false;
+    this.updateOverlayLayer();
+    this.dispatchEnd(feature);
   }
 
   /**
@@ -204,13 +217,15 @@ export default class OSMWaySnap extends PointerInteraction {
         const overlappedFeatures = this.source.getFeatures().filter(f => f.getGeometry()?.intersectsCoordinate(event.coordinate) ?? false);
         if (overlappedFeatures.length) {
           this.enterEditMode(overlappedFeatures[0], event.coordinate);
-          this.updateFeature();
+          this.updateFeature(false);
+          this.dispatchStartEdit(this.activeFeature!)
           return false;
         }
       }
       if (this.allowCreate) {
         this.coordinates = [this.sketchPoint?.getGeometry()!.getCoordinates() ?? event.coordinate];
-        this.updateFeature();
+        this.updateFeature(false);
+        this.dispatchStartCreate(this.activeFeature!);
         return false;
       }
       return super.handleEvent(event);
@@ -241,6 +256,40 @@ export default class OSMWaySnap extends PointerInteraction {
     return super.handleMoveEvent(event);
   }
 
+  /**
+   * Dispatch start and start create events
+   * @param feature Feature to dispatch event, otherwise this.activeFeature!
+   */
+  protected dispatchStartCreate(feature?: Feature<LineString>) {
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPSTART, feature ?? this.activeFeature!));
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPSTARTCREATE, feature ?? this.activeFeature!));
+  }
+
+  /**
+   * Dispatch start and start edit events
+   * @param feature Feature to dispatch event, otherwise this.activeFeature!
+   */
+  protected dispatchStartEdit(feature?: Feature<LineString>) {
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPSTART, feature ?? this.activeFeature!));
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPSTARTEDIT, feature ?? this.activeFeature!));
+  }
+
+  /**
+   * Dispatch update event
+   * @param feature Feature to dispatch event, otherwise this.activeFeature!
+   */
+  protected dispatchUpdate(feature?: Feature<LineString>) {
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPUPDATE, feature ?? this.activeFeature!));
+  }
+
+  /**
+   * Disptach end event
+   * @param feature Feature to dispatch event, otherwise this.activeFeature!
+   */
+  protected dispatchEnd(feature?: Feature<LineString>) {
+    this.dispatchEvent(new OSMWaySnapEvent(OSMWaySnapEventType.WAYSNAPEND, feature ?? this.activeFeature!));
+  }
+
   /**
    * Start editing on the selected feature
    * @param feature Feature to edit
@@ -264,8 +313,9 @@ export default class OSMWaySnap extends PointerInteraction {
 
   /**
    * Create or update active feature from editing coordinates.
+   * @param dispatch True to dipatch waysnapupdate event
    */
-  private updateFeature() {
+  private updateFeature(dispatch: boolean = true) {
     if (!this.activeFeature) {
       this.activeFeature = new Feature<LineString>(new LineString(this.coordinates));
     } else {
@@ -274,6 +324,7 @@ export default class OSMWaySnap extends PointerInteraction {
         this.source.addFeature(this.activeFeature);
       }
     }
+    dispatch && this.dispatchUpdate();
     this.calculateCandidates();
   }
 
@@ -398,6 +449,7 @@ export default class OSMWaySnap extends PointerInteraction {
    * @param coordinates Original sketch line coordinates to get extended
    */
   private extendSketchLineCoorsToDraftOriginal(coordinates: Coordinate[]) {
+    this.mergingDraftOriginalLine = false;
     const lastCoordinate = coordinates[coordinates.length - 1];
     if (!this.draftOriginalLine || !this.draftOriginalLine.getGeometry()!.intersectsCoordinate(lastCoordinate)) return;
     let lineToExtend = this.draftOriginalLine.getGeometry()!;
diff --git a/tests/common.ts b/tests/common.ts
index 48d7f57..a4cb3cc 100644
--- a/tests/common.ts
+++ b/tests/common.ts
@@ -10,13 +10,13 @@ import type { OSMWaySnap } from '../dist';
 /**
  * Drawing a linestring network that looks more or less like this:
  *
- *    │
- *  ┌─┴─┐
- *  │   │
- *  └─┬─┘
- *  ──┼──
- *    │
- *    │
+ *    │     => fLoopExtended
+ *  ┌─┴─┐   => fLoop
+ *  │   │   => fLoop
+ *  └─┬─┘   => fCenterToBeforeLoop
+ *  ──┼──   => fCenterTurnLeft / fCenterTurnRight
+ *    │     => fDownToCenter
+ *    │     => fDownToCenter
  * @returns vector source
  */
 export const getDefaultWaySource = (): VectorSource<Feature<LineString>> => {
diff --git a/tests/interaction.create.test.ts b/tests/interaction.create.test.ts
index 9a53b8d..df0b2eb 100644
--- a/tests/interaction.create.test.ts
+++ b/tests/interaction.create.test.ts
@@ -4,7 +4,7 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Projection } from 'ol/proj';
 import { getDefaultWaySource, mouseClick, mouseMove } from './common';
-import { OSMWaySnap } from '../dist';
+import { OSMWaySnap, OSMWaySnapEventType } from '../dist';
 import { Feature } from 'ol';
 import { LineString, Point } from 'ol/geom';
 
@@ -317,4 +317,49 @@ describe('Test OSMWaySnap Interaction: Line Creation', () => {
     expect(coors[1]).toEqual([25, 25]);
     expect(coors[2]).toEqual([50, 25]);
   });
+
+  it('fires events when start creating and finish creating features', () => {
+    let waySnapStart = false;
+    let waySnapStartCreate = false;
+    let waySnapStartEdit = false;
+    let waySnapUpdate = false;
+    let waySnapEnd = false;
+    let startFeature: Feature<LineString>|undefined = undefined;
+    let startCreateFeature: Feature<LineString>|undefined = undefined;
+    let startEditFeature: Feature<LineString>|undefined = undefined;
+    let updateFeature: Feature<LineString>|undefined = undefined;
+    let endFeature: Feature<LineString>|undefined = undefined;
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTART, e => { waySnapStart = true; startFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTARTCREATE, e => { waySnapStartCreate = true; startCreateFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTARTEDIT, e => { waySnapStartEdit = true; startEditFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPUPDATE, e => { waySnapUpdate = true; updateFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPEND, e => { waySnapEnd = true; endFeature = e.feature; });
+
+    mouseMove(map, interaction, [0, 0]);
+    mouseClick(map, interaction, [0, 0]);
+
+    expect(waySnapStart).toBeTruthy();
+    expect(waySnapStartCreate).toBeTruthy();
+    expect(waySnapStartEdit).toBeFalsy();
+    expect(waySnapUpdate).toBeFalsy();
+    expect(waySnapEnd).toBeFalsy();
+    expect(startFeature).toBeDefined();
+    expect(startCreateFeature).toBeDefined();
+    expect(startEditFeature).toBeUndefined();
+    expect(updateFeature).toBeUndefined();
+    expect(endFeature).toBeUndefined();
+    expect(startCreateFeature).toBe(startFeature);
+    
+    mouseMove(map, interaction, [50, 25]);
+    mouseClick(map, interaction, [50, 25]);
+
+    expect(waySnapUpdate).toBeTruthy();
+    expect(waySnapEnd).toBeFalsy();
+    expect(updateFeature).toBe(startCreateFeature);
+
+    mouseClick(map, interaction, [50, 25]);
+
+    expect(waySnapEnd).toBeTruthy();
+    expect(endFeature).toBe(startCreateFeature);
+  });
 });
diff --git a/tests/interaction.edit.test.ts b/tests/interaction.edit.test.ts
index d2ce03a..5afbc52 100644
--- a/tests/interaction.edit.test.ts
+++ b/tests/interaction.edit.test.ts
@@ -4,7 +4,7 @@ import VectorLayer from 'ol/layer/Vector';
 import VectorSource from 'ol/source/Vector';
 import { Projection } from 'ol/proj';
 import { getDefaultWaySource, mouseClick, mouseMove } from './common';
-import { OSMWaySnap } from '../dist';
+import { OSMWaySnap, OSMWaySnapEventType } from '../dist';
 import { Feature } from 'ol';
 import { LineString } from 'ol/geom';
 
@@ -132,4 +132,50 @@ describe('Test OSMWaySnap Interaction: Line Edition', () => {
     expect(coors[5]).toEqual([0, 20]);
     expect(coors[6]).toEqual([0, 30]);
   });
+
+  it('fires events when start editing and finish editing features', () => {
+    let waySnapStart = false;
+    let waySnapStartCreate = false;
+    let waySnapStartEdit = false;
+    let waySnapUpdate = false;
+    let waySnapEnd = false;
+    let startFeature: Feature<LineString>|undefined = undefined;
+    let startCreateFeature: Feature<LineString>|undefined = undefined;
+    let startEditFeature: Feature<LineString>|undefined = undefined;
+    let updateFeature: Feature<LineString>|undefined = undefined;
+    let endFeature: Feature<LineString>|undefined = undefined;
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTART, e => { waySnapStart = true; startFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTARTCREATE, e => { waySnapStartCreate = true; startCreateFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPSTARTEDIT, e => { waySnapStartEdit = true; startEditFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPUPDATE, e => { waySnapUpdate = true; updateFeature = e.feature; });
+    interaction.on(OSMWaySnapEventType.WAYSNAPEND, e => { waySnapEnd = true; endFeature = e.feature; });
+
+    mouseMove(map, interaction, [0, 0]);
+    mouseClick(map, interaction, [0, 0]);
+
+    expect(waySnapStart).toBeTruthy();
+    expect(waySnapStartCreate).toBeFalsy();
+    expect(waySnapStartEdit).toBeTruthy();
+    expect(waySnapUpdate).toBeFalsy();
+    expect(waySnapEnd).toBeFalsy();
+    expect(startFeature).toBeDefined();
+    expect(startCreateFeature).toBeUndefined();
+    expect(startEditFeature).toBeDefined();
+    expect(updateFeature).toBeUndefined();
+    expect(endFeature).toBeUndefined();
+    expect(startEditFeature).toBe(startFeature);
+    
+    mouseMove(map, interaction, [50, 25]);
+    mouseClick(map, interaction, [50, 25]);
+
+    expect(waySnapUpdate).toBeTruthy();
+    expect(waySnapEnd).toBeFalsy();
+    expect(updateFeature).toBe(startEditFeature);
+
+    mouseMove(map, interaction, [50, 25]);
+    mouseClick(map, interaction, [50, 25]);
+
+    expect(waySnapEnd).toBeTruthy();
+    expect(endFeature).toBe(startEditFeature);
+  });
 });
diff --git a/webpack.config.js b/webpack.config.js
index df2d82b..763633e 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -20,6 +20,7 @@ export default {
   externalsType: 'var',
   externals: {
     'ol': 'ol',
+    'ol/events/Event': 'ol.events.Event',
     'ol/extent': 'ol.extent',
     'ol/Feature': 'ol.Feature',
     'ol/geom': 'ol.geom',