Skip to content

Commit e4c57f2

Browse files
JamesLMilnerJamesLMilner
authored
feat(terra-draw): provide properties in polygon mode for determining current coordinate count (#620)
1 parent b34cee9 commit e4c57f2

File tree

11 files changed

+162
-24
lines changed

11 files changed

+162
-24
lines changed

‎packages/storybook/src/common/setup.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ export function setupMapContainer(args: StoryArgs) {
4545

4646
if (args.instructions) {
4747
const instructions = document.createElement("h3");
48+
instructions.id = `instructions`;
4849
instructions.style.margin = "0";
4950
instructions.style.width = `${args.width}`;
5051
instructions.textContent = args.instructions;

‎packages/storybook/src/common/stories.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,45 @@ const Polygon: Story = {
4949
},
5050
};
5151

52+
// Polygon coordinate count story
53+
const PolygonWithCoordinateCounts: Story = {
54+
...DefaultStory,
55+
args: {
56+
id: "polygon",
57+
modes: [() => new TerraDrawPolygonMode()],
58+
instructions:
59+
"Click to add points, the provisional and committed coordinate counts will appear here",
60+
afterRender: (draw: TerraDraw) => {
61+
draw.on("change", (ids) => {
62+
const feature = draw.getSnapshotFeature(ids[0]);
63+
if (feature) {
64+
const provisionalCount =
65+
feature.properties["provisionalCoordinateCount"];
66+
const committedCount = feature.properties["committedCoordinateCount"];
67+
if (provisionalCount === undefined || committedCount === undefined) {
68+
return;
69+
}
70+
71+
const instructions = document.getElementById("instructions");
72+
if (!instructions) {
73+
return;
74+
}
75+
instructions.textContent = `Provisional Coordinates: ${provisionalCount}, Committed Coordinates: ${committedCount}`;
76+
}
77+
});
78+
79+
draw.on("finish", (_ids) => {
80+
const instructions = document.getElementById("instructions");
81+
if (!instructions) {
82+
return;
83+
}
84+
instructions.textContent = `Finished drawing polygon`;
85+
});
86+
},
87+
...DefaultStory.args,
88+
},
89+
};
90+
5291
// Polygon with coordinate points story
5392
const PolygonWithCoordinatePoints: Story = {
5493
args: {
@@ -508,6 +547,7 @@ const AllStories = {
508547
PolygonWithCoordinateSnapping,
509548
PolygonWithLineSnapping,
510549
PolygonWithEditableEnabled,
550+
PolygonWithCoordinateCounts,
511551
ZIndexOrdering,
512552
Circle,
513553
Rectangle,

‎packages/storybook/src/stories/arcgis/ArcGIS.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/storybook/src/stories/google/Google.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/storybook/src/stories/leaflet/Leaflet.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/storybook/src/stories/mapbox/Mapbox.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/storybook/src/stories/maplibre/MapLibre.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/storybook/src/stories/openlayers/OpenLayers.stories.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@ export const PolygonWithCoordinateSnapping =
2020
AllStories.PolygonWithCoordinateSnapping;
2121
export const PolygonWithLineSnapping = AllStories.PolygonWithLineSnapping;
2222
export const PolygonWithEditableEnabled = AllStories.PolygonWithEditableEnabled;
23+
export const PolygonWithCoordinateCounts =
24+
AllStories.PolygonWithCoordinateCounts;
2325
export const ZIndexOrdering = AllStories.ZIndexOrdering;
2426
export const Circle = AllStories.Circle;
2527
export const Rectangle = AllStories.Rectangle;

‎packages/terra-draw/src/common.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,8 @@ export const COMMON_PROPERTIES = {
204204
COORDINATE_POINT: "coordinatePoint",
205205
COORDINATE_POINT_FEATURE_ID: "coordinatePointFeatureId",
206206
COORDINATE_POINT_IDS: "coordinatePointIds",
207+
PROVISIONAL_COORDINATE_COUNT: "provisionalCoordinateCount",
208+
COMMITTED_COORDINATE_COUNT: "committedCoordinateCount",
207209
} as const;
208210

209211
/**

‎packages/terra-draw/src/modes/polygon/polygon.mode.spec.ts‎

Lines changed: 61 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -740,13 +740,15 @@ describe("TerraDrawPolygonMode", () => {
740740
let polygonMode: TerraDrawPolygonMode;
741741
let store: TerraDrawGeoJSONStore;
742742
let onChange: jest.Mock;
743+
let onFinish: jest.Mock;
743744

744745
beforeEach(() => {
745746
store = new GeoJSONStore();
746747
polygonMode = new TerraDrawPolygonMode();
747748
const mockConfig = MockModeConfig(polygonMode.mode);
748749

749750
store = mockConfig.store;
751+
onFinish = mockConfig.onFinish;
750752
onChange = mockConfig.onChange;
751753
polygonMode.register(mockConfig);
752754
polygonMode.start();
@@ -763,8 +765,6 @@ describe("TerraDrawPolygonMode", () => {
763765

764766
polygonMode.onMouseMove(MockCursorEvent({ lng: 1, lat: 1 }));
765767

766-
// expect(onChange).toHaveBeenCalledTimes(2);
767-
768768
const features = store.copyAll();
769769
expect(features.length).toBe(1);
770770

@@ -787,11 +787,11 @@ describe("TerraDrawPolygonMode", () => {
787787

788788
polygonMode.onMouseMove(MockCursorEvent({ lng: 2, lat: 2 }));
789789

790-
expect(onChange).toHaveBeenCalledTimes(4);
791-
792790
const features = store.copyAll();
793791
expect(features.length).toBe(1);
794792

793+
expect(onFinish).not.toHaveBeenCalled();
794+
795795
expect(features[0].geometry.coordinates).toStrictEqual([
796796
[
797797
[0, 0],
@@ -816,8 +816,6 @@ describe("TerraDrawPolygonMode", () => {
816816
// Snapping branch
817817
polygonMode.onMouseMove(MockCursorEvent({ lng: 2.5, lat: 2.5 }));
818818

819-
expect(onChange).toHaveBeenCalledTimes(7);
820-
821819
// 1 times for the polygon
822820
// 2 times for the closing points
823821
let features = store.copyAll();
@@ -836,6 +834,8 @@ describe("TerraDrawPolygonMode", () => {
836834
// No snapping branch
837835
polygonMode.onMouseMove(MockCursorEvent({ lng: 4, lat: 4 }));
838836

837+
expect(onFinish).not.toHaveBeenCalled();
838+
839839
features = store.copyAll();
840840

841841
expect(features[0].geometry.coordinates).toStrictEqual([
@@ -1264,19 +1264,10 @@ describe("TerraDrawPolygonMode", () => {
12641264
expect(features.length).toBe(1);
12651265

12661266
expect(onFinish).toHaveBeenCalledTimes(1);
1267-
// Extra call because of the right hand rule fixing
1268-
expect(onChange).toHaveBeenCalledTimes(14);
12691267

12701268
// Delete a coordinate
12711269
polygonMode.onClick(MockCursorEvent({ lng: 1, lat: 1, button: "right" }));
12721270

1273-
expect(onChange).toHaveBeenNthCalledWith(
1274-
14,
1275-
[expect.any(String), expect.any(String)],
1276-
"delete",
1277-
undefined,
1278-
);
1279-
12801271
const featuresAfter = store.copyAll();
12811272
expect(featuresAfter.length).toBe(1);
12821273
expect(featuresAfter[0].geometry.coordinates[0]).not.toEqual(
@@ -1315,8 +1306,6 @@ describe("TerraDrawPolygonMode", () => {
13151306
expect(features.length).toBe(1);
13161307

13171308
expect(onFinish).toHaveBeenCalledTimes(1);
1318-
// Extra call because of the right hand rule fixing
1319-
expect(onChange).toHaveBeenCalledTimes(14);
13201309

13211310
// Delete a coordinate
13221311
polygonMode.onClick(
@@ -1328,13 +1317,6 @@ describe("TerraDrawPolygonMode", () => {
13281317
}),
13291318
);
13301319

1331-
expect(onChange).toHaveBeenNthCalledWith(
1332-
14,
1333-
[expect.any(String), expect.any(String)],
1334-
"delete",
1335-
undefined,
1336-
);
1337-
13381320
const featuresAfter = store.copyAll();
13391321
expect(featuresAfter.length).toBe(1);
13401322
expect(featuresAfter[0].geometry.coordinates[0]).not.toEqual(
@@ -1437,6 +1419,61 @@ describe("TerraDrawPolygonMode", () => {
14371419
expect(features[3].geometry.type).toBe("Point");
14381420
});
14391421

1422+
it("updates the properties for committed coordinate count and provisional coordinate counts", () => {
1423+
polygonMode.onMouseMove(MockCursorEvent({ lng: 0, lat: 0 }));
1424+
polygonMode.onClick(MockCursorEvent({ lng: 0, lat: 0 }));
1425+
1426+
let features = store.copyAll();
1427+
expect(features.length).toBe(1);
1428+
expect(
1429+
features[0].properties[COMMON_PROPERTIES.COMMITTED_COORDINATE_COUNT],
1430+
).toBe(1);
1431+
expect(
1432+
features[0].properties[COMMON_PROPERTIES.PROVISIONAL_COORDINATE_COUNT],
1433+
).toBe(1);
1434+
1435+
polygonMode.onMouseMove(MockCursorEvent({ lng: 3, lat: 3 }));
1436+
polygonMode.onClick(MockCursorEvent({ lng: 3, lat: 3 }));
1437+
1438+
features = store.copyAll();
1439+
expect(features.length).toBe(1);
1440+
expect(
1441+
features[0].properties[COMMON_PROPERTIES.COMMITTED_COORDINATE_COUNT],
1442+
).toBe(2);
1443+
expect(
1444+
features[0].properties[COMMON_PROPERTIES.PROVISIONAL_COORDINATE_COUNT],
1445+
).toBe(2);
1446+
1447+
polygonMode.onMouseMove(MockCursorEvent({ lng: 2, lat: 2 }));
1448+
polygonMode.onClick(MockCursorEvent({ lng: 2, lat: 2 }));
1449+
1450+
features = store.copyAll();
1451+
expect(features.length).toBe(3); // 2 closing points are created
1452+
expect(
1453+
features[0].properties[COMMON_PROPERTIES.COMMITTED_COORDINATE_COUNT],
1454+
).toBe(3);
1455+
expect(
1456+
features[0].properties[COMMON_PROPERTIES.PROVISIONAL_COORDINATE_COUNT],
1457+
).toBe(3);
1458+
1459+
expect(onFinish).toHaveBeenCalledTimes(0);
1460+
1461+
// Close the polygon
1462+
polygonMode.onMouseMove(MockCursorEvent({ lng: 0, lat: 0 }));
1463+
polygonMode.onClick(MockCursorEvent({ lng: 0, lat: 0 }));
1464+
1465+
features = store.copyAll();
1466+
expect(features.length).toBe(1);
1467+
expect(
1468+
features[0].properties[COMMON_PROPERTIES.COMMITTED_COORDINATE_COUNT],
1469+
).toBe(undefined);
1470+
expect(
1471+
features[0].properties[COMMON_PROPERTIES.PROVISIONAL_COORDINATE_COUNT],
1472+
).toBe(undefined);
1473+
1474+
expect(onFinish).toHaveBeenCalledTimes(1);
1475+
});
1476+
14401477
describe("with leftClick pointer event set to false", () => {
14411478
beforeEach(() => {
14421479
polygonMode = new TerraDrawPolygonMode({

0 commit comments

Comments
 (0)