widgets are now rendered in edit mode

src/dashboard/dashboard.js

@@ -322,17 +322,14 @@ class Dashboard extends Component {
   }
 
   widgetChange(widget, index, callback = null){
-    const widgets = this.state.dashboard.get('widgets');
-    widgets[index] = widget;
+    console.log("widget change was called (dashboard)");
 
-    const dashboard = this.state.dashboard.set('widgets');
-
-    // Check if the height needs to be increased, the section may have shrunk if not
-    if (!this.increaseHeightWithWidget(widget)) {
-      this.computeHeightWithWidgets(dashboard.widgets);
-    }
-
-    this.setState({ dashboard }, callback);
+    AppDispatcher.dispatch({
+      type: 'widgets/start-edit',
+      token: this.state.sessionToken,
+      data: widget
+    });
+    
   }
 
 
@@ -495,8 +492,8 @@ class Dashboard extends Component {
               key={widgetKey}
               data={widgets[widgetKey]}
               simulation={this.state.simulation}
-              onWidgetChange={this.widgetChange}
-              onWidgetStatusChange={this.widgetStatusChange}
+              onWidgetChange={this.widgetChange.bind(this)}
+              onWidgetStatusChange={this.widgetStatusChange.bind(this)}
               editing={this.state.editing}
               index={parseInt(widgetKey,10)}
               grid={grid}
@@ -518,6 +515,18 @@ class Dashboard extends Component {
 /*
 onWidgetChange={(w, k) => this.widgetChange(w, k)}
 onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)}
+
+const widgets = this.state.dashboard.get('widgets');
+    widgets[index] = widget;
+
+    const dashboard = this.state.dashboard.set('widgets');
+
+    // Check if the height needs to be increased, the section may have shrunk if not
+    if (!this.increaseHeightWithWidget(widget)) {
+      this.computeHeightWithWidgets(dashboard.widgets);
+    }
+
+    this.setState({ dashboard }, callback);
 */
 
 let fluxContainerConverter = require('../common/FluxContainerConverter');

src/dashboard/dropzone.js

@@ -62,6 +62,7 @@ function collect(connect, monitor) {
 
 class Dropzone extends React.Component {
   render() {
+
     var toolboxClass = classNames({
       'box-content': true,
       'toolbox-dropzone': true,

src/dashboard/widget-area.js

@@ -48,7 +48,7 @@ class WidgetArea extends React.Component {
   }
 
   render() {
-    const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
+        const maxHeight = Object.values(this.props.widgets).reduce((currentHeight, widget) => {
       const absolutHeight = widget.y + widget.height;
 
       return absolutHeight > currentHeight ? absolutHeight : currentHeight;
@@ -67,7 +67,7 @@ WidgetArea.propTypes = {
   editing: PropTypes.bool,
   grid: PropTypes.number,
   defaultSimulationModel: PropTypes.string,
-  widgets: PropTypes.array,
+  //widgets: PropTypes.array,
   onWidgetAdded: PropTypes.func
 };
 

src/dashboard/widget-context-menu.js

@@ -33,7 +33,6 @@ class WidgetContextMenu extends React.Component {
 
   deleteWidget = event => {
     if (this.props.onDelete != null) {
-      console.log("deleteWIget in wcm was called");
       this.props.onDelete(this.props.widget, this.props.index);
     }
   };

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

@@ -38,7 +38,7 @@ import EditWidgetMinMaxControl from './edit-widget-min-max-control';
 import EditWidgetHTMLContent from './edit-widget-html-content';
 import EditWidgetParametersControl from './edit-widget-parameters-control';
 
-export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels, handleChange) {
+export default function CreateControls(widgetType = null, widget = null, sessionToken = null, files = null, validateForm, simulationModels = null, handleChange) {
     // Use a list to concatenate the controls according to the widget type
     var DialogControls = [];
 

src/widget/edit-widget-simulation-control.js

@@ -28,9 +28,6 @@ class EditWidgetSimulationControl extends Component {
 
     this.state = {
       widget: {
-        customProperties: {
-          simulationModel: ''
-        }
       }
     };
   }

src/widget/editable-widget-container.js

@@ -90,21 +90,21 @@ class EditableWidgetContainer extends React.Component {
     const widget = this.props.widget;
 
     const resizing = {
-      bottom: !widget.locked,
-      bottomLeft: !widget.locked,
-      bottomRight: !widget.locked,
-      left: !widget.locked,
-      right: !widget.locked,
-      top: !widget.locked,
-      topLeft: !widget.locked,
-      topRight: !widget.locked
+      bottom: !widget.isLocked,
+      bottomLeft: !widget.isLocked,
+      bottomRight: !widget.isLocked,
+      left: !widget.isLocked,
+      right: !widget.idLocked,
+      top: !widget.isLocked,
+      topLeft: !widget.isLocked,
+      topRight: !widget.isLocked
     };
 
     const gridArray = [ this.props.grid, this.props.grid ];
 
     const widgetClasses = classNames({
       'editing-widget': true,
-      'locked': widget.locked
+      'locked': widget.isLocked
     });
 
     return <Rnd
@@ -112,7 +112,7 @@ class EditableWidgetContainer extends React.Component {
       default={{ x: Number(widget.x), y: Number(widget.y), width: widget.width, height: widget.height }}
       minWidth={widget.minWidth}
       minHeight={widget.minHeight}
-      lockAspectRatio={Boolean(widget.lockAspect)}
+      lockAspectRatio={Boolean(widget.isLocked)}
       bounds={'parent'}
       className={widgetClasses}
       onResizeStart={this.borderWasClicked}
@@ -123,11 +123,11 @@ class EditableWidgetContainer extends React.Component {
       resizeGrid={gridArray}
       zindex={widget.z}
       enableResizing={resizing}
-      disableDragging={widget.locked}
+      disableDragging={widget.isLocked}
     >
-      <Menu id={'widgetMenu' + this.props.index}>
+      
         {this.props.children}
-      </Menu>
+      
     </Rnd>;
   }
 }

src/widget/widget.js

@@ -168,7 +168,7 @@ class Widget extends React.Component {
     const element = this.createWidget(this.props.data);
 
     if (this.props.editing) {
-      return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index}>
+      return <EditableWidgetContainer widget={this.props.data} grid={this.props.grid} index={this.props.index} onWidgetChange={this.props.onWidgetChange}>
         {element}
       </EditableWidgetContainer>;
     }

src/widget/widgets/label.js

@@ -25,8 +25,7 @@ import EditWidgetColorControl from '../edit-widget-color-control';
 
 class WidgetLabel extends Component {
   render() {
-   
-    const style = {
+      const style = {
       fontSize: this.props.widget.customProperties.textSize + 'px',
       color: EditWidgetColorControl.ColorPalette[this.props.widget.customProperties.fontColor]
     };