[4206] Improve performance of diagram viewport change

CHANGELOG.adoc

@@ -194,6 +194,7 @@ To achieve that a new concept, `ProjectSemanticData` has been added along with a
 - https://github.com/eclipse-sirius/sirius-web/issues/4501[#4501] [browser] Extract the model browser into reusable modules
 - https://github.com/eclipse-sirius/sirius-web/issues/4514[#4514] [sirius-web] Added support for Ctrl+Shift+Z (Linux/macOS) to trigger redo in addition to Ctrl+Y (Windows)
 - https://github.com/eclipse-sirius/sirius-web/issues/4372[#4372] [sirius-web] Lower the coupling between project and editing context
+- https://github.com/eclipse-sirius/sirius-web/issues/4206[#4206] [diagram] Improve performance of diagram viewport change
 
 
 == v2025.1.0

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/core/useViewportZoom.ts

@@ -0,0 +1,22 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo and others.
+ * This program and the accompanying materials
+ * are made available under the terms of the Eclipse Public License v2.0
+ * which accompanies this distribution, and is available at
+ * https://www.eclipse.org/legal/epl-2.0/
+ *
+ * SPDX-License-Identifier: EPL-2.0
+ *
+ * Contributors:
+ *     Obeo - initial API and implementation
+ *******************************************************************************/
+
+import type { ReactFlowState } from '@xyflow/react';
+import { useStore } from '@xyflow/react';
+import { shallow } from 'zustand/shallow';
+
+const viewportZoomSelector = (state: ReactFlowState) => state.transform[2];
+
+export function useViewportZoom(): number {
+  return useStore(viewportZoomSelector, shallow);
+}

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/BendPoint.tsx

@@ -10,13 +10,13 @@
  * Contributors:
  *     Obeo - initial API and implementation
  *******************************************************************************/
-import { useRef, RefObject } from 'react';
-import { useViewport } from '@xyflow/react';
+import { RefObject, useRef } from 'react';
 import Draggable, { DraggableData } from 'react-draggable';
+import { useViewportZoom } from '../core/useViewportZoom';
 import { BendPointProps, TemporaryBendPointProps } from './BendPoint.types';
 
 export const BendPoint = ({ x, y, index, onDrag, onDragStop, onDoubleClick }: BendPointProps) => {
-  const { zoom } = useViewport();
+  const zoom = useViewportZoom();
   const nodeRef = useRef<SVGCircleElement>(null);
 
   return (
@@ -39,7 +39,7 @@ export const BendPoint = ({ x, y, index, onDrag, onDragStop, onDoubleClick }: Be
 };
 
 export const TemporaryBendPoint = ({ x, y, index, onDrag, onDragStop }: TemporaryBendPointProps) => {
-  const { zoom } = useViewport();
+  const zoom = useViewportZoom();
   const nodeRef = useRef<SVGCircleElement>(null);
   return (
     <Draggable

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts

@@ -11,13 +11,14 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
-import { Edge, Node, useReactFlow, useViewport } from '@xyflow/react';
+import { Edge, Node, useReactFlow } from '@xyflow/react';
 import { LayoutOptions } from 'elkjs/lib/elk-api';
 import ELK, { ElkLabel, ElkNode } from 'elkjs/lib/elk.bundled';
 import { useContext } from 'react';
 import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDiagramDescription } from '../../contexts/useDiagramDescription';
+import { useViewportZoom } from '../core/useViewportZoom';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 import { ListNodeData } from '../node/ListNode.types';
 import { DiagramNodeType } from '../node/NodeTypes.types';
@@ -119,7 +120,7 @@ const computeLabels = (
 
 export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivElement | null>): UseArrangeAllValue => {
   const { getNodes, getEdges, setNodes, setEdges } = useReactFlow<Node<NodeData>, Edge<EdgeData>>();
-  const viewport = useViewport();
+  const zoom = useViewportZoom();
   const { layout } = useLayout();
   const { synchronizeLayoutData } = useSynchronizeLayoutData();
   const { diagramDescription } = useDiagramDescription();
@@ -140,7 +141,7 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
       id: parentNodeId,
       layoutOptions: options,
       children: nodes.map((node) => ({
-        labels: computeLabels(node, viewport.zoom, reactFlowWrapper),
+        labels: computeLabels(node, zoom, reactFlowWrapper),
         ...node,
       })),
       edges,
@@ -182,11 +183,7 @@ export const useArrangeAll = (reactFlowWrapper: React.MutableRefObject<HTMLDivEl
         layoutedAllNodes = [...layoutedAllNodes, ...nodes.reverse()];
         continue;
       }
-      const headerVerticalFootprint: number = computeHeaderVerticalFootprint(
-        parentNode,
-        viewport.zoom,
-        reactFlowWrapper
-      );
+      const headerVerticalFootprint: number = computeHeaderVerticalFootprint(parentNode, zoom, reactFlowWrapper);
       const subGroupNodes: Node<NodeData>[] = nodes
         .filter((node) => !node.data.isBorderNode)
         .map((node) => {