From 6fdbf9680ab5dba23e45009fa3671e59dbfc3267 Mon Sep 17 00:00:00 2001
From: Sam <78538841+spwoodcock@users.noreply.github.com>
Date: Mon, 9 Dec 2024 19:56:36 +0545
Subject: [PATCH] feat(mapper): add new point geom in maplibre terradraw,
 inject to ODK collect (#1966)

---
 src/mapper/package.json                       |  1 +
 src/mapper/pnpm-lock.yaml                     | 20 ++++
 .../lib/components/dialog-task-actions.svelte | 27 +-----
 src/mapper/src/lib/components/map/main.svelte | 94 +++++++++++++++++--
 src/mapper/src/lib/components/qrcode.svelte   |  2 +-
 src/mapper/src/lib/odk/collect.ts             | 26 +++++
 src/mapper/src/lib/odk/javarosa.ts            | 43 +++++++++
 src/mapper/src/lib/{utils => odk}/qrcode.ts   |  0
 .../src/routes/[projectId]/+page.svelte       | 21 ++++-
 9 files changed, 195 insertions(+), 39 deletions(-)
 create mode 100644 src/mapper/src/lib/odk/collect.ts
 create mode 100644 src/mapper/src/lib/odk/javarosa.ts
 rename src/mapper/src/lib/{utils => odk}/qrcode.ts (100%)

diff --git a/src/mapper/package.json b/src/mapper/package.json
index 36196c6c46..e1e2839b9c 100644
--- a/src/mapper/package.json
+++ b/src/mapper/package.json
@@ -51,6 +51,7 @@
 		"@turf/bbox": "^7.1.0",
 		"@turf/buffer": "^7.1.0",
 		"@turf/helpers": "^7.1.0",
+		"@watergis/maplibre-gl-terradraw": "^0.5.1",
 		"drizzle-orm": "^0.35.3",
 		"flatgeobuf": "^3.36.0",
 		"maplibre-gl": "^4.7.1",
diff --git a/src/mapper/pnpm-lock.yaml b/src/mapper/pnpm-lock.yaml
index 0ede86887b..48b13effbd 100644
--- a/src/mapper/pnpm-lock.yaml
+++ b/src/mapper/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       '@turf/helpers':
         specifier: ^7.1.0
         version: 7.1.0
+      '@watergis/maplibre-gl-terradraw':
+        specifier: ^0.5.1
+        version: 0.5.1(maplibre-gl@4.7.1)(terra-draw@1.0.0-beta.8)
       drizzle-orm:
         specifier: ^0.35.3
         version: 0.35.3(@electric-sql/pglite@0.2.14)(@libsql/client-wasm@0.14.0)(@prisma/client@4.8.1)(@types/react@18.3.3)
@@ -1703,6 +1706,13 @@ packages:
   '@vue/shared@3.5.13':
     resolution: {integrity: sha512-/hnE/qP5ZoGpol0a5mDi45bOd7t3tjYJBjsgCsivow7D48cJeV5l05RD82lPqi7gRiphZM37rnhW1l6ZoCNNnQ==}
 
+  '@watergis/maplibre-gl-terradraw@0.5.1':
+    resolution: {integrity: sha512-SIvCbrQYnYTJhTNqra3xKW6hUFzPRwvPiUlYoupjRqElmoEMjP7/t0+mDS+sDVofqArtzmcJ3OiaezgymnkDhw==}
+    engines: {pnpm: ^9.0.0}
+    peerDependencies:
+      maplibre-gl: ^2.0.0 || ^3.0.0 || ^4.0.0
+      terra-draw: ^1.0.0-beta.1
+
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
     peerDependencies:
@@ -3353,6 +3363,9 @@ packages:
     resolution: {integrity: sha512-G13vtMYPT/J8A4X2SjdtBTphZlrp1gKv6hZiOjw14RCWg6GbHuQBGtjlx75xLbYV/wEc0D7G5K4rxKP/cXk8Bw==}
     engines: {node: '>=10'}
 
+  terra-draw@1.0.0-beta.8:
+    resolution: {integrity: sha512-40kOjgOQkDDmRIkz7QZ4urjwb9v/+Zm7tPf3RqeDY4UtKm3JodZ5iz3fFm93u3nzd+QVQlOZF0VF15ew0esQ7A==}
+
   terser@5.36.0:
     resolution: {integrity: sha512-IYV9eNMuFAV4THUspIRXkLakHnV6XO7FEdtKjf/mDyrnqUg9LnlOn6/RwRvM9SZjR4GUq8Nk8zj67FzVARr74w==}
     engines: {node: '>=10'}
@@ -5499,6 +5512,11 @@ snapshots:
 
   '@vue/shared@3.5.13': {}
 
+  '@watergis/maplibre-gl-terradraw@0.5.1(maplibre-gl@4.7.1)(terra-draw@1.0.0-beta.8)':
+    dependencies:
+      maplibre-gl: 4.7.1
+      terra-draw: 1.0.0-beta.8
+
   acorn-jsx@5.3.2(acorn@8.14.0):
     dependencies:
       acorn: 8.14.0
@@ -7242,6 +7260,8 @@ snapshots:
       type-fest: 0.16.0
       unique-string: 2.0.0
 
+  terra-draw@1.0.0-beta.8: {}
+
   terser@5.36.0:
     dependencies:
       '@jridgewell/source-map': 0.3.6
diff --git a/src/mapper/src/lib/components/dialog-task-actions.svelte b/src/mapper/src/lib/components/dialog-task-actions.svelte
index cf5813cef3..1b4c2c5072 100644
--- a/src/mapper/src/lib/components/dialog-task-actions.svelte
+++ b/src/mapper/src/lib/components/dialog-task-actions.svelte
@@ -2,36 +2,17 @@
 	import { mapTask, finishTask, resetTask } from '$lib/db/events';
 	import type { ProjectData } from '$lib/types';
 	import { getTaskStore } from '$store/tasks.svelte.ts';
-	import { getAlertStore } from '$store/common.svelte.ts';
 
 	type Props = {
 		isTaskActionModalOpen: boolean;
 		toggleTaskActionModal: (value: boolean) => void;
 		selectedTab: string;
 		projectData: ProjectData;
+		clickMapNewFeature: () => void;
 	};
 
 	const taskStore = getTaskStore();
-	const alertStore = getAlertStore();
-	let { isTaskActionModalOpen, toggleTaskActionModal, selectedTab, projectData }: Props = $props();
-
-	function mapNewFeature() {
-		const xformId = projectData?.odk_form_id;
-		if (!xformId) {
-			return;
-		}
-
-		const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-
-		if (isMobile) {
-			document.location.href = `odkcollect://form/${xformId}`;
-		} else {
-			alertStore.setAlert({
-				variant: 'warning',
-				message: 'Requires a mobile phone with ODK Collect.',
-			});
-		}
-	}
+	let { isTaskActionModalOpen, toggleTaskActionModal, selectedTab, projectData, clickMapNewFeature }: Props = $props();
 </script>
 
 {#if taskStore.selectedTaskId && selectedTab === 'map' && isTaskActionModalOpen && (taskStore.selectedTaskState === 'UNLOCKED_TO_MAP' || taskStore.selectedTaskState === 'LOCKED_FOR_MAPPING')}
@@ -57,11 +38,11 @@
 				<p class="text-[#333] text-xl font-barlow-semibold">Task #{taskStore.selectedTaskId}</p>
 				<div
 					onclick={() => {
-						mapNewFeature();
+						clickMapNewFeature();
 					}}
 					onkeydown={(e: KeyboardEvent) => {
 						if (e.key === 'Enter') {
-							mapNewFeature();
+							clickMapNewFeature();
 						}
 					}}
 					role="button"
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
index c4208f433f..0bf3d3535d 100644
--- a/src/mapper/src/lib/components/map/main.svelte
+++ b/src/mapper/src/lib/components/map/main.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	import '$styles/page.css';
 	import '$styles/button.css';
+	import '@watergis/maplibre-gl-terradraw/dist/maplibre-gl-terradraw.css'
 	import '@hotosm/ui/dist/hotosm-ui';
-	import { onMount, tick } from 'svelte';
+	import { onMount } from 'svelte';
 	import {
 		MapLibre,
 		GeoJSON,
@@ -17,11 +18,12 @@
 		ControlButton,
 	} from 'svelte-maplibre';
 	import maplibre from 'maplibre-gl';
+	import MaplibreTerradrawControl from '@watergis/maplibre-gl-terradraw'
 	import { Protocol } from 'pmtiles';
 	import { polygon } from '@turf/helpers';
 	import { buffer } from '@turf/buffer';
 	import { bbox } from '@turf/bbox';
-	import type { Position } from 'geojson';
+	import type { GeoJSON as GeoJSONType, Position, Geometry as GeoJSONGeometry } from 'geojson';
 
 	import LocationArcImg from '$assets/images/locationArc.png';
 	import LocationDotImg from '$assets/images/locationDot.png';
@@ -40,7 +42,6 @@
 	import { projectSetupStep as projectSetupStepEnum } from '$constants/enums.ts';
 	import { baseLayers, osmStyle, pmtilesStyle } from '$constants/baseLayers.ts';
 	import { getEntitiesStatusStore } from '$store/entities.svelte.ts';
-	import type { GeoJSON as GeoJSONType } from 'geojson';
 
 	type bboxType = [number, number, number, number];
 
@@ -50,9 +51,11 @@
 		toggleActionModal: (value: 'task-modal' | 'entity-modal' | null) => void;
 		projectId: number;
 		setMapRef: (map: maplibregl.Map | undefined) => void;
+		draw?: boolean;
+		handleDrawnGeom?: ((geojson: GeoJSONGeometry) => void) | null;
 	}
 
-	let { projectOutlineCoords, entitiesUrl, toggleActionModal, projectId, setMapRef }: Props = $props();
+	let { projectOutlineCoords, entitiesUrl, toggleActionModal, projectId, setMapRef, draw = false, handleDrawnGeom }: Props = $props();
 
 	const taskStore = getTaskStore();
 	const projectSetupStepStore = getProjectSetupStepStore();
@@ -104,6 +107,29 @@
 	// 		allBaseLayers = layers;
 	// 	}
 	// })
+	let displayDrawHelpText: boolean = $state(false);
+	const drawControl = new MaplibreTerradrawControl({
+		modes: [
+			'point',
+			// 'polygon',
+			// 'linestring',
+			// 'delete',
+		],
+		// Note We do not open the toolbar options, allowing the user
+		// to simply click with a pre-defined mode active
+		// open: true,
+	});
+
+	$effect(() => {
+		projectSetupStep = +projectSetupStepStore.projectSetupStep;
+	});
+
+	// set the map ref to parent component
+	$effect(() => {
+		if (map) {
+			setMapRef(map);
+		}
+	});
 
 	// using this function since outside click of entity layer couldn't be tracked via FillLayer
 	function handleMapClick(e: maplibregl.MapMouseEvent) {
@@ -154,14 +180,55 @@
 		}
 	});
 
-	$effect(() => {
-		projectSetupStep = +projectSetupStepStore.projectSetupStep;
-	});
+	// Workaround due to bug in @watergis/mapbox-gl-terradraw
+	function removeTerraDrawLayers() {
+		if (map) {
+				if (map.getLayer('td-point')) map.removeLayer('td-point');
+				if (map.getSource('td-point')) map.removeSource('td-point');
 
-	// set the map ref to parent component
+				if (map.getLayer('td-linestring')) map.removeLayer('td-linestring');
+				if (map.getSource('td-linestring')) map.removeSource('td-linestring');
+
+				if (map.getLayer('td-polygon')) map.removeLayer('td-polygon');
+				if (map.getSource('td-polygon')) map.removeSource('td-polygon');
+
+				if (map.getLayer('td-polygon-outline')) map.removeLayer('td-polygon-outline');
+				if (map.getSource('td-polygon-outline')) map.removeSource('td-polygon-outline');
+			}
+	}
+	// Add draw layer & handle emitted geom
 	$effect(() => {
-		if (map) {
-			setMapRef(map);
+		if (draw) {
+			map?.addControl(drawControl, 'top-left');
+			displayDrawHelpText = true;
+
+			const drawInstance = drawControl.getTerraDrawInstance();
+			if (drawInstance && handleDrawnGeom) {
+				drawInstance.start();
+				drawInstance.setMode('point');
+
+				drawInstance.on('finish', (id: string, _context: any) => {
+					// Save the drawn geometry location, then delete all geoms from store
+					const features: { id: string; geometry: GeoJSONGeometry }[] = drawInstance.getSnapshot();
+					const drawnFeature = features.find((geom) => geom.id === id);
+					let firstGeom: GeoJSONGeometry = null;
+					if (drawnFeature && drawnFeature.geometry) {
+						firstGeom = drawnFeature.geometry;
+					} else {
+						console.error(`Feature with id ${id} not found or has no geometry.`);
+					}
+					drawInstance.stop();
+
+					if (firstGeom) {
+						removeTerraDrawLayers();
+						handleDrawnGeom(firstGeom);
+					}
+				});
+			};
+		} else {
+			removeTerraDrawLayers();
+			map?.removeControl(drawControl);
+			displayDrawHelpText = false;
 		}
 	});
 
@@ -386,4 +453,11 @@
 			<p class="uppercase font-barlow-medium text-base">please select a task / feature for mapping</p>
 		</div>
 	{/if}
+
+	<!-- Help for drawing a new geometry -->
+	{#if displayDrawHelpText}
+		<div class="absolute top-5 w-fit bg-[#F097334D] z-10 left-[50%] translate-x-[-50%] p-1">
+			<p class="uppercase font-barlow-medium text-base">Click on the map to create a new point</p>
+		</div>
+	{/if}
 </MapLibre>
diff --git a/src/mapper/src/lib/components/qrcode.svelte b/src/mapper/src/lib/components/qrcode.svelte
index 081878ea53..0db6db2a18 100644
--- a/src/mapper/src/lib/components/qrcode.svelte
+++ b/src/mapper/src/lib/components/qrcode.svelte
@@ -2,7 +2,7 @@
 	import type { Snippet } from 'svelte';
 	import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.component.js';
 
-	import { generateQrCode, downloadQrCode } from '$lib/utils/qrcode';
+	import { generateQrCode, downloadQrCode } from '$lib/odk/qrcode';
 
 	interface Props {
 		infoDialogRef: SlDialog | null;
diff --git a/src/mapper/src/lib/odk/collect.ts b/src/mapper/src/lib/odk/collect.ts
new file mode 100644
index 0000000000..f7e76390bd
--- /dev/null
+++ b/src/mapper/src/lib/odk/collect.ts
@@ -0,0 +1,26 @@
+import type { Geometry as GeoJSONGeometry } from 'geojson';
+
+import { getAlertStore } from '$store/common.svelte.ts';
+import { geojsonGeomToJavarosa } from '$lib/odk/javarosa';
+
+const alertStore = getAlertStore();
+
+export function openOdkCollectNewFeature(xFormId: string, geom: GeoJSONGeometry) {
+	if (!xFormId || !geom) {
+		return;
+	}
+
+	const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+
+	const javarosaGeom = geojsonGeomToJavarosa(geom);
+
+	if (isMobile) {
+		// TODO we need to update the form to support task_id=${}&
+		document.location.href = `odkcollect://form/${xFormId}?new_feature=${javarosaGeom}`;
+	} else {
+		alertStore.setAlert({
+			variant: 'warning',
+			message: 'Requires a mobile phone with ODK Collect.',
+		});
+	}
+}
diff --git a/src/mapper/src/lib/odk/javarosa.ts b/src/mapper/src/lib/odk/javarosa.ts
new file mode 100644
index 0000000000..16e85ab0b2
--- /dev/null
+++ b/src/mapper/src/lib/odk/javarosa.ts
@@ -0,0 +1,43 @@
+import type { Geometry as GeoJSONGeometry } from 'geojson';
+
+export function geojsonGeomToJavarosa(geometry: GeoJSONGeometry) {
+	if (geometry.type === 'GeometryCollection') {
+		console.error('Unsupported GeoJSON type: GeometryCollection');
+		return;
+	}
+
+	if (!geometry || !geometry.type || !geometry.coordinates) {
+		throw new Error('Invalid GeoJSON feature: Missing geometry or coordinates.');
+	}
+
+	// Normalize geometries into a common structure for processing
+	let coordinates: any[] = [];
+	switch (geometry.type) {
+		case 'Point':
+			coordinates = [[geometry.coordinates]]; // [[x, y]]
+			break;
+		case 'LineString':
+		case 'MultiPoint':
+			coordinates = [geometry.coordinates]; // [[x, y], [x, y]]
+			break;
+		case 'Polygon':
+		case 'MultiLineString':
+			coordinates = geometry.coordinates; // [[[x, y], [x, y]]]
+			break;
+		case 'MultiPolygon':
+			coordinates = geometry.coordinates.flat(); // Flatten [[[...]], [[...]]]
+			break;
+		default:
+			throw new Error(`Unsupported GeoJSON geometry type: ${geometry}`);
+	}
+
+	// Convert to JavaRosa format
+	const javarosaGeometry = coordinates
+		.flatMap((polygonOrLine) =>
+			polygonOrLine.map(([longitude, latitude]: [number, number]) => `${latitude} ${longitude} 0.0 0.0`),
+		)
+		.join(';');
+
+	// Must append a final ; to finish the geom
+	return `${javarosaGeometry};`;
+}
diff --git a/src/mapper/src/lib/utils/qrcode.ts b/src/mapper/src/lib/odk/qrcode.ts
similarity index 100%
rename from src/mapper/src/lib/utils/qrcode.ts
rename to src/mapper/src/lib/odk/qrcode.ts
diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
index 29da5f548b..90b18af518 100644
--- a/src/mapper/src/routes/[projectId]/+page.svelte
+++ b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -18,6 +18,7 @@
 	import DialogTaskActions from '$lib/components/dialog-task-actions.svelte';
 	import DialogEntityActions from '$lib/components/dialog-entities-actions.svelte';
 	import type { ProjectTask } from '$lib/types';
+	import { openOdkCollectNewFeature } from '$lib/odk/collect';
 	import { convertDateToTimeAgo } from '$lib/utils/datetime';
 	import { getTaskStore, getTaskEventStream } from '$store/tasks.svelte.ts';
 	import { getEntitiesStatusStore, getEntityStatusStream } from '$store/entities.svelte.ts';
@@ -31,12 +32,13 @@
 
 	let { data }: Props = $props();
 
-	let mapComponent: maplibregl.Map | undefined = $state(undefined);
+	let maplibreMap: maplibregl.Map | undefined = $state(undefined);
 	let tabGroup: SlTabGroup;
 	let selectedTab: string = $state('map');
 	let openedActionModal: 'entity-modal' | 'task-modal' | null = $state(null);
-	let isTaskActionModalOpen = $state(false);
+	let isTaskActionModalOpen: boolean = $state(false);
 	let infoDialogRef: SlDialog | null = $state(null);
+	let isDrawEnabled: boolean = $state(false);
 
 	const taskStore = getTaskStore();
 	const entitiesStore = getEntitiesStatusStore();
@@ -60,9 +62,9 @@
 
 		const taskPolygon = polygon(taskObj.outline.coordinates);
 		const taskBuffer = buffer(taskPolygon, 5, { units: 'meters' });
-		if (taskBuffer && mapComponent) {
+		if (taskBuffer && maplibreMap) {
 			const taskBbox: [number, number, number, number] = bbox(taskBuffer) as [number, number, number, number];
-			mapComponent.fitBounds(taskBbox, { duration: 500 });
+			maplibreMap.fitBounds(taskBbox, { duration: 500 });
 		}
 
 		// Open the map tab
@@ -114,7 +116,7 @@
 <div class="h-[calc(100svh-3.699rem)] sm:h-[calc(100svh-4.625rem)]">
 	<MapComponent
 		setMapRef={(map) => {
-			mapComponent = map;
+			maplibreMap = map;
 		}}
 		toggleActionModal={(value) => {
 			openedActionModal = value;
@@ -122,6 +124,11 @@
 		projectOutlineCoords={data.project.outline.coordinates}
 		projectId={data.projectId}
 		entitiesUrl={data.project.data_extract_url}
+		draw={isDrawEnabled}
+		handleDrawnGeom={(geom) => {
+			isDrawEnabled = false;
+			openOdkCollectNewFeature(data?.project?.odk_form_id, geom);
+		}}
 	></MapComponent>
 	<!-- task action buttons popup -->
 	<DialogTaskActions
@@ -131,6 +138,10 @@
 		}}
 		{selectedTab}
 		projectData={data?.project}
+		clickMapNewFeature={() => {
+			openedActionModal = null;
+			isDrawEnabled = true;
+		}}
 	/>
 	<DialogEntityActions
 		isTaskActionModalOpen={openedActionModal === 'entity-modal'}