Skip to content

Latest commit

 

History

History
1637 lines (1504 loc) · 40.5 KB

readme.md

File metadata and controls

1637 lines (1504 loc) · 40.5 KB

RumblesheetJS

Table of Contents

🚀 Features

  • 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

📚 Documentation

Directory Structure

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

1.0 initiator.js

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

2.1 eMaker.js

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

2.2 ribbonMaker.js

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

3.2.1 sheetRenderer.js

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

4.2 cellFunctionality.js

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

4.3 cellUtlity.js

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

4.4 forumulaParser.js

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

4.5 graph.js

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

4.7 scroll.js

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

🖋 Contributors

We love contributions! To get started, please follow these simple steps to contribute to the project.

Steps to Contribute:

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.

git checkout -b dev/name

2. Track all your files

Add all the changed files.

git add .

2. Commit your Changes

Commit your changes with some meaningful messages.

git commit -m 'Add some AmazingFeature'

3. Push to the Branch

Push the code changes in your branch.

git push origin dev/name

4. Open a Pull Request

Open a PR against the stage branch.