Skip to content

Commit

Permalink
fix: fix misalignment when scrollbar scrolls to the edge
Browse files Browse the repository at this point in the history
  • Loading branch information
@ark-65
ark-65 committed Jul 4, 2023
1 parent 3761f01 commit b8531a0
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 46 deletions.
8 changes: 4 additions & 4 deletions packages/gantt/src/gantt.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [style.padding-right.px]="verticalScrollbarWidth"></gantt-calendar-header>
<gantt-calendar-header [style.padding-right.px]="ganttRoot.verticalScrollbarWidth"></gantt-calendar-header>
</div>
</div>
<gantt-loader *ngIf="loading"></gantt-loader>
Expand All @@ -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" [style.padding-bottom.px]="horizontalScrollbarHeight">
<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
Expand All @@ -39,8 +39,8 @@
</div>
<div class="gantt-container">
<gantt-calendar-grid
[style.padding-right.px]="verticalScrollbarWidth"
[style.padding-bottom.px]="horizontalScrollbarHeight"
[style.padding-right.px]="ganttRoot.verticalScrollbarWidth"
[style.padding-bottom.px]="ganttRoot.horizontalScrollbarHeight"
></gantt-calendar-grid>
<div class="gantt-main">
<gantt-main
Expand Down
42 changes: 16 additions & 26 deletions packages/gantt/src/gantt.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ import {
Optional,
OnChanges,
SimpleChanges,
HostListener
AfterViewChecked
} from '@angular/core';
import { takeUntil, take, finalize, skip } from 'rxjs/operators';
import { Observable, from } from 'rxjs';
Expand All @@ -31,11 +31,10 @@ 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';
import { InputBoolean } from 'ngx-tethys/core';
import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.component';
@Component({
selector: 'ngx-gantt',
templateUrl: './gantt.component.html',
Expand All @@ -51,7 +50,7 @@ import { GanttMainComponent } from 'ngx-gantt/components/main/gantt-main.compone
}
]
})
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;
Expand Down Expand Up @@ -98,17 +97,6 @@ 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;
}
Expand All @@ -131,6 +119,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
) {
Expand Down Expand Up @@ -188,7 +177,6 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
}

ngAfterViewInit() {
this.updateScrollBarOffset();
if (this.virtualScrollEnabled) {
this.virtualScroll.renderedRangeStream.pipe(takeUntil(this.unsubscribe$)).subscribe((range) => {
const linksElement = this.elementRef.nativeElement.querySelector('.gantt-links-overlay') as HTMLDivElement;
Expand All @@ -201,6 +189,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) {
Expand Down Expand Up @@ -249,16 +249,6 @@ 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);
Expand Down
24 changes: 8 additions & 16 deletions packages/gantt/src/root.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
Optional,
OnDestroy,
ViewChild,
AfterViewInit,
HostListener
} from '@angular/core';
import { GanttDomService, ScrollDirection } from './gantt-dom.service';
Expand All @@ -31,7 +30,7 @@ import { GanttDate } from './utils/date';
class: 'gantt'
}
})
export class NgxGanttRootComponent implements OnInit, AfterViewInit, OnDestroy {
export class NgxGanttRootComponent implements OnInit, OnDestroy {
@Input() sideWidth: number;

@ContentChild('sideTemplate', { static: true }) sideTemplate: TemplateRef<any>;
Expand Down Expand Up @@ -87,25 +86,18 @@ export class NgxGanttRootComponent implements OnInit, AfterViewInit, OnDestroy {
this.ganttUpper.viewChange.pipe(startWith<null, null>(null), takeUntil(this.unsubscribe$)).subscribe(() => {
this.scrollToToday();
});
this.updateScrollBarOffset();
});
});
}

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;
}
// @ts-ignore
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 {
Expand Down

0 comments on commit b8531a0

Please sign in to comment.