mirror of
https://github.com/nasa/openmct.git
synced 2025-06-17 06:38:17 +00:00
Layout drawing (#2232)
* - Show "Add" button in the toolbar when a display layout object is selected. - Add a flag to object view's show() method to indicate immediate selection of the view. If the view implements getSelectionContext() use it, otherwise set to default context. * Create a component for each element. * Saving work * Add element factory for creating new instances of elements. * Mutate element when a new one added and get elements when the component is mounted. * Add create() method for creating a new telemetry and element in their respective view configuration. * Add some of the toolbar controls for box, text, image and line elements. Also, add X, Y, Width and Height controls for alhpanumeric elements. * Pass name to addElement as type. * Add c-frame-inspectable class if item is inspectable. * Clean up * Hide frame for summary widgets by default. * Better styling for editing - s-selected on shell__main-container; - Better edit grid coloring for espresso; * - Update toolbar-button to support dialogs. - Update toolbar to construct a value object based on form keys if a toolbar item has a dialogi, and mutate the form keys. - Add toolbar controls for editing text and url for 'Text' and 'Image' elements respectively. * Editing-related changes - Removed hard-coded .is-selectable and .is-moveable from LayoutItem.vue, updates accordingly to _global.scss; - Theme constants updated; - TODO: apply changes to Flexible Layouts; * Better defaults - Better default grid size and object size; * - Fix toolbar-input to read value as a number if type is 'number'. - Remove rawPosition from view configuration and instead get the position and dimensions from the properties (x, y, width and height) directly. - Set the style property on the view configuration instead of the layout item. - Move the logic for updating the style to the view configuration. * Fix default dimensions for telemetry items and subobjects since the default grid size is changed. * Remove form definition for display layout type. * Reword the comment * Let subobject view configuration handle new panel creation. * Add default grid size back and remove unused code. * Pass in only the needed method. * Define default position in case the object is not added via drag 'n drop.
This commit is contained in:
Pegah Sarram
committed by
Pete Richards
Pete Richards
parent
32a0baa7a3
commit
e07cfc9394
63
src/plugins/displayLayout/components/BoxView.vue
Normal file
63
src/plugins/displayLayout/components/BoxView.vue
Normal file
@ -0,0 +1,63 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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>
|
||||
<div class="c-box-view"
|
||||
:style="styleObject">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~styles/sass-base';
|
||||
|
||||
.c-box-view {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.c-frame & {
|
||||
@include abs();
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object
|
||||
},
|
||||
computed: {
|
||||
styleObject() {
|
||||
let element = this.item.config.element;
|
||||
return {
|
||||
backgroundColor: element.fill,
|
||||
border: '1px solid ' + element.stroke
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.item.config.attachListeners();
|
||||
},
|
||||
destroyed() {
|
||||
this.item.config.removeListeners();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -88,15 +88,9 @@
|
||||
import LayoutItem from './LayoutItem.vue';
|
||||
import TelemetryViewConfiguration from './../TelemetryViewConfiguration.js'
|
||||
import SubobjectViewConfiguration from './../SubobjectViewConfiguration.js'
|
||||
import ElementViewConfiguration from './../ElementViewConfiguration.js'
|
||||
|
||||
const DEFAULT_GRID_SIZE = [32, 32],
|
||||
DEFAULT_DIMENSIONS = [12, 8],
|
||||
DEFAULT_TELEMETRY_DIMENSIONS = [2, 1],
|
||||
DEFAULT_POSITION = [0, 0],
|
||||
MINIMUM_FRAME_SIZE = [320, 180],
|
||||
DEFAULT_HIDDEN_FRAME_TYPES = [
|
||||
'hyperlink'
|
||||
];
|
||||
const DEFAULT_GRID_SIZE = [10, 10];
|
||||
|
||||
export default {
|
||||
data() {
|
||||
@ -119,25 +113,25 @@
|
||||
this.makeTelemetryItem(alphanumeric, false);
|
||||
});
|
||||
},
|
||||
makeFrameItem(panel, initSelect) {
|
||||
let rawPosition = {
|
||||
position: panel.position,
|
||||
dimensions: panel.dimensions
|
||||
};
|
||||
let style = this.convertPosition(rawPosition);
|
||||
getElements() {
|
||||
let elements = this.newDomainObject.configuration.elements || [];
|
||||
elements.forEach((element, index) => {
|
||||
element.index = index;
|
||||
this.makeElementItem(element, false);
|
||||
});
|
||||
},
|
||||
makeSubobjectItem(panel, initSelect) {
|
||||
let id = this.openmct.objects.makeKeyString(panel.domainObject.identifier);
|
||||
let config = new SubobjectViewConfiguration({
|
||||
domainObject: this.newDomainObject,
|
||||
panel: panel,
|
||||
id: id,
|
||||
hasFrame: panel.hasFrame,
|
||||
rawPosition: rawPosition,
|
||||
openmct: openmct
|
||||
openmct: openmct,
|
||||
gridSize: this.gridSize
|
||||
});
|
||||
|
||||
this.layoutItems.push({
|
||||
id: id,
|
||||
domainObject: panel.domainObject,
|
||||
style: style,
|
||||
drilledIn: this.isItemDrilledIn(id),
|
||||
initSelect: initSelect,
|
||||
type: 'subobject-view',
|
||||
@ -145,60 +139,35 @@
|
||||
});
|
||||
},
|
||||
makeTelemetryItem(alphanumeric, initSelect) {
|
||||
let rawPosition = {
|
||||
position: alphanumeric.position,
|
||||
dimensions: alphanumeric.dimensions
|
||||
};
|
||||
let style = this.convertPosition(rawPosition);
|
||||
let id = this.openmct.objects.makeKeyString(alphanumeric.identifier);
|
||||
|
||||
this.openmct.objects.get(id).then(domainObject => {
|
||||
let config = new TelemetryViewConfiguration({
|
||||
domainObject: this.newDomainObject,
|
||||
alphanumeric: alphanumeric,
|
||||
rawPosition: rawPosition,
|
||||
openmct: openmct
|
||||
openmct: openmct,
|
||||
gridSize: this.gridSize
|
||||
});
|
||||
|
||||
this.layoutItems.push({
|
||||
id: id,
|
||||
domainObject: domainObject,
|
||||
style: style,
|
||||
initSelect: initSelect,
|
||||
alphanumeric: alphanumeric,
|
||||
type: 'telemetry-view',
|
||||
config: config
|
||||
});
|
||||
});
|
||||
},
|
||||
getSubobjectDefaultDimensions() {
|
||||
let gridSize = this.gridSize;
|
||||
return MINIMUM_FRAME_SIZE.map(function (min, i) {
|
||||
return Math.max(
|
||||
Math.ceil(min / gridSize[i]),
|
||||
DEFAULT_DIMENSIONS[i]
|
||||
);
|
||||
makeElementItem(element, initSelect) {
|
||||
let config = new ElementViewConfiguration({
|
||||
domainObject: this.newDomainObject,
|
||||
element: element,
|
||||
openmct: openmct,
|
||||
gridSize: this.gridSize
|
||||
});
|
||||
this.layoutItems.push({
|
||||
initSelect: initSelect,
|
||||
type: element.type + '-view',
|
||||
config: config
|
||||
});
|
||||
},
|
||||
convertPosition(raw) {
|
||||
return {
|
||||
left: (this.gridSize[0] * raw.position[0]) + 'px',
|
||||
top: (this.gridSize[1] * raw.position[1]) + 'px',
|
||||
width: (this.gridSize[0] * raw.dimensions[0]) + 'px',
|
||||
height: (this.gridSize[1] * raw.dimensions[1]) + 'px',
|
||||
minWidth: (this.gridSize[0] * raw.dimensions[0]) + 'px',
|
||||
minHeight: (this.gridSize[1] * raw.dimensions[1]) + 'px'
|
||||
};
|
||||
},
|
||||
/**
|
||||
* Checks if the frame should be hidden or not.
|
||||
*
|
||||
* @param type the domain object type
|
||||
* @return {boolean} true if the object should have
|
||||
* frame by default, false, otherwise
|
||||
*/
|
||||
hasFrameByDefault(type) {
|
||||
return DEFAULT_HIDDEN_FRAME_TYPES.indexOf(type) === -1;
|
||||
},
|
||||
setSelection(selection) {
|
||||
if (selection.length === 0) {
|
||||
@ -219,9 +188,8 @@
|
||||
return this.drilledIn === id;
|
||||
},
|
||||
updatePosition(item, newPosition) {
|
||||
let newStyle = this.convertPosition(newPosition);
|
||||
item.config.rawPosition = newPosition;
|
||||
item.style = newStyle;
|
||||
item.config.newPosition = newPosition;
|
||||
item.config.updateStyle(newPosition);
|
||||
},
|
||||
bypassSelection($event) {
|
||||
if (this.dragInProgress) {
|
||||
@ -236,7 +204,7 @@
|
||||
setTimeout(function () {
|
||||
this.dragInProgress = false;
|
||||
}.bind(this), 0);
|
||||
|
||||
// TODO: emit "finishResizing" for view components to mutate position?
|
||||
item.config.mutatePosition();
|
||||
},
|
||||
mutate(path, value) {
|
||||
@ -278,39 +246,12 @@
|
||||
}
|
||||
},
|
||||
addAlphanumeric(domainObject, position) {
|
||||
let alphanumeric = {
|
||||
identifier: domainObject.identifier,
|
||||
position: position,
|
||||
dimensions: DEFAULT_TELEMETRY_DIMENSIONS,
|
||||
displayMode: 'all',
|
||||
value: this.getDefaultTelemetryValue(domainObject),
|
||||
stroke: "transparent",
|
||||
fill: "",
|
||||
color: "",
|
||||
size: "13px",
|
||||
};
|
||||
let alphanumerics = this.newDomainObject.configuration.alphanumerics || [];
|
||||
let alphanumeric = TelemetryViewConfiguration.create(domainObject, position, this.openmct);
|
||||
alphanumeric.index = alphanumerics.push(alphanumeric) - 1;
|
||||
|
||||
this.mutate("configuration.alphanumerics", alphanumerics);
|
||||
this.makeTelemetryItem(alphanumeric, true);
|
||||
},
|
||||
getDefaultTelemetryValue(domainObject) {
|
||||
let metadata = this.openmct.telemetry.getMetadata(domainObject);
|
||||
let valueMetadata = metadata.valuesForHints(['range'])[0];
|
||||
|
||||
if (valueMetadata === undefined) {
|
||||
valueMetadata = metadata.values().filter(values => {
|
||||
return !(values.hints.domain);
|
||||
})[0];
|
||||
}
|
||||
|
||||
if (valueMetadata === undefined) {
|
||||
valueMetadata = metadata.values()[0];
|
||||
}
|
||||
|
||||
return valueMetadata.key;
|
||||
},
|
||||
handleDragOver($event){
|
||||
$event.preventDefault();
|
||||
},
|
||||
@ -322,7 +263,7 @@
|
||||
return false;
|
||||
}
|
||||
},
|
||||
addObject(domainObject) {
|
||||
addSubobject(domainObject) {
|
||||
if (!this.isTelemetry(domainObject)) {
|
||||
let panels = this.newDomainObject.configuration.panels,
|
||||
id = this.openmct.objects.makeKeyString(domainObject.identifier),
|
||||
@ -330,35 +271,29 @@
|
||||
mutateObject = false,
|
||||
initSelect = false;
|
||||
|
||||
// If this is a new panel, select it and save the configuration.
|
||||
// If the panel doesn't exist, create one and mutate the configuration
|
||||
if (!panel) {
|
||||
panel = {};
|
||||
mutateObject = true;
|
||||
panel = SubobjectViewConfiguration.create(domainObject, this.gridSize, this.droppedObjectPosition);
|
||||
initSelect = true;
|
||||
}
|
||||
|
||||
panel.dimensions = panel.dimensions || this.getSubobjectDefaultDimensions();
|
||||
panel.hasFrame = panel.hasOwnProperty('hasFrame') ?
|
||||
panel.hasFrame :
|
||||
this.hasFrameByDefault(domainObject.type);
|
||||
|
||||
if (this.droppedObjectPosition) {
|
||||
panel.position = this.droppedObjectPosition;
|
||||
this.droppedObjectPosition = undefined;
|
||||
} else {
|
||||
panel.position = panel.position || DEFAULT_POSITION;
|
||||
}
|
||||
|
||||
if (mutateObject) {
|
||||
this.mutate("configuration.panels[" + id + "]", panel);
|
||||
delete this.droppedObjectPosition;
|
||||
}
|
||||
|
||||
panel.domainObject = domainObject;
|
||||
this.makeFrameItem(panel, initSelect);
|
||||
this.makeSubobjectItem(panel, initSelect);
|
||||
}
|
||||
},
|
||||
removeObject() {
|
||||
|
||||
removeSubobject() {
|
||||
// Not yet implemented
|
||||
},
|
||||
addElement(type) {
|
||||
let elements = this.newDomainObject.configuration.elements || [];
|
||||
Promise.resolve(ElementViewConfiguration.create(type, this.openmct))
|
||||
.then(element => {
|
||||
element.index = elements.push(element) - 1;
|
||||
this.mutate("configuration.elements", elements);
|
||||
this.makeElementItem(element, true);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
@ -373,15 +308,16 @@
|
||||
this.openmct.selection.on('change', this.setSelection);
|
||||
|
||||
this.composition = this.openmct.composition.get(this.newDomainObject);
|
||||
this.composition.on('add', this.addObject);
|
||||
this.composition.on('remove', this.removeObject);
|
||||
this.composition.on('add', this.addSubobject);
|
||||
this.composition.on('remove', this.removeSubobject);
|
||||
this.composition.load();
|
||||
this.getAlphanumerics();
|
||||
this.getElements();
|
||||
},
|
||||
destroyed: function () {
|
||||
this.openmct.off('change', this.setSelection);
|
||||
this.composition.off('add', this.addObject);
|
||||
this.composition.off('remove', this.removeObject);
|
||||
this.composition.off('add', this.addSubobject);
|
||||
this.composition.off('remove', this.removeSubobject);
|
||||
this.unlisten();
|
||||
}
|
||||
}
|
||||
|
||||
65
src/plugins/displayLayout/components/ImageView.vue
Normal file
65
src/plugins/displayLayout/components/ImageView.vue
Normal file
@ -0,0 +1,65 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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>
|
||||
<div class="c-image-view"
|
||||
:style="styleObject">
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~styles/sass-base';
|
||||
|
||||
.c-image-view {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
|
||||
.c-frame & {
|
||||
@include abs();
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object
|
||||
},
|
||||
computed: {
|
||||
styleObject() {
|
||||
let element = this.item.config.element;
|
||||
return {
|
||||
backgroundImage: 'url(' + element.url + ')',
|
||||
border: '1px solid ' + element.stroke
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.item.config.attachListeners();
|
||||
},
|
||||
destroyed() {
|
||||
this.item.config.removeListeners();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -21,12 +21,14 @@
|
||||
*****************************************************************************/
|
||||
|
||||
<template>
|
||||
<div class="c-frame has-local-controls is-selectable is-moveable"
|
||||
:style="item.style"
|
||||
:class="classObject"
|
||||
<div class="c-frame has-local-controls"
|
||||
:style="item.config.style"
|
||||
:class="[classObject, {
|
||||
'u-inspectable': item.config.inspectable()
|
||||
}]"
|
||||
@dblclick="drill(item.id, $event)">
|
||||
|
||||
<component :is="item.type" :item="item"></component>
|
||||
<component :is="item.type" :item="item" :gridSize="gridSize"></component>
|
||||
|
||||
<!-- Drag handles -->
|
||||
<div class="c-frame-edit">
|
||||
@ -72,6 +74,10 @@
|
||||
<script>
|
||||
import SubobjectView from './SubobjectView.vue'
|
||||
import TelemetryView from './TelemetryView.vue'
|
||||
import BoxView from './BoxView.vue'
|
||||
import TextView from './TextView.vue'
|
||||
import LineView from './LineView.vue'
|
||||
import ImageView from './ImageView.vue'
|
||||
import LayoutDrag from './../LayoutDrag'
|
||||
|
||||
export default {
|
||||
@ -82,13 +88,17 @@
|
||||
},
|
||||
components: {
|
||||
SubobjectView,
|
||||
TelemetryView
|
||||
TelemetryView,
|
||||
BoxView,
|
||||
TextView,
|
||||
LineView,
|
||||
ImageView
|
||||
},
|
||||
computed: {
|
||||
classObject: function () {
|
||||
return {
|
||||
'is-drilled-in': this.item.drilledIn,
|
||||
'no-frame': !this.item.config.hasFrame
|
||||
'no-frame': !this.item.config.hasFrame()
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -102,6 +112,10 @@
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.item.domainObject) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.openmct.composition.get(this.item.domainObject) === undefined) {
|
||||
return;
|
||||
}
|
||||
@ -126,7 +140,7 @@
|
||||
|
||||
this.updatePosition(event);
|
||||
this.activeDrag = new LayoutDrag(
|
||||
this.item.config.rawPosition,
|
||||
this.item.config.position(),
|
||||
posFactor,
|
||||
dimFactor,
|
||||
this.gridSize
|
||||
@ -157,7 +171,8 @@
|
||||
mounted() {
|
||||
let context = {
|
||||
item: this.item.domainObject,
|
||||
layoutItem: this.item
|
||||
layoutItem: this.item,
|
||||
addElement: this.$parent.addElement
|
||||
};
|
||||
|
||||
this.removeSelectable = this.openmct.selection.selectable(
|
||||
|
||||
56
src/plugins/displayLayout/components/LineView.vue
Normal file
56
src/plugins/displayLayout/components/LineView.vue
Normal file
@ -0,0 +1,56 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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>
|
||||
<div>
|
||||
<svg :width="gridSize[0] * element.width"
|
||||
:height=" gridSize[1] * element.height">
|
||||
<line :x1=" gridSize[0] * element.x1 + 1"
|
||||
:y1="gridSize[1] * element.y1 + 1 "
|
||||
:x2="gridSize[0] * element.x2 + 1"
|
||||
:y2=" gridSize[1] * element.y2 + 1 "
|
||||
:stroke="element.stroke"
|
||||
stroke-width="2">
|
||||
</line>
|
||||
</svg>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object,
|
||||
gridSize: Array
|
||||
},
|
||||
computed: {
|
||||
element() {
|
||||
return this.item.config.element;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.item.config.attachListeners();
|
||||
},
|
||||
destroyed() {
|
||||
this.item.config.removeListeners();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
67
src/plugins/displayLayout/components/TextView.vue
Normal file
67
src/plugins/displayLayout/components/TextView.vue
Normal file
@ -0,0 +1,67 @@
|
||||
/*****************************************************************************
|
||||
* Open MCT, Copyright (c) 2014-2018, 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>
|
||||
<div class="c-text-view"
|
||||
:style="styleObject">
|
||||
{{ item.config.element.text }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '~styles/sass-base';
|
||||
|
||||
.c-text-view {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
|
||||
.c-frame & {
|
||||
@include abs();
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
item: Object
|
||||
},
|
||||
computed: {
|
||||
styleObject() {
|
||||
let element = this.item.config.element;
|
||||
return {
|
||||
backgroundColor: element.fill,
|
||||
borderColor: element.stroke,
|
||||
color: element.color,
|
||||
fontSize: element.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.item.config.attachListeners();
|
||||
},
|
||||
destroyed() {
|
||||
this.item.config.removeListeners();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user