diff --git a/src/components/ZoneMapSelector.tsx b/src/components/ZoneMapSelector.tsx index 276f7f1..089ffb3 100644 --- a/src/components/ZoneMapSelector.tsx +++ b/src/components/ZoneMapSelector.tsx @@ -4,12 +4,19 @@ import { Button } from './UiKit'; import { useFeedbackStore } from '@/feedback/feedbackStore'; import { fitYandexMap, yandexPoint, type YandexPoint } from '@/maps/yandex'; import { useYandexMap } from '@/maps/useYandexMap'; +import type { ParkingZone } from '@/types'; type MapPoint = { lat: number; lng: number; }; +type ZoneMapOverlay = { + id: ParkingZone['id']; + points: MapPoint[]; + isActive?: boolean; +}; + function hasCoordinates(latitude?: number | null, longitude?: number | null): latitude is number { return typeof latitude === 'number' && Number.isFinite(latitude) @@ -25,6 +32,15 @@ function fromYandexPoint(point: YandexPoint): MapPoint { return { lat: point[0], lng: point[1] }; } +function zoneGeoPoints(zone: ParkingZone): MapPoint[] | null { + const points = zone.points + .filter(point => hasCoordinates(point.latitude, point.longitude)) + .slice(0, 4) + .map(point => ({ lat: point.latitude!, lng: point.longitude! })); + const uniqueCoords = new Set(points.map(point => `${point.lat},${point.lng}`)); + return points.length === 4 && uniqueCoords.size > 1 ? points : null; +} + function stopYandexEventPropagation(event: any) { if (typeof event?.stopPropagation === 'function') event.stopPropagation(); } @@ -32,6 +48,7 @@ function stopYandexEventPropagation(event: any) { function YandexZoneGeometryMap({ center, points, + otherZones, fitVersion, onMapClick, onPointsCommit, @@ -39,6 +56,7 @@ function YandexZoneGeometryMap({ }: { center: YandexPoint; points: MapPoint[]; + otherZones: ZoneMapOverlay[]; fitVersion: number; onMapClick: (point: MapPoint) => void; onPointsCommit: (points: MapPoint[]) => void; @@ -110,6 +128,26 @@ function YandexZoneGeometryMap({ }); }; + otherZones.forEach(otherZone => { + const coordinates = otherZone.points.map(toYandexPoint); + const polygon = new ymaps.Polygon( + [coordinates], + { + hintContent: `Зона #${String(otherZone.id)}` + }, + { + strokeColor: otherZone.isActive === false ? '#9ca3af' : '#0f766e', + strokeOpacity: 0.72, + strokeWidth: 2, + fillColor: otherZone.isActive === false ? '#9ca3af' : '#0f766e', + fillOpacity: otherZone.isActive === false ? 0.08 : 0.14, + zIndex: 80, + interactivityModel: 'default#transparent' + } + ); + collection.add(polygon); + }); + const pointsFromDraggedGeometry = (geoObject: any) => { const coordinates = geoObject.geometry.getCoordinates(); const line = Array.isArray(coordinates?.[0]?.[0]) @@ -243,7 +281,7 @@ function YandexZoneGeometryMap({ map.behaviors.enable(['drag']); map.geoObjects.remove(collection); }; - }, [ymaps, map, points, onInteractionStart, onMapClick, onPointsCommit]); + }, [ymaps, map, points, otherZones, onInteractionStart, onMapClick, onPointsCommit]); return (