feat: editor on canvas via vue component

[Lokusok]

Необходимо реализовать компонент редактора через canvas с CRUD-операциями над фигурами, с применением реактивности от vue.

[antonymofyou]

Немного изменен тип данных, будет такой

let jsonData = """
    {
        "shapes": [
            {
                "id": 1,
                "type": "rectangle",
                "x": 170,
                "y": 100,
                "width": 200,
                "height": 100,
                "color": "#FF5733",
                "borderColor": "#C70039",
                "zIndex": 0.5,
                "cornerRadius": 20,
                "borderWidth": 5,
                "rotation":90
            },
            {
                "id": 2,
                "type": "image",
                "x": 200,
                "y": 600,
                "width": 150,
                "height": 150,
                "imageId": "1",
                "zIndex": 0.7,
                "cornerRadius": 40
            },
            {
                "id": 3,
                "type": "arrow",
                "x": 200,
                "y": 200,
                "width": 250,
                "height": 150,
                "borderColor": "#C70039",
                "zIndex": 0.2,
                "rotation":110
            },
            {
                "id": 4,
                "type": "rectangle",
                "x": 170,
                "y": 100,
                "width": 200,
                "height": 100,
                "color": "#FF5733",
                "borderColor": "#C70039",
                "zIndex": 0.5,
                "textVerticalAlignment": "top",
                "text": [
                    {
                        "alignment": "left",
                        "text": [
                            {
                                "text": "Hello",
                                "type": "bold",
                                "fontSize": 24,
                                "fontColor": "#333333"
                            },
                            {
                                "text": " This is a test text.",
                                "fontSize": 18,
                                "fontColor": "#333333"
                            }
                        ]
                    },
                    {
                        "alignment": "right",
                        "text": [
                            {
                                "text": "Hello",
                                "type": "bold",
                                "fontSize": 24,
                                "fontColor": "#333333"
                            },
                            {
                                "text": " This is a test text.",
                                "fontSize": 18,
                                "fontColor": "#333333"
                            }
                        ]
                    }
                ],
                "borderWidth": 5
            }
        ],
        "imageDictionary": {},
    }
"""

Внутри imageDictionary - id изображения и его base64 кодировка

[antonymofyou]

Правила поведения при редактировании:

1. При клике на фигуру 1 раз - делаем её выделение. Для поворота, растягивания, перемещения и увеличения.
2. Перемещение делаем только у выделенной фигуры (см. п. 1)
3. Изменение масштаба делаем с помощью кнопок + и -, также можно между этими кнопками рисовать масштаб
4. Редактирование радиуса делаем просто цифрой. Ширины бордера - также
5. При уменьшении и увеличении фигуры - почему-то также меняется радиус и бордер, как будто это масштабирование фигуры, а не её растягивание. А нужно именно растягивать, влиять только на width и height
6. Кнопочки давай сделаем более аккуратными. Посмотри как реализовано в Google Slides, попробуй как там сделать, максимально компактно.

[antonymofyou]

Также этот редактор выведи пока просто в отдельную страницу