Click-Through Transparent Windows [resolved]

[lurein]

I thought I'd post a solution to this problem since it took me a while to figure out, but adds so much utility. The idea here is that you can create transparent windows that are click-through, so where you have an element that element can be clicked on, but say it's just empty window space, the user can click on what's under the window successfully.

This enables powerful overlays to be built on this framework. Here's how to do it.

In your main/index.js

when creating browser window, add:

frame: false,
transparent: true

In your Component.vue

created () {
      var t
      var setIgnoreMouseEvents = this.$electron.remote.getCurrentWindow().setIgnoreMouseEvents
      window.addEventListener('mousemove', event => {
        if (event.target === document.documentElement) {
          setIgnoreMouseEvents(true, {forward: true})
          if (t) clearTimeout(t)
          t = setTimeout(function () {
            setIgnoreMouseEvents(false)
          }, 150)
        } else setIgnoreMouseEvents(false)
      })
    },

and

<style>
html, body{
  background-color: transparent!important;
  border-color: transparent!important;
}
body {pointer-events: none}
* {pointer-events: all;}
.draggable {-webkit-app-region: drag;}
</style>

and there you have it! Your elements are clickable but the empty space is click-through!