フレームレスウィンドウをfalseで移動しようとしていましたが、1つの要素(タイトルバー)をドラッグするだけでwholeウィンドウを移動したいと思います。私はもう試した -webkit-app-region: drag;
が動作しないようですが、私も試しました https://www.npmjs.com/package/electron-drag でも動作しません。
あなたのウィンドウはフレームレスなので、あなたのIDEはそうではないと言っていますが、有効なプロパティ-webkit-app-region
を使用できます。テキストの選択を禁止し、タイトル内のボタンをドラッグするだけです。あまりにもUXの懸念からバー。
.titlebar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
.titlebar-button {
-webkit-app-region: no-drag;
}
APIドキュメントでもこれについて言及しています https://github.com/electron/electron/blob/master/docs/api/frameless-window.md#draggable-region
まず、main.jsファイルでframe
オプションをfalse
に設定してアプリウィンドウを作成します。
mainWindow = new BrowserWindow({
...
frame: false
})
次に、renderer.jsファイルで、-webkit-app-region
プロパティをdrag
に設定してHTML要素(例)を作成します。
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)
これをReact Electronアプリに実装しようとしています。上記のCSSプロパティを使用しようとしましたが、まだ機能していません。ブラウザウィンドウを使用する他のソリューションでは機能しません。私のアプリケーションがReactにあり、Context.Providerでアプリがラップされているため、どちらでも問題ありません。ここにあるコードは次のとおりです。
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>
そしてこれはApp.scssで
.title-bar {
-webkit-user-select: none;
-webkit-app-region: drag;
}
React電子アプリでこれを解決するためのより良い戦略があるかどうか誰でも知っていますか?