13331632524

Committed 14 Feb 2025 02:51PM CUT coverage: 22.015% (-69.6%) from 91.622%

Build # 13331632524

Build Type

Pull #15372

github

Committed by

web-flow

Commit Message

Merge d52d57714 into bcb78ae0a

Pull Request Pull Request #15372: chore(*): test ci passing

Run Details

1990 of 15592 branches covered (12.76%)

431 of 964 new or added lines in 18 files covered. (44.71%)

19956 existing lines in 307 files now uncovered.

6452 of 29307 relevant lines covered (22.02%)

249.17 hits per line

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

4.0

/projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

import { Injectable, NgZone } from '@angular/core';
import { ColumnType } from '../common/grid.interface';

/**
 * @hidden
 * @internal
 */
@Injectable()
export class IgxColumnResizingService {

    /**
     * @hidden
     */
    public startResizePos: number;
    /**
     * Indicates that a column is currently being resized.
     */
    public isColumnResizing: boolean;
    /**
     * @hidden
     */
    public resizeCursor = 'col-resize';
    /**
     * @hidden
     */
     public showResizer = false;
    /**
     * The column being resized.
     */
    public column: ColumnType;

    constructor(private zone: NgZone) { }

    /**
     * @hidden
     */
    public getColumnHeaderRenderedWidth() {
        return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);
    }

    /**
     * @hidden
     */
    public get resizerHeight(): number {
        let height = this.column.grid.getVisibleContentHeight();

        // Column height multiplier in case there are Column Layouts. The resizer height need to take into account rowStart.
        let columnHeightMultiplier = 1;
        if (this.column.columnLayoutChild) {
            columnHeightMultiplier = this.column.grid.multiRowLayoutRowSize - this.column.rowStart + 1;
        }

        if (this.column.level !== 0) {
            height -= this.column.topLevelParent.headerGroup.height - this.column.headerGroup.height * columnHeightMultiplier;
        }

        return height;
    }

    /**
     * Returns the minimal possible width to which the column can be resized.
     */
    public get restrictResizeMin(): number {
        const actualWidth = this.getColumnHeaderRenderedWidth();
        const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth;

        return actualWidth - minWidth;
    }

    /**
     * Returns the maximal possible width to which the column can be resized.
     */
    public get restrictResizeMax(): number {
        const actualWidth = this.getColumnHeaderRenderedWidth();
        const maxWidth = this.column.maxWidthPx;
        if (this.column.maxWidth) {
            return maxWidth - actualWidth;
        } else {
            return Number.MAX_SAFE_INTEGER;
        }
    }

    /**
     * Autosizes the column to the longest currently visible cell value, including the header cell.
     * If the column has a predifined maxWidth and the autosized column width will become bigger than it,
     * then the column is sized to its maxWidth.
     */
    public autosizeColumnOnDblClick() {
        const currentColWidth = this.getColumnHeaderRenderedWidth();
        this.column.width = this.column.getAutoSize();

        this.zone.run(() => { });

        this.column.grid.columnResized.emit({
            column: this.column,
            prevWidth: currentColWidth.toString(),
            newWidth: this.column.width
        });
    }

    /**
     * Resizes the column regaridng to the column minWidth and maxWidth.
     */
    public resizeColumn(event: MouseEvent, ratio: number = 1) {
        this.showResizer = false;
        const diff = (event.clientX - this.startResizePos) / ratio;

        const colWidth = this.column.width;
        const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
        let currentColWidth = parseFloat(colWidth);
        const actualWidth = this.getColumnHeaderRenderedWidth();
        currentColWidth = Number.isNaN(currentColWidth) ? parseFloat(actualWidth as any) : currentColWidth;

        if (this.column.grid.hasColumnLayouts) {
            this.resizeColumnLayoutFor(this.column, diff);
        } else if (isPercentageWidth) {
            this._handlePercentageResize(diff, this.column);
        } else {
            this._handlePixelResize(diff, this.column);
        }


        this.zone.run(() => { });

        if (currentColWidth !== parseFloat(this.column.width)) {
            this.column.grid.columnResized.emit({
                column: this.column,
                prevWidth: isPercentageWidth ? currentColWidth + '%' : currentColWidth + 'px',
                newWidth: this.column.width
            });
        }

        this.isColumnResizing = false;
    }

    protected _handlePixelResize(diff: number, column: ColumnType) {
        const currentColWidth = parseFloat(column.width);
        const colMinWidth = column.minWidthPx;
        const colMaxWidth = column.maxWidthPx;
        if (currentColWidth + diff < colMinWidth) {
            column.width = colMinWidth + 'px';
        } else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) {
            column.width = colMaxWidth + 'px';
        } else {
            column.width = (currentColWidth + diff) + 'px';
        }
    }

    protected _handlePercentageResize(diff: number, column: ColumnType) {
        const currentPercentWidth = parseFloat(column.width);
        const gridAvailableSize = column.grid.calcWidth;

        const diffPercentage = (diff / gridAvailableSize) * 100;
        const colMinWidth = column.minWidthPercent;
        const colMaxWidth = column.maxWidthPercent;

        if (currentPercentWidth + diffPercentage < colMinWidth) {
            column.width = colMinWidth + '%';
        } else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) {
            column.width = colMaxWidth + '%';
        } else {
            column.width = (currentPercentWidth + diffPercentage) + '%';
        }
    }

    protected getColMinWidth(column: ColumnType) {
        let currentColWidth = parseFloat(column.width);
        const actualWidth = column.headerCell.nativeElement.getBoundingClientRect().width;
        currentColWidth = Number.isNaN(currentColWidth) || (currentColWidth < actualWidth) ? actualWidth : currentColWidth;

        const actualMinWidth = parseFloat(column.minWidth);
        return actualMinWidth < currentColWidth ? actualMinWidth : currentColWidth;
    }

    protected resizeColumnLayoutFor(column: ColumnType, diff: number) {
        const relativeColumns = column.getResizableColUnderEnd();
        const combinedSpan = relativeColumns.reduce((acc, col) => acc + col.spanUsed, 0);

        // Resize first those who might reach min/max width
        let columnsToResize = [...relativeColumns];
        let updatedDiff = diff;
        let updatedCombinedSpan = combinedSpan;
        let setMinMaxCols = false;
        do {
            // Cycle them until there are not ones that reach min/max size, because the diff accumulates after each cycle.
            // This is because we can have at first 2 cols reaching min width and then after
            // recalculating the diff there might be 1 more that reaches min width.
            setMinMaxCols = false;
            let newCombinedSpan = updatedCombinedSpan;
            const newColsToResize = [];
            columnsToResize.forEach((col) => {
                const currentResizeWidth = parseFloat(col.target.calcWidth);
                const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan;
                const colWidth = col.target.width;
                const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;

                const minWidth = col.target.minWidthPx;
                const maxWidth = col.target.maxWidthPx;
                if (currentResizeWidth + resizeScaled < minWidth) {
                    col.target.width = isPercentageWidth ? col.target.minWidthPercent + '%' : minWidth + 'px';
                    updatedDiff += (currentResizeWidth - minWidth);
                    newCombinedSpan -= col.spanUsed;
                    setMinMaxCols = true;
                } else if (maxWidth && (currentResizeWidth + resizeScaled > maxWidth)) {
                    col.target.width = isPercentageWidth ? col.target.maxWidthPercent + '%' : col.target.maxWidthPx + 'px';
                    updatedDiff -= (maxWidth - currentResizeWidth);
                    newCombinedSpan -= col.spanUsed;
                    setMinMaxCols = true;
                } else {
                    // Save new ones that can be resized
                    newColsToResize.push(col);
                }
            });

            updatedCombinedSpan = newCombinedSpan;
            columnsToResize = newColsToResize;
        } while (setMinMaxCols);

        // Those left that don't reach min/max size resize them normally.
        columnsToResize.forEach((col) => {
            const resizeScaled = (updatedDiff / updatedCombinedSpan) * col.target.gridColumnSpan;
            const colWidth = col.target.width;
            const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;
            if (isPercentageWidth) {
                this._handlePercentageResize(resizeScaled, col.target);
            } else {
                this._handlePixelResize(resizeScaled, col.target);
            }
        });
    }
}

1	import { Injectable, NgZone } from '@angular/core';
2	import { ColumnType } from '../common/grid.interface';
3
4	/**
5	* @hidden
6	* @internal
7	*/
8	@Injectable()
9	export class IgxColumnResizingService {	2✔
10
11	/**
12	* @hidden
13	*/
14	public startResizePos: number;
15	/**
16	* Indicates that a column is currently being resized.
17	*/
18	public isColumnResizing: boolean;
19	/**
20	* @hidden
21	*/
22	public resizeCursor = 'col-resize';	37✔
23	/**
24	* @hidden
25	*/
26	public showResizer = false;	37✔
27	/**
28	* The column being resized.
29	*/
30	public column: ColumnType;
31
32	constructor(private zone: NgZone) { }	37✔
33
34	/**
35	* @hidden
36	*/
37	public getColumnHeaderRenderedWidth() {
UNCOV 38	return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);	×
39	}
40
41	/**
42	* @hidden
43	*/
44	public get resizerHeight(): number {
UNCOV 45	let height = this.column.grid.getVisibleContentHeight();	×
46
47	// Column height multiplier in case there are Column Layouts. The resizer height need to take into account rowStart.
UNCOV 48	let columnHeightMultiplier = 1;	×
UNCOV 49	if (this.column.columnLayoutChild) {	×
UNCOV 50	columnHeightMultiplier = this.column.grid.multiRowLayoutRowSize - this.column.rowStart + 1;	×
51	}
52
UNCOV 53	if (this.column.level !== 0) {	×
UNCOV 54	height -= this.column.topLevelParent.headerGroup.height - this.column.headerGroup.height * columnHeightMultiplier;	×
55	}
56
UNCOV 57	return height;	×
58	}
59
60	/**
61	* Returns the minimal possible width to which the column can be resized.
62	*/
63	public get restrictResizeMin(): number {
UNCOV 64	const actualWidth = this.getColumnHeaderRenderedWidth();	×
UNCOV 65	const minWidth = this.column.minWidthPx < actualWidth ? this.column.minWidthPx : actualWidth;	×
66
UNCOV 67	return actualWidth - minWidth;	×
68	}
69
70	/**
71	* Returns the maximal possible width to which the column can be resized.
72	*/
73	public get restrictResizeMax(): number {
UNCOV 74	const actualWidth = this.getColumnHeaderRenderedWidth();	×
UNCOV 75	const maxWidth = this.column.maxWidthPx;	×
UNCOV 76	if (this.column.maxWidth) {	×
UNCOV 77	return maxWidth - actualWidth;	×
78	} else {
UNCOV 79	return Number.MAX_SAFE_INTEGER;	×
80	}
81	}
82
83	/**
84	* Autosizes the column to the longest currently visible cell value, including the header cell.
85	* If the column has a predifined maxWidth and the autosized column width will become bigger than it,
86	* then the column is sized to its maxWidth.
87	*/
88	public autosizeColumnOnDblClick() {
UNCOV 89	const currentColWidth = this.getColumnHeaderRenderedWidth();	×
UNCOV 90	this.column.width = this.column.getAutoSize();	×
91
UNCOV 92	this.zone.run(() => { });	×
93
UNCOV 94	this.column.grid.columnResized.emit({	×
95	column: this.column,
96	prevWidth: currentColWidth.toString(),
97	newWidth: this.column.width
98	});
99	}
100
101	/**
102	* Resizes the column regaridng to the column minWidth and maxWidth.
103	*/
104	public resizeColumn(event: MouseEvent, ratio: number = 1) {	×
UNCOV 105	this.showResizer = false;	×
UNCOV 106	const diff = (event.clientX - this.startResizePos) / ratio;	×
107
UNCOV 108	const colWidth = this.column.width;	×
UNCOV 109	const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;	×
UNCOV 110	let currentColWidth = parseFloat(colWidth);	×
UNCOV 111	const actualWidth = this.getColumnHeaderRenderedWidth();	×
UNCOV 112	currentColWidth = Number.isNaN(currentColWidth) ? parseFloat(actualWidth as any) : currentColWidth;	×
113
UNCOV 114	if (this.column.grid.hasColumnLayouts) {	×
UNCOV 115	this.resizeColumnLayoutFor(this.column, diff);	×
UNCOV 116	} else if (isPercentageWidth) {	×
UNCOV 117	this._handlePercentageResize(diff, this.column);	×
118	} else {
UNCOV 119	this._handlePixelResize(diff, this.column);	×
120	}
121
122
UNCOV 123	this.zone.run(() => { });	×
124
UNCOV 125	if (currentColWidth !== parseFloat(this.column.width)) {	×
UNCOV 126	this.column.grid.columnResized.emit({	×
127	column: this.column,
128	prevWidth: isPercentageWidth ? currentColWidth + '%' : currentColWidth + 'px',	×
129	newWidth: this.column.width
130	});
131	}
132
UNCOV 133	this.isColumnResizing = false;	×
134	}
135
136	protected _handlePixelResize(diff: number, column: ColumnType) {
UNCOV 137	const currentColWidth = parseFloat(column.width);	×
UNCOV 138	const colMinWidth = column.minWidthPx;	×
UNCOV 139	const colMaxWidth = column.maxWidthPx;	×
UNCOV 140	if (currentColWidth + diff < colMinWidth) {	×
UNCOV 141	column.width = colMinWidth + 'px';	×
UNCOV 142	} else if (colMaxWidth && (currentColWidth + diff > colMaxWidth)) {	×
UNCOV 143	column.width = colMaxWidth + 'px';	×
144	} else {
UNCOV 145	column.width = (currentColWidth + diff) + 'px';	×
146	}
147	}
148
149	protected _handlePercentageResize(diff: number, column: ColumnType) {
UNCOV 150	const currentPercentWidth = parseFloat(column.width);	×
UNCOV 151	const gridAvailableSize = column.grid.calcWidth;	×
152
UNCOV 153	const diffPercentage = (diff / gridAvailableSize) * 100;	×
UNCOV 154	const colMinWidth = column.minWidthPercent;	×
UNCOV 155	const colMaxWidth = column.maxWidthPercent;	×
156
UNCOV 157	if (currentPercentWidth + diffPercentage < colMinWidth) {	×
UNCOV 158	column.width = colMinWidth + '%';	×
UNCOV 159	} else if (colMaxWidth && (currentPercentWidth + diffPercentage > colMaxWidth)) {	×
UNCOV 160	column.width = colMaxWidth + '%';	×
161	} else {
UNCOV 162	column.width = (currentPercentWidth + diffPercentage) + '%';	×
163	}
164	}
165
166	protected getColMinWidth(column: ColumnType) {
167	let currentColWidth = parseFloat(column.width);	×
168	const actualWidth = column.headerCell.nativeElement.getBoundingClientRect().width;	×
169	currentColWidth = Number.isNaN(currentColWidth) \|\| (currentColWidth < actualWidth) ? actualWidth : currentColWidth;	×
170
171	const actualMinWidth = parseFloat(column.minWidth);	×
172	return actualMinWidth < currentColWidth ? actualMinWidth : currentColWidth;	×
173	}
174
175	protected resizeColumnLayoutFor(column: ColumnType, diff: number) {
UNCOV 176	const relativeColumns = column.getResizableColUnderEnd();	×
UNCOV 177	const combinedSpan = relativeColumns.reduce((acc, col) => acc + col.spanUsed, 0);	×
178
179	// Resize first those who might reach min/max width
UNCOV 180	let columnsToResize = [...relativeColumns];	×
UNCOV 181	let updatedDiff = diff;	×
UNCOV 182	let updatedCombinedSpan = combinedSpan;	×
UNCOV 183	let setMinMaxCols = false;	×
UNCOV 184	do {	×
185	// Cycle them until there are not ones that reach min/max size, because the diff accumulates after each cycle.
186	// This is because we can have at first 2 cols reaching min width and then after
187	// recalculating the diff there might be 1 more that reaches min width.
UNCOV 188	setMinMaxCols = false;	×
UNCOV 189	let newCombinedSpan = updatedCombinedSpan;	×
UNCOV 190	const newColsToResize = [];	×
UNCOV 191	columnsToResize.forEach((col) => {	×
UNCOV 192	const currentResizeWidth = parseFloat(col.target.calcWidth);	×
UNCOV 193	const resizeScaled = (diff / updatedCombinedSpan) * col.target.gridColumnSpan;	×
UNCOV 194	const colWidth = col.target.width;	×
UNCOV 195	const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;	×
196
UNCOV 197	const minWidth = col.target.minWidthPx;	×
UNCOV 198	const maxWidth = col.target.maxWidthPx;	×
UNCOV 199	if (currentResizeWidth + resizeScaled < minWidth) {	×
200	col.target.width = isPercentageWidth ? col.target.minWidthPercent + '%' : minWidth + 'px';	×
201	updatedDiff += (currentResizeWidth - minWidth);	×
202	newCombinedSpan -= col.spanUsed;	×
203	setMinMaxCols = true;	×
UNCOV 204	} else if (maxWidth && (currentResizeWidth + resizeScaled > maxWidth)) {	×
205	col.target.width = isPercentageWidth ? col.target.maxWidthPercent + '%' : col.target.maxWidthPx + 'px';	×
206	updatedDiff -= (maxWidth - currentResizeWidth);	×
207	newCombinedSpan -= col.spanUsed;	×
208	setMinMaxCols = true;	×
209	} else {
210	// Save new ones that can be resized
UNCOV 211	newColsToResize.push(col);	×
212	}
213	});
214
UNCOV 215	updatedCombinedSpan = newCombinedSpan;	×
UNCOV 216	columnsToResize = newColsToResize;	×
217	} while (setMinMaxCols);
218
219	// Those left that don't reach min/max size resize them normally.
UNCOV 220	columnsToResize.forEach((col) => {	×
UNCOV 221	const resizeScaled = (updatedDiff / updatedCombinedSpan) * col.target.gridColumnSpan;	×
UNCOV 222	const colWidth = col.target.width;	×
UNCOV 223	const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;	×
UNCOV 224	if (isPercentageWidth) {	×
225	this._handlePercentageResize(resizeScaled, col.target);	×
226	} else {
UNCOV 227	this._handlePixelResize(resizeScaled, col.target);	×
228	}
229	});
230	}
231	}

IgniteUI / igniteui-angular / 13331632524

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