Add image default size and start aspect ratio lock control

src/components/dialog/edit-widget-aspect-control.js

@@ -0,0 +1,37 @@
+/**
+ * File: edit-widget-aspect-control.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 29.07.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import React from 'react';
+import { FormGroup, Checkbox } from 'react-bootstrap';
+
+class EditWidgetAspectControl extends React.Component {
+  render() {
+    console.log(this.props.lockAspect);
+
+    return (
+      <FormGroup>
+        <Checkbox id="lockAspect" checked={this.props.lockAspect} onChange={e => this.props.handleChange(e)}>Lock Aspect</Checkbox>
+      </FormGroup>
+    );
+  }
+}
+
+export default EditWidgetAspectControl;

src/components/dialog/edit-widget-control-creator.js

@@ -29,6 +29,7 @@ import EditWidgetSimulatorControl from './edit-widget-simulator-control';
 import EditWidgetSignalControl from './edit-widget-signal-control';
 import EditWidgetSignalsControl from './edit-widget-signals-control';
 import EditWidgetOrientation from './edit-widget-orientation';
+import EditWidgetAspectControl from './edit-widget-aspect-control';
 
 export default function createControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulation, handleChange) {
     // Use a list to concatenate the controls according to the widget type
@@ -63,7 +64,8 @@ export default function createControls(widgetType = null, widget = null, session
             break;
         case 'Image': {
             dialogControls.push(
-                <EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />)
+                <EditImageWidgetControl key={1} sessionToken={sessionToken} widget={widget} files={files} validate={(id) => validateForm(id)} simulation={simulation} handleChange={(e) => handleChange(e)} />,
+                <EditWidgetAspectControl key={2} lockAspect={widget.lockAspect} handleChange={e => handleChange(e)} />);
             }
             break;
         case 'Gauge': {

src/components/dialog/edit-widget.js

@@ -73,6 +73,15 @@ class EditWidgetDialog extends Component {
         let changeObject = {};
         if (e.target.id === 'simulator') {
           changeObject[e.target.id] = JSON.parse(e.target.value);
+        } else if (e.target.id === 'file') {
+          changeObject[e.target.id] = e.target.value;
+
+          // get file and update size
+          let file = this.props.files.find(element => element._id === e.target.value);
+
+          // set default size
+          changeObject.width = file.dimensions.width;
+          changeObject.height = file.dimensions.height;
         } else {
           changeObject[e.target.id] = e.target.value;
         }

src/components/widget-factory.js

@@ -71,6 +71,7 @@ class WidgetFactory {
                 widget.minHeight = 100;
                 widget.width = 200;
                 widget.height = 200;
+                widget.lockAspect = true;
                 break;
             case 'Button':
                 widget.minWidth = 100;

src/components/widget-image.js

@@ -19,35 +19,31 @@
  * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
  ******************************************************************************/
 
-import React, { Component } from 'react';
+import React from 'react';
 
 import AppDispatcher from '../app-dispatcher';
 import config from '../config';
 
-class WidgetImage extends Component {
-
+class WidgetImage extends React.Component {
   componentWillReceiveProps(nextProps) {
-
-    // Query the image referenced by the widget (public request, no token required)
+    // Query the image referenced by the widget
     let widgetFile = nextProps.widget.file;
-    if (widgetFile && !nextProps.files.find( file => file._id === widgetFile ) ) {
-      
+    if (widgetFile && !nextProps.files.find(file => file._id === widgetFile)) {
       AppDispatcher.dispatch({
         type: 'files/start-load',
-        data: widgetFile
+        data: widgetFile,
+        token: nextProps.token
       });
-
     }
   }
 
   render() {
-    
-    let file = this.props.files.find( (file) => file._id === this.props.widget.file );
+    let file = this.props.files.find(file => file._id === this.props.widget.file);
 
     return (
       <div className="full">
         {file &&
-          <img className="full" alt={file.name} src={config.publicPathBase + file.path} onDragStart={ (e) => e.preventDefault() } />
+          <img className="full" alt={file.name} src={'/' + config.publicPathBase + file.path} onDragStart={e => e.preventDefault()} />
         }
       </div>
     );

src/containers/widget.js

@@ -168,7 +168,7 @@ class Widget extends Component {
       element = <WidgetPlotTable widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} editing={this.props.editing} onWidgetChange={(w) => this.props.onWidgetStatusChange(w, this.props.index) } />
       borderedWidget = true;
     } else if (widget.type === 'Image') {
-      element = <WidgetImage widget={widget} files={this.state.files} />
+      element = <WidgetImage widget={widget} files={this.state.files} token={this.state.sessionToken} />
     } else if (widget.type === 'Button') {
       element = <WidgetButton widget={widget} editing={this.props.editing} />
     } else if (widget.type === 'NumberInput') {
@@ -195,7 +195,7 @@ class Widget extends Component {
           initial={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
           minWidth={ widget.minWidth }
           minHeight={ widget.minHeight }
-          lockAspectRatio={ widget.lockedAspectRatio }
+          lockAspectRatio={Boolean(widget.lockAspect)}
           bounds={'parent'}
           className={ widgetClasses }
           onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) }