From 139de93a8ca38bdb2af668187e4fa3ab7dcf0826 Mon Sep 17 00:00:00 2001 From: Claude Date: Sat, 21 Feb 2026 17:26:24 +0000 Subject: [PATCH] docs: update README and CLAUDE.md to reflect current codebase - Add KinematicsGraphNode to view file tables in both docs - Add graph/ directory with its files to README architecture section - Add kinematics graph to README features list - Remove stale "trail circle rendering" from GraphDataManager description - Correct GraphInteractionHandler.ts line count (~930, not ~1,150) https://claude.ai/code/session_01P2refHzKWPXx6iUmkM4Shy --- CLAUDE.md | 5 +++-- README.md | 8 ++++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 6805fb5..f80eb4c 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -28,6 +28,7 @@ src/screen-name/view/ ← all UI components | `AutoTrackerNode.ts` | Auto-tracking selection box and trail rendering | | `DigitizingOverlayNode.ts` | Manual digitizing crosshair and magnifier | | `DataTableNode.ts` | Spreadsheet of track data, CSV export | +| `KinematicsGraphNode.ts` | Configurable kinematics graph; wraps `ConfigurableGraph` with track and unit wiring | | `TrackListPanel.ts` | Add/remove tracks for manual digitizing | | `ControlPanel.ts` | Left-side toggle panel | | `WebcamPanel.ts` | Webcam recording dialog | @@ -38,12 +39,12 @@ src/screen-name/view/ ← all UI components | File | Responsibility | |------|----------------| | `ConfigurableGraph.ts` | Top-level graph node; owns axis selectors, chart layout, and zoom/reset buttons | -| `GraphDataManager.ts` | Accumulates data points, owns auto-scaling, tick spacing, and trail circle rendering | +| `GraphDataManager.ts` | Accumulates data points, owns auto-scaling and tick spacing | | `GraphInteractionHandler.ts` | All pointer/touch/keyboard gestures — pan, pinch-zoom, axis drag, resize, header drag | | `GraphControlsPanel.ts` | Axis property selector dropdowns (what to plot on each axis) | | `PlottableProperty.ts` | `PlottableProperty` type — interface any quantity must satisfy to appear in the selector | -> **Note:** `GraphInteractionHandler.ts` is the largest file in the codebase (~1,150 lines). When modifying gesture logic, read the existing `zoom()` / `pan()` / `rescaleAxes()` helpers before adding new code — many edge cases (pinch center preservation, manual-zoom locking, axis-specific gestures) are already handled. +> **Note:** `GraphInteractionHandler.ts` is the largest file in the codebase (~930 lines). When modifying gesture logic, read the existing `zoom()` / `pan()` / `rescaleAxes()` helpers before adding new code — many edge cases (pinch center preservation, manual-zoom locking, axis-specific gestures) are already handled. The other source directories are less frequently modified: diff --git a/README.md b/README.md index 9348bd7..f6fdcc8 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ A browser-based video analysis tool for tracking and measuring motion in physics - **Calibration tool** — Define a known reference distance to convert pixel measurements to real-world units (mm, cm, m, km, in, ft) - **Auto-tracking** — Select any object and track it across frames using OpenCV template matching - **Manual digitizing** — Add multiple tracks (A, B, C…) and place points frame-by-frame with a crosshair cursor and magnifier +- **Kinematics graph** — Configurable X-Y plot of any two kinematic quantities (position, velocity, acceleration, speed) for any track - **Data table** — Spreadsheet view of all track data with CSV export - **Webcam recording** — Capture live video directly in the browser and use it as the analysis source - **Configurable frame rate** — Set video frame rate (15–60 fps) for accurate time calculations @@ -144,9 +145,16 @@ src/ │ ├── AutoTrackerNode.ts # Auto-tracking overlay and trail │ ├── DigitizingOverlayNode.ts # Manual digitizing crosshair + magnifier │ ├── DataTableNode.ts # Spreadsheet of track data, CSV export +│ ├── KinematicsGraphNode.ts # Configurable kinematics graph (wraps graph/) │ ├── TrackListPanel.ts # Add/remove tracks for digitizing │ ├── WebcamPanel.ts # Webcam recording dialog │ └── KeyboardShortcutsNode.ts +├── graph/ +│ ├── ConfigurableGraph.ts # Top-level graph node; axis selectors, chart layout, zoom/reset +│ ├── GraphDataManager.ts # Data points, auto-scaling, tick spacing +│ ├── GraphInteractionHandler.ts # Pan, pinch-zoom, axis drag, resize, header drag gestures +│ ├── GraphControlsPanel.ts # Axis property selector dropdowns +│ └── PlottableProperty.ts # Interface for quantities that appear in the axis selector └── tracking/ └── OpenCVTracker.ts # OpenCV template matching (TM_CCOEFF_NORMED) ```