mirror of
https://github.com/nasa/openmct.git
synced 2025-03-23 04:25:27 +00:00
[Display Layout] Snap to grid toolbar toggle button (#2262)
* 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
Pete Richards
parent
6b1e8862ef
commit
931871ff95
@ -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 (toolbar.length > 0) {
|
||||
@ -177,6 +194,7 @@ define([], function () {
|
||||
}
|
||||
]
|
||||
});
|
||||
toolbar.push(useGrid);
|
||||
toolbar.push(separator);
|
||||
toolbar.push(remove);
|
||||
} else {
|
||||
@ -297,6 +315,8 @@ define([], function () {
|
||||
height,
|
||||
width,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
} else if (layoutItem.type === 'text-view' ) {
|
||||
@ -321,6 +341,7 @@ define([], function () {
|
||||
width,
|
||||
separator,
|
||||
text,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
@ -334,6 +355,8 @@ define([], function () {
|
||||
height,
|
||||
width,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
} else if (layoutItem.type === 'image-view') {
|
||||
@ -354,6 +377,7 @@ define([], function () {
|
||||
width,
|
||||
separator,
|
||||
url,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
@ -382,6 +406,8 @@ define([], function () {
|
||||
x2,
|
||||
y2,
|
||||
separator,
|
||||
useGrid,
|
||||
separator,
|
||||
remove
|
||||
];
|
||||
}
|
||||
|
||||
@ -54,7 +54,8 @@
|
||||
x: 1,
|
||||
y: 1,
|
||||
width: 10,
|
||||
height: 5
|
||||
height: 5,
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
:is="item.type"
|
||||
:item="item"
|
||||
:key="item.id"
|
||||
:gridSize="gridSize"
|
||||
:gridSize="item.useGrid ? gridSize : [1, 1]"
|
||||
:initSelect="initSelectIndex === index"
|
||||
:index="index"
|
||||
@drilledIn="updateDrilledIn"
|
||||
@ -144,6 +144,47 @@
|
||||
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();
|
||||
},
|
||||
updateDrilledIn(drilledInItem) {
|
||||
@ -317,7 +358,6 @@
|
||||
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);
|
||||
@ -330,6 +370,10 @@
|
||||
this.composition.off('add', this.addChild);
|
||||
this.composition.off('remove', this.removeChild);
|
||||
this.unlisten();
|
||||
|
||||
if (this.removeSelectionListener) {
|
||||
this.removeSelectionListener();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -56,7 +56,8 @@
|
||||
y: 1,
|
||||
width: 10,
|
||||
height: 5,
|
||||
url: element.url
|
||||
url: element.url,
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
@ -66,7 +66,8 @@
|
||||
y: 10,
|
||||
x2: 10,
|
||||
y2: 5,
|
||||
stroke: '#717171'
|
||||
stroke: '#717171',
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
@ -65,7 +65,8 @@
|
||||
x: position[0],
|
||||
y: position[1],
|
||||
identifier: domainObject.identifier,
|
||||
hasFrame: hasFrameByDefault(domainObject.type)
|
||||
hasFrame: hasFrameByDefault(domainObject.type),
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
@ -99,6 +99,7 @@
|
||||
fill: "",
|
||||
color: "",
|
||||
size: "13px",
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
@ -59,7 +59,8 @@
|
||||
y: 1,
|
||||
width: 10,
|
||||
height: 5,
|
||||
text: element.text
|
||||
text: element.text,
|
||||
useGrid: true
|
||||
};
|
||||
},
|
||||
inject: ['openmct'],
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user