map-viewer: empty nominal voltages at substations full reload + add r…

…esetZoomAndPosition (#144) * fix: when reloading network, empty nominal voltage + export method to reset map position and zoom * fix: useImpoerativeHandle dependencies * feat: add TS export + add button to demo Signed-off-by: LE SAULNIER Kevin <[email protected]>
powsybl · Jan 17, 2025 · 368f66c · 368f66c
1 parent 9bcace5
commit 368f66c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/demo/src/App.tsx b/demo/src/App.tsx
@@ -126,6 +126,9 @@ export default function App() {
                                 console.log('Selected Lines: ', networkMapRef.current?.getSelectedLines().length);
                             }}
                         />
+                        <button onClick={() => networkMapRef.current?.resetZoomAndPosition()}>
+                            Reset zoom and position
+                        </button>
                     </div>
                 </ThemeProvider>
             </StyledEngineProvider>

diff --git a/src/components/network-map-viewer/network/map-equipments.ts b/src/components/network-map-viewer/network/map-equipments.ts
@@ -91,6 +91,7 @@ export class MapEquipments {
     updateSubstations(substations: MapSubstation[], fullReload: boolean) {
         if (fullReload) {
             this.substations = [];
+            this.nominalVoltages = [];
         }
 
         // replace current modified substations

diff --git a/src/components/network-map-viewer/network/network-map.tsx b/src/components/network-map-viewer/network/network-map.tsx
@@ -194,6 +194,7 @@ export type NetworkMapRef = {
     getSelectedLines: () => MapAnyLine[];
     cleanDraw: () => void;
     getMapDrawer: () => MapboxDraw | undefined;
+    resetZoomAndPosition: () => void;
 };
 
 const NetworkMap = forwardRef<NetworkMapRef, NetworkMapProps>((rawProps, ref) => {
@@ -722,6 +723,11 @@ const NetworkMap = forwardRef<NetworkMapRef, NetworkMapProps>((rawProps, ref) =>
         );
     }, [props.mapEquipments, props.geoData, props.filteredNominalVoltages]);
 
+    // reset zoom and position to make the map centered around the displayed network
+    const resetZoomAndPosition = useCallback(() => {
+        setCentered(INITIAL_CENTERED);
+    }, []);
+
     useImperativeHandle(
         ref,
         () => ({
@@ -734,8 +740,9 @@ const NetworkMap = forwardRef<NetworkMapRef, NetworkMapProps>((rawProps, ref) =>
                 onDrawEvent(DRAW_EVENT.DELETE);
             },
             getMapDrawer,
+            resetZoomAndPosition,
         }),
-        [onPolygonChanged, getSelectedSubstations, getSelectedLines, onDrawEvent]
+        [onPolygonChanged, resetZoomAndPosition, getSelectedSubstations, getSelectedLines, onDrawEvent]
     );
 
     const onDelete = useCallback(() => {