ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-05-31 22:50:49 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Navigation Tree] Fix tree loading issue (#3500)

Browse Source 
* added resize observer for FIRST load of mainTree

* new Promise driven height calculation test

* cleaning up code, sticking with promise height caclcuations

* more cleanup

* returning from the initialize function
This commit is contained in:
Jamie V 2020-11-03 12:06:49 -08:00 committed by GitHub
parent a8228406de
commit 5df7d92d64
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 40 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
src/ui/layout/mct-tree.vue
View File

@ -226,7 +226,7 @@ export default {
return this.mainTreeHeight - this.ancestorsHeight; return this.mainTreeHeight - this.ancestorsHeight;
}, },
showNoItems() { showNoItems() {
return this.visibleItems.length === 0 && !this.activeSearch; return this.visibleItems.length === 0 && !this.activeSearch && !this.isLoading;
}, },
showNoSearchResults() { showNoSearchResults() {
return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading; return this.searchValue && this.searchResultItems.length === 0 && !this.searchLoading;
@ -276,7 +276,9 @@ export default {
} }
}, },
async mounted() { async mounted() {
this.initialize(); this.isLoading = true;
await this.initialize();
let savedPath = this.getStoredTreePath(); let savedPath = this.getStoredTreePath();
let rootComposition = await this.loadRoot(); let rootComposition = await this.loadRoot();
@ -302,26 +304,15 @@ export default {
destroyed() { destroyed() {
window.removeEventListener('resize', this.handleWindowResize); window.removeEventListener('resize', this.handleWindowResize);
this.stopObservingAncestors(); this.stopObservingAncestors();
document.removeEventListener('readystatechange', this.setTreeTopMargin);
}, },
methods: { methods: {
initialize() { async initialize() {
this.searchService = this.openmct.$injector.get('searchService'); this.searchService = this.openmct.$injector.get('searchService');
window.addEventListener('resize', this.handleWindowResize); window.addEventListener('resize', this.handleWindowResize);
this.readyStateCheck();
this.backwardsCompatibilityCheck(); this.backwardsCompatibilityCheck();
}, await this.calculateHeights();
readyStateCheck() {
if (document.readyState !== 'complete') { return;
document.addEventListener('readystatechange', this.onReadyState);
} else {
this.onReadyState();
}
},
onReadyState() {
if (document.readyState === 'complete') {
this.calculateHeights();
}
}, },
backwardsCompatibilityCheck() { backwardsCompatibilityCheck() {
let oldTreeExpanded = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED__OLD)); let oldTreeExpanded = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED__OLD));
@ -781,17 +772,44 @@ export default {
return { height }; return { height };
}, },
getElementStyleValue(el, style) { getElementStyleValue(el, style) {
if (!el) {
return;
}
let styleString = window.getComputedStyle(el)[style]; let styleString = window.getComputedStyle(el)[style];
let index = styleString.indexOf('px'); let index = styleString.indexOf('px');
return Number(styleString.slice(0, index)); return Number(styleString.slice(0, index));
}, },
calculateHeights() { calculateHeights() {
this.mainTreeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop'); const RECHECK = 100;
this.mainTreeHeight = this.$el.offsetHeight
- this.$refs.search.offsetHeight return new Promise((resolve, reject) => {
- this.mainTreeTopMargin;
this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height'); let checkHeights = () => {
let treeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
if (
this.$el
&& this.$refs.search
&& this.$refs.mainTree
&& this.$refs.dummyItem
&& this.$el.offsetHeight !== 0
&& treeTopMargin > 0
) {
this.mainTreeTopMargin = treeTopMargin;
this.mainTreeHeight = this.$el.offsetHeight
- this.$refs.search.offsetHeight
- this.mainTreeTopMargin;
this.itemHeight = this.getElementStyleValue(this.$refs.dummyItem, 'height');
resolve();
} else {
setTimeout(checkHeights, RECHECK);
}
};
checkHeights();
});
} }
} }
}; };