forked from MapComplete/MapComplete
68 lines
2.3 KiB
Svelte
68 lines
2.3 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 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={"as-link pointer-events-auto relative " + size}
|
|
on:click={(e) => clicked(e)}
|
|
>
|
|
{#if $allowRotation && !$compassLoaded && !$gotNonZero}
|
|
<div
|
|
class={"rounded-full border-2 border-dotted border-gray-500 " + 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}
|