Shift 多选功能之热键冲突 Issue

最近给我们的 Plait 框架支持了 Shift 选择图形的功能，以前的框选只能选择相邻的图形，支持完 Shift 选择后就可以隔着图形选择了，如下所示：

在做这个需求是的时候最开始是这么写的（代码片段）：

board.keydown = (event: KeyboardEvent) => {
  if (!isShift && event.key === 'Shift') {
    isShift = true;
  }
  keydown(event);
}

board.keyup = (event: KeyboardEvent) => {
  if (isShift && event.key === 'Shift') {
    isShift = false;
  }
  keyup(event);
};

监控 keydown 和 keyup 维护一个 isShift 状态，这个思路也很常见。

这个写法有一些问题，就是有时会出现 isShift 状态不正确，明明 shift 键已经 up 了，但是 isShift 却没有更新为 false，还是不稳定复现。

我自己也遇到了这个问题，最终根据场景找到了原因，是因为热键冲突，当我按 Shift+Common+5 触发我本机的截图热键后，浏览器就不触发 keyup 事件了，所以导致 isShift 状态错误。

方案更正

不再使用 keydown、keyup 维护 isShfit 状态，而是基于鼠标事件维护 isShift 状态（通常 isShift 状态的使用都在鼠标事件之后）：

if (!isShift && event.shiftKey) {
  isShift = true;
}
if (isShift && !event.shiftKey) {
  isShift = false;
}

代码仓储：github.com/worktile/pl…

功能体验：plait-gamma.vercel.app/?init=draw

原文链接：https://juejin.cn/post/7317463986014765093 作者：pubuzhixing