tree loads composition

Expose legacy types in new API

tree navigation

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');

src/adapter/vue-adapter/main-adapter.js

@@ -108,8 +108,8 @@ define([
                 angular.element(this.layout.$refs.mainContainer),
                 this.templateMap["browseObject"]
             );
+            document.title = object.getModel().name;
             this.scheduleDigest();
-
         }
 
         idsForObject(domainObject) {

src/api/types/Type.js

@@ -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;
 });

src/api/types/TypeRegistry.js

@@ -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;
 });
 

src/ui/components/layout/Layout.vue

@@ -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,

src/ui/components/layout/MctTree.vue

@@ -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>

src/ui/components/layout/mct-tree.vue

@@ -1,8 +1,8 @@
 <template>
     <ul class="c-tree">
-        <tree-item v-for="node in nodes"
+        <tree-item v-for="child in children"
-                   :key="node.id"
+                   :key="child.id"
-                   :node="node">
+                   :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

src/ui/components/layout/tree-item.vue

@@ -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"
+            <a class="c-tree__item__name c-object-name"
-                  :class="node.cssClass">
+               :class="cssClass"
-                <span class="c-object-name__name">{{ node.name }}</span>
+               :href="href">
-            </span>
+                <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