Babylon 编辑器快捷键小记

一、最终代码(带满屏注释)

TypeScript 复制代码
// Babylon.js 键盘事件枚举
import { KeyboardEventTypes } from "@babylonjs/core";
// 全局事件总线(mitt)
import { emitter } from "../../utils/EventBus";
// 编辑器系统,内部有 keyboardController
import type { EditorSystem } from "../EditorSystem";

/**
 * 快捷键管理器
 * 职责:
 * 1. 监听键盘事件
 * 2. 根据规则分发事件到 EventBus
 * 3. 支持单键 & Ctrl+? 组合键
 */
export class ShortCutsManager {
  // 编辑器引用,主要用来拿 keyboardController
  private _editorSystem: EditorSystem;

  /**
   * 单键映射
   * key -> EventName
   */
  private _shortcutDictionary: ShortcutDictionary = {
    q: "selectMode",
    w: "moveMode",
    e: "rotateMode",
    r: "scaleMode",
    delete: "openDeleteConfirm"
  };

  /**
   * Ctrl+? 组合键映射
   * 仅记录"字母部分",判断时再加前缀 "Control"
   */
  private _ctrlShortcutDictionary: ShortcutDictionary = {
    s: "saveScene", // Ctrl+S
    o: "openScene", // Ctrl+O
    n: "newScene",  // Ctrl+N
    z: "undo",      // Ctrl+Z
    y: "redo"       // Ctrl+Y
  };

  constructor(editorSystem: EditorSystem) {
    this._editorSystem = editorSystem;
    this._init();
  }

  /** 初始化:注册键盘事件 */
  private _init(): void {
    const keyboardController = this._editorSystem.keyboardController;
    if (!keyboardController) {
      console.error("GlobalKeyboardController is not initialized.");
      return;
    }

    // 监听所有 KEYDOWN 事件
    keyboardController.addListener(KeyboardEventTypes.KEYDOWN, () => {
      // 当前按下的单个字符(已转成小写)
      const onlyKey = keyboardController.pressedSingleNormalKey?.trim().toLowerCase();
      if (!onlyKey) return; // 没按字符键直接返回

      // ---------- 组合键优先 ----------
      if (keyboardController.isModifierKeysCombined(["Control"])) {
        const eventName = this._ctrlShortcutDictionary[onlyKey];
        if (eventName) {
          emitter.emit(eventName);
          return; // 命中组合键后不再走单键
        }
      }

      // ---------- 单键 ----------
      const eventName = this._shortcutDictionary[onlyKey];
      if (eventName) {
        emitter.emit(eventName);
      }
    });
  }
}

/** 字典类型:string -> string */
interface ShortcutDictionary {
  [key: string]: string;
}

二、怎么用

任意地方监听

TypeScript 复制代码
import { emitter } from '@/utils/EventBus';

emitter.on('undo', () => console.log('撤销'));
emitter.on('saveScene', () => scene.save());
相关推荐
learning_tom21 小时前
收藏!VSCode 开发者工具快捷键大全
ide·vscode·编辑器
薛定谔的幸运猫2 天前
图像描述编辑器 (Image Caption Editor)
编辑器
青草地溪水旁2 天前
烦人的Nano 编辑器,如何退出呢?
编辑器·nano
无痕melody2 天前
飞牛nas修改crontab计划默认编辑器
运维·编辑器
Rudon滨海渔村2 天前
vscode优化合集 - Visual Studio Code
ide·vscode·编辑器
来一碗刘肉面2 天前
vscode克隆远程代码步骤
ide·vscode·编辑器
txwtech4 天前
vscode修改插件默认安装目录
ide·vscode·编辑器
奥特曼狂扁小怪兽4 天前
Qt节点编辑器设计与实现:动态编辑与任务流可视化(一)
开发语言·qt·编辑器
奥特曼狂扁小怪兽4 天前
深入解析Qt节点编辑器框架:交互逻辑与样式系统(二)
qt·编辑器·交互