feat(drag-n-drop): fixed drag-from-outside example, plus some bugs when we have multiple grids

Author: skutam

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

@@ -53,8 +53,8 @@ import {KtdDrag} from "./directives/ktd-drag";
 // region Types
 
 interface KtdGridDrag {
-    dragSubscription: Subscription;
-    scrollSubscription: Subscription;
+    dragSubscription: Subscription | null;
+    scrollSubscription: Subscription | null;
     startEvent: MouseEvent | TouchEvent;
     newLayout: Layout | null;
     newLayoutItem: LayoutItem | null;
@@ -70,18 +70,17 @@ export type KtdDragStart = KtdDragResizeEvent;
 export type KtdDragEnter = KtdGridEnterLeaveEvent;
 export type KtdDragLeave = KtdGridEnterLeaveEvent;
 export type KtdDragEnd = KtdDragResizeEvent;
-export type KtdDropped = KtdDroppedEvent;
+export type KtdDropped<T = any> = KtdDroppedEvent<T>;
 
 export type KtdResizeStart = KtdDragResizeEvent;
 export type KtdResizeEnd = KtdDragResizeEvent;
 
-interface KtdDroppedEvent {
+interface KtdDroppedEvent<T> {
     event: PointingDeviceEvent;
     previousLayout: KtdGridLayout | null;           // Previous layout is null only when dragging ktdDrag
     currentLayout: KtdGridLayout;
-    previousLayoutItem: KtdGridLayoutItem | null;   // Previous layout is null only when dragging ktdDrag
-    currentLayoutItem: KtdGridLayoutItem;
-    data: any;
+    previousLayoutItem: KtdGridLayoutItem<T> | null;   // Previous layout is null only when dragging ktdDrag
+    currentLayoutItem: KtdGridLayoutItem<T>;
 }
 
 export interface KtdGridItemResizeEvent {
@@ -607,6 +606,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
                 h: 1,
                 x: -1,
                 y: -1,
+                data: dragInfo.dragRef.data,
             } : null,
         };
     }
@@ -620,8 +620,10 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
         if (this.drag != null) {
             this.destroyPlaceholder();
-            this.drag.dragSubscription.unsubscribe();
-            this.drag.scrollSubscription.unsubscribe();
+            this.drag.dragSubscription?.unsubscribe();
+            this.drag.scrollSubscription?.unsubscribe();
+            this.drag.dragSubscription = null;
+            this.drag.scrollSubscription = null;
         }
     }
 
@@ -766,7 +768,7 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
         this.addGridItemAnimatingClass(dragInfo.dragRef).subscribe();
         // Consider destroying the placeholder after the animation has finished.
         this.destroyPlaceholder();
-        this.drag.dragSubscription.unsubscribe();
+        this.drag.dragSubscription?.unsubscribe();
         this.drag.scrollSubscription?.unsubscribe();
         this.drag = null;
     }
@@ -778,24 +780,34 @@ export class KtdGridComponent implements OnChanges, AfterContentInit, AfterConte
 
             // Add new item to the layout if it is being dragged from outside the grid.
             this.ngZone.run(() => {
-                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,
-                    })) as KtdGridLayout,
-                    previousLayoutItem: previousLayoutItem !== undefined ? previousLayoutItem : null,
-                    currentLayoutItem: currentLayoutItem !== undefined ? currentLayoutItem : {...this.drag!.newLayoutItem!, id: this.getNextId()},
-                    data: dragInfo.dragRef.data,
-                });
+                // 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!);
             });
         }
     }

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

@@ -3,7 +3,7 @@ import { CompactType } from './utils/react-grid-layout.utils';
 import { KtdClientRect } from './utils/client-rect';
 
 
-export interface KtdGridLayoutItem {
+export interface KtdGridLayoutItem<T = any> {
     id: string;
     x: number;
     y: number;
@@ -13,6 +13,7 @@ export interface KtdGridLayoutItem {
     minH?: number;
     maxW?: number;
     maxH?: number;
+    data?: T;
 }
 
 export type KtdGridCompactType = CompactType;

projects/angular-grid-layout/src/lib/utils/react-grid-layout.utils.ts

@@ -20,6 +20,7 @@ export type LayoutItem = {
     static?: boolean;
     isDraggable?: boolean | null | undefined;
     isResizable?: boolean | null | undefined;
+    data?: any;
 };
 export type Layout = Array<LayoutItem>;
 export type Position = {
@@ -117,6 +118,7 @@ export function cloneLayoutItem(layoutItem: LayoutItem): LayoutItem {
     if (layoutItem.minH !== undefined) { clonedLayoutItem.minH = layoutItem.minH;}
     if (layoutItem.maxH !== undefined) { clonedLayoutItem.maxH = layoutItem.maxH;}
     // These can be null
+    if (layoutItem.data !== undefined) { clonedLayoutItem.data = layoutItem.data;}
     if (layoutItem.isDraggable !== undefined) { clonedLayoutItem.isDraggable = layoutItem.isDraggable;}
     if (layoutItem.isResizable !== undefined) { clonedLayoutItem.isResizable = layoutItem.isResizable;}
 

projects/demo-app/src/app/drag-from-outside/drag-from-outside.component.html

@@ -1,7 +1,7 @@
 
 <div class="pokemons-container">
-    <div *ngFor="let pokemon of pokemonsGen1; let i = index" ktdDrag [connectedTo]="[gridLeft, gridRight]" [width]="1" [id]="pokemon.name" class="pokemon-drag-item">
-        <img [src]="pokemonsGen1Dict[pokemon.name].img">
+    <div *ngFor="let pokemon of pokemonsGen1Dict; let i = index" ktdDrag [ktdDragData]="pokemon" [connectedTo]="[gridLeft, gridRight]" [width]="1" class="pokemon-drag-item">
+        <img [src]="pokemon.img">
         {{pokemon.name}}
     </div>
 </div>
@@ -18,15 +18,17 @@
                   [layout]="layout"
                   [scrollableParent]="document"
                   (dropped)="onLayoutDropped($event)"
-                  (layoutUpdated)="onLayoutUpdated($event)">
+                  (layoutUpdated)="onLayoutUpdated($event)"
+        >
             <ktd-grid-item *ngFor="let item of layout; trackBy:trackById"
                            draggable="true"
                            resizable="true"
                            dragStartThreshold="0"
                            [id]="item.id">
-                {{item.id}} {{pokemonsGen1Dict[item.id] | json}}
-                <img [src]="pokemonsGen1Dict[item.id].img">
-                {{pokemonsGen1Dict[item.id].name}}
+                <div class="pokemon-drag-item">
+                    <img [src]="item.data.img">
+                    <a [href]="item.data.url" target="_blank">{{item.data.name}}</a>
+                </div>
             </ktd-grid-item>
         </ktd-grid>
 
@@ -50,9 +52,10 @@
                            resizable="true"
                            dragStartThreshold="0"
                            [id]="item.id">
-
-                <img [src]="pokemonsGen1Dict[item.id].img">
-                {{pokemonsGen1Dict[item.id].name}}
+                <div class="pokemon-drag-item">
+                    <img [src]="item.data.img">
+                    <a [href]="item.data.url" target="_blank">{{item.data.name}}</a>
+                </div>
             </ktd-grid-item>
         </ktd-grid>
     </div>

projects/demo-app/src/app/drag-from-outside/drag-from-outside.component.ts

@@ -6,10 +6,15 @@ import { CommonModule, DOCUMENT } from '@angular/common';
 import { RouterModule } from '@angular/router';
 import { KtdFooterComponent } from '../components/footer/footer.component';
 import { pokemonsGen1 } from './pokemons-gen1';
-import { KtdDictionary } from '../types';
 import {compact} from "../../../../angular-grid-layout/src/lib/utils/react-grid-layout.utils";
 import {KtdDropped} from "../../../../angular-grid-layout/src/lib/grid.component";
 
+
+interface Pokemon {
+    name: string,
+    url: string,
+    img: string
+}
 @Component({
     selector: 'ktd-drag-from-outside',
     standalone: true,
@@ -25,15 +30,10 @@ export class KtdDragFromOutsideComponent implements OnInit, OnDestroy {
     compactType: KtdGridCompactType = null;
     backgroundConfig: KtdGridBackgroundCfg = {show: 'always'};
 
-    pokemonsGen1 = pokemonsGen1;
-
-    pokemonsGen1Dict: KtdDictionary<{ name: string, url: string, img: string }> = pokemonsGen1.reduce((acc, cur, index) => ({
-        ...acc,
-        [cur.name as string]: {
-            ...cur,
-            img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
-        }
-    }), {})
+    pokemonsGen1Dict: Pokemon[] = pokemonsGen1.map((pokemon, index) => ({
+        ...pokemon,
+        img: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
+    }));
 
     private resizeSubscription: Subscription;
 
@@ -59,7 +59,7 @@ export class KtdDragFromOutsideComponent implements OnInit, OnDestroy {
         this.layout = layout;
     }
 
-    onLayoutDropped(event: KtdDropped) {
+    onLayoutDropped(event: KtdDropped<Pokemon>) {
         console.log('onLayoutDropped', event);
         this.layout = [event.currentLayoutItem, ...event.currentLayout];
         this.layout = compact(this.layout, this.compactType, this.grid.cols);
@@ -70,7 +70,7 @@ export class KtdDragFromOutsideComponent implements OnInit, OnDestroy {
         this.layout2 = layout;
     }
 
-    onLayout2Dropped(event: KtdDropped) {
+    onLayout2Dropped(event: KtdDropped<Pokemon>) {
         console.log('onLayoutDropped', event);
         this.layout2 = [event.currentLayoutItem, ...event.currentLayout];
         this.layout2 = compact(this.layout2, this.compactType, this.grid.cols);