@opensumi/ide-main-layout 2.21.13 → 2.22.0

package/src/browser/tabbar-handler.ts

@@ -0,0 +1,200 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { Event, Emitter, ILogger } from '@opensumi/ide-core-common';
+
+import { IMainLayoutService } from '../common';
+
+import { TabbarService } from './tabbar/tabbar.service';
+
+@Injectable({ multiple: true })
+export class TabBarHandler {
+  @Autowired(IMainLayoutService)
+  private layoutService!: IMainLayoutService;
+
+  @Autowired(ILogger)
+  private readonly logger: ILogger;
+
+  protected readonly onActivateEmitter = new Emitter<void>();
+  readonly onActivate: Event<void> = this.onActivateEmitter.event;
+
+  protected readonly onInActivateEmitter = new Emitter<void>();
+  readonly onInActivate: Event<void> = this.onInActivateEmitter.event;
+
+  // @deprecated
+  protected readonly onCollapseEmitter = new Emitter<void>();
+  protected readonly onCollapse: Event<void> = this.onCollapseEmitter.event;
+
+  public isVisible = false;
+  public accordionService = this.layoutService.getAccordionService(this.containerId);
+
+  constructor(public readonly containerId: string, private tabbarService: TabbarService) {
+    // 如果当前视图已经激活，则设置一些激活的标志
+    if (tabbarService.currentContainerId === this.containerId) {
+      this.onActivateEmitter.fire();
+      this.isVisible = true;
+    }
+    this.tabbarService.onCurrentChange((e) => {
+      if (e.currentId === this.containerId) {
+        this.onActivateEmitter.fire();
+        this.isVisible = true;
+      } else if (e.previousId === this.containerId) {
+        this.onInActivateEmitter.fire();
+        this.isVisible = false;
+      }
+    });
+  }
+
+  /**
+   * dispose 整个视图面板
+   */
+  dispose() {
+    // remove tab
+    this.tabbarService.containersMap.delete(this.containerId);
+    this.tabbarService.disposeContainer(this.containerId);
+  }
+  /**
+   * dispose 子视图
+   */
+  disposeView(viewId: string) {
+    this.layoutService.disposeViewComponent(viewId);
+  }
+  /**
+   * 激活该视图
+   */
+  activate() {
+    this.tabbarService.currentContainerId = this.containerId;
+  }
+  /**
+   * 取消激活该视图
+   */
+  deactivate() {
+    this.tabbarService.currentContainerId = '';
+  }
+  /**
+   * 当前视图激活状态
+   */
+  isActivated() {
+    return this.tabbarService.currentContainerId === this.containerId;
+  }
+  /**
+   * 显示当前视图（区别于激活）
+   */
+  show() {
+    this.tabbarService.getContainerState(this.containerId).hidden = false;
+  }
+  /**
+   * 隐藏当前视图（区别于取消激活，整个视图将不展示在 tabbar 上）
+   */
+  hide() {
+    this.tabbarService.getContainerState(this.containerId).hidden = true;
+  }
+  /**
+   * 设置视图的顶部标题组件
+   */
+  setTitleComponent(Fc: React.ComponentType, props?: object) {
+    const componentInfo = this.tabbarService.getContainer(this.containerId);
+    if (componentInfo) {
+      componentInfo.options!.titleProps = props;
+      componentInfo.options!.titleComponent = Fc;
+      this.tabbarService.forceUpdate++;
+    }
+  }
+  /**
+   * 设置当前视图的展开尺寸，会强制展开面板
+   */
+  setSize(size: number) {
+    this.layoutService.toggleSlot(
+      this.tabbarService.location,
+      true,
+      size + this.tabbarService.barSize /* border宽(高)度*/,
+    );
+  }
+  /**
+   * 设置视图tab的徽标
+   */
+  setBadge(badge: string) {
+    this.tabbarService.getContainer(this.containerId)!.options!.badge = badge;
+  }
+  /**
+   * 获取视图tab的徽标
+   */
+  getBadge() {
+    return this.tabbarService.getContainer(this.containerId)!.options!.badge;
+  }
+  /**
+   * 设置视图tab的图标
+   */
+  setIconClass(iconClass: string) {
+    this.tabbarService.getContainer(this.containerId)!.options!.iconClass = iconClass;
+  }
+  /**
+   * 当前视图是否折叠（区别于激活，整个slot位置都会折叠）
+   */
+  isCollapsed(viewId: string) {
+    return this.accordionService.getViewState(viewId).collapsed;
+  }
+  /**
+   * 折叠视图所在位置
+   */
+  setCollapsed(viewId: string, collapsed: boolean) {
+    this.accordionService.toggleOpen(viewId, collapsed);
+  }
+  /**
+   * 切换子视图的折叠展开状态
+   */
+  toggleViews(viewIds: string[], show: boolean) {
+    for (const viewId of viewIds) {
+      const viewState = this.accordionService.getViewState(viewId);
+      viewState.hidden = !show;
+    }
+  }
+  /**
+   * 更新子视图的标题
+   */
+  updateViewTitle(viewId: string, title: string) {
+    const targetView = this.accordionService.views.find((view) => view.id === viewId);
+    if (targetView) {
+      targetView.name = title;
+      this.accordionService.updateViewTitle(viewId, title);
+    } else {
+      this.logger.error('没有找到目标视图，无法更新手风琴标题!');
+    }
+  }
+
+  /**
+   * 更新子视图的描述
+   */
+  updateViewDescription(viewId: string, desciption: string) {
+    const targetView = this.accordionService.views.find((view) => view.id === viewId);
+    if (targetView) {
+      targetView.description = desciption;
+      this.accordionService.updateViewDesciption(viewId, desciption);
+    } else {
+      this.logger.error('没有找到目标视图，无法更新手风琴描述!');
+    }
+  }
+
+  /**
+   * 更新子视图的 message
+   */
+  updateViewMessage(viewId: string, message: string) {
+    const targetView = this.accordionService.views.find((view) => view.id === viewId);
+    if (targetView) {
+      targetView.message = message;
+      this.accordionService.updateViewMessage(viewId, message);
+    } else {
+      this.logger.error('没有找到目标视图，无法更新手风琴 message!');
+    }
+  }
+  /**
+   * 更新视图的标题
+   */
+  updateTitle(label: string) {
+    this.tabbarService.getContainer(this.containerId)!.options!.title = label;
+  }
+  /**
+   * 禁用侧边栏的resize功能
+   */
+  setResizeLock(lock?: boolean) {
+    this.tabbarService.resizeHandle!.lockSize(lock);
+  }
+}

package/src/browser/views-registry.ts

@@ -0,0 +1,157 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { IDisposable, Event, Emitter, IContextKeyService, toDisposable } from '@opensumi/ide-core-browser';
+import { SetMap } from '@opensumi/ide-core-common';
+
+import { IViewContentDescriptor } from '..';
+import { IViewsRegistry } from '../common';
+
+export enum ViewContentGroups {
+  Open = '2_open',
+  Debug = '4_debug',
+  SCM = '5_scm',
+  More = '9_more',
+}
+
+interface IItem {
+  readonly descriptor: IViewContentDescriptor;
+  visible: boolean;
+}
+
+function compareViewContentDescriptors(a: IViewContentDescriptor, b: IViewContentDescriptor): number {
+  const aGroup = a.group ?? ViewContentGroups.More;
+  const bGroup = b.group ?? ViewContentGroups.More;
+  if (aGroup !== bGroup) {
+    return aGroup.localeCompare(bGroup);
+  }
+  return (a.order ?? 5) - (b.order ?? 5);
+}
+
+@Injectable({ multiple: true })
+export class ViewsController {
+  private _onDidChange = new Emitter<void>();
+  readonly onDidChange = this._onDidChange.event;
+
+  private defaultItem: IItem | undefined;
+  private items: IItem[] = [];
+
+  get contents(): IViewContentDescriptor[] {
+    const visibleItems = this.items.filter((v) => v.visible);
+
+    if (visibleItems.length === 0 && this.defaultItem) {
+      return [this.defaultItem.descriptor];
+    }
+
+    return visibleItems.map((v) => v.descriptor);
+  }
+
+  @Autowired(IContextKeyService)
+  contextKeyService: IContextKeyService;
+
+  @Autowired(IViewsRegistry)
+  viewsRegistry: IViewsRegistry;
+
+  private disposables: IDisposable[] = [];
+
+  constructor(private id: string) {
+    this.contextKeyService.onDidChangeContext(this.onDidChangeContext, this, this.disposables);
+    Event.filter(this.viewsRegistry.onDidChangeViewWelcomeContent, (id) => id === this.id)(
+      this.onDidChangeViewWelcomeContent,
+      this,
+      this.disposables,
+    );
+    this.onDidChangeViewWelcomeContent();
+  }
+
+  private onDidChangeViewWelcomeContent(): void {
+    const descriptors = this.viewsRegistry.getViewWelcomeContent(this.id);
+
+    this.items = [];
+
+    for (const descriptor of descriptors) {
+      if (descriptor.when === 'default') {
+        this.defaultItem = { descriptor, visible: true };
+      } else {
+        const visible = descriptor.when ? this.contextKeyService.match(descriptor.when) : true;
+        this.items.push({ descriptor, visible });
+      }
+    }
+
+    this._onDidChange.fire();
+  }
+
+  private onDidChangeContext(): void {
+    let didChange = false;
+
+    for (const item of this.items) {
+      if (!item.descriptor.when || item.descriptor.when === 'default') {
+        continue;
+      }
+
+      const visible = this.contextKeyService.match(item.descriptor.when);
+
+      if (item.visible === visible) {
+        continue;
+      }
+
+      item.visible = visible;
+      didChange = true;
+    }
+
+    if (didChange) {
+      this._onDidChange.fire();
+    }
+  }
+
+  dispose(): void {
+    this.disposables.forEach((item) => item.dispose());
+    this.disposables = [];
+  }
+}
+
+@Injectable()
+export class ViewsRegistry implements IViewsRegistry {
+  private viewWelcomeContent = new SetMap<string, IViewContentDescriptor>();
+
+  private readonly _onDidChangeViewWelcomeContent = new Emitter<string>();
+  readonly onDidChangeViewWelcomeContent = this._onDidChangeViewWelcomeContent.event;
+
+  registerViewWelcomeContent(id: string, descriptor: IViewContentDescriptor): IDisposable {
+    this.viewWelcomeContent.add(id, descriptor);
+    this._onDidChangeViewWelcomeContent.fire(id);
+    return {
+      dispose: () => {
+        this.viewWelcomeContent.delete(id, descriptor);
+        this._onDidChangeViewWelcomeContent.fire(id);
+      },
+    };
+  }
+
+  registerViewWelcomeContent2<TKey>(
+    id: string,
+    viewContentMap: Map<TKey, IViewContentDescriptor>,
+  ): Map<TKey, IDisposable> {
+    const disposables = new Map<TKey, IDisposable>();
+
+    for (const [key, content] of viewContentMap) {
+      this.viewWelcomeContent.add(id, content);
+
+      disposables.set(
+        key,
+        toDisposable(() => {
+          this.viewWelcomeContent.delete(id, content);
+          this._onDidChangeViewWelcomeContent.fire(id);
+        }),
+      );
+    }
+    this._onDidChangeViewWelcomeContent.fire(id);
+
+    return disposables;
+  }
+
+  getViewWelcomeContent(id: string) {
+    const result: IViewContentDescriptor[] = [];
+    this.viewWelcomeContent.forEach(id, (descriptor) => result.push(descriptor));
+    result.sort(compareViewContentDescriptors);
+    return result;
+  }
+}

package/src/browser/welcome.view.tsx

@@ -0,0 +1,152 @@
+import clsx from 'classnames';
+import React from 'react';
+
+import { Button } from '@opensumi/ide-components/lib/button';
+import { getExternalIcon, IOpenerService, useInjectable } from '@opensumi/ide-core-browser';
+import { IContextKeyService } from '@opensumi/ide-core-browser';
+import { parseLinkedText } from '@opensumi/ide-core-common';
+
+import { IViewContentDescriptor } from '../common';
+
+import styles from './accordion/styles.module.less';
+import { ViewsController } from './views-registry';
+
+export namespace CSSIcon {
+  export const iconNameSegment = '[A-Za-z0-9]+';
+  export const iconNameExpression = '[A-Za-z0-9\\-]+';
+  export const iconModifierExpression = '~[A-Za-z]+';
+}
+
+const labelWithIconsRegex = new RegExp(
+  `(\\\\)?\\$\\((${CSSIcon.iconNameExpression}(?:${CSSIcon.iconModifierExpression})?)\\)`,
+  'g',
+);
+
+export function renderLabelWithIcons(text: string): Array<React.ReactElement | string> {
+  const elements = new Array<React.ReactElement | string>();
+  let match: RegExpMatchArray | null;
+
+  let textStart = 0;
+  let textStop = 0;
+  while ((match = labelWithIconsRegex.exec(text)) !== null) {
+    textStop = match.index || 0;
+    elements.push(text.substring(textStart, textStop));
+    textStart = (match.index || 0) + match[0].length;
+
+    const [, escaped, codicon] = match;
+    elements.push(escaped ? `$(${codicon})` : <span className={getExternalIcon(codicon)}></span>);
+  }
+
+  if (textStart < text.length) {
+    elements.push(text.substring(textStart));
+  }
+  return elements;
+}
+
+const WelcomeContent = (props: { contents: IViewContentDescriptor[] }) => {
+  const { contents } = props;
+  const [disables, setDisables] = React.useState<(boolean | null)[]>(
+    contents.map((item) => (item.precondition ? false : null)),
+  );
+  const contextKeyService: IContextKeyService = useInjectable(IContextKeyService);
+  const openerService: IOpenerService = useInjectable(IOpenerService);
+
+  React.useEffect(() => {
+    const conditionKeys = contents.map((item) => {
+      if (item.precondition) {
+        const keys = new Set();
+        item.precondition.keys().forEach((key) => keys.add(key));
+        return keys;
+      }
+      return null;
+    });
+    const disposable = contextKeyService.onDidChangeContext((e) => {
+      conditionKeys.forEach((keysOrNull, index) => {
+        if (keysOrNull && e.payload.affectsSome(keysOrNull)) {
+          setDisables(
+            disables.map((item, idx) => (idx === index ? contextKeyService.match(contents[index].precondition) : item)),
+          );
+        }
+      });
+    });
+    return () => disposable.dispose();
+  }, [contents]);
+
+  if (contents.length === 0) {
+    return null;
+  }
+  return (
+    <>
+      {contents.map(({ content, precondition }, index) => {
+        const lines = content.split('\n');
+        const lineElements: React.ReactElement[] = [];
+        for (let line of lines) {
+          line = line.trim();
+
+          if (!line) {
+            continue;
+          }
+
+          const linkedText = parseLinkedText(line);
+          if (linkedText.nodes.length === 1 && typeof linkedText.nodes[0] !== 'string') {
+            const node = linkedText.nodes[0];
+            lineElements.push(
+              <div key={lineElements.length} title={node.title} className='button-container'>
+                <Button disabled={disables[index] === false} onClick={() => openerService.open(node.href)}>
+                  {renderLabelWithIcons(node.label)}
+                </Button>
+              </div>,
+            );
+          } else {
+            const textNodes = linkedText.nodes.map((node, idx) => {
+              if (typeof node === 'string') {
+                return node;
+              } else {
+                return (
+                  <a
+                    key={idx}
+                    className={clsx({ disabled: node.href.startsWith('command:') && disables[index] === false })}
+                    title={node.title}
+                    onClick={() => openerService.open(node.href)}
+                  >
+                    {node.label}
+                  </a>
+                );
+              }
+            });
+            lineElements.push(<p key={lineElements.length}>{textNodes}</p>);
+          }
+        }
+        return <React.Fragment key={index}>{lineElements}</React.Fragment>;
+      })}
+    </>
+  );
+};
+
+interface WelcomeViewProps {
+  viewId: string;
+}
+
+/**
+ * Welcome view 不关心 viewState 变化
+ */
+function isWelcomeViewViewIdEqual(prevProps: WelcomeViewProps, nextProps: WelcomeViewProps) {
+  return prevProps.viewId === nextProps.viewId;
+}
+
+export const WelcomeView: React.FC<WelcomeViewProps> = React.memo((props) => {
+  const viewsController: ViewsController = useInjectable(ViewsController, [props.viewId]);
+  const [contents, setContents] = React.useState<IViewContentDescriptor[]>(viewsController.contents);
+  React.useEffect(() => {
+    viewsController.onDidChange(() => {
+      const newContents = viewsController.contents;
+      setContents(newContents);
+    });
+  }, []);
+
+  return contents.length ? (
+    <div className={styles.welcome}>
+      <WelcomeContent contents={contents} />
+    </div>
+  ) : null;
+}, isWelcomeViewViewIdEqual);

package/src/common/index.ts

@@ -0,0 +1,2 @@
+// 这里面引出了 .less 文件
+export * from './main-layout.definition';

package/src/common/main-layout.definition.ts

@@ -0,0 +1,122 @@
+import { BasicEvent, IDisposable, SlotLocation } from '@opensumi/ide-core-browser';
+import { ViewContainerOptions, View, SideStateManager } from '@opensumi/ide-core-browser/lib/layout';
+import { IContextMenu } from '@opensumi/ide-core-browser/lib/menu/next';
+import { Deferred, Event } from '@opensumi/ide-core-common';
+import { IContextKeyExpression } from '@opensumi/monaco-editor-core/esm/vs/platform/contextkey/common/contextkey';
+
+// eslint-disable-next-line import/no-restricted-paths
+import type { AccordionService } from '../browser/accordion/accordion.service';
+// eslint-disable-next-line import/no-restricted-paths
+import type { TabBarHandler } from '../browser/tabbar-handler';
+// eslint-disable-next-line import/no-restricted-paths
+import type { TabbarService } from '../browser/tabbar/tabbar.service';
+
+export interface ComponentCollection {
+  views?: View[];
+  options: ViewContainerOptions;
+}
+
+export interface ViewComponentOptions {
+  isReplace?: boolean;
+  fromExtension?: boolean;
+}
+
+export const IMainLayoutService = Symbol('IMainLayoutService');
+export interface IMainLayoutService {
+  viewReady: Deferred<void>;
+
+  didMount(): void;
+  // 切换tabbar位置的slot，支持left、right、bottom
+  toggleSlot(location: SlotLocation, show?: boolean, size?: number): void;
+  /**
+   * 获取注册到tabbar位置视图的handler，封装了常用的layout操作
+   * 请在onRendered事件触发后或onDidRender contribution内获取handle，否则获取到为空
+   * @param handlerId container或view id
+   */
+  getTabbarHandler(handlerId: string): TabBarHandler | undefined;
+  /**
+   * 注册单个或多个视图到tabbar位置
+   * @param views 使用手风琴能力时传入的多个子视图
+   * @param options container相关选项
+   * @param side 注册的位置，支持left、right、bottom
+   */
+  collectTabbarComponent(views: View[], options: ViewContainerOptions, side: string): string;
+  /**
+   * 向侧边栏container内附加新的子视图
+   * @param view 子视图信息
+   * @param containerId 子视图需要附加的容器id
+   * @param props 初始prop
+   */
+  collectViewComponent(view: View, containerId: string, props?: any, options?: ViewComponentOptions): string;
+  /**
+   * 替换一个已注册的视图
+   * @param view 子视图信息
+   * @param props 初始prop
+   */
+  replaceViewComponent(view: View, props?: any): void;
+  /**
+   * 从手风琴销毁一个子视图
+   * @param viewId 子视图ID
+   */
+  disposeViewComponent(viewId: string): void;
+  /**
+   * 销毁一个容器视图
+   * @param containerId 容器视图ID
+   */
+  disposeContainer(containerId: string): void;
+  expandBottom(expand: boolean): void;
+  bottomExpanded: boolean;
+  // @deprecated 提供小程序使用的额外位置控制
+  setFloatSize(size: number): void;
+  // force reveal a view ignoring its when clause
+  revealView(viewId: string): void;
+  getTabbarService(location: string): TabbarService;
+  getAccordionService(containerId: string, noRestore?: boolean): AccordionService;
+  getViewAccordionService(viewId: string): AccordionService | undefined;
+  // 某一位置是否可见
+  isVisible(location: string): boolean;
+  isViewVisible(viewId: string): boolean;
+  getExtraMenu(): IContextMenu;
+  getAllAccordionService(): Map<string, AccordionService>;
+}
+
+export const MainLayoutContribution = Symbol('MainLayoutContribution');
+
+export interface MainLayoutContribution {
+  // 将LayoutConfig渲染到各Slot后调用
+  onDidRender?(): void;
+
+  provideDefaultState?(): SideStateManager;
+}
+
+/**
+ * 当有新的TabBar被注册时发送的新事件
+ */
+export class TabBarRegistrationEvent extends BasicEvent<{ tabBarId: string }> {}
+
+export const IViewsRegistry = Symbol('IViewsRegistry');
+
+export interface IViewsRegistry {
+  readonly onDidChangeViewWelcomeContent: Event<string>;
+  registerViewWelcomeContent(id: string, descriptor: IViewContentDescriptor): IDisposable;
+  registerViewWelcomeContent2<TKey>(
+    id: string,
+    viewContentMap: Map<TKey, IViewContentDescriptor>,
+  ): Map<TKey, IDisposable>;
+  getViewWelcomeContent(id: string): IViewContentDescriptor[];
+}
+
+export interface IViewContentDescriptor {
+  readonly content: string;
+  readonly when?: IContextKeyExpression | 'default';
+  readonly group?: string;
+  readonly order?: number;
+  readonly precondition?: IContextKeyExpression | undefined;
+}
+
+export class ViewCollapseChangedEvent extends BasicEvent<{
+  viewId: string;
+  collapsed: boolean;
+}> {}
+
+export const SUPPORT_ACCORDION_LOCATION = new Set([SlotLocation.left, SlotLocation.right]);

package/src/index.ts

@@ -0,0 +1 @@
+export * from './common';