From 77eb19a44a50a0e9866fba006ad1a735a9f7df99 Mon Sep 17 00:00:00 2001
From: Markus Grigull <web@grigull.me>
Date: Thu, 12 Jan 2017 16:24:46 +0100
Subject: [PATCH] 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      | 9 ++++++++-
 app/components/draggable-item.js          | 3 +++
 app/components/widget-label.js            | 9 ++++++++-
 app/components/widget-table.js            | 7 +++++++
 app/components/widget-value.js            | 7 +++++++
 app/controllers/visualization/edit.js     | 8 ++++----
 app/templates/components/widget-label.hbs | 1 +
 app/templates/components/widget-table.hbs | 1 +
 app/templates/components/widget-value.hbs | 1 +
 app/templates/dialog/widget/value.hbs     | 5 -----
 app/templates/visualization/edit.hbs      | 4 ++++
 11 files changed, 44 insertions(+), 11 deletions(-)
 delete mode 100644 app/templates/dialog/widget/value.hbs

diff --git a/app/components/draggable-dropzone.js b/app/components/draggable-dropzone.js
index d0497dc..6fd48a7 100644
--- a/app/components/draggable-dropzone.js
+++ b/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');
   }
diff --git a/app/components/draggable-item.js b/app/components/draggable-item.js
index 087c843..71d5dee 100644
--- a/app/components/draggable-item.js
+++ b/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'));
   }
 });
diff --git a/app/components/widget-label.js b/app/components/widget-label.js
index c94115c..732430e 100644
--- a/app/components/widget-label.js
+++ b/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);
+    },
   }
 });
diff --git a/app/components/widget-table.js b/app/components/widget-table.js
index e3117ef..2bd1f77 100644
--- a/app/components/widget-table.js
+++ b/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);
diff --git a/app/components/widget-value.js b/app/components/widget-value.js
index 1381705..485e0af 100644
--- a/app/components/widget-value.js
+++ b/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);
diff --git a/app/controllers/visualization/edit.js b/app/controllers/visualization/edit.js
index c79f261..930629d 100644
--- a/app/controllers/visualization/edit.js
+++ b/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);
diff --git a/app/templates/components/widget-label.hbs b/app/templates/components/widget-label.hbs
index fa0b636..1c0aefe 100644
--- a/app/templates/components/widget-label.hbs
+++ b/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>
diff --git a/app/templates/components/widget-table.hbs b/app/templates/components/widget-table.hbs
index 082c40a..bb84841 100644
--- a/app/templates/components/widget-table.hbs
+++ b/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>
diff --git a/app/templates/components/widget-value.hbs b/app/templates/components/widget-value.hbs
index c38f79a..6bfb445 100644
--- a/app/templates/components/widget-value.hbs
+++ b/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>
diff --git a/app/templates/dialog/widget/value.hbs b/app/templates/dialog/widget/value.hbs
deleted file mode 100644
index 8f11e5f..0000000
--- a/app/templates/dialog/widget/value.hbs
+++ /dev/null
@@ -1,5 +0,0 @@
-<h1>Test</h1>
-
-<!-- {{#if isShowingPlotValueModal}} -->
-  
-<!-- {{/if}} -->
diff --git a/app/templates/visualization/edit.hbs b/app/templates/visualization/edit.hbs
index ebc1358..9d68285 100644
--- a/app/templates/visualization/edit.hbs
+++ b/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'}}