Adds support for editing point feature

Author: latin-panda

packages/web-forms/src/components/common/map/MapAdvancedPanel.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 import IconSVG from '@/components/common/IconSVG.vue';
 import { toGeoJsonCoordinateArray } from '@/components/common/map/map-helpers.ts';
-import { fromLonLat, toLonLat } from 'ol/proj';
+import { fromLonLat } from 'ol/proj';
 import { ref, watch } from 'vue';
 import type { Coordinate } from 'ol/coordinate';
 
 const props = defineProps<{
 	isOpen: boolean;
-	selectedVertex: Coordinate | undefined;
+	coordinates: Coordinate | undefined;
 }>();
 
 const emit = defineEmits(['open-paste-dialog', 'save']);
@@ -18,22 +18,26 @@ const altitude = ref<number | undefined>();
 const longitude = ref<number | undefined>();
 
 watch(
-	() => props.selectedVertex,
+	() => props.coordinates,
 	(newVal) => {
 		if (newVal) {
-			[longitude.value, latitude.value, altitude.value, accuracy.value] = toLonLat(newVal);
+			[longitude.value, latitude.value, altitude.value, accuracy.value] = newVal;
 			return;
 		}
 		accuracy.value = undefined;
 		latitude.value = undefined;
 		altitude.value = undefined;
 		longitude.value = undefined;
 	},
-	{ deep: true }
+	{ immediate: true }
 );
 
 const updateVertex = () => {
-	const [originalLong, originalLat] = toLonLat(props.selectedVertex ?? []);
+	if (!props.coordinates?.length) {
+		return;
+	}
+
+	const [originalLong, originalLat] = props.coordinates;
 	const long = longitude.value ?? originalLong;
 	const lat = latitude.value ?? originalLat;
 	if (long === undefined || lat === undefined) {

packages/web-forms/src/components/common/map/MapBlock.vue

@@ -15,8 +15,9 @@ import MapUpdateCoordsDialog from '@/components/common/map/MapUpdateCoordsDialog
 import { STATES, useMapBlock } from '@/components/common/map/useMapBlock.ts';
 import { type DrawFeatureType } from '@/components/common/map/useMapInteractions.ts';
 import { QUESTION_HAS_ERROR } from '@/lib/constants/injection-keys.ts';
-import type { Feature, FeatureCollection } from 'geojson';
+import type { Feature, FeatureCollection, Point as PointGeoJSON } from 'geojson';
 import type { Coordinate } from 'ol/coordinate';
+import { toLonLat } from 'ol/proj';
 import Button from 'primevue/button';
 import Message from 'primevue/message';
 import { computed, type ComputedRef, inject, onMounted, onUnmounted, ref, watch } from 'vue';
@@ -56,6 +57,20 @@ const mapHandler = useMapBlock(
 	}
 );
 
+const advancedPanelCoords = computed<Coordinate | undefined>(() => {
+	// if !can-open-advanced-panel return
+	if (props.drawFeatureType && selectedVertex.value) {
+		return toLonLat(selectedVertex.value);
+	}
+
+	const geometry = props.savedFeatureValue?.geometry as PointGeoJSON | undefined;
+	if (geometry) {
+		return geometry.coordinates;
+	}
+
+	return undefined;
+});
+
 const showSecondaryControls = computed(() => {
 	return !props.disabled && (mapHandler.canUndoChange() || mapHandler.canDeleteFeatureOrVertex());
 });
@@ -141,14 +156,19 @@ const undoLastChange = () => {
 	emitSavedFeature();
 };
 
-const updateFeatureCoords = (newCoords: Coordinate[] & Coordinate[][]) => {
+const updateFeatureCoords = (newCoords: Coordinate | Coordinate[] | Coordinate[][]) => {
 	mapHandler.updateFeatureCoordinates(newCoords);
 	emitSavedFeature();
 };
 
-const updateVertexCoords = (newCoords: Coordinate) => {
-	mapHandler.updateVertexCoords(newCoords);
-	emitSavedFeature();
+const saveAdvancedPanelCoords = (newCoords: Coordinate) => {
+	if (props.drawFeatureType) {
+		mapHandler.updateVertexCoords(newCoords);
+		emitSavedFeature();
+		return;
+	}
+
+	updateFeatureCoords(newCoords);
 };
 </script>
 
@@ -191,6 +211,7 @@ const updateVertexCoords = (newCoords: Coordinate) => {
 			</div>
 
 			<MapStatusBar
+				:can-enable-advanced-panel="!!advancedPanelCoords"
 				:can-open-advanced-panel="true"
 				:can-remove="!disabled && mapHandler.canRemoveCurrentLocation()"
 				:can-save="!disabled && mapHandler.canSaveCurrentLocation()"
@@ -208,9 +229,9 @@ const updateVertexCoords = (newCoords: Coordinate) => {
 
 			<MapAdvancedPanel
 				:is-open="isAdvancedPanelOpen"
-				:selected-vertex="selectedVertex"
+				:coordinates="advancedPanelCoords"
 				@open-paste-dialog="isUpdateCoordsDialogOpen = true"
-				@save="updateVertexCoords"
+				@save="saveAdvancedPanelCoords"
 			/>
 
 			<MapProperties

packages/web-forms/src/components/common/map/MapStatusBar.vue

@@ -28,6 +28,7 @@ const props = defineProps<{
 	canSave: boolean;
 	canViewDetails: boolean;
 	canOpenAdvancedPanel: boolean;
+	canEnableAdvancedPanel: boolean;
 }>();
 
 const emit = defineEmits(['discard', 'open-advanced-panel', 'save', 'view-details']);
@@ -129,21 +130,23 @@ const savedStatus = computed<StatusDetails | null>(() => {
 				<IconSVG :name="savedStatus.icon" :variant="savedStatus.highlight ? 'success' : 'base'" />
 				<span>{{ savedStatus.message }}</span>
 			</div>
-			<Button v-if="canRemove" outlined severity="contrast" @click="emit('discard')">
-				<span>–</span>
-				<!-- TODO: translations -->
-				<span class="mobile-only">Remove</span>
-				<span class="desktop-only">Remove point</span>
-			</Button>
-			<Button v-if="canViewDetails" outlined severity="contrast" @click="emit('view-details')">
-				<!-- TODO: translations -->
-				<span>View details</span>
-			</Button>
-			<Button v-if="canOpenAdvancedPanel" class="advanced-button" :disabled="!selectedVertexInfo.length" outlined severity="contrast" @click="emit('open-advanced-panel')">
-				<IconSVG name="mdiCogOutline" />
-				<!-- TODO: translations -->
-				<span>Advanced</span>
-			</Button>
+			<div class="map-status-buttons">
+				<Button v-if="canRemove" outlined severity="contrast" @click="emit('discard')">
+					<span>–</span>
+					<!-- TODO: translations -->
+					<span class="mobile-only">Remove</span>
+					<span class="desktop-only">Remove point</span>
+				</Button>
+				<Button v-if="canViewDetails" outlined severity="contrast" @click="emit('view-details')">
+					<!-- TODO: translations -->
+					<span>View details</span>
+				</Button>
+				<Button v-if="canOpenAdvancedPanel" class="advanced-button" :disabled="!canEnableAdvancedPanel" outlined severity="contrast" @click="emit('open-advanced-panel')">
+					<IconSVG name="mdiCogOutline" />
+					<!-- TODO: translations -->
+					<span>Advanced</span>
+				</Button>
+			</div>
 		</div>
 
 		<div v-else class="map-status-container">
@@ -207,6 +210,11 @@ const savedStatus = computed<StatusDetails | null>(() => {
 	height: 20px;
 }
 
+.map-status-buttons {
+	display: flex;
+	gap: var(--odk-map-controls-spacing);
+}
+
 @media screen and (max-width: #{pf.$sm}) {
 	.advanced-button span {
 		display: none;

packages/web-forms/src/components/common/map/MapUpdateCoordsDialog.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { getGeoJSONCoordinates } from '@/components/common/map/createFeatureCollectionAndProps.ts';
+import { createGeoJSONGeometry } from '@/components/common/map/createFeatureCollectionAndProps.ts';
 import {
 	DRAW_FEATURE_TYPES,
 	type DrawFeatureType,
 } from '@/components/common/map/useMapInteractions.ts';
 import { isCoordsEqual } from '@/components/common/map/vertex-geometry.ts';
-import type { FeatureCollection, LineString, Point, Polygon } from 'geojson';
+import type { FeatureCollection, Geometry, LineString, Point, Polygon } from 'geojson';
 import { fromLonLat } from 'ol/proj';
 import Button from 'primevue/button';
 import Dialog from 'primevue/dialog';
@@ -43,7 +43,7 @@ const selectFile = (event: Event) => {
 	error.value = null;
 };
 
-const parseFileCoordinates = async (file: File): Promise<Coordinate[] | undefined> => {
+const parseFileCoordinates = async (file: File): Promise<Geometry | undefined> => {
 	try {
 		const text = await file.text();
 		if (!text.trim()) {
@@ -68,17 +68,12 @@ const parseFileCoordinates = async (file: File): Promise<Coordinate[] | undefine
 	}
 };
 
-const parseGeoJSONCoordinates = (text: string): Coordinate[] | undefined => {
+const parseGeoJSONCoordinates = (text: string): Geometry | undefined => {
 	const geojson = JSON.parse(text) as FeatureCollection<LineString | Point | Polygon>;
-	const coords = geojson?.features?.[0]?.geometry?.coordinates as Coordinate[] | undefined;
-	if (!Array.isArray(coords)) {
-		return;
-	}
-
-	return coords;
+	return geojson?.features?.[0]?.geometry;
 };
 
-const parseCSVGeometry = (text: string): Coordinate[] | undefined => {
+const parseCSVGeometry = (text: string): Geometry | undefined => {
 	const lines = text.split(/\r?\n/).filter((line) => line.trim().length > 0);
 	if (lines.length < 2) {
 		return;
@@ -92,7 +87,7 @@ const parseCSVGeometry = (text: string): Coordinate[] | undefined => {
 
 	const firstDataRow = lines[1]?.split(',') ?? [];
 	const geometryValue = firstDataRow[geometryIndex]?.trim() ?? '';
-	return getGeoJSONCoordinates(geometryValue);
+	return createGeoJSONGeometry(geometryValue) as Geometry | undefined;
 };
 
 const parsePastedValue = () => {
@@ -101,58 +96,69 @@ const parsePastedValue = () => {
 		return;
 	}
 
-	return getGeoJSONCoordinates(value);
+	return createGeoJSONGeometry(value) as Geometry | undefined;
 };
 
-const isExpectedFeatureType = (coords: Coordinate | Coordinate[] | Coordinate[][]) => {
-	const isPoint = !props.drawFeatureType && !Array.isArray(coords[0]) && coords.length > 2;
-	if (isPoint) {
-		return true;
+const getValidCoordinates = (geometry: LineString | Point | Polygon | undefined) => {
+	if (!geometry?.coordinates) {
+		return;
+	}
+
+	const coords = geometry.coordinates as Coordinate | Coordinate[] | Coordinate[][];
+	if (geometry.type === 'Point' && !props.drawFeatureType && !Array.isArray(coords[0])) {
+		return fromLonLat(coords as Coordinate);
 	}
 
 	const hasRing = Array.isArray(coords[0]) && Array.isArray(coords[0][0]);
-	const flatCoords = (hasRing ? coords[0] : coords) as Coordinate[];
+	let flatCoords = (hasRing ? coords[0] : coords) as Coordinate[];
 	if (!flatCoords?.length) {
-		return false;
+		return;
 	}
 
+	flatCoords = flatCoords.map((c) => fromLonLat(c));
 	const isClosed = isCoordsEqual(flatCoords[0], flatCoords[flatCoords.length - 1]);
-	if (props.drawFeatureType === DRAW_FEATURE_TYPES.TRACE && !isClosed && flatCoords.length >= 2) {
-		return true;
+	if (
+		geometry.type === 'LineString' &&
+		props.drawFeatureType === DRAW_FEATURE_TYPES.TRACE &&
+		!isClosed &&
+		flatCoords.length >= 2
+	) {
+		return flatCoords;
 	}
 
-	return props.drawFeatureType === DRAW_FEATURE_TYPES.SHAPE && isClosed && flatCoords.length >= 3;
+	if (
+		geometry.type === 'Polygon' &&
+		props.drawFeatureType === DRAW_FEATURE_TYPES.SHAPE &&
+		isClosed &&
+		flatCoords.length >= 3
+	) {
+		return [flatCoords];
+	}
 };
 
 const save = async () => {
 	error.value = null;
-	let coordinates: Coordinate[] | undefined;
+	let geometry;
 	if (selectedFile.value) {
-		coordinates = await parseFileCoordinates(selectedFile.value);
+		geometry = await parseFileCoordinates(selectedFile.value);
 	} else if (hasPastedValue.value) {
-		coordinates = parsePastedValue();
+		geometry = parsePastedValue();
 	}
 
+	const coordinates = getValidCoordinates(geometry as LineString | Point | Polygon | undefined);
 	if (!coordinates?.length) {
-		// TODO: translations
-		error.value ??= 'No valid coordinates found.';
-		return;
-	}
-
-	coordinates = coordinates.map((coord) => fromLonLat(coord));
-	if (!isExpectedFeatureType(coordinates)) {
 		// TODO: translations
 		error.value ??= 'Incorrect geometry type.';
 		return;
 	}
 
-	emit('save', coordinates);
 	close();
+	emit('save', coordinates);
 };
 
 const close = () => {
-	emit('update:visible', false);
 	reset();
+	emit('update:visible', false);
 };
 
 const reset = () => {
@@ -182,6 +188,7 @@ watch(pasteValue, (newVal) => {
 		class="map-paste-dialog"
 		:draggable="false"
 		@update:visible="emit('update:visible', $event)"
+		@after-hide="reset"
 	>
 		<template #header>
 			<!-- TODO: translations -->
@@ -198,6 +205,8 @@ watch(pasteValue, (newVal) => {
 			<div class="dialog-field-container">
 				<!-- TODO: translations -->
 				<label>Or upload a GeoJSON or a CSV file</label>
+				<!-- TODO: translations -->
+				<span v-if="selectedFile"><i>File uploaded</i></span>
 				<Button outlined severity="contrast" @click="openFileChooser">
 					<IconSVG name="mdiUpload" />
 					<!-- TODO: translations -->
@@ -209,12 +218,14 @@ watch(pasteValue, (newVal) => {
 					type="file"
 					accept=".geojson,.csv,application/json,text/csv"
 					@change="selectFile"
-				/>
+				>
 			</div>
 		</template>
 
 		<template #footer>
-			<p v-if="error?.length" class="coords-error-message">{{ error }}</p>
+			<p v-if="error?.length" class="coords-error-message">
+				{{ error }}
+			</p>
 			<Button label="Save" :disabled="!selectedFile && !hasPastedValue" @click="save" />
 		</template>
 	</Dialog>
@@ -243,6 +254,7 @@ watch(pasteValue, (newVal) => {
 }
 
 .coords-error-message {
+	display: block;
 	color: var(--odk-error-text-color);
 	margin-bottom: 10px;
 }