[2728] Prevents unnecessary rerenders in DiagramPanel

Bug: #2728
Signed-off-by: Michaël Charfadi <michael.charfadi@obeosoft.com>

CHANGELOG.adoc

@@ -138,6 +138,7 @@ The only way to export diagram as SVG image is to use the ReactFlow toolbar loca
 - https://github.com/eclipse-sirius/sirius-web/issues/2687[#2687] [diagram] Fix an issue where ConnectionHandles where rerendering too much
 - https://github.com/eclipse-sirius/sirius-web/issues/2698[#2698] [diagram] Fix an issue that prevents _imageNode_ to be resizable.
 - https://github.com/eclipse-sirius/sirius-web/issues/2684[#2684] [diagram] Fix an issue where the edges' arrows where not exported during the SVG export.
+- https://github.com/eclipse-sirius/sirius-web/issues/2728[#2728] [diagram] Prevents unnecessary rerenders in DiagramPanel
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/panel/DiagramPanel.tsx

@@ -24,8 +24,8 @@ import TonalityIcon from '@material-ui/icons/Tonality';
 import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
 import ZoomInIcon from '@material-ui/icons/ZoomIn';
 import ZoomOutIcon from '@material-ui/icons/ZoomOut';
-import { useState } from 'react';
-import { Node, Panel, useNodes, useReactFlow } from 'reactflow';
+import { memo, useState } from 'react';
+import { Panel, useReactFlow } from 'reactflow';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ShareDiagramDialog } from '../ShareDiagramDialog';
 import { useFadeDiagramElements } from '../fade/useFadeDiagramElements';
@@ -34,17 +34,20 @@ import { useHideDiagramElements } from '../hide/useHideDiagramElements';
 import { DiagramPanelProps, DiagramPanelState } from './DiagramPanel.types';
 import { useExportToImage } from './useExportToImage';
 
-export const DiagramPanel = ({ snapToGrid, onSnapToGrid }: DiagramPanelProps) => {
+export const DiagramPanel = memo(({ snapToGrid, onSnapToGrid }: DiagramPanelProps) => {
   const [state, setState] = useState<DiagramPanelState>({
     dialogOpen: null,
   });
 
-  const nodes = useNodes<NodeData>();
+  const reactFlow = useReactFlow<NodeData, EdgeData>();
+  const { getEdges, getNodes } = reactFlow;
+
+  const getAllElementsIds = () => [...getNodes().map((elem) => elem.id), ...getEdges().map((elem) => elem.id)];
+  const getSelectedNodes = () => getNodes().filter((node) => node.selected);
+
   const { fullscreen, onFullscreen } = useFullscreen();
 
-  const reactFlow = useReactFlow<NodeData, EdgeData>();
-  const selectedNodes: Node<NodeData>[] = nodes.filter((node) => node.selected);
-  const handleFitToScreen = () => reactFlow.fitView({ duration: 200, nodes: selectedNodes });
+  const handleFitToScreen = () => reactFlow.fitView({ duration: 200, nodes: getSelectedNodes() });
   const handleZoomIn = () => reactFlow.zoomIn({ duration: 200 });
   const handleZoomOut = () => reactFlow.zoomOut({ duration: 200 });
   const handleShare = () => setState((prevState) => ({ ...prevState, dialogOpen: 'Share' }));
@@ -58,10 +61,6 @@ export const DiagramPanel = ({ snapToGrid, onSnapToGrid }: DiagramPanelProps) =>
 
   const { exportToImage } = useExportToImage();
 
-  const getAllElementsIds = () => {
-    return [...reactFlow.getNodes().map((elem) => elem.id), ...reactFlow.getEdges().map((elem) => elem.id)];
-  };
-
   return (
     <>
       <Panel position="top-left">
@@ -125,4 +124,4 @@ export const DiagramPanel = ({ snapToGrid, onSnapToGrid }: DiagramPanelProps) =>
       {state.dialogOpen === 'Share' ? <ShareDiagramDialog onClose={handleCloseDialog} /> : null}
     </>
   );
-};
+});

packages/diagrams/frontend/sirius-components-diagrams-reactflow/src/renderer/snap-to-grid/useSnapToGrid.tsx

@@ -17,10 +17,8 @@ import { UseSnapToGridValue } from './useSnapToGrid.types';
 export const useSnapToGrid = (): UseSnapToGridValue => {
   const [state, setState] = useState<boolean>(false);
 
-  const onSnapToGrid = (snapToGrid: boolean) => setState(snapToGrid);
-
   return {
     snapToGrid: state,
-    onSnapToGrid,
+    onSnapToGrid: setState,
   };
 };