diff --git a/.changeset/brown-mice-rescue.md b/.changeset/brown-mice-rescue.md new file mode 100644 index 000000000..5828f3ecf --- /dev/null +++ b/.changeset/brown-mice-rescue.md @@ -0,0 +1,5 @@ +--- +'@getodk/web-forms': minor +--- + +Remove long-press interactions in maps diff --git a/packages/web-forms/e2e/page-objects/controls/MapControl.ts b/packages/web-forms/e2e/page-objects/controls/MapControl.ts index d8e2662e6..2ac37fb63 100644 --- a/packages/web-forms/e2e/page-objects/controls/MapControl.ts +++ b/packages/web-forms/e2e/page-objects/controls/MapControl.ts @@ -58,7 +58,7 @@ export class MapControl { await this.page.mouse.up(); } - async longPressMap(mapComponent: Locator, moveX: number, moveY: number) { + async tapToAddPoint(mapComponent: Locator, moveX: number, moveY: number) { const box = await mapComponent.locator(this.MAP_CONTAINER_SELECTOR).boundingBox(); if (!box) { return; @@ -69,7 +69,7 @@ export class MapControl { await this.page.mouse.move(centerX + moveX, centerY + moveY); await this.page.mouse.down(); - await this.page.waitForTimeout(1400); // Press and hold + await this.page.waitForTimeout(200); // Press await this.page.mouse.up(); await this.page.waitForTimeout(300); // Process point } diff --git a/packages/web-forms/e2e/test-cases/visual/all-question-types.test.ts b/packages/web-forms/e2e/test-cases/visual/all-question-types.test.ts index a2bcea425..eabfd6a2b 100644 --- a/packages/web-forms/e2e/test-cases/visual/all-question-types.test.ts +++ b/packages/web-forms/e2e/test-cases/visual/all-question-types.test.ts @@ -126,7 +126,7 @@ test.describe('All Question Types (Visual)', () => { }); test('adds a new point elsewhere, removes saved point', async () => { - await formPage.map.longPressMap(mapComponent, 100, 100); + await formPage.map.tapToAddPoint(mapComponent, 100, 100); await formPage.map.expectMapScreenshot(mapComponent, 'placement-map-new-point-saved.png'); await formPage.map.removeSavedPoint(mapComponent); @@ -184,10 +184,10 @@ test.describe('All Question Types (Visual)', () => { await formPage.map.expectMapScreenshot(mapComponent, 'geoshape-initial-state.png'); await formPage.waitForNetworkIdle(); await formPage.map.scrollMapIntoView(mapComponent); - await formPage.map.longPressMap(mapComponent, 100, 100); - await formPage.map.longPressMap(mapComponent, 150, -50); + await formPage.map.tapToAddPoint(mapComponent, 100, 100); + await formPage.map.tapToAddPoint(mapComponent, 150, -50); await formPage.map.expectMapScreenshot(mapComponent, 'geoshape-uncompleted-polygon.png'); - await formPage.map.longPressMap(mapComponent, 50, -150); + await formPage.map.tapToAddPoint(mapComponent, 50, -150); await formPage.map.expectMapScreenshot(mapComponent, 'geoshape-autoclose-polygon.png'); }); }); @@ -213,10 +213,10 @@ test.describe('All Question Types (Visual)', () => { await formPage.map.expectMapScreenshot(mapComponent, 'geotrace-initial-state.png'); await formPage.waitForNetworkIdle(); await formPage.map.scrollMapIntoView(mapComponent); - await formPage.map.longPressMap(mapComponent, 100, 100); - await formPage.map.longPressMap(mapComponent, 150, -50); + await formPage.map.tapToAddPoint(mapComponent, 100, 100); + await formPage.map.tapToAddPoint(mapComponent, 150, -50); await formPage.map.expectMapScreenshot(mapComponent, 'geotrace-two-points.png'); - await formPage.map.longPressMap(mapComponent, 50, -75); + await formPage.map.tapToAddPoint(mapComponent, 50, -75); await formPage.map.expectMapScreenshot(mapComponent, 'geoshape-three-points.png'); }); }); diff --git a/packages/web-forms/src/components/common/map/MapBlock.vue b/packages/web-forms/src/components/common/map/MapBlock.vue index 3fb06aca7..73eecaf58 100644 --- a/packages/web-forms/src/components/common/map/MapBlock.vue +++ b/packages/web-forms/src/components/common/map/MapBlock.vue @@ -37,6 +37,7 @@ const isFullScreen = ref(false); const isAdvancedPanelOpen = ref(false); const confirmDeleteAction = ref(false); const isUpdateCoordsDialogOpen = ref(false); +const pointPlaced = ref(false); const selectedVertex = ref(); const showErrorStyle = inject>( QUESTION_HAS_ERROR, @@ -46,7 +47,7 @@ const showErrorStyle = inject>( const mapHandler = useMapBlock( { mode: props.mode, singleFeatureType: props.singleFeatureType }, { - onFeaturePlacement: () => emitSavedFeature(), + onFeaturePlacement: () => onFeaturePlacement(), onVertexSelect: (vertex) => (selectedVertex.value = vertex), } ); @@ -98,6 +99,11 @@ watch( (newValue) => mapHandler.setupMapInteractions(newValue) ); +const onFeaturePlacement = () => { + pointPlaced.value = true; + emitSavedFeature(); +}; + const handleEscapeKey = (event: KeyboardEvent) => { if (event.key === 'Escape' && isFullScreen.value) { isFullScreen.value = false; @@ -175,15 +181,15 @@ const saveAdvancedPanelCoords = (newCoords: Coordinate) => { /> - Press and drag to move a point - Long press to place a point + Press and drag to move a point + Tap to place a point diff --git a/packages/web-forms/src/components/common/map/MapStatusBar.vue b/packages/web-forms/src/components/common/map/MapStatusBar.vue index 24b3e402e..dab7abab3 100644 --- a/packages/web-forms/src/components/common/map/MapStatusBar.vue +++ b/packages/web-forms/src/components/common/map/MapStatusBar.vue @@ -133,6 +133,14 @@ const savedStatus = computed(() => { return { message: 'Point saved', icon: 'mdiCheckCircle', highlight: true }; }); + +const displayState = computed(() => { + const baseState = savedStatus.value ?? noSavedStatus.value; + if (selectedVertexInfo.value.length) { + return { ...baseState, message: selectedVertexInfo.value }; + } + return { ...baseState }; +});