diff --git a/frontend/src/Components/RoadDetails/RoadImage.tsx b/frontend/src/Components/RoadDetails/RoadImage.tsx index 2485f6db..2fd610ce 100644 --- a/frontend/src/Components/RoadDetails/RoadImage.tsx +++ b/frontend/src/Components/RoadDetails/RoadImage.tsx @@ -85,6 +85,8 @@ const RoadImage: React.FC = ({ const [allImages, setAllImages] = useState([]); /** The image of the selected type */ const [displayedImages, setDisplayedImages] = useState([]); + + const [indexLastViewed, setIndexLastViewed] = useState(0); /** The type of image to display */ const containerRef = useRef(null); @@ -141,7 +143,7 @@ const RoadImage: React.FC = ({ const images = container.querySelectorAll('.road-image-surface-image'); const currentlyVisibleImagesForPixels: IImageValuesForPixels[] = []; - images.forEach((image) => { + images.forEach((image, index) => { const imageRect = image.getBoundingClientRect(); if ( imageRect.right >= containerRect.left && @@ -173,10 +175,16 @@ const RoadImage: React.FC = ({ imageRect.right > roadSurfaceImageDivRightPixel ? roadSurfaceImageDivRightPixel : imageRect.right, + absoluteIndex: index, }); } } }); + + if (currentlyVisibleImagesForPixels.length > 0) { + setIndexLastViewed(currentlyVisibleImagesForPixels[0].absoluteIndex); + } + onRoadDistanceChange(getRoadDistances(currentlyVisibleImagesForPixels)); }, [containerRef, onRoadDistanceChange, displayedImages]); @@ -223,13 +231,25 @@ const RoadImage: React.FC = ({
{displayedImages.length > 0 - ? displayedImages.slice(0, 25).map((image) => ( + ? displayedImages.slice(0, 25).map((image, index) => (
- + { + if (index === indexLastViewed) { + setTimeout(() => { + if (containerRef.current === null) return; + const container = containerRef.current as HTMLElement; + container.children[index].scrollIntoView(); + }, 20); + } + }} + />
)) : null} diff --git a/frontend/src/Components/RoadDetails/RotatedImage.tsx b/frontend/src/Components/RoadDetails/RotatedImage.tsx index a10a041b..60f778e6 100644 --- a/frontend/src/Components/RoadDetails/RotatedImage.tsx +++ b/frontend/src/Components/RoadDetails/RotatedImage.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'; interface Props { /** The path of the image to display */ src: string; + onLoad?: () => void; } /** @@ -11,7 +12,7 @@ interface Props { * @param src The path of the image to display * @author Kerbourc'h */ -const RotatedImage: React.FC = ({ src }) => { +const RotatedImage: React.FC = ({ src, onLoad }) => { const canvasRef = useRef(null); const [width, setWidth] = useState(0); @@ -35,6 +36,8 @@ const RotatedImage: React.FC = ({ src }) => { ctx.translate(canvas.width / 2, canvas.height / 2); ctx.rotate((Math.PI / 180) * 90); ctx.drawImage(image, -image.width / 2, -image.height / 2); + + if (onLoad) onLoad(); }; }, [canvasRef, src]); diff --git a/frontend/src/models/models.ts b/frontend/src/models/models.ts index 9e74ec6c..d9127235 100644 --- a/frontend/src/models/models.ts +++ b/frontend/src/models/models.ts @@ -32,6 +32,7 @@ export interface IImageValuesForPixels { pixelWidth: number; firstVisiblePixelLeft: number; lastVisiblePixelRight: number; + absoluteIndex: number; } export interface Conditions {