vscode界面渲染流程

• 各部分的职责是什么？

整体渲染逻辑

shell.ts -> workbeanch.ts (所有渲染逻辑在workbeanch.ts中非常清晰)

shell.ts中操作变更lifecycle

职责

• main.ts
  • 职责是什么？
• shell.ts
  • 职责是什么？
  • Workbench
  • ElectronWindow？
• workbeanch.ts
  • 职责是什么？
    • 所有browser的services初始化
    • 整个界面的各部分渲染的控制
• window.ts?
  • 
    

lifecycle

src/vs/workbench/electron-browser/shell.ts

startup 是启动函数

• startup()
  • createWorkbench
  • …
  • initServices
  • …
  • renderWorkbench
  • …
  • restorePart(恢复之前的状态)
    • Restore editor
    • Restore sidebar

renderWorkbench

parts是各个区块，渲染都是执行part.create(container) 来渲染各区块

private renderWorkbench() : void {
    this.createTitlebarPart();
  this.createHeaderbarPart();
  this.createActivityBarPart();
  this.createSidebarPart();
  this.createEditorPart();
  this.createPanelPart();
  this.createStatusbarPart();
}
private createEditorPart(): void {
      // 创建一个供渲染的dom
    const editorContainer = this.createPart(Identifiers.EDITOR_PART, ['part', 'editor'], 'main');
    this.editorPart.create(editorContainer);
    }

Part.create

• Part是个抽象类，子类必须实现抽象方法，createTitleArea，createContentArea
• CompositePart
• SidebarPart

左侧如何激活的

// workbench.ts
// workbench.view.explorer
this.viewletService.openViewlet(viewletIdToRestore)
// viewletService.ts
this.sidebarPart.openViewlet(id, focus)
// sidebar.ts
this.openComposite(id, focus) as Viewlet
//

service和part

两者也没啥区别，貌似都是service?

• editor
  • editorService
  • editorPart
• storageService
• sidebar
  • viewletService
  • SidebarPart
• panel
  • panelPart
  • panelRegistry
  • 
    

restore部分的promise

保存内容

• storage

看分层和职责(从左侧树渲染)

左侧的一个栏是一个viewlet，有explorerViewlet，还有搜索栏，git栏等

• viewletService

  • 主要是调用sidebarPart提供的服务，对左侧的sidebar进行管理

• listService

  • lastFocusedList

• CompositePart 重要 职责？

  • 将左侧的几个viewLet都管理其中，调用openComposite展示时才去创建
  • 注册了id和类的映射，通过id初始化菜单
  • PanelPart和SidebarPart都继承自此类
  • activeComposite
  • createComposite
  • showComposite
  • doOpenComposite

• sidebarPart extends CompositePart 是什么？职责？管理了左侧的

  • 管理viewLet的？即整个sidebar

• explorerViewlet 负责什么？职责？

  • 如何看，看怎么被执行的，如何初始化和使用explorerView的
  • actionRunner
  • viewletState?
    • 对象有要不
  • fileViewletState
• explorerView 负责管理文件和树
  • 作为右侧editorService和workBenchTree的粘合者
    • 如监听editorService的文件切换，指挥tree变更
    • 如workBenchTree的点击，指挥右侧editorService打开文件
  • 初始化时文件菜单的展开
• workBenchTree 左侧的文件树(负责渲染，提供操作的方法)

已经打开的文件信息

viewLet

• ExplorerViewlet, ExtensionViewLet
• ViewContainerViewlet
• PanelViewlet