ui-speedspacechart: fix-detailsbox-display

- add showReticleLayer state in SpeedSpaceChart.tsx - display or not ReticleLayer while onMouseDown or onMouseLeave SettingsPanel
OpenRailAssociation · Jul 9, 2024 · 93b631f · 93b631f
1 parent f49799c
commit 93b631f
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 9 deletions.
diff --git 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
@@ -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
@@ -43,6 +43,7 @@ export type TrainDetails = {
   curveY: number;
   marecoSpeedText: string;
   effortText: string;
+  electricalModeText: string;
   electricalProfileText: string;
   previousGradientText: number;
   modeText: string;