feat: adds drag&drop across File Manager cards

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Nov 17, 2023 · cf32644 · cf32644
1 parent 7476593
commit cf32644
Show file tree

Hide file tree

Showing 18 changed files with 94 additions and 48 deletions.
diff --git a/src/components/widgets/filesystem/FileSystem.vue b/src/components/widgets/filesystem/FileSystem.vue
@@ -156,6 +156,7 @@ import FileSystemGoToFileDialog from './FileSystemGoToFileDialog.vue'
 import FilePreviewDialog from './FilePreviewDialog.vue'
 import type { AppTableHeader, FileWithPath } from '@/types'
 import { getFilesFromDataTransfer, hasFilesInDataTransfer } from '@/util/file-system-entry'
+import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer, setFileDataTransferDataInDataTransfer } from '@/util/file-data-transfer'
 
 /**
  * Represents the filesystem, bound to moonrakers supplied roots.
@@ -796,22 +797,29 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
     })
   }
 
-  handleDragStart (source: FileBrowserEntry| FileBrowserEntry[], dataTransfer: DataTransfer) {
-    if (this.currentRoot === 'gcodes') {
-      const items = Array.isArray(source)
-        ? source.filter(item => item.name !== '..')
-        : [source]
+  handleDragStart (item: FileBrowserEntry, items: FileBrowserEntry[], dataTransfer: DataTransfer) {
+    if (item.type === 'file') {
+      const url = this.createFileUrl(item.name, this.currentPath)
+
+      dataTransfer.setData('text/html', `<A HREF="${encodeURI(url)}">${item.filename}</A>`)
+      dataTransfer.setData('text/plain', url)
+      dataTransfer.setData('text/uri-list', url)
+    }
 
+    setFileDataTransferDataInDataTransfer(dataTransfer, 'files', {
+      path: this.currentPath,
+      items: items.map(file => file.name)
+    })
+
+    if (this.currentRoot === 'gcodes') {
       const files = items
         .filter((item): item is AppFile => item.type === 'file' && this.rootProperties.accepts.includes(`.${item.extension}`))
 
       if (files.length > 0) {
-        const data = {
+        setFileDataTransferDataInDataTransfer(dataTransfer, 'jobs', {
           path: files[0].path,
-          jobs: files.map(file => file.name)
-        }
-
-        dataTransfer.setData('x-fluidd-jobs', JSON.stringify(data))
+          items: files.map(file => file.name)
+        })
       }
     }
   }
@@ -950,7 +958,10 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
       !this.rootProperties.readonly &&
       !this.dragState.browserState &&
       event.dataTransfer &&
-      hasFilesInDataTransfer(event.dataTransfer)
+      (
+        hasFilesInDataTransfer(event.dataTransfer) ||
+        hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'files')
+      )
     ) {
       event.preventDefault()
 
@@ -969,13 +980,23 @@ export default class FileSystem extends Mixins(StateMixin, FilesMixin, ServicesM
 
     if (
       !this.fileDropRoot &&
-      event.dataTransfer &&
-      !this.rootProperties.readonly
+      !this.rootProperties.readonly &&
+      event.dataTransfer
     ) {
-      const files = await getFilesFromDataTransfer(event.dataTransfer)
+      if (hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'files')) {
+        const files = getFileDataTransferDataFromDataTransfer(event.dataTransfer, 'files')
 
-      if (files) {
-        this.handleUpload(files, false)
+        for (const file of files.items) {
+          const src = `${files.path}/${file}`
+          const dest = `${this.currentPath}/${file}`
+          SocketActions.serverFilesCopy(src, dest)
+        }
+      } else if (hasFilesInDataTransfer(event.dataTransfer)) {
+        const files = await getFilesFromDataTransfer(event.dataTransfer)
+
+        if (files) {
+          this.handleUpload(files, false)
+        }
       }
     }
   }

diff --git a/src/components/widgets/filesystem/FileSystemBrowser.vue b/src/components/widgets/filesystem/FileSystemBrowser.vue
@@ -442,19 +442,14 @@ export default class FileSystemBrowser extends Mixins(FilesMixin) {
       this.ghost = document.createElement('div')
       this.ghost.classList.add('bulk-drag')
       this.ghost.classList.add((this.$vuetify.theme.dark) ? 'theme--dark' : 'theme--light')
-      this.ghost.innerHTML = this.$tc('app.file_system.tooltip.move_item', draggedItems.length)
+      this.ghost.innerHTML = draggedItems.length > 1
+        ? this.$tc('app.file_system.tooltip.items_count', draggedItems.length)
+        : item.name
       document.body.appendChild(this.ghost)
-      event.dataTransfer.effectAllowed = 'linkMove'
+      event.dataTransfer.effectAllowed = 'all'
       event.dataTransfer.setDragImage(this.ghost, 0, 0)
-      if (item.type === 'file') {
-        const filepath = item.path ? `${this.root}/${item.path}` : this.root
-        const url = this.createFileUrl(item.filename, filepath)
 
-        event.dataTransfer.setData('text/html', `<A HREF="${encodeURI(url)}">${item.filename}</A>`)
-        event.dataTransfer.setData('text/plain', url)
-        event.dataTransfer.setData('text/uri-list', url)
-      }
-      this.$emit('drag-start', draggedItems, event.dataTransfer)
+      this.$emit('drag-start', item, draggedItems, event.dataTransfer)
     }
   }
 

diff --git a/src/components/widgets/gcode-preview/GcodePreviewCard.vue b/src/components/widgets/gcode-preview/GcodePreviewCard.vue
@@ -149,6 +149,7 @@ import GcodePreview from './GcodePreview.vue'
 import GcodePreviewParserProgressDialog from './GcodePreviewParserProgressDialog.vue'
 import type { AppFile } from '@/store/files/types'
 import type { MinMax } from '@/store/gcodePreview/types'
+import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer } from '@/util/file-data-transfer'
 
 @Component({
   components: {
@@ -396,7 +397,10 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin, Bro
   }
 
   handleDragOver (event: DragEvent) {
-    if (event.dataTransfer?.types.includes('x-fluidd-jobs')) {
+    if (
+      event.dataTransfer &&
+      hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'jobs')
+    ) {
       event.preventDefault()
 
       event.dataTransfer.dropEffect = 'link'
@@ -412,12 +416,14 @@ export default class GcodePreviewCard extends Mixins(StateMixin, FilesMixin, Bro
   handleDrop (event: DragEvent) {
     this.overlay = false
 
-    if (event.dataTransfer?.types.includes('x-fluidd-jobs')) {
-      const data = event.dataTransfer.getData('x-fluidd-jobs')
-      const files: { path: string, jobs: string[] } = JSON.parse(data)
+    if (
+      event.dataTransfer &&
+      hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'jobs')
+    ) {
+      const files = getFileDataTransferDataFromDataTransfer(event.dataTransfer, 'jobs')
       const path = files.path ? `gcodes/${files.path}` : 'gcodes'
 
-      const file = this.$store.getters['files/getFile'](path, files.jobs[0]) as AppFile | undefined
+      const file = this.$store.getters['files/getFile'](path, files.items[0]) as AppFile | undefined
 
       if (file) {
         this.loadFile(file)

diff --git a/src/components/widgets/job-queue/JobQueue.vue b/src/components/widgets/job-queue/JobQueue.vue
@@ -63,6 +63,7 @@ import JobQueueBrowser from './JobQueueBrowser.vue'
 import JobQueueContextMenu from './JobQueueContextMenu.vue'
 import JobQueueMultiplyJobDialog from './JobQueueMultiplyJobDialog.vue'
 import type { AppTableHeader } from '@/types'
+import { getFileDataTransferDataFromDataTransfer, hasFileDataTransferTypeInDataTransfer } from '@/util/file-data-transfer'
 
 @Component({
   components: {
@@ -180,7 +181,10 @@ export default class JobQueue extends Vue {
   }
 
   handleDragOver (event: DragEvent) {
-    if (event.dataTransfer?.types.includes('x-fluidd-jobs')) {
+    if (
+      event.dataTransfer &&
+      hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'jobs')
+    ) {
       event.preventDefault()
 
       event.dataTransfer.dropEffect = 'link'
@@ -196,11 +200,13 @@ export default class JobQueue extends Vue {
   handleDrop (event: DragEvent) {
     this.overlay = false
 
-    if (event.dataTransfer?.types.includes('x-fluidd-jobs')) {
-      const data = event.dataTransfer.getData('x-fluidd-jobs')
-      const files: { path: string, jobs: string[] } = JSON.parse(data)
+    if (
+      event.dataTransfer &&
+      hasFileDataTransferTypeInDataTransfer(event.dataTransfer, 'jobs')
+    ) {
+      const files = getFileDataTransferDataFromDataTransfer(event.dataTransfer, 'jobs')
       const filePath = files.path ? `${files.path}/` : ''
-      const filenames = files.jobs
+      const filenames = files.items
         .map(file => `${filePath}${file}`)
 
       SocketActions.serverJobQueuePostJob(filenames)

diff --git a/src/globals.ts b/src/globals.ts
@@ -226,6 +226,10 @@ export const Globals = Object.freeze({
     { filename: 'telegram.conf', service: 'moonraker-telegram-bot', link: 'https://github.com/nlef/moonraker-telegram-bot/wiki/Sample-config' },
     { suffix: '.cfg', service: 'klipper', link: 'https://www.klipper3d.org/Config_Reference.html' }
   ],
+  FILE_DATA_TRANSFER_TYPES: {
+    files: 'x-fluidd-files',
+    jobs: 'x-fluidd-jobs'
+  },
   FILTERED_FOLDER_NAMES: ['.git'],
   FILTERED_FILES_PREFIX: ['.thumbs', 'thumbs'],
   FILTERED_FILES_EXTENSION: ['.ignoreme'],

diff --git a/src/locales/af.yaml b/src/locales/af.yaml
@@ -102,7 +102,6 @@ app:
       upload_file: Lêer word opgelaai | Lêers word opgelaai
     tooltip:
       low_on_space: Stoorspasie is min
-      move_item: Skuif item | Skuif {count} items
       root_disabled: '{root} root is nie beskikbaar nie. Sien die logs.'
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/de.yaml b/src/locales/de.yaml
@@ -115,7 +115,6 @@ app:
     tooltip:
       low_on_space: Wenig Speicherplatz auf der Festplatte
       root_disabled: '{root} ist nicht verfügbar. Bitte überprüfen Sie Ihre Logdateien.'
-      move_item: Eintrag verschieben | {count} Einträge verschieben
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'
       moonraker_config: 'https://moonraker.readthedocs.io/en/latest/configuration/#%{hash}'

diff --git a/src/locales/en.yaml b/src/locales/en.yaml
@@ -104,7 +104,7 @@ app:
       upload_file: Uploading file | Uploading files
     tooltip:
       low_on_space: Low on disk space
-      move_item: Move item | Move {count} items
+      items_count: '{count} item | {count} items'
       root_disabled: '{root} root is not available. Please check your logs.'
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/hu.yaml b/src/locales/hu.yaml
@@ -105,7 +105,6 @@ app:
       upload_file: Fájl feltöltése
     tooltip:
       low_on_space: Kevés a lemezterület
-      move_item: Elem mozgatása | {count} elem mozgatása
       root_disabled: '{root} nem elérhető. Kérjük, ellenőrizd a naplókat.'
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/ja.yaml b/src/locales/ja.yaml
@@ -94,7 +94,6 @@ app:
       upload_file: ファイルをアップロードする｜ファイルをアップロードする
     tooltip:
       low_on_space: ディスク容量が少なくなりました。
-      move_item: 'アイテムの移動｜ {count} 個のアイテムを移動'
       root_disabled: '{root} rootは使用できません。ログを確認してください。'
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/pl.yaml b/src/locales/pl.yaml
@@ -102,7 +102,6 @@ app:
         aby je wgrać
     tooltip:
       low_on_space: Mało miejsca na dysku
-      move_item: Przenieś element | Przenieś {count} elementy
       root_disabled: '{root} root jest niedostępny. Sprawdź logi.'
     url:
       klipper_config: https://www.klipper3d.org/Config_Reference.html#%{hash}

diff --git a/src/locales/pt.yaml b/src/locales/pt.yaml
@@ -101,7 +101,6 @@ app:
       duplicate_file: Duplicar ficheiro
     tooltip:
       low_on_space: Pouco espaço em disco
-      move_item: Mover item | Mover {count} itemes
   general:
     btn:
       add: Adicionar

diff --git a/src/locales/ru.yaml b/src/locales/ru.yaml
@@ -99,7 +99,6 @@ app:
       upload_file: Загрузка файла | Загрузка файлов
     tooltip:
       low_on_space: Мало места на диске
-      move_item: Переместить элемент | Переместить {count}
       root_disabled: Root недоступен. Проверьте файлы логов.
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/sl.yaml b/src/locales/sl.yaml
@@ -98,7 +98,6 @@ app:
       upload_file: Nalaganje datoteke | Nalaganje datotek
     tooltip:
       low_on_space: Na disku primanjkuje prostora
-      move_item: Premakni element | Premakni {count} elementov
       root_disabled: '{root} root ni na voljo. Prosimo, preverite dnevnike.'
     url:
       klipper_config: 'https://www.klipper3d.org/Config_Reference.html#%{hash}'

diff --git a/src/locales/zh-CN.yaml b/src/locales/zh-CN.yaml
@@ -91,7 +91,6 @@ app:
       upload_file: 上传文件
     tooltip:
       low_on_space: 磁盘空间不足
-      move_item: 移动项目|移动｛count｝个项目
       root_disabled: '{root} G代码文件目录不可用，请首先连接打印机或者检查G代码存放目录的路径与读权限'
     url:
       klipper_config: 'https://www.klipper3d.org/zh/Config_Reference.html#%{hash}'

diff --git a/src/locales/zh-HK.yaml b/src/locales/zh-HK.yaml
@@ -87,7 +87,6 @@ app:
       upload_file: 上傳文件
     tooltip:
       low_on_space: 磁盤空間不足
-      move_item: '移動項目 | 移動 {count} 項'
       root_disabled: '{root} G代碼文件目錄不可用，請首先連接打印機或者檢查G代碼存放目錄的路徑與讀權限'
     url:
       klipper_config: 'https://www.klipper3d.org/zh-Hant/Config_Reference.html#%{hash}'

diff --git a/src/scss/file-system.scss b/src/scss/file-system.scss
@@ -133,9 +133,11 @@
   position: absolute;
   top: -1000px;
   right: 0;
-  width: 170px;
+  width: auto;
+  min-width: 170px;
   height: 40px;
   align-items: center;
   padding: 0 16px 0 32px;
   border-radius: 6px;
+  text-wrap: nowrap;
 }
diff --git a/src/util/file-data-transfer.ts b/src/util/file-data-transfer.ts
@@ -0,0 +1,22 @@
+import { Globals } from '@/globals'
+
+export type FileDataTransferData = {
+  path: string,
+  items: string[]
+}
+
+export const hasFileDataTransferTypeInDataTransfer = (dataTransfer: DataTransfer, type: keyof typeof Globals.FILE_DATA_TRANSFER_TYPES) => {
+  return dataTransfer.types.includes(Globals.FILE_DATA_TRANSFER_TYPES[type])
+}
+
+export const setFileDataTransferDataInDataTransfer = (dataTransfer: DataTransfer, type: keyof typeof Globals.FILE_DATA_TRANSFER_TYPES, fileDataTransferData: FileDataTransferData) => {
+  dataTransfer.setData(Globals.FILE_DATA_TRANSFER_TYPES[type], JSON.stringify(fileDataTransferData))
+}
+
+export const getFileDataTransferDataFromDataTransfer = (dataTransfer: DataTransfer, type: keyof typeof Globals.FILE_DATA_TRANSFER_TYPES) => {
+  const data = dataTransfer.getData(Globals.FILE_DATA_TRANSFER_TYPES[type])
+
+  const fileDataTransferData: FileDataTransferData = JSON.parse(data)
+
+  return fileDataTransferData
+}