zoomIn zoomOut

ui/src/pages/map.page.tsx

@@ -1,37 +1,88 @@
-import React, { useState } from 'react';
-import WorldMapSVG from '../../public/images/countries.svg';
+import React, { useState, useEffect } from 'react';
+import WorldMapSVG from '../../public/images/countries.svg'; // Путь к SVG карте должен быть верным
 
 function MapPage() {
-  const [visitedCountries, setVisitedCountries] = useState([{ code: "ID", name: "Indonesia" }, { code: "VN", name: "Vietnam_mainland" }]);
+  const [visitedCountries, setVisitedCountries] = useState([{ code: "RU", name: "Russia" }, { code: "VN", name: "Vietnam" }]);
+  const [scale, setScale] = useState(1);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
 
   const handleCountryClick = (svgId: string) => {
-    const countryName = svgId.replace('countries_svg__', '');
-
-    if (!visitedCountries.some(country => country.name === countryName)) {
+    if (svgId === 'countries_svg__ocean') {
+      return;
+    }
+
+    const countryName = svgId;
+
+    if (!visitedCountries.some(country => country.code === svgId)) {
       const newCountry = { code: svgId, name: countryName };
       setVisitedCountries([...visitedCountries, newCountry]);
-      console.log(`Country ${svgId} point added!`);
+      console.log(`Country ${svgId} added!`);
     }
+  };
+
+  // Функции для масштабирования
+  const zoomIn = () => {
+    setScale(scale * 1.1);
+  };
+
+  const zoomOut = () => {
+    setScale(scale / 1.1);
+  };
 
-    // Add class to visited country
-    const visitedCountryElement = document.getElementById(svgId);
-    if (visitedCountryElement) {
-      visitedCountryElement.classList.add('visited-country');
+  const resetZoom = () => {
+    setScale(1);
+    setPosition({ x: 0, y: 0 }); // Сброс позиции при сбросе масштаба
+  };
+
+  // Обработчики событий мыши
+  const handleMouseDown = (e) => {
+    setIsDragging(true);
+    setStartPosition({ x: e.clientX - position.x, y: e.clientY - position.y });
+    e.preventDefault(); // Предотвратить стандартное поведение
+  };
+
+  const handleMouseUp = () => {
+    setIsDragging(false);
+  };
+
+  const handleMouseMove = (e) => {
+    if (isDragging) {
+      setPosition({
+        x: e.clientX - startPosition.x,
+        y: e.clientY - startPosition.y,
+      });
+      e.preventDefault();
     }
   };
 
+  useEffect(() => {
+    visitedCountries.forEach(country => {
+      const countryElement = document.getElementById(country.code);
+      if (countryElement) {
+        countryElement.style.fill = 'rgb(121, 80, 255)'; // Задаем цвет для посещенных стран
+      }
+    });
+  }, [visitedCountries]);
+
   return (
-    <div>
-      <WorldMapSVG onClick={(e: { target: { id: string; }; }) => {
-        if (e.target.id) {
-          handleCountryClick(e.target.id);
-        }
-      }} />
-      <ul>
-        {visitedCountries.map((country) => (
-          <li key={country.code}>{country.name}</li>
-        ))}
-      </ul>
+    <div className="relative w-full h-screen overflow-hidden">
+      <div className="absolute z-10 top-2 left-2 flex space-x-2">
+        <button onClick={zoomIn} className="bg-blue-500 text-white px-4 py-2 rounded">Zoom In</button>
+        <button onClick={zoomOut} className="bg-blue-500 text-white px-4 py-2 rounded">Zoom Out</button>
+        <button onClick={resetZoom} className="bg-blue-500 text-white px-4 py-2 rounded">Reset</button>
+      </div>
+      <div onMouseDown={handleMouseDown} onMouseUp={handleMouseUp} onMouseMove={handleMouseMove} onMouseLeave={handleMouseUp} className="w-full h-full">
+        <WorldMapSVG
+          style={{ transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`, transformOrigin: 'center center' }}
+          className="w-full h-full object-contain"
+          onClick={(e) => {
+            const target = e.target as SVGElement;
+            handleCountryClick(target.id);
+          }}
+        />
+      </div>
     </div>
   );
 }

ui/src/styles/globals.css

@@ -1,3 +1,7 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
 @font-face {
   font-family: 'ABC Monument Grotesk';
   font-style: normal;
@@ -42,8 +46,6 @@ body {
   overflow-x: hidden;
   font-family: 'ABC Monument Grotesk';
   background-color: #0f172a;
-  color: rgb(36, 166, 231);
-  font-size: 14px;
   height: 100%;
   width: 100%;
   position: relative;