diff --git a/guides/6.EVENTS.md b/guides/6.EVENTS.md index 4adac894..6ca2b090 100644 --- a/guides/6.EVENTS.md +++ b/guides/6.EVENTS.md @@ -70,9 +70,16 @@ draw.on("change", (ids, type) => { The other Terra Draw events are: ```typescript -draw.on("finish", (ids: string[]) => { - // Do something - //... +draw.on("finish", (id: string, context: { action: string, mode: string }) => { + if (action === 'draw') { + // Do something for draw finish event + } else if (action === 'dragFeature') { + // Do something for a drag finish event + } else if (action === 'dragCoordinate') { + // + }else if (action === 'dragCoordinateResize') { + // + } }); draw.on("change", (ids: string[], type: string) => { diff --git a/src/common.ts b/src/common.ts index ac516a42..717cca4d 100644 --- a/src/common.ts +++ b/src/common.ts @@ -73,6 +73,8 @@ export type GetLngLatFromEvent = (event: PointerEvent | MouseEvent) => { lat: number; } | null; +export type OnFinishContext = { mode: string; action: string }; + export interface TerraDrawModeRegisterConfig { mode: string; store: GeoJSONStore; @@ -81,7 +83,7 @@ export interface TerraDrawModeRegisterConfig { onChange: StoreChangeHandler; onSelect: (selectedId: string) => void; onDeselect: (deselectedId: string) => void; - onFinish: (finishedId: string) => void; + onFinish: (finishedId: string, context: OnFinishContext) => void; project: Project; unproject: Unproject; coordinatePrecision: number; diff --git a/src/modes/base.mode.ts b/src/modes/base.mode.ts index 2fbe3298..f971eff2 100644 --- a/src/modes/base.mode.ts +++ b/src/modes/base.mode.ts @@ -3,6 +3,7 @@ import { BehaviorConfig, TerraDrawModeBehavior } from "./base.behavior"; import { HexColor, + OnFinishContext, TerraDrawAdapterStyling, TerraDrawKeyboardEvent, TerraDrawModeRegisterConfig, @@ -173,7 +174,7 @@ export abstract class TerraDrawBaseDrawMode { abstract cleanUp(): void; abstract styleFeature(feature: GeoJSONStoreFeatures): TerraDrawAdapterStyling; - onFinish(finishedId: FeatureId) {} + onFinish(finishedId: FeatureId, context: OnFinishContext) {} onDeselect(deselectedId: FeatureId) {} onSelect(selectedId: FeatureId) {} onKeyDown(event: TerraDrawKeyboardEvent) {} diff --git a/src/modes/circle/circle.mode.spec.ts b/src/modes/circle/circle.mode.spec.ts index 241d5659..00753315 100644 --- a/src/modes/circle/circle.mode.spec.ts +++ b/src/modes/circle/circle.mode.spec.ts @@ -308,6 +308,10 @@ describe("TerraDrawCircleMode", () => { expect(onChange).toBeCalledTimes(3); expect(onChange).toBeCalledWith([expect.any(String)], "create"); expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "circle", + }); }); }); }); @@ -357,6 +361,10 @@ describe("TerraDrawCircleMode", () => { expect(onChange).toBeCalledTimes(1); expect(onChange).toBeCalledWith([expect.any(String)], "create"); expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "circle", + }); }); }); diff --git a/src/modes/circle/circle.mode.ts b/src/modes/circle/circle.mode.ts index 83f1045e..be8fd7a3 100644 --- a/src/modes/circle/circle.mode.ts +++ b/src/modes/circle/circle.mode.ts @@ -129,7 +129,7 @@ export class TerraDrawCircleMode extends TerraDrawBaseDrawMode { features = store.copyAll(); expect(features.length).toBe(1); - expect(onChange).toBeCalledTimes(2); - expect(onFinish).toBeCalled(); + expect(onChange).toHaveBeenCalledTimes(2); + expect(onFinish).toHaveBeenCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "freehand", + }); }); }); }); @@ -511,7 +515,11 @@ describe("TerraDrawFreehandMode", () => { [expect.any(String)], "delete", ); - expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "freehand", + }); }); }); }); diff --git a/src/modes/freehand/freehand.mode.ts b/src/modes/freehand/freehand.mode.ts index 9386671a..7fb4345b 100644 --- a/src/modes/freehand/freehand.mode.ts +++ b/src/modes/freehand/freehand.mode.ts @@ -133,7 +133,7 @@ export class TerraDrawFreehandMode extends TerraDrawBaseDrawMode { }); expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "greatcircle", + }); }); it("does not finish great circle when finish is set to null", () => { diff --git a/src/modes/greatcircle/great-circle.mode.ts b/src/modes/greatcircle/great-circle.mode.ts index 554642b7..125faa1a 100644 --- a/src/modes/greatcircle/great-circle.mode.ts +++ b/src/modes/greatcircle/great-circle.mode.ts @@ -135,7 +135,7 @@ export class TerraDrawGreatCircleMode extends TerraDrawBaseDrawMode { [2, 2], ]); - expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "linestring", + }); }); it("does not finish linestring when finish is set to null", () => { diff --git a/src/modes/linestring/linestring.mode.ts b/src/modes/linestring/linestring.mode.ts index 5cf7ba1f..a7991910 100644 --- a/src/modes/linestring/linestring.mode.ts +++ b/src/modes/linestring/linestring.mode.ts @@ -130,7 +130,7 @@ export class TerraDrawLineStringMode extends TerraDrawBaseDrawMode const [pointId] = this.store.create([{ geometry, properties }]); // Ensure that any listerers are triggered with the main created geometry - this.onFinish(pointId); + this.onFinish(pointId, { mode: this.mode, action: "draw" }); } /** @internal */ diff --git a/src/modes/polygon/polygon.mode.spec.ts b/src/modes/polygon/polygon.mode.spec.ts index 9d59575e..471f5684 100644 --- a/src/modes/polygon/polygon.mode.spec.ts +++ b/src/modes/polygon/polygon.mode.spec.ts @@ -1051,6 +1051,7 @@ describe("TerraDrawPolygonMode", () => { describe("onKeyUp", () => { let polygonMode: TerraDrawPolygonMode; let store: GeoJSONStore; + let onFinish: jest.Mock; let project: jest.Mock; let unproject: jest.Mock; @@ -1082,6 +1083,7 @@ describe("TerraDrawPolygonMode", () => { store = mockConfig.store; project = mockConfig.project; unproject = mockConfig.project; + onFinish = mockConfig.onFinish; polygonMode.register(mockConfig); polygonMode.start(); }); @@ -1249,6 +1251,12 @@ describe("TerraDrawPolygonMode", () => { heldKeys: [], }); + expect(onFinish).toHaveBeenCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "polygon", + }); + // Creates a new polygon polygonMode.onClick({ lng: 4, @@ -1353,6 +1361,8 @@ describe("TerraDrawPolygonMode", () => { heldKeys: [], }); + expect(onFinish).not.toHaveBeenCalled(); + const features = store.copyAll(); // 2 Closing points and 1 Polygon diff --git a/src/modes/polygon/polygon.mode.ts b/src/modes/polygon/polygon.mode.ts index d2e28c14..38baf9a0 100644 --- a/src/modes/polygon/polygon.mode.ts +++ b/src/modes/polygon/polygon.mode.ts @@ -134,7 +134,7 @@ export class TerraDrawPolygonMode extends TerraDrawBaseDrawMode this.setStarted(); } - this.onFinish(finishedId); + this.onFinish(finishedId, { mode: this.mode, action: "draw" }); } /** @internal */ diff --git a/src/modes/rectangle/rectangle.mode.spec.ts b/src/modes/rectangle/rectangle.mode.spec.ts index fd72742e..dd58ff03 100644 --- a/src/modes/rectangle/rectangle.mode.spec.ts +++ b/src/modes/rectangle/rectangle.mode.spec.ts @@ -182,7 +182,11 @@ describe("TerraDrawRectangleMode", () => { expect(onChange).toBeCalledTimes(2); expect(onChange).toBeCalledWith([expect.any(String)], "create"); - expect(onFinish).toBeCalledTimes(1); + expect(onFinish).toHaveBeenCalledTimes(1); + expect(onFinish).toHaveBeenNthCalledWith(1, expect.any(String), { + action: "draw", + mode: "rectangle", + }); }); }); }); diff --git a/src/modes/rectangle/rectangle.mode.ts b/src/modes/rectangle/rectangle.mode.ts index 7313ac87..3e8fe0ba 100644 --- a/src/modes/rectangle/rectangle.mode.ts +++ b/src/modes/rectangle/rectangle.mode.ts @@ -132,7 +132,8 @@ export class TerraDrawRectangleMode extends TerraDrawBaseDrawMode { ); expect(onFinish).toBeCalledTimes(1); - expect(onFinish).toBeCalledWith(expect.any(String)); + expect(onFinish).toBeCalledWith(expect.any(String), { + action: "dragCoordinate", + mode: "select", + }); }); it("fires onFinish for dragged feature if it is currently being dragged", () => { @@ -2988,7 +2991,10 @@ describe("TerraDrawSelectMode", () => { ); expect(onFinish).toBeCalledTimes(1); - expect(onFinish).toBeCalledWith(expect.any(String)); + expect(onFinish).toBeCalledWith(expect.any(String), { + action: "dragFeature", + mode: "select", + }); }); it("fires onFinish for resizeable if it is currently being dragged", () => { @@ -3108,7 +3114,10 @@ describe("TerraDrawSelectMode", () => { ); expect(onFinish).toBeCalledTimes(1); - expect(onFinish).toBeCalledWith(expect.any(String)); + expect(onFinish).toBeCalledWith(expect.any(String), { + action: "dragCoordinateResize", + mode: "select", + }); }); }); diff --git a/src/modes/select/select.mode.ts b/src/modes/select/select.mode.ts index 62e8234f..4c30aaee 100644 --- a/src/modes/select/select.mode.ts +++ b/src/modes/select/select.mode.ts @@ -762,11 +762,20 @@ export class TerraDrawSelectMode extends TerraDrawBaseSelectMode void; +type FinishListener = (id: FeatureId, context: OnFinishContext) => void; type ChangeListener = (ids: FeatureId[], type: string) => void; type SelectListener = (id: FeatureId) => void; type DeselectListener = () => void; @@ -164,13 +165,13 @@ class TerraDraw { return { changed, unchanged }; }; - const onFinish = (finishedId: FeatureId) => { + const onFinish = (finishedId: FeatureId, context: OnFinishContext) => { if (!this._enabled) { return; } this._eventListeners.finish.forEach((listener) => { - listener(finishedId); + listener(finishedId, context); }); };