Change plots to free arrangement

Plots can be positioned freely. The plot area does not scrolls yet while
editing, but scales to fit all plots which are inside.

app/components/draggable-dropzone.js

@@ -1,16 +1,13 @@
 import Ember from 'ember';
-import Sortable from '../mixins/sortable';
 
 var { set } = Ember;
 
-export default Ember.Component.extend(Sortable, {
+export default Ember.Component.extend({
   tagName: 'div',
-  classNames: [ 'draggableDropzone plots' ],
+  classNames: [ 'draggableDropzone' ],
   classNameBindings: [ 'dragClass' ],
   dragClass: 'deactivated',
 
-  placeholder_sort: 'plot-placeholder',
-
   dragLeave(event) {
     event.preventDefault();
     set(this, 'dragClass', 'deactivated');

app/components/draggable-item.js

@@ -1,5 +1,4 @@
 import Ember from 'ember';
-import Draggable from '../mixins/draggable';
 
 var { get } = Ember;
 

app/components/plot-abstract.js

@@ -1,16 +1,22 @@
 import Ember from 'ember';
 import Resizable from '../mixins/resizable';
+import Draggable from '../mixins/draggable';
 
-export default Ember.Component.extend(Resizable, {
+export default Ember.Component.extend(Resizable, Draggable, {
   attributeBindings: [ 'style' ],
 
   plot: null,
 
   disabled_resize: false,
   autoHide_resize: false,
+  grid_resize: [ 10, 10 ],
+
+  disabled_drag: false,
+  containment_drag: 'parent',
+  grid_drag: [ 10, 10 ],
 
   style: function() {
-    return 'width: ' + this.get('plot.width') + 'px; height: ' + this.get('plot.height') + 'px;';
+    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;');
   }.property('plot'),
 
   stop_resize(event, ui) {
@@ -21,13 +27,20 @@ export default Ember.Component.extend(Resizable, {
     this.set('plot.height', height);
   },
 
+  stop_drag(event, ui) {
+    this.set('plot.x', ui.position.left);
+    this.set('plot.y', ui.position.top);
+  },
+
   _updateUI: function() {
     if (this.get('editing') === true) {
       this.set('disabled_resize', false);
       this.set('autoHide_resize', false);
+      this.set('disabled_drag', false);
     } else {
       this.set('disabled_resize', true);
       this.set('autoHide_resize', true);
+      this.set('disabled_drag', true);
     }
   }.observes('editing').on('init')
 });

app/components/plot-container.js

@@ -1,21 +1,28 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  classNames: [ 'plot' ],
+  tagName: 'div',
+  classNames: [ 'plots' ],
+  attributeBindings: [ 'style' ],
   editing: false,
 
-  isTable: function() {
-    var type = this.get('plot.type');
-    return type === 'table';
-  }.property('plot.type'),
+  plots: null,
 
-  isChart: function() {
-    var type = this.get('plot.type');
-    return type === 'chart';
-  }.property('plot.type'),
+  style: function() {
+    return Ember.String.htmlSafe('height: ' + this._calculateHeight() + 'px;');
+  }.property('plots.@each.height', 'plots.@each.y'),
 
-  isValue: function() {
-    var type = this.get('plot.type');
-    return type === 'value';
-  }.property('plot.type')
+  _calculateHeight() {
+    var maxHeight = 0;
+    var plots = this.get('plots');
+
+    plots.forEach(function(plot) {
+      var plotHeight = plot.get('y') + plot.get('height');
+      if (plotHeight > maxHeight) {
+        maxHeight = plotHeight;
+      }
+    });
+
+    return maxHeight;
+  }
 });

app/components/plot-table.js

@@ -1,4 +1,3 @@
-import Ember from 'ember';
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({

app/components/plot-value.js

@@ -1,4 +1,3 @@
-import Ember from 'ember';
 import PlotAbstract from './plot-abstract';
 
 export default PlotAbstract.extend({

app/controllers/visualization/edit.js

@@ -7,11 +7,11 @@ export default Ember.Controller.extend({
 
       if (name === 'chart') {
         // create new chart plot
-        plot = this.store.createRecord('plot', { name: 'Chart 1', signal: 'Signal 1', type: 'chart' });
+        plot = this.store.createRecord('plot', { name: 'Chart 1', signal: 'Signal 1', type: 'plot-chart' });
       } else if (name === 'table') {
-        plot = this.store.createRecord('plot', { name: 'Table 1', signal: 'Signal 1', type: 'table', width: 500, height: 200 });
+        plot = this.store.createRecord('plot', { name: 'Table 1', signal: 'Signal 1', type: 'plot-table', width: 500, height: 200, title: 'Table 1' });
       } else if (name === 'value') {
-        plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1', type: 'value' });
+        plot = this.store.createRecord('plot', { name: 'Value 1', signal: 'Signal 1', type: 'plot-value' });
       } else {
         // DEBUG
         console.log('Add plot: ' + name);

app/models/plot.js

@@ -9,7 +9,7 @@ export default Model.extend({
   height: attr('number', { defaultValue: 100 }),
   title: attr('string'),
   type: attr('string'),
-  row: attr('number'),
-  column: attr('number'),
+  x: attr('number', { defaultValue: 0 }),
+  y: attr('number', { defaultValue: 0 }),
   visualization: belongsTo('Visualization', { async: true })
 });

app/styles/app.css

@@ -114,40 +114,19 @@ footer {
   margin-top: 20px;
   margin-bottom: 20px;
 
-  overflow: auto;
-}
+  overflow: visible;
 
-.plots > div {
-  float: left;
-}
-
-.plot-add-row {
-  font-size: 100px;
-  font-weight: 800;
-
-  text-align: center;
-}
-
-.plot-add-row > div {
-  float: none;
+  position: relative;
 }
 
 .plot-toolbox {
   margin-top: 20px;
 }
 
-.plot-placeholder {
-  border: 1px dotted black;
-  width: 100px;
-  height: 100px;
-
-  margin: 10px;
-}
-
 .draggableDropzone {
   display: block;
 
-  min-height: 100px;
+  min-height: 400px;
 
   border: 3px dashed #aaa;
 
@@ -179,16 +158,20 @@ footer {
   margin: 10px;
   padding: 5px 10px;
 
-  display: inline-block;
+  /*display: inline-block;*/
+
+  /*position: absolute;*/
 }
 
 .plotValue {
-
+  position: absolute;
 }
 
 .plotTable {
+  position: absolute;
+
   width: 100%;
-  height: 100%;
+  /*height: 100%;*/
 
   border: 1px solid gray;
 

app/templates/components/plot-container.hbs

@@ -1,9 +1,3 @@
-{{#if isTable}}
-  {{#plot-table plot=plot editing=editing}}{{/plot-table}}
-{{else if isChart}}
-  {{#plot-chart plot=plot editing=editing}}{{/plot-chart}}
-{{else if isValue}}
-  {{#plot-value plot=plot editing=editing}}{{/plot-value}}
-{{else}}
-  <strong>Unknown Plot</strong>
-{{/if}}
+{{#each plots as |plot|}}
+  {{component plot.type plot=plot editing=editing}}
+{{/each}}

app/templates/visualization/edit.hbs

@@ -15,19 +15,11 @@
   {{/draggable-item}}
 </div>
 
-<div>
-  {{#draggable-dropzone dropped='addPlot'}}
-    {{#each model.plots as |plot|}}
-      {{#plot-container plot=plot editing=true}}{{/plot-container}}
-    {{/each}}
-  {{/draggable-dropzone}}
-</div>
-
-{{#draggable-dropzone dropped='addRowWithPlot'}}
-  <div class="plot-add-row">+</div>
+{{#draggable-dropzone dropped='addPlot'}}
+  {{plot-container plots=model.plots editing=true}}
 {{/draggable-dropzone}}
 
-<p style="clear: both;">
+<p>
   <button {{action 'cancelEdit'}}>Cancel</button>
   <button {{action 'saveEdit'}}>Save</button>
 </p>

app/templates/visualization/index.hbs

@@ -1,10 +1,6 @@
 <h1>{{model.name}}</h1>
 
-<div class="plots">
-  {{#each model.plots as |plot|}}
-    {{#plot-container plot=plot}}{{/plot-container}}
-  {{/each}}
-</div>
+{{plot-container plots=model.plots}}
 
 <p>
   {{#link-to "visualization.edit" model.id}}Edit visualization{{/link-to}}