Merge branch 'main' into patch-1

guides/4.MODES.md

@@ -6,7 +6,7 @@ Modes are another important concept in Terra Draw, they encapsulate specific log
 - [Selection Mode](#selection-mode)
 - [Render Mode](#render-mode)
 
-Once added to Terra Draw upon instantiation, they and can be enabled by calling the `setMode` method on the Terra Draw instance and providing the Mode Name.
+Once added to Terra Draw upon instantiation, they can be enabled by calling the `setMode` method on the Terra Draw instance and providing the Mode Name.
 
 ## Mode Names
 
@@ -66,7 +66,7 @@ For example, if you draw a polygon using the `TerraDrawPolygonMode` the `mode` p
 
 ### Switching Modes
 
-You can swap to any given mode using it's name once we have instantiated and started our Terra Draw instance. For example, let's say we want to start in 'polygon' mode then later on switch to point mode, we could do that like so:
+You can swap to any given mode using its name once we have instantiated and started our Terra Draw instance. For example, let's say we want to start in 'polygon' mode then later on switch to point mode, we could do that like so:
 
 ```javascript
 draw.setMode('polygon')
@@ -129,11 +129,11 @@ This would stop the user from being able to create a polygon that is self inters
 
 You can combine these validations if you so wish. Any `validation` function will be run as part of `validateFeature` which is called by `addFeatures` on the public Terra Draw API/.
 
-You'll notice there are two arguments to the `validation` function, the first being the feature, the second being the context object. This has useful properties which can help with peforming the validation. One of the most useful properties is the `updateType` property which tells you what type of update the feature is receiving, where the options are `finish`, `commit` or `provisional`.
+You'll notice there are two arguments to the `validation` function, the first being the feature, the second being the context object. This has useful properties which can help with performing the validation. One of the most useful properties is the `updateType` property which tells you what type of update the feature is receiving, where the options are `finish`, `commit` or `provisional`.
 
 - `finish` - when the drawing of the feature is being finished
 - `commit` - when a coordinate has been added or removed from the feature
-- `provisonal` - when the geometry has been update, but the coordinate has not been fully committed to the geometry
+- `provisional` - when the geometry has been update, but the coordinate has not been fully committed to the geometry
 
 Using these can help you write more customised behaviours, for example you may only want to run the validation when the update is a `finish` or `commit` type, ensuring that validation is not prematurely preventing user interactions to update the feature.
 
@@ -171,7 +171,7 @@ We can also provide a `toCustom` function which allows snapping to some arbitrar
 
 #### Projections in Drawing Modes
 
-As we move forward Terra Draw will work on supporting Web Mercator maps out the box with the ability to support Globes (i.e. 3D spherical representations of the earth with no projection) as a secondary option. This is made slightly more complicated by the fact we know sometimes users want to draw geodesic geometries on a web mercator map, for example a geodesic circle or a great circle line. In future we will better align by assuming developers want web mercator first behaviours, with secondary support for globes via the `projection` property for built in modes.
+As we move forward Terra Draw will work on supporting Web Mercator maps out the box with the ability to support Globes (i.e., 3D spherical representations of the earth with no projection) as a secondary option. This is made slightly more complicated by the fact we know sometimes users want to draw geodesic geometries on a web mercator map, for example a geodesic circle or a great circle line. In future we will better align by assuming developers want web mercator first behaviours, with secondary support for globes via the `projection` property for built in modes.
 
 * Circle mode currently supports both web mercator and geodesic circles, using the `projection` property, which can be `globe` or `web-mercator` (default is `web-mercator`)
 * Select mode currently supports both web mercator and geodesic editing (scaling, rotating), although resizeable property currently only supports `web-mercator` as `projection` (default is `web-mercator`)
@@ -192,7 +192,7 @@ Note: If you want to draw great circle lines on a web mercator map, this is poss
 
 All modes work with keyboard and mouse interface. 
 
-There are varying degrees of support for touch devices. Currently on touch devices Select, Point, Line and Polygon Modes are fully supported. Circle, Rectangle and Angled Rectangle Modes work with the caveat with the UX is not ideal. Freehand is not currently suported. Currently on [terradraw.io](terradraw.io]) Circle, Rectange and Freehand modes are disabled on smaller devices. 
+There are varying degrees of support for touch devices. Currently on touch devices Select, Point, Line and Polygon Modes are fully supported. Circle, Rectangle and Angled Rectangle Modes work with the caveat with the UX is not ideal. Freehand is not currently supported. Currently on [terradraw.io](terradraw.io]) Circle, Rectangle and Freehand modes are disabled on smaller devices. 
 
 If you want to experiment you can use the local development environment, as described at [Development](https://github.com/JamesLMilner/terra-draw/blob/main/development/README.md)
 
@@ -423,7 +423,7 @@ It is possible to select and deselect a feature via the draw instance, which use
   // Select a given feature
   draw.selectFeature("f8e5a38d-ecfa-4294-8461-d9cff0e0d7f8");
 
-  // Deslect the given feature
+  // Deselect the given feature
   draw.deselectFeature("f8e5a38d-ecfa-4294-8461-d9cff0e0d7f8");
 
 ```
@@ -505,4 +505,4 @@ See the [Development](./6.DEVELOPMENT.md) guide for more information on creating
 5. [ ] [Styling](./5.STYLING.md)
 6. [ ] [Events](./6.EVENTS.md)
 7. [ ] [Development](./7.DEVELOPMENT.md)
-8. [ ] [Examples](./8.EXAMPLES.md)
+8. [ ] [Examples](./8.EXAMPLES.md)

packages/e2e/src/index.ts

@@ -131,7 +131,9 @@ const example = {
 						},
 					},
 				}),
-				new TerraDrawPointMode(),
+				new TerraDrawPointMode({
+					editable: this.config?.includes("pointEditable"),
+				}),
 				new TerraDrawLineStringMode({
 					snapping: {
 						toCoordinate: this.config?.includes("snappingCoordinate"),

packages/e2e/tests/leaflet.spec.ts

@@ -71,6 +71,28 @@ test.describe("point mode", () => {
 
 		await expectPaths({ page, count: 3 });
 	});
+
+	test("mode can set with editable set to true and points can be moved", async ({
+		page,
+	}) => {
+		const mapDiv = await setupMap({
+			page,
+			configQueryParam: ["pointEditable"],
+		});
+		await changeMode({ page, mode });
+
+		await page.mouse.click(mapDiv.width / 2, mapDiv.height / 2);
+		await expectGroupPosition({ page, x: 633, y: 353 });
+
+		await page.mouse.move(mapDiv.width / 2, mapDiv.height / 2);
+		await page.mouse.down();
+		await page.mouse.move(mapDiv.width / 3, mapDiv.height / 3);
+		await page.mouse.up();
+
+		await expectPaths({ page, count: 1 });
+
+		await expectGroupPosition({ page, x: 419, y: 233 });
+	});
 });
 
 test.describe("linestring mode", () => {

packages/e2e/tests/setup.ts

@@ -3,6 +3,7 @@ import { Page, expect } from "@playwright/test";
 export const pageUrl = "http://localhost:3000/";
 
 export type TestConfigOptions =
+	| "pointEditable"
 	| "validationSuccess"
 	| "validationFailure"
 	| "insertCoordinates"

packages/terra-draw/src/common.ts

@@ -172,6 +172,7 @@ export const SELECT_PROPERTIES = {
 } as const;
 
 export const COMMON_PROPERTIES = {
+	EDITED: "edited",
 	CLOSING_POINT: "closingPoint",
 	SNAPPING_POINT: "snappingPoint",
 };