+
+
-
-
-
-
No results found
@@ -26,30 +22,72 @@
-
+
+
+
+
+
-
+ Loading...
+
+
+
+
+
+ -
+
+
+
-
-
-
-
@@ -57,6 +95,14 @@
import treeItem from './tree-item.vue';
import search from '../components/search.vue';
+const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
+const ROOT_PATH = '/browse/';
+const ITEM_BUFFER = 5;
+const RECHECK_DELAY = 100;
+const RESIZE_FIRE_DELAY_MS = 500;
+let windowResizeId = undefined;
+let windowResizing = false;
+
export default {
inject: ['openmct'],
name: 'MctTree',
@@ -64,75 +110,518 @@ export default {
search,
treeItem
},
+ props: {
+ syncTreeNavigation: {
+ type: Boolean,
+ required: true
+ }
+ },
data() {
+ let isMobile = this.openmct.$injector.get('agentService');
+
return {
+ isLoading: false,
searchValue: '',
allTreeItems: [],
- filteredTreeItems: [],
- isLoading: false
+ searchResultItems: [],
+ visibleItems: [],
+ ancestors: [],
+ childrenSlideClass: 'slide-left',
+ availableContainerHeight: 0,
+ noScroll: true,
+ updatingView: false,
+ itemHeight: 28,
+ itemOffset: 0,
+ childrenHeight: 0,
+ scrollable: undefined,
+ pageThreshold: 50,
+ activeSearch: false,
+ getChildHeight: false,
+ settingChildrenHeight: false,
+ isMobile: isMobile.mobileName,
+ multipleRootChildren: false
};
},
- mounted() {
+ computed: {
+ currentNavigatedPath() {
+ let ancestorsCopy = [...this.ancestors];
+ if (this.multipleRootChildren) {
+ ancestorsCopy.shift(); // remove root
+ }
+
+ return ancestorsCopy
+ .map((ancestor) => ancestor.id)
+ .join('/');
+ },
+ currentObjectPath() {
+ let ancestorsCopy = [...this.ancestors];
+
+ return ancestorsCopy
+ .reverse()
+ .map((ancestor) => ancestor.object);
+ },
+ focusedItems() {
+ return this.activeSearch ? this.searchResultItems : this.allTreeItems;
+ },
+ itemLeftOffset() {
+ return this.activeSearch ? '0px' : this.ancestors.length * 10 + 'px';
+ }
+ },
+ watch: {
+ syncTreeNavigation() {
+ const AND_SAVE_PATH = true;
+ let currentLocationPath = this.openmct.router.currentLocation.path;
+ let hasParent = this.currentlyViewedObjectParentPath() || (this.multipleRootChildren && !this.currentlyViewedObjectParentPath());
+ let jumpAndScroll = currentLocationPath
+ && hasParent
+ && !this.currentPathIsActivePath();
+ let justScroll = this.currentPathIsActivePath() && !this.noScroll;
+
+ if (this.searchValue) {
+ this.searchValue = '';
+ }
+
+ if (jumpAndScroll) {
+ this.scrollTo = this.currentlyViewedObjectId();
+ this.allTreeItems = [];
+ this.jumpPath = this.currentlyViewedObjectParentPath();
+ if (this.multipleRootChildren) {
+ if (!this.jumpPath) {
+ this.jumpPath = 'ROOT';
+ this.ancestors = [];
+ } else {
+ this.ancestors = [this.ancestors[0]];
+ }
+ } else {
+ this.ancestors = [];
+ }
+
+ this.jumpToPath(AND_SAVE_PATH);
+ } else if (justScroll) {
+ this.scrollTo = this.currentlyViewedObjectId();
+ this.autoScroll();
+ }
+ },
+ searchValue() {
+ if (this.searchValue !== '' && !this.activeSearch) {
+ this.searchActivated();
+ } else if (this.searchValue === '') {
+ this.searchDeactivated();
+ }
+ },
+ searchResultItems() {
+ this.setContainerHeight();
+ }
+ },
+ async mounted() {
+ let savedPath = this.getSavedNavigatedPath();
this.searchService = this.openmct.$injector.get('searchService');
- this.getAllChildren();
+ window.addEventListener('resize', this.handleWindowResize);
+
+ let root = await this.openmct.objects.get('ROOT');
+
+ if (root.identifier !== undefined) {
+ let rootNode = this.buildTreeItem(root);
+ // if more than one root item, set multipleRootChildren to true and add root to ancestors
+ if (root.composition && root.composition.length > 1) {
+ this.ancestors.push(rootNode);
+ this.multipleRootChildren = true;
+ } else if (!savedPath && root.composition[0] !== undefined) {
+ // needed if saved path is not set, need to set it to the only root child
+ savedPath = root.composition[0];
+ }
+
+ if (savedPath) {
+ let scrollIfApplicable = () => {
+ if (this.currentPathIsActivePath()) {
+ this.scrollTo = this.currentlyViewedObjectId();
+ }
+ };
+
+ this.jumpPath = savedPath;
+ this.afterJump = scrollIfApplicable;
+ }
+
+ this.getAllChildren(rootNode);
+ }
+ },
+ destroyed() {
+ window.removeEventListener('resize', this.handleWindowResize);
},
methods: {
- getAllChildren() {
- this.isLoading = true;
- this.openmct.objects.get('ROOT')
- .then(root => {
- let composition = this.openmct.composition.get(root);
- if (composition !== undefined) {
- return composition.load();
- } else {
- return [];
+ updatevisibleItems() {
+ if (this.updatingView) {
+ return;
+ }
+
+ this.updatingView = true;
+ requestAnimationFrame(() => {
+ let start = 0;
+ let end = this.pageThreshold;
+ let allItemsCount = this.focusedItems.length;
+
+ if (allItemsCount < this.pageThreshold) {
+ end = allItemsCount;
+ } else {
+ let firstVisible = this.calculateFirstVisibleItem();
+ let lastVisible = this.calculateLastVisibleItem();
+ let totalVisible = lastVisible - firstVisible;
+ let numberOffscreen = this.pageThreshold - totalVisible;
+
+ start = firstVisible - Math.floor(numberOffscreen / 2);
+ end = lastVisible + Math.ceil(numberOffscreen / 2);
+
+ if (start < 0) {
+ start = 0;
+ end = Math.min(this.pageThreshold, allItemsCount);
+ } else if (end >= allItemsCount) {
+ end = allItemsCount;
+ start = end - this.pageThreshold + 1;
}
- })
- .then(children => {
- this.isLoading = false;
- this.allTreeItems = children.map(c => {
- return {
- id: this.openmct.objects.makeKeyString(c.identifier),
- object: c,
- objectPath: [c],
- navigateToParent: '/browse'
- };
- });
- });
+ }
+
+ this.itemOffset = start;
+ this.visibleItems = this.focusedItems.slice(start, end);
+
+ this.updatingView = false;
+ });
},
- getFilteredChildren() {
- this.searchService.query(this.searchValue).then(children => {
- this.filteredTreeItems = children.hits.map(child => {
+ async setContainerHeight() {
+ await this.$nextTick();
+ let mainTree = this.$refs.mainTree;
+ let mainTreeHeight = mainTree.clientHeight;
- let context = child.object.getCapability('context');
- let object = child.object.useCapability('adapter');
- let objectPath = [];
- let navigateToParent;
+ if (mainTreeHeight !== 0) {
+ this.calculateChildHeight(() => {
+ let ancestorsHeight = this.calculateAncestorHeight();
+ let allChildrenHeight = this.calculateChildrenHeight();
- if (context) {
- objectPath = context.getPath().slice(1)
- .map(oldObject => oldObject.useCapability('adapter'))
- .reverse();
- navigateToParent = '/browse/' + objectPath.slice(1)
- .map((parent) => this.openmct.objects.makeKeyString(parent.identifier))
- .join('/');
+ if (this.activeSearch) {
+ ancestorsHeight = 0;
}
- return {
- id: this.openmct.objects.makeKeyString(object.identifier),
- object,
- objectPath,
- navigateToParent
- };
+ this.availableContainerHeight = mainTreeHeight - ancestorsHeight;
+
+ if (allChildrenHeight > this.availableContainerHeight) {
+ this.setPageThreshold();
+ this.noScroll = false;
+ } else {
+ this.noScroll = true;
+ }
+
+ this.updatevisibleItems();
});
+ } else {
+ window.setTimeout(this.setContainerHeight, RECHECK_DELAY);
+ }
+ },
+ calculateFirstVisibleItem() {
+ let scrollTop = this.$refs.scrollable.scrollTop;
+
+ return Math.floor(scrollTop / this.itemHeight);
+ },
+ calculateLastVisibleItem() {
+ let scrollBottom = this.$refs.scrollable.scrollTop + this.$refs.scrollable.offsetHeight;
+
+ return Math.ceil(scrollBottom / this.itemHeight);
+ },
+ calculateChildrenHeight() {
+ let mainTreeTopMargin = this.getElementStyleValue(this.$refs.mainTree, 'marginTop');
+ let childrenCount = this.focusedItems.length;
+
+ return (this.itemHeight * childrenCount) - mainTreeTopMargin; // 5px margin
+ },
+ setChildrenHeight() {
+ this.childrenHeight = this.calculateChildrenHeight();
+ },
+ calculateAncestorHeight() {
+ let ancestorCount = this.ancestors.length;
+
+ return this.itemHeight * ancestorCount;
+ },
+ calculateChildHeight(callback) {
+ if (callback) {
+ this.afterChildHeight = callback;
+ }
+
+ if (!this.activeSearch) {
+ this.getChildHeight = true;
+ } else if (this.afterChildHeight) {
+ // keep the height from before
+ this.afterChildHeight();
+ delete this.afterChildHeight;
+ }
+ },
+ async setChildHeight(item) {
+ if (!this.getChildHeight || this.settingChildrenHeight) {
+ return;
+ }
+
+ this.settingChildrenHeight = true;
+ if (this.isMobile) {
+ item = item.children[0];
+ }
+
+ await this.$nextTick();
+ let topMargin = this.getElementStyleValue(item, 'marginTop');
+ let bottomMargin = this.getElementStyleValue(item, 'marginBottom');
+ let totalVerticalMargin = topMargin + bottomMargin;
+
+ this.itemHeight = item.clientHeight + totalVerticalMargin;
+ this.setChildrenHeight();
+ if (this.afterChildHeight) {
+ this.afterChildHeight();
+ delete this.afterChildHeight;
+ }
+
+ this.getChildHeight = false;
+ this.settingChildrenHeight = false;
+ },
+ setPageThreshold() {
+ let threshold = Math.ceil(this.availableContainerHeight / this.itemHeight) + ITEM_BUFFER;
+ // all items haven't loaded yet (nextTick not working for this)
+ if (threshold === ITEM_BUFFER) {
+ window.setTimeout(this.setPageThreshold, RECHECK_DELAY);
+ } else {
+ this.pageThreshold = threshold;
+ }
+ },
+ handleWindowResize() {
+ if (!windowResizing) {
+ windowResizing = true;
+ window.clearTimeout(windowResizeId);
+ windowResizeId = window.setTimeout(() => {
+ this.setContainerHeight();
+ windowResizing = false;
+ }, RESIZE_FIRE_DELAY_MS);
+ }
+ },
+ async getAllChildren(node) {
+ this.isLoading = true;
+ if (this.composition) {
+ this.composition.off('add', this.addChild);
+ this.composition.off('remove', this.removeChild);
+ delete this.composition;
+ }
+
+ this.allTreeItems = [];
+ this.composition = this.openmct.composition.get(node.object);
+ this.composition.on('add', this.addChild);
+ this.composition.on('remove', this.removeChild);
+ await this.composition.load();
+ this.finishLoading();
+ },
+ buildTreeItem(domainObject) {
+ let navToParent = ROOT_PATH + this.currentNavigatedPath;
+ if (navToParent === ROOT_PATH) {
+ navToParent = navToParent.slice(0, -1);
+ }
+
+ return {
+ id: this.openmct.objects.makeKeyString(domainObject.identifier),
+ object: domainObject,
+ objectPath: [domainObject].concat(this.currentObjectPath),
+ navigateToParent: navToParent
+ };
+ },
+ addChild(child) {
+ let item = this.buildTreeItem(child);
+ this.allTreeItems.push(item);
+ if (!this.isLoading) {
+ this.setContainerHeight();
+ }
+ },
+ removeChild(identifier) {
+ let removeId = this.openmct.objects.makeKeyString(identifier);
+ this.allTreeItems = this.allTreeItems
+ .filter(c => c.id !== removeId);
+ this.setContainerHeight();
+ },
+ finishLoading() {
+ if (this.jumpPath) {
+ this.jumpToPath();
+ }
+
+ this.autoScroll();
+ this.isLoading = false;
+ },
+ async jumpToPath(saveExpandedPath = false) {
+ // check for older implementations of tree storage and reformat if necessary
+ if (Array.isArray(this.jumpPath)) {
+ this.jumpPath = this.jumpPath[0];
+ }
+
+ let nodes = this.jumpPath.split('/');
+
+ for (let i = 0; i < nodes.length; i++) {
+ let currentNode = await this.openmct.objects.get(nodes[i]);
+ let newParent = this.buildTreeItem(currentNode);
+ this.ancestors.push(newParent);
+
+ if (i === nodes.length - 1) {
+ this.jumpPath = '';
+ this.getAllChildren(newParent);
+ if (this.afterJump) {
+ await this.$nextTick();
+ this.afterJump();
+ delete this.afterJump;
+ }
+
+ if (saveExpandedPath) {
+ this.setCurrentNavigatedPath();
+ }
+ }
+ }
+ },
+ async autoScroll() {
+ if (!this.scrollTo) {
+ return;
+ }
+
+ if (this.$refs.scrollable) {
+ let indexOfScroll = this.indexOfItemById(this.scrollTo);
+ let scrollTopAmount = indexOfScroll * this.itemHeight;
+
+ await this.$nextTick();
+ this.$refs.scrollable.scrollTop = scrollTopAmount;
+ // race condition check
+ if (scrollTopAmount > 0 && this.$refs.scrollable.scrollTop === 0) {
+ window.setTimeout(this.autoScroll, RECHECK_DELAY);
+
+ return;
+ }
+
+ this.scrollTo = undefined;
+ } else {
+ window.setTimeout(this.autoScroll, RECHECK_DELAY);
+ }
+ },
+ indexOfItemById(id) {
+ for (let i = 0; i < this.allTreeItems.length; i++) {
+ if (this.allTreeItems[i].id === id) {
+ return i;
+ }
+ }
+ },
+ async getSearchResults() {
+ let results = await this.searchService.query(this.searchValue);
+ this.searchResultItems = results.hits.map(result => {
+
+ let context = result.object.getCapability('context');
+ let object = result.object.useCapability('adapter');
+ let objectPath = [];
+ let navigateToParent;
+
+ if (context) {
+ objectPath = context.getPath().slice(1)
+ .map(oldObject => oldObject.useCapability('adapter'))
+ .reverse();
+ navigateToParent = objectPath.slice(1)
+ .map((parent) => this.openmct.objects.makeKeyString(parent.identifier));
+ navigateToParent = ROOT_PATH + navigateToParent.reverse().join('/');
+ }
+
+ return {
+ id: this.openmct.objects.makeKeyString(object.identifier),
+ object,
+ objectPath,
+ navigateToParent
+ };
});
},
searchTree(value) {
this.searchValue = value;
if (this.searchValue !== '') {
- this.getFilteredChildren();
+ this.getSearchResults();
}
+ },
+ searchActivated() {
+ this.activeSearch = true;
+ this.$refs.scrollable.scrollTop = 0;
+ },
+ searchDeactivated() {
+ this.activeSearch = false;
+ this.$refs.scrollable.scrollTop = 0;
+ this.setContainerHeight();
+ },
+ handleReset(node) {
+ this.childrenSlideClass = 'slide-right';
+ this.ancestors.splice(this.ancestors.indexOf(node) + 1);
+ this.getAllChildren(node);
+ this.setCurrentNavigatedPath();
+ },
+ handleExpanded(node) {
+ if (this.activeSearch) {
+ return;
+ }
+
+ this.childrenSlideClass = 'slide-left';
+ let newParent = this.buildTreeItem(node);
+ this.ancestors.push(newParent);
+ this.getAllChildren(newParent);
+ this.setCurrentNavigatedPath();
+ },
+ getSavedNavigatedPath() {
+ return JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED));
+ },
+ setCurrentNavigatedPath() {
+ if (!this.searchValue) {
+ localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(this.currentNavigatedPath));
+ }
+ },
+ currentPathIsActivePath() {
+ return this.getSavedNavigatedPath() === this.currentlyViewedObjectParentPath();
+ },
+ currentlyViewedObjectId() {
+ let currentPath = this.openmct.router.currentLocation.path;
+ if (currentPath) {
+ currentPath = currentPath.split(ROOT_PATH)[1];
+
+ return currentPath.split('/').pop();
+ }
+ },
+ currentlyViewedObjectParentPath() {
+ let currentPath = this.openmct.router.currentLocation.path;
+ if (currentPath) {
+ currentPath = currentPath.split(ROOT_PATH)[1];
+ currentPath = currentPath.split('/');
+ currentPath.pop();
+
+ return currentPath.join('/');
+ }
+ },
+ scrollItems(event) {
+ if (!windowResizing) {
+ this.updatevisibleItems();
+ }
+ },
+ childrenListStyles() {
+ return { position: 'relative' };
+ },
+ scrollableStyles() {
+ return {
+ height: this.availableContainerHeight + 'px',
+ overflow: this.noScroll ? 'hidden' : 'scroll'
+ };
+ },
+ emptyStyles() {
+ let offset = ((this.ancestors.length + 1) * 10);
+
+ return {
+ paddingLeft: offset + 'px'
+ };
+ },
+ childrenIn(el, done) {
+ // still needing this timeout for some reason
+ window.setTimeout(this.setContainerHeight, RECHECK_DELAY);
+ done();
+ },
+ getElementStyleValue(el, style) {
+ let styleString = window.getComputedStyle(el)[style];
+ let index = styleString.indexOf('px');
+
+ return Number(styleString.slice(0, index));
}
}
};
diff --git a/src/ui/layout/pane.scss b/src/ui/layout/pane.scss
index 0d988e1124..fdcb0913e3 100644
--- a/src/ui/layout/pane.scss
+++ b/src/ui/layout/pane.scss
@@ -40,6 +40,10 @@
display: flex;
align-items: center;
@include desktop() { margin-bottom: $interiorMargin; }
+
+ [class*="button"] {
+ color: $colorBtnMajorBg;
+ }
}
&--reacts {
@@ -128,12 +132,23 @@
@include userSelectNone();
color: $splitterBtnLabelColorFg;
display: block;
- pointer-events: none;
text-transform: uppercase;
- transform-origin: top left;
flex: 1 1 auto;
}
+ [class*="expand-button"] {
+ display: none; // Hidden by default
+ background: $splitterCollapsedBtnColorBg;
+ color: $splitterCollapsedBtnColorFg;
+ font-size: 0.9em;
+
+ &:hover {
+ background: $splitterCollapsedBtnColorBgHov;
+ color: inherit;
+ transition: $transIn;
+ }
+ }
+
&--resizing {
// User is dragging the handle and resizing a pane
@include userSelectNone();
@@ -160,23 +175,12 @@
display: none;
}
- .l-pane__header {
- &:hover {
- color: $splitterCollapsedBtnColorFgHov;
- .l-pane__label {
- color: inherit;
- }
- .l-pane__collapse-button {
- background: $splitterCollapsedBtnColorBgHov;
- color: inherit;
- transition: $transIn;
- }
- }
+ [class*="collapse-button"] {
+ display: none;
}
- .l-pane__collapse-button {
- background: $splitterCollapsedBtnColorBg;
- color: $splitterCollapsedBtnColorFg;
+ [class*="expand-button"] {
+ display: block;
}
}
@@ -198,36 +202,26 @@
.l-pane__collapse-button {
&:before {
- content: $glyph-icon-arrow-right-equilateral;
+ content: $glyph-icon-line-horz;
}
}
&[class*="--collapsed"] {
/************************ COLLAPSED HORIZONTAL SPLITTER, EITHER DIRECTION */
[class*="__header"] {
- @include abs();
- margin: 0;
+ display: none;
}
- [class*="label"] {
- position: absolute;
- transform: translate($interiorMarginLg + 1, 18px) rotate(90deg);
- left: 3px;
- top: 0;
- z-index: 1;
- }
-
- .l-pane__collapse-button {
- border-top-left-radius: 0;
- border-bottom-left-radius: 0; // Only have to do this once, because of scaleX(-1) below.
+ [class*="expand-button"] {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
height: auto; width: 100%;
- padding: 0;
+ padding: $interiorMargin 2px;
- &:before {
- position: absolute;
- top: 5px;
+ [class*="label"] {
+ text-orientation: mixed;
+ text-transform: uppercase;
+ writing-mode: vertical-lr;
}
}
}
@@ -243,10 +237,9 @@
transform: translateX(floor($splitterHandleD / -2)); // Center over the pane edge
}
- &[class*="--collapsed"] {
- .l-pane__collapse-button {
- transform: scaleX(-1);
- }
+ [class*="expand-button"] {
+ border-top-left-radius: $controlCr;
+ border-bottom-left-radius: $controlCr;
}
}
@@ -261,10 +254,9 @@
transform: translateX(floor($splitterHandleD / 2));
}
- &:not([class*="--collapsed"]) {
- .l-pane__collapse-button {
- transform: scaleX(-1);
- }
+ [class*="expand-button"] {
+ border-top-right-radius: $controlCr;
+ border-bottom-right-radius: $controlCr;
}
}
}
diff --git a/src/ui/layout/pane.vue b/src/ui/layout/pane.vue
index 1f8a2267f7..8bd178dc50 100644
--- a/src/ui/layout/pane.vue
+++ b/src/ui/layout/pane.vue
@@ -20,12 +20,19 @@
{{ label }}
+
+
diff --git a/src/ui/layout/tree-item.vue b/src/ui/layout/tree-item.vue
index 3cb3b7490d..800955b758 100644
--- a/src/ui/layout/tree-item.vue
+++ b/src/ui/layout/tree-item.vue
@@ -1,38 +1,39 @@
-
+
+
-
@@ -40,8 +41,6 @@
import viewControl from '../components/viewControl.vue';
import ObjectLabel from '../components/ObjectLabel.vue';
-const LOCAL_STORAGE_KEY__TREE_EXPANDED = 'mct-tree-expanded';
-
export default {
name: 'TreeItem',
inject: ['openmct'],
@@ -53,17 +52,49 @@ export default {
node: {
type: Object,
required: true
+ },
+ leftOffset: {
+ type: String,
+ default: '0px'
+ },
+ showUp: {
+ type: Boolean,
+ default: false
+ },
+ showDown: {
+ type: Boolean,
+ default: true
+ },
+ itemIndex: {
+ type: Number,
+ required: false,
+ default: undefined
+ },
+ itemOffset: {
+ type: Number,
+ required: false,
+ default: undefined
+ },
+ itemHeight: {
+ type: Number,
+ required: false,
+ default: 0
+ },
+ virtualScroll: {
+ type: Boolean,
+ default: false
+ },
+ emitHeight: {
+ type: Boolean,
+ default: false
}
},
data() {
this.navigateToPath = this.buildPathString(this.node.navigateToParent);
return {
- hasChildren: false,
- isLoading: false,
- loaded: false,
+ hasComposition: false,
navigated: this.navigateToPath === this.openmct.router.currentLocation.path,
- children: [],
expanded: false
};
},
@@ -77,32 +108,23 @@ export default {
let parentKeyString = this.openmct.objects.makeKeyString(parent.identifier);
return parentKeyString !== this.node.object.location;
+ },
+ itemTop() {
+ return (this.itemOffset + this.itemIndex) * this.itemHeight + 'px';
}
},
watch: {
expanded() {
- if (!this.hasChildren) {
- return;
- }
-
- if (!this.loaded && !this.isLoading) {
- this.composition = this.openmct.composition.get(this.domainObject);
- this.composition.on('add', this.addChild);
- this.composition.on('remove', this.removeChild);
- this.composition.load().then(this.finishLoading);
- this.isLoading = true;
- }
-
- this.setLocalStorageExpanded(this.navigateToPath);
+ this.$emit('expanded', this.domainObject);
+ },
+ emitHeight() {
+ this.$nextTick(() => {
+ this.$emit('emittedHeight', this.$refs.me);
+ });
}
},
mounted() {
- // TODO: should update on mutation.
- // TODO: click navigation should not fubar hash quite so much.
- // TODO: should highlight if navigated to.
- // TODO: should have context menu.
- // TODO: should support drag/drop composition
- // TODO: set isAlias per tree-item
+ let objectComposition = this.openmct.composition.get(this.node.object);
this.domainObject = this.node.object;
let removeListener = this.openmct.objects.observe(this.domainObject, '*', (newObject) => {
@@ -110,49 +132,19 @@ export default {
});
this.$once('hook:destroyed', removeListener);
- if (this.openmct.composition.get(this.node.object)) {
- this.hasChildren = true;
+ if (objectComposition) {
+ this.hasComposition = true;
}
this.openmct.router.on('change:path', this.highlightIfNavigated);
-
- this.getLocalStorageExpanded();
- },
- beforeDestroy() {
- /****
- * calling this.setLocalStorageExpanded explicitly here because for whatever reason,
- * the watcher on this.expanded is not triggering this.setLocalStorageExpanded(),
- * even though Vue documentation states, "At this stage the instance is still fully functional."
- *****/
- this.expanded = false;
- this.setLocalStorageExpanded();
+ if (this.emitHeight) {
+ this.$emit('emittedHeight', this.$refs.me);
+ }
},
destroyed() {
this.openmct.router.off('change:path', this.highlightIfNavigated);
- if (this.composition) {
- this.composition.off('add', this.addChild);
- this.composition.off('remove', this.removeChild);
- delete this.composition;
- }
},
methods: {
- addChild(child) {
- this.children.push({
- id: this.openmct.objects.makeKeyString(child.identifier),
- object: child,
- objectPath: [child].concat(this.node.objectPath),
- navigateToParent: this.navigateToPath
- });
- },
- removeChild(identifier) {
- let removeId = this.openmct.objects.makeKeyString(identifier);
- this.children = this.children
- .filter(c => c.id !== removeId);
- },
- finishLoading() {
- this.isLoading = false;
- this.loaded = true;
- },
buildPathString(parentPath) {
return [parentPath, this.openmct.objects.makeKeyString(this.node.object.identifier)].join('/');
},
@@ -163,35 +155,8 @@ export default {
this.navigated = false;
}
},
- getLocalStorageExpanded() {
- let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
-
- if (expandedPaths) {
- expandedPaths = JSON.parse(expandedPaths);
- this.expanded = expandedPaths.includes(this.navigateToPath);
- }
- },
- // expanded nodes/paths are stored in local storage as an array
- setLocalStorageExpanded() {
- let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
- expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
-
- if (this.expanded) {
- if (!expandedPaths.includes(this.navigateToPath)) {
- expandedPaths.push(this.navigateToPath);
- }
- } else {
- // remove this node path and all children paths from stored expanded paths
- expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
- }
-
- localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
- },
- removeLocalStorageExpanded() {
- let expandedPaths = localStorage.getItem(LOCAL_STORAGE_KEY__TREE_EXPANDED);
- expandedPaths = expandedPaths ? JSON.parse(expandedPaths) : [];
- expandedPaths = expandedPaths.filter(path => !path.startsWith(this.navigateToPath));
- localStorage.setItem(LOCAL_STORAGE_KEY__TREE_EXPANDED, JSON.stringify(expandedPaths));
+ resetTreeHere() {
+ this.$emit('resetTree', this.node);
}
}
};