From dc3df10c581e916d629c7d42ff8c857a5b124df2 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Mon, 20 Sep 2021 16:11:42 +0100
Subject: [PATCH] Reduce DND snap to edge threshold to prevent unwanted target
 spamming on the edges of the parent component

---
 .../src/components/preview/DNDHandler.svelte  | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

diff --git a/packages/client/src/components/preview/DNDHandler.svelte b/packages/client/src/components/preview/DNDHandler.svelte
index d7d2d94793..7d83e0998c 100644
--- a/packages/client/src/components/preview/DNDHandler.svelte
+++ b/packages/client/src/components/preview/DNDHandler.svelte
@@ -63,37 +63,21 @@
     const { droppableInside, bounds } = dropInfo
     const { top, height } = bounds
     const mouseY = e.clientY
-    const elTop = top
-    const elBottom = top + height
+    const snapFactor = droppableInside ? 0.33 : 0.5
+    const snapLimit = Math.min(40, height * snapFactor)
+    const edgeLimits = [
+      Math.round(top + snapLimit),
+      Math.round(top + height - snapLimit),
+    ]
 
-    // Determine which edge we're nearest as this is needed for potentially
-    // any drop mode
-    let nearestEdge
-    if (Math.abs(elTop - mouseY) < Math.abs(elBottom - mouseY)) {
-      nearestEdge = "above"
+    if (mouseY <= edgeLimits[0]) {
+      dropInfo.mode = "above"
+    } else if (mouseY >= edgeLimits[1]) {
+      dropInfo.mode = "below"
+    } else if (droppableInside) {
+      dropInfo.mode = "inside"
     } else {
-      nearestEdge = "below"
-    }
-
-    // If not available to drop inside, just check whether we are closer
-    // to the top or bottom
-    if (!droppableInside) {
-      dropInfo.mode = nearestEdge
-    }
-
-    // Otherwise determine whether the user wants to drop inside or at
-    // either edge
-    else {
-      const edgeLimit = Math.min(40, height * 0.33)
-      const insideLimit = [
-        Math.round(top + edgeLimit),
-        Math.round(top + height - edgeLimit),
-      ]
-      if (mouseY >= insideLimit[0] && mouseY <= insideLimit[1]) {
-        dropInfo.mode = "inside"
-      } else {
-        dropInfo.mode = nearestEdge
-      }
+      dropInfo.mode = null
     }
   }
 
@@ -147,7 +131,7 @@
   // Callback when dropping a drag on top of some component
   const onDrop = e => {
     e.preventDefault()
-    if (dropInfo) {
+    if (dropInfo?.mode) {
       builderStore.actions.moveComponent(
         dragInfo.target,
         dropInfo.target,