web-dev-qa-db-fra.com

Comment déplacer une fenêtre sans cadre dans Electron sans utiliser -webkit-app-region

J'ai essayé de déplacer une fenêtre sans cadre sur false mais maintenant je veux déplacer toute la fenêtre simplement en faisant glisser un élément (la barre de titre), J'ai essayé -webkit-app-region: drag; mais cela ne semble pas fonctionner, j'ai aussi essayé https://www.npmjs.com/package/electron-drag mais ça ne marche pas non plus.

javascriptcssnode.jsreactjselectron
12
speed437

Étant donné que vos fenêtres sont sans cadre, vous pouvez utiliser la propriété -webkit-app-region qui est valide même si votre IDE dit que ce n'est pas le cas. Vous devriez juste interdire la sélection de texte et faire glisser les boutons à l'intérieur de votre barre de titre trop par souci d'UX.

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

.titlebar-button {
  -webkit-app-region: no-drag;
}

La documentation de l'API le mentionne également https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#draggable-region

19
Hans Koch

Créez d'abord votre fenêtre d'application avec l'option frame définie sur false sur votre fichier main.js:

mainWindow = new BrowserWindow({
...
frame: false
})

Ensuite, dans votre fichier renderer.js, créez un élément HTML (Ex.) Avec le -webkit-app-region propriété définie sur drag.

var windowTopBar = document.createElement('div')
windowTopBar.style.width = "100%"
windowTopBar.style.height = "32px"
windowTopBar.style.backgroundColor = "#000"
windowTopBar.style.position = "absolute"
windowTopBar.style.top = windowTopBar.style.left = 0
windowTopBar.style.webkitAppRegion = "drag"
document.body.appendChild(windowTopBar)
6
Pelayo Méndez

J'essaie d'implémenter cela dans une application React Electron. J'ai essayé d'utiliser les propriétés CSS comme indiqué ci-dessus, mais cela ne fonctionne pas encore. L'autre solution avec la fenêtre du navigateur ne fonctionne pas fonctionne tout à fait bien car mon application est en React avec l'application enveloppée dans un Context.Provider. Voici le code que j'ai:

Dans app.tsx

<ApplicationContext.Provider value={{
    ...this.state,
    canvas: this.canvas,
    setTheme: this.setTheme,
    setFontSize: this.setFontSize,
    setTabSize: this.setTabSize,
    setShowLineNumbers: this.setShowLineNumbers,
  }}
>
    <div id="app" className={appTheme}>
      <header className="title-bar">
        {/* more code */}
      </header>
    </div>
</ApplicationContext.Provider>

Et cela dans App.scss

.title-bar {
  -webkit-user-select: none;
  -webkit-app-region: drag;
}

Quelqu'un sait-il s'il existe une meilleure stratégie pour résoudre ce problème dans une React Electron app?

0
llamacorn