69 lines
2.7 KiB
Markdown
69 lines
2.7 KiB
Markdown
# CLAUDE.md
|
|
|
|
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
|
|
|
## Project Overview
|
|
|
|
Interactive visualization tool built with Svelte 5 and Vite that demonstrates line segment intersections and rectangle area calculations. The application features a canvas-based grid where users can move a point (B) and see real-time updates of two rectangles formed with fixed points A(1,1) and C(6,7), along with their calculated areas.
|
|
|
|
## Development Commands
|
|
|
|
```bash
|
|
# Start development server with hot module replacement
|
|
npm run dev
|
|
|
|
# Build for production (outputs to dist/)
|
|
npm run build
|
|
|
|
# Preview production build locally
|
|
npm run preview
|
|
```
|
|
|
|
## Scripts
|
|
|
|
The `script/` folder contains utility scripts for development:
|
|
|
|
- **screenshot**: Captures a screenshot of the running dev server (localhost:5173) using Chrome headless mode
|
|
- Outputs to `screenshot.png` in the project root
|
|
- Requires Chrome/Chromium to be installed
|
|
- Dev server must be running before executing
|
|
- Usage: `./script/screenshot`
|
|
|
|
## Architecture
|
|
|
|
### Application Structure
|
|
|
|
- **src/App.svelte**: Main application component containing all visualization logic
|
|
- Canvas rendering system with 40px grid cells (8x8 grid, 320x320px canvas)
|
|
- Coordinate system conversion between canvas (top-left origin) and Cartesian (bottom-left origin)
|
|
- Real-time mouse tracking to update point B position
|
|
- Reactive calculations for rectangle dimensions and areas using Svelte 5's `$:` syntax
|
|
|
|
### Key Components
|
|
|
|
**Coordinate Systems**: Two coordinate transformations are critical:
|
|
- `toCanvasCoords(x, y)`: Converts Cartesian to canvas coordinates (inverts Y-axis)
|
|
- `toCartesianCoords(canvasX, canvasY)`: Converts canvas to Cartesian coordinates
|
|
|
|
**Canvas Drawing Functions**:
|
|
- `drawGrid()`: Renders 40px grid, axes, and labels
|
|
- `drawRectangle(x1, y1, x2, y2, color)`: Draws filled rectangles with opposite corners
|
|
- `drawLineSegment(x1, y1, x2, y2, color)`: Draws line segment AC with endpoints
|
|
- `drawUserPoint()`: Renders draggable point B with label
|
|
- `redraw()`: Main render function called on mount and when userPoint changes
|
|
|
|
**Reactive Calculations**: Rectangle areas update automatically using Svelte's reactive declarations when userPoint changes.
|
|
|
|
### Configuration
|
|
|
|
- **Vite**: Standard configuration with Svelte plugin
|
|
- **Svelte**: Uses vitePreprocess for TypeScript/PostCSS support
|
|
- **JavaScript**: ES modules with JSConfig enabling type checking in .js files
|
|
|
|
## Technical Notes
|
|
|
|
- Uses Svelte 5's `mount()` API (not legacy `new App()`)
|
|
- Canvas uses 2D context with manual rendering (no framework canvas binding)
|
|
- Styling is component-scoped with dynamic classes (`.largest` highlights larger rectangle)
|
|
- No external state management - all state is local to App.svelte
|