From 93b631fd2b07be030e8dea73c9f74058d11e28f3 Mon Sep 17 00:00:00 2001
From: Yohh <durandyohan@zaclys.net>
Date: Tue, 9 Jul 2024 16:39:08 +0200
Subject: [PATCH] ui-speedspacechart: fix-detailsbox-display

- add showReticleLayer state in SpeedSpaceChart.tsx
- display or not ReticleLayer while onMouseDown or onMouseLeave SettingsPanel
---
 .../src/components/SpeedSpaceChart.tsx        | 20 +++++++++++--------
 .../src/components/common/SettingsPanel.tsx   | 12 ++++++++++-
 ui-speedspacechart/src/types/chartTypes.ts    |  1 +
 3 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/ui-speedspacechart/src/components/SpeedSpaceChart.tsx b/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
index 8d1214371..a89c45451 100644
--- a/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
+++ b/ui-speedspacechart/src/components/SpeedSpaceChart.tsx
@@ -87,6 +87,7 @@ const SpeedSpaceChart = ({
   const dynamicHeightOffset = getAdaptiveHeight(HEIGHT_OFFSET, store.layersDisplay);
 
   const [showDetailsBox, setShowDetailsBox] = useState(false);
+  const [showReticleLayer, setShowReticleLayer] = useState(true);
 
   const reset = () => {
     setStore((prev) => ({
@@ -141,6 +142,7 @@ const SpeedSpaceChart = ({
             color={backgroundColor}
             store={store}
             setStore={setStore}
+            setShowReticleLayer={setShowReticleLayer}
             translations={translations}
           />
         </div>
@@ -165,14 +167,16 @@ const SpeedSpaceChart = ({
       {store.layersDisplay.electricalProfiles && (
         <ElectricalProfileLayer width={width} height={height + 56} store={store} />
       )}
-      <ReticleLayer
-        width={width}
-        height={dynamicHeight}
-        heightOffset={dynamicHeightOffset}
-        store={store}
-        showDetailsBox={showDetailsBox}
-        setShowDetailsBox={setShowDetailsBox}
-      />
+      {showReticleLayer && (
+        <ReticleLayer
+          width={width}
+          height={dynamicHeight}
+          heightOffset={dynamicHeightOffset}
+          store={store}
+          showDetailsBox={showDetailsBox}
+          setShowDetailsBox={setShowDetailsBox}
+        />
+      )}
       <FrontInteractivityLayer
         width={WIDTH_OFFSET}
         height={dynamicHeightOffset}
diff --git a/ui-speedspacechart/src/components/common/SettingsPanel.tsx b/ui-speedspacechart/src/components/common/SettingsPanel.tsx
index 0e032169c..3c254e722 100644
--- a/ui-speedspacechart/src/components/common/SettingsPanel.tsx
+++ b/ui-speedspacechart/src/components/common/SettingsPanel.tsx
@@ -9,11 +9,19 @@ type SettingsPanelProps = {
   color: string;
   store: Store;
   setStore: React.Dispatch<React.SetStateAction<Store>>;
+  setShowReticleLayer: React.Dispatch<React.SetStateAction<boolean>>;
   translations?: SpeedSpaceChartProps['translations'];
 };
 
-const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelProps) => {
+const SettingsPanel = ({
+  color,
+  store,
+  setStore,
+  setShowReticleLayer,
+  translations,
+}: SettingsPanelProps) => {
   const closeSettingsPanel = () => {
+    setShowReticleLayer(true);
     setStore((prev) => ({
       ...prev,
       isSettingsPanelOpened: false,
@@ -25,6 +33,8 @@ const SettingsPanel = ({ color, store, setStore, translations }: SettingsPanelPr
       id="settings-panel"
       style={{ background: `rgba(${color.substring(4, color.length - 1)}, 0.4)` }}
       className="font-sans"
+      onMouseMove={() => setShowReticleLayer(false)}
+      onMouseLeave={() => setShowReticleLayer(true)}
     >
       <div className="settings-panel-section">
         <div className="settings-panel-section-title">
diff --git a/ui-speedspacechart/src/types/chartTypes.ts b/ui-speedspacechart/src/types/chartTypes.ts
index dff90433a..814aa8844 100644
--- a/ui-speedspacechart/src/types/chartTypes.ts
+++ b/ui-speedspacechart/src/types/chartTypes.ts
@@ -43,6 +43,7 @@ export type TrainDetails = {
   curveY: number;
   marecoSpeedText: string;
   effortText: string;
+  electricalModeText: string;
   electricalProfileText: string;
   previousGradientText: number;
   modeText: string;