[6027] Improve visual feedback for diagram DnD

Bug: #6027
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

Author: pcdavid

CHANGELOG.adoc

@@ -275,6 +275,7 @@ The only difference is that this new marker has a second range of two dots after
 - https://github.com/eclipse-sirius/sirius-web/issues/6044[#6044] [sirius-web] Properly catch `ElasticsearchException`
 - https://github.com/eclipse-sirius/sirius-web/issues/5881[#5881] [sirius-web] Add an interface to configure ignored inputs by the `UndoRedoRecorder`.
 Downstream applications can now implement `IUndoRedoIgnoreInputPredicate` to ignore additional inputs from the `UndoRedoRecorder`.
+- https://github.com/eclipse-sirius/sirius-web/issues/6027[#6027] [diagram] Improve visual feedback when dragging a node to show which targets are compatible/valid/invalid for a drop
 
 
 

integration-tests-playwright/playwright/e2e/diagrams/dnd.spec.ts

@@ -140,10 +140,10 @@ test.describe('diagram - drag and drop', () => {
     await page.waitForFunction(
       () => {
         const node = document.querySelector(`[data-testid="FreeForm - Entity1"]`);
-        // We need to check for the normalized box-shadow value, which is different from what we set in the code, but equivalent
-        return (
-          node && window.getComputedStyle(node).getPropertyValue('box-shadow') === 'rgb(67, 160, 71) 0px 0px 2px 2px'
-        );
+        // The color used for the highlight is computed, and the normalized value we get from the browser does
+        // not match the string we use to set it, so we only check that a box-shadow is set without trying to match
+        // an exact value.
+        return node && window.getComputedStyle(node).getPropertyValue('box-shadow')?.length > 0;
       },
       { timeout: 2000 }
     );

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/dropNode/useDropNodeStyle.ts

@@ -1,5 +1,5 @@
 /*******************************************************************************
- * Copyright (c) 2023, 2025 Obeo.
+ * Copyright (c) 2023, 2026 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
@@ -17,23 +17,39 @@ import { DiagramContext } from '../../contexts/DiagramContext';
 import { DiagramContextValue } from '../../contexts/DiagramContext.types';
 import { useDropNodeStyleValue } from './useDropNodeStyle.types';
 
+/**
+ * Computes the CSS style customization to apply to a given node during a DnD operation.
+ *
+ * @param isDropNodeTarget whether the node to style is currently targeted by the drop
+ *                         (i.e. the mouse is on top of it, and releasing the mousing
+ *                         button would trigger the drop on this node)
+ * @param isDropNodeCandidate whether the node to style is a compatible drop candidate
+ *                            for the dragged element(s)
+ * @param isDragging whether the node is (one of) the node(s) being moved/dragged.
+ * @returns CSS properties to apply to the node to give feedback to the user.
+ */
 export const useDropNodeStyle = (
   isDropNodeTarget: boolean,
-  isDropNodeCandidate,
+  isDropNodeCandidate: boolean,
   isDragging: boolean
 ): useDropNodeStyleValue => {
   const { readOnly } = useContext<DiagramContextValue>(DiagramContext);
-
   const theme = useTheme();
-  const style: React.CSSProperties = {};
+  const dropPossible = `rgb(from ${theme.palette.success.main} r g b / 0.5)`;
+  const dropValid = theme.palette.success.main;
+  const dropInvalid = `rgb(from ${theme.palette.error.main} r g b / 0.5)`;
 
-  if (!readOnly) {
-    if (!isDragging && isDropNodeCandidate) {
-      style.boxShadow = `0px 0px 2px 2px ${theme.palette.success.main}`;
-      style.transition = `box-shadow 0.3s ease-in-out`;
+  const style: React.CSSProperties = {};
+  if (!readOnly && !isDragging) {
+    let highlightColor: string | null = null;
+    if (isDropNodeCandidate) {
+      highlightColor = isDropNodeTarget ? dropValid : dropPossible;
+    } else if (isDropNodeTarget) {
+      highlightColor = dropInvalid;
     }
-    if (isDropNodeTarget) {
-      style.boxShadow = `0px 0px 2px 2px ${theme.palette.primary.main}`;
+    if (highlightColor) {
+      style.boxShadow = `0px 0px 2px 2px ${highlightColor}`;
+      style.transition = `box-shadow 0.3s ease-in-out`;
     }
   }