Работая с моим электронным проектом (используя angular 9), сделал настраиваемую строку заголовка с кнопками управления окном (свернуть, развернуть, восстановить и т. Д. c). Теперь всякий раз, когда я нажимаю эти кнопки (предположим, свернуть), окно внезапно скрывается, не показывая плавной исчезающей анимации, что нормально для настольного приложения windows. Итак, я сделал еще один проект фиктивного электрона (без angular и с использованием простого JavaScript) создал 4 кнопки для кода событий окна, как показано ниже для фиктивного проекта:
index. js
const {app, BrowserWindow, ipcMain} = require('electron') ;
let win ;
app.on('ready', () => {
win = new BrowserWindow({
width: 800,
height: 636,
frame: false,
webPreferences: {
nodeIntegration: true
}
}) ;
win.loadFile('./src/index.html') ;
});
app.on('window-all-closed', () => {
app.quit() ;
})
ipcMain.on('minimize:event', () => {
win.minimize() ;
}) ;
ipcMain.on('maximize:event', () => {
win.maximize() ;
}) ;
ipcMain.on('close:event', () => {
win.close() ;
}) ;
ipcMain.on('restore:event', () => {
win.restore() ;
}) ;
индекс. html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
Hello World
<button id="min" click="minimize()">Minimize</button>
<button id="max" click="maximize()">Maximize</button>
<button id="close" click="close()">Close</button>
<button id="res" click="restore()">Restore</button>
<script>
const { ipcRenderer } = require('electron') ;
document.getElementById('min').onclick = function(){
ipcRenderer.send('minimize:event') ;
}
document.getElementById('max').onclick = function(){
ipcRenderer.send('maximize:event') ;
}
document.getElementById('close').onclick = function(){
ipcRenderer.send('close:event') ;
}
document.getElementById('res').onclick = function(){
ipcRenderer.send('restore:event') ;
}
</script>
</body>
</html>
Для моего angular проекта:
main. js (index. js)
const { app, BrowserWindow, ipcMain } = require('electron') ;
const config = require('./config') ;
let win, settings ;
let gotSingleInstanceAccess = app.requestSingleInstanceLock() ;
if(!gotSingleInstanceAccess){
app.quit() ;
}
app.on('ready', () => {
/// on redy fetch the settings
settings = config.createDefaultSettingsAndReturn() ;
// Create the browser window.
win = new BrowserWindow({
width: settings.appSettings.defaultWidth,
height: settings.appSettings.defaultHeight,
webPreferences: {
nodeIntegration: true,
},
show: false,
frame: false,
transparent: true,
minHeight: settings.appSettings.minHeight,
minWidth: settings.appSettings.minWidth
}) ;
if(!settings.appSettings.trayMode){
if(settings.appSettings.wasMaximized){
win.maximize() ;
}
else{
win.setBounds(settings.windowSettings.windowBounds) ;
}
}
else{
// do for traymode ;
}
win.loadURL('http://localhost:4200') ;
win.on('ready-to-show', () =>{
win.show() ;
}) ;
win.webContents.on('did-fail-load', () => {
win.loadURL('http://localhost:4200')
});
win.on('closed', () => {
win = null ;
})
}) ;
app.on('second-instance', (event,args, cwd) => {
if(win){
if(win.isMinimized()){
win.restore() ;
}
win.focus() ;
}
})
// Quit when all windows are closed.
app.on('window-all-closed', () => {
// On macOS it is common for applications and their menu bar
// to stay active until the user quits explicitly with Cmd + Q
console.log('saved settings successfully')
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
if (win = null) {
createWindow() ;
}
}) ;
ipcMain.on('window:minimize', () => {
win.blur() ;
win.minimize() ;
}) ;
ipcMain.on('window:maximize', () => {
win.maximize() ;
win.resizable = false ;
}) ;
ipcMain.on('window:restore', () => {
win.restore() ;
win.resizable = true ;
}) ;
ipcMain.on('window:close', () => {
win.close() ;
}) ;
app-window.service.ts
import { Injectable } from '@angular/core';
import { WindowSettings } from '../interface/settings';
import { AppStoreService } from './app-store.service';
import { BehaviorSubject } from 'rxjs';
import { ElectronService } from 'ngx-electron';
import { ElectronHelperService } from './electron-helper.service';
@Injectable()
export class AppWindowService {
windowSettings: WindowSettings ;
maxmizeObservable: BehaviorSubject<boolean> ;
constructor(private helper: ElectronHelperService, private electron: ElectronService, private config: AppStoreService) {
this.windowSettings = this.config.store.get('settings.windowSettings') ;
this.maxmizeObservable = new BehaviorSubject<boolean>(this.windowSettings.wasMaximized) ;
}
// showing maximize/restore button
changeMaximizedState(value: boolean){
this.maxmizeObservable.next(value) ;
this.windowSettings.wasMaximized = value ;
}
winMaximize(){
this.windowSettings.windowBounds = this.helper.win.getBounds() ;
this.electron.ipcRenderer.send('window:maximize') ;
}
winRestore(){
this.helper.win.setBounds(this.windowSettings.windowBounds) ;
this.electron.ipcRenderer.send('window:restore') ;
}
winMinimize(){
this.electron.ipcRenderer.send('window:minimize') ;
}
winClose(){
this.electron.ipcRenderer.send('window:close') ;
}
}
Мой фиктивный проект имеет плавную анимацию окна, но проект angular все еще имеет анимацию для этих событий окна (это похоже на то, что анимация windows закрыта на панели управления). Как я могу это исправить?