feat: add opposite resizeable option for select mode

JamesLMilner · Mar 5, 2024 · 4a4ed70 · 4a4ed70
1 parent dd04699
commit 4a4ed70
Show file tree

Hide file tree

Showing 7 changed files with 245 additions and 144 deletions.
diff --git a/development/src/index.ts b/development/src/index.ts
@@ -120,7 +120,7 @@ const getModes = () => {
 						coordinates: {
 							midpoints: false,
 							draggable: true,
-							resizable: "opposite-corner-fixed",
+							resizable: "opposite",
 							deletable: true,
 						},
 					},
@@ -131,7 +131,7 @@ const getModes = () => {
 						coordinates: {
 							midpoints: false,
 							draggable: true,
-							resizable: "opposite-corner-fixed",
+							resizable: "opposite",
 							deletable: true,
 						},
 					},
@@ -301,31 +301,6 @@ const example = {
 			draw.start();
 
 			addModeChangeHandler(draw, currentSelected);
-
-			draw.addFeatures([
-				{
-					id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
-					type: "Feature",
-					geometry: {
-						type: "Polygon",
-						coordinates: [
-							[
-								[-10.882644653, 50.185252473],
-								[-13.109436035, 19.597312986],
-								[39.221878052, 20.101075197],
-								[37.385101318, 57.384672869],
-								[4.678115845, 55.825201858],
-								[-10.882644653, 50.185252473],
-							],
-						],
-					},
-					properties: {
-						mode: "polygon",
-					},
-				},
-			]);
-
-			draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
 		});
 		this.initialised.push("maplibre");
 	},
@@ -376,31 +351,6 @@ const example = {
 
 			addModeChangeHandler(draw, currentSelected);
 
-			draw.addFeatures([
-				{
-					id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
-					type: "Feature",
-					geometry: {
-						type: "Polygon",
-						coordinates: [
-							[
-								[-10.882644653, 50.185252473],
-								[-13.109436035, 19.597312986],
-								[39.221878052, 20.101075197],
-								[37.385101318, 57.384672869],
-								[4.678115845, 55.825201858],
-								[-10.882644653, 50.185252473],
-							],
-						],
-					},
-					properties: {
-						mode: "polygon",
-					},
-				},
-			]);
-
-			draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
-
 			this.initialised.push("openlayers");
 		});
 	},
@@ -451,31 +401,6 @@ const example = {
 					// we ould ned to do them in here
 					this.initialised.push("google");
 					addModeChangeHandler(draw, currentSelected);
-
-					draw.addFeatures([
-						{
-							id: "9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1",
-							type: "Feature",
-							geometry: {
-								type: "Polygon",
-								coordinates: [
-									[
-										[-10.882644653, 50.185252473],
-										[-13.109436035, 19.597312986],
-										[39.221878052, 20.101075197],
-										[37.385101318, 57.384672869],
-										[4.678115845, 55.825201858],
-										[-10.882644653, 50.185252473],
-									],
-								],
-							},
-							properties: {
-								mode: "polygon",
-							},
-						},
-					]);
-
-					draw.selectFeature("9489d9ca-54f9-4a81-9ab4-3d2503cf9ea1");
 				});
 			});
 

diff --git a/e2e/src/index.ts b/e2e/src/index.ts
@@ -81,7 +81,7 @@ const example = {
 								draggable: true,
 								coordinates: {
 									draggable: true,
-									resizable: "opposite-corner-fixed",
+									resizable: "opposite-fixed",
 								},
 							},
 						},

diff --git a/guides/4.MODES.md b/guides/4.MODES.md
@@ -136,9 +136,9 @@ const selectMode = new TerraDrawSelectMode({
 
           // [Requires draggable to be true] allow resizing of the geometry from 
           // a given origin. Center fixed will allow resizing on fixed aspect ratio from the center
-          // and opposite-corner-fixed allows resizing from the opposite corner of the bounding box 
+          // and opposite-fixed allows resizing from the opposite corner of the bounding box 
           // of the geometry.
-          resizeable: 'center-fixed', // can also be 'opposite-corner-fixed'
+          resizeable: 'center-fixed', // can also be 'opposite-fixed'
 
           // Can be deleted
           deletable: true,

diff --git a/src/modes/select/behaviors/drag-coordinate-resize.behavior.spec.ts b/src/modes/select/behaviors/drag-coordinate-resize.behavior.spec.ts
@@ -43,6 +43,7 @@ describe("DragCoordinateResizeBehavior", () => {
 				new PixelDistanceBehavior(config),
 				selectionPointBehavior,
 				new MidPointBehavior(config, selectionPointBehavior),
+				10,
 			);
 		});
 	});
@@ -65,6 +66,7 @@ describe("DragCoordinateResizeBehavior", () => {
 				pixelDistanceBehavior,
 				selectionPointBehavior,
 				midpointBehavior,
+				10,
 			);
 		});
 
@@ -158,12 +160,13 @@ describe("DragCoordinateResizeBehavior", () => {
 
 					jest.spyOn(config.store, "updateGeometry");
 
-					(config.project as jest.Mock)
-						.mockReturnValueOnce({ x: 0, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 1 })
-						.mockReturnValueOnce({ x: 1, y: 1 })
-						.mockReturnValueOnce({ x: 1, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 0 });
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
 
 					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "center-fixed");
 					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "center-fixed");
@@ -177,9 +180,13 @@ describe("DragCoordinateResizeBehavior", () => {
 
 					dragMaintainedShapeBehavior.startDragging(id, 0);
 
-					(config.project as jest.Mock)
-						.mockReturnValueOnce({ x: 0, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 1 });
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
 
 					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "center-fixed");
 					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "center-fixed");
@@ -188,29 +195,24 @@ describe("DragCoordinateResizeBehavior", () => {
 				});
 			});
 
-			describe("opposite-corner-fixed", () => {
+			describe("opposite-fixed", () => {
 				it("updates the Polygon coordinate if within pointer distance", () => {
 					const id = createStorePolygon(config);
 
 					dragMaintainedShapeBehavior.startDragging(id, 0);
 
 					jest.spyOn(config.store, "updateGeometry");
 
-					(config.project as jest.Mock)
-						.mockReturnValueOnce({ x: 0, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 1 })
-						.mockReturnValueOnce({ x: 1, y: 1 })
-						.mockReturnValueOnce({ x: 1, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 0 });
-
-					dragMaintainedShapeBehavior.drag(
-						mockDrawEvent(),
-						"opposite-corner-fixed",
-					);
-					dragMaintainedShapeBehavior.drag(
-						mockDrawEvent(),
-						"opposite-corner-fixed",
-					);
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
+
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite-fixed");
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite-fixed");
 
 					expect(config.store.updateGeometry).toBeCalledTimes(1);
 				});
@@ -221,18 +223,63 @@ describe("DragCoordinateResizeBehavior", () => {
 
 					dragMaintainedShapeBehavior.startDragging(id, 0);
 
-					(config.project as jest.Mock)
-						.mockReturnValueOnce({ x: 0, y: 0 })
-						.mockReturnValueOnce({ x: 0, y: 1 });
-
-					dragMaintainedShapeBehavior.drag(
-						mockDrawEvent(),
-						"opposite-corner-fixed",
-					);
-					dragMaintainedShapeBehavior.drag(
-						mockDrawEvent(),
-						"opposite-corner-fixed",
-					);
+					// (config.project as jest.Mock)
+					// 	.mockReturnValueOnce({ x: 0, y: 0 })
+					// 	.mockReturnValueOnce({ x: 0, y: 1 });
+
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
+
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite-fixed");
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite-fixed");
+
+					expect(config.store.updateGeometry).toBeCalledTimes(1);
+				});
+			});
+
+			describe("opposite", () => {
+				it("updates the Polygon coordinate if within pointer distance", () => {
+					const id = createStorePolygon(config);
+
+					dragMaintainedShapeBehavior.startDragging(id, 0);
+
+					jest.spyOn(config.store, "updateGeometry");
+
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
+
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite");
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite");
+
+					expect(config.store.updateGeometry).toBeCalledTimes(1);
+				});
+
+				it("updates the LineString coordinate if within pointer distance", () => {
+					const id = createLineString(config);
+					jest.spyOn(config.store, "updateGeometry");
+
+					dragMaintainedShapeBehavior.startDragging(id, 0);
+
+					// Mock the projection for the cooridinates of the bounding box
+					// when measuring against them to prevent overlap
+					for (let i = 0; i < 10; i++) {
+						(config.project as jest.Mock)
+							.mockReturnValueOnce({ x: 0, y: 0 })
+							.mockReturnValueOnce({ x: 100, y: 100 });
+					}
+
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite");
+					dragMaintainedShapeBehavior.drag(mockDrawEvent(), "opposite");
 
 					expect(config.store.updateGeometry).toBeCalledTimes(1);
 				});