From d62f4808bc58d8838c56bb671595680551d83798 Mon Sep 17 00:00:00 2001 From: SarahBellaha Date: Thu, 11 Jul 2024 21:59:44 +0200 Subject: [PATCH] front: stdcm: change map --- front/public/locales/en/stdcm.json | 2 +- .../src/applications/stdcm/hooks/useStdcm.ts | 1 + front/src/applications/stdcm/types.ts | 2 + .../components/StdcmResults/StdcmResults.tsx | 6 +- .../stdcmV2/views/StdcmViewV2.tsx | 1 - .../ItineraryMarkersV2.tsx | 12 ++- .../components/ManageTrainSchedule/Map.tsx | 97 +++++++++++-------- .../scss/applications/stdcmV2/_home.scss | 4 +- .../scss/applications/stdcmV2/_results.scss | 3 + 9 files changed, 82 insertions(+), 46 deletions(-) diff --git a/front/public/locales/en/stdcm.json b/front/public/locales/en/stdcm.json index 273511723c9..cd1e8f267af 100644 --- a/front/public/locales/en/stdcm.json +++ b/front/public/locales/en/stdcm.json @@ -58,7 +58,7 @@ "speedSpaceChart": "Speed Space Chart", "stdcmComputation": "Search for a train path", "stdcmErrors": { - "bothOriginAndDestinationScheduled": "The calculation cannot take into account both an origin and a destination schedule. You have to choose one or the other:", + "bothPointAreScheduled": "The calculation cannot take into account both an origin and a destination schedule. You have to choose one or the other:", "noPaths": "Incompatibility with other train paths.", "noResults": "No path found", "noScheduledPoint": "The calculation requires either the origin or destination schedule.", diff --git a/front/src/applications/stdcm/hooks/useStdcm.ts b/front/src/applications/stdcm/hooks/useStdcm.ts index 0fb2f3c62b3..42b6bec88ef 100644 --- a/front/src/applications/stdcm/hooks/useStdcm.ts +++ b/front/src/applications/stdcm/hooks/useStdcm.ts @@ -95,6 +95,7 @@ const useStdcm = (showFailureNotification: boolean = true) => { rollingStock: stdcmRollingStock, creationDate: new Date(), speedLimitByTag, + simulationPathSteps: osrdconf.pathSteps, } as StdcmV2SuccessResponse); const stdcmTrain: TrainScheduleResult = { diff --git a/front/src/applications/stdcm/types.ts b/front/src/applications/stdcm/types.ts index 8a2d8017e7a..d77f9092d89 100644 --- a/front/src/applications/stdcm/types.ts +++ b/front/src/applications/stdcm/types.ts @@ -14,6 +14,7 @@ import type { RollingStockWithLiveries, SimulationResponse, } from 'common/api/osrdEditoastApi'; +import type { PathStep } from 'reducers/osrdconf/types'; import type { ValueOf } from 'utils/types'; export type StdcmRequestStatus = ValueOf; @@ -26,6 +27,7 @@ export type StdcmV2SuccessResponse = Omit< rollingStock: LightRollingStock; creationDate: Date; speedLimitByTag?: string; + simulationPathSteps: PathStep[]; }; export type SimulationReportSheetProps = { diff --git a/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx b/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx index 26331c8e612..65750d2652f 100644 --- a/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx +++ b/front/src/applications/stdcmV2/components/StdcmResults/StdcmResults.tsx @@ -112,12 +112,14 @@ const StcdmResults = ({ {t('changeCriteria')} )} -
+
diff --git a/front/src/applications/stdcmV2/views/StdcmViewV2.tsx b/front/src/applications/stdcmV2/views/StdcmViewV2.tsx index 10aed41fe4a..9f76062ebb0 100644 --- a/front/src/applications/stdcmV2/views/StdcmViewV2.tsx +++ b/front/src/applications/stdcmV2/views/StdcmViewV2.tsx @@ -136,7 +136,6 @@ const StdcmViewV2 = () => { return acc; }, [] as MarkerInformation[]); -const ItineraryMarkers = ({ map }: { map: Map }) => { +const ItineraryMarkers = ({ map, simulationPathSteps }: ItineraryMarkersProps) => { const { getPathSteps } = useOsrdConfSelectors(); const pathSteps = useSelector(getPathSteps); - const markersInformation = useMemo(() => extractMarkerInformation(pathSteps), [pathSteps]); + const markersInformation = useMemo( + () => extractMarkerInformation(simulationPathSteps || pathSteps), + [simulationPathSteps, pathSteps] + ); const getMarkerDisplayInformation = useCallback( (markerInfo: MarkerInformation) => { diff --git a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx index 31b7c688a43..a7f5e3470cd 100644 --- a/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx +++ b/front/src/modules/trainschedule/components/ManageTrainSchedule/Map.tsx @@ -55,6 +55,7 @@ import RenderPopup from 'modules/trainschedule/components/ManageTrainSchedule/Ma import { updateViewport } from 'reducers/map'; import type { Viewport } from 'reducers/map'; import { getMap, getTerrain3DExaggeration } from 'reducers/map/selectors'; +import type { PathStep } from 'reducers/osrdconf/types'; import { useAppDispatch } from 'store'; import { getMapMouseEventNearestFeature } from 'utils/mapHelper'; @@ -64,17 +65,23 @@ import ItineraryMarkersV2 from './ManageTrainScheduleMap/ItineraryMarkersV2'; type MapProps = { pathProperties?: ManageTrainSchedulePathProperties; setMapCanvas?: (mapCanvas: string) => void; + isReadOnly?: boolean; hideAttribution?: boolean; hideItinerary?: boolean; preventPointSelection?: boolean; + mapId?: string; + simulationPathSteps?: PathStep[]; }; const Map: FC> = ({ pathProperties, setMapCanvas, + isReadOnly = false, hideAttribution = false, hideItinerary = false, preventPointSelection = false, + mapId = 'map-container', + simulationPathSteps, children, }) => { const mapBlankStyle = useMapBlankStyle(); @@ -82,9 +89,15 @@ const Map: FC> = ({ const infraID = useInfraID(); const terrain3DExaggeration = useSelector(getTerrain3DExaggeration); const { viewport, mapSearchMarker, mapStyle, showOSM, layersSettings } = useSelector(getMap); + const mapViewport = useMemo( + () => + isReadOnly && pathProperties + ? computeBBoxViewport(bbox(pathProperties?.geometry), viewport) + : viewport, + [isReadOnly, pathProperties, viewport] + ); const [mapIsLoaded, setMapIsLoaded] = useState(false); - const [showLayers, setShowLayers] = useState(true); const [snappedPoint, setSnappedPoint] = useState | undefined>(); const { urlLat = '', urlLon = '', urlZoom = '', urlBearing = '', urlPitch = '' } = useParams(); @@ -119,7 +132,7 @@ const Map: FC> = ({ const resetPitchBearing = () => { updateViewportChange({ - ...viewport, + ...mapViewport, bearing: 0, pitch: 0, }); @@ -127,7 +140,6 @@ const Map: FC> = ({ const onFeatureClick = (e: MapLayerMouseEvent) => { if (preventPointSelection) return; - const result = getMapMouseEventNearestFeature(e, { layersId: ['chartis/tracks-geo/main'] }); if ( result && @@ -155,7 +167,6 @@ const Map: FC> = ({ const onMoveGetFeature = (e: MapLayerMouseEvent) => { if (preventPointSelection) return; - const result = getMapMouseEventNearestFeature(e, { layersId: ['chartis/tracks-geo/main'] }); if ( result && @@ -193,7 +204,7 @@ const Map: FC> = ({ useEffect(() => { if (urlLat) { updateViewportChange({ - ...viewport, + ...mapViewport, latitude: parseFloat(urlLat), longitude: parseFloat(urlLon), zoom: parseFloat(urlZoom), @@ -206,10 +217,7 @@ const Map: FC> = ({ useEffect(() => { if (pathProperties) { - if (setMapCanvas) { - setShowLayers(false); - } - const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport); + const newViewport = computeBBoxViewport(bbox(pathProperties.geometry), mapViewport); dispatch(updateViewport(newViewport)); } }, [pathProperties]); @@ -217,49 +225,55 @@ const Map: FC> = ({ const captureMap = async () => { if (!pathProperties) return; - const itineraryViewport = computeBBoxViewport(bbox(pathProperties.geometry), viewport); + const itineraryViewport = computeBBoxViewport(bbox(pathProperties.geometry), mapViewport); - if (setMapCanvas && !showLayers && isEqual(viewport, itineraryViewport)) { + if (setMapCanvas && isEqual(mapViewport, itineraryViewport)) { try { - const mapElement = document.getElementById('map-container'); + const mapElement = document.getElementById(mapId); if (mapElement) { const canvas = await html2canvas(mapElement); setMapCanvas(canvas.toDataURL()); } } catch (error) { console.error('Error capturing map:', error); - } finally { - setShowLayers(true); } } }; return ( <> - + {!isReadOnly && ( + + )} updateViewportChange(e.viewState)} - onMouseMove={onMoveGetFeature} attributionControl={false} // Defined below - onClick={onFeatureClick} - onResize={(e) => { - updateViewportChange({ - width: e.target.getContainer().offsetWidth, - height: e.target.getContainer().offsetHeight, - }); - }} + {...(!isReadOnly && { + dragPan: true, + scrollZoom: true, + onMove: (e) => updateViewportChange(e.viewState), + onMouseMove: onMoveGetFeature, + onClick: onFeatureClick, + onResize: (e) => { + updateViewportChange({ + width: e.target.getContainer().offsetWidth, + height: e.target.getContainer().offsetHeight, + }); + }, + })} interactiveLayerIds={interactiveLayerIds} touchZoomRotate maxPitch={85} @@ -271,9 +285,11 @@ const Map: FC> = ({ onLoad={() => { setMapIsLoaded(true); }} - onIdle={() => captureMap()} + onIdle={() => { + captureMap(); + }} preserveDrawingBuffer - id="map-container" + id={mapId} > {!hideAttribution && ( @@ -325,7 +341,7 @@ const Map: FC> = ({ layerOrder={LAYER_GROUPS_ORDER[LAYERS.ROUTES.GROUP]} infraID={infraID} /> - {showLayers && ( + {!isReadOnly && ( <> {layersSettings.operationalpoints && ( > = ({ layerOrder={LAYER_GROUPS_ORDER[LAYERS.LINE_SEARCH.GROUP]} infraID={infraID} /> + )} - {mapIsLoaded && ( <> > = ({ geometry={pathProperties?.geometry} hideItineraryLine={hideItinerary} /> - {mapRef.current && } + {mapRef.current && ( + + )} )} {mapSearchMarker && } diff --git a/front/src/styles/scss/applications/stdcmV2/_home.scss b/front/src/styles/scss/applications/stdcmV2/_home.scss index e6f5acda6c7..9f00b5371e2 100644 --- a/front/src/styles/scss/applications/stdcmV2/_home.scss +++ b/front/src/styles/scss/applications/stdcmV2/_home.scss @@ -190,8 +190,8 @@ } .stdcm-v2-map { - border-radius: 8px; - border: 1px solid rgba(255, 255, 255, 1); + border-radius: 0.5rem; + border: 0.063rem solid rgba(255, 255, 255, 1); box-shadow: 0px 0px 0px 2px rgba(255, 255, 255, 0.75) inset, 0px 0px 0px 1px rgba(0, 0, 0, 0.25) inset; diff --git a/front/src/styles/scss/applications/stdcmV2/_results.scss b/front/src/styles/scss/applications/stdcmV2/_results.scss index 3e43717d80a..566a33d1074 100644 --- a/front/src/styles/scss/applications/stdcmV2/_results.scss +++ b/front/src/styles/scss/applications/stdcmV2/_results.scss @@ -342,6 +342,9 @@ box-shadow: 0rem 0rem 0rem 0.125rem rgba(255, 255, 255, 0.75) inset, 0rem 0rem 0rem 0.063rem rgba(0, 0, 0, 0.25) inset; + &.no-pointer-events { + pointer-events: none; + } } } }