Ventana de clic 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.

En una aplicación de escritorio compleja, puede ocurrir una situación en la que los desarrolladores tengan que congelar la ventana actual o una región de la ventana actual que se muestra al usuario. En tales casos, la ventana se vuelve estática y el usuario no podrá realizar ninguna operación de ventana como cerrar, minimizar, maximizar, etc. en la ventana y permanecerá abierta en la pantalla. Esto significa que la ventana o la región de la ventana se vuelve ajena a cualquier evento de mouse que pueda ocurrir en ella. Este comportamiento puede parecer familiar para deshabilitar los clics de botón usando HTML, CSS y JavaScript, pero la diferencia crucial aquí es que la ventana o la región de la ventana deja de responder a todos los eventos del mouse, incluidos los movimientos del mouse sobre esa región. Esta ventana se conoce como ventana de destino.. Electron nos proporciona una forma mediante la cual podemos crear o convertir una ventana existente en una ventana Click-Through usando los métodos de Instancia del objeto BrowserWindow . Este tutorial demostrará cómo crear una Ventana Click-Through 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 Cómo encontrar texto en una página 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. Además, realice 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-clickthrough",
  "version": "1.0.0",
  "description": "Click-Through Window in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

Producción:

Click-Through Window en Electron: la instancia de BrowserWindow es parte del proceso principal . Para importar y usar BrowserWindow en el proceso Renderer , usaremos el módulo remoto Electron . Como se mencionó anteriormente, una ventana Click-Through ignora todos los eventos del mouse que ocurren en ella. Para salir de la ventana Click-Through, debemos finalizar la instancia de BrowserWindow o cerrar la tarea. 

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

<h3>Click-Through Window in Electron</h3>
  <button id="disable">
      Disable Mouse Events on Current Window
  </button>
  <br><br>
  <button id="forward">
      Forwarding Mouse Events
  </button>
<!-- Adding Individual Renderer Process Script File  -->   
<script src="index.js"></script>

• index.js : los botones Deshabilitar eventos del mouse en la ventana actual y Reenviar eventos del mouse aún no tienen ninguna funcionalidad asociada. Para cambiar esto, agregue el siguiente código en el  archivo index.js

const electron = require('electron')
// Import BrowserWindow using Electron remote
const BrowserWindow = electron.remote.BrowserWindow;
  
const win = BrowserWindow.getFocusedWindow();
// let win = BrowserWindow.getAllWindows()[0];
  
var disable = document.getElementById('disable')
disable.addEventListener('click', (event) => {
    win.setIgnoreMouseEvents(true);
});
  
var forward = document.getElementById('forward');
forward.addEventListener('mouseenter', () => {
    console.log('Mouse Entered the Region...Disabling Click')
    win.setIgnoreMouseEvents(true, { forward: true });
});
  
forward.addEventListener('mouseleave', () => {
    console.log('Mouse Left the Region...Event Emitted')
    win.setIgnoreMouseEvents(false);
});

Explicación: Para crear una ventana Click-Through simple en Electron, usamos el método de instancia win.setIgnoreMouseEvents(ignore, options) del objeto BrowserWindow . Llamar a este método Instance en el objeto BrowserWindow hace que la ventana no tenga en cuenta todos los EventEmitters del mouse.. Este método no tiene un tipo de devolución. Todos los eventos del mouse que ocurran en esta ventana ahora se pasarán a la ventana o al contenido que se encuentra debajo de esta ventana, pero si esta ventana Click-Through tiene el foco, seguirá recibiendo los eventos del teclado que ocurran en ella. Antes de analizar los parámetros que se pasan a este método de instancia, hay una función adicional para la ventana Click-Through que solo es compatible con el sistema operativo Windows. 
Como se mencionó anteriormente, una ventana Click-Through no tiene en cuenta todos los eventos del mouse, incluidos los movimientos del mouse sobre esa ventana o esa región de la ventana. En el sistema operativo Windows , podemos pasar opciones adicionales: parámetro de objeto a este método de instancia que se puede usar para reenviarmensajes del mouse a la página web, lo que permite que los eventos de movimiento del mouse, como mouseleave y mouseenter , se emitan en la instancia de BrowserWindow . Este concepto se conoce como reenvío y se vuelve útil en una situación en la que queremos hacer clic en solo una parte de la ventana y no en toda la instancia de BrowserWindow . Esto ayuda a los desarrolladores a tener un control más granular sobre la ventana o las regiones de la ventana. En este tutorial, hemos aplicado el reenvío a los eventos del mouse de reenvíobotón. Por lo tanto, los eventos de movimiento del mouse se aplicarán sobre este botón, pero el botón en sí seguirá sin responder al clic del mouse. En palabras más simples, esto hace que la página web haga clic en el botón HTML, pero vuelve a la normalidad fuera de él. Consulte la Salida para una mejor comprensión. Al hacer clic en el botón Deshabilitar eventos del mouse en la ventana actual , la instancia actual de BrowserWindow se convierte en una ventana Click-Through. 
El método de instancia win.setIgnoreMouseEvents(ignore, options) del objeto BrowserWindow acepta los siguientes parámetros. 

• ignore: booleano Este parámetro convierte a la ventana en una ventana de destino.
• opciones: Objeto (opcional) Este parámetro solo se admite en Windows . Este parámetro es un parámetro opcional y es responsable del Reenvío como se discutió anteriormente. Toma los siguientes parámetros.
  • adelante: booleano (opcional) Este parámetro se establece en verdadero , reenvía los mensajes de movimiento del mouse a Chromium, lo que permite que se emitan eventos relacionados con el movimiento del mouse, como mouseenter y mouseleave . Este parámetro solo se puede usar cuando el parámetro ignore se establece en true . Si el parámetro ignorar es falso , el reenvío siempre está deshabilitado independientemente de este valor.

Para obtener la instancia actual de BrowserWindow en el proceso Renderer , podemos usar algunos 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 a ella directamente mediante este método, como se muestra en el código. 
   

Producción: