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

package/e2e/public/index.html

@@ -41,6 +41,8 @@
         <button id="linestring">Linestring</button>
         <button id="polygon">Polygon</button>
         <button id="rectangle">Rectangle</button>
+        <button id="angled-rectangle">Angled Rectangle</button>
+        <button id="sector">Sector</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 });
 
@@ -328,10 +324,216 @@ 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("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 +548,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

@@ -53,9 +53,27 @@ export const changeMode = async ({
 	mode,
 }: {
 	page: Page;
-	mode: "point" | "polygon" | "linestring" | "select" | "rectangle" | "circle";
+	mode:
+		| "point"
+		| "polygon"
+		| "linestring"
+		| "select"
+		| "rectangle"
+		| "circle"
+		| "angled-rectangle"
+		| "sector";
 }) => {
-	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 +84,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 ({

package/package.json

@@ -1,16 +1,16 @@
 {
 	"name": "terra-draw",
-	"version": "1.0.0-beta.0",
+	"version": "1.0.0-beta.3",
 	"description": "Frictionless map drawing across mapping provider",
 	"scripts": {
 		"docs": "typedoc",
 		"docs:serve": "serve ./docs",
-		"release:beta:major": "standard-version --prerelease beta --release-as major",
 		"release:beta:increment": "standard-version --prerelease beta",
 		"release:beta:changelog": "tsx ./scripts/changelog-valid.ts",
 		"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",
@@ -71,17 +71,18 @@
 		"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",
 		"microbundle": "0.15.0",
-		"ol": "7.1.0",
+		"ol": "10.0.0",
 		"serve": "14.1.2",
 		"standard-version": "9.5.0",
 		"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": {
@@ -156,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/",