2.27.1 • Published 5 months ago

@opensumi/ide-main-layout v2.27.1

Weekly downloads
-
License
MIT
Repository
github
Last release
5 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;
2.26.7

8 months ago

2.26.6

9 months ago

2.26.8

8 months ago

2.26.3

9 months ago

2.26.2

10 months ago

2.26.5

9 months ago

2.26.4

9 months ago

2.26.1

10 months ago

2.26.0

10 months ago

2.27.1

6 months ago

2.27.0

7 months ago

2.25.4

10 months ago

2.25.3

10 months ago

2.25.2

11 months ago

2.25.0

11 months ago

2.25.1

11 months ago

2.24.5

12 months ago

2.24.4

12 months ago

2.24.6

11 months ago

2.24.3

12 months ago

2.24.2

12 months ago

2.23.6

1 year ago

2.23.5

1 year ago

2.23.2

1 year ago

2.23.1

1 year ago

2.23.4

1 year ago

2.23.3

1 year ago

2.22.7

1 year ago

2.22.6

1 year ago

2.22.9

1 year ago

2.22.8

1 year ago

2.22.5

1 year ago

2.22.10

1 year ago

2.22.11

1 year ago

2.24.1

1 year ago

2.24.0

1 year ago

2.23.0

1 year ago

2.22.3

1 year ago

2.22.2

1 year ago

2.22.4

1 year ago

2.22.1

1 year ago

2.22.0

1 year ago

2.21.8

1 year ago

2.21.7

1 year ago

2.21.9

1 year ago

2.21.11

1 year ago

2.21.10

1 year ago

2.21.13

1 year ago

2.21.12

1 year ago

2.21.2

2 years ago

2.21.4

1 year ago

2.21.3

1 year ago

2.21.6

1 year ago

2.21.5

1 year ago

2.20.13

1 year ago

2.20.12

2 years ago

2.21.0

2 years ago

2.21.1

2 years ago

2.20.3

2 years ago

2.20.8

2 years ago

2.20.9

2 years ago

2.20.6

2 years ago

2.20.7

2 years ago

2.20.4

2 years ago

2.20.5

2 years ago

2.20.10

2 years ago

2.20.11

2 years ago

2.20.2

2 years ago

2.20.0

2 years ago

2.20.1

2 years ago

2.19.9

2 years ago

2.19.13

2 years ago

2.19.14

2 years ago

2.19.10

2 years ago

2.19.11

2 years ago

2.19.12

2 years ago

2.19.8

2 years ago

2.19.6

2 years ago

2.19.7

2 years ago

2.19.4

2 years ago

2.19.5

2 years ago

2.19.2

2 years ago

2.19.3

2 years ago

2.19.0

2 years ago

2.19.1

2 years ago

2.18.9

2 years ago

2.18.7

2 years ago

2.18.8

2 years ago

2.18.5

2 years ago

2.18.6

2 years ago

2.18.4

2 years ago

2.18.17

2 years ago

2.18.12

2 years ago

2.18.13

2 years ago

2.18.14

2 years ago

2.18.15

2 years ago

2.18.10

2 years ago

2.18.11

2 years ago

2.17.12

2 years ago

2.18.3

2 years ago

2.18.1

2 years ago

2.18.2

2 years ago

2.18.0

2 years ago

2.16.15

2 years ago

2.16.14

2 years ago

2.16.13

2 years ago

2.17.8

2 years ago

2.17.9

2 years ago

2.17.6

2 years ago

2.17.7

2 years ago

2.17.4

2 years ago

2.17.5

2 years ago

2.17.2

2 years ago

2.17.3

2 years ago

2.17.11

2 years ago

2.17.10

2 years ago

2.14.5

2 years ago

2.16.11

2 years ago

2.16.10

2 years ago

2.16.12

2 years ago

2.17.0

2 years ago

2.17.1

2 years ago

2.16.9

2 years ago

2.16.7

2 years ago

2.16.8

2 years ago

2.16.5

2 years ago

2.16.6

2 years ago

2.16.3

2 years ago

2.16.4

2 years ago

2.16.1

2 years ago

2.16.2

2 years ago

2.15.8

2 years ago

2.15.9

2 years ago

2.15.6

2 years ago

2.15.7

2 years ago

2.15.4

2 years ago

2.15.5

2 years ago

2.15.3

2 years ago

2.16.0

2 years ago

2.13.10

2 years ago

2.13.8

2 years ago

2.13.9

2 years ago

2.13.6

2 years ago

2.13.7

2 years ago

2.15.2

2 years ago

2.13.5

2 years ago

2.15.0

2 years ago

2.15.1

2 years ago

2.14.3

2 years ago

2.14.4

2 years ago

2.14.1

2 years ago

2.14.2

2 years ago

2.14.0

2 years ago

2.13.5-next.0

2 years ago

2.12.1-next.166

2 years ago

2.13.4

2 years ago

2.13.3

2 years ago

2.13.2

2 years ago

2.13.1

2 years ago

2.13.0

2 years ago