mirrors/electron
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

docs: update drag and drop tutorial (#29200)

Browse source 
* 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 <molant@users.noreply.github.com>

* Use fs.promises

Co-authored-by: Antón Molleda <molant@users.noreply.github.com>

* Update docs/tutorial/native-file-drag-drop.md

Co-authored-by: Antón Molleda <molant@users.noreply.github.com>

* fix formatting

Co-authored-by: Antón Molleda <molant@users.noreply.github.com>

* Update docs/tutorial/native-file-drag-drop.md

Co-authored-by: Antón Molleda <molant@users.noreply.github.com>

* 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 <erick@hotmail.ca>

Co-authored-by: Antón Molleda <molant@users.noreply.github.com>
Co-authored-by: Erick Zhao <erick@hotmail.ca>
This commit is contained in:
Tony Ferrell 2021-05-18 17:55:24 -07:00 committed by GitHub
parent af426cbdab
commit adb85f341b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 63 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
docs/fiddles/features/drag-and-drop/index.html
View file

@ -7,12 +7,9 @@
</head> </head>
<body> <body>
<h1>Hello World!</h1> <h1>Hello World!</h1>
<p> <p>Drag the boxes below to somewhere in your OS (Finder/Explorer, Desktop, etc.) to copy an example markdown file.</p>
We are using node <script>document.write(process.versions.node)</script>, <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag1">Drag me - File 1</div>
Chrome <script>document.write(process.versions.chrome)</script>, <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag2">Drag me - File 2</div>
and Electron <script>document.write(process.versions.electron)</script>.
</p>
<a href="#" id="drag">Drag me</a>
<script src="renderer.js"></script> <script src="renderer.js"></script>
</body> </body>
</html> </html>

25
docs/fiddles/features/drag-and-drop/main.js
View file

@ -1,21 +1,28 @@
const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron') const { app, BrowserWindow, ipcMain, nativeImage, NativeImage } = require('electron')
const fs = require('fs'); const path = require('path')
const http = require('http'); const fs = require('fs')
const https = require('https')
function createWindow () { function createWindow() {
const win = new BrowserWindow({ const win = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
webPreferences: { webPreferences: {
nodeIntegration: true preload: path.join(__dirname, 'preload.js')
} }
}) })
win.loadFile('index.html') win.loadFile('index.html')
} }
const iconName = 'iconForDragAndDrop.png';
const icon = fs.createWriteStream(`${process.cwd()}/${iconName}`); const iconName = path.join(__dirname, 'iconForDragAndDrop.png');
http.get('http://img.icons8.com/ios/452/drag-and-drop.png', (response) => { 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); response.pipe(icon);
}); });
@ -23,8 +30,8 @@ app.whenReady().then(createWindow)
ipcMain.on('ondragstart', (event, filePath) => { ipcMain.on('ondragstart', (event, filePath) => {
event.sender.startDrag({ event.sender.startDrag({
file: filePath, file: path.join(__dirname, filePath),
icon: `${process.cwd()}/${iconName}` icon: iconName,
}) })
}) })

8
docs/fiddles/features/drag-and-drop/preload.js Normal file
View file

@ -0,0 +1,8 @@
const { contextBridge, ipcRenderer } = require('electron')
const path = require('path')
contextBridge.exposeInMainWorld('electron', {
startDrag: (fileName) => {
ipcRenderer.send('ondragstart', fileName)
}
})

14
docs/fiddles/features/drag-and-drop/renderer.js
View file

@ -1,9 +1,9 @@
const { ipcRenderer } = require('electron') document.getElementById('drag1').ondragstart = (event) => {
const fs = require('fs')
document.getElementById('drag').ondragstart = (event) => {
const fileName = 'drag-and-drop.md'
fs.writeFileSync(fileName, '# Test drag and drop');
event.preventDefault() 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')
} }

40
docs/tutorial/native-file-drag-drop.md
View file

@ -14,30 +14,46 @@ API in response to the `ondragstart` event.
## Example ## Example
Starting with a working application from the An example demonstrating how you can create a file on the fly to be dragged out of the window.
[Quick Start Guide](quick-start.md), add the following lines to the
`index.html` file: ### 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 ```html
<a href="#" id="drag">Drag me</a> <div style="border:2px solid black;border-radius:3px;padding:5px;display:inline-block" draggable="true" id="drag">Drag me</div>
<script src="renderer.js"></script> <script src="renderer.js"></script>
``` ```
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 ```javascript
const { ipcRenderer } = require('electron')
document.getElementById('drag').ondragstart = (event) => { document.getElementById('drag').ondragstart = (event) => {
event.preventDefault() 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 ### Main.js
and forward the information to the Main process.
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: being dragged and an icon:
```javascript fiddle='docs/fiddles/features/drag-and-drop' ```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: the item is a Markdown file located in the root of the project:
![Drag and drop](../images/drag-and-drop.gif) ![Drag and drop](../images/drag-and-drop.gif)
[`contextBridge`]: ../api/context-bridge.md