From 8b0854c49fb22de494da5d2fdcae3a7fb68823fe Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Fri, 28 Jul 2017 16:17:48 +0200
Subject: [PATCH] Add grid snapping

---
 src/components/dropzone.js      | 13 ++++++++-----
 src/containers/visualization.js |  6 +++---
 src/containers/widget.js        | 27 ++++++++++++++++++++-------
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/dropzone.js b/src/components/dropzone.js
index 5f8bf0d..21bad6b 100644
--- a/src/components/dropzone.js
+++ b/src/components/dropzone.js
@@ -33,13 +33,16 @@ const dropzoneTarget = {
 
     // Z-Index is one more the top most children
     let foundZ = props.children.reduce( (maxZ, currentChildren) => {
-      // Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
-      let widget = currentChildren.props.data;
-      if (widget && widget.z) {
-        if (widget.z > maxZ) {
-          return widget.z;
+      if (currentChildren.props != null) {
+        // Is there a simpler way? Is not easy to expose a getter in a Container.create(Component)
+        let widget = currentChildren.props.data;
+        if (widget && widget.z) {
+          if (widget.z > maxZ) {
+            return widget.z;
+          }
         }
       }
+      
       return maxZ;
     }, 0);
     position.z = foundZ >= 100? foundZ : ++foundZ;
diff --git a/src/containers/visualization.js b/src/containers/visualization.js
index 1140dea..86b5ef3 100644
--- a/src/containers/visualization.js
+++ b/src/containers/visualization.js
@@ -296,14 +296,14 @@ class Visualization extends Component {
   moveWidget(e, data, applyDirection) {
     var widget = this.state.visualization.widgets[data.key];
     var updated_widgets = {};
-    updated_widgets[data.key] =  applyDirection(widget);
+    updated_widgets[data.key] = applyDirection(widget);
     var new_widgets = Object.assign({}, this.state.visualization.widgets, updated_widgets);
 
     var visualization = Object.assign({}, this.state.visualization, {
       widgets: new_widgets
     });
-    this.setState({ visualization: visualization });
 
+    this.setState({ visualization: visualization });
   }
 
   moveAbove(widget) {
@@ -405,7 +405,7 @@ class Visualization extends Component {
           <Dropzone height={this.state.dropZoneHeight} onDrop={(item, position) => this.handleDrop(item, position)} editing={this.state.editing}>
             {current_widgets != null &&
               Object.keys(current_widgets).map( (widget_key) => (
-              <Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={[this.state.visualization.grid, this.state.visualization.grid]} />
+              <Widget key={widget_key} data={current_widgets[widget_key]} simulation={this.state.simulation} onWidgetChange={(w, k) => this.widgetChange(w, k)} onWidgetStatusChange={(w, k) => this.widgetStatusChange(w, k)} editing={this.state.editing} index={widget_key} grid={this.state.visualization.grid} />
             ))}
 
             <Grid size={this.state.visualization.grid} disabled={this.state.visualization.grid === 1 || !this.state.editing} />
diff --git a/src/containers/widget.js b/src/containers/widget.js
index 2442dc6..cf4d63f 100644
--- a/src/containers/widget.js
+++ b/src/containers/widget.js
@@ -89,11 +89,26 @@ class Widget extends Component {
     }
   }
 
+  snapToGrid(value) {
+    if (this.props.grid === 1) return value;
+
+    return Math.round(value / this.props.grid) * this.props.grid;
+  }
+
+  drag(event, ui) {
+    let x = this.snapToGrid(ui.position.left);
+    let y = this.snapToGrid(ui.position.top);
+
+    if (x !== ui.position.left || y !== ui.position.top) {
+      this.rnd.updatePosition({ x, y });
+    }
+  }
+
   dragStop(event, ui) {
     // update widget
     var widget = this.props.data;
-    widget.x = ui.position.left;
-    widget.y = ui.position.top;
+    widget.x = this.snapToGrid(ui.position.left);
+    widget.y = this.snapToGrid(ui.position.top);
 
     this.props.onWidgetChange(widget, this.props.index);
   }
@@ -129,17 +144,14 @@ class Widget extends Component {
 
   render() {
     // configure grid
-    var grid = this.props.grid;
-    if (!grid) {
-      grid = [ 1, 1 ];
-    }
+    let grid = [this.props.grid, this.props.grid];
 
     // get widget element
     const widget = this.props.data;
     var borderedWidget = false;
     var element = null;
 
-    //console.log(widget.type + ': ' + widget.z);
+    //console.log('render: ' + widget.x + ', ' + widget.y);
 
     // dummy is passed to widgets to keep updating them while in edit mode
     if (widget.type === 'Value') {
@@ -187,6 +199,7 @@ class Widget extends Component {
           className={ widgetClasses }
           onResizeStart={ (direction, styleSize, clientSize, event) => this.borderWasClicked(event) } 
           onResizeStop={(direction, styleSize, clientSize, delta) => this.resizeStop(direction, styleSize, clientSize, delta)}
+          onDrag={(event, ui) => this.drag(event, ui)}
           onDragStop={(event, ui) => this.dragStop(event, ui)}
           moveGrid={grid}
           resizeGrid={grid}