SVG-editor
Здравствуйте! Хотим представить вашему вниманию командный проект — SVG-editor. Наша команда состоит из трех человек: Александр Красильников, Алексей Январев и Татьяна Григорович. Знакомство и первый опыт совместной работы появился в ходе обучения в RS School на курсе Front-end/Java-script.
Немного слов об участниках нашей команды
Александр Красильников: Я закончил физфак СГУ в Саратове по направлению Вычислительная физика и автоматизация научных исследований. С научными исследованиями как то сразу не задалось, так как по окончанию университета я устроился на пищеперебатывающее предприятие, где работаю и по сей день. Однако занимаюсь я автоматизацией технологических процессов, так что можно сказать работаю почти по специальности. В последние годы работа носит все больше административный характер, и развитие меня как специалиста в этой области приостановилось, возможно и интерес немного пропал, и поэтому я принял для себя решение, что хочу развиваться и в других направлениях и специальностях. Выбор пал на программирование, покуда интерес к нему был всегда. Идею разработать SVG редактор нам подкинул тренер RS School Жан Журидов, за что мы его благодарим всей командой. В процессе разработки было не просто, как и каждый наверняка отметит, не хватало опыта работы в команде в этой области, глубоко понимания паттернов проектирования и архитектуры построения приложений. Но было круто, интересно и познавательно. Спасибо ребятам из нашей тимы Леше и Тане.
Алексей Январев: Учусь на 4 курсе университета на специальности “Программист, инженер”, прошлым летом проходил производственную практику от компании “Epam”. В ходе производственной практики я интересовался, как мне набраться теоретического опыта, поэтому мне ментор посоветовал пойти на курсы JavaScript, которые, как он сказал, будут примерно в конце августа-начале сентября. В сообществе “Epam Саратов” высветилась новость о том, что RS School совместно с Epam проводит набор на тренинги. Вот так я и узнал об этой школе. В ходе обучения RS School я делал все проекты, которые выдавались в качестве задания, но с последними двумя были сложности, т.к. опыта командной разработки не было, но в конце концов возникшие сложности решились.
Татьяна Григорович: Я по специальности инженер-строитель, но довольно давно созрело желание стать программистом. От сестры узнала, что у компании “Epam” есть хорошие курсы, так попала на курс обучения от RS School. Пришла с нулевым опытом, тяжело было из-за очень высокого темпа обучения, но очень сильно помогли видеоуроки и хорошо проработанные ТЗ к заданиям, в которых все было детально расписано и таким образом получались маленькие подзадачи, которые как оказывалось, вполне реально осилить. Здорово помогла работа в команде, поскольку в ней обучение оказывается гораздо эффективнее.
Описание проекта
В разработанном приложении можно создать, отредактировать и сохранить документ SVG-графики. SVG (Scalable Vector Graphics) — технология, с помощью которой на сайтах описывается векторная графика. Это очень крутой инструмент, с помощью SVG можно создавать анимацию, векторные и смешанные изображения, текст.
Панель инструментов
● В панели с инструментами (левое вертикальное меню) присутствуют прямоугольник, эллипс, текст и кривые. Для того что бы нарисовать круг, квадрат или вертикальные и горизонтальные линии необходимо рисовать с клавишей Shift.
● Элементы можно выделять по клику или выделив область рамкой. (Для того что бы выделить несколько элементов по клику воспользуетесь Ctrl).
● Для редактирования текста необходимо активировать инструмент “текст” и выбрать текст для редактирования левым кликом.
● Чтобы завершить отрисовку полилинии используйте двойной клик.
● Цвет заливки и обводки элемента можно поменять с помощью палитры. Палитра реализована с использованием canvas.
Панель свойств / выравнивание элементов
● При выделении одного элемента становится доступной панель свойств (верхнее меню), набор свойств меняется в зависимости от типа выбранного элемента.
● Свойства элемента можно отредактировать мышью или в панели свойств. Изменения, вызванные mouseEvent и изменениями в панели свойств синхронизируются между собой.
● Если выделено несколько элементов становится доступной панель выравнивания элементов. Выравнивание происходит относительно холста.
Основное верхнее меню
● Так же можно просто скопировать html-код созданного изображения для последующей вставки в какой-либо файл html.
● В приложении присутствуют пользовательские настройки холста — можно задать ширину и высоту.
Контекстное меню
● Кликом по правой кнопке мыши вызывается всплывающее меню с доступными опциями, такими как копировать, вставить, вырезать или изменить положение элемента.
● Для активирования опций необходимо выделить какой-нибудь элемент.
Прочие фичи
● Для удобства пользователя для кнопок с иконками сделаны tooltip и можно выполнить смену английского языка на русский. Подключены основные комбинации горячих клавиш, такие как Ctrl + Z, Ctrl + Y, Ctrl + S, Delete и т.д.
● Приложение выполнено в едином стиле. Минимальный размер приложения 1024х768px. Макет приложения выполнен в Figma.
Тут хотим выразить огромную благодарность Юлии Мазаевой, которая разработала нам этот макет.
То, что отличает наше приложение от остальных on-line редакторов svg
Get Татьяна Григорович’s stories in your inbox
Join Medium for free to get updates from this writer.
● Рисовать можно, переключаясь между разными холстами. Добавление, удаление и переключение между листами находится в нижней панели инструментов.
● При перезагрузке браузера изображения сохраняются в LocalStorage и при следующем запуске открываются.
● Есть возможность зарегистрироваться и после этого сохранять и открывать изображения из профиля (панель справа).
Организация командной работы
Роль тимлида выполнял Александр, он координировал работу команды и отслеживал сроки выполнения. Регулярно проходили стримы в общем чате Discord, где команда коллегиально определяла список текущих задач и распределяла их между участниками. Задачи в режиме on-line заносились в таблицу Google со статусом “открыто” и, в последствии, при выполнении задачи, ответственным участником задача переводилась в статус “можно проверять”. После этого остальные участники команды проверяли выполнение. В результате успешной проверки задача получала статус “выполнено” и закрывалась, в ином случае замечания заносились в баг-лист, и задача закрывалась после устранения замечаний.
Каждый из участников разработки работал в своей ветке, а при реализации фичи мержил свою ветку в основную ветвь разработки. В некоторых случаях при объединении веток возникали конфликты, требующие обсуждения, такие конфликты решались совместно .
Основной сложностью в организации работы были несовпадающие графики у участников команды, поэтому некоторые моменты не всегда получалось оперативно решить. Эта проблема решалась разделением кода на модули и распределение модулей между участниками команды для максимально независимой разработки.
Архитектура проекта, особенности реализации
В разработке архитектуры приложения опыта у нас не было. Было принято решение использовать паттерн MVC (предварительно мы еще несколько дней изучали материалы и разбирались с примерами). В конечном итоге вся структура была поделена на View, Controller и Model. В View находятся модули, генерирующие внешний вид приложения. В Controller находятся модули с обработчиками событий. А в Model, в свою очередь, находятся модули, меняющие внешний вид приложения (View). В дальнейшем мы старались придерживаться этой структуры.
При разработке проекта была использована библиотека svg.js, которая была выбрана из-за наличия плагинов, которые существенно уменьшали объем разработки. В какой-то момент пришлось выбирать между плагинами поскольку часть поддерживалась только более ранней версией, а другие наоборот работали только на последних. Так выбор был сделан в пользу svg-select.js и svg-resize.js.
Сборка проекта выполнена Gulp. Использован Eslint и максимально выполнялись требования к качеству кода. Стили заданы в препроцессоре SASS.
Сложной оказалась задача по обработке mouseEvent на холсте в зависимости от типа инструмента, значения целевого элемента и т.д. Задача была решена построением древовидной структуры с условиями и выбором обработчиков в конечном итоге. Приложение своевременно не было достаточно хорошо протестировано поэтому практически в последний момент был обнаружен баг с некорректным перемещением повернутых элементов, они перемещались вдоль своих локальных осей, направление которых уже не совпадало с осями холста. Поэтому были переписаны методы касающиеся позиционирования и перемещения элементов с использованием атрибута matrix.
Back-end написан на TypeScript.js с помощью express, использованы uuid для генерации уникальных id, также использован cors, который позволяет агенту пользователя получать разрешения на доступ к выбранным ресурсам с сервера на источнике (домене), отличном от того, что сайт использует в данный момент. Для хранения данных, приходящих с Request, используется база данных postgresql, в котором есть поля (типы): id (uuid), username (character varying), email (character varying), password (character varying), passwordHash (character varying), filenames (text[]), projects (text[]). На сервере приходящий пароль в Request преобразуется в хэш-пароль с помощью md5. Поле filenames хранит список названий всех файлов, которые конкретный пользователь сохранил, а поле projects — список строк, в которых прописаны атрибуты для рисования svg элементов. Back-end часть реализована с помощью REST Api.
Ход разработки
Александр разработал левую панель инструментов в верхнем меню и всю стилизацию приложения. Кроме того он проводил code review для остальных участников проводил refactor приложения в соответствии принятым паттерном MVC.
Алексей разработал правую панель инструментов в верхнем меню, реализовал tooltips, смену языка и контекстное меню. Также Алексей занимался разработкой back-end.
Татьяна реализовала левую панель инструментов, палитру, и методы в модели отвечающие за отрисовку, выделение и перемещение элементов на холсте.
Вот пример наших commit:
… и общая статистика работы за месяц
Заключение
Разработка SVG-редактора очень интересная и объемная тема. Очень много из того, что хотелось бы реализовать реализовать не успели. Например, отрисовка кривых, масштабирование холста, градиентные заливки и т.д. — это все стандартные инструменты редактора. Но кроме того, тэг <svg> обладает такой крутой темой, как атрибут animate, который прописывается со всеми свойствами непосредственно в коде html, т.е. может быть анимирован без использования CSS. И очень хотелось попробовать сделать редактор, в котором бы можно, было бы хотя бы минимально “оживить” элементы с помощью этого атрибута. (Надеюсь, когда-нибудь мы это сделаем)
Очень было тяжело вовремя остановиться на реализации фич и перейти на полноценное тестирование приложения — это минус планирования. В итоге результат получился несколько сырым и, безусловно, в первую очередь требует доработки то, что уже сделано.
И несмотря на то, что написано в предыдущих двух абзацах, мы очень довольны итоговым результатом. Удалось успеть реализовать минимальный функционал, добавить интересные “фичи” вроде работы на нескольких листах и сохранения изображений на сервере. И конечно, получение опыта реальной командной разработки — тоже результат.
Ссылки
Ссылка на видео обзор https://youtu.be/URZZvo_f2x4
Ссылка на GitHub с проектом: alexk08/rsclone (github.com)
Ссылка на приложение: SVG Editor (alexk08.github.io)
