From 9e7c9b14d36c1ba2e994e0858dceb81f94339670 Mon Sep 17 00:00:00 2001
From: Denis Nikiforov <denis.nikif@gmail.com>
Date: Sun, 17 Nov 2024 02:27:27 +0300
Subject: [PATCH] [4206] Improve performance of diagram viewport change

Bug: https://github.com/eclipse-sirius/sirius-web/issues/4206
Signed-off-by: Denis Nikiforov <denis.nikif@gmail.com>
---
 CHANGELOG.adoc                                |  1 +
 .../src/renderer/core/useViewportZoom.ts      | 22 +++++++++++++++++++
 .../src/renderer/edge/BendPoint.tsx           |  8 +++----
 .../src/renderer/layout/useArrangeAll.ts      | 13 +++++------
 4 files changed, 32 insertions(+), 12 deletions(-)
 create mode 100644 packages/diagrams/frontend/sirius-components-diagrams/src/renderer/core/useViewportZoom.ts

diff --git a/CHANGELOG.adoc b/CHANGELOG.adoc
index 9c245cc41c..030d5f57c1 100644
--- a/CHANGELOG.adoc
+++ b/CHANGELOG.adoc
@@ -44,6 +44,7 @@ Specifiers can contribute dedicated AQL services for this feature using implemen
 - https://github.com/eclipse-sirius/sirius-web/issues/4368[#4368] [sirius-web] Add GraphQL subscription exception handler
 - [charts] Make the npm package `sirius-components-charts` use the strict version of our TypeScript configuration
 - [trees] Make the npm package `sirius-components-trees` use the strict version of our TypeScript configuration
+- https://github.com/eclipse-sirius/sirius-web/issues/4206[#4206] [diagram] Improve performance of diagram viewport change
 
 
 == v2025.1.0
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/core/useViewportZoom.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/core/useViewportZoom.ts
new file mode 100644
index 0000000000..00dd9367d5
--- /dev/null
+++ b/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);
+}
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/BendPoint.tsx b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/BendPoint.tsx
index 59fa814bd0..956ce19db5 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/edge/BendPoint.tsx
+++ b/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
diff --git a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts b/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
index ab944c4eb5..9591e0287e 100644
--- a/packages/diagrams/frontend/sirius-components-diagrams/src/renderer/layout/useArrangeAll.ts
+++ b/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) => {