feat(drag-n-drop): fixed drag between grids

Author: skutam

projects/angular-grid-layout/src/lib/grid.component.ts

@@ -77,7 +77,6 @@ export type KtdResizeEnd = KtdDragResizeEvent;
 interface KtdDroppedEvent<T> {
     event: PointingDeviceEvent;
     currentLayout: KtdGridLayout;
-    previousLayoutItem: KtdGridLayoutItem<T> | null;   // Previous layout is null only when dragging ktdDrag
     currentLayoutItem: KtdGridLayoutItem<T>;
 }
 
@@ -367,7 +366,10 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     private _gridItemsRenderData: KtdDictionary<KtdGridItemRenderData<number>>;
     private subscriptions: Subscription[];
 
-    private drag: KtdGridDrag | null = null;
+    public get drag(): KtdGridDrag | null {
+        return this._drag;
+    }
+    private _drag: KtdGridDrag | null = null;
 
     private readonly gridElement: HTMLElement;
 
@@ -551,14 +553,6 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             this.dragExited.subscribe(({dragInfo}) => {
                 this.pauseDragSequence(dragInfo);
             }),
-            this.gridService.pointerBeforeEnd$.subscribe(({dragInfo}) => {
-                if (this.drag !== null && dragInfo !== null && dragInfo.currentGrid === this) {
-                    console.log('Grid ', this.id);
-                    this.updateLayout(dragInfo);
-                    this.stopDragSequence(dragInfo);
-                }
-                this.drag = null;
-            }),
         ];
     }
 
@@ -568,10 +562,16 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
      * @param dragInfo The drag info.
      */
     private startRestoreDragSequence(event: PointingDeviceEvent, dragInfo: PointerEventInfo): void {
+        // Drag sequence can be paused, but the resize sequence can't be paused.
         if (this.drag !== null && dragInfo.type === 'resize') {
             return;
         }
 
+        // Prevents the resize from starting if the resize already started on another grid.
+        if (dragInfo.type === 'resize' && this.drag === null && dragInfo.fromGrid !== this) {
+            return;
+        }
+
         const scrollableParent = typeof this.scrollableParent === 'string' ? document.getElementById(this.scrollableParent) : this.scrollableParent;
 
         // TODO (enhancement): consider move this 'side effect' observable inside the main drag loop.
@@ -588,7 +588,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 takeUntil(this.gridService.pointerEnd$),
             ).subscribe());
 
-        this.drag = {
+        this._drag = {
             dragSubscription: this.createDragResizeLoop(scrollableParent, dragInfo),
             scrollSubscription,
             startEvent: event,
@@ -740,7 +740,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         );
     }
 
-    private stopDragSequence(dragInfo: PointerEventInfo): void {
+    public stopDragSequence(dragInfo: PointerEventInfo): void {
         if (this.drag === null) {
             return;
         }
@@ -758,83 +758,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         this.destroyPlaceholder();
         this.drag.dragSubscription?.unsubscribe();
         this.drag.scrollSubscription?.unsubscribe();
-        this.drag = null;
-    }
-
-    public updateLayout(dragInfo: PointerEventInfo): void {
-        if (this.drag != null && this.drag.newLayout) {
-            const currentLayoutItem = dragInfo.fromGrid === null ? {...dragInfo.newLayoutItem, id: this.getNextId()} : dragInfo.newLayoutItem;
-            const previousLayoutItem = this.layout.find(item => item.id === dragInfo.dragRef.id);
-
-            // Dragging from one grid to another
-            if (dragInfo.fromGrid !== dragInfo.currentGrid) {
-                // Add new item to the layout if it is being dragged from outside the grid.
-                this.ngZone.run(() => {
-                    if (dragInfo.fromGrid !== null) {
-                        dragInfo.fromGrid.layoutUpdated.emit(dragInfo.fromGrid.layout.filter(item => item.id !== dragInfo.dragRef.id));
-                    }
-
-                    // Do not emit when:
-                    // - Drag is a resize and bounds have not changed.
-                    // - Drag is a normal drag and the item is being dragged inside the same grid.
-                    // - We are dragging from outside the grid and the item was dragged into the grid, but then pointer was released outside the grid.
-                    if (dragInfo.type !== 'resize' && dragInfo.currentGrid === this) {
-                        this.dropped.emit({
-                            event: dragInfo.moveEvent,
-                            currentLayout: this.drag!.newLayout!.map(item => ({
-                                id: item.id,
-                                x: item.x,
-                                y: item.y,
-                                w: item.w,
-                                h: item.h,
-                                minW: item.minW,
-                                minH: item.minH,
-                                maxW: item.maxW,
-                                maxH: item.maxH,
-                                data: item.data,
-                            })) as KtdGridLayout,
-                            previousLayoutItem: previousLayoutItem !== undefined ? previousLayoutItem : null,
-                            currentLayoutItem: currentLayoutItem,
-                        });
-                        return;
-                    }
-
-                    // Emit when we are not dragging or resizing items already inside the grid.
-                    // this.layoutUpdated.emit(this.drag!.newLayout!);
-                });
-            } else {
-                // Add new item to the layout if it is being dragged from outside the grid.
-                this.ngZone.run(() => {
-                    // Do not emit when:
-                    // - Drag is a resize and bounds have not changed.
-                    // - Drag is a normal drag and the item is being dragged inside the same grid.
-                    // - We are dragging from outside the grid and the item was dragged into the grid, but then pointer was released outside the grid.
-                    if (dragInfo.type !== 'resize' && dragInfo.fromGrid === null && dragInfo.currentGrid === this) {
-                        this.dropped.emit({
-                            event: dragInfo.moveEvent,
-                            currentLayout: this.drag!.newLayout!.map(item => ({
-                                id: item.id,
-                                x: item.x,
-                                y: item.y,
-                                w: item.w,
-                                h: item.h,
-                                minW: item.minW,
-                                minH: item.minH,
-                                maxW: item.maxW,
-                                maxH: item.maxH,
-                                data: item.data,
-                            })) as KtdGridLayout,
-                            previousLayoutItem: previousLayoutItem !== undefined ? previousLayoutItem : null,
-                            currentLayoutItem: currentLayoutItem,
-                        });
-                        return;
-                    }
-
-                    // Emit when we are not dragging or resizing items already inside the grid.
-                    this.layoutUpdated.emit(this.drag!.newLayout!);
-                });
-            }
-        }
+        this._drag = null;
     }
 
     public isPointerInsideGridElement(event: MouseEvent | TouchEvent): boolean {
@@ -844,7 +768,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         return gridElemClientRect.left < pointerX && pointerX < gridElemClientRect.right && gridElemClientRect.top < pointerY && pointerY < gridElemClientRect.bottom;
     }
 
-    private getNextId(): string {
+    public getNextId(): string {
         return this._gridItems.toArray().reduce((acc, cur) => acc > parseInt(cur.id) ? acc : parseInt(cur.id), 0) + 1 + '';
     }
 
@@ -854,9 +778,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
      * @param dragRef that has been dragged
      */
     private addGridItemAnimatingClass(dragRef: DragRef): Observable<undefined> {
-
         return new Observable(observer => {
-
             const duration = getTransformTransitionDurationInMs(dragRef.elementRef.nativeElement);
 
             if (duration === 0) {

projects/angular-grid-layout/src/lib/grid.service.ts

@@ -32,9 +32,6 @@ export class KtdGridService {
     private pointerEndSubject: Subject<MouseEvent | TouchEvent> = new Subject<MouseEvent | TouchEvent>();
     private pointerEndSubscription: Subscription;
 
-    pointerBeforeEnd$: Observable<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}>;
-    private pointerBeforeEndSubject: Subject<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}> = new Subject<{event: MouseEvent | TouchEvent, dragInfo: PointerEventInfo | null}>();
-
     private drag: PointerEventInfo | null = null;
 
     constructor(
@@ -43,7 +40,6 @@ export class KtdGridService {
     ) {
         this.pointerMove$ = this.pointerMoveSubject.asObservable();
         this.pointerEnd$ = this.pointerEndSubject.asObservable();
-        this.pointerBeforeEnd$ = this.pointerBeforeEndSubject.asObservable();
         this.initSubscriptions();
     }
 
@@ -56,12 +52,11 @@ export class KtdGridService {
         this.pointerEndSubscription = this.ngZone.runOutsideAngular(() =>
             ktdPointerUp(document)
                 .subscribe((mouseEvent: MouseEvent | TouchEvent) => {
-                    this.pointerBeforeEndSubject.next({
-                        event: mouseEvent,
-                        dragInfo: this.drag,
-                    });
-                    this.drag = null;
                     this.pointerEndSubject.next(mouseEvent);
+                    if (this.drag !== null) {
+                        this.updateGrids(this.drag);
+                    }
+                    this.drag = null;
                 })
         );
     }
@@ -72,6 +67,7 @@ export class KtdGridService {
      * @param dragRef The dragRef that started the drag sequence.
      * @param type The type of drag sequence.
      * @param grid The grid where the drag sequence started. It can be null if the drag sequence started outside a grid.
+     * @param gridItem The grid item that is being dragged. It can be null if the drag sequence started from outside a grid.
      */
     public startDrag(event: MouseEvent | TouchEvent | PointerEvent, dragRef: DragRef, type: DragActionType, grid: KtdGridComponent | null = null, gridItem: {layoutItem: LayoutItem, renderData: KtdGridItemRenderData<number>} | null = null): void {
         // Make sure, this function is only being called once
@@ -163,6 +159,59 @@ export class KtdGridService {
         this.drag!.currentGrid = grid;
     }
 
+    private updateGrids(drag: PointerEventInfo): void {
+        // If the drag ended outside a grid, we don't need to do anything
+        if (drag.currentGrid === null) {
+            /*
+            * This emit is not required, but when it is not here, it cases a bug where the grid-element,
+            * does not return to its original position when the drag ends outside the grid.
+            * The same thing happens when the resize ends outside the grid.
+            * */
+            drag.fromGrid?.layoutUpdated.emit(drag.fromGrid!.layout);
+            drag.fromGrid?.stopDragSequence(drag);
+            return;
+        }
+
+        if (drag.type === 'resize') {
+            if (drag.fromGrid === drag.currentGrid) {
+                drag.currentGrid.layoutUpdated.emit(drag.currentGrid.drag!.newLayout!);
+            } else {
+                /*
+                 * This emit is not required, but when it is not here, it cases a bug where the grid-element,
+                 * does not return to its original position when the resize ends on another grid than the one it started.
+                 */
+                if (drag.fromGrid !== null && drag.fromGrid.drag !== null) {
+                    drag.fromGrid.layoutUpdated.emit(drag.fromGrid.drag.newLayout!);
+                }
+            }
+        } else {
+            const currentLayoutItem = drag.fromGrid === null ? {
+                ...drag.newLayoutItem,
+                id: drag.currentGrid.getNextId()
+            } : drag.newLayoutItem;
+
+            // Dragging between two distinct grids
+            if (drag.fromGrid !== drag.currentGrid) {
+                // Notify the previous grid that the item has left it
+                drag.fromGrid?.layoutUpdated.emit(drag.fromGrid!.layout.filter(item => item.id !== drag.dragRef.id));
+
+                // Notify the new grid that we dropped new item that was not in any grid
+                drag.currentGrid?.dropped.emit({
+                    event: drag.moveEvent,
+                    currentLayout: drag.currentGrid.drag!.newLayout!.map(item => ({...item})),
+                    currentLayoutItem: currentLayoutItem,
+                });
+            } else {
+                // Update the new grid layout
+                drag.currentGrid.layoutUpdated.emit(drag.currentGrid.drag!.newLayout!);
+            }
+        }
+
+        // Clean up
+        drag.fromGrid?.stopDragSequence(drag);
+        drag.currentGrid?.stopDragSequence(drag);
+    }
+
     dispose() {
         this.pointerMoveSubscription.unsubscribe();
         this.pointerEndSubscription.unsubscribe();