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 { Store, 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"

export let mapProperties: { rotation: UIEventSource<number>, allowRotating: Store<boolean> }
let orientation = Orientation.singleton.alpha
let gotNonZero = new UIEventSource(false)
orientation.addCallbackAndRunD(o => {
  if (o !== undefined && o !== 0) {
    gotNonZero.set(true)
  }
})
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)
  }
}

</script>
{#if $allowRotation || !$gotNonZero}
<button style="z-index: -1" class={"relative as-link pointer-events-auto "+size} on:click={(e) => clicked(e)}>
  {#if $allowRotation && !$compassLoaded && !$gotNonZero}
    <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}
    {#if $compassLoaded && $gotNonZero}
      <div class={wrapperClass+ (!$allowRotation ? " rounded-full bg-white bg-opacity-50" : "")}
           style={`transform: rotate(${-$orientation}deg)`}>
        <Compass_needle class="w-full" />
      </div>
    {/if}
  {/if}
</button>
{/if}