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:
Sameh Khamis committed 2026-10-31 20:47:19 -07:00
1 parent 0926cbc105
commit e0bfa471ac
13 files changed
+292 -131

No files matched your search

+22
View File
@@ -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 };
});
+2
View File
@@ -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>