@dimarborda/xlsx-editor 0.2.0 → 0.3.0

package/src/find.js

@@ -0,0 +1,37 @@
+// Searching cell texts as Excel does: `*` any text, `?` one character, `~` takes either literally.
+// No DOM here, so it is testable in Node.
+
+/**
+ * The search as a global regular expression; null for an empty search
+ * @param {string} query
+ * @param {{matchCase?: boolean, wholeCell?: boolean}} [options]
+ */
+export function searchPattern(query, { matchCase = false, wholeCell = false } = {}) {
+  if (!query) return null;
+  // With the `u` flag only characters with a meaning may be escaped
+  const literal = c => c.replace(/[.*+?^${}()|[\]\\/]/gu, '\\$&');
+  let source = '';
+  const chars = [...query];
+  for (let i = 0; i < chars.length; i++) {
+    const c = chars[i];
+    if (c === '~' && '*?~'.includes(chars[i + 1] ?? ' ')) source += literal(chars[++i]);
+    else if (c === '*') source += '[\\s\\S]*';
+    else if (c === '?') source += '[\\s\\S]';
+    else source += literal(c);
+  }
+  return new RegExp(wholeCell ? `^(?:${source})$` : source, matchCase ? 'gu' : 'giu');
+}
+
+/** Whether the pattern is in a text (a global expression remembers where it stopped: not here) */
+export function matches(pattern, text) {
+  pattern.lastIndex = 0;
+  const found = pattern.test(text);
+  pattern.lastIndex = 0;
+  return found;
+}
+
+/** The text with what the pattern finds replaced, taken literally */
+export function replaceMatches(pattern, text, replacement) {
+  pattern.lastIndex = 0;
+  return text.replace(pattern, found => (found === '' ? '' : replacement));
+}

package/src/grid.js

@@ -12,6 +12,11 @@ export function colWidthToPx(width, mdw) {
   return Math.trunc(((256 * width + Math.trunc(128 / mdw)) / 256) * mdw);
 }
 
+/** Pixels to the width in characters `colWidthToPx` turns back into those pixels */
+export function pxToColWidth(px, mdw) {
+  return Math.round((px / mdw) * 256) / 256;
+}
+
 /**
  * Default column width in pixels: `defaultColWidth` when the sheet sets it, otherwise
  * `baseColWidth` characters (8 by default) plus 5 pixels of padding, rounded up to a multiple
@@ -147,3 +152,87 @@ export function sheetAxes(layout, used, mdw, defaultRowPt = 15) {
   const cols = Math.min(MAX_COLS, Math.max(lastCol, used.maxCol) + 12);
   return { rows: new Axis(rows, rowPx, rowSizes), cols: new Axis(Math.max(cols, 26), colPx, colSizes) };
 }
+
+/**
+ * What Excel's status bar says about the cells of a range: how many have something and the sum,
+ * average, smallest and largest of the numbers. Hidden rows and columns do not count, and any
+ * error leaves only the count (as Excel does). `style` is the format of the first number. `null`
+ * when the range is empty.
+ * @param {Map<number, {kind: string, style: number, number?: number}>} cells by `row * 16385 + col`
+ * @param {{first: {row: number, col: number}, last: {row: number, col: number}}} range
+ * @param {{rows?: Axis, cols?: Axis}} [axes]
+ */
+export function rangeStats(cells, { first, last }, { rows, cols } = {}) {
+  let count = 0;
+  let numbers = 0;
+  let sum = 0;
+  let min = Infinity;
+  let max = -Infinity;
+  let error = false;
+  let style = 0;
+  let firstAt = Infinity;
+  const visit = (cell, row, col) => {
+    if (!cell || !cell.kind || rows?.size(row) === 0 || cols?.size(col) === 0) return;
+    count++;
+    if (cell.kind === 'e') error = true;
+    if (cell.number === undefined) return;
+    numbers++;
+    sum += cell.number;
+    min = Math.min(min, cell.number);
+    max = Math.max(max, cell.number);
+    const at = row * 16_385 + col;
+    if (at < firstAt) {
+      firstAt = at;
+      style = cell.style;
+    }
+  };
+  // Whichever is smaller: the cells of the range or those of the sheet
+  if ((last.row - first.row + 1) * (last.col - first.col + 1) <= cells.size) {
+    for (let r = first.row; r <= last.row; r++) {
+      for (let c = first.col; c <= last.col; c++) visit(cells.get(r * 16_385 + c), r, c);
+    }
+  } else {
+    for (const [at, cell] of cells) {
+      const r = Math.floor(at / 16_385);
+      const c = at - r * 16_385;
+      if (r >= first.row && r <= last.row && c >= first.col && c <= last.col) visit(cell, r, c);
+    }
+  }
+  if (!count) return null;
+  if (error || !numbers) return { count, numbers: error ? 0 : numbers, sum: null, average: null, min: null, max: null, style };
+  return { count, numbers, sum, average: sum / numbers, min, max, style };
+}
+
+/**
+ * Where Ctrl+arrow lands from the line `from`, as Excel does: to the end of the block of filled
+ * cells it is in, else to the next filled cell, else to the end of the sheet
+ * @param {(line: number) => boolean} filled
+ * @param {number} from
+ * @param {1 | -1} step
+ * @param {number} limit last line of the sheet
+ */
+export function dataEdge(filled, from, step, limit) {
+  const inside = i => i >= 1 && i <= limit;
+  if (!inside(from + step)) return from;
+  let i = from;
+  if (filled(from) && filled(from + step)) {
+    while (inside(i + step) && filled(i + step)) i += step;
+    return i;
+  }
+  for (i = from + step; inside(i); i += step) if (filled(i)) return i;
+  return step < 0 ? 1 : limit;
+}
+
+/**
+ * The far end of the run of numbers next to the line `from`, going by `step`; null when the next
+ * line has none. Autosum takes that run.
+ * @param {(line: number) => boolean} isNumber
+ * @param {number} from
+ * @param {1 | -1} step
+ * @param {number} limit last line of the sheet
+ */
+export function numberRun(isNumber, from, step, limit) {
+  let end = null;
+  for (let i = from + step; i >= 1 && i <= limit && isNumber(i); i += step) end = i;
+  return end;
+}

package/src/index.d.ts

@@ -11,6 +11,8 @@ export interface XlsxEditorOptions {
   tabs?: boolean;
   /** Bar above the grid with the selected cell and its content; default true */
   formulaBar?: boolean;
+  /** Bar below the tabs with the count, sum and average of the selection; default true */
+  statusBar?: boolean;
   /** A viewer: cells are selected and copied but not edited; default false */
   readOnly?: boolean;
   /** Where `xlsx_engine_bg.wasm` is served from, when the bundler does not serve it */
@@ -30,6 +32,41 @@ export interface Selection {
   active: CellPosition;
   /** Text the active cell shows */
   text: string;
+  /** Whole rows, whole columns or the whole sheet selected from the headers */
+  whole: 'row' | 'col' | 'all' | null;
+}
+
+/** What the status bar says about the selection */
+export interface SelectionStats {
+  /** Cells that have something */
+  count: number;
+  /** Of them, numbers (dates count, as serial numbers) */
+  numbers: number;
+  /** `null` without numbers, or when an error is selected */
+  sum: number | null;
+  average: number | null;
+  min: number | null;
+  max: number | null;
+}
+
+export interface FindOptions {
+  matchCase?: boolean;
+  /** Only cells whose whole text matches */
+  wholeCell?: boolean;
+  /** The active sheet (default) or every worksheet */
+  scope?: 'sheet' | 'workbook';
+  /** Look in the formula of formula cells instead of the text they show */
+  inFormulas?: boolean;
+}
+
+export interface FindHit {
+  sheet: number;
+  sheetName: string;
+  ref: string;
+  row: number;
+  col: number;
+  /** The text that matched */
+  text: string;
 }
 
 /** Cells changed from the grid (typing, deleting, pasting, cutting) or by undo and redo */
@@ -39,9 +76,9 @@ export interface ChangeDetail {
   index: number;
   /** Range changed, e.g. `B3` or `A1:C4` */
   range: string;
-  /** Every cell of `range` with its new value (`null` when empty) */
+  /** Every cell of `range` with its new value (`null` when empty); empty above 200 000 cells */
   cells: { ref: string; value: CellValue }[];
-  source: 'edit' | 'clear' | 'paste' | 'cut' | 'undo' | 'redo';
+  source: 'edit' | 'clear' | 'paste' | 'cut' | 'move' | 'insert' | 'delete' | 'fill' | 'replace' | 'undo' | 'redo';
 }
 
 export interface XlsxEditorEventMap {
@@ -49,7 +86,7 @@ export interface XlsxEditorEventMap {
   sheetchange: CustomEvent<{ index: number; name: string }>;
   selectionchange: CustomEvent<Selection>;
   change: CustomEvent<ChangeDetail>;
-  /** A change the engine refused (e.g. overwriting the source of a shared formula) */
+  /** A change the engine refused (e.g. moving a row through merged cells) */
   error: CustomEvent<{ error: Error }>;
 }
 
@@ -65,10 +102,55 @@ export class XlsxEditor extends EventTarget {
   readonly sheetIndex: number;
   readonly sheetName: string | null;
   readonly selection: Selection | null;
+  /** Count, sum, average, smallest and largest of the selected cells; `null` when they are empty */
+  readonly selectionStats: SelectionStats | null;
   /** Without editing from the grid (selecting and copying still work) */
   readOnly: boolean;
   readonly canUndo: boolean;
   readonly canRedo: boolean;
+  /**
+   * Moves `count` whole rows from `first` before the row `before` (numbered as they are now), as
+   * one undo step, and selects them. False when nothing changed: it stays where it is, it is
+   * read-only, or the engine refused (an `error` event says why).
+   */
+  moveRows(first: number, count: number, before: number): boolean;
+  /** Moves whole columns, by number (see `moveRows`) */
+  moveColumns(first: number, count: number, before: number): boolean;
+  /** Inserts rows before the row `before`, as one undo step, and selects them; false if refused */
+  insertRows(before: number, count?: number): boolean;
+  /** Inserts columns, by number (see `insertRows`) */
+  insertColumns(before: number, count?: number): boolean;
+  /** Deletes rows from `first`, as one undo step; false if refused */
+  deleteRows(first: number, count?: number): boolean;
+  /** Deletes columns, by number (see `deleteRows`) */
+  deleteColumns(first: number, count?: number): boolean;
+  /** Fits columns to their content, as one undo step; false if they are empty, read-only or refused. Needs the editor: it measures the text as drawn */
+  autofitColumns(first: number, count?: number): boolean;
+  /** Fits rows to their content (empty ones go back to the automatic height), as one undo step; false if read-only or refused */
+  autofitRows(first: number, count?: number): boolean;
+  /** Hides `count` rows from `first`, as one undo step */
+  hideRows(first: number, count?: number): boolean;
+  /** Shows hidden rows among the `count` from `first` */
+  showRows(first: number, count?: number): boolean;
+  /** Hides columns, by number */
+  hideColumns(first: number, count?: number): boolean;
+  /** Shows hidden columns, by number */
+  showColumns(first: number, count?: number): boolean;
+  /**
+   * Fills `target` (`A1:A20`) from the selected cells, which must be at one of its ends, as one
+   * undo step, and selects it. False if refused.
+   */
+  fill(target: string, options?: { series?: boolean }): boolean;
+  /** Where a text is, row by row: `*` is any text, `?` one character and `~` takes them literally */
+  find(query: string, options?: FindOptions): FindHit[];
+  /**
+   * Replaces a text in cells with text and in formulas (never in numbers or dates), as one undo
+   * step; returns how many cells changed. Formatted runs of a rich text become plain.
+   */
+  replaceAll(query: string, replacement: string, options?: Omit<FindOptions, 'inFormulas'>): number;
+  /** Opens the search panel, with the row to replace when asked */
+  openFind(options?: { replace?: boolean }): void;
+  closeFind(): void;
   /** Undoes the last change; false when there is nothing to undo */
   undo(): boolean;
   /** Redoes the last undone change */
@@ -105,7 +187,7 @@ export class XlsxEditor extends EventTarget {
   addEventListener(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void;
 }
 
-/** `<xlsx-editor src="…" locale zoom sheet tabs formula-bar readonly wasm-url blank quiet>` */
+/** `<xlsx-editor src="…" locale zoom sheet tabs formula-bar status-bar readonly wasm-url blank quiet>` */
 export class XlsxEditorElement extends HTMLElement {
   /** The editor, once the `ready` event fired */
   editor: XlsxEditor | null;

package/src/style.css

@@ -27,7 +27,8 @@ xlsx-editor {
 }
 
 .xlsx-editor-bar[hidden],
-.xlsx-editor-tabs[hidden] {
+.xlsx-editor-tabs[hidden],
+.xlsx-editor-status[hidden] {
   display: none;
 }
 
@@ -159,3 +160,155 @@ xlsx-editor {
   opacity: 0.5;
   cursor: default;
 }
+
+/* Below the tabs: what went wrong on the left, the sum and average of the selection on the right */
+.xlsx-editor-status {
+  display: flex;
+  align-items: center;
+  gap: 1.5em;
+  min-height: 22px;
+  padding: 0 10px;
+  border-top: 1px solid var(--xlsx-border, #d1d5db);
+  background: var(--xlsx-tabs-bg, #f3f4f6);
+  font-size: 12px;
+  color: #4b5563;
+  white-space: nowrap;
+}
+
+.xlsx-editor-status-message {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #b91c1c;
+}
+
+.xlsx-editor-status-stats {
+  flex: 0 0 auto;
+  display: flex;
+  gap: 1.25em;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Right click on cells and headers */
+.xlsx-editor-menu {
+  position: fixed;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  min-width: 14rem;
+  padding: 4px;
+  background: #ffffff;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: var(--xlsx-radius, 6px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font: 13px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1f2937;
+}
+
+.xlsx-editor-menu[hidden] {
+  display: none;
+}
+
+.xlsx-editor-menu-item {
+  display: flex;
+  justify-content: space-between;
+  gap: 2rem;
+  padding: 5px 10px;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.xlsx-editor-menu-item:hover,
+.xlsx-editor-menu-item:focus-visible {
+  outline: none;
+  background: rgba(33, 115, 70, 0.12);
+}
+
+.xlsx-editor-menu-keys {
+  color: #6b7280;
+}
+
+.xlsx-editor-menu-line {
+  height: 1px;
+  margin: 4px 6px;
+  background: var(--xlsx-border, #d1d5db);
+}
+
+/* Search panel, over the top right corner of the grid */
+.xlsx-editor-find {
+  position: absolute;
+  z-index: 3;
+  top: 6px;
+  right: 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  width: min(22rem, calc(100% - 44px));
+  padding: 8px;
+  background: #ffffff;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: var(--xlsx-radius, 6px);
+  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
+  font-size: 12px;
+}
+
+.xlsx-editor-find[hidden],
+.xlsx-editor-find-row[hidden] {
+  display: none;
+}
+
+.xlsx-editor-find-row {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.xlsx-editor-find input[type="text"] {
+  flex: 1 1 6rem;
+  min-width: 0;
+  padding: 3px 6px;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: 4px;
+  font: inherit;
+}
+
+.xlsx-editor-find input[type="text"]:focus {
+  outline: 2px solid var(--xlsx-accent, #217346);
+  outline-offset: -1px;
+}
+
+.xlsx-editor-find button,
+.xlsx-editor-find select {
+  padding: 3px 7px;
+  border: 1px solid var(--xlsx-border, #d1d5db);
+  border-radius: 4px;
+  background: #ffffff;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.xlsx-editor-find button:hover {
+  background: rgba(33, 115, 70, 0.12);
+}
+
+.xlsx-editor-find label {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  cursor: pointer;
+}
+
+.xlsx-editor-find-count {
+  margin-left: auto;
+  color: #4b5563;
+  font-variant-numeric: tabular-nums;
+}