diff --git a/src/plugins/timeConductor/Conductor.vue b/src/plugins/timeConductor/Conductor.vue index cebf7018ae..ef7607c689 100644 --- a/src/plugins/timeConductor/Conductor.vue +++ b/src/plugins/timeConductor/Conductor.vue @@ -143,7 +143,7 @@ @@ -190,6 +190,10 @@ export default { start: offsets && durationFormatter.format(Math.abs(offsets.start)), end: offsets && durationFormatter.format(Math.abs(offsets.end)) }, + bounds: { + start: bounds.start, + end: bounds.end + }, formattedBounds: { start: timeFormatter.format(bounds.start), end: timeFormatter.format(bounds.end) @@ -210,7 +214,7 @@ export default { document.addEventListener('keydown', this.handleKeyDown); document.addEventListener('keyup', this.handleKeyUp); this.setTimeSystem(JSON.parse(JSON.stringify(this.openmct.time.timeSystem()))); - this.openmct.time.on('bounds', this.setViewFromBounds); + this.openmct.time.on('bounds', this.handleNewBounds); this.openmct.time.on('timeSystem', this.setTimeSystem); this.openmct.time.on('clock', this.setViewFromClock); this.openmct.time.on('clockOffsets', this.setViewFromOffsets); @@ -220,6 +224,13 @@ export default { document.removeEventListener('keyup', this.handleKeyUp); }, methods: { + handleNewBounds(bounds) { + this.setBounds(bounds); + this.setViewFromBounds(bounds); + }, + setBounds(bounds) { + this.bounds = bounds; + }, handleKeyDown(event) { if (event.key === 'Alt') { this.altPressed = true; @@ -246,10 +257,13 @@ export default { this.formattedBounds.end = this.timeFormatter.format(bounds.end); }, endZoom(bounds) { - const _bounds = bounds ? bounds : this.openmct.time.bounds(); this.isZooming = false; - this.openmct.time.bounds(_bounds); + if (bounds) { + this.handleNewBounds(bounds); + } else { + this.setViewFromBounds(this.bounds); + } }, setTimeSystem(timeSystem) { this.timeSystem = timeSystem; diff --git a/src/plugins/timeConductor/ConductorAxis.vue b/src/plugins/timeConductor/ConductorAxis.vue index 46cdcfb360..8dbeb2c746 100644 --- a/src/plugins/timeConductor/ConductorAxis.vue +++ b/src/plugins/timeConductor/ConductorAxis.vue @@ -207,7 +207,7 @@ export default { this.$emit('panAxis', panBounds); }, endPan() { - const panBounds = this.dragStartX && this.dragX && this.dragStartX !== this.dragX + const panBounds = this.isChangingViewBounds() ? this.getPanBounds() : undefined; this.$emit('endPan', panBounds); @@ -251,16 +251,14 @@ export default { }); }, endZoom() { - const zoomRange = this.dragStartX && this.dragX && this.dragStartX !== this.dragX - ? this.getZoomRange() - : undefined; - - const zoomBounds = zoomRange - ? { + let zoomBounds; + if (this.isChangingViewBounds()) { + const zoomRange = this.getZoomRange(); + zoomBounds = { start: this.scaleToBounds(zoomRange.start), end: this.scaleToBounds(zoomRange.end) - } - : this.openmct.time.bounds(); + }; + } this.zoomStyle = {}; this.$emit('endZoom', zoomBounds); @@ -290,6 +288,9 @@ export default { return bounds.start + offset; }, + isChangingViewBounds() { + return this.dragStartX && this.dragX && this.dragStartX !== this.dragX; + }, resize() { if (this.$refs.axisHolder.clientWidth !== this.width) { this.setAxisDimensions(); diff --git a/src/plugins/timeConductor/ConductorHistory.vue b/src/plugins/timeConductor/ConductorHistory.vue index ff4288e177..d11c24cb5b 100644 --- a/src/plugins/timeConductor/ConductorHistory.vue +++ b/src/plugins/timeConductor/ConductorHistory.vue @@ -84,7 +84,12 @@ export default { }, data() { return { - history: {}, // contains arrays of timespans {start, end}, array key is time system key + /** + * previous bounds entries available for easy re-use + * @history array of timespans + * @timespans {start, end} number representing timestamp + */ + history: this.getHistoryFromLocalStorage(), presets: [] }; }, @@ -111,22 +116,20 @@ export default { this.addTimespan(); }, deep: true - }, - history: { - handler() { - this.persistHistoryToLocalStorage(); - }, - deep: true } }, mounted() { - this.getHistoryFromLocalStorage(); + this.initializeHistoryIfNoHistory(); }, methods: { getHistoryFromLocalStorage() { - if (localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)) { - this.history = JSON.parse(localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY)); - } else { + const localStorageHistory = localStorage.getItem(LOCAL_STORAGE_HISTORY_KEY); + const history = localStorageHistory ? JSON.parse(localStorageHistory) : undefined; + + return history; + }, + initializeHistoryIfNoHistory() { + if (!this.history) { this.history = {}; this.persistHistoryToLocalStorage(); } @@ -157,6 +160,8 @@ export default { currentHistory.unshift(timespan); this.history[key] = currentHistory; + + this.persistHistoryToLocalStorage(); }, selectTimespan(timespan) { this.openmct.time.bounds(timespan);