✨ Multiple Entry drag and drop with copy or move

This version has the full implementation of drag and drop within the program. Without key pressed, the files will be copied. With the shift key, they will be moved. The cmd key will cancel the drop. All selected files with the current cursor will be effected.

Author: raguay

README.md

@@ -52,7 +52,7 @@ I've created multiple open source resources (I have around 80 GitHub repositorie
 ## Current Feature Set
 
 - Dual pane file manager with vim style model hotkeys for navigation and action launching.
-- Drag and Drop works for copying single file or directory (the current cursor location) within the application itself.
+- Drag and Drop works for copying or moving the current cursor and all selected files or directories (the current cursor location) within the application itself. If no keys pressed, it will be copied. If shift key is pressed, it will be moved. The drag begins with the current cursor.
 - Command Prompt for executing commands (`:` in any mode or `<ctrl>p` in normal mode).
 - Fully extendable with extensions using the extensions API
 - Fully extendable to alternate file systems
@@ -344,6 +344,10 @@ hotkeys or command prompt. They are loaded and used in a different way as well.
 | `createNewMode` | Allows the creation of a new mode for keyboard commands. |
 | `changeMode` | Change to mode given. |
 | `switchView` | Change to new program view. Currently `filemanager` or `preferences`. |
+| `copyEntriesCommand` | Copy the entry list to the destination entry. |
+| `moveEntriesCommand` | Move the entry list to the destination entry. |
+| `deleteEntriesCommand` | Delete the entry list |
+| `editEntriesCommand` | Edit the entry |
 
 ## Creating Themes
 

public/bundle.bin

@@ -200,16 +200,39 @@
   }
 
   function dragStart(e) {
-    e.dataTransfer.dropEffect = 'copy';
+    if(e.shiftKey) {
+      e.dataTransfer.dropEffect = 'move';
+    } else {
+      e.dataTransfer.dropEffect = 'copy';
+    }
+    const lconfig = get(config);
+    var flist = lconfig.extensions.getExtCommand('getSelectedFiles').command();
+    var included = false;
+    var data = [];
+    flist.map(item => {
+      data.push(utilities.appendPath(item.dir, item.name) + "|" + item.type);
+      if(item.name === entry.name) included = true;
+    });
     const file = utilities.appendPath(entry.dir, entry.name);
-    e.dataTransfer.setData('text/plain', file + "|" + entry.type);
+    if(!included) {
+      data.push(file + "|" + entry.type);
+    }
+    e.dataTransfer.setData('text/plain', data.join('\n'));
     e.dataTransfer.setData('text/uri-url', "file://" + file);
     e.dataTransfer.setData("text/x-moz-url", "file://"+file);
     e.dataTransfer.setData("application/x-moz-file-promise-url", "file://" + file);
   }
   
   function dropFiles(e,type) {
+    var shiftKey = e.shiftKey;
     switch(type) {
+      case 'over':
+        if(e.shiftKey) {
+          e.dataTransfer.dropEffect = 'move';
+        } else {
+          e.dataTransfer.dropEffect = 'copy';
+        }
+        break;
       case 'drop':
         // 
         // Create the drop to entry.
@@ -225,28 +248,34 @@
         // 
         // Create the entries from the drop.
         //
-        const dataTrans = e.dataTransfer.getData('text/plain');
+        const dataTransArray = e.dataTransfer.getData('text/plain').split('\n');
         const lconfig = get(config);
-        const parts = dataTrans.split('|');
-        if(parts[1] === '1') {
-          dirPath = parts[0];
-          var fdir = utilities.splitFilePath(dirPath);
-          const nwDir = utilities.appendPath(toEntry.dir, fdir.name);
-          utilities.makeDir(nwDir);
-          toEntry.dir = nwDir;
-        } else {
-          const result = utilities.splitFilePath(parts[0]);
-          dirPath = result.dir;
-          fileName = result.name;
-        }
         var fromEntries = [];
-        fromEntries.push({
-          dir: dirPath,
-          name: fileName,
-          fileSystemType: entry.fileSystemType,
-          fileSystem: entry.fileSystem
+        dataTransArray.forEach(dataTrans => {
+          const parts = dataTrans.split('|');
+          if(parts[1] === '1') {
+            dirPath = parts[0];
+            var fdir = utilities.splitFilePath(dirPath);
+            const nwDir = utilities.appendPath(toEntry.dir, fdir.name);
+            utilities.makeDir(nwDir);
+            toEntry.dir = nwDir;
+          } else {
+            const result = utilities.splitFilePath(parts[0]);
+            dirPath = result.dir;
+            fileName = result.name;
+          }
+          fromEntries.push({
+            dir: dirPath,
+            name: fileName,
+            fileSystemType: entry.fileSystemType,
+            fileSystem: entry.fileSystem
+          });
         });
-        lconfig.extensions.getExtCommand('copyEntriesCommand').command(fromEntries, toEntry);
+        if(shiftKey) {
+          lconfig.extensions.getExtCommand('moveEntriesCommand').command(fromEntries, toEntry);
+        } else {
+          lconfig.extensions.getExtCommand('copyEntriesCommand').command(fromEntries, toEntry);
+        }
         break;
       default:
         break;

public/bundle.js

@@ -658,6 +658,9 @@
     extensions.addExtCommand('changeMode', 'Change to mode given.', changeMode);
     extensions.addExtCommand('switchView', 'Switch the active program view.', switchView);
     extensions.addExtCommand('copyEntriesCommand', 'Copy the list of entries to new location.', copyEntriesCommand);
+    extensions.addExtCommand('moveEntriesCommand', 'Move the list of entries to the new location.', moveEntriesCommand);
+    extensions.addExtCommand('deleteEntriesCommand', 'Delete the list of entries.', deleteEntriesCommand);
+    extensions.addExtCommand('editEntryCommand', 'Edit the given entry.', editEntryCommand);
   }
 
   function installDefaultCommands() {
@@ -1194,14 +1197,16 @@
 
   function deleteEntries() {
     var entries = getSelectedFiles();
-    var sel = true;
     if(entries.length === 0) {
       //
       // Get the entry at the current cursor
       //
       entries.push(localCurrentCursor.entry);
-      sel = false;
     }
+    deleteEntriesCommand(entries);
+  }
+
+  function deleteEntriesCommand(entries) {
     msgBoxConfig = {
       title: "Deleting Entries",
       noShowButton: true
@@ -1331,7 +1336,6 @@
   }
 
   async function swapPanels() {
-    var cfile = localCurrentCursor.entry.name;
     var npane = localCurrentCursor.pane === 'left' ? 'right' : 'left';
     tmp = localCurrentLeftFile;
     currentLeftFile.set(localCurrentRightFile);
@@ -1347,11 +1351,15 @@
   }
 
   function editEntry() {
+    editEntryCommand(localCurrentCursor.entry);
+  }
+
+  function editEntryCommand(entry) {
     if(localFS.fileExists(userEditor)) {
       //
       // There is an editor defined by the user. Use it.
       //
-      var file = localFS.appendPath(localCurrentCursor.entry.dir, localCurrentCursor.entry.name);
+      var file = localFS.appendPath(entry.dir, entry.name);
       var editor = localFS.readFile(userEditor).toString().trim();
       if(editor.endsWith('.app')) {
         localFS.openFileWithProgram(editor, file);
@@ -1375,7 +1383,7 @@
       //
       // Open with the system default editor.
       //
-      openFile(localCurrentCursor.entry);
+      openFile(entry);
     }
   }
 
@@ -1407,15 +1415,17 @@
 
   function moveEntries() {
     var entries = getSelectedFiles();
-    var sel = true;
     if(entries.length === 0) {
       //
       // Get the entry at the current cursor
       //
       entries.push(localCurrentCursor.entry);
-      sel = false;
     }
     var otherPane = localCurrentCursor.pane === 'left' ? localCurrentRightFile.entry : localCurrentLeftFile.entry;
+    moveEntriesCommand(entries, otherPane);
+  }
+
+  function moveEntriesCommand(entries, otherPane) {
     msgBoxConfig = {
       title: "Moving Entries",
       noShowButton: true

src/components/Entry.svelte

@@ -78,14 +78,16 @@
   }
 
   function dropFiles(e,type) {
+    var shiftKey = e.shiftKey;
     switch(type) {
+      case 'over':
+        if(e.shiftKey) {
+          e.dataTransfer.dropEffect = 'move';
+        } else {
+          e.dataTransfer.dropEffect = 'copy';
+        }
+        break;
       case 'drop':
-        // 
-        // Get the drop information.
-        //
-        const dataTrans = e.dataTransfer.getData('text/plain');
-        const lconfig = get(config);
-
         // 
         // Get the local information for dropping into.
         //
@@ -115,26 +117,34 @@
         // 
         // Process the information from the drop.
         // 
+        const dataTransArray = e.dataTransfer.getData('text/plain').split('\n');
+        const lconfig = get(config);
         var fromEntries = [];
-        const parts = dataTrans.split('|');
-        if(parts[1] === '1') {
-          dirPath = parts[0];
-          var fdir = utilities.splitFilePath(dirPath);
-          const nwDir = utilities.appendPath(toEntry.dir, fdir.name);
-          utilities.makeDir(nwDir);
-          toEntry.dir = nwDir;
+        dataTransArray.forEach(dataTrans => {
+          const parts = dataTrans.split('|');
+          if(parts[1] === '1') {
+            dirPath = parts[0];
+            var fdir = utilities.splitFilePath(dirPath);
+            const nwDir = utilities.appendPath(toEntry.dir, fdir.name);
+            utilities.makeDir(nwDir);
+            toEntry.dir = nwDir;
+          } else {
+            const result = utilities.splitFilePath(parts[0]);
+            dirPath = result.dir;
+            fileName = result.name;
+          }
+          fromEntries.push({
+            dir: dirPath,
+            name: fileName,
+            fileSystemType: utilities.type,
+            fileSystem: utilities
+          });
+        });
+        if(shiftKey) {
+          lconfig.extensions.getExtCommand('moveEntriesCommand').command(fromEntries, toEntry);
         } else {
-          const result = utilities.splitFilePath(parts[0]);
-          dirPath = result.dir;
-          fileName = result.name;
+          lconfig.extensions.getExtCommand('copyEntriesCommand').command(fromEntries, toEntry);
         }
-        fromEntries.push({
-          dir: dirPath,
-          name: fileName,
-          fileSystemType: toEntry.fileSystemType,
-          fileSystem: toEntry.fileSystem
-        });
-        lconfig.extensions.getExtCommand('copyEntriesCommand').command(fromEntries, toEntry);
         break;
       default:
         break;
@@ -164,8 +174,6 @@
       nEntry.dir = curPane.path;
       nEntry.name = '';
     }
-    console.log(nEntry);
-    
     currentCursor.set({
       pane: pane,
       entry: nEntry