js-spread-grid 0.0.1

package/src/state-utils/getRenderFormatting.js

@@ -0,0 +1,122 @@
+import stringifyId from '../core-utils/stringifyId.js';
+
+function getHighlightColor(baseColor, isStrong) {
+    if (isStrong)
+        return baseColor + '99';
+    else
+        return baseColor + '33';
+}
+
+export default function getRenderFormatting(formatting, hoveredCell, focusedCell, selection, highlight, edition, resizableColumn, resizableRow) {
+    const focusedColumnKey = focusedCell ? stringifyId(focusedCell.columnId) : null;
+    const focusedRowKey = focusedCell ? stringifyId(focusedCell.rowId) : null;
+    const isResizingColumn = resizableColumn !== null;
+    const isResizingRow = resizableRow !== null;
+    const isResizing = isResizingColumn || isResizingRow;
+
+    const isSelected = (rows, columns, rowIndex, columnIndex) => {
+        if (rowIndex < 0 || rowIndex >= rows.length)
+            return false;
+        if (columnIndex < 0 || columnIndex >= columns.length)
+            return false;
+
+        const rowKey = rows[rowIndex].key;
+        const columnKey = columns[columnIndex].key;
+
+        return selection.isKeySelected(rowKey, columnKey);
+    };
+
+    const optional = (condition, style) => {
+        if (condition)
+            return [style];
+        else
+            return [];
+    }
+
+    return [
+        {
+            column: { match: 'ANY' },
+            row: { match: 'FILTER' },
+            style: ({ newValue }) => ({ background: '#FBFBFB', foreground: newValue ? 'black' : '#cccccc', border: { width: 1, color: 'gray' } })
+        },
+        {
+            column: { match: 'ANY' },
+            row: { match: 'HEADER' },
+            style: { background: '#F5F5F5', border: { width: 1, color: 'gray' } }
+        },
+        {
+            column: { match: 'HEADER' },
+            row: { match: 'ANY' },
+            style: { background: '#F5F5F5', border: { width: 1, color: 'gray' } }
+        },
+        {
+            column: { match: 'HEADER' },
+            row: { match: 'HEADER' },
+            style: { background: '#E0E0E0' }
+        },
+        ...formatting,
+        // TODO: optionally re-enable
+        // ...optional(hoveredCell && !isResizingColumn, {
+        //     column: { id: hoveredCell?.columnId },
+        //     row: { match: 'ANY' },
+        //     style: { highlight: '#81948133' },
+        // }),
+        ...optional(hoveredCell && !isResizingRow, {
+            column: { match: 'ANY' },
+            row: { id: hoveredCell?.rowId },
+            style: { highlight: '#81948133' },
+        }),
+        ...optional(hoveredCell && !isResizing, {
+            column: { id: hoveredCell?.columnId },
+            row: { id: hoveredCell?.rowId },
+            style: { highlight: '#81948188' },
+        }),
+        {
+            column: { match: 'ANY' },
+            row: { match: 'ANY' },
+            condition: ({ rows, columns, row, column }) => isSelected(rows, columns, row.index, column.index),
+            style: ({ rows, columns, row, column, edit }) => ({
+                ...(!isSelected(rows, columns, row.index - 1, column.index) ? { borderTop: { width: 3, color: '#596959', index: Number.MAX_SAFE_INTEGER } } : {}),
+                ...(!isSelected(rows, columns, row.index + 1, column.index) ? { borderBottom: { width: 3, color: '#596959', index: Number.MAX_SAFE_INTEGER } } : {}),
+                ...(!isSelected(rows, columns, row.index, column.index - 1) ? { borderLeft: { width: 3, color: '#596959', index: Number.MAX_SAFE_INTEGER } } : {}),
+                ...(!isSelected(rows, columns, row.index, column.index + 1) ? { borderRight: { width: 3, color: '#596959', index: Number.MAX_SAFE_INTEGER } } : {}),
+                highlight: getHighlightColor(edit ? '#798d9c' : '#819481', focusedColumnKey !== column.key || focusedRowKey !== row.key)
+            }),
+        },
+        {
+            column: { match: 'ANY' },
+            row: { match: 'ANY' },
+            condition: ({ row, column }) => highlight.isKeySelected(row.key, column.key),
+            style: ({ row, column }) => ({
+                highlight: getHighlightColor('#93a8b8', focusedColumnKey !== column.key || focusedRowKey !== row.key)
+            })
+        },
+        ...optional(focusedCell, {
+            column: { id: focusedCell?.columnId },
+            row: { id: focusedCell?.rowId },
+            style: { highlight: '#ffffffaa' }
+        }),
+        {
+            column: { match: 'ANY' },
+            row: { match: 'ANY' },
+            condition: ({ edit }) => edit,
+            style: { corner: '#77777720' },
+        },
+        {
+            column: { match: 'ANY' },
+            row: { match: 'ANY' },
+            condition: ({ row, column }) => edition.hasValueByKey(row.key, column.key),
+            style: { corner: 'darkgreen' },
+        },
+        ...optional(resizableColumn, {
+            column: { id: resizableColumn },
+            row: { match: 'HEADER' },
+            style: { borderRight: { width: 5, color: 'cornflowerblue' } }
+        }),
+        ...optional(resizableRow, {
+            column: { match: 'HEADER' },
+            row: { id: resizableRow },
+            style: { borderBottom: { width: 5, color: 'cornflowerblue' } }
+        }),
+    ];
+}

package/src/state-utils/getResizable.js

@@ -0,0 +1,49 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+const grabOffset = 5;
+
+// TODO: not working when scrolled
+
+export function getResizableColumn(columns, columnLookup, rowLookup, hoveredCell, mousePosition) {
+    if (!hoveredCell)
+        return null;
+
+    const column = columnLookup.get(stringifyId(hoveredCell.columnId));
+    const row = rowLookup.get(stringifyId(hoveredCell.rowId));
+    const x = mousePosition.x;
+
+    if (row.type !== 'HEADER')
+        return null;
+
+    if (x >= column.right - grabOffset && x <= column.right + grabOffset)
+        return column.id;
+
+    if (column.index === 0)
+        return null;
+    if (x < column.left - grabOffset || x > column.left + grabOffset)
+        return null;
+
+    return columns[column.index - 1].id;
+}
+
+export function getResizableRow(rows, columnLookup, rowLookup, hoveredCell, mousePosition) {
+    if (!hoveredCell)
+        return null;
+
+    const column = columnLookup.get(stringifyId(hoveredCell.columnId));
+    const row = rowLookup.get(stringifyId(hoveredCell.rowId));
+    const y = mousePosition.y;
+
+    if (column.type !== 'HEADER')
+        return null;
+
+    if (y >= row.bottom - grabOffset && y <= row.bottom + grabOffset)
+        return row.id;
+
+    if (row.index === 0)
+        return null;
+    if (y < row.top - grabOffset || y > row.top + grabOffset)
+        return null;
+
+    return rows[row.index - 1].id;
+}

package/src/state-utils/getResolved.js

@@ -0,0 +1,42 @@
+import stringifyId from "../core-utils/stringifyId.js";
+import getPinned from "./getPinned.js";
+
+function getResolved(elements, pinnedBegin, pinnedEnd) {
+    return elements.map((element, index) => {
+        const id = 'id' in element ? element.id : element.type;
+        return {
+            ...element,
+            id: id,
+            type: element.type || "DATA",
+            index: index,
+            key: stringifyId(id),
+            pinned: getPinned(index, elements.length, pinnedBegin, pinnedEnd),
+            header: 'header' in element ? element.header : id,
+            labels: element.labels || []
+        };
+    });
+}
+
+export function getResolvedColumns(columns, pinnedBegin, pinnedEnd, columnWidths) {
+    const widthsLookup = new Map(columnWidths.map(({ columnId, width }) => [stringifyId(columnId), width]));
+    const resolvedColumns = getResolved(columns, pinnedBegin, pinnedEnd);
+
+    return resolvedColumns.map(column => ({
+        ...column,
+        width: widthsLookup.has(column.key)
+            ? widthsLookup.get(column.key)
+            : column.width
+    }));
+}
+
+export function getResolvedRows(rows, pinnedBegin, pinnedEnd, rowHeights) {
+    const heightsLookup = new Map(rowHeights.map(({ rowId, height }) => [stringifyId(rowId), height]));
+    const resolvedRows = getResolved(rows, pinnedBegin, pinnedEnd);
+
+    return resolvedRows.map(row => ({
+        ...row,
+        height: heightsLookup.has(row.key)
+            ? heightsLookup.get(row.key)
+            : row.height
+    }));
+}

package/src/state-utils/getResolvedFilters.js

@@ -0,0 +1,7 @@
+export default function getResolvedFilters(filters) {
+    return filters.map(filter => ({
+        columnId: 'columnId' in filter ? filter.columnId : 'FILTER',
+        rowId: 'rowId' in filter ? filter.rowId : 'FILTER',
+        expression: filter.expression
+    }));
+}

package/src/state-utils/getResolvedSortBy.js

@@ -0,0 +1,7 @@
+export default function getResolvedSortBy(sortBy) {
+    return sortBy.map(sort => ({
+        columnId: 'columnId' in sort ? sort.columnId : 'HEADER',
+        rowId: 'rowId' in sort ? sort.rowId : 'HEADER',
+        direction: sort.direction
+    }));
+}

package/src/state-utils/getRowIndex.js

@@ -0,0 +1,25 @@
+export default function getRowIndex(rows, y) {
+    if (rows.length === 0)
+        return -1;
+    if (y < rows[0].topWithBorder)
+        return -1;
+    if (y > rows[rows.length - 1].bottomWithBorder)
+        return -1;
+
+    let iterA = 0;
+    let iterC = rows.length - 1;
+
+    while (iterA <= iterC) {
+        const iterB = Math.floor((iterA + iterC) / 2);
+
+        if (y < rows[iterB].topWithBorder)
+            iterC = iterB - 1;
+        else if (y > rows[iterB].bottomWithBorder)
+            iterA = iterB + 1;
+
+        else
+            return iterB;
+    }
+
+    return -1;
+}

package/src/state-utils/getScrollRect.js

@@ -0,0 +1,41 @@
+import { area, clip, contains, expand, subtract } from "../core-utils/rect.js";
+
+const requiredMargin = 200;
+const preloadedMargin = 400;
+const emptyRect = {
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0
+};
+
+export default function getScrollRect(previous, totalSize, fixedSize, element) {
+    // TODO: Is it optimal to use getBoundingClientRect()?
+    const size = {
+        width: element.getBoundingClientRect().width,
+        height: element.getBoundingClientRect().height
+    };
+    const scrollOffset = {
+        left: element.scrollLeft,
+        top: element.scrollTop
+    };
+
+    const prevScrollRect = previous || emptyRect;
+
+    const totalRect = { left: 0, top: 0, ...totalSize };
+    const bounds = subtract(totalRect, fixedSize);
+    const scrollRect = subtract({ ...scrollOffset, ...size }, fixedSize);
+    const requiredScrollRect = clip(bounds, expand(scrollRect, requiredMargin));
+    const preloadedScrollRect = clip(bounds, expand(scrollRect, preloadedMargin));
+
+    if (!contains(bounds, prevScrollRect))
+        return preloadedScrollRect;
+
+    if (!contains(prevScrollRect, requiredScrollRect))
+        return preloadedScrollRect;
+
+    if (area(prevScrollRect) > 2 * area(preloadedScrollRect))
+        return preloadedScrollRect;
+
+    return prevScrollRect;
+}

package/src/state-utils/getSections.js

@@ -0,0 +1,101 @@
+export default function getSections(columns, rows) {
+    const topLength = rows.filter(row => row.pinned === 'BEGIN').length; // TODO: optimize
+    const bottomLength = rows.filter(row => row.pinned === 'END').length;
+    const middleLength = rows.length - topLength - bottomLength;
+    const leftLength = columns.filter(column => column.pinned === 'BEGIN').length;
+    const rightLength = columns.filter(column => column.pinned === 'END').length;
+    const centerLength = columns.length - leftLength - rightLength;
+
+    const topRows = rows.slice(0, topLength);
+    const bottomRows = rows.slice(rows.length - bottomLength, rows.length);
+    const middleRows = rows.slice(topLength, rows.length - bottomLength);
+    const leftColumns = columns.slice(0, leftLength);
+    const rightColumns = columns.slice(columns.length - rightLength, columns.length);
+    const centerColumns = columns.slice(leftLength, columns.length - rightLength);
+
+    const hasTopRows = topLength > 0;
+    const hasBottomRows = bottomLength > 0;
+    const hasMiddleRows = middleLength > 0;
+    const hasLeftColumns = leftLength > 0;
+    const hasRightColumns = rightLength > 0;
+    const hasCenterColumns = centerLength > 0;
+
+    const topShowTopBorder = true;
+    const topShowBottomBorder = true;
+    const bottomShowTopBorder = hasMiddleRows || !hasTopRows;
+    const bottomShowBottomBorder = true;
+    const middleShowTopBorder = !hasTopRows;
+    const middleShowBottomBorder = !hasBottomRows;
+    const leftShowLeftBorder = true;
+    const leftShowRightBorder = true;
+    const rightShowLeftBorder = hasCenterColumns || !hasLeftColumns;
+    const rightShowRightBorder = true;
+    const centerShowLeftBorder = !hasLeftColumns;
+    const centerShowRightBorder = !hasRightColumns;
+
+    const getHeight = (rows, showTopBorder, showBottomBorder) => {
+        if (rows.length === 0)
+            return 0;
+
+        const top = showTopBorder ? rows.at(0).topWithBorder : rows.at(0).top;
+        const bottom = showBottomBorder ? rows.at(-1).bottomWithBorder : rows.at(-1).bottom;
+
+        return bottom - top;
+    }
+
+    const getWidth = (columns, showLeftBorder, showRightBorder) => {
+        if (columns.length === 0)
+            return 0;
+
+        const left = showLeftBorder ? columns.at(0).leftWithBorder : columns.at(0).left;
+        const right = showRightBorder ? columns.at(-1).rightWithBorder : columns.at(-1).right;
+
+        return right - left;
+    }
+
+    const topHeight = getHeight(topRows, topShowTopBorder, topShowBottomBorder);
+    const bottomHeight = getHeight(bottomRows, bottomShowTopBorder, bottomShowBottomBorder);
+    const middleHeight = getHeight(middleRows, middleShowTopBorder, middleShowBottomBorder);
+    const leftWidth = getWidth(leftColumns, leftShowLeftBorder, leftShowRightBorder);
+    const rightWidth = getWidth(rightColumns, rightShowLeftBorder, rightShowRightBorder);
+    const centerWidth = getWidth(centerColumns, centerShowLeftBorder, centerShowRightBorder);
+
+    return {
+        top: {
+            rows: topRows,
+            showTopBorder: topShowTopBorder,
+            showBottomBorder: topShowBottomBorder,
+            height: topHeight
+        },
+        bottom: {
+            rows: bottomRows,
+            showTopBorder: bottomShowTopBorder,
+            showBottomBorder: bottomShowBottomBorder,
+            height: bottomHeight
+        },
+        middle: {
+            rows: middleRows,
+            showTopBorder: middleShowTopBorder,
+            showBottomBorder: middleShowBottomBorder,
+            height: middleHeight
+        },
+        left: {
+            columns: leftColumns,
+            showLeftBorder: leftShowLeftBorder,
+            showRightBorder: leftShowRightBorder,
+            width: leftWidth
+        },
+        right: {
+            columns: rightColumns,
+            showLeftBorder: rightShowLeftBorder,
+            showRightBorder: rightShowRightBorder,
+            width: rightWidth
+        },
+        center: {
+            columns: centerColumns,
+            showLeftBorder: centerShowLeftBorder,
+            showRightBorder: centerShowRightBorder,
+            width: centerWidth
+        }
+    };
+}

package/src/state-utils/getSelection.js

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

package/src/state-utils/getSorted.js

@@ -0,0 +1,130 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+function getSortByLookup(sortBy, primaryKey, secondaryKey) {
+    const sortByLookup = new Map();
+    for (const cell of sortBy) {
+        const primary = stringifyId(cell[primaryKey]);
+        const secondary = stringifyId(cell[secondaryKey]);
+
+        if (!sortByLookup.has(primary))
+            sortByLookup.set(primary, new Map());
+
+        sortByLookup.get(primary).set(secondary, cell.direction);
+    }
+    return sortByLookup;
+}
+
+function flush(temp, result) {
+    temp.sort((lhs, rhs) => {
+        const result = lhs.comparator(lhs.cell, rhs.cell);
+        if (typeof result === 'number')
+            return result;
+        return result ? -1 : 1;
+    });
+    result.push(...temp.map(entry => entry.entity));
+    temp.length = 0;
+}
+
+export function getSortedRows(sortBy, sortingRules, formattingRules, data, rows, columns, edition) {
+    if (sortBy.length === 0)
+        return rows;
+
+    const sortByLookup = getSortByLookup(sortBy, 'columnId', 'rowId');
+    const columnLookup = new Map(columns.map(column => [column.key, column]));
+    const sortedColumns = sortBy
+        .map(cell => stringifyId(cell.columnId))
+        .filter(key => columnLookup.has(key))
+        .map(key => columnLookup.get(key))
+        .reverse();
+
+    if (sortedColumns.length === 0)
+        return rows;
+
+    for (const column of sortedColumns) {
+        const result = [];
+        const temp = [];
+
+        for (const row of rows) {
+            const comparator = sortingRules.resolve(column, row, sortByLookup.get(column.key));
+
+            if (!comparator) {
+                flush(temp, result);
+                result.push(row);
+                continue;
+            }
+
+            const cell = formattingRules.resolve(data, rows, columns, row, column, edition);
+            const entry = { entity: row, comparator, cell };
+
+            if (temp.length === 0) {
+                temp.push(entry);
+                continue;
+            }
+
+            if (temp[0].comparator === comparator) {
+                temp.push(entry);
+                continue;
+            }
+
+            flush(temp, result);
+            temp.push(entry);
+        }
+
+        flush(temp, result);
+        rows = result;
+    }
+
+    return rows;
+}
+
+export function getSortedColumns(sortBy, sortingRules, formattingRules, data, rows, columns, edition) {
+    if (sortBy.length === 0)
+        return columns;
+
+    const sortByLookup = getSortByLookup(sortBy, 'rowId', 'columnId');
+    const rowLookup = new Map(rows.map(row => [row.key, row]));
+    const sortedRows = sortBy
+        .map(cell => stringifyId(cell.rowId))
+        .filter(key => rowLookup.has(key))
+        .map(key => rowLookup.get(key))
+        .reverse();
+
+    if (sortedRows.length === 0)
+        return columns;
+
+    for (const row of sortedRows) {
+        const result = [];
+        const temp = [];
+
+        for (const column of columns) {
+            const comparator = sortingRules.resolve(column, row, sortByLookup.get(row.key));
+
+            if (!comparator) {
+                flush(temp, result);
+                result.push(column);
+                continue;
+            }
+
+            const cell = formattingRules.resolve(data, rows, columns, row, column, edition);
+            const entry = { entity: column, comparator, cell };
+
+            if (temp.length === 0) {
+                temp.push(entry);
+                continue;
+            }
+
+            if (temp[0].comparator === comparator) {
+                temp.push(entry);
+                continue;
+            }
+
+            flush(temp, result);
+            temp.push(entry);
+        }
+
+        flush(temp, result);
+        columns = result;
+    }
+
+    return columns;
+}

package/src/state-utils/getSortingFormatting.js

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

package/src/state-utils/getSortingRules.js

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

package/src/state-utils/getTextResolver.js

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

package/src/state-utils/getToggledValue.js

@@ -0,0 +1,11 @@
+export default function getToggledValue(cell, column, row, edition) {
+    const value = edition.hasValueByKey(row.key, column.key)
+        ? edition.getValueByKey(row.key, column.key)
+        : cell.value;
+    const toggle = cell.edit.toggle;
+
+    if (typeof toggle === 'function')
+        return toggle({value}); // TODO: expand by context
+
+    return toggle[(toggle.indexOf(value) + 1) % toggle.length];
+}

package/src/state-utils/getTotalSize.js

@@ -0,0 +1,6 @@
+export default function getTotalSize(columns, rows) {
+    return {
+        width: columns.length ? columns.at(-1).rightWithBorder : 0,
+        height: rows.length ? rows.at(-1).bottomWithBorder : 0
+    };
+}

package/src/state-utils/getUnfolded.js

@@ -0,0 +1,86 @@
+function getDefaultIds(elements) {
+    if (!Array.isArray(elements))
+        return Object.keys(elements);
+
+    return elements.map((_, index) => index);
+}
+
+function getDefaultRowIds(data) {
+    return getDefaultIds(data);
+}
+
+function getDefaultColumnIds(data) {
+    const keys = new Set();
+
+    if (Array.isArray(data)) {
+        for (const element of data) {
+            for (const id of getDefaultIds(element))
+                keys.add(id);
+        }
+    } else {
+        for (const key in data) {
+            for (const id of getDefaultIds(data[key]))
+                keys.add(id);
+        }
+    }
+
+    return [...keys];
+}
+
+export function getUnfoldedColumns(columns, data) {
+    const hasDataBlocks = columns.some(column => column.type === 'DATA-BLOCK');
+
+    if (!hasDataBlocks)
+        return columns;
+
+    const unfoldedColumns = [];
+
+    for (const column of columns) {
+        if (column.type === 'DATA-BLOCK') {
+            const ids = 'selector' in column
+                ? column.selector(data)
+                : getDefaultColumnIds(data);
+
+            for (const id of ids) {
+                unfoldedColumns.push({
+                    ...column,
+                    id,
+                    type: 'DATA'
+                });
+            }
+        } else {
+            unfoldedColumns.push(column);
+        }
+    }
+
+    return unfoldedColumns;
+}
+
+export function getUnfoldedRows(rows, data) {
+    const hasDataBlocks = rows.some(row => row.type === 'DATA-BLOCK');
+
+    if (!hasDataBlocks)
+        return rows;
+
+    const unfoldedRows = [];
+
+    for (const row of rows) {
+        if (row.type === 'DATA-BLOCK') {
+            const ids = 'selector' in row
+                ? row.selector(data)
+                : getDefaultRowIds(data);
+
+            for (const id of ids) {
+                unfoldedRows.push({
+                    ...row,
+                    id,
+                    type: 'DATA'
+                });
+            }
+        } else {
+            unfoldedRows.push(row);
+        }
+    }
+
+    return unfoldedRows;
+}