feat: support load data when virtual scroll #INFR-8626

worktile · Jul 13, 2023 · 1d8b04a · 1d8b04a
1 parent 1f5fdca
commit 1d8b04a
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 7 deletions.
diff --git a/example/src/app/gantt-virtual-scroll/gantt.component.html b/example/src/app/gantt-virtual-scroll/gantt.component.html
@@ -6,7 +6,13 @@
 </div>
 <thy-layout>
   <thy-content>
-    <ngx-gantt #gantt [items]="items" [virtualScrollEnabled]="true">
+    <ngx-gantt
+      #gantt
+      [items]="items"
+      [virtualScrollEnabled]="true"
+      [loadOnVirtualScrollEnabled]="true"
+      (loadOnVirtualScroll)="loadOnVirtualScroll($event)"
+    >
       <ngx-gantt-table>
         <ngx-gantt-column name="标题" width="180px">
           <ng-template #cell let-item="item"> {{ item.title }} </ng-template>

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,6 @@
-import { Component, OnInit, HostBinding, ViewChild, AfterViewInit } from '@angular/core';
+import { Component, OnInit, HostBinding, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core';
 import { GanttItem, GanttPrintService, NgxGanttComponent } from 'ngx-gantt';
+import { delay, of } from 'rxjs';
 import { randomItems, random } from '../helper';
 
 @Component({
@@ -8,13 +9,13 @@ import { randomItems, random } from '../helper';
     providers: [GanttPrintService]
 })
 export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewInit {
-    items: GanttItem[] = randomItems(10000);
+    items: GanttItem[] = randomItems(30);
 
     @HostBinding('class.gantt-example-component') class = true;
 
     @ViewChild('gantt') ganttComponent: NgxGanttComponent;
 
-    constructor() {}
+    constructor(private cdr: ChangeDetectorRef) {}
 
     ngOnInit(): void {
         // init items children
@@ -28,4 +29,16 @@ export class AppGanttVirtualScrollExampleComponent implements OnInit, AfterViewI
     ngAfterViewInit() {
         setTimeout(() => this.ganttComponent.scrollToDate(1627729997), 200);
     }
+
+    loadOnVirtualScroll($event: number) {
+        const items = randomItems(100);
+        of(items)
+            .pipe(delay(1000))
+            .subscribe(() => {
+                console.log('loadDone', $event);
+                this.items = [...this.items, ...items];
+                console.log(this.items);
+                this.cdr.detectChanges();
+            });
+    }
 }
diff --git a/example/src/app/helper.ts b/example/src/app/helper.ts
@@ -11,7 +11,7 @@ export function randomItems(length: number, parent?: GanttItem, group?: string)
         const start = addDays(new Date(), random(-200, 200));
         const end = addDays(start, random(0, 100));
         items.push({
-            id: `${parent?.id || group || ''}00000${i}`,
+            id: `${parent?.id || group || ''}${Math.floor(Math.random() * 100000000)}`,
             title: `${parent?.title || 'Task'}-${i}`,
             start: getUnixTime(start),
             end: getUnixTime(end),

diff --git a/example/src/styles.scss b/example/src/styles.scss
@@ -45,6 +45,7 @@ $primary: #6698ff;
     margin: 20px;
     border: 1px solid #eee;
     height: calc(100vh - 95px);
+    overflow: auto;
 
     .thy-layout-header {
       .layout-header-title {

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -32,7 +32,6 @@ import { NgxGanttRootComponent } from './root.component';
 import { GanttDate } from './utils/date';
 import { CdkVirtualScrollViewport, ViewportRuler } from '@angular/cdk/scrolling';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
-
 @Component({
     selector: 'ngx-gantt',
     templateUrl: './gantt.component.html',
@@ -75,6 +74,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @Input() virtualScrollEnabled = true;
 
+    @Input() loadOnVirtualScrollEnabled = false;
+
     @Input() loadingDelay: number = 0;
 
     @Output() linkDragStarted = new EventEmitter<GanttLinkDragEvent>();
@@ -85,6 +86,8 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @Output() selectedChange = new EventEmitter<GanttSelectedEvent>();
 
+    @Output() loadOnVirtualScroll = new EventEmitter<number>();
+
     @ContentChild(NgxGanttTableComponent) override table: NgxGanttTableComponent;
 
     @ContentChildren(NgxGanttTableColumnComponent, { descendants: true }) columns: QueryList<NgxGanttTableColumnComponent>;
@@ -166,6 +169,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
                 this.computeTempDataRefs();
             }
             if (changes.originItems || changes.originGroups) {
+                console.log('build');
                 this.buildFlatItems();
                 this.viewportItems = this.flatItems.slice(this.rangeStart, this.rangeEnd);
                 this.computeTempDataRefs();
@@ -176,6 +180,10 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
     ngAfterViewInit() {
         if (this.virtualScrollEnabled) {
             this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
+                console.log(range);
+                if (this.flatItems.length <= range.end && this.loadOnVirtualScrollEnabled) {
+                    this.loadOnVirtualScroll.emit(range.start);
+                }
                 const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay') as HTMLDivElement;
                 linksElement.style.top = `${-(this.styles.lineHeight * range.start)}px`;
                 this.rangeStart = range.start;
@@ -219,7 +227,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.flatItemsMap = keyBy(this.flatItems, 'id');
         if (!this.virtualScrollEnabled) {
             this.rangeStart = 0;
-            this.rangeEnd = this.flatItems.length - 1;
+            this.rangeEnd = this.flatItems.length;
         }
     }