Merge pull request #920 from ToposInstitute/kb/improve-drag-n-drop

Improve notebook cell drag and drop

Author: epatters

packages/frontend/src/notebook/notebook_cell.css

@@ -7,6 +7,10 @@
     justify-content: space-between;
 }
 
+.cell-dragging {
+    opacity: 0.4;
+}
+
 .cell-gutter {
     position: absolute;
     top: 50%;

packages/frontend/src/notebook/notebook_cell.tsx

@@ -3,6 +3,7 @@ import {
     draggable,
     dropTargetForElements,
 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { preventUnhandled } from "@atlaskit/pragmatic-drag-and-drop/prevent-unhandled";
 import { attachClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import type { DocHandle, Prop } from "@automerge/automerge-repo";
 import Popover from "@corvu/popover";
@@ -150,6 +151,7 @@ export function NotebookCell(props: {
 
     const [closestEdge, setClosestEdge] = createSignal<ClosestEdge>(null);
     const [dropTarget, setDropTarget] = createSignal(false);
+    const [isDragging, setIsDragging] = createSignal(false);
 
     const isActiveDropTarget = () => props.currentDropTarget === props.cellId;
     createEffect(() => {
@@ -164,14 +166,37 @@ export function NotebookCell(props: {
             draggable({
                 element: handleRef,
                 getInitialData: () => createCellDragData(props.cellId, props.index),
+                onGenerateDragPreview({ nativeSetDragImage }) {
+                    if (nativeSetDragImage) {
+                        // Clone the cell content for the drag preview
+                        const cellContent = rootRef.querySelector(".cell-content");
+                        if (cellContent) {
+                            const preview = cellContent.cloneNode(true) as HTMLElement;
+                            preview.style.width = `${cellContent.clientWidth}px`;
+                            preview.style.opacity = "0.8";
+                            preview.style.pointerEvents = "none";
+                            document.body.appendChild(preview);
+                            nativeSetDragImage(preview, 0, 0);
+
+                            setTimeout(() => {
+                                preview.remove();
+                            }, 0);
+                        }
+                    }
+                },
+                onDragStart() {
+                    setIsDragging(true);
+                    preventUnhandled.start();
+                },
+                onDrop() {
+                    setIsDragging(false);
+                    preventUnhandled.stop();
+                },
             }),
             dropTargetForElements({
                 element: rootRef,
                 canDrop({ source }) {
                     // TODO: Reject if cell belongs to a different notebook.
-                    if (source.data.cellId === props.cellId) {
-                        return false;
-                    }
                     return isCellDragData(source.data);
                 },
                 getData({ input }) {
@@ -185,15 +210,11 @@ export function NotebookCell(props: {
                 onDragEnter(args) {
                     const sourceIndex = args.source.data.index as number;
                     const targetIndex = args.self.data.index as number;
-                    if (sourceIndex === targetIndex) {
-                        setClosestEdge(null);
-                        setDropTarget(false);
-                    } else {
-                        props.setCurrentDropTarget(props.cellId);
-                        const edge = sourceIndex < targetIndex ? "bottom" : "top";
-                        setClosestEdge(edge);
-                        setDropTarget(true);
-                    }
+
+                    props.setCurrentDropTarget(props.cellId);
+                    const edge = sourceIndex < targetIndex ? "bottom" : "top";
+                    setClosestEdge(edge);
+                    setDropTarget(true);
                 },
                 onDrop() {
                     setDropTarget(false);
@@ -205,7 +226,13 @@ export function NotebookCell(props: {
     });
 
     return (
-        <div class="cell" onMouseEnter={showGutter} onMouseLeave={hideGutter} ref={rootRef}>
+        <div
+            class="cell"
+            classList={{ "cell-dragging": isDragging() }}
+            onMouseEnter={showGutter}
+            onMouseLeave={hideGutter}
+            ref={rootRef}
+        >
             <div class="cell-gutter">
                 <IconButton
                     onClick={props.actions.createBelow}

packages/frontend/src/notebook/notebook_editor.tsx

@@ -25,6 +25,7 @@ import {
 import type { Cell, Notebook } from "catlog-wasm";
 import {
     type CellActions,
+    type CellDragData,
     type FormalCellEditorProps,
     isCellDragData,
     NotebookCell,
@@ -190,16 +191,24 @@ export function NotebookEditor<T>(props: {
                 );
             },
             onDrop({ location, source }) {
-                const target = location.current.dropTargets[0];
-                if (!(target && isCellDragData(source.data) && isCellDragData(target.data))) {
+                const target =
+                    location.current.dropTargets[0] ??
+                    (currentDropTarget() ? { data: { cellId: currentDropTarget() } } : null);
+                if (!(target && isCellDragData(source.data))) {
                     setCurrentDropTarget(null);
                     return;
                 }
-                const [sourceId, targetId] = [source.data.cellId, target.data.cellId];
+                const targetData = target.data as CellDragData;
+                if (!targetData.cellId) {
+                    setCurrentDropTarget(null);
+                    return;
+                }
+                const [sourceId, targetId] = [source.data.cellId, targetData.cellId];
                 const nb = props.notebook;
                 const sourceIndex = nb.cellOrder.indexOf(sourceId);
                 const targetIndex = nb.cellOrder.indexOf(targetId);
                 if (sourceIndex < 0 || targetIndex < 0) {
+                    setCurrentDropTarget(null);
                     return;
                 }
                 const finalIndex = getReorderDestinationIndex({