-
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
class Excel - Represents an Excel-like grid component
| 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
class Sheet - Represents a spreadsheet sheet
| 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 |
class EMaker - Represents a manager for an Excel-like sheet interface
| 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 |
3.1.1 headerCellStructure.js
cellMaker.js
class HeaderCell - Represents a single header cell in the spreadsheet
| 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 |
3.1.2 sparseMatrixStructure.js
sparseMatrixStructure.js
class Node - Represents a single node in a sparse matrix
| 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 |
4.1 calculationManager.js
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
class CellUtility - Utility class for handling cell operations in a spreadsheet
| 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
class FormulaParser - Class to parse and evaluate spreadsheet formulas
| 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 |
4.6 headerCellFunctionality.js
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
class Scroll - The Scroll class handles scrolling functionality within a spreadsheet
| 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() |
|
4.8 spreadsheetManager.js
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.
1. Create a Feature Branch
Create a new branch to work on your feature or bug fix. This helps us keep track of different contributions.
Add all the changed files.
Commit your changes with some meaningful messages.
git commit -m 'Add some AmazingFeature'
Push the code changes in your branch.
Open a PR against the stage branch.