From 6b296374d5962ed8e1315b2a75046aef2ad307b0 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mjumper@apache.org>
Date: Mon, 28 Jun 2021 11:51:09 -0700
Subject: [PATCH] GUACAMOLE-724: Add per-tile visual indication of drag/drop.

---
 .../src/app/client/directives/guacClient.js   | 66 ++++++++++++++-----
 .../frontend/src/app/client/styles/client.css |  8 +++
 .../src/app/client/templates/guacClient.html  |  7 +-
 3 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/guacamole/src/main/frontend/src/app/client/directives/guacClient.js b/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
index 15a7faac6..68db3336b 100644
--- a/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
+++ b/guacamole/src/main/frontend/src/app/client/directives/guacClient.js
@@ -532,27 +532,63 @@ angular.module('client').directive('guacClient', [function guacClient() {
             if ($scope.client.clientProperties.focused)
                 client.sendKeyEvent(0, keysym);
         });
-        
+
         /**
-         * Ignores the given event.
-         * 
-         * @param {Event} e The event to ignore.
+         * Whether a drag/drop operation is currently in progress (the user has
+         * dragged a file over the Guacamole connection but has not yet
+         * dropped it).
+         *
+         * @type boolean
          */
-        function ignoreEvent(e) {
-           e.preventDefault();
-           e.stopPropagation();
-        }
-
-        // Handle and ignore dragenter/dragover
-        displayContainer.addEventListener("dragenter", ignoreEvent, false);
-        displayContainer.addEventListener("dragover",  ignoreEvent, false);
-
-        // File drop event handler
-        displayContainer.addEventListener("drop", function(e) {
+        $scope.dropPending = false;
+            
+        /**
+         * Displays a visual indication that dropping the file currently
+         * being dragged is possible. Further propogation and default behavior
+         * of the given event is automatically prevented.
+         * 
+         * @param {Event} e
+         *     The event related to the in-progress drag/drop operation.
+         */
+        var notifyDragStart = function notifyDragStart(e) {
 
             e.preventDefault();
             e.stopPropagation();
 
+            $scope.$apply(() => {
+                $scope.dropPending = true;
+            });
+
+        };
+
+        /**
+         * Removes the visual indication that dropping the file currently
+         * being dragged is possible. Further propogation and default behavior
+         * of the given event is automatically prevented.
+         * 
+         * @param {Event} e
+         *     The event related to the end of the former drag/drop operation.
+         */
+        var notifyDragEnd = function notifyDragEnd(e) {
+
+            e.preventDefault();
+            e.stopPropagation();
+
+            $scope.$apply(() => {
+                $scope.dropPending = false;
+            });
+
+        };
+
+        main.addEventListener('dragenter', notifyDragStart, false);
+        main.addEventListener('dragover',  notifyDragStart, false);
+        main.addEventListener('dragleave', notifyDragEnd,   false);
+
+        // File drop event handler
+        main.addEventListener('drop', function(e) {
+
+            notifyDragEnd(e);
+
             // Ignore file drops if no attached client
             if (!$scope.client)
                 return;
diff --git a/guacamole/src/main/frontend/src/app/client/styles/client.css b/guacamole/src/main/frontend/src/app/client/styles/client.css
index bc14d7ad9..59e37b1ca 100644
--- a/guacamole/src/main/frontend/src/app/client/styles/client.css
+++ b/guacamole/src/main/frontend/src/app/client/styles/client.css
@@ -127,3 +127,11 @@ body.client {
     padding-left: 2.5em;
     background-image: url('images/x.svg');
 }
+
+.client .drop-pending .display {
+    background: #3161a9;
+}
+
+.client .drop-pending .display > *{
+    opacity: 0.5;
+}
\ No newline at end of file
diff --git a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
index 152233db6..57b859c55 100644
--- a/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
+++ b/guacamole/src/main/frontend/src/app/client/templates/guacClient.html
@@ -1,5 +1,8 @@
-<div class="main" guac-resize="mainElementResized"
-     guac-touch-drag="clientDrag" guac-touch-pinch="clientPinch">
+<div class="main"
+     ng-class="{ 'drop-pending': dropPending }"
+     guac-resize="mainElementResized"
+     guac-touch-drag="clientDrag"
+     guac-touch-pinch="clientPinch">
 
     <!-- Display -->
     <div class="displayOuter">