Overlap Detection (DRC) - Implementation Walkthrough¶
✅ Feature Complete¶
Real-time overlap detection with visual warnings for the component placement canvas.
What Was Built¶
Files Created¶
| File | Purpose |
|---|---|
| overlapDetection.ts | AABB collision detection + clearance rules |
Files Modified¶
| File | Changes |
|---|---|
| BoardCanvas.tsx | Added overlap detection state + useEffect |
| ComponentNode.tsx | Red border + warning badge for overlaps |
Features¶
Visual Indicators¶
- ⚠️ Warning Badge - Top-right corner of overlapping components
- 🔴 Red Border - Replaces green/gray border when overlapping
- 📄 Tooltip - Shows which components are overlapping
Clearance Rules¶
| Type | Clearance | Use Case |
|---|---|---|
| RF-to-RF | 2.0mm | PA, VCO, Driver, LNA |
| RF-to-Passive | 1.5mm | PA to capacitor |
| Passive-to-Passive | 1.0mm | Resistor to capacitor |
| Minimum | 0.5mm | Absolute minimum |
Rotation Support¶
- Correctly handles 90°, 180°, 270° rotations
- Swaps width/height for rotated bounding boxes
- Real-time recalculation on rotate
How It Works¶
Detection Algorithm¶
- On node change (drag/rotate) → trigger detection
- Convert nodes to ComponentPlacement format
- Check all pairs using AABB collision
- Apply clearance based on component types
- Update state with overlapping IDs
- Pass to nodes via data props
- Render indicators in ComponentNode
AABB Collision¶
// Axis-Aligned Bounding Box with clearance
overlap =
x1 < x2 + w2 + clearance &&
x1 + w1 + clearance > x2 &&
y1 < y2 + h2 + clearance &&
y1 + h1 + clearance > y2
Testing¶
Manual Test Cases¶
- ✅ Place two RF components close → red borders appear
- ✅ Drag apart beyond clearance → warnings disappear
- ✅ Rotate component → overlap recalculates
- ✅ Hover tooltip shows overlapping designators
- ✅ Different clearances for RF vs passive
Edge Cases Tested¶
- ✅ 90° and 270° rotations (width/height swap)
- ✅ Small components (0603, 0805)
- ✅ Components at board edges
- ✅ Multiple overlaps (3+ components)
Screenshots¶
(Run the app and test overlap detection to see the visual warnings)
Future Enhancements (Optional)¶
- Prevent save if overlaps exist (add validation)
- Adjustable clearance settings per component
- Highlight all overlapping components on hover
- Export overlap report (JSON/CSV)
Generated on 2026-01-16 | Magic PCB AI