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);
    }
  });
}