openmct/src/plugins/displayLayout/SubobjectViewConfiguration.js
Pegah Sarram e07cfc9394 Layout drawing (#2232)
* - Show "Add" button in the toolbar when a display layout object is selected.
- Add a flag to object view's show() method to indicate immediate selection of the view. If the view implements getSelectionContext() use it, otherwise set to default context.

* Create a component for each element.

* Saving work

* Add element factory for creating new instances of elements.

* Mutate element when a new one added and get elements when the component is mounted.

* Add create() method for creating a new telemetry and element in their respective view configuration.

* Add some of the toolbar controls for box, text, image and line elements. Also, add X, Y, Width and Height controls for alhpanumeric elements.

* Pass name to addElement as type.

* Add c-frame-inspectable class if item is inspectable.

* Clean up

* Hide frame for summary widgets by default.

* Better styling for editing

- s-selected on shell__main-container;
- Better edit grid coloring for espresso;

* - Update toolbar-button to support dialogs.
- Update toolbar to construct a value object based on form keys if a toolbar item has a dialogi, and mutate the form keys.
- Add toolbar controls for editing text and url for 'Text' and 'Image' elements respectively.

* Editing-related changes

- Removed hard-coded .is-selectable and .is-moveable from
LayoutItem.vue, updates accordingly to _global.scss;
- Theme constants updated;
- TODO: apply changes to Flexible Layouts;

* Better defaults

- Better default grid size and object size;

* - Fix toolbar-input to read value as a number if type is 'number'.
- Remove rawPosition from view configuration and instead get the position and dimensions from the properties (x, y, width and height) directly.
- Set the style property on the view configuration instead of the layout item.
- Move the logic for updating the style to the view configuration.

* Fix default dimensions for telemetry items and subobjects since the default grid size is changed.

* Remove form definition for display layout type.

* Reword the comment

* Let subobject view configuration handle new panel creation.

* Add default grid size back and remove unused code.

* Pass in only the needed method.

* Define default position in case the object is not added via drag 'n drop.
2018-12-04 09:12:45 -08:00

123 lines
4.4 KiB
JavaScript

/*****************************************************************************
* 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(
['./ViewConfiguration'],
function (ViewConfiguration) {
class SubobjectViewConfiguration extends ViewConfiguration {
static create(domainObject, gridSize, position) {
const MINIMUM_FRAME_SIZE = [320, 180],
DEFAULT_DIMENSIONS = [10, 10],
DEFAULT_POSITION = [0, 0],
DEFAULT_HIDDEN_FRAME_TYPES = ['hyperlink', 'summary-widget'];
function getDefaultDimensions() {
return MINIMUM_FRAME_SIZE.map((min, index) => {
return Math.max(
Math.ceil(min / gridSize[index]),
DEFAULT_DIMENSIONS[index]
);
});
}
function hasFrameByDefault(type) {
return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
}
position = position || DEFAULT_POSITION;
let defaultDimensions = getDefaultDimensions();
let panel = {
width: defaultDimensions[0],
height: defaultDimensions[1],
x: position[0],
y: position[1],
hasFrame: hasFrameByDefault(domainObject.type)
};
return panel;
}
/**
*
* @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}) {
super(rest);
this.id = id;
this.panel = panel;
this.hasFrame = this.hasFrame.bind(this);
this.updateStyle(this.position());
}
path() {
return "configuration.panels[" + this.id + "]";
}
x() {
return this.panel.x;
}
y() {
return this.panel.y;
}
width() {
return this.panel.width;
}
height() {
return this.panel.height;
}
hasFrame() {
return this.panel.hasFrame;
}
observeProperties() {
[
'hasFrame',
'x',
'y',
'width',
'height'
].forEach(property => {
this.attachListener(property, newValue => {
this.panel[property] = newValue;
if (property === 'width' || property === 'height' ||
property === 'x' || property === 'y') {
this.updateStyle();
}
});
});
}
}
return SubobjectViewConfiguration;
}
);