After some trial and error, I finally figured out a way to handle window events in Electron:
In electron-main.js
mainWindow.on("move", () => {
//_ console.log("electron move");
mainWindow.webContents.send("winState", "normal");
});
mainWindow.on("minimize", () => {
//_ console.log("electron minimize");
mainWindow.webContents.send("winState", "minimized");
});
mainWindow.on("maximize", () => {
//_ console.log("electron maximize");
mainWindow.webContents.send("winState", "maximized");
});
mainWindow.on("unmaximize", () => {
//_ console.log("electron unmaximize");
mainWindow.webContents.send("winState", "normal");
});
mainWindow.on("restore", () => {
//_ console.log("electron restore");
mainWindow.webContents.send("winState", "normal");
});
In electron-preload.js
import { contextBridge, ipcRenderer } from "electron";
import { BrowserWindow } from "@electron/remote";
contextBridge.exposeInMainWorld("csxAPI", {
envMode: process.env.MODE,
minimize() {
BrowserWindow.getFocusedWindow().minimize();
},
maximize() {
BrowserWindow.getFocusedWindow().maximize();
},
restore() {
BrowserWindow.getFocusedWindow().unmaximize();
},
close() {
BrowserWindow.getFocusedWindow().close();
BrowserWindow.getFocusedWindow().destroy();
},
});
const validChannels = ["winState"];
contextBridge.exposeInMainWorld("ipc", {
send: (channel, data) => {
if (validChannels.includes(channel)) {
ipcRenderer.send(channel, data);
}
},
on: (channel, func) => {
if (validChannels.includes(channel)) {
// Strip event as it includes `sender` and is a security risk
//_ ipcRenderer.on(channel, (event, ...args) => func(...args));
ipcRenderer.on(channel, (...args) => func(...args));
}
},
});
In TitleBar.vue
//...
data: function () {
return {
status: "normal",
};
},
//...
mounted() {
window.ipc.on("winState", (event, msg) => {
this.status = msg;
});
//...
methods: {
winMinimize() {
if (window.csxAPI.envMode === "electron") {
window.csxAPI.minimize();
}
},
winMaximize() {
if (window.csxAPI.envMode === "electron") {
window.csxAPI.maximize();
}
},
winRestore() {
if (window.csxAPI.envMode === "electron") {
window.csxAPI.restore();
}
},
winClose() {
if (window.csxAPI.envMode === "electron") {
window.csxAPI.close();
}
},
},
This approach may not be the most optimized or conventional, but it did the job for me. Grateful for all the support received.