Create a base view configuration class. (#2225)

src/plugins/displayLayout/SubobjectViewConfiguration.js

@@ -20,51 +20,34 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([],
-    function () {
-        class SubobjectViewConfiguration {
+define(
+    ['./ViewConfiguration'],
+    function (ViewConfiguration) {
+        class SubobjectViewConfiguration extends ViewConfiguration {
+
             /**
              *
-             * @param domainObject the domain object to mutate.
-             * @param id
-             * @param rawPosition
-             * @param openmct
+             * @param {Object} configuration the subobject view configuration
+             * @param {String} configuration.id the domain object keystring identifier
+             * @param {Boolean} configuration.hasFrame flag to show/hide the frame
+             * @param {Object} configuration.domainObject the domain object
+             * @param {Object} configuration.rawPosition an object that holds raw position and dimensions
+             * @param {Object} configuration.openmct the openmct object
              */
-            constructor(domainObject, id, hasFrame, rawPosition, openmct) {
-                this.domainObject = domainObject;
+            constructor({id, hasFrame, ...rest}) {
+                super(rest);
                 this.id = id;
                 this.hasFrame = hasFrame;
-                this.rawPosition = rawPosition;
-                this.mutatePosition = this.mutatePosition.bind(this);
-                this.observe = openmct.objects.observe.bind(openmct.objects);
-                this.mutate = function (path, value) {
-                    openmct.objects.mutate(this.domainObject, path, value);
-                }.bind(this);
-                this.listeners = [];
             }
 
-            mutatePosition() {
-                let path = "configuration.panels[" + this.id + "]";
-                this.mutate(path + ".dimensions", this.rawPosition.dimensions);
-                this.mutate(path + ".position", this.rawPosition.position);
+            path() {
+                return "configuration.panels[" + this.id + "]";
             }
 
-            attachListeners() {
-                let path = "configuration.panels[" + this.id + "].hasFrame";
-                this.listeners.push(this.observe(this.domainObject, path, function (newValue) {
+            observeProperties() {
+                this.attachListener("hasFrame", newValue => {
                     this.hasFrame = newValue;
-                }.bind(this)));
-
-                this.listeners.push(this.observe(this.domainObject, '*', function (obj) {
-                    this.domainObject = JSON.parse(JSON.stringify(obj));
-                }.bind(this)));
-            }
-
-            removeListeners() {
-                this.listeners.forEach(listener => {
-                    listener();
                 });
-                this.listeners = [];
             }
         }
 

src/plugins/displayLayout/TelemetryViewConfiguration.js

@@ -20,36 +20,28 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
-define([],
-    function () {
-        class TelemetryViewConfiguration {
+define(
+    ['./ViewConfiguration'],
+    function (ViewConfiguration) {
+        class TelemetryViewConfiguration extends ViewConfiguration {
+
             /**
-             *
-             * @param domainObject the domain object to mutate.
-             * @param alphanumeric
-             * @param rawPosition
-             * @param openmct
+             * @param {Object} configuration the telemetry object view configuration
+             * @param {Object} configuration.alphanumeric
+             * @param {Object} configuration.domainObject the telemetry domain object
+             * @param {Object} configuration.rawPosition an object that holds raw position and dimensions
+             * @param {Object} configuration.openmct the openmct object
              */
-            constructor(domainObject, alphanumeric, rawPosition, openmct) {
-                this.domainObject = domainObject;
+            constructor({alphanumeric, ...rest}) {
+                super(rest);
                 this.alphanumeric = alphanumeric;
-                this.rawPosition = rawPosition;
-                this.observe = openmct.objects.observe.bind(openmct.objects);
-                this.mutate = function (path, value) {
-                    openmct.objects.mutate(this.domainObject, path, value);
-                }.bind(this);
-                this.mutatePosition = this.mutatePosition.bind(this);
-                this.listeners = [];
             }
 
-            mutatePosition() {
-                let path = "configuration.alphanumerics[" + this.alphanumeric.index + "]";
-                this.mutate(path + ".dimensions", this.rawPosition.dimensions);
-                this.mutate(path + ".position", this.rawPosition.position);
+            path() {
+                return "configuration.alphanumerics[" + this.alphanumeric.index + "]";
             }
 
-            attachListeners() {
-                let path = "configuration.alphanumerics[" + this.alphanumeric.index + "]";
+            observeProperties() {
                 [
                     'displayMode',
                     'value',
@@ -58,24 +50,11 @@ define([],
                     'color',
                     'size'
                 ].forEach(property => {
-                    this.listeners.push(
-                        this.observe(this.domainObject, path + "." + property, function (newValue) {
-                            this.alphanumeric[property] = newValue;
-                        }.bind(this))
-                    );
+                    this.attachListener(property, newValue => {
+                        this.alphanumeric[property] = newValue;
+                    });
                 });
-                this.listeners.push(this.observe(this.domainObject, '*', function (obj) {
-                    this.domainObject = JSON.parse(JSON.stringify(obj));
-                }.bind(this)));
             }
-
-            removeListeners() {
-                this.listeners.forEach(listener => {
-                    listener();
-                });
-                this.listeners = [];
-            }
-
         }
 
         return TelemetryViewConfiguration;

src/plugins/displayLayout/ViewConfiguration.js

@@ -0,0 +1,72 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+ define([],
+    function () {
+        class ViewConfiguration {
+
+            constructor({domainObject, openmct, rawPosition}) {
+                this.domainObject = domainObject;
+                this.rawPosition = rawPosition;
+                this.mutatePosition = this.mutatePosition.bind(this);
+                this.listeners = [];
+                this.observe = openmct.objects.observe.bind(openmct.objects);
+                this.mutate = function (path, value) {
+                    openmct.objects.mutate(this.domainObject, path, value);
+                }.bind(this);
+            }
+
+            mutatePosition() {
+                this.mutate(this.path() + ".dimensions", this.rawPosition.dimensions);
+                this.mutate(this.path() + ".position", this.rawPosition.position);
+            }
+
+            attachListener(property, callback) {
+                this.listeners.push(this.observe(this.domainObject, this.path() + "." + property, callback));
+            }
+
+            attachListeners() {
+                this.observeProperties();
+                this.listeners.push(this.observe(this.domainObject, '*', function (obj) {
+                    this.domainObject = JSON.parse(JSON.stringify(obj));
+                }.bind(this)));                
+            }
+
+            removeListeners() {
+                this.listeners.forEach(listener => {
+                    listener();
+                });
+                this.listeners = [];
+            }
+
+             path() {
+                throw "NOT IMPLEMENTED;"
+            }
+
+            observeProperties() {
+                // Not implemented
+            }
+        }
+
+        return ViewConfiguration;
+    }
+ );

src/plugins/displayLayout/components/DisplayLayout.vue

@@ -126,8 +126,13 @@
                 };
                 let style = this.convertPosition(rawPosition);
                 let id = this.openmct.objects.makeKeyString(panel.domainObject.identifier);
-                let config = new SubobjectViewConfiguration(
-                    this.newDomainObject, id, panel.hasFrame, rawPosition, openmct);
+                let config = new SubobjectViewConfiguration({
+                    domainObject: this.newDomainObject,
+                    id: id,
+                    hasFrame: panel.hasFrame,
+                    rawPosition: rawPosition,
+                    openmct: openmct
+                });
 
                 this.layoutItems.push({
                     id: id,
@@ -148,8 +153,12 @@
                 let id = this.openmct.objects.makeKeyString(alphanumeric.identifier);
 
                 this.openmct.objects.get(id).then(domainObject => {
-                    let config = new TelemetryViewConfiguration(
-                        this.newDomainObject, alphanumeric, rawPosition, openmct);
+                    let config = new TelemetryViewConfiguration({
+                        domainObject: this.newDomainObject,
+                        alphanumeric: alphanumeric,
+                        rawPosition: rawPosition,
+                        openmct: openmct
+                    });
 
                     this.layoutItems.push({
                         id: id,