fix: fix misalignment when scrollbar scrolls to the edge (#389)

* fix: fix misalignment when scrollbar scrolls to the edge * fix: fix misalignment when scrollbar scrolls to the edge * fix: fix misalignment when scrollbar scrolls to the edge * fix: fix misalignment when scrollbar scrolls to the edge * fix: update unit test
worktile · Jul 5, 2023 · 6f5c862 · 6f5c862
1 parent b73c3e3
commit 6f5c862
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 12 deletions.
diff --git a/packages/gantt/src/components/bar/test/bar.drag.spec.ts b/packages/gantt/src/components/bar/test/bar.drag.spec.ts
@@ -168,6 +168,7 @@ describe('bar-drag', () => {
     it('should bar drag', fakeAsync(() => {
         const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[0];
         dragEvent(fixture, bar.nativeElement);
+        tick(200);
         expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-04-21 00:00:00').getUnixTime());
         expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-06-26 23:59:59').getUnixTime());
     }));
@@ -176,13 +177,15 @@ describe('bar-drag', () => {
         const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
         const firstHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[0].nativeElement;
         dragEvent(fixture, firstHandleElement, bar.nativeElement);
+        tick(200);
         expect(bar.componentInstance.item.start.getUnixTime()).toEqual(new GanttDate('2020-05-14 00:00:00').getUnixTime());
     }));
 
     it('should last bar handles drag', fakeAsync(() => {
         const bar = fixture.debugElement.queryAll(By.directive(NgxGanttBarComponent))[1];
         const lastHandleElement = bar.queryAll(By.css('.drag-handles .handle'))[1].nativeElement;
         dragEvent(fixture, lastHandleElement, bar.nativeElement);
+        tick(200);
         expect(bar.componentInstance.item.end.getUnixTime()).toEqual(new GanttDate('2020-07-15 23:59:59').getUnixTime());
     }));
 

diff --git a/packages/gantt/src/components/table/test/table.spec.ts b/packages/gantt/src/components/table/test/table.spec.ts
@@ -1,4 +1,4 @@
-import { fakeAsync, TestBed, ComponentFixture, async, inject, flush } from '@angular/core/testing';
+import { fakeAsync, TestBed, ComponentFixture, async, flush, tick } from '@angular/core/testing';
 import { Component, ViewChild, DebugElement } from '@angular/core';
 import { NgxGanttModule } from 'ngx-gantt';
 import { By } from '@angular/platform-browser';
@@ -152,6 +152,7 @@ describe('GanttTable', () => {
 
         ganttTable.query(By.css('.gantt-table-item')).nativeNode.click();
         fixture.detectChanges();
+        tick(200);
         expect(selectionModel.hasValue()).toBeTrue();
         expect(selectionModel.selected[0]).toEqual(items[0].id);
     }));
@@ -163,6 +164,7 @@ describe('GanttTable', () => {
         const mainItemNode = ganttMain.query(By.css('.gantt-item')).nativeNode;
         itemNode.click();
         fixture.detectChanges();
+        tick(200);
         expect(itemNode.classList).toContain('gantt-table-item-active');
         expect(mainItemNode.classList).toContain('gantt-main-item-active');
     }));

diff --git a/packages/gantt/src/gantt.component.html b/packages/gantt/src/gantt.component.html
@@ -2,7 +2,7 @@
   <div class="gantt-header">
     <gantt-table-header #tableHeader [columns]="columns"></gantt-table-header>
     <div class="gantt-container-header">
-      <gantt-calendar-header></gantt-calendar-header>
+      <gantt-calendar-header [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"></gantt-calendar-header>
     </div>
   </div>
   <gantt-loader *ngIf="loading"></gantt-loader>
@@ -15,7 +15,7 @@
     [maxBufferPx]="styles.lineHeight * 20"
   >
     <ng-container *cdkVirtualFor="let item of flatItems; trackBy: trackBy"></ng-container>
-    <div class="gantt-side" [style.width.px]="tableHeader.tableWidth + 1">
+    <div class="gantt-side" [style.width.px]="tableHeader.tableWidth + 1" [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight">
       <div class="gantt-side-container">
         <div class="gantt-table">
           <gantt-table-body
@@ -38,7 +38,10 @@
       </div>
     </div>
     <div class="gantt-container">
-      <gantt-calendar-grid></gantt-calendar-grid>
+      <gantt-calendar-grid
+        [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"
+        [style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight"
+      ></gantt-calendar-grid>
       <div class="gantt-main">
         <gantt-main
           [flatItems]="flatItems"

diff --git a/packages/gantt/src/gantt.component.ts b/packages/gantt/src/gantt.component.ts
@@ -18,7 +18,8 @@ import {
     ViewChild,
     Optional,
     OnChanges,
-    SimpleChanges
+    SimpleChanges,
+    AfterViewChecked
 } from '@angular/core';
 import { takeUntil, take, finalize, skip } from 'rxjs/operators';
 import { Observable, from } from 'rxjs';
@@ -30,7 +31,7 @@ import { GANTT_ABSTRACT_TOKEN } from './gantt-abstract';
 import { GanttGlobalConfig, GANTT_GLOBAL_CONFIG } from './gantt.config';
 import { NgxGanttRootComponent } from './root.component';
 import { GanttDate } from './utils/date';
-import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, ViewportRuler } from '@angular/cdk/scrolling';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
 import { GanttPrintService } from './gantt-print.service';
 @Component({
@@ -48,7 +49,7 @@ import { GanttPrintService } from './gantt-print.service';
         }
     ]
 })
-export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit {
+export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges, AfterViewInit, AfterViewChecked {
     @Input() maxLevel = 2;
 
     @Input() async: boolean;
@@ -117,6 +118,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         elementRef: ElementRef<HTMLElement>,
         cdr: ChangeDetectorRef,
         ngZone: NgZone,
+        private viewportRuler: ViewportRuler,
         @Optional() private printService: GanttPrintService,
         @Inject(GANTT_GLOBAL_CONFIG) config: GanttGlobalConfig
     ) {
@@ -186,6 +188,18 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         }
     }
 
+    ngAfterViewChecked() {
+        if (this.virtualScrollEnabled && this.viewportRuler && this.virtualScroll.getRenderedRange().end > 0) {
+            this.ngZone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.ganttRoot.verticalScrollbarWidth =
+                        this.virtualScroll.elementRef.nativeElement.offsetWidth - this.virtualScroll.elementRef.nativeElement.clientWidth;
+                    this.cdr.markForCheck();
+                });
+            });
+        }
+    }
+
     private buildFlatItems() {
         const virtualData = [];
         if (this.groups.length) {

diff --git a/packages/gantt/src/root.component.html b/packages/gantt/src/root.component.html
@@ -1,11 +1,14 @@
-<div class="gantt-side" *ngIf="sideTemplate" [style.width.px]="sideWidth">
+<div class="gantt-side" *ngIf="sideTemplate" [style.width.px]="sideWidth" [style.padding-bottom.px]="horizontalScrollbarHeight">
   <div class="gantt-side-container" cdkScrollable>
     <ng-template [ngTemplateOutlet]="sideTemplate"></ng-template>
   </div>
 </div>
 <div class="gantt-container" *ngIf="mainTemplate">
-  <gantt-calendar-header></gantt-calendar-header>
-  <gantt-calendar-grid></gantt-calendar-grid>
+  <gantt-calendar-header [style.padding-right.px]="verticalScrollbarWidth"></gantt-calendar-header>
+  <gantt-calendar-grid
+    [style.padding-right.px]="verticalScrollbarWidth"
+    [style.padding-bottom.px]="horizontalScrollbarHeight"
+  ></gantt-calendar-grid>
   <gantt-drag-backdrop></gantt-drag-backdrop>
   <div class="gantt-main">
     <ng-template [ngTemplateOutlet]="mainTemplate"></ng-template>

diff --git a/packages/gantt/src/root.component.ts b/packages/gantt/src/root.component.ts
@@ -9,7 +9,8 @@ import {
     Input,
     Optional,
     OnDestroy,
-    ViewChild
+    ViewChild,
+    HostListener
 } from '@angular/core';
 import { GanttDomService, ScrollDirection } from './gantt-dom.service';
 import { GanttDragContainer } from './gantt-drag-container';
@@ -39,12 +40,21 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
     /** The native `<gantt-drag-backdrop></gantt-drag-backdrop>` element. */
     @ViewChild(GanttDragBackdropComponent, { static: true, read: ElementRef }) backdrop: ElementRef<HTMLElement>;
 
+    verticalScrollbarWidth = 0;
+
+    horizontalScrollbarHeight = 0;
+
     private unsubscribe$ = new Subject<void>();
 
     private get view() {
         return this.ganttUpper.view;
     }
 
+    @HostListener('window:resize')
+    onWindowResize() {
+        this.updateScrollBarOffset();
+    }
+
     constructor(
         private elementRef: ElementRef<HTMLElement>,
         private ngZone: NgZone,
@@ -76,10 +86,19 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
                 this.ganttUpper.viewChange.pipe(startWith<null, null>(null), takeUntil(this.unsubscribe$)).subscribe(() => {
                     this.scrollToToday();
                 });
+                this.updateScrollBarOffset();
             });
         });
     }
 
+    updateScrollBarOffset() {
+        const ganttMainContainer = this.dom.mainContainer as HTMLElement;
+        const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
+        const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
+        this.verticalScrollbarWidth = verticalScrollbarWidth;
+        this.horizontalScrollbarHeight = horizontalScrollbarHeight;
+    }
+
     ngOnDestroy(): void {
         this.unsubscribe$.next();
     }

diff --git a/packages/gantt/src/test/gantt.component.spec.ts b/packages/gantt/src/test/gantt.component.spec.ts
@@ -451,6 +451,7 @@ describe('ngx-gantt', () => {
             ganttComponentInstance.loading = false;
             fixture.detectChanges();
             loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            tick(200);
             expect(loaderDom).toBeFalsy();
         }));
 
@@ -471,15 +472,17 @@ describe('ngx-gantt', () => {
             ganttComponentInstance.loading = false;
             fixture.detectChanges();
             loaderDom = fixture.debugElement.query(By.directive(GanttLoaderComponent));
+            tick(200);
             expect(loaderDom).toBeFalsy();
         }));
 
-        it('should column inherits the class when gantt-table-column sets class"', fakeAsync(() => {
+        it('should column inherits the class when gantt-table-column sets class', fakeAsync(() => {
             const newItems = mockItems.slice(0, 1);
             ganttComponentInstance.items = [...newItems];
             fixture.detectChanges();
             const ganttTable: DebugElement = ganttDebugElement.query(By.directive(GanttTableBodyComponent));
             const ganttTableColumn = ganttTable.query(By.css('.gantt-table-column')).nativeElement;
+            tick(200);
             expect(ganttTableColumn.classList).toContain('title-name');
             expect(ganttTableColumn.classList).toContain('title-name-2');
             expect(ganttTableColumn.classList).toContain('title-name-3');