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

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 });
 
@@ -328,10 +417,397 @@ test.describe("rectangle mode", () => {
 	});
 });
 
+test.describe("angled rectangle mode", () => {
+	const mode = "angled-rectangle";
+
+	test("mode can set and used to create an angled rectangle (horizontal up)", 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 + 50, mapDiv.height / 3 + 50, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 3 + 50, mapDiv.height / 3 + 50);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 217, height: 74 });
+	});
+
+	test("mode can set and used to create an angled rectangle (horizontal down)", 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 + 50, mapDiv.height / 3 + 200, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 3 + 50, mapDiv.height / 3 + 200);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 217, height: 84 });
+	});
+
+	test("mode can set and used to create an angled (diagonal)", 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 / 3, { steps: 30 });
+		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+		await page.mouse.move(mapDiv.width / 3 + 150, mapDiv.height / 3 + 150, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 3 + 150, mapDiv.height / 3 + 150);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 245, height: 174 });
+	});
+
+	test("mode can set and used to create an angled (diagonal 2)", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 1.8, mapDiv.height / 1.8);
+		await page.mouse.move(mapDiv.width / 2.5, mapDiv.height / 1.3, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 2.5, mapDiv.height / 1.3);
+		await page.mouse.move(mapDiv.width / 2.5 + 50, mapDiv.height / 1.3 + 50, {
+			steps: 30,
+		});
+		await page.mouse.click(mapDiv.width / 2.5 + 50, mapDiv.height / 1.3 + 50);
+
+		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 246, height: 213 });
+	});
+});
+
+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 });
@@ -346,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"] });

package/e2e/tests/setup.ts

@@ -8,7 +8,8 @@ export type TestConfigOptions =
 	| "insertCoordinates"
 	| "insertCoordinatesGlobe"
 	| "globeCircle"
-	| "globeSelect";
+	| "globeSelect"
+	| "snappingCoordinate";
 
 export const setupMap = async ({
 	page,
@@ -53,9 +54,28 @@ export const changeMode = async ({
 	mode,
 }: {
 	page: Page;
-	mode: "point" | "polygon" | "linestring" | "select" | "rectangle" | "circle";
+	mode:
+		| "point"
+		| "polygon"
+		| "linestring"
+		| "select"
+		| "rectangle"
+		| "circle"
+		| "angled-rectangle"
+		| "sector"
+		| "sensor";
 }) => {
-	const modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
+	let modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
+
+	if (mode.includes("-")) {
+		modeText = mode
+			.split("-")
+			.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+			.join(" ");
+	} else {
+		modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
+	}
+
 	const buttons = page.getByTestId("buttons");
 	const button = buttons.getByText(modeText, { exact: true });
 
@@ -66,7 +86,10 @@ export const changeMode = async ({
 	const color = await button.evaluate((el) =>
 		window.getComputedStyle(el).getPropertyValue("color"),
 	);
-	expect(color).toBe("rgb(39, 204, 255)"); // We set hex but it gets computed to rgb
+	expect(
+		color,
+		"Text rgb color should match the expected selected button color",
+	).toBe("rgb(39, 204, 255)"); // We set hex but it gets computed to rgb
 };
 
 export const expectPaths = async ({
@@ -82,7 +105,10 @@ export const expectPaths = async ({
 		await page.waitForSelector(selector);
 		expect(await page.locator(selector).count()).toBe(count);
 	} else {
-		await expect(await page.locator(selector).count()).toBe(0);
+		await expect(
+			await page.locator(selector).count(),
+			`locator count should be greater than 0 for selector ${selector}`,
+		).toBe(0);
 	}
 };
 
@@ -90,14 +116,16 @@ export const expectPathDimensions = async ({
 	page,
 	width,
 	height,
+	item = 0,
 }: {
 	page: Page;
 	width: number;
 	height: number;
+	item?: number;
 }) => {
 	const selector = "svg > g > path";
 
-	const boundingBox = await page.locator(selector).boundingBox();
+	const boundingBox = await page.locator(selector).nth(item).boundingBox();
 
 	expect(boundingBox?.width).toBe(width);
 	expect(boundingBox?.height).toBe(height);

package/eslint.config.js

@@ -0,0 +1,31 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import eslintPluginPrettier from "eslint-plugin-prettier";
+import prettierConfig from "eslint-config-prettier";
+
+export default [
+	{
+		name: "prettier", // Configuration name
+		files: ["**/*.{js,jsx,ts,tsx,json,md,yml,yaml,html,css}"],
+		plugins: {
+			prettier: eslintPluginPrettier, // Include Prettier plugin
+		},
+		rules: {
+			...prettierConfig.rules, // Disable ESLint rules that conflict with Prettier
+		},
+	},
+	{
+		name: "typescript", // Configuration name
+		files: ["**/*.ts"], // TypeScript-specific configuration
+		plugins: {
+			"@typescript-eslint": typescriptEslint, // Include TypeScript ESLint plugin
+		},
+		languageOptions: {
+			parser: tsParser,
+		},
+		rules: {
+			"@typescript-eslint/no-empty-function": "warn",
+			"@typescript-eslint/no-explicit-any": "warn",
+		},
+	},
+];