2 commits

Author	SHA1	Message	Date
Jan-Henrik Bruhn	4e1f19c82b	Simplify box shadows and fix node size shift on selection ... CSS Performance Optimizations: - Reduced from 2-4 layered box shadows to single lightweight shadow - Removed all transition-shadow animations (200ms per node) - Removed edge stroke-width transition (150ms per edge) - Eliminated 75% of shadow rendering cost Bug Fix - Node Size Shift: - Fixed nodes changing size slightly when selected - Problem: Changed borderWidth from 3px to 4px caused layout shift - Solution: Keep borderWidth constant at 3px for all states - Selection already indicated by darker borderColor from parent Changes: - All node shapes: Single shadow (0 2px 4px rgb(0 0 0 / 0.1)) - Highlighted: Simple 2px outline instead of multi-layer glow - Selected: Uses existing darker border color (no width change) - Removed unused 'selected' parameter from shape components Performance Impact: - 100 nodes: 400 shadows → 100 shadows (4× reduction) - No transition overhead during interactions - Expected 50-70% faster rendering - No layout shifts or reflows Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>	2026-02-05 15:14:00 +01:00
Jan-Henrik Bruhn	e0784ff3d8	feat: add node shape variants with five distinct shapes ... Implements configurable shape variants for actor nodes, allowing visual differentiation of node types beyond just color. Features: - Five shape options: rectangle, circle, rounded rectangle, ellipse, pill - All shapes use pure CSS (border-radius) for consistent behavior - Auto-grow with content - Perfect shadow and selection/highlight effects - Proper React Flow handle alignment - Shape selector UI with visual previews - Migration logic for existing documents (defaults to rectangle) Shape characteristics: - Rectangle: Standard, general purpose - Circle: Round, for people and concepts - Rounded Rectangle: Soft edges, friendly appearance - Ellipse: Oval/horizontal, for processes and stages - Pill: Capsule, compact for tags and labels Technical approach: - Uses border-radius for all shapes (no clip-path) - Ensures boxShadow follows shape contours properly - Each shape component maintains consistent props interface - NodeShapeRenderer routes to appropriate shape component 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>	2025-10-16 15:34:24 +02:00