Tree Performance Fixes (#2353)
* Disable disclosure triangle transition * Reduce number of times navigation path is calculated
This commit is contained in:
committed by
Pegah Sarram
parent
8b275b206b
commit
517a40a32b
@@ -148,8 +148,6 @@ button {
|
|||||||
display: block;
|
display: block;
|
||||||
font-family: symbolsfont;
|
font-family: symbolsfont;
|
||||||
font-size: 1rem * $s;
|
font-size: 1rem * $s;
|
||||||
transform-origin: center;
|
|
||||||
transition: $transOut;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -59,7 +59,8 @@ export default {
|
|||||||
default() {
|
default() {
|
||||||
return [];
|
return [];
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
navigateToPath: String
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -211,7 +211,8 @@
|
|||||||
return {
|
return {
|
||||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||||
object: c,
|
object: c,
|
||||||
objectPath: [c]
|
objectPath: [c],
|
||||||
|
navigateToParent: '/browse'
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -7,7 +7,8 @@
|
|||||||
v-model="expanded">
|
v-model="expanded">
|
||||||
</view-control>
|
</view-control>
|
||||||
<object-label :domainObject="node.object"
|
<object-label :domainObject="node.object"
|
||||||
:objectPath="node.objectPath">
|
:objectPath="node.objectPath"
|
||||||
|
:navigateToPath="navigateToPath">
|
||||||
</object-label>
|
</object-label>
|
||||||
</div>
|
</div>
|
||||||
<ul v-if="expanded" class="c-tree">
|
<ul v-if="expanded" class="c-tree">
|
||||||
@@ -36,13 +37,12 @@
|
|||||||
node: Object
|
node: Object
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
this.pathToObject = this.buildPathString(this.node.objectPath);
|
this.navigateToPath = this.buildPathString(this.node.navigateToParent)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
hasChildren: false,
|
hasChildren: false,
|
||||||
isLoading: false,
|
isLoading: false,
|
||||||
loaded: false,
|
loaded: false,
|
||||||
isNavigated: this.pathToObject === this.openmct.router.currentLocation.path,
|
isNavigated: this.navigateToPath === this.openmct.router.currentLocation.path,
|
||||||
children: [],
|
children: [],
|
||||||
expanded: false
|
expanded: false
|
||||||
}
|
}
|
||||||
@@ -103,7 +103,8 @@
|
|||||||
this.children.push({
|
this.children.push({
|
||||||
id: this.openmct.objects.makeKeyString(child.identifier),
|
id: this.openmct.objects.makeKeyString(child.identifier),
|
||||||
object: child,
|
object: child,
|
||||||
objectPath: [child].concat(this.node.objectPath)
|
objectPath: [child].concat(this.node.objectPath),
|
||||||
|
navigateToParent: this.navigateToPath
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
removeChild(identifier) {
|
removeChild(identifier) {
|
||||||
@@ -115,15 +116,13 @@
|
|||||||
this.isLoading = false;
|
this.isLoading = false;
|
||||||
this.loaded = true;
|
this.loaded = true;
|
||||||
},
|
},
|
||||||
buildPathString(path) {
|
buildPathString(parentPath) {
|
||||||
return '/browse/' + path.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
|
return [parentPath, this.openmct.objects.makeKeyString(this.node.object.identifier)].join('/');
|
||||||
.reverse()
|
|
||||||
.join('/');
|
|
||||||
},
|
},
|
||||||
highlightIfNavigated(newPath, oldPath){
|
highlightIfNavigated(newPath, oldPath){
|
||||||
if (newPath === this.pathToObject) {
|
if (newPath === this.navigateToPath) {
|
||||||
this.isNavigated = true;
|
this.isNavigated = true;
|
||||||
} else if (oldPath === this.pathToObject) {
|
} else if (oldPath === this.navigateToPath) {
|
||||||
this.isNavigated = false;
|
this.isNavigated = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -13,6 +13,9 @@ export default {
|
|||||||
if (!this.objectPath.length) {
|
if (!this.objectPath.length) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
if (this.navigateToPath) {
|
||||||
|
return '#' + this.navigateToPath;
|
||||||
|
}
|
||||||
return '#/browse/' + this.objectPath
|
return '#/browse/' + this.objectPath
|
||||||
.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
|
.map(o => o && this.openmct.objects.makeKeyString(o.identifier))
|
||||||
.reverse()
|
.reverse()
|
||||||
|
|||||||
Reference in New Issue
Block a user