terra-draw 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/validation-reasons.d.ts

@@ -0,0 +1,13 @@
+export declare const ValidationReasons: {
+    ValidationReasonFeatureNotPoint: string;
+    ValidationReasonFeatureInvalidCoordinates: string;
+    ValidationReasonFeatureNotPolygon: string;
+    ValidationReasonFeatureHasHoles: string;
+    ValidationReasonFeatureLessThanFourCoordinates: string;
+    ValidationReasonFeatureHasInvalidCoordinates: string;
+    ValidationReasonFeatureCoordinatesNotClosed: string;
+    ValidationReasonFeatureNotPolygonOrLineString: string;
+    ValidationReasonFeatureSelfIntersects: string;
+    ValidationReasonFeatureLessThanMinSize: string;
+    ValidationReasonModeMismatch: string;
+};

package/dist/validations/common-validations.d.ts

@@ -0,0 +1,2 @@
+export declare const ValidationReasonFeatureNotPolygon = "Feature is not a Polygon";
+export declare const ValidationReasonModeMismatch = "Feature mode property does not match the mode being added to";

package/dist/validations/linestring.validation.d.ts

@@ -1,2 +1,5 @@
+import { Validation } from "../common";
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare function ValidateLineStringFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;
+export declare const ValidationReasonFeatureIsNotALineString = "Feature is not a LineString";
+export declare const ValidationReasonFeatureHasLessThanTwoCoordinates = "Feature has less than 2 coordinates";
+export declare function ValidateLineStringFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): ReturnType<Validation>;

package/dist/validations/max-size.validation.d.ts

@@ -1,2 +1,4 @@
+import { Validation } from "../common";
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare const ValidateMaxAreaSquareMeters: (feature: GeoJSONStoreFeatures, maxSize: number) => boolean;
+export declare const ValidationMaxAreaSquareMetersReason = "Feature is larger than the maximum area";
+export declare const ValidateMaxAreaSquareMeters: (feature: GeoJSONStoreFeatures, maxSize: number) => ReturnType<Validation>;

package/dist/validations/min-size.validation.d.ts

@@ -1,2 +1,4 @@
+import { Validation } from "../common";
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare const ValidateMinAreaSquareMeters: (feature: GeoJSONStoreFeatures, minSize: number) => boolean;
+export declare const ValidationReasonFeatureLessThanMinSize = "Feature is smaller than the minimum area";
+export declare const ValidateMinAreaSquareMeters: (feature: GeoJSONStoreFeatures, minSize: number) => ReturnType<Validation>;

package/dist/validations/not-self-intersecting.validation.d.ts

@@ -1,2 +1,5 @@
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare const ValidateNotSelfIntersecting: (feature: GeoJSONStoreFeatures) => boolean;
+import { Validation } from "../common";
+export declare const ValidationReasonFeatureNotPolygonOrLineString = "Feature is not a Polygon or LineString";
+export declare const ValidationReasonFeatureSelfIntersects = "Feature intersects itself";
+export declare const ValidateNotSelfIntersecting: (feature: GeoJSONStoreFeatures) => ReturnType<Validation>;

package/dist/validations/point.validation.d.ts

@@ -1,2 +1,5 @@
+import { Validation } from "../common";
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare function ValidatePointFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;
+export declare const ValidationReasonFeatureNotPoint = "Feature is not a Point";
+export declare const ValidationReasonFeatureInvalidCoordinates = "Feature has invalid coordinates";
+export declare function ValidatePointFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): ReturnType<Validation>;

package/dist/validations/polygon.validation.d.ts

@@ -1,3 +1,9 @@
 import { GeoJSONStoreFeatures } from "../terra-draw";
-export declare function ValidatePolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;
-export declare function ValidateNonIntersectingPolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;
+import { Validation } from "../common";
+export declare const ValidationReasonFeatureNotPolygon = "Feature is not a Polygon";
+export declare const ValidationReasonFeatureHasHoles = "Feature has holes";
+export declare const ValidationReasonFeatureLessThanFourCoordinates = "Feature has less than 4 coordinates";
+export declare const ValidationReasonFeatureHasInvalidCoordinates = "Feature has invalid coordinates";
+export declare const ValidationReasonFeatureCoordinatesNotClosed = "Feature coordinates are not closed";
+export declare function ValidatePolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): ReturnType<Validation>;
+export declare function ValidateNonIntersectingPolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): ReturnType<Validation>;

package/e2e/package-lock.json

@@ -14,7 +14,7 @@
 				"@types/node": "20.10.5",
 				"dotenv-webpack": "8.0.0",
 				"ts-loader": "9.5.1",
-				"typescript": "5.5.2",
+				"typescript": "5.6.3",
 				"webpack": "5.73.0",
 				"webpack-cli": "4.10.0",
 				"webpack-dev-server": "4.11.1"
@@ -3756,10 +3756,11 @@
 			}
 		},
 		"node_modules/typescript": {
-			"version": "5.5.2",
-			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.5.2.tgz",
-			"integrity": "sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==",
+			"version": "5.6.3",
+			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
+			"integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
 			"dev": true,
+			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
 				"tsserver": "bin/tsserver"

package/e2e/package.json

@@ -18,7 +18,7 @@
 		"@types/node": "20.10.5",
 		"dotenv-webpack": "8.0.0",
 		"ts-loader": "9.5.1",
-		"typescript": "5.5.2",
+		"typescript": "5.6.3",
 		"webpack": "5.73.0",
 		"webpack-cli": "4.10.0",
 		"webpack-dev-server": "4.11.1"

package/e2e/public/index.html

@@ -42,6 +42,8 @@
         <button id="polygon">Polygon</button>
         <button id="rectangle">Rectangle</button>
         <button id="angled-rectangle">Angled Rectangle</button>
+        <button id="sector">Sector</button>
+        <button id="sensor">Sensor</button>
         <button id="circle">Circle</button>
         <button id="clear">Clear</button>
     </div>

package/e2e/tests/leaflet.spec.ts

@@ -53,7 +53,7 @@ test.describe("page setup", () => {
 test.describe("point mode", () => {
 	const mode = "point";
 
-	test("mode can set and can be used to create a point", async ({ page }) => {
+	test("mode can set and used to create a point", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
@@ -61,9 +61,7 @@ test.describe("point mode", () => {
 		await expectPaths({ page, count: 1 });
 	});
 
-	test("mode can set and can be used to create multiple points", async ({
-		page,
-	}) => {
+	test("mode can set and used to create multiple points", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -91,7 +89,7 @@ test.describe("linestring mode", () => {
 	] as { name: string; config: TestConfigOptions[] }[];
 
 	for (const { name, config } of options) {
-		test(`mode can set and can be used to create a linestring${name}`, async ({
+		test(`mode can set and used to create a linestring${name}`, async ({
 			page,
 		}) => {
 			const mapDiv = await setupMap({ page, configQueryParam: config });
@@ -108,7 +106,7 @@ test.describe("linestring mode", () => {
 			await expectPaths({ page, count: 1 });
 		});
 
-		test(`mode can set and can be used to create a linestring with multiple points${name}`, async ({
+		test(`mode can set and used to create a linestring with multiple points${name}`, async ({
 			page,
 		}) => {
 			const mapDiv = await setupMap({ page, configQueryParam: config });
@@ -133,7 +131,7 @@ test.describe("linestring mode", () => {
 			await expectPaths({ page, count: 1 });
 		});
 
-		test(`mode can set and can be used to create a linestring with multiple clicked points${name}`, async ({
+		test(`mode can set and used to create a linestring with multiple clicked points${name}`, async ({
 			page,
 		}) => {
 			const mapDiv = await setupMap({ page, configQueryParam: config });
@@ -158,7 +156,7 @@ test.describe("linestring mode", () => {
 			await expectPaths({ page, count: 1 });
 		});
 
-		test(`mode can set and can be used to create multiple linestrings${name}`, async ({
+		test(`mode can set and used to create multiple linestrings${name}`, async ({
 			page,
 		}) => {
 			const mapDiv = await setupMap({ page, configQueryParam: config });
@@ -191,13 +189,52 @@ test.describe("linestring mode", () => {
 			// Two lines
 			await expectPaths({ page, count: 2 });
 		});
+
+		test(`mode can set with snapping enabled used to create multiple linestrings${name}`, async ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({
+				page,
+				configQueryParam: config
+					? [...config, "snappingCoordinate"]
+					: undefined,
+			});
+			await changeMode({ page, mode });
+
+			// First line
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			// One point + one line
+			await expectPaths({ page, count: 2 });
+
+			// Close first line
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			// One line
+			await expectPaths({ page, count: 1 });
+
+			// Second line
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+
+			// Should see snapping point
+			await expectPaths({ page, count: 2 });
+
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.move(mapDiv.width / 4, mapDiv.height / 4);
+
+			// Snapping point disappears but the second line is created so it is still 2
+			await expectPaths({ page, count: 2 });
+		});
 	}
 });
 
 test.describe("polygon mode", () => {
 	const mode = "polygon";
 
-	test("mode can set and can be used to create a polygon", async ({ page }) => {
+	test("mode can set and used to create a polygon", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -307,14 +344,66 @@ test.describe("polygon mode", () => {
 		// over the limit of 1000000 square meters.
 		await expectPaths({ page, count: 1 });
 	});
+
+	test("mode can set and used to create a polygon with snapping enabled", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: ["snappingCoordinate"],
+		});
+		await changeMode({ page, mode });
+
+		// The length of the square sides in pixels
+		const sideLength = 100;
+
+		// Calculating the half of the side length
+		const halfLength = sideLength / 2;
+
+		// Coordinates of the center
+		const centerX = mapDiv.width / 2;
+		const centerY = mapDiv.height / 2;
+
+		// Coordinates of the four corners of the square
+		const topLeft = { x: centerX - halfLength, y: centerY - halfLength };
+		const topRight = { x: centerX + halfLength, y: centerY - halfLength };
+		const bottomLeft = { x: centerX - halfLength, y: centerY + halfLength };
+		const bottomRight = { x: centerX + halfLength, y: centerY + halfLength };
+
+		// Perform clicks at each corner
+		await page.mouse.click(topLeft.x, topLeft.y);
+		await page.mouse.click(topRight.x, topRight.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y);
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+
+		// Close the square
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+
+		// One point + one line
+		await expectPaths({ page, count: 1 });
+
+		// Let's create a new polygon attached to the square, snapping to it
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y + 50);
+
+		await expectPaths({ page, count: 4 });
+
+		await page.mouse.click(bottomRight.x, bottomRight.y + 50);
+
+		await expectPaths({ page, count: 2 });
+
+		// Go to another corner and it should snap with a point appearing
+		await page.mouse.click(topLeft.x, topLeft.y);
+
+		await expectPaths({ page, count: 3 });
+	});
 });
 
 test.describe("rectangle mode", () => {
 	const mode = "rectangle";
 
-	test("mode can set and can be used to create a rectangle", async ({
-		page,
-	}) => {
+	test("mode can set and used to create a rectangle", async ({ page }) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -331,7 +420,7 @@ test.describe("rectangle mode", () => {
 test.describe("angled rectangle mode", () => {
 	const mode = "angled-rectangle";
 
-	test("mode can set and can be used to create an angled rectangle (horizontal up)", async ({
+	test("mode can set and used to create an angled rectangle (horizontal up)", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -350,7 +439,7 @@ test.describe("angled rectangle mode", () => {
 		await expectPathDimensions({ page, width: 217, height: 74 });
 	});
 
-	test("mode can set and can be used to create an angled rectangle (horizontal down)", async ({
+	test("mode can set and used to create an angled rectangle (horizontal down)", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -369,7 +458,7 @@ test.describe("angled rectangle mode", () => {
 		await expectPathDimensions({ page, width: 217, height: 84 });
 	});
 
-	test("mode can set and can be used to create an angled (diagonal)", async ({
+	test("mode can set and used to create an angled (diagonal)", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -388,7 +477,7 @@ test.describe("angled rectangle mode", () => {
 		await expectPathDimensions({ page, width: 245, height: 174 });
 	});
 
-	test("mode can set and can be used to create an angled (diagonal 2)", async ({
+	test("mode can set and used to create an angled (diagonal 2)", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -410,10 +499,315 @@ test.describe("angled rectangle mode", () => {
 	});
 });
 
+test.describe("sector mode", () => {
+	const mode = "sector";
+
+	test("mode can set and used to create a sector less than 90 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 217, height: 109 });
+	});
+
+	test("mode can set and used to create a sector more than 90 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 3, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 3);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 417, height: 217 });
+	});
+
+	test("mode can set and used to create a sector more than 180 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 3, {
+			steps: 10,
+		});
+		await page.mouse.move(mapDiv.width * 0.4, mapDiv.height / 1.5, {
+			steps: 10,
+		});
+		await page.mouse.click(mapDiv.width * 0.4, mapDiv.height / 1.5);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 430, height: 430 });
+	});
+
+	test("mode can set and used to create a sector less than 90 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.4, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.4, mapDiv.height / 1.5);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 217, height: 150 });
+	});
+
+	test("mode can set and used to create a sector more than 90 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 1.5);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 417, height: 217 });
+	});
+
+	test("mode can set and used to create a sector more than 180 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 3, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 3);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 430, height: 292 });
+	});
+});
+
+test.describe("sensor mode", () => {
+	const mode = "sensor";
+
+	test("mode can set and creates center point on first click", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 12, height: 12 });
+	});
+
+	test("mode can set and but won't close if the mouse goes behind the initial arc", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+		// The cursor is now behind the initial arc and so wont close the sensor
+		await page.mouse.move(mapDiv.width / 1, mapDiv.height / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 1, mapDiv.height / 3);
+
+		// We expect the count to be 2 because the sensor polygon is not finished
+		// and we are left with the center point and the arc line
+		await expectPaths({ page, count: 2 });
+
+		await expectPathDimensions({ page, width: 12, height: 12, item: 0 });
+		await expectPathDimensions({ page, width: 31, height: 109, item: 1 });
+	});
+
+	test("mode can set and used to create a sensor less than 90 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width / 5, mapDiv.height / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 5, mapDiv.height / 3);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 220, height: 201 });
+	});
+
+	test("mode can set and used to create a sensor more than 90 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 2.5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 2.5);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 5);
+
+		await expectPathDimensions({ page, width: 767, height: 390 });
+	});
+
+	test("mode can set and used to create a sensor more than 180 degrees (clockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 3, {
+			steps: 10,
+		});
+		await page.mouse.move(mapDiv.width * 0.4, mapDiv.height / 1.5, {
+			steps: 10,
+		});
+		await page.mouse.click(mapDiv.width * 0.4, mapDiv.height / 1.5);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width * 0.4, mapDiv.height / 1.25);
+		await page.mouse.click(mapDiv.width * 0.4, mapDiv.height / 1.25);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 506, height: 506 });
+	});
+
+	test("mode can set and used to create a sensor less than 90 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.4, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.4, mapDiv.height / 1.5);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width * 0.3, mapDiv.height / 1.25);
+		await page.mouse.click(mapDiv.width * 0.3, mapDiv.height / 1.25);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 183, height: 233 });
+	});
+
+	test("mode can set and used to create a sensor more than 90 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 1.5);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 1.3);
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 1.3);
+
+		await expectPathDimensions({ page, width: 728, height: 378 });
+	});
+
+	test("mode can set and used to create a sensor more than 180 degrees (anticlockwise)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 1.5, {
+			steps: 30,
+		});
+		await page.mouse.move(mapDiv.width * 0.75, mapDiv.height / 3, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width * 0.75, mapDiv.height / 3);
+
+		// Finalise the sensor polygon
+		await page.mouse.move(mapDiv.width * 0.8, mapDiv.height / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width * 0.8, mapDiv.height / 3);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 808, height: 547 });
+	});
+});
+
 test.describe("circle mode", () => {
 	const mode = "circle";
 
-	test("mode can set and can be used to create a web mercator circle", async ({
+	test("mode can set and used to create a web mercator circle", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });
@@ -428,7 +822,7 @@ test.describe("circle mode", () => {
 		await expectPathDimensions({ page, width: 146, height: 146 });
 	});
 
-	test("mode can set and can be used to create a geodesic circle", async ({
+	test("mode can set and used to create a geodesic circle", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page, configQueryParam: ["globeCircle"] });