In the doc they say: "The Menu class is only available in the main process, but you can also use it in the render process via the remote module."
I only use ContextMenu But it should work the same.
In my renderer code I do:
const {
BrowserWindow,
dialog,
Menu,
MenuItem
} = require('electron').remote;
and define my Menu
const menuCloneVin = new Menu();
menuCloneVin.append(new MenuItem({
label: 'My Item Label',
click() {
// code to execute when click
}
}));
I am building a paint app using html canvas. Also I am using menu buttons to change active color, shapes and to switch fill option. So all my logic lives in canvas.js file imported in index.html, where I manage canvas, but my current settings live in index.js. But I can’t find a way to speak between index.js and this script file. Now every time I start to draw – I send a IPC request to main file and get back current settings, but that is not fast enough method. Ideally I need to already have my current settings ready in this canvas.js file by the time I start to draw something. What is the best way to do it?
index.js:
const { app, BrowserWindow, Menu, ipcMain } = require('electron');
let win;
let color = '#ffff00';
let shape = 'PointShape';
let fill = true;
...
win.loadFile('index.html');
...
ipcMain.on('getSettings', (event) => {
event.reply('letSettings', color, shape, fill);
});
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Electron Paint App</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<canvas id="canvas"></canvas>
<script src="canvas.js"></script>
</body>
</html>
cansav.js:
window.addEventListener('load', () => {
require('events').defaultMaxListeners = 9999;
const { ipcRenderer } = require('electron');
...
function startPosition(e) {
ipcRenderer.send('getSettings');
ipcRenderer.on('letSettings', (event, color, shape, fill) => {
curColor = color;
curShape = shape;
curFill = fill;
});
...
window.global.canvas.addEventListener("mousedown", startPosition);
Even If I didn’t catch everything, if you have a global reference to your canvas why you don’t have either a reference to your settings?
@alain-buferne I reference canvas in the file it is declared in, which is loaded into that html file like a script. But when I click a button – that action is happening in electron main file and, as I understand, it does not know that this script file exists. So the only way I see is to ask smth at this script file, like I am doing now with IPC. But something like global state for that is what I am looking for.
When you click a button the event should be managed by an eventHandler inside the renderer not the main/ The main (what you call index.js) is there to deal with all the stuff related to your system(file system, contextual menu, windows instantiation etc…). So either yout settings are read through a file and don’t change and will be read in the main and send to the renderer through a message or if the setting is variable due to buttons action in the renderer and you access directly to them…
@alain-buferne by button I mean native chromium top menu bar. So it is happening in main js. And if I understand correctly I can’t initiate an IPC to renderer when I clicked that button and changed variable in main, cause main does not know about who is renderer untill it knocks. Sorry if I understand this wrong..
Oh, that is what I was looking for. Thank you!