From a151cc21635d38c76263ad2ebd2e6275986b9c1c Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Fri, 12 Jan 2018 23:08:26 +0100
Subject: [PATCH] Add HTML5 D&D support in `tlb-move`

---
 src/commands/index.js                        | 28 +++++++++++++-------
 src/dom_components/model/Component.js        |  3 ++-
 src/dom_components/view/ToolbarButtonView.js | 12 +++++++--
 src/utils/Sorter.js                          |  2 +-
 4 files changed, 31 insertions(+), 14 deletions(-)

diff --git a/src/commands/index.js b/src/commands/index.js
index b65d5d1cb..219d7cb86 100644
--- a/src/commands/index.js
+++ b/src/commands/index.js
@@ -142,8 +142,16 @@ module.exports = () => {
 
       defaultCommands['tlb-move'] = {
         run(ed, sender, opts) {
-          var sel = ed.getSelected();
-          var dragger;
+          let dragger;
+          const em = ed.getModel();
+          const event = opts && opts.event;
+          const sel = ed.getSelected();
+          const toolbarStyle = ed.Canvas.getToolbarEl().style;
+
+          setTimeout(() => {
+            toolbarStyle.display = 'none';
+            em.stopDefault();
+          }, 0);
 
           if (!sel || !sel.get('draggable')) {
             console.warn('The element is not draggable');
@@ -160,7 +168,7 @@ module.exports = () => {
 
           const onEnd = (e, opts) => {
             em.runDefault();
-            em.set('selectedComponent', sel);
+            em.setSelected(sel);
             sel.emitUpdate();
             dragger && dragger.blur();
           };
@@ -170,24 +178,24 @@ module.exports = () => {
             console.log('Current ', opts.current);
           };
 
-          var toolbarEl = ed.Canvas.getToolbarEl();
-          toolbarEl.style.display = 'none';
-          var em = ed.getModel();
-          em.stopDefault();
-
           if (em.get('designerMode')) {
             // TODO move grabbing func in editor/canvas from the Sorter
             dragger = editor.runCommand('drag', {
               el: sel.view.el,
               options: {
-                event: opts && opts.event,
+                event,
                 onStart,
                 onDrag,
                 onEnd
               }
             });
           } else {
-            var cmdMove = ed.Commands.get('move-comp');
+            if (event.type == 'dragstart') {
+              event.dataTransfer.setDragImage(sel.view.el, 0, 0);
+              //sel.set('status', 'freezed');
+            }
+
+            const cmdMove = ed.Commands.get('move-comp');
             cmdMove.onEndMoveFromModel = onEnd;
             cmdMove.initSorterFromModel(sel);
           }
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index 96ba79524..17f6c78d4 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -497,7 +497,8 @@ const Component = Backbone.Model.extend(Styleable).extend(
         }
         if (model.get('draggable')) {
           tb.push({
-            attributes: { class: 'fa fa-arrows' },
+            attributes: { class: 'fa fa-arrows', draggable: true },
+            events: { dragstart: 'execCommand' },
             command: 'tlb-move'
           });
         }
diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js
index 13d87930c..e49468176 100644
--- a/src/dom_components/view/ToolbarButtonView.js
+++ b/src/dom_components/view/ToolbarButtonView.js
@@ -1,8 +1,12 @@
 var Backbone = require('backbone');
 
 module.exports = Backbone.View.extend({
-  events: {
-    mousedown: 'handleClick'
+  events() {
+    return (
+      this.model.get('events') || {
+        mousedown: 'handleClick'
+      }
+    );
   },
 
   attributes() {
@@ -16,6 +20,10 @@ module.exports = Backbone.View.extend({
   handleClick(event) {
     event.preventDefault();
     event.stopPropagation();
+    this.execCommand(event);
+  },
+
+  execCommand(event) {
     const opts = { event };
     const command = this.model.get('command');
     const editor = this.editor;
diff --git a/src/utils/Sorter.js b/src/utils/Sorter.js
index 2b919e53e..b9b500779 100644
--- a/src/utils/Sorter.js
+++ b/src/utils/Sorter.js
@@ -278,7 +278,7 @@ module.exports = Backbone.View.extend({
     }
 
     on(container, 'mousemove dragover', this.onMove);
-    on(docs, 'mouseup', this.endMove);
+    on(docs, 'mouseup dragend', this.endMove);
     on(docs, 'keydown', this.rollback);
     onStart && onStart();