forked from MapComplete/MapComplete
58 lines
2.3 KiB
Svelte
58 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 { Stores, 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 Popup from "../Base/Popup.svelte"
|
||
|
|
import { Popover } from "flowbite-svelte"
|
||
|
|
import Tr from "../Base/Tr.svelte"
|
||
|
|
import { fade } from "svelte/transition"
|
||
|
|
import ThemeViewState from "../../Models/ThemeViewState"
|
||
|
|
import { onDestroy } from "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"
|
||
|
|
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>
|