c6053e234a
* Modify Selection API to support multi-select via shift click. * Add support for shift + click to add and remove the selection. * Display message in Location and Properties for multi-select. * Define applicableSelectedItems for toolbar items. Move toolbar control definitions to functions. * Hide positioning inputs if multi-select. Show a 'non-specific' icon when a discrete setting can't be shown in a mixed setting." * Add toolbar controls in groups per layout item type. Add nonSpecific property to toolbar items to be used by toolbar controls to show non-specific icon. * Modify toolbar button to react to nonSpecific flag. Get form value by checking value of applicable selected items. * Support deleting multiple selected objects. * Do not disable controls when selected items have mixed setting. * Revert default color to original value. * Changes to snap-to-grid * Remove timeout for updating toolbar after mutation. Do not copy toolbar item when iterating the structure. * Implement move to top and move to bottom for multi-select * Implement move up and move down for multi-select. * Markup and CSS changes for mixed settings in toolbar - Toggle, color-picker buttons; - TODO: check other themes and sync; * Mixed settings styling complete - Refined and synced theme constants; - Styling for all toolbar components; - Text size menu handling; - Inspector messaging; * Fix selection path * Mixed settings styling refinements - Normalized button styling for mixed style context; - Better theme constant naming; - Refined swatch styling, better theme constants; * First cut at getting the bounding rectangle working for multi-select. * Set pointer-events to none on c-edit-frame to prevent marquee reacting to click events. * Delete capturing before calling select. * Remove EditMarquee from ITEM_TYPE_VIEW_MAP * Pass selected layout items as a prop to edit marquee instead of selection so that x, y, w, h are updated. * Multi-select c-frame-edit visual fixes - WIP * Add complexContent class for a single selected item whose type is subobject-view. * Move 'c-frame-edit-move' div to layout frame. * Saving work - multi-move WIP * Fixes issue with selection happening at end of drag * Styles fixed for new markup organization - Marquee, frame styles; - $editMarqueeBorder style added to theme constants; * Significant functionality for .c-frame-edit__move element - Added .is-multi-selected class to .l-layout when > 1 items selected; - __move element now handles multi-select and complex content (CC) objects: -- 0 to 1 items selected, displays as hover bar with grippy on all CC objects, -- > 1 items selected, __move covers all of the frame of all selected CC items and doesn't allow sub-object selection, and only displays as hover bar on non-selected CC objects; - Added better styling for selected objects while editing; - Code cleanup and consolidation; - Left translucent green style applied to __move element to temporarily aid development; - TODO: fix line drawing object; * - Fix an issue where shift click did not remove the selected item from the selection after move. - Modify telemetry and subobject views to emit move and endMove events. - Clone selectedLayoutItems to get initial positions instead of selection so subsequent moves start from the current position. * Fix cursor for __move, code comment refinements * Code cleanup, line view markup changes - line view markup brought into line with structure in LayoutFrame.vue; * Implement multi-resize * Simplify edit marquee code. Revert image and text views' default position to the original values. * Fix resize for single selection when snap to grid is disabled * Hide edit marquee if single line is selected, and show c-frame-edit in line-view instead. * Fix for LineView handles * Remove snap to grid toggle button and modify the migration script to convert elements with pixel coordinates to grid. * Fix resizing single line * Calculate width and height differently for line to position marquee correctly. * Fix moving single selected line * Calculate the height and width for line before comparing them with max height and width to correct the marquee position. * Change the logic for showing frame edit for lines to check for item id. * Allow multi-move with line in the mix. * Implement multi-resize when grabbing SW corner. * Removed temp green tint from __move element * Fix object undefined error. * Implement multi-resize for all items except line (take 2). * Misc UI 7 - CSS selectors to properly display edit marquee, don't show in browse mode; * Fix multi-resize for lines. Make sure line's height and width is minimum 1. * Disable inspector views when multiple objects are selected. * Restored layout grid display on sub-layout selection * Clean up code * Fixes - Edit marquee display fixes; * More code clean up * SIGNIFICANT fixes and rewriting in LayoutFrame.vue - Styles for .c-frame-edit__move element for selection and hovering; - local controls; - view large button; - Theme constants updated; * Get selected item's index from layoutItems. * Address review feedback. * Merge topic-core-refactor * Reset keyString to empty string after setting original path when domainObject is undefined. Add proper check for selection.
551 lines
22 KiB
Vue
551 lines
22 KiB
Vue
/*****************************************************************************
|
|
* 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.
|
|
*****************************************************************************/
|
|
|
|
<template>
|
|
<div class="l-layout"
|
|
@dragover="handleDragOver"
|
|
@click.capture="bypassSelection"
|
|
@drop="handleDrop"
|
|
:class="{
|
|
'is-multi-selected': selectedLayoutItems.length > 1
|
|
}">
|
|
<!-- Background grid -->
|
|
<div class="l-layout__grid-holder c-grid">
|
|
<div class="c-grid__x l-grid l-grid-x"
|
|
v-if="gridSize[0] >= 3"
|
|
:style="[{ backgroundSize: gridSize[0] + 'px 100%' }]">
|
|
</div>
|
|
<div class="c-grid__y l-grid l-grid-y"
|
|
v-if="gridSize[1] >= 3"
|
|
:style="[{ backgroundSize: '100%' + gridSize[1] + 'px' }]"></div>
|
|
</div>
|
|
<component v-for="(item, index) in layoutItems"
|
|
:is="item.type"
|
|
:item="item"
|
|
:key="item.id"
|
|
:gridSize="gridSize"
|
|
:initSelect="initSelectIndex === index"
|
|
:index="index"
|
|
:multiSelect="selectedLayoutItems.length > 1"
|
|
@move="move"
|
|
@endMove="endMove"
|
|
@endLineResize='endLineResize'>
|
|
</component>
|
|
<edit-marquee v-if='showMarquee'
|
|
:gridSize="gridSize"
|
|
:selectedLayoutItems="selectedLayoutItems"
|
|
@endResize="endResize">
|
|
</edit-marquee>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import "~styles/sass-base";
|
|
|
|
@mixin displayMarquee($c) {
|
|
> .c-frame-edit {
|
|
// All other frames
|
|
//@include test($c, 0.4);
|
|
display: block;
|
|
}
|
|
> .c-frame > .c-frame-edit {
|
|
// Line object frame
|
|
//@include test($c, 0.4);
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.l-layout {
|
|
@include abs();
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: auto;
|
|
|
|
&__grid-holder {
|
|
display: none;
|
|
}
|
|
|
|
&__frame {
|
|
position: absolute;
|
|
}
|
|
}
|
|
|
|
.is-editing {
|
|
.l-shell__main-container {
|
|
&[s-selected],
|
|
&[s-selected-parent] {
|
|
// Display grid and allow edit marquee to display in main layout holder when editing
|
|
> .l-layout {
|
|
background: $editUIGridColorBg;
|
|
|
|
> [class*="__grid-holder"] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.l-layout__frame {
|
|
&[s-selected],
|
|
&[s-selected-parent] {
|
|
// Display grid and allow edit marquee to display in nested layouts when editing
|
|
> * > * > .l-layout {
|
|
background: $editUIGridColorBg;
|
|
box-shadow: inset $editUIGridColorFg 0 0 2px 1px;
|
|
|
|
> [class*='grid-holder'] {
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/*********************** EDIT MARQUEE CONTROL */
|
|
*[s-selected-parent] {
|
|
> .l-layout {
|
|
// When main shell layout is the parent
|
|
@include displayMarquee(deeppink);
|
|
}
|
|
> * > * > * {
|
|
// When a sub-layout is the parent
|
|
@include displayMarquee(blue);
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import uuid from 'uuid';
|
|
|
|
import SubobjectView from './SubobjectView.vue'
|
|
import TelemetryView from './TelemetryView.vue'
|
|
import BoxView from './BoxView.vue'
|
|
import TextView from './TextView.vue'
|
|
import LineView from './LineView.vue'
|
|
import ImageView from './ImageView.vue'
|
|
import EditMarquee from './EditMarquee.vue'
|
|
|
|
const ITEM_TYPE_VIEW_MAP = {
|
|
'subobject-view': SubobjectView,
|
|
'telemetry-view': TelemetryView,
|
|
'box-view': BoxView,
|
|
'line-view': LineView,
|
|
'text-view': TextView,
|
|
'image-view': ImageView
|
|
};
|
|
const ORDERS = {
|
|
top: Number.POSITIVE_INFINITY,
|
|
up: 1,
|
|
down: -1,
|
|
bottom: Number.NEGATIVE_INFINITY
|
|
};
|
|
const DRAG_OBJECT_TRANSFER_PREFIX = 'openmct/domain-object/';
|
|
|
|
let components = ITEM_TYPE_VIEW_MAP;
|
|
components['edit-marquee'] = EditMarquee;
|
|
|
|
function getItemDefinition(itemType, ...options) {
|
|
let itemView = ITEM_TYPE_VIEW_MAP[itemType];
|
|
|
|
if (!itemView) {
|
|
throw `Invalid itemType: ${itemType}`;
|
|
}
|
|
|
|
return itemView.makeDefinition(...options);
|
|
}
|
|
|
|
export default {
|
|
data() {
|
|
let domainObject = JSON.parse(JSON.stringify(this.domainObject));
|
|
return {
|
|
internalDomainObject: domainObject,
|
|
initSelectIndex: undefined,
|
|
selection: []
|
|
};
|
|
},
|
|
computed: {
|
|
gridSize() {
|
|
return this.internalDomainObject.configuration.layoutGrid;
|
|
},
|
|
layoutItems() {
|
|
return this.internalDomainObject.configuration.items;
|
|
},
|
|
selectedLayoutItems() {
|
|
return this.layoutItems.filter(item => {
|
|
return this.itemIsInCurrentSelection(item);
|
|
});
|
|
},
|
|
showMarquee() {
|
|
let selectionPath = this.selection[0];
|
|
let singleSelectedLine = this.selection.length === 1 &&
|
|
selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.type === 'line-view';
|
|
return selectionPath && selectionPath.length > 1 && !singleSelectedLine;
|
|
}
|
|
},
|
|
inject: ['openmct', 'options'],
|
|
props: ['domainObject'],
|
|
components: components,
|
|
methods: {
|
|
addElement(itemType, element) {
|
|
this.addItem(itemType + '-view', element);
|
|
},
|
|
setSelection(selection) {
|
|
this.selection = selection;
|
|
},
|
|
itemIsInCurrentSelection(item) {
|
|
return this.selection.some(selectionPath =>
|
|
selectionPath[0].context.layoutItem && selectionPath[0].context.layoutItem.id === item.id);
|
|
},
|
|
bypassSelection($event) {
|
|
if (this.dragInProgress) {
|
|
if ($event) {
|
|
$event.stopImmediatePropagation();
|
|
}
|
|
this.dragInProgress = false;
|
|
return;
|
|
}
|
|
},
|
|
endLineResize(item, updates) {
|
|
this.dragInProgress = true;
|
|
let index = this.layoutItems.indexOf(item);
|
|
Object.assign(item, updates);
|
|
this.mutate(`configuration.items[${index}]`, item);
|
|
},
|
|
endResize(scaleWidth, scaleHeight, marqueeStart, marqueeOffset) {
|
|
this.dragInProgress = true;
|
|
this.layoutItems.forEach(item => {
|
|
if (this.itemIsInCurrentSelection(item)) {
|
|
let itemXInMarqueeSpace = item.x - marqueeStart.x;
|
|
let itemXInMarqueeSpaceAfterScale = Math.round(itemXInMarqueeSpace * scaleWidth);
|
|
item.x = itemXInMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
|
|
|
|
let itemYInMarqueeSpace = item.y - marqueeStart.y;
|
|
let itemYInMarqueeSpaceAfterScale = Math.round(itemYInMarqueeSpace * scaleHeight);
|
|
item.y = itemYInMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
|
|
|
|
if (item.x2) {
|
|
let itemX2InMarqueeSpace = item.x2 - marqueeStart.x;
|
|
let itemX2InMarqueeSpaceAfterScale = Math.round(itemX2InMarqueeSpace * scaleWidth);
|
|
item.x2 = itemX2InMarqueeSpaceAfterScale + marqueeOffset.x + marqueeStart.x;
|
|
} else {
|
|
item.width = Math.round(item.width * scaleWidth);
|
|
}
|
|
|
|
if (item.y2) {
|
|
let itemY2InMarqueeSpace = item.y2 - marqueeStart.y;
|
|
let itemY2InMarqueeSpaceAfterScale = Math.round(itemY2InMarqueeSpace * scaleHeight);
|
|
item.y2 = itemY2InMarqueeSpaceAfterScale + marqueeOffset.y + marqueeStart.y;
|
|
} else {
|
|
item.height = Math.round(item.height * scaleHeight);
|
|
}
|
|
}
|
|
});
|
|
this.mutate("configuration.items", this.layoutItems);
|
|
},
|
|
move(gridDelta) {
|
|
this.dragInProgress = true;
|
|
|
|
if (!this.initialPositions) {
|
|
this.initialPositions = {};
|
|
_.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
|
|
if (selectedItem.type === 'line-view') {
|
|
this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
|
|
} else {
|
|
this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
|
|
}
|
|
});
|
|
}
|
|
|
|
let layoutItems = this.layoutItems.map(item => {
|
|
if (this.initialPositions[item.id]) {
|
|
let startingPosition = this.initialPositions[item.id];
|
|
let [startingX, startingY, startingX2, startingY2] = startingPosition;
|
|
item.x = startingX + gridDelta[0];
|
|
item.y = startingY + gridDelta[1];
|
|
|
|
if (item.x2) {
|
|
item.x2 = startingX2 + gridDelta[0];
|
|
}
|
|
|
|
if (item.y2) {
|
|
item.y2 = startingY2 + gridDelta[1];
|
|
}
|
|
}
|
|
return item;
|
|
});
|
|
},
|
|
endMove() {
|
|
this.mutate('configuration.items', this.layoutItems);
|
|
this.initialPositions = undefined;
|
|
},
|
|
mutate(path, value) {
|
|
this.openmct.objects.mutate(this.internalDomainObject, path, value);
|
|
},
|
|
handleDrop($event) {
|
|
if (!$event.dataTransfer.types.includes('openmct/domain-object-path')) {
|
|
return;
|
|
}
|
|
|
|
$event.preventDefault();
|
|
|
|
let domainObject = JSON.parse($event.dataTransfer.getData('openmct/domain-object-path'))[0];
|
|
let elementRect = this.$el.getBoundingClientRect();
|
|
let droppedObjectPosition = [
|
|
Math.floor(($event.pageX - elementRect.left) / this.gridSize[0]),
|
|
Math.floor(($event.pageY - elementRect.top) / this.gridSize[1])
|
|
];
|
|
|
|
if (this.isTelemetry(domainObject)) {
|
|
this.addItem('telemetry-view', domainObject, droppedObjectPosition);
|
|
} else {
|
|
let identifier = this.openmct.objects.makeKeyString(domainObject.identifier);
|
|
|
|
if (!this.objectViewMap[identifier]) {
|
|
this.addItem('subobject-view', domainObject, droppedObjectPosition);
|
|
} else {
|
|
let prompt = this.openmct.overlays.dialog({
|
|
iconClass: 'alert',
|
|
message: "This item is already in layout and will not be added again.",
|
|
buttons: [
|
|
{
|
|
label: 'OK',
|
|
callback: function () {
|
|
prompt.dismiss();
|
|
}
|
|
}
|
|
]
|
|
});
|
|
}
|
|
}
|
|
},
|
|
containsObject(identifier) {
|
|
return _.get(this.internalDomainObject, 'composition')
|
|
.some(childId => this.openmct.objects.areIdsEqual(childId, identifier));
|
|
},
|
|
handleDragOver($event) {
|
|
// Get the ID of the dragged object
|
|
let draggedKeyString = $event.dataTransfer.types
|
|
.filter(type => type.startsWith(DRAG_OBJECT_TRANSFER_PREFIX))
|
|
.map(type => type.substring(DRAG_OBJECT_TRANSFER_PREFIX.length))[0];
|
|
|
|
// If the layout already contains the given object, then shortcut the default dragover behavior and
|
|
// potentially allow drop. Display layouts allow drag drop of duplicate telemetry objects.
|
|
if (this.containsObject(draggedKeyString)){
|
|
$event.preventDefault();
|
|
}
|
|
},
|
|
isTelemetry(domainObject) {
|
|
if (this.openmct.telemetry.isTelemetryObject(domainObject) &&
|
|
!this.options.showAsView.includes(domainObject.type)) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
},
|
|
addItem(itemType, ...options) {
|
|
let item = getItemDefinition(itemType, this.openmct, this.gridSize, ...options);
|
|
item.type = itemType;
|
|
item.id = uuid();
|
|
this.trackItem(item);
|
|
this.layoutItems.push(item);
|
|
this.openmct.objects.mutate(this.internalDomainObject, "configuration.items", this.layoutItems);
|
|
this.initSelectIndex = this.layoutItems.length - 1;
|
|
},
|
|
trackItem(item) {
|
|
if (!item.identifier) {
|
|
return;
|
|
}
|
|
|
|
let keyString = this.openmct.objects.makeKeyString(item.identifier);
|
|
|
|
if (item.type === "telemetry-view") {
|
|
let count = this.telemetryViewMap[keyString] || 0;
|
|
this.telemetryViewMap[keyString] = ++count;
|
|
} else if (item.type === "subobject-view") {
|
|
this.objectViewMap[keyString] = true;
|
|
}
|
|
},
|
|
removeItem(selectedItems) {
|
|
let indices = [];
|
|
this.initSelectIndex = -1;
|
|
selectedItems.forEach(selectedItem => {
|
|
indices.push(selectedItem[0].context.index);
|
|
this.untrackItem(selectedItem[0].context.layoutItem);
|
|
});
|
|
_.pullAt(this.layoutItems, indices);
|
|
this.mutate("configuration.items", this.layoutItems);
|
|
this.$el.click();
|
|
},
|
|
untrackItem(item) {
|
|
if (!item.identifier) {
|
|
return;
|
|
}
|
|
|
|
let keyString = this.openmct.objects.makeKeyString(item.identifier);
|
|
|
|
if (item.type === 'telemetry-view') {
|
|
let count = --this.telemetryViewMap[keyString];
|
|
|
|
if (count === 0) {
|
|
delete this.telemetryViewMap[keyString];
|
|
this.removeFromComposition(keyString);
|
|
}
|
|
} else if (item.type === 'subobject-view') {
|
|
delete this.objectViewMap[keyString];
|
|
this.removeFromComposition(keyString);
|
|
}
|
|
},
|
|
removeFromComposition(keyString) {
|
|
let composition = _.get(this.internalDomainObject, 'composition');
|
|
composition = composition.filter(identifier => {
|
|
return this.openmct.objects.makeKeyString(identifier) !== keyString;
|
|
});
|
|
this.mutate("composition", composition);
|
|
},
|
|
initializeItems() {
|
|
this.telemetryViewMap = {};
|
|
this.objectViewMap = {};
|
|
this.layoutItems.forEach(this.trackItem);
|
|
},
|
|
addChild(child) {
|
|
let identifier = this.openmct.objects.makeKeyString(child.identifier);
|
|
if (this.isTelemetry(child)) {
|
|
if (!this.telemetryViewMap[identifier]) {
|
|
this.addItem('telemetry-view', child);
|
|
}
|
|
} else if (!this.objectViewMap[identifier]) {
|
|
this.addItem('subobject-view', child);
|
|
}
|
|
},
|
|
removeChild(identifier) {
|
|
let keyString = this.openmct.objects.makeKeyString(identifier);
|
|
|
|
if (this.objectViewMap[keyString]) {
|
|
delete this.objectViewMap[keyString];
|
|
this.removeFromConfiguration(keyString);
|
|
} else if (this.telemetryViewMap[keyString]) {
|
|
delete this.telemetryViewMap[keyString];
|
|
this.removeFromConfiguration(keyString);
|
|
}
|
|
},
|
|
removeFromConfiguration(keyString) {
|
|
let layoutItems = this.layoutItems.filter(item => {
|
|
if (!item.identifier) {
|
|
return true;
|
|
} else {
|
|
return this.openmct.objects.makeKeyString(item.identifier) !== keyString;
|
|
}
|
|
});
|
|
this.mutate("configuration.items", layoutItems);
|
|
this.$el.click();
|
|
},
|
|
orderItem(position, selectedItems) {
|
|
let delta = ORDERS[position];
|
|
let indices = [];
|
|
let newIndex = -1;
|
|
let items = [];
|
|
|
|
Object.assign(items, this.layoutItems);
|
|
this.selectedLayoutItems.forEach(selectedItem => {
|
|
indices.push(this.layoutItems.indexOf(selectedItem));
|
|
});
|
|
indices.sort((a, b) => a - b);
|
|
|
|
if (position === 'top' || position === 'up') {
|
|
indices.reverse();
|
|
}
|
|
|
|
if (position === 'top' || position === 'bottom') {
|
|
this.moveToTopOrBottom(position, indices, items, delta);
|
|
} else {
|
|
this.moveUpOrDown(position, indices, items, delta);
|
|
}
|
|
|
|
this.mutate('configuration.items', this.layoutItems);
|
|
},
|
|
moveUpOrDown(position, indices, items, delta) {
|
|
let previousItemIndex = -1;
|
|
let newIndex = -1;
|
|
|
|
indices.forEach((itemIndex, index) => {
|
|
let isAdjacentItemSelected = position === 'up' ?
|
|
itemIndex + 1 === previousItemIndex :
|
|
itemIndex - 1 === previousItemIndex;
|
|
|
|
if (index > 0 && isAdjacentItemSelected) {
|
|
if (position === 'up') {
|
|
newIndex -= 1;
|
|
} else {
|
|
newIndex += 1;
|
|
}
|
|
} else {
|
|
newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
|
|
}
|
|
|
|
previousItemIndex = itemIndex;
|
|
this.updateItemOrder(newIndex, itemIndex, items);
|
|
});
|
|
},
|
|
moveToTopOrBottom(position, indices, items, delta) {
|
|
let newIndex = -1;
|
|
|
|
indices.forEach((itemIndex, index) => {
|
|
if (index === 0) {
|
|
newIndex = Math.max(Math.min(itemIndex + delta, this.layoutItems.length - 1), 0);
|
|
} else {
|
|
if (position === 'top') {
|
|
newIndex -= 1;
|
|
} else {
|
|
newIndex += 1;
|
|
}
|
|
}
|
|
|
|
this.updateItemOrder(newIndex, itemIndex, items);
|
|
});
|
|
},
|
|
updateItemOrder(newIndex, itemIndex, items) {
|
|
if (newIndex !== itemIndex) {
|
|
this.layoutItems.splice(itemIndex, 1);
|
|
this.layoutItems.splice(newIndex, 0, items[itemIndex]);
|
|
}
|
|
}
|
|
},
|
|
mounted() {
|
|
this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
|
|
this.internalDomainObject = JSON.parse(JSON.stringify(obj));
|
|
}.bind(this));
|
|
this.openmct.selection.on('change', this.setSelection);
|
|
this.initializeItems();
|
|
this.composition = this.openmct.composition.get(this.internalDomainObject);
|
|
this.composition.on('add', this.addChild);
|
|
this.composition.on('remove', this.removeChild);
|
|
this.composition.load();
|
|
},
|
|
destroyed: function () {
|
|
this.openmct.selection.off('change', this.setSelection);
|
|
this.composition.off('add', this.addChild);
|
|
this.composition.off('remove', this.removeChild);
|
|
this.unlisten();
|
|
}
|
|
}
|
|
</script>
|