feat: Add drag/drop functionality to the screenshot viewer (#536)

* feat: Add drag/drop functionality to the screenshot viewer

* feat: Add arrow key controls for screenshot carousel

CefCustomDragHandler.cs

@@ -0,0 +1,43 @@
+using CefSharp.Enums;
+using CefSharp;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+
+namespace VRCX
+{
+    /// <summary>
+    /// This class is used to 'handle' drag and drop events.
+    /// All it does is call a function in the app with the file name of the file being dragged into the window, since chromium doesn't have access to the full file path on regular drop events.
+    /// </summary>
+    public class CustomDragHandler : IDragHandler
+    {
+        public bool OnDragEnter(IWebBrowser chromiumWebBrowser, IBrowser browser, IDragData dragData, DragOperationsMask mask)
+        {
+            if (dragData.IsFile && dragData.FileNames != null && dragData.FileNames.Count > 0)
+            {
+                string file = dragData.FileNames[0];
+                if (!file.EndsWith(".png") && !file.EndsWith(".jpg") && !file.EndsWith(".jpeg"))
+                {
+                    dragData.Dispose();
+                    return true;
+                }
+
+                // forgive me father for i have sinned once again
+                AppApi.Instance.ExecuteAppFunction("dragEnterCef", dragData.FileNames[0]);
+                dragData.Dispose();
+                return false;
+            }
+
+            dragData.Dispose();
+            return true;
+        }
+
+        public void OnDraggableRegionsChanged(IWebBrowser chromiumWebBrowser, IBrowser browser, IFrame frame, IList<DraggableRegion> regions)
+        {
+
+        }
+    }
+}

MainForm.cs

@@ -41,7 +41,7 @@ namespace VRCX
 
             Browser = new ChromiumWebBrowser("file://vrcx/index.html")
             {
-                DragHandler = new NoopDragHandler(),
+                DragHandler = new CustomDragHandler(),
                 MenuHandler = new CustomMenuHandler(),
                 DownloadHandler = new CustomDownloadHandler(),
                 BrowserSettings =

VRCX.csproj

@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?>
+<?xml version="1.0" encoding="utf-8"?>
 <Project ToolsVersion="15.0" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
   <Import Project="$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props" Condition="Exists('$(MSBuildExtensionsPath)\$(MSBuildToolsVersion)\Microsoft.Common.props')" />
   <PropertyGroup>
@@ -85,6 +85,7 @@
   <ItemGroup>
     <Compile Include="AssetBundleCacher.cs" />
     <Compile Include="CefCustomDownloadHandler.cs" />
+    <Compile Include="CefCustomDragHandler.cs" />
     <Compile Include="CefCustomMenuHandler.cs" />
     <Compile Include="ImageCache.cs" />
     <Compile Include="IPCClient.cs" />

html/src/app.js

@@ -72,6 +72,12 @@ speechSynthesis.getVoices();
         configRepository.setBool('migrate_config_20201101', true);
     }
 
+    // Make sure file drops outside of the screenshot manager don't navigate to the file path dropped.
+    // This issue persists on prompts created with prompt(), unfortunately. Not sure how to fix that.
+    document.body.addEventListener('drop', function (e) {
+        e.preventDefault();
+    });
+
     document.addEventListener('keyup', function (e) {
         if (e.ctrlKey) {
             if (e.key === 'I') {
@@ -82,6 +88,11 @@ speechSynthesis.getVoices();
         } else if (e.altKey && e.key === 'R') {
             $app.refreshCustomCss();
         }
+
+        let carouselNavigation = { 'ArrowLeft': 0, 'ArrowRight': 2 }[e.key]
+        if (carouselNavigation !== undefined && $app.screenshotMetadataDialog?.visible) {
+            $app.screenshotMetadataCarouselChange(carouselNavigation);
+        }
     });
 
     VRCXStorage.GetArray = async function (key) {
@@ -20627,7 +20638,7 @@ speechSynthesis.getVoices();
 
         this.showScreenshotMetadataDialog();
     };
-
+    
     $app.data.screenshotMetadataDialog = {
         visible: false,
         metadata: {},
@@ -20697,6 +20708,22 @@ speechSynthesis.getVoices();
             });
     };
 
+    /**
+     * This function is called by .NET(CefCustomDragHandler#CefCustomDragHandler) when a file is dragged over a drop zone in the app window.
+     * @param {string} filePath - The full path to the file being dragged into the window
+     */
+    $app.methods.dragEnterCef = function(filePath) {
+        this.currentlyDroppingFile = filePath
+    };
+
+    $app.methods.handleDrop = function(event) {        
+        if (this.currentlyDroppingFile == null) return
+        console.log("Dropped file into window: ", this.currentlyDroppingFile)
+        AppApi.GetScreenshotMetadata(this.currentlyDroppingFile);
+
+        event.preventDefault()
+    };
+
     // YouTube API
 
     $app.data.youTubeApiKey = '';

html/src/index.pug

@@ -11,7 +11,7 @@ html
         link(rel="stylesheet" href="app.css")
         link(rel="stylesheet" href="flags.css")
     body
-        .x-app#x-app(style="display:none")
+        .x-app#x-app(style="display:none" @dragenter.prevent @dragover.prevent @drop.prevent)
             //- login
             .x-login-container(v-show="!API.isLoggedIn" v-loading="loginForm.loading")
                 div(style="position:absolute;margin:5px")
@@ -3845,7 +3845,7 @@ html
 
             //- dialog: screenshot metadata
             el-dialog.x-dialog(:before-close="beforeDialogClose" @mousedown.native="dialogMouseDown" @mouseup.native="dialogMouseUp" ref="screenshotMetadataDialog" :visible.sync="screenshotMetadataDialog.visible" :title="$t('dialog.screenshot_metadata.header')" width="1050px")
-                div(v-if="screenshotMetadataDialog.visible")
+                div(v-if="screenshotMetadataDialog.visible" @dragover.prevent @dragenter.prevent @drop="handleDrop" style="-webkit-app-region: drag")
                     el-button(size="small" icon="el-icon-folder-opened" @click="AppApi.OpenScreenshotFileDialog()") {{ $t('dialog.screenshot_metadata.browse') }}
                     el-button(v-if="API.currentUser.$isVRCPlus && screenshotMetadataDialog.metadata.filePath" size="small" icon="el-icon-upload2" @click="uploadScreenshotToGallery") {{ $t('dialog.screenshot_metadata.upload') }}
                     span(v-text="screenshotMetadataDialog.metadata.fileName" style="margin-left:5px")