Skip to content

Commit

Permalink
fix: fire an onFinish event when finished dragging a coordinate or fe…
Browse files Browse the repository at this point in the history 
…ature
  • Loading branch information
@JamesLMilner
JamesLMilner committed Sep 16, 2023
1 parent 8f427db commit 5336035
Show file tree
Hide file tree
Showing 2 changed files with 255 additions and 18 deletions.
264 changes: 246 additions & 18 deletions src/modes/select/select.mode.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,20 @@ describe("TerraDrawSelectMode", () => {
let unproject: jest.Mock;
let onSelect: jest.Mock;
let onDeselect: jest.Mock;
let onFinish: jest.Mock;

const setSelectMode = (
options?: ConstructorParameters<typeof TerraDrawSelectMode>[0]
) => {
selectMode = new TerraDrawSelectMode(options);

const mockConfig = getMockModeConfig(selectMode.mode);
onChange = mockConfig.onChange;
project = mockConfig.project;
unproject = mockConfig.unproject;
onSelect = mockConfig.onSelect;
onDeselect = mockConfig.onDeselect;
setCursor = mockConfig.setCursor;
onFinish = mockConfig.onFinish;
store = mockConfig.store;
selectMode.register(mockConfig);

Expand Down Expand Up @@ -2026,6 +2027,7 @@ describe("TerraDrawSelectMode", () => {
]);

expect(onChange).toBeCalledTimes(1);
const idOne = onChange.mock.calls[0][0] as string[];

// mock for both drag coordinate and drag feature
mockMouseEventBoundingBox();
Expand Down Expand Up @@ -2057,8 +2059,8 @@ describe("TerraDrawSelectMode", () => {
});

selectMode.onClick({
lng: 0,
lat: 0,
lng: 0.5,
lat: 0.5,
containerX: 0,
containerY: 0,
button: "left",
Expand All @@ -2070,8 +2072,8 @@ describe("TerraDrawSelectMode", () => {

selectMode.onDragStart(
{
lng: 1,
lat: 1,
lng: 0.5,
lat: 0.5,
containerX: 1,
containerY: 1,
button: "left",
Expand Down Expand Up @@ -2114,7 +2116,8 @@ describe("TerraDrawSelectMode", () => {
setMapDraggability
);

expect(onChange).toBeCalledTimes(2);
expect(onChange).toBeCalledTimes(3);
expect(onChange).toHaveBeenNthCalledWith(3, idOne, "update");
});
});
});
Expand Down Expand Up @@ -2334,19 +2337,9 @@ describe("TerraDrawSelectMode", () => {
});

describe("onDragEnd", () => {
let selectMode: TerraDrawSelectMode;
let setCursor: jest.Mock;

beforeEach(() => {
selectMode = new TerraDrawSelectMode();

const mockConfig = getMockModeConfig(selectMode.mode);
setCursor = mockConfig.setCursor;

selectMode.register(mockConfig);
});

it("sets map draggability back to false, sets cursor to default", () => {
setSelectMode();

const setMapDraggability = jest.fn();
selectMode.onDragEnd(
{
Expand All @@ -2365,6 +2358,241 @@ describe("TerraDrawSelectMode", () => {
expect(setCursor).toBeCalledTimes(1);
expect(setCursor).toBeCalledWith("move");
});

it("fires onFinish for dragged coordinate if it is currently being dragged", () => {
setSelectMode({
flags: { polygon: { feature: { coordinates: { draggable: true } } } },
});

// We want to account for ignoring points branch
addPointToStore([100, 89]);

expect(onChange).toBeCalledTimes(1);

addPolygonToStore([
[0, 0],
[0, 1],
[1, 1],
[1, 0],
[0, 0],
]);

expect(onChange).toBeCalledTimes(2);

mockMouseEventBoundingBox();

project
.mockReturnValueOnce({
x: 100,
y: 100,
})
.mockReturnValue({
x: 0,
y: 0,
});

selectMode.onClick({
lng: 0,
lat: 0,
containerX: 0,
containerY: 0,
button: "left",
heldKeys: [],
});

expect(onSelect).toBeCalledTimes(1);
expect(onChange).toBeCalledTimes(4);

// Select feature
expect(onChange).toHaveBeenNthCalledWith(
3,
[expect.any(String)],
"update"
);

// Create selection points
expect(onChange).toHaveBeenNthCalledWith(
4,
[
expect.any(String),
expect.any(String),
expect.any(String),
expect.any(String),
],
"create"
);

mockMouseEventBoundingBox();
project
.mockReturnValueOnce({
x: 100,
y: 100,
})
.mockReturnValue({
x: 0,
y: 0,
});

selectMode.onDragStart(
{
lng: 1,
lat: 1,
containerX: 1,
containerY: 1,
button: "left",
heldKeys: [],
},
jest.fn()
);

const setMapDraggability = jest.fn();
selectMode.onDrag(
{
lng: 1,
lat: 1,
containerX: 1,
containerY: 1,
button: "left",
heldKeys: [],
},
setMapDraggability
);

selectMode.onDragEnd(
{
lng: 1,
lat: 1,
containerX: 1,
containerY: 1,
button: "left",
heldKeys: [],
},
setMapDraggability
);

expect(onFinish).toBeCalledTimes(1);
expect(onFinish).toBeCalledWith(expect.any(String));
});

it("fires onFinish for dragged feature if it is currently being dragged", () => {
setSelectMode({
flags: { polygon: { feature: { draggable: true } } },
});

addPolygonToStore([
[0, 0],
[0, 1],
[1, 1],
[1, 0],
[0, 0],
]);

expect(onChange).toBeCalledTimes(1);

// mock for both drag coordinate and drag feature
mockMouseEventBoundingBox();
mockMouseEventBoundingBox();
project
.mockReturnValueOnce({
x: 0,
y: 0,
})
.mockReturnValueOnce({
x: 1,
y: 1,
})
.mockReturnValueOnce({
x: 0,
y: 0,
})
.mockReturnValueOnce({
x: 1,
y: 1,
})
.mockReturnValueOnce({
x: 0,
y: 0,
})
.mockReturnValueOnce({
x: 1,
y: 1,
});

selectMode.onClick({
lng: 0.5,
lat: 0.5,
containerX: 0,
containerY: 0,
button: "left",
heldKeys: [],
});

expect(onSelect).toBeCalledTimes(1);
expect(onChange).toBeCalledTimes(2);

selectMode.onDragStart(
{
lng: 0.5,
lat: 0.5,
containerX: 0.5,
containerY: 0.5,
button: "left",
heldKeys: [],
},
jest.fn()
);

// mock for both drag coordinate and drag feature
mockMouseEventBoundingBox();
mockMouseEventBoundingBox();
project
.mockReturnValueOnce({
x: 0,
y: 0,
})
.mockReturnValueOnce({
x: 1,
y: 1,
})
.mockReturnValueOnce({
x: 0,
y: 0,
})
.mockReturnValueOnce({
x: 1,
y: 1,
});

const setMapDraggability = jest.fn();
selectMode.onDrag(
{
lng: 0.5,
lat: 0.5,
containerX: 0,
containerY: 0,
button: "left",
heldKeys: [],
},
setMapDraggability
);

expect(onChange).toBeCalledTimes(3);

selectMode.onDragEnd(
{
lng: 1,
lat: 1,
containerX: 1,
containerY: 1,
button: "left",
heldKeys: [],
},
setMapDraggability
);

expect(onFinish).toBeCalledTimes(1);
expect(onFinish).toBeCalledWith(expect.any(String));
});
});

describe("onMouseMove", () => {
Expand Down
9 changes: 9 additions & 0 deletions src/modes/select/select.mode.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -657,6 +657,15 @@ export class TerraDrawSelectMode extends TerraDrawBaseDrawMode<SelectionStyling>
setMapDraggability: (enabled: boolean) => void
) {
this.setCursor(this.cursors.dragEnd);

// If we have finished dragging a coordinate or a feature
// lets fire an onFinish event which can be listened to
if (this.dragCoordinate.isDragging()) {
this.onFinish(this.selected[0]);
} else if (this.dragFeature.isDragging()) {
this.onFinish(this.selected[0]);
}

this.dragCoordinate.stopDragging();
this.dragFeature.stopDragging();
this.rotateFeature.reset();
Expand Down

0 comments on commit 5336035

Please sign in to comment.