@syncfusion/ej2-spreadsheet/docs/skills/action/notes.md

Feature-rich JavaScript Spreadsheet (Excel) control with built-in support for selection, editing, formatting, importing and exporting to Excel

# Note Module data flow

## What It Does
Note module manages sticky note functionality in spreadsheets. Creates, displays, edits, and manages notes attached to cells with visual indicators and connector lines. Notes are cell-specific and can be shown/hidden individually or all at once.

## Entry Points

**SpreadsheetNote Class**
- `addNote()` - Creates new note on active cell
- `editNote()` - Opens existing note for editing
- `deleteNote()` - Removes note from cell
- `showNote()` - Displays note container with connector line
- `removeNoteContainer()` - Hides note container
- Events: addNote, editNote, deleteNote, createNoteIndicator, showNote, removeNoteContainer, showHideNote, navigateNextPrevNote, showAllNotes

## Core Logic Flow

```
User Action (Add/Edit/Delete)
         ↓
addNote() / editNote() / deleteNote()
         ↓
getNoteByCellIndex() → Find or Create note
         ↓
createNoteContainer() → Render textarea
         ↓
createConnectorLine() → Draw connector from cell
         ↓
showNote() / removeNoteContainer() → Display/Hide
         ↓
processSheetNotes() → Sync to sheet array
```

## Operations Handled

1. **createNoteIndicator()** - Creates red triangle indicator:
   - Positions at top-right corner of cell
   - Handles overlapping elements (filters, etc.)
   - Prevents duplicate indicators
   - Supports RTL layout

2. **createNoteContainer()** - Renders note UI:
   - Creates textarea with styling (lightYellow bg, black text)
   - Generates unique ID for each note
   - Positions based on cell location and viewport
   - Handles RTL direction adjustments
   - Sets z-index for layering (5 normal, 6 focused)

3. **createConnectorLine()** - Canvas-based connector:
   - Draws line from cell corner to note
   - Adjusts line angle based on note position
   - Uses canvas context for drawing
   - Toggles visibility based on viewport

4. **showNote()** - Display logic:
   - Finds note by cell index
   - Updates container display (visible/hidden)
   - Handles scrolling-with-note behavior
   - Allows editing state

5. **mouseOver/mouseOut** - Hover behavior:
   - Shows note on hover if not manually visible
   - Hides note on mouse out (unless in edit)
   - Checks for other edit states before showing
   - Prevents overlapping note edit states

6. **State Management**:
   - `activeNoteCell` - Current selected note cell
   - `isShowAllNotes` - Global visibility toggle
   - `isNoteEditable` - Edit mode flag
   - Note properties: id, rowIdx, colIdx, text, isVisible


## Desired Outputs
- Red triangle indicator at cell corner
- Sticky note popup with text (120x120px default)
- Connector line from cell to note
- Hover tooltip behavior
- Show All Notes toggle

**System-Level:**
- Note stored in cell.notes array (ExtendedNoteModel)
- Note container in DOM with class 'e-addNoteContainer'
- Connector canvas with class 'e-connectorLine'
- activeNoteCell tracks current note
- Sheet.notes array sorted by row/col index
- Events: processSheetNotes, noteUndoRedo triggered
- Undo/redo records: add, edit, delete note
- Focus/blur handlers for z-index management