Панель элементов для рисования на полотне

Панель содержит элементы которые реализуют разнообразные механизмы рисования на полотне, а именно:

1. Карандаш - элемент который позволяет включить режим рисования на полотне пикселями.

Если активен режим карандаша - курсор на полотне меняется на следующий


При нажатии вызывается выпадающий элемент ColorPicker - в котором есть заготовленный список цветов, а также выбор цвета на плоскости (похожа на нативную механику <input type=”color”>)

Особенности

• При выборе цвета в ColorPicker - карандаш реагирует и применяет его на себя - заливая себе фон.
• Также должно учитываться совпадение цвета фона с цветом иконки. (Например. если выбрать черный цвет - то иконка должна залить фон черным, а карандаш стать белым)

2. Выбор размера кисти - элемент, который позволяет выбрать размер кисти.

На данный момент есть выбор (1px 9px 25px). После нажатия на кнопку открывается выпадающий элемент со списком допустимых размеров кисти для рисования. Также, внизу показывается цена в Pirates token соответственно за 1, 9 и 25 пикселей.


Пока открыт выпадающий элемент, основной контрол становится активным.

3. Ластик - элемент, позволяющий стирать уже добавленные пиксели на полотно.

При нажатии курсор внутри полотна сменяется на иконку ластика.


Иконка на элементах контроля становится активной.

Особенности

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

4. Инструмент истории.

Слепок истории - это все то, что добавил пользователь на полотно (картинка, пиксели).

В механике присутствует понятие завершенное действие. Когда завершается определенное действие, слепок сохраняется в историю.

Слепок добавляется в истории по завершении определенных действий пользователя, такие как:

1. Рисование (в момент, когда пользователь перестал рисовать и отжал мышку).
2. Стирание, такой же принцип как и у рисования.
3. Стирание всего с полотна, удаление пикселей и/или картинки.
4. Во время добавление картинки, пользователь может перейти на шаг назад, и картинка вместе с пикселями сохраняется в историю, а вся история, что была после стирается.
   

Если пользователь перешел по истории назад, и начал производить действия (рисовать, добавил картинку, или стирать), то новый слепок станет последним в истории, а все, что было после сотрется.

При инициализации полотна ходить по истории нельзя, так как ее не существует.

Всего у нас имеется 30 шагов по истории.

При инициализации полотна оба контрола неактивны

---

[ВПЕРЕД] → элемент, который позволяет идти вперед по истории.

Особенности

• Если во время расположения картинки на полотне <?> пользователь нажал на кнопку вперед по истории, то картинка просто отменяется, и пользователь попадает на следующий шаг в истории.

---

[НАЗАД] → элемент, которые позволяет идти назад по истории.

Особенности

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

5. Контрол добавления картинки на полотно.

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


После выбора картинки пользователь видит превью картинки.


Всего существует два состояния у картинки, ВРЕМЕННОЕ, когда ее можно перемещать и менять размеры, и ДОБАВЛЕННАЯ, она перекрывает пиксели, которые находятся за ней, и ее нельзя двигать и менять размеры.

На картинки может быть только 1 картинка. Если у пользователя на полотне уже присутствует картинка, и он решил добавить еще одну, то та, что была на полотне исчезает, и появляется новая, которую пользователь уже может разместить или изменить ей размеры.

Картинку можно разместить вне полотна, оставив только ее часть. Оплачиваться будет только та часть которая находится на полотне, остальная учитываться не будет, и при подтверждении добавления картинки, она обрежется.


Пользователь может поменять картинку, предварительно ее удалив, и выбрав заново в том же окне. Либо отменить добавления картинки нажав на кнопку отменить.

После подтверждения, картинка добавляется на полотно в левом верхнем углу.


Если пользователь добавил картинку по разрешению больше чем полотно, то ее размеры масштабируются с учетом полотна. Сейчас это 1000х1000, следовательно, при размещении картинки, она должна будет иметь либо ширину, либо высоту равной 1000 пикселей.

При наведении на углы(квадраты в углу картинки), появляется иконка изменения размера, и если потянуть за них, то размер картинки будет меняться.


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

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


Подтвердить картинку можно несколькими способами, а именно:

• Нажать на один их первых четырех элементов 1-4 в списке
  
  
  
• Нажать на кнопку Оплатить
  
  
  Если пользователь подтвердил картинку, то все пиксели под ней очищаются, и происходит добавление слепка всего, что находится на полотне в историю

Особенности

• Во время добавления картинки (когда картинка еще не подтверждена на полотне), кнопка очистки полотна меняется на кнопку удаления картинки.
  
  При нажатии на нее открывается модальное окно, в котором можно удалить картинку, которая еще не подтверждена и не добавлена на полотно.
  
  

6. Очистка полотна - элемент, который очищает полотно от пикселей и картинки, если она была добавлена на полотно.

При нажатии на кнопку, появляется модальное окно подтверждения.

Особенности

• При добавлении картинки на полотне, иконка сменяется на иконку удаления картинки
  
  
  При нажатии на нее, открывается модельно окно подтверждения удаления картинки с полотна, во время ее добавления
  
  
  Первое - модальное окно удаления картинки. Ничем не отличается от модального окна очистки полотна, кроме текста, но при подтверждении удаляется только картинка.
  
  Второе - картинка находится в состоянии добавления, где ее можно перемещать и менять размер.