From ddf5ff1befa384908fe6e8a8342c6c7e3d36187e Mon Sep 17 00:00:00 2001
From: Daan Vanden Bosch <daan.v.d.bosch@gmail.com>
Date: Sat, 14 Sep 2019 21:14:38 +0200
Subject: [PATCH] Disabled native drag-and-drop globally.

---
 src/index.ts | 67 +++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 50 insertions(+), 17 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index db61b204..a4a4686e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,26 +12,21 @@ Logger.useDefaults({
     defaultLevel: (Logger as any)[process.env["LOG_LEVEL"] || "OFF"],
 });
 
-// Disable native undo/redo.
-document.addEventListener("keydown", e => {
-    const kbe = e as KeyboardEvent;
-
-    if (kbe.ctrlKey && !kbe.altKey && kbe.key.toUpperCase() === "Z") {
-        kbe.preventDefault();
-    }
-});
-// This doesn't work in FireFox:
-document.addEventListener("beforeinput", e => {
-    const ie = e as any;
-
-    if (ie.inputType === "historyUndo" || ie.inputType === "historyRedo") {
-        e.preventDefault();
-    }
-});
-
 function initialize(): Disposable {
+    // Disable native undo/redo.
+    document.addEventListener("beforeinput", before_input);
+    // Work-around for FireFox:
+    document.addEventListener("keydown", keydown);
+
+    // Disable native drag-and-drop.
+    document.addEventListener("dragenter", dragenter);
+    document.addEventListener("dragover", dragover);
+    document.addEventListener("drop", drop);
+
+    // Initialize view.
     const application_view = new ApplicationView();
 
+    // Resize the view on window resize.
     const resize = throttle(
         () => {
             application_view.resize(window.innerWidth, window.innerHeight);
@@ -44,12 +39,50 @@ function initialize(): Disposable {
     document.body.append(application_view.element);
     window.addEventListener("resize", resize);
 
+    // Dispose view and global event listeners when necessary.
     return {
         dispose(): void {
+            window.removeEventListener("beforeinput", before_input);
+            window.removeEventListener("keydown", keydown);
             window.removeEventListener("resize", resize);
+            window.removeEventListener("dragenter", dragenter);
+            window.removeEventListener("dragover", dragover);
+            window.removeEventListener("drop", drop);
             application_view.dispose();
         },
     };
 }
 
+function before_input(e: Event): void {
+    const ie = e as any;
+
+    if (ie.inputType === "historyUndo" || ie.inputType === "historyRedo") {
+        e.preventDefault();
+    }
+}
+
+function keydown(e: Event): void {
+    const kbe = e as KeyboardEvent;
+
+    if (kbe.ctrlKey && !kbe.altKey && kbe.key.toUpperCase() === "Z") {
+        kbe.preventDefault();
+    }
+}
+
+function dragenter(e: DragEvent): void {
+    e.preventDefault();
+
+    if (e.dataTransfer) {
+        e.dataTransfer.dropEffect = "none";
+    }
+}
+
+function dragover(e: DragEvent): void {
+    dragenter(e);
+}
+
+function drop(e: DragEvent): void {
+    dragenter(e);
+}
+
 initialize();