d9ae709b-3c27-4b69-b125-b8b80b54f90b

import { OnInit, OnDestroy, Component, ChangeDetectionStrategy, Input, Output, NgZone, EventEmitter, ElementRef } from '@angular/core';
import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
import { ThyResizeDirection } from './interface';
import { ThyResizableService } from './resizable.service';
import { takeUntil } from 'rxjs/operators';
import { Constructor, ThyUnsubscribe, MixinBase, mixinUnsubscribe, InputBoolean } from 'ngx-tethys/core';
import { fromEvent, merge } from 'rxjs';
import { useHostRenderer } from '@tethys/cdk/dom';
import { NgIf } from '@angular/common';

export class ThyResizeHandleMouseDownEvent {
    constructor(public direction: ThyResizeDirection, public mouseEvent: MouseEvent | TouchEvent) {}
}

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

const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveListenerOptions({ passive: true });

/**
 * 定义调整手柄及方向
 * @name thy-resize-handle
 */
@Component({
    selector: 'thy-resize-handle, [thy-resize-handle]',
    exportAs: 'thyResizeHandle',
    template: `
        <ng-content></ng-content>
        <div *ngIf="thyLine" class="thy-resizable-handle-line"></div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
    host: {
        class: 'thy-resizable-handle',
        '[class.thy-resizable-handle-top]': `thyDirection === 'top'`,
        '[class.thy-resizable-handle-right]': `thyDirection === 'right'`,
        '[class.thy-resizable-handle-bottom]': `thyDirection === 'bottom'`,
        '[class.thy-resizable-handle-left]': `thyDirection === 'left'`,
        '[class.thy-resizable-handle-topRight]': `thyDirection === 'topRight'`,
        '[class.thy-resizable-handle-bottomRight]': `thyDirection === 'bottomRight'`,
        '[class.thy-resizable-handle-bottomLeft]': `thyDirection === 'bottomLeft'`,
        '[class.thy-resizable-handle-topLeft]': `thyDirection === 'topLeft'`,
        '[class.thy-resizable-handle-box-hover]': 'entered'
    },
    standalone: true,
    imports: [NgIf]
})
export class ThyResizeHandleComponent extends _MixinBase implements OnInit, OnDestroy {
    /**
     * 调整方向
     * @type top | right | bottom | left | topRight | bottomRight | bottomLeft | topLeft
     */
    @Input() thyDirection: ThyResizeDirection = 'bottomRight';

    /**
     * 是否展示拖拽线
     */
    @Input() @InputBoolean() thyLine = false;

    /**
     * MouseDown 回调事件
     */
    @Output() readonly thyMouseDown = new EventEmitter<ThyResizeHandleMouseDownEvent>();

    private hostRenderer = useHostRenderer();

    constructor(private ngZone: NgZone, private thyResizableService: ThyResizableService, private host: ElementRef<HTMLElement>) {
        super();
    }

    ngOnInit(): void {
        this.thyResizableService.mouseEnteredOutsideAngular$.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(entered => {
            if (entered) {
                this.hostRenderer.addClass('thy-resizable-handle-box-hover');
            } else {
                this.hostRenderer.removeClass('thy-resizable-handle-box-hover');
            }
        });
        this.ngZone.runOutsideAngular(() => {
            // Note: since Chrome 56 defaults document level `touchstart` listener to passive.
            // The element `touchstart` listener is not passive by default
            // We never call `preventDefault()` on it, so we're safe making it passive too.
            merge(
                fromEvent<MouseEvent>(this.host.nativeElement, 'mousedown', passiveEventListenerOptions),
                fromEvent<TouchEvent>(this.host.nativeElement, 'touchstart', passiveEventListenerOptions)
            )
                .pipe(takeUntil(this.ngUnsubscribe$))
                .subscribe((event: MouseEvent | TouchEvent) => {
                    this.thyResizableService.handleMouseDownOutsideAngular$.next(
                        new ThyResizeHandleMouseDownEvent(this.thyDirection, event)
                    );
                });
        });
    }
    ngOnDestroy(): void {
        super.ngOnDestroy();
    }
}

1	import { OnInit, OnDestroy, Component, ChangeDetectionStrategy, Input, Output, NgZone, EventEmitter, ElementRef } from '@angular/core';
2	import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
3	import { ThyResizeDirection } from './interface';
4	import { ThyResizableService } from './resizable.service';
5	import { takeUntil } from 'rxjs/operators';
6	import { Constructor, ThyUnsubscribe, MixinBase, mixinUnsubscribe, InputBoolean } from 'ngx-tethys/core';
7	import { fromEvent, merge } from 'rxjs';
8	import { useHostRenderer } from '@tethys/cdk/dom';
9	import { NgIf } from '@angular/common';
10
11	export class ThyResizeHandleMouseDownEvent {
12	constructor(public direction: ThyResizeDirection, public mouseEvent: MouseEvent \| TouchEvent) {}	×
13	}	×
14
15	const _MixinBase: Constructor<ThyUnsubscribe> & typeof MixinBase = mixinUnsubscribe(MixinBase);
16		1✔
17	const passiveEventListenerOptions = <AddEventListenerOptions>normalizePassiveListenerOptions({ passive: true });	1✔
18
19	/**
20	* 定义调整手柄及方向
21	* @name thy-resize-handle
22	*/	1✔
23	@Component({
24	selector: 'thy-resize-handle, [thy-resize-handle]',	×
25	exportAs: 'thyResizeHandle',	×
26	template: `	×
27	<ng-content></ng-content>	×
28	<div *ngIf="thyLine" class="thy-resizable-handle-line"></div>	×
29	`,	×
30	changeDetection: ChangeDetectionStrategy.OnPush,	×
31	host: {	×
32	class: 'thy-resizable-handle',
33	'[class.thy-resizable-handle-top]': `thyDirection === 'top'`,
34	'[class.thy-resizable-handle-right]': `thyDirection === 'right'`,	×
35	'[class.thy-resizable-handle-bottom]': `thyDirection === 'bottom'`,	×
36	'[class.thy-resizable-handle-left]': `thyDirection === 'left'`,	×
37	'[class.thy-resizable-handle-topRight]': `thyDirection === 'topRight'`,
38	'[class.thy-resizable-handle-bottomRight]': `thyDirection === 'bottomRight'`,
39	'[class.thy-resizable-handle-bottomLeft]': `thyDirection === 'bottomLeft'`,	×
40	'[class.thy-resizable-handle-topLeft]': `thyDirection === 'topLeft'`,
41	'[class.thy-resizable-handle-box-hover]': 'entered'
42	},	×
43	standalone: true,
44	imports: [NgIf]
45	})
46	export class ThyResizeHandleComponent extends _MixinBase implements OnInit, OnDestroy {	×
47	/**
48	* 调整方向
49	* @type top \| right \| bottom \| left \| topRight \| bottomRight \| bottomLeft \| topLeft	×
50	*/
51	@Input() thyDirection: ThyResizeDirection = 'bottomRight';
52
53	/**
54	* 是否展示拖拽线	×
55	*/
56	@Input() @InputBoolean() thyLine = false;	1✔
57
58	/**
59	* MouseDown 回调事件
60	*/
61	@Output() readonly thyMouseDown = new EventEmitter<ThyResizeHandleMouseDownEvent>();	1✔
62
63	private hostRenderer = useHostRenderer();
64
65	constructor(private ngZone: NgZone, private thyResizableService: ThyResizableService, private host: ElementRef<HTMLElement>) {
66	super();
67	}	1✔
68
69	ngOnInit(): void {
70	this.thyResizableService.mouseEnteredOutsideAngular$.pipe(takeUntil(this.ngUnsubscribe$)).subscribe(entered => {
71	if (entered) {	1✔
72	this.hostRenderer.addClass('thy-resizable-handle-box-hover');
73	} else {
74	this.hostRenderer.removeClass('thy-resizable-handle-box-hover');
75	}
76	});
77	this.ngZone.runOutsideAngular(() => {
78	// Note: since Chrome 56 defaults document level `touchstart` listener to passive.
79	// The element `touchstart` listener is not passive by default
80	// We never call `preventDefault()` on it, so we're safe making it passive too.
81	merge(
82	fromEvent<MouseEvent>(this.host.nativeElement, 'mousedown', passiveEventListenerOptions),
83	fromEvent<TouchEvent>(this.host.nativeElement, 'touchstart', passiveEventListenerOptions)
84	)
85	.pipe(takeUntil(this.ngUnsubscribe$))
86	.subscribe((event: MouseEvent \| TouchEvent) => {
87	this.thyResizableService.handleMouseDownOutsideAngular$.next(
88	new ThyResizeHandleMouseDownEvent(this.thyDirection, event)
89	);
90	});
91	});
92	}
93	ngOnDestroy(): void {
94	super.ngOnDestroy();
95	}
96	}

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