Store array of items in configuration.

src/plugins/displayLayout/DisplayLayoutToolbar.js

@@ -75,6 +75,8 @@ define([], function () {
                     return toolbar;
                 }
 
+                let path = layoutItem.config.path();
+
                 if (layoutItem.type === 'subobject-view') {
                     if (toolbar.length > 0) {
                         toolbar.push({
@@ -84,7 +86,7 @@ define([], function () {
                     toolbar.push({
                         control: "toggle-button",
                         domainObject: selectedParent,
-                        property: "configuration.panels[" + layoutItem.id + "].hasFrame",
+                        property: path + ".hasFrame",
                         options: [
                             {
                                 value: false,
@@ -100,15 +102,6 @@ define([], function () {
                     });
                 } else {
                     const TEXT_SIZE = [9, 10, 11, 12, 13, 14, 15, 16, 20, 24, 30, 36, 48, 72, 96];
-                    let path;
-                    // TODO: get the path from the view configuration
-                    // let path = layoutItem.config.path();
-                    if (layoutItem.type === 'telemetry-view') {
-                        path = "configuration.alphanumerics[" + layoutItem.config.alphanumeric.index + "]";
-                    } else {
-                        path = "configuration.elements[" + layoutItem.config.element.index + "]";
-                    }
-
                     let separator = {
                             control: "separator"
                         },

src/plugins/displayLayout/DisplayLayoutType.js

@@ -29,9 +29,7 @@ define(function () {
             initialize(domainObject) {
                 domainObject.composition = [];
                 domainObject.configuration = {
-                    panels: {},
+                    items: []
-                    alphanumerics: [],
-                    elements: []
                 };
             }
         }

src/plugins/displayLayout/ElementViewConfiguration.js

@@ -112,7 +112,7 @@ define(
             }
 
             path() {
-                return "configuration.elements[" + this.element.index + "]";
+                return "configuration.items[" + this.element.index + "]";
             }
 
             x() {

src/plugins/displayLayout/SubobjectViewConfiguration.js

@@ -47,6 +47,8 @@ define(
                 position = position || DEFAULT_POSITION;
                 let defaultDimensions = getDefaultDimensions();
                 let panel = {
+                    identifier: domainObject.identifier,
+                    type: 'subobject',
                     width: defaultDimensions[0],
                     height: defaultDimensions[1],
                     x: position[0],
@@ -60,21 +62,19 @@ define(
             /**
              *
              * @param {Object} configuration the subobject view configuration
-             * @param {String} configuration.id the domain object keystring identifier
              * @param {Boolean} configuration.panel
              * @param {Object} configuration.domainObject the domain object to observe the changes on
              * @param {Object} configuration.openmct the openmct object
              */
-            constructor({panel, id, ...rest}) {
+            constructor({panel, ...rest}) {
                 super(rest);
-                this.id = id;
                 this.panel = panel;
                 this.hasFrame = this.hasFrame.bind(this);
                 this.updateStyle(this.position());
             }
 
             path() {
-                return "configuration.panels[" + this.id + "]";
+                return "configuration.items[" + this.panel.index + "]";
             }
 
             x() {

src/plugins/displayLayout/TelemetryViewConfiguration.js

@@ -26,7 +26,8 @@ define(
 
         class TelemetryViewConfiguration extends ViewConfiguration {
             static create(domainObject, position, openmct) {
-                const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5];
+                const DEFAULT_TELEMETRY_DIMENSIONS = [10, 5],
+                      DEFAULT_POSITION = [1, 1];
 
                 function getDefaultTelemetryValue(domainObject, openmct) {
                     let metadata = openmct.telemetry.getMetadata(domainObject);
@@ -45,6 +46,7 @@ define(
                     return valueMetadata.key;
                 }
 
+                position = position || DEFAULT_POSITION;
                 let alphanumeric = {
                     identifier: domainObject.identifier,
                     x: position[0],
@@ -57,6 +59,7 @@ define(
                     fill: "",
                     color: "",
                     size: "13px",
+                    type: "telemetry"
                 };
 
                 return alphanumeric;
@@ -75,7 +78,8 @@ define(
             }
 
             path() {
-                return "configuration.alphanumerics[" + this.alphanumeric.index + "]";
+                console.log("path", "configuration.items[" + this.alphanumeric.index + "]");
+                return "configuration.items[" + this.alphanumeric.index + "]";
             }
 
             x() {

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -106,44 +106,36 @@
             LayoutItem
         },
         methods: {
-            getAlphanumerics() {
+            getConfigurationItems() {
-                let alphanumerics = this.newDomainObject.configuration.alphanumerics || [];
+                this.subobjectViewsById = new Map();
-                alphanumerics.forEach((alphanumeric, index) => {
+                this.telemetryViewsById = new Map();
-                    alphanumeric.index = index;
+                let items = this.newDomainObject.configuration.items;
-                    this.makeTelemetryItem(alphanumeric, false);
+                items.forEach((item, index) => {
+                    if (item.type === 'subobject') {
+                        this.subobjectViewsById.set(this.openmct.objects.makeKeyString(item.identifier), true); 
+                    } else if (item.type === 'telemetry') {
+                        this.telemetryViewsById.set(this.openmct.objects.makeKeyString(item.identifier), true);
+                    }
+
+                    item.index = index;
+                    this.makeLayoutItem(item, false);
                 });
             },
-            getElements() {
+            makeLayoutItem(item, initSelect) {
-                let elements = this.newDomainObject.configuration.elements || [];
+                if (item.type === 'telemetry') {
-                elements.forEach((element, index) => {
+                    this.makeTelemetryItem(item, initSelect);
-                    element.index = index;
+                } else if (item.type === 'subobject') {
-                    this.makeElementItem(element, false);
+                    this.makeSubobjectItem(item, initSelect);
-                });
+                } else {
+                    this.makeElementItem(item, initSelect);
+                }
             },
-            makeSubobjectItem(panel, initSelect) {
+            makeTelemetryItem(item, initSelect) {
-                let id = this.openmct.objects.makeKeyString(panel.domainObject.identifier);
+                let id = this.openmct.objects.makeKeyString(item.identifier);
-                let config = new SubobjectViewConfiguration({
-                    domainObject: this.newDomainObject,
-                    panel: panel,
-                    id: id,
-                    openmct: openmct,
-                    gridSize: this.gridSize
-                });
-                this.layoutItems.push({
-                    id: id,
-                    domainObject: panel.domainObject,
-                    drilledIn: this.isItemDrilledIn(id),
-                    initSelect: initSelect,
-                    type: 'subobject-view',
-                    config: config
-                });
-            },
-            makeTelemetryItem(alphanumeric, initSelect) {
-                let id = this.openmct.objects.makeKeyString(alphanumeric.identifier);
                 this.openmct.objects.get(id).then(domainObject => {
                     let config = new TelemetryViewConfiguration({
                         domainObject: this.newDomainObject,
-                        alphanumeric: alphanumeric,
+                        alphanumeric: item,
                         openmct: openmct,
                         gridSize: this.gridSize
                     });
@@ -151,21 +143,40 @@
                         id: id,
                         domainObject: domainObject,
                         initSelect: initSelect,
-                        type: 'telemetry-view',
+                        type: item.type + '-view',
                         config: config
                     });
                 });
             },
-            makeElementItem(element, initSelect) {
+            makeSubobjectItem(item, initSelect) {
+                let id = this.openmct.objects.makeKeyString(item.identifier);
+                this.openmct.objects.get(id).then(domainObject => {
+                    let config = new SubobjectViewConfiguration({
+                        domainObject: this.newDomainObject,
+                        panel: item,
+                        openmct: openmct,
+                        gridSize: this.gridSize
+                    });
+                    this.layoutItems.push({
+                        id: id,
+                        domainObject: domainObject,
+                        initSelect: initSelect,
+                        type: item.type + '-view',
+                        config: config,
+                        drilledIn: this.isItemDrilledIn(id)
+                    });
+                });
+            },
+            makeElementItem(item, initSelect) {
                 let config = new ElementViewConfiguration({
                     domainObject: this.newDomainObject,
-                    element: element,
+                    element: item,
                     openmct: openmct,
                     gridSize: this.gridSize
                 });
                 this.layoutItems.push({
                     initSelect: initSelect,
-                    type: element.type + '-view',
+                    type: item.type + '-view',
                     config: config
                 });
             },
@@ -221,7 +232,7 @@
                 ];
 
                 if (this.isTelemetry(domainObject)) {
-                    this.addAlphanumeric(domainObject, this.droppedObjectPosition);
+                    this.addTelemetryObject(domainObject, this.droppedObjectPosition);
                 } else {
                     this.checkForDuplicatePanel(domainObject);
                 }
@@ -245,12 +256,22 @@
                     });
                 }
             },
-            addAlphanumeric(domainObject, position) {
+            addItem(item) {
-                let alphanumerics = this.newDomainObject.configuration.alphanumerics || [];
+                let items = this.newDomainObject.configuration.items || [];
-                let alphanumeric = TelemetryViewConfiguration.create(domainObject, position, this.openmct);
+                item.index = items.push(item) - 1;
-                alphanumeric.index = alphanumerics.push(alphanumeric) - 1;
+                this.mutate("configuration.items", items);
-                this.mutate("configuration.alphanumerics", alphanumerics);
+                this.makeLayoutItem(item, true);
-                this.makeTelemetryItem(alphanumeric, true);
+            },
+            addTelemetryObject(domainObject, position) {
+                let item = TelemetryViewConfiguration.create(domainObject, position, this.openmct);
+                this.addItem(item);
+                this.telemetryViewsById.set(this.openmct.objects.makeKeyString(domainObject.identifier), true);
+            },
+            addElement(type) {
+                Promise.resolve(ElementViewConfiguration.create(type, this.openmct))
+                    .then(item => {
+                        this.addItem(item);
+                    });
             },
             handleDragOver($event){
                 $event.preventDefault();
@@ -264,61 +285,49 @@
                 }
             },
             addSubobject(domainObject) {
-                if (!this.isTelemetry(domainObject)) {
+                let id = this.openmct.objects.makeKeyString(domainObject.identifier);
-                    let panels = this.newDomainObject.configuration.panels,
-                        id = this.openmct.objects.makeKeyString(domainObject.identifier),
-                        panel = panels[id],
-                        mutateObject = false,
-                        initSelect = false;
 
-                    // If the panel doesn't exist, create one and mutate the configuration
+                if (this.isTelemetry(domainObject)) {
-                    if (!panel) {
+                    if (!this.telemetryViewsById.has(id)) {
-                        panel = SubobjectViewConfiguration.create(domainObject, this.gridSize, this.droppedObjectPosition);
+                        this.addTelemetryObject(domainObject);
-                        initSelect = true;
+                    }
-                        this.mutate("configuration.panels[" + id + "]", panel);
+                } else {
+                    if (!this.subobjectViewsById.has(id)) {
+                        let item = SubobjectViewConfiguration.create(domainObject, this.gridSize, this.droppedObjectPosition);
+                        this.subobjectViewsById.set(id, true);
+                        this.addItem(item, true);
                         delete this.droppedObjectPosition;
                     }
-
-                    panel.domainObject = domainObject;
-                    this.makeSubobjectItem(panel, initSelect);
                 }
             },
             removeSubobject() {
                 // Not yet implemented
-            },
-            addElement(type) {
-                let elements = this.newDomainObject.configuration.elements || [];
-                Promise.resolve(ElementViewConfiguration.create(type, this.openmct))
-                    .then(element => {
-                        element.index = elements.push(element) - 1;
-                        this.mutate("configuration.elements", elements);
-                        this.makeElementItem(element, true);
-                    });
             }
         },
         mounted() {
             this.newDomainObject = this.domainObject;
             this.gridSize = this.newDomainObject.layoutGrid ||  DEFAULT_GRID_SIZE;
-
             this.unlisten = this.openmct.objects.observe(this.newDomainObject, '*', function (obj) {
                 this.newDomainObject = JSON.parse(JSON.stringify(obj));
                 this.gridSize = this.newDomainObject.layoutGrid || DEFAULT_GRID_SIZE;;
             }.bind(this));
 
             this.openmct.selection.on('change', this.setSelection);
+            this.getConfigurationItems();
 
             this.composition = this.openmct.composition.get(this.newDomainObject);
             this.composition.on('add', this.addSubobject);
             this.composition.on('remove', this.removeSubobject);
             this.composition.load();
-            this.getAlphanumerics();
-            this.getElements();
         },
         destroyed: function () {
             this.openmct.off('change', this.setSelection);
             this.composition.off('add', this.addSubobject);
             this.composition.off('remove', this.removeSubobject);
             this.unlisten();
+
+            delete this.subobjectViewsById;
+            delete this.telemetryViewsById;
         }
     }
     

src/plugins/displayLayout/components/TelemetryView.vue

@@ -164,9 +164,11 @@
                 }
             }
         },
+        created() {
+            this.metadata = this.openmct.telemetry.getMetadata(this.item.domainObject);
+        },
         mounted() {
             this.limitEvaluator = this.openmct.telemetry.limitEvaluator(this.item.domainObject);
-            this.metadata = this.openmct.telemetry.getMetadata(this.item.domainObject);
             this.formats = this.openmct.telemetry.getFormatMap(this.metadata);
 
             this.requestHistoricalData();