mirror of
https://github.com/nasa/openmct.git
synced 2025-06-18 15:18:12 +00:00
Add new Ellipse drawing object in Display Layouts (#4153)
* Add new ellipse drawing object to Display Layouts - Fix test and linting issues; Co-authored-by: Shefali Joshi <simplyrender@gmail.com>
This commit is contained in:
Charles Hacskaylo
committed by
GitHub
GitHub
parent
40055ba955
commit
9461ad8edd
@ -141,6 +141,7 @@ const NON_STYLEABLE_CONTAINER_TYPES = [
|
||||
const NON_STYLEABLE_LAYOUT_ITEM_TYPES = [
|
||||
'line-view',
|
||||
'box-view',
|
||||
'ellipse-view',
|
||||
'image-view'
|
||||
];
|
||||
|
||||
|
||||
@ -230,7 +230,7 @@ describe('the plugin', function () {
|
||||
};
|
||||
const staticStyle = {
|
||||
"style": {
|
||||
"backgroundColor": "#717171",
|
||||
"backgroundColor": "#666666",
|
||||
"border": "1px solid #00ffff"
|
||||
}
|
||||
};
|
||||
@ -238,7 +238,7 @@ describe('the plugin', function () {
|
||||
"conditionId": "39584410-cbf9-499e-96dc-76f27e69885d",
|
||||
"style": {
|
||||
"isStyleInvisible": "",
|
||||
"backgroundColor": "#717171",
|
||||
"backgroundColor": "#666666",
|
||||
"border": "1px solid #ffff00"
|
||||
}
|
||||
};
|
||||
@ -250,7 +250,7 @@ describe('the plugin', function () {
|
||||
"configuration": {
|
||||
"items": [
|
||||
{
|
||||
"fill": "#717171",
|
||||
"fill": "#666666",
|
||||
"stroke": "",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
@ -259,12 +259,22 @@ describe('the plugin', function () {
|
||||
"type": "box-view",
|
||||
"id": "89b88746-d325-487b-aec4-11b79afff9e8"
|
||||
},
|
||||
{
|
||||
"fill": "#666666",
|
||||
"stroke": "",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
"width": 10,
|
||||
"height": 5,
|
||||
"type": "ellipse-view",
|
||||
"id": "19b88746-d325-487b-aec4-11b79afff9z8"
|
||||
},
|
||||
{
|
||||
"x": 18,
|
||||
"y": 9,
|
||||
"x2": 23,
|
||||
"y2": 4,
|
||||
"stroke": "#717171",
|
||||
"stroke": "#666666",
|
||||
"type": "line-view",
|
||||
"id": "57d49a28-7863-43bd-9593-6570758916f0"
|
||||
},
|
||||
@ -299,12 +309,12 @@ describe('the plugin', function () {
|
||||
"y": 9,
|
||||
"x2": 23,
|
||||
"y2": 4,
|
||||
"stroke": "#717171",
|
||||
"stroke": "#666666",
|
||||
"type": "line-view",
|
||||
"id": "57d49a28-7863-43bd-9593-6570758916f0"
|
||||
};
|
||||
boxLayoutItem = {
|
||||
"fill": "#717171",
|
||||
"fill": "#666666",
|
||||
"stroke": "",
|
||||
"x": 1,
|
||||
"y": 1,
|
||||
|
||||
@ -29,9 +29,10 @@ const styleProps = {
|
||||
noneValue: NONE_VALUE,
|
||||
applicableForType: type => {
|
||||
return !type ? true : (type === 'text-view'
|
||||
|| type === 'telemetry-view'
|
||||
|| type === 'box-view'
|
||||
|| type === 'subobject-view');
|
||||
|| type === 'telemetry-view'
|
||||
|| type === 'box-view'
|
||||
|| type === 'ellipse-view'
|
||||
|| type === 'subobject-view');
|
||||
}
|
||||
},
|
||||
border: {
|
||||
@ -41,6 +42,7 @@ const styleProps = {
|
||||
return !type ? true : (type === 'text-view'
|
||||
|| type === 'telemetry-view'
|
||||
|| type === 'box-view'
|
||||
|| type === 'ellipse-view'
|
||||
|| type === 'image-view'
|
||||
|| type === 'line-view'
|
||||
|| type === 'subobject-view');
|
||||
|
||||
@ -149,6 +149,7 @@ define(['lodash'], function (_) {
|
||||
return type === 'text-view'
|
||||
|| type === 'telemetry-view'
|
||||
|| type === 'box-view'
|
||||
|| type === 'ellipse-view'
|
||||
|| type === 'image-view'
|
||||
|| type === 'line-view'
|
||||
|| type === 'subobject-view';
|
||||
@ -180,6 +181,10 @@ define(['lodash'], function (_) {
|
||||
"name": "Box",
|
||||
"class": "icon-box-round-corners"
|
||||
},
|
||||
{
|
||||
"name": "Ellipse",
|
||||
"class": "icon-circle"
|
||||
},
|
||||
{
|
||||
"name": "Line",
|
||||
"class": "icon-line-horz"
|
||||
@ -745,7 +750,7 @@ define(['lodash'], function (_) {
|
||||
if (toolbar.remove.length === 0) {
|
||||
toolbar.remove = [getRemoveButton(selectedParent, selectionPath, selectedObjects)];
|
||||
}
|
||||
} else if (layoutItem.type === 'box-view') {
|
||||
} else if (layoutItem.type === 'box-view' || layoutItem.type === 'ellipse-view') {
|
||||
if (toolbar.position.length === 0) {
|
||||
toolbar.position = [
|
||||
getStackOrder(selectedParent, selectionPath),
|
||||
|
||||
@ -43,7 +43,7 @@ import conditionalStylesMixin from '../mixins/objectStyles-mixin';
|
||||
export default {
|
||||
makeDefinition() {
|
||||
return {
|
||||
fill: '#717171',
|
||||
fill: '#666666',
|
||||
stroke: '',
|
||||
x: 1,
|
||||
y: 1,
|
||||
|
||||
@ -76,6 +76,7 @@ import uuid from 'uuid';
|
||||
import SubobjectView from './SubobjectView.vue';
|
||||
import TelemetryView from './TelemetryView.vue';
|
||||
import BoxView from './BoxView.vue';
|
||||
import EllipseView from './EllipseView.vue';
|
||||
import TextView from './TextView.vue';
|
||||
import LineView from './LineView.vue';
|
||||
import ImageView from './ImageView.vue';
|
||||
@ -112,6 +113,7 @@ const ITEM_TYPE_VIEW_MAP = {
|
||||
'subobject-view': SubobjectView,
|
||||
'telemetry-view': TelemetryView,
|
||||
'box-view': BoxView,
|
||||
'ellipse-view': EllipseView,
|
||||
'line-view': LineView,
|
||||
'text-view': TextView,
|
||||
'image-view': ImageView
|
||||
|
||||
122
src/plugins/displayLayout/components/EllipseView.vue
Normal file
122
src/plugins/displayLayout/components/EllipseView.vue
Normal file
@ -0,0 +1,122 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2021, United States Government
|
||||
* as represented by the Administrator of the National Aeronautics and Space
|
||||
* Administration. All rights reserved.
|
||||
*
|
||||
* Open MCT is licensed under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0.
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||
* License for the specific language governing permissions and limitations
|
||||
* under the License.
|
||||
*
|
||||
* Open MCT includes source code licensed under additional open source
|
||||
* licenses. See the Open Source Licenses file (LICENSES.md) included with
|
||||
* this source code distribution or the Licensing information page available
|
||||
* at runtime from the About dialog for additional information.
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<layout-frame
|
||||
:item="item"
|
||||
:grid-size="gridSize"
|
||||
:is-editing="isEditing"
|
||||
@move="(gridDelta) => $emit('move', gridDelta)"
|
||||
@endMove="() => $emit('endMove')"
|
||||
>
|
||||
<div
|
||||
class="c-ellipse-view u-style-receiver js-style-receiver"
|
||||
:class="[styleClass]"
|
||||
:style="style"
|
||||
></div>
|
||||
</layout-frame>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import LayoutFrame from './LayoutFrame.vue';
|
||||
import conditionalStylesMixin from '../mixins/objectStyles-mixin';
|
||||
|
||||
export default {
|
||||
makeDefinition() {
|
||||
return {
|
||||
fill: '#666666',
|
||||
stroke: '',
|
||||
x: 1,
|
||||
y: 1,
|
||||
width: 10,
|
||||
height: 10
|
||||
};
|
||||
},
|
||||
components: {
|
||||
LayoutFrame
|
||||
},
|
||||
mixins: [conditionalStylesMixin],
|
||||
inject: ['openmct'],
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
gridSize: {
|
||||
type: Array,
|
||||
required: true,
|
||||
validator: (arr) => arr && arr.length === 2
|
||||
&& arr.every(el => typeof el === 'number')
|
||||
},
|
||||
index: {
|
||||
type: Number,
|
||||
required: true
|
||||
},
|
||||
initSelect: Boolean,
|
||||
isEditing: {
|
||||
type: Boolean,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
style() {
|
||||
if (this.itemStyle) {
|
||||
return this.itemStyle;
|
||||
} else {
|
||||
return {
|
||||
backgroundColor: this.item.fill,
|
||||
border: this.item.stroke ? '1px solid ' + this.item.stroke : ''
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
index(newIndex) {
|
||||
if (!this.context) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.context.index = newIndex;
|
||||
},
|
||||
item(newItem) {
|
||||
if (!this.context) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.context.layoutItem = newItem;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.context = {
|
||||
layoutItem: this.item,
|
||||
index: this.index
|
||||
};
|
||||
this.removeSelectable = this.openmct.selection.selectable(
|
||||
this.$el, this.context, this.initSelect);
|
||||
},
|
||||
destroyed() {
|
||||
if (this.removeSelectable) {
|
||||
this.removeSelectable();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
y: 10,
|
||||
x2: 10,
|
||||
y2: 5,
|
||||
stroke: '#717171'
|
||||
stroke: '#666666'
|
||||
};
|
||||
},
|
||||
mixins: [conditionalStylesMixin],
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
.c-box-view {
|
||||
.c-box-view,
|
||||
.c-ellipse-view {
|
||||
border-width: $drawingObjBorderW !important;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
@ -8,6 +9,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
.c-ellipse-view {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.c-line-view {
|
||||
&.c-frame {
|
||||
box-shadow: none !important;
|
||||
|
||||
@ -186,7 +186,7 @@ describe('the plugin', function () {
|
||||
'configuration': {
|
||||
'items': [
|
||||
{
|
||||
'fill': '#717171',
|
||||
'fill': '#666666',
|
||||
'stroke': '',
|
||||
'x': 1,
|
||||
'y': 1,
|
||||
@ -195,12 +195,22 @@ describe('the plugin', function () {
|
||||
'type': 'box-view',
|
||||
'id': '89b88746-d325-487b-aec4-11b79afff9e8'
|
||||
},
|
||||
{
|
||||
'fill': '#666666',
|
||||
'stroke': '',
|
||||
'x': 1,
|
||||
'y': 1,
|
||||
'width': 10,
|
||||
'height': 10,
|
||||
'type': 'ellipse-view',
|
||||
'id': '19b88746-d325-487b-aec4-11b79afff9z8'
|
||||
},
|
||||
{
|
||||
'x': 18,
|
||||
'y': 9,
|
||||
'x2': 23,
|
||||
'y2': 4,
|
||||
'stroke': '#717171',
|
||||
'stroke': '#666666',
|
||||
'type': 'line-view',
|
||||
'id': '57d49a28-7863-43bd-9593-6570758916f0'
|
||||
},
|
||||
@ -341,7 +351,7 @@ describe('the plugin', function () {
|
||||
it('provides controls including separators', () => {
|
||||
const displayLayoutToolbar = openmct.toolbars.get(selection);
|
||||
|
||||
expect(displayLayoutToolbar.length).toBe(9);
|
||||
expect(displayLayoutToolbar.length).toBe(7);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user