fix: fix misalignment when scrollbar scrolls to the edge

worktile · Jul 3, 2023 · 0756e16 · 0756e16
1 parent 2413774
commit 0756e16
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 7 deletions.
diff --git a/packages/gantt/src/root.component.html b/packages/gantt/src/root.component.html
@@ -1,14 +1,17 @@
-<div class="gantt-side" *ngIf="sideTemplate" [style.width.px]="sideWidth">
+<div class="gantt-side" *ngIf="sideTemplate" [style.width.px]="sideWidth" [style.padding-bottom.px]="view.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]="view.verticalScrollbarWidth"></gantt-calendar-header>
+  <gantt-calendar-grid
+    [style.padding-right.px]="view.verticalScrollbarWidth"
+    [style.padding-bottom.px]="view.horizontalScrollbarHeight"
+  ></gantt-calendar-grid>
   <gantt-drag-backdrop></gantt-drag-backdrop>
   <div class="gantt-main">
-    <ng-template [ngTemplateOutlet]="mainTemplate"></ng-template>
+    <ng-template [ngTemplateOutlet]="mainTemplate" #mainTemplateContent></ng-template>
   </div>
 </div>
 <ng-content></ng-content>

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>;
@@ -41,10 +43,15 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
 
     private unsubscribe$ = new Subject<void>();
 
-    private get view() {
+    public get view() {
         return this.ganttUpper.view;
     }
 
+    @HostListener('window:resize')
+    onWindowResize() {
+        this.updateScrollBarOffset();
+    }
+
     constructor(
         private elementRef: ElementRef<HTMLElement>,
         private ngZone: NgZone,
@@ -80,6 +87,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.view.verticalScrollbarWidth = verticalScrollbarWidth;
+            this.view.horizontalScrollbarHeight = horizontalScrollbarHeight;
+        }
+    }
+
     ngOnDestroy(): void {
         this.unsubscribe$.next();
     }

diff --git a/packages/gantt/src/views/view.ts b/packages/gantt/src/views/view.ts
@@ -65,6 +65,10 @@ export abstract class GanttView {
 
     options: GanttViewOptions;
 
+    verticalScrollbarWidth = 0;
+
+    horizontalScrollbarHeight = 0;
+
     constructor(start: GanttViewDate, end: GanttViewDate, options: GanttViewOptions) {
         this.options = Object.assign({}, viewOptions, options);
         const startDate = start.isCustom