3.4.5 • Published 8 months ago

@opensumi/ide-main-layout v3.4.5

Weekly downloads
-
License
MIT
Repository
github
Last release
8 months ago

id: main-layout

title: 布局模块

main-layout 模块负责 IDE 的基础布局划分,将整个窗口划分为形如left、main、bottom的若干块区域,我们定义这种区域为插槽。在布局划分之后,又通过提供的插槽渲染器组件来消费注册到插槽的若干个大视图。在如左侧边栏这类特殊的插槽中,一个大的视图(称为视图容器)还可以支持注册多个小的子视图。所以最终整个布局和 React 视图组件的一个组织关系为

布局与视图的组织关系

我们注册的视图最终会落到视图容器或子视图内。每个视图会通过 ContextProvider 注入全局的 DI 实例,视图内通过 useInjectable 方法就可以拿到各个类的实例。

贡献点

Contribution Providers

模块定义的用于其他模块贡献的贡献点。

ComponentContribution

用于向 ComponentRegistry 注册视图信息的贡献点,注册的视图信息会被关联到对应的Token(一般约定为包名)内,通过配置 LayoutConfig 进行消费。

Example
// 关联视图信息到token
registerComponent(registry: ComponentRegistry) {
  registry.register('@opensumi/ide-debug-console', {
    id: DEBUG_CONSOLE_VIEW_ID,
    component: DebugConsoleView,
  }, {
    title: localize('debug.console.panel.title'),
    priority: 8,
    containerId: DEBUG_CONSOLE_CONTAINER_ID,
    iconClass: getIcon('debug'),
  });
}
// 映射token到视图Slot
const LayoutConfig = {
  [SlotLocation.left]: {modules: ['@opensumi/ide-debug-console']}
}

SlotRendererContribution

TODO

TabBarToolbarContribution

TODO

Contributions

模块注册的贡献点。

Command

  • main-layout.left-panel.toggle: 切换左侧面板
  • main-layout.right-panel.toggle: 切换右侧面板
  • main-layout.bottom-panel.toggle: 切换底部面板
  • main-layout.bottom-panel.expand: 最大化底部面板
  • main-layout.bottom-panel.shrink: 最小化底部面板

Preference

KeyBinding

  • ctrlcmd+b: 切换左面板
  • ctrlcmd+j: 切换底部面板

Menu

TODO: 不被依赖,是否有必要列出来?

  • view.outward.right-panel.hide: 隐藏右侧面板

ClientAppConfig

这个不能算贡献点,但是很重要,放哪里比较好?

  • defaultPanels: 侧边栏、底部栏默认展开的面板

LayoutService

DI token: IMainLayoutService

布局模块最上层的控制服务。

Static Methods

test()

static test(
  text: string,
  delimiter?: string
): ContentState

这是一个测试的静态方法(LayoutService没有静态方法,先做个示例).

Methods

isVisible()

isVisible(location: string): Boolean

仅在支持多视图注册、可折叠展开的Slot可用。传入Slot位置,返回视图是否可见(非折叠状态)的状态。

toggleSlot()

toggleSlot(location: string, show?: boolean | undefined, size?: number | undefined): void

仅在支持多视图注册、可折叠展开的Slot可用。切换Slot的折叠展开状态,支持显示的传入show参数指定是否展开,未传入则取当前状态相反值进行切换;支持显示传入size参数指定最终的展开尺寸。

传入的size若为0会被忽略。

getTabbarService()

getTabbarService(location: string): TabbarService

仅在支持多视图注册、可折叠展开的Slot可用。传入Slot位置,返回指定位置的TabbarService实例。

getAccordionService()

getAccordionService(containerId: string): AccordionService

仅在支持多子视图渲染的Slot可用。传入Slot位置,返回指定位置的AccordionService实例。

getTabbarHandler()

getTabbarHandler(viewOrContainerId: string): TabBarHandler | undefined

仅在支持多视图注册、可折叠展开的Slot可用。获取视图或子视图对应的视图控制器,控制器支持进行视图事件监听、主动切换展开状态等能力。

一般情况下推荐使用TabBarHandler对视图状态进行主动控制,而不是使用toggleSlot api。

Example
const handler = layoutService.getTabbarHandler('explorer');
handler.onActivate(() => {console.log('explorer tab activated!')});
handler.activate();

collectTabbarComponent()

collectTabbarComponent(views: View[], options: ViewContainerOptions, side: string): string

仅在支持多视图注册、可折叠展开的Slot可用。往指定Slot注册一个或多个视图(若指定Slot不支持多个子视图,则只会渲染第一个)。支持自定义视图的标题组件titleComponent,标题组件为侧边栏顶部区域或底部栏的左上角区域。

disposeContainer()

disposeContainer(containerId: string): void

仅在支持多视图注册、可折叠展开的Slot可用。销毁一个已注册的视图面板。

collectViewComponent()

collectViewComponent(view: View, containerId: string, props: any = {}): string

仅在支持多子视图渲染的Slot可用。往一个视图面板内加入新的子视图面板,支持传入自定义的默认props。

replaceViewComponent()

replaceViewComponent(view: View, props?: any): void

仅在支持多子视图渲染的Slot可用。替换一个已存在的子视图,一般用于预加载场景下,替换加载中的占位视图。

disposeViewComponent()

disposeViewComponent(viewId: string): void

仅在支持多子视图渲染的Slot可用。销毁一个已经注册的子视图。

revealView()

revealView(viewId: string): void

仅在支持多子视图渲染的Slot可用。强制展开一个子视图,注意该方法并不会保证子视图所在的视图容器可见。


TabbarService

DI Token: TabbarServiceFactory

面向多视图注册、可折叠展开的Slot使用的视图激活控制服务。

Properties

onCurrentChange

readonly onCurrentChange: Event<{previousId: string; currentId: string}>

当前激活视图变化的事件

Example
tabbarService.onCurrentChange((e) => {
  console.log(e.currentId, e.previousId);
});

Methods

registerContainer()

registerContainer(containerId: string, componentInfo: ComponentRegistryInfo): IDisposable

注册一个新的视图容器。返回一个销毁该容器及其所有副作用的句柄。


React 组件

<TabRendererBase />

props

side

side: string;

className

className?: string;

components

components: ComponentRegistryInfo[];

direction

direction?: Layout.direction;

TabbarView

TabbarView: React.FC;

TabpanelView

TabpanelView: React.FC;

noAccordion

noAccordion?: boolean;
3.4.5

8 months ago

3.4.4

8 months ago

3.4.0

9 months ago

3.4.3

8 months ago

3.4.2

8 months ago

3.4.1

9 months ago

3.3.3

9 months ago

3.3.2

9 months ago

3.3.1

10 months ago

3.3.0

10 months ago

3.2.5

10 months ago

3.1.3

12 months ago

3.1.2

12 months ago

3.1.1

1 year ago

3.1.0

1 year ago

3.1.4

12 months ago

3.2.2

11 months ago

3.2.1

11 months ago

3.2.0

11 months ago

3.2.4

10 months ago

3.2.3

10 months ago

3.0.4

1 year ago

3.0.3

1 year ago

3.0.2

1 year ago

3.0.1

1 year ago

3.0.0

1 year ago

3.0.0-alpha.0

1 year ago

2.27.2

1 year ago

2.26.7

2 years ago

2.26.6

2 years ago

2.26.8

2 years ago

2.26.3

2 years ago

2.26.2

2 years ago

2.26.5

2 years ago

2.26.4

2 years ago

2.26.1

2 years ago

2.26.0

2 years ago

2.27.1

2 years ago

2.27.0

2 years ago

2.25.4

2 years ago

2.25.3

2 years ago

2.25.2

2 years ago

2.25.0

2 years ago

2.25.1

2 years ago

2.24.5

2 years ago

2.24.4

2 years ago

2.24.6

2 years ago

2.24.3

2 years ago

2.24.2

2 years ago

2.23.6

2 years ago

2.23.5

2 years ago

2.23.2

2 years ago

2.23.1

2 years ago

2.23.4

2 years ago

2.23.3

2 years ago

2.22.7

2 years ago

2.22.6

2 years ago

2.22.9

2 years ago

2.22.8

2 years ago

2.22.5

2 years ago

2.22.10

2 years ago

2.22.11

2 years ago

2.24.1

2 years ago

2.24.0

2 years ago

2.23.0

2 years ago

2.22.3

2 years ago

2.22.2

2 years ago

2.22.4

2 years ago

2.22.1

2 years ago

2.22.0

2 years ago

2.21.8

3 years ago

2.21.7

3 years ago

2.21.9

2 years ago

2.21.11

2 years ago

2.21.10

2 years ago

2.21.13

2 years ago

2.21.12

2 years ago

2.21.2

3 years ago

2.21.4

3 years ago

2.21.3

3 years ago

2.21.6

3 years ago

2.21.5

3 years ago

2.20.13

3 years ago

2.20.12

3 years ago

2.21.0

3 years ago

2.21.1

3 years ago

2.20.3

3 years ago

2.20.8

3 years ago

2.20.9

3 years ago

2.20.6

3 years ago

2.20.7

3 years ago

2.20.4

3 years ago

2.20.5

3 years ago

2.20.10

3 years ago

2.20.11

3 years ago

2.20.2

3 years ago

2.20.0

3 years ago

2.20.1

3 years ago

2.19.9

3 years ago

2.19.13

3 years ago

2.19.14

3 years ago

2.19.10

3 years ago

2.19.11

3 years ago

2.19.12

3 years ago

2.19.8

3 years ago

2.19.6

3 years ago

2.19.7

3 years ago

2.19.4

3 years ago

2.19.5

3 years ago

2.19.2

3 years ago

2.19.3

3 years ago

2.19.0

3 years ago

2.19.1

3 years ago

2.18.9

3 years ago

2.18.7

3 years ago

2.18.8

3 years ago

2.18.5

3 years ago

2.18.6

3 years ago

2.18.4

3 years ago

2.18.17

3 years ago

2.18.12

3 years ago

2.18.13

3 years ago

2.18.14

3 years ago

2.18.15

3 years ago

2.18.10

3 years ago

2.18.11

3 years ago

2.17.12

3 years ago

2.18.3

3 years ago

2.18.1

3 years ago

2.18.2

3 years ago

2.18.0

3 years ago

2.16.15

3 years ago

2.16.14

3 years ago

2.16.13

3 years ago

2.17.8

3 years ago

2.17.9

3 years ago

2.17.6

3 years ago

2.17.7

3 years ago

2.17.4

3 years ago

2.17.5

3 years ago

2.17.2

3 years ago

2.17.3

3 years ago

2.17.11

3 years ago

2.17.10

3 years ago

2.14.5

3 years ago

2.16.11

3 years ago

2.16.10

3 years ago

2.16.12

3 years ago

2.17.0

3 years ago

2.17.1

3 years ago

2.16.9

3 years ago

2.16.7

3 years ago

2.16.8

3 years ago

2.16.5

3 years ago

2.16.6

3 years ago

2.16.3

3 years ago

2.16.4

3 years ago

2.16.1

3 years ago

2.16.2

3 years ago

2.15.8

3 years ago

2.15.9

3 years ago

2.15.6

3 years ago

2.15.7

3 years ago

2.15.4

3 years ago

2.15.5

3 years ago

2.15.3

3 years ago

2.16.0

3 years ago

2.13.10

3 years ago

2.13.8

3 years ago

2.13.9

3 years ago

2.13.6

3 years ago

2.13.7

3 years ago

2.15.2

3 years ago

2.13.5

3 years ago

2.15.0

3 years ago

2.15.1

3 years ago

2.14.3

3 years ago

2.14.4

3 years ago

2.14.1

3 years ago

2.14.2

3 years ago

2.14.0

3 years ago

2.13.5-next.0

3 years ago

2.12.1-next.166

3 years ago

2.13.4

3 years ago

2.13.3

3 years ago

2.13.2

3 years ago

2.13.1

4 years ago

2.13.0

4 years ago