A change in the parent container's size for plots re-requests telemetry (#3890)

* Use resize obeserver to detect a change in the parent container's size for plots and re-request telemetry
This commit is contained in:
Shefali Joshi
2021-05-28 11:44:56 -07:00
committed by GitHub
parent e1e0eeac56
commit ae1a4bcc6a
2 changed files with 18 additions and 0 deletions

View File

@ -159,6 +159,7 @@ import MctTicks from "./MctTicks.vue";
import MctChart from "./chart/MctChart.vue"; import MctChart from "./chart/MctChart.vue";
import XAxis from "./axis/XAxis.vue"; import XAxis from "./axis/XAxis.vue";
import YAxis from "./axis/YAxis.vue"; import YAxis from "./axis/YAxis.vue";
import _ from "lodash";
export default { export default {
components: { components: {
@ -496,6 +497,10 @@ export default {
}, },
initialize() { initialize() {
_.debounce(this.handleWindowResize, 400);
this.plotContainerResizeObserver = new ResizeObserver(this.handleWindowResize);
this.plotContainerResizeObserver.observe(this.$parent.$refs.plotWrapper);
// Setup canvas etc. // Setup canvas etc.
this.xScale = new LinearScale(this.config.xAxis.get('displayRange')); this.xScale = new LinearScale(this.config.xAxis.get('displayRange'));
this.yScale = new LinearScale(this.config.yAxis.get('displayRange')); this.yScale = new LinearScale(this.config.yAxis.get('displayRange'));
@ -999,12 +1004,20 @@ export default {
this.removeStatusListener(); this.removeStatusListener();
} }
this.plotContainerResizeObserver.disconnect();
this.openmct.time.off('clock', this.updateRealTime); this.openmct.time.off('clock', this.updateRealTime);
this.openmct.time.off('bounds', this.updateDisplayBounds); this.openmct.time.off('bounds', this.updateDisplayBounds);
this.openmct.objectViews.off('clearData', this.clearData); this.openmct.objectViews.off('clearData', this.clearData);
}, },
updateStatus(status) { updateStatus(status) {
this.$emit('statusUpdated', status); this.$emit('statusUpdated', status);
},
handleWindowResize() {
if (this.offsetWidth !== this.$parent.$refs.plotWrapper.offsetWidth) {
this.offsetWidth = this.$parent.$refs.plotWrapper.offsetWidth;
this.config.series.models.forEach(this.loadSeriesData, this);
}
} }
} }
}; };

View File

@ -99,6 +99,11 @@ describe("the plugin", function () {
element.appendChild(child); element.appendChild(child);
document.body.appendChild(element); document.body.appendChild(element);
spyOn(window, 'ResizeObserver').and.returnValue({
observe() {},
disconnect() {}
});
openmct.time.timeSystem("utc", { openmct.time.timeSystem("utc", {
start: 0, start: 0,
end: 4 end: 4