feat: context object for onFinish to allow more control for developers

guides/6.EVENTS.md

@@ -70,9 +70,16 @@ draw.on("change", (ids, type) => {
 The other Terra Draw events are:
 
 ```typescript
-draw.on("finish", (ids: string[]) => {
-  // Do something
-  //...
+draw.on("finish", (id: string, context: { action: string, mode: string }) => {
+  if (action === 'draw') {
+    // Do something for draw finish event
+  } else if (action === 'dragFeature') {
+    // Do something for a drag finish event
+  } else if (action === 'dragCoordinate') {
+    //
+  }else if (action === 'dragCoordinateResize') {
+    //
+  }
 });
 
 draw.on("change", (ids: string[], type: string) => {

src/common.ts

@@ -73,6 +73,8 @@ export type GetLngLatFromEvent = (event: PointerEvent | MouseEvent) => {
 	lat: number;
 } | null;
 
+export type OnFinishContext = { mode: string; action: string };
+
 export interface TerraDrawModeRegisterConfig {
 	mode: string;
 	store: GeoJSONStore;
@@ -81,7 +83,7 @@ export interface TerraDrawModeRegisterConfig {
 	onChange: StoreChangeHandler;
 	onSelect: (selectedId: string) => void;
 	onDeselect: (deselectedId: string) => void;
-	onFinish: (finishedId: string) => void;
+	onFinish: (finishedId: string, context: OnFinishContext) => void;
 	project: Project;
 	unproject: Unproject;
 	coordinatePrecision: number;

src/modes/base.mode.ts

@@ -3,6 +3,7 @@
 import { BehaviorConfig, TerraDrawModeBehavior } from "./base.behavior";
 import {
 	HexColor,
+	OnFinishContext,
 	TerraDrawAdapterStyling,
 	TerraDrawKeyboardEvent,
 	TerraDrawModeRegisterConfig,
@@ -173,7 +174,7 @@ export abstract class TerraDrawBaseDrawMode<T extends CustomStyling> {
 	abstract cleanUp(): void;
 	abstract styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling;
 
-	onFinish(finishedId: FeatureId) {}
+	onFinish(finishedId: FeatureId, context: OnFinishContext) {}
 	onDeselect(deselectedId: FeatureId) {}
 	onSelect(selectedId: FeatureId) {}
 	onKeyDown(event: TerraDrawKeyboardEvent) {}

src/modes/circle/circle.mode.spec.ts

@@ -308,6 +308,10 @@ describe("TerraDrawCircleMode", () => {
 					expect(onChange).toBeCalledTimes(3);
 					expect(onChange).toBeCalledWith([expect.any(String)], "create");
 					expect(onFinish).toBeCalledTimes(1);
+					expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+						action: "draw",
+						mode: "circle",
+					});
 				});
 			});
 		});
@@ -357,6 +361,10 @@ describe("TerraDrawCircleMode", () => {
 			expect(onChange).toBeCalledTimes(1);
 			expect(onChange).toBeCalledWith([expect.any(String)], "create");
 			expect(onFinish).toBeCalledTimes(1);
+			expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+				action: "draw",
+				mode: "circle",
+			});
 		});
 	});
 

src/modes/circle/circle.mode.ts

@@ -129,7 +129,7 @@ export class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePolygonStyl
 		}
 
 		// Ensure that any listerers are triggered with the main created geometry
-		this.onFinish(finishedId);
+		this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/freehand/freehand.mode.spec.ts

@@ -269,8 +269,12 @@ describe("TerraDrawFreehandMode", () => {
 				features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				expect(onChange).toBeCalledTimes(2);
-				expect(onFinish).toBeCalled();
+				expect(onChange).toHaveBeenCalledTimes(2);
+				expect(onFinish).toHaveBeenCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "freehand",
+				});
 			});
 		});
 	});
@@ -511,7 +515,11 @@ describe("TerraDrawFreehandMode", () => {
 					[expect.any(String)],
 					"delete",
 				);
-				expect(onFinish).toBeCalledTimes(1);
+				expect(onFinish).toHaveBeenCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "freehand",
+				});
 			});
 		});
 	});

src/modes/freehand/freehand.mode.ts

@@ -133,7 +133,7 @@ export class TerraDrawFreehandMode extends TerraDrawBaseDrawMode<FreehandPolygon
 		}
 
 		// Ensure that any listerers are triggered with the main created geometry
-		this.onFinish(finishedId);
+		this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/greatcircle/great-circle.mode.spec.ts

@@ -503,6 +503,10 @@ describe("TerraDrawGreatCircleMode", () => {
 				});
 
 				expect(onFinish).toBeCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "greatcircle",
+				});
 			});
 
 			it("does not finish great circle when finish is set to null", () => {

src/modes/greatcircle/great-circle.mode.ts

@@ -135,7 +135,7 @@ export class TerraDrawGreatCircleMode extends TerraDrawBaseDrawMode<GreateCircle
 		}
 
 		// Ensure that any listerers are triggered with the main created geometry
-		this.onFinish(finishedId);
+		this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/linestring/linestring.mode.spec.ts

@@ -682,7 +682,11 @@ describe("TerraDrawLineStringMode", () => {
 					[2, 2],
 				]);
 
-				expect(onFinish).toBeCalledTimes(1);
+				expect(onFinish).toHaveBeenCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "linestring",
+				});
 			});
 
 			it("does not finish linestring when finish is set to null", () => {

src/modes/linestring/linestring.mode.ts

@@ -130,7 +130,7 @@ export class TerraDrawLineStringMode extends TerraDrawBaseDrawMode<LineStringSty
 		}
 
 		// Ensure that any listerers are triggered with the main created geometry
-		this.onFinish(finishedId);
+		this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	private updateGeometries(

src/modes/point/point.mode.ts

@@ -99,7 +99,7 @@ export class TerraDrawPointMode extends TerraDrawBaseDrawMode<PointModeStyling>
 		const [pointId] = this.store.create([{ geometry, properties }]);
 
 		// Ensure that any listerers are triggered with the main created geometry
-		this.onFinish(pointId);
+		this.onFinish(pointId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/polygon/polygon.mode.spec.ts

@@ -1051,6 +1051,7 @@ describe("TerraDrawPolygonMode", () => {
 	describe("onKeyUp", () => {
 		let polygonMode: TerraDrawPolygonMode;
 		let store: GeoJSONStore;
+		let onFinish: jest.Mock;
 		let project: jest.Mock;
 		let unproject: jest.Mock;
 
@@ -1082,6 +1083,7 @@ describe("TerraDrawPolygonMode", () => {
 			store = mockConfig.store;
 			project = mockConfig.project;
 			unproject = mockConfig.project;
+			onFinish = mockConfig.onFinish;
 			polygonMode.register(mockConfig);
 			polygonMode.start();
 		});
@@ -1249,6 +1251,12 @@ describe("TerraDrawPolygonMode", () => {
 					heldKeys: [],
 				});
 
+				expect(onFinish).toHaveBeenCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "polygon",
+				});
+
 				// Creates a new polygon
 				polygonMode.onClick({
 					lng: 4,
@@ -1353,6 +1361,8 @@ describe("TerraDrawPolygonMode", () => {
 				heldKeys: [],
 			});
 
+			expect(onFinish).not.toHaveBeenCalled();
+
 			const features = store.copyAll();
 
 			// 2 Closing points and 1 Polygon

src/modes/polygon/polygon.mode.ts

@@ -134,7 +134,7 @@ export class TerraDrawPolygonMode extends TerraDrawBaseDrawMode<PolygonStyling>
 			this.setStarted();
 		}
 
-		this.onFinish(finishedId);
+		this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/rectangle/rectangle.mode.spec.ts

@@ -182,7 +182,11 @@ describe("TerraDrawRectangleMode", () => {
 
 				expect(onChange).toBeCalledTimes(2);
 				expect(onChange).toBeCalledWith([expect.any(String)], "create");
-				expect(onFinish).toBeCalledTimes(1);
+				expect(onFinish).toHaveBeenCalledTimes(1);
+				expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), {
+					action: "draw",
+					mode: "rectangle",
+				});
 			});
 		});
 	});

src/modes/rectangle/rectangle.mode.ts

@@ -132,7 +132,8 @@ export class TerraDrawRectangleMode extends TerraDrawBaseDrawMode<RectanglePolyg
 			this.setStarted();
 		}
 
-		finishedId && this.onFinish(finishedId);
+		finishedId &&
+			this.onFinish(finishedId, { mode: this.mode, action: "draw" });
 	}
 
 	/** @internal */

src/modes/select/select.mode.spec.ts

@@ -2868,7 +2868,10 @@ describe("TerraDrawSelectMode", () => {
 			);
 
 			expect(onFinish).toBeCalledTimes(1);
-			expect(onFinish).toBeCalledWith(expect.any(String));
+			expect(onFinish).toBeCalledWith(expect.any(String), {
+				action: "dragCoordinate",
+				mode: "select",
+			});
 		});
 
 		it("fires onFinish for dragged feature if it is currently being dragged", () => {
@@ -2988,7 +2991,10 @@ describe("TerraDrawSelectMode", () => {
 			);
 
 			expect(onFinish).toBeCalledTimes(1);
-			expect(onFinish).toBeCalledWith(expect.any(String));
+			expect(onFinish).toBeCalledWith(expect.any(String), {
+				action: "dragFeature",
+				mode: "select",
+			});
 		});
 
 		it("fires onFinish for resizeable if it is currently being dragged", () => {
@@ -3108,7 +3114,10 @@ describe("TerraDrawSelectMode", () => {
 			);
 
 			expect(onFinish).toBeCalledTimes(1);
-			expect(onFinish).toBeCalledWith(expect.any(String));
+			expect(onFinish).toBeCalledWith(expect.any(String), {
+				action: "dragCoordinateResize",
+				mode: "select",
+			});
 		});
 	});
 

src/modes/select/select.mode.ts

@@ -762,11 +762,20 @@ export class TerraDrawSelectMode extends TerraDrawBaseSelectMode<SelectionStylin
 		// If we have finished dragging a coordinate or a feature
 		// lets fire an onFinish event which can be listened to
 		if (this.dragCoordinate.isDragging()) {
-			this.onFinish(this.selected[0]);
+			this.onFinish(this.selected[0], {
+				mode: this.mode,
+				action: "dragCoordinate",
+			});
 		} else if (this.dragFeature.isDragging()) {
-			this.onFinish(this.selected[0]);
+			this.onFinish(this.selected[0], {
+				mode: this.mode,
+				action: "dragFeature",
+			});
 		} else if (this.dragCoordinateResizeFeature.isDragging()) {
-			this.onFinish(this.selected[0]);
+			this.onFinish(this.selected[0], {
+				mode: this.mode,
+				action: "dragCoordinateResize",
+			});
 		}
 
 		this.dragCoordinate.stopDragging();

src/terra-draw.ts

@@ -17,6 +17,7 @@ import {
 	TerraDrawKeyboardEvent,
 	TerraDrawMouseEvent,
 	SELECT_PROPERTIES,
+	OnFinishContext,
 } from "./common";
 import { TerraDrawBaseAdapter } from "./adapters/common/base.adapter";
 import {
@@ -52,7 +53,7 @@ import { ValidateMinAreaSquareMeters } from "./validations/min-size.validation";
 import { ValidateMaxAreaSquareMeters } from "./validations/max-size.validation";
 import { ValidateNotSelfIntersecting } from "./validations/not-self-intersecting.validation";
 
-type FinishListener = (ids: FeatureId) => void;
+type FinishListener = (id: FeatureId, context: OnFinishContext) => void;
 type ChangeListener = (ids: FeatureId[], type: string) => void;
 type SelectListener = (id: FeatureId) => void;
 type DeselectListener = () => void;
@@ -164,13 +165,13 @@ class TerraDraw {
 			return { changed, unchanged };
 		};
 
-		const onFinish = (finishedId: FeatureId) => {
+		const onFinish = (finishedId: FeatureId, context: OnFinishContext) => {
 			if (!this._enabled) {
 				return;
 			}
 
 			this._eventListeners.finish.forEach((listener) => {
-				listener(finishedId);
+				listener(finishedId, context);
 			});
 		};