Клон Google Sheets на Canvas и TypeScript | Часть 2

В первой части мы заложили мощный фундамент и нарисовали бесконечную 60 FPS сетку на Canvas. Но пока это просто статичная картинка. Во второй части мы вдохнем в нее жизнь и превратим в полноценное интерактивное приложение! Сегодня мы спроектируем архитектуру хранения состояния, научим наш движок понимать клики мыши и добавим навигацию с клавиатуры. А главное — реализуем элегантный архитектурный хак с DOM-оверлеем, который позволит редактировать текст на Canvas с помощью обычного HTML-инпута. В этом видео вы узнаете: - Проектирование слоя данных: как правильно отделить состояние таблицы (State) от рендеринга - Hit Testing на Canvas: математика перевода пикселей клика мыши в логические индексы строк и колонок - Отрисовка выделения ячеек: как работает хак с двойной обводкой для идеального визуального UX - Навигация стрелочками: алгоритмы ограничения (clamping) и умный автоскролл (`scrollIntoView`) вслед за курсором - Редактирования данных: как связать скрытый input поверх Canvas с выбранной ячейкой