From c3dfffee19d196eeaa24a3720e6fda7d1c298092 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Tue, 15 Oct 2019 19:40:55 +0200
Subject: [PATCH] Trigger events for Drag mode

---
 src/commands/view/ComponentDrag.js | 47 +++++++++++++++++-------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js
index 72196a909..9f02608c2 100644
--- a/src/commands/view/ComponentDrag.js
+++ b/src/commands/view/ComponentDrag.js
@@ -50,16 +50,20 @@ export default {
 
     event && drg.start(event);
     this.toggleDrag(1);
-    this.em.trigger(`${evName}:start`, {
-      mode,
-      target,
-      guidesTarget: this.guidesTarget,
-      guidesStatic: this.guidesStatic
-    });
+    this.em.trigger(`${evName}:start`, this.getEventOpts());
 
     return drg;
   },
 
+  getEventOpts() {
+    return {
+      mode: this.opts.mode,
+      target: this.target,
+      guidesTarget: this.guidesTarget,
+      guidesStatic: this.guidesStatic
+    };
+  },
+
   stop() {
     this.toggleDrag();
   },
@@ -354,6 +358,7 @@ export default {
     onEnd && onEnd(...args);
     editor.stopCommand(id);
     this.hideGuidesInfo();
+    this.em.trigger(`${evName}:end`, this.getEventOpts());
   },
 
   hideGuidesInfo() {
@@ -414,29 +419,31 @@ export default {
         const statEdge2Raw = isY
           ? rect.left + rect.width
           : rect.top + rect.height;
-        const pos2 = `${isY ? item.y : item.x}px`;
+        const posFirst = isY ? item.y : item.x;
+        const posSecond = isEdge1 ? statEdge2 : origEdge2;
+        const pos2 = `${posFirst}px`;
         const size = isEdge1 ? origEdge1 - statEdge2 : statEdge1 - origEdge2;
         const sizeRaw = isEdge1
           ? origEdge1Raw - statEdge2Raw
           : statEdge1Raw - origEdge2Raw;
         guideInfoStyle.display = '';
         guideInfoStyle[isY ? 'top' : 'left'] = pos2;
-        guideInfoStyle[isY ? 'left' : 'top'] = `${
-          isEdge1 ? statEdge2 : origEdge2
-        }px`;
+        guideInfoStyle[isY ? 'left' : 'top'] = `${posSecond}px`;
         guideInfoStyle[isY ? 'width' : 'height'] = `${size}px`;
         elGuideInfoCnt.innerHTML = `${Math.round(sizeRaw)}px`;
+        this.em.trigger(`${evName}:active`, {
+          ...this.getEventOpts(),
+          guide: item,
+          guidesStatic,
+          matched: res,
+          posFirst,
+          posSecond,
+          size,
+          sizeRaw,
+          elGuideInfo,
+          elGuideInfoCnt
+        });
       }
-      console.log({
-        guide: item,
-        guidesStatic,
-        matchStatic: res
-      });
-      this.em.trigger(`${evName}:active`, {
-        guide: item,
-        guidesStatic,
-        matchStatic: res
-      });
     });
   },