terra-draw 0.0.1-alpha.67 → 0.0.1-alpha.68

package/e2e/tests/leaflet.spec.ts

@@ -163,6 +163,84 @@ test.describe("polygon mode", () => {
 		// One point + one line
 		await expectPaths({ page, count: 1 });
 	});
+
+	test("can use validation setting to prevent maximum size", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: "validationFailure",
+		});
+		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);
+
+		// Attempt to close the square
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+
+		// Square will fail, as triangle will be 705665 square meters, but square will be
+		// over the limit of 1000000 square meters.
+		await expectPaths({ page, count: 3 });
+	});
+
+	test("can use validation setting to draw underneath maximum size ", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: "validationSuccess",
+		});
+		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);
+
+		// Attempt to close the square
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+
+		// Square will fail, as triangle will be 705665 square meters, but square will be
+		// over the limit of 1000000 square meters.
+		await expectPaths({ page, count: 1 });
+	});
 });
 
 test.describe("rectangle mode", () => {
@@ -320,7 +398,93 @@ test.describe("select mode", () => {
 		await expectGroupPosition({ page, x: 538, y: 308 });
 	});
 
-	test("selected rectangle can has it's shape maintained when coordinates are dragged", async ({
+	test("selected polygon can have individual coordinates dragged and fail when validation fails", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: "validationFailure",
+		});
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectangularPolygon({
+			mapDiv,
+			page,
+			size: "small",
+		});
+
+		// Change to select mode
+		await changeMode({ page, mode });
+
+		// Before drag
+		const x = topLeft.x - 2;
+		const y = topLeft.y - 2;
+		await expectGroupPosition({ page, x, y });
+
+		// Select
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		// await expectPaths({ page, count: 9 }); // 8 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(topLeft.x, topLeft.y);
+		await page.mouse.down();
+		await page.mouse.move(0, 0, { steps: 30 });
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// We are attempting to dragg right tothe top left corner but it is not getting there
+		// because it is capped by the validation. If this was allowed x would be ~90
+		await expectGroupPosition({ page, x: 563, y: 301 });
+	});
+
+	test("selected polygon can have individual coordinates dragged and succeeds when validation succeeds", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: "validationSuccess",
+		});
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectangularPolygon({
+			mapDiv,
+			page,
+			size: "small",
+		});
+
+		// Change to select mode
+		await changeMode({ page, mode });
+
+		// Before drag
+		const x = topLeft.x - 2;
+		const y = topLeft.y - 2;
+		await expectGroupPosition({ page, x, y });
+
+		// Select
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		// await expectPaths({ page, count: 9 }); // 8 selection points and 1 square
+
+		// Drag
+		await page.mouse.move(topLeft.x, topLeft.y);
+		await page.mouse.down();
+		await page.mouse.move(topLeft.x - 50, topLeft.y - 50, { steps: 30 });
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// We are attempting to dragg right tothe top left corner but it is not getting there
+		// because it is capped by the validation. If this was allowed x would be ~90
+		await expectGroupPosition({ page, x: 553, y: 273 });
+	});
+
+	test("selected rectangle has it's shape maintained when coordinates are dragged with resizeable flag", async ({
 		page,
 	}) => {
 		const mapDiv = await setupMap({ page });

package/e2e/tests/setup.ts

@@ -4,15 +4,21 @@ export const pageUrl = "http://localhost:3000/";
 
 export const setupMap = async ({
 	page,
+	configQueryParam,
 }: {
 	page: Page;
+	configQueryParam?: "validationSuccess" | "validationFailure";
 }): Promise<{
 	x: number;
 	y: number;
 	width: number;
 	height: number;
 }> => {
-	await page.goto(pageUrl);
+	if (configQueryParam) {
+		await page.goto(pageUrl + "?config=" + configQueryParam);
+	} else {
+		await page.goto(pageUrl);
+	}
 
 	const mapDiv = await page.getByRole("application");
 
@@ -108,6 +114,7 @@ export const expectGroupPosition = async ({
 export const drawRectangularPolygon = async ({
 	mapDiv,
 	page,
+	size = "regular",
 }: {
 	mapDiv: {
 		x: number;
@@ -116,9 +123,10 @@ export const drawRectangularPolygon = async ({
 		height: number;
 	};
 	page: Page;
+	size?: "regular" | "small";
 }) => {
 	// Draw a rectangle
-	const sideLength = 100;
+	const sideLength = size === "regular" ? 100 : 70;
 	const halfLength = sideLength / 2;
 	const centerX = mapDiv.width / 2;
 	const centerY = mapDiv.height / 2;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "terra-draw",
-	"version": "0.0.1-alpha.67",
+	"version": "0.0.1-alpha.68",
 	"description": "Frictionless map drawing across mapping provider",
 	"scripts": {
 		"docs": "typedoc",
@@ -51,37 +51,37 @@
 		"maplibre"
 	],
 	"devDependencies": {
-		"@arcgis/core": "^4.27.6",
-		"@commitlint/cli": "^17.1.2",
-		"@commitlint/config-conventional": "^17.1.0",
-		"@googlemaps/js-api-loader": "^1.14.3",
-		"@swc/jest": "^0.2.36",
-		"@types/geojson": "^7946.0.8",
-		"@types/google.maps": "^3.49.2",
-		"@types/jest": "^29.5.12",
-		"@types/leaflet": "^1.7.11",
-		"@types/mapbox-gl": "^2.7.3",
-		"@types/rbush": "^3.0.0",
-		"@typescript-eslint/eslint-plugin": "^7.5.0",
-		"@typescript-eslint/parser": "^7.5.0",
-		"eslint": "^8.24.0",
-		"eslint-config-prettier": "^9.0.0",
-		"eslint-plugin-prettier": "^5.0.0",
-		"husky": "^7.0.0",
-		"jest": "^29.7.0",
-		"jest-environment-jsdom": "^29.7.0",
-		"leaflet": "^1.8.0",
-		"mapbox-gl": "^2.13.0",
+		"@arcgis/core": "4.27.6",
+		"@commitlint/cli": "17.1.2",
+		"@commitlint/config-conventional": "17.1.0",
+		"@googlemaps/js-api-loader": "1.14.3",
+		"@swc/jest": "0.2.36",
+		"@types/geojson": "7946.0.8",
+		"@types/google.maps": "3.49.2",
+		"@types/jest": "29.5.12",
+		"@types/leaflet": "1.7.11",
+		"@types/mapbox-gl": "2.7.3",
+		"@types/rbush": "3.0.0",
+		"@typescript-eslint/eslint-plugin": "7.5.0",
+		"@typescript-eslint/parser": "7.5.0",
+		"eslint": "8.57.0",
+		"eslint-config-prettier": "9.0.0",
+		"eslint-plugin-prettier": "5.0.0",
+		"husky": "7.0.0",
+		"jest": "29.7.0",
+		"jest-environment-jsdom": "29.7.0",
+		"leaflet": "1.8.0",
+		"mapbox-gl": "2.13.0",
 		"maplibre-gl": "3.2.0",
-		"microbundle": "^0.15.0",
-		"ol": "^7.1.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.25.12",
-		"typescript": "^5.4.4"
+		"microbundle": "0.15.0",
+		"ol": "7.1.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.25.12",
+		"typescript": "5.4.4"
 	},
 	"commitlint": {
 		"extends": [

package/tsconfig.json

@@ -15,5 +15,13 @@
 		"exclude": ["src/geometry/**/*.ts", "src/test/**/*.ts", "src/util/**/*.ts"],
 		"out": "docs",
 		"skipErrorChecking": true
-	}
+	},
+	"exclude": [
+		"node_modules/",
+		"guides/",
+		"docs/",
+		"dist/",
+		"development/dist",
+		"development/node_modules"
+	]
 }

package/dist/geometry/boolean/is-valid-linestring-feature.d.ts

@@ -1,2 +0,0 @@
-import { GeoJSONStoreFeatures } from "../../terra-draw";
-export declare function isValidLineStringFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;

package/dist/geometry/boolean/is-valid-point.d.ts

@@ -1,2 +0,0 @@
-import { GeoJSONStoreFeatures } from "../../terra-draw";
-export declare function isValidPoint(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;

package/dist/geometry/boolean/is-valid-polygon-feature.d.ts

@@ -1,3 +0,0 @@
-import { GeoJSONStoreFeatures } from "../../terra-draw";
-export declare function isValidPolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;
-export declare function isValidNonIntersectingPolygonFeature(feature: GeoJSONStoreFeatures, coordinatePrecision: number): boolean;