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