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

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 });
@@ -197,7 +195,7 @@ test.describe("linestring mode", () => {
 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 });
 
@@ -312,9 +310,7 @@ test.describe("polygon mode", () => {
 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 +327,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 +346,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 +365,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 +384,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 +406,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 +729,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

@@ -60,7 +60,9 @@ export const changeMode = async ({
 		| "select"
 		| "rectangle"
 		| "circle"
-		| "angled-rectangle";
+		| "angled-rectangle"
+		| "sector"
+		| "sensor";
 }) => {
 	let modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
 
@@ -83,7 +85,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 ({
@@ -99,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);
 	}
 };
 
@@ -107,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.1",
+	"version": "1.0.0-beta.4",
 	"description": "Frictionless map drawing across mapping provider",
 	"scripts": {
 		"docs": "typedoc",
@@ -10,6 +10,7 @@
 		"release:beta:next": "tsx ./scripts/next-beta-version.ts",
 		"build": "microbundle",
 		"watch": "microbundle --watch --format modern",
+		"unused": "knip",
 		"test": "jest --config jest.config.ts",
 		"test:coverage": "jest --config jest.config.ts --coverage",
 		"test:nocheck": "jest --config jest.nocheck.config.ts",
@@ -70,6 +71,7 @@
 		"husky": "7.0.0",
 		"jest": "29.7.0",
 		"jest-environment-jsdom": "29.7.0",
+		"knip": "^5.30.2",
 		"leaflet": "^1.9.4",
 		"mapbox-gl": "2.13.0",
 		"maplibre-gl": "3.2.0",
@@ -80,7 +82,7 @@
 		"ts-jest": "29.1.2",
 		"ts-loader": "9.5.1",
 		"tsx": "4.7.2",
-		"typedoc": "^0.26.2",
+		"typedoc": "^0.26.6",
 		"typescript": "5.5.2"
 	},
 	"commitlint": {
@@ -155,5 +157,18 @@
 			}
 		]
 	},
-	"sideEffects": false
+	"sideEffects": false,
+	"knip": {
+		"$schema": "https://unpkg.com/knip@5/schema.json",
+		"entry": [
+			"src/terra-draw.ts"
+		],
+		"project": [
+			"src/**/*.ts"
+		],
+		"include": [
+			"files",
+			"types"
+		]
+	}
 }

package/tsconfig.json

@@ -14,7 +14,8 @@
 		"entryPoints": ["src/terra-draw.ts"],
 		"exclude": ["src/geometry/**/*.ts", "src/test/**/*.ts", "src/util/**/*.ts"],
 		"out": "docs",
-		"skipErrorChecking": true
+		"skipErrorChecking": true,
+		"sourceLinkExternal": true
 	},
 	"exclude": [
 		"node_modules/",