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

# 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

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

2.4 KiB Raw Blame History