Prevent weird state with headers on drag when dragging cells enabled

glideapps · Aug 1, 2022 · c3d2bc1 · c3d2bc1
1 parent 3ad9e27
commit c3d2bc1
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 14 deletions.
diff --git a/packages/core/src/data-editor/data-editor.tsx b/packages/core/src/data-editor/data-editor.tsx
@@ -1648,6 +1648,10 @@ const DataEditorImpl: React.ForwardRefRenderFunction<DataEditorRef, DataEditorPr
     const isActivelyDragging = React.useRef(false);
     const onDragStartImpl = React.useCallback(
         (args: GridDragEventArgs) => {
+            if (args.location[0] === 0 && rowMarkerOffset > 0) {
+                args.preventDefault();
+                return;
+            }
             onDragStart?.({
                 ...args,
                 location: [args.location[0] - rowMarkerOffset, args.location[1]] as any,

diff --git a/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx b/packages/core/src/data-editor/stories/data-editor-beautiful.stories.tsx
@@ -3214,7 +3214,10 @@ export const DragSource: React.VFC<{ isDraggable: boolean | "header" | "cell" }>
                 {...defaultProps}
                 getCellContent={getCellContent}
                 columns={cols}
+                rowMarkers="both"
                 rows={5000}
+                onRowMoved={(s, e) => window.alert(`Moved row ${s} to ${e}`)}
+                onColumnMoved={(s, e) => window.alert(`Moved col ${s} to ${e}`)}
                 onColumnResize={onColumnResize}
                 isDraggable={p.isDraggable}
                 onDragStart={e => {

diff --git a/packages/core/src/data-grid-dnd/data-grid-dnd.tsx b/packages/core/src/data-grid-dnd/data-grid-dnd.tsx
@@ -81,7 +81,6 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
         (args: GridMouseEventArgs) => {
             if (args.button === 0) {
                 const [col, row] = args.location;
-                // if (!isDraggable) {
                 if (args.kind === "out-of-bounds" && args.isEdge && canResize) {
                     const bounds = gridRef?.current?.getBounds(columns.length - 1, -1);
                     if (bounds !== undefined) {
@@ -107,7 +106,6 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
                     setDragStartY(args.bounds.y);
                     setDragRow(row);
                 }
-                // }
             }
             onMouseDown?.(args);
         },
@@ -124,6 +122,20 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
 
     const lastResizeWidthRef = React.useRef(-1);
 
+    const clearAll = React.useCallback(() => {
+        lastResizeWidthRef.current = -1;
+        setDragRow(undefined);
+        setDropRow(undefined);
+        setDragStartY(undefined);
+        setDragRowActive(false);
+        setDragCol(undefined);
+        setDropCol(undefined);
+        setDragStartX(undefined);
+        setDragColActive(false);
+        setResizeCol(undefined);
+        setResizeColStartX(undefined);
+    }, []);
+
     const onMouseUpImpl = React.useCallback(
         (args: GridMouseEventArgs, isOutside: boolean) => {
             if (args.button === 0) {
@@ -163,17 +175,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
                     }
                 }
 
-                lastResizeWidthRef.current = -1;
-                setDragRow(undefined);
-                setDropRow(undefined);
-                setDragStartY(undefined);
-                setDragRowActive(false);
-                setDragCol(undefined);
-                setDropCol(undefined);
-                setDragStartX(undefined);
-                setDragColActive(false);
-                setResizeCol(undefined);
-                setResizeColStartX(undefined);
+                clearAll();
                 if (dragCol !== undefined && dropCol !== undefined) {
                     onColumnMoved?.(dragCol, dropCol);
                 }
@@ -198,6 +200,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             onColumnResize,
             onColumnMoved,
             onRowMoved,
+            clearAll,
         ]
     );
 
@@ -275,6 +278,17 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
         [dragRow, dropRow, getCellContent]
     );
 
+    const dragStart = p.onDragStart;
+    const onDragStart = React.useCallback<NonNullable<DataGridDndProps["onDragStart"]>>(
+        args => {
+            dragStart?.(args);
+            if (!args.defaultPrevented()) {
+                clearAll();
+            }
+        },
+        [clearAll, dragStart]
+    );
+
     return (
         <DataGrid
             // I know the below could be done with ...rest, but it adds about 2-3% cpu load in the hot loop
@@ -316,7 +330,7 @@ const DataGridDnd: React.FunctionComponent<DataGridDndProps> = p => {
             isDraggable={p.isDraggable}
             onDragEnd={p.onDragEnd}
             onCellFocused={p.onCellFocused}
-            onDragStart={p.onDragStart}
+            onDragStart={onDragStart}
             onDragOverCell={p.onDragOverCell}
             onDragLeave={p.onDragLeave}
             onDrop={p.onDrop}