@glideappsfinal/glide-data-grid 6.0.9

package/src/cells/boolean-cell.tsx

@@ -0,0 +1,135 @@
+import type { FullTheme } from "../common/styles.js";
+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,
+    type Rectangle,
+} from "../internal/data-grid/data-grid-types.js";
+import { drawCheckbox } from "../internal/data-grid/render/draw-checkbox.js";
+import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
+
+function isOverEditableRegion(e: {
+    readonly cell: BooleanCell;
+    readonly posX: number;
+    readonly posY: number;
+    readonly bounds: Rectangle;
+    readonly theme: FullTheme;
+}): boolean {
+    const { cell, posX: pointerX, posY: pointerY, bounds, theme } = e;
+    const { width, height, x: cellX, y: cellY } = bounds;
+    const maxWidth = cell.maxSize ?? theme.checkboxMaxSize;
+    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);
+
+    return booleanCellIsEditable(cell) && checkBoxClicked;
+}
+
+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 ?? a.theme.checkboxMaxSize,
+            a.cell.hoverEffectIntensity ?? 0.35
+        ),
+    onDelete: c => ({
+        ...c,
+        data: false,
+    }),
+    onSelect: e => {
+        if (isOverEditableRegion(e)) {
+            e.preventDefault();
+        }
+    },
+    onClick: e => {
+        if (isOverEditableRegion(e)) {
+            return {
+                ...e.cell,
+                data: toggleBoolean(e.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,
+    hoverEffectIntensity: 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;
+
+    // Don't set the global alpha unnecessarily
+    let shouldRestoreAlpha = false;
+    if (hoverEffectIntensity > 0) {
+        let alpha = canEdit ? 1 - hoverEffectIntensity + hoverEffectIntensity * hoverAmount : 0.4;
+        if (data === BooleanEmpty) {
+            alpha *= hoverAmount;
+        }
+        if (alpha === 0) {
+            return;
+        }
+
+        if (alpha < 1) {
+            shouldRestoreAlpha = true;
+            ctx.globalAlpha = alpha;
+        }
+    }
+
+    drawCheckbox(ctx, theme, data, x, y, w, h, highlighted, hoverX, hoverY, maxSize, contentAlign);
+
+    if (shouldRestoreAlpha) {
+        ctx.globalAlpha = 1;
+    }
+}

package/src/cells/bubble-cell.tsx

@@ -0,0 +1,68 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import BubblesOverlayEditor from "../internal/data-grid-overlay-editor/private/bubbles-overlay-editor.js";
+import { getMiddleCenterBias, measureTextCached, roundedRect } from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type BubbleCell } from "../internal/data-grid/data-grid-types.js";
+import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
+import { makeAccessibilityStringForArray } from "../common/utils.js";
+
+export const bubbleCellRenderer: InternalCellRenderer<BubbleCell> = {
+    getAccessibilityString: c => makeAccessibilityStringForArray(c.data),
+    kind: GridCellKind.Bubble,
+    needsHover: false,
+    useLabel: false,
+    needsHoverPosition: false,
+    measure: (ctx, cell, theme) => {
+        const bubblesWidth = cell.data.reduce(
+            (acc, data) => ctx.measureText(data).width + acc + theme.bubblePadding * 2 + theme.bubbleMargin,
+            0
+        );
+        if (cell.data.length === 0) return theme.cellHorizontalPadding * 2;
+        return bubblesWidth + 2 * theme.cellHorizontalPadding - theme.bubbleMargin;
+    },
+    draw: a => drawBubbles(a, a.cell.data),
+    provideEditor: () => p => {
+        const { value } = p;
+        return <BubblesOverlayEditor bubbles={value.data} />;
+    },
+    onPaste: () => undefined,
+};
+
+function drawBubbles(args: BaseDrawArgs, data: readonly string[]) {
+    const { rect, theme, ctx, highlighted } = args;
+    const { x, y, width: w, height: h } = rect;
+
+    let renderX = x + theme.cellHorizontalPadding;
+
+    const renderBoxes: { x: number; width: number }[] = [];
+    for (const s of data) {
+        if (renderX > x + w) break;
+        const textWidth = measureTextCached(s, ctx, theme.baseFontFull).width;
+        renderBoxes.push({
+            x: renderX,
+            width: textWidth,
+        });
+
+        renderX += textWidth + theme.bubblePadding * 2 + theme.bubbleMargin;
+    }
+
+    ctx.beginPath();
+    for (const rectInfo of renderBoxes) {
+        roundedRect(
+            ctx,
+            rectInfo.x,
+            y + (h - theme.bubbleHeight) / 2,
+            rectInfo.width + theme.bubblePadding * 2,
+            theme.bubbleHeight,
+            theme.roundingRadius ?? theme.bubbleHeight / 2
+        );
+    }
+    ctx.fillStyle = highlighted ? theme.bgBubbleSelected : theme.bgBubble;
+    ctx.fill();
+
+    for (const [i, rectInfo] of renderBoxes.entries()) {
+        ctx.beginPath();
+        ctx.fillStyle = theme.textBubble;
+        ctx.fillText(data[i], rectInfo.x + theme.bubblePadding, y + h / 2 + getMiddleCenterBias(ctx, theme));
+    }
+}

package/src/cells/cell-types.ts

@@ -0,0 +1,124 @@
+import type React from "react";
+import type { SpriteManager } from "../internal/data-grid/data-grid-sprites.js";
+import type {
+    InnerGridCell,
+    Rectangle,
+    CustomCell,
+    ProvideEditorCallback,
+    BooleanEmpty,
+    BooleanIndeterminate,
+    Item,
+} from "../internal/data-grid/data-grid-types.js";
+import type { FullTheme } from "../common/styles.js";
+import type { ImageWindowLoader } from "../internal/data-grid/image-window-loader-interface.js";
+import type { BaseGridMouseEventArgs } from "../internal/data-grid/event-args.js";
+
+export interface BaseDrawArgs {
+    ctx: CanvasRenderingContext2D;
+    theme: FullTheme;
+    col: number;
+    row: number;
+    rect: Rectangle;
+    highlighted: boolean;
+    hoverAmount: number;
+    hoverX: number | undefined;
+    hoverY: number | undefined;
+    cellFillColor: string;
+    imageLoader: ImageWindowLoader;
+    spriteManager: SpriteManager;
+    hyperWrapping: boolean;
+    cell: InnerGridCell;
+}
+
+/** @category Drawing */
+
+export type DrawStateTuple = [any, (state: any) => void];
+
+export interface DrawArgs<T extends InnerGridCell> extends BaseDrawArgs {
+    cell: T;
+    requestAnimationFrame: (state?: any) => void;
+    drawState: DrawStateTuple;
+    frameTime: number;
+    overrideCursor: ((cursor: React.CSSProperties["cursor"]) => void) | undefined;
+}
+
+// intentionally mutable
+/** @category Drawing */
+export interface PrepResult {
+    font: string | undefined;
+    fillStyle: string | undefined;
+    renderer: {};
+    deprep: ((args: Pick<BaseDrawArgs, "ctx">) => void) | undefined;
+}
+
+/** @category Renderers */
+export type DrawCallback<T extends InnerGridCell> = (args: DrawArgs<T>, cell: T) => void;
+type PrepCallback = (args: BaseDrawArgs, lastPrep?: PrepResult) => Partial<PrepResult>;
+
+interface BaseCellRenderer<T extends InnerGridCell> {
+    // drawing
+    readonly kind: T["kind"];
+    readonly draw: DrawCallback<T>;
+    readonly drawPrep?: PrepCallback;
+    readonly needsHover?: boolean | ((cell: T) => boolean);
+    readonly needsHoverPosition?: boolean;
+    readonly measure?: (ctx: CanvasRenderingContext2D, cell: T, theme: FullTheme) => number;
+
+    // editing
+    readonly provideEditor?: ProvideEditorCallback<T>;
+
+    // event callbacks
+    readonly onClick?: (
+        args: {
+            readonly cell: T;
+            readonly posX: number;
+            readonly posY: number;
+            readonly bounds: Rectangle;
+            readonly location: Item;
+            readonly theme: FullTheme;
+            readonly preventDefault: () => void;
+        } & BaseGridMouseEventArgs
+    ) => T | undefined;
+
+    readonly onSelect?: (
+        args: {
+            readonly cell: T;
+            readonly posX: number;
+            readonly posY: number;
+            readonly bounds: Rectangle;
+            readonly theme: FullTheme;
+            readonly preventDefault: () => void;
+        } & BaseGridMouseEventArgs
+    ) => void;
+    readonly onDelete?: (cell: T) => T | undefined;
+}
+
+/** @category Renderers */
+export interface InternalCellRenderer<T extends InnerGridCell> extends BaseCellRenderer<T> {
+    readonly useLabel?: boolean;
+    readonly getAccessibilityString: (cell: T) => string;
+    readonly onPaste: (
+        val: string,
+        cell: T,
+        details: {
+            // fixme this should become the only argument
+            readonly rawValue: string | string[] | number | boolean | BooleanEmpty | BooleanIndeterminate;
+            readonly formatted?: string | string[];
+            readonly formattedString?: string; // convenience
+        }
+    ) => T | undefined;
+}
+
+/** @category Renderers */
+export interface CustomRenderer<T extends CustomCell = CustomCell> extends BaseCellRenderer<T> {
+    readonly isMatch: (cell: CustomCell) => cell is T;
+    readonly onPaste?: (val: string, cellData: T["data"]) => T["data"] | undefined;
+}
+
+/** @category Renderers */
+export type CellRenderer<T extends InnerGridCell> = [T] extends [CustomCell<infer DataType>]
+    ? CustomRenderer<CustomCell<DataType>>
+    : InternalCellRenderer<T>;
+
+/** @category Renderers */
+export type GetCellRendererCallback = <T extends InnerGridCell>(cell: T) => CellRenderer<T> | undefined;

package/src/cells/drilldown-cell.tsx

@@ -0,0 +1,244 @@
+/* eslint-disable react/display-name */
+import * as React from "react";
+import DrilldownOverlayEditor from "../internal/data-grid-overlay-editor/private/drilldown-overlay-editor.js";
+import {
+    getEmHeight,
+    getMiddleCenterBias,
+    measureTextCached,
+    roundedRect,
+} from "../internal/data-grid/render/data-grid-lib.js";
+import { GridCellKind, type DrilldownCell, type DrilldownCellData } from "../internal/data-grid/data-grid-types.js";
+import type { BaseDrawArgs, InternalCellRenderer } from "./cell-types.js";
+import { makeAccessibilityStringForArray } from "../common/utils.js";
+
+export const drilldownCellRenderer: InternalCellRenderer<DrilldownCell> = {
+    getAccessibilityString: c => makeAccessibilityStringForArray(c.data.map(d => d.text)),
+    kind: GridCellKind.Drilldown,
+    needsHover: false,
+    useLabel: false,
+    needsHoverPosition: false,
+    measure: (ctx, cell, theme) =>
+        cell.data.reduce(
+            (acc, data) =>
+                ctx.measureText(data.text).width +
+                acc +
+                theme.bubblePadding * 2 +
+                theme.bubbleMargin +
+                (data.img !== undefined ? 18 : 0),
+            0
+        ) +
+        2 * theme.cellHorizontalPadding -
+        4,
+    draw: a => drawDrilldownCell(a, a.cell.data),
+    provideEditor: () => p => {
+        const { value } = p;
+        return <DrilldownOverlayEditor drilldowns={value.data} />;
+    },
+    onPaste: () => undefined,
+};
+
+const drilldownCache: {
+    [key: string]: HTMLCanvasElement;
+} = {};
+
+function getAndCacheDrilldownBorder(
+    bgCell: string,
+    border: string,
+    height: number,
+    rounding: number
+): {
+    el: HTMLCanvasElement;
+    height: number;
+    width: number;
+    middleWidth: number;
+    sideWidth: number;
+    dpr: number;
+    padding: number;
+} | null {
+    const dpr = Math.ceil(window.devicePixelRatio);
+    const shadowBlur = 5;
+    const targetHeight = height - shadowBlur * 2;
+    const middleWidth = 4;
+
+    const innerHeight = height * dpr;
+    const sideWidth = rounding + shadowBlur;
+    const targetWidth = rounding * 3;
+    const innerWidth = (targetWidth + shadowBlur * 2) * dpr;
+
+    const key = `${bgCell},${border},${dpr},${height}`;
+    if (drilldownCache[key] !== undefined) {
+        return {
+            el: drilldownCache[key],
+            height: innerHeight,
+            width: innerWidth,
+            middleWidth: middleWidth * dpr,
+            sideWidth: sideWidth * dpr,
+            padding: shadowBlur * dpr,
+            dpr,
+        };
+    }
+
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d"); // alpha needed
+
+    if (ctx === null) return null;
+
+    canvas.width = innerWidth;
+    canvas.height = innerHeight;
+
+    ctx.scale(dpr, dpr);
+
+    drilldownCache[key] = canvas;
+
+    ctx.beginPath();
+    roundedRect(ctx, shadowBlur, shadowBlur, targetWidth, targetHeight, rounding);
+
+    ctx.shadowColor = "rgba(24, 25, 34, 0.4)";
+    ctx.shadowBlur = 1;
+    ctx.fillStyle = bgCell;
+    ctx.fill();
+
+    ctx.shadowColor = "rgba(24, 25, 34, 0.3)";
+    ctx.shadowOffsetY = 1;
+    ctx.shadowBlur = 5;
+    ctx.fillStyle = bgCell;
+    ctx.fill();
+
+    ctx.shadowOffsetY = 0;
+    ctx.shadowBlur = 0;
+    ctx.shadowBlur = 0;
+
+    ctx.beginPath();
+    roundedRect(ctx, shadowBlur + 0.5, shadowBlur + 0.5, targetWidth, targetHeight, rounding);
+
+    ctx.strokeStyle = border;
+    ctx.lineWidth = 1;
+    ctx.stroke();
+
+    return {
+        el: canvas,
+        height: innerHeight,
+        width: innerWidth,
+        sideWidth: sideWidth * dpr,
+        middleWidth: rounding * dpr,
+        padding: shadowBlur * dpr,
+        dpr,
+    };
+}
+
+function drawDrilldownCell(args: BaseDrawArgs, data: readonly DrilldownCellData[]) {
+    const { rect, theme, ctx, imageLoader, col, row } = args;
+    const { x, width: w } = rect;
+
+    const font = theme.baseFontFull;
+    const emHeight = getEmHeight(ctx, font);
+    const h = Math.min(rect.height, Math.max(16, Math.ceil(emHeight * theme.lineHeight) * 2));
+    const y = Math.floor(rect.y + (rect.height - h) / 2);
+
+    const bubbleHeight = h - 10;
+    const bubblePad = theme.bubblePadding;
+    const bubbleMargin = theme.bubbleMargin;
+    let renderX = x + theme.cellHorizontalPadding;
+    const rounding = theme.roundingRadius ?? 6;
+
+    const tileMap = getAndCacheDrilldownBorder(theme.bgCell, theme.drilldownBorder, h, rounding);
+
+    const renderBoxes: { x: number; width: number }[] = [];
+    for (const el of data) {
+        if (renderX > x + w) break;
+        const textMetrics = measureTextCached(el.text, ctx, font);
+        const textWidth = textMetrics.width;
+        let imgWidth = 0;
+        if (el.img !== undefined) {
+            const img = imageLoader.loadOrGetImage(el.img, col, row);
+            if (img !== undefined) {
+                imgWidth = bubbleHeight - 8 + 4;
+            }
+        }
+        const renderWidth = textWidth + imgWidth + bubblePad * 2;
+        renderBoxes.push({
+            x: renderX,
+            width: renderWidth,
+        });
+
+        renderX += renderWidth + bubbleMargin;
+    }
+
+    if (tileMap !== null) {
+        const { el, height, middleWidth, sideWidth, width, dpr, padding } = tileMap;
+        const outerSideWidth = sideWidth / dpr;
+        const outerPadding = padding / dpr;
+        for (const rectInfo of renderBoxes) {
+            const rx = Math.floor(rectInfo.x);
+            const rw = Math.floor(rectInfo.width);
+            const outerMiddleWidth = rw - (outerSideWidth - outerPadding) * 2;
+            ctx.imageSmoothingEnabled = false;
+
+            ctx.drawImage(el, 0, 0, sideWidth, height, rx - outerPadding, y, outerSideWidth, h);
+            if (outerMiddleWidth > 0)
+                ctx.drawImage(
+                    el,
+                    sideWidth,
+                    0,
+                    middleWidth,
+                    height,
+                    rx + (outerSideWidth - outerPadding),
+                    y,
+                    outerMiddleWidth,
+                    h
+                );
+            ctx.drawImage(
+                el,
+                width - sideWidth,
+                0,
+                sideWidth,
+                height,
+                rx + rw - (outerSideWidth - outerPadding),
+                y,
+                outerSideWidth,
+                h
+            );
+            ctx.imageSmoothingEnabled = true;
+        }
+    }
+
+    ctx.beginPath();
+
+    for (const [i, rectInfo] of renderBoxes.entries()) {
+        const d = data[i];
+        let drawX = rectInfo.x + bubblePad;
+
+        if (d.img !== undefined) {
+            const img = imageLoader.loadOrGetImage(d.img, col, row);
+            if (img !== undefined) {
+                const imgSize = bubbleHeight - 8;
+                let srcX = 0;
+                let srcY = 0;
+                let srcWidth = img.width;
+                let srcHeight = img.height;
+
+                if (srcWidth > srcHeight) {
+                    // landscape
+                    srcX += (srcWidth - srcHeight) / 2;
+                    srcWidth = srcHeight;
+                } else if (srcHeight > srcWidth) {
+                    //portrait
+                    srcY += (srcHeight - srcWidth) / 2;
+                    srcHeight = srcWidth;
+                }
+                ctx.beginPath();
+                roundedRect(ctx, drawX, y + h / 2 - imgSize / 2, imgSize, imgSize, theme.roundingRadius ?? 3);
+                ctx.save();
+                ctx.clip();
+                ctx.drawImage(img, srcX, srcY, srcWidth, srcHeight, drawX, y + h / 2 - imgSize / 2, imgSize, imgSize);
+                ctx.restore();
+
+                drawX += imgSize + 4;
+            }
+        }
+
+        ctx.beginPath();
+        ctx.fillStyle = theme.textBubble;
+        ctx.fillText(d.text, drawX, y + h / 2 + getMiddleCenterBias(ctx, theme));
+    }
+}

package/src/cells/image-cell.tsx

@@ -0,0 +1,117 @@
+/* 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/render/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 !== true}
+                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;
+    }
+}