From 931871ff9543182a8f8e3b2e7f149b79d9a5de24 Mon Sep 17 00:00:00 2001 From: Pegah Sarram Date: Thu, 17 Jan 2019 09:24:59 -0800 Subject: [PATCH] [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 --- .../displayLayout/DisplayLayoutToolbar.js | 26 ++++++++++ .../displayLayout/components/BoxView.vue | 3 +- .../components/DisplayLayout.vue | 48 ++++++++++++++++++- .../displayLayout/components/ImageView.vue | 3 +- .../displayLayout/components/LineView.vue | 3 +- .../components/SubobjectView.vue | 3 +- .../components/TelemetryView.vue | 1 + .../displayLayout/components/TextView.vue | 3 +- 8 files changed, 83 insertions(+), 7 deletions(-) diff --git a/src/plugins/displayLayout/DisplayLayoutToolbar.js b/src/plugins/displayLayout/DisplayLayoutToolbar.js index e889de072d..84fa2af0c9 100644 --- a/src/plugins/displayLayout/DisplayLayoutToolbar.js +++ b/src/plugins/displayLayout/DisplayLayoutToolbar.js @@ -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 ]; } diff --git a/src/plugins/displayLayout/components/BoxView.vue b/src/plugins/displayLayout/components/BoxView.vue index 0aeace04c6..f51869715c 100644 --- a/src/plugins/displayLayout/components/BoxView.vue +++ b/src/plugins/displayLayout/components/BoxView.vue @@ -54,7 +54,8 @@ x: 1, y: 1, width: 10, - height: 5 + height: 5, + useGrid: true }; }, inject: ['openmct'], diff --git a/src/plugins/displayLayout/components/DisplayLayout.vue b/src/plugins/displayLayout/components/DisplayLayout.vue index 7624ab358b..76a9fb6199 100644 --- a/src/plugins/displayLayout/components/DisplayLayout.vue +++ b/src/plugins/displayLayout/components/DisplayLayout.vue @@ -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(); + } } } diff --git a/src/plugins/displayLayout/components/ImageView.vue b/src/plugins/displayLayout/components/ImageView.vue index 0288e0cc3c..d4bba71912 100644 --- a/src/plugins/displayLayout/components/ImageView.vue +++ b/src/plugins/displayLayout/components/ImageView.vue @@ -56,7 +56,8 @@ y: 1, width: 10, height: 5, - url: element.url + url: element.url, + useGrid: true }; }, inject: ['openmct'], diff --git a/src/plugins/displayLayout/components/LineView.vue b/src/plugins/displayLayout/components/LineView.vue index 920bb1ed62..db302c2790 100644 --- a/src/plugins/displayLayout/components/LineView.vue +++ b/src/plugins/displayLayout/components/LineView.vue @@ -66,7 +66,8 @@ y: 10, x2: 10, y2: 5, - stroke: '#717171' + stroke: '#717171', + useGrid: true }; }, inject: ['openmct'], diff --git a/src/plugins/displayLayout/components/SubobjectView.vue b/src/plugins/displayLayout/components/SubobjectView.vue index 1c2d9557f4..5a9df42b89 100644 --- a/src/plugins/displayLayout/components/SubobjectView.vue +++ b/src/plugins/displayLayout/components/SubobjectView.vue @@ -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'], diff --git a/src/plugins/displayLayout/components/TelemetryView.vue b/src/plugins/displayLayout/components/TelemetryView.vue index 359ee7967a..c6e388215d 100644 --- a/src/plugins/displayLayout/components/TelemetryView.vue +++ b/src/plugins/displayLayout/components/TelemetryView.vue @@ -99,6 +99,7 @@ fill: "", color: "", size: "13px", + useGrid: true }; }, inject: ['openmct'], diff --git a/src/plugins/displayLayout/components/TextView.vue b/src/plugins/displayLayout/components/TextView.vue index d1c69ecfeb..d832e6d14f 100644 --- a/src/plugins/displayLayout/components/TextView.vue +++ b/src/plugins/displayLayout/components/TextView.vue @@ -59,7 +59,8 @@ y: 1, width: 10, height: 5, - text: element.text + text: element.text, + useGrid: true }; }, inject: ['openmct'],