mirror of
https://github.com/nasa/openmct.git
synced 2024-12-18 20:57:53 +00:00
tree loads composition
Expose legacy types in new API tree navigation
This commit is contained in:
Pete Richards
parent
80a185440b
commit
703abe36c9
20
src/MCT.js
20
src/MCT.js
@ -281,6 +281,14 @@ define([
|
||||
this.legacyExtension('types', legacyDefinition);
|
||||
}.bind(this));
|
||||
|
||||
// TODO: move this to adapter bundle.
|
||||
this.legacyExtension('runs', {
|
||||
depends: ['types[]'],
|
||||
implementation: (types) => {
|
||||
this.types.importLegacyTypes(types);
|
||||
}
|
||||
});
|
||||
|
||||
this.objectViews.getAllProviders().forEach(function (p) {
|
||||
this.legacyExtension('views', {
|
||||
key: p.key,
|
||||
@ -313,8 +321,18 @@ define([
|
||||
var startPromise = new Main().run(this.legacyRegistry)
|
||||
.then(function (angular) {
|
||||
this.$angular = angular;
|
||||
// OpenMCT Object provider doesn't operate properly unless
|
||||
// something has depended upon objectService. Cool, right?
|
||||
this.$injector.get('objectService');
|
||||
|
||||
console.log('Rendering app layout.');
|
||||
var appLayout = new Vue(Layout.default);
|
||||
|
||||
var appLayout = new Vue({
|
||||
mixins: [Layout.default],
|
||||
provide: {
|
||||
openmct: this
|
||||
}
|
||||
});
|
||||
domElement.appendChild(appLayout.$mount().$el);
|
||||
|
||||
console.log('Attaching adapter');
|
||||
|
||||
@ -108,8 +108,8 @@ define([
|
||||
angular.element(this.layout.$refs.mainContainer),
|
||||
this.templateMap["browseObject"]
|
||||
);
|
||||
document.title = object.getModel().name;
|
||||
this.scheduleDigest();
|
||||
|
||||
}
|
||||
|
||||
idsForObject(domainObject) {
|
||||
|
||||
@ -32,6 +32,9 @@ define(function () {
|
||||
*/
|
||||
function Type(definition) {
|
||||
this.definition = definition;
|
||||
if (definition.key) {
|
||||
this.key = definition.key;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -70,5 +73,28 @@ define(function () {
|
||||
return def;
|
||||
};
|
||||
|
||||
/**
|
||||
* Create a type definition from a legacy definition.
|
||||
*/
|
||||
Type.definitionFromLegacyDefinition = function (legacyDefinition) {
|
||||
let definition = {};
|
||||
definition.name = legacyDefinition.name;
|
||||
definition.cssClass = legacyDefinition.cssClass;
|
||||
definition.description = legacyDefinition.description;
|
||||
definition.form = legacyDefinition.properties;
|
||||
if (legacyDefinition.model) {
|
||||
definition.initialize = function (model) {
|
||||
for (let [k, v] of Object.entries(legacyDefinition.model)) {
|
||||
model[k] = JSON.parse(JSON.stringify(v));
|
||||
}
|
||||
}
|
||||
}
|
||||
if (Array.isArray(legacyDefinition.creatable) && 'creation' in legacyDefinition.creatable) {
|
||||
definition.creatable = true;
|
||||
}
|
||||
|
||||
return definition;
|
||||
}
|
||||
|
||||
return Type;
|
||||
});
|
||||
|
||||
@ -98,6 +98,14 @@ define(['./Type'], function (Type) {
|
||||
return this.types[typeKey];
|
||||
};
|
||||
|
||||
TypeRegistry.prototype.importLegacyTypes = function (types) {
|
||||
types.filter((t) => !this.get(t.key))
|
||||
.forEach((type) => {
|
||||
let def = Type.definitionFromLegacyDefinition(type);
|
||||
this.addType(type.key, def);
|
||||
});
|
||||
}
|
||||
|
||||
return TypeRegistry;
|
||||
});
|
||||
|
||||
|
||||
@ -139,52 +139,6 @@
|
||||
import pane from '../controls/pane.vue';
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
treeRoots: [
|
||||
{
|
||||
id: 'r1',
|
||||
name: 'Root 1',
|
||||
children: [
|
||||
{
|
||||
id: 'r1c1',
|
||||
name: 'r1c1'
|
||||
},
|
||||
{
|
||||
id: 'r1c2',
|
||||
name: 'r1c2'
|
||||
},
|
||||
{
|
||||
id: 'r1c3',
|
||||
name: 'r1c3'
|
||||
},
|
||||
]
|
||||
},{
|
||||
id: 'r2',
|
||||
name: 'Root 2',
|
||||
children: [
|
||||
{
|
||||
id: 'r2c1',
|
||||
name: 'r2c1',
|
||||
children: [
|
||||
{
|
||||
id: 'r2c1c1',
|
||||
name: 'r2c1c1'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},{
|
||||
id: 'r3',
|
||||
name: 'Root 3'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
navigateTo(path, openmct) {
|
||||
}
|
||||
},
|
||||
components: {
|
||||
MctInspector,
|
||||
MctMain,
|
||||
|
||||
@ -1,92 +0,0 @@
|
||||
<template>
|
||||
<ul class="c-tree">
|
||||
<li class="c-tree__item-h">
|
||||
<div class="c-tree__item">
|
||||
<viewControl class="c-tree__item__view-control"></viewControl>
|
||||
<span class="c-tree__item__name c-object-name icon-folder">
|
||||
<span class="c-object-name__name">Tree item x with a long name that forces ellipsis to occur</span>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="c-tree">
|
||||
<li class="c-tree__item-h">
|
||||
<div class="c-tree__item" onclick="alert('tree item click');">
|
||||
<span class="c-view-control"></span><span class="c-object-name icon-folder">Tree item y</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import "~styles/sass-base";
|
||||
|
||||
.c-tree {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
|
||||
.c-tree {
|
||||
display: none; // Will be overridden when in an expanded tree node.
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
&__item {
|
||||
border-radius: $controlCr;
|
||||
color: $colorItemTreeFg;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
transition: background 150ms ease;
|
||||
|
||||
&:hover {
|
||||
background: $colorItemTreeHoverBg;
|
||||
.c-tree__item__name:before {
|
||||
// Type icon
|
||||
color: $colorItemTreeIconHover;
|
||||
}
|
||||
}
|
||||
|
||||
.c-tree__item__view-control {
|
||||
color: $colorItemTreeVC;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
&:before {
|
||||
color: $colorItemTreeIcon;
|
||||
width: $treeTypeIconW;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.c-object-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
&:before {
|
||||
// Type icon
|
||||
display: inline-block;
|
||||
font-size: 1.3em;
|
||||
margin-right: $interiorMarginSm;
|
||||
}
|
||||
|
||||
&__name {
|
||||
@include ellipsize();
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import viewControl from '../controls/viewControl.vue'
|
||||
export default {
|
||||
components: {
|
||||
viewControl
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,8 +1,8 @@
|
||||
<template>
|
||||
<ul class="c-tree">
|
||||
<tree-item v-for="node in nodes"
|
||||
:key="node.id"
|
||||
:node="node">
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child">
|
||||
</tree-item>
|
||||
</ul>
|
||||
</template>
|
||||
@ -74,7 +74,23 @@
|
||||
import treeItem from './tree-item.vue'
|
||||
|
||||
export default {
|
||||
props: ['nodes'],
|
||||
data() {
|
||||
return {
|
||||
children: []
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
mounted: function () {
|
||||
this.openmct.objects.get('ROOT')
|
||||
.then(root => this.openmct.composition.get(root).load())
|
||||
.then(children => this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: [c.identifier]
|
||||
};
|
||||
}))
|
||||
},
|
||||
name: 'mct-tree',
|
||||
components: {
|
||||
treeItem
|
||||
|
||||
@ -2,16 +2,18 @@
|
||||
<li class="c-tree__item-h">
|
||||
<div class="c-tree__item">
|
||||
<view-control class="c-tree__item__view-control"
|
||||
v-if="hasChildren"
|
||||
:expanded="expanded"
|
||||
@click="toggleChildren">
|
||||
</view-control>
|
||||
<span class="c-tree__item__name c-object-name icon-folder"
|
||||
:class="node.cssClass">
|
||||
<span class="c-object-name__name">{{ node.name }}</span>
|
||||
</span>
|
||||
<a class="c-tree__item__name c-object-name"
|
||||
:class="cssClass"
|
||||
:href="href">
|
||||
<span class="c-object-name__name">{{ node.object.name }}</span>
|
||||
</a>
|
||||
</div>
|
||||
<ul v-if="expanded" class="c-tree">
|
||||
<tree-item v-for="child in node.children"
|
||||
<tree-item v-for="child in children"
|
||||
:key="child.id"
|
||||
:node="child"
|
||||
>
|
||||
@ -24,18 +26,63 @@
|
||||
import viewControl from '../controls/viewControl.vue'
|
||||
export default {
|
||||
name: 'tree-item',
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
node: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
expanded: false
|
||||
hasChildren: false,
|
||||
loaded: false,
|
||||
children: [],
|
||||
expanded: false,
|
||||
cssClass: 'icon-folder'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
href: function () {
|
||||
return '#/browse/' + this.node.path
|
||||
.map(o => this.openmct.objects.makeKeyString(o))
|
||||
.join('/');
|
||||
}
|
||||
},
|
||||
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
|
||||
let type = this.openmct.types.get(this.node.object.type);
|
||||
if (type) {
|
||||
this.cssClass = type.definition.cssClass;
|
||||
} else {
|
||||
console.log("Failed to get typeDef for object", this.node.object.name, this.node.object.type);
|
||||
}
|
||||
|
||||
let composition = this.openmct.composition.get(this.node.object);
|
||||
if (!composition) {
|
||||
return;
|
||||
}
|
||||
this.hasChildren = true;
|
||||
|
||||
},
|
||||
methods: {
|
||||
toggleChildren: function () {
|
||||
this.expanded = !this.expanded;
|
||||
}
|
||||
if (this.expanded && !this.loaded && this.hasChildren) {
|
||||
this.openmct.composition.get(this.node.object).load()
|
||||
.then(children => {
|
||||
this.children = children.map((c) => {
|
||||
return {
|
||||
id: this.openmct.objects.makeKeyString(c.identifier),
|
||||
object: c,
|
||||
path: this.node.path.concat([c.identifier])
|
||||
};
|
||||
});
|
||||
})
|
||||
.then(() => this.loaded = true);
|
||||
}
|
||||
},
|
||||
},
|
||||
components: {
|
||||
viewControl
|
||||
|
||||
Loading…
Reference in New Issue
Block a user