Корректное отображение витков

services/pcp-tgu-ops-ui/src/features/tgu-map-2d/Tgu2DMapView.tsx

@@ -296,16 +296,25 @@ export function Tgu2DMapView({
     >
       <canvas className="tgu-2d-map__canvas" ref={canvasRef} />
       <svg className="tgu-2d-map__overlay" width={size.width} height={size.height} aria-hidden="true">
-        {overlayPolygons.map((polygon) => (
-          <polygon
-            key={polygon.id}
-            points={polygon.points.map((point) => {
-              const screen = projection.project(point);
-              return `${screen.x},${screen.y}`;
-            }).join(" ")}
-            className={polygon.id === selectedPolygon?.id ? "is-selected" : "is-hovered"}
-          />
-        ))}
+        {overlayPolygons.flatMap((polygon) => {
+          const raw = polygon.points.map((point) => projection.project(point));
+          const pts = unwrapX(raw, projection.worldSize);
+          const cls = polygon.id === selectedPolygon?.id ? "is-selected" : "is-hovered";
+          return ([0, projection.worldSize, -projection.worldSize] as const).flatMap((dx) => {
+            const visible = pts.some((p) => {
+              const x = p.x + dx;
+              return x >= -64 && x <= size.width + 64 && p.y >= -64 && p.y <= size.height + 64;
+            });
+            if (!visible) return [];
+            return (
+              <polygon
+                key={`${polygon.id}:${dx}`}
+                points={pts.map((p) => `${p.x + dx},${p.y}`).join(" ")}
+                className={cls}
+              />
+            );
+          });
+        })}
         {targets.map((t) => {
           const screen = projection.project(t);
           const isSelected = t.id === selectedTargetId;
@@ -365,6 +374,20 @@ function layerTitle(layer: MapPolygon["layer"]): string {
   }
 }
 
+function unwrapX(points: { x: number; y: number }[], worldSize: number): { x: number; y: number }[] {
+  if (points.length === 0) return [];
+  const out: { x: number; y: number }[] = [points[0]];
+  let prevX = points[0].x;
+  for (let i = 1; i < points.length; i++) {
+    let x = points[i].x;
+    while (x - prevX > worldSize / 2) x -= worldSize;
+    while (prevX - x > worldSize / 2) x += worldSize;
+    out.push({ x, y: points[i].y });
+    prevX = x;
+  }
+  return out;
+}
+
 function uniquePolygons(polygons: Array<MapPolygon | undefined>): MapPolygon[] {
   const result: MapPolygon[] = [];
   const ids = new Set<string>();