# XWUIGraph

The base graph viewport - an abstract pan/zoom/grid canvas with world-coordinate transforms that sits at the root of the graph family (`XWUIGraph` → `XWUIDiagram` → `XWUIFlowchart` / `XWUIChartGraph`). It owns the SVG world group, an HTML `nodesLayer` for subclasses to mount nodes into, a dot grid, optional minimap, and gesture-driven pan (left/middle/right toggles) and wheel-zoom (clamped by `minZoom`/`maxZoom`) - deliberately raw DOM/SVG because gesture-heavy canvases need incremental transforms and sub-frame redraws. Subclasses override hooks like `getWorldContentBounds()`, `paintMinimapContent()`, and `onGraphScaffoldReady()`; the concrete `XWUIGraphViewport` export (custom element `<xwui-graph>`) instantiates the viewport standalone and exposes `setZoom()`, `getZoom()`, `getPan()`, and `fitView()`. Use `XWUIGraphViewport` for a bare pannable surface; extend `XWUIGraph` to build anything that draws nodes and edges.

## Basic Usage

A bare viewport with a dot grid and wheel-zoom, driven programmatically via `setZoom()` / `getPan()`.

```example
file: examples/BasicUsage.ts
html: examples/BasicUsage.html
title: Basic Usage
description: Instantiates XWUIGraphViewport with an initial zoom/pan, then sets zoom to 1.5 and reads back the view state.
```

## Minimap Navigation

A bare viewport with the bottom-right minimap turned on and a widened minZoom/maxZoom range, then zoomed to 2x programmatically.

```example
file: examples/MinimapNavigation.ts
html: examples/MinimapNavigation.html
title: Minimap Navigation
description: A bare viewport with the bottom-right minimap turned on and a widened minZoom/maxZoom range, then zoomed to 2x programmatically.
```

## Pan Controls + Zoom Clamp

A viewport configured to pan on right-click drag (left-click freed), with a tight grid; a setZoom(10) call is clamped to the configured maxZoom of 2.

```example
file: examples/PanControls.ts
html: examples/PanControls.html
title: Pan Controls + Zoom Clamp
description: A viewport configured to pan on right-click drag (left-click freed), with a tight grid; a setZoom(10) call is clamped to the configured maxZoom of 2.
```

```api
```