From eb75dc0f9baefc83a336bf9e7c8cc996cc0d012c Mon Sep 17 00:00:00 2001
From: Nicola De Franceschi <nicola.defranceschi@gmail.com>
Date: Fri, 19 Mar 2021 14:15:19 +0100
Subject: [PATCH 1/2] Fix drag events not moving indicator when staying in the
 same node

---
 .../core/src/events/DefaultEventHandlers.ts   | 46 +++++++++++++++++--
 1 file changed, 42 insertions(+), 4 deletions(-)

diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
index 5003b4d83..da359ce93 100644
--- a/packages/core/src/events/DefaultEventHandlers.ts
+++ b/packages/core/src/events/DefaultEventHandlers.ts
@@ -15,6 +15,7 @@ export class DefaultEventHandlers extends CoreEventHandlers {
   static draggedElementShadow: HTMLElement;
   static draggedElement: DraggedElement;
   static indicator: Indicator = null;
+  static lastDragPosition: { x: number; y: number } = null;
 
   // Safely run handler if Node Id exists
   defineNodeEventListener(
@@ -74,10 +75,46 @@ export class DefaultEventHandlers extends CoreEventHandlers {
       },
       drop: {
         events: [
-          defineEventListener('dragover', (e: CraftDOMEvent<MouseEvent>) => {
-            e.craft.stopPropagation();
-            e.preventDefault();
-          }),
+          this.defineNodeEventListener(
+            'dragover',
+            (e: CraftDOMEvent<MouseEvent>, targetId: NodeId) => {
+              e.craft.stopPropagation();
+              e.preventDefault();
+              const { clientX: x, clientY: y } = e;
+              if (
+                DefaultEventHandlers.lastDragPosition &&
+                DefaultEventHandlers.lastDragPosition.x === x &&
+                DefaultEventHandlers.lastDragPosition.y === y
+              ) {
+                return;
+              }
+              DefaultEventHandlers.lastDragPosition = { x, y };
+
+              const draggedElement = DefaultEventHandlers.draggedElement;
+              if (!draggedElement) {
+                return;
+              }
+
+              let node = (draggedElement as unknown) as Node;
+
+              if ((draggedElement as NodeTree).rootNodeId) {
+                const nodeTree = draggedElement as NodeTree;
+                node = nodeTree.nodes[nodeTree.rootNodeId];
+              }
+
+              const indicator = this.store.query.getDropPlaceholder(
+                node,
+                targetId,
+                { x, y }
+              );
+
+              if (!indicator) {
+                return;
+              }
+              this.store.actions.setIndicator(indicator);
+              DefaultEventHandlers.indicator = indicator;
+            }
+          ),
           this.defineNodeEventListener(
             'dragenter',
             (e: CraftDOMEvent<MouseEvent>, targetId: NodeId) => {
@@ -102,6 +139,7 @@ export class DefaultEventHandlers extends CoreEventHandlers {
                 targetId,
                 { x, y }
               );
+              DefaultEventHandlers.lastDragPosition = { x, y };
 
               if (!indicator) {
                 return;

From 42b5351064563bc53460747e4b6af7a1eed70a1e Mon Sep 17 00:00:00 2001
From: Nicola De Franceschi <nicola.defranceschi@gmail.com>
Date: Fri, 19 Mar 2021 17:00:27 +0100
Subject: [PATCH 2/2] throttle the drag over events

---
 .../core/src/events/DefaultEventHandlers.ts   | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/packages/core/src/events/DefaultEventHandlers.ts b/packages/core/src/events/DefaultEventHandlers.ts
index da359ce93..26c2bb4f3 100644
--- a/packages/core/src/events/DefaultEventHandlers.ts
+++ b/packages/core/src/events/DefaultEventHandlers.ts
@@ -1,3 +1,5 @@
+import throttle from 'lodash/throttle';
+
 import { CoreEventHandlers } from './CoreEventHandlers';
 import { createShadow } from './createShadow';
 
@@ -17,6 +19,40 @@ export class DefaultEventHandlers extends CoreEventHandlers {
   static indicator: Indicator = null;
   static lastDragPosition: { x: number; y: number } = null;
 
+  onDragOver(x: number, y: number, targetId: NodeId) {
+    const draggedElement = DefaultEventHandlers.draggedElement;
+    if (!draggedElement) {
+      return;
+    }
+
+    if (targetId) {
+      const node = this.store.query.node(targetId).get();
+      if (!node) {
+        return;
+      }
+    }
+
+    let node = (draggedElement as unknown) as Node;
+
+    if ((draggedElement as NodeTree).rootNodeId) {
+      const nodeTree = draggedElement as NodeTree;
+      node = nodeTree.nodes[nodeTree.rootNodeId];
+    }
+
+    const indicator = this.store.query.getDropPlaceholder(node, targetId, {
+      x,
+      y,
+    });
+
+    if (!indicator) {
+      return;
+    }
+    this.store.actions.setIndicator(indicator);
+    DefaultEventHandlers.indicator = indicator;
+  }
+
+  throttledDragOver = throttle(this.onDragOver, 200, { leading: false });
+
   // Safely run handler if Node Id exists
   defineNodeEventListener(
     eventName: string,
@@ -75,11 +111,12 @@ export class DefaultEventHandlers extends CoreEventHandlers {
       },
       drop: {
         events: [
-          this.defineNodeEventListener(
+          defineEventListener(
             'dragover',
             (e: CraftDOMEvent<MouseEvent>, targetId: NodeId) => {
               e.craft.stopPropagation();
               e.preventDefault();
+
               const { clientX: x, clientY: y } = e;
               if (
                 DefaultEventHandlers.lastDragPosition &&
@@ -95,24 +132,7 @@ export class DefaultEventHandlers extends CoreEventHandlers {
                 return;
               }
 
-              let node = (draggedElement as unknown) as Node;
-
-              if ((draggedElement as NodeTree).rootNodeId) {
-                const nodeTree = draggedElement as NodeTree;
-                node = nodeTree.nodes[nodeTree.rootNodeId];
-              }
-
-              const indicator = this.store.query.getDropPlaceholder(
-                node,
-                targetId,
-                { x, y }
-              );
-
-              if (!indicator) {
-                return;
-              }
-              this.store.actions.setIndicator(indicator);
-              DefaultEventHandlers.indicator = indicator;
+              this.throttledDragOver(x, y, targetId);
             }
           ),
           this.defineNodeEventListener(