[6027] Improve visual feedback for diagram DnD

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

Author: pcdavid

CHANGELOG.adoc

@@ -230,6 +230,7 @@ Downstream applications can now implement `IProxyRemovalServiceDelegate` to cust
 - https://github.com/eclipse-sirius/sirius-web/issues/6016[#6016] [diagram] Improve edge handles positioning logic
 - https://github.com/eclipse-sirius/sirius-web/issues/5974[#5974] [diagram] Tweak the node actions UI to reduce the risk of invoking them by mistake.
 The node action icons are now a little smaller and only appear after the node has been hovered for 0.5s.
+- 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
 
 == 2025.12.0
 

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`;
     }
   }