Osmwithspace/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

UX: tweaks to compass element

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-08-01 18:06:20 +02:00
parent f1ced2c123
commit 88d4d00911
2 changed files with 17 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/Logic/UIEventSource.ts
View file

@ -610,7 +610,6 @@ class MappedStore<TIn, T> extends Store<T> {
}
this._upstreamPingCount = this._upstreamCallbackHandler.pingCount
this._callbacksAreRegistered = false
console.log("Unregistering from upstream", this._upstream)
this._unregisterFromUpstream()
this._unregisterFromExtraStores?.forEach((unr) => unr())
}

22
src/UI/BigComponents/CompassWidget.svelte
View file

@ -9,6 +9,12 @@ 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
@ -26,9 +32,11 @@ function clicked(e: Event) {
}
</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}
<div class={"border-2 rounded-full border-gray-500 border-dotted "+wrapperClass} style={`transform: rotate(${-$mapRotation}deg); transition: transform linear 500ms`}>
{#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}
@ -37,8 +45,12 @@ function clicked(e: Event) {
<Compass_back class="w-full" />
</div>
{/if}
<div class={wrapperClass} style={`transform: rotate(${-$orientation}deg)`}>
<Compass_needle class="w-full" />
</div>
{#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}