6d5e371f-37ac-44ff-a8eb-834a175cbfb9

Committed 11 Mar 2024 07:10AM UTC coverage: 72.329%. Remained the same

Build # 6d5e371f-37ac-44ff-a8eb-834a175cbfb9

Build Type

Pull #449

circleci

Committed by

hjm100

Commit Message

feat: #INFR-11827 remove console log

Pull Request Pull Request #449: #INFR-11826 gantt custom global style configurations

Run Details

355 of 611 branches covered (58.1%)

Branch coverage included in aggregate %.

21 of 21 new or added lines in 8 files covered. (100.0%)

26 existing lines in 4 files now uncovered.

1459 of 1897 relevant lines covered (76.91%)

1389.42 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

89.87

/packages/gantt/src/components/table/header/gantt-table-header.component.ts

import {
    Component,
    HostBinding,
    QueryList,
    Input,
    OnInit,
    ViewChild,
    ElementRef,
    Inject,
    OnDestroy,
    ChangeDetectorRef
} from '@angular/core';
import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
import { CdkDragEnd, CdkDragMove, CdkDragStart, CdkDrag } from '@angular/cdk/drag-drop';
import { coerceCssPixelValue } from '@angular/cdk/coercion';
import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../../gantt-abstract';
import { setStyleWithVendorPrefix } from '../../../utils/set-style-with-vendor-prefix';
import { Subject, takeUntil } from 'rxjs';
import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';

export const defaultColumnWidth = 100;
export const minColumnWidth = 80;
interface DragFixedConfig {
    target: HTMLElement;
    originWidth: number;
    movedWidth: number;
    minWidth: number;
}
@Component({
    selector: 'gantt-table-header',
    templateUrl: './gantt-table-header.component.html',
    standalone: true,
    imports: [NgFor, NgIf, NgTemplateOutlet, CdkDrag]
})
export class GanttTableHeaderComponent implements OnInit, OnDestroy {
    public dragStartLeft: number;

    public tableWidth = 0;

    private unsubscribe$ = new Subject<void>();

    @Input() columns: QueryList<NgxGanttTableColumnComponent>;

    @ViewChild('resizeLine', { static: true }) resizeLineElementRef: ElementRef<HTMLElement>;

    @HostBinding('class') className = `gantt-table-header `;

    constructor(
        private elementRef: ElementRef,
        @Inject(GANTT_ABSTRACT_TOKEN) private gantt: GanttAbstractComponent,
        private cdr: ChangeDetectorRef
    ) {}

    ngOnInit() {
        this.columnsChange();
        this.columns.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
            this.columnsChange();
            this.gantt.cdr.detectChanges();
        });
    }

    private columnsChange() {
        let tableWidth = 0;
        this.columns.forEach((column) => {
            if (!column.columnWidth) {
                column.columnWidth = coerceCssPixelValue(defaultColumnWidth);
            }
            tableWidth += Number(column.columnWidth.replace('px', ''));
        });
        this.tableWidth = tableWidth;
    }

    private dragFixed(config: DragFixedConfig) {
        if (config.movedWidth < config.minWidth) {
            setStyleWithVendorPrefix({
                element: config.target,
                style: 'transform',
                value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
            });
        }
    }

    onResizeStarted(event: CdkDragStart) {
        const target = event.source.element.nativeElement;
        this.dragStartLeft = target.getBoundingClientRect().left;
    }

    onResizeMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;

        let originWidth: number;
        let movedWidth: number;
        let minWidth: number;
        if (column) {
            originWidth = parseInt(column.columnWidth, 10);
            movedWidth = originWidth + (left - this.dragStartLeft);
            minWidth = minColumnWidth;
        } else {
            originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
            movedWidth = originWidth + (left - this.dragStartLeft);
            minWidth = minColumnWidth * this.columns.length;
        }

        this.dragFixed({
            target,
            originWidth,
            movedWidth,
            minWidth
        });

        this.showAuxiliaryLine(event);
    }

    onResizeEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {
        const beforeWidth = parseInt(column.columnWidth, 10);
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;
        const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);
        const columnWidth = Math.max(width || 0, minColumnWidth);
        column.columnWidth = coerceCssPixelValue(columnWidth);
        if (this.gantt.table) {
            this.gantt.table.columnChanges.emit({ columns: this.columns });
        }

        this.tableWidth = this.tableWidth - beforeWidth + columnWidth;
        this.hideAuxiliaryLine();
        event.source.reset();
    }

    onOverallResizeEnded(event: CdkDragEnd) {
        const target = event.source.element.nativeElement;
        const left = target.getBoundingClientRect().left;
        const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;
        const dragWidth = left - this.dragStartLeft;
        let tempWidth = 0;
        this.columns.forEach((column) => {
            const lastColumnWidth = parseInt(column.columnWidth, 10);
            const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);
            const columnWidth = Math.max(lastColumnWidth + distributeWidth || 0, minColumnWidth);
            column.columnWidth = coerceCssPixelValue(columnWidth);
            tempWidth += columnWidth;
        });
        this.tableWidth = tempWidth;
        if (this.gantt.table) {
            this.gantt.table.columnChanges.emit({ columns: this.columns });
        }

        this.hideAuxiliaryLine();
        event.source.reset();
    }

    private showAuxiliaryLine(event: CdkDragMove) {
        const tableRect = this.elementRef.nativeElement.getBoundingClientRect();
        const targetRect = event.source.element.nativeElement.getBoundingClientRect();
        const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };
        this.resizeLineElementRef.nativeElement.style.left = `${distance.x}px`;
        this.resizeLineElementRef.nativeElement.style.display = 'block';
    }

    private hideAuxiliaryLine() {
        this.resizeLineElementRef.nativeElement.style.display = 'none';
    }

    ngOnDestroy() {
        this.unsubscribe$.next();
        this.unsubscribe$.complete();
    }
}

1	import {
2	Component,
3	HostBinding,
4	QueryList,
5	Input,
6	OnInit,
7	ViewChild,
8	ElementRef,
9	Inject,
10	OnDestroy,
11	ChangeDetectorRef
12	} from '@angular/core';
13	import { NgxGanttTableColumnComponent } from '../../../table/gantt-column.component';
14	import { CdkDragEnd, CdkDragMove, CdkDragStart, CdkDrag } from '@angular/cdk/drag-drop';
15	import { coerceCssPixelValue } from '@angular/cdk/coercion';
16	import { GanttAbstractComponent, GANTT_ABSTRACT_TOKEN } from '../../../gantt-abstract';
17	import { setStyleWithVendorPrefix } from '../../../utils/set-style-with-vendor-prefix';
18	import { Subject, takeUntil } from 'rxjs';
19	import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
20
21	export const defaultColumnWidth = 100;	1✔
22	export const minColumnWidth = 80;	1✔
23	interface DragFixedConfig {
24	target: HTMLElement;
25	originWidth: number;
26	movedWidth: number;
27	minWidth: number;
28	}
29	@Component({
30	selector: 'gantt-table-header',
31	templateUrl: './gantt-table-header.component.html',
32	standalone: true,
33	imports: [NgFor, NgIf, NgTemplateOutlet, CdkDrag]
34	})
35	export class GanttTableHeaderComponent implements OnInit, OnDestroy {	1✔
36	public dragStartLeft: number;
37
38	public tableWidth = 0;	59✔
39
40	private unsubscribe$ = new Subject<void>();	59✔
41
42	@Input() columns: QueryList<NgxGanttTableColumnComponent>;
43
44	@ViewChild('resizeLine', { static: true }) resizeLineElementRef: ElementRef<HTMLElement>;
45
46	@HostBinding('class') className = `gantt-table-header `;	59✔
47
48	constructor(
49	private elementRef: ElementRef,	59✔
50	@Inject(GANTT_ABSTRACT_TOKEN) private gantt: GanttAbstractComponent,	59✔
51	private cdr: ChangeDetectorRef	59✔
52	) {}
53
54	ngOnInit() {
55	this.columnsChange();	59✔
56	this.columns.changes.pipe(takeUntil(this.unsubscribe$)).subscribe(() => {	59✔
UNCOV 57	this.columnsChange();	×
UNCOV 58	this.gantt.cdr.detectChanges();	×
59	});
60	}
61
62	private columnsChange() {
63	let tableWidth = 0;	59✔
64	this.columns.forEach((column) => {	59✔
65	if (!column.columnWidth) {	70!
66	column.columnWidth = coerceCssPixelValue(defaultColumnWidth);	×
67	}
68	tableWidth += Number(column.columnWidth.replace('px', ''));	70✔
69	});
70	this.tableWidth = tableWidth;	59✔
71	}
72
73	private dragFixed(config: DragFixedConfig) {
74	if (config.movedWidth < config.minWidth) {	2!
75	setStyleWithVendorPrefix({	×
76	element: config.target,
77	style: 'transform',
78	value: `translate3d(${config.minWidth - config.originWidth}px, 0, 0)`
79	});
80	}
81	}
82
83	onResizeStarted(event: CdkDragStart) {
84	const target = event.source.element.nativeElement;	2✔
85	this.dragStartLeft = target.getBoundingClientRect().left;	2✔
86	}
87
88	onResizeMoved(event: CdkDragMove, column?: NgxGanttTableColumnComponent) {
89	const target = event.source.element.nativeElement;	2✔
90	const left = target.getBoundingClientRect().left;	2✔
91
92	let originWidth: number;
93	let movedWidth: number;
94	let minWidth: number;
95	if (column) {	2✔
96	originWidth = parseInt(column.columnWidth, 10);	1✔
97	movedWidth = originWidth + (left - this.dragStartLeft);	1✔
98	minWidth = minColumnWidth;	1✔
99	} else {
100	originWidth = this.elementRef.nativeElement.getBoundingClientRect().width;	1✔
101	movedWidth = originWidth + (left - this.dragStartLeft);	1✔
102	minWidth = minColumnWidth * this.columns.length;	1✔
103	}
104
105	this.dragFixed({	2✔
106	target,
107	originWidth,
108	movedWidth,
109	minWidth
110	});
111
112	this.showAuxiliaryLine(event);	2✔
113	}
114
115	onResizeEnded(event: CdkDragEnd, column: NgxGanttTableColumnComponent) {
116	const beforeWidth = parseInt(column.columnWidth, 10);	1✔
117	const target = event.source.element.nativeElement;	1✔
118	const left = target.getBoundingClientRect().left;	1✔
119	const width = parseInt(column.columnWidth, 10) + (left - this.dragStartLeft);	1✔
120	const columnWidth = Math.max(width \|\| 0, minColumnWidth);	1!
121	column.columnWidth = coerceCssPixelValue(columnWidth);	1✔
122	if (this.gantt.table) {	1✔
123	this.gantt.table.columnChanges.emit({ columns: this.columns });	1✔
124	}
125
126	this.tableWidth = this.tableWidth - beforeWidth + columnWidth;	1✔
127	this.hideAuxiliaryLine();	1✔
128	event.source.reset();	1✔
129	}
130
131	onOverallResizeEnded(event: CdkDragEnd) {
132	const target = event.source.element.nativeElement;	1✔
133	const left = target.getBoundingClientRect().left;	1✔
134	const tableWidth = this.elementRef.nativeElement.getBoundingClientRect().width;	1✔
135	const dragWidth = left - this.dragStartLeft;	1✔
136	let tempWidth = 0;	1✔
137	this.columns.forEach((column) => {	1✔
138	const lastColumnWidth = parseInt(column.columnWidth, 10);	2✔
139	const distributeWidth = parseInt(String(dragWidth * (lastColumnWidth / tableWidth)), 10);	2✔
140	const columnWidth = Math.max(lastColumnWidth + distributeWidth \|\| 0, minColumnWidth);	2!
141	column.columnWidth = coerceCssPixelValue(columnWidth);	2✔
142	tempWidth += columnWidth;	2✔
143	});
144	this.tableWidth = tempWidth;	1✔
145	if (this.gantt.table) {	1✔
146	this.gantt.table.columnChanges.emit({ columns: this.columns });	1✔
147	}
148
149	this.hideAuxiliaryLine();	1✔
150	event.source.reset();	1✔
151	}
152
153	private showAuxiliaryLine(event: CdkDragMove) {
154	const tableRect = this.elementRef.nativeElement.getBoundingClientRect();	2✔
155	const targetRect = event.source.element.nativeElement.getBoundingClientRect();	2✔
156	const distance = { x: targetRect.left - tableRect.left, y: targetRect.top - tableRect.top };	2✔
157	this.resizeLineElementRef.nativeElement.style.left = `${distance.x}px`;	2✔
158	this.resizeLineElementRef.nativeElement.style.display = 'block';	2✔
159	}
160
161	private hideAuxiliaryLine() {
162	this.resizeLineElementRef.nativeElement.style.display = 'none';	2✔
163	}
164
165	ngOnDestroy() {
166	this.unsubscribe$.next();	58✔
167	this.unsubscribe$.complete();	58✔
168	}
169	}

worktile / ngx-gantt / 6d5e371f-37ac-44ff-a8eb-834a175cbfb9

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous