Ну, если бы на все задачи можно было найти точные инструкции, было бы скучно.
Пробуйте написать начиная с малого, например:
1) Создайте холст, просто объект, который будет помещать в себя фигуры. Это будет некий viewport.
2) Сделайте скролл этого холста мышкой, во все стороны.
3) Сделайте возможность динамически добавлять объекты на холст, сначала определите базовый объект, например прямоугольник или линию. Легче на этом моменте сразу определить интерфейс IShape, таким образом дальше будет легче унифицировать все объекты при добавлении их на холст, да и холст ничего не должен знать об этих объектах, только об интерфейсе.
4) Сделайте drag&drop добавленных объектов, чтобы их можно было тащить.
5) Добавьте зум, это не простой шаг, тут нужно многое учитывать, особенно часто на этой задаче ломается позиционирование drag&drop объектов.
6) Сделайте трансформатор объектов, который будет изменять их размер (для прямоугольников и.т.д.), менять точки (для линий), вращать и.т.д.
7) Сделайте редактор свойств, через который будете назначать атрибуты вашим объектам, такие как цвет заливки, цвет рамки, ширина рамки, непрозрачность и.т.д.
8) Добавляйте потихоньку различные объекты. Можете подглядывать в другие редакторы, например inkscape.
9) Реализуйте сохранение и загрузку холста. Тут лучше не изобретать свой формат данных, а использовать открытый, например svg.
10) Буфер обмена. Тут либо свой формат в бинарник, либо тот же самый svg в текстовом виде (что куда лучше, так сделано в фигме).
11) Отменить/вернуть - важная штука, и на первый взгляд простая. Но простая она только в том случае, если запоминать шаги путем снимка всех текущих объектов, но этот способ плохой. По нормальному нужно при любой операции над объектами на холсте делать снимок изменений. Например подвинули кубик на 10px влево, и записали в память значение
{ id: 'id кубика', x: -10 }
и потом при нажатии отмена, будете просто делать обратную операцию, добавлять эти 10px. Тут у вас возникнут сложность с операцией "возврат", но думаю, если вы дошли до этого шага, упорство у вас уже есть. Пригодятся паттерны:
command и
memento
12) Ну, тут уже по мелочи, различные киллер фичи, новые объекты, свойства, различные меню и.т.д.
Простой
Простой
