Usertest: See #1315, add a 'confirm'-button on top of the precise-input location if the map is tapped; fix: make sure the dragInvitation doesn't consume the first map interaction, get's hidden by a change in map location

UI/Base/DragInvitation.svelte

@@ -11,9 +11,14 @@
   function hide() {
     mainElem.style.visibility = "hidden"
   }
+  let initTime = Date.now()
   if (hideSignal) {
     onDestroy(
       hideSignal.addCallbackD(() => {
+        if(initTime + 1000 > Date.now()){
+          console.log("Ignoring hide signal")
+          return
+        }
         console.log("Received hide signal")
         hide()
         return true
@@ -27,8 +32,8 @@
   }
 </script>
 
-<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full">
-  <div id="hand-container" class="pointer-events-none">
+<div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full pointer-events-none">
+  <div id="hand-container">
     <img src="./assets/svg/hand.svg" />
   </div>
 </div>

UI/BigComponents/NewPointLocationInput.svelte

@@ -15,6 +15,7 @@
   import FeatureSourceMerger from "../../Logic/FeatureSource/Sources/FeatureSourceMerger"
   import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
   import { Utils } from "../../Utils"
+  import {createEventDispatcher} from "svelte";
 
   /**
    * An advanced location input, which has support to:
@@ -44,6 +45,8 @@
     lat: number
   }>(undefined)
   
+  const dispatch = createEventDispatcher<{click: {lon: number, lat: number}}>()
+
   const xyz = Tiles.embedded_tile(coordinate.lat, coordinate.lon, 16)
   const map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
   let initialMapProperties: Partial<MapProperties> = {
@@ -106,6 +109,7 @@
 
 <LocationInput
   {map}
+  on:click={data => dispatch("click", data)}
   mapProperties={initialMapProperties}
   value={preciseLocation}
   initialCoordinate={coordinate}

UI/InputElement/Helpers/LocationInput.svelte

@@ -11,7 +11,7 @@
     import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
     import * as turf from "@turf/turf"
     import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
-  import { onDestroy } from "svelte"
+    import {createEventDispatcher, onDestroy} from "svelte"
 
     /**
      * A visualisation to pick a location on a map background
@@ -35,8 +35,13 @@
         mapProperties: MapProperties
     ) => void = undefined
 
+    const dispatch = createEventDispatcher<{ click: { lon: number, lat: number } }>()
+
     export let map: UIEventSource<MlMap> = new UIEventSource<MlMap>(undefined)
     let mla = new MapLibreAdaptor(map, mapProperties)
+    mla.lastClickLocation.addCallbackAndRunD(lastClick => {
+        dispatch("click", lastClick)
+    })
     mapProperties.location.syncWith(value)
     if (onCreated) {
         onCreated(value, map, mla)
@@ -87,5 +92,5 @@
         <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg"/>
     </div>
 
-  <DragInvitation hideSignal={mla.location.stabilized(3000)} />
+    <DragInvitation hideSignal={mla.location}/>
 </div>

UI/Map/MapLibreAdaptor.ts

@@ -83,7 +83,6 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
                 // Workaround, 'ShowPointLayer' sets this flag
                 return
             }
-            console.log(e)
             const lon = e.lngLat.lng
             const lat = e.lngLat.lat
             lastClickLocation.setData({ lon, lat })
@@ -321,10 +320,9 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap {
         if (this.location.data === undefined) {
             this.location.setData({ lon: lng, lat })
         } else if (!isSetup) {
-            const dt = this.location.data
-            dt.lon = map.getCenter().lng
-            dt.lat = map.getCenter().lat
-            this.location.ping()
+            const lon = map.getCenter().lng
+            const lat = map.getCenter().lat
+            this.location.setData({ lon, lat })
         }
         this.zoom.setData(Math.round(map.getZoom() * 10) / 10)
         const bounds = map.getBounds()

UI/Popup/AddNewPoint/AddNewPoint.svelte

@@ -75,6 +75,9 @@
     let preciseCoordinate: UIEventSource<{ lon: number; lat: number }> = new UIEventSource(undefined)
     let snappedToObject: UIEventSource<string> = new UIEventSource<string>(undefined)
 
+    // Small helper variable: if the map is tapped, we should let the 'Next'-button grab some attention as users have to click _that_ to continue, not the map
+    let preciseInputIsTapped = false
+
     let creating = false
 
     /**
@@ -86,6 +89,7 @@
         // When aborted, we force the contributors to place the pin _again_
         // This is because there might be a nearby object that was disabled; this forces them to re-evaluate the map
         state.lastClickObject.features.setData([])
+        preciseInputIsTapped = false
     }
 
     async function confirm() {
@@ -306,6 +310,7 @@
         <div class="relative w-full p-1">
             <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
                 <NewPointLocationInput
+                        on:click={() => {preciseInputIsTapped = true}}
                         value={preciseCoordinate}
                         snappedTo={snappedToObject}
                         {state}
@@ -314,6 +319,15 @@
                         snapToLayers={selectedPreset.preset.preciseInput.snapToLayers}
                 />
             </div>
+
+            <div class={(preciseInputIsTapped ? "" : "hidden") + " absolute top-4 flex justify-center w-full"}>
+                <NextButton on:click={confirm} clss="primary w-fit ">
+                    <div class="flex w-full justify-end gap-x-2">
+                        <Tr t={Translations.t.general.add.confirmLocation}/>
+                    </div>
+                </NextButton>
+            </div>
+
             <div class="absolute bottom-0 left-0 p-4">
                 <MapControlButton
                         on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
@@ -327,7 +341,7 @@
                 <Tr t={t.backToSelect}/>
             </BackButton>
 
-      <NextButton on:click={confirm} clss="primary w-full">
+            <NextButton on:click={confirm} clss={"primary w-full"}>
                 <div class="flex w-full justify-end gap-x-2">
                     <Tr t={Translations.t.general.add.confirmLocation}/>
                 </div>

public/css/index-tailwind-output.css

@@ -670,6 +670,10 @@ video {
   position: fixed;
 }
 
+.\!fixed {
+  position: fixed !important;
+}
+
 .absolute {
   position: absolute;
 }
@@ -795,10 +799,6 @@ video {
   margin: 1px;
 }
 
-.m-12 {
-  margin: 3rem;
-}
-
 .mx-1 {
   margin-left: 0.25rem;
   margin-right: 0.25rem;
@@ -1242,6 +1242,27 @@ video {
           animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
+@-webkit-keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+@keyframes ping {
+  75%, 100% {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+  }
+}
+
+.animate-ping {
+  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
@@ -1730,11 +1751,6 @@ video {
   color: rgb(107 114 128 / var(--tw-text-opacity));
 }
 
-.text-green-600 {
-  --tw-text-opacity: 1;
-  color: rgb(22 163 74 / var(--tw-text-opacity));
-}
-
 .underline {
   text-decoration-line: underline;
 }