#7204 dragBoundaryEntry event

Author: tobiu

apps/colors/view/Viewport.mjs

@@ -44,7 +44,8 @@ class Viewport extends BaseViewport {
             layout: {ntype: 'vbox', align: 'stretch'},
 
             listeners: {
-                dragBoundaryExit: 'onDragBoundaryExit'
+                dragBoundaryEntry: 'onDragBoundaryEntry',
+                dragBoundaryExit : 'onDragBoundaryExit'
             },
 
             items: [{

apps/colors/view/ViewportController.mjs

@@ -21,6 +21,10 @@ class ViewportController extends Controller {
      * @member {Number|null} intervalId
      */
     intervalId = null
+    /**
+     * @member {Boolean} #isWindowDragging=false
+     */
+    #isWindowDragging = false
     /**
      * @member {Object} widgetIndexMap
      */
@@ -93,8 +97,14 @@ class ViewportController extends Controller {
      * @param {Number} data.windowId
      */
     async onAppDisconnect(data) {
-        let me                  = this,
-            {appName, windowId} = data,
+        let me = this;
+
+        if (me.#isWindowDragging) {
+            me.#isWindowDragging = false;
+            return
+        }
+
+        let {appName, windowId} = data,
             url                 = await Neo.Main.getByPath({path: 'document.URL', windowId}),
             widgetName          = new URL(url).searchParams.get('name'),
             widget              = me.getReference(widgetName);
@@ -111,25 +121,6 @@ class ViewportController extends Controller {
         }
     }
 
-    /**
-     * @param {Object} data
-     */
-    async onDragBoundaryExit(data) {
-        let {draggedItem, proxyRect, sortZone} = data,
-            widgetName                         = draggedItem.reference.replace('-panel', ''),
-            popupData;
-
-        // Prohibit the size reduction inside #openWidgetInPopup().
-        proxyRect.height += 50;
-
-        popupData = await this.#openWidgetInPopup(widgetName, proxyRect);
-
-        sortZone.startWindowDrag({
-            dragData: data,
-            ...popupData
-        });
-    }
-
     /**
      * @param {Object} data
      */
@@ -202,6 +193,34 @@ class ViewportController extends Controller {
         await this.createBrowserWindow('pie-chart')
     }
 
+    /**
+     * @param {Object} data
+     */
+    onDragBoundaryEntry(data) {
+        console.log('onDragBoundaryEntry', data)
+    }
+
+    /**
+     * @param {Object} data
+     */
+    async onDragBoundaryExit(data) {
+        let {draggedItem, proxyRect, sortZone} = data,
+            widgetName                         = draggedItem.reference.replace('-panel', ''),
+            popupData;
+
+        this.#isWindowDragging = true;
+
+        // Prohibit the size reduction inside #openWidgetInPopup().
+        proxyRect.height += 50;
+
+        popupData = await this.#openWidgetInPopup(widgetName, proxyRect);
+
+        sortZone.startWindowDrag({
+            dragData: data,
+            ...popupData
+        });
+    }
+
     /**
      * @param {Object} data
      */

src/dashboard/Container.mjs

@@ -47,7 +47,8 @@ class Container extends BaseContainer {
                     owner              : me,
                     windowId           : me.windowId,
                     listeners          : {
-                        dragBoundaryExit: data => me.fire('dragBoundaryExit', data)
+                        dragBoundaryEntry: data => me.fire('dragBoundaryEntry', data),
+                        dragBoundaryExit : data => me.fire('dragBoundaryExit',  data)
                     }
                 })
             })

src/draggable/container/SortZone.mjs

@@ -224,7 +224,7 @@ class SortZone extends DragZone {
 
         if (me.dragProxy && me.enableProxyToPopup) {
             const {proxyRect} = data;
-console.log(proxyRect);
+
             if (proxyRect && me.boundaryContainerRect) {
                 const
                     boundaryRect     = me.boundaryContainerRect,
@@ -244,7 +244,13 @@ console.log(proxyRect);
                         return // Stop further processing in onDragMove
                     }
                 } else if (me.isWindowDragging) {
-                    console.log(proxyArea, intersectionArea, (intersectionArea / proxyArea) > 0.51);
+                    if (proxyArea > 0 && (intersectionArea / proxyArea) > 0.51) {
+                        me.fire('dragBoundaryEntry', {
+                            draggedItem: Neo.getComponent(me.dragElement.id),
+                            proxyRect,
+                            sortZone   : me
+                        });
+                    }
                     return;
                 }
             }

src/main/addon/DragDrop.mjs

@@ -293,7 +293,7 @@ class DragDrop extends Base {
                 ...me.getEventData(event),
                 offsetX  : me.offsetX,
                 offsetY  : me.offsetY,
-                proxyRect: new DOMRect(x, y, me.popupWidth, me.popupHeight),
+                proxyRect: new DOMRect(x - window.screenX, y - window.screenY, me.popupWidth, me.popupHeight),
                 screenX  : originalEvent.screenX,
                 screenY  : originalEvent.screenY,
                 type     : 'drag:move'