Lumino 的应用骨架：Application + 菜单 / 工具栏 / 右键菜单

 1import { CommandRegistry } from '@lumino/commands';
 2import { DockPanel, Widget } from '@lumino/widgets';
 3import { Application } from '@lumino/application';
 4
 5// 1. 定义一个简单的 Shell（内部有一个 DockPanel）
 6class SimpleShell extends Widget {
 7  readonly dock: DockPanel;
 8
 9  constructor() {
10    super();
11    this.addClass('my-SimpleShell');
12
13    this.dock = new DockPanel();
14    this.dock.id = 'main-dock';
15
16    // 把 dock 的 DOM 挂到 shell 的 node 上
17    this.node.appendChild(this.dock.node);
18  }
19}
20
21// 2. 定义 Application，指定 Shell 和 CommandRegistry
22class SimpleApplication extends Application<SimpleShell> {
23  constructor(options: Application.IOptions<SimpleShell>) {
24    super(options);
25  }
26}
27
28// 3. 启动应用
29const commands = new CommandRegistry();
30const shell = new SimpleShell();
31
32const app = new SimpleApplication({
33  shell,
34  commands,
35});
36
37window.addEventListener('load', () => {
38  app.start(); // 挂载并启动整个应用
39});

 1import { CommandRegistry } from '@lumino/commands';
 2import { Menu, MenuBar } from '@lumino/widgets';
 3
 4const commands = new CommandRegistry();
 5
 6commands.addCommand('file:new', {
 7  label: 'New File',
 8  execute: () => {
 9    console.log('New file');
10  },
11});
12
13commands.addCommand('file:open', {
14  label: 'Open File',
15  execute: () => {
16    console.log('Open file');
17  },
18});
19
20// 创建一个“文件”菜单
21const fileMenu = new Menu({ commands });
22fileMenu.title.label = 'File';
23fileMenu.addItem({ command: 'file:new' });
24fileMenu.addItem({ command: 'file:open' });
25
26// 创建菜单栏并挂上去
27const menuBar = new MenuBar();
28menuBar.addMenu(fileMenu);
29
30document.body.appendChild(menuBar.node);

 1import { CommandRegistry } from '@lumino/commands';
 2import { ContextMenu } from '@lumino/widgets';
 3
 4const commands = new CommandRegistry();
 5
 6commands.addCommand('editor:copy', {
 7  label: 'Copy',
 8  execute: () => {
 9    console.log('Copy!');
10  },
11});
12
13const contextMenu = new ContextMenu({ commands });
14
15// 针对特定区域注册右键菜单项
16contextMenu.addItem({
17  command: 'editor:copy',
18  selector: '.my-Editor',
19  rank: 1,
20});
21
22// 全局监听 contextmenu 事件
23window.addEventListener('contextmenu', event => {
24  contextMenu.open(event);
25});

 1import { CommandRegistry } from '@lumino/commands';
 2import { Panel, Widget } from '@lumino/widgets';
 3
 4class CommandButton extends Widget {
 5  constructor(
 6    private commands: CommandRegistry,
 7    private commandId: string
 8  ) {
 9    super({ node: document.createElement('button') });
10    this.addClass('my-CommandButton');
11  }
12
13  protected onAfterAttach(msg: any): void {
14    this._render();
15    this.node.addEventListener('click', this);
16  }
17
18  protected onBeforeDetach(msg: any): void {
19    this.node.removeEventListener('click', this);
20  }
21
22  handleEvent(event: Event): void {
23    if (event.type === 'click') {
24      void this.commands.execute(this.commandId);
25    }
26  }
27
28  private _render(): void {
29    const label = this.commands.label(this.commandId) ?? this.commandId;
30    (this.node as HTMLButtonElement).textContent = label;
31    (this.node as HTMLButtonElement).disabled = !this.commands.isEnabled(this.commandId);
32  }
33}
34
35// 工具栏容器
36const toolbar = new Panel();
37toolbar.id = 'main-toolbar';
38
39toolbar.addWidget(new CommandButton(commands, 'file:new'));
40toolbar.addWidget(new CommandButton(commands, 'file:open'));