[Display Layout] Disallow moving objects beyond top or left edges of the edit area (#2390)

* Disallow moving objects beyond top or left edges of the edit area.

* Disallow line also to move beyond top or left edges of the edit area.
This commit is contained in:
Pegah Sarram 2019-04-28 12:30:10 -07:00 committed by Andrew Henry
parent 3377ad5e0d
commit 547d4e82db
2 changed files with 44 additions and 14 deletions

View File

@ -269,33 +269,63 @@
_.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => { _.cloneDeep(this.selectedLayoutItems).forEach(selectedItem => {
if (selectedItem.type === 'line-view') { if (selectedItem.type === 'line-view') {
this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2]; this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y, selectedItem.x2, selectedItem.y2];
this.startingMinX2 = this.startingMinX2 !== undefined ? Math.min(this.startingMinX2, selectedItem.x2) : selectedItem.x2;
this.startingMinY2 = this.startingMinY2 !== undefined ? Math.min(this.startingMinY2, selectedItem.y2) : selectedItem.y2;
} else { } else {
this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y]; this.initialPositions[selectedItem.id] = [selectedItem.x, selectedItem.y];
} }
this.startingMinX = this.startingMinX !== undefined ? Math.min(this.startingMinX, selectedItem.x) : selectedItem.x;
this.startingMinY = this.startingMinY !== undefined ? Math.min(this.startingMinY, selectedItem.y) : selectedItem.y;
}); });
} }
let layoutItems = this.layoutItems.map(item => { let layoutItems = this.layoutItems.map(item => {
if (this.initialPositions[item.id]) { if (this.initialPositions[item.id]) {
let startingPosition = this.initialPositions[item.id]; this.updateItemPosition(item, gridDelta);
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; return item;
}); });
}, },
updateItemPosition(item, gridDelta) {
let startingPosition = this.initialPositions[item.id];
let [startingX, startingY, startingX2, startingY2] = startingPosition;
if (this.startingMinX + gridDelta[0] >= 0) {
if (item.x2 !== undefined) {
if (this.startingMinX2 + gridDelta[0] >= 0) {
item.x = startingX + gridDelta[0];
}
} else {
item.x = startingX + gridDelta[0];
}
}
if (this.startingMinY + gridDelta[1] >= 0) {
if (item.y2 !== undefined) {
if (this.startingMinY2 + gridDelta[1] >= 0) {
item.y = startingY + gridDelta[1];
}
} else {
item.y = startingY + gridDelta[1];
}
}
if (item.x2 !== undefined && this.startingMinX2 + gridDelta[0] >= 0 && this.startingMinX + gridDelta[0] >= 0) {
item.x2 = startingX2 + gridDelta[0];
}
if (item.y2 !== undefined && this.startingMinY2 + gridDelta[1] >= 0 && this.startingMinY + gridDelta[1] >= 0) {
item.y2 = startingY2 + gridDelta[1];
}
},
endMove() { endMove() {
this.mutate('configuration.items', this.layoutItems); this.mutate('configuration.items', this.layoutItems);
this.initialPositions = undefined; this.initialPositions = undefined;
this.startingMinX = undefined;
this.startingMinY = undefined;
this.startingMinX2 = undefined;
this.startingMinY2 = undefined;
}, },
mutate(path, value) { mutate(path, value) {
this.openmct.objects.mutate(this.internalDomainObject, path, value); this.openmct.objects.mutate(this.internalDomainObject, path, value);

View File

@ -116,7 +116,7 @@
let height = Number.NEGATIVE_INFINITY; let height = Number.NEGATIVE_INFINITY;
this.selectedLayoutItems.forEach(item => { this.selectedLayoutItems.forEach(item => {
if (item.x2) { if (item.x2 !== undefined) {
let lineWidth = Math.abs(item.x - item.x2); let lineWidth = Math.abs(item.x - item.x2);
let lineMinX = Math.min(item.x, item.x2); let lineMinX = Math.min(item.x, item.x2);
x = Math.min(lineMinX, x); x = Math.min(lineMinX, x);
@ -126,7 +126,7 @@
width = Math.max(item.width + item.x, width); width = Math.max(item.width + item.x, width);
} }
if (item.y2) { if (item.y2 !== undefined) {
let lineHeight = Math.abs(item.y - item.y2); let lineHeight = Math.abs(item.y - item.y2);
let lineMinY = Math.min(item.y, item.y2); let lineMinY = Math.min(item.y, item.y2);
y = Math.min(lineMinY, y); y = Math.min(lineMinY, y);