ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-06-06 17:31:40 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[Display Layout] Snap to grid toolbar toggle button (#2262)

Browse Source 
* Add a  button in the toolbar to toggle snapp to grid.

* Convert item's coordinates and size from grid unit to pixels depending on useGrid value.

* Rename selectionListener to removeSelectionListener
This commit is contained in:
Pegah Sarram 2019-01-17 09:24:59 -08:00 committed by Pete Richards
parent 6b1e8862ef
commit 931871ff95
8 changed files with 83 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/plugins/displayLayout/DisplayLayoutToolbar.js
View File

@ -154,6 +154,23 @@ define([], function () {
}); });
} }
}; };
let useGrid = {
control: "toggle-button",
domainObject: selectedParent,
property: path + ".useGrid",
options: [
{
value: false,
icon: "icon-grid-snap-no",
title: "Do not snap to grid"
},
{
value: true,
icon: "icon-grid-snap-to",
title: "Snap to grid"
}
]
};
if (layoutItem.type === 'subobject-view') { if (layoutItem.type === 'subobject-view') {
if (toolbar.length > 0) { if (toolbar.length > 0) {
@ -177,6 +194,7 @@ define([], function () {
} }
] ]
}); });
toolbar.push(useGrid);
toolbar.push(separator); toolbar.push(separator);
toolbar.push(remove); toolbar.push(remove);
} else { } else {
@ -297,6 +315,8 @@ define([], function () {
height, height,
width, width,
separator, separator,
useGrid,
separator,
remove remove
]; ];
} else if (layoutItem.type === 'text-view' ) { } else if (layoutItem.type === 'text-view' ) {
@ -321,6 +341,7 @@ define([], function () {
width, width,
separator, separator,
text, text,
useGrid,
separator, separator,
remove remove
]; ];
@ -334,6 +355,8 @@ define([], function () {
height, height,
width, width,
separator, separator,
useGrid,
separator,
remove remove
]; ];
} else if (layoutItem.type === 'image-view') { } else if (layoutItem.type === 'image-view') {
@ -354,6 +377,7 @@ define([], function () {
width, width,
separator, separator,
url, url,
useGrid,
separator, separator,
remove remove
]; ];
@ -382,6 +406,8 @@ define([], function () {
x2, x2,
y2, y2,
separator, separator,
useGrid,
separator,
remove remove
]; ];
} }

3
src/plugins/displayLayout/components/BoxView.vue
View File

@ -54,7 +54,8 @@
x: 1, x: 1,
y: 1, y: 1,
width: 10, width: 10,
height: 5 height: 5,
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],

48
src/plugins/displayLayout/components/DisplayLayout.vue
View File

@ -41,7 +41,7 @@
:is="item.type" :is="item.type"
:item="item" :item="item"
:key="item.id" :key="item.id"
:gridSize="gridSize" :gridSize="item.useGrid ? gridSize : [1, 1]"
:initSelect="initSelectIndex === index" :initSelect="initSelectIndex === index"
:index="index" :index="index"
@drilledIn="updateDrilledIn" @drilledIn="updateDrilledIn"
@ -144,6 +144,47 @@
return; return;
} }
if (this.removeSelectionListener) {
this.removeSelectionListener();
}
let itemIndex = selection[0].context.index;
if (itemIndex !== undefined) {
let path = `configuration.items[${itemIndex}]`;
this.removeSelectionListener = this.openmct.objects.observe(this.internalDomainObject, path + ".useGrid", function (value) {
let item = this.layoutItems[itemIndex];
if (value) {
item.x = Math.round(item.x / this.gridSize[0]);
item.y = Math.round(item.y / this.gridSize[1]);
item.width = Math.round(item.width / this.gridSize[0]);
item.height = Math.round(item.height / this.gridSize[1]);
if (item.x2) {
item.x2 = Math.round(item.x2 / this.gridSize[0]);
}
if (item.y2) {
item.y2 = Math.round(item.y2 / this.gridSize[1]);
}
} else {
item.x = this.gridSize[0] * item.x;
item.y = this.gridSize[1] * item.y;
item.width = this.gridSize[0] * item.width;
item.height = this.gridSize[1] * item.height;
if (item.x2) {
item.x2 = this.gridSize[0] * item.x2;
}
if (item.y2) {
item.y2 = this.gridSize[1] * item.y2;
}
}
item.useGrid = value;
this.mutate(`configuration.items[${itemIndex}]`, item);
}.bind(this));
}
this.updateDrilledIn(); this.updateDrilledIn();
}, },
updateDrilledIn(drilledInItem) { updateDrilledIn(drilledInItem) {
@ -317,7 +358,6 @@
this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) { this.unlisten = this.openmct.objects.observe(this.internalDomainObject, '*', function (obj) {
this.internalDomainObject = JSON.parse(JSON.stringify(obj)); this.internalDomainObject = JSON.parse(JSON.stringify(obj));
}.bind(this)); }.bind(this));
this.openmct.selection.on('change', this.setSelection); this.openmct.selection.on('change', this.setSelection);
this.initializeItems(); this.initializeItems();
this.composition = this.openmct.composition.get(this.internalDomainObject); this.composition = this.openmct.composition.get(this.internalDomainObject);
@ -330,6 +370,10 @@
this.composition.off('add', this.addChild); this.composition.off('add', this.addChild);
this.composition.off('remove', this.removeChild); this.composition.off('remove', this.removeChild);
this.unlisten(); this.unlisten();
if (this.removeSelectionListener) {
this.removeSelectionListener();
}
} }
} }

3
src/plugins/displayLayout/components/ImageView.vue
View File

@ -56,7 +56,8 @@
y: 1, y: 1,
width: 10, width: 10,
height: 5, height: 5,
url: element.url url: element.url,
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],

3
src/plugins/displayLayout/components/LineView.vue
View File

@ -66,7 +66,8 @@
y: 10, y: 10,
x2: 10, x2: 10,
y2: 5, y2: 5,
stroke: '#717171' stroke: '#717171',
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],

3
src/plugins/displayLayout/components/SubobjectView.vue
View File

@ -65,7 +65,8 @@
x: position[0], x: position[0],
y: position[1], y: position[1],
identifier: domainObject.identifier, identifier: domainObject.identifier,
hasFrame: hasFrameByDefault(domainObject.type) hasFrame: hasFrameByDefault(domainObject.type),
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],

1
src/plugins/displayLayout/components/TelemetryView.vue
View File

@ -99,6 +99,7 @@
fill: "", fill: "",
color: "", color: "",
size: "13px", size: "13px",
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],

3
src/plugins/displayLayout/components/TextView.vue
View File

@ -59,7 +59,8 @@
y: 1, y: 1,
width: 10, width: 10,
height: 5, height: 5,
text: element.text text: element.text,
useGrid: true
}; };
}, },
inject: ['openmct'], inject: ['openmct'],