js-spread-grid 0.0.1

package/package.json

@@ -0,0 +1,26 @@
+{
+    "name": "js-spread-grid",
+    "version": "0.0.1",
+    "description": "Fast grid for js applications",
+    "author": "Tomasz Rewak <tomasz.rewak@gmail.com>",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/TomaszRewak/js-spread-grid.git"
+    },
+    "bugs": {
+        "url": "https://github.com/TomaszRewak/js-spread-grid/issues"
+    },
+    "homepage": "https://github.com/TomaszRewak/js-spread-grid/issues",
+    "main": "src/index.js",
+    "type": "module",
+    "scripts": {
+        "build-bundle": "webpack --mode=production --output-library-type=umd --output-filename ./index.js",
+        "test": "node --experimental-vm-modules ./node_modules/jest/bin/jest.js"
+    },
+    "devDependencies": {
+        "jest": "^29.7.0",
+        "webpack": "^5.90.3",
+        "webpack-cli": "^5.1.4"
+    }
+}

package/src/core/render.js

@@ -0,0 +1,400 @@
+import { defaultFont } from "../core-utils/defaults.js";
+import roundToPixels from "../core-utils/roundToPixels.js";
+
+function renderSection(context, vertical, horizontal) {
+    const state = context.state;
+    const canvas = context.canvases[`${vertical}-${horizontal}`];
+    const verticalSection = state.sections[vertical];
+    const horizontalSection = state.sections[horizontal];
+    const columns = horizontalSection.columns;
+    const rows = verticalSection.rows;
+
+    if (rows.length === 0 || columns.length === 0) {
+        if (canvas.parentElement)
+            canvas.parentElement.removeChild(canvas);
+        return;
+    }
+
+    if (!canvas.parentElement)
+        context.element.appendChild(canvas);
+
+    // Checking how often this is called
+    console.log('draw');
+
+    // TODO: Borders are still blurry after scrolling at high zoom-out levels
+
+    const ctx = canvas.getContext("2d", { alpha: false });
+    // TODO: Make that "1" configurable as cell spacing
+    const scrollRect = state.scrollRect;
+    const textResolver = state.textResolver;
+    // TODO: Make sure those formatters are split based on the rule areas
+    const formatResolver = state.renderFormatResolver;
+    const borderWidth = state.borderWidth;
+    const sectionBorders = {
+        top: verticalSection.showTopBorder,
+        bottom: verticalSection.showBottomBorder,
+        left: horizontalSection.showLeftBorder,
+        right: horizontalSection.showRightBorder
+    };
+    const borderOffset = borderWidth / 2;
+    const rowCount = rows.length;
+    const columnCount = columns.length;
+    const horizontalBorderCount = rowCount - 1 + (sectionBorders.top ? 1 : 0) + (sectionBorders.bottom ? 1 : 0);
+    const verticalBorderCount = columnCount - 1 + (sectionBorders.left ? 1 : 0) + (sectionBorders.right ? 1 : 0);
+    const rowHeights = rows.map(row => row.height);
+    const columnWidths = columns.map(column => column.width);
+    const totalWidth = columnWidths.reduce((a, b) => a + b, 0) + verticalBorderCount * borderWidth;
+    const totalHeight = rowHeights.reduce((a, b) => a + b, 0) + horizontalBorderCount * borderWidth;
+
+    const left = horizontal === 'center'
+        ? scrollRect.left
+        : 0;
+    const top = vertical === 'middle'
+        ? scrollRect.top
+        : 0;
+    const width = horizontal === 'center'
+        ? scrollRect.width
+        : horizontalSection.width;
+    const height = vertical === 'middle'
+        ? scrollRect.height
+        : verticalSection.height;
+
+    // TODO: Move somewhere else
+    const horizontalOffsets = columnWidths.reduce((acc, width, index) => {
+        const prevOffset = acc[index];
+        const offset = prevOffset + width + borderWidth;
+        acc.push(offset);
+        return acc;
+    }, [sectionBorders.left ? borderWidth : 0]);
+    const verticalOffsets = rowHeights.reduce((acc, height, index) => {
+        const prevOffset = acc[index];
+        const offset = prevOffset + height + borderWidth;
+        acc.push(offset);
+        return acc;
+    }, [sectionBorders.top ? borderWidth : 0]);
+
+    const columnOffsets = horizontalOffsets.slice(0, -1);
+    const rowOffsets = verticalOffsets.slice(0, -1);
+
+    const minVisibleColumnIndex = Math.max(columnOffsets.findLastIndex(offset => offset <= left), 0);
+    const maxVisibleColumnIndex = columnOffsets.findLastIndex(offset => offset <= left + width);
+    const minVisibleRowIndex = Math.max(rowOffsets.findLastIndex(offset => offset <= top), 0);
+    const maxVisibleRowIndex = rowOffsets.findLastIndex(offset => offset <= top + height);
+
+    const minVisibleVerticalBorderIndex = Math.max(minVisibleColumnIndex, sectionBorders.left ? 0 : 1);
+    const maxVisibleVerticalBorderIndex = maxVisibleColumnIndex + (sectionBorders.right ? 1 : 0);
+    const minVisibleHorizontalBorderIndex = Math.max(minVisibleRowIndex, sectionBorders.top ? 0 : 1);
+    const maxVisibleHorizontalBorderIndex = maxVisibleRowIndex + (sectionBorders.bottom ? 1 : 0);
+
+    const cells = Array.from({ length: maxVisibleRowIndex - minVisibleRowIndex + 1 }, (_, rowIndex) => {
+        const row = rows[rowIndex + minVisibleRowIndex];
+        return Array.from({ length: maxVisibleColumnIndex - minVisibleColumnIndex + 1 }, (_, columnIndex) => {
+            const column = columns[columnIndex + minVisibleColumnIndex];
+            return formatResolver.resolve(row, column);
+        });
+    });
+    const getCell = (rowIndex, columnIndex) => cells[rowIndex - minVisibleRowIndex][columnIndex - minVisibleColumnIndex];
+
+    canvas.width = Math.round(width * devicePixelRatio);
+    canvas.height = Math.round(height * devicePixelRatio);
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    canvas.style.marginLeft = `${left}px`;
+    canvas.style.marginTop = `${top}px`;
+    canvas.style.marginRight = `${totalWidth - width - left}px`;
+    canvas.style.marginBottom = `${totalHeight - height - top}px`;;
+
+    ctx.fillStyle = "#E9E9E9";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+    const setTransform = (x, y) => {
+        ctx.setTransform(devicePixelRatio, 0, 0, devicePixelRatio, (x - left) * devicePixelRatio, (y - top) * devicePixelRatio);
+    };
+    const setClip = (x, y, width, height) => {
+        ctx.beginPath();
+        ctx.rect(x, y, width, height);
+        ctx.clip();
+    };
+
+    // Draw cells
+    for (let columnIndex = minVisibleColumnIndex; columnIndex <= maxVisibleColumnIndex; columnIndex++) {
+        ctx.save();
+        setTransform(horizontalOffsets[columnIndex], 0);
+        setClip(0, 0, columnWidths[columnIndex], totalHeight);
+
+        for (let rowIndex = minVisibleRowIndex; rowIndex <= maxVisibleRowIndex; rowIndex++) {
+            const cell = getCell(rowIndex, columnIndex);
+            const style = cell.style;
+            const cellTop = verticalOffsets[rowIndex];
+            const cellLeft = horizontalOffsets[columnIndex];
+            const cellWidth = columnWidths[columnIndex];
+            const cellHeight = rowHeights[rowIndex];
+            const text = cell.text;
+            const textAlign = style.textAlign || 'left';
+            const textBaseline = style.textBaseline || 'middle';
+            const padding = cell.padding;
+
+            setTransform(cellLeft, cellTop);
+
+            ctx.fillStyle = style.background || 'white';
+            ctx.fillRect(0, 0, cellWidth, cellHeight);
+
+            if ('draw' in cell)
+                cell.draw(ctx);
+
+            if (style.highlight) {
+                ctx.fillStyle = style.highlight;
+                ctx.fillRect(0, 0, cellWidth, cellHeight);
+            }
+
+            if (style.corner) {
+                ctx.fillStyle = style.corner;
+                ctx.beginPath();
+                ctx.moveTo(cellWidth - 7, cellHeight);
+                ctx.lineTo(cellWidth, cellHeight);
+                ctx.lineTo(cellWidth, cellHeight - 7);
+                ctx.fill();
+            }
+
+            ctx.fillStyle = style.foreground || 'black';
+            ctx.font = style.font || defaultFont;
+            ctx.textAlign = textAlign;
+
+            const fontMetrics = textResolver.getFontMetrics(style.font);
+
+            // TODO: Make sure that values are rounded using devicePixelRatio
+            const textX = roundToPixels(
+                textAlign === 'left' ? padding.left :
+                    textAlign === 'center' ? cellWidth / 2 :
+                        textAlign === 'right' ? cellWidth - padding.right :
+                            0,
+                devicePixelRatio
+            );
+
+            const textY = roundToPixels(
+                textBaseline === 'top' ? fontMetrics.middle + fontMetrics.topOffset + padding.top :
+                    textBaseline === 'middle' ? cellHeight / 2 + fontMetrics.middle :
+                        textBaseline === 'bottom' ? cellHeight + fontMetrics.middle - fontMetrics.bottomOffset - padding.bottom :
+                            0,
+                devicePixelRatio
+            );
+
+            const fitsVertically = textY - fontMetrics.middle - fontMetrics.topOffset >= 0 && textY - fontMetrics.middle + fontMetrics.bottomOffset <= cellHeight;
+
+            if (fitsVertically) {
+                ctx.fillText(text, textX, textY);
+            }
+            else {
+                // TODO: Clip if the text is too high (and draw some indicator if you do)
+                ctx.strokeStyle = '#E9E9E9';
+                ctx.lineWidth = borderWidth;
+
+                ctx.beginPath();
+                ctx.moveTo(0, borderWidth + borderOffset);
+                ctx.lineTo(cellWidth, borderWidth + borderOffset);
+                ctx.moveTo(0, cellHeight - borderWidth - borderOffset);
+                ctx.lineTo(cellWidth, cellHeight - borderWidth - borderOffset);
+                ctx.stroke();
+
+                ctx.save();
+                setClip(0, 2 * borderWidth, cellWidth, cellHeight - 4 * borderWidth);
+
+                ctx.fillText(text, textX, textY);
+
+                ctx.restore();
+            }
+        }
+
+        ctx.restore();
+    }
+
+    setTransform(0, 0);
+
+    // Draw borders
+
+    // TODO: clip drawing area to the middle of neighboring columns/rows (might be useful for redrawing only the changed cells)
+    // TODO: move somewhere (?)
+    const drawBorder = (x1, y1, x2, y2, style) => {
+        if (!style)
+            return;
+
+        const width = style.width * borderWidth;
+
+        const isHorizontal = y1 === y2;
+
+        // TODO: Don't add offset if the border is not continued
+        const xa = x1 - (isHorizontal ? width / 2 : 0);
+        const ya = y1 - (!isHorizontal ? width / 2 : 0);
+        const xb = x2 + (isHorizontal ? width / 2 : 0);
+        const yb = y2 + (!isHorizontal ? width / 2 : 0);
+
+        ctx.strokeStyle = style.color || 'black'; // TODO: resolve this color earlier
+        ctx.lineWidth = width;
+
+        if (style.dash) {
+            ctx.setLineDash(style.dash.map(value => value / devicePixelRatio));
+            ctx.lineDashOffset = (isHorizontal ? xa : ya);
+        }
+        else {
+            ctx.setLineDash([]);
+        }
+
+        ctx.beginPath();
+        ctx.moveTo(xa, ya);
+        ctx.lineTo(xb, yb);
+        ctx.stroke();
+    }
+
+    const selectBorder = (borderStyleA, borderStyleB) => {
+        if (!borderStyleA)
+            return borderStyleB;
+
+        if (!borderStyleB)
+            return borderStyleA;
+
+        if (borderStyleA.index > borderStyleB.index)
+            return borderStyleA;
+
+        return borderStyleB;
+    }
+
+    // TODO: Move somewhere else (?)
+    for (let horizontalBorderIndex = minVisibleHorizontalBorderIndex; horizontalBorderIndex <= maxVisibleHorizontalBorderIndex; horizontalBorderIndex++) {
+        const topRowIndex = horizontalBorderIndex - 1;
+        const bottomRowIndex = horizontalBorderIndex;
+
+        for (let columnIndex = minVisibleColumnIndex; columnIndex <= maxVisibleColumnIndex; columnIndex++) {
+            const topBorderStyle = topRowIndex >= minVisibleRowIndex ? getCell(topRowIndex, columnIndex).style.borderBottom : null;
+            const bottomBorderStyle = bottomRowIndex <= maxVisibleRowIndex ? getCell(bottomRowIndex, columnIndex).style.borderTop : null;
+
+            const borderStyle = selectBorder(topBorderStyle, bottomBorderStyle);
+
+            drawBorder(
+                horizontalOffsets[columnIndex] - borderOffset,
+                verticalOffsets[bottomRowIndex] - borderOffset,
+                horizontalOffsets[columnIndex + 1] - borderOffset,
+                verticalOffsets[bottomRowIndex] - borderOffset,
+                borderStyle);
+        }
+    }
+
+    for (let verticalBorderIndex = minVisibleVerticalBorderIndex; verticalBorderIndex <= maxVisibleVerticalBorderIndex; verticalBorderIndex++) {
+        const leftColumnIndex = verticalBorderIndex - 1;
+        const rightColumnIndex = verticalBorderIndex;
+
+        for (let rowIndex = minVisibleRowIndex; rowIndex <= maxVisibleRowIndex; rowIndex++) {
+            const leftBorderStyle = leftColumnIndex >= minVisibleColumnIndex ? getCell(rowIndex, leftColumnIndex).style.borderRight : null;
+            const rightBorderStyle = rightColumnIndex <= maxVisibleColumnIndex ? getCell(rowIndex, rightColumnIndex).style.borderLeft : null;
+
+            const borderStyle = selectBorder(leftBorderStyle, rightBorderStyle);
+
+            drawBorder(
+                horizontalOffsets[rightColumnIndex] - borderOffset,
+                verticalOffsets[rowIndex] - borderOffset,
+                horizontalOffsets[rightColumnIndex] - borderOffset,
+                verticalOffsets[rowIndex + 1] - borderOffset,
+                borderStyle);
+        }
+    }
+}
+
+function renderInput(context) {
+    const element = context.element;
+    const input = context.input;
+    const state = context.state;
+    const inputPlacement = state.inputPlacement;
+
+    if (!inputPlacement) {
+        if (input.parentElement) {
+            const hasFocus = document.activeElement === input;
+            input.parentElement.removeChild(input);
+            if (hasFocus)
+                element.focus({ preventScroll: true });
+        }
+        return;
+    }
+
+    const canvas = context.canvases[inputPlacement.section];
+
+    input.style.left = 'left' in inputPlacement ? `${inputPlacement.left}px` : '0';
+    input.style.top = 'top' in inputPlacement ? `${inputPlacement.top}px` : '0';
+    input.style.right = 'right' in inputPlacement ? `${inputPlacement.right}px` : '0';
+    input.style.bottom = 'bottom' in inputPlacement ? `${inputPlacement.bottom}px` : '0';
+    input.style.marginLeft = 'marginLeft' in inputPlacement ? `${inputPlacement.marginLeft}px` : '0';
+    input.style.marginTop = 'marginTop' in inputPlacement ? `${inputPlacement.marginTop}px` : '0';
+    input.style.width = `${inputPlacement.width}px`;
+    input.style.height = `${inputPlacement.height}px`;
+    input.style.gridArea = canvas.style.gridArea;
+    input.style.zIndex = canvas.style.zIndex;
+    input.style.backgroundColor = state.isTextValid ? 'white' : '#eb3434';
+
+    if (!input.parentElement) {
+        const hasFocus = document.activeElement === element;
+        element.appendChild(input);
+        if (hasFocus)
+            input.focus({ preventScroll: true });
+    }
+}
+
+function renderCursor(context) {
+    const element = context.element;
+    const state = context.state;
+
+    if (state.resizableColumn && state.resizableRow)
+        element.style.cursor = 'nwse-resize';
+    else if (state.resizableColumn)
+        element.style.cursor = 'col-resize';
+    else if (state.resizableRow)
+        element.style.cursor = 'row-resize';
+    else
+        element.style.cursor = 'default';
+}
+
+function renderInternal(context) {
+    renderSection(context, 'top', 'left');
+    renderSection(context, 'top', 'center');
+    renderSection(context, 'top', 'right');
+    renderSection(context, 'middle', 'left');
+    renderSection(context, 'middle', 'center');
+    renderSection(context, 'middle', 'right');
+    renderSection(context, 'bottom', 'left');
+    renderSection(context, 'bottom', 'center');
+    renderSection(context, 'bottom', 'right');
+
+    renderInput(context);
+    renderCursor(context);
+}
+
+function renderError(context) {
+    const element = context.element;
+    const error = context.error;
+
+    element.style.backgroundColor = '#9f0000';
+    element.style.color = 'white';
+    element.style.padding = '20px';
+    element.style.display = 'flex';
+    element.style.flexDirection = 'column';
+    element.innerHTML = `
+        <div style="font-size: 16px;">
+            An error occurred while rendering the grid, please contact the support.
+        </div>
+        <div style="font-size: 20px; font-weight: bold; padding: 20px 0;">
+            ${error.message}
+        </div>
+        <div style="font-size: 16px; white-space: pre-wrap;">${error.stack}</div>
+    `;
+}
+
+export default function render(context) {
+    if (!context.error) {
+        try {
+            renderInternal(context);
+        }
+        catch (error) {
+            context.error = error;
+        }
+    }
+
+    if (context.error)
+        renderError(context);
+}

package/src/core/state.js

@@ -0,0 +1,183 @@
+import getEditableCells from "../state-utils/getEditableCells.js";
+import getDataFormatting from "../state-utils/getDataFormatting.js";
+import getInputFormatting from "../state-utils/getInputFormatting.js";
+import getRenderFormatting from "../state-utils/getRenderFormatting.js";
+import getSections from "../state-utils/getSections.js";
+import getEditedCellsAndFilters from "../state-utils/getEditedCellsAndFilters.js";
+import getEdition from "../state-utils/getEdition.js";
+import getSelection from "../state-utils/getSelection.js";
+import getInvoked from "../state-utils/getInvoked.js";
+import { getResolvedColumns, getResolvedRows } from "../state-utils/getResolved.js";
+import { getPlacedColumns, getPlacedRows } from "../state-utils/getPlaced.js";
+import getFormattingRules from "../state-utils/getFormattingRules.js";
+import getFormatResolver from "../state-utils/getFormatResolver.js";
+import { getFilteredColumns as getFilteredColumns, getFilteredRows as getFilteredRows } from "../state-utils/getFiltered.js";
+import getFixedSize from "../state-utils/getFixedSize.js";
+import getTotalSize from "../state-utils/getTotalSize.js";
+import getTextResolver from "../state-utils/getTextResolver.js";
+import getScrollRect from "../state-utils/getScrollRect.js";
+import getHoveredCell from "../state-utils/getHoveredCell.js";
+import getLookup from "../state-utils/getLookup.js";
+import getHighlightedCells from "../state-utils/getHighlightedCells.js";
+import getInputPlacement from "../state-utils/getInputPlacement.js";
+import getIsTextValid from "../state-utils/getIsTextValid.js";
+import { getUnfoldedColumns, getUnfoldedRows } from "../state-utils/getUnfolded.js";
+import getFilteringRules from "../state-utils/getFilteringRules.js";
+import getFilterFormatting from "../state-utils/getFilterFormatting.js";
+import getMeasureFormatting from "../state-utils/getMeasureFormatting.js";
+import { getMeasuredColumns, getMeasuredRows } from "../state-utils/getMeasured.js";
+import getKeys from "../state-utils/getKeys.js";
+import getSortingFormatting from "../state-utils/getSortingFormatting.js";
+import getSortingRules from "../state-utils/getSortingRules.js";
+import { getSortedColumns, getSortedRows } from "../state-utils/getSorted.js";
+import { getResizableColumn, getResizableRow } from "../state-utils/getResizable.js";
+import getResolvedSortBy from "../state-utils/getResolvedSortBy.js";
+import getResolvedFilters from "../state-utils/getResolvedFilters.js";
+import { getActiveColumns } from "../state-utils/getActive.js";
+
+// TODO: write some test to check if the cache is working properly
+function updateStateInternal(context) {
+    console.count('updateState');
+
+    const options = { ...context.localOptions, ...context.externalOptions };
+    const memory = context.memory;
+    const previousState = context.state;
+
+    // TODO: Move to utils
+    function cache(key, func, dependencies) {
+        const previousDependencies = memory[key] && memory[key].dependencies;
+        if (!previousDependencies || dependencies.some((dependency, index) => dependency !== previousDependencies[index]))
+            memory[key] = { value: func(...dependencies), dependencies };
+        return memory[key].value;
+    }
+
+    const devicePixelRatio = window.devicePixelRatio; // TODO: Trigger update on devicePixelRatio change
+    const borderWidth = options.borderWidth / devicePixelRatio;
+    const data = options.data;
+    const text = context.input.value;
+    const sortBy = cache('sortBy', getResolvedSortBy, [options.sortBy]);
+    const filters = cache('filters', getResolvedFilters, [options.filters]);
+    const textResolver = cache('textResolver', getTextResolver, []);
+    const dataFormatting = cache('dataFormatting', getDataFormatting, [options.formatting, options.dataSelector, sortBy]);
+    const editedCellsAndFilters = cache('editedCellsAndFilters', getEditedCellsAndFilters, [options.editedCells, filters]);
+    const edition = cache('edition', getEdition, [editedCellsAndFilters]);
+    const invokedColumns = cache('invokedColumns', getInvoked, [options.columns, data]);
+    const invokedRows = cache('invokedRows', getInvoked, [options.rows, data]);
+    // TODO: throw on duplicate ids
+    // TODO: throw on duplicate row/column filter ids
+    const unfoldedColumns = cache('unfoldedColumns', getUnfoldedColumns, [invokedColumns, data]);
+    const unfoldedRows = cache('unfoldedRows', getUnfoldedRows, [invokedRows, data]);
+    const unfilteredColumns = cache('unfilteredColumns', getResolvedColumns, [unfoldedColumns, options.pinnedLeft, options.pinnedRight, options.columnWidths]);
+    const unfilteredRows = cache('unfilteredRows', getResolvedRows, [unfoldedRows, options.pinnedTop, options.pinnedBottom, options.rowHeights]);
+    const unfilteredColumnKeys = cache('unfilteredColumnKeys', getKeys, [unfilteredColumns]);
+    const unfilteredRowKeys = cache('unfilteredRowKeys', getKeys, [unfilteredRows]);
+
+    // Filtering
+    const filterFormatting = cache('filterFormatting', getFilterFormatting, [dataFormatting]);
+    const filterFormattingRules = cache('filterFormattingRules', getFormattingRules, [filterFormatting]);
+    const filteringRules = cache('filteringRules', getFilteringRules, [options.filtering]);
+    const filteredColumns = cache('filteredColumns', getFilteredColumns, [filters, filteringRules, filterFormattingRules, data, unfilteredRows, unfilteredColumns, edition]);
+    const filteredRows = cache('filteredRows', getFilteredRows, [filters, filteringRules, filterFormattingRules, data, unfilteredRows, unfilteredColumns, edition]);
+
+    // Sorting
+    const sortingFormatting = cache('sortingFormatting', getSortingFormatting, [dataFormatting]);
+    const sortingFormattingRules = cache('sortingFormattingRules', getFormattingRules, [sortingFormatting]);
+    const sortingRules = cache('sortingRules', getSortingRules, [options.sorting]);
+    const sortedColumns = cache('sortedColumns', getSortedColumns, [sortBy, sortingRules, sortingFormattingRules, data, filteredRows, filteredColumns, edition]);
+    const sortedRows = cache('sortedRows', getSortedRows, [sortBy, sortingRules, sortingFormattingRules, data, filteredRows, filteredColumns, edition]);
+
+    // Shaping
+    const shapedColumns = sortedColumns;
+    const shapedRows = sortedRows;
+
+    // Measuring
+    const measureFormatting = cache('measureFormatting', getMeasureFormatting, [dataFormatting]);
+    const measureFormattingRules = cache('measureFormattingRules', getFormattingRules, [measureFormatting]);
+    const measureFormatResolver = cache('measureFormatResolver', getFormatResolver, [measureFormattingRules, data, shapedRows, shapedColumns, edition]);
+    const columnWidthCache = context.columnWidthCache;
+    const rowHeightCache = context.rowHeightCache;
+    const measuredColumns = cache('measuredColumns', getMeasuredColumns, [shapedColumns, shapedRows, textResolver, measureFormatResolver, columnWidthCache, unfilteredColumnKeys]);
+    const measuredRows = cache('measuredRows', getMeasuredRows, [shapedColumns, shapedRows, textResolver, measureFormatResolver, rowHeightCache, unfilteredRowKeys]);
+
+    // Placement
+    const columns = cache('columns', getPlacedColumns, [measuredColumns, devicePixelRatio, borderWidth]);
+    const rows = cache('rows', getPlacedRows, [measuredRows, devicePixelRatio, borderWidth]);
+    const columnLookup = cache('columnLookup', getLookup, [columns]);
+    const rowLookup = cache('rowLookup', getLookup, [rows]);
+    const focusedCell = options.focusedCell;
+    const sections = cache('sections', getSections, [columns, rows]);
+    const selectedCells = options.selectedCells;
+    const fixedSize = cache('fixedSize', getFixedSize, [sections.top.height, sections.bottom.height, sections.left.width, sections.right.width]);
+    const totalSize = cache('totalSize', getTotalSize, [columns, rows]);
+    // TODO: do some proper caching, so that if value is not changed, the old value is returned (currently not working because of scrolling)
+    const hoveredCell = getHoveredCell(context.element, context.mousePosition, rows, columns, fixedSize, totalSize);
+    const resizableColumn = context.resizingColumn || cache('resizableColumn', getResizableColumn, [columns, columnLookup, rowLookup, hoveredCell, context.mousePosition]);
+    const resizableRow = context.resizingRow || cache('resizableRow', getResizableRow, [rows, columnLookup, rowLookup, hoveredCell, context.mousePosition]);
+    const isMouseDown = context.isMouseDown;
+    const isResizing = !!resizableColumn || !!resizableRow;
+    const highlightedCells = cache('highlightedCells', getHighlightedCells, [isMouseDown, isResizing, focusedCell, hoveredCell, columns, rows, columnLookup, rowLookup]);
+    const selection = cache('selection', getSelection, [selectedCells]);
+    const highlight = cache('highlight', getSelection, [highlightedCells]);
+    // TODO: addDataFormattingRules and addRenderFormattingRules should remove unnecessary rules
+    const renderFormatting = cache('renderFormatting', getRenderFormatting, [dataFormatting, hoveredCell, focusedCell, selection, highlight, edition, resizableColumn, resizableRow]);
+    const renderFormattingRules = cache('renderFormattingRules', getFormattingRules, [renderFormatting]);
+    const renderFormatResolver = cache('renderFormatResolver', getFormatResolver, [renderFormattingRules, data, rows, columns, edition]);
+    const inputFormatting = cache('inputFormatting', getInputFormatting, [dataFormatting]);
+    const inputFormattingRules = cache('inputFormattingRules', getFormattingRules, [inputFormatting]);
+    const inputFormatResolver = cache('inputFormatResolver', getFormatResolver, [inputFormattingRules, data, rows, columns, edition]);
+    const editableCells = cache('editableCells', getEditableCells, [selectedCells, inputFormatResolver, columnLookup, rowLookup]);
+    const inputPlacement = cache('inputPlacement', getInputPlacement, [editableCells, focusedCell, columnLookup, rowLookup, sections]);
+    const isTextValid = cache('isTextValid', getIsTextValid, [text, editableCells]);
+
+    // cache result, but not call
+    const scrollRect = getScrollRect(previousState?.scrollRect, totalSize, fixedSize, context.element);
+
+    // callbacks
+    cache('activeColumns', getActiveColumns, [columns, options.onActiveColumnsChange]);
+    cache('activeRows', getActiveColumns, [rows, options.onActiveRowsChange]);
+
+    context.state = {
+        options,
+        devicePixelRatio,
+        borderWidth,
+        data,
+        dataFormatting,
+        edition,
+        filteredColumns,
+        filteredRows,
+        columns,
+        rows,
+        sections,
+        selectedCells,
+        selection,
+        highlight,
+        hoveredCell,
+        focusedCell,
+        renderFormatting,
+        renderFormatResolver,
+        inputFormatting,
+        inputFormatResolver,
+        fixedSize,
+        totalSize,
+        textResolver,
+        scrollRect,
+        highlightedCells,
+        inputPlacement,
+        columnLookup,
+        rowLookup,
+        text,
+        isTextValid,
+        resizableColumn,
+        resizableRow,
+    };
+}
+
+export default function updateState(context) {
+    if (!context.error) {
+        try {
+            updateStateInternal(context);
+        } catch (error) {
+            context.error = error;
+        }
+    }
+}

package/src/core-utils/defaults.js

@@ -0,0 +1,4 @@
+const defaultFont = '12px Calibri';
+const defaultPadding = { top: 2, right: 5, bottom: 2, left: 5 };
+
+export { defaultFont, defaultPadding };

package/src/core-utils/rect.js

@@ -0,0 +1,49 @@
+export function contains(bounds, rect) {
+    return (
+        rect.top >= bounds.top &&
+        rect.left >= bounds.left &&
+        rect.top + rect.height <= bounds.top + bounds.height &&
+        rect.left + rect.width <= bounds.left + bounds.width
+    );
+}
+
+export function clip(bounds, rect) {
+    const newRect = {
+        top: Math.max(bounds.top, rect.top),
+        left: Math.max(bounds.left, rect.left),
+        width: Math.min(bounds.left + bounds.width, rect.left + rect.width) - Math.max(bounds.left, rect.left),
+        height: Math.min(bounds.top + bounds.height, rect.top + rect.height) - Math.max(bounds.top, rect.top)
+    };
+
+    if (newRect.width >= 0 && newRect.height >= 0)
+        return newRect;
+
+    return {
+        top: bounds.top,
+        left: bounds.left,
+        width: 0,
+        height: 0
+    }
+}
+
+export function expand(rect, margin) {
+    return {
+        top: rect.top - margin,
+        left: rect.left - margin,
+        width: rect.width + margin * 2,
+        height: rect.height + margin * 2
+    };
+}
+
+export function area(rect) {
+    return rect.width * rect.height;
+}
+
+export function subtract(rect, margin) {
+    return {
+        top: rect.top,
+        left: rect.left,
+        width: Math.max(0, rect.width - margin.left - margin.right),
+        height: Math.max(0, rect.height - margin.top - margin.bottom)
+    };
+}