fix: fix misalignment when scrollbar scrolls to the edge

worktile · Jul 4, 2023 · f865ec3 · f865ec3
1 parent 2413774
commit f865ec3
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 9 deletions.
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]="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]="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]="verticalScrollbarWidth"
+        [style.padding-bottom.px]="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,
+    HostListener
 } from '@angular/core';
 import { takeUntil, take, finalize, skip } from 'rxjs/operators';
 import { Observable, from } from 'rxjs';
@@ -34,6 +35,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
 import { GanttPrintService } from './gantt-print.service';
 import { InputBoolean } from 'ngx-tethys/core';
+import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.component';
 @Component({
     selector: 'ngx-gantt',
     templateUrl: './gantt.component.html',
@@ -96,6 +98,17 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
 
     @ViewChild(CdkVirtualScrollViewport) virtualScroll: CdkVirtualScrollViewport;
 
+    @ViewChild(GanttMainComponent, { static: true, read: ElementRef }) ganttMainContent: ElementRef;
+
+    @HostListener('window:resize')
+    onWindowResize() {
+        this.updateScrollBarOffset();
+    }
+
+    verticalScrollbarWidth = 0;
+
+    horizontalScrollbarHeight = 0;
+
     get loading() {
         return this._loading;
     }
@@ -185,6 +198,9 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
                 this.computeTempDataRefs();
             });
         }
+        setTimeout(() => {
+            this.updateScrollBarOffset();
+        });
     }
 
     private buildFlatItems() {
@@ -235,6 +251,16 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.viewportItems = [...this.viewportItems];
     }
 
+    private updateScrollBarOffset() {
+        if (this.ganttMainContent?.nativeElement) {
+            const ganttMainContainer = this.ganttMainContent.nativeElement;
+            const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
+            const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
+            this.verticalScrollbarWidth = verticalScrollbarWidth;
+            this.horizontalScrollbarHeight = horizontalScrollbarHeight;
+        }
+    }
+
     expandChildren(item: GanttItemInternal) {
         if (!item.expanded) {
             item.setExpand(true);

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,9 @@ import {
     Input,
     Optional,
     OnDestroy,
-    ViewChild
+    ViewChild,
+    AfterViewInit,
+    HostListener
 } from '@angular/core';
 import { GanttDomService, ScrollDirection } from './gantt-dom.service';
 import { GanttDragContainer } from './gantt-drag-container';
@@ -29,7 +31,7 @@ import { GanttDate } from './utils/date';
         class: 'gantt'
     }
 })
-export class NgxGanttRootComponent implements OnInit, OnDestroy {
+export class NgxGanttRootComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input() sideWidth: number;
 
     @ContentChild('sideTemplate', { static: true }) sideTemplate: TemplateRef<any>;
@@ -39,12 +41,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,
@@ -80,6 +91,23 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
         });
     }
 
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.updateScrollBarOffset();
+        });
+    }
+
+    updateScrollBarOffset() {
+        if (this.mainTemplate?.elementRef) {
+            const ganttMainContainer =
+                this.mainTemplate.elementRef.nativeElement.previousElementSibling.querySelector('.gantt-main').firstChild;
+            const verticalScrollbarWidth = ganttMainContainer.offsetWidth - ganttMainContainer.clientWidth;
+            const horizontalScrollbarHeight = ganttMainContainer.offsetHeight - ganttMainContainer.clientHeight;
+            this.verticalScrollbarWidth = verticalScrollbarWidth;
+            this.horizontalScrollbarHeight = horizontalScrollbarHeight;
+        }
+    }
+
     ngOnDestroy(): void {
         this.unsubscribe$.next();
     }