Sin
In a
Nutshell
Electron 无边框窗口的拖动

Electron 无边框窗口的拖动

February 26, 2018 /专业打杂一百年

操作系统原生的窗口样式中规中矩,看久了却难免会有些厌烦。所以在使用 electron 创建桌面应用的时候,有时候我们希望能完全掌控窗口的样式,而隐藏掉系统提供的窗口边框和标题栏等。

通过在创建窗口的时候,指定{frame:false}{titleBarStyle: 'hidden'}(macOS only)即可达到隐藏边框的效果,甚至可以通过 {transparent:true}来指定窗口透明,创建异形的窗口呈现。具体可见官方文档,这里不再赘述。

一个值得一提的问题是窗口的拖动。因为没有标题栏,所以需要自行实现窗口的拖动区域,否则就没法移动窗口位置了。可能的实现方案有下面几种:

方案一: -webkit-app-region: drag;

官方文档里有详细说明:

默认情况下, 无框窗口是 non-draggable 的。 应用程序需要指定 `-webkit-app-region: drag` 在 CSS 中告诉Electron哪个区域是可拖拽的 (像 OS 的标准标题栏), 并且应用程序也可以使用 `-webkit-app-region: no-drag` 来排除 draggable region 中的 non-draggable 区域。 请注意, 当前只支持矩形形状。

要使整个窗口可拖拽, 您可以添加 `-webkit-app-region: drag` 作为 `body` 的样式:

<body style="-webkit-app-region: drag"></body>

请注意, 如果您已使整个窗口draggable, 则必须将按钮标记为 non-draggable, 否则用户将无法单击它们:

button {  -webkit-app-region: no-drag; }

如果你设置自定义标题栏为 draggable, 你也需要标题栏中所有的按钮都设为 non-draggable。

试下来拖拽效果很完美。但是,文档后面提到了这种方法较为致命的一个问题:

在某些平台上, 可拖拽区域将被视为 non-client frame, 因此当您右键单击它时, 系统菜单将弹出。 要使上下文菜单在所有平台上都正确运行, 您永远也不要在可拖拽区域上使用自定义上下文菜单。

不仅右键菜单,设置了这个样式的元素几乎无法响应所有的鼠标事件,包括点击、拖拽等。如果需要拖拽整个窗口,就相当尴尬了。

方案二:通过响应页面的 mousemove 事件

既然我们需要页面能够响应鼠标事件,那能不能就通过鼠标事件去解决问题呢?这是作为一名前端开发人员很容易想到的方案:通过网页的 mousemove 事件,我们可以得知当前鼠标在网页上的坐标,并与上一次的坐标进行比较,得出鼠标的位移数值。

然后,我们可以通过当前 electron 窗口上的 getPosition 方法获取窗口当前位置,加上鼠标位移得出新的位置,然后通过 setPosition 方法手动移动窗口,达到拖动的效果。

是不是看上去很美?很可惜不能高兴得太早。网页上的两次 mousemove 事件之间有一定时间间隔,这个间隔对于桌面客户端编程来说有点太长了。这就导致在性能比较差的情况下,有可能出现这样的情况:鼠标移动过快,移出了窗口的范围,而下一次 mousemove 还没来得及触发。这样窗口就跟不上鼠标,“掉下来”了……

方案三:electron-drag

在一度绝望的时候,发现了 electron-drag 这个库和它天才的想法:通过一个原生 Node.js 模块,跟踪鼠标在整个屏幕上的位移,然后手动设置窗口的位置。

这个库只在 Windows 和 macOS 下可用,不支持 Linux。因此,在不支持的平台上,需要使用方案一或者方案二进行容。

一个小插曲

在 Windows 上引用 electron-drag 时可能会抛出 Uncaught Error: A dynamic link library (DLL) initialization routine failed 的错误(macOS 上暂未遇到,不确定是否也有)。这是因为该库使用 win-mouseosx-mouse 这两个原生模块进行鼠标位置的追踪,而 electron 和系统中安装的 Node.js 程序头文件未必相同,要使用原生模块必须使用正确版本的头文件进行编译。解决方式是安装 electron-rebuild 重新编译对应的模块。Windows 下的操作如下:

electron-rebuild -f -w win-mouse

最后上代码(TypeScript):

export function makeDraggable(el: HTMLElement | string) {
    if (typeof el === 'string') { el = document.querySelector(el) as HTMLElement; }
    try {
        const drag = require('electron-drag');
        if (drag.supported) {
            drag(el);

        } else {
            makeDraggableFallback(el);
        }
    } catch (ex) {
        makeDraggableFallback(el);
    }
}

function makeDraggableFallback(el: HTMLElement) {
    // 方案一
    // el.style['-webkit-app-region'] = 'drag';

    // 方案二
    let dragging = false;
    let mouseX = 0;
    let mouseY = 0;
    el.addEventListener('mousedown', (e) => {
        dragging = true;
        const { pageX, pageY } = e;
        mouseX = pageX;
        mouseY = pageY;
    });
    window.addEventListener('mouseup', () => {
        dragging = false;
    });
    window.addEventListener('mousemove', (e: MouseEvent) => {
        if (dragging) {
            const { pageX, pageY } = e;
            const win = require('electron').remote.getCurrentWindow();
            const pos = win.getPosition();
            pos[0] = pos[0] + pageX - mouseX;
            pos[1] = pos[1] + pageY - mouseY;
            win.setPosition(pos[0], pos[1], true);
        }
    });
}