@opensumi/ide-main-layout v2.27.1
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;
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
9 months ago
8 months ago
6 months ago
7 months ago
6 months ago
6 months ago
10 months ago
10 months ago
8 months ago
7 months ago
7 months ago
6 months ago
9 months ago
8 months ago
6 months ago
10 months ago
8 months ago
5 months ago
5 months ago
6 months ago
7 months ago
6 months ago
10 months ago
9 months ago
6 months ago
6 months ago
8 months ago
8 months ago
7 months ago
10 months ago
10 months ago
8 months ago
6 months ago
5 months ago
8 months ago
7 months ago
6 months ago
8 months ago
8 months ago
6 months ago
6 months ago
7 months ago
7 months ago
6 months ago
11 months ago
6 months ago
10 months ago
8 months ago
6 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
10 months ago
6 months ago
10 months ago
8 months ago
8 months ago
9 months ago
7 months ago
8 months ago
9 months ago
10 months ago
9 months ago
9 months ago
10 months ago
10 months ago
8 months ago
8 months ago
8 months ago
8 months ago
6 months ago
8 months ago
9 months ago
10 months ago
6 months ago
7 months ago
10 months ago
6 months ago
5 months ago
10 months ago
10 months ago
5 months ago
7 months ago
10 months ago
7 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
10 months ago
8 months ago
6 months ago
10 months ago
6 months ago
7 months ago
6 months ago
8 months ago
6 months ago
6 months ago
10 months ago
6 months ago
8 months ago
6 months ago
8 months ago
6 months ago
6 months ago
7 months ago
10 months ago
10 months ago
5 months ago
6 months ago
7 months ago
6 months ago
6 months ago
10 months ago
6 months ago
10 months ago
6 months ago
10 months ago
6 months ago
8 months ago
8 months ago
10 months ago
6 months ago
8 months ago
6 months ago
6 months ago
6 months ago
7 months ago
10 months ago
6 months ago
10 months ago
6 months ago
8 months ago
8 months ago
6 months ago
6 months ago
7 months ago
8 months ago
7 months ago
8 months ago
10 months ago
10 months ago
10 months ago
7 months ago
6 months ago
9 months ago
9 months ago
8 months ago
6 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
1 year ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
11 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
1 year ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
12 months ago
1 year ago
12 months ago
12 months ago
11 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago