From dea3378cb0cb676b65ab585982ae7752c828fc4d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Thu, 7 Jan 2021 20:21:40 +0100
Subject: [PATCH] add drag and drop event handler.

---
 src/component/main.vue    |  1 +
 src/component/overlay.vue | 36 +++++++++++++++++++++++++++++++-----
 2 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/component/main.vue b/src/component/main.vue
index 58e90a52..88132bdd 100644
--- a/src/component/main.vue
+++ b/src/component/main.vue
@@ -12,6 +12,7 @@
         :implicitControl="state.control.implicit_hosting && state.members[state.member_id].profile.can_host"
         @implicit-control-request="websocket.send('control/request')"
         @implicit-control-release="websocket.send('control/release')"
+        @drop-files="api.room.uploadDrop($event)"
       />
     </div>
   </div>
diff --git a/src/component/overlay.vue b/src/component/overlay.vue
index e3364cc3..b7acc357 100644
--- a/src/component/overlay.vue
+++ b/src/component/overlay.vue
@@ -11,6 +11,10 @@
     @mouseup.stop.prevent="onMouseUp"
     @mouseenter.stop.prevent="onMouseEnter"
     @mouseleave.stop.prevent="onMouseLeave"
+    @dragenter.stop.prevent="onDrag"
+    @dragleave.stop.prevent="onDrag"
+    @dragover.stop.prevent="onDrag"
+    @drop.stop.prevent="onDrop"
   />
 </template>
 
@@ -95,13 +99,17 @@
       // Guacamole Keyboard does not provide destroy functions
     }
 
-    setMousePos(e: MouseEvent) {
+    getMousePos(clientX: number, clientY: number) {
       const rect = this._overlay.getBoundingClientRect()
 
-      this.webrtc.send('mousemove', {
-        x: Math.round((this.screenWidth / rect.width) * (e.clientX - rect.left)),
-        y: Math.round((this.screenHeight / rect.height) * (e.clientY - rect.top)),
-      })
+      return {
+        x: Math.round((this.screenWidth / rect.width) * (clientX - rect.left)),
+        y: Math.round((this.screenHeight / rect.height) * (clientY - rect.top)),
+      }
+    }
+
+    setMousePos(e: MouseEvent) {
+      this.webrtc.send('mousemove', this.getMousePos(e.clientX, e.clientY))
     }
 
     onWheel(e: WheelEvent) {
@@ -186,6 +194,24 @@
       }
     }
 
+    onDrag(e: DragEvent) {
+      e.preventDefault()
+      e.stopPropagation()
+    }
+
+    onDrop(e: DragEvent) {
+      e.preventDefault()
+      e.stopPropagation()
+
+      let dt = e.dataTransfer
+      if (!dt) return
+
+      let files = [...dt.files]
+      if (!files) return
+
+      this.$emit('drop-files', { ...this.getMousePos(e.clientX, e.clientY), files })
+    }
+
     isRequesting = false
     @Watch('isControling')
     onControlChange(isControling: boolean) {