[3377] Only synchronize selection with explorer at the end of the pro…

…cess

Bug: #3377
Signed-off-by: Florian ROUËNÉ <florian.rouene@obeosoft.com>

CHANGELOG.adoc

@@ -108,6 +108,7 @@ They still support returning an `java.time.Instant` object directly.
 - https://github.com/eclipse-sirius/sirius-web/issues/3362[#3362] [diagram] Ignore edge during multi-selection to apply distribution tools on nodes
 - https://github.com/eclipse-sirius/sirius-web/issues/3360[#3360] Handle documents upload with other formats than JSON and XMI.
 - https://github.com/eclipse-sirius/sirius-web/issues/3376[#3376] [diagram] Prevent `getToolSection` to be called during multi-selection
+- https://github.com/eclipse-sirius/sirius-web/issues/3377[#3377] [diagram] Only synchronize selection with explorer at the end of the process
 
 
 == v2024.3.0

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

@@ -72,6 +72,7 @@ import { DiagramPanel } from './panel/DiagramPanel';
 import { useReconnectEdge } from './reconnect-edge/useReconnectEdge';
 import { useResizeChange } from './resize/useResizeChange';
 import { useDiagramSelection } from './selection/useDiagramSelection';
+import { useShiftSelection } from './selection/useShiftSelection';
 import { useSnapToGrid } from './snap-to-grid/useSnapToGrid';
 
 import 'reactflow/dist/style.css';
@@ -158,7 +159,8 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
     setEdges((oldEdges) => oldEdges.map((edge) => ({ ...edge, updatable: !!edge.selected })));
   }, [edges.map((edge) => edge.id + edge.selected).join()]);
 
-  useDiagramSelection();
+  const { onShiftSelection, setShiftSelection } = useShiftSelection();
+  useDiagramSelection(onShiftSelection);
   const { transformBorderNodeChanges } = useBorderChange();
   const { transformUndraggableListNodeChanges, applyMoveChange } = useMoveChange();
   const { transformResizeListNodeChanges } = useResizeChange();
@@ -272,13 +274,15 @@ export const DiagramRenderer = ({ diagramRefreshedEventPayload }: DiagramRendere
 
   const handleSelectionStart = useCallback(() => {
     closeAllPalettes();
-  }, [closeAllPalettes]);
+    setShiftSelection(true);
+  }, [closeAllPalettes, setShiftSelection]);
 
   const handleSelectionEnd = useCallback(
     (event: React.MouseEvent<Element, MouseEvent>) => {
       groupPaletteOnDiagramElementClick(event, null);
+      setShiftSelection(false);
     },
-    [groupPaletteOnDiagramElementClick]
+    [groupPaletteOnDiagramElementClick, setShiftSelection]
   );
 
   const { onNodeMouseEnter, onNodeMouseLeave } = useNodeHover();

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/handles/useConnectionCandidatesQuery.ts

@@ -11,7 +11,8 @@
  *     Obeo - initial API and implementation
  *******************************************************************************/
 import { gql, useQuery } from '@apollo/client';
-import { useMultiToast, useSelection } from '@eclipse-sirius/sirius-components-core';
+import { useNodes } from 'reactflow';
+import { useMultiToast } from '@eclipse-sirius/sirius-components-core';
 import { useEffect, useMemo } from 'react';
 import {
   GQLDiagramDescription,
@@ -80,15 +81,15 @@ export const useConnectionCandidatesQuery = (
   nodeId: string
 ): GQLNodeDescription[] | null => {
   const { addErrorMessage } = useMultiToast();
-  const { selection } = useSelection();
+  const nodes = useNodes();
 
   const { data, error } = useQuery<GQLGetToolSectionsData, GQLGetToolSectionsVariables>(getToolSectionsQuery, {
     variables: {
       editingContextId,
       diagramId,
       diagramElementId: nodeId,
     },
-    skip: selection.entries.length > 1,
+    skip: nodes.filter((node) => node.selected).length > 1,
   });
   const diagramDescription: GQLRepresentationDescription | null =
     data?.viewer.editingContext.representation.description ?? null;

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/selection/useDiagramSelection.ts

@@ -12,12 +12,13 @@
  *******************************************************************************/
 
 import { SelectionEntry, useSelection } from '@eclipse-sirius/sirius-components-core';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useOnSelectionChange, useReactFlow } from 'reactflow';
 import { EdgeData, NodeData } from '../DiagramRenderer.types';
 
-export const useDiagramSelection = (): void => {
+export const useDiagramSelection = (onShiftSelection: boolean): void => {
   const { selection, setSelection } = useSelection();
+  const [shiftSelection, setShiftSelection] = useState<SelectionEntry[]>([]);
 
   const { getNodes, setNodes, getEdges, setEdges, fitView } = useReactFlow<NodeData, EdgeData>();
 
@@ -77,12 +78,23 @@ export const useDiagramSelection = (): void => {
         .sort((id1: string, id2: string) => id1.localeCompare(id2));
 
       if (JSON.stringify(selectedDiagramElementIds) !== JSON.stringify(selectionDiagramEntryIds)) {
-        setSelection({ entries: selectionEntries });
+        if (onShiftSelection) {
+          setShiftSelection(selectionEntries);
+        } else {
+          setSelection({ entries: selectionEntries });
+        }
       }
     },
-    [selection]
+    [selection, onShiftSelection]
   );
   useOnSelectionChange({
     onChange: onSelectionChange,
   });
+
+  useEffect(() => {
+    if (shiftSelection && !onShiftSelection) {
+      setSelection({ entries: shiftSelection });
+      setShiftSelection([]);
+    }
+  }, [onShiftSelection]);
 };

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/selection/useShiftSelection.ts

@@ -0,0 +1,23 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * 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 { useState } from 'react';
+import { UseShiftSelectionValue } from './useShiftSelection.types';
+
+export const useShiftSelection = (): UseShiftSelectionValue => {
+  const [onShiftSelection, setShiftSelection] = useState<boolean>(false);
+
+  return {
+    onShiftSelection,
+    setShiftSelection,
+  };
+};

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/selection/useShiftSelection.types.ts

@@ -0,0 +1,17 @@
+/*******************************************************************************
+ * Copyright (c) 2024 Obeo.
+ * 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
+ *******************************************************************************/
+
+export interface UseShiftSelectionValue {
+  onShiftSelection: boolean;
+  setShiftSelection: (onShiftSelection: boolean) => void;
+}