[2550] Hide diagram element palette on viewport or zoom change

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

CHANGELOG.adoc

@@ -72,6 +72,7 @@ Note that double-clicking no longer triggers a direct edit.
 - https://github.com/eclipse-sirius/sirius-web/issues/2532[#2532] [diagram] Fix the limitation on borders that prevent movement on all sides of their node parent.
 - https://github.com/eclipse-sirius/sirius-web/issues/2543[#2543] [diagram] Prevent list items being moved to inconsistent positions
 - https://github.com/eclipse-sirius/sirius-web/issues/2500[#2500] [diagram] Selecting an element in the explorer now correctly selects and focuses on the corresponding edge on the current diagram if there is one.
+- https://github.com/eclipse-sirius/sirius-web/issues/2550[#2550] [diagram] Palette is now hidden on viewport or zoom change.
 
 === New Features
 

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

@@ -32,14 +32,14 @@ import {
   useStoreApi,
 } from 'reactflow';
 
-import { useBorderChange } from './border/useBorderChange';
 import { NodeTypeContext } from '../contexts/NodeContext';
 import { NodeTypeContextValue } from '../contexts/NodeContext.types';
 import { convertDiagram } from '../converter/convertDiagram';
+import { Diagram, DiagramRendererProps, DiagramRendererState, EdgeData, NodeData } from './DiagramRenderer.types';
+import { useBorderChange } from './border/useBorderChange';
 import { ConnectorContextualMenu } from './connector/ConnectorContextualMenu';
 import { useConnector } from './connector/useConnector';
 import { useDiagramDelete } from './delete/useDiagramDelete';
-import { Diagram, DiagramRendererProps, DiagramRendererState, EdgeData, NodeData } from './DiagramRenderer.types';
 import { useDiagramDirectEdit } from './direct-edit/useDiagramDirectEdit';
 import { useDrop } from './drop/useDrop';
 import { useDropNode } from './dropNode/useDropNode';
@@ -75,7 +75,7 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload, selection, setSe
 
   const { layout, resetReferencePosition } = useLayout();
   const { onDiagramBackgroundClick, hideDiagramPalette } = useDiagramPalette();
-  const { onDiagramElementClick } = useDiagramElementPalette();
+  const { onDiagramElementClick, hideDiagramElementPalette } = useDiagramElementPalette();
 
   const { onConnect, onConnectStart, onConnectEnd } = useConnector();
   const { reconnectEdge } = useReconnectEdge();
@@ -295,7 +295,10 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload, selection, setSe
       onPaneClick={handlePaneClick}
       onEdgeClick={onDiagramElementClick}
       onNodeClick={onDiagramElementClick}
-      onMove={() => hideDiagramPalette()}
+      onMove={() => {
+        hideDiagramPalette();
+        hideDiagramElementPalette();
+      }}
       onDrop={onDrop}
       onDragOver={onDragOver}
       onNodeDrag={onNodeDrag}