js-spread-grid 0.0.1

package/src/types/Edition.js

@@ -0,0 +1,37 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+// TODO: write unit tests
+export default class Edition {
+    constructor(editedCells) {
+        this.lookup = new Map();
+
+        editedCells.forEach(cell => {
+            const rowKey = stringifyId(cell.rowId);
+            const columnKey = stringifyId(cell.columnId);
+
+            if (!this.lookup.has(rowKey))
+                this.lookup.set(rowKey, new Map());
+
+            this.lookup.get(rowKey).set(columnKey, cell.value);
+        });
+    }
+
+    hasValueByKey(rowKey, columnKey) {
+        return this.lookup.has(rowKey) && this.lookup.get(rowKey).has(columnKey);
+    }
+
+    getValueByKey(rowKey, columnKey) {
+        if (!this.hasValueByKey(rowKey, columnKey))
+            return undefined;
+
+        return this.lookup.get(rowKey).get(columnKey);
+    }
+
+    hasValueById(rowId, columnId) {
+        return this.hasValueByKey(stringifyId(rowId), stringifyId(columnId));
+    }
+
+    getValueById(rowId, columnId) {
+        return this.getValueByKey(stringifyId(rowId), stringifyId(columnId));
+    }
+}

package/src/types/FilteringRules.js

@@ -0,0 +1,48 @@
+import stringifyId from "../core-utils/stringifyId.js";
+import RulesLookup from "./RulesLookup.js";
+
+const defaultCondition = ({ text, expression }) => text.includes(expression);
+
+export default class FilteringRules {
+    constructor(rules) {
+        this.rulesLookup = new RulesLookup();
+
+        for (const rule of rules) {
+            const entry = {
+                by: stringifyId('by' in rule ? rule.by : 'FILTER'),
+                condition: rule.condition || defaultCondition
+            };
+
+            this.rulesLookup.addRule(rule.column, rule.row, entry);
+        }
+    }
+
+    resolve(data, rows, columns, row, column, value, text, filterLookup) {
+        const rules = this.rulesLookup.getRules(column, row);
+
+        if (rules.length === 0) {
+            if (row.type !== 'DATA')
+                return true;
+            if (column.type !== 'DATA')
+                return true;
+            if (!filterLookup.has('"FILTER"'))
+                return true;
+
+            return defaultCondition({ text, expression: filterLookup.get('"FILTER"') });
+        }
+
+        let context = { data, rows, columns, row, column, value, text };
+
+        for (const rule of rules) {
+            if (!filterLookup.has(rule.by))
+                continue;
+
+            const filterContext = { ...context, expression: filterLookup.get(rule.by) };
+
+            if (!rule.condition(filterContext))
+                return false;
+        }
+
+        return true;
+    }
+}

package/src/types/FormatResolver.js

@@ -0,0 +1,19 @@
+export default class FormatResolver {
+    constructor(formattingRules, data, rows, columns, edition) {
+        this.formattingRules = formattingRules;
+        this.data = data;
+        this.rows = rows;
+        this.columns = columns;
+        this.edition = edition;
+    }
+
+    resolve(row, column) {
+        return this.formattingRules.resolve(
+            this.data,
+            this.rows,
+            this.columns,
+            row,
+            column,
+            this.edition);
+    }
+}

package/src/types/FormattingRules.js

@@ -0,0 +1,120 @@
+import { defaultPadding } from "../core-utils/defaults.js";
+import RulesLookup from "./RulesLookup.js";
+
+const borderTypes = ['borderTop', 'borderRight', 'borderBottom', 'borderLeft'];
+// TODO: better handle default validate for toggle edit
+const defaultEdit = { validate: () => true, parse: string => string };
+
+// TODO: Don't recreate styles if they haven't changed
+function indexBorders(style, index) {
+    const newStyle = { ...style };
+
+    if ('border' in newStyle) {
+        for (const borderType of borderTypes)
+            newStyle[borderType] = newStyle.border;
+        delete newStyle.border;
+    }
+
+    for (const borderType of borderTypes)
+        if (borderType in newStyle)
+            newStyle[borderType] = { ...newStyle[borderType], index };
+
+    return newStyle;
+}
+
+function getText(context) {
+    if ('text' in context)
+        return context.text;
+    if (context.value !== undefined)
+        return `${context.value}`;
+    return '';
+}
+
+// TODO: Rename to FormatResolver
+// TODO: Optimize by not searching using keys that don't have correlated match rules
+// TODO: Accept both a function and an object as a style (where the object is a resolved style)
+// TODO: Consider removing index from the lookup
+export default class FormattingRules {
+    constructor(rules) {
+        this.rulesLookup = new RulesLookup();
+
+        for (const [index, rule] of rules.entries()) {
+            const entry = { index };
+
+            if ('condition' in rule)
+                entry.condition = rule.condition;
+            if ('style' in rule)
+                entry.style = typeof rule.style === 'function' ? rule.style : () => rule.style;
+            if ('value' in rule)
+                entry.value = typeof rule.value === 'function' ? rule.value : () => rule.value;
+            if ('text' in rule)
+                entry.text = typeof rule.text === 'function' ? rule.text : () => rule.text;
+            if ('padding' in rule)
+                entry.padding = typeof rule.padding === 'function' ? rule.padding : () => rule.padding;
+            if ('edit' in rule)
+                entry.edit = rule.edit;
+            if ('draw' in rule)
+                entry.draw = rule.draw;
+
+            this.rulesLookup.addRule(rule.column, rule.row, entry);
+        }
+    }
+
+    resolve(data, rows, columns, row, column, edition) {
+        const rules = this.rulesLookup
+            .getRules(column, row)
+            .sort((a, b) => a.index - b.index)
+            .filter((value, index, array) => value.index !== array[index - 1]?.index);
+
+        let context = { data, rows, columns, row, column };
+        let style = {};
+        let draw = undefined;
+        let visible = true;
+        let padding = defaultPadding;
+
+        if (edition.hasValueByKey(row.key, column.key))
+            context = { ...context, newValue: edition.getValueByKey(row.key, column.key) };
+
+        for (const rule of rules) {
+            if ('condition' in rule && !rule.condition(context))
+                continue;
+
+            // TODO: Don't actually add things like `edit` to the context
+            if ('value' in rule)
+                context = { ...context, value: rule.value(context) };
+            if ('style' in rule)
+                style = { ...style, ...indexBorders(rule.style(context), rule.index) };
+            if ('text' in rule)
+                context = { ...context, text: rule.text(context) };
+            if ('padding' in rule)
+                padding = { ...padding, ...rule.padding(context) };
+            if ('edit' in rule)
+                context = { ...context, edit: rule.edit && 'edit' in context ? { ...context.edit, ...rule.edit } : { ...defaultEdit, ...rule.edit } };
+            if ('draw' in rule) {
+                const currentContext = context;
+                draw = (ctx) => rule.draw({ ...currentContext, ctx });
+            }
+
+            // TODO: Add StopPropagation
+        }
+
+        const text = getText(context);
+        const result = {
+            style,
+            visible,
+            text,
+            padding
+        };
+
+        if ('value' in context)
+            result.value = context.value;
+        if ('edit' in context)
+            result.edit = context.edit;
+        if (draw !== undefined)
+            result.draw = draw;
+        if ('text' in context)
+            result.text = context.text;
+
+        return result;
+    }
+}

package/src/types/FormattingRules.test.js

@@ -0,0 +1,90 @@
+import Edition from './Edition.js';
+import FormattingRules from './FormattingRules.js';
+import stringifyId from '../core-utils/stringifyId.js';
+
+// TODO: add even more test cases
+describe('FormattingRules', () => {
+  describe('resolve', () => {
+    it('should return an empty object when no styles are matched', () => {
+      const styles = [
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => false, style: () => ({ color: 'red' }) },
+        { column: { id: 'col2' }, row: { id: 'row2' }, condition: () => false, style: () => ({ color: 'blue' }) },
+      ];
+      const resolver = new FormattingRules(styles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row3') }, { key: stringifyId('col3') }, new Edition([])).style;
+      expect(style).toEqual({});
+    });
+
+    it('should apply indexing to border styles', () => {
+      const styles = [
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ borderTop: { width: 1 } }) },
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ borderLeft: { width: 1 } }) },
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ borderBottom: { width: 1 } }) },
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ borderRight: { width: 1 } }) },
+      ];
+      const resolver = new FormattingRules(styles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row1') }, { key: stringifyId('col1') }, new Edition([])).style;
+      expect(style).toEqual({
+        borderTop: { width: 1, index: 0 },
+        borderLeft: { width: 1, index: 1 },
+        borderBottom: { width: 1, index: 2 },
+        borderRight: { width: 1, index: 3 },
+      });
+    });
+
+    it('should only apply rules for which the condition is true', () => {
+      const styles = [
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ color: 'red' }) },
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => false, style: () => ({ color: 'blue' }) },
+      ];
+      const resolver = new FormattingRules(styles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row1') }, { key: stringifyId('col1') }, new Edition([])).style;
+      expect(style).toEqual({ color: 'red' });
+    });
+
+    it('should use the value for evaluating conditions', () => {
+      const styles = [
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: ({row}) => row.data, style: () => ({ color: 'red' }) },
+        { column: { id: 'col1' }, row: { id: 'row1' }, condition: ({row}) => !row.data, style: () => ({ color: 'blue' }) },
+      ];
+      const resolver = new FormattingRules(styles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row1'), data: true }, { key: stringifyId('col1') }, new Edition([])).style;
+      expect(style).toEqual({ color: 'red' });
+    });
+
+    const commonStyles = [
+      { column: { id: 'col1' }, row: { id: 'row1' }, condition: () => true, style: () => ({ color: 'red' }) },
+      { column: { id: 'col2' }, row: { id: 'row2' }, condition: () => true, style: () => ({ color: 'blue', background: 'black' }) },
+      { column: { match: 'ANY' }, row: { match: 'ANY' }, condition: () => true, style: () => ({ color: 'green' }) },
+      { column: { id: 'col1' }, row: { match: 'ANY' }, condition: () => true, style: () => ({ color: 'yellow' }) },
+      { column: { match: 'ANY' }, row: { id: 'row1' }, condition: () => true, style: () => ({ color: 'purple' }) },
+      { column: { match: 'ANY' }, row: { index: 0 }, condition: () => true, style: () => ({ color: 'pink' }) },
+      { column: { index: 0 }, row: { match: 'ANY' }, condition: () => true, style: () => ({ color: 'orange' }) },
+      { column: { id: 'col2' }, row: { match: 'ANY' }, condition: () => true, style: () => ({ color: 'brown' }) },
+    ];
+
+    it('should use ANY rules for matching undefined columns and rows', () => {
+      const resolver = new FormattingRules(commonStyles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row3'), type: 'DATA' }, { key: stringifyId('col3'), type: 'DATA' }, new Edition([])).style;
+      expect(style).toEqual({ color: 'green' });
+    });
+
+    it('should use latest matching rule', () => {
+      const resolver = new FormattingRules(commonStyles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row1'), index: 1, type: 'DATA' }, { key: stringifyId('col1'), index: 1, type: 'DATA' }, new Edition([])).style;
+      expect(style).toEqual({ color: 'purple' });
+    });
+
+    it('combine styles from multiple rules', () => {
+      const resolver = new FormattingRules(commonStyles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row2'), index: 2, type: 'DATA' }, { key: stringifyId('col2'), index: 2, type: 'DATA' }, new Edition([])).style;
+      expect(style).toEqual({ color: 'brown', background: 'black' });
+    });
+
+    it('should use index rules for matching columns and rows by index', () => {
+      const resolver = new FormattingRules(commonStyles);
+      const style = resolver.resolve(null, [], [], { key: stringifyId('row2'), index: 2, type: 'DATA' }, { key: stringifyId('col0'), index: 0, type: 'DATA' }, new Edition([])).style;
+      expect(style).toEqual({ color: 'orange' });
+    });
+  });
+});

package/src/types/RulesLookup.js

@@ -0,0 +1,118 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+const matchMapping = {
+    'HEADER': ['HEADER'],
+    'FILTER': ['FILTER'],
+    'DATA': ['DATA'],
+    'CUSTOM': ['CUSTOM'],
+    'ANY': ['HEADER', 'DATA', 'FILTER', 'CUSTOM'],
+    'SPECIAL': ['HEADER', 'FILTER', 'CUSTOM'],
+    undefined: []
+};
+
+class Lookup {
+    byKey = new Map();
+    byIndex = new Map(); // TODO: Should this be removed?
+    byLabel = new Map();
+    byMatch = new Map();
+}
+
+export default class RulesLookup {
+    lookup = new Lookup();
+    hasRules = false;
+
+    addRule(column, row, rule) {
+        this.hasRules = true;
+
+        if (Array.isArray(column)) {
+            for (const c of column)
+                this.addRule(c, row, rule);
+            return;
+        }
+
+        if (Array.isArray(row)) {
+            for (const r of row)
+                this.addRule(column, r, rule);
+            return;
+        }
+
+        column = column
+            ? 'id' in column
+                ? { key: stringifyId(column.id) }
+                : column
+            : { match: 'DATA' };
+        row = row
+            ? 'id' in row
+                ? { key: stringifyId(row.id) }
+                : row
+            : { match: 'DATA' };
+
+        function addRowRule(lookup, key) {
+            if (!lookup.has(key))
+                lookup.set(key, []);
+
+            lookup.get(key).push(rule);
+        }
+
+        function addColumnRule(lookup, key) {
+            if (!lookup.has(key))
+                lookup.set(key, new Lookup());
+
+            if ('key' in row)
+                addRowRule(lookup.get(key).byKey, row.key);
+            if ('index' in row)
+                addRowRule(lookup.get(key).byIndex, row.index);
+            if ('label' in row)
+                addRowRule(lookup.get(key).byLabel, row.label);
+            for (const match of matchMapping[row.match])
+                addRowRule(lookup.get(key).byMatch, match);
+        }
+
+        if ('key' in column)
+            addColumnRule(this.lookup.byKey, column.key);
+        if ('index' in column)
+            addColumnRule(this.lookup.byIndex, column.index);
+        if ('label' in column)
+            addColumnRule(this.lookup.byLabel, column.label);
+        for (const match of matchMapping[column.match])
+            addColumnRule(this.lookup.byMatch, match);
+    }
+
+    getRules(column, row) {
+        const rules = [];
+
+        if (!this.hasRules)
+            return rules;
+
+        function gatherRules(newRules) {
+            for (const rule of newRules)
+                rules.push(rule);
+        }
+
+        function gatherRowRules(lookup) {
+            if (lookup.byKey.has(row.key))
+                gatherRules(lookup.byKey.get(row.key));
+            if (lookup.byIndex.has(row.index))
+                gatherRules(lookup.byIndex.get(row.index));
+            if (lookup.byMatch.has(row.type))
+                gatherRules(lookup.byMatch.get(row.type));
+            for (const label of row.labels) {
+                if (lookup.byLabel.has(label))
+                    gatherRules(lookup.byLabel.get(label));
+            }
+        }
+
+        if (this.lookup.byKey.has(column.key))
+            gatherRowRules(this.lookup.byKey.get(column.key));
+        if (this.lookup.byIndex.has(column.index))
+            gatherRowRules(this.lookup.byIndex.get(column.index));
+        if (this.lookup.byMatch.has(column.type))
+            gatherRowRules(this.lookup.byMatch.get(column.type));
+        for (const label of column.labels) {
+            if (this.lookup.byLabel.has(label))
+                gatherRowRules(this.lookup.byLabel.get(label));
+        }
+
+        return rules;
+    }
+};

package/src/types/Selection.js

@@ -0,0 +1,25 @@
+import stringifyId from "../core-utils/stringifyId.js";
+
+export default class Selection {
+    constructor(selectedCells) {
+        this.lookup = new Map();
+
+        selectedCells.forEach(cell => {
+            const rowKey = stringifyId(cell.rowId);
+            const columnKey = stringifyId(cell.columnId);
+
+            if (!this.lookup.has(rowKey))
+                this.lookup.set(rowKey, new Set());
+
+            this.lookup.get(rowKey).add(columnKey);
+        });
+    }
+
+    isKeySelected(rowKey, columnKey) {
+        return this.lookup.has(rowKey) && this.lookup.get(rowKey).has(columnKey);
+    }
+
+    isIdSelected(rowId, columnId) {
+        return this.isKeySelected(stringifyId(rowId), stringifyId(columnId));
+    }
+}

package/src/types/SortingRules.js

@@ -0,0 +1,62 @@
+import RulesLookup from "./RulesLookup.js";
+
+// const defaultComparatorAsc = (lhs, rhs) => lhs.value < rhs.value;
+// const defaultComparatorDesc = (lhs, rhs) => lhs.value > rhs.value;
+
+function defaultComparatorAsc(lhs, rhs) {
+    if (lhs.value == undefined)
+        return false;
+    if (rhs.value == undefined)
+        return true;
+    return lhs.value < rhs.value;
+}
+
+function defaultComparatorDesc(lhs, rhs) {
+    if (lhs.value == undefined)
+        return false;
+    if (rhs.value == undefined)
+        return true;
+    return lhs.value > rhs.value;
+}
+
+export default class SortingRules {
+    constructor(rules) {
+        this.rulesLookup = new RulesLookup();
+
+        for (const rule of rules) {
+            const entry = {
+                by: stringifyId('by' in rule ? rule.by : 'HEADER'),
+                comparatorAsc: rule.comparator || defaultComparatorAsc,
+                comparatorDesc: (lhs, rhs) => -rule.comparator(lhs, rhs) || defaultComparatorDesc
+            };
+
+            this.rulesLookup.addRule(rule.column, rule.row, entry);
+        }
+    }
+
+    resolve(column, row, sortByLookup) {
+        const rules = this.rulesLookup.getRules(column, row);
+
+        if (rules.length === 0) {
+            if (row.type !== 'DATA')
+                return null;
+            if (column.type !== 'DATA')
+                return null;
+            if (!sortByLookup.has('"HEADER"'))
+                return null;
+
+            return sortByLookup.get('"HEADER"') === 'ASC'
+                ? defaultComparatorAsc
+                : defaultComparatorDesc;
+        }
+
+        if (rules.length > 1)
+            throw new Error('Multiple sorting rules for the same cell'); // TODO: add more context
+
+        const rule = rules[0];
+
+        return sortByLookup.get(rule.by) === 'ASC'
+            ? rule.comparatorAsc
+            : rule.comparatorDesc;
+    }
+}

package/src/types/TextResolver.js

@@ -0,0 +1,60 @@
+import { defaultFont } from "../core-utils/defaults.js";
+
+export default class TextResolver
+{
+    constructor() {
+        this.canvas = document.createElement('canvas');
+        this.context = this.canvas.getContext('2d');
+        this.fontMetrics = new Map();
+    }
+
+    measureWidth(text, font) {
+        const ctx = this.context;
+
+        ctx.font = font || defaultFont;
+
+        const textMetrics = ctx.measureText(text);
+
+        return textMetrics.width;
+    }
+
+    measureHeight(text, font) {
+        let lines = 1;
+        for (const char of text) {
+            if (char === '\n')
+                lines++;
+        }
+
+        return lines * this.getFontMetrics(font).height;
+    }
+
+    getFontMetrics(font) {
+        const key = font;
+
+        if (this.fontMetrics.has(key))
+            return this.fontMetrics.get(key);
+
+        const ctx = this.context;
+
+        // TODO: Set other font properties
+        ctx.font = font || defaultFont;
+
+        const textMetrics = ctx.measureText('X');
+
+        const middle = (textMetrics.actualBoundingBoxDescent - textMetrics.actualBoundingBoxAscent) / 2;
+        const topOffset = middle + textMetrics.fontBoundingBoxAscent;
+        const bottomOffset = textMetrics.fontBoundingBoxDescent - middle;
+        const height = textMetrics.fontBoundingBoxAscent + textMetrics.fontBoundingBoxDescent;
+
+        const fontMetrics = {
+            topOffset: topOffset,
+            middle: -middle,
+            bottomOffset: bottomOffset,
+            height: height
+        };
+
+        this.fontMetrics.set(key, fontMetrics);
+
+        return fontMetrics;
+    }
+}

package/src/types/VisibilityResolver.js

@@ -0,0 +1,61 @@
+import Edition from "./Edition.js";
+
+// TODO: split into two normal functions, instead of wrapping it into a class
+export default class VisibilityResolver {
+    constructor(formattingRules, data, rows, columns, filtering) {
+        this.formattingRules = formattingRules;
+        this.data = data;
+        this.rows = rows;
+        this.columns = columns;
+        this.edition = new Edition([]);
+        this.filtering = filtering;
+    }
+
+    findVisibleColumns() {
+        if (!this.filtering.hasRowFilters())
+            return this.columns;
+
+        return this.columns.filter(column => {
+            return this.rows.every(row => {
+                if (!this.filtering.hasRowFiltersByKey(row.key))
+                    return true;
+
+                const cell = this.formattingRules.resolve(
+                    this.data,
+                    this.rows,
+                    this.columns,
+                    row,
+                    column,
+                    this.edition,
+                    this.filtering);
+
+                return cell.visible;
+            });
+        });
+    }
+
+    findVisibleRows() {
+        // TODO: don't include search columns in that check
+        if (!this.filtering.hasColumnFilters())
+            return this.rows;
+
+        return this.rows.filter(row => {
+            // TODO: iterate over columns with filters, instead of all columns
+            return this.columns.every(column => {
+                if (!this.filtering.hasColumnFiltersByKey(column.key))
+                    return true;
+
+                const cell = this.formattingRules.resolve(
+                    this.data,
+                    this.rows,
+                    this.columns,
+                    row,
+                    column,
+                    this.edition,
+                    this.filtering);
+
+                return cell.visible;
+            });
+        });
+    }
+}