diff --git a/packages/gantt/src/root.component.html b/packages/gantt/src/root.component.html index 9675bc8b..c8a0a29f 100644 --- a/packages/gantt/src/root.component.html +++ b/packages/gantt/src/root.component.html @@ -1,14 +1,17 @@ -
+
- - + +
- +
diff --git a/packages/gantt/src/root.component.ts b/packages/gantt/src/root.component.ts index d19952db..eb929fee 100644 --- 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; @@ -41,10 +43,15 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy { private unsubscribe$ = new Subject(); - private get view() { + public get view() { return this.ganttUpper.view; } + @HostListener('window:resize') + onWindowResize() { + this.updateScrollBarOffset(); + } + constructor( private elementRef: ElementRef, 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 index aade6405..609a31a8 100644 --- 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