From 16df43054613c6d60f39806dc600d7d24b19dd12 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Thu, 30 Sep 2021 15:07:38 +0200
Subject: [PATCH] Update Droppable

---
 src/block_manager/index.js | 28 +++++++++++++++++++---------
 src/utils/Droppable.js     |  6 +++++-
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/src/block_manager/index.js b/src/block_manager/index.js
index 873e30849..9caa71b76 100644
--- a/src/block_manager/index.js
+++ b/src/block_manager/index.js
@@ -23,9 +23,10 @@
  * * `block:add` - Block added. The [Block] is passed as an argument to the callback.
  * * `block:remove` - Block removed. The [Block] is passed as an argument to the callback.
  * * `block:update` - Block updated. The [Block] and the object containing changes are passed as arguments to the callback.
- * * `block:drag:start` - Started dragging block, model of the block is passed as an argument
- * * `block:drag` - Dragging block, the block's model and the drag event are passed as arguments
- * * `block:drag:stop` - Dragging of the block is stopped. As agruments for the callback you get, the dropped component model (if dropped successfully) and the model of the block
+ * * `block:drag:start` - Started dragging block, the [Block] is passed as an argument.
+ * * `block:drag` - Dragging block, the [Block] is passed as an argument.
+ * * `block:drag:stop` - Dragging of the block is stopped. The dropped [Component] (if dropped successfully) and the [Block] are passed as arguments.
+ * * `block` - Catch-all event for all the events mentioned above. An object containing all the available data about the triggered event is passed as an argument to the callback.
  *
  * ## Methods
  * * [add](#add)
@@ -39,6 +40,7 @@
  * * [render](#render)
  *
  * [Block]: block.html
+ * [Component]: component.html
  *
  * @module BlockManager
  */
@@ -118,19 +120,27 @@ export default () => {
         container: bhv.container,
         drag: block => {
           const cnt = block.getContent ? block.getContent() : block;
-          this.em.set('dragContent', cnt);
-          this.__startSorter(block);
-        }
+          this.__sorterStart(cnt);
+        },
+        dragStop: cancel => this.__sorterEnd(cancel)
       };
     },
 
-    __startSorter(block) {
+    __sorterStart(content) {
       // block:drag
-      const frameViews = this.em
+      this.em.set('dragContent', content);
+      this.__getFrameViews().forEach(fv => fv.droppable.startCustom());
+    },
+
+    __sorterEnd(cancel) {
+      this.__getFrameViews().forEach(fv => fv.droppable.endCustom(cancel));
+    },
+
+    __getFrameViews() {
+      return this.em
         .get('Canvas')
         .getFrames()
         .map(frame => frame.view);
-      frameViews.forEach(fv => fv.droppable.startCustom());
     },
 
     __behaviour(opts = {}) {
diff --git a/src/utils/Droppable.js b/src/utils/Droppable.js
index 4b181f2f5..14c2f1b60 100644
--- a/src/utils/Droppable.js
+++ b/src/utils/Droppable.js
@@ -69,10 +69,15 @@ export default class Droppable {
     this.__customTglEff(true);
   }
 
+  endCustom(cancel) {
+    this.endDrop(cancel);
+  }
+
   endDrop(cancel, ev) {
     const { em, dragStop } = this;
     this.counter = 0;
     dragStop && dragStop(cancel);
+    this.__customTglEff(false);
     em.trigger('canvas:dragend', ev);
   }
 
@@ -184,7 +189,6 @@ export default class Droppable {
     ev.target.style.border = '';
     content && dragContent && dragContent(content);
     this.endDrop(!content, ev);
-    this.__customTglEff(false);
   }
 
   getContentByData(dt) {