Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove all logic around auto centering and scrolling the timelist #7474

Merged
merged 2 commits into from
Feb 22, 2024
Merged

Remove all logic around auto centering and scrolling the timelist #7474

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c48af63
Remove all logic around auto centering and scrolling the timelist
shefalijoshi Feb 5, 2024
bab84ad
Merge branch 'master' into remove-auto-centering-timelist
ozyx Feb 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 1 addition & 128 deletions src/plugins/timelist/TimelistComponent.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,6 @@ import { getFilteredValues, getValidatedData, getValidatedGroups } from '../plan
import { SORT_ORDER_OPTIONS } from './constants.js';
import ExpandedViewItem from './ExpandedViewItem.vue';

const SCROLL_TIMEOUT = 10000;

const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
const SAME_DAY_PRECISION_SECONDS = 'HH:mm:ss';

Expand Down Expand Up @@ -209,7 +207,6 @@ export default {
},
created() {
this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
this.deferAutoScroll = _.debounce(this.deferAutoScroll, 500);

this.setTimeContext();
this.timestamp = this.timeContext.now();
Expand Down Expand Up @@ -238,8 +235,6 @@ export default {

this.openmct.editor.on('isEditing', this.setEditState);

this.$el.parentElement.addEventListener('scroll', this.deferAutoScroll, true);

if (this.composition) {
this.composition.on('add', this.addToComposition);
this.composition.on('remove', this.removeItem);
Expand Down Expand Up @@ -272,11 +267,6 @@ export default {
this.openmct.editor.off('isEditing', this.setEditState);
this.stopFollowingTimeContext();

this.$el.parentElement?.removeEventListener('scroll', this.deferAutoScroll, true);
if (this.clearAutoScrollDisabledTimer) {
clearTimeout(this.clearAutoScrollDisabledTimer);
}

if (this.composition) {
this.composition.off('add', this.addToComposition);
this.composition.off('remove', this.removeItem);
Expand Down Expand Up @@ -429,8 +419,6 @@ export default {
const filteredItems = this.planActivities.filter(this.filterActivities);
const sortedItems = this.sortItems(filteredItems);
this.sortedItems = this.applyStyles(sortedItems);
//We need to wait for the next tick since we need the height of the row from the DOM
this.$nextTick(this.setScrollTop);
},
updateTimeStampAndListActivities(time) {
this.timestamp = time;
Expand Down Expand Up @@ -509,24 +497,13 @@ export default {
});
},
// Add activity classes, increase activity counts by type,
// set indices of the first occurrences of current and future activities - used for scrolling
styleActivity(activity, index) {
if (this.timestamp >= activity.start && this.timestamp <= activity.end) {
activity.cssClass = CURRENT_CSS_SUFFIX;
if (this.firstCurrentActivityIndex < 0) {
this.firstCurrentActivityIndex = index;
}
this.currentActivitiesCount = this.currentActivitiesCount + 1;
} else if (this.timestamp < activity.start) {
activity.cssClass = FUTURE_CSS_SUFFIX;
//the index of the first activity that's greater than the current timestamp
if (this.firstFutureActivityIndex < 0) {
this.firstFutureActivityIndex = index;
}
this.futureActivitiesCount = this.futureActivitiesCount + 1;
} else {
activity.cssClass = PAST_CSS_SUFFIX;
this.pastActivitiesCount = this.pastActivitiesCount + 1;
}

if (!activity.key) {
Expand All @@ -545,111 +522,7 @@ export default {
return activity;
},
applyStyles(activities) {
this.firstCurrentOrFutureActivityIndex = -1;
this.firstCurrentActivityIndex = -1;
this.firstFutureActivityIndex = -1;
this.currentActivitiesCount = 0;
this.pastActivitiesCount = 0;
this.futureActivitiesCount = 0;

const styledActivities = activities.map(this.styleActivity);

if (this.firstCurrentActivityIndex > -1) {
this.firstCurrentOrFutureActivityIndex = this.firstCurrentActivityIndex;
} else if (this.firstFutureActivityIndex > -1) {
this.firstCurrentOrFutureActivityIndex = this.firstFutureActivityIndex;
}

return styledActivities;
},
canAutoScroll() {
//this distinguishes between programmatic vs user-triggered scroll events
this.autoScrolled = this.dontAutoScroll !== true;

return this.autoScrolled;
},
resetScroll() {
if (this.canAutoScroll() === false) {
return;
}

this.firstCurrentOrFutureActivityIndex = -1;
this.pastActivitiesCount = 0;
this.currentActivitiesCount = 0;
this.futureActivitiesCount = 0;
this.$el.parentElement?.scrollTo({ top: 0 });
this.autoScrolled = false;
},
setScrollTop() {
//The view isn't ready yet
if (!this.$el.parentElement || this.isExpanded) {
return;
}

if (this.canAutoScroll() === false) {
return;
}

// See #7167 for scrolling algorithm
const scrollTop = this.calculateScrollOffset();

if (scrollTop === undefined) {
this.resetScroll();
} else {
this.$el.parentElement?.scrollTo({
top: scrollTop,
behavior: 'smooth'
});
this.autoScrolled = false;
}
},
calculateScrollOffset() {
let scrollTop;

//No scrolling necessary if no past events are present
if (this.pastActivitiesCount > 0) {
const row = this.$el.querySelector('.js-list-item');
const ROW_HEIGHT = row.getBoundingClientRect().height;

const maxViewableActivities =
Math.floor(this.$el.parentElement.getBoundingClientRect().height / ROW_HEIGHT) - 1;

const currentAndFutureActivities = this.currentActivitiesCount + this.futureActivitiesCount;

//If there is more viewable area than all current and future activities combined, then show some past events
const numberOfPastEventsToShow = maxViewableActivities - currentAndFutureActivities;
if (numberOfPastEventsToShow > 0) {
//some past events can be shown - get that scroll index
if (this.pastActivitiesCount > numberOfPastEventsToShow) {
scrollTop =
ROW_HEIGHT * (this.firstCurrentOrFutureActivityIndex + numberOfPastEventsToShow);
}
} else {
// only show current and future events
scrollTop = ROW_HEIGHT * this.firstCurrentOrFutureActivityIndex;
}
}

return scrollTop;
},
deferAutoScroll() {
//if this is not a user-triggered event, don't defer auto scrolling
if (this.autoScrolled) {
this.autoScrolled = false;

return;
}

this.dontAutoScroll = true;
const self = this;
if (this.clearAutoScrollDisabledTimer) {
clearTimeout(this.clearAutoScrollDisabledTimer);
}

this.clearAutoScrollDisabledTimer = setTimeout(() => {
self.dontAutoScroll = false;
self.setScrollTop();
}, SCROLL_TIMEOUT);
return activities.map(this.styleActivity);
},
setSort() {
const sortOrder = SORT_ORDER_OPTIONS[this.domainObject.configuration.sortOrderIndex];
Expand Down
Loading