Drop widgets at cursor position. Add widget delete

Add widget delete button in modal widget dialogs
Add widget edit hint in edit layout

app/components/draggable-dropzone.js

@@ -29,7 +29,14 @@ export default Ember.Component.extend({
 
   drop(event) {
     var data = event.dataTransfer.getData('text/data');
-    this.sendAction('dropped', data);
+    var position = {
+      x: event.originalEvent.pageX - $(event.target).offset().left - parseFloat(event.dataTransfer.getData('offset/x')),
+      y: event.originalEvent.pageY - $(event.target).offset().top - parseFloat(event.dataTransfer.getData('offset/y'))
+    }
+
+    console.log(position);
+
+    this.sendAction('dropped', data, position);
 
     set(this, 'dragClass', 'deactivated');
   }

app/components/draggable-item.js

@@ -17,6 +17,9 @@ export default Ember.Component.extend({
   draggable: 'true',
 
   dragStart(event) {
+    event.dataTransfer.setData('offset/x', event.originalEvent.pageX - $(event.target).offset().left);
+    event.dataTransfer.setData('offset/y', event.originalEvent.pageY - $(event.target).offset().top);
+
     return event.dataTransfer.setData('text/data', get(this, 'content'));
   }
 });

app/components/widget-label.js

@@ -47,6 +47,13 @@ export default WidgetAbstract.extend({
 
     cancelModal() {
       this.set('isShowingModal', false);
-    }
+    },
+
+    deleteModal() {
+      // delete widget
+      this.get('widget').destroyRecord();
+
+      this.set('isShowingModal', false);
+    },
   }
 });

app/components/widget-table.js

@@ -150,6 +150,13 @@ export default WidgetAbstract.extend({
       this.set('isShowingModal', false);
     },
 
+    deleteModal() {
+      // delete widget
+      this.get('widget').destroyRecord();
+
+      this.set('isShowingModal', false);
+    },
+
     selectSimulationModel(simulationModelName) {
       // save simulation model
       this.set('simulationModelName', simulationModelName);

app/components/widget-value.js

@@ -123,6 +123,13 @@ export default WidgetAbstract.extend({
       this.set('isShowingModal', false);
     },
 
+    deleteModal() {
+      // delete widget
+      this.get('widget').destroyRecord();
+
+      this.set('isShowingModal', false);
+    },
+
     selectSimulationModel(simulationModelName) {
       // save simulation model
       this.set('simulationModelName', simulationModelName);

app/controllers/visualization/edit.js

@@ -22,7 +22,7 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
   signal: null,
 
   actions: {
-    addWidget(name) {
+    addWidget(name, position) {
       // get first simulator id
       let defaultSimulatorid = 0;
 
@@ -36,11 +36,11 @@ export default Ember.Controller.extend(FetchLiveDataMixin, {
               let widget = null;
 
               if (name === 'label') {
-                widget = this.store.createRecord('widget', { name: 'Label', type: 'widget-label', width: 100, height: 20 });
+                widget = this.store.createRecord('widget', { name: 'Label', type: 'widget-label', width: 100, height: 20, x: position.x, y: position.y });
               } else if (name === 'table') {
-                widget = this.store.createRecord('widget', { name: 'Table 1', type: 'widget-table', width: 500, height: 200, widgetData: { simulator: defaultSimulatorid } });
+                widget = this.store.createRecord('widget', { name: 'Table 1', type: 'widget-table', width: 500, height: 200, x: position.x, y: position.y, widgetData: { simulator: defaultSimulatorid } });
               } else if (name === 'value') {
-                widget = this.store.createRecord('widget', { name: 'Value 1', type: 'widget-value', width: 250, height: 20, widgetData: { signal: 0, simulator: defaultSimulatorid } });
+                widget = this.store.createRecord('widget', { name: 'Value 1', type: 'widget-value', width: 250, height: 20, x: position.x, y: position.y, widgetData: { signal: 0, simulator: defaultSimulatorid } });
               } else {
                 // DEBUG
                 console.log('Add widget ' + name);

app/templates/components/widget-label.hbs

@@ -18,6 +18,7 @@
           <td colspan="2">
             <button {{action 'cancelModal'}}>Cancel</button>
             <button type="submit">Save</button>
+            <button {{action 'deleteModal'}}>Delete</button>
           </td>
         </tr>
       </table>

app/templates/components/widget-table.hbs

@@ -47,6 +47,7 @@
           <td colspan="2">
             <button {{action 'cancelModal'}}>Cancel</button>
             <button type="submit">Save</button>
+            <button {{action 'deleteModal'}}>Delete</button>
           </td>
         </tr>
       </table>

app/templates/components/widget-value.hbs

@@ -42,6 +42,7 @@
           <td colspan="2">
             <button {{action 'cancelModal'}}>Cancel</button>
             <button type="submit">Save</button>
+            <button {{action 'deleteModal'}}>Delete</button>
           </td>
         </tr>
       </table>

app/templates/dialog/widget/value.hbs

@@ -1,5 +0,0 @@
-<h1>Test</h1>
-
-<!-- {{#if isShowingPlotValueModal}} -->
-  
-<!-- {{/if}} -->

app/templates/visualization/edit.hbs

@@ -13,6 +13,10 @@
   {{#draggable-item content='label'}}
     <span>Label</span>
   {{/draggable-item}}
+
+  <p>
+    <i>Hint: Double click widgets to edit or delete them.</i>
+  </p>
 </div>
 
 {{#draggable-dropzone dropped='addWidget'}}