Fixes [Flexible Layout] bug with composition (#3680)

* fix delete and composition load
* remove unused remove action
* remove star listener and use computed property

Co-authored-by: Deep Tailor <deep.j.tailor@nasa.com>
This commit is contained in:
Deep Tailor 2021-02-16 14:05:39 -08:00 committed by GitHub
parent 2b143dfc0f
commit 55c851873c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -28,7 +28,7 @@
></div> ></div>
<div <div
v-if="areAllContainersEmpty()" v-if="allContainersAreEmpty"
class="c-fl__empty" class="c-fl__empty"
> >
<span class="c-fl__empty-message">This Flexible Layout is currently empty</span> <span class="c-fl__empty-message">This Flexible Layout is currently empty</span>
@ -94,7 +94,6 @@ import Container from '../utils/container';
import Frame from '../utils/frame'; import Frame from '../utils/frame';
import ResizeHandle from './resizeHandle.vue'; import ResizeHandle from './resizeHandle.vue';
import DropHint from './dropHint.vue'; import DropHint from './dropHint.vue';
import RemoveAction from '../../remove/RemoveAction.js';
const MIN_CONTAINER_SIZE = 5; const MIN_CONTAINER_SIZE = 5;
@ -152,7 +151,8 @@ export default {
data() { data() {
return { return {
domainObject: this.layoutObject, domainObject: this.layoutObject,
newFrameLocation: [] newFrameLocation: [],
identifierMap: {}
}; };
}, },
computed: { computed: {
@ -168,26 +168,30 @@ export default {
}, },
rowsLayout() { rowsLayout() {
return this.domainObject.configuration.rowsLayout; return this.domainObject.configuration.rowsLayout;
},
allContainersAreEmpty() {
return this.containers.every(container => container.frames.length === 0);
} }
}, },
mounted() { mounted() {
this.buildIdentifierMap();
this.composition = this.openmct.composition.get(this.domainObject); this.composition = this.openmct.composition.get(this.domainObject);
this.composition.on('remove', this.removeChildObject); this.composition.on('remove', this.removeChildObject);
this.composition.on('add', this.addFrame); this.composition.on('add', this.addFrame);
this.composition.load();
this.RemoveAction = new RemoveAction(this.openmct);
this.unobserve = this.openmct.objects.observe(this.domainObject, '*', this.updateDomainObject);
}, },
beforeDestroy() { beforeDestroy() {
this.composition.off('remove', this.removeChildObject); this.composition.off('remove', this.removeChildObject);
this.composition.off('add', this.addFrame); this.composition.off('add', this.addFrame);
this.unobserve();
}, },
methods: { methods: {
areAllContainersEmpty() { buildIdentifierMap() {
return !this.containers.filter(container => container.frames.length).length; this.containers.forEach(container => {
container.frames.forEach(frame => {
let keystring = this.openmct.objects.makeKeyString(frame.domainObjectIdentifier);
this.identifierMap[keystring] = true;
});
});
}, },
addContainer() { addContainer() {
let container = new Container(); let container = new Container();
@ -236,16 +240,21 @@ export default {
this.newFrameLocation = [containerIndex, insertFrameIndex]; this.newFrameLocation = [containerIndex, insertFrameIndex];
}, },
addFrame(domainObject) { addFrame(domainObject) {
let containerIndex = this.newFrameLocation.length ? this.newFrameLocation[0] : 0; let keystring = this.openmct.objects.makeKeyString(domainObject.identifier);
let container = this.containers[containerIndex];
let frameIndex = this.newFrameLocation.length ? this.newFrameLocation[1] : container.frames.length;
let frame = new Frame(domainObject.identifier);
container.frames.splice(frameIndex + 1, 0, frame); if (!this.identifierMap[keystring]) {
sizeItems(container.frames, frame); let containerIndex = this.newFrameLocation.length ? this.newFrameLocation[0] : 0;
let container = this.containers[containerIndex];
let frameIndex = this.newFrameLocation.length ? this.newFrameLocation[1] : container.frames.length;
let frame = new Frame(domainObject.identifier);
this.newFrameLocation = []; container.frames.splice(frameIndex + 1, 0, frame);
this.persist(containerIndex); sizeItems(container.frames, frame);
this.newFrameLocation = [];
this.persist(containerIndex);
this.identifierMap[keystring] = true;
}
}, },
deleteFrame(frameId) { deleteFrame(frameId) {
let container = this.containers let container = this.containers
@ -254,16 +263,20 @@ export default {
.frames .frames
.filter((f => f.id === frameId))[0]; .filter((f => f.id === frameId))[0];
this.removeFromComposition(frame.domainObjectIdentifier) this.removeFromComposition(frame.domainObjectIdentifier);
.then(() => {
sizeToFill(container.frames); this.$nextTick().then(() => {
this.setSelectionToParent(); sizeToFill(container.frames);
}); this.setSelectionToParent();
});
}, },
removeFromComposition(identifier) { removeFromComposition(identifier) {
return this.openmct.objects.get(identifier).then((childDomainObject) => { let keystring = this.openmct.objects.makeKeyString(identifier);
this.RemoveAction.removeFromComposition(this.domainObject, childDomainObject);
}); this.identifierMap[keystring] = undefined;
delete this.identifierMap[keystring];
this.composition.remove({identifier});
}, },
setSelectionToParent() { setSelectionToParent() {
this.$el.click(); this.$el.click();