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

Author: skutam

projects/angular-grid-layout/src/lib/directives/ktd-drag.ts

@@ -191,7 +191,10 @@ export class KtdDrag<T> implements AfterContentInit, OnDestroy {
         this.subscriptions.push(
             this._dragHandles.changes.subscribe(() => {
                 this._dragRef.dragHandles = this._dragHandles.toArray();
-            })
+            }),
+            this.dragStart.subscribe(({event}) => {
+                this.gridService.startDrag(event, this._dragRef, 'drag');
+            }),
         );
     }
 

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

@@ -27,7 +27,7 @@ import {
     ktdGridItemDragging, ktdGridItemLayoutItemAreEqual,
     ktdGridItemResizing
 } from './utils/grid.utils';
-import {compact, Layout, LayoutItem} from './utils/react-grid-layout.utils';
+import {compact, Layout} from './utils/react-grid-layout.utils';
 import {
     DragActionType,
     GRID_ITEM_GET_RENDER_DATA_TOKEN,
@@ -57,7 +57,6 @@ interface KtdGridDrag {
     scrollSubscription: Subscription | null;
     startEvent: MouseEvent | TouchEvent;
     newLayout: Layout | null;
-    newLayoutItem: LayoutItem | null;
 }
 
 interface KtdDragResizeEvent {
@@ -77,7 +76,6 @@ export type KtdResizeEnd = KtdDragResizeEvent;
 
 interface KtdDroppedEvent<T> {
     event: PointingDeviceEvent;
-    previousLayout: KtdGridLayout | null;           // Previous layout is null only when dragging ktdDrag
     currentLayout: KtdGridLayout;
     previousLayoutItem: KtdGridLayoutItem<T> | null;   // Previous layout is null only when dragging ktdDrag
     currentLayoutItem: KtdGridLayoutItem<T>;
@@ -356,6 +354,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             layout: this.layout,
             preventCollision: this.preventCollision,
             gap: this.gap,
+            gridId: this.id,
         };
     }
 
@@ -505,7 +504,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
     }
 
     private initSubscriptions() {
-        const itemsConnectedToGrid$ = this.ktdRegistryService.getKtdDragItemsConnectedToGrid(this);
+        // const itemsConnectedToGrid$ = this.ktdRegistryService.getKtdDragItemsConnectedToGrid(this);
         this.subscriptions = [
             this._gridItems.changes.pipe(
                 startWith(this._gridItems),
@@ -536,20 +535,15 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                     event.preventDefault();
                 }
 
-                return this.gridService.startDrag(event, gridItem.dragRef, type, this);
-            }),
+                const layoutItem = this.layout.find((item) => item.id === gridItem.id);
+                const renderData = this._gridItemsRenderData[gridItem.id];
 
-            itemsConnectedToGrid$.pipe(
-                startWith(itemsConnectedToGrid$.value),
-                switchMap((draggableItems) => {
-                    return merge(
-                        ...draggableItems.map((draggableItem) => draggableItem.dragStart.pipe(
-                            map(({source, event}) => ({event, draggableItem, source}))
-                        )),
-                    ).pipe(exhaustMap((data) => of(data)));
-                })
-            ).subscribe(({event, draggableItem}) => {
-                this.gridService.startDrag(event, draggableItem._dragRef, 'drag');
+                if (layoutItem === undefined || renderData === undefined) {
+                    console.error(`Couldn\'t find the specified grid item for the id: ${gridItem.id}`);
+                    return;
+                }
+
+                return this.gridService.startDrag(event, gridItem.dragRef, type, this, {layoutItem, renderData});
             }),
             this.dragEntered.subscribe(({event, dragInfo }) => {
                 this.startRestoreDragSequence(event, dragInfo);
@@ -558,12 +552,11 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 this.pauseDragSequence(dragInfo);
             }),
             this.gridService.pointerBeforeEnd$.subscribe(({dragInfo}) => {
-                if (this.drag !== null && dragInfo !== null) {
+                if (this.drag !== null && dragInfo !== null && dragInfo.currentGrid === this) {
+                    console.log('Grid ', this.id);
                     this.updateLayout(dragInfo);
                     this.stopDragSequence(dragInfo);
                 }
-            }),
-            this.gridService.pointerEnd$.subscribe(() => {
                 this.drag = null;
             }),
         ];
@@ -600,19 +593,10 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
             scrollSubscription,
             startEvent: event,
             newLayout: null,
-            newLayoutItem: dragInfo.dragRef.itemRef instanceof KtdDrag ? {
-                id: dragInfo.dragRef.id,
-                w: 1,
-                h: 1,
-                x: -1,
-                y: -1,
-                data: dragInfo.dragRef.data,
-            } : null,
         };
     }
 
     private pauseDragSequence(dragInfo: PointerEventInfo): void {
-
         // If the drag is a resize, we don't need to pause the drag sequence.
         if (dragInfo.type === 'resize') {
             return;
@@ -672,7 +656,8 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 //  some utilities from 'react-grid-layout' would not work as expected.
                 //
                 const currentLayout: KtdGridLayout = this.drag!.newLayout || this.layout;
-                const ktdLayoutItem = this.drag!.newLayoutItem !== null ? this.drag!.newLayoutItem : currentLayout.find(item => item.id === dragInfo.dragRef.id)!;
+                // const ktdLayoutItem = dragInfo.fromGrid !== this ? dragInfo.newLayoutItem : currentLayout.find(item => item.id === dragInfo.dragRef.id)!;
+                const ktdLayoutItem = dragInfo.newLayoutItem;
 
                 // Get the correct newStateFunc depending on if we are dragging or resizing
                 const calcNewStateFunc = dragInfo.type === 'drag' ? ktdGridItemDragging : ktdGridItemResizing;
@@ -684,12 +669,14 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                     cols: this.cols,
                     preventCollision: this.preventCollision,
                     gap: this.gap,
+                    gridId: this.id,
                 }, this.compactType, {
                     pointerDownEvent: this.drag!.startEvent!,
                     pointerDragEvent,
                     gridElemClientRect,
                     dragElemClientRect,
-                    scrollDifference
+                    scrollDifference,
+                    draggingFromOutside: dragInfo.fromGrid !== this,
                 });
                 this.drag!.newLayout = layout;
 
@@ -702,23 +689,24 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                     layout: this.drag!.newLayout,
                     preventCollision: this.preventCollision,
                     gap: this.gap,
+                    gridId: this.id,
                 }, gridElemClientRect.width, gridElemClientRect.height, draggedLayoutItem);
                 this._gridItemsRenderData = dict;
 
-                if (this.drag!.newLayoutItem !== null) {
-                    this.drag!.newLayoutItem = draggedLayoutItem;
+                if (dragInfo.fromGrid !== this) {
+                    dragInfo.newLayoutItem = draggedLayoutItem;
                     renderData = draggingItem!;
                 }
 
-                const newGridItemRenderData = renderData !== null ? renderData : this._gridItemsRenderData[dragInfo.dragRef.id];
+                const newGridItemRenderData = renderData !== null && dragInfo.fromGrid !== this ? renderData : this._gridItemsRenderData[dragInfo.dragRef.id];
 
                 // Put the real final position to the placeholder element
                 this.placeholder!.style.width = `${newGridItemRenderData.width}px`;
                 this.placeholder!.style.height = `${newGridItemRenderData.height}px`;
                 this.placeholder!.style.transform = `translateX(${newGridItemRenderData.left}px) translateY(${newGridItemRenderData.top}px)`;
 
                 // modify the position of the dragged item to be the once we want (for example the mouse position or whatever)
-                if (renderData !== null) {
+                if (renderData !== null && dragInfo.fromGrid !== this ) {
                     renderData = {
                         ...renderData,
                         ...draggedItemPos,
@@ -775,40 +763,77 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
     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);
-            const currentLayoutItem = this.drag!.newLayout.find(item => item.id === dragInfo.dragRef.id);
-
-            // 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' && this.drag!.newLayoutItem !== null && dragInfo.currentGrid === this) {
-                    this.dropped.emit({
-                        event: dragInfo.moveEvent,
-                        previousLayout: dragInfo.fromGrid !== null ? dragInfo.fromGrid.layout : null,
-                        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 !== undefined ? currentLayoutItem : {...this.drag!.newLayoutItem!, id: this.getNextId()},
-                    });
-                    return;
-                }
 
-                // Emit when we are not dragging or resizing items already inside the grid.
-                this.layoutUpdated.emit(this.drag!.newLayout!);
-            });
+            // 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!);
+                });
+            }
         }
     }
 

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

@@ -35,6 +35,7 @@ export interface KtdGridCfg {
     layout: KtdGridLayoutItem[];
     preventCollision: boolean;
     gap: number;
+    gridId: string;
 }
 
 export type KtdGridLayout = KtdGridLayoutItem[];
@@ -68,4 +69,5 @@ export interface KtdDraggingData {
     gridElemClientRect: KtdClientRect;
     dragElemClientRect: KtdClientRect;
     scrollDifference: { top: number, left: number };
+    draggingFromOutside: boolean;
 }

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

@@ -1,20 +1,23 @@
 import {Injectable, NgZone} from '@angular/core';
 import {Observable, Subject, Subscription} from 'rxjs';
-import {DragActionType} from "./grid.definitions";
+import {DragActionType, KtdGridItemRenderData} from "./grid.definitions";
 import {DragRef} from "./utils/drag-ref";
 import {getDragResizeEventData, KtdGridComponent, PointingDeviceEvent} from "./grid.component";
 import {KtdDrag} from "./directives/ktd-drag";
 import {ktdOutsideZone} from "./utils/operators";
 import {takeUntil} from "rxjs/operators";
 import {ktdPointerMove, ktdPointerUp} from './utils/pointer.utils';
 import {KtdRegistryService} from "./ktd-registry.service";
+import {LayoutItem} from "./utils/react-grid-layout.utils";
 
 
 export interface PointerEventInfo {
     dragRef: DragRef;
     startEvent: PointingDeviceEvent;
     moveEvent: PointingDeviceEvent;
     type: DragActionType;
+    newLayoutItem: LayoutItem;
+    renderData: KtdGridItemRenderData<number> | null;
     fromGrid: KtdGridComponent | null; // The grid where the drag started, it can be null if the drag started outside a grid. For example, when dragging from a connected drag item
     currentGrid: KtdGridComponent | null;
 }
@@ -70,20 +73,34 @@ export class KtdGridService {
      * @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.
      */
-    public startDrag(event: MouseEvent | TouchEvent | PointerEvent, dragRef: DragRef, type: DragActionType, grid: KtdGridComponent | null = null): void {
+    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
         if (this.drag !== null) {
             return;
         }
 
         const isKtdDrag = dragRef.itemRef instanceof KtdDrag;
+
+        if (!isKtdDrag && gridItem === null) {
+            throw new Error('layoutItem must be provided when dragging from a connected drag item');
+        }
+
         this.drag = {
             dragRef,
             startEvent: event,
             moveEvent: event,
             type,
             fromGrid: isKtdDrag ? null : grid,
             currentGrid: null,
+            newLayoutItem: isKtdDrag ? {
+                id: dragRef.id,
+                w: 1,
+                h: 1,
+                x: -1,
+                y: -1,
+                data: dragRef.data,
+            } : gridItem!.layoutItem!,
+            renderData: isKtdDrag ? null : gridItem!.renderData!,
         };
 
         if (grid !== null) {

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

@@ -110,12 +110,4 @@ export class KtdRegistryService<T = any> {
             this.ktdDragItemConnectedToGrid[dragRef.id].push(grid);
         });
     }
-
-    public getKtdDragItemsConnectedToGrid(grid: KtdGridComponent): BehaviorSubject<KtdDrag<T>[]> {
-        return this.gridConnectedToKtdDragItems[grid.id] ? this.gridConnectedToKtdDragItems[grid.id] : new BehaviorSubject<KtdDrag<T>[]>([]);
-    }
-
-    public getGridItemsConnectedToGrid(grid: KtdGridComponent): BehaviorSubject<KtdGridItemComponent<T>[]> {
-        return this.gridConnectedToGridItems[grid.id] ? this.gridConnectedToGridItems[grid.id] : new BehaviorSubject<KtdGridItemComponent<T>[]>([]);
-    }
 }