mirror of
https://github.com/bilawalsidhu/gods-eye-view.git
synced 2026-11-05 10:53:59 +00:00
feat(wind): render the inspection marker from a store
createWindInspectionMarker() moves to src/layers/wind/inspectionMarker.js, so the portable ./tools entry that reads wind/inspection.js stays free of Vue. It keeps the frame listener and projection and presents where the inspected point falls to the gev-wind-inspection store after each rendered frame, publishing nothing for an unchanged frame; the scene chrome teleports the marker into the wind layer's container with the same class, inline style, hidden state and position. The application guide lists everything leaving out the scene chrome now leaves out.
This commit is contained in:
1 parent
0926cbc105
commit
e0bfa471ac
13 files changed
+292
-131
No files matched your search
@@ -0,0 +1,22 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { markRaw, shallowRef } from 'vue';
|
||||
|
||||
/**
|
||||
* The wind inspection marker as its view renders it. The marker owner
|
||||
* (src/layers/wind/inspectionMarker.js) presents where the inspected point
|
||||
* falls on screen after every rendered frame.
|
||||
*/
|
||||
export const useWindInspectionStore = defineStore('gev-wind-inspection', () => {
|
||||
/**
|
||||
* `{owner, container, visible, left, top}`, in pixels from the container's
|
||||
* corner, or null while no point is inspected.
|
||||
*/
|
||||
const marker = shallowRef(null);
|
||||
|
||||
/** @param {?object} next A fresh presentation; every publish re-renders. */
|
||||
function publish(next) {
|
||||
marker.value = next && markRaw(next);
|
||||
}
|
||||
|
||||
return { marker, publish };
|
||||
});
|
||||
@@ -9,6 +9,7 @@ import ImagerySplitView from './panels/ImagerySplitView.vue';
|
||||
import DataPacks from './panels/DataPacks.vue';
|
||||
import SceneInteractions from './panels/SceneInteractions.vue';
|
||||
import SplitFlapText from './panels/SplitFlapText.vue';
|
||||
import WindInspectionMarker from './panels/WindInspectionMarker.vue';
|
||||
|
||||
// The ACTIVE STYLE corner shows the style VisualSettings publishes.
|
||||
const { style } = storeToRefs(useDisplayStore());
|
||||
@@ -100,4 +101,5 @@ const vToastText = {
|
||||
<ImagerySplitView />
|
||||
<DataPacks />
|
||||
<SceneInteractions />
|
||||
<WindInspectionMarker />
|
||||
</template>
|
||||
@@ -0,0 +1,17 @@
|
||||
<script setup>
|
||||
import { storeToRefs } from 'pinia';
|
||||
import { useWindInspectionStore } from '../../stores/windInspection.js';
|
||||
|
||||
// The inspected wind point, inside the container the wind layer renders in,
|
||||
// where the marker owner (src/layers/wind/inspectionMarker.js) places it.
|
||||
const { marker } = storeToRefs(useWindInspectionStore());
|
||||
|
||||
const markerStyle =
|
||||
'position:absolute;width:18px;height:18px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 2px #153440,0 0 0 5px rgba(102,225,242,.35);transform:translate(-50%,-50%);pointer-events:none;z-index:150;';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Teleport v-if="marker" :to="marker.container">
|
||||
<div class="gev-wind-inspection-marker" aria-hidden="true" :hidden="!marker.visible" :style="[markerStyle, { left: `${marker.left}px`, top: `${marker.top}px` }]"></div>
|
||||
</Teleport>
|
||||
</template>
|
||||
Reference in new issue
Block a user