Graph Support- Visualize your data with dynamic graphing capabilities
- Create various types of charts directly within the spreadsheet to better represent and analyze your data
Multiple Excel Files with Resizability- Open and manage multiple Excel files simultaneously
- Each spreadsheet is resizable, allowing you to adjust the view for a more convenient workflow
Marching Ant Selection- Highlight selected cells with a marching ants animation, making it easier to distinguish and work with selected areas
Formula Support- Leverage built-in formulas to perform automatic calculations
- Supports various formula types to enhance data analysis
Zoom In/Out Functionality- Zoom in and out within individual sheets to better view or edit data, offering a more flexible and adaptable interface
Copy and Cut Features- Easily copy or cut cell contents and move data across different sections or sheets with familiar clipboard operations
Layout Functionalities- Customize the layout of your sheets, including alignment, text formatting, and overall structure, ensuring your data looks well-organized
Row and Column Shift- Shift rows and columns effortlessly, allowing quick rearrangements of your data without manual reentry
Add and Delete Rows/Columns- Dynamically add or delete rows and columns as needed to accommodate growing or shrinking datasets
Multiple Sheets- Work with multiple sheets within a single Excel file, enabling better data categorization and management
Fill Values Based on Pattern- Automate repetitive data entry by filling cells based on a detected pattern, making workflows faster and more efficient
CSV File Upload- Upload and import CSV files directly into the spreadsheet, allowing seamless integration of external data
Search Functionality- Quickly search within the spreadsheet for specific data points or cell references, streamlining navigation through large datasets
Find and Replace- Easily find and replace text or values within the spreadsheet, helping update or correct large amounts of data with minimal effort
RumbleSheet/
├── index.html
├── assets/
│ ├── locales/
│ │ └── en-us.json
│ ├── styles/
│ │ └── main.css
│ └── images/
│ └── logo.png
├── src/
│ ├── core/
│ │ ├── initiator.ts
│ │ └── eventManager.ts
│ ├── excel/
│ │ ├── excel.ts
│ │ ├── components/
│ │ │ ├── sheetRenderer.ts
│ │ │ ├── helper.ts
│ │ │ └── scroll.ts
│ │ ├── feature/
│ │ │ ├── cellFunctionality/
│ │ │ │ └── *.ts
│ │ │ └── headerCellFunctionality/
│ │ │ └── *.ts
│ │ ├── plugins/
│ │ │ └── graph/
│ │ │ │ └── *.ts
│ │ │ └── file/
│ │ │ └── *.ts
│ │ ├── ribbon/
│ │ │ ├── ribbon.js
│ │ │ ├── tooltipManager.ts
│ │ │ └── customTooltip.ts
│ │ ├── theme/
│ │ │ └── themeManager.ts
│ │ └── dataStructures/
│ │ └── sparseMatrix.ts
│ └── tests/
│ ├── core/
│ └── excel/
│ ├── components/
│ ├── functionality/
│ ├── plugins/
│ ├── ribbon/
│ └── theme/
└── README.md
expand
initiator.js
| Properties | Description |
|---|---|
| rowContainer | The container element for the row |
| row | The current row number |
| col | The current column number |
| Grid_maker | The Grid_maker instance for managing the grid |
| Methods | Description |
|---|---|
| init() | Initializes the Excel component by constructing it |
| handleFileUpload() | Handles file upload and sends it to the server for processing |
| constructExcel() | Constructs the individual Excel cell |
| updateCurrExcel() | Updates the current Excel instance with the new row, column, and sheet object |
class Grid_maker - Manages header cells (both horizontal and vertical) for a spreadsheet-like component
| Properties | Description |
|---|---|
| mainContainer | The main container to hold the grid |
| maxRow | Maximum number of rows |
| maxCol | Maximum number of columns |
| selectedDiv | |
| currentRowCount | |
| rowArr |
| Methods | Description |
|---|---|
| init() | Initialize the grid maker and set up event listeners |
| setupEventListeners() | Set up the event listeners for various interactions in the grid |
| handleClick() | Handle click events to update the selected cell |
| deleteExcel() | Delete a specific Excel cell by row and column number |
| deleteRow() | Delete a specific row |
| handleFileUpload() | Handle the file upload event and send data to the server |
| updateCurrExcel() | Update the current active Excel cell |
| addNewRow() | Add a new row to the grid |
| addNewCol() | Add resize handles to rows and columns |
| addResizeHandles() | Gets the visible vertical header cells based on the scroll position |
| handleResize() | Handle the resize action for rows and columns |
eMaker.js
| Properties | Description |
|---|---|
| name | The name of the sheet |
| row | The row index of the sheet |
| col | The column index of the sheet |
| index | The index of the sheet |
| Methods | Description |
|---|---|
| createElements() | Creates the DOM elements for the sheet |
| createTopSection() | Creates the top section of the sheet |
| createMiddleSection() | Creates the middle section of the sheet |
| createScrollbar() | Creates a scrollbar element |
| Properties | Description |
|---|---|
| row | |
| col | |
| excel | |
| sheets | |
| Excel | |
| activeSheetIndex | |
| activeSheetIndex |
| Methods | Description |
|---|---|
| handleEvents() | Sets up event listeners |
| handleMouseDown() | Handles the mouse down event |
| createExcel() | Creates the Excel interface |
| updateContentArea() | Updates the content area to display the active sheet |
| createSheetBar() | Creates the sheet bar with tabs and controls |
| updateSheetTabs() | Updates the sheet tabs in the sheet bar |
| addSheet() | Adds a new sheet to the Excel interface |
| switchSheet() | Switches to a different sheet |
| removeSheet() | Removes a sheet from the Excel interface |
cellMaker.js
| Properties | Description |
|---|---|
| x | X position of the cell |
| y | Y position of the cell |
| width | Width of the cell |
| height | Height of the cell |
| value | The display value of the cell (column letter or row number) |
| row | Row number of the cell |
| col | Column number of the cell |
| isfetched | Indicates whether the cell's data has been fetched |
class HeaderCellManager - Manages header cells (both horizontal and vertical) for a spreadsheet-like component
| Properties | Description |
|---|---|
| sheet | |
| minCellSize | |
| baseCellWidth | |
| baseCellHeight | |
| scale | |
| visibleWidth | |
| visibleHeight | |
| horizontalHeaderCells | |
| verticalHeaderCells | |
| customHorizontalSizes | |
| customVerticalSizes |
| Methods | Description |
|---|---|
| update() | Updates the header cells based on the new visible dimensions and scale |
| resizeAllCells() | Resizes all cells based on the scale change |
| updateCells() | Updates the header cells' positions and dimensions |
| _updateHeaderCells() | Updates either horizontal or vertical header cells |
| numberToColumnName() | Converts a number to a column name (e.g., 1 -> A, 27 -> AA) |
| setCustomCellSize() | Sets a custom size for a cell in either the horizontal or vertical header |
| updateCellPositions() | Updates the positions of all cells in either horizontal or vertical headers |
| findStartingIndex() | Finds the starting index of the visible cells based on the scroll position |
| getHorizontalHeaderCells() | Gets the visible horizontal header cells based on the scroll position |
| getVerticalHeaderCells() | Gets the visible vertical header cells based on the scroll position |
| _getVisibleHeaderCells() | Gets visible header cells (horizontal or vertical) based on scroll position |
| getTotalWidth() | Gets the total width of all horizontal header cells |
| getTotalHeight() | Gets the total height of all vertical header cells |
| getCellSize() | Gets the size of a header cell |
sparseMatrixStructure.js
| Properties | Description |
|---|---|
| rowValue | The row index of the node |
| colValue | The column index of the node |
| value | The value stored in the node |
| nextRow | Reference to the next node in the row |
| nextCol | Reference to the next node in the column |
| prevRow | Reference to the previous node in the row |
| prevCol | Reference to the previous node in the column |
| textAlign | |
| textBaseline | |
| fontSize | |
| fontFamily | |
| color |
class SparseMatrix - SparseMatrix class that represents a sparse matrix using linked lists for efficient storage and manipulation
| Properties | Description |
|---|---|
| rowHeaders | Stores the head of each row's linked list |
| colHeaders | Stores the head of each column's linked list |
| Methods | Description |
|---|---|
| _cellExists() | Checks if a cell exists at the specified row and column |
| _shiftRow() | Shifts all nodes in a row to a new row index |
| _shiftColumn() | Shifts all nodes in a column to a new column index |
| _insertNodeInRow() | Inserts a new node into the correct position in a row's linked list |
| _insertNodeInColumn() | Inserts a new node into the correct position in a column's linked list |
| _shiftCellsRight() | Shifts all cells to the right starting from the specified row and column |
| _shiftCellsDown() | Shifts all cells down starting from the specified row and column |
| addRowInBetween() | Adds a new row in between existing rows by shifting rows down |
| addColumnInBetween() | Adds a new column in between existing columns by shifting columns to the right |
| deleteRow() | Deletes a row and shifts remaining rows up |
| deleteColumn() | Deletes a column and shifts remaining columns left |
| _removeNodeFromRow() | Removes a node from a specific row |
| _removeNodeFromColumn() | Removes a node from a specific column |
| createCell() | Creates a new cell at the specified row and column |
| insertCellShiftRight() | Inserts a cell with the specified value and shifts cells to the right |
| insertCellShiftDown() | Inserts a cell with the specified value and shifts cells down |
| getCellvalue() | Gets the value of a cell at the specified row and column |
| getCell() | Gets the node representing a cell at the specified row and column |
| setCell() | Sets the value of a cell. If the cell doesn't exist, it creates it |
| _updateCellValue() | Updates the value of an existing cell |
| printMatrixByRow() | Prints the sparse matrix row by row |
| printMatrixByColumn() | Prints the sparse matrix column by column |
calculationManager.js
class CalculationManager - Manages calculations such as sum and average for a set of selected cells in a spreadsheet
| Properties | Description |
|---|---|
| cellFunctionality | An object containing spreadsheet functionality like renderer and selected cells |
| cellUtility |
| Methods | Description |
|---|---|
| setupEventListeners() | Sets up event listeners for sum and average calculation buttons |
| calculateSum() | Calculates the sum of the values in the given cells, grouped by row and column |
| calculateAverage() | Calculates the average of the values in the given cells, grouped by row and column |
| drawTextOnCanvas() | Draws text on the canvas at the specified coordinates |
| showSum() | Displays the sum of the selected cells on the spreadsheet canvas |
| showAverage() | Displays the average of the selected cells on the spreadsheet canvas |
cellFunctionality.js
class CellFunctionality - Class responsible for managing cell interactions and functionality in the spreadsheet
| Properties | Description |
|---|---|
| sheetRenderer | The renderer responsible for rendering the spreadsheet |
| selectedCells | Array to store selected cells |
| isDragging | Track if the user is dragging |
| isScrolling | Track if scrolling is in progress |
| startPoint | Starting point for drag selection |
| marchingAntsActive | |
| dashOffset | |
| animationFrameId | |
| spreadsheetManager | Instantiate spreadsheetManager |
| cellUtility | Instantiate cellUtility |
| copyPasteManager | Instantiate copyPasteManager |
| calculationManager | Instantiate calculationManager |
| Methods | Description |
|---|---|
| setupEventListeners() | Set up event listeners for user interactions with the spreadsheet |
| handlePointerDown() | Handle the pointer down event for cell selection and drag initiation |
| handlePointerMove() | Handle pointer movement during drag operation |
| handlePointerUp() | Handle the pointer up event when the drag operation ends |
| handleKeyDown() | Handle keyboard shortcuts for cut and deselection |
| deselectCurrentCells() | Deselect the currently selected cells and hide the input element |
| handleCellClick() | Handle a cell click event to select or deselect a cell |
| updateSelectedCells() | Update the selected cells during a drag selection |
| handleKeyDown() | Handle keyboard shortcuts for cut and deselection |
| isCellInRect() | |
| handleScrolling() | Handle scrolling when the pointer is near the edges of the canvas |
| updateInputElement() | Update the input element for the currently selected cell |
| deselectCurrentCells() | Handle keyboard shortcuts for cut and deselection |
| hideInputElement() | Hide the input element on the spreadsheet |
| startMarchingAnts() | Start the marching ants animation around the selected cells |
| stopMarchingAnts() | Stop the marching ants animation |
| animateMarchingAnts() | Animate the marching ants effect |
| drawMarchingAnts() | |
| drawHighlight() | Draw a highlight or border around the selected cells |
| drawRectangleOnHeaderCanvas() | |
| drawLine() | Animate the marching ants effect |
| selectCell() | |
| removeEventListeners() | Remove event listeners to prevent memory leaks |
cellUtility.js
| Properties | Description |
|---|---|
| sheetRenderer | The renderer responsible for rendering the spreadsheet |
| spreadsheetManager | The manager for spreadsheet data |
| Methods | Description |
|---|---|
| getCellFromCoordinates() | Get the cell corresponding to the given x and y coordinates |
| getCanvasCoordinates() | Get the canvas coordinates from the mouse event |
| letterToNumber() | Convert a column letter to a column number |
| getCellsFromRect() | Get all cells within a rectangular area defined by two points |
| binarySearch() | Perform a binary search on the cells array |
formulaParser.js
| Properties | Description |
|---|---|
| matrix | Reference to the SparseMatrix containing spreadsheet data |
| Methods | Description |
|---|---|
| evaluateFormula() | Parse and evaluate the formula |
| getCellPosition() | Convert a cell reference (e.g., A1) into row and column indices |
| extractRange() | Utility function to extract the range from a formula (e.g., "A1:B4" from "SUM(A1:B4)") |
| getRangePosition() | Extract the start and end positions from a range (e.g., A1:B4) |
| handleSum() | Handle SUM function by calculating the sum of values in a range |
| handleMin() | Handle MIN function by finding the minimum value in a range |
| handleMax() | Handle MAX function by finding the maximum value in a range |
| handleAverage() | Handle AVERAGE function by calculating the average of values in a range |
graph.js
class Graph - Class responsible for generating and managing graphs based on selected cells in a spreadsheet
| Properties | Description |
|---|---|
| sheetRenderer | Reference to the sheet renderer, containing canvas and cell functionality |
| Methods | Description |
|---|---|
| init() | Initialize event listeners for graph buttons and handle user interactions |
| handleEvents() | Handles the events related to dragging and mouse interactions for the graph window |
| print() | Collects and organizes selected cells from the spreadsheet for graphing |
| getGraphValue() | Generates the values and labels required to plot the graph based on selected cells |
| isHorizantalSizeBigger() | Determines whether the horizontal size (number of columns) is larger than the vertical size (number of rows) |
| destroyGraph() | Destroys the current graph if it exists |
| drawBarGraph() | Draws a bar graph based on the selected cell data |
| drawLineGraph() | Draws a line graph based on the selected cell data |
| drawPieGraph() | Draws a pie chart based on the selected cell data |
| dragChart() | Handles dragging of the graph window |
headerCellFuctionalities.js
class HeaderCellFunctionality - Handles the functionality of header cells, such as resizing, selecting, and context menu actions
| Properties | Description |
|---|---|
| sheetRenderer | Reference to the sheet renderer, containing canvas and cell functionality |
| cellFunctionality | |
| resizeThreshold | pixels from the edge to trigger resize |
| isResizing | |
| resizeStart | |
| resizeType | 'row' or 'column' |
| resizeIndex | |
| currentResizePosition | |
| isheaderSelection | |
| isSelecting | Track if user is selecting |
| selectedRowIndex | Single selected row |
| selectedColIndex | Single selected column |
| selectedCellsRange | Range selection for drag |
| isDraggingForSelection | Track drag for multi-selection |
| Methods | Description |
|---|---|
| setupEventListeners() | Sets up the event listeners for canvas and window interactions |
| handleRightClick() | Handles right-click context menu actions for adding or deleting rows/columns |
| handleContextMenuAction() | Performs the action based on the selected context menu option |
| handleHeaderSelection() | Handles the header selection based on user clicks or drags |
| handleDragForSelection() | Handles mouse movement for drag-based header selection |
| handleMouseUp() | Handles mouse-up events, ending resizing or dragging operations |
| drawHeaderSelection() | Draws the header selection and clears previously selected cells |
| redrawHeaders() | Redraws the headers for both horizontal and vertical axes |
| highlightRange() | Highlights the selected range of header cells in either the horizontal or vertical direction |
| getfullClickedHeaderCell() | Retrieves the full clicked header cell based on the provided position |
| getClickedHeaderCell() | Returns the index of the clicked header cell based on position |
| getResizeEdge() | Determines whether the mouse is near the edge of a header cell for resizing |
| handleDragForShifting() | Handles the dragging of rows or columns for shifting |
| handleMouseMove() | Handles mouse movement to update the cursor for resizing or dragging |
| handleMouseDown() | Handles mouse down event on header cells to initiate dragging, resizing, or selection |
| handleDrag() | Handles dragging action during resize or selection |
| applyResize() | Applies the resize changes after the user has finished resizing a header cell |
| removeEventListeners() | Removes event listeners from the canvas and document to prevent memory leaks |
scroll.js
| Properties | Description |
|---|---|
| sheetRenderer | Reference to the sheet renderer, containing canvas and cell functionality |
| scrollX | |
| scrollY | |
| maxScrollX | |
| maxScrollY | |
| isDragging | 'row' or 'column' |
| isScrollbarDragging | |
| lastMouseX | |
| lastMouseY |
| Methods | Description |
|---|---|
| setupEventListeners() | Sets up event listeners for scrolling and resizing actions |
| handleScrollBarMouseDown() | Handles the mousedown event on scroll bars to initiate dragging |
| handleMouseMove() | Handles the mousemove event to perform scrolling or scroll bar dragging |
| handleMouseUp() | Handles the mouseup event to end dragging actions |
| handleWheel() | Handles the wheel event for zooming or scrolling |
| handleMouseDown() | Handles the mousedown event to initiate dragging |
| updateMaxScroll() | Updates the maximum scroll values based on content and viewport dimensions |
| updateScrollBars() | Updates the appearance of scroll bars based on current scroll position |
| scroll() | Scrolls the content by the given delta values |
| checkScrollPosition() | Checks if the scroll position has reached a threshold to expand content |
| expandContent() | Expands content based on the scroll direction and updates scroll bars |
| getScroll() | Gets the current scroll position |
| destroy() | Cleans up resources and removes event listener |
| handleMouseDown() | Handles mouse down event on header cells to initiate dragging, resizing, or selection |
| handleDrag() | Handles dragging action during resize or selection |
| applyResize() |
spreadsheetManager.js
class SpreadsheetManager - Manages spreadsheet operations such as handling cell input, updating the sparse matrix, and evaluating formulas within a grid
| Properties | Description |
|---|---|
| cellFunctionality | Object containing the cell functionality including sheet renderer and selected cell |
| sheetRenderer | |
| sparseMatrix | |
| FormulaParser |
| Methods | Description |
|---|---|
| setupInputEventListener() | Sets up event listeners for the input element related to cell changes |
| handleInputChange() | Handles changes in the input value and updates the sparse matrix |
| handleKeyDown() | Handles the keydown event, allowing the Enter key to finalize cell editing |
| handleInputBlur() | Handles when the input loses focus (blur event) and finalizes the cell value |
| updateCellValue() | Updates the value of the selected cell in the sparse matrix |
| getValue() | Retrieves the value of a cell and evaluates any formulas |
| getCell() | Retrieves the raw cell data from the sparse matrix |
| letterToNumber() | Converts a column letter (e.g., 'A', 'B', 'AA') to a corresponding number |
We love contributions! To get started, please follow these simple steps to contribute to the project.
Create a new branch to work on your feature or bug fix. This helps us keep track of different contributions.
git checkout -b dev/nameAdd all the changed files.
git add .Commit your changes with some meaningful messages.
git commit -m 'Add some AmazingFeature'Push the code changes in your branch.
git push origin dev/nameOpen a PR against the stage branch.