VSCode源码分析 - 主要窗口

目录

主要窗口

workbench.ts中startup里面Workbench负责创建主界面 src/vs/workbench/browser/workbench.ts

  1. startup(): IInstantiationService {
  2.     try {
  4.         ...
  6.         instantiationService.invokeFunction(async accessor => {
  8.             // 渲染主工作界面
  9.             this.renderWorkbench(instantiationService, accessor.get(INotificationService) as NotificationService, storageService, configurationService);
  11.             // 界面布局
  12.             this.createWorkbenchLayout(instantiationService);
  14.             // Layout
  15.             this.layout();
  17.             // Restore
  18.             try {
  19.                 await this.restoreWorkbench(accessor.get(IEditorService), accessor.get(IEditorGroupsService), accessor.get(IViewletService), accessor.get(IPanelService), accessor.get(ILogService), lifecycleService);
  20.             } catch (error) {
  21.                 onUnexpectedError(error);
  22.             }
  23.         });
  25.         return instantiationService;
  26.     } catch (error) {
  27.         onUnexpectedError(error);
  29.         throw error; // rethrow because this is a critical issue we cannot handle properly here
  30.     }
  31. }

渲染主工作台，渲染完之后加入到container中，container加入到parent, parent就是body了。

this.parent.appendChild(this.container);

  1. private renderWorkbench(instantiationService: IInstantiationService, notificationService: NotificationService, storageService: IStorageService, configurationService: IConfigurationService): void {
  3.         ...
  5.         //TITLEBAR_PART 顶部操作栏
  6.         //ACTIVITYBAR_PART 最左侧菜单选项卡
  7.         //SIDEBAR_PART 左侧边栏，显示文件，结果展示等
  8.         //EDITOR_PART 右侧窗口，代码编写,欢迎界面等
  9.         //STATUSBAR_PART 底部状态栏
  10.         [
  11.             { id: Parts.TITLEBAR_PART, role: 'contentinfo', classes: ['titlebar'] },
  12.             { id: Parts.ACTIVITYBAR_PART, role: 'navigation', classes: ['activitybar', this.state.sideBar.position === Position.LEFT ? 'left' : 'right'] },
  13.             { id: Parts.SIDEBAR_PART, role: 'complementary', classes: ['sidebar', this.state.sideBar.position === Position.LEFT ? 'left' : 'right'] },
  14.             { id: Parts.EDITOR_PART, role: 'main', classes: ['editor'], options: { restorePreviousState: this.state.editor.restoreEditors } },
  15.             { id: Parts.PANEL_PART, role: 'complementary', classes: ['panel', this.state.panel.position === Position.BOTTOM ? 'bottom' : 'right'] },
  16.             { id: Parts.STATUSBAR_PART, role: 'contentinfo', classes: ['statusbar'] }
  17.         ].forEach(({ id, role, classes, options }) => {
  18.             const partContainer = this.createPart(id, role, classes);
  20.             if (!configurationService.getValue('workbench.useExperimentalGridLayout')) {
  21.                 // TODO@Ben cleanup once moved to grid
  22.                 // Insert all workbench parts at the beginning. Issue #52531
  23.                 // This is primarily for the title bar to allow overriding -webkit-app-region
  24.                 this.container.insertBefore(partContainer, this.container.lastChild);
  25.             }
  27.             this.getPart(id).create(partContainer, options);
  28.         });
  30.         // 将工作台添加至container dom渲染
  31.         this.parent.appendChild(this.container);
  32.     }

workbench最后调用this.layout()方法，将窗口占据整个界面，渲染完成

  1. layout(options?: ILayoutOptions): void {
  2.         if (!this.disposed) {
  3.             this._dimension = getClientArea(this.parent);
  5.             if (this.workbenchGrid instanceof Grid) {
  6.                 position(this.container, 0, 0, 0, 0, 'relative');
  7.                 size(this.container, this._dimension.width, this._dimension.height);
  9.                 // Layout the grid widget
  10.                 this.workbenchGrid.layout(this._dimension.width, this._dimension.height);
  11.             } else {
  12.                 this.workbenchGrid.layout(options);
  13.             }
  15.             // Emit as event
  16.             this._onLayout.fire(this._dimension);
  17.         }
  18.     }