ui-speedspacechart: fix-detailsbox-display

- add showReticleLayer state in SpeedSpaceChart.tsx
- display or not ReticleLayer while onMouseDown or onMouseLeave SettingsPanel

Author: Yohh

ui-speedspacechart/src/components/SpeedSpaceChart.tsx

@@ -90,6 +90,7 @@ const SpeedSpaceChart = ({
   const dynamicHeightOffset = getAdaptiveHeight(HEIGHT_OFFSET, store.layersDisplay);
 
   const [showDetailsBox, setShowDetailsBox] = useState(false);
+  const [showReticleLayer, setShowReticleLayer] = useState(true);
 
   const reset = () => {
     setStore((prev) => ({
@@ -145,6 +146,7 @@ const SpeedSpaceChart = ({
             color={backgroundColor}
             store={store}
             setStore={setStore}
+            setShowReticleLayer={setShowReticleLayer}
             translations={translations}
           />
         </div>
@@ -180,14 +182,16 @@ const SpeedSpaceChart = ({
         />
       )}
       <TickLayerX width={width} height={dynamicHeight} 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}

ui-speedspacechart/src/components/common/SettingsPanel.tsx

@@ -10,11 +10,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,
@@ -26,6 +34,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">