Add plots.css

Add grid option to plots.

app/components/plot-abstract.js

@@ -3,9 +3,13 @@ import Resizable from '../mixins/resizable';
 import Draggable from '../mixins/draggable';
 
 export default Ember.Component.extend(Resizable, Draggable, {
+  tagName: 'div',
+  classNames: [ 'plotAbstract' ],
   attributeBindings: [ 'style' ],
 
   plot: null,
+  editing: false,
+  grid: false,
 
   disabled_resize: false,
   autoHide_resize: false,
@@ -14,6 +18,7 @@ export default Ember.Component.extend(Resizable, Draggable, {
   disabled_drag: false,
   containment_drag: 'parent',
   grid_drag: [ 10, 10 ],
+  scroll_drag: true,
 
   style: function() {
     return Ember.String.htmlSafe('width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px; left: ' + this.get('plot.x') + 'px; top: ' + this.get('plot.y') + 'px;');
@@ -42,5 +47,13 @@ export default Ember.Component.extend(Resizable, Draggable, {
       this.set('autoHide_resize', true);
       this.set('disabled_drag', true);
     }
-  }.observes('editing').on('init')
+
+    if (this.get('grid') === true) {
+      this.set('grid_resize', [ 10, 10 ]);
+      this.set('grid_drag', [ 10, 10 ]);
+    } else {
+      this.set('grid_resize', false);
+      this.set('grid_drag', false);
+    }
+  }.observes('editing', 'grid').on('init')
 });

app/components/plot-container.js

@@ -4,9 +4,10 @@ export default Ember.Component.extend({
   tagName: 'div',
   classNames: [ 'plots' ],
   attributeBindings: [ 'style' ],
-  editing: false,
 
   plots: null,
+  editing: false,
+  grid: true,
 
   style: function() {
     return Ember.String.htmlSafe('height: ' + this._calculateHeight() + 'px;');
@@ -23,6 +24,9 @@ export default Ember.Component.extend({
       }
     });
 
+    // add padding to height
+    maxHeight += 40;
+
     return maxHeight;
   }
 });

app/components/plot-table.js

@@ -1,8 +1,7 @@
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({
-  tagName: 'div',
-  classNames: [ 'plotContainer', 'plotTable' ],
+  classNames: [ 'plotTable' ],
 
   minWidth_resize: 200,
   minHeight_resize: 60

app/components/plot-value.js

@@ -1,8 +1,7 @@
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({
-  tagName: 'div',
-  classNames: [ 'plotContainer', 'plotValue' ],
+  classNames: [ 'plotValue' ],
 
   minWidth_resize: 50,
   minHeight_resize: 20

app/styles/app.css

@@ -1,3 +1,5 @@
+@import 'plots.css';
+
 * {
   margin: 0;
   padding: 0;
@@ -110,19 +112,6 @@ footer {
 /**
  * Visualization
  */
-.plots {
-  margin-top: 20px;
-  margin-bottom: 20px;
-
-  overflow: visible;
-
-  position: relative;
-}
-
-.plot-toolbox {
-  margin-top: 20px;
-}
-
 .draggableDropzone {
   display: block;
 
@@ -151,35 +140,3 @@ footer {
     background-color: #aaa;
   }
 }
-
-.plotContainer {
-  border: 1px solid lightgray;
-
-  margin: 10px;
-  padding: 5px 10px;
-
-  /*display: inline-block;*/
-
-  /*position: absolute;*/
-}
-
-.plotValue {
-  position: absolute;
-}
-
-.plotTable {
-  position: absolute;
-
-  width: 100%;
-  /*height: 100%;*/
-
-  border: 1px solid gray;
-
-  border-collapse: collapse;
-}
-
-.plotTable td, th {
-  border: 1px solid gray;
-
-  padding: 2px 5px;
-}

app/styles/plots.css

@@ -0,0 +1,55 @@
+/**
+ * Component: plot-container
+ */
+.plots {
+  overflow: scroll;
+
+  position: relative;
+}
+
+/**
+ * Component: plot-toolbox
+ */
+.plot-toolbox {
+  margin: 20px 0;
+}
+
+/**
+ * Component: plot-abstract
+ */
+.plotAbstract {
+  border: 1px solid lightgray;
+
+  margin: 10px;
+  padding: 5px 10px;
+
+  position: absolute;
+}
+
+/**
+ * Component: plot-value
+ */
+.plotValue {
+
+}
+
+/**
+ * Component: plot-table
+ */
+.plotTable {
+
+}
+
+.plotTable table {
+  width: 100%;
+  /*height: 100%;*/
+
+  border: 1px solid gray;
+  border-collapse: collapse;
+}
+
+.plotTable td, th {
+  border: 1px solid gray;
+
+  padding: 2px 5px;
+}

app/templates/components/plot-container.hbs

@@ -1,3 +1,3 @@
 {{#each plots as |plot|}}
-  {{component plot.type plot=plot editing=editing}}
+  {{component plot.type plot=plot editing=editing grid=grid}}
 {{/each}}