terra-draw - npm Package Compare versions

Comparing version 0.0.1-alpha.55 to 0.0.1-alpha.56

dist/geometry/transform/scale.d.ts

@@ -1,2 +0,2 @@
-import { Feature, LineString, Polygon } from "geojson";
-export declare function transformScale(feature: Feature<Polygon | LineString>, factor: number): Feature<Polygon | LineString, import("geojson").GeoJsonProperties>;
+import { Feature, LineString, Polygon, Position } from "geojson";
+export declare function transformScale(feature: Feature<Polygon | LineString>, factor: number, origin: Position): Feature<Polygon | LineString, import("geojson").GeoJsonProperties>;

dist/modes/select/select.mode.d.ts

@@ -20,2 +20,3 @@ import { TerraDrawMouseEvent, TerraDrawKeyboardEvent, TerraDrawAdapterStyling, HexColorStyling, NumericStyling, Cursor } from "../../common";
             draggable?: boolean;
+            maintainShapeFrom?: "center" | "opposite";
             deletable?: boolean;
@@ -77,2 +78,3 @@ };
     private scaleFeature;
+    private maintainShape;
     private cursors;
@@ -79,0 +81,0 @@ constructor(options?: TerraDrawSelectModeOptions<SelectionStyling>);

e2e/package.json

@@ -9,3 +9,4 @@ {
 		"serve": "webpack serve",
-		"test": "playwright test",
+		"test": "playwright test --workers=1",
+		"test:help": "playwright test --help",
 		"test:ui": "playwright test --ui --headed"
@@ -16,10 +17,12 @@ },
 	"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"
+		"webpack-dev-server": "^4.11.1"
 	}
 }

e2e/playwright.config.ts

@@ -32,3 +32,3 @@ import { defineConfig, devices } from "@playwright/test";
 	},
-
+	timeout: 5 * 1000,
 	/* Configure projects for major browsers */
@@ -35,0 +35,0 @@ projects: [

e2e/src/index.ts

@@ -49,2 +49,3 @@ import L from "leaflet";
 				new TerraDrawSelectMode({
+					dragEventThrottle: 0,
 					flags: {
@@ -51,0 +52,0 @@ arbitary: {

e2e/tests/leaflet.spec.ts

 import { test, expect } from "@playwright/test";
 import {
 	changeMode,
+	drawRectanglePolygon,
+	expectGroupPosition,
 	expectPathDimensions,
@@ -27,2 +29,22 @@ expectPaths,
 	});
+
+	test("there are no console errors", async ({ page }) => {
+		const errors: string[] = [];
+		page.on("console", (msg) => {
+			if (msg.type() === "error") {
+				errors.push(msg.text());
+			}
+		});
+		await page.goto(pageUrl);
+		await expect(page.getByRole("application")).toBeVisible();
+
+		expect(errors).toEqual([]);
+	});
+
+	test("there are no build issues", async ({ page }) => {
+		await page.goto(pageUrl);
+		await expect(
+			await page.locator("#webpack-dev-server-client-overlay").count(),
+		).toBe(0);
+	});
 });
@@ -36,6 +58,5 @@
 		await changeMode({ page, mode });
-
 		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
 
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
@@ -53,3 +74,3 @@
 
-		expectPaths({ page, count: 3 });
+		await expectPaths({ page, count: 3 });
 	});
@@ -74,3 +95,3 @@ });
 
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
@@ -91,3 +112,3 @@
 		// One point + one line
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 2 });
 
@@ -98,3 +119,3 @@ // Close first line
 		// One line
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 1 });
 
@@ -111,3 +132,3 @@ // Second line
 		// Two lines
-		expectPaths({ page, count: 2 });
+		await expectPaths({ page, count: 2 });
 	});
@@ -149,3 +170,3 @@ });
 		// One point + one line
-		expectPaths({ page, count: 1 });
+		await expectPaths({ page, count: 1 });
 	});
@@ -240,2 +261,70 @@ });
 	});
+
+	test("selected polygon can be dragged", async ({ page }) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectanglePolygon({ mapDiv, page });
+
+		// 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(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.down();
+		await page.mouse.move(mapDiv.width / 2 + 50, mapDiv.height / 2 + 50, {
+			steps: 30,
+		}); // Steps is required
+		await page.mouse.up();
+
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		await expectGroupPosition({ page, x: x + 48, y: y + 48 });
+	});
+
+	test("selected polygon can have individual coordinates dragged", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({ page });
+
+		await changeMode({ page, mode: "polygon" });
+
+		// Draw a rectangle
+		const { topLeft } = await drawRectanglePolygon({ mapDiv, page });
+
+		// 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 }); // Steps is required
+		await page.mouse.up();
+
+		// Deselect
+		await page.mouse.click(mapDiv.width - 10, mapDiv.height / 2);
+
+		// Dragged the coordinate to the left and down slightly
+		await expectGroupPosition({ page, x: 538, y: 308 });
+	});
 });
@@ -256,17 +345,5 @@
 		await changeMode({ page, mode: "polygon" });
-		const sideLength = 100;
-		const halfLength = sideLength / 2;
-		const centerX = mapDiv.width / 2;
-		const centerY = mapDiv.height / 2;
-		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 };
-		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);
-		await page.mouse.click(bottomLeft.x, bottomLeft.y); // Closed
+		await drawRectanglePolygon({ mapDiv, page });
 
-		expectPaths({ page, count: 3 });
+		await expectPaths({ page, count: 3 });
 
@@ -276,4 +353,4 @@ const button = page.getByText("clear");
 
-		expectPaths({ page, count: 0 });
+		await expectPaths({ page, count: 0 });
 	});
 });

e2e/tests/setup.ts

@@ -44,3 +44,4 @@ import { Page, expect } from "@playwright/test";
 	const modeText = mode.charAt(0).toUpperCase() + mode.slice(1);
-	const button = page.getByText(modeText);
+	const buttons = page.getByTestId("buttons");
+	const button = buttons.getByText(modeText, { exact: true });
 
@@ -67,3 +68,3 @@ // Click the mode button
 	if (count > 0) {
-		page.waitForSelector(selector);
+		await page.waitForSelector(selector);
 		expect(await page.locator(selector).count()).toBe(count);
@@ -91,1 +92,48 @@ } else {
 };
+
+export const expectGroupPosition = async ({
+	page,
+	x,
+	y,
+}: {
+	page: Page;
+	x: number;
+	y: number;
+}) => {
+	const selector = "svg > g > path";
+
+	const boundingBox = await page.locator(selector).boundingBox();
+
+	expect(boundingBox?.x).toBe(x);
+	expect(boundingBox?.y).toBe(y);
+};
+
+export const drawRectanglePolygon = async ({
+	mapDiv,
+	page,
+}: {
+	mapDiv: {
+		x: number;
+		y: number;
+		width: number;
+		height: number;
+	};
+	page: Page;
+}) => {
+	// Draw a rectangle
+	const sideLength = 100;
+	const halfLength = sideLength / 2;
+	const centerX = mapDiv.width / 2;
+	const centerY = mapDiv.height / 2;
+	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 };
+	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);
+	await page.mouse.click(bottomLeft.x, bottomLeft.y); // Closed
+
+	return { topLeft, topRight, bottomRight, bottomLeft };
+};

e2e/webpack.config.js

@@ -29,8 +29,6 @@ const path = require("path");
 		},
-		watchFiles: [
-			"./src",
-			"./*.{js,json,ts,html}",
-			"../src",
-			"../*.{js,json,ts,html}",
-		],
+		liveReload: !process.env.CI,
+		watchFiles: !process.env.CI
+			? ["./src", "./*.{js,json,ts,html}", "../src", "../*.{js,json,ts,html}"]
+			: [],
 		compress: true,
@@ -37,0 +35,0 @@ port: 3000,

package.json

 {
 	"name": "terra-draw",
-	"version": "0.0.1-alpha.55",
+	"version": "0.0.1-alpha.56",
 	"description": "Frictionless map drawing across mapping provider",
@@ -5,0 +5,0 @@ "scripts": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4019625

increased by2.3%

Number of package files

93

increased by1.09%

Lines of code

9043

increased by9.14%

Worsened metrics

Number of low supply chain risk alerts

3

increased by200%

No dependency changes