@opensumi/ide-main-layout 2.21.13 → 2.22.0

package/src/browser/tabbar/bar.view.tsx

@@ -0,0 +1,289 @@
+import clsx from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { Badge, Icon } from '@opensumi/ide-components';
+import { ComponentRegistryInfo, useInjectable, KeybindingRegistry, usePreference } from '@opensumi/ide-core-browser';
+import { getIcon } from '@opensumi/ide-core-browser';
+import { InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
+import { Layout } from '@opensumi/ide-core-browser/lib/components/layout/layout';
+import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
+import { IProgressService } from '@opensumi/ide-core-browser/lib/progress';
+
+import { IMainLayoutService } from '../../common';
+
+import { TabbarConfig } from './renderer.view';
+import styles from './styles.module.less';
+import { TabbarService, TabbarServiceFactory } from './tabbar.service';
+
+function splitVisibleTabs(containers: ComponentRegistryInfo[], tabSize: number, availableSize: number) {
+  const visibleCount = Math.floor(availableSize / tabSize);
+  if (visibleCount >= containers.length) {
+    return [containers, []];
+  }
+  if (visibleCount <= 1) {
+    return [[], containers];
+  }
+  return [containers.slice(0, visibleCount - 1), containers.slice(visibleCount - 1)];
+}
+
+export interface ITabbarViewProps {
+  TabView: React.FC<{ component: ComponentRegistryInfo }>;
+  forbidCollapse?: boolean;
+  // tabbar的尺寸（横向为宽，纵向高），tab折叠后为改尺寸加上panelBorderSize
+  barSize?: number;
+  // 包含tab的内外边距的总尺寸，用于控制溢出隐藏逻辑
+  tabSize: number;
+  MoreTabView: React.FC;
+  panelBorderSize?: number;
+  tabClassName?: string;
+  className?: string;
+  // tab上预留的位置，用来控制tab过多的显示效果
+  margin?: number;
+  canHideTabbar?: boolean;
+}
+
+export const TabbarViewBase: React.FC<ITabbarViewProps> = observer(
+  ({
+    TabView,
+    MoreTabView,
+    forbidCollapse,
+    barSize = 48,
+    panelBorderSize = 0,
+    tabClassName,
+    className,
+    margin,
+    tabSize,
+    canHideTabbar,
+  }) => {
+    const { side, direction, fullSize } = React.useContext(TabbarConfig);
+    const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+
+    React.useEffect(() => {
+      // 内部只关注总的宽度
+      tabbarService.barSize = barSize + panelBorderSize;
+    }, []);
+    const { currentContainerId, handleTabClick } = tabbarService;
+
+    const hideTabBarWhenHidePanel = usePreference<boolean>('workbench.hideSlotTabBarWhenHidePanel', false);
+
+    const willHideTabbar = canHideTabbar && hideTabBarWhenHidePanel;
+
+    if (willHideTabbar && !currentContainerId) {
+      // 之所以要用这么偏门的方法，是因为：
+      // 我尝试了好几种方案，比如让 tabbar 或其他几个组件返回 null 的话
+      // 会导致 SplitPanel 计算 children 的尺寸不正确，或者计算 tabbar 上按钮区域长度不对等等
+      // 最后试了这个方法一劳永逸，感觉也挺合适
+      tabbarService.resizeHandle?.setSize(0);
+    }
+
+    const [visibleContainers, hideContainers] = splitVisibleTabs(
+      tabbarService.visibleContainers.filter((container) => !container.options?.hideTab),
+      tabSize,
+      fullSize - (margin || 0),
+    );
+    hideContainers.forEach((componentInfo) => {
+      tabbarService.updateTabInMoreKey(componentInfo.options!.containerId, true);
+    });
+
+    return (
+      <div className={clsx([styles.tab_bar, className])}>
+        <div className={styles.bar_content} style={{ flexDirection: Layout.getTabbarDirection(direction) }}>
+          {visibleContainers.map((component) => {
+            const containerId = component.options?.containerId;
+            if (!containerId) {
+              return null;
+            }
+            tabbarService.updateTabInMoreKey(containerId, false);
+            let ref: HTMLLIElement | null;
+            return (
+              <li
+                draggable={true}
+                onDragStart={(e) => {
+                  if (ref) {
+                    const dragImage = ref.cloneNode(true) as HTMLLIElement;
+                    dragImage.classList.add(styles.dragging);
+                    if (tabClassName) {
+                      dragImage.classList.add(tabClassName);
+                    }
+                    document.body.appendChild(dragImage);
+                    e.persist();
+                    requestAnimationFrame(() => {
+                      e.dataTransfer.setDragImage(dragImage, 0, 0);
+                      document.body.removeChild(dragImage);
+                    });
+                  }
+                  tabbarService.handleDragStart(e, containerId);
+                }}
+                onDragOver={(e) => {
+                  e.preventDefault();
+                  if (ref) {
+                    ref.classList.add('on-drag-over');
+                  }
+                }}
+                onDragLeave={() => {
+                  if (ref) {
+                    ref.classList.remove('on-drag-over');
+                  }
+                }}
+                onDrop={(e) => {
+                  if (ref) {
+                    ref.classList.remove('on-drag-over');
+                  }
+                  tabbarService.handleDrop(e, containerId);
+                }}
+                key={containerId}
+                id={containerId}
+                onContextMenu={(e) => tabbarService.handleContextMenu(e, containerId)}
+                // 如果设置了可隐藏 Tabbar，那么就不允许点击 tab 时隐藏整个 panel 了 通过设置 forbidCollapse 来阻止这个动作
+                onClick={(e) => handleTabClick(e, willHideTabbar || forbidCollapse)}
+                ref={(el) => (ref = el)}
+                className={clsx({ active: currentContainerId === containerId }, tabClassName)}
+              >
+                <TabView component={component} />
+              </li>
+            );
+          })}
+          {hideContainers.length ? (
+            <li
+              key='tab-more'
+              onClick={(e) =>
+                tabbarService.showMoreMenu(
+                  e,
+                  visibleContainers[visibleContainers.length - 1] &&
+                    visibleContainers[visibleContainers.length - 1].options?.containerId,
+                )
+              }
+              className={tabClassName}
+            >
+              <MoreTabView />
+            </li>
+          ) : null}
+        </div>
+      </div>
+    );
+  },
+);
+
+export const IconTabView: React.FC<{ component: ComponentRegistryInfo }> = observer(({ component }) => {
+  const progressService: IProgressService = useInjectable(IProgressService);
+  const keybindingRegistry: KeybindingRegistry = useInjectable(KeybindingRegistry);
+  const inProgress = progressService.getIndicator(component.options?.containerId || '')?.progressModel.show;
+
+  const title = React.useMemo(() => {
+    const options = component.options;
+    if (options?.activateKeyBinding) {
+      return `${options?.title} (${keybindingRegistry.acceleratorForKeyString(options.activateKeyBinding, '+')})`;
+    }
+    return options?.title;
+  }, [component]);
+
+  return (
+    <div className={styles.icon_tab}>
+      <div className={clsx(component.options?.iconClass, 'activity-icon')} title={title}></div>
+      {inProgress ? (
+        <Badge className={styles.tab_badge}>
+          <span className={styles.icon_wrapper}>
+            <Icon icon='time-circle' />
+          </span>
+        </Badge>
+      ) : (
+        component.options?.badge && <Badge className={styles.tab_badge}>{component.options?.badge}</Badge>
+      )}
+    </div>
+  );
+});
+
+export const TextTabView: React.FC<{ component: ComponentRegistryInfo }> = observer(({ component }) => (
+  <div className={styles.text_tab}>
+    <div className={styles.bottom_tab_title}>{component.options?.title?.toUpperCase()}</div>
+    {component.options?.badge && <Badge className={styles.tab_badge}>{component.options?.badge}</Badge>}
+  </div>
+));
+
+export const IconElipses: React.FC = () => (
+  <div className={styles.icon_tab}>
+    {/* i18n */}
+    <div className={clsx(getIcon('ellipsis'), 'activity-icon')} title='extra tabs'></div>
+  </div>
+);
+
+export const TextElipses: React.FC = () => (
+  <div className={styles.text_tab}>
+    <div className={styles.bottom_tab_title}>
+      <i className={getIcon('doubleright')}></i>
+    </div>
+  </div>
+);
+
+export const RightTabbarRenderer: React.FC = () => {
+  const { side } = React.useContext(TabbarConfig);
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  return (
+    <div
+      id={VIEW_CONTAINERS.RIGHT_TABBAR}
+      className={styles.right_tab_bar}
+      onContextMenu={tabbarService.handleContextMenu}
+    >
+      <TabbarViewBase
+        tabSize={48}
+        MoreTabView={IconElipses}
+        tabClassName={styles.right_tab}
+        TabView={IconTabView}
+        barSize={48}
+        panelBorderSize={1}
+      />
+    </div>
+  );
+};
+
+export const LeftTabbarRenderer: React.FC = () => {
+  const { side } = React.useContext(TabbarConfig);
+  const layoutService = useInjectable<IMainLayoutService>(IMainLayoutService);
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+
+  const leftBarInlineMenus = React.useMemo(() => layoutService.getExtraMenu(), [layoutService]);
+
+  return (
+    <div
+      id={VIEW_CONTAINERS.LEFT_TABBAR}
+      className={styles.left_tab_bar}
+      onContextMenu={tabbarService.handleContextMenu}
+    >
+      <TabbarViewBase
+        tabSize={48}
+        MoreTabView={IconElipses}
+        className={styles.left_tab_content}
+        tabClassName={styles.left_tab}
+        TabView={IconTabView}
+        barSize={48}
+        margin={90}
+        panelBorderSize={1}
+      />
+      <InlineMenuBar className={styles.vertical_icons} menus={leftBarInlineMenus} />
+    </div>
+  );
+};
+
+export const BottomTabbarRenderer: React.FC = () => {
+  const { side } = React.useContext(TabbarConfig);
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  return (
+    <div
+      id={VIEW_CONTAINERS.BOTTOM_TABBAR}
+      onContextMenu={tabbarService.handleContextMenu}
+      className={clsx(styles.bottom_bar_container, 'next_bottom_bar')}
+    >
+      <TabbarViewBase
+        // TODO: 暂时通过预估值来计算是否超出可视范围，实际上需要通过dom尺寸的计算
+        tabSize={80}
+        MoreTabView={TextElipses}
+        tabClassName={styles.bottom_tab}
+        TabView={TextTabView}
+        barSize={24}
+        panelBorderSize={1}
+        canHideTabbar
+      />
+    </div>
+  );
+};

package/src/browser/tabbar/panel.view.tsx

@@ -0,0 +1,190 @@
+import clsx from 'classnames';
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { INJECTOR_TOKEN, Injector } from '@opensumi/di';
+import {
+  ComponentRegistryInfo,
+  useInjectable,
+  ComponentRenderer,
+  ConfigProvider,
+  AppConfig,
+  ErrorBoundary,
+  useViewState,
+} from '@opensumi/ide-core-browser';
+import { InlineActionBar, InlineMenuBar } from '@opensumi/ide-core-browser/lib/components/actions';
+import { LAYOUT_VIEW_SIZE } from '@opensumi/ide-core-browser/lib/layout/constants';
+import { IMenu } from '@opensumi/ide-core-browser/lib/menu/next';
+import { IProgressService } from '@opensumi/ide-core-browser/lib/progress';
+import { ProgressBar } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
+
+import { AccordionServiceFactory, AccordionService } from '../accordion/accordion.service';
+import { AccordionContainer } from '../accordion/accordion.view';
+import { TitleBar } from '../accordion/titlebar.view';
+
+import { TabbarConfig } from './renderer.view';
+import styles from './styles.module.less';
+import { TabbarService, TabbarServiceFactory } from './tabbar.service';
+
+const NoUpdateBoundary: React.FC<{ visible: boolean; children: React.ReactElement }> = React.memo(
+  ({ children }) => children,
+  (prev, next) => !(prev.visible || next.visible),
+);
+
+const panelVisible = { zIndex: 1, display: 'block' };
+const panelInVisible = { zIndex: -1, display: 'none' };
+
+export interface IBaseTabPanelView {
+  PanelView: React.FC<{ component: ComponentRegistryInfo; side: string; titleMenu: IMenu }>;
+  // tabPanel的尺寸（横向为宽，纵向高）
+  id?: string;
+  panelSize?: number;
+}
+
+export const BaseTabPanelView: React.FC<IBaseTabPanelView> = observer(({ PanelView, panelSize, id }) => {
+  const { side } = React.useContext(TabbarConfig);
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  const appConfig: AppConfig = useInjectable(AppConfig);
+  const customPanelSize = appConfig.panelSizes && appConfig.panelSizes[side];
+  const { currentContainerId } = tabbarService;
+
+  React.useEffect(() => {
+    // panelSize = 384-1-48
+    tabbarService.panelSize = customPanelSize || panelSize || 335;
+  }, []);
+
+  return (
+    <div
+      id={id}
+      className={clsx(styles.tab_panel, {
+        [styles.tab_panel_hidden]: !currentContainerId || currentContainerId === '',
+      })}
+    >
+      {tabbarService.visibleContainers.map((component) => {
+        const containerId = component.options?.containerId;
+        if (!containerId) {
+          return null;
+        }
+        const titleMenu = tabbarService.getTitleToolbarMenu(containerId);
+        return (
+          <div
+            key={containerId}
+            className={clsx(styles.panel_wrap, containerId) /* @deprecated: query by data-viewlet-id */}
+            data-viewlet-id={containerId}
+            style={currentContainerId === containerId ? panelVisible : panelInVisible}
+            id={id}
+          >
+            <ErrorBoundary>
+              <NoUpdateBoundary visible={currentContainerId === containerId}>
+                <PanelView titleMenu={titleMenu} side={side} component={component} />
+              </NoUpdateBoundary>
+            </ErrorBoundary>
+          </div>
+        );
+      })}
+    </div>
+  );
+});
+
+const ContainerView: React.FC<{
+  component: ComponentRegistryInfo;
+  side: string;
+  titleMenu: IMenu;
+}> = ({ component, titleMenu, side }) => {
+  const ref = React.useRef<HTMLElement | null>();
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const configContext = useInjectable<AppConfig>(AppConfig);
+  const { title, titleComponent, component: CustomComponent, containerId } = component.options || {};
+  const injector: Injector = useInjectable(INJECTOR_TOKEN);
+  const handleContextMenu = (e: React.MouseEvent) => {
+    const accordionService: AccordionService = injector.get(AccordionServiceFactory)(containerId);
+    accordionService.handleContextMenu(e);
+  };
+  if (!containerId) {
+    return null;
+  }
+  const progressService: IProgressService = useInjectable(IProgressService);
+  const indicator = progressService.getIndicator(containerId);
+  if (!indicator) {
+    return null;
+  }
+  const viewState = useViewState(side, containerRef);
+
+  return (
+    <div ref={containerRef} className={styles.view_container}>
+      {!CustomComponent && (
+        <div onContextMenu={handleContextMenu} className={styles.panel_titlebar}>
+          {!title ? null : <TitleBar title={title} menubar={<InlineActionBar menus={titleMenu} />} />}
+          {titleComponent && (
+            <div className={styles.panel_component}>
+              <ConfigProvider value={configContext}>
+                <ComponentRenderer Component={titleComponent} initialProps={component.options?.titleProps} />
+              </ConfigProvider>
+            </div>
+          )}
+        </div>
+      )}
+      <div className={styles.container_wrap} ref={(ele) => (ref.current = ele)}>
+        <ProgressBar progressModel={indicator.progressModel} />
+        {CustomComponent ? (
+          <ConfigProvider value={configContext}>
+            <ComponentRenderer
+              initialProps={{ viewState, ...component.options?.initialProps }}
+              Component={CustomComponent}
+            />
+          </ConfigProvider>
+        ) : (
+          <AccordionContainer
+            views={component.views}
+            minSize={component.options!.miniSize}
+            containerId={component.options!.containerId}
+          />
+        )}
+      </div>
+    </div>
+  );
+};
+
+const BottomPanelView: React.FC<{
+  component: ComponentRegistryInfo;
+  side: string;
+  titleMenu: IMenu;
+}> = ({ component, titleMenu, side }) => {
+  const contentRef = React.useRef<HTMLDivElement | null>();
+  const titleComponent = component.options && component.options.titleComponent;
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  // 注入自定义视图 or 通过views注入视图
+  const progressService: IProgressService = useInjectable(IProgressService);
+  const indicator = progressService.getIndicator(component.options!.containerId)!;
+  const viewState = useViewState(side, contentRef);
+
+  return (
+    <div className={styles.panel_container}>
+      <div className={styles.panel_title_bar} style={{ height: LAYOUT_VIEW_SIZE.PANEL_TITLEBAR_HEIGHT }}>
+        <h1>{component.options?.title?.toUpperCase()}</h1>
+        <div className={styles.title_component_container}>
+          {titleComponent && (
+            <ComponentRenderer Component={titleComponent} initialProps={component.options?.titleProps} />
+          )}
+        </div>
+        <div className={styles.panel_toolbar_container}>
+          {titleMenu && <InlineActionBar menus={titleMenu} />}
+          <InlineMenuBar menus={tabbarService.commonTitleMenu} moreAtFirst />
+        </div>
+      </div>
+      <div ref={(ele) => (contentRef.current = ele)} className={styles.panel_wrapper}>
+        <ProgressBar progressModel={indicator.progressModel} />
+        <ComponentRenderer
+          initialProps={{ viewState, ...component.options?.initialProps }}
+          Component={component.options?.component ? component.options.component : component.views[0].component!}
+        />
+      </div>
+    </div>
+  );
+};
+
+export const RightTabPanelRenderer: React.FC = () => <BaseTabPanelView PanelView={ContainerView} />;
+
+export const LeftTabPanelRenderer: React.FC = () => <BaseTabPanelView PanelView={ContainerView} />;
+
+export const BottomTabPanelRenderer: React.FC = () => <BaseTabPanelView PanelView={BottomPanelView} panelSize={280} />;

package/src/browser/tabbar/renderer.view.tsx

@@ -0,0 +1,133 @@
+import clsx from 'classnames';
+import React from 'react';
+
+import { ComponentRegistryInfo, useInjectable, IEventBus, ResizeEvent } from '@opensumi/ide-core-browser';
+import { PanelContext } from '@opensumi/ide-core-browser/lib/components';
+import { Layout } from '@opensumi/ide-core-browser/lib/components/layout/layout';
+import { VIEW_CONTAINERS } from '@opensumi/ide-core-browser/lib/layout/view-id';
+
+import { RightTabbarRenderer, LeftTabbarRenderer, BottomTabbarRenderer } from './bar.view';
+import { RightTabPanelRenderer, LeftTabPanelRenderer, BottomTabPanelRenderer } from './panel.view';
+import styles from './styles.module.less';
+import { TabbarServiceFactory, TabbarService } from './tabbar.service';
+
+export const TabbarConfig = React.createContext<{
+  side: string;
+  direction: Layout.direction;
+  fullSize: number;
+}>({
+  side: 'left',
+  direction: 'left-to-right',
+  fullSize: 0,
+});
+
+export const TabRendererBase: React.FC<{
+  side: string;
+  id?: string;
+  className?: string;
+  components: ComponentRegistryInfo[];
+  direction?: Layout.direction;
+  TabbarView: React.FC;
+  TabpanelView: React.FC;
+  // @deprecated
+  noAccordion?: boolean;
+}> = ({ id, className, components, direction = 'left-to-right', TabbarView, side, TabpanelView }) => {
+  const tabbarService: TabbarService = useInjectable(TabbarServiceFactory)(side);
+  const eventBus = useInjectable<IEventBus>(IEventBus);
+  const resizeHandle = React.useContext(PanelContext);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const [fullSize, setFullSize] = React.useState(0);
+  React.useLayoutEffect(() => {
+    tabbarService.registerResizeHandle(resizeHandle);
+    components.forEach((component) => {
+      tabbarService.registerContainer(component.options!.containerId, component);
+    });
+    tabbarService.updatePanelVisibility();
+    tabbarService.viewReady.resolve();
+  }, []);
+  React.useEffect(() => {
+    if (rootRef.current) {
+      setFullSize(rootRef.current[Layout.getDomSizeProperty(direction)]);
+      let lastFrame: number | null;
+      eventBus.on(ResizeEvent, (e) => {
+        if (e.payload.slotLocation === side) {
+          if (lastFrame) {
+            window.cancelAnimationFrame(lastFrame);
+          }
+          lastFrame = window.requestAnimationFrame(() => {
+            setFullSize(rootRef.current![Layout.getDomSizeProperty(direction)]);
+          });
+        }
+      });
+    }
+  }, []);
+
+  return (
+    <div
+      ref={rootRef}
+      id={id}
+      className={clsx(styles.tab_container, className)}
+      style={{ flexDirection: Layout.getFlexDirection(direction) }}
+    >
+      <TabbarConfig.Provider value={{ side, direction, fullSize }}>
+        <TabbarView />
+        <TabpanelView />
+      </TabbarConfig.Provider>
+    </div>
+  );
+};
+
+export const RightTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side='right'
+    direction='right-to-left'
+    id={VIEW_CONTAINERS.RIGHT_TABBAR}
+    className={clsx(className, 'right-slot')}
+    components={components}
+    TabbarView={RightTabbarRenderer}
+    TabpanelView={RightTabPanelRenderer}
+  />
+);
+
+export const LeftTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side='left'
+    direction='left-to-right'
+    id={VIEW_CONTAINERS.LEFT_TABBAR_PANEL}
+    className={clsx(className, 'left-slot')}
+    components={components}
+    TabbarView={LeftTabbarRenderer}
+    TabpanelView={LeftTabPanelRenderer}
+  />
+);
+
+export const BottomTabRenderer = ({
+  className,
+  components,
+}: {
+  className: string;
+  components: ComponentRegistryInfo[];
+}) => (
+  <TabRendererBase
+    side='bottom'
+    id={VIEW_CONTAINERS.BOTTOM_TABBAR_PANEL}
+    direction='bottom-to-top'
+    className={clsx(className, 'bottom-slot')}
+    components={components}
+    TabbarView={BottomTabbarRenderer}
+    TabpanelView={BottomTabPanelRenderer}
+    noAccordion={true}
+  />
+);