display line widget properly, fixes #206

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 */

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 <Rnd
+        ref={c => { 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}
+      </Rnd>;
+    }
+
     return <Rnd
       ref={c => { 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}
     </Rnd>;
   }
 }

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;
 

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 (
-      <div className="line-widget" style={lineStyle}>
-            { } 
-      </div>
-    );
+      return <svg height="100%" width="100%">
+                <line x1={x1p} x2={x2p} y1={y1p} y2={y2p} style={lineStyle}/>
+              </svg>;
   }
 }
 
-export default WidgetLine;
+export default WidgetLine;