Improve map actions, tidy up some parts of the map component and ensure settings update properly

5 years ago · 52c8742067
4 changed files with 266 additions and 180 deletions
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -2558,7 +2558,7 @@
      {
        "type": "event",
        "label": "On marker click",
-        "key": "onMarkerClick",
+        "key": "onClickMarker",
        "context": [
          {
            "label": "Clicked marker",
@ -2566,58 +2566,66 @@
          }
        ]
      },
+      {
+        "type": "boolean",
+        "label": "Enable creating markers",
+        "key": "creationEnabled",
+        "defaultValue": false
+      },
      {
        "type": "event",
-        "label": "On map click",
-        "key": "onMapClick",
+        "label": "On create marker",
+        "key": "onCreateMarker",
+        "dependsOn": "creationEnabled",
        "context": [
          {
-            "label": "Clicked latitude",
+            "label": "New marker latitude",
            "key": "lat"
          },
          {
-            "label": "Clicked longitude",
+            "label": "New marker longitude",
            "key": "lng"
          }
        ]
      },
      {
        "type": "boolean",
-        "label": "Enable Fullscreen",
+        "label": "Enable fullscreen",
        "key": "fullScreenEnabled",
        "defaultValue": true
      },
      {
        "type": "boolean",
-        "label": "Enable Location",
+        "label": "Enable location",
        "key": "locationEnabled",
        "defaultValue": true
      },
      {
        "type": "boolean",
-        "label": "Enable Zoom",
+        "label": "Enable zoom",
        "key": "zoomEnabled",
        "defaultValue": true
      },
-      {
-        "type": "number",
-        "label": "Zoom Level (0-100)",
-        "key": "zoomLevel",
-        "defaultValue": 72,
-        "max": 100,
-        "min": 0
-      },
      {
        "type": "text",
        "label": "Tile URL",
        "key": "tileURL",
        "defaultValue": "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      },
+
      {
        "type": "text",
-        "label": "Default Location",
+        "label": "Default Location (when empty)",
        "key": "defaultLocation",
-        "defaultValue": "51.5072,-0.1276"
+        "placeholder": "51.5072,-0.1276"
+      },
+      {
+        "type": "number",
+        "label": "Default Location Zoom Level (0-100)",
+        "key": "zoomLevel",
+        "placeholder": 50,
+        "max": 100,
+        "min": 0
      },
      {
        "type": "text",
--- a/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
+++ b/packages/client/src/components/app/embedded-map/EmbeddedMap.svelte
@ -2,8 +2,8 @@
  import L from "leaflet"
  import sanitizeHtml from "sanitize-html"
  import "leaflet/dist/leaflet.css"
-  import { Helpers } from "@budibase/bbui"
-  import { getContext } from "svelte"
+  import { Helpers, Button } from "@budibase/bbui"
+  import { onMount, getContext } from "svelte"
  import {
    FullScreenControl,
    LocationControl,
@ -24,64 +24,136 @@
  export let defaultLocation
  export let tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  export let mapAttribution
-  export let onMarkerClick
-  export let onMapClick
+  export let creationEnabled = false
+  export let onClickMarker
+  export let onCreateMarker

  const { styleable, notificationStore } = getContext("sdk")
  const component = getContext("component")
  const embeddedMapId = `${Helpers.uuid()}-wrapper`

-  let cachedDeviceCoordinates
+  // Map Button Controls
+  const locationControl = new LocationControl({
+    position: "bottomright",
+    onLocationFail: err => {
+      if (err.code === GeolocationPositionError.PERMISSION_DENIED) {
+        notificationStore.actions.error(
+          "Location requests not permitted. Ensure location is enabled"
+        )
+      } else if (err.code === GeolocationPositionError.POSITION_UNAVAILABLE) {
+        notificationStore.actions.warning(
+          "Location could not be retrieved. Try again"
+        )
+      } else if (err.code === GeolocationPositionError.TIMEOUT) {
+        notificationStore.actions.warning(
+          "Location request timed out. Try again"
+        )
+      } else {
+        notificationStore.actions.error("Unknown location error")
+      }
+    },
+    onLocationSuccess: pos => {
+      cachedDeviceCoordinates = pos
+      if (typeof mapInstance === "object") {
+        mapInstance.setView(cachedDeviceCoordinates, 15)
+      }
+    },
+  })
+  const fullScreenControl = new FullScreenControl({
+    position: "topright",
+  })
+  const zoomControl = L.control.zoom({
+    position: "bottomright",
+  })
+
+  // Map and marker configuration
+  const defaultMarkerOptions = {
+    html:
+      '<div><svg width="26px" height="26px" class="spectrum-Icon" focusable="false" stroke="#b12b27" stroke-width="1%">' +
+      '<use xlink:href="#spectrum-icon-18-Location" /></svg></div>',
+    className: "embedded-map-marker",
+    iconSize: [26, 26],
+    iconAnchor: [13, 26],
+    popupAnchor: [0, -13],
+  }
+  const mapMarkerOptions = {
+    icon: L.divIcon(defaultMarkerOptions),
+    draggable: false,
+    alt: "Location Marker",
+  }
+  const candidateMarkerOptions = {
+    icon: L.divIcon({
+      ...defaultMarkerOptions,
+      className: "embedded-map-marker--candidate",
+    }),
+    draggable: false,
+    alt: "Location Marker",
+  }
+  const mapOptions = {
+    fullScreen: false,
+    zoomControl: false,
+    scrollWheelZoom: zoomEnabled,
+    minZoomLevel,
+    maxZoomLevel,
+  }
  const fallbackCoordinates = [51.5072, -0.1276] //London

  let mapInstance
  let mapMarkerGroup = new L.FeatureGroup()
-  let mapMarkers = []
-  let loaded = false
-
+  let candidateMarkerGroup = new L.FeatureGroup()
+  let candidateMarkerPosition
+  let mounted = false
+  let initialMarkerZoomCompleted = false
  let minZoomLevel = 0
  let maxZoomLevel = 18
-  let adjustedZoomLevel = !Number.isInteger(zoomLevel)
-    ? 72
-    : Math.round(zoomLevel * (maxZoomLevel / 100))
+  let cachedDeviceCoordinates

+  $: validRows = getValidRows(dataProvider?.rows, latitudeKey, longitudeKey)
+  $: safeZoomLevel = parseZoomLevel(zoomLevel)
+  $: defaultCoordinates = parseDefaultLocation(defaultLocation)
+  $: initMap(tileURL, mapAttribution, safeZoomLevel)
  $: zoomControlUpdated(mapInstance, zoomEnabled)
  $: locationControlUpdated(mapInstance, locationEnabled)
  $: fullScreenControlUpdated(mapInstance, fullScreenEnabled)
-  $: updateMapDimensions(
-    mapInstance,
-    $component.styles.normal.width,
-    $component.styles.normal.height
-  )
+  $: width = $component.styles.normal.width
+  $: height = $component.styles.normal.height
+  $: width, height, mapInstance?.invalidateSize()
+  $: defaultCoordinates, resetView()
  $: addMapMarkers(
    mapInstance,
-    dataProvider?.rows,
+    validRows,
    latitudeKey,
    longitudeKey,
    titleKey,
-    onMarkerClick
+    onClickMarker
  )
-  $: if (!loaded && typeof mapInstance === "object" && mapMarkers.length > 0) {
-    loaded = true
-    mapInstance.setZoom(0)
-    mapInstance.fitBounds(mapMarkerGroup.getBounds(), {
-      paddingTopLeft: [0, 24],
-    })
+
+  const isValidLatitude = value => {
+    return !isNaN(value) && value > -90 && value < 90
  }

-  const updateMapDimensions = mapInstance => {
-    if (typeof mapInstance !== "object") {
-      return
-    }
-    mapInstance.invalidateSize()
+  const isValidLongitude = value => {
+    return !isNaN(value) && value > -180 && value < 180
  }

-  let isValidLatitude = value => {
-    return !isNaN(value) && value > -90 && value < 90
+  const getValidRows = (rows, latKey, lngKey) => {
+    if (!rows?.length || !latKey || !lngKey) {
+      return []
+    }
+    return rows.filter(row => {
+      return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey])
+    })
  }

-  let isValidLongitude = value => {
-    return !isNaN(value) && value > -180 && value < 180
+  const parseZoomLevel = zoomLevel => {
+    let zoom = zoomLevel
+    if (zoom == null || isNaN(zoom)) {
+      zoom = 50
+    } else {
+      zoom = parseFloat(zoom)
+      zoom = Math.max(0, Math.min(100, zoom))
+    }
+    return Math.round((zoom * maxZoomLevel) / 100)
  }

  const parseDefaultLocation = defaultLocation => {
@ -102,44 +174,19 @@
      : fallbackCoordinates
  }

-  $: defaultCoordinates =
-    mapMarkers.length > 0
-      ? parseDefaultLocation(defaultLocation)
-      : fallbackCoordinates
-
-  // Map Button Controls
-  let locationControl = new LocationControl({
-    position: "bottomright",
-    onLocationFail: err => {
-      if (err.code === GeolocationPositionError.PERMISSION_DENIED) {
-        notificationStore.actions.error(
-          "Location requests not permitted. Ensure location is enabled"
-        )
-      } else if (err.code === GeolocationPositionError.POSITION_UNAVAILABLE) {
-        notificationStore.actions.warning(
-          "Location could not be retrieved. Try again"
-        )
-      } else if (err.code === GeolocationPositionError.TIMEOUT) {
-        notificationStore.actions.warning(
-          "Location request timed out. Try again"
-        )
-      } else {
-        notificationStore.actions.error("Unknown location error")
-      }
-    },
-    onLocationSuccess: pos => {
-      cachedDeviceCoordinates = pos
-      if (typeof mapInstance === "object") {
-        mapInstance.setView(cachedDeviceCoordinates, 15)
-      }
-    },
-  })
-  let fullScreenControl = new FullScreenControl({
-    position: "topright",
-  })
-  let zoomControl = L.control.zoom({
-    position: "bottomright",
-  })
+  const resetView = () => {
+    if (!mapInstance) {
+      return
+    }
+    if (mapMarkerGroup.getLayers().length) {
+      mapInstance.setZoom(0)
+      mapInstance.fitBounds(mapMarkerGroup.getBounds(), {
+        paddingTopLeft: [0, 24],
+      })
+    } else {
+      mapInstance.setView(defaultCoordinates, safeZoomLevel)
+    }
+  }

  const locationControlUpdated = (mapInstance, locationEnabled) => {
    if (typeof mapInstance !== "object") {
@ -176,51 +223,21 @@
    }
  }

-  //Map icon and marker configuration
-  const mapIconMarkup =
-    '<div><svg width="26px" height="26px" class="spectrum-Icon" focusable="false" stroke="#b12b27" stroke-width="1%">' +
-    '<use xlink:href="#spectrum-icon-18-Location" /></svg></div>'
-  const mapIcon = L.divIcon({
-    html: mapIconMarkup,
-    className: "embedded-map-marker",
-    iconSize: [26, 26],
-    iconAnchor: [13, 26],
-    popupAnchor: [0, -13],
-  })
-  const mapMarkerOptions = {
-    icon: mapIcon,
-    draggable: false,
-    alt: "Location Marker",
-  }
-  let mapOptions = {
-    fullScreen: false,
-    zoomControl: false,
-    scrollWheelZoom: zoomEnabled,
-    minZoomLevel,
-    maxZoomLevel,
-  }
-
  const addMapMarkers = (
    mapInstance,
-    rows,
+    validRows,
    latKey,
    lngKey,
    titleKey,
    onClick
  ) => {
-    if (typeof mapInstance !== "object" || !rows || !latKey || !lngKey) {
+    if (!mapInstance || !validRows?.length) {
      return
    }

    mapMarkerGroup.clearLayers()
-
-    const validRows = rows.filter(row => {
-      return isValidLatitude(row[latKey]) && isValidLongitude(row[lngKey])
-    })
-
    validRows.forEach(row => {
      let markerCoords = [row[latKey], row[lngKey]]
-
      let marker = L.marker(markerCoords, mapMarkerOptions).addTo(mapInstance)
      let markerContent = generateMarkerPopupContent(
        row[latKey],
@ -242,57 +259,91 @@
          })
        })
      }
-
-      mapMarkers = [...mapMarkers, marker]
    })
+
+    // Zoom to markers if this is the first time
+    if (!initialMarkerZoomCompleted) {
+      resetView()
+      initialMarkerZoomCompleted = true
+    }
  }

  const generateMarkerPopupContent = (latitude, longitude, text) => {
    return text || latitude + "," + longitude
  }

-  const initMap = () => {
-    const initCoords = defaultCoordinates
-
+  const initMap = (tileURL, attribution, zoom) => {
+    if (!mounted) {
+      return
+    }
+    if (mapInstance) {
+      mapInstance.remove()
+    }
    mapInstance = L.map(embeddedMapId, mapOptions)
    mapMarkerGroup.addTo(mapInstance)
+    candidateMarkerGroup.addTo(mapInstance)

-    const cleanAttribution = sanitizeHtml(mapAttribution, {
+    // Add attribution
+    const cleanAttribution = sanitizeHtml(attribution, {
      allowedTags: ["a"],
      allowedAttributes: {
        a: ["href", "target"],
      },
    })
-
    L.tileLayer(tileURL, {
      attribution: "&copy; " + cleanAttribution,
-      zoom: adjustedZoomLevel,
+      zoom,
    }).addTo(mapInstance)

-    //Initialise the map
-    mapInstance.setView(initCoords, adjustedZoomLevel)
-
    // Add click handler
-    mapInstance?.on("click", e => {
-      console.log("map clicked!")
-      if (onMapClick) {
-        onMapClick({
-          lat: e.latlng.lat,
-          lng: e.latlng.lng,
-        })
-      }
-    })
+    mapInstance.on("click", handleMapClick)
+
+    // Reset view
+    resetView()
  }

-  const mapAction = () => {
-    initMap()
-    return {
-      destroy() {
-        mapInstance.remove()
-        mapInstance = undefined
-      },
+  const handleMapClick = e => {
+    if (!creationEnabled) {
+      return
    }
+    candidateMarkerGroup.clearLayers()
+    candidateMarkerPosition = [e.latlng.lat, e.latlng.lng]
+    let candidateMarker = L.marker(
+      candidateMarkerPosition,
+      candidateMarkerOptions
+    )
+    candidateMarker
+      .bindTooltip("New marker", {
+        permanent: true,
+        direction: "top",
+        offset: [0, -25],
+      })
+      .addTo(candidateMarkerGroup)
+      .on("click", clearCandidateMarker)
  }
+
+  const createMarker = async () => {
+    if (!onCreateMarker) {
+      return
+    }
+    const res = await onCreateMarker({
+      lat: candidateMarkerPosition[0],
+      lng: candidateMarkerPosition[1],
+    })
+    if (res !== false) {
+      clearCandidateMarker()
+    }
+  }
+
+  const clearCandidateMarker = () => {
+    candidateMarkerGroup.clearLayers()
+    candidateMarkerPosition = null
+  }
+
+  onMount(() => {
+    mounted = true
+    initMap(tileURL, mapAttribution, safeZoomLevel)
+  })
 </script>

 <div class="embedded-map-wrapper map-default" use:styleable={$component.styles}>
@ -300,7 +351,14 @@
    <div>{error}</div>
  {/if}

-  <div id={embeddedMapId} class="embedded embedded-map" use:mapAction />
+  <div id={embeddedMapId} class="embedded embedded-map" />
+
+  {#if candidateMarkerPosition}
+    <div class="button-container">
+      <Button secondary quiet on:click={clearCandidateMarker}>Cancel</Button>
+      <Button cta on:click={createMarker}>Create marker</Button>
+    </div>
+  {/if}
 </div>

 <style>
@ -318,6 +376,9 @@
  .embedded-map :global(.embedded-map-marker) {
    color: #ee3b35;
  }
+  .embedded-map :global(.embedded-map-marker--candidate) {
+    color: var(--primaryColor);
+  }
  .embedded-map :global(.embedded-map-control) {
    font-size: 22px;
  }
@ -325,4 +386,12 @@
    height: 100%;
    width: 100%;
  }
+  .button-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: var(--spacing-xl);
+    margin-top: var(--spacing-xl);
+  }
 </style>
--- a/packages/client/src/stores/confirmation.js
+++ b/packages/client/src/stores/confirmation.js
@ -4,30 +4,36 @@ const initialState = {
  showConfirmation: false,
  title: null,
  text: null,
-  callback: null,
+  onConfirm: null,
+  onCancel: null,
 }

 const createConfirmationStore = () => {
  const store = writable(initialState)

-  const showConfirmation = (title, text, callback) => {
+  const showConfirmation = (title, text, onConfirm, onCancel) => {
    store.set({
      showConfirmation: true,
      title,
      text,
-      callback,
+      onConfirm,
+      onCancel,
    })
  }
  const confirm = async () => {
    const state = get(store)
-    if (!state.showConfirmation || !state.callback) {
+    if (!state.showConfirmation || !state.onConfirm) {
      return
    }
    store.set(initialState)
-    await state.callback()
+    await state.onConfirm()
  }
  const cancel = () => {
+    const state = get(store)
    store.set(initialState)
+    if (state.onCancel) {
+      state.onCancel()
+    }
  }

  return {
--- a/packages/client/src/utils/buttonActions.js
+++ b/packages/client/src/utils/buttonActions.js
@ -331,33 +331,36 @@ export const enrichButtonActions = (actions, context) => {
        // If this action is confirmable, show confirmation and await a
        // callback to execute further actions
        if (action.parameters?.confirm) {
-          const defaultText = confirmTextMap[action["##eventHandlerType"]]
-          const confirmText = action.parameters?.confirmText || defaultText
-          confirmationStore.actions.showConfirmation(
-            action["##eventHandlerType"],
-            confirmText,
-            async () => {
-              // When confirmed, execute this action immediately,
-              // then execute the rest of the actions in the chain
-              const result = await callback()
-              if (result !== false) {
-                // Generate a new total context to pass into the next enrichment
-                buttonContext.push(result)
-                const newContext = { ...context, actions: buttonContext }
-
-                // Enrich and call the next button action
-                const next = enrichButtonActions(
-                  actions.slice(i + 1),
-                  newContext
-                )
-                await next()
+          return new Promise(resolve => {
+            const defaultText = confirmTextMap[action["##eventHandlerType"]]
+            const confirmText = action.parameters?.confirmText || defaultText
+            confirmationStore.actions.showConfirmation(
+              action["##eventHandlerType"],
+              confirmText,
+              async () => {
+                // When confirmed, execute this action immediately,
+                // then execute the rest of the actions in the chain
+                const result = await callback()
+                if (result !== false) {
+                  // Generate a new total context to pass into the next enrichment
+                  buttonContext.push(result)
+                  const newContext = { ...context, actions: buttonContext }
+
+                  // Enrich and call the next button action
+                  const next = enrichButtonActions(
+                    actions.slice(i + 1),
+                    newContext
+                  )
+                  resolve(await next())
+                } else {
+                  resolve(false)
+                }
+              },
+              () => {
+                resolve(false)
              }
-            }
-          )
-
-          // Stop enriching actions when encountering a confirmable action,
-          // as the callback continues the action chain
-          return
+            )
+          })
        }

        // For non-confirmable actions, execute the handler immediately