terra-draw - npm Package Compare versions

Comparing version 1.0.0-beta.9 to 1.0.0-beta.10

dist/common.d.ts

@@ -18,2 +18,6 @@ import { StoreChangeHandler, GeoJSONStore, GeoJSONStoreFeatures, FeatureId } from "./store/store";
 }
+export type CartesianPoint = {
+    x: number;
+    y: number;
+};
 export interface TerraDrawMouseEvent {
@@ -34,6 +38,3 @@ lng: number;
 export type SetCursor = (cursor: "unset" | "grab" | "grabbing" | "crosshair" | "pointer" | "wait" | "move") => void;
-export type Project = (lng: number, lat: number) => {
-    x: number;
-    y: number;
-};
+export type Project = (lng: number, lat: number) => CartesianPoint;
 export type Unproject = (x: number, y: number) => {
@@ -117,5 +118,6 @@ lat: number;
 };
-export declare const POLYGON_PROPERTIES: {
+export declare const COMMON_PROPERTIES: {
     CLOSING_POINT: string;
+    SNAPPING_POINT: string;
 };
 export {};

dist/geometry/calculate-relative-angle.d.ts

@@ -0,1 +1,2 @@
+import { CartesianPoint } from "../common";
 /**
@@ -8,11 +9,2 @@ * Calculate the relative angle between two lines
  */
-export declare function calculateRelativeAngle(A: {
-    x: number;
-    y: number;
-}, B: {
-    x: number;
-    y: number;
-}, C: {
-    x: number;
-    y: number;
-}): number;
+export declare function calculateRelativeAngle(A: CartesianPoint, B: CartesianPoint, C: CartesianPoint): number;

dist/geometry/clockwise.d.ts

@@ -1,10 +0,2 @@
-export declare function isClockwiseWebMercator(center: {
-    x: number;
-    y: number;
-}, secondCoord: {
-    x: number;
-    y: number;
-}, thirdCoord: {
-    x: number;
-    y: number;
-}): boolean;
+import { CartesianPoint } from "../common";
+export declare function isClockwiseWebMercator(center: CartesianPoint, secondCoord: CartesianPoint, thirdCoord: CartesianPoint): boolean;

dist/geometry/determine-halfplane.d.ts

@@ -1,10 +0,2 @@
-export declare function determineHalfPlane(point: {
-    x: number;
-    y: number;
-}, lineStart: {
-    x: number;
-    y: number;
-}, lineEnd: {
-    x: number;
-    y: number;
-}): string;
+import { CartesianPoint } from "../common";
+export declare function determineHalfPlane(point: CartesianPoint, lineStart: CartesianPoint, lineEnd: CartesianPoint): string;

dist/geometry/measure/bearing.d.ts

 import { Position } from "geojson";
+import { CartesianPoint } from "../../common";
 export declare function bearing(start: Position, end: Position): number;
-export declare function webMercatorBearing({ x: x1, y: y1 }: {
-    x: number;
-    y: number;
-}, { x: x2, y: y2 }: {
-    x: number;
-    y: number;
-}): number;
+export declare function webMercatorBearing({ x: x1, y: y1 }: CartesianPoint, { x: x2, y: y2 }: CartesianPoint): number;
 export declare function normalizeBearing(bearing: number): number;

dist/geometry/measure/destination.d.ts

 import { Position } from "geojson";
+import { CartesianPoint } from "../../common";
 export declare function destination(origin: Position, distance: number, bearing: number): Position;
-export declare function webMercatorDestination({ x, y }: {
-    x: number;
-    y: number;
-}, distance: number, bearing: number): {
-    x: number;
-    y: number;
-};
+export declare function webMercatorDestination({ x, y }: CartesianPoint, distance: number, bearing: number): CartesianPoint;

dist/geometry/measure/pixel-distance-to-line.d.ts

@@ -1,10 +0,2 @@
-export declare const pixelDistanceToLine: (point: {
-    x: number;
-    y: number;
-}, linePointOne: {
-    x: number;
-    y: number;
-}, linePointTwo: {
-    x: number;
-    y: number;
-}) => number;
+import { CartesianPoint } from "../../common";
+export declare const pixelDistanceToLine: (point: CartesianPoint, linePointOne: CartesianPoint, linePointTwo: CartesianPoint) => number;

dist/geometry/measure/pixel-distance.d.ts

@@ -1,7 +0,2 @@
-export declare const cartesianDistance: (pointOne: {
-    x: number;
-    y: number;
-}, pointTwo: {
-    x: number;
-    y: number;
-}) => number;
+import { CartesianPoint } from "../../common";
+export declare const cartesianDistance: (pointOne: CartesianPoint, pointTwo: CartesianPoint) => number;

dist/geometry/project/web-mercator.d.ts

@@ -0,1 +1,2 @@
+import { CartesianPoint } from "../../common";
 /**
@@ -7,6 +8,3 @@ * Convert longitude and latitude to web mercator x and y
  */
-export declare const lngLatToWebMercatorXY: (lng: number, lat: number) => {
-    x: number;
-    y: number;
-};
+export declare const lngLatToWebMercatorXY: (lng: number, lat: number) => CartesianPoint;
 /**
@@ -13,0 +11,0 @@ * Convert web mercator x and y to longitude and latitude

dist/geometry/web-mercator-centroid.d.ts

 import { Feature, LineString, Polygon } from "geojson";
+import { CartesianPoint } from "../common";
 /**
@@ -8,5 +9,2 @@ * Calculates the centroid of a GeoJSON Polygon or LineString in Web Mercator
  */
-export declare function webMercatorCentroid(feature: Feature<Polygon | LineString>): {
-    x: number;
-    y: number;
-};
+export declare function webMercatorCentroid(feature: Feature<Polygon | LineString>): CartesianPoint;

dist/modes/angled-rectangle/angled-rectangle.mode.d.ts

@@ -19,3 +19,2 @@ import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
 interface TerraDrawPolygonModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
-    snapping?: boolean;
     pointerDistance?: number;
@@ -22,0 +21,0 @@ keyEvents?: TerraDrawPolygonModeKeyEvents | null;

dist/modes/linestring/linestring.mode.d.ts

@@ -16,2 +16,6 @@ import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
     closingPointOutlineWidth: NumericStyling;
+    snappingPointColor: HexColorStyling;
+    snappingPointWidth: NumericStyling;
+    snappingPointOutlineColor: HexColorStyling;
+    snappingPointOutlineWidth: NumericStyling;
 };
@@ -27,3 +31,5 @@ interface Cursors {
 interface TerraDrawLineStringModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
-    snapping?: boolean;
+    snapping?: {
+        toCoordinate?: boolean;
+    };
     pointerDistance?: number;
@@ -45,3 +51,4 @@ keyEvents?: TerraDrawLineStringModeKeyEvents | null;
     private lastCommitedCoordinates;
-    private snapping;
+    private snappedPointId;
+    private coordinateSnapping;
     private insertPoint;
@@ -48,0 +55,0 @@ constructor(options?: TerraDrawLineStringModeOptions<LineStringStyling>);

dist/modes/polygon/polygon.mode.d.ts

@@ -18,2 +18,6 @@ import { TerraDrawMouseEvent, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, HexColorStyling, NumericStyling, Cursor } from "../../common";
     closingPointOutlineColor: HexColorStyling;
+    snappingPointWidth: NumericStyling;
+    snappingPointColor: HexColorStyling;
+    snappingPointOutlineWidth: NumericStyling;
+    snappingPointOutlineColor: HexColorStyling;
 };
@@ -25,3 +29,6 @@ interface Cursors {
 interface TerraDrawPolygonModeOptions<T extends CustomStyling> extends BaseModeOptions<T> {
-    snapping?: boolean;
+    snapping?: {
+        toLine?: boolean;
+        toCoordinate?: boolean;
+    };
     pointerDistance?: number;
@@ -37,3 +44,5 @@ keyEvents?: TerraDrawPolygonModeKeyEvents | null;
     private snappingEnabled;
-    private snapping;
+    private snappedPointId;
+    private lineSnapping;
+    private coordinateSnapping;
     private pixelDistance;
@@ -54,2 +63,3 @@ private closingPoints;
     private updatePolygonGeometry;
+    private snapCoordinate;
     /** @internal */
@@ -56,0 +66,0 @@ onClick(event: TerraDrawMouseEvent): void;

e2e/tests/leaflet.spec.ts

@@ -192,2 +192,41 @@ import { test, expect } from "@playwright/test";
 		});
+
+		test(`mode can set with snapping enabled used to create multiple linestrings${name}`, async ({
+			page,
+		}) => {
+			const mapDiv = await setupMap({
+				page,
+				configQueryParam: config
+					? [...config, "snappingCoordinate"]
+					: undefined,
+			});
+			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 / 3, mapDiv.height / 3);
+
+			// Should see snapping point
+			await expectPaths({ page, count: 2 });
+
+			await page.mouse.click(mapDiv.width / 3, mapDiv.height / 3);
+			await page.mouse.move(mapDiv.width / 4, mapDiv.height / 4);
+
+			// Snapping point disappears but the second line is created so it is still 2
+			await expectPaths({ page, count: 2 });
+		});
 	}
@@ -309,2 +348,56 @@ });
 	});
+
+	test("mode can set and used to create a polygon with snapping enabled", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: ["snappingCoordinate"],
+		});
+		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);
+
+		// Close the square
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+
+		// One point + one line
+		await expectPaths({ page, count: 1 });
+
+		// Let's create a new polygon attached to the square, snapping to it
+		await page.mouse.click(bottomLeft.x, bottomLeft.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y);
+		await page.mouse.click(bottomRight.x, bottomRight.y + 50);
+
+		await expectPaths({ page, count: 4 });
+
+		await page.mouse.click(bottomRight.x, bottomRight.y + 50);
+
+		await expectPaths({ page, count: 2 });
+
+		// Go to another corner and it should snap with a point appearing
+		await page.mouse.click(topLeft.x, topLeft.y);
+
+		await expectPaths({ page, count: 3 });
+	});
 });
@@ -311,0 +404,0 @@

e2e/tests/setup.ts

@@ -11,3 +11,4 @@ import { Page, expect } from "@playwright/test";
 	| "globeCircle"
-	| "globeSelect";
+	| "globeSelect"
+	| "snappingCoordinate";
 
@@ -14,0 +15,0 @@ export const setupMap = async ({

package.json

 {
 	"name": "terra-draw",
-	"version": "1.0.0-beta.9",
+	"version": "1.0.0-beta.10",
 	"description": "Frictionless map drawing across mapping provider",
@@ -5,0 +5,0 @@ "scripts": {

No alert changes

Improved metrics

Total package byte prevSize

3688024

increased by4.1%

Number of package files

114

increased by2.7%

Lines of code

10341

increased by1.6%

No dependency changes