Drag-and-drop cancel button

Before, the content being dragged was cut off by the edges of the scrolling box
so that if you dragged the card or tree node up to the breadcrumbs the preview
would vanish. This change uses `position: "fixed"` and z-index to ensure that
the content being dragged is always rendered above everything else.

However, by making the card/tree node position-fixed, it is removed from the
flow of the page and the adjacent content moves up to take its place. This
makes it harder to cancel the move operation as it is no longer possible to
simply move the item back to where it came from. As such, this change adds an
explicit cancel button: a floating-action button that appears whenever the
drag-and-drop operation is in progress.

Author: rlamacraft

src/main/webapp/ui/src/eln/gallery/components/MainPanel.js

@@ -70,6 +70,49 @@ import Link from "@mui/material/Link";
 import { Link as ReactRouterLink } from "react-router-dom";
 import useOneDimensionalRovingTabIndex from "../../../components/useOneDimensionalRovingTabIndex";
 import Box from "@mui/material/Box";
+import Fab from "@mui/material/Fab";
+
+const DragCancelFab = () => {
+  const dndContext = useDndContext();
+  const dndInProgress = Boolean(dndContext.active);
+  const { setNodeRef: setDropRef, isOver } = useDroppable({
+    id: "cancel",
+    disabled: false,
+    data: null,
+  });
+  const dropStyle: { [string]: string | number } = isOver
+    ? {
+        border: SELECTED_OR_FOCUS_BORDER,
+      }
+    : {
+        border: "2px solid white",
+        animation: "drop 2s linear infinite",
+      };
+  return (
+    <>
+      {dndInProgress && (
+        <div
+          style={{
+            position: "fixed",
+            right: "16px",
+            bottom: "16px",
+          }}
+        >
+          <Fab
+            variant="extended"
+            color="primary"
+            ref={(node) => {
+              setDropRef(node);
+            }}
+            style={dropStyle}
+          >
+            Cancel
+          </Fab>
+        </div>
+      )}
+    </>
+  );
+};
 
 const BreadcrumbLink = React.forwardRef<
   ElementConfig<typeof Link>,
@@ -668,8 +711,8 @@ const FileCard = styled(
       const dragStyle: { [string]: string | number } = transform
         ? {
             transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(1.1)`,
-            zIndex: 1, // just needs to be rendered above Nodes later in the DOM
-            position: "relative",
+            zIndex: 1400, // Above the sidebar
+            position: "fixed",
             boxShadow: `hsl(${COLOR.main.hue}deg 66% 10% / 20%) 0px 2px 16px 8px`,
           }
         : {};
@@ -1248,6 +1291,7 @@ function GalleryMainPanel({
             refreshListing={refreshListing}
           />
         </Slide>
+        <DragCancelFab />
       </DndContext>
     </DialogContent>
   );

src/main/webapp/ui/src/eln/gallery/components/TreeView.js

@@ -2,7 +2,11 @@
 
 import React, { type Node, type ComponentType } from "react";
 import Fade from "@mui/material/Fade";
-import { COLOR, SELECTED_OR_FOCUS_BORDER, type GallerySection } from "../common";
+import {
+  COLOR,
+  SELECTED_OR_FOCUS_BORDER,
+  type GallerySection,
+} from "../common";
 import { styled } from "@mui/material/styles";
 import Avatar from "@mui/material/Avatar";
 import FileIcon from "@mui/icons-material/InsertDriveFile";
@@ -194,8 +198,8 @@ const CustomTreeItem = observer(
     const dragStyle: { [string]: string | number } = transform
       ? {
           transform: `translate3d(${transform.x}px, ${transform.y}px, 0) scale(1.1)`,
-          zIndex: 1, // just needs to be rendered above Nodes later in the DOM
-          position: "relative",
+          zIndex: 1400, // Above the sidebar
+          position: "fixed",
           boxShadow: `hsl(${COLOR.main.hue}deg 66% 10% / 20%) 0px 2px 16px 8px`,
           maxWidth: "max-content",
         }
@@ -366,6 +370,7 @@ const TreeView = ({
     );
   return (
     <SimpleTreeView
+      sx={{ maxWidth: `calc(100% - 200px)` }}
       expandedItems={expandedItems}
       onExpandedItemsChange={(_event, nodeIds) => {
         setExpandedItems(nodeIds);