From adb85f341ba619a8477c87fbb69ec61334c2d656 Mon Sep 17 00:00:00 2001 From: Tony Ferrell Date: Tue, 18 May 2021 17:55:24 -0700 Subject: [PATCH] docs: update drag and drop tutorial (#29200) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Working * Working * Make the native-file drag and drop documents use context bridge * Add per-file sections * Use the updated link format * Use path.join instead of string interpolation. Co-authored-by: Antón Molleda * Use fs.promises Co-authored-by: Antón Molleda * Update docs/tutorial/native-file-drag-drop.md Co-authored-by: Antón Molleda * fix formatting Co-authored-by: Antón Molleda * Update docs/tutorial/native-file-drag-drop.md Co-authored-by: Antón Molleda * Use more path.join instead of interpolation * Update with PR suggestions * Remove process.cwd() and add more example elements * Minor text fix * Fix typo Co-authored-by: Erick Zhao Co-authored-by: Antón Molleda Co-authored-by: Erick Zhao --- .../fiddles/features/drag-and-drop/index.html | 9 ++--- docs/fiddles/features/drag-and-drop/main.js | 25 +++++++----- .../fiddles/features/drag-and-drop/preload.js | 8 ++++ .../features/drag-and-drop/renderer.js | 14 +++---- docs/tutorial/native-file-drag-drop.md | 40 ++++++++++++++----- 5 files changed, 63 insertions(+), 33 deletions(-) create mode 100644 docs/fiddles/features/drag-and-drop/preload.js diff --git a/docs/fiddles/features/drag-and-drop/index.html b/docs/fiddles/features/drag-and-drop/index.html index d451042521a5..7541c174b86f 100644 --- a/docs/fiddles/features/drag-and-drop/index.html +++ b/docs/fiddles/features/drag-and-drop/index.html @@ -7,12 +7,9 @@

Hello World!

-

- We are using node , - Chrome , - and Electron . -

- Drag me +

Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.

+
Drag me - File 1
+
Drag me - File 2
diff --git a/docs/fiddles/features/drag-and-drop/main.js b/docs/fiddles/features/drag-and-drop/main.js index bdc28bbf4500..9ad158beafd5 100644 --- a/docs/fiddles/features/drag-and-drop/main.js +++ b/docs/fiddles/features/drag-and-drop/main.js @@ -1,21 +1,28 @@ const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron') -const fs = require('fs'); -const http = require('http'); +const path = require('path') +const fs = require('fs') +const https = require('https') -function createWindow () { +function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { - nodeIntegration: true + preload: path.join(__dirname, 'preload.js') } }) win.loadFile('index.html') } -const iconName = 'iconForDragAndDrop.png'; -const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`); -http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => { + +const iconName = path.join(__dirname, 'iconForDragAndDrop.png'); +const icon = fs.createWriteStream(iconName); + +// Create a new file to copy - you can also copy existing files. +fs.writeFileSync(path.join(__dirname, 'drag-and-drop-1.md'), '# First file to test drag and drop') +fs.writeFileSync(path.join(__dirname, 'drag-and-drop-2.md'), '# Second file to test drag and drop') + +https.get('https://img.icons8.com/ios/452/drag-and-drop.png', (response) => { response.pipe(icon); }); @@ -23,8 +30,8 @@ app.whenReady().then(createWindow) ipcMain.on('ondragstart', (event, filePath) => { event.sender.startDrag({ - file: filePath, - icon: `${process.cwd()}/${iconName}` + file: path.join(__dirname, filePath), + icon: iconName, }) }) diff --git a/docs/fiddles/features/drag-and-drop/preload.js b/docs/fiddles/features/drag-and-drop/preload.js new file mode 100644 index 000000000000..4609e12c7552 --- /dev/null +++ b/docs/fiddles/features/drag-and-drop/preload.js @@ -0,0 +1,8 @@ +const { contextBridge, ipcRenderer } = require('electron') +const path = require('path') + +contextBridge.exposeInMainWorld('electron', { + startDrag: (fileName) => { + ipcRenderer.send('ondragstart', fileName) + } +}) diff --git a/docs/fiddles/features/drag-and-drop/renderer.js b/docs/fiddles/features/drag-and-drop/renderer.js index 33f328e30aed..b402fa392925 100644 --- a/docs/fiddles/features/drag-and-drop/renderer.js +++ b/docs/fiddles/features/drag-and-drop/renderer.js @@ -1,9 +1,9 @@ -const { ipcRenderer } = require('electron') -const fs = require('fs') - -document.getElementById('drag').ondragstart = (event) => { - const fileName = 'drag-and-drop.md' - fs.writeFileSync(fileName, '# Test drag and drop'); +document.getElementById('drag1').ondragstart = (event) => { event.preventDefault() - ipcRenderer.send('ondragstart', process.cwd() + `/${fileName}`) + window.electron.startDrag('drag-and-drop-1.md') +} + +document.getElementById('drag2').ondragstart = (event) => { + event.preventDefault() + window.electron.startDrag('drag-and-drop-2.md') } diff --git a/docs/tutorial/native-file-drag-drop.md b/docs/tutorial/native-file-drag-drop.md index d355b7fe514c..75ef4eb212cd 100644 --- a/docs/tutorial/native-file-drag-drop.md +++ b/docs/tutorial/native-file-drag-drop.md @@ -14,30 +14,46 @@ API in response to the `ondragstart` event. ## Example -Starting with a working application from the -[Quick Start Guide](quick-start.md), add the following lines to the -`index.html` file: +An example demonstrating how you can create a file on the fly to be dragged out of the window. + +### Preload.js + +In `preload.js` use the [`contextBridge`] to inject a method `window.electron.startDrag(...)` that will send an IPC message to the main process. + +```js +const { contextBridge, ipcRenderer } = require('electron') +const path = require('path') + +contextBridge.exposeInMainWorld('electron', { + startDrag: (fileName) => { + ipcRenderer.send('ondragstart', path.join(process.cwd(), fileName)) + } +}) +``` + +### Index.html + +Add a draggable element to `index.html`, and reference your renderer script: ```html -Drag me +
Drag me
``` -and add the following lines to the `renderer.js` file: +### Renderer.js + +In `renderer.js` set up the renderer process to handle drag events by calling the method you added via the [`contextBridge`] above. ```javascript -const { ipcRenderer } = require('electron') - document.getElementById('drag').ondragstart = (event) => { event.preventDefault() - ipcRenderer.send('ondragstart', '/absolute/path/to/the/item') + window.electron.startDrag('drag-and-drop.md') } ``` -The code above instructs the Renderer process to handle the `ondragstart` event -and forward the information to the Main process. +### Main.js -In the Main process(`main.js` file), expand the received event with a path to the file that is +In the Main process (`main.js` file), expand the received event with a path to the file that is being dragged and an icon: ```javascript fiddle='docs/fiddles/features/drag-and-drop' @@ -56,3 +72,5 @@ the item from the BrowserWindow onto your desktop. In this guide, the item is a Markdown file located in the root of the project: ![Drag and drop](../images/drag-and-drop.gif) + +[`contextBridge`]: ../api/context-bridge.md