17b77b32-5a0a-4e7f-ae2b-c14d1af1bc11

Committed 05 Nov 2024 09:29AM UTC coverage: 90.345% (-0.09%) from 90.431%

Build # 17b77b32-5a0a-4e7f-ae2b-c14d1af1bc11

Build Type

Pull #3229

circleci

Committed by

minlovehua

Commit Message

feat(watermark): support dark theme for watermark component #TINFR-501

Pull Request Pull Request #3229: feat(watermark): support dark theme for watermark component #TINFR-501

Run Details

5521 of 6762 branches covered (81.65%)

Branch coverage included in aggregate %.

33 of 35 new or added lines in 1 file covered. (94.29%)

10 existing lines in 2 files now uncovered.

13240 of 14004 relevant lines covered (94.54%)

992.01 hits per line

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

79.65

/src/watermark/watermark.directive.ts

import {
    Directive,
    Input,
    ElementRef,
    OnInit,
    SimpleChanges,
    OnChanges,
    inject,
    DestroyRef,
    Signal,
    computed,
    WritableSignal,
    signal
} from '@angular/core';
import { Subject, Observable } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';
import { MutationObserverFactory } from '@angular/cdk/observers';
import { coerceBooleanProperty } from 'ngx-tethys/util';
import { ThyTheme } from 'ngx-tethys/core';

/**
 * @public
 * 水印样式配置
 */
export interface ThyCanvasConfigType {
    /**
     * 偏移角度
     */
    degree?: number;
    /**
     * 字体颜色。如果传的是数组，第一个为默认主题的字体颜色，第二个为黑暗主题的字体颜色
     */
    color?: string | string[];
    /**
     * 字体大小
     */
    fontSize?: number | string;
    /**
     * 文本行高
     */
    textLineHeight?: number;
    /**
     * 横纵间距
     */
    gutter?: number[];
}

/**
 * 水印指令
 * @name thyWatermark
 */
@Directive({
    selector: '[thyWatermark]',
    standalone: true
})
export class ThyWatermarkDirective implements OnInit, OnChanges {
    /**
     * 是否禁用，默认为 false
     */
    @Input({ transform: coerceBooleanProperty })
    thyDisabled: boolean = false;

    content: string;
    /**
     * 水印内容
     */
    @Input()
    set thyWatermark(value: string) {
        value = value?.replace(/^\"|\"$/g, '');
        this.content = !!value ? value : '';
    }

    /**
     * 水印样式配置
     */
    @Input() thyCanvasConfig: ThyCanvasConfigType;

    private createWatermark$ = new Subject<string>();

    private observer: MutationObserver;

    private themeObserver: MutationObserver;

    private theme: WritableSignal<ThyTheme> = signal(ThyTheme.light);

    private isDarkTheme: Signal<boolean> = computed(() => {
        return (
            (this.theme() === ThyTheme.system && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) ||
            this.theme() === ThyTheme.dark
        );
    });

    private canvas: HTMLCanvasElement;

    private wmDiv: HTMLElement;

    private readonly destroyRef = inject(DestroyRef);

    constructor(private el: ElementRef) {}

    ngOnInit() {
        if (!this.thyDisabled) {
            this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                this.observeAttributes()
                    .pipe(takeUntilDestroyed(this.destroyRef))
                    .subscribe(() => {});
                this.observeTheme()
                    .pipe(takeUntilDestroyed(this.destroyRef))
                    .subscribe(() => {});
            });

            this.theme.set((document.documentElement.getAttribute('theme') as ThyTheme) || ThyTheme.light);
            this.createWatermark();
        }
    }

    ngOnChanges(changes: SimpleChanges): void {
        const { thyWatermark, thyDisabled } = changes;
        const thyWatermarkChange = () => {
            if (thyWatermark.firstChange) return;
            if (thyWatermark.currentValue) {
                this.refreshWatermark();
            }
        };
        const thyDisabledChange = () => {
            if (thyDisabled.firstChange) return;
            thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();
        };
        thyWatermark && thyWatermarkChange();
        thyDisabled && thyDisabledChange();
    }

    private refreshWatermark() {
        this.removeWatermark();
        this.createWatermark();
    }

    private removeWatermark() {
        if (this.wmDiv) {
            this.wmDiv.remove();
            this.wmDiv = null;
        }
    }

    getThemeColor(color: string | string[]) {
        if (typeof color === 'string') {
            return color;
        }
        if (Array.isArray(color)) {
            if (color.length === 1) {
                return color[0];
            }

            if (color.length > 1) {
                if (this.isDarkTheme()) {
                    return color[1];
                } else {
                    return color[0];
                }
            }
        }
    }

    createCanvas() {
        let { gutter, fontSize, color, degree, textLineHeight } = {
            ...DEFAULT_CANVAS_CONFIG,
            ...(this.thyCanvasConfig || {})
        };
        color = this.getThemeColor(color);

        const [xGutter, yGutter] = gutter;
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');

        const getFakeSize = () => {
            const fakeBox = document.createElement('div');
            const fakeBoxStyle = {
                position: 'absolute',
                top: 0,
                left: 0,
                display: 'inline-block',
                'font-size': `${parseFloat('' + fontSize)}px`,
                'word-wrap': 'break-word',
                'font-family': 'inherit',
                'white-space': 'pre-line'
            };
            const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');
            fakeBox.setAttribute('style', styleStr);

            fakeBox.innerHTML = this.content.replace(/(\\n)/gm, '</br>');
            document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);
            const { width, height } = fakeBox.getBoundingClientRect();
            fakeBox.remove();
            return { width, height };
        };
        const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();

        const angle = (degree * Math.PI) / 180;
        const contentArr = this.content.split('\\n');
        const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;

        let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));
        const canvasWidth = start + fakeBoxWidth;
        canvas.setAttribute('width', '' + (canvasWidth + xGutter));
        canvas.setAttribute('height', '' + (canvasHeight + yGutter));

        ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;
        ctx.textAlign = 'center';
        ctx.textBaseline = 'top';
        ctx.fillStyle = color;
        ctx.rotate(0 - (degree * Math.PI) / 180);
        contentArr.map((k, i) => {
            ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);
            start += Math.sin(angle) * textLineHeight;
        });
        this.canvas = canvas;
        return canvas;
    }

    private createWatermark(isRefresh = true) {
        const watermarkDiv = this.wmDiv || document.createElement('div');

        const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();
        const watermarkStyle = {
            ...DEFAULT_WATERMARK_CONFIG,
            'background-image': `url(${background})`
        };

        const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');
        watermarkDiv.setAttribute('style', styleStr);

        if (!this.wmDiv) {
            const parentNode = this.el.nativeElement;
            watermarkDiv.classList.add(`_vm`);
            this.wmDiv = watermarkDiv;
            parentNode.insertBefore(watermarkDiv, parentNode.firstChild);
        }
        this.createWatermark$.next('');
    }

    private observeAttributes() {
        this.observer?.disconnect();
        return new Observable(observe => {
            const stream = new Subject<MutationRecord[]>();
            this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));
            if (this.observer) {
                this.observer.observe(this.wmDiv, {
                    attributes: true
                });
            }
            stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
                if (this.wmDiv) {
                    this?.observer?.disconnect();
                    this.createWatermark(false);
                }
            });
            observe.next(stream);
            return () => {
                this.observer?.disconnect();
            };
        });
    }

    private observeTheme() {
        this.themeObserver?.disconnect();
        return new Observable(observe => {
            const stream = new Subject<MutationRecord[]>();
            this.themeObserver = new MutationObserverFactory().create(mutations => stream.next(mutations));
            if (this.themeObserver) {
                this.themeObserver.observe(document.documentElement, {
                    attributes: true,
                    attributeFilter: ['theme']
                });
            }
            stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(mutations => {
                for (const mutation of mutations) {
                    if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {
                        const theme = (document.documentElement.getAttribute('theme') as ThyTheme) || ThyTheme.light;
                        this.theme.set(theme);
                        this.refreshWatermark();
                    }
                }
            });
            observe.next(stream);
            return () => {
                this.themeObserver?.disconnect();
            };
        });
    }
}

1	import {
2	Directive,
3	Input,
4	ElementRef,
5	OnInit,
6	SimpleChanges,
7	OnChanges,
8	inject,
9	DestroyRef,
10	Signal,
11	computed,
12	WritableSignal,	1✔
13	signal
14	} from '@angular/core';	6✔
15	import { Subject, Observable } from 'rxjs';	6!
16	import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
17	import { DEFAULT_WATERMARK_CONFIG, DEFAULT_CANVAS_CONFIG } from './config';
18	import { MutationObserverFactory } from '@angular/cdk/observers';	4✔
19	import { coerceBooleanProperty } from 'ngx-tethys/util';	4✔
20	import { ThyTheme } from 'ngx-tethys/core';	4✔
21		4✔
22	/**	4✔
23	* @public	4!
24	* 水印样式配置
25	*/
26	export interface ThyCanvasConfigType {	4✔
27	/**
28	* 偏移角度
29	*/	4!
30	degree?: number;	4✔
31	/**	6✔
32	* 字体颜色。如果传的是数组，第一个为默认主题的字体颜色，第二个为黑暗主题的字体颜色
33	*/
34	color?: string \| string[];	6✔
35	/**
36	* 字体大小
37	*/
38	fontSize?: number \| string;	4✔
39	/**	4✔
40	* 文本行高
41	*/
42	textLineHeight?: number;
43	/**	7✔
44	* 横纵间距	7✔
45	*/	6✔
46	gutter?: number[];	4✔
47	}	2!
48		2✔
49	/**
50	* 水印指令
51	* @name thyWatermark	7✔
52	*/	5✔
53	@Directive({	4✔
54	selector: '[thyWatermark]',	1!
55	standalone: true
56	})	7✔
57	export class ThyWatermarkDirective implements OnInit, OnChanges {	7✔
58	/**
59	* 是否禁用，默认为 false
60	*/	2✔
61	@Input({ transform: coerceBooleanProperty })	2✔
62	thyDisabled: boolean = false;
63
64	content: string;	3!
65	/**	3✔
66	* 水印内容	3✔
67	*/
68	@Input()
69	set thyWatermark(value: string) {
70	value = value?.replace(/^\"\|\"$/g, '');	7!
UNCOV 71	this.content = !!value ? value : '';	×
72	}
73		7!
74	/**	7!
NEW 75	* 水印样式配置	×
76	*/
77	@Input() thyCanvasConfig: ThyCanvasConfigType;	7!
78		7!
UNCOV 79	private createWatermark$ = new Subject<string>();	×
80
81	private observer: MutationObserver;
82		7✔
83	private themeObserver: MutationObserver;
84
85	private theme: WritableSignal<ThyTheme> = signal(ThyTheme.light);
86
87	private isDarkTheme: Signal<boolean> = computed(() => {
88	return (	7✔
89	(this.theme() === ThyTheme.system && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) \|\|
90	this.theme() === ThyTheme.dark	14✔
91	);
92	});	7✔
93		7✔
94	private canvas: HTMLCanvasElement;	7✔
95		7✔
96	private wmDiv: HTMLElement;	7✔
97		7✔
98	private readonly destroyRef = inject(DestroyRef);	7✔
99
100	constructor(private el: ElementRef) {}
101
102	ngOnInit() {
103	if (!this.thyDisabled) {
104	this.createWatermark$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
105	this.observeAttributes()
106	.pipe(takeUntilDestroyed(this.destroyRef))
107	.subscribe(() => {});
108	this.observeTheme()	56✔
109	.pipe(takeUntilDestroyed(this.destroyRef))	7✔
110	.subscribe(() => {});	7✔
111	});	7✔
112		7✔
113	this.theme.set((document.documentElement.getAttribute('theme') as ThyTheme) \|\| ThyTheme.light);	7✔
114	this.createWatermark();	7✔
115	}
116	}	7✔
117		7✔
118	ngOnChanges(changes: SimpleChanges): void {	7✔
119	const { thyWatermark, thyDisabled } = changes;	7✔
120	const thyWatermarkChange = () => {	7✔
121	if (thyWatermark.firstChange) return;	7✔
122	if (thyWatermark.currentValue) {	7✔
123	this.refreshWatermark();	7✔
124	}	7✔
125	};	7✔
126	const thyDisabledChange = () => {	7✔
127	if (thyDisabled.firstChange) return;	7✔
128	thyDisabled?.currentValue ? this.removeWatermark() : this.refreshWatermark();	7✔
129	};	7✔
130	thyWatermark && thyWatermarkChange();	7✔
131	thyDisabled && thyDisabledChange();	7✔
132	}
133		7✔
134	private refreshWatermark() {	7✔
135	this.removeWatermark();
136	this.createWatermark();	6✔
137	}	6✔
138		6!
139	private removeWatermark() {	6✔
140	if (this.wmDiv) {
141	this.wmDiv.remove();
142	this.wmDiv = null;
143	}	60✔
144	}	6✔
145		6!
146	getThemeColor(color: string \| string[]) {	6✔
147	if (typeof color === 'string') {	6✔
148	return color;	6✔
149	}	6✔
150	if (Array.isArray(color)) {
151	if (color.length === 1) {	6✔
152	return color[0];
153	}
154		6✔
155	if (color.length > 1) {	6✔
156	if (this.isDarkTheme()) {	6✔
157	return color[1];	6✔
158	} else {	6!
159	return color[0];	6✔
160	}
161	}
162	}
163	}	6✔
NEW 164		×
UNCOV 165	createCanvas() {	×
UNCOV 166	let { gutter, fontSize, color, degree, textLineHeight } = {	×
167	...DEFAULT_CANVAS_CONFIG,
168	...(this.thyCanvasConfig \|\| {})
169	};	6✔
170	color = this.getThemeColor(color);	6✔
171		6✔
172	const [xGutter, yGutter] = gutter;
173	const canvas = document.createElement('canvas');
174	const ctx = canvas.getContext('2d');
175
176	const getFakeSize = () => {	6✔
177	const fakeBox = document.createElement('div');	6✔
178	const fakeBoxStyle = {	6✔
179	position: 'absolute',	6✔
180	top: 0,	6!
181	left: 0,	6✔
182	display: 'inline-block',
183	'font-size': `${parseFloat('' + fontSize)}px`,
184	'word-wrap': 'break-word',
185	'font-family': 'inherit',
186	'white-space': 'pre-line'	6✔
UNCOV 187	};	×
UNCOV 188	const styleStr = Object.keys(fakeBoxStyle).reduce((pre, next) => ((pre += `${next}:${fakeBoxStyle[next]};`), pre), '');	×
UNCOV 189	fakeBox.setAttribute('style', styleStr);	×
UNCOV 190		×
UNCOV 191	fakeBox.innerHTML = this.content.replace(/(\\n)/gm, '</br>');	×
192	document.querySelector('body').insertBefore(fakeBox, document.querySelector('body').firstChild);
193	const { width, height } = fakeBox.getBoundingClientRect();
194	fakeBox.remove();
195	return { width, height };	6✔
196	};	6✔
197	const { width: fakeBoxWidth, height: fakeBoxHeight } = getFakeSize();	6✔
198
199	const angle = (degree * Math.PI) / 180;
200	const contentArr = this.content.split('\\n');
201	const canvasHeight = Math.sin(angle) * fakeBoxWidth + fakeBoxHeight;	1✔
202
203	let start = Math.ceil(Math.sin(angle) * fakeBoxWidth * Math.sin(angle));
204	const canvasWidth = start + fakeBoxWidth;	1✔
205	canvas.setAttribute('width', '' + (canvasWidth + xGutter));
206	canvas.setAttribute('height', '' + (canvasHeight + yGutter));
207
208	ctx.font = `${parseFloat('' + fontSize)}px microsoft yahei`;
209	ctx.textAlign = 'center';
210	ctx.textBaseline = 'top';	1✔
211	ctx.fillStyle = color;
212	ctx.rotate(0 - (degree * Math.PI) / 180);
213	contentArr.map((k, i) => {
214	ctx.fillText(k, -start + Math.ceil(canvasWidth / 2), Math.sin(angle) * canvasWidth + textLineHeight * i);
215	start += Math.sin(angle) * textLineHeight;
216	});
217	this.canvas = canvas;
218	return canvas;
219	}
220
221	private createWatermark(isRefresh = true) {
222	const watermarkDiv = this.wmDiv \|\| document.createElement('div');
223
224	const background = !isRefresh ? this.canvas.toDataURL() : this.createCanvas().toDataURL();
225	const watermarkStyle = {
226	...DEFAULT_WATERMARK_CONFIG,
227	'background-image': `url(${background})`
228	};
229
230	const styleStr = Object.keys(watermarkStyle).reduce((pre, next) => ((pre += `${next}:${watermarkStyle[next]};`), pre), '');
231	watermarkDiv.setAttribute('style', styleStr);
232
233	if (!this.wmDiv) {
234	const parentNode = this.el.nativeElement;
235	watermarkDiv.classList.add(`_vm`);
236	this.wmDiv = watermarkDiv;
237	parentNode.insertBefore(watermarkDiv, parentNode.firstChild);
238	}
239	this.createWatermark$.next('');
240	}
241
242	private observeAttributes() {
243	this.observer?.disconnect();
244	return new Observable(observe => {
245	const stream = new Subject<MutationRecord[]>();
246	this.observer = new MutationObserverFactory().create(mutations => stream.next(mutations));
247	if (this.observer) {
248	this.observer.observe(this.wmDiv, {
249	attributes: true
250	});
251	}
252	stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
253	if (this.wmDiv) {
254	this?.observer?.disconnect();
255	this.createWatermark(false);
256	}
257	});
258	observe.next(stream);
259	return () => {
260	this.observer?.disconnect();
261	};
262	});
263	}
264
265	private observeTheme() {
266	this.themeObserver?.disconnect();
267	return new Observable(observe => {
268	const stream = new Subject<MutationRecord[]>();
269	this.themeObserver = new MutationObserverFactory().create(mutations => stream.next(mutations));
270	if (this.themeObserver) {
271	this.themeObserver.observe(document.documentElement, {
272	attributes: true,
273	attributeFilter: ['theme']
274	});
275	}
276	stream.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(mutations => {
277	for (const mutation of mutations) {
278	if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {
279	const theme = (document.documentElement.getAttribute('theme') as ThyTheme) \|\| ThyTheme.light;
280	this.theme.set(theme);
281	this.refreshWatermark();
282	}
283	}
284	});
285	observe.next(stream);
286	return () => {
287	this.themeObserver?.disconnect();
288	};
289	});
290	}
291	}

atinc / ngx-tethys / 17b77b32-5a0a-4e7f-ae2b-c14d1af1bc11

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