From e00719b4a4b70d96882af27872b0345adec706c6 Mon Sep 17 00:00:00 2001
From: Andrew Stein <steinlink@gmail.com>
Date: Mon, 7 Sep 2020 17:53:37 -0400
Subject: [PATCH] Fix sticky dragdrop on `perspective-viewer`

---
 packages/perspective-viewer/src/js/row.js     |  4 +--
 .../src/js/viewer/dragdrop.js                 | 29 +++++++++----------
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/packages/perspective-viewer/src/js/row.js b/packages/perspective-viewer/src/js/row.js
index 8e1c55d972..021dc55e3c 100644
--- a/packages/perspective-viewer/src/js/row.js
+++ b/packages/perspective-viewer/src/js/row.js
@@ -211,10 +211,10 @@ class Row extends HTMLElement {
     _set_data_transfer(event) {
         if (this.hasAttribute("filter")) {
             const {operator, operand} = JSON.parse(this.getAttribute("filter"));
-            event.dataTransfer.setData("text", JSON.stringify([this.getAttribute("name"), operator, operand, this.getAttribute("type"), this.getAttribute("aggregate")]));
+            event.dataTransfer.setData("text/plain", JSON.stringify([this.getAttribute("name"), operator, operand, this.getAttribute("type"), this.getAttribute("aggregate")]));
         } else {
             event.dataTransfer.setData(
-                "text",
+                "text/plain",
                 JSON.stringify([this.getAttribute("name"), get_type_config(this.getAttribute("type")).filter_operator, undefined, this.getAttribute("type"), this.getAttribute("aggregate")])
             );
         }
diff --git a/packages/perspective-viewer/src/js/viewer/dragdrop.js b/packages/perspective-viewer/src/js/viewer/dragdrop.js
index 696cb60425..494bf37e71 100644
--- a/packages/perspective-viewer/src/js/viewer/dragdrop.js
+++ b/packages/perspective-viewer/src/js/viewer/dragdrop.js
@@ -53,6 +53,7 @@ export function dragend(event) {
 export function drop(ev) {
     ev.preventDefault();
     ev.currentTarget.classList.remove("dropping");
+    DRAG_COUNT_MAP = new WeakMap();
     if (this._drop_target_hover) {
         this._drop_target_hover.removeAttribute("drop-target");
     }
@@ -153,9 +154,6 @@ function column_replace(new_index) {
 export function column_dragover(event) {
     event.preventDefault();
     event.dataTransfer.dropEffect = "move";
-    if (event.currentTarget.className !== "dropping") {
-        event.currentTarget.classList.add("dropping");
-    }
     if (!this._drop_target_hover.hasAttribute("drop-target")) {
         this._drop_target_hover.toggleAttribute("drop-target", true);
     }
@@ -230,6 +228,7 @@ export function column_drop(ev) {
     ev.preventDefault();
     delete this._drop_target_null;
     ev.currentTarget.classList.remove("dropping");
+    DRAG_COUNT_MAP = new WeakMap();
     if (this._drop_target_hover.parentElement === this._active_columns) {
         this._drop_target_hover.removeAttribute("drop-target");
     }
@@ -239,23 +238,21 @@ export function column_drop(ev) {
     this._update_column_view();
 }
 
-export function dragenter(ev) {
-    ev.stopPropagation();
-    ev.preventDefault();
-    ev.currentTarget.classList.add("dropping");
-}
-
 export function dragover(ev) {
     ev.stopPropagation();
     ev.preventDefault();
-    ev.currentTarget.classList.add("dropping");
     ev.dataTransfer.dropEffect = "move";
 }
 
-export function dragleave(ev) {
-    if (ev.currentTarget == ev.target) {
-        ev.stopPropagation();
-        ev.preventDefault();
-        ev.currentTarget.classList.remove("dropping");
-    }
+let DRAG_COUNT_MAP = new WeakMap();
+
+function dragenterleave(event) {
+    let dragHoverCount = DRAG_COUNT_MAP.get(event.currentTarget) || 0;
+    event.type === "dragenter" ? dragHoverCount++ : dragHoverCount--;
+    DRAG_COUNT_MAP.set(event.currentTarget, dragHoverCount);
+    event.currentTarget.classList.toggle("dropping", dragHoverCount > 0);
+    event.preventDefault();
 }
+
+export const dragenter = dragenterleave;
+export const dragleave = dragenterleave;