d9ae709b-3c27-4b69-b125-b8b80b54f90b

import {
    Directive,
    AfterViewInit,
    OnDestroy,
    ElementRef,
    Renderer2,
    NgZone,
    Input,
    Output,
    EventEmitter,
    ChangeDetectorRef
} from '@angular/core';
import { Constructor, ThyUnsubscribe, MixinBase, mixinUnsubscribe, InputBoolean, InputNumber } from 'ngx-tethys/core';
import { ThyResizableService } from './resizable.service';
import { Platform } from '@angular/cdk/platform';
import { takeUntil } from 'rxjs/operators';
import { ThyResizeHandleMouseDownEvent } from './resize-handle.component';
import { ThyResizeEvent } from './interface';
import { getEventWithPoint, ensureInBounds, setCompatibleStyle } from './utils';
import { fromEvent } from 'rxjs';

const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);

/**
 * 调整尺寸
 * @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 extends _MixinBase implements AfterViewInit, OnDestroy {
    /**
     * 调整尺寸的边界
     * @default parent
     * @type 'window' | 'parent' | ElementRef<HTMLElement>
     */
    @Input() thyBounds: 'window' | 'parent' | ElementRef<HTMLElement> = 'parent';

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

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

    /**
     * 最小高度
     */
    @Input() @InputNumber() thyMinHeight: number = 40;

    /**
     * 最小宽度
     */
    @Input() @InputNumber() thyMinWidth: number = 40;

    /**
     * 栅格列数(-1 为不栅格)
     */
    @Input() @InputNumber() thyGridColumnCount: number = -1;

    /**
     * 栅格最大列数
     */
    @Input() @InputNumber() thyMaxColumn: number = -1;

    /**
     * 栅格最小列数
     */
    @Input() @InputNumber() thyMinColumn: number = -1;

    /**
     * 锁定宽高比
     */
    @Input() @InputBoolean() thyLockAspectRatio: boolean = false;

    /**
     * 是否预览模式
     */
    @Input() @InputBoolean() thyPreview: boolean = false;

    /**
     * 是否禁用调整大小
     */
    @Input() @InputBoolean() 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;

    constructor(
        private elementRef: ElementRef<HTMLElement>,
        private renderer: Renderer2,
        private platform: Platform,
        private ngZone: NgZone,
        private thyResizableService: ThyResizableService,
        private changeDetectorRef: ChangeDetectorRef
    ) {
        super();
        this.thyResizableService.handleMouseDownOutsideAngular$.pipe(takeUntil(this.ngUnsubscribe$)).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(takeUntil(this.ngUnsubscribe$)).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(takeUntil(this.ngUnsubscribe$)).subscribe(event => {
            if (this.resizing) {
                this.resize(event);
            }
        });
    }

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

            fromEvent(this.nativeElement, 'mouseleave')
                .pipe(takeUntil(this.ngUnsubscribe$))
                .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');
    }

    setPosition(): void {
        const position = getComputedStyle(this.nativeElement).position;
        if (position === 'static' || !position) {
            this.renderer.setStyle(this.nativeElement, 'position', 'relative');
        }
    }

    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;
        super.ngOnDestroy();
    }
}

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

atinc / ngx-tethys / d9ae709b-3c27-4b69-b125-b8b80b54f90b

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