Implementation of clicking through the transparent area of ​​​​irregular forms in Electron

Implementing an irregular form

Here we implement a circular form. The implementation of forms of other shapes is similar to this method.

First, change the window's height and width to the same value to make the window a square.

Secondly, set the transparent property of the window to true. After this setting, the window is still square, but as long as we control the shape of the Dom element in the content area, we can make the window look like an irregular shape.

Irregular windows often require custom borders and title bars, so frame is also set to false.

Additionally, transparent windows are not resizable. So set the resizable property to false.

After the window is displayed, in order to prevent the maximize event from being triggered by double-clicking the draggable area of ​​the window, we also set the maximizable property to false.

The final code to create the window is as follows:

win = new BrowserWindow({
        width: 380,
        height: 380,
        transparent: true,
        frame: false,
        resizable: false,
        maximizable: false,
        //...
})

Next, modify the style to make the Dom element in the content area appear as a circle:

html,body { 
  margin: 0px; 
  padding: 0px; 
  pointer-events: none;
}
#app {
 box-sizing: border-box;
 width: 380px; 
 height: 380px;
 border-radius: 190px;
 border: 1px solid green;
 background: #fff;
 overflow: hidden;
 pointer-events: auto;
}

In the above style code, the #app element is set to a circle through the border-radius style. border-radius is responsible for defining the rounded corner style of an element. If the rounded corner is large enough, the entire DIV becomes a circle.

The pointer-events style will be explained later.

The final window interface is shown in Figure 5-7:

If you have a little knowledge of CSS, you will know that in addition to the circle, you can also control this window to become any other shape through CSS style.

Click through transparent areas

There is a small problem with the application above. Although the window looks round, it is actually a square window. The only difference is that the four corners of the square are transparent, so it looks like a round window.

When I click on the text file in area ① in the picture below, the mouse click event still occurs in this window, and does not click on the file.

As developers, we understand why this works, but as a user, it feels weird. In order to achieve a better user experience, we need to allow the mouse to penetrate the window and land on the content behind the window when clicking in these four areas.

The official Electron documentation clearly states that "you cannot click through transparent areas", which doesn't bother us. There is a little trick to solve this problem.

First, you need to use the setIgnoreMouseEvents method of the window object, which allows the window to ignore all mouse events within the window, and all mouse events occurring in this window will be passed to the content behind this window.

If the forward parameter is passed when calling this method, such as:

setIgnoreMouseEvents(true, { forward: true }),

Then only click events will penetrate the window, and mouse movement events will still be triggered.

Based on this, we execute the following code in the page:

const remote = require("electron").remote;
  let win = remote.getCurrentWindow();
  window.addEventListener("mousemove", event => {
  let flag = event.target === document.documentElement;
  if (flag){
     win.setIgnoreMouseEvents(true, { forward: true });
  } 
  else {
    win.setIgnoreMouseEvents(false);
  }
  });
  win.setIgnoreMouseEvents(true, { forward: true });

Note that this is experimental code, so the remote module is used. Regarding some issues with the remote module, I have described it in detail in "Why the Electron team wants to get rid of the remote module".

In the above code, the window object is set to listen to the mousemove event. When the mouse moves into the circular content area of ​​the window, the mouse event is not allowed to penetrate. When the mouse moves into the transparent area, mouse events are allowed to pass through.

Next, we add the style pointer-events: none to the html and body elements, and pointer-events: auto to the #app element.

After setting pointer-events: none, the element it marks will never become the target of mouse events.

The pointer-events: auto is set for the child element #app, which means that the child element #app can still become the target of mouse events.

That is to say, except for the circular area, the other parts will no longer receive mouse events.

When the mouse moves outside the circular area, the mousemove event of the window object is triggered, and event.target is the document.documentElement object (this event is not triggered on the html or body element, but on the window object. Document.documentElement is the root element in the DOM tree, that is, the element represented by the html node).

At this point, the judgment in the above code is established. When the mouse moves in the four areas mentioned above, the mouse event allows penetration. When the mouse moves within the circular area, mouse events are not allowed to penetrate.

At this point, the above judgment is established. Run the program, click the mouse in the four corners of the square, and the mouse event has a penetration effect.

This is the end of this article about how to use Electron to click through the transparent area of ​​an irregular window. For more information about Electron click through, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!