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

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

# Resize Module data flow

## What It Does
The Resize module manages user-driven and programmatic changes to row heights and column widths. Two-layer architecture: **Resize (UI)** handles pointer/double-click interactions, visual handlers, and tooltips; **Workbook Resize (Core)** applies size changes to the workbook model and emits change events.

## Entry Points

**Resize (UI Layer)**
- `wireEvents()` / constructor - wires header mouse and dblclick handlers.
- `mouseDownHandler()` - begins resize, creates visual resize handle.
- `mouseMoveHandler()` - updates visual position while dragging and shows tooltip.
- `mouseUpHandler()` - finalizes resize, removes handlers and visual elements.
- `dblClickHandler()` - triggers autofit for a column or row.
- `setTarget()` - determines whether pointer is near an edge (col/row resize cursors).
- `createResizeHandler()` - injects DOM resize handle and initializes tooltip.
- `resizeTooltip()` - creates/updates the header size tooltip during drag.
- `setAutofit()` - measures content and computes best-fit size.
- `showHiddenColumns()` - reveal hidden columns and optionally set widths.

**Workbook (Core Layer)**
- `setResize(idx, viewportIdx, value, isCol, parent)` - low-level resize setter invoked by UI.
- `setColumn(sheet, index, { width, customWidth })` - persist column width.
- `setRow(sheet, index, { height, customHeight })` - persist row height.
- `getColumnWidth(sheet, idx)` / `getRowHeight(sheet, idx)` - read current sizes for calculations.
- `getSheet(parent, sheetIdx)` - fetch sheet model for operations.
- `getFilterRange` notification - used to compute floating element width constraints.
- Model helpers: `isHiddenCol`, `isHiddenRow`, `getRangeIndexes`, `getCellIndexes`, `getDPRValue` used by UI logic.

## Core Logic Flow

```
User action (mouse drag / mouse double-click / programmatic setAutoFit)
    ↓
Resize (UI) captures pointer events → setTarget() identifies resize target
    ↓
mouseDownHandler() → createResizeHandler() → attach mousemove/mouseup
    ↓
mouseMoveHandler() updates handle + resizeTooltip() shows live size
    ↓
mouseUpHandler() calls resizeOn() / setColWidth() / setRowHeight()
    ↓
resizeStart() → setResize(...) (Core) → setColumn()/setRow() persists model
    ↓
Core notifies: `completeAction`, `colWidthChanged`, `rowHeightChanged` → UI updates visual layout
```

## Operations Handled

1. Drag-resize (manual): pointer-driven change to a single column or row width/height.
2. Double-click autofit: measure cell contents across rows/columns, create a temporary DOM table to compute best-fit pixel size, then resize.
3. Unhide & resize: detect hidden columns/rows near edges and show/unhide them while resizing.
4. Resize with frozen panes: ensure correct handler sizing, z-index handling, and viewport-aware updates.
5. Tooltip & visual handler: show live size and position a floating tooltip while dragging.
6. Reapply formats: after column width changes, re-evaluate cells with `*` (star) formats and reapply if needed.
7. Floating element constraints: account for filters/floating UI when computing effective column width.
8. Skip-resize heuristics: small-header areas, `e-skip-resize`/`e-unhide-column` behaviors for edge cases.

## Resize Modes

| Mode | Behavior |
|------|----------|
| ManualResize | User drags handle, values updated immediately and persisted via `setColumn`/`setRow`. |
| AutoFit | Double-click: UI measures rendered content and resizes to fit text, using temp DOM measurement. |
| UnhideAndResize | Detects hidden neighbors; optionally unhides and applies width/height on resize. |
| ResizeFormattingPropagation | Column/row resize triggers `colWidthChanged`/`rowHeightChanged` to notify layout/formatting subsystems. |

## Validation & Safety

- **Protected sheets / read-only cells:** `setTarget()` and handlers verify sheet protection settings and avoid resizing when formatting is restricted; `beginAction`/`completeAction` allow cancellation.
- **Hidden rows/cols:** Detect and either skip or unhide depending on user action; avoid destructive changes when not intended.
- **Minimum size constraints:** UI enforces sensible minimums (e.g., 20px for rows, logic to prevent negative widths/heights).
- **Merged cells & viewport:** Respect merged ranges and frozen panes when computing indexes and viewport mapping.
- **Device Pixel Ratio (DPR):** Use `getDPRValue()` when computing thresholds to ensure visual parity on high-DPI displays.
- **Event cancellation:** `beginAction` is raised for autofit; handlers must respect the `cancel` flag.

## Desired Outputs

**User-Facing:**
- Autofit on double-click of header edge.
- Drag handle with live tooltip showing pixel size.
- Proper cursor change when hovering header edges.
- Hidden columns reveal when user intends to unhide via resize.
- No layout jank with frozen panes and floating UI elements.

**System-Level:**
- Workbook model updated via `setColumn`/`setRow` with `customWidth`/`customHeight` flags.
- Notifications emitted: `beginAction`, `completeAction`, `colWidthChanged`, `rowHeightChanged`, `hideShow`.
- Undo/redo-compatible change events recorded.
- Dependent systems (filter, autofill, formatting) revalidated after resize.
- Responsiveness to DPR and floating UI constraints to keep visual alignment.