Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add opposite resizeable option for select mode #204

Merged
merged 1 commit into from
Mar 5, 2024
Merged

feat: add opposite resizeable option for select mode #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 2 additions & 77 deletions development/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ const getModes = () => {
coordinates: {
midpoints: false,
draggable: true,
resizable: "opposite-corner-fixed",
resizable: "opposite",
deletable: true,
},
},
Expand All @@ -131,7 +131,7 @@ const getModes = () => {
coordinates: {
midpoints: false,
draggable: true,
resizable: "opposite-corner-fixed",
resizable: "opposite",
deletable: true,
},
},
Expand Down Expand Up @@ -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");
},
Expand Down Expand Up @@ -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");
});
},
Expand Down Expand Up @@ -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");
});
});

Expand Down
2 changes: 1 addition & 1 deletion e2e/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const example = {
draggable: true,
coordinates: {
draggable: true,
resizable: "opposite-corner-fixed",
resizable: "opposite-fixed",
},
},
},
Expand Down
4 changes: 2 additions & 2 deletions guides/4.MODES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
121 changes: 84 additions & 37 deletions src/modes/select/behaviors/drag-coordinate-resize.behavior.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ describe("DragCoordinateResizeBehavior", () => {
new PixelDistanceBehavior(config),
selectionPointBehavior,
new MidPointBehavior(config, selectionPointBehavior),
10,
);
});
});
Expand All @@ -65,6 +66,7 @@ describe("DragCoordinateResizeBehavior", () => {
pixelDistanceBehavior,
selectionPointBehavior,
midpointBehavior,
10,
);
});

Expand Down Expand Up @@ -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");
Expand All @@ -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");
Expand All @@ -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);
});
Expand All @@ -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);
});
Expand Down
Loading
Loading