bmstu-iu9/ptp2022-7-svg-editor

Векторный графический редактор (капитан: Сергей Виленский)

Artem Nostrum

Данный проект представляет собой реализацию векторного графического редактора с системой управления учётными записями в рамках проектно-технологической практики кафедры ИУ9 в 2022 году

Наш сайт http://artemnostrum.yss.su

Содержание документации

Инсталяция проекта

• Требуемые параметры системы
• Установка
• Запуск

Управление учётными записями

• Регистрация
• Авторизация
• Личный кабинет
• Смена пароля
• Начало работы

Возможности редактора

• Инструменты
  • Курсор
  • Карандаш
  • Линия
  • Фигуры
    • Многоугольник
    • Прямоугольник
    • Эллипс
    • Звезда
  • Путь
  • Текст
  • Заливка
  • Ластик
  • Перемещение
  • Вращение
  • Трансформация
    • Деформация
    • Масштабирование
    • Разбиение
    • Скос
    • Отражение
    • Расширение-сжатие
• Отмена и повтор действий
• Слои
• Проекты
• Работа с файлами
• Форматы

Авторство

• Состав команды
• Куратор

Лицензия

• MIT

Благодарность

• Спасибо

Инсталяция проекта

Инструкции ниже помогут вам загрузить и запустить копию проекта для личного использования на вашей локальной машине.

Требуемые параметры системы

• python: 3.8.10 и выше
• для unix обязательно иметь пакет python3-venv

Установка

1. Скопируйте репозиторий в вашу директорию и перейдите в корень проекта

   $ git clone <репозиторий> --branch=main
   $ cd ptp2022-7-svg-editor

2. Создайте виртуальную среду и активируйте ее

   $ python3 -m venv venv
   $ source venv/bin/activate

   Windows

   > python -m venv venv
   > venv\Scripts\activate

3. Установите зависимости

   (venv) $ python3 -m pip install --upgrade pip
   (venv) $ pip install -r requirements.txt

4. Сделайте миграции

   (venv) $ python manage.py migrate

Запуск

(venv) $ python manage.py runserver

Управление учётными записями

Для работы в редакторе необходимо создать учётную запись, с которой вы сможете хранить созданные файлы на сервере, открывать их для продолжения работы, а также импортировать файлы со своего компьютера.

Регистрация

• Если у вас ещё нет учётной записи, перейдите на страницу регистрации, нажав на ссылку на странице авторизации.
  • 
• Следуя инструкциям, заполните необходимые поля на странице регистрации. Нужно иметь в виду, что имя пользователя и электронный адрес не должны совпадать с данными уже существующих пользователей, а введенные пароли должны совпадать между собой. При соблюдении условий эти поля будут обведены зеленым цветом, при несоблюдении – красным.
  • 
• После создания учётной записи необходимо подтвердить адрес электронной почты, указанный при регистрации. Вам будет выслано письмо с ссылкой, после нажатия на которую откроется страница, уведомляющая о подтверждении адреса.
  • 

Авторизация

• При наличии учётной записи заполните поля на странице авторизации для начала работы.
• 
• Если вы забыли пароль к своей учётной записи, нажмите на соответсвующую ссылку.
• 
  • Заполните поле, введя электронный адрес. Письмо с ссылкой на страницу восстановления пароля будет отправлено на указанный адрес, если к нему привязана существующая учётная запись.
    • 
  • Заполните поля на странице восстановления пароля. Введенные пароли должны совпадать между собой. При соблюдении условия эти поля будут обведены зеленым цветом, при несоблюдении – красным.
    • 

Личный кабинет

• После авторизации открывается личный кабинет пользователя, где вы можете сменить пароль, выйти из учётной записи или приступить к работе в редакторе.
  • 

Смена пароля

• Для смены пароля нажмите на соответствующую ссылку в личном кабинете.
• Заполните поля, следуя инструкциям. Введенные пароли должны совпадать между собой. При соблюдении условия эти поля будут обведены зеленым цветом, при несоблюдении – красным.
  • 
• После смены пароля откроется страница, уведомляющая об успешной смене пароля.
  • 

Начало работы

• При нажатии To editor в личном кабинете пользователя открывается страница управления файлами.
  • 
• Вы можете создать новый файл, выбрав один из двух доступных форматов – svg или yml.
  • 
• Имейте в виду, что имя нового файла не должно совпадать с именем уже существующего файла. При соблюдении условия эти поля будут обведены зеленым цветом, при несоблюдении – красным.
  • 
• У вас есть возможность импортировать файл с вашего компьютера для работы в редакторе. При попытке загрузить файл не в svg или yml формате появится уведомление о недопустимости этого формата.
  • 
• Чтобы просмотреть файлы, хранящиеся на сервере, нажмите на кнопку Reload. Для открытия файла выберите нужный среди тех, которые появились в списке, и нажмите на кнопку Open.
  • 

Возможности редактора

Инструменты

• Все инструменты, кроме курсора, не реагируют на нажатия мыши за пределами холста.
• После окончания рисования любым инструментом, кроме зеркала, действующий объект выделяется линиями голубого цвета.
• При любом активном действии на панели параметров или инструментов или после нажатия клавиши Esc выделения стираются и в случае, если использование инструмента не было закончено, последнее действие безвозвратно отменяется.
• Объектом на координатах далее будет обозначаться объект, которому принадлежит точка с данными координатами, лежащий на активном слое и для которого не найдётся другого объекта на активном слое такого, что ему так же будет принадлежать данная точка и он будет находиться выше первого.

Курсор

• При нажатии ЛКМ¹ не дальше 30-ти пикселей хотя бы от одной из границ холста эта или эти границы становятся сдвигаемыми движениями курсора мыши с зажатой клавишой. При этом все объекты холста не меняют местоположения относительно страницы.
• В случае, если таких границ не нашлось, и координаты нажатия мыши пришлись на холст, за любым последующим движением курсора мыши следует перемещение холста вместе с его содержимым по странице.
• 

Карандаш

• При зажатой ЛКМ¹ происходит рисование полилинии по тем точкам, на которых было зафиксировано движение курсора мыши с зажатой клавишей.
• В случае клика мышки без её перемещения объект не создаётся.
• 

Линия

• При нажатии ЛКМ¹ устанавливаются две точки линии.
• При движении курсора мыши с зажатой ЛКМ перемещается вторая точка.
• При отпускании ЛКМ рисование заканчивается.
• 

Фигуры

Многоугольник

• При первом нажатии ЛКМ¹ устанавливаются первые две точки многоугольника.
• При движении с зажатой кнопкой изменяются координаты последней точки многоугольника.
• После очередного нажатия ЛКМ в конец массива точек многоугольника добавляется новая точка.
• При перемещении курсора мышки без зажатой ЛКМ более чем на 10 пикселей от последней установленной точки рисование прекращается.
• 

Прямоугольник

• При нажатии ЛКМ¹ устанавливаются две точки, обозначающие противоположенные углы прямоугольника.
• При движении курсора мыши с зажатой ЛКМ перемещается вторая точка.
• При отпускании ЛКМ рисование заканчивается.
• 

Эллипс

• При нажатии ЛКМ¹ устанавливаются две точки, обозначающие противоположенные углы прямоугольника, в который вписан эллипс.
• При движении курсора мыши с зажатой ЛКМ перемещается вторая точка.
• При отпускании ЛКМ рисование заканчивается.
• 

Звезда

• При нажатии ЛКМ¹ устанавливаются две точки, обозначающие противоположенные углы прямоугольника, в который вписана правильная пятиконечная звезда.
• При движении курсора мыши с зажатой ЛКМ перемещается вторая точка.
• При отпускании ЛКМ рисование заканчивается.
• 

Путь

• При первом нажатии ЛКМ¹ создаётся кривая Безье² с началом, концом и контрольными точками на координатах курсора мыши.
• При движении курсора мыши с зажатой кнопкой изменяются координаты контрольной точки конца последней кривой на координаты курсора мыши и, если последняя кривая не первая, изменяются координаты контрольной точки конца предпоследней кривой на координаты курсора мыши, противоположенные относительно конца предпоследней кривой.
• При движении курсора мыши с отпущенной ЛКМ меняются координаты конца и контрольной точки конца последней кривой.
• При очередном нажатии ЛКМ создаётся новая кривая Безье² с началом в конце предыдущей, контрольной точкой начала на координатах, противоположенных координатам контрольной точки конца предыдущей кривой относительно её конца, и концом и контрольной точкой конца на координатах курсора мыши.
• После установки конца очередной кривой на расстоянии от начала первой кривой не более 10-ти пикселей координаты конца последней кривой становятся равными координатам начала первой кривой и координаты контрольной точки конца последней кривой становятся равными координатам точки, противоположенной координатам контрольной точки начала первой кривой относительно её начала, и рисование заканчивается.
• В случае установки конца очередной кривой на координатах её начала, последняя кривая удаляется и рисование заканчивается.
• 

Текст

• При нажатии ЛКМ¹ устанавливаются две точки, обозначающие противоположенные углы прямоугольника, в который будет вписан текст.
• При движении курсора мыши с зажатой ЛКМ перемещается вторая точка.
• При отпускании ЛКМ рисование заканчивается, запрашивается текст и создаётся текст выстой, равной высоте описанного прямоугольника, и с содержанием, включающим максимальное количество первых символов исходного текста, при которых ширина строки в пикселях не превышает ширину исходного прямоугольника.
• 
• 

Заливка

• При нажатии ЛКМ¹ объекту на координатах³ присваиваются новые параметры из панели параметров и инструментов: наличие заполнения, цвет заполнения, цвет контура и ширина контура.
• 

Ластик

• При нажатии ЛКМ¹ объект на координатах³ удаляется.
• При движении курсора мыши с зажатой ЛКМ повторяется эффект нажатия ЛКМ.
• 

Перемещение

• При нажатии ЛКМ¹ объект на координатах³ привязывается к движениям курсора мыши и имеет равную ей дельту перемещения.
• 

Вращение

• При перемещении курсора мыши с зажатой ЛКМ¹ объект на координатах³ совершает поворот относительно своего центра на угол, равный углу перемещения курсора мыши относительно центра объекта.
• 

Трансформация

Деформация

• После первого клика ЛКМ¹ каждая точка объекта на координатах³ выделяется кружком синего цвета, а если объект является путём, то так же выделяются все контрольные точки с привязкой голубыми прямыми к соответствующим им началам и концам кривых.
• Каждая выделенная точка является перемещаемой курсором мыши.
• 

Масштабирование

• После первого клика ЛКМ¹ объект на координатах³ выделяется голубым параллелограммом с синими кружками на углах и серединах его сторон.
• После перемещения одного из кружков масштаб объекта меняется с центром в точке, противоположенной перемещённой относительно центра объекта, и коэффициентом, равным отношению расстояния от противоположенной точки до перемещённой к расстоянию от противоположенной точки до проекции координат курсора мыши на прямую, соединяющую перемещённую точку с центром объекта.
• 

Разбиение

• При нажатии ЛКМ¹ по объекту на координатах³, если этот объект является путём, прямоугольником или эллипсом, он преобразуется в полилилнию с частотой изгибов, равной значению параметра ширины контура на панели параметров рисования.
• 

Скос

• После первого клика ЛКМ¹ объект на координатах³ выделяется голубым параллелограммом с синими кружками на углах и серединах его сторон.
• После перемещения кружка на ребре параллелограмма объект скашивается со статичным ребром, противоположенным схваченному, и изменяемому своё положение на холсте схваченному ребру.
• При перемещении кружка на углу параллелограмма создаётся искажение, подобное захвату двух кружков на центрах смежных углу рёбер.
• 

Отражение

• При первом нажатии ЛКМ¹ устанавливаются два синих кружочка и голубая линия между ними.
• При движении курсора мыши с зажатой ЛКМ перемещается второй кружок.
• После отпускания ЛКМ мыши кружочки остаются перемещаемыми.
• При очередном нажатии ЛКМ объект на координатах³ отражается относительно прямой, отрисованной ранее.
• 

Расширение-сжатие

• После первого клика ЛКМ¹ объект на координатах³ выделяется голубым параллелограммом с синими кружками на углах и серединах его сторон.
• После перемещения одного из угловых кружков ширина и высота объекта изменяются в соответствии с отношением ширины и высоты прямой, соединяющей схваченный кружок с противоположенным ему относительно центра объекта, к прямой, соединяющей координаты курсора мыши с противоположенным кружком.
• В случае, если перемещён был кружок с горизонтальной грани, изменяется только высота объекта, а если вертикальной — ширина.
• 

Отмена и повтор действий

• Сочетание клавиш ctrl+z отменяет последнее совершённое действие, если это возможно.
• В свою очередь, ctrl+shift+z воспроизводит последнее отменённое действие, если такое существует.
• Также для управления историей вы можете использовать кнопки: History->Undo для отмены последнего действия и History->Redo для воспроизведения последнего отмененного действия.
  • 
• История рисования линейна, поэтому после фиксации нового действия, если до этого были не воспроизведённые отменённые действия, они стираются.

Слои

• Взаимодействие со слоями происходит через специальную выпадающую панель (далее - панель слоёв), вызвать которую можно нажатием на кнопку в верхней правой части страницы.
  • 
• На панели слоёв будут отображаться все существующие слои, там же содержатся кнопки управления ими. Текущий активный слой (слой, на котором будет происходить рисование; далее - активный слой) выделяется оранжевым.
  • 

Функции работы со слоями

1. Создание и удаление
   • Осуществляются по нажатию на соответствующие кнопки в верхнем левом углу панели слоёв.
   • Новый слой создается поверх старых и после создания автоматически становится активным.
   • Удаляется активный слой, после чего активным становится слой ниже, если он есть.
2. Перемещение
   • Перемещать слои можно посредством перетаскивания их по панели слоёв.
   • Ещё один способ - кнопки up и down в нижней части панели слоёв.
3. Изменение прозрачности
   • Прозрачность меняется с помощью ползунка в нижней части панели слоёв.
     • 
   • Уровень прозрачности слоя сохраняется при сохранении проекта.
4. Отключение
   • Отключить слой можно убрав галочку рядом с его именем.
     • 
   • Отключенные слои не учитываются при сохранении файла как svg.
5. Копирование и слияние
   • Кнопка copy копирует активный слой, располагая копию над ним.
   • Кнопка merge with previous объединит активный слой со слоем под ним (сохранив имя текущего слоя).
   • Кнопка merge visible объединит все видимые (т.е. не отключенные) слои в один (слой-слияние займет место последнего видимого слоя и получит его имя).
     • 
   • Кнопка create layer from visible создаст слой-слияние (с именем Visible) всех видимых слоёв, не удаляя их, и расположит его поверх всех слоёв.
     • 

Проекты

Графический редактор позволяет открывать несколько файлов одновременно и удобно переключаться между ними.

Открытие файла

• Под открытием файла подразумевается загрузка его содержимого с сервера на клиент с возможностью его последующего редактирования.
• Открытие нового файла происходит при первичной загрузке страницы редактора, создании нового файла или выборе уже существующего.
• Также при каждой такой загрузке внизу интерфейса редактора появляется соответствующий идентификатор файла.
  • 

Переключение между файлами

• Идентификатор текущего активного файла подсвечивается синим, если вы хотите переключиться на другой файл, вам всего лишь нужно нажать на идентификатор интересующего вас файла.
  • 

Закрытие файла

• Для закрытия ненужного файла, необходимо нажать на крестик в правом нижнем углу его идентификатора.
• При этом новым активным файлом будет выбран первый открытый вами файл.
• Будьте аккуратны закрытие файла не сопровождается сохранением изменений, поэтому при закрытии несохраненного файла все изменения будут потеряны.
• Также если на странице редактора не останется открытых файлов, то автоматически произойдет переадресация на страницу аккаунта.
  • 

Особенности поведения

• При попытке открыть уже открытый файл редактор позволит вам это сделать, однако при этом будут утеряны все несохраненные изменения.
• При удалении с сервера открытого в редакторе файла, его идентификатор останется и с файлом можно будет продолжить работать и сохранить его снова.

Быстрое сохранения

• Для быстрого сохранения изменений в активном файле необходимо нажать ctrl+x.

Работа с файлами

В окне редактора вам доступен следующий функционал работы с файлами.

Создание нового файла

• Чтобы создать новый файл, вам нужно выбрать в верхней панельке File->New.
  • 
• При этом откроется окошко, в котором надо будет ввести имя файла и выбрать соответствующий формат.
• При этом, если на сервере еще не существует файла с тем же именем, поле ввода имени будет подсвечиваться зеленым и кнопка Ok станет активной.
  • 
• В противном случает кнопка не будет активной и поле ввода имени файла будет подсвечиваться красным цветом.
  • 
• При этом стоит помнить, что реальный файл на сервере не создается, но он будет создан после первого сохранения изменения в файле.

Сохранение файла

• Чтобы сохранить файл, выберете в верхней панели File->Save.
  • 

Сохранение файла как

• Чтобы сохранить файл как, нужно выбрать File->Save as, при этом откроется окошко в котором вы также должны выбрать имя и тип файла для сохранения.
  • 
• Так же как и с созданием нового файла, подсветка подскажет вам доступное имя файла.
  • 

Загрузка файлов

• Если у вас уже имеются файлы которые вы хотите отредактировать, вы можете загрузить их на сервер и открыть в редакторе.
• Для этого выберете File->Open, при этом откроется окошко в котором при нажатии на кнопку Выберете файл, вы сможете выбрать файл, который загрузится на сервер, на своем компьютере.
  • 
• Также если файл с таким именем уже существует на севере, то к имени загруженного файла будет в конце добавлено (число).

Открытие файла

• Чтобы открыть в редакторе хранящийся на сервер файл, выберите Manage->Edit.
  • 
• Откроется окошко в котором из предложенного списка нужно выбрать (нажать на) нужный файл, и, после нажатия кнопки Ok, выбранный файл появится в редакторе.
  • 

Скачивание файлов

• Если вы наоборот хотите скачать файл с сервера на ваш компьютер, то выберите в верхнем меню Manage->Download.
  • 
• После чего у вас откроется окошко, в котором вы также из списка должны выбрать нужный файлы и нажать Ok, после чего файл будет скачан на ваш компьютер.
  • 

Удаление файлов

• Чтобы удалить ненужный файл или файлы, выберете Manage->Delete.
  • 
• Так же как и с открытием файла, ненужный файл нужно выбрать из списка и нажать Ok, после чего файл с сервера будет удален.
  • 
• Также внизу окна можно выбрать (нажать) Delete All, что позволить после нажатия Ok, удалить все свои файлы, хранящиеся на сервере.
  • 

Форматы

Редактор поддерживает два формата файлов svg и yml.

SVG

SVG - это стандартный формат векторной графики. Он широко используем, поэтому вы можете открыть и использовать его почти в любых программах, поддерживающих векторную графику, и, конечно, в других редакторах. Однако SVG формат не очень хорошо подходит для глубокой работы со слоями. Поэтому при использовании этого формата в нашем редакторе вы, конечно, сможете использовать функционал слоев, но при хранении файла вся работа со слоями не сохранится, и поэтому при повторном редактировании файла все созданные вами слои сольются в один.

ILLUSTRATION (YML)

Illustration - это наш собственный формат масштабируемой векторной графики с полноценной поддержкой слоев. Он основан на языке разметки yml, и позволяет в полной мере реализовать работу со слоями. Конечно, наш новый стандарт еще не принят ни в одной другой программе, поэтому вне этого редактора формат illustration пока бесполезен, хотя надеемся, что с ростом популярности эта ситуация исправится в будущем. Но зато в самом редакторе с использованием данного формата при хранении будут сохраняться все созданные ранее слои. И при повторном редактировании файла вы сможете работать с теми же слоями, с которыми работали раннее.

Конвертация

Разумеется, наш веб-редактор поддерживает полную конвертацию форматов, поэтому вы, например, можете создать и работать с файлами формата yml, а перед загрузкой на свой компьютер просто сохранить как svg и использовать в сторонних программах.

Авторство

Состав команды:

• Виленский Сергей Дмитриевич — тимлид и ведущий frontend разработчик — AngelicHedgehog
• Фёдоров Владислав Павлович — дизайнер и frontend разработчик — GarryNeKasparov
• Гасаев Гамид Казимович — ведущий frontend разработчик — wizardOfOz21
• Выдрина Варвара Алексеевна — дизайнер и frontend разработчик — vyydra
• Сатыбалдиев Талгат — дизайнер и менеджер проекта — @SatybaldievT
• Кабанов Андрей Юрьевич — техлид, ведущий full-stack разработчик, администратор БД и сисадмин — Kabane-UN

Куратор:

• Посевин Данила Павлович — @posevin

Лицензия

Artem Nostrum — это пользовательский продукт с открытым исходным кодом, распространяемый под лицензией MIT License.

Благодарность

Огромная благодарность нашему куратору и просто очень хорошему человеку Посевину Даниле Павловичу. Большое спасибо за то, что направляли и вели наш проект, а также помогали решать все вопросы, касающиеся разработки. Пусть Ваш личный вклад не отображается на Github, но мы его очень ценим!

Footnotes

1. ЛКМ — аббревиатура от "левая клавиша мыши". ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹ ↩¹⁰ ↩¹¹ ↩¹² ↩¹³ ↩¹⁴ ↩¹⁵ ↩¹⁶ ↩¹⁷ ↩¹⁸ ↩¹⁹

2. https://ru.wikipedia.org/wiki/Кривая_Безье. ↩ ↩²

3. Объект на координатах — это объект, которому принадлежит точка с данными координатами, лежащий на активном слое и для которого не найдётся другого объекта на активном слое такого, что ему так же будет принадлежать данная точка и он будет находиться выше первого. ↩ ↩² ↩³ ↩⁴ ↩⁵ ↩⁶ ↩⁷ ↩⁸ ↩⁹ ↩¹⁰