From 0435086d3970cbc047a6ad4ce892a68f4ea16562 Mon Sep 17 00:00:00 2001 From: Valentin Chanas Date: Fri, 10 Jan 2025 11:00:53 +0100 Subject: [PATCH 1/3] manchette-space-time: remove duplicated value Signed-off-by: Valentin Chanas --- .../src/hooks/useManchetteWithSpaceTimeChart.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts index 6ab8078e..be0b4aea 100644 --- a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts +++ b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts @@ -31,7 +31,6 @@ type State = { xOffset: number; yOffset: number; panning: { initialOffset: { x: number; y: number } } | null; - scrollPosition: number; isProportional: boolean; waypointsChart: Waypoint[]; scales: SpaceScale[]; @@ -52,13 +51,12 @@ const useManchettesWithSpaceTimeChart = ( xOffset: 0, yOffset: 0, panning: null, - scrollPosition: 0, isProportional: true, waypointsChart: [], scales: [], }); - const { xZoom, yZoom, xOffset, yOffset, panning, scrollPosition, isProportional } = state; + const { xZoom, yZoom, xOffset, yOffset, panning, isProportional } = state; const paths = usePaths(projectPathTrainResult, selectedTrain); @@ -96,7 +94,7 @@ const useManchettesWithSpaceTimeChart = ( if (!isShiftPressed && manchetteWithSpaceTimeChartContainer.current) { const { scrollTop } = manchetteWithSpaceTimeChartContainer.current; if (scrollTop || scrollTop === 0) { - setState((prev) => ({ ...prev, scrollPosition: scrollTop, yOffset: scrollTop })); + setState((prev) => ({ ...prev, yOffset: scrollTop })); } } }, [isShiftPressed, manchetteWithSpaceTimeChartContainer]); @@ -162,7 +160,7 @@ const useManchettesWithSpaceTimeChart = ( timeScale: zoomValueToTimeScale(xZoom), paths, xOffset, - yOffset: -scrollPosition + 14, + yOffset: -yOffset + 14, onZoom: ({ delta, position }: Parameters>[0]) => { if (isShiftPressed) { handleXZoom(xZoom + delta, position.x); @@ -192,7 +190,6 @@ const useManchettesWithSpaceTimeChart = ( manchetteWithSpaceTimeChartContainer.current.scrollHeight ) { newState.yOffset = newYPos; - newState.scrollPosition = newYPos; manchetteWithSpaceTimeChartContainer.current.scrollTop = newYPos; } } @@ -205,7 +202,6 @@ const useManchettesWithSpaceTimeChart = ( xZoom, paths, xOffset, - scrollPosition, isShiftPressed, state, panning, From 7ca96c62f1b46623d3ac0b7f5794231e3775b0f0 Mon Sep 17 00:00:00 2001 From: Valentin Chanas Date: Fri, 10 Jan 2025 11:01:12 +0100 Subject: [PATCH 2/3] manchette-space-time: fix padding issue Signed-off-by: Valentin Chanas --- ui-manchette-with-spacetimechart/src/styles/manchette.css | 1 - 1 file changed, 1 deletion(-) diff --git a/ui-manchette-with-spacetimechart/src/styles/manchette.css b/ui-manchette-with-spacetimechart/src/styles/manchette.css index 0bcb120e..f249bb73 100644 --- a/ui-manchette-with-spacetimechart/src/styles/manchette.css +++ b/ui-manchette-with-spacetimechart/src/styles/manchette.css @@ -20,7 +20,6 @@ .space-time-chart-container { height: 561px; width: 100%; - padding-top: 10px; bottom: 0; } } From 8b80c265d62bd71c6de66111b0af5e11001d5d1d Mon Sep 17 00:00:00 2001 From: Valentin Chanas Date: Fri, 10 Jan 2025 12:14:05 +0100 Subject: [PATCH 3/3] manchette-space-time: fix zooming bahavior keep the scrolling position when zooming Signed-off-by: Valentin Chanas --- .../hooks/useManchetteWithSpaceTimeChart.ts | 44 +++++++++++++++---- 1 file changed, 36 insertions(+), 8 deletions(-) diff --git a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts index be0b4aea..7b1eff48 100644 --- a/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts +++ b/ui-manchette-with-spacetimechart/src/hooks/useManchetteWithSpaceTimeChart.ts @@ -29,7 +29,10 @@ type State = { xZoom: number; yZoom: number; xOffset: number; + /** the current y-scroll of the view. always updates */ yOffset: number; + /** only update after a zoom. used to update back the view scroll value */ + scrollTo: number | null; panning: { initialOffset: { x: number; y: number } } | null; isProportional: boolean; waypointsChart: Waypoint[]; @@ -50,13 +53,14 @@ const useManchettesWithSpaceTimeChart = ( yZoom: 1, xOffset: 0, yOffset: 0, + scrollTo: null, panning: null, isProportional: true, waypointsChart: [], scales: [], }); - const { xZoom, yZoom, xOffset, yOffset, panning, isProportional } = state; + const { xZoom, yZoom, xOffset, yOffset, scrollTo, panning, isProportional } = state; const paths = usePaths(projectPathTrainResult, selectedTrain); @@ -76,15 +80,39 @@ const useManchettesWithSpaceTimeChart = ( const zoomYIn = useCallback(() => { if (yZoom < MAX_ZOOM_Y) { - setState((prev) => ({ ...prev, yZoom: yZoom + ZOOM_Y_DELTA })); + const newYZoom = yZoom + ZOOM_Y_DELTA; + const newYOffset = yOffset * (newYZoom / yZoom); + + setState((prev) => ({ + ...prev, + yZoom: newYZoom, + yOffset: newYOffset, + scrollTo: newYOffset, + })); } - }, [yZoom]); + }, [yZoom, yOffset]); const zoomYOut = useCallback(() => { if (yZoom > MIN_ZOOM_Y) { - setState((prev) => ({ ...prev, yZoom: yZoom - ZOOM_Y_DELTA })); + const newYZoom = yZoom - ZOOM_Y_DELTA; + const newYOffset = yOffset * (newYZoom / yZoom); + setState((prev) => ({ + ...prev, + yZoom: newYZoom, + yOffset: newYOffset, + scrollTo: newYOffset, + })); + } + }, [yZoom, yOffset]); + + useEffect(() => { + if (scrollTo !== null && manchetteWithSpaceTimeChartContainer.current) { + manchetteWithSpaceTimeChartContainer.current.scrollTo({ + top: scrollTo, + behavior: 'instant', + }); } - }, [yZoom]); + }, [scrollTo, manchetteWithSpaceTimeChartContainer]); const resetZoom = useCallback(() => { setState((prev) => ({ ...prev, yZoom: 1 })); @@ -139,8 +167,9 @@ const useManchettesWithSpaceTimeChart = ( toggleMode, yZoom, isProportional, + yOffset, }), - [waypointWithHeight, zoomYIn, zoomYOut, resetZoom, toggleMode, yZoom, isProportional] + [waypointWithHeight, zoomYIn, zoomYOut, resetZoom, toggleMode, yZoom, isProportional, yOffset] ); const handleXZoom = useCallback( @@ -217,9 +246,8 @@ const useManchettesWithSpaceTimeChart = ( spaceTimeChartProps, handleScroll, handleXZoom, - xZoom, }), - [manchetteProps, spaceTimeChartProps, handleScroll, handleXZoom, xZoom] + [manchetteProps, spaceTimeChartProps, handleScroll, handleXZoom] ); };