Как реализовать DnD для Desktop-приложения на Electron?

Question

[sergealmazov]

Как реализовать drag-and-drop c рабочего стола в приложение на Electon. DnD внутри приложения на Electron, и из приложения на рабочий стол?

Фактически хочу, чтобы можно было перетащить иконку файла в приложение, чтобы в приложении тоже отображался файлом. Затем из приложения на рабочий стол тоже нужен DnD.

И функции Pan & Touch внутри. Что лучше использовать? Какие фреймворки? Собственный огород городить не особо хочется.

Answer 1

[Виталий]

на сколько я понимаю, DnD вам надо реализовать ровно так же как и для любого сайта, так как по сути у вас есть фронт и бек сторона приложения. Которые общаются через эмиттер. Драгом вы тащите в фронт, дальше через активацию событий (эмиттерами) передаете в бек.
Upd:
Касаемо перетаскивания из приложения, такое не умеет делать даже гугл диск, мне кажется это из зоны фантастики.

Лично мое отношение к электрон приложениям, это универсальный упаковщик браузера, фронта и бека. И при разработке приложений по сути нужно учитывать все ограничения веба. Они будут накладываться ровно так же и на ваше приложение.

Comments

[sergealmazov]

Совершенно верно. И тут момент важный - что использовать, т.к. приложение обещает быть большим. GSAP или D3. Но, возможно, я ошибаюсь. Вот и нужен совет.

[Виталий]

sergealmazov: я бы искал самый простой модуль, чтобы он не был перегружен функционалом. Потому как чем больше то, что прицепляешь, тем больше проблем с этим. И драг из клиента я бы вообще не рассматривал. Но это только мысли.

[Interface]

https://www.thecssninja.com/javascript/gmail-dragout - так не умеет гугло диск?

[Виталий]

Interface: мое суждение на счет того что он не умеет основано на реальной проверке, что ничего оттуда не тащится. Проверь тожею какие проблемы.

Answer 2

[Leveofan]

В Electron есть возможность организовать DnD из приложения на рабочий стол, есть даже пример в оф. доке - https://www.electronjs.org/docs/latest/tutorial/na...

По сути в main процессе вы слушаете событие (ipc канал от рендер процесса), а после выполняете запрос к вашему файловому хранилищу и формируете файл локально, уже туда, куда вы его утянул (в какую папку

ipcMain.on('drag-and-drop', async (event, { url, filename }) => {
      try {
        const response = await axios({
          url,
          method: 'GET',
          responseType: 'stream'
        });

        const filePath = join(app.getPath('desktop'), filename);
        const writer = fs.createWriteStream(filePath);

        response.data.pipe(writer);

        return new Promise((resolve, reject) => {
          writer.on('finish', resolve);
          writer.on('error', reject);
        });
      } catch (error) {
        await dialog.showMessageBox(null, {
          type: 'error',
          defaultId: 2,
          title: 'Ошибка при скачивании файла',
          message: 'Не удалось скачать файл',
        });
        throw error;
      }
    });