MapComplete/src/UI/BigComponents/CompassWidget.svelte

<script lang="ts">/**
 * Show a compass. The compass outline rotates with the map, the compass needle points to the actual north
 */
import { UIEventSource } from "../../Logic/UIEventSource"
import { Orientation } from "../../Sensors/Orientation"
import Compass_back from "../../assets/svg/Compass_back.svelte"
import Compass_needle from "../../assets/svg/Compass_needle.svelte"
import North_arrow from "../../assets/svg/North_arrow.svelte"
import { Store } from "../../Logic/UIEventSource"
import { Translation } from "../i18n/Translation"

export let mapProperties: { rotation: UIEventSource<number>, allowRotating: Store<boolean> }
let orientation = Orientation.singleton.alpha
let mapRotation = mapProperties.rotation
export let size = "h-10 w-10"
let wrapperClass = "absolute top-0 left-0 " + size
let compassLoaded = Orientation.singleton.gotMeasurement
let allowRotation = mapProperties.allowRotating

function clicked(e: Event) {
  if (mapProperties.rotation.data === 0) {
    if (mapProperties.allowRotating.data && compassLoaded.data) {
      mapProperties.rotation.set(orientation.data)
    }
  } else {
    mapProperties.rotation.set(0)
    explanation.set(new Translation({ "*": "North is now up" }))
    showPopover = true
    Utils.waitFor(5000).then(() => {
      showPopover = false
    })
  }
}

</script>
<button style="z-index: -1" class={"relative as-link pointer-events-auto "+size} on:click={(e) => clicked(e)}>
  {#if $allowRotation && !$compassLoaded}
    <div class={"border-2 rounded-full border-gray-500 border-dotted  "+wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
      <North_arrow class="w-full" />
    </div>
  {:else}
    {#if $allowRotation}
      <div class={wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
        <Compass_back class="w-full" />
      </div>
    {/if}
    <div class={wrapperClass} style={`transform: rotate(${-$orientation}deg)`}>
      <Compass_needle class="w-full" />
    </div>
  {/if}
</button>