@glideappsfinal/glide-data-grid 6.0.9

package/src/internal/data-grid/render/data-grid-render.walk.ts

@@ -0,0 +1,243 @@
+import { type Item, type Rectangle } from "../data-grid-types.js";
+import { type MappedGridColumn, isGroupEqual } from "./data-grid-lib.js";
+
+export function getSkipPoint(drawRegions: readonly Rectangle[]): number | undefined {
+    if (drawRegions.length === 0) return undefined;
+    let drawRegionsLowestY: number | undefined;
+    for (const dr of drawRegions) {
+        drawRegionsLowestY = Math.min(drawRegionsLowestY ?? dr.y, dr.y);
+    }
+    return drawRegionsLowestY;
+}
+
+export type WalkRowsCallback = (
+    drawY: number,
+    row: number,
+    rowHeight: number,
+    isSticky: boolean,
+    isTrailingRow: boolean
+) => boolean | void;
+
+export function walkRowsInCol(
+    startRow: number,
+    drawY: number,
+    height: number,
+    rows: number,
+    getRowHeight: (row: number) => number,
+    freezeTrailingRows: number,
+    hasAppendRow: boolean,
+    skipToY: number | undefined,
+    cb: WalkRowsCallback
+): void {
+    skipToY = skipToY ?? drawY;
+    let y = drawY;
+    let row = startRow;
+    const rowEnd = rows - freezeTrailingRows;
+    let didBreak = false;
+    while (y < height && row < rowEnd) {
+        const rh = getRowHeight(row);
+        if (y + rh > skipToY && cb(y, row, rh, false, hasAppendRow && row === rows - 1) === true) {
+            didBreak = true;
+            break;
+        }
+        y += rh;
+        row++;
+    }
+
+    if (didBreak) return;
+
+    y = height;
+    for (let fr = 0; fr < freezeTrailingRows; fr++) {
+        row = rows - 1 - fr;
+        const rh = getRowHeight(row);
+        y -= rh;
+        cb(y, row, rh, true, hasAppendRow && row === rows - 1);
+    }
+}
+
+export type WalkColsCallback = (
+    col: MappedGridColumn,
+    drawX: number,
+    drawY: number,
+    clipX: number,
+    startRow: number
+) => boolean | void;
+
+export function walkColumns(
+    effectiveCols: readonly MappedGridColumn[],
+    cellYOffset: number,
+    translateX: number,
+    translateY: number,
+    totalHeaderHeight: number,
+    cb: WalkColsCallback
+): void {
+    let x = 0;
+    let clipX = 0; // this tracks the total width of sticky cols
+    const drawY = totalHeaderHeight + translateY;
+    for (const c of effectiveCols) {
+        const drawX = c.sticky ? clipX : x + translateX;
+        if (cb(c, drawX, drawY, c.sticky ? 0 : clipX, cellYOffset) === true) {
+            break;
+        }
+
+        x += c.width;
+        clipX += c.sticky ? c.width : 0;
+    }
+}
+
+// this should not be item, it is [startInclusive, endInclusive]
+export type WalkGroupsCallback = (
+    colSpan: Item,
+    group: string,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    level: number
+) => void;
+
+export function getGroupLevels(effectiveCols: readonly MappedGridColumn[]): number {
+    let maxLevels = 0;
+    for (const col of effectiveCols) {
+        if (col.group !== undefined) {
+            const levels = Array.isArray(col.group) ? col.group.length : 1;
+            maxLevels = Math.max(maxLevels, levels);
+        }
+    }
+    return maxLevels;
+}
+
+export function getTotalGroupHeaderHeight(
+    groupHeaderHeight: number | number[],
+    effectiveCols?: readonly MappedGridColumn[]
+): number {
+    if (Array.isArray(groupHeaderHeight)) {
+        if (groupHeaderHeight.length === 0) return 0;
+        return groupHeaderHeight.reduce((sum, h) => sum + h, 0);
+    }
+    if (effectiveCols !== undefined) {
+        const levels = getGroupLevels(effectiveCols);
+        if (levels === 0) return 0;
+        return groupHeaderHeight * levels;
+    }
+    return groupHeaderHeight;
+}
+
+export function getGroupAtLevel(group: string | string[] | undefined, level: number): string {
+    if (group === undefined) return "";
+    if (Array.isArray(group)) {
+        return group[level] ?? "";
+    }
+    return level === 0 ? group : "";
+}
+
+export function walkGroups(
+    effectiveCols: readonly MappedGridColumn[],
+    width: number,
+    translateX: number,
+    groupHeaderHeights: number | number[],
+    level: number,
+    cb: WalkGroupsCallback
+): void {
+    const groupHeaderHeight = Array.isArray(groupHeaderHeights)
+        ? groupHeaderHeights[level] ?? groupHeaderHeights[0] ?? 0
+        : groupHeaderHeights;
+
+    let x = 0;
+    let clipX = 0;
+    for (let index = 0; index < effectiveCols.length; index++) {
+        const startCol = effectiveCols[index];
+
+        let end = index + 1;
+        let boxWidth = startCol.width;
+        if (startCol.sticky) {
+            clipX += boxWidth;
+        }
+        while (
+            end < effectiveCols.length &&
+            isGroupEqual(effectiveCols[end].group, startCol.group, level) &&
+            effectiveCols[end].sticky === effectiveCols[index].sticky
+        ) {
+            const endCol = effectiveCols[end];
+            boxWidth += endCol.width;
+            end++;
+            index++;
+            if (endCol.sticky) {
+                clipX += endCol.width;
+            }
+        }
+
+        const t = startCol.sticky ? 0 : translateX;
+        const localX = x + t;
+        const delta = startCol.sticky ? 0 : Math.max(0, clipX - localX);
+        const w = Math.min(boxWidth - delta, width - (localX + delta));
+        const groupName = getGroupAtLevel(startCol.group, level);
+        cb(
+            [startCol.sourceIndex, effectiveCols[end - 1].sourceIndex],
+            groupName,
+            localX + delta,
+            0,
+            w,
+            groupHeaderHeight,
+            level
+        );
+
+        x += boxWidth;
+    }
+}
+
+export function getSpanBounds(
+    span: Item,
+    cellX: number,
+    cellY: number,
+    cellW: number,
+    cellH: number,
+    column: MappedGridColumn,
+    allColumns: readonly MappedGridColumn[]
+): [Rectangle | undefined, Rectangle | undefined] {
+    const [startCol, endCol] = span;
+
+    let frozenRect: Rectangle | undefined;
+    let contentRect: Rectangle | undefined;
+
+    const firstNonSticky = allColumns.find(x => !x.sticky)?.sourceIndex ?? 0;
+    if (endCol > firstNonSticky) {
+        const renderFromCol = Math.max(startCol, firstNonSticky);
+        let tempX = cellX;
+        let tempW = cellW;
+        for (let x = column.sourceIndex - 1; x >= renderFromCol; x--) {
+            tempX -= allColumns[x].width;
+            tempW += allColumns[x].width;
+        }
+        for (let x = column.sourceIndex + 1; x <= endCol; x++) {
+            tempW += allColumns[x].width;
+        }
+        contentRect = {
+            x: tempX,
+            y: cellY,
+            width: tempW,
+            height: cellH,
+        };
+    }
+
+    if (firstNonSticky > startCol) {
+        const renderToCol = Math.min(endCol, firstNonSticky - 1);
+        let tempX = cellX;
+        let tempW = cellW;
+        for (let x = column.sourceIndex - 1; x >= startCol; x--) {
+            tempX -= allColumns[x].width;
+            tempW += allColumns[x].width;
+        }
+        for (let x = column.sourceIndex + 1; x <= renderToCol; x++) {
+            tempW += allColumns[x].width;
+        }
+        frozenRect = {
+            x: tempX,
+            y: cellY,
+            width: tempW,
+            height: cellH,
+        };
+    }
+
+    return [frozenRect, contentRect];
+}

package/src/internal/data-grid/render/data-grid.render.rings.ts

@@ -0,0 +1,348 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+/* eslint-disable unicorn/no-for-loop */
+import {
+    type GridSelection,
+    type InnerGridCell,
+    type Item,
+    type FillHandle,
+    DEFAULT_FILL_HANDLE,
+} from "../data-grid-types.js";
+import { getStickyWidth, type MappedGridColumn, computeBounds, getFreezeTrailingHeight } from "./data-grid-lib.js";
+import { type FullTheme } from "../../../common/styles.js";
+import { blend, withAlpha } from "../color-parser.js";
+import { hugRectToTarget, intersectRect, rectContains, splitRectIntoRegions } from "../../../common/math.js";
+import { getSpanBounds, walkColumns, walkRowsInCol, getTotalGroupHeaderHeight } from "./data-grid-render.walk.js";
+import { type Highlight } from "./data-grid-render.cells.js";
+
+export function drawHighlightRings(
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+    cellXOffset: number,
+    cellYOffset: number,
+    translateX: number,
+    translateY: number,
+    mappedColumns: readonly MappedGridColumn[],
+    freezeColumns: number,
+    headerHeight: number,
+    groupHeaderHeight: number | number[],
+    rowHeight: number | ((index: number) => number),
+    freezeTrailingRows: number,
+    rows: number,
+    allHighlightRegions: readonly Highlight[] | undefined,
+    theme: FullTheme
+): (() => void) | undefined {
+    const highlightRegions = allHighlightRegions?.filter(x => x.style !== "no-outline");
+
+    if (highlightRegions === undefined || highlightRegions.length === 0) return undefined;
+
+    const freezeLeft = getStickyWidth(mappedColumns);
+    const freezeBottom = getFreezeTrailingHeight(rows, freezeTrailingRows, rowHeight);
+    const splitIndicies = [freezeColumns, 0, mappedColumns.length, rows - freezeTrailingRows] as const;
+    const splitLocations = [freezeLeft, 0, width, height - freezeBottom] as const;
+
+    const drawRects = highlightRegions.map(h => {
+        const r = h.range;
+        const style = h.style ?? "dashed";
+
+        return splitRectIntoRegions(r, splitIndicies, width, height, splitLocations).map(arg => {
+            const rect = arg.rect;
+            const topLeftBounds = computeBounds(
+                rect.x,
+                rect.y,
+                width,
+                height,
+                groupHeaderHeight,
+                headerHeight + getTotalGroupHeaderHeight(groupHeaderHeight),
+                cellXOffset,
+                cellYOffset,
+                translateX,
+                translateY,
+                rows,
+                freezeColumns,
+                freezeTrailingRows,
+                mappedColumns,
+                rowHeight
+            );
+            const bottomRightBounds =
+                rect.width === 1 && rect.height === 1
+                    ? topLeftBounds
+                    : computeBounds(
+                          rect.x + rect.width - 1,
+                          rect.y + rect.height - 1,
+                          width,
+                          height,
+                          groupHeaderHeight,
+                          headerHeight + getTotalGroupHeaderHeight(groupHeaderHeight),
+                          cellXOffset,
+                          cellYOffset,
+                          translateX,
+                          translateY,
+                          rows,
+                          freezeColumns,
+                          freezeTrailingRows,
+                          mappedColumns,
+                          rowHeight
+                      );
+
+            if (rect.x + rect.width >= mappedColumns.length) {
+                bottomRightBounds.width -= 1;
+            }
+            if (rect.y + rect.height >= rows) {
+                bottomRightBounds.height -= 1;
+            }
+            return {
+                color: h.color,
+                style,
+                clip: arg.clip,
+                rect: hugRectToTarget(
+                    {
+                        x: topLeftBounds.x,
+                        y: topLeftBounds.y,
+                        width: bottomRightBounds.x + bottomRightBounds.width - topLeftBounds.x,
+                        height: bottomRightBounds.y + bottomRightBounds.height - topLeftBounds.y,
+                    },
+                    width,
+                    height,
+                    8
+                ),
+            };
+        });
+    });
+
+    const drawCb = () => {
+        ctx.lineWidth = 1;
+
+        let dashed = false;
+
+        for (const dr of drawRects) {
+            for (const s of dr) {
+                if (
+                    s?.rect !== undefined &&
+                    intersectRect(0, 0, width, height, s.rect.x, s.rect.y, s.rect.width, s.rect.height)
+                ) {
+                    const wasDashed: boolean = dashed;
+                    const needsClip = !rectContains(s.clip, s.rect);
+                    ctx.beginPath();
+                    if (needsClip) {
+                        ctx.save();
+                        ctx.rect(s.clip.x, s.clip.y, s.clip.width, s.clip.height);
+                        ctx.clip();
+                    }
+                    if (s.style === "dashed" && !dashed) {
+                        ctx.setLineDash([5, 3]);
+                        dashed = true;
+                    } else if ((s.style === "solid" || s.style === "solid-outline") && dashed) {
+                        ctx.setLineDash([]);
+                        dashed = false;
+                    }
+                    ctx.strokeStyle =
+                        s.style === "solid-outline"
+                            ? blend(blend(s.color, theme.borderColor), theme.bgCell)
+                            : withAlpha(s.color, 1);
+                    ctx.closePath();
+                    ctx.strokeRect(s.rect.x + 0.5, s.rect.y + 0.5, s.rect.width - 1, s.rect.height - 1);
+                    if (needsClip) {
+                        ctx.restore();
+                        dashed = wasDashed;
+                    }
+                }
+            }
+        }
+
+        if (dashed) {
+            ctx.setLineDash([]);
+        }
+    };
+
+    drawCb();
+    return drawCb;
+}
+
+export function drawColumnResizeOutline(
+    ctx: CanvasRenderingContext2D,
+    yOffset: number,
+    xOffset: number,
+    height: number,
+    style: string
+) {
+    ctx.beginPath();
+    ctx.moveTo(yOffset, xOffset);
+    ctx.lineTo(yOffset, height);
+
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = style;
+
+    ctx.stroke();
+
+    ctx.globalAlpha = 1;
+}
+
+export function drawFillHandle(
+    ctx: CanvasRenderingContext2D,
+    width: number,
+    height: number,
+    cellYOffset: number,
+    translateX: number,
+    translateY: number,
+    effectiveCols: readonly MappedGridColumn[],
+    allColumns: readonly MappedGridColumn[],
+    theme: FullTheme,
+    totalHeaderHeight: number,
+    selectedCell: GridSelection,
+    getRowHeight: (row: number) => number,
+    getCellContent: (cell: Item) => InnerGridCell,
+    freezeTrailingRows: number,
+    hasAppendRow: boolean,
+    fillHandle: FillHandle,
+    rows: number
+): (() => void) | undefined {
+    if (selectedCell.current === undefined) return undefined;
+
+    const drawFill = fillHandle !== false && fillHandle !== undefined;
+    if (!drawFill) return undefined;
+
+    const fill = typeof fillHandle === "object" ? { ...DEFAULT_FILL_HANDLE, ...fillHandle } : DEFAULT_FILL_HANDLE;
+
+    const range = selectedCell.current.range;
+    const currentItem = selectedCell.current.cell;
+    const fillHandleTarget = [range.x + range.width - 1, range.y + range.height - 1];
+
+    // if the currentItem row greater than rows and the fill handle row is greater than rows, we dont need to draw
+    if (currentItem[1] >= rows && fillHandleTarget[1] >= rows) return undefined;
+
+    const mustDraw = effectiveCols.some(c => c.sourceIndex === currentItem[0] || c.sourceIndex === fillHandleTarget[0]);
+    if (!mustDraw) return undefined;
+    const [targetCol, targetRow] = selectedCell.current.cell;
+    const cell = getCellContent(selectedCell.current.cell);
+    const targetColSpan = cell.span ?? [targetCol, targetCol];
+
+    const isStickyRow = targetRow >= rows - freezeTrailingRows;
+    const stickRowHeight =
+        freezeTrailingRows > 0 && !isStickyRow
+            ? getFreezeTrailingHeight(rows, freezeTrailingRows, getRowHeight) - 1
+            : 0;
+
+    const fillHandleRow = fillHandleTarget[1];
+
+    let drawHandleCb: (() => void) | undefined = undefined;
+
+    walkColumns(
+        effectiveCols,
+        cellYOffset,
+        translateX,
+        translateY,
+        totalHeaderHeight,
+        (col, drawX, colDrawY, clipX, startRow) => {
+            clipX;
+            if (col.sticky && targetCol > col.sourceIndex) return;
+
+            const isBeforeTarget = col.sourceIndex < targetColSpan[0];
+            const isAfterTarget = col.sourceIndex > targetColSpan[1];
+
+            const isFillHandleCol = col.sourceIndex === fillHandleTarget[0];
+
+            if (!isFillHandleCol && (isBeforeTarget || isAfterTarget)) {
+                // we dont need to do any drawing on this column but may yet need to draw
+                return;
+            }
+
+            walkRowsInCol(
+                startRow,
+                colDrawY,
+                height,
+                rows,
+                getRowHeight,
+                freezeTrailingRows,
+                hasAppendRow,
+                undefined,
+                (drawY, row, rh) => {
+                    if (row !== targetRow && row !== fillHandleRow) return;
+
+                    let cellX = drawX;
+                    let cellWidth = col.width;
+
+                    if (cell.span !== undefined) {
+                        const areas = getSpanBounds(cell.span, drawX, drawY, col.width, rh, col, allColumns);
+                        const area = col.sticky ? areas[0] : areas[1];
+
+                        if (area !== undefined) {
+                            cellX = area.x;
+                            cellWidth = area.width;
+                        }
+                    }
+
+                    const doHandle = row === fillHandleRow && isFillHandleCol && drawFill;
+
+                    if (doHandle) {
+                        drawHandleCb = () => {
+                            if (clipX > cellX && !col.sticky) {
+                                ctx.beginPath();
+                                ctx.rect(clipX, 0, width - clipX, height);
+                                ctx.clip();
+                            }
+                            // Draw a larger, outlined fill handle similar to Excel / Google Sheets.
+                            const size = fill.size;
+                            const half = size / 2;
+
+                            // Place the handle so its center sits on the bottom-right corner of the cell,
+                            // plus any configured offsets (fill.offsetX, fill.offsetY).
+                            // Offset by half pixel to align with grid lines.
+                            const hx = cellX + cellWidth + fill.offsetX - half + 0.5;
+                            const hy = drawY + rh + fill.offsetY - half + 0.5;
+
+                            ctx.beginPath();
+                            if (fill.shape === "circle") {
+                                ctx.arc(hx + half, hy + half, half, 0, Math.PI * 2);
+                            } else {
+                                ctx.rect(hx, hy, size, size);
+                            }
+
+                            // Fill
+                            ctx.fillStyle = col.themeOverride?.accentColor ?? theme.accentColor;
+                            ctx.fill();
+
+                            // Outline (drawn so it doesn't eat into the filled area)
+                            if (fill.outline > 0) {
+                                ctx.lineWidth = fill.outline;
+                                ctx.strokeStyle = theme.bgCell;
+                                if (fill.shape === "circle") {
+                                    ctx.beginPath();
+                                    ctx.arc(hx + half, hy + half, half + fill.outline / 2, 0, Math.PI * 2);
+                                    ctx.stroke();
+                                } else {
+                                    ctx.strokeRect(
+                                        hx - fill.outline / 2,
+                                        hy - fill.outline / 2,
+                                        size + fill.outline,
+                                        size + fill.outline
+                                    );
+                                }
+                            }
+                        };
+                    }
+                    return drawHandleCb !== undefined;
+                }
+            );
+
+            return drawHandleCb !== undefined;
+        }
+    );
+
+    if (drawHandleCb === undefined) return undefined;
+
+    const result = () => {
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, totalHeaderHeight, width, height - totalHeaderHeight - stickRowHeight);
+        ctx.clip();
+
+        drawHandleCb?.();
+
+        ctx.restore();
+    };
+
+    result();
+
+    return result;
+}

package/src/internal/data-grid/render/draw-checkbox.ts

@@ -0,0 +1,122 @@
+import { assertNever } from "../../../common/support.js";
+import { getSquareBB, getSquareWidth, getSquareXPosFromAlign, pointIsWithinBB } from "../../../common/utils.js";
+import type { Theme } from "../../../index.js";
+import { BooleanEmpty, BooleanIndeterminate, type BaseGridCell } from "../data-grid-types.js";
+import { roundedRect } from "./data-grid-lib.js";
+
+export function drawCheckbox(
+    ctx: CanvasRenderingContext2D,
+    theme: Theme,
+    checked: boolean | BooleanEmpty | BooleanIndeterminate,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    highlighted: boolean,
+    hoverX: number = -20,
+    hoverY: number = -20,
+    maxSize: number | undefined = undefined,
+    alignment: BaseGridCell["contentAlign"] = "center",
+    style: "circle" | "square" = "square"
+) {
+    const centerY = Math.floor(y + height / 2);
+    const rectBordRadius = style === "circle" ? 10_000 : (theme.roundingRadius ?? 4);
+    let checkBoxWidth = getSquareWidth(maxSize ?? theme.checkboxMaxSize, height, theme.cellVerticalPadding);
+    let checkBoxHalfWidth = checkBoxWidth / 2;
+    const posX = getSquareXPosFromAlign(alignment, x, width, theme.cellHorizontalPadding, checkBoxWidth);
+    const bb = getSquareBB(posX, centerY, checkBoxWidth);
+    const hovered = pointIsWithinBB(x + hoverX, y + hoverY, bb);
+
+    switch (checked) {
+        case true: {
+            ctx.beginPath();
+            roundedRect(
+                ctx,
+                posX - checkBoxWidth / 2,
+                centerY - checkBoxWidth / 2,
+                checkBoxWidth,
+                checkBoxWidth,
+                rectBordRadius
+            );
+
+            if (style === "circle") {
+                checkBoxHalfWidth *= 0.8;
+                checkBoxWidth *= 0.8;
+            }
+
+            ctx.fillStyle = highlighted ? theme.accentColor : theme.textMedium;
+            ctx.fill();
+
+            ctx.beginPath();
+            ctx.moveTo(
+                posX - checkBoxHalfWidth + checkBoxWidth / 4.23,
+                centerY - checkBoxHalfWidth + checkBoxWidth / 1.97
+            );
+            ctx.lineTo(
+                posX - checkBoxHalfWidth + checkBoxWidth / 2.42,
+                centerY - checkBoxHalfWidth + checkBoxWidth / 1.44
+            );
+            ctx.lineTo(
+                posX - checkBoxHalfWidth + checkBoxWidth / 1.29,
+                centerY - checkBoxHalfWidth + checkBoxWidth / 3.25
+            );
+
+            ctx.strokeStyle = theme.bgCell;
+            ctx.lineJoin = "round";
+            ctx.lineCap = "round";
+            ctx.lineWidth = 1.9;
+            ctx.stroke();
+            break;
+        }
+
+        case BooleanEmpty:
+        case false: {
+            ctx.beginPath();
+            roundedRect(
+                ctx,
+                posX - checkBoxWidth / 2 + 0.5,
+                centerY - checkBoxWidth / 2 + 0.5,
+                checkBoxWidth - 1,
+                checkBoxWidth - 1,
+                rectBordRadius
+            );
+
+            ctx.lineWidth = 1;
+            ctx.strokeStyle = hovered ? theme.textDark : theme.textMedium;
+            ctx.stroke();
+            break;
+        }
+
+        case BooleanIndeterminate: {
+            ctx.beginPath();
+            roundedRect(
+                ctx,
+                posX - checkBoxWidth / 2,
+                centerY - checkBoxWidth / 2,
+                checkBoxWidth,
+                checkBoxWidth,
+                rectBordRadius
+            );
+
+            ctx.fillStyle = hovered ? theme.textMedium : theme.textLight;
+            ctx.fill();
+
+            if (style === "circle") {
+                checkBoxHalfWidth *= 0.8;
+                checkBoxWidth *= 0.8;
+            }
+
+            ctx.beginPath();
+            ctx.moveTo(posX - checkBoxWidth / 3, centerY);
+            ctx.lineTo(posX + checkBoxWidth / 3, centerY);
+            ctx.strokeStyle = theme.bgCell;
+            ctx.lineCap = "round";
+            ctx.lineWidth = 1.9;
+            ctx.stroke();
+            break;
+        }
+
+        default:
+            assertNever(checked);
+    }
+}