/test-canvas

Ссылка на проект: https://yuriy17-test-canvas.netlify.app/

Шаги необходимые для запуска проекта локально:

  1. Установить Node.js
  2. Скопировать репозиторий: https://github.com/Yuriy17/test-canvas/
  3. Перейти в папку test-canvas
  4. Перейти в ветку develop
  5. Для установки всех зависимостей использовать комманду npm install
  6. Запустите комманду npm run dev в коммандной строке и откройте в браузере http://localhost:8080

Тестовое задание Canvas DnD

Разработать приложение, используя функционал “Drag-and-drop”, которое позволяет пользователю размещать фигуры на канвасе. Разрешенные библиотеки: React, Redux, React-Redux, Styled Components (библиотеки для работы с канвасом и Drag-and-drop запрещены).

  1. Сверстать простой макет, разделенный на две секции:

    • Секция слева с фигурами (квадрат, круг).
    • Секция справа с канвасом.

    sample image

  2. Реализовать возможность перетягивать фигуры с первой секции (Figures) на канвас (Canvas) в неограниченном количестве.

  3. Реализовать возможность выбора фигуры на канвасе кликом левой кнопки мыши. Отразить выделение фигуры с помощью добавления border’а, при клике на фигуру левой кнопкой мыши. Если фигуры перекрывают друг друга - при выборе поместить выбранную фигуры выше перекрывающих фигур. Если кнопка мыши зажата, то фигура должна двигаться за курсором пользователя.

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

  5. Реализовать возможность удаления фигур. Пользователь может удалить фигур посредством перетягивания выбранной фигуры за пределы канваса. Фигура должна быть удалена после того, как пользователь отпустил левую кнопку мыши. Если фигура была выбрана и находится в пределах канваса, удалить ее можно с помощью кнопки Delete.

  6. (Опционально) Реализовать возможность сохранения состояния канваса между перезагрузками страницы. Приложение должно восстанавливать положение фигур на канвасе, если пользователь перезагрузил страницу.

  7. (Опционально) Реализовать возможность импорта и экспорта фигур расположенных на канвасе. Данные должны сохраняться в формате JSON. Готовый код проекта с историей коммитов должен быть залит в репозиторий bitbucket.org или github.com.