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

package/e2e/public/index.html

@@ -41,6 +41,7 @@
         <button id="linestring">Linestring</button>
         <button id="polygon">Polygon</button>
         <button id="rectangle">Rectangle</button>
+        <button id="angled-rectangle">Angled Rectangle</button>
         <button id="circle">Circle</button>
         <button id="clear">Clear</button>
     </div>

package/e2e/tests/leaflet.spec.ts

@@ -328,6 +328,88 @@ 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 ({
+		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 can be 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 can be 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 can be 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("circle mode", () => {
 	const mode = "circle";
 

package/e2e/tests/setup.ts

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

package/package.json

@@ -1,11 +1,10 @@
 {
 	"name": "terra-draw",
-	"version": "1.0.0-beta.0",
+	"version": "1.0.0-beta.1",
 	"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",
@@ -75,7 +74,7 @@
 		"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",