7494667489

Committed 11 Jan 2024 09:19PM UTC coverage: 91.963% (+0.006%) from 91.957%

Build # 7494667489

Build Type

Pull #863

github

Committed by

jassmith

Commit Message

Make resize indicator configurable

Pull Request Pull Request #863: Make resize indicator configurable

Run Details

2742 of 3360 branches covered (0.0%)

16569 of 18017 relevant lines covered (91.96%)

3179.23 hits per line

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

71.79

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

glideapps / glide-data-grid / 7494667489

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