mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-04 02:14:01 +00:00
Sameh Khamis
eccaeea0c4
The camera orientation controls publish whether the map is tilted and the camera's whole-degree heading instead of writing the buttons' attributes, and answer tilt and north-up through the globe actions store. The new GlobeCompass renders the heading, so a rotating camera re-renders only the compass. The store drops an unchanged camera state and keeps each clear owner's busy state, so the buttons show the shell that answers them: a shell replaced by a newer one, or disposed mid-clear, leaves the live shell's state alone, and an older shell that answers again shows its own. createOwners gains owns() and ownerOf().
28 lines
1.2 KiB
Vue
28 lines
1.2 KiB
Vue
<script setup>
|
|
import { storeToRefs } from 'pinia';
|
|
import { computed } from 'vue';
|
|
import { t } from '../../../i18n/index.js';
|
|
import { useGlobeActionsStore } from '../../stores/globeActions.js';
|
|
|
|
// The north-up button: its needle and label follow the published heading,
|
|
// which changes on every frame a rotating camera draws. Before the camera
|
|
// controls first publish, it shows no heading.
|
|
defineEmits(['click']);
|
|
const { camera } = storeToRefs(useGlobeActionsStore());
|
|
const heading = computed(() => camera.value?.heading);
|
|
const label = computed(() =>
|
|
heading.value == null
|
|
? t('Reset map to north up')
|
|
: t('Reset map to north up. Current heading {heading} degrees', {
|
|
heading: heading.value,
|
|
}),
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<button id="north-up-view" type="button" :aria-label="label" :data-north-up="heading == null ? undefined : String(heading === 0)" :style="heading == null ? undefined : { '--camera-heading': `${heading}deg` }" title="Reset map bearing to north" data-i18n-title @click="$emit('click')">
|
|
<span class="camera-compass-n" aria-hidden="true">N</span>
|
|
<span class="camera-compass-needle material-symbols-outlined" aria-hidden="true">navigation</span>
|
|
</button>
|
|
</template>
|