fix: don't flicker root DropZone when dragging

There's a slight delay between the user starting the drag and draggedItem being set, which meant that the root dropzone was being enabled too late after the user would start dragging. This fixes that by using an `onMouseDown` and `onMouseUp` event handler to introduce a new `userWillDrag` state within the current context.
measuredco · Oct 31, 2023 · 358435c · 358435c
1 parent 2faf90d
commit 358435c
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/packages/core/components/DraggableComponent/index.tsx b/packages/core/components/DraggableComponent/index.tsx
@@ -14,6 +14,8 @@ export const DraggableComponent = ({
   isSelected = false,
   onClick = () => null,
   onMount = () => null,
+  onMouseDown = () => null,
+  onMouseUp = () => null,
   onMouseOver = () => null,
   onMouseOut = () => null,
   onDelete = () => null,
@@ -32,6 +34,8 @@ export const DraggableComponent = ({
   isSelected?: boolean;
   onClick?: (e: SyntheticEvent) => void;
   onMount?: () => void;
+  onMouseDown?: (e: SyntheticEvent) => void;
+  onMouseUp?: (e: SyntheticEvent) => void;
   onMouseOver?: (e: SyntheticEvent) => void;
   onMouseOut?: (e: SyntheticEvent) => void;
   onDelete?: (e: SyntheticEvent) => void;
@@ -75,6 +79,8 @@ export const DraggableComponent = ({
           }}
           onMouseOver={onMouseOver}
           onMouseOut={onMouseOut}
+          onMouseDown={onMouseDown}
+          onMouseUp={onMouseUp}
           onClick={onClick}
         >
           {debug}

diff --git a/packages/core/components/DropZone/index.tsx b/packages/core/components/DropZone/index.tsx
@@ -1,4 +1,4 @@
-import { CSSProperties, useContext, useEffect } from "react";
+import { CSSProperties, useContext, useEffect, useState } from "react";
 import { DraggableComponent } from "../DraggableComponent";
 import DroppableStrictMode from "../DroppableStrictMode";
 import { getItem } from "../../lib/get-item";
@@ -79,6 +79,8 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
   // we use the index rather than spread to prevent down-level iteration warnings: https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
   const [draggedSourceArea] = getZoneId(draggedSourceId);
 
+  const [userWillDrag, setUserWillDrag] = useState(false);
+
   const userIsDragging = !!draggedItem;
   const draggingOverArea = userIsDragging && zoneArea === draggedSourceArea;
   const draggingNewComponent = draggedSourceId?.startsWith("component-list");
@@ -108,7 +110,7 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
     : isRootZone;
   const hoveringOverZone = hoveringZone === zoneCompound;
 
-  let isEnabled = false;
+  let isEnabled = userWillDrag;
 
   /**
    * We enable zones when:
@@ -234,6 +236,14 @@ function DropZoneEdit({ zone, style }: DropZoneProps) {
                           });
                           e.stopPropagation();
                         }}
+                        onMouseDown={(e) => {
+                          e.stopPropagation();
+                          setUserWillDrag(true);
+                        }}
+                        onMouseUp={(e) => {
+                          e.stopPropagation();
+                          setUserWillDrag(false);
+                        }}
                         onMouseOver={(e) => {
                           e.stopPropagation();
 

diff --git a/packages/core/lib/get-item.ts b/packages/core/lib/get-item.ts
@@ -1,4 +1,4 @@
-import { Data, MappedItem } from "../types/Config";
+import { Data } from "../types/Config";
 import { rootDroppableId } from "./root-droppable-id";
 import { setupZone } from "./setup-zone";