Add visualization automatic resize

Fix widget top and/or left edge resize

src/components/dropzone.js

@@ -47,7 +47,7 @@ class Dropzone extends Component {
     });
 
     return this.props.connectDropTarget(
-      <div className={toolboxClass} ref={wrapper => this.wrapper = wrapper}>
+      <div className={toolboxClass} style={{ height: this.props.height}} ref={wrapper => this.wrapper = wrapper}>
         {this.props.children}
       </div>
     );

src/containers/visualization.js

@@ -142,6 +142,7 @@ class Visualization extends Component {
     visualization.widgets[index] = widget;
 
     this.setState({ visualization: visualization });
+    this.forceUpdate();
   }
 
   editWidget(e, data) {
@@ -234,6 +235,20 @@ class Visualization extends Component {
   }
 
   render() {
+    // calculate widget area height
+    var height = 0;
+
+    if (this.state.visualization.widgets) {
+      this.state.visualization.widgets.forEach((widget) => {
+        if (widget.y + widget.height > height) {
+          height = widget.y + widget.height;
+        }
+      });
+
+      // add padding
+      height += 40;
+    }
+
     return (
       <div>
         <div>
@@ -264,7 +279,7 @@ class Visualization extends Component {
             </div>
           }
 
-          <Dropzone onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
+          <Dropzone height={height} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
             {this.state.visualization.widgets != null &&
               this.state.visualization.widgets.map((widget, index) => (
               <Widget key={index} data={widget} simulation={this.state.simulation} onWidgetChange={(w, i) => this.widgetChange(w, i)} editing={this.state.editing} index={index} grid={this.state.grid} />

src/containers/widget.js

@@ -54,6 +54,16 @@ class Widget extends Component {
   resizeStop(direction, styleSize, clientSize, delta) {
     // update widget
     var widget = this.props.data;
+
+    // resize depends on direction
+    if (direction === 'left' || direction === 'topLeft' || direction === 'bottomLeft') {
+      widget.x -= delta.width;
+    }
+
+    if (direction === 'top' || direction === 'topLeft' || direction === 'topRight') {
+      widget.y -= delta.height;
+    }
+
     widget.width = styleSize.width;
     widget.height = styleSize.height;
 
@@ -61,7 +71,7 @@ class Widget extends Component {
   }
 
   render() {
-    console.log('render widget ' + this.props.data.z + this.props.data.type);
+    //console.log('render widget ' + this.props.data.z + this.props.data.type);
 
     // configure grid
     var grid = this.props.grid;