Provide own renderWhenVisible function since manually creating an object view (#7281)

inspector view needs renderWhenVisible function
This commit is contained in:
David Tsay 2023-12-08 09:33:49 -08:00 committed by GitHub
parent 93e5219917
commit 9ed8d4f5a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -35,6 +35,7 @@
<script> <script>
import mount from 'utils/mount'; import mount from 'utils/mount';
import VisibilityObserver from '../../utils/visibility/VisibilityObserver';
import Plot from '../plot/PlotView.vue'; import Plot from '../plot/PlotView.vue';
import TelemetryFrame from './TelemetryFrame.vue'; import TelemetryFrame from './TelemetryFrame.vue';
@ -89,8 +90,9 @@ export default {
this.clearPlots(); this.clearPlots();
this.unregisterTimeContextList = []; this.unregisterTimeContextList = [];
this.elementsList = [];
this.componentsList = []; this.componentsList = [];
this.elementsList = [];
this.visibilityObservers = [];
this.telemetryKeys.forEach(async (telemetryKey) => { this.telemetryKeys.forEach(async (telemetryKey) => {
const plotObject = await this.openmct.objects.get(telemetryKey); const plotObject = await this.openmct.objects.get(telemetryKey);
@ -109,7 +111,10 @@ export default {
return this.openmct.time.addIndependentContext(keyString, this.bounds); return this.openmct.time.addIndependentContext(keyString, this.bounds);
}, },
renderPlot(plotObject) { renderPlot(plotObject) {
const { vNode, destroy } = mount( const wrapper = document.createElement('div');
const visibilityObserver = new VisibilityObserver(wrapper);
const { destroy } = mount(
{ {
components: { components: {
TelemetryFrame, TelemetryFrame,
@ -117,7 +122,8 @@ export default {
}, },
provide: { provide: {
openmct: this.openmct, openmct: this.openmct,
path: [plotObject] path: [plotObject],
renderWhenVisible: visibilityObserver.renderWhenVisible
}, },
data() { data() {
return { return {
@ -133,13 +139,15 @@ export default {
</TelemetryFrame>` </TelemetryFrame>`
}, },
{ {
app: this.openmct.app app: this.openmct.app,
element: wrapper
} }
); );
this.componentsList.push(destroy); this.componentsList.push(destroy);
this.elementsList.push(vNode.el); this.elementsList.push(wrapper);
this.$refs.numericDataView.append(vNode.el); this.visibilityObservers.push(visibilityObserver);
this.$refs.numericDataView.append(wrapper);
}, },
clearPlots() { clearPlots() {
if (this.componentsList?.length) { if (this.componentsList?.length) {
@ -152,6 +160,11 @@ export default {
delete this.elementsList; delete this.elementsList;
} }
if (this.visibilityObservers?.length) {
this.visibilityObservers.forEach((visibilityObserver) => visibilityObserver.destroy());
delete this.visibilityObservers;
}
if (this.plotObjects?.length) { if (this.plotObjects?.length) {
this.plotObjects = []; this.plotObjects = [];
} }