7316502082

Committed 24 Dec 2023 07:35PM CUT coverage: 90.577%. Remained the same

Build # 7316502082

Build Type

Pull #830

github

Committed by

jassmith

Commit Message

Allow specifying label and value independently in dropdown cell

Pull Request Pull Request #830: Allow specifying label and value independently in dropdown cell

Run Details

2590 of 3242 branches covered (0.0%)

15745 of 17383 relevant lines covered (90.58%)

3079.34 hits per line

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

83.18

/packages/core/src/internal/data-grid/data-grid-sprites.ts

import type { Theme } from "../../common/styles.js";
import type { SpriteProps } from "../../common/utils.js";
import { type HeaderIconMap } from "./sprites.js";

/**
 * A known icon identifier
 *
 * @category Columns
 */
export type HeaderIcon = keyof HeaderIconMap;

/**
 * A method that produces an SVG array from
 * an SVG icon configuration.
 *
 * @category Columns
 */
export type Sprite = (props: SpriteProps) => string;

/**
 * A method that maps from icon names to functions
 * that return SVG strings.
 *
 * @category Columns
 */
export type SpriteMap = Record<string | HeaderIcon, Sprite>;

/** @category Columns */
export type SpriteVariant = "normal" | "selected" | "special";

function getColors(variant: SpriteVariant, theme: Theme): readonly [string, string] {
    if (variant === "normal") {
        return [theme.bgIconHeader, theme.fgIconHeader];
    } else if (variant === "selected") {
        return ["white", theme.accentColor];
    } else {
        return [theme.accentColor, theme.bgHeader];
    }
}

/** @category Columns */
export class SpriteManager {
    private spriteMap: Map<string, HTMLCanvasElement> = new Map();
    private headerIcons: SpriteMap;
    private inFlight = 0;

    constructor(
        headerIcons: SpriteMap | undefined,
        private onSettled: () => void
    ) {
        this.headerIcons = headerIcons ?? {};
    }

    public drawSprite(
        sprite: HeaderIcon | string,
        variant: SpriteVariant,
        ctx: CanvasRenderingContext2D,
        x: number,
        y: number,
        size: number,
        theme: Theme,
        alpha: number = 1
    ) {
        const [bgColor, fgColor] = getColors(variant, theme);
        const rSize = size * Math.ceil(window.devicePixelRatio);
        const key = `${bgColor}_${fgColor}_${rSize}_${sprite}`;

        let spriteCanvas = this.spriteMap.get(key);
        if (spriteCanvas === undefined) {
            const spriteCb = this.headerIcons[sprite];

            if (spriteCb === undefined) return;

            spriteCanvas = document.createElement("canvas");
            const spriteCtx = spriteCanvas.getContext("2d");

            if (spriteCtx === null) return;

            const imgSource = new Image();
            imgSource.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(spriteCb({ fgColor, bgColor }))}`;
            this.spriteMap.set(key, spriteCanvas);
            const promise: Promise<void> | undefined = imgSource.decode();

            if (promise === undefined) return;

            this.inFlight++;
            promise
                .then(() => {
                    spriteCtx.drawImage(imgSource, 0, 0, rSize, rSize);
                })
                .finally(() => {
                    this.inFlight--;
                    if (this.inFlight === 0) {
                        this.onSettled();
                    }
                });
        } else {
            if (alpha < 1) {
                ctx.globalAlpha = alpha;
            }
            ctx.drawImage(spriteCanvas, 0, 0, rSize, rSize, x, y, size, size);
            if (alpha < 1) {
                ctx.globalAlpha = 1;
            }
        }
    }
}

1	import type { Theme } from "../../common/styles.js";	1✔
2	import type { SpriteProps } from "../../common/utils.js";	1✔
3	import { type HeaderIconMap } from "./sprites.js";	1✔
4		1✔
5	/**	1✔
6	* A known icon identifier	1✔
7	*	1✔
8	* @category Columns	1✔
9	*/	1✔
10	export type HeaderIcon = keyof HeaderIconMap;	1✔
11		1✔
12	/**	1✔
13	* A method that produces an SVG array from	1✔
14	* an SVG icon configuration.	1✔
15	*	1✔
16	* @category Columns	1✔
17	*/	1✔
18	export type Sprite = (props: SpriteProps) => string;	1✔
19		1✔
20	/**	1✔
21	* A method that maps from icon names to functions	1✔
22	* that return SVG strings.	1✔
23	*	1✔
24	* @category Columns	1✔
25	*/	1✔
26	export type SpriteMap = Record<string \| HeaderIcon, Sprite>;	1✔
27		1✔
28	/** @category Columns */	1✔
29	export type SpriteVariant = "normal" \| "selected" \| "special";	1✔
30		1✔
31	function getColors(variant: SpriteVariant, theme: Theme): readonly [string, string] {	3,862✔
32	if (variant === "normal") {	3,862✔
33	return [theme.bgIconHeader, theme.fgIconHeader];	3,798✔
34	} else if (variant === "selected") {	3,862✔
35	return ["white", theme.accentColor];	64✔
36	} else {	64!
37	return [theme.accentColor, theme.bgHeader];	×
38	}	×
39	}	3,862✔
40		1✔
41	/** @category Columns */	1✔
42	export class SpriteManager {	1✔
43	private spriteMap: Map<string, HTMLCanvasElement> = new Map();	1✔
44	private headerIcons: SpriteMap;	1✔
45	private inFlight = 0;	1✔
46		1✔
47	constructor(	1✔
48	headerIcons: SpriteMap \| undefined,	149✔
49	private onSettled: () => void	149✔
50	) {	149✔
51	this.headerIcons = headerIcons ?? {};	149✔
52	}	149✔
53		1✔
54	public drawSprite(	1✔
55	sprite: HeaderIcon \| string,	3,862✔
56	variant: SpriteVariant,	3,862✔
57	ctx: CanvasRenderingContext2D,	3,862✔
58	x: number,	3,862✔
59	y: number,	3,862✔
60	size: number,	3,862✔
61	theme: Theme,	3,862✔
62	alpha: number = 1	3,862✔
63	) {	3,862✔
64	const [bgColor, fgColor] = getColors(variant, theme);	3,862✔
65	const rSize = size * Math.ceil(window.devicePixelRatio);	3,862✔
66	const key = `${bgColor}_${fgColor}_${rSize}_${sprite}`;	3,862✔
67		3,862✔
68	let spriteCanvas = this.spriteMap.get(key);	3,862✔
69	if (spriteCanvas === undefined) {	3,862✔
70	const spriteCb = this.headerIcons[sprite];	1,363✔
71		1,363✔
72	if (spriteCb === undefined) return;	1,363!
73		1,363✔
74	spriteCanvas = document.createElement("canvas");	1,363✔
75	const spriteCtx = spriteCanvas.getContext("2d");	1,363✔
76		1,363✔
77	if (spriteCtx === null) return;	1,363!
78		1,363✔
79	const imgSource = new Image();	1,363✔
80	imgSource.src = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(spriteCb({ fgColor, bgColor }))}`;	1,363✔
81	this.spriteMap.set(key, spriteCanvas);	1,363✔
82	const promise: Promise<void> \| undefined = imgSource.decode();	1,363✔
83		1,363✔
84	if (promise === undefined) return;	1,363!
85		×
86	this.inFlight++;	×
87	promise	×
88	.then(() => {	×
89	spriteCtx.drawImage(imgSource, 0, 0, rSize, rSize);	×
90	})	×
91	.finally(() => {	×
92	this.inFlight--;	×
93	if (this.inFlight === 0) {	×
94	this.onSettled();	×
95	}	×
96	});	×
97	} else {	3,862✔
98	if (alpha < 1) {	2,499!
99	ctx.globalAlpha = alpha;	×
100	}	×
101	ctx.drawImage(spriteCanvas, 0, 0, rSize, rSize, x, y, size, size);	2,499✔
102	if (alpha < 1) {	2,499!
103	ctx.globalAlpha = 1;	×
104	}	×
105	}	2,499✔
106	}	3,862✔
107	}	1✔

glideapps / glide-data-grid / 7316502082

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