Shfit 多选功能之热键冲突 Issue

pubuzhixing2023-12-28 19:32

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

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

ini 复制代码

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 维护一个 isShfit 状态，这个思路也很常见。

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

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

方案更正

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

ini 复制代码

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

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

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