CODEWITHSUNDEEP
javascriptnode.jselectron
KcFnMi
KcFnMi

Reputation: 6171

Is it possible to disable zoom in/out functionality in a Electron electron-quick-start JS app?

This question is specific to electron-quick-start, so it's not a duplicate.

I'm in the very first steps of JS desktop apps with https://github.com/electron/electron-quick-start, I have the code and I can run the app on my mac(hine).

I've note It's possible to zoon in/out the text on the app, which is a feature common to web. Not so common to desktop apps.

How do I disable that behavior?

Upvotes: 3

Views: 7957

Answers (7)

therobinkim
therobinkim

Reputation: 2568

Add the following to the JavaScript file that your rendered html file is sourcing in (see, main process vs renderer process).

var webFrame = require('electron').webFrame;
webFrame.setVisualZoomLevelLimits(1, 1);

In your case, it's renderer.js for the electron-quick-start app.

Documentation: https://github.com/electron/electron/blob/master/docs/api/web-frame.md#webframesetzoomlevellimitsminimumlevel-maximumlevel

Upvotes: 6

vitkon
vitkon

Reputation: 1078

custom menu is the only right way to go https://www.electronjs.org/docs/latest/api/menu#examples

const customMenuTemplate = [
  ...(process.platform === 'darwin'
    ? [
        {
          label: app.name,
          submenu: [
            { role: 'about' },
            { type: 'separator' },
            { role: 'services' },
            { type: 'separator' },
            { role: 'hide' },
            { role: 'hideothers' },
            { role: 'unhide' },
            { type: 'separator' },
            { role: 'quit' },
          ],
        },
      ]
    : []),
  {
    label: 'File',
    submenu: [process.platform === 'darwin' ? { role: 'close' } : { role: 'quit' }],
  },
  {
    label: 'Edit',
    submenu: [
      { role: 'undo' },
      { role: 'redo' },
      { type: 'separator' },
      { role: 'cut' },
      { role: 'copy' },
      { role: 'paste' },
      ...(process.platform === 'darwin'
        ? [
            { role: 'pasteAndMatchStyle' },
            { role: 'delete' },
            { role: 'selectAll' },
            { type: 'separator' },
            {
              label: 'Speech',
              submenu: [{ role: 'startSpeaking' }, { role: 'stopSpeaking' }],
            },
          ]
        : [{ role: 'delete' }, { type: 'separator' }, { role: 'selectAll' }]),
    ],
  },
  {
    label: 'View',
    submenu: [
      { role: 'reload' },
      { role: 'forceReload' },
      { role: 'toggleDevTools' },
      { type: 'separator' },
      { role: 'resetZoom', enabled: false },
      { role: 'zoomIn', enabled: false },
      { role: 'zoomOut', enabled: false },
      { type: 'separator' },
      { role: 'togglefullscreen' },
    ],
  },
  {
    label: 'Window',
    role: 'window',
    submenu: [
      { role: 'minimize' },
      { role: 'zoom' },
      ...(process.platform === 'darwin'
        ? [{ type: 'separator' }, { role: 'front' }, { type: 'separator' }, { role: 'window' }]
        : [{ role: 'close' }]),
    ],
  },
  {
    label: 'Help',
    role: 'help',
    submenu: [
      {
        label: 'Learn More',
        click: async () => {
          const { shell } = require('electron');
          await shell.openExternal('https://electronjs.org');
        },
      },
    ],
  },
];

In the above code, we disable the zoom functionality by setting enabled: false on the resetZoom, zoomIn, and zoomOut roles.

Then add the custom menu to your app.

  const menu = Menu.buildFromTemplate(customMenuTemplate);
  Menu.setApplicationMenu(menu);

Voila

Upvotes: 0

arashka
arashka

Reputation: 1325

In 2023, as @5war00p has mentioned in an answer above, the only solution is to use globalShortcut similar to his proposed method. But his way is a little unpolished, and in fact can cause some problems. I suggest doing this in your main.js after creating your window object:

const { globalShortcut } = require('electron');

window.on('focus', () => {
  globalShortcut.register("CommandOrControl+0", () => { return });
  globalShortcut.register("CommandOrControl+plus", () => { return });
  globalShortcut.register("CommandOrControl+=", () => { return });
  globalShortcut.register("CommandOrControl+-", () => { return });
  globalShortcut.register("CommandOrControl+_", () => { return });
});

window.on('blur', () => {
  globalShortcut.unregister("CommandOrControl+0");
  globalShortcut.unregister("CommandOrControl+plus");
  globalShortcut.unregister("CommandOrControl+=");
  globalShortcut.unregister("CommandOrControl+-");
  globalShortcut.unregister("CommandOrControl+_");
});

This covers all the zoom related shortcuts, and doesn't interfere with other shortcuts that use control or command keys. You can also use ipc calls in the registered callbacks to use your own handlers.

Upvotes: 1

5war00p
5war00p

Reputation: 408

Chrome removed setLayoutZoomLevelLimits(0,0) as it is beyond electron limits now,

So, Ctrl/Cmd + and Ctrl/Cmd - will trigger zoom actions, there is a cool workaround that I recommend to register shortcut and stop the action by using below code snippets:

  • onFocus return nothing
window.on('focus', () => {
  globalShortcut.register("CommandOrControl", () => { return })
})
  • onBlur unregister the shortcut
window.on('blur', () => {
  globalShortcut.unregister("CommandOrControl+=")
  globalShortcut.unregister("CommandOrControl+-")
})

Upvotes: 1

Vamoss
Vamoss

Reputation: 925

The setVisualZoomLevelLimits command is deprecated.

var app = require('electron')
app.commandLine.appendSwitch('disable-pinch');

Solution found by mixing these two links:

1 - https://github.com/electron/electron/issues/8793#issuecomment-289791853

2 - https://github.com/electron/electron/blob/master/docs/api/chrome-command-line-switches.md

Upvotes: 3

popod
popod

Reputation: 467

If you want to do the same, but in the Main Process (in your case in main.js), you can do this :

let webContents = mainWindow.webContents
webContents.on('did-finish-load', () => {
  webContents.setZoomFactor(1)
  webContents.setVisualZoomLevelLimits(1, 1)
  webContents.setLayoutZoomLevelLimits(0, 0)
})

Upvotes: 9

KcFnMi
KcFnMi

Reputation: 6171

It appears that adding the following to renderer.js does the job:

var webFrame = require('electron').webFrame;
    webFrame.setVisualZoomLevelLimits(1,1);
require('electron').webFrame.setLayoutZoomLevelLimits(0, 0);

Both, zoom via mouse and via Ctrl++/Ctrl+- are disabled.

If some one has comments or a better answer I'll appreciate.

Upvotes: 0

Related Questions