Browse Source

frontend implement drag n drop

b3z 6 months ago
parent
commit
be483d15a3
3 changed files with 24 additions and 1 deletions
  1. 1 1
      index.css
  2. 19 0
      index.js
  3. 4 0
      src/index.ts

+ 1 - 1
index.css

@@ -32,7 +32,7 @@ body {
   bottom: 25px;
   font-size: 16px;
   color: #FFFFFF;
-  background-color: rgb(50, 50, 50, 0.7);
+  background-color: rgb(60, 60, 60, 0.7);
   backdrop-filter: blur(3px);
   padding: 5px;
   border: 0px;

+ 19 - 0
index.js

@@ -83,4 +83,23 @@ function toggle(e, c) {
     else
         classes.push(c);
     e.className = classes.join(" ");
+}
+
+// Drag n Drop on editor
+
+// Setup the dnd listeners.
+editor.addEventListener('dragover', handleDragOver, false);
+editor.addEventListener('drop', handleFileDrop, false);
+
+function handleFileDrop(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    let files = evt.dataTransfer.files; // FileList object.
+    ipcRenderer.send('editor:files:save', files);
+}
+
+function handleDragOver(evt) {
+    evt.stopPropagation();
+    evt.preventDefault();
+    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
 }

+ 4 - 0
src/index.ts

@@ -238,3 +238,7 @@ ipcMain.on("key:search", async function (e, item: string) {
 function handleClear() {
     mainWindow.webContents.send("editor:clear");
 }
+
+ipcMain.on("editor:files:save", async (e, files) => {
+    console.log(files);
+});