Phase 3: Dynamic Proxy Transitioning (Windowing) #7204 starting point

Author: tobiu

apps/colors/view/Viewport.mjs

@@ -43,6 +43,10 @@ class Viewport extends BaseViewport {
             module: Dashboard,
             layout: {ntype: 'vbox', align: 'stretch'},
 
+            listeners: {
+                dragBoundaryExit: 'onDragBoundaryExit'
+            },
+
             items: [{
                 module: Panel,
                 flex  : 1,

apps/colors/view/ViewportController.mjs

@@ -123,6 +123,13 @@ class ViewportController extends Controller {
         }
     }
 
+    /**
+     * @param {Object} data
+     */
+    onDragBoundaryExit(data) {
+        console.log('onDragBoundaryExit', data);
+    }
+
     /**
      * @param {Object} data
      */

src/dashboard/Container.mjs

@@ -43,7 +43,10 @@ class Container extends BaseContainer {
                     appName            : me.appName,
                     boundaryContainerId: me.id,
                     owner              : me,
-                    windowId           : me.windowId
+                    windowId           : me.windowId,
+                    listeners          : {
+                        dragBoundaryExit: data => me.fire('dragBoundaryExit', data)
+                    }
                 })
             })
         }

src/draggable/DragZone.mjs

@@ -33,6 +33,11 @@ class DragZone extends Base {
          * @member {Boolean} addDragProxyCls=true
          */
         addDragProxyCls: true,
+        /**
+         * Allow the drag proxy to move outside of the boundaryContainerId.
+         * @member {Boolean} allowOverdrag=false
+         */
+        allowOverdrag: false,
         /**
          * drag:move will by default only fire in case moveInMainThread === false.
          * In case you want to move the dragProxy inside main but still get the event,
@@ -410,7 +415,7 @@ class DragZone extends Base {
         return {
             alwaysFireDragMove : me.alwaysFireDragMove,
             bodyCursorStyle    : me.bodyCursorStyle,
-            boundaryContainerId: me.boundaryContainerId,
+            boundaryContainerId: me.allowOverdrag ? null : me.boundaryContainerId,
             dragElementRootId  : me.getDragElementRoot().id,
             dragProxyCls       : me.dragProxyCls,
             dragZoneId         : me.id,

src/draggable/container/SortZone.mjs

@@ -1,6 +1,7 @@
-import DragZone from './DragZone.mjs';
-import NeoArray from '../../util/Array.mjs';
-import VDomUtil from '../../util/VDom.mjs';
+import DragZone  from './DragZone.mjs';
+import NeoArray  from '../../util/Array.mjs';
+import Rectangle from '../../util/Rectangle.mjs';
+import VDomUtil  from '../../util/VDom.mjs';
 
 /**
  * @class Neo.draggable.container.SortZone
@@ -100,6 +101,11 @@ class SortZone extends DragZone {
      * @protected
      */
     isOverDragging = false
+    /**
+     * @member {Boolean} isWindowDragging=false
+     * @protected
+     */
+    isWindowDragging = false
 
     /**
      * Toggles the neo-draggable cls on items inside our owner.
@@ -207,6 +213,27 @@ class SortZone extends DragZone {
             return
         }
 
+        // Phase 3: Dynamic Proxy Transitioning
+        if (this.dragProxy && !this.isWindowDragging) {
+            const proxyRect = await this.dragProxy.getDomRect();
+
+            if (proxyRect) {
+                const boundaryRect     = this.boundaryContainerRect;
+                const intersection     = Rectangle.getIntersection(proxyRect, boundaryRect);
+                const proxyArea        = proxyRect.width * proxyRect.height;
+                const intersectionArea = intersection ? intersection.width * intersection.height : 0;
+
+                if (proxyArea > 0 && (intersectionArea / proxyArea) < 0.5) {
+                    this.isWindowDragging = true; // Set flag to prevent re-entry
+
+                    this.fire('dragBoundaryExit', {
+                        draggedItem: Neo.getComponent(this.dragElement.id)
+                    });
+                    return; // Stop further processing in onDragMove
+                }
+            }
+        }
+
         let me                 = this,
             {clientX, clientY} = data,
             index              = me.currentIndex,