#7204 popup drag:move events (WIP)

Author: tobiu

apps/colors/view/ViewportController.mjs

@@ -115,10 +115,19 @@ class ViewportController extends Controller {
      * @param {Object} data
      */
     async onDragBoundaryExit(data) {
-        let {draggedItem, proxyRect} = data,
-            widgetName               = draggedItem.reference.replace('-panel', '');
+        let {draggedItem, proxyRect, sortZone} = data,
+            widgetName                         = draggedItem.reference.replace('-panel', ''),
+            popupData;
 
-        await this.#openWidgetInPopup(widgetName, proxyRect);
+        // Prohibit the size reduction inside #openWidgetInPopup().
+        proxyRect.height += 50;
+
+        popupData = await this.#openWidgetInPopup(widgetName, proxyRect);
+
+        sortZone.startWindowDrag({
+            dragData: data,
+            ...popupData
+        });
     }
 
     /**
@@ -271,7 +280,9 @@ class ViewportController extends Controller {
             url,
             windowFeatures: `height=${popupHeight},left=${popupLeft},top=${popupTop},width=${width}`,
             windowName    : name
-        })
+        });
+
+        return {popupHeight, popupLeft, popupTop, popupWidth: width, windowName: name}
     }
 
     /**

src/dashboard/Container.mjs

@@ -43,6 +43,7 @@ class Container extends BaseContainer {
                     allowOverdrag      : true,
                     appName            : me.appName,
                     boundaryContainerId: me.id,
+                    enableProxyToPopup : true,
                     owner              : me,
                     windowId           : me.windowId,
                     listeners          : {

src/draggable/container/SortZone.mjs

@@ -40,6 +40,10 @@ class SortZone extends DragZone {
          * @member {String|null} dragHandleSelector=null
          */
         dragHandleSelector: null,
+        /**
+         * @member {Boolean} enableProxyToPopup=false
+         */
+        enableProxyToPopup: false,
         /**
          * @member {Object} indexMap=null
          * @protected
@@ -218,24 +222,30 @@ class SortZone extends DragZone {
             return
         }
 
-        if (me.dragProxy && !me.isWindowDragging) {
+        if (me.dragProxy && me.enableProxyToPopup) {
             const {proxyRect} = data;
-
+console.log(proxyRect);
             if (proxyRect && me.boundaryContainerRect) {
                 const
                     boundaryRect     = me.boundaryContainerRect,
                     intersection     = Rectangle.getIntersection(proxyRect, boundaryRect),
                     proxyArea        = proxyRect.width * proxyRect.height,
                     intersectionArea = intersection ? intersection.width * intersection.height : 0;
 
-                if (proxyArea > 0 && (intersectionArea / proxyArea) < 0.5) {
-                    me.isWindowDragging = true; // Set flag to prevent re-entry
+                if (!me.isWindowDragging) {
+                    if (proxyArea > 0 && (intersectionArea / proxyArea) < 0.5) {
+                        me.isWindowDragging = true; // Set flag to prevent re-entry
 
-                    me.fire('dragBoundaryExit', {
-                        draggedItem: Neo.getComponent(me.dragElement.id),
-                        proxyRect
-                    });
-                    return // Stop further processing in onDragMove
+                        me.fire('dragBoundaryExit', {
+                            draggedItem: Neo.getComponent(me.dragElement.id),
+                            proxyRect,
+                            sortZone   : me
+                        });
+                        return // Stop further processing in onDragMove
+                    }
+                } else if (me.isWindowDragging) {
+                    console.log(proxyArea, intersectionArea, (intersectionArea / proxyArea) > 0.51);
+                    return;
                 }
             }
         }
@@ -433,6 +443,23 @@ class SortZone extends DragZone {
         me.isScrolling = false
     }
 
+    /**
+     * @param {Object} data
+     */
+    startWindowDrag(data) {
+        let me            = this,
+            {popupHeight, popupWidth, windowName} = data;
+
+        // Hide the drag proxy since the window is now the visual indicator
+        me.dragProxy.hidden = true;
+
+        Neo.main.addon.DragDrop.startWindowDrag({
+            popupHeight,
+            popupName: windowName,
+            popupWidth
+        });
+    }
+
     /**
      * @param {Number} index1
      * @param {Number} index2

src/main/addon/DragDrop.mjs

@@ -87,6 +87,11 @@ class DragDrop extends Base {
          * @member {Number} initialScrollTop=0
          */
         initialScrollTop: 0,
+        /**
+         * @member {Boolean} isWindowDragging=false
+         * @protected
+         */
+        isWindowDragging: false,
         /**
          * @member {Boolean} moveHorizontal=true
          */
@@ -103,6 +108,11 @@ class DragDrop extends Base {
          * @member {Number} offsetY=0
          */
         offsetY: 0,
+        /**
+         * @member {String|null} popupName=null
+         * @protected
+         */
+        popupName: null,
         /**
          * Remote method access for other workers
          * @member {Object} remote
@@ -112,7 +122,8 @@ class DragDrop extends Base {
             app: [
                 'requestWindowManagementPermission',
                 'setConfigs',
-                'setDragProxyElement'
+                'setDragProxyElement',
+                'startWindowDrag'
             ]
         },
         /**
@@ -247,24 +258,50 @@ class DragDrop extends Base {
             dropZoneIdentifier    : null,
             initialScrollLeft     : 0,
             initialScrollTop      : 0,
+            isWindowDragging      : false,
             moveHorizontal        : true,
             moveVertical          : true,
+            popupHeight           : null,
+            popupName             : null,
+            popupWidth            : null,
             scrollContainerElement: null,
             scrollContainerRect   : null,
             setScrollFactorLeft   : 1,
-            scrollFactorTop       : 1
+            scrollFactorTop       : 1,
+            windowName            : null
         })
     }
 
     /**
      * @param {Event} event
      */
     onDragMove(event) {
-        let me        = this,
-            proxyRect = me.dragProxyRect,
-            rect      = me.boundaryContainerRect,
+        let me              = this,
+            {originalEvent} = event.detail,
+            proxyRect       = me.dragProxyRect,
+            rect            = me.boundaryContainerRect,
             data, left, top;
 
+        if (me.isWindowDragging) {
+            const
+                x = originalEvent.screenX - (me.offsetX || 0),
+                y = originalEvent.screenY - (me.offsetY || 0);
+
+            Neo.Main.windowMoveTo({windowName: me.popupName, x, y});
+
+            DomEvents.sendMessageToApp({
+                ...me.getEventData(event),
+                offsetX  : me.offsetX,
+                offsetY  : me.offsetY,
+                proxyRect: new DOMRect(x, y, me.popupWidth, me.popupHeight),
+                screenX  : originalEvent.screenX,
+                screenY  : originalEvent.screenY,
+                type     : 'drag:move'
+            });
+
+            return
+        }
+
         if (me.scrollContainerElement) {
             data = me.scrollContainer({
                 clientX: event.detail.clientX,
@@ -542,6 +579,16 @@ class DragDrop extends Base {
     setDragProxyElement(data) {
         this.dragProxyElement = document.getElementById(data.id)
     }
+
+    /**
+     * @param {Object} data
+     * @param {String} data.popupHeight
+     * @param {String} data.popupName
+     * @param {String} data.popupWidth
+     */
+    startWindowDrag({popupHeight, popupName, popupWidth}) {
+        Object.assign(this, {isWindowDragging: true, popupHeight, popupName, popupWidth})
+    }
 }
 
 export default Neo.setupClass(DragDrop);