From d644854e1f328600721cbb59146a9636a779e50c Mon Sep 17 00:00:00 2001 From: irismarie Date: Tue, 1 Sep 2020 16:56:33 +0200 Subject: [PATCH] display line widget properly, fixes #206 --- src/styles/widgets.css | 13 +---- src/widget/editable-widget-container.js | 62 ++++++++++++++++---- src/widget/widget-factory.js | 5 +- src/widget/widgets/line.js | 78 +++++++++++++++++++++---- 4 files changed, 123 insertions(+), 35 deletions(-) diff --git a/src/styles/widgets.css b/src/styles/widgets.css index 78996ab..7919fe3 100644 --- a/src/styles/widgets.css +++ b/src/styles/widgets.css @@ -394,15 +394,4 @@ div[class*="-widget"] label { height: 100%; border: 2px solid lightgray; } -/* End box widget */ - -/* Begin line widget */ -.line-widget { - width: 100%; - height: 1%; - border: 2px solid red; - transform: rotate(0deg); -} - - -/* End line widget */ +/* End box widget */ \ No newline at end of file diff --git a/src/widget/editable-widget-container.js b/src/widget/editable-widget-container.js index 91f691d..b5fb964 100644 --- a/src/widget/editable-widget-container.js +++ b/src/widget/editable-widget-container.js @@ -47,7 +47,7 @@ class EditableWidgetContainer extends React.Component { if (widget.x !== data.x || widget.y !== data.y) { - this.rnd.updatePosition({ x: widget.x, y: widget.y}); + this.rnd.updatePosition({ x: widget.x, y: widget.y }); } if (this.props.onWidgetChange != null) { @@ -55,7 +55,7 @@ class EditableWidgetContainer extends React.Component { } }; - resizeStop = (event, direction, ref,delta, position) => { + resizeStop = (event, direction, ref, delta, position) => { const widget = this.props.widget; // resize depends on direction @@ -73,19 +73,40 @@ class EditableWidgetContainer extends React.Component { if (this.props.onWidgetChange != null) { this.props.onWidgetChange(widget, this.props.index); } + + /* hand over new dimensions to child element so that the rotation is displayed correctly + * already before the dashboard changes are saved + */ + if (this.props.widget.type === 'Line') { + this.refs.child0.illustrateDuringEdit(widget.width, widget.height); + } }; render() { const widget = this.props.widget; + let isLine = false; + let children = null; + + // clone WidgetLine child element so that it can be referenced while resizing + if (widget.type === 'Line') { + isLine = true; + + children = React.Children.map(this.props.children, + (child, index) => React.cloneElement(child, { + ref: `child${index}` + }) + ); + } + let resizingRestricted = false; - if(widget.customProperties.resizeRightLeftLock || widget.customProperties.resizeTopBottomLock){ + if (widget.customProperties.resizeRightLeftLock || widget.customProperties.resizeTopBottomLock) { resizingRestricted = true; } - + const resizing = { bottom: !(widget.customProperties.resizeTopBottomLock || widget.isLocked), - bottomLeft: !(resizingRestricted|| widget.isLocked), + bottomLeft: !(resizingRestricted || widget.isLocked), bottomRight: !(resizingRestricted || widget.isLocked), left: !(widget.customProperties.resizeRightLeftLock || widget.isLocked), right: !(widget.customProperties.resizeRightLeftLock || widget.isLocked), @@ -94,19 +115,42 @@ class EditableWidgetContainer extends React.Component { topRight: !(resizingRestricted || widget.isLocked) }; - const gridArray = [ this.props.grid, this.props.grid ]; + const gridArray = [this.props.grid, this.props.grid]; const widgetClasses = classNames({ 'editing-widget': true, 'locked': widget.isLocked }); + if (isLine) { + return { this.rnd = c; }} + default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} + minWidth={widget.minWidth} + minHeight={widget.minHeight} + maxWidth={widget.customProperties.maxWidth || '100%'} + lockAspectRatio={Boolean(widget.customProperties.lockAspect)} + bounds={'parent'} + className={widgetClasses} + onResizeStart={this.borderWasClicked} + onResizeStop={this.resizeStop} + onDragStop={this.dragStop} + dragGrid={gridArray} + resizeGrid={gridArray} + zindex={widget.z} + enableResizing={resizing} + disableDragging={widget.isLocked} + > + {children} + ; + } + return { this.rnd = c; }} default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }} minWidth={widget.minWidth} minHeight={widget.minHeight} - maxWidth ={widget.customProperties.maxWidth || '100%' } + maxWidth={widget.customProperties.maxWidth || '100%'} lockAspectRatio={Boolean(widget.customProperties.lockAspect)} bounds={'parent'} className={widgetClasses} @@ -119,9 +163,7 @@ class EditableWidgetContainer extends React.Component { enableResizing={resizing} disableDragging={widget.isLocked} > - - {this.props.children} - + {this.props.children} ; } } diff --git a/src/widget/widget-factory.js b/src/widget/widget-factory.js index 3fe95e6..55e1aaf 100644 --- a/src/widget/widget-factory.js +++ b/src/widget/widget-factory.js @@ -181,11 +181,10 @@ class WidgetFactory { widget.customProperties.file = -1; // ID of file, -1 means non selected break; case 'Line': - widget.height = 30; - widget.width = 150; + widget.height = 100; + widget.width = 100; widget.customProperties.border_color = 0; widget.customProperties.border_width = 2; - widget.customProperties.margin_top = 15; widget.customProperties.rotation = 0; break; diff --git a/src/widget/widgets/line.js b/src/widget/widgets/line.js index 680ca03..242122c 100644 --- a/src/widget/widgets/line.js +++ b/src/widget/widgets/line.js @@ -20,19 +20,77 @@ import React, { Component } from 'react'; import EditWidgetColorControl from '../edit-widget/edit-widget-color-control'; class WidgetLine extends Component { + // WidgetLine is newly created when widget props are changed and saved + constructor(props) { + super(props); + this.illustrateDuringEdit = this.illustrateDuringEdit.bind(this); + + this.state = { + width: 0, + height: 0, + editing: false + } + } + + // needed to update the looks of the line in edit mode + illustrateDuringEdit(newwidth, newheight) { + this.setState({width: newwidth, height: newheight, editing: true}); + } + render() { - const lineStyle = { - borderColor: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color], - transform: 'rotate(' + this.props.widget.customProperties.rotation + 'deg)', - borderWidth: '' + this.props.widget.customProperties.border_width + 'px' + let rotation = this.props.widget.customProperties.rotation; + let rad = rotation * (Math.PI / 180); + + // get the dimensions either from props (saved widget) + // or from the state (widget in edit mode) + let width = this.props.widget.width; + let height = this.props.widget.height; + + if (this.state.editing) { + width = this.state.width; + height = this.state.height; + } + + // calculate the length of the line + let length = 0; + if (width <= height) { + if (rotation > 0) { + length = width / Math.abs(Math.cos(rad)); + } + else { + length = width + } + } else { // height < width + if (rotation > 0) { + length = height / Math.abs(Math.sin(rad)); + } else { + length = height; + } + } + + // calculate line coordinates (in percent) + const x1 = width * 0.5 - 0.5 * Math.cos(rad) * length; + const x1p = '' + Math.round(100 * x1 / width) + '%'; + + const x2 = width * 0.5 + 0.5 * Math.cos(rad) * length; + const x2p = '' + Math.round(100 * x2/width) + '%'; + + const y1 = height * 0.5 + 0.5 * Math.sin(rad) * length; + const y1p = '' + Math.round(100 * y1/height) + '%'; + + const y2 = height * 0.5 - 0.5 * Math.sin(rad) * length; + const y2p = '' + Math.round(100 * y2/height) + '%'; + + + const lineStyle = { + stroke: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.border_color], + strokeWidth: '' + this.props.widget.customProperties.border_width + 'px' }; - return ( -
- { } -
- ); + return + + ; } } -export default WidgetLine; +export default WidgetLine; \ No newline at end of file