fix(Map): Fix problem when systems was deselected after change tab

assets/js/hooks/Mapper/components/map/hooks/api/index.ts

@@ -6,5 +6,5 @@ export * from './useCommandsCharacters';
 export * from './useCommandsConnections';
 export * from './useCommandsConnections';
 export * from './useCenterSystem';
-export * from './useSelectSystem';
+export * from './useSelectSystems';
 export * from './useMapCommands';

assets/js/hooks/Mapper/components/map/hooks/api/useSelectSystem.ts

@@ -1,21 +0,0 @@
-import { useReactFlow } from 'reactflow';
-import { useCallback, useRef } from 'react';
-import { CommandSelectSystem } from '@/hooks/Mapper/types';
-
-export const useSelectSystem = () => {
-  const rf = useReactFlow();
-
-  const ref = useRef({ rf });
-  ref.current = { rf };
-
-  return useCallback((systemId: CommandSelectSystem) => {
-    ref.current.rf.setNodes(nds =>
-      nds.map(node => {
-        return {
-          ...node,
-          selected: node.id === systemId,
-        };
-      }),
-    );
-  }, []);
-};

assets/js/hooks/Mapper/components/map/hooks/api/useSelectSystems.ts

@@ -0,0 +1,31 @@
+import { useReactFlow } from 'reactflow';
+import { useCallback, useRef } from 'react';
+import { CommandSelectSystems } from '@/hooks/Mapper/types';
+import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
+
+export const useSelectSystems = (onSelectionChange: OnMapSelectionChange) => {
+  const rf = useReactFlow();
+
+  const ref = useRef({ rf, onSelectionChange });
+  ref.current = { rf, onSelectionChange };
+
+  return useCallback(({ systems, delay }: CommandSelectSystems) => {
+    const run = () => {
+      ref.current.rf.setNodes(nds =>
+        nds.map(node => {
+          return {
+            ...node,
+            selected: systems.includes(node.id),
+          };
+        }),
+      );
+    };
+
+    if (delay == null || delay === 0) {
+      run();
+      return;
+    }
+
+    setTimeout(run, delay);
+  }, []);
+};

assets/js/hooks/Mapper/components/map/hooks/useMapHandlers.ts

@@ -14,6 +14,7 @@ import {
   CommandRemoveSystems,
   Commands,
   CommandSelectSystem,
+  CommandSelectSystems,
   CommandUpdateConnection,
   CommandUpdateSystems,
   MapHandlers,
@@ -28,7 +29,7 @@ import {
   useMapRemoveSystems,
   useMapUpdateSystems,
   useCenterSystem,
-  useSelectSystem,
+  useSelectSystems,
 } from './api';
 import { OnMapSelectionChange } from '@/hooks/Mapper/components/map/map.types.ts';
 
@@ -38,7 +39,7 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
   const mapUpdateSystems = useMapUpdateSystems();
   const removeSystems = useMapRemoveSystems(onSelectionChange);
   const centerSystem = useCenterSystem();
-  const selectSystem = useSelectSystem();
+  const selectSystems = useSelectSystems(onSelectionChange);
 
   const selectRef = useRef({ onSelectionChange });
   selectRef.current = { onSelectionChange };
@@ -105,14 +106,11 @@ export const useMapHandlers = (ref: ForwardedRef<MapHandlers>, onSelectionChange
               break;
 
             case Commands.selectSystem:
-              setTimeout(() => {
-                const systemId = `${data}`;
-                selectRef.current.onSelectionChange({
-                  systems: [systemId],
-                  connections: [],
-                });
-                selectSystem(systemId as CommandSelectSystem);
-              }, 500);
+              selectSystems({ systems: [data as string], delay: 500 });
+              break;
+
+            case Commands.selectSystems:
+              selectSystems(data as CommandSelectSystems);
               break;
 
             case Commands.pingAdded: