diff --git a/CefCustomDragHandler.cs b/CefCustomDragHandler.cs new file mode 100644 index 00000000..df6c3ad6 --- /dev/null +++ b/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 +{ + /// + /// 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. + /// + 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 regions) + { + + } + } +} diff --git a/MainForm.cs b/MainForm.cs index b973032c..307d0ab1 100644 --- a/MainForm.cs +++ b/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 = diff --git a/VRCX.csproj b/VRCX.csproj index 72911c20..982cd898 100644 --- a/VRCX.csproj +++ b/VRCX.csproj @@ -1,4 +1,4 @@ - + @@ -85,6 +85,7 @@ + diff --git a/html/src/app.js b/html/src/app.js index 949f19a0..8763780b 100644 --- a/html/src/app.js +++ b/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 = ''; diff --git a/html/src/index.pug b/html/src/index.pug index eccd1c05..3155f0f9 100644 --- a/html/src/index.pug +++ b/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")