Custom Window Interactions

Custom draggable regions

By default, windows are dragged using the title bar provided by the OS chrome. Apps that remove the default title bar need to use the app-region CSS property to define specific areas that can be used to drag the window. Setting app-region: drag marks a rectagular area as draggable.

It is important to note that draggable areas ignore all pointer events. For example, a button element that overlaps a draggable region will not emit mouse clicks or mouse enter/exit events within that overlapping area. Setting app-region: no-drag reenables pointer events by excluding a rectagular area from a draggable region.

To make the whole window draggable, you can add app-region: drag as body's style:

styles.css

body {
  app-region: drag;
}

Et notez que si vous avez rendu toute la fenêtre déplaçable, vous devez également marquer les boutons comme non déplaçables car sinon il sera impossible pour les utilisateurs de cliquer sur ceux-ci :

styles.css

button {
  app-region: no-drag;
}

If you're only setting a custom title bar as draggable, you also need to make all buttons in title bar non-draggable.

Astuce : désactiver la sélection de texte

Lors de la création d'une région déplaçable, le déplacement peut entrer en conflit avec la sélection de texte. For example, when you drag the title bar, you may accidentally select its text contents. Vous éviterez de tels désagréments en désactivant la sélection de texte dans une zone pouvant être glissée comme celle-ci :

.titlebar {
  user-select: none;
  app-region: drag;
}

Astuce : désactiver les menus contextuels

Sur certaines plateformes, la zone déplaçable sera traitée comme une frame hors-client, donc lun clic droit sur celle-ci fera apparaître un menu système. Pour que le menu contextuel se comporte correctement sur toutes les plates-formes, vous ne devez jamais utiliser un menu contextuel personnalisé sur des zones déplaçables.

Click-through windows

To create a click-through window, i.e. making the window ignore all mouse events, you can call the win.setIgnoreMouseEvents(ignore) API:

main.js

const { BrowserWindow } = require('electron')
const win = new BrowserWindow()
win.setIgnoreMouseEvents(true)

Forward mouse events macOS Windows

Le fait d'ignorer les messages de la souris rend la page Web insensible au mouvement de la souris, signifiant que les événements de déplacement de la souris ne seront pas émis. On Windows and macOS, an optional parameter can be used to forward mouse move messages to the web page, allowing events such as mouseleave to be emitted:

main.js

const { BrowserWindow, ipcMain } = require('electron')
const path = require('node:path')

const win = new BrowserWindow({
  webPreferences: {
    preload: path.join(__dirname, 'preload.js')
  }
})

ipcMain.on('set-ignore-mouse-events', (event, ignore, options) => {
  const win = BrowserWindow.fromWebContents(event.sender)
  win.setIgnoreMouseEvents(ignore, options)
})

preload.js

window.addEventListener('DOMContentLoaded', () => {
  const el = document.getElementById('clickThroughElement')
  el.addEventListener('mouseenter', () => {
    ipcRenderer.send('set-ignore-mouse-events', true, { forward: true })
  })
  el.addEventListener('mouseleave', () => {
    ipcRenderer.send('set-ignore-mouse-events', false)
  })
})

This makes the web page click-through when over the #clickThroughElement element, and returns to normal outside it.