terra-draw 1.0.0-beta.3 → 1.0.0-beta.5

package/e2e/public/index.html

@@ -43,6 +43,7 @@
         <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

@@ -530,6 +530,187 @@ test.describe("sector mode", () => {
 	});
 });
 
+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";
 

package/e2e/tests/setup.ts

@@ -61,7 +61,8 @@ export const changeMode = async ({
 		| "rectangle"
 		| "circle"
 		| "angled-rectangle"
-		| "sector";
+		| "sector"
+		| "sensor";
 }) => {
 	let modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
 
@@ -103,7 +104,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);
 	}
 };
 
@@ -111,14 +115,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "terra-draw",
-	"version": "1.0.0-beta.3",
+	"version": "1.0.0-beta.5",
 	"description": "Frictionless map drawing across mapping provider",
 	"scripts": {
 		"docs": "typedoc",