快捷键功能

好用的按键响应库

使用 hotkeys-js 库来兼容 mac、windows 的键盘快捷键。封装一个基础 hooks 如下

import hotkeys, { KeyHandler } from 'hotkeys-js';
import { useEffect } from 'react';
const useHotKey = (keys: string, callback: KeyHandler) => {
  useEffect(() => {
    hotkeys(keys, callback);
    return () => hotkeys.unbind(keys, callback);
  }, [keys, callback]);
};
export default useHotKey;

快捷键操作

元素选择

前提都是在元素被选中的情况

• ⌘C / Ctrl+C 新建当前选择的元素的一个数据结构
• ⌘V / Ctrl+V 将新建的元素添加到 components 数组中
• Backspace / Delete 在 components 数组中删除选择的元素
• ESC currentElement 设置为空

元素移动

• 上下左右移动一像素 - ↑ ↓ → ← ： 更新选中元素 props 的 top/left 值
• 上下左右移动十像素 - Shift + ↑ ↓ → ←：更新选中元素 props 的 top/left 值

撤销/重做

• 撤销 - ⌘Z / Ctrl+Z
• 重做 - ⌘⇧Z / Ctrl+Shift+Z

插件化

export default function InitHotKeys() {
  const { dispatch } = useContext<IContextProps>(AppContext);
  useHotKey('ctrl+c, command+c', () => {
    dispatch({
      type: COPYCOMPONENT,
    });
  });
  // ....
}

如上我们实现了复制的功能、实际还是调用自定义的 Redux 方法、其他都是一样的操作。然后我们只需要在 main 直接调用自定义的hooks 即可 😌