fix(mapper): flaky new feature polygon draw (#2118)

* fix(main): fix flaky polygon drawing * feat(+page): show options to discard or proceed with the drawn feature * fix(+page): fix condition * fix(+page): add task_id as param to ODK intent URL
hotosm · Jan 27, 2025 · f952097 · f952097
1 parent bb2fa96
commit f952097
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 15 deletions.
diff --git a/src/mapper/src/lib/components/map/main.svelte b/src/mapper/src/lib/components/map/main.svelte
@@ -55,7 +55,7 @@
 		setMapRef: (map: maplibregl.Map | undefined) => void;
 		draw?: boolean;
 		drawGeomType: NewGeomTypes | undefined;
-		handleDrawnGeom?: ((geojson: GeoJSONGeometry) => void) | null;
+		handleDrawnGeom?: ((drawInstance: any, geojson: GeoJSONGeometry) => void) | null;
 	}
 
 	let {
@@ -127,10 +127,7 @@
 	type DrawModeOptions = 'point' | 'linestring' | 'delete-selection' | 'polygon';
 	const currentDrawMode: DrawModeOptions = drawGeomType ? (drawGeomType.toLowerCase() as DrawModeOptions) : 'point';
 	const drawControl = new MaplibreTerradrawControl({
-		modes: [
-			currentDrawMode,
-			// 'delete-selection'
-		],
+		modes: [currentDrawMode, 'select', 'delete'],
 		// Note We do not open the toolbar options, allowing the user
 		// to simply click with a pre-defined mode active
 		// open: true,
@@ -225,7 +222,6 @@
 
 			const drawInstance = drawControl.getTerraDrawInstance();
 			if (drawInstance && handleDrawnGeom) {
-				drawInstance.start();
 				drawInstance.setMode(currentDrawMode);
 
 				drawInstance.on('finish', (id: string, _context: any) => {
@@ -238,11 +234,10 @@
 					} else {
 						console.error(`Feature with id ${id} not found or has no geometry.`);
 					}
-					drawInstance.stop();
 
 					if (firstGeom) {
-						removeTerraDrawLayers();
-						handleDrawnGeom(firstGeom);
+						handleDrawnGeom(drawInstance, firstGeom);
+						displayDrawHelpText = false;
 					}
 				});
 			}

diff --git a/src/mapper/src/lib/odk/collect.ts b/src/mapper/src/lib/odk/collect.ts
@@ -5,7 +5,7 @@ import { geojsonGeomToJavarosa } from '$lib/odk/javarosa';
 
 const alertStore = getAlertStore();
 
-export function openOdkCollectNewFeature(xFormId: string, geom: GeoJSONGeometry) {
+export function openOdkCollectNewFeature(xFormId: string, geom: GeoJSONGeometry, task_id: number | null) {
 	if (!xFormId || !geom) {
 		return;
 	}
@@ -16,7 +16,7 @@ export function openOdkCollectNewFeature(xFormId: string, geom: GeoJSONGeometry)
 
 	if (isMobile) {
 		// TODO we need to update the form to support task_id=${}&
-		document.location.href = `odkcollect://form/${xFormId}?new_feature=${javarosaGeom}`;
+		document.location.href = `odkcollect://form/${xFormId}?new_feature=${javarosaGeom}&task_id=${task_id}`;
 	} else {
 		alertStore.setAlert({
 			variant: 'warning',

diff --git a/src/mapper/src/routes/[projectId]/+page.svelte b/src/mapper/src/routes/[projectId]/+page.svelte
@@ -148,6 +148,19 @@
 			});
 		}
 	});
+
+	let newFeatureDrawInstance: any = $state(null);
+	let newFeatureGeom: any = $state(null);
+
+	function mapNewFeatureInODK() {
+		openOdkCollectNewFeature(data?.project?.odk_form_id, newFeatureGeom, taskStore.selectedTaskId);
+	}
+	function cancelMapNewFeatureInODK() {
+		newFeatureDrawInstance.clear();
+		isDrawEnabled = false;
+		newFeatureDrawInstance = null;
+		newFeatureGeom = null;
+	}
 </script>
 
 <!-- There is a new event to display in the top right corner -->
@@ -162,7 +175,7 @@
 {/if}
 
 <!-- The main page -->
-<div class="h-[calc(100svh-3.699rem)] sm:h-[calc(100svh-4.625rem)]">
+<div class="h-[calc(100svh-3.699rem)] sm:h-[calc(100svh-4.625rem)] font-barlow">
 	<MapComponent
 		setMapRef={(map) => {
 			maplibreMap = map;
@@ -175,11 +188,51 @@
 		entitiesUrl={data.project.data_extract_url}
 		draw={isDrawEnabled}
 		drawGeomType={data.project.new_geom_type}
-		handleDrawnGeom={(geom) => {
-			isDrawEnabled = false;
-			openOdkCollectNewFeature(data?.project?.odk_form_id, geom);
+		handleDrawnGeom={(drawInstance, geom) => {
+			newFeatureDrawInstance = drawInstance;
+			newFeatureGeom = geom;
+			// after drawing a feature, allow user to modify the drawn feature
+			newFeatureDrawInstance.setMode('select');
 		}}
 	></MapComponent>
+
+	{#if newFeatureGeom}
+		<div class="absolute left-0 right-0 z-20 top-[4.5rem] sm:top-[5.2rem] flex justify-center pointer-events-none">
+			<div class="pointer-events-auto bg-white px-4 py-2 rounded-md shadow-lg w-fit max-w-[65%]">
+				<p class="mb-2">Are you sure you want to confirm & make submission?</p>
+				<div class="flex gap-2 justify-end">
+					<sl-button
+						onclick={() => {
+							cancelMapNewFeatureInODK();
+						}}
+						onkeydown={(e: KeyboardEvent) => {
+							if (e.key === 'Enter') {
+								cancelMapNewFeatureInODK();
+							}
+						}}
+						role="button"
+						tabindex="0"
+						size="small"
+						class="secondary w-fit"
+					>
+						<span class="font-barlow font-medium text-xs uppercase">CANCEL</span>
+					</sl-button>
+					<sl-button
+						onclick={() => mapNewFeatureInODK()}
+						onkeydown={(e: KeyboardEvent) => {
+							e.key === 'Enter' && mapNewFeatureInODK();
+						}}
+						role="button"
+						tabindex="0"
+						size="small"
+						class="primary w-fit"
+					>
+						<span class="font-barlow font-medium text-xs uppercase">PROCEED</span>
+					</sl-button>
+				</div>
+			</div>
+		</div>
+	{/if}
 	<!-- task action buttons popup -->
 	<DialogTaskActions
 		isTaskActionModalOpen={openedActionModal === 'task-modal'}