abdul-react 0.0.33 → 0.0.36

package/lib/components/Excel/ExcelFile/ExcelFileComponents/reducer.js

@@ -1,9 +1,9 @@
 import { PointRange } from './point-range.js';
-import { split, getSize, get, unset, set, pad, entries, has } from './matrix.js';
+import { get, set, split, getSize, unset, pad, entries, has } from './matrix.js';
 import { ORIGIN } from './point.js';
 import { EmptySelection, RangeSelection, EntireWorksheetSelection, EntireColumnsSelection, EntireRowsSelection } from './selection.js';
-import { EmptyCell, isPasteAllowed, isActive, deleteColumnDimension, deleteRowDimension, insertColumnDimension, insertRowDimension } from './util.js';
-import { COMMIT, DRAG_END, ON_MOUSE_UP, DRAG_START, SET_COLUMN_POSITION, SET_ROW_HEIGHT, KEY_DOWN, KEY_PRESS, BLUR, CLEAR, VIEW, EDIT, PASTE, CUT, COPY, SET_CELL_DIMENSIONS, SET_CELL_DATA, ACTIVATE, SELECT, SET_SELECTION, SELECT_ENTIRE_WORKSHEET, SELECT_ENTIRE_COLUMN, SELECT_ENTIRE_ROW, SET_CREATE_FORMULA_PARSER, SET_DATA, FORMATE_PAINTER, BACKGROUND_COLOR, COLOR, TEXT_ALIGN, FONT_FAMILY, FONT_SIZE, UNDERLINE_TYPE, BORDER_TYPE, ITALIC, BOLD, DELETE_COLUMN, DELETE_ROW, ADD_COLUMN_RIGHT, ADD_COLUMN_LEFT, ADD_ROW_BOTTOM, ADD_ROW_TOP, SET_AUTO_FILL, SET_EDITABLE } from './actions.js';
+import { getFontString, measureText, EmptyCell, isPasteAllowed, debouncedResize, isActive, deleteColumnDimension, deleteRowDimension, insertColumnDimension, insertRowDimension } from './util.js';
+import { BATCH_RESIZE, COMMIT, DRAG_END, ON_MOUSE_UP, DRAG_START, SET_COLUMN_POSITION, SET_COLUMN_WIDTH, KEY_DOWN, KEY_PRESS, BLUR, CLEAR, batchResize, VIEW, EDIT, PASTE, CUT, COPY, SET_CELL_DIMENSIONS, SET_CELL_DATA, ACTIVATE, SELECT, SET_SELECTION, SELECT_ENTIRE_WORKSHEET, SELECT_ENTIRE_COLUMN, SELECT_ENTIRE_ROW, SET_CREATE_FORMULA_PARSER, SET_DATA, FORMATE_PAINTER, BACKGROUND_COLOR, COLOR, TEXT_ALIGN, FONT_FAMILY, FONT_SIZE, UNDERLINE_TYPE, BORDER_TYPE, ITALIC, BOLD, DELETE_COLUMN, DELETE_ROW, ADD_COLUMN_RIGHT, ADD_COLUMN_LEFT, ADD_ROW_BOTTOM, ADD_ROW_TOP, SET_AUTO_FILL, SET_EDITABLE } from './actions.js';
 import { Model, updateCellValue } from './engine/engine.js';
 import { createFormulaParser } from './engine/formula.js';
 import { commit, dragEndFormatePainter, dragEndAutoFill, cellFormatePainter, isActiveReadOnly, getKeyDownHandler, edit, clear, blur, view, applyFormatePainter, applyBackgroundColorToCells, applyColorToCells, applyTextAlign, applyFontFamily, applyFontSize, applyUnderlineToCells, applyBorderToCells, applyItalicToCells, applyBoldToCells } from './reducerFunctions.js';
@@ -112,17 +112,26 @@ function reducer(state, action) {
         if (checkEmpty(selectedRow)) {
           return state;
         }
-        selectedRow = row ?? selectedRow;
+        const insertIndex = (row ?? selectedRow) + 1;
         let updatedData = [...model.data];
         const newRow = Array(updatedData[0]?.length || 0).fill(EmptyCell);
-        updatedData.splice((row ?? selectedRow) + 1, 0, newRow);
+        updatedData.splice(insertIndex, 0, newRow);
         const updatedModel = new Model(model.createFormulaParser, updatedData);
+        const newSelectedRow = insertIndex;
+        const newSelectedColumn = selectedColumn ?? 0;
+        const newActive = updatedData.length > 0 ? {
+          row: newSelectedRow,
+          column: newSelectedColumn
+        } : null;
+        const newSelected = updatedData.length > 0 ? new EntireRowsSelection(newSelectedRow, newSelectedRow) : new EmptySelection();
         return {
           ...state,
           model: updatedModel,
-          selectedRow: (row ?? selectedRow) + 1,
-          selectedColumn: selectedColumn,
-          rowDimensions: insertRowDimension(rowDimensions, (row ?? selectedRow) + 1, 32)
+          selectedRow: newSelectedRow,
+          selectedColumn: newSelectedColumn,
+          selected: newSelected,
+          active: newActive,
+          rowDimensions: insertRowDimension(rowDimensions, insertIndex, 32)
         };
       }
     case ADD_COLUMN_LEFT:
@@ -169,18 +178,27 @@ function reducer(state, action) {
         if (checkEmpty(column ?? selectedColumn)) {
           return state;
         }
-        selectedColumn = column ?? selectedColumn;
+        const insertIndex = (column ?? selectedColumn) + 1;
         let updatedData = [...model.data];
         updatedData = updatedData.map(row => {
-          return [...row.slice(0, (column ?? selectedColumn) + 1), EmptyCell, ...row.slice((column ?? selectedColumn) + 1)];
+          return [...row.slice(0, insertIndex), EmptyCell, ...row.slice(insertIndex)];
         });
         const updatedModel = new Model(model.createFormulaParser, updatedData);
+        const newSelectedRow = selectedRow ?? 0;
+        const newSelectedColumn = insertIndex;
+        const newActive = updatedData.length > 0 ? {
+          row: newSelectedRow,
+          column: newSelectedColumn
+        } : null;
+        const newSelected = updatedData.length > 0 ? new EntireColumnsSelection(newSelectedColumn, newSelectedColumn) : new EmptySelection();
         return {
           ...state,
           model: updatedModel,
-          selectedRow: selectedRow,
-          selectedColumn: (column ?? selectedColumn) + 1,
-          columnDimensions: insertColumnDimension(columnDimensions, (column ?? selectedColumn) + 1, columnWidth)
+          selectedRow: newSelectedRow,
+          selectedColumn: newSelectedColumn,
+          selected: newSelected,
+          active: newActive,
+          columnDimensions: insertColumnDimension(columnDimensions, insertIndex, columnWidth)
         };
       }
     case DELETE_ROW:
@@ -189,14 +207,13 @@ function reducer(state, action) {
           selectedRow,
           selectedColumn,
           model,
-          rowDimensions
+          rowDimensions,
+          copied
         } = state;
         const {
           row
         } = action;
-        if (checkEmpty(selectedRow)) {
-          return state;
-        }
+        if (checkEmpty(selectedRow)) return state;
         const deleteIndex = row ?? selectedRow;
         let updatedData = [...model.data];
         updatedData.splice(deleteIndex, 1);
@@ -208,6 +225,10 @@ function reducer(state, action) {
           column: newSelectedColumn
         } : null;
         const newSelected = updatedData.length > 0 ? new EntireRowsSelection(newSelectedRow, newSelectedRow) : new EmptySelection();
+        let newCopied = copied;
+        if (copied && copied.start.row <= deleteIndex && copied.end.row >= deleteIndex) {
+          newCopied = null;
+        }
         return {
           ...state,
           model: updatedModel,
@@ -215,6 +236,7 @@ function reducer(state, action) {
           selectedColumn: newSelectedColumn,
           selected: newSelected,
           active: newActive,
+          copied: newCopied,
           rowDimensions: deleteRowDimension(rowDimensions, deleteIndex)
         };
       }
@@ -224,7 +246,8 @@ function reducer(state, action) {
           selectedRow,
           selectedColumn,
           model,
-          columnDimensions
+          columnDimensions,
+          copied
         } = state;
         const {
           column
@@ -233,13 +256,25 @@ function reducer(state, action) {
         const deleteIndex = column ?? selectedColumn;
         const updatedData = model.data.map(row => row.filter((_, cellIndex) => cellIndex !== deleteIndex));
         const updatedModel = new Model(model.createFormulaParser, updatedData);
-        const newSelectedRow = selectedRow || 0;
+        const newSelectedRow = selectedRow !== null ? selectedRow : 0;
         const newSelectedColumn = deleteIndex > 0 ? deleteIndex - 1 : 0;
+        const newActive = updatedData.length > 0 ? {
+          row: newSelectedRow,
+          column: newSelectedColumn
+        } : null;
+        const newSelected = updatedData.length > 0 ? new EntireColumnsSelection(newSelectedColumn, newSelectedColumn) : new EmptySelection();
+        let newCopied = copied;
+        if (copied && copied.start.column <= deleteIndex && copied.end.column >= deleteIndex) {
+          newCopied = null;
+        }
         return {
           ...state,
           model: updatedModel,
           selectedRow: newSelectedRow,
           selectedColumn: newSelectedColumn,
+          selected: newSelected,
+          active: newActive,
+          copied: newCopied,
           columnDimensions: deleteColumnDimension(columnDimensions, deleteIndex)
         };
       }
@@ -290,9 +325,59 @@ function reducer(state, action) {
         } = action.payload;
         const selectedRange = state.selected.toRange(state.model.data);
         const updatedData = applyFontSize(state.model.data, selectedRange, value, state.editable);
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Auto-resize all rows and columns on initial load
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        // Auto-resize all rows
+        updatedData.forEach((rowData, rowIndex) => {
+          let maxHeight = 32; // Default row height
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[rowIndex] = {
+            ...(newRowDimensions[rowIndex] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Auto-resize all columns
+        const columnCount = updatedData[0] ? updatedData[0].length : 0;
+        for (let col = 0; col < columnCount; col++) {
+          let maxWidth = 100; // Default column width
+          updatedData.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        }
         return {
           ...state,
-          model: new Model(state.model.createFormulaParser, updatedData)
+          model: updatedModel,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
         };
       }
     case FONT_FAMILY:
@@ -381,11 +466,61 @@ function reducer(state, action) {
         } = action.payload;
         const nextActive = state.active && has(state.active, data) ? state.active : null;
         const nextSelected = state.selected.normalizeTo(data);
+        const updatedModel = new Model(state.model.createFormulaParser, data);
+        // Auto-resize all rows and columns on initial load
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        // Auto-resize all rows
+        data.forEach((rowData, rowIndex) => {
+          let maxHeight = 32; // Default row height
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[rowIndex] = {
+            ...(newRowDimensions[rowIndex] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Auto-resize all columns
+        const columnCount = data[0] ? data[0].length : 0;
+        for (let col = 0; col < columnCount; col++) {
+          let maxWidth = 100; // Default column width
+          data.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        }
         return {
           ...state,
-          model: new Model(state.model.createFormulaParser, data),
+          model: updatedModel,
           active: nextActive,
-          selected: nextSelected
+          selected: nextSelected,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
         };
       }
     case SET_CREATE_FORMULA_PARSER:
@@ -502,9 +637,64 @@ function reducer(state, action) {
         if (isActiveReadOnly(state) || !state.editable) {
           return state;
         }
+        const updatedModel = updateCellValue(state.model, active, cellData);
+        // Only auto-resize if the cell value actually changed
+        const previousCell = get(active, state.model.data);
+        const valueChanged = previousCell?.value !== cellData.value;
+        let newRowDimensions = {
+          ...state.rowDimensions
+        };
+        let newColumnDimensions = {
+          ...state.columnDimensions
+        };
+        if (valueChanged) {
+          debouncedResize(`resize-${active.row}-${active.column}`, () => {
+            // Auto-resize row
+            const rowData = updatedModel.data[active.row] || [];
+            let maxRowHeight = 32; // Default row height
+            // Only check this row's cells for height calculation
+            rowData.forEach((cell, _colIndex) => {
+              if (cell && cell.value) {
+                const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+                const lineHeight = Math.max(fontSize * 1.2, 18);
+                const lines = String(cell.value).split('\n').length;
+                const cellHeight = lineHeight * lines + 10;
+                maxRowHeight = Math.max(Number(cell?.style?.height) ?? maxRowHeight, cellHeight);
+              }
+            });
+            newRowDimensions[active.row] = {
+              ...(newRowDimensions[active.row] || {
+                top: 0,
+                height: 32
+              }),
+              height: maxRowHeight
+            };
+            // Auto-resize column
+            let maxColWidth = 100; // Default column width
+            // Only check this column's cells for width calculation
+            updatedModel.data.forEach((rowData, _rowIndex) => {
+              const cell = rowData[active.column];
+              if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+                const font = getFontString(cell);
+                const textWidth = measureText(String(cell.value), font) + 20;
+                maxColWidth = Math.max(Number(cell?.style?.width) ?? maxColWidth, textWidth);
+              }
+            });
+            newColumnDimensions[active.column] = {
+              ...(newColumnDimensions[active.column] || {
+                left: 0,
+                width: 100
+              }),
+              width: maxColWidth
+            };
+          }, 300 // 300ms delay
+          );
+        }
         return {
           ...state,
-          model: updateCellValue(state.model, active, cellData),
+          model: updatedModel,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions,
           lastChanged: active
         };
       }
@@ -514,28 +704,61 @@ function reducer(state, action) {
           point,
           dimensions
         } = action.payload;
-        const prevRowDimensions = state.rowDimensions[point.row];
-        const prevColumnDimensions = state.columnDimensions[point.column];
-        if (prevRowDimensions && prevColumnDimensions && prevRowDimensions.top === dimensions.top && prevRowDimensions.height === dimensions.height && prevColumnDimensions.left === dimensions.left && prevColumnDimensions.width === dimensions.width) {
-          return state;
+        let newState = {
+          ...state
+        };
+        let updatedData = state.model.data;
+        const cell = get(point, updatedData) || EmptyCell;
+        const newStyle = {
+          ...cell.style
+        };
+        let styleChanged = false;
+        if (dimensions.width !== undefined) {
+          newStyle.width = dimensions.width;
+          styleChanged = true;
         }
-        return {
-          ...state,
-          rowDimensions: {
-            ...state.rowDimensions,
-            [point.row]: {
-              top: dimensions.top,
-              height: dimensions.height
+        if (dimensions.height !== undefined) {
+          newStyle.height = dimensions.height;
+          styleChanged = true;
+        }
+        if (styleChanged) {
+          const newCell = {
+            ...cell,
+            style: newStyle
+          };
+          updatedData = set(point, newCell, updatedData);
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Update column dimensions if width/left provided
+        if (dimensions.width !== undefined && dimensions.left !== undefined) {
+          newState = {
+            ...newState,
+            columnDimensions: {
+              ...state.columnDimensions,
+              [point.column]: {
+                left: dimensions.left,
+                width: dimensions.width
+              }
             }
-          },
-          columnDimensions: {
-            ...state.columnDimensions,
-            [point.column]: {
-              left: dimensions.left,
-              width: dimensions.width
+          };
+        }
+        // Update row dimensions if height/top provided
+        if (dimensions.top !== undefined && dimensions.height !== undefined) {
+          newState = {
+            ...newState,
+            rowDimensions: {
+              ...state.rowDimensions,
+              [point.row]: {
+                top: dimensions.top,
+                height: dimensions.height
+              }
             }
-          }
-        };
+          };
+        }
+        return {
+          ...newState,
+          model: updatedModel
+        }; // Include updated model
       }
     case COPY:
     case CUT:
@@ -665,9 +888,36 @@ function reducer(state, action) {
       {
         return view(state);
       }
+    // In reducer.ts, update the CLEAR action for better performance
     case CLEAR:
       {
-        return clear(state);
+        const selectedRange = state.selected.toRange(state.model.data);
+        if (!selectedRange || !state.editable) {
+          return state;
+        }
+        let updatedData = state.model.data;
+        const commit = [];
+        // Track which rows and columns were cleared
+        const clearedRows = new Set();
+        const clearedColumns = new Set();
+        for (const point of selectedRange) {
+          const cell = get(point, updatedData) || null;
+          commit.push({
+            prevCell: cell,
+            nextCell: null
+          });
+          updatedData = set(point, EmptyCell, updatedData);
+          // Track cleared rows and columns
+          clearedRows.add(point.row);
+          clearedColumns.add(point.column);
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
+        // Use batch resize for better performance
+        return reducer({
+          ...state,
+          model: updatedModel,
+          lastCommit: commit
+        }, batchResize(Array.from(clearedRows), Array.from(clearedColumns)));
       }
     case BLUR:
       {
@@ -713,23 +963,56 @@ function reducer(state, action) {
         }
         return state;
       }
-    case SET_ROW_HEIGHT:
+    case SET_COLUMN_WIDTH:
       {
         const {
-          row,
-          height
+          column,
+          width
         } = action.payload;
-        const prevDimensions = state.rowDimensions[row] || {
-          top: 0};
+        const prevDimensions = state.columnDimensions[column] || {
+          left: 0};
+        // Narrow first
+        if (!state.model.data) {
+          return {
+            ...state,
+            columnDimensions: {
+              ...state.columnDimensions,
+              [column]: {
+                left: prevDimensions.left,
+                width
+              }
+            }
+          };
+        }
+        let updatedData = state.model.data ?? [];
+        for (let r = 0; r < updatedData.length; r++) {
+          if (updatedData[r] && updatedData?.[r]?.length > column) {
+            const point = {
+              row: r,
+              column
+            };
+            const cell = get(point, updatedData) ?? EmptyCell;
+            const newCell = {
+              ...cell,
+              style: {
+                ...(cell.style ?? {}),
+                width
+              }
+            };
+            updatedData = set(point, newCell, updatedData);
+          }
+        }
+        const updatedModel = new Model(state.model.createFormulaParser, updatedData);
         return {
           ...state,
-          rowDimensions: {
-            ...state.rowDimensions,
-            [row]: {
-              top: prevDimensions.top,
-              height
+          columnDimensions: {
+            ...state.columnDimensions,
+            [column]: {
+              left: prevDimensions.left,
+              width
             }
-          }
+          },
+          model: updatedModel
         };
       }
     case SET_COLUMN_POSITION:
@@ -867,6 +1150,69 @@ function reducer(state, action) {
           ...commit(changes)
         };
       }
+    case BATCH_RESIZE:
+      {
+        const {
+          rows,
+          columns
+        } = action.payload;
+        const {
+          model,
+          rowDimensions,
+          columnDimensions
+        } = state;
+        let newRowDimensions = {
+          ...rowDimensions
+        };
+        let newColumnDimensions = {
+          ...columnDimensions
+        };
+        // Resize specified rows
+        rows.forEach(row => {
+          const rowData = model.data[row] || [];
+          let maxHeight = 32;
+          rowData.forEach((cell, _colIndex) => {
+            if (cell && cell.value) {
+              const fontSize = cell.style?.fontSize ? parseInt(cell.style.fontSize.toString().replace('px', '')) : 11;
+              const lineHeight = Math.max(fontSize * 1.2, 18);
+              const lines = String(cell.value).split('\n').length;
+              const cellHeight = lineHeight * lines + 10;
+              maxHeight = Math.max(Number(cell?.style?.height) ?? maxHeight, cellHeight);
+            }
+          });
+          newRowDimensions[row] = {
+            ...(newRowDimensions[row] || {
+              top: 0,
+              height: 32
+            }),
+            height: maxHeight
+          };
+        });
+        // Resize specified columns
+        columns.forEach(col => {
+          let maxWidth = 100;
+          model.data.forEach((rowData, _rowIndex) => {
+            const cell = rowData[col];
+            if (cell && cell.value && !['file'].includes(cell?.inputType?.type ?? 'text')) {
+              const font = getFontString(cell);
+              const textWidth = measureText(String(cell.value), font) + 20;
+              maxWidth = Math.max(Number(cell?.style?.width) ?? maxWidth, textWidth);
+            }
+          });
+          newColumnDimensions[col] = {
+            ...(newColumnDimensions[col] || {
+              left: 0,
+              width: 100
+            }),
+            width: maxWidth
+          };
+        });
+        return {
+          ...state,
+          rowDimensions: newRowDimensions,
+          columnDimensions: newColumnDimensions
+        };
+      }
     default:
       throw new Error('Unknown action');
   }