forked from MapComplete/MapComplete
44 lines
1.8 KiB
Svelte
44 lines
1.8 KiB
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 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>
|
|
<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>
|