fix: append draggingItem to viewportItems when draggingItem not render (

#432)
worktile · Dec 28, 2023 · 1043cc4 · 1043cc4
1 parent 4c3880a
commit 1043cc4
Show file tree

Hide file tree

Showing 4 changed files with 80 additions and 5 deletions.
diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.html b/example/src/app/gantt-virtual-scroll/gantt.component.html
@@ -13,7 +13,13 @@
       (virtualScrolledIndexChange)="virtualScrolledIndexChange($event)"
       [loading]="loading"
     >
-      <ngx-gantt-table>
+      <ngx-gantt-table
+        [draggable]="true"
+        [dropEnterPredicate]="dropEnterPredicate"
+        (dragDropped)="onDragDropped($event)"
+        (dragStarted)="onDragStarted($event)"
+        (dragEnded)="onDragEnded($event)"
+      >
         <ngx-gantt-column name="标题" width="180px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>
         </ngx-gantt-column>

diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.ts b/example/src/app/gantt-virtual-scroll/gantt.component.ts
@@ -1,5 +1,14 @@
 import { Component, OnInit, HostBinding, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
-import { GanttItem, GanttPrintService, GanttVirtualScrolledIndexChangeEvent, NgxGanttComponent } from 'ngx-gantt';
+import {
+    GanttItem,
+    GanttPrintService,
+    GanttTableDragDroppedEvent,
+    GanttTableDragEndedEvent,
+    GanttTableDragEnterPredicateContext,
+    GanttTableDragStartedEvent,
+    GanttVirtualScrolledIndexChangeEvent,
+    NgxGanttComponent
+} from 'ngx-gantt';
 import { delay, of } from 'rxjs';
 import { randomItems, random } from '../helper';
 
@@ -17,6 +26,10 @@ export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewI
 
     loading = false;
 
+    dropEnterPredicate = (event: GanttTableDragEnterPredicateContext) => {
+        return true;
+    };
+
     constructor(private cdr: ChangeDetectorRef) {}
 
     ngOnInit(): void {
@@ -50,4 +63,29 @@ export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewI
             }
         }
     }
+
+    onDragDropped(event: GanttTableDragDroppedEvent) {
+        console.log('拖拽成功了', event);
+        const sourceItems = event.sourceParent?.children || this.items;
+        sourceItems.splice(sourceItems.indexOf(event.source), 1);
+        if (event.dropPosition === 'inside') {
+            event.target.children = [...(event.target.children || []), event.source];
+        } else {
+            const targetItems = event.targetParent?.children || this.items;
+            if (event.dropPosition === 'before') {
+                targetItems.splice(targetItems.indexOf(event.target), 0, event.source);
+            } else {
+                targetItems.splice(targetItems.indexOf(event.target) + 1, 0, event.source);
+            }
+        }
+        this.items = [...this.items];
+    }
+
+    onDragStarted(event: GanttTableDragStartedEvent) {
+        console.log('拖拽开始了', event);
+    }
+
+    onDragEnded(event: GanttTableDragEndedEvent) {
+        console.log('拖拽结束了', event);
+    }
 }
diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -34,8 +34,8 @@
             [draggable]="table.draggable"
             [dropEnterPredicate]="table.dropEnterPredicate"
             (dragDropped)="table.dragDropped.emit($event)"
-            (dragStarted)="table.dragStarted.emit($event)"
-            (dragEnded)="table.dragEnded.emit($event)"
+            (dragStarted)="itemDragStarted($event)"
+            (dragEnded)="itemDragEnded($event)"
             (itemClick)="selectItem($event)"
           >
           </gantt-table-body>

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -30,7 +30,9 @@ import {
     GanttItem,
     GanttSelectedEvent,
     GanttGroupInternal,
-    GanttVirtualScrolledIndexChangeEvent
+    GanttVirtualScrolledIndexChangeEvent,
+    GanttTableDragStartedEvent,
+    GanttTableDragEndedEvent
 } from './class';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
@@ -125,6 +127,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     private flatItemsMap: Dictionary<GanttGroupInternal | GanttItemInternal>;
 
+    private draggingItem: GanttItem;
+
     constructor(
         elementRef: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,
@@ -189,6 +193,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
                 this.rangeStart = range.start;
                 this.rangeEnd = range.end;
                 this.viewportItems = this.flatItems.slice(range.start, range.end);
+                this.appendDraggingItemToViewportItems();
                 this.computeTempDataRefs();
             });
         }
@@ -256,6 +261,22 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.viewportItems = [...this.viewportItems];
     }
 
+    private appendDraggingItemToViewportItems() {
+        if (this.draggingItem) {
+            let flatItem = this.viewportItems.find((item) => {
+                return item.id === this.draggingItem.id;
+            });
+            if (!flatItem) {
+                flatItem = this.flatItems.find((item) => {
+                    return item.id === this.draggingItem.id;
+                });
+                if (flatItem) {
+                    this.viewportItems.push(flatItem);
+                }
+            }
+        }
+    }
+
     expandChildren(item: GanttItemInternal) {
         if (!item.expanded) {
             item.setExpand(true);
@@ -339,4 +360,14 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.expandChange.emit();
         this.cdr.detectChanges();
     }
+
+    itemDragStarted(event: GanttTableDragStartedEvent) {
+        this.table.dragStarted.emit(event);
+        this.draggingItem = event.source;
+    }
+
+    itemDragEnded(event: GanttTableDragEndedEvent) {
+        this.table.dragEnded.emit(event);
+        this.draggingItem = null;
+    }
 }