7435539780

Committed 07 Jan 2024 02:33AM UTC coverage: 90.255% (+3.8%) from 86.42%

Build # 7435539780

Build Type

Pull #810

github

Committed by

web-flow

Commit Message

Merge c2dbff45d into 3068d54a9

Pull Request Pull Request #810: 6.0.0

Run Details

2629 of 3279 branches covered (0.0%)

16144 of 17887 relevant lines covered (90.26%)

2994.04 hits per line

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

75.68

/packages/core/src/cells/image-cell.tsx

/* eslint-disable react/display-name */
import * as React from "react";
import { ImageOverlayEditor } from "../internal/data-grid-overlay-editor/private/image-overlay-editor.js";
import { roundedRect } from "../internal/data-grid/data-grid-lib.js";
import { GridCellKind, type BaseGridCell, type ImageCell } from "../internal/data-grid/data-grid-types.js";
import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";

export const imageCellRenderer: InternalCellRenderer<ImageCell> = {
    getAccessibilityString: c => c.data.join(", "),
    kind: GridCellKind.Image,
    needsHover: false,
    useLabel: false,
    needsHoverPosition: false,
    draw: a => drawImage(a, a.cell.displayData ?? a.cell.data, a.cell.rounding, a.cell.contentAlign),
    measure: (_ctx, cell) => cell.data.length * 50,
    onDelete: c => ({
        ...c,
        data: [],
    }),
    provideEditor: () => p => {
        const { value, onFinishedEditing, imageEditorOverride } = p;

        const ImageEditor = imageEditorOverride ?? ImageOverlayEditor;

        return (
            <ImageEditor
                urls={value.data}
                canWrite={value.readonly !== false}
                onCancel={onFinishedEditing}
                onChange={newImage => {
                    onFinishedEditing({
                        ...value,
                        data: [newImage],
                    });
                }}
            />
        );
    },
    onPaste: (toPaste, cell) => {
        toPaste = toPaste.trim();
        const fragments = toPaste.split(",");
        const uris = fragments
            .map(f => {
                try {
                    new URL(f);
                    return f;
                } catch {
                    return undefined;
                }
            })
            .filter(x => x !== undefined) as string[];

        if (uris.length === cell.data.length && uris.every((u, i) => u === cell.data[i])) return undefined;
        return {
            ...cell,
            data: uris,
        };
    },
};

const itemMargin = 4;

export function drawImage(
    args: BaseDrawArgs,
    data: readonly string[],
    rounding: number = 4,
    contentAlign?: BaseGridCell["contentAlign"]
) {
    const { rect, col, row, theme, ctx, imageLoader } = args;
    const { x, y, height: h, width: w } = rect;

    const imgHeight = h - theme.cellVerticalPadding * 2;
    const images: (HTMLImageElement | ImageBitmap)[] = [];
    let totalWidth = 0;
    // eslint-disable-next-line unicorn/no-for-loop
    for (let index = 0; index < data.length; index++) {
        const i = data[index];
        if (i.length === 0) continue;
        const img = imageLoader.loadOrGetImage(i, col, row);

        if (img !== undefined) {
            images[index] = img;
            const imgWidth = img.width * (imgHeight / img.height);
            totalWidth += imgWidth + itemMargin;
        }
    }

    if (totalWidth === 0) return;
    totalWidth -= itemMargin;

    let drawX = x + theme.cellHorizontalPadding;
    if (contentAlign === "right") drawX = Math.floor(x + w - theme.cellHorizontalPadding - totalWidth);
    else if (contentAlign === "center") drawX = Math.floor(x + w / 2 - totalWidth / 2);

    for (const img of images) {
        if (img === undefined) continue; //array is sparse
        const imgWidth = img.width * (imgHeight / img.height);
        if (rounding > 0) {
            ctx.beginPath();
            roundedRect(ctx, drawX, y + theme.cellVerticalPadding, imgWidth, imgHeight, rounding);
            ctx.save();
            ctx.clip();
        }
        ctx.drawImage(img, drawX, y + theme.cellVerticalPadding, imgWidth, imgHeight);
        if (rounding > 0) {
            ctx.restore();
        }

        drawX += imgWidth + itemMargin;
    }
}

1	/* eslint-disable react/display-name */	1✔
2	import * as React from "react";	1✔
3	import { ImageOverlayEditor } from "../internal/data-grid-overlay-editor/private/image-overlay-editor.js";	1✔
4	import { roundedRect } from "../internal/data-grid/data-grid-lib.js";	1✔
5	import { GridCellKind, type BaseGridCell, type ImageCell } from "../internal/data-grid/data-grid-types.js";	1✔
6	import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";	1✔
7		1✔
8	export const imageCellRenderer: InternalCellRenderer<ImageCell> = {	1✔
9	getAccessibilityString: c => c.data.join(", "),	1✔
10	kind: GridCellKind.Image,	1✔
11	needsHover: false,	1✔
12	useLabel: false,	1✔
13	needsHoverPosition: false,	1✔
14	draw: a => drawImage(a, a.cell.displayData ?? a.cell.data, a.cell.rounding, a.cell.contentAlign),	1✔
15	measure: (_ctx, cell) => cell.data.length * 50,	1✔
16	onDelete: c => ({	1✔
17	...c,	×
18	data: [],	×
19	}),	×
20	provideEditor: () => p => {	1✔
21	const { value, onFinishedEditing, imageEditorOverride } = p;	2✔
22		2✔
23	const ImageEditor = imageEditorOverride ?? ImageOverlayEditor;	2✔
24		2✔
25	return (	2✔
26	<ImageEditor	2✔
27	urls={value.data}	2✔
28	canWrite={value.readonly !== false}	2✔
29	onCancel={onFinishedEditing}	2✔
30	onChange={newImage => {	2✔
31	onFinishedEditing({	×
32	...value,	×
33	data: [newImage],	×
34	});	×
35	}}	×
36	/>	2✔
37	);	2✔
38	},	2✔
39	onPaste: (toPaste, cell) => {	1✔
40	toPaste = toPaste.trim();	×
41	const fragments = toPaste.split(",");	×
42	const uris = fragments	×
43	.map(f => {	×
44	try {	×
45	new URL(f);	×
46	return f;	×
47	} catch {	×
48	return undefined;	×
49	}	×
50	})	×
51	.filter(x => x !== undefined) as string[];	×
52		×
53	if (uris.length === cell.data.length && uris.every((u, i) => u === cell.data[i])) return undefined;	×
54	return {	×
55	...cell,	×
56	data: uris,	×
57	};	×
58	},	×
59	};	1✔
60		1✔
61	const itemMargin = 4;	1✔
62		1✔
63	export function drawImage(	1✔
64	args: BaseDrawArgs,	5✔
65	data: readonly string[],	5✔
66	rounding: number = 4,	5✔
67	contentAlign?: BaseGridCell["contentAlign"]	5✔
68	) {	5✔
69	const { rect, col, row, theme, ctx, imageLoader } = args;	5✔
70	const { x, y, height: h, width: w } = rect;	5✔
71		5✔
72	const imgHeight = h - theme.cellVerticalPadding * 2;	5✔
73	const images: (HTMLImageElement \| ImageBitmap)[] = [];	5✔
74	let totalWidth = 0;	5✔
75	// eslint-disable-next-line unicorn/no-for-loop	5✔
76	for (let index = 0; index < data.length; index++) {	5✔
77	const i = data[index];	5✔
78	if (i.length === 0) continue;	5✔
79	const img = imageLoader.loadOrGetImage(i, col, row);	4✔
80		4✔
81	if (img !== undefined) {	4✔
82	images[index] = img;	4✔
83	const imgWidth = img.width * (imgHeight / img.height);	4✔
84	totalWidth += imgWidth + itemMargin;	4✔
85	}	4✔
86	}	5✔
87		5✔
88	if (totalWidth === 0) return;	5✔
89	totalWidth -= itemMargin;	4✔
90		4✔
91	let drawX = x + theme.cellHorizontalPadding;	4✔
92	if (contentAlign === "right") drawX = Math.floor(x + w - theme.cellHorizontalPadding - totalWidth);	5✔
93	else if (contentAlign === "center") drawX = Math.floor(x + w / 2 - totalWidth / 2);	3✔
94		4✔
95	for (const img of images) {	4✔
96	if (img === undefined) continue; //array is sparse	4!
97	const imgWidth = img.width * (imgHeight / img.height);	4✔
98	if (rounding > 0) {	4✔
99	ctx.beginPath();	2✔
100	roundedRect(ctx, drawX, y + theme.cellVerticalPadding, imgWidth, imgHeight, rounding);	2✔
101	ctx.save();	2✔
102	ctx.clip();	2✔
103	}	2✔
104	ctx.drawImage(img, drawX, y + theme.cellVerticalPadding, imgWidth, imgHeight);	4✔
105	if (rounding > 0) {	4✔
106	ctx.restore();	2✔
107	}	2✔
108		4✔
109	drawX += imgWidth + itemMargin;	4✔
110	}	4✔
111	}	4✔

glideapps / glide-data-grid / 7435539780

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