Add grid slider to visualization

src/containers/visualization.js

@@ -23,6 +23,7 @@ import React, { Component } from 'react';
 import { Container } from 'flux/utils';
 import { Button } from 'react-bootstrap';
 import { ContextMenu, MenuItem } from 'react-contextmenu';
+import Slider from 'rc-slider';
 
 import WidgetFactory from '../components/widget-factory';
 import ToolboxItem from '../components/toolbox-item';
@@ -60,7 +61,7 @@ class Visualization extends Component {
       project: prevState.project || null,
       simulation: prevState.simulation || null,
       editing: prevState.editing || false,
-      grid: prevState.grid || false,
+      grid: prevState.grid || [1, 1],
 
       editModal: prevState.editModal || false,
       modalData: prevState.modalData || null,
@@ -332,6 +333,15 @@ class Visualization extends Component {
     return widget;
   }
 
+  setGrid(value) {
+    // value 0 would block all widgets, set 1 as 'grid disabled'
+    if (value === 0) {
+      value = 1;
+    }
+
+    this.setState({ grid: [value, value] });
+  }
+
   render() {
     var current_widgets = this.state.visualization.widgets;
 
@@ -344,13 +354,15 @@ class Visualization extends Component {
             </span>
           </div>
           {this.state.editing ? (
-            <div className='section-buttons-group'>
-              <Button bsStyle="link" onClick={() => this.stopEditing()}>
-                <span className="glyphicon glyphicon-floppy-disk"></span> Save
-              </Button>
-              <Button bsStyle="link" onClick={() => this.discardChanges()}>
-                <span className="glyphicon glyphicon-remove"></span> Cancel
-              </Button>
+            <div>
+              <div className='section-buttons-group'>
+                <Button bsStyle="link" onClick={() => this.stopEditing()}>
+                  <span className="glyphicon glyphicon-floppy-disk"></span> Save
+                </Button>
+                <Button bsStyle="link" onClick={() => this.discardChanges()}>
+                  <span className="glyphicon glyphicon-remove"></span> Cancel
+                </Button>
+              </div>
             </div>
           ) : (
             <div className='section-buttons-group'>
@@ -359,6 +371,14 @@ class Visualization extends Component {
               </Button>
             </div>
           )}
+
+          {this.state.editing &&
+            <div className="section-grid-slider">
+              <span>Grid: {this.state.grid[0] > 1 ? this.state.grid[0] : 'Disabled'}</span>
+
+              <Slider style={{ width: '80px' }} step={5} onChange={value => this.setGrid(value)} />
+            </div>
+          }
         </div>
 
         <div className="box box-content" onContextMenu={ (e) => e.preventDefault() }>

src/containers/widget.js

@@ -128,11 +128,6 @@ class Widget extends Component {
   }
 
   render() {
-
-
-
-    //console.log('render widget ' + this.props.data.z + this.props.data.type);
-
     // configure grid
     var grid = this.props.grid;
     if (!grid) {
@@ -144,6 +139,8 @@ class Widget extends Component {
     var borderedWidget = false;
     var element = null;
 
+    //console.log(widget.type + ': ' + widget.z);
+
     // dummy is passed to widgets to keep updating them while in edit mode
     if (widget.type === 'Value') {
       element = <WidgetValue widget={widget} data={this.state.simulatorData} dummy={this.state.sequence} simulation={this.props.simulation} />

src/styles/app.css

@@ -245,7 +245,7 @@ body {
 .section-header div {
   display: inline-block;
   vertical-align: middle;
-  height: 100%;
+  /* height: 100%; */
 }
 
 .section-title {
@@ -269,3 +269,13 @@ body {
 .section-header .glyphicon {
   font-size: 0.8em;
 }
+
+.section-grid-slider {
+  height: auto !important;
+
+  float: right;
+}
+
+.section-grid-slider .rc-slider {
+  margin-left: 12px;
+}