7494667489

Committed 11 Jan 2024 09:19PM CUT 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

83.65

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

import { getSquareWidth, getSquareXPosFromAlign, getSquareBB, pointIsWithinBB } from "../common/utils.js";
import { toggleBoolean } from "../data-editor/data-editor-fns.js";
import {
    GridCellKind,
    type BooleanCell,
    booleanCellIsEditable,
    BooleanEmpty,
    BooleanIndeterminate,
} from "../internal/data-grid/data-grid-types.js";
import { drawCheckbox } from "../internal/data-grid/draw-checkbox.js";
import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";

const defaultCellMaxSize = 20;

export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {
    getAccessibilityString: c => c.data?.toString() ?? "false",
    kind: GridCellKind.Boolean,
    needsHover: true,
    useLabel: false,
    needsHoverPosition: true,
    measure: () => 50,
    draw: a => drawBoolean(a, a.cell.data, booleanCellIsEditable(a.cell), a.cell.maxSize ?? defaultCellMaxSize),
    onDelete: c => ({
        ...c,
        data: false,
    }),
    onClick: e => {
        const { cell, posX: pointerX, posY: pointerY, bounds, theme } = e;
        const { width, height, x: cellX, y: cellY } = bounds;
        const maxWidth = cell.maxSize ?? defaultCellMaxSize;
        const cellCenterY = Math.floor(bounds.y + height / 2);
        const checkBoxWidth = getSquareWidth(maxWidth, height, theme.cellVerticalPadding);
        const posX = getSquareXPosFromAlign(
            cell.contentAlign ?? "center",
            cellX,
            width,
            theme.cellHorizontalPadding,
            checkBoxWidth
        );
        const bb = getSquareBB(posX, cellCenterY, checkBoxWidth);
        const checkBoxClicked = pointIsWithinBB(cellX + pointerX, cellY + pointerY, bb);

        if (booleanCellIsEditable(cell) && checkBoxClicked) {
            return {
                ...cell,
                data: toggleBoolean(cell.data),
            };
        }
        return undefined;
    },
    onPaste: (toPaste, cell) => {
        let newVal: boolean | BooleanEmpty | BooleanIndeterminate = BooleanEmpty;
        if (toPaste.toLowerCase() === "true") {
            newVal = true;
        } else if (toPaste.toLowerCase() === "false") {
            newVal = false;
        } else if (toPaste.toLowerCase() === "indeterminate") {
            newVal = BooleanIndeterminate;
        }
        return newVal === cell.data
            ? undefined
            : {
                  ...cell,
                  data: newVal,
              };
    },
};

function drawBoolean(
    args: BaseDrawArgs,
    data: boolean | BooleanEmpty | BooleanIndeterminate,
    canEdit: boolean,
    maxSize?: number
) {
    if (!canEdit && data === BooleanEmpty) {
        return;
    }
    const {
        ctx,
        hoverAmount,
        theme,
        rect,
        highlighted,
        hoverX,
        hoverY,
        cell: { contentAlign },
    } = args;
    const { x, y, width: w, height: h } = rect;

    const hoverEffect = 0.35;

    let alpha = canEdit ? 1 - hoverEffect + hoverEffect * hoverAmount : 0.4;
    if (data === BooleanEmpty) {
        alpha *= hoverAmount;
    }
    if (alpha === 0) {
        return;
    }
    ctx.globalAlpha = alpha;

    drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize, contentAlign);

    ctx.globalAlpha = 1;
}

1	import { getSquareWidth, getSquareXPosFromAlign, getSquareBB, pointIsWithinBB } from "../common/utils.js";	1✔
2	import { toggleBoolean } from "../data-editor/data-editor-fns.js";	1✔
3	import {	1✔
4	GridCellKind,	1✔
5	type BooleanCell,	1✔
6	booleanCellIsEditable,	1✔
7	BooleanEmpty,	1✔
8	BooleanIndeterminate,	1✔
9	} from "../internal/data-grid/data-grid-types.js";	1✔
10	import { drawCheckbox } from "../internal/data-grid/draw-checkbox.js";	1✔
11	import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";	1✔
12		1✔
13	const defaultCellMaxSize = 20;	1✔
14		1✔
15	export const booleanCellRenderer: InternalCellRenderer<BooleanCell> = {	1✔
16	getAccessibilityString: c => c.data?.toString() ?? "false",	1✔
17	kind: GridCellKind.Boolean,	1✔
18	needsHover: true,	1✔
19	useLabel: false,	1✔
20	needsHoverPosition: true,	1✔
21	measure: () => 50,	1✔
22	draw: a => drawBoolean(a, a.cell.data, booleanCellIsEditable(a.cell), a.cell.maxSize ?? defaultCellMaxSize),	1✔
23	onDelete: c => ({	1✔
24	...c,	1✔
25	data: false,	1✔
26	}),	1✔
27	onClick: e => {	1✔
28	const { cell, posX: pointerX, posY: pointerY, bounds, theme } = e;	7✔
29	const { width, height, x: cellX, y: cellY } = bounds;	7✔
30	const maxWidth = cell.maxSize ?? defaultCellMaxSize;	7✔
31	const cellCenterY = Math.floor(bounds.y + height / 2);	7✔
32	const checkBoxWidth = getSquareWidth(maxWidth, height, theme.cellVerticalPadding);	7✔
33	const posX = getSquareXPosFromAlign(	7✔
34	cell.contentAlign ?? "center",	7✔
35	cellX,	7✔
36	width,	7✔
37	theme.cellHorizontalPadding,	7✔
38	checkBoxWidth	7✔
39	);	7✔
40	const bb = getSquareBB(posX, cellCenterY, checkBoxWidth);	7✔
41	const checkBoxClicked = pointIsWithinBB(cellX + pointerX, cellY + pointerY, bb);	7✔
42		7✔
43	if (booleanCellIsEditable(cell) && checkBoxClicked) {	7✔
44	return {	5✔
45	...cell,	5✔
46	data: toggleBoolean(cell.data),	5✔
47	};	5✔
48	}	5✔
49	return undefined;	2✔
50	},	7✔
51	onPaste: (toPaste, cell) => {	1✔
52	let newVal: boolean \| BooleanEmpty \| BooleanIndeterminate = BooleanEmpty;	×
53	if (toPaste.toLowerCase() === "true") {	×
54	newVal = true;	×
55	} else if (toPaste.toLowerCase() === "false") {	×
56	newVal = false;	×
57	} else if (toPaste.toLowerCase() === "indeterminate") {	×
58	newVal = BooleanIndeterminate;	×
59	}	×
60	return newVal === cell.data	×
61	? undefined	×
62	: {	×
63	...cell,	×
64	data: newVal,	×
65	};	×
66	},	×
67	};	1✔
68		1✔
69	function drawBoolean(	11,432✔
70	args: BaseDrawArgs,	11,432✔
71	data: boolean \| BooleanEmpty \| BooleanIndeterminate,	11,432✔
72	canEdit: boolean,	11,432✔
73	maxSize?: number	11,432✔
74	) {	11,432✔
75	if (!canEdit && data === BooleanEmpty) {	11,432!
76	return;	×
77	}	×
78	const {	11,432✔
79	ctx,	11,432✔
80	hoverAmount,	11,432✔
81	theme,	11,432✔
82	rect,	11,432✔
83	highlighted,	11,432✔
84	hoverX,	11,432✔
85	hoverY,	11,432✔
86	cell: { contentAlign },	11,432✔
87	} = args;	11,432✔
88	const { x, y, width: w, height: h } = rect;	11,432✔
89		11,432✔
90	const hoverEffect = 0.35;	11,432✔
91		11,432✔
92	let alpha = canEdit ? 1 - hoverEffect + hoverEffect * hoverAmount : 0.4;	11,432✔
93	if (data === BooleanEmpty) {	11,432✔
94	alpha *= hoverAmount;	2,490✔
95	}	2,490✔
96	if (alpha === 0) {	11,432✔
97	return;	2,490✔
98	}	2,490✔
99	ctx.globalAlpha = alpha;	8,942✔
100		8,942✔
101	drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize, contentAlign);	8,942✔
102		8,942✔
103	ctx.globalAlpha = 1;	8,942✔
104	}	8,942✔

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