WIP: Define connect drag layer to specify drag preview within drag source

newIDE/app/src/LayersList/LayerRow.js

@@ -86,7 +86,13 @@ const LayerRow = ({
           canDrop={() => true}
           drop={onDrop}
         >
-          {({ connectDragSource, connectDropTarget, isOver, canDrop }) =>
+          {({
+            connectDragSource,
+            connectDropTarget,
+            connectDragPreview,
+            isOver,
+            canDrop,
+          }) =>
             connectDropTarget(
               <div>
                 {isOver && (
@@ -121,16 +127,22 @@ const LayerRow = ({
                     </Tooltip>
                   </TreeTableCell>
                   <TreeTableCell expand>
-                    <SemiControlledTextField
-                      margin="none"
-                      value={isBaseLayer ? i18n._(t`Base layer`) : layerName}
-                      id="layer-name"
-                      errorText={nameError}
-                      disabled={isBaseLayer}
-                      onChange={onBlur}
-                      commitOnBlur
-                      fullWidth
-                    />
+                    {connectDragPreview(
+                      <div>
+                        <SemiControlledTextField
+                          margin="none"
+                          value={
+                            isBaseLayer ? i18n._(t`Base layer`) : layerName
+                          }
+                          id="layer-name"
+                          errorText={nameError}
+                          disabled={isBaseLayer}
+                          onChange={onBlur}
+                          commitOnBlur
+                          fullWidth
+                        />
+                      </div>
+                    )}
                   </TreeTableCell>
                   <TreeTableCell>
                     {width < 350 ? (

newIDE/app/src/UI/DragAndDrop/DragSourceAndDropTarget.js

@@ -9,16 +9,19 @@ import {
   type DropTargetMonitor,
   type DropTargetConnector,
   type ConnectDropTarget,
+  DragLayer,
+  type ConnectDragPreview,
 } from 'react-dnd';
 
 type Props<DraggedItemType> = {|
-  children: ({
+  children: ({|
     connectDragSource: ConnectDragSource,
     connectDropTarget: ConnectDropTarget,
+    connectDragPreview: ConnectDragPreview,
     isOver: boolean,
     isOverLazy: boolean,
     canDrop: boolean,
-  }) => ?React.Node,
+  |}) => ?React.Node,
   beginDrag: () => DraggedItemType,
   canDrag?: (item: DraggedItemType) => boolean,
   canDrop: (item: DraggedItemType) => boolean,
@@ -28,6 +31,7 @@ type Props<DraggedItemType> = {|
 
 type DragSourceProps = {|
   connectDragSource: ConnectDragSource,
+  connectDragPreview: ConnectDragPreview,
 |};
 
 type DropTargetProps = {|
@@ -67,6 +71,7 @@ export const makeDragSourceAndDropTarget = <DraggedItemType>(
   ): DragSourceProps {
     return {
       connectDragSource: connect.dragSource(),
+      connectDragPreview: connect.dragPreview(),
     };
   }
 
@@ -101,22 +106,29 @@ export const makeDragSourceAndDropTarget = <DraggedItemType>(
     sourceCollect
   )(
     DropTarget(reactDndType, targetSpec, targetCollect)(
-      ({
-        children,
-        connectDragSource,
-        connectDropTarget,
-        isOver,
-        isOverLazy,
-        canDrop,
-      }) => {
-        return children({
+      DragLayer((monitor) => ({
+        isDragging: monitor.isDragging(),
+        item: monitor.getItem(),
+      }))(
+        ({
+          children,
           connectDragSource,
           connectDropTarget,
+          connectDragPreview,
           isOver,
           isOverLazy,
           canDrop,
-        });
-      }
+        }) => {
+          return children({
+            connectDragSource,
+            connectDropTarget,
+            connectDragPreview,
+            isOver,
+            isOverLazy,
+            canDrop,
+          });
+        }
+      )
     )
   );