Урок 1. Основы D3.js и векторной графики SVGБиблиотека D3. Концепция работы с данными в стиле D3. Формирование [связи] данных (Data Joins). Выборки данных: Enter, Update, Exit. Свойства выборки. Методы для работы с выборками. Краткие сведения о векторной графике SVG. Координатная система SVG. Элементы <svg> и <g>. Графические примитивы (объекты) SVG: <rect>, <circle>, <line>, <text>, <path>. Аффинные преобразования объектов SVG. Фильтры SVG.
Подготовка рабочей среды и введение в AngularJS
Урок 2. Подготовка рабочей среды и введение в AngularJSБиблиотека Browserify. Менеджеры пакетов Bower, npm. Автоматизированная сборка проекта с помощью Grunt или Gulp (по желанию слушателей). Настройка локального сервера для обслуживания запросов приложения. Использование распределенной системы контроля версий Git и сервиса GitHub.com для организации работы над проектом.
AngularJS: введение. D3.js: разработка рабочего поля векторного конструктора
Урок 3. AngularJS: введение. D3.js: разработка рабочего поля векторного конструктораВведение в AngularJS. Модель, представление и контроллер в AngularJS. Управление зависимостями, для чего это необходимо. Модули, директивы и сервисы. Сервис $q в AngularJS. Поведение Zoom в D3.js. Переходы (Transitions) в D3: что это такое, как с ними работать. Реализация сетки конструктора.
Создание статичных перетаскиваемых компонентов (деталей макета)
Урок 4. Создание статичных перетаскиваемых компонентов (деталей макета)Интерполяция в D3. Поведение Drag в D3. Разработка директив компонентов – общие подходы. Разработка поведений объектов на поле конструктора. Реализация сервиса «прилипания» деталей к линиям сетки конструктора. Создание первой детали – прямоугольника с отверстиями. Компиляция директив AngularJS. Работа с элементом <path> в SVG, основные команды. Правила заполнения сложных фигур
Создание вращающихся компонентов и креплений
Урок 5. Создание вращающихся компонентов и крепленийФункция d3.timer, рисование зубчатой передачи. Управление скоростью вращения. Отрисовка гексагональных креплений-болтов. Модель отрисовки SVG. Управление порядком отрисовки и наложения объектов SVG.
Работа над сервисом отрисовки деталей и доработка их функциональности
Урок 6. Работа над сервисом отрисовки деталей и доработка их функциональностиСоздание треугольника. Написание сервиса отрисовки деталей. Реализация дополнительной функциональности для всех деталей: вращение, удаление с поля конструктора, изменение цвета.
Реализация палитры компонентов (деталей макета)
Урок 7. Реализация палитры компонентов (деталей макета)Реализация перетаскивания Drag&Drop на элемент SVG. Определение координат при перетаскивании: пользовательские (user) и экранные (viewport) координаты в SVG, матрица текущих преобразований (CTM, Current Transformation Matrix) SVG, перевод из одной системы координат в другую.
Написание тестов для приложения
Урок 8. Написание тестов для приложенияКонфигурация запускателя модульных тестов Karma. Запускатель функциональных (E2E) тестов Protractor, его конфигурация. Написание модульных и функциональных тестов с использованием Jasmine. Тестирование асинхронного кода. Подведение итогов.
