web-dev-qa-db-ja.com

-webkit-app-regionを使用せずにElectronでフレームレスウィンドウを移動するにはどうすればよいですか

フレームレスウィンドウをfalseで移動しようとしていましたが、1つの要素（タイトルバー）をドラッグするだけでwholeウィンドウを移動したいと思います。私はもう試した -webkit-app-region: drag;が動作しないようですが、私も試しました https://www.npmjs.com/package/electron-drag でも動作しません。

javascriptcssnode.jsreactjselectron
12
speed437

あなたのウィンドウはフレームレスなので、あなたの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

19
Hans Koch

まず、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)
6
Pelayo Méndez

これを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電子アプリでこれを解決するためのより良い戦略があるかどうか誰でも知っていますか？

0
llamacorn