From ebdaed62c71f9154ca6f8be958d539539b5d05c0 Mon Sep 17 00:00:00 2001
From: James Milner <jamesmilner22@hotmail.com>
Date: Tue, 26 Dec 2023 23:23:10 +0000
Subject: [PATCH] fix: ensure circle mode works on touch devices (#152)

---
 .../{circle.spec.ts => circle.mode.spec.ts}   |  3 +-
 src/modes/circle/circle.mode.ts               | 40 +++++++++++--------
 2 files changed, 26 insertions(+), 17 deletions(-)
 rename src/modes/circle/{circle.spec.ts => circle.mode.spec.ts} (99%)

diff --git a/src/modes/circle/circle.spec.ts b/src/modes/circle/circle.mode.spec.ts
similarity index 99%
rename from src/modes/circle/circle.spec.ts
rename to src/modes/circle/circle.mode.spec.ts
index c710c363..7a781313 100644
--- a/src/modes/circle/circle.spec.ts
+++ b/src/modes/circle/circle.mode.spec.ts
@@ -141,6 +141,7 @@ describe("TerraDrawCircleMode", () => {
 				circleMode.register(mockConfig);
 				circleMode.start();
 			});
+
 			it("adds a circle to store if registered", () => {
 				circleMode.onClick({
 					lng: 0,
@@ -180,7 +181,7 @@ describe("TerraDrawCircleMode", () => {
 				features = store.copyAll();
 				expect(features.length).toBe(1);
 
-				expect(onChange).toBeCalledTimes(1);
+				expect(onChange).toBeCalledTimes(2);
 				expect(onChange).toBeCalledWith([expect.any(String)], "create");
 
 				expect(onFinish).toBeCalledTimes(1);
diff --git a/src/modes/circle/circle.mode.ts b/src/modes/circle/circle.mode.ts
index b3d366a2..2d87a377 100644
--- a/src/modes/circle/circle.mode.ts
+++ b/src/modes/circle/circle.mode.ts
@@ -128,6 +128,10 @@ export class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePolygonStyl
 			this.clickCount++;
 			this.setDrawing();
 		} else {
+			if (this.clickCount === 1 && this.center && this.currentCircleId) {
+				this.createCircle(event);
+			}
+
 			// Finish drawing
 			this.close();
 		}
@@ -135,22 +139,7 @@ export class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePolygonStyl
 
 	/** @internal */
 	onMouseMove(event: TerraDrawMouseEvent) {
-		if (this.clickCount === 1 && this.center && this.currentCircleId) {
-			const distanceKm = haversineDistanceKilometers(this.center, [
-				event.lng,
-				event.lat,
-			]);
-
-			const updatedCircle = circle({
-				center: this.center,
-				radiusKilometers: distanceKm,
-				coordinatePrecision: this.coordinatePrecision,
-			});
-
-			this.store.updateGeometry([
-				{ id: this.currentCircleId, geometry: updatedCircle.geometry },
-			]);
-		}
+		this.createCircle(event);
 	}
 
 	/** @internal */
@@ -238,4 +227,23 @@ export class TerraDrawCircleMode extends TerraDrawBaseDrawMode<CirclePolygonStyl
 			return false;
 		}
 	}
+
+	private createCircle(event: TerraDrawMouseEvent) {
+		if (this.clickCount === 1 && this.center && this.currentCircleId) {
+			const distanceKm = haversineDistanceKilometers(this.center, [
+				event.lng,
+				event.lat,
+			]);
+
+			const updatedCircle = circle({
+				center: this.center,
+				radiusKilometers: distanceKm,
+				coordinatePrecision: this.coordinatePrecision,
+			});
+
+			this.store.updateGeometry([
+				{ id: this.currentCircleId, geometry: updatedCircle.geometry },
+			]);
+		}
+	}
 }