fix: Update map with tables fixes

src/pages/Route/route-preview/Sight.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { useTransform } from "./TransformContext";
 import { SightData } from "./types";
-import { Assets, FederatedMouseEvent, Graphics, Texture } from "pixi.js";
+import { Assets, FederatedMouseEvent, Texture } from "pixi.js";
 
 import { SIGHT_SIZE, UP_SCALE } from "./Constants";
 import { coordinatesToLocal, localToCoordinates } from "./utils";
@@ -12,19 +12,21 @@ interface SightProps {
   id: number;
 }
 
-export function Sight({ sight, id }: Readonly<SightProps>) {
+export const Sight = ({ sight, id }: Readonly<SightProps>) => {
   const { rotation, scale } = useTransform();
-  const { setSightCoordinates } = useMapData();
+  const { setSightCoordinates, setSelectedSight } = useMapData();
 
   const [position, setPosition] = useState(
     coordinatesToLocal(sight.latitude, sight.longitude)
   );
   const [isDragging, setIsDragging] = useState(false);
+  const [isPointerDown, setIsPointerDown] = useState(false);
   const [startPosition, setStartPosition] = useState({ x: 0, y: 0 });
   const [startMousePosition, setStartMousePosition] = useState({ x: 0, y: 0 });
 
   const handlePointerDown = (e: FederatedMouseEvent) => {
-    setIsDragging(true);
+    setIsPointerDown(true);
+    setIsDragging(false);
     setStartPosition({
       x: position.x,
       y: position.y,
@@ -37,7 +39,18 @@ export function Sight({ sight, id }: Readonly<SightProps>) {
     e.stopPropagation();
   };
   const handlePointerMove = (e: FederatedMouseEvent) => {
-    if (!isDragging) return;
+    if (!isPointerDown) return;
+
+    if (!isDragging) {
+      const dx = e.globalX - startMousePosition.x;
+      const dy = e.globalY - startMousePosition.y;
+      if (Math.abs(dx) > 2 || Math.abs(dy) > 2) {
+        setIsDragging(true);
+      } else {
+        return;
+      }
+    }
+
     const dx = (e.globalX - startMousePosition.x) / scale / UP_SCALE;
     const dy = (e.globalY - startMousePosition.y) / scale / UP_SCALE;
     const cos = Math.cos(rotation);
@@ -53,30 +66,37 @@ export function Sight({ sight, id }: Readonly<SightProps>) {
   };
 
   const handlePointerUp = (e: FederatedMouseEvent) => {
+    setIsPointerDown(false);
+
+    // Если не было перетаскивания, то это клик
+    if (!isDragging) {
+      setSelectedSight(sight);
+    }
+
     setIsDragging(false);
     e.stopPropagation();
   };
 
   const [texture, setTexture] = useState(Texture.EMPTY);
   useEffect(() => {
-    if (texture === Texture.EMPTY) {
-      Assets.load("/SightIcon.png").then((result) => {
-        setTexture(result);
-      });
-    }
-  }, [texture]);
+    Assets.load("/SightIcon.png").then(setTexture);
+  }, []);
 
-  function draw(g: Graphics) {
-    g.clear();
-    g.circle(0, 0, 20);
-    g.fill({ color: "#000" }); // Fill circle with primary color
-  }
+  useEffect(() => {
+    console.log(
+      `Rendering Sight ${id + 1} at [${sight.latitude}, ${sight.longitude}]`
+    );
+  }, [id, sight.latitude, sight.longitude]);
 
   if (!sight) {
     console.error("sight is null");
     return null;
   }
 
+  // Компенсируем масштаб для сохранения постоянного размера
+  const compensatedSize = SIGHT_SIZE / scale;
+  const compensatedFontSize = 24 / scale;
+
   return (
     <pixiContainer
       rotation={-rotation}
@@ -86,22 +106,34 @@ export function Sight({ sight, id }: Readonly<SightProps>) {
       onGlobalPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}
       onPointerUpOutside={handlePointerUp}
-      x={position.x * UP_SCALE - SIGHT_SIZE / 2} // Offset by half width to center
-      y={position.y * UP_SCALE - SIGHT_SIZE / 2} // Offset by half height to center
+      x={position.x * UP_SCALE - SIGHT_SIZE / 2}
+      y={position.y * UP_SCALE - SIGHT_SIZE / 2}
     >
-      <pixiSprite texture={texture} width={SIGHT_SIZE} height={SIGHT_SIZE} />
-      <pixiGraphics draw={draw} x={SIGHT_SIZE} y={0} />
+      <pixiSprite
+        texture={texture}
+        width={compensatedSize}
+        height={compensatedSize}
+      />
+      <pixiGraphics
+        draw={(g) => {
+          g.clear();
+          g.circle(0, 0, 20 / scale);
+          g.fill({ color: "#000" });
+        }}
+        x={compensatedSize}
+        y={0}
+      />
       <pixiText
         text={`${id + 1}`}
-        x={SIGHT_SIZE + 1}
+        x={compensatedSize + 1 / scale}
         y={0}
         anchor={0.5}
         style={{
-          fontSize: 24,
+          fontSize: compensatedFontSize,
           fontWeight: "bold",
           fill: "#ffffff",
         }}
       />
     </pixiContainer>
   );
-}
+};