9d97ea59-8281-44cd-9178-26bcf3cf60b0

Committed 03 Apr 2024 08:21AM UTC coverage: 90.364% (-0.04%) from 90.404%

Build # 9d97ea59-8281-44cd-9178-26bcf3cf60b0

Build Type

Pull #3061

circleci

Committed by

minlovehua

Commit Message

Merge branch 'master' of github.com:atinc/ngx-tethys into minlovehua/takeuntil

Pull Request Pull Request #3061: refactor(all): use takeUntilDestroyed instead of mixinUnsubscribe INFR-9529

Run Details

5411 of 6635 branches covered (81.55%)

Branch coverage included in aggregate %.

45 of 48 new or added lines in 16 files covered. (93.75%)

54 existing lines in 9 files now uncovered.

13147 of 13902 relevant lines covered (94.57%)

981.42 hits per line

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

94.85

/src/resizable/resizable.directive.ts

import {
    Directive,
    AfterViewInit,
    OnDestroy,
    ElementRef,
    Renderer2,
    NgZone,
    Input,
    Output,
    EventEmitter,
    ChangeDetectorRef,
    inject,
    DestroyRef,
    booleanAttribute,
    numberAttribute
} from '@angular/core';
import { ThyResizableService } from './resizable.service';
import { Platform } from '@angular/cdk/platform';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ThyResizeHandleMouseDownEvent } from './resize-handle.component';
import { ThyResizeEvent } from './interface';
import { getEventWithPoint, ensureInBounds, setCompatibleStyle } from './utils';
import { fromEvent } from 'rxjs';

/**
 * 调整尺寸
 * @name thyResizable
 */
@Directive({
    selector: '[thyResizable]',
    providers: [ThyResizableService],
    host: {
        class: 'thy-resizable',
        '[class.thy-resizable-resizing]': 'resizing',
        '[class.thy-resizable-disabled]': 'thyDisabled'
    },
    standalone: true
})
export class ThyResizableDirective implements AfterViewInit, OnDestroy {
    /**
     * 调整尺寸的边界
     * @default parent
     * @type 'window' | 'parent' | ElementRef<HTMLElement>
     */
    @Input() thyBounds: 'window' | 'parent' | ElementRef<HTMLElement> = 'parent';

    /**
     * 最大高度(超过边界部分忽略)
     */
    @Input({ transform: numberAttribute }) thyMaxHeight?: number;

    /**
     * 最大宽度(超过边界部分忽略)
     */
    @Input({ transform: numberAttribute }) thyMaxWidth?: number;

    /**
     * 最小高度
     */
    @Input({ transform: numberAttribute }) thyMinHeight: number = 40;

    /**
     * 最小宽度
     */
    @Input({ transform: numberAttribute }) thyMinWidth: number = 40;

    /**
     * 栅格列数(-1 为不栅格)
     */
    @Input({ transform: numberAttribute }) thyGridColumnCount: number = -1;

    /**
     * 栅格最大列数
     */
    @Input({ transform: numberAttribute }) thyMaxColumn: number = -1;

    /**
     * 栅格最小列数
     */
    @Input({ transform: numberAttribute }) thyMinColumn: number = -1;

    /**
     * 锁定宽高比
     */
    @Input({ transform: booleanAttribute }) thyLockAspectRatio: boolean = false;

    /**
     * 是否预览模式
     */
    @Input({ transform: booleanAttribute }) thyPreview: boolean = false;

    /**
     * 是否禁用调整大小
     */
    @Input({ transform: booleanAttribute }) thyDisabled: boolean = false;

    /**
     * 调整尺寸时的事件
     */
    @Output() readonly thyResize = new EventEmitter<ThyResizeEvent>();

    /**
     * 开始调整尺寸时的事件
     */
    @Output() readonly thyResizeStart = new EventEmitter<ThyResizeEvent>();

    /**
     * 结束调整尺寸时的事件
     */
    @Output() readonly thyResizeEnd = new EventEmitter<ThyResizeEvent>();

    resizing = false;
    private nativeElement!: HTMLElement;
    private nativeElementRect!: ClientRect | DOMRect;
    private sizeCache: ThyResizeEvent | null = null;
    private ghostElement: HTMLDivElement | null = null;
    private currentHandleEvent: ThyResizeHandleMouseDownEvent | null = null;
    private readonly destroyRef = inject(DestroyRef);

    constructor(
        private elementRef: ElementRef<HTMLElement>,
        private renderer: Renderer2,
        private platform: Platform,
        private ngZone: NgZone,
        private thyResizableService: ThyResizableService,
        private changeDetectorRef: ChangeDetectorRef
    ) {
        this.thyResizableService.handleMouseDownOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
            if (this.thyDisabled) {
                return;
            }
            this.resizing = true;
            const { mouseEvent } = event;
            this.thyResizableService.startResizing(mouseEvent);
            this.currentHandleEvent = event;
            this.setCursor();
            // Re-enter the Angular zone and run the change detection only if there're any `thyResizeStart` listeners,
            // e.g.: `<div thyResizable (thyResizeStart)="..."></div>`.
            if (this.thyResizeStart.observers.length) {
                this.ngZone.run(() => this.thyResizeStart.emit({ mouseEvent }));
            }
            this.nativeElementRect = this.nativeElement.getBoundingClientRect();
        });

        this.thyResizableService.documentMouseUpOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
            if (this.resizing) {
                this.ngZone.run(() => {
                    this.resizing = false;
                    this.changeDetectorRef.markForCheck();
                });
                this.thyResizableService.documentMouseUpOutsideAngular$.next(event);
                this.endResize(event);
            }
        });

        this.thyResizableService.documentMouseMoveOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {
            if (this.resizing) {
                this.resize(event);
            }
        });
    }

    ngAfterViewInit(): void {
        if (!this.platform.isBrowser) {
            return;
        }
        this.nativeElement = this.elementRef.nativeElement;
        this.ngZone.runOutsideAngular(() => {
            fromEvent(this.nativeElement, 'mouseenter')
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe(() => {
                    this.thyResizableService.mouseEnteredOutsideAngular$.next(true);
                });

            fromEvent(this.nativeElement, 'mouseleave')
                .pipe(takeUntilDestroyed(this.destroyRef))
                .subscribe(() => {
                    this.thyResizableService.mouseEnteredOutsideAngular$.next(false);
                });
        });
    }

    setCursor(): void {
        switch (this.currentHandleEvent!.direction) {
            case 'left':
            case 'right':
                this.renderer.setStyle(document.body, 'cursor', 'ew-resize');
                break;
            case 'top':
            case 'bottom':
                this.renderer.setStyle(document.body, 'cursor', 'ns-resize');
                break;
            case 'topLeft':
            case 'bottomRight':
                this.renderer.setStyle(document.body, 'cursor', 'nwse-resize');
                break;
            case 'topRight':
            case 'bottomLeft':
                this.renderer.setStyle(document.body, 'cursor', 'nesw-resize');
                break;
        }
        setCompatibleStyle(document.body, 'user-select', 'none');
    }

    endResize(event: MouseEvent | TouchEvent): void {
        this.renderer.setStyle(document.body, 'cursor', '');
        setCompatibleStyle(document.body, 'user-select', '');
        this.removeGhostElement();
        const size = this.sizeCache
            ? { ...this.sizeCache }
            : {
                  width: this.nativeElementRect.width,
                  height: this.nativeElementRect.height
              };
        // Re-enter the Angular zone and run the change detection only if there're any `thyResizeEnd` listeners,
        // e.g.: `<div thyResizable (thyResizeEnd)="..."></div>`.
        if (this.thyResizeEnd.observers.length) {
            this.ngZone.run(() => {
                this.thyResizeEnd.emit({
                    ...size,
                    mouseEvent: event
                });
            });
        }
        this.sizeCache = null;
        this.currentHandleEvent = null;
    }

    resize(event: MouseEvent | TouchEvent): void {
        const nativeElementRect = this.nativeElementRect;
        const resizeEvent = getEventWithPoint(event);
        const handleEvent = getEventWithPoint(this.currentHandleEvent!.mouseEvent);
        let width = nativeElementRect.width;
        let height = nativeElementRect.height;
        const ratio = this.thyLockAspectRatio ? width / height : -1;
        switch (this.currentHandleEvent!.direction) {
            case 'bottomRight':
                width = resizeEvent.clientX - nativeElementRect.left;
                height = resizeEvent.clientY - nativeElementRect.top;
                break;
            case 'bottomLeft':
                width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);
                height = resizeEvent.clientY - nativeElementRect.top;
                break;
            case 'topRight':
                width = resizeEvent.clientX - nativeElementRect.left;
                height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);
                break;
            case 'topLeft':
                width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);
                height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);
                break;
            case 'top':
                height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);
                break;
            case 'right':
                width = resizeEvent.clientX - nativeElementRect.left;
                break;
            case 'bottom':
                height = resizeEvent.clientY - nativeElementRect.top;
                break;
            case 'left':
                width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);
        }
        const size = this.calcSize(width, height, ratio);
        this.sizeCache = { ...size };
        // Re-enter the Angular zone and run the change detection only if there're any `thyResize` listeners,
        // e.g.: `<div thyResizable (thyResize)="..."></div>`.
        if (this.thyResize.observers.length) {
            this.ngZone.run(() => {
                this.thyResize.emit({
                    ...size,
                    mouseEvent: event
                });
            });
        }

        if (this.thyPreview) {
            this.previewResize(size);
        }
    }

    calcSize(width: number, height: number, ratio: number): ThyResizeEvent {
        let newWidth: number;
        let newHeight: number;
        let maxWidth: number;
        let maxHeight: number;
        let col = 0;
        let spanWidth = 0;
        let minWidth = this.thyMinWidth;
        let boundWidth = Infinity;
        let boundHeight = Infinity;
        if (this.thyBounds === 'parent') {
            const parent = this.renderer.parentNode(this.nativeElement);
            if (parent instanceof HTMLElement) {
                const parentRect = parent.getBoundingClientRect();
                boundWidth = parentRect.width;
                boundHeight = parentRect.height;
            }
        } else if (this.thyBounds === 'window') {
            if (typeof window !== 'undefined') {
                boundWidth = window.innerWidth;
                boundHeight = window.innerHeight;
            }
        } else if (this.thyBounds && this.thyBounds.nativeElement && this.thyBounds.nativeElement instanceof HTMLElement) {
            const boundsRect = this.thyBounds.nativeElement.getBoundingClientRect();
            boundWidth = boundsRect.width;
            boundHeight = boundsRect.height;
        }

        maxWidth = ensureInBounds(this.thyMaxWidth!, boundWidth);
        maxHeight = ensureInBounds(this.thyMaxHeight!, boundHeight);

        if (this.thyGridColumnCount !== -1) {
            spanWidth = maxWidth / this.thyGridColumnCount;
            minWidth = this.thyMinColumn !== -1 ? spanWidth * this.thyMinColumn : minWidth;
            maxWidth = this.thyMaxColumn !== -1 ? spanWidth * this.thyMaxColumn : maxWidth;
        }

        if (ratio !== -1) {
            if (/(left|right)/i.test(this.currentHandleEvent!.direction)) {
                newWidth = Math.min(Math.max(width, minWidth), maxWidth);
                newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
                if (newHeight >= maxHeight || newHeight <= this.thyMinHeight) {
                    newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
                }
            } else {
                newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
                newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
                if (newWidth >= maxWidth || newWidth <= minWidth) {
                    newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
                }
            }
        } else {
            newWidth = Math.min(Math.max(width, minWidth), maxWidth);
            newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
        }

        if (this.thyGridColumnCount !== -1) {
            col = Math.round(newWidth / spanWidth);
            newWidth = col * spanWidth;
        }

        return {
            col,
            width: newWidth,
            height: newHeight
        };
    }

    previewResize({ width, height }: ThyResizeEvent): void {
        this.createGhostElement();
        this.renderer.setStyle(this.ghostElement, 'width', `${width}px`);
        this.renderer.setStyle(this.ghostElement, 'height', `${height}px`);
    }

    createGhostElement(): void {
        if (!this.ghostElement) {
            this.ghostElement = this.renderer.createElement('div');
            this.renderer.setAttribute(this.ghostElement, 'class', 'thy-resizable-preview');
        }
        this.renderer.appendChild(this.nativeElement, this.ghostElement);
    }

    removeGhostElement(): void {
        if (this.ghostElement) {
            this.renderer.removeChild(this.nativeElement, this.ghostElement);
        }
    }

    ngOnDestroy(): void {
        this.ghostElement = null;
        this.sizeCache = null;
    }
}

1	import {
2	Directive,
3	AfterViewInit,
4	OnDestroy,
5	ElementRef,
6	Renderer2,
7	NgZone,
8	Input,
9	Output,
10	EventEmitter,
11	ChangeDetectorRef,
12	inject,	1✔
13	DestroyRef,
14	booleanAttribute,	32✔
15	numberAttribute	32✔
16	} from '@angular/core';	32✔
17	import { ThyResizableService } from './resizable.service';	32✔
18	import { Platform } from '@angular/cdk/platform';	32✔
19	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';	32✔
20	import { ThyResizeHandleMouseDownEvent } from './resize-handle.component';	32✔
21	import { ThyResizeEvent } from './interface';	32✔
22	import { getEventWithPoint, ensureInBounds, setCompatibleStyle } from './utils';	32✔
23	import { fromEvent } from 'rxjs';	32✔
24		32✔
25	/**	32✔
26	* 调整尺寸	32✔
27	* @name thyResizable	32✔
28	*/	32✔
29	@Directive({	32✔
30	selector: '[thyResizable]',	32✔
31	providers: [ThyResizableService],	32✔
32	host: {	32✔
33	class: 'thy-resizable',	32✔
34	'[class.thy-resizable-resizing]': 'resizing',	32✔
35	'[class.thy-resizable-disabled]': 'thyDisabled'	32✔
36	},	32✔
37	standalone: true	32✔
38	})	31✔
39	export class ThyResizableDirective implements AfterViewInit, OnDestroy {	1✔
40	/**
41	* 调整尺寸的边界	30✔
42	* @default parent	30✔
43	* @type 'window' \| 'parent' \| ElementRef<HTMLElement>	30✔
44	*/	30✔
45	@Input() thyBounds: 'window' \| 'parent' \| ElementRef<HTMLElement> = 'parent';	30✔
46
47	/**
48	* 最大高度(超过边界部分忽略)	30✔
49	*/	6✔
50	@Input({ transform: numberAttribute }) thyMaxHeight?: number;
51		30✔
52	/**
53	* 最大宽度(超过边界部分忽略)	32✔
54	*/	52✔
55	@Input({ transform: numberAttribute }) thyMaxWidth?: number;	26✔
56		26✔
57	/**	26✔
58	* 最小高度
59	*/	26✔
60	@Input({ transform: numberAttribute }) thyMinHeight: number = 40;	26✔
61
62	/**
63	* 最小宽度	32✔
64	*/	27!
65	@Input({ transform: numberAttribute }) thyMinWidth: number = 40;	27✔
66
67	/**
68	* 栅格列数(-1 为不栅格)
69	*/
70	@Input({ transform: numberAttribute }) thyGridColumnCount: number = -1;	32!
UNCOV 71		×
72	/**
73	* 栅格最大列数	32✔
74	*/	32✔
75	@Input({ transform: numberAttribute }) thyMaxColumn: number = -1;	32✔
76
77	/**
78	* 栅格最小列数	2✔
79	*/
80	@Input({ transform: numberAttribute }) thyMinColumn: number = -1;	32✔
81
82	/**
83	* 锁定宽高比	2✔
84	*/
85	@Input({ transform: booleanAttribute }) thyLockAspectRatio: boolean = false;
86
87	/**
88	* 是否预览模式	30✔
89	*/
90	@Input({ transform: booleanAttribute }) thyPreview: boolean = false;
91		11✔
92	/**	11✔
93	* 是否禁用调整大小
94	*/
95	@Input({ transform: booleanAttribute }) thyDisabled: boolean = false;	3✔
96		3✔
97	/**
98	* 调整尺寸时的事件
99	*/	14✔
100	@Output() readonly thyResize = new EventEmitter<ThyResizeEvent>();	14✔
101
102	/**
103	* 开始调整尺寸时的事件	2✔
104	*/	2✔
105	@Output() readonly thyResizeStart = new EventEmitter<ThyResizeEvent>();
106		30✔
107	/**
108	* 结束调整尺寸时的事件
109	*/	26✔
110	@Output() readonly thyResizeEnd = new EventEmitter<ThyResizeEvent>();	26✔
111		26✔
112	resizing = false;	26!
113	private nativeElement!: HTMLElement;
114	private nativeElementRect!: ClientRect \| DOMRect;
115	private sizeCache: ThyResizeEvent \| null = null;
116	private ghostElement: HTMLDivElement \| null = null;
117	private currentHandleEvent: ThyResizeHandleMouseDownEvent \| null = null;
118	private readonly destroyRef = inject(DestroyRef);
119
120	constructor(	26✔
121	private elementRef: ElementRef<HTMLElement>,	5✔
122	private renderer: Renderer2,	5✔
123	private platform: Platform,
124	private ngZone: NgZone,
125	private thyResizableService: ThyResizableService,
126	private changeDetectorRef: ChangeDetectorRef
127	) {
128	this.thyResizableService.handleMouseDownOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {	26✔
129	if (this.thyDisabled) {	26✔
130	return;
131	}
132	this.resizing = true;	27✔
133	const { mouseEvent } = event;	27✔
134	this.thyResizableService.startResizing(mouseEvent);	27✔
135	this.currentHandleEvent = event;	27✔
136	this.setCursor();	27✔
137	// Re-enter the Angular zone and run the change detection only if there're any `thyResizeStart` listeners,	27✔
138	// e.g.: `<div thyResizable (thyResizeStart)="..."></div>`.	27✔
139	if (this.thyResizeStart.observers.length) {
140	this.ngZone.run(() => this.thyResizeStart.emit({ mouseEvent }));	10✔
141	}	10✔
142	this.nativeElementRect = this.nativeElement.getBoundingClientRect();	10✔
143	});
144		1✔
145	this.thyResizableService.documentMouseUpOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {	1✔
146	if (this.resizing) {	1✔
147	this.ngZone.run(() => {
148	this.resizing = false;	1✔
149	this.changeDetectorRef.markForCheck();	1✔
150	});	1✔
151	this.thyResizableService.documentMouseUpOutsideAngular$.next(event);
152	this.endResize(event);	1✔
153	}	1✔
154	});	1✔
155
156	this.thyResizableService.documentMouseMoveOutsideAngular$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(event => {	2✔
157	if (this.resizing) {	2✔
158	this.resize(event);
159	}	9✔
160	});	9✔
161	}
162		1✔
163	ngAfterViewInit(): void {	1✔
164	if (!this.platform.isBrowser) {
165	return;	2✔
166	}
167	this.nativeElement = this.elementRef.nativeElement;	27✔
168	this.ngZone.runOutsideAngular(() => {	27✔
169	fromEvent(this.nativeElement, 'mouseenter')
170	.pipe(takeUntilDestroyed(this.destroyRef))
171	.subscribe(() => {	27✔
172	this.thyResizableService.mouseEnteredOutsideAngular$.next(true);	26✔
173	});	26✔
174
175	fromEvent(this.nativeElement, 'mouseleave')
176	.pipe(takeUntilDestroyed(this.destroyRef))
177	.subscribe(() => {
178	this.thyResizableService.mouseEnteredOutsideAngular$.next(false);
179	});	27✔
180	});	1✔
181	}
182
183	setCursor(): void {
184	switch (this.currentHandleEvent!.direction) {
185	case 'left':
186	case 'right':
187	this.renderer.setStyle(document.body, 'cursor', 'ew-resize');
188	break;	27✔
189	case 'top':	27✔
190	case 'bottom':	27✔
191	this.renderer.setStyle(document.body, 'cursor', 'ns-resize');	27✔
192	break;	27✔
193	case 'topLeft':	27✔
194	case 'bottomRight':	19✔
195	this.renderer.setStyle(document.body, 'cursor', 'nwse-resize');	19!
196	break;	19✔
197	case 'topRight':	19✔
198	case 'bottomLeft':	19✔
199	this.renderer.setStyle(document.body, 'cursor', 'nesw-resize');
200	break;
201	}	8✔
202	setCompatibleStyle(document.body, 'user-select', 'none');	7!
203	}	7✔
204		7✔
205	endResize(event: MouseEvent \| TouchEvent): void {
206	this.renderer.setStyle(document.body, 'cursor', '');
207	setCompatibleStyle(document.body, 'user-select', '');	1!
208	this.removeGhostElement();	1✔
209	const size = this.sizeCache	1✔
210	? { ...this.sizeCache }	1✔
211	: {
212	width: this.nativeElementRect.width,	27✔
213	height: this.nativeElementRect.height	27✔
214	};	27✔
215	// Re-enter the Angular zone and run the change detection only if there're any `thyResizeEnd` listeners,	2✔
216	// e.g.: `<div thyResizable (thyResizeEnd)="..."></div>`.	2!
217	if (this.thyResizeEnd.observers.length) {	2!
218	this.ngZone.run(() => {
219	this.thyResizeEnd.emit({	27✔
220	...size,	3✔
221	mouseEvent: event	2✔
222	});	2✔
223	});	2✔
224	}	1✔
225	this.sizeCache = null;
226	this.currentHandleEvent = null;
227	}
228		1✔
229	resize(event: MouseEvent \| TouchEvent): void {	1✔
230	const nativeElementRect = this.nativeElementRect;	1!
UNCOV 231	const resizeEvent = getEventWithPoint(event);	×
232	const handleEvent = getEventWithPoint(this.currentHandleEvent!.mouseEvent);
233	let width = nativeElementRect.width;
234	let height = nativeElementRect.height;
235	const ratio = this.thyLockAspectRatio ? width / height : -1;
236	switch (this.currentHandleEvent!.direction) {	24✔
237	case 'bottomRight':	24✔
238	width = resizeEvent.clientX - nativeElementRect.left;
239	height = resizeEvent.clientY - nativeElementRect.top;	27✔
240	break;	2✔
241	case 'bottomLeft':	2✔
242	width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);
243	height = resizeEvent.clientY - nativeElementRect.top;	27✔
244	break;
245	case 'topRight':
246	width = resizeEvent.clientX - nativeElementRect.left;
247	height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);
248	break;
249	case 'topLeft':
250	width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);	1✔
251	height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);	1✔
252	break;	1✔
253	case 'top':
254	height = nativeElementRect.height + (handleEvent.clientY - resizeEvent.clientY);
255	break;	1!
256	case 'right':	1✔
257	width = resizeEvent.clientX - nativeElementRect.left;	1✔
258	break;
259	case 'bottom':	1✔
260	height = resizeEvent.clientY - nativeElementRect.top;
261	break;
262	case 'left':	26✔
263	width = nativeElementRect.width + (handleEvent.clientX - resizeEvent.clientX);	1✔
264	}
265	const size = this.calcSize(width, height, ratio);
266	this.sizeCache = { ...size };
267	// Re-enter the Angular zone and run the change detection only if there're any `thyResize` listeners,	32✔
268	// e.g.: `<div thyResizable (thyResize)="..."></div>`.	32✔
269	if (this.thyResize.observers.length) {
270	this.ngZone.run(() => {	1✔
271	this.thyResize.emit({
272	...size,
273	mouseEvent: event
274	});
275	});
276	}
277
278	if (this.thyPreview) {	1✔
279	this.previewResize(size);
280	}
281	}
282
283	calcSize(width: number, height: number, ratio: number): ThyResizeEvent {
284	let newWidth: number;
285	let newHeight: number;
286	let maxWidth: number;
287	let maxHeight: number;
288	let col = 0;
289	let spanWidth = 0;
290	let minWidth = this.thyMinWidth;
291	let boundWidth = Infinity;
292	let boundHeight = Infinity;
293	if (this.thyBounds === 'parent') {
294	const parent = this.renderer.parentNode(this.nativeElement);
295	if (parent instanceof HTMLElement) {	1✔
296	const parentRect = parent.getBoundingClientRect();
297	boundWidth = parentRect.width;
298	boundHeight = parentRect.height;
299	}
300	} else if (this.thyBounds === 'window') {
301	if (typeof window !== 'undefined') {
302	boundWidth = window.innerWidth;
303	boundHeight = window.innerHeight;
304	}
305	} else if (this.thyBounds && this.thyBounds.nativeElement && this.thyBounds.nativeElement instanceof HTMLElement) {
306	const boundsRect = this.thyBounds.nativeElement.getBoundingClientRect();
307	boundWidth = boundsRect.width;
308	boundHeight = boundsRect.height;
309	}
310
311	maxWidth = ensureInBounds(this.thyMaxWidth!, boundWidth);
312	maxHeight = ensureInBounds(this.thyMaxHeight!, boundHeight);
313
314	if (this.thyGridColumnCount !== -1) {
315	spanWidth = maxWidth / this.thyGridColumnCount;
316	minWidth = this.thyMinColumn !== -1 ? spanWidth * this.thyMinColumn : minWidth;
317	maxWidth = this.thyMaxColumn !== -1 ? spanWidth * this.thyMaxColumn : maxWidth;
318	}
319
320	if (ratio !== -1) {
321	if (/(left\|right)/i.test(this.currentHandleEvent!.direction)) {
322	newWidth = Math.min(Math.max(width, minWidth), maxWidth);
323	newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
324	if (newHeight >= maxHeight \|\| newHeight <= this.thyMinHeight) {
325	newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
326	}
327	} else {
328	newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
329	newWidth = Math.min(Math.max(newHeight * ratio, minWidth), maxWidth);
330	if (newWidth >= maxWidth \|\| newWidth <= minWidth) {
331	newHeight = Math.min(Math.max(newWidth / ratio, this.thyMinHeight), maxHeight);
332	}
333	}
334	} else {
335	newWidth = Math.min(Math.max(width, minWidth), maxWidth);
336	newHeight = Math.min(Math.max(height, this.thyMinHeight), maxHeight);
337	}
338
339	if (this.thyGridColumnCount !== -1) {
340	col = Math.round(newWidth / spanWidth);
341	newWidth = col * spanWidth;
342	}
343
344	return {
345	col,
346	width: newWidth,
347	height: newHeight
348	};
349	}
350
351	previewResize({ width, height }: ThyResizeEvent): void {
352	this.createGhostElement();
353	this.renderer.setStyle(this.ghostElement, 'width', `${width}px`);
354	this.renderer.setStyle(this.ghostElement, 'height', `${height}px`);
355	}
356
357	createGhostElement(): void {
358	if (!this.ghostElement) {
359	this.ghostElement = this.renderer.createElement('div');
360	this.renderer.setAttribute(this.ghostElement, 'class', 'thy-resizable-preview');
361	}
362	this.renderer.appendChild(this.nativeElement, this.ghostElement);
363	}
364
365	removeGhostElement(): void {
366	if (this.ghostElement) {
367	this.renderer.removeChild(this.nativeElement, this.ghostElement);
368	}
369	}
370
371	ngOnDestroy(): void {
372	this.ghostElement = null;
373	this.sizeCache = null;
374	}
375	}

atinc / ngx-tethys / 9d97ea59-8281-44cd-9178-26bcf3cf60b0

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