任意视图展开隐藏的实现方法

[PerfectPan]

已经看过切换面板案例：https://github.com/opensumi/opensumi-module-samples/tree/main/modules/toggle-panel

https://github.com/opensumi/core/blob/main/packages/main-layout/README.md Layout Readme 里了解到 toggleSlot 只能控制「多视图、可折叠展开的 Slot」然后 isView 目前也只默认支持 left / bottom / right 的 slot。

目前拓展了左面板，想实现左边面板（slot = simulator），主编辑器区域，bottom 插槽任意展开隐藏，保证至少展开一个面板的功能，有什么实现建议么？

其实就是如下视频的效果：

CleanShot.2023-04-11.at.17.16.47.mp4

目前自定义布局代码

import * as React from 'react';

import {
  BoxPanel,
  getStorageValue,
  SplitPanel,
} from '@opensumi/ide-core-browser/lib/components';
import { SlotRenderer } from '@opensumi/ide-core-browser';

// 基于 https://github.com/opensumi/core/blob/c6ccc2f51bf153a9382865e8a94b157353f8c016/packages/core-browser/src/components/layout/default-layout.tsx 修改
export function CustomToolbarLayout() {
  const { colors, layout } = getStorageValue();
  return (
    <BoxPanel direction="top-to-bottom">
      <SlotRenderer
        backgroundColor={colors.menuBarBackground}
        defaultSize={82}
        slot="top"
        z-index={3}
        flexGrow={0}
      />
      <SplitPanel id="main-horizontal" flexGrow={1}>
        <SlotRenderer
          color={colors.sideBarBackground}
          defaultSize={500}
          minResize={450}
          slot="simulator"
        />
        <BoxPanel direction="top-to-bottom" flex={1} className="main-box-panel">
          <SplitPanel
            id="main-view"
            flex={1}
            direction="left-to-right"
          >
            <SlotRenderer
              backgroundColor={colors.sideBarBackground}
              slot="left"
              isTabbar={true}
              defaultSize={layout.left?.currentId ? layout.left?.size || 310 : 49}
              minResize={204}
              minSize={49}
            />
            <SplitPanel
              id="main-vertical"
              minResize={300}
              flexGrow={1}
              direction="top-to-bottom"
            >
              <SlotRenderer
                backgroundColor={colors.editorBackground}
                flex={2}
                flexGrow={1}
                minResize={200}
                slot="main"
              />
              <SlotRenderer
                backgroundColor={colors.panelBackground}
                flex={1}
                defaultSize={layout.bottom?.size}
                minResize={160}
                slot="bottom"
                isTabbar={true}
              />
            </SplitPanel>
          </SplitPanel>
          <SlotRenderer
            backgroundColor={colors.statusBarBackground}
            defaultSize={24}
            flex={0}
            slot="statusBar"
          />
        </BoxPanel>
      </SplitPanel>
    </BoxPanel>
  );
}

[erha19]

@bytemain 看一下是不是能提供一些小程序开发者工具这块的开发建议？

[bytemain]

用语言来描述有点复杂，我写了一个例子你可以参考下，控制界面的 API 几乎都在 MainLayoutService 里，这个例子只是使用了三个按钮，你可以自己根据实际情况优化下。

代码：
opensumi/opensumi-module-samples#26

演示：

2023-04-11.20.53.31.mov

[PerfectPan]

用语言来描述有点复杂，我写了一个例子你可以参考下，控制界面的 API 几乎都在 MainLayoutService 里，这个例子只是使用了三个按钮，你可以自己根据实际情况优化下。

代码： opensumi/opensumi-module-samples#26

演示：

感谢回复，但是这个实现貌似还是没有解决如下两个问题：

1. 只展示 right 插槽的内容，目前 demo 的实现其实需要保证 editor 和 bottom 必须至少存在一个，隐藏 editor 其实是等于用 bottom 整个盖住 editor + 隐藏左边的菜单栏，按我的理解。
2. preview 面板扩展的是 SlotLocation.right 插槽，而 SlotLocation.right 的插槽在 main-layout 下是被换成 tabbar render 了，所以才具备切换面板的能力，我自定义扩展了一个插槽叫 simulator 其实和 editor 的插槽 main 一样都不具备这个能力。所以我没看到怎么自定义切换这两个插槽，我看到代码里是对 SlotLocation.right / left / bottom 都复写了 renderer https://github.com/opensumi/core/blob/main/packages/main-layout/src/browser/main-layout.contribution.ts#L201，所以可以调用这些 API 来控制显示和隐藏。

废话可能有点多，我想说的是我现在已经知道 mainLayoutService 可以控制插槽 left / bottom / right 的显隐，如我上面说的「Layout Readme 里了解到 toggleSlot 只能控制「多视图、可折叠展开的 Slot」然后 isView 目前也只默认支持 left / bottom / right 的 slot。」
但是其他插槽有办法也做到这样么？还是我也要模仿 https://github.com/opensumi/core/blob/main/packages/main-layout/src/browser/main-layout.contribution.ts#L20 这个代码去复写才有可能，但是他那个是多视图的，不知道直接用是不是合适的。

[bytemain]

嗯，你理解的没错：在例子中 mainLayoutService 控制右边的显隐是利用它是一个 tabbarHandler 来实现的，整个 OpenSumi 的视图控制还是没有那么自由，没有那么强。

要实现你的需求的话应该得额外写一部分代码。

所以在我们支付宝的小程序 IDE 的实践里，模拟器它所在的位置还是一个 Tabbar，但是我们隐藏了它的 tab 选择栏。我们重写了这个类：
TabbarViewBase https://github.com/opensumi/core/blob/fix/extension/nls-config/packages/main-layout/src/browser/tabbar/bar.view.tsx#L261

所以我的建议是，把模拟器的区域也当成一个 tabbar 来使用，可以自己根据 TabbarViewBase 实现一个 SimulatorView，然后把 tabbar 的 tab 栏隐藏掉。

这样就可以通过 tabbarService 来控制该区域了。

拿到 tabbarService 后，可以通过 tabbarService.resizeHandle?.xxx 来更精确的控制这个区域的长宽：

[PerfectPan]

好的，谢谢，我这里再研究一下