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

package/e2e/package.json

@@ -13,14 +13,14 @@
 	"author": "James Milner",
 	"license": "MIT",
 	"devDependencies": {
-		"@playwright/test": "^1.40.1",
-		"@types/jest": "^29.5.12",
-		"@types/node": "^20.10.5",
-		"dotenv-webpack": "^8.0.0",
-		"ts-loader": "^9.5.1",
-		"typescript": "^4.7.4",
-		"webpack": "^5.73.0",
-		"webpack-cli": "^4.10.0",
-		"webpack-dev-server": "^4.11.1"
+		"@playwright/test": "1.40.1",
+		"@types/jest": "29.5.12",
+		"@types/node": "20.10.5",
+		"dotenv-webpack": "8.0.0",
+		"ts-loader": "9.5.1",
+		"typescript": "5.5.2",
+		"webpack": "5.73.0",
+		"webpack-cli": "4.10.0",
+		"webpack-dev-server": "4.11.1"
 	}
 }

package/e2e/public/index.html

@@ -42,7 +42,6 @@
         <button id="polygon">Polygon</button>
         <button id="rectangle">Rectangle</button>
         <button id="circle">Circle</button>
-        <button id="greatcircle">Greatcircle</button>
         <button id="clear">Clear</button>
     </div>
 

package/e2e/tests/leaflet.spec.ts

@@ -8,6 +8,7 @@ import {
 	expectPaths,
 	pageUrl,
 	setupMap,
+	TestConfigOptions,
 } from "./setup";
 
 test.describe("page setup", () => {
@@ -77,55 +78,120 @@ test.describe("point mode", () => {
 test.describe("linestring mode", () => {
 	const mode = "linestring";
 
-	test("mode can set and can be used to create a linestring", async ({
-		page,
-	}) => {
-		const mapDiv = await setupMap({ page });
-		await changeMode({ page, mode });
+	const options = [
+		{ name: "", config: undefined },
+		{
+			name: " with insert coordinates for web mercator projection",
+			config: "insertCoordinates",
+		},
+		{
+			name: " with insert coordinates for globe projection",
+			config: "insertCoordinatesGlobe",
+		},
+	] 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 ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({ page, configQueryParam: config });
+			await changeMode({ page, mode });
+
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			// Close
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			await expectPaths({ page, count: 1 });
+		});
 
-		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
-		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
-		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
-		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+		test(`mode can set and can be used to create a linestring with multiple points${name}`, async ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({ page, configQueryParam: config });
+			await changeMode({ page, mode });
 
-		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
-		await expectPaths({ page, count: 1 });
-	});
+			// Draw coordinate 2
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
 
-	test("mode can set and can be used to create multiple linestrings", async ({
-		page,
-	}) => {
-		const mapDiv = await setupMap({ page });
-		await changeMode({ page, mode });
+			// Draw coordinate 3
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 3);
 
-		// First line
-		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
-		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
-		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
-		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+			// Close
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 3);
 
-		// One point + one line
-		await expectPaths({ page, count: 2 });
+			await expectPaths({ page, count: 1 });
+		});
 
-		// Close first line
-		await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+		test(`mode can set and can be used to create a linestring with multiple clicked points${name}`, async ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({ page, configQueryParam: config });
+			await changeMode({ page, mode });
 
-		// One line
-		await expectPaths({ page, count: 1 });
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
 
-		// Second line
-		await page.mouse.move(mapDiv.width / 4, mapDiv.height / 4);
-		await page.mouse.click(mapDiv.width / 4, mapDiv.height / 4);
-		await page.mouse.move(mapDiv.width / 5, mapDiv.height / 5);
-		await page.mouse.click(mapDiv.width / 5, mapDiv.height / 5);
+			// Draw coordinate 2
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 2);
 
-		// Close second line
-		await page.mouse.click(mapDiv.width / 5, mapDiv.height / 5);
+			// Draw coordinate 3
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 3);
 
-		// Two lines
-		await expectPaths({ page, count: 2 });
-	});
+			// Close
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 3);
+
+			await expectPaths({ page, count: 1 });
+		});
+
+		test(`mode can set and can be used to create multiple linestrings${name}`, async ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({ page, configQueryParam: config });
+			await changeMode({ page, mode });
+
+			// First line
+			await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+			await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			// One point + one line
+			await expectPaths({ page, count: 2 });
+
+			// Close first line
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+
+			// One line
+			await expectPaths({ page, count: 1 });
+
+			// Second line
+			await page.mouse.move(mapDiv.width / 4, mapDiv.height / 4);
+			await page.mouse.click(mapDiv.width / 4, mapDiv.height / 4);
+			await page.mouse.move(mapDiv.width / 5, mapDiv.height / 5);
+			await page.mouse.click(mapDiv.width / 5, mapDiv.height / 5);
+
+			// Close second line
+			await page.mouse.click(mapDiv.width / 5, mapDiv.height / 5);
+
+			// Two lines
+			await expectPaths({ page, count: 2 });
+		});
+	}
 });
 
 test.describe("polygon mode", () => {
@@ -163,6 +229,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", () => {
@@ -187,7 +331,9 @@ test.describe("rectangle mode", () => {
 test.describe("circle mode", () => {
 	const mode = "circle";
 
-	test("mode can set and can be used to create a circle", async ({ page }) => {
+	test("mode can set and can be used to create a web mercator circle", async ({
+		page,
+	}) => {
 		const mapDiv = await setupMap({ page });
 		await changeMode({ page, mode });
 
@@ -199,15 +345,11 @@ test.describe("circle mode", () => {
 
 		await expectPathDimensions({ page, width: 146, height: 146 });
 	});
-});
 
-test.describe("greatcircle mode", () => {
-	const mode = "greatcircle";
-
-	test("mode can set and can be used to create a greatcircle", async ({
+	test("mode can set and can be used to create a geodesic circle", async ({
 		page,
 	}) => {
-		const mapDiv = await setupMap({ page });
+		const mapDiv = await setupMap({ page, configQueryParam: "geodesicCircle" });
 		await changeMode({ page, mode });
 
 		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
@@ -215,6 +357,8 @@ test.describe("greatcircle mode", () => {
 
 		// One point + one line
 		await expectPaths({ page, count: 1 });
+
+		await expectPathDimensions({ page, width: 146, height: 146 });
 	});
 });
 
@@ -320,7 +464,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

@@ -2,17 +2,30 @@ import { Page, expect } from "@playwright/test";
 
 export const pageUrl = "http://localhost:3000/";
 
+export type TestConfigOptions =
+	| "validationSuccess"
+	| "validationFailure"
+	| "insertCoordinates"
+	| "insertCoordinatesGlobe"
+	| "geodesicCircle";
+
 export const setupMap = async ({
 	page,
+	configQueryParam,
 }: {
 	page: Page;
+	configQueryParam?: TestConfigOptions;
 }): 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");
 
@@ -31,14 +44,7 @@ export const changeMode = async ({
 	mode,
 }: {
 	page: Page;
-	mode:
-		| "point"
-		| "polygon"
-		| "linestring"
-		| "select"
-		| "rectangle"
-		| "circle"
-		| "greatcircle";
+	mode: "point" | "polygon" | "linestring" | "select" | "rectangle" | "circle";
 }) => {
 	const modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
 	const buttons = page.getByTestId("buttons");
@@ -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.69",
 	"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.9.12",
+		"@types/mapbox-gl": "2.7.3",
+		"@types/rbush": "3.0.0",
+		"@typescript-eslint/eslint-plugin": "7.14.1",
+		"@typescript-eslint/parser": "7.14.1",
+		"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.9.4",
+		"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.26.2",
+		"typescript": "5.5.2"
 	},
 	"commitlint": {
 		"extends": [
@@ -154,5 +154,6 @@
 				"section": "Reverts"
 			}
 		]
-	}
+	},
+	"sideEffects": false
 }

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;

package/dist/geometry/shape/great-circle-line.d.ts

@@ -1,12 +0,0 @@
-import { Feature, LineString, Position } from "geojson";
-import { JSONObject } from "../../store/store";
-export declare function greatCircleLine<Properties extends JSONObject>({ start, end, options, }: {
-    start: Position;
-    end: Position;
-    options?: {
-        numberOfPoints?: number;
-        offset?: number;
-        properties?: Properties;
-        coordinatePrecision?: number;
-    };
-}): Feature<LineString, import("geojson").GeoJsonProperties> | null;

package/dist/modes/great-circle-snapping.behavior.d.ts

@@ -1,14 +0,0 @@
-import { BehaviorConfig, TerraDrawModeBehavior } from "./base.behavior";
-import { TerraDrawMouseEvent } from "../common";
-import { Position } from "geojson";
-import { ClickBoundingBoxBehavior } from "./click-bounding-box.behavior";
-import { FeatureId } from "../store/store";
-import { PixelDistanceBehavior } from "./pixel-distance.behavior";
-export declare class GreatCircleSnappingBehavior extends TerraDrawModeBehavior {
-    readonly config: BehaviorConfig;
-    private readonly pixelDistance;
-    private readonly clickBoundingBox;
-    constructor(config: BehaviorConfig, pixelDistance: PixelDistanceBehavior, clickBoundingBox: ClickBoundingBoxBehavior);
-    getSnappableCoordinate: (event: TerraDrawMouseEvent, currentFeatureId?: FeatureId) => Position | undefined;
-    private getSnappableEnds;
-}