fix: ensure circle mode works on touch devices (#152)

src/modes/circle/circle.spec.ts → 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);

src/modes/circle/circle.mode.ts

@@ -128,29 +128,18 @@ 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();
 		}
 	}
 
 	/** @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 },
+			]);
+		}
+	}
 }