Заменить компонент PinchScrollZoom на свою реализацию

[BatuevIO]

Сейчас для масштабирования и перетаскивания карты используется сторонний компонент PinchScrollZoom. Он добавляет зависимость и ограничивает управление поведением (зум, позиционирование, двойной тап и т.д.). Нужно заменить его на собственное решение — рендерить SVG напрямую через и использовать @vueuse/gesture + @vueuse/motion для обработки жестов и плавных анимаций.

Что нужно сделать:

1. Изучить:
   1. как работает useDrag, usePinch, useWheel из @vueuse/gesture;
   2. как применять useMotionProperties и useSpring из @vueuse/motion для плавных трансформаций (x, y, scale).
2. Удалить компонент PinchScrollZoom из шаблона.
3. Вместо этого:
   1. обернуть SVG в обычный контейнер <div class="zoom-container">;
   2. добавить обработку жестов для wheel, drag и pinch событий.
4. Реализовать функционал:
   1. масштабирование колесиком и pinch-жестом с ограничениями (1×–3×);
   2. перемещение изображения при удержании (drag);
   3. двойной тап — сброс положения и масштаба в начальное состояние.
5. Добавить плавность:
   1. использовать useSpring для сглаживания изменения позиции и масштаба;
   2. задать начальные значения { x: 0, y: 0, scale: 1 }.
6. Проверить:
   1. изображение не «выпрыгивает» за границы контейнера;
   2. drag не срабатывает при обычном клике.

Чтобы картинка не прыгала, можно добавить в CSS:

img {
  user-drag: none;
  -webkit-user-drag: none;
}