fix(flat): fix group items empty style and fix load on scroll

example/src/app/examples/examples.component.html

@@ -24,6 +24,7 @@
     [draggable]="options.draggable"
     (barClick)="barClick($event)"
     (dragEnded)="dragEnded($event)"
+    (loadOnScroll)="loadOnScroll($event)"
   >
     <ngx-gantt-table>
       <ngx-gantt-column name="标题">

example/src/app/examples/examples.component.ts

@@ -1,7 +1,6 @@
 import { Component, OnInit, HostBinding } from '@angular/core';
 import { mockItems, mockGroups } from './mocks';
-import { GanttBarClickEvent, GanttViewType } from '../../../../packages/gantt/src/class';
-import { GanttDragEvent } from 'dist/gantt/class';
+import { GanttBarClickEvent, GanttViewType, GanttLoadOnScrollEvent, GanttDragEvent } from 'ngx-gantt';
 
 @Component({
     selector: 'app-examples-gantt',
@@ -32,4 +31,8 @@ export class AppExamplesComponent implements OnInit {
         this.groups = [...this.groups];
         this.items = [...this.items];
     }
+
+    loadOnScroll(event: GanttLoadOnScrollEvent) {
+        this.items = [this.items[0]];
+    }
 }

packages/gantt/src/class/event.ts

@@ -1,26 +1,26 @@
 import { GanttItem } from './item';
 
-export class GanttDragEvent {
-    item: GanttItem;
+export class GanttDragEvent<T = unknown> {
+    item: GanttItem<T>;
 }
 
-export class GanttLinkDragEvent {
-    source: GanttItem;
-    dependent?: GanttItem;
+export class GanttLinkDragEvent<T = unknown> {
+    source: GanttItem<T>;
+    dependent?: GanttItem<T>;
 }
 
 export class GanttLoadOnScrollEvent {
     start: number;
     end: number;
 }
 
-export class GanttLinkEvent {
+export class GanttLinkEvent<T = unknown> {
     event: MouseEvent;
-    source: GanttItem;
-    dependent: GanttItem;
+    source: GanttItem<T>;
+    dependent: GanttItem<T>;
 }
 
-export class GanttBarClickEvent {
+export class GanttBarClickEvent<T = unknown> {
     event: Event;
-    item: GanttItem;
+    item: GanttItem<T>;
 }

packages/gantt/src/components/bar/bar.component.ts

@@ -12,7 +12,8 @@ import {
     NgZone,
     ViewChild,
     Output,
-    EventEmitter
+    EventEmitter,
+    AfterViewInit
 } from '@angular/core';
 import { GanttItemInternal } from '../../class/item';
 import { GanttRef, GANTT_REF_TOKEN } from '../../gantt-ref';
@@ -33,7 +34,7 @@ function linearGradient(sideOrCorner: string, color: string, stop: string) {
     templateUrl: './bar.component.html',
     providers: [GanttBarDrag]
 })
-export class GanttBarComponent implements OnInit, OnChanges, OnDestroy {
+export class GanttBarComponent implements OnInit, AfterViewInit, OnChanges, OnDestroy {
     @Input() item: GanttItemInternal;
 
     @Input() template: TemplateRef<any>;
@@ -64,17 +65,16 @@ export class GanttBarComponent implements OnInit, OnChanges, OnDestroy {
         this.item.refs$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
             this.setPositions();
         });
-
-        this.ngZone.onStable.pipe(take(1)).subscribe(() => {
-            this.drag.createDrags(this.elementRef, this.item, this.ganttRef);
-
-            // update content style after drag end
-            this.dragContainer.dragEnded.pipe(startWith(null), takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.setContentBackground();
-            });
+        this.dragContainer.dragEnded.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
+            this.setContentBackground();
         });
     }
 
+    ngAfterViewInit() {
+        this.drag.createDrags(this.elementRef, this.item, this.ganttRef);
+        this.setContentBackground();
+    }
+
     ngOnChanges(changes: SimpleChanges): void {
         if (!this.firstChange) {
             this.setPositions();

packages/gantt/src/flat/gantt-flat.component.html

@@ -7,7 +7,7 @@
       <div
         class="gantt-flat-side-group"
         *ngFor="let group of groups; trackBy: trackBy"
-        [style.height.px]="group.mergedItems.length * styles.lineHeight"
+        [style.height.px]="(group.mergedItems.length) * styles.lineHeight"
       >
         <ng-template [ngTemplateOutlet]="groupTemplate" [ngTemplateOutletContext]="{ group: group.origin }"></ng-template>
       </div>

packages/gantt/src/flat/gantt-flat.component.scss

@@ -14,6 +14,7 @@
     .gantt-flat-side-group {
         padding: $gantt-flat-group-padding;
         border-bottom: 1px solid $gantt-border-color;
+        box-sizing: content-box;
     }
 
     .gantt-flat-group {

packages/gantt/src/flat/gantt-flat.component.ts

@@ -89,6 +89,8 @@ export class NgxGanttFlatComponent extends GanttUpper implements OnInit, OnChang
                 this.computeItemRef(item);
             });
             group.mergedItems = this.buildGroupMergedItems(group);
+            // 如果没有数据，默认填充一行空行
+            group.mergedItems = group.mergedItems.length === 0 ? [[]] : group.mergedItems;
         });
     }
 

packages/gantt/src/gantt-upper.ts

@@ -30,6 +30,7 @@ import { takeUntil, take, skip } from 'rxjs/operators';
 import { GanttDragContainer } from './gantt-drag-container';
 import { Subject } from 'rxjs';
 import { GanttCalendarComponent } from './components/calendar/calendar.component';
+import { uniqBy } from './utils/helpers';
 
 export abstract class GanttUpper {
     @Input('items') originItems: GanttItem[] = [];
@@ -172,6 +173,7 @@ export abstract class GanttUpper {
 
     private setupItems() {
         this.items = [];
+        this.originItems = uniqBy(this.originItems, 'id');
         if (this.groups.length > 0) {
             this.originItems.forEach((origin) => {
                 const group = this.groupsMap[origin.group_id];
@@ -211,15 +213,17 @@ export abstract class GanttUpper {
                     const dates = this.view.addStartDate();
                     if (dates) {
                         event.target.scrollLeft += this.view.getDateRangeWidth(dates.start, dates.end);
-                        this.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                        this.cdr.detectChanges();
+                        this.ngZone.run(() => {
+                            this.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
+                        });
                     }
                 }
                 if (event.direction === ScrollDirection.RIGHT) {
                     const dates = this.view.addEndDate();
                     if (dates) {
-                        this.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
-                        this.cdr.detectChanges();
+                        this.ngZone.run(() => {
+                            this.loadOnScroll.emit({ start: dates.start.getUnixTime(), end: dates.end.getUnixTime() });
+                        });
                     }
                 }
             });

packages/gantt/src/utils/helpers.ts

@@ -1,3 +1,7 @@
+export interface Dictionary<T = unknown> {
+    [key: string]: T;
+}
+
 export function isNumber(value: any) {
     return typeof value === 'number';
 }
@@ -9,3 +13,16 @@ export function hexToRgb(color: string, opacity = 1) {
         return null;
     }
 }
+
+export function uniqBy<T = unknown>(array: T[], key: keyof T) {
+    const valuesMap: Dictionary<T> = {};
+    const result = [];
+    (array || []).forEach((value) => {
+        const _key = value[key as string];
+        if (!valuesMap[_key]) {
+            valuesMap[_key] = value;
+            result.push(value);
+        }
+    });
+    return result;
+}