Funcionalidad de Zoom en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.

Todos los navegadores web tradicionales tienen la funcionalidad Zoom incorporada. El usuario puede simplemente acercar/alejar para aumentar/disminuir el tamaño de los contenidos de la página web, respectivamente, desplazando la rueda del mouse. De forma predeterminada, Electron no habilita la funcionalidad Zoom para sus instancias de BrowserWindow . Sin embargo, Electron proporciona una forma en la que podemos agregar la funcionalidad Zoom al contenido de la página utilizando los métodos, eventos y propiedades de instancia del objeto BrowserWindow integrado y la propiedad webContents . La webContenidosLa propiedad nos proporciona ciertos eventos y métodos de instancia mediante los cuales podemos establecer el zoom predeterminado de la página web, el zoom máximo y mínimo de la página web y acercar/acercar el contenido de la página web usando el desplazamiento del mouse. Este tutorial demostrará la funcionalidad de Zoom en Electron.

Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.

• Estructura del proyecto:

Ejemplo: Siga los pasos dados en Impresión en ElectronJS para configurar la aplicación electrónica básica. Copie el código estándar para el archivo main.js y el archivo index.html como se indica en el artículo. Realice también los cambios necesarios mencionados para el archivo package.json para iniciar la aplicación Electron. Continuaremos construyendo nuestra aplicación usando la misma base de código. Los pasos básicos necesarios para configurar la aplicación Electron siguen siendo los mismos. 
paquete.json: 

{
  "name": "electron-zoom",
  "version": "1.0.0",
  "description": "Zoom in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Salida: en este punto, nuestra aplicación electrónica básica está configurada. Al iniciar la aplicación, deberíamos ver el siguiente resultado: 
 

Funcionalidad de zoom en Electron: la instancia de BrowserWindow y la propiedad webContents son parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron .

• index.html : agregue el siguiente fragmento en ese archivo.

<h3>Zoom in Electron</h3>
<div>Ctrl+Scroll for Triggering Zoom Functionality</div>

• index.js : agregue el siguiente fragmento en ese archivo.

const electron = require("electron");
 
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
let win = BrowserWindow.getFocusedWindow();
 
// let win = BrowserWindow.getAllWindows()[0];
 
// If reduced below Minimum value
// Error - 'zoomFactor' must be a double greater than 0.0
win.webContents.setZoomFactor(1.0);
 
// Upper Limit is working of 500 %
win.webContents
    .setVisualZoomLevelLimits(1, 5)
    .then(console.log("Zoom Levels Have been Set between 100% and 500%"))
    .catch((err) => console.log(err));
 
win.webContents.on("zoom-changed", (event, zoomDirection) => {
    console.log(zoomDirection);
    var currentZoom = win.webContents.getZoomFactor();
    console.log("Current Zoom Factor - ", currentZoom);
    // console.log('Current Zoom Level at - '
    // , win.webContents.getZoomLevel());
    console.log("Current Zoom Level at - ", win.webContents.zoomLevel);
 
    if (zoomDirection === "in") {
       
        // win.webContents.setZoomFactor(currentZoom + 0.20);
        win.webContents.zoomFactor = currentZoom + 0.2;
 
        console.log("Zoom Factor Increased to - "
                    , win.webContents.zoomFactor * 100, "%");
    }
    if (zoomDirection === "out") {
       
        // win.webContents.setZoomFactor(currentZoom - 0.20);
        win.webContents.zoomFactor = currentZoom - 0.2;
 
        console.log("Zoom Factor Decreased to - "
                    , win.webContents.zoomFactor * 100, "%");
    }
});

A continuación se proporciona una explicación detallada de todos los eventos, métodos y propiedades de instancia utilizados en el código: 

• zoom-changed: Event Este evento de instancia de la propiedad webContents se emite cuando el usuario solicita cambiar el nivel de zoom de la página web desplazando la rueda del mouse. En Windows , esto se activa con la combinación de teclas Ctrl+Scroll . De forma predeterminada, Electron no tiene Zoom habilitado y este Evento debe agregarse explícitamente para saber si el cambio en el nivel de Zoom se activó o no. Este evento devuelve los siguientes parámetros.
  • evento: El objeto Evento global.
  • zoomDirection: String Este parámetro representa si el Desplazamiento de la rueda del mouse se inició hacia arriba, lo que significa Zoom-In o se inició hacia abajo, lo que significa Zoom-Out. Este parámetro solo puede contener dos valores, es decir, dentro o fuera, respectivamente.
• webContents.setZoomFactor(factor) Este método de instancia de la propiedad webContents cambia el factor de zoom de la página web al factor especificado. Este método de instancia determina por qué factor se debe acercar o alejar la página web. El factor de zoom es el porcentaje de zoom dividido por 100 . Por lo tanto, si el porcentaje de zoom es 100 % , el factor de zoom es 1,0 . Toma los siguientes parámetros. En el código anterior, estamos aumentando/disminuyendo el factor de zoom para cada evento de instancia con cambio de zoom emitido por 0.2 , lo que significa un 20 % de acercamiento o alejamiento.
  • factor: Doble El factor de zoom doble. De forma predeterminada, el valor se establece en 1.0 . El valor del factor siempre debe ser superior a 0,0 . En caso de que durante las operaciones de zoom, este valor sea inferior a 0,0 , se activa y se muestra un error en la consola y no se realizan más cambios en el zoom de la página web.
• webContents.getZoomFactor() Este método de instancia de la propiedad webContents devuelve un valor entero que indica el factor de zoom actual de la página web. El valor devuelto siempre será mayor que 0.0 .
  Nota : aunque no se especifica en la documentación oficial de Electron, a partir de Electron 8.3.0 , este método está en desuso . En caso de que se utilice este método, mostrará un mensaje de advertencia en la consola aunque todavía funcione. Deberíamos usar la propiedad de instancia webContents.zoomFactor en su lugar para obtener y manipular el factor de zoom de la página web. Lo mismo se ha demostrado en el código y se explica a continuación.
• webContents.setZoomLevel(nivel) Este método de instancia de la propiedad webContents cambia el nivel de zoom de la página web al nivel especificado. Este método de instancia determina en qué nivel se debe acercar o alejar la página web. Según la documentación oficial de Electron, el tamaño original es 0 y cada incremento por encima o por debajo representa un zoom un 20 % más grande o más pequeño hasta los límites predeterminados del 300 % y el 50 % del tamaño original, respectivamente. La fórmula para esto es escala := 1.2 ^ nivel . 
  Nota : este método de instancia y webContents.setZoomFactor()Método de instancia, ambos realizan las mismas manipulaciones al Zoom de los contenidos de la página web en Electron. Estos métodos de instancia simplemente toman diferentes valores en función del factor y el nivel proporcionados, respectivamente. Además , el método webContents.setZoomFactor() es más fácil de administrar y controlar. En el código anterior, hemos mostrado el factor de zoom y el nivel de zoom cada vez que se emite el evento de instancia. Además, el nivel de zoom de la página web también puede ser un valor negativo. 
  Nota : aunque no se especifica en la documentación oficial de Electron, a partir de Electron 8.3.0 , este método está en desuso. En caso de que se utilice este método, mostrará un mensaje de advertencia en la consola aunque todavía funcione. Deberíamos usar la propiedad de instancia webContents.zoomLevel en su lugar para obtener y manipular el nivel de zoom de la página web.
• webContents.getZoomLevel() Este método de instancia de la propiedad webContents devuelve un valor entero que indica el nivel de zoom actual de la página web. El valor devuelto también puede ser un valor negativo. 
  Nota : aunque no se especifica en la documentación oficial de Electron, a partir de Electron 8.3.0 , este método está en desuso . En caso de que se utilice este método, mostrará un mensaje de advertencia en la consola aunque todavía funcione. Deberíamos usar la propiedad de instancia webContents.zoomLevel en su lugar para obtener y manipular el nivel de zoom de la página web.
• win.webContents.setVisualZoomLevelLimits(mínimo, máximo) Este método de instancia de la propiedad webContents establece el límite mínimo y máximo del nivel de zoom. Como se discutió anteriormente, la funcionalidad Zoom está deshabilitada en Electron de manera predeterminada. Para habilitarlo, se utiliza este método Instancia. Devuelve una Promesa y se resuelve cuando se ha configurado correctamente el Zoom mínimo y máximo para la página web. Toma los siguientes parámetros.
  • mínimo: Entero Establece el Zoom Mínimo permitido para la página web. Este valor es el porcentaje de Zoom dividido por 100 . Por lo tanto, Zoom Porcentaje: 100 % se traduce en 1 , que se establece en este parámetro.
  • máximo: Entero Establece el Zoom Máximo permitido para la página web. Este valor es el porcentaje de Zoom dividido por 100 . Por lo tanto, Zoom Porcentaje: 500 % se traduce en 5 , que se establece en este parámetro.
• webContents.zoomFactor Esta propiedad de instancia de la propiedad webContents cambia el factor de zoom de la página web al factor especificado. Esta propiedad Instancia determina por qué factor se debe acercar o alejar la página web. El factor de zoom es el porcentaje de zoom dividido por 100 . En el código anterior, estamos aumentando/disminuyendo el factor de zoom para cada evento de instancia con cambio de zoom emitido por 0.2 , lo que significa un 20 % de acercamiento o alejamiento.
• webContents.zoomLevel Esta propiedad de instancia de la propiedad webContents cambia el nivel de zoom de la página web al nivel especificado. Esta propiedad Instancia determina en qué nivel se debe acercar o alejar la página web. Según la documentación oficial de Electron, el tamaño original es 0 y cada incremento por encima o por debajo representa un zoom un 20 % más grande o más pequeño hasta los límites predeterminados del 300 % y el 50 % del tamaño original, respectivamente. La fórmula para esto es escala := 1.2 ^ nivel .

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos de los métodos estáticos proporcionados por el objeto BrowserWindow . 

• BrowserWindow.getAllWindows(): este método devuelve una array de instancias de BrowserWindow activas/abiertas. En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente desde la array como se muestra en el código.
• BrowserWindow.getFocusedWindow(): este método devuelve la instancia de BrowserWindow que está enfocada en la aplicación. Si no se encuentra ninguna instancia de BrowserWindow actual, devuelve nulo . En esta aplicación, solo tenemos una instancia de BrowserWindow activa y se puede hacer referencia directamente mediante este método, como se muestra en el código.

En este punto, deberíamos poder acercar y alejar con éxito los contenidos de BrowserWindow en Electron. 
Producción: