js-spread-grid 0.0.1

package/src/state-utils/getClipboardData.js

@@ -0,0 +1,53 @@
+import stringifyId from "../core-utils/stringifyId.js";
+import Selection from "../types/Selection.js";
+
+export default function getClipboardData(selectedCells, columns, rows, formatResolver) {
+    const columnLookup = new Map(columns.map(column => [column.key, column]));
+    const rowLookup = new Map(rows.map(row => [row.key, row]));
+    const selectedCellKeys = selectedCells.map(cell => ({
+        columnKey: stringifyId(cell.columnId),
+        rowKey: stringifyId(cell.rowId)
+    })).filter(cell => columnLookup.has(cell.columnKey) && rowLookup.has(cell.rowKey));
+    const selectedColumns = new Set(selectedCellKeys.map(cell => cell.columnKey));
+    const selectedRows = new Set(selectedCellKeys.map(cell => cell.rowKey));
+
+    if (selectedCellKeys.length === 0)
+        return '';
+
+    const selection = new Selection(selectedCells);
+    const minColumnIndex = Math.min(...selectedCellKeys.map(cell => columnLookup.get(cell.columnKey).index));
+    const maxColumnIndex = Math.max(...selectedCellKeys.map(cell => columnLookup.get(cell.columnKey).index));
+    const minRowIndex = Math.min(...selectedCellKeys.map(cell => rowLookup.get(cell.rowKey).index));
+    const maxRowIndex = Math.max(...selectedCellKeys.map(cell => rowLookup.get(cell.rowKey).index));
+
+    const stringBuilder = [];
+
+    for (let rowIndex = minRowIndex; rowIndex <= maxRowIndex; rowIndex++) {
+        const row = rows[rowIndex];
+        const rowKey = row.key;
+
+        if (!selectedRows.has(rowKey))
+            continue;
+
+        for (let columnIndex = minColumnIndex; columnIndex <= maxColumnIndex; columnIndex++) {
+            const column = columns[columnIndex];
+            const columnKey = column.key;
+
+            if (!selectedColumns.has(columnKey))
+                continue;
+
+            if (selection.isKeySelected(rowKey, columnKey)) {
+                const cellData = formatResolver.resolve(row, column).text;
+                stringBuilder.push(cellData);
+            }
+
+            if (columnIndex < maxColumnIndex)
+                stringBuilder.push('\t');
+        }
+
+        if (rowIndex < maxRowIndex)
+            stringBuilder.push('\n');
+    }
+
+    return stringBuilder.join('');
+}

package/src/state-utils/getColumnIndex.js

@@ -0,0 +1,25 @@
+export default function getColumnIndex(columns, x) {
+    if (columns.length === 0)
+        return -1;
+    if (x < columns[0].leftWithBorder)
+        return -1;
+    if (x > columns[columns.length - 1].rightWithBorder)
+        return -1;
+
+    let iterA = 0;
+    let iterC = columns.length - 1;
+
+    while (iterA <= iterC) {
+        const iterB = Math.floor((iterA + iterC) / 2);
+
+        if (x < columns[iterB].leftWithBorder)
+            iterC = iterB - 1;
+        else if (x > columns[iterB].rightWithBorder)
+            iterA = iterB + 1;
+
+        else
+            return iterB;
+    }
+
+    return -1;
+}

package/src/state-utils/getCombinedCells.js

@@ -0,0 +1,6 @@
+import Selection from "../types/Selection.js";
+
+export default function getCombinedCells(previousCells, newCells) {
+    const selection = new Selection(newCells);
+    return [...newCells, ...previousCells.filter(cell => !selection.isIdSelected(cell.rowId, cell.columnId))];
+}

package/src/state-utils/getDataFormatting.js

@@ -0,0 +1,46 @@
+export default function getDataFormatting(formatting, dataSelector, sortBy) {
+    return [
+        {
+            column: { match: 'DATA' },
+            row: { match: 'HEADER' },
+            value: ({ column }) => column.header === undefined ? column.id : column.header
+        },
+        {
+            column: { match: 'HEADER' },
+            row: { match: 'DATA' },
+            value: ({ row }) => row.header === undefined ? row.id : row.header
+        },
+        {
+            column: { match: 'HEADER' },
+            row: { match: 'SPECIAL' },
+            value: ''
+        },
+        {
+            column: { match: 'SPECIAL' },
+            row: { match: 'HEADER' },
+            value: ''
+        },
+        ...sortBy.map(({ columnId, rowId, direction }, index) => ({
+            column: { id: columnId },
+            row: { id: rowId },
+            text: ({ column }) => `${sortBy.length > 1 ? index + 1 : ''}${direction === 'ASC' ? '⇣' : '⇡'} ${column.header}`
+        })),
+        {
+            column: { match: 'ANY' },
+            row: { match: 'FILTER' },
+            value: ({ newValue }) => newValue || '',
+            text: ({ newValue }) => newValue || 'Search...', // TODO: Move to render formatting?
+            edit: {
+                validate: () => true,
+                parse: ({ string }) => string,
+                autoCommit: true
+            },
+        },
+        {
+            column: { match: 'DATA' },
+            row: { match: 'DATA' },
+            value: dataSelector
+        },
+        ...formatting
+    ];
+}

package/src/state-utils/getEditableCells.js

@@ -0,0 +1,23 @@
+import stringifyId from "../core-utils/stringifyId.js";
+import getCellType from "./getCellType.js";
+
+export default function getEditableCells(selectedCells, formatResolver, columnLookup, rowLookup) {
+    return selectedCells.map(cell => {
+        const columnKey = stringifyId(cell.columnId);
+        const rowKey = stringifyId(cell.rowId);
+
+        if (!columnLookup.has(columnKey))
+            return null;
+        if (!rowLookup.has(rowKey))
+            return null;
+
+        const column = columnLookup.get(columnKey);
+        const row = rowLookup.get(rowKey);
+
+        return {
+            edit: formatResolver.resolve(row, column).edit,
+            cell: cell,
+            type: getCellType(column, row)
+        }
+    }).filter(cell => cell?.edit);
+}

package/src/state-utils/getEditedCellsAndFilters.js

@@ -0,0 +1,4 @@
+// TODO: Move
+export default function getEditedCellsAndFilters(editedCells, filters) {
+    return [...editedCells, ...filters.map(filter => ({ columnId: filter.columnId, rowId: filter.rowId, value: filter.expression }))];
+}

package/src/state-utils/getEdition.js

@@ -0,0 +1,6 @@
+import Edition from "../types/Edition.js";
+
+// TODO: Move
+export default function getEdition(editedCellsAndFilters) {
+    return new Edition(editedCellsAndFilters);
+}

package/src/state-utils/getFilterFormatting.js

@@ -0,0 +1,3 @@
+export default function getFilterFormatting(formatting) {
+    return formatting;
+}

package/src/state-utils/getFiltered.js

@@ -0,0 +1,61 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+function getFilterLookup(filters, primaryKey, secondaryKey) {
+    const filterLookup = new Map();
+    for (const cell of filters) {
+        const primary = stringifyId(cell[primaryKey]);
+        const secondary = stringifyId(cell[secondaryKey]);
+
+        if (!filterLookup.has(primary))
+            filterLookup.set(primary, new Map());
+
+        filterLookup.get(primary).set(secondary, cell.expression);
+    }
+    return filterLookup;
+}
+
+export function getFilteredRows(filters, filteringRules, formattingRules, data, rows, columns, edition) {
+    if (filters.length === 0)
+        return rows;
+
+    const filterLookup = getFilterLookup(filters, 'columnId', 'rowId');
+    const filteredColumns = columns.filter(column => column.type !== 'FILTER' && filterLookup.has(column.key));
+
+    if (filteredColumns.length === 0)
+        return rows;
+
+    return rows.filter(row => {
+        for (const column of filteredColumns) {
+            const cell = formattingRules.resolve(data, rows, columns, row, column, edition);
+            const columnFilters = filterLookup.get(column.key);
+            const visible = filteringRules.resolve(data, rows, columns, row, column, cell.value, cell.text, columnFilters);
+
+            if (!visible)
+                return false;
+        }
+        return true;
+    });
+}
+
+export function getFilteredColumns(filters, filteringRules, formattingRules, data, rows, columns, edition) {
+    if (filters.length === 0)
+        return columns;
+
+    const filterLookup = getFilterLookup(filters, 'rowId', 'columnId');
+    const filteredRows = rows.filter(row => row.type !== 'FILTER' && filterLookup.has(row.key));
+
+    if (filteredRows.length === 0)
+        return columns;
+
+    return columns.filter(column => {
+        for (const row of filteredRows) {
+            const cell = formattingRules.resolve(data, rows, columns, row, column, edition);
+            const rowFilters = filterLookup.get(row.key);
+            const visible = filteringRules.resolve(data, rows, columns, row, column, cell.value, cell.text, rowFilters);
+
+            if (!visible)
+                return false;
+        }
+        return true;
+    });
+}

package/src/state-utils/getFilteringRules.js

@@ -0,0 +1,5 @@
+import FilteringRules from "../types/FilteringRules.js";
+
+export default function getFilteringRules(filtering) {
+    return new FilteringRules(filtering);
+}

package/src/state-utils/getFixedSize.js

@@ -0,0 +1,8 @@
+export default function getFixedSize(top, bottom, left, right) {
+    return {
+        top: top,
+        bottom: bottom,
+        left: left,
+        right: right
+    };
+}

package/src/state-utils/getFormatResolver.js

@@ -0,0 +1,5 @@
+import FormatResolver from "../types/FormatResolver.js";
+
+export default function getFormatResolver(formattingRules, data, rows, columns, edition) {
+    return new FormatResolver(formattingRules, data, rows, columns, edition);
+}

package/src/state-utils/getFormattingRules.js

@@ -0,0 +1,5 @@
+import FormattingRules from "../types/FormattingRules.js";
+
+export default function getFormattingRules(dataFormatting) {
+    return new FormattingRules(dataFormatting);
+}

package/src/state-utils/getHighlightedCells.js

@@ -0,0 +1,40 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+export default function getHighlightedCells(isMouseDown, isResizing, focusedCell, hoveredCell, columns, rows, columnLookup, rowLookup) {
+    if (!isMouseDown)
+        return [];
+    if (isResizing)
+        return [];
+    if (!hoveredCell)
+        return [];
+    if (!focusedCell)
+        return [];
+
+    const focusedColumnKey = stringifyId(focusedCell.columnId);
+    const focusedRowKey = stringifyId(focusedCell.rowId);
+    const hoveredColumnKey = stringifyId(hoveredCell.columnId);
+    const hoveredRowKey = stringifyId(hoveredCell.rowId);
+
+    if (!columnLookup.has(focusedColumnKey))
+        return [];
+    if (!rowLookup.has(focusedRowKey))
+        return [];
+    if (!columnLookup.has(hoveredColumnKey))
+        return [];
+    if (!rowLookup.has(hoveredRowKey))
+        return [];
+
+    const minColumnIndex = Math.min(columnLookup.get(focusedColumnKey).index, columnLookup.get(hoveredColumnKey).index);
+    const maxColumnIndex = Math.max(columnLookup.get(focusedColumnKey).index, columnLookup.get(hoveredColumnKey).index);
+    const minRowIndex = Math.min(rowLookup.get(focusedRowKey).index, rowLookup.get(hoveredRowKey).index);
+    const maxRowIndex = Math.max(rowLookup.get(focusedRowKey).index, rowLookup.get(hoveredRowKey).index);
+
+    return columns.slice(minColumnIndex, maxColumnIndex + 1).flatMap(column => {
+        return rows.slice(minRowIndex, maxRowIndex + 1).map(row => {
+            return {
+                rowId: row.id,
+                columnId: column.id
+            };
+        });
+    });
+}

package/src/state-utils/getHoveredCell.js

@@ -0,0 +1,43 @@
+import getColumnIndex from "./getColumnIndex.js";
+import getRowIndex from "./getRowIndex.js";
+
+export default function getHoveredCell(element, mousePosition, rows, columns, fixedSize, totalSize) {
+    // TODO: sometimes mousePosition is outside of bounds and it crashes the click events
+
+    if (!mousePosition)
+        return null;
+    if (mousePosition.x < 0 || mousePosition.y < 0 || mousePosition.x > totalSize.width || mousePosition.y > totalSize.height)
+        return null;
+
+    const scrollOffset = {
+        left: element.scrollLeft,
+        top: element.scrollTop
+    };
+
+    const clientSize = {
+        width: element.clientWidth,
+        height: element.clientHeight
+    };
+
+    const x = mousePosition.x <= fixedSize.left
+        ? mousePosition.x
+        : mousePosition.x >= clientSize.width - fixedSize.right
+            ? totalSize.width - clientSize.width + mousePosition.x
+            : mousePosition.x + scrollOffset.left;
+    const y = mousePosition.y <= fixedSize.top
+        ? mousePosition.y
+        : mousePosition.y >= clientSize.height - fixedSize.bottom
+            ? totalSize.height - clientSize.height + mousePosition.y
+            : mousePosition.y + scrollOffset.top;
+
+    const hoverRowIndex = getRowIndex(rows, y);
+    const hoverColumnIndex = getColumnIndex(columns, x);
+
+    if (hoverRowIndex === -1 || hoverColumnIndex === -1)
+        return null;
+
+    return {
+        rowId: rows[hoverRowIndex].id,
+        columnId: columns[hoverColumnIndex].id
+    };
+}

package/src/state-utils/getInputFormatting.js

@@ -0,0 +1,3 @@
+export default function getInputFormatting(formatting) {
+    return formatting;
+}

package/src/state-utils/getInputPlacement.js

@@ -0,0 +1,51 @@
+import stringifyId from "../core-utils/stringifyId.js";
+import getCellSection from "./getCellSection.js";
+
+export default function getInputPlacement(editableCells, focusedCell, columnLookup, rowLookup, sections) {
+    if (!focusedCell)
+        return null;
+
+    const focusedColumnKey = stringifyId(focusedCell.columnId);
+    const focusedRowKey = stringifyId(focusedCell.rowId);
+
+    if (!columnLookup.has(focusedColumnKey))
+        return null;
+    if (!rowLookup.has(focusedRowKey))
+        return null;
+
+    const column = columnLookup.get(focusedColumnKey);
+    const row = rowLookup.get(focusedRowKey);
+
+    if (editableCells.length === 0)
+        return null;
+
+    const position = {
+        width: column.width,
+        height: row.height,
+        section: getCellSection(column, row)
+    };
+
+    switch (row.pinned) {
+        case "BEGIN":
+            position.top = row.top;
+            break;
+        case "END":
+            position.bottom = sections.top.height + sections.middle.height + sections.bottom.height - row.top - row.height;
+            break;
+        default:
+            position.marginTop = row.top - sections.top.height;
+    }
+
+    switch (column.pinned) {
+        case "BEGIN":
+            position.left = column.left;
+            break;
+        case "END":
+            position.right = sections.left.width + sections.center.width + sections.right.width - column.left - column.width;
+            break;
+        default:
+            position.marginLeft = column.left - sections.left.width;
+    }
+
+    return position;
+}

package/src/state-utils/getInvoked.js

@@ -0,0 +1,5 @@
+export default function getInvoked(columnsOrRows, data) {
+    return typeof columnsOrRows === 'function'
+        ? columnsOrRows(data)
+        : columnsOrRows;
+}

package/src/state-utils/getIsTextValid.js

@@ -0,0 +1,3 @@
+export default function getIsTextValid(text, editableCells) {
+    return editableCells.every(cell => cell.edit.validate({ string: text }));
+}

package/src/state-utils/getKeys.js

@@ -0,0 +1,3 @@
+export default function getKeys(entries) {
+    return new Set(entries.map(entry => entry.key));
+}

package/src/state-utils/getLookup.js

@@ -0,0 +1,3 @@
+export default function getLookup(elements) {
+    return elements.reduce((lookup, element) => lookup.set(element.key, element), new Map());
+}

package/src/state-utils/getMeasureFormatting.js

@@ -0,0 +1,3 @@
+export default function getMeasureFormatting(formatting) {
+    return formatting;
+}

package/src/state-utils/getMeasured.js

@@ -0,0 +1,113 @@
+import { defaultPadding } from "../core-utils/defaults.js";
+
+// TODO: add expand and expand-data
+
+export function getMeasuredColumns(columns, rows, textResolver, formatResolver, measuringCache, presentKeys) {
+    if (columns.every(column => typeof column.width === 'number'))
+        return columns;
+
+    const measureColumn = column => {
+        const requestedWidth = 'width' in column ? column.width : 'fit-once';
+
+        if (typeof requestedWidth === 'number')
+            return requestedWidth;
+
+        if (measuringCache.has(column.key)) {
+            const cached = measuringCache.get(column.key);
+
+            if (requestedWidth === 'fit-once' && !cached.dataOnly)
+                return cached.width;
+            if (requestedWidth === 'fit-data-once' && cached.dataOnly)
+                return cached.width;
+        }
+
+        let width = 0;
+        for (const row of rows) {
+            if (row.type !== 'DATA' && requestedWidth === 'fit-data-once')
+                continue;
+            if (row.type !== 'DATA' && requestedWidth === 'fit-data')
+                continue;
+
+            const cell = formatResolver.resolve(row, column);
+            const text = cell.text;
+            const font = cell.font;
+            const padding = cell.padding.left + cell.padding.right;
+
+            const cellWidth = textResolver.measureWidth(text, font) + padding;
+
+            width = Math.max(width, cellWidth);
+        }
+
+        measuringCache.set(column.key, {
+            width,
+            dataOnly: requestedWidth === 'fit-data-once'
+        });
+
+        return width;
+    }
+
+    for (const key of measuringCache.keys()) {
+        if (!presentKeys.has(key))
+            measuringCache.delete(key);
+    }
+
+    return columns.map(column => ({
+        ...column,
+        width: measureColumn(column)
+    }));
+}
+
+export function getMeasuredRows(columns, rows, textResolver, formatResolver, measuringCache, presentKeys) {
+    if (rows.every(row => typeof row.height === 'number'))
+        return rows;
+
+    const measureRow = row => {
+        const requestedHeight = 'height' in row ? row.height : 'fit-once';
+
+        if (typeof requestedHeight === 'number')
+            return requestedHeight;
+
+        if (measuringCache.has(row.key)) {
+            const cached = measuringCache.get(row.key);
+
+            if (requestedHeight === 'fit-once' && !cached.dataOnly)
+                return cached.height;
+            if (requestedHeight === 'fit-data-once' && cached.dataOnly)
+                return cached.height;
+        }
+
+        let height = 0;
+        for (const column of columns) {
+            if (column.type !== 'DATA' && requestedHeight === 'fit-data-once')
+                continue;
+            if (column.type !== 'DATA' && requestedHeight === 'fit-data')
+                continue;
+
+            const cell = formatResolver.resolve(row, column);
+            const text = cell.text;
+            const font = cell.font;
+            const padding = cell.padding.top + cell.padding.bottom;
+
+            const cellHeight = textResolver.measureHeight(text, font) + padding;
+
+            height = Math.max(height, cellHeight);
+        }
+
+        measuringCache.set(row.key, {
+            height,
+            dataOnly: requestedHeight === 'fit-data-once'
+        });
+
+        return height;
+    }
+
+    for (const key of measuringCache.keys()) {
+        if (!presentKeys.has(key))
+            measuringCache.delete(key);
+    }
+
+    return rows.map(row => ({
+        ...row,
+        height: measureRow(row)
+    }));
+}

package/src/state-utils/getMousePosition.js

@@ -0,0 +1,8 @@
+export default function getMousePosition(event) {
+    const element = event.currentTarget;
+    const rect = element.getBoundingClientRect();
+    return {
+        x: event.clientX - rect.left,
+        y: event.clientY - rect.top
+    };
+}

package/src/state-utils/getNewSortBy.js

@@ -0,0 +1,20 @@
+import stringifyId from '../core-utils/stringifyId.js';
+
+export default function getNewSortBy(sortBy, column, row, ctrlKey) {
+    // TODO: better support for multi-row sorting
+
+    function isCurrentRule(rule) {
+        return column.key === stringifyId(rule.columnId || 'HEADER') && row.key === stringifyId(rule.rowId || 'HEADER');
+    }
+
+    const directionLoop = ['ASC', 'DESC', undefined];
+    const currentRule = sortBy.find(isCurrentRule);
+    const directionIndex = directionLoop.indexOf(currentRule?.direction);
+    const newDirection = directionLoop[(directionIndex + 1) % directionLoop.length];
+    const isLastRule = sortBy.indexOf(currentRule) === sortBy.length - 1;
+    const shouldKeepOld = ctrlKey && (isLastRule || !currentRule);
+    const rulesToKeep = shouldKeepOld ? sortBy.filter(rule => !isCurrentRule(rule)) : [];
+    const newRules = newDirection ? [{ columnId: column.id, rowId: row.id, direction: newDirection }] : [];
+
+    return [...rulesToKeep, ...newRules];
+}

package/src/state-utils/getPinned.js

@@ -0,0 +1,8 @@
+// TODO: Move
+export default function getPinned(index, length, pinnedBegin, pinnedEnd) {
+    if (index < pinnedBegin)
+        return "BEGIN";
+    if (index >= length - pinnedEnd)
+        return "END";
+    return undefined;
+}

package/src/state-utils/getPlaced.js

@@ -0,0 +1,45 @@
+import roundToPixels from "../core-utils/roundToPixels.js";
+
+export function getPlacedColumns(columns, devicePixelRatio, borderWidth) {
+    let left = borderWidth;
+
+    return columns.map((column, index) => {
+        const assignedWidth = 'width' in column ? column.width : 100;
+        const width = roundToPixels(assignedWidth, devicePixelRatio);
+        const newColumn = {
+            ...column,
+            index: index,
+            width: width,
+            leftWithBorder: left - borderWidth,
+            left: left,
+            right: left + width,
+            rightWithBorder: left + width + borderWidth
+        };
+
+        left += newColumn.width + borderWidth;
+
+        return newColumn;
+    });
+}
+
+export function getPlacedRows(rows, devicePixelRatio, borderWidth) {
+    let top = borderWidth;
+
+    return rows.map((row, index) => {
+        const assignedHeight = 'height' in row ? row.height : 20;
+        const height = roundToPixels(assignedHeight, devicePixelRatio);
+        const newRow = {
+            ...row,
+            index: index,
+            height: height,
+            topWithBorder: top - borderWidth,
+            top: top,
+            bottom: top + height,
+            bottomWithBorder: top + height + borderWidth
+        };
+
+        top += newRow.height + borderWidth;
+
+        return newRow;
+    });
+}

package/src/state-utils/getReducedCells.js

@@ -0,0 +1,6 @@
+import Selection from "../types/Selection.js";
+
+export default function getReducedCells(previousCells, cellsToRemove) {
+    const selection = new Selection(cellsToRemove);
+    return previousCells.filter(cell => !selection.isIdSelected(cell.rowId, cell.columnId));
+}