Skip to content

Commit

Permalink
feat(gantt): adjust viewport of dom service
Browse files Browse the repository at this point in the history
  • Loading branch information
@smile1016
smile1016 committed Dec 3, 2024
1 parent 950220e commit 7cb86d0
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 56 deletions.
6 changes: 3 additions & 3 deletions packages/gantt/src/components/main/gantt-main.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@

@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 ) {
@if ((data.refs?.x < dom.mainViewport().leftBoundary ) && 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) {
@if((data.refs?.x + data.refs?.width > dom.mainViewport().rightBoundary) && 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>
Expand Down
29 changes: 3 additions & 26 deletions packages/gantt/src/components/main/gantt-main.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

@Component({
selector: 'gantt-main',
Expand All @@ -31,7 +29,7 @@ import { combineLatest, from, Subject, take, takeUntil } from 'rxjs';
GanttIconComponent
]
})
export class GanttMainComponent implements OnInit {
export class GanttMainComponent {
@Input() viewportItems: (GanttGroupInternal | GanttItemInternal)[];

@Input() flatItems: (GanttGroupInternal | GanttItemInternal)[];
Expand All @@ -46,8 +44,6 @@ export class GanttMainComponent implements OnInit {

@Input() baselineTemplate: TemplateRef<any>;

@Input() ganttRoot: NgxGanttRootComponent;

@Input() quickTimeFocus: boolean;

@Output() barClick = new EventEmitter<GanttBarClickEvent>();
Expand All @@ -56,33 +52,14 @@ 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);
this.ganttUpper.scrollToDate(date);
}
}
35 changes: 26 additions & 9 deletions packages/gantt/src/gantt-dom.service.ts
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -125,6 +125,7 @@ export class GanttDomService implements OnDestroy {

this.monitorScrollChange();
this.disableBrowserWheelEvent();
this.monitorMainViewPortChange();
}

/**
Expand All @@ -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
Expand Down Expand Up @@ -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
});
}

Expand Down
18 changes: 16 additions & 2 deletions packages/gantt/src/gantt-upper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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');
1 change: 0 additions & 1 deletion packages/gantt/src/gantt.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@
></gantt-calendar-grid>
<div class="gantt-main">
<gantt-main
[ganttRoot]="ganttRoot"
[flatItems]="flatItems"
[viewportItems]="viewportItems"
[groupHeaderTemplate]="groupHeaderTemplate"
Expand Down
10 changes: 4 additions & 6 deletions packages/gantt/src/gantt.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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,
Expand Down
11 changes: 2 additions & 9 deletions packages/gantt/src/root.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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);
}
}

0 comments on commit 7cb86d0

Please sign in to comment.