feat(gantt): add mainViewport for dom service && add gantt-quick-time-focus-item

packages/gantt/src/components/main/gantt-main.component.html

@@ -38,25 +38,9 @@
 
 @if (quickTimeFocus) {
 <div class="gantt-quick-time-focus-container" [style.width.px]="ganttUpper.view.width">
-  <div class="gantt-quick-time-focus" [style.width.px]="dom.visibleRangeX().max - dom.visibleRangeX().min">
+  <div class="gantt-quick-time-focus" [style.width.px]="dom.mainViewport().clientWidth">
     <ng-container *ngFor="let data of viewportItems; let i = index; trackBy: trackBy">
-      <div class="gantt-quick-time-focus-item" [style.height.px]="ganttUpper.styles.lineHeight">
-        <span class="ml-2">
-          @if ((data.refs.x < dom.visibleRangeX().min ) && data.refs.width ) {
-          <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(data.origin, 'left')">
-            <gantt-icon iconName="arrow-left"></gantt-icon>
-          </a>
-          }
-        </span>
-
-        <span class="mr-2">
-          @if((data.refs.x + data.refs.width > dom.visibleRangeX().max) && data.refs.width) {
-          <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(data.origin, 'right')">
-            <gantt-icon iconName="arrow-right"></gantt-icon>
-          </a>
-          }
-        </span>
-      </div>
+      <gantt-quick-time-focus [mainViewport]="dom.mainViewport()" [item]="data"></gantt-quick-time-focus>
     </ng-container>
   </div>
 </div>

packages/gantt/src/components/main/gantt-main.component.ts

@@ -7,10 +7,8 @@ import { NgxGanttBarComponent } from '../bar/bar.component';
 import { NgxGanttRangeComponent } from '../range/range.component';
 import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common';
 import { GanttLinksComponent } from '../links/links.component';
-import { NgxGanttRootComponent } from 'ngx-gantt';
-import { GanttIconComponent } from '../icon/icon.component';
 import { GanttDomService } from '../../gantt-dom.service';
-import { combineLatest, from, Subject, take, takeUntil } from 'rxjs';
+import { GanttQuickTimeFocusItemComponent } from '../quick-time-focus/quick-time-focus.component';
 
 @Component({
     selector: 'gantt-main',
@@ -28,10 +26,10 @@ import { combineLatest, from, Subject, take, takeUntil } from 'rxjs';
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe,
-        GanttIconComponent
+        GanttQuickTimeFocusItemComponent
     ]
 })
-export class GanttMainComponent implements OnInit {
+export class GanttMainComponent {
     @Input() viewportItems: (GanttGroupInternal | GanttItemInternal)[];
 
     @Input() flatItems: (GanttGroupInternal | GanttItemInternal)[];
@@ -46,8 +44,6 @@ export class GanttMainComponent implements OnInit {
 
     @Input() baselineTemplate: TemplateRef<any>;
 
-    @Input() ganttRoot: NgxGanttRootComponent;
-
     @Input() quickTimeFocus: boolean;
 
     @Output() barClick = new EventEmitter<GanttBarClickEvent>();
@@ -56,33 +52,9 @@ export class GanttMainComponent implements OnInit {
 
     @HostBinding('class.gantt-main-container') ganttMainClass = true;
 
-    private unsubscribe$ = new Subject<void>();
-
-    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper, public dom: GanttDomService, protected ngZone: NgZone) {}
-
-    ngOnInit(): void {
-        const onStable$ = this.ngZone.isStable ? from(Promise.resolve()) : this.ngZone.onStable.pipe(take(1));
-        this.ngZone.runOutsideAngular(() => {
-            onStable$.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
-                this.setupResize();
-            });
-        });
-    }
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper, public dom: GanttDomService) {}
 
     trackBy(index: number, item: GanttGroupInternal | GanttItemInternal) {
         return item.id || index;
     }
-
-    private setupResize() {
-        combineLatest([this.dom.getResize(), this.dom.getResizeByElement(this.dom.mainContainer)])
-            .pipe(takeUntil(this.unsubscribe$))
-            .subscribe(() => {
-                this.dom.setVisibleRangeX();
-            });
-    }
-
-    quickTime(item: GanttItemInternal, type: 'left' | 'right') {
-        const date = type === 'left' ? item.start || item.end : item.end || item.start;
-        this.ganttRoot.scrollToDate(date);
-    }
 }

packages/gantt/src/components/quick-time-focus/quick-time-focus.component.html

@@ -0,0 +1,15 @@
+<span class="ml-2">
+  @if ((item.refs?.x < mainViewport().leftBoundary ) && item.refs?.width ) {
+  <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(item, 'left')">
+    <gantt-icon iconName="arrow-left"></gantt-icon>
+  </a>
+  }
+</span>
+
+<span class="mr-2">
+  @if((item.refs?.x + item.refs?.width > mainViewport().rightBoundary) && item.refs.width) {
+  <a class="gantt-quick-time-focus-item-arrow link-secondary" href="javascript:;" (click)="quickTime(item, 'right')">
+    <gantt-icon iconName="arrow-right"></gantt-icon>
+  </a>
+  }
+</span>

packages/gantt/src/components/quick-time-focus/quick-time-focus.component.ts

@@ -0,0 +1,30 @@
+import { Component, HostBinding, Inject, Input, input, InputSignal } from '@angular/core';
+import { GanttItemInternal } from '../../class/item';
+import { GANTT_UPPER_TOKEN, GanttUpper } from '../../gantt-upper';
+import { GanttIconComponent } from '../icon/icon.component';
+
+@Component({
+    selector: 'gantt-quick-time-focus',
+    templateUrl: './quick-time-focus.component.html',
+    standalone: true,
+    imports: [GanttIconComponent]
+})
+export class GanttQuickTimeFocusItemComponent {
+    @HostBinding('class.gantt-quick-time-focus-item') class = true;
+
+    @HostBinding('style.height')
+    get height() {
+        return this.ganttUpper.styles.lineHeight + 'px';
+    }
+
+    mainViewport: InputSignal<{ clientWidth?: number; leftBoundary?: number; rightBoundary?: number }> = input();
+
+    @Input() item: GanttItemInternal;
+
+    constructor(@Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper) {}
+
+    quickTime(item: GanttItemInternal, type: 'left' | 'right') {
+        const date = type === 'left' ? item.start || item.end : item.end || item.start;
+        this.ganttUpper.scrollToDate(date);
+    }
+}

packages/gantt/src/gantt-dom.service.ts

@@ -1,7 +1,7 @@
 import { isPlatformServer } from '@angular/common';
-import { Injectable, ElementRef, OnDestroy, Inject, PLATFORM_ID, NgZone, WritableSignal, signal } from '@angular/core';
-import { fromEvent, Subject, merge, EMPTY, Observable } from 'rxjs';
-import { pairwise, map, auditTime, takeUntil } from 'rxjs/operators';
+import { Injectable, ElementRef, OnDestroy, Inject, PLATFORM_ID, NgZone, WritableSignal, signal, InjectionToken } from '@angular/core';
+import { fromEvent, Subject, merge, EMPTY, Observable, combineLatest } from 'rxjs';
+import { pairwise, map, auditTime, takeUntil, startWith } from 'rxjs/operators';
 import { isNumber } from './utils/helpers';
 import { passiveListenerOptions } from './utils/passive-listeners';
 
@@ -40,7 +40,7 @@ export class GanttDomService implements OnDestroy {
 
     public linksOverlay: Element;
 
-    public visibleRangeX: WritableSignal<{ min: number; max: number }> = signal({ min: 0, max: 0 });
+    public mainViewport: WritableSignal<{ clientWidth?: number; leftBoundary?: number; rightBoundary?: number }> = signal({});
 
     private mainFooter: Element;
 
@@ -125,6 +125,7 @@ export class GanttDomService implements OnDestroy {
 
         this.monitorScrollChange();
         this.disableBrowserWheelEvent();
+        this.monitorMainViewPortChange();
     }
 
     /**
@@ -143,7 +144,6 @@ export class GanttDomService implements OnDestroy {
                         map(() => this.mainContainer.scrollLeft),
                         pairwise(),
                         map(([previous, current]) => {
-                            this.setVisibleRangeX();
                             const event: ScrollEvent = {
                                 target: this.mainContainer,
                                 direction: ScrollDirection.NONE
@@ -193,10 +193,27 @@ export class GanttDomService implements OnDestroy {
         }
     }
 
-    setVisibleRangeX() {
-        this.visibleRangeX.set({
-            min: this.mainContainer.scrollLeft,
-            max: this.mainContainer.scrollLeft + this.mainContainer.clientWidth
+    monitorMainViewPortChange() {
+        combineLatest([
+            this.getResize().pipe(startWith(null)),
+            this.getResizeByElement(this.mainContainer),
+            this.setUpMainContainer(passiveListenerOptions)
+        ])
+            .pipe(takeUntil(this.unsubscribe$))
+            .subscribe(() => {
+                this.setMainViewPort();
+            });
+    }
+
+    setUpMainContainer(options: AddEventListenerOptions) {
+        return fromEvent(this.mainContainer, 'scroll', options);
+    }
+
+    setMainViewPort() {
+        this.mainViewport.set({
+            clientWidth: this.mainContainer.clientWidth,
+            leftBoundary: this.mainContainer.scrollLeft,
+            rightBoundary: this.mainContainer.scrollLeft + this.mainContainer.clientWidth
         });
     }
 

packages/gantt/src/gantt-upper.ts

@@ -14,7 +14,8 @@ import {
     Inject,
     OnInit,
     OnDestroy,
-    OnChanges
+    OnChanges,
+    Optional
 } from '@angular/core';
 import { from, Subject } from 'rxjs';
 import { takeUntil, take, skip } from 'rxjs/operators';
@@ -41,6 +42,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { GanttBaselineItem, GanttBaselineItemInternal } from './class/baseline';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
+import { GanttDomService } from './gantt-dom.service';
 
 @Directive()
 export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
@@ -185,7 +187,8 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
         protected elementRef: ElementRef<HTMLElement>,
         protected cdr: ChangeDetectorRef,
         protected ngZone: NgZone,
-        @Inject(GANTT_GLOBAL_CONFIG) public config: GanttGlobalConfig
+        @Inject(GANTT_GLOBAL_CONFIG) public config: GanttGlobalConfig,
+        @Optional() public dom?: GanttDomService
     ) {}
 
     private createView() {
@@ -453,6 +456,17 @@ export abstract class GanttUpper implements OnChanges, OnInit, OnDestroy {
     rerenderView() {
         this.changeView(this.viewType);
     }
+
+    scrollToDate(date: number | GanttDate) {
+        let x: number;
+        if (typeof date === 'number') {
+            x = this.view.getXPointByDate(new GanttDate(date));
+        } else {
+            x = this.view.getXPointByDate(date);
+        }
+
+        this.dom.scrollMainContainer(x);
+    }
 }
 
 export const GANTT_UPPER_TOKEN = new InjectionToken<GanttUpper>('GANTT_UPPER_TOKEN');

packages/gantt/src/gantt.component.html

@@ -50,7 +50,6 @@
       ></gantt-calendar-grid>
       <div class="gantt-main">
         <gantt-main
-          [ganttRoot]="ganttRoot"
           [flatItems]="flatItems"
           [viewportItems]="viewportItems"
           [groupHeaderTemplate]="groupHeaderTemplate"

packages/gantt/src/gantt.component.ts

@@ -48,7 +48,6 @@ import { GANTT_GLOBAL_CONFIG, GanttGlobalConfig } from './gantt.config';
 import { NgxGanttRootComponent } from './root.component';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
-import { GanttDate } from './utils/date';
 import { Dictionary, keyBy, recursiveItems, uniqBy } from './utils/helpers';
 import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
 
@@ -165,7 +164,7 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         private viewportRuler: ViewportRuler,
         @Inject(GANTT_GLOBAL_CONFIG) config: GanttGlobalConfig
     ) {
-        super(elementRef, cdr, ngZone, config);
+        super(elementRef, cdr, ngZone, config, null);
         this.computeAllRefs = false;
     }
 
@@ -226,6 +225,9 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
                 this.computeTempDataRefs();
             });
         }
+        if (this.ganttRoot && this.ganttRoot.dom) {
+            this.dom = this.ganttRoot.dom;
+        }
     }
 
     ngAfterViewChecked() {
@@ -363,10 +365,6 @@ export class NgxGanttComponent extends GanttUpper implements OnInit, OnChanges,
         this.ganttRoot.scrollToToday();
     }
 
-    scrollToDate(date: number | GanttDate) {
-        this.ganttRoot.scrollToDate(date);
-    }
-
     scrolledIndexChange(index: number) {
         this.virtualScrolledIndexChange.emit({
             index,

packages/gantt/src/gantt.module.ts

@@ -23,6 +23,7 @@ import { NgxGanttRootComponent } from './root.component';
 import { NgxGanttTableColumnComponent } from './table/gantt-column.component';
 import { NgxGanttTableComponent } from './table/gantt-table.component';
 import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.component';
+import { GanttQuickTimeFocusItemComponent } from './components/quick-time-focus/quick-time-focus.component';
 
 @NgModule({
     imports: [
@@ -47,6 +48,7 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon
         NgxGanttBaselineComponent,
         NgxGanttToolbarComponent,
         GanttScrollbarComponent,
+        GanttQuickTimeFocusItemComponent,
         IsGanttRangeItemPipe,
         IsGanttBarItemPipe,
         IsGanttCustomItemPipe
@@ -63,7 +65,8 @@ import { GanttScrollbarComponent } from './components/scrollbar/scrollbar.compon
         GanttCalendarHeaderComponent,
         GanttCalendarGridComponent,
         GanttDragBackdropComponent,
-        GanttScrollbarComponent
+        GanttScrollbarComponent,
+        GanttQuickTimeFocusItemComponent
     ],
     providers: [
         CdkVirtualScrollViewport,

packages/gantt/src/public-api.ts

@@ -25,3 +25,4 @@ export * from './components/calendar/header/calendar-header.component';
 export * from './components/calendar/grid/calendar-grid.component';
 export * from './components/drag-backdrop/drag-backdrop.component';
 export * from './components/scrollbar/scrollbar.component';
+export * from './components/quick-time-focus/quick-time-focus.component';

packages/gantt/src/root.component.ts

@@ -73,7 +73,7 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
     constructor(
         private elementRef: ElementRef<HTMLElement>,
         private ngZone: NgZone,
-        private dom: GanttDomService,
+        public dom: GanttDomService,
         public dragContainer: GanttDragContainer,
         @Inject(GANTT_UPPER_TOKEN) public ganttUpper: GanttUpper,
         @Optional() private printService: GanttPrintService
@@ -182,13 +182,6 @@ export class NgxGanttRootComponent implements OnInit, OnDestroy {
     }
 
     public scrollToDate(date: number | GanttDate) {
-        let x: number;
-        if (typeof date === 'number') {
-            x = this.view.getXPointByDate(new GanttDate(date));
-        } else {
-            x = this.view.getXPointByDate(date);
-        }
-
-        this.dom.scrollMainContainer(x);
+        this.ganttUpper.scrollToDate(date);
     }
 }