@opensumi/ide-core-browser 2.21.13 → 2.22.0

package/src/layout/accordion/tab-bar-toolbar.tsx

@@ -0,0 +1,59 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { Event, IDisposable } from '@opensumi/ide-core-common';
+
+import { IMenuRegistry, IMenuItem } from '../../menu/next/base';
+import { MenuId } from '../../menu/next/menu-id';
+
+export const TabBarToolbarContribution = Symbol('TabBarToolbarContribution');
+export interface TabBarToolbarContribution {
+  registerToolbarItems(registry: ToolbarRegistry): void;
+}
+
+@Injectable()
+export class ToolbarRegistry {
+  @Autowired(IMenuRegistry)
+  menuRegistry: IMenuRegistry;
+
+  /**
+   *
+   *
+   * @param {TabBarToolbarItem} item
+   * @returns {IDisposable}
+   * @memberof ToolbarRegistry
+   */
+  registerItem(item: TabBarToolbarItem): IDisposable {
+    if (typeof item.command === 'string') {
+      const label = item.tooltip || item.label;
+      if (label) {
+        item.command = {
+          id: item.command,
+          label,
+        };
+      }
+    }
+    return this.menuRegistry.registerMenuItem(MenuId.ViewTitle, {
+      ...item,
+      when: `${item.when ? item.when + ' && ' : ''}view == ${item.viewId}`,
+      group: item.group || 'navigation',
+    } as IMenuItem);
+  }
+
+  /**
+   * 取消已注册的菜单项
+   * @param menuItemId
+   */
+  unregisterItem(menuItemId: string) {
+    this.menuRegistry.unregisterMenuItem(MenuId.ViewTitle, menuItemId);
+  }
+}
+
+export interface TabBarToolbarItem extends IMenuItem {
+  readonly id: string;
+  readonly tooltip?: string;
+
+  readonly label?: string;
+
+  viewId?: string;
+
+  readonly onDidChange?: Event<void>;
+}

package/src/layout/accordion/view-context-key.registry.ts

@@ -0,0 +1,34 @@
+import { Injectable } from '@opensumi/di';
+import { Emitter } from '@opensumi/ide-core-common';
+
+import { IContextKeyService } from '../../context-key';
+
+@Injectable()
+export class ViewContextKeyRegistry {
+  private contextKeyMap: Map<string, IContextKeyService> = new Map();
+
+  private _onViewContextKeyServiceRegistered = new Emitter<string>();
+
+  getContextKeyService(viewId: string) {
+    return this.contextKeyMap.get(viewId);
+  }
+
+  registerContextKeyService(viewId: string, contextKeyService: IContextKeyService): IContextKeyService {
+    this.contextKeyMap.set(viewId, contextKeyService);
+    this._onViewContextKeyServiceRegistered.fire(viewId);
+    return contextKeyService;
+  }
+
+  afterContextKeyServiceRegistered(viewId: string, callback: (contextKeyService: IContextKeyService) => any) {
+    if (!this.contextKeyMap.has(viewId)) {
+      const disposer = this._onViewContextKeyServiceRegistered.event((id) => {
+        if (id === viewId) {
+          disposer.dispose();
+          callback(this.getContextKeyService(viewId)!);
+        }
+      });
+    } else {
+      callback(this.getContextKeyService(viewId)!);
+    }
+  }
+}

package/src/layout/constants.ts

@@ -0,0 +1,7 @@
+export namespace LAYOUT_VIEW_SIZE {
+  export const MENUBAR_HEIGHT = 35;
+  export const EDITOR_TABS_HEIGHT = 35;
+  export const BIG_SUR_TITLEBAR_HEIGHT = 28;
+  export const TITLEBAR_HEIGHT = 22;
+  export const PANEL_TITLEBAR_HEIGHT = 35;
+}

package/src/layout/index.ts

@@ -0,0 +1,5 @@
+export * from './layout';
+export * from './layout-hooks';
+export * from './layout.interface';
+export * from './accordion/view-context-key.registry';
+export * from './accordion/tab-bar-toolbar';

package/src/layout/layout-hooks.ts

@@ -0,0 +1,70 @@
+import React from 'react';
+
+import { IEventBus } from '@opensumi/ide-core-common';
+
+import { useInjectable } from '../react-hooks';
+
+import { ResizeEvent } from './layout.interface';
+
+export interface ViewState {
+  width: number;
+  height: number;
+}
+
+export const useViewState = (
+  location: string,
+  containerRef: React.MutableRefObject<HTMLElement | null | undefined>,
+  manualObserve?: boolean,
+): ViewState => {
+  const eventBus = useInjectable<IEventBus>(IEventBus);
+  const [viewState, setViewState] = React.useState({ width: 0, height: 0 });
+  const viewStateRef = React.useRef<ViewState>(viewState);
+
+  React.useEffect(() => {
+    let lastFrame: number | null;
+    const disposer = eventBus.on(ResizeEvent, (e) => {
+      if (!manualObserve && e.payload.slotLocation === location) {
+        if (lastFrame) {
+          window.cancelAnimationFrame(lastFrame);
+        }
+        lastFrame = window.requestAnimationFrame(() => {
+          if (containerRef.current && containerRef.current.clientHeight && containerRef.current.clientWidth) {
+            setViewState({ height: containerRef.current.clientHeight, width: containerRef.current.clientWidth });
+          }
+        });
+      }
+    });
+    return () => {
+      disposer.dispose();
+    };
+  }, [containerRef.current]);
+
+  React.useEffect(() => {
+    // TODO: 统一收敛到 resizeEvent 内
+    if (manualObserve && containerRef.current) {
+      const ResizeObserver = (window as any).ResizeObserver;
+      const doUpdate = (entries) => {
+        const width = entries[0].contentRect.width;
+        const height = entries[0].contentRect.height;
+        // 当视图被隐藏 (display: none) 时不更新 viewState
+        // 避免视图切换时触发无效的渲染
+        // 真正的 resize 操作不会出现 width/height 为 0 的情况
+        if (
+          (width !== viewStateRef.current.width || height !== viewStateRef.current.height) &&
+          (width !== 0 || height !== 0)
+        ) {
+          setViewState({ width, height });
+          viewStateRef.current = { width, height };
+        }
+      };
+      const resizeObserver = new ResizeObserver(doUpdate);
+      resizeObserver.observe(containerRef.current);
+      return () => {
+        if (containerRef.current) {
+          resizeObserver.unobserve(containerRef.current);
+        }
+      };
+    }
+  }, []);
+  return viewState;
+};

package/src/layout/layout-state.ts

@@ -0,0 +1,107 @@
+import debounce from 'lodash/debounce';
+
+import { Injectable, Autowired } from '@opensumi/di';
+import { StorageProvider, IStorage, STORAGE_NAMESPACE, DisposableCollection, ILogger } from '@opensumi/ide-core-common';
+
+import { PreferenceService } from '../preferences';
+
+@Injectable()
+export class LayoutState {
+  @Autowired(StorageProvider)
+  private readonly getStorage: StorageProvider;
+
+  @Autowired(PreferenceService)
+  private readonly preferenceService: PreferenceService;
+
+  @Autowired(ILogger)
+  private readonly logger: ILogger;
+
+  private layoutStorage: IStorage;
+  private globalLayoutStorage: IStorage;
+  private saveLayoutWithWorkspace: boolean;
+  private disposableCollection: DisposableCollection = new DisposableCollection();
+
+  async initStorage() {
+    this.layoutStorage = await this.getStorage(STORAGE_NAMESPACE.LAYOUT);
+    this.globalLayoutStorage = await this.getStorage(STORAGE_NAMESPACE.GLOBAL_LAYOUT);
+    await this.preferenceService.ready;
+    this.saveLayoutWithWorkspace = this.preferenceService.get<boolean>('view.saveLayoutWithWorkspace') || false;
+    this.disposableCollection.push(
+      this.preferenceService.onPreferenceChanged((e) => {
+        if (e.preferenceName === 'view.saveLayoutWithWorkspace') {
+          this.saveLayoutWithWorkspace = e.newValue;
+        }
+      }),
+    );
+  }
+
+  getState<T>(key: string, defaultState: T): T {
+    let storedState: T;
+    try {
+      if (this.saveLayoutWithWorkspace) {
+        storedState =
+          LAYOUT_STATE.isScoped(key) || LAYOUT_STATE.isLayout(key) || LAYOUT_STATE.isStatusBar(key)
+            ? this.layoutStorage.get<any>(key, defaultState)
+            : this.globalLayoutStorage.get<any>(key, defaultState);
+      } else {
+        storedState = LAYOUT_STATE.isScoped(key)
+          ? this.layoutStorage.get<any>(key, defaultState)
+          : this.globalLayoutStorage.get<any>(key, defaultState);
+      }
+    } catch (err) {
+      this.logger.warn('Layout state parse error, use default state');
+      storedState = defaultState;
+    }
+    return storedState;
+  }
+
+  setState(key: string, state: object) {
+    this.debounceSave(key, state);
+  }
+
+  private debounceSave = debounce((key, state) => {
+    this.setStorageValue(
+      key,
+      state,
+      LAYOUT_STATE.isScoped(key) ||
+        (this.saveLayoutWithWorkspace && (LAYOUT_STATE.isLayout(key) || LAYOUT_STATE.isStatusBar(key))),
+    );
+  }, 60);
+
+  private setStorageValue(key: string, state: object, scope?: boolean) {
+    if (scope) {
+      this.layoutStorage.set(key, state);
+    } else {
+      this.globalLayoutStorage.set(key, state);
+    }
+    if (LAYOUT_STATE.isLayout(key)) {
+      localStorage.setItem(key, JSON.stringify(state));
+    }
+  }
+}
+
+export namespace LAYOUT_STATE {
+  export const MAIN = 'layout';
+
+  export const STATUSBAR = 'statusbar';
+
+  export function getContainerSpace(containerId: string) {
+    return `view/${containerId}`;
+  }
+
+  export function isScoped(key: string) {
+    return key.startsWith('view/');
+  }
+
+  export function isLayout(key: string) {
+    return key.startsWith(LAYOUT_STATE.MAIN);
+  }
+
+  export function isStatusBar(key: string) {
+    return key.startsWith(LAYOUT_STATE.STATUSBAR);
+  }
+
+  export function getTabbarSpace(location: string) {
+    return `tabbar/${location}`;
+  }
+}

package/src/layout/layout.interface.ts

@@ -0,0 +1,101 @@
+import type React from 'react';
+
+import { MaybeNull, BasicEvent } from '@opensumi/ide-core-common';
+
+import type { IMenu, IContextMenu } from '../menu/next';
+import type { SlotLocation } from '../react-providers';
+
+export type Side = 'left' | 'right' | 'bottom';
+
+export interface TabbarState {
+  containerId: string;
+  hidden: boolean;
+}
+export interface SideState {
+  currentIndex: number;
+  size: number;
+
+  // 给底部panel，左右侧由currentIndex映射、尺寸使用size
+  collapsed?: boolean;
+  relativeSize?: number[];
+
+  expanded?: boolean;
+  tabbars: TabbarState[];
+}
+
+export interface SideStateManager {
+  [side: string]: MaybeNull<SideState>;
+}
+
+export interface View {
+  id: string;
+  name?: string;
+  description?: string;
+  message?: string;
+  weight?: number;
+  priority?: number;
+  collapsed?: boolean;
+  hidden?: boolean;
+  component?: React.ComponentType<any>;
+  // 使用该参数时, view 的 toolbar 默认不渲染
+  noToolbar?: boolean;
+  initialProps?: any;
+  titleMenu?: IMenu | IContextMenu;
+  titleMenuContext?: any;
+  when?: string;
+}
+
+export interface ViewContainerOptions extends ExtViewContainerOptions {
+  containerId: string;
+}
+export interface ExtViewContainerOptions {
+  iconClass?: string;
+  priority?: number;
+  containerId?: string;
+  // 左右侧及底部面板必传
+  title?: string;
+  expanded?: boolean;
+  size?: number;
+  activateKeyBinding?: string;
+  hidden?: boolean;
+  badge?: string;
+  // 直接使用自定义的React组件，会失去一些对面板的控制能力
+  component?: React.ComponentType<any>;
+  // 使用自定义组件时可以传入，否则请作为View的一部分传入
+  initialProps?: object;
+  // 自定义标题组件
+  titleComponent?: React.ComponentType<any>;
+  // 自定义titleComponent时可选传入
+  titleProps?: object;
+  // 若views为空，则不显示该container
+  hideIfEmpty?: boolean;
+  // 隐藏tab图标，仅挂载视图，视图切换交给其他逻辑控制
+  hideTab?: boolean;
+  noResize?: boolean;
+  fromExtension?: boolean;
+  // viewContainer 最小高度，默认 120
+  miniSize?: number;
+}
+export const ComponentRegistry = Symbol('ComponentRegistry');
+
+export interface ComponentRegistry {
+  register(key: string, views: View | View[], options?: ExtViewContainerOptions, location?: SlotLocation): void;
+
+  getComponentRegistryInfo(key: string): ComponentRegistryInfo | undefined;
+}
+
+export interface ComponentRegistryInfo {
+  views: View[];
+  options?: ViewContainerOptions;
+}
+
+export class ResizePayload {
+  /**
+   * Resize事件，会在用户拖动resize或窗口resize时触发
+   * @param slotLocation 可能为slot或viewId
+   */
+  constructor(public slotLocation: SlotLocation) {}
+}
+export class ResizeEvent extends BasicEvent<ResizePayload> {}
+
+export class RenderedEvent extends BasicEvent<void> {}

package/src/layout/layout.ts

@@ -0,0 +1,80 @@
+import { Autowired, Injectable } from '@opensumi/di';
+import { BasicEvent, getDebugLogger } from '@opensumi/ide-core-common';
+
+import { SlotLocation, AppConfig } from '../react-providers';
+
+import { ComponentRegistry, ComponentRegistryInfo, View, ViewContainerOptions } from './layout.interface';
+
+export class VisibleChangedPayload {
+  constructor(public isVisible: boolean, public slotLocation: SlotLocation) {}
+}
+
+export class VisibleChangedEvent extends BasicEvent<VisibleChangedPayload> {}
+
+export function measurePriority(weights: number[], weight?: number): number {
+  if (!weights.length) {
+    weights.splice(0, 0, weight || 0);
+    return 0;
+  }
+  let i = weights.length - 1;
+  if (!weight) {
+    weights.splice(i + 1, 0, 0);
+    return i + 1;
+  }
+  for (; i >= 0; i--) {
+    if (weight < weights[i]) {
+      break;
+    }
+  }
+  weights.splice(i + 1, 0, weight);
+  return i + 1;
+}
+
+@Injectable()
+export class ComponentRegistryImpl implements ComponentRegistry {
+  componentsMap: Map<string, ComponentRegistryInfo> = new Map();
+
+  @Autowired(AppConfig)
+  private config: AppConfig;
+
+  register(key: string, views: View | View[], options?: ViewContainerOptions, location?: SlotLocation) {
+    if (Array.isArray(views)) {
+      this.componentsMap.set(key, {
+        views,
+        options,
+      });
+    } else {
+      this.componentsMap.set(key, {
+        views: [views],
+        options,
+      });
+    }
+    // deprecated, use layout config instead
+    if (location) {
+      let targetLocation = this.config.layoutConfig[location];
+      if (!targetLocation) {
+        targetLocation = {
+          modules: [],
+        };
+        this.config.layoutConfig[location] = targetLocation;
+      }
+      if (targetLocation.modules.indexOf(key) > -1) {
+        getDebugLogger().warn(`A ${key} module already exists on the ${location}`);
+        return;
+      }
+      targetLocation.modules.push(key);
+    }
+  }
+
+  getComponentRegistryInfo(key): ComponentRegistryInfo | undefined {
+    const componentRegistryInfo = this.componentsMap.get(key);
+    return componentRegistryInfo;
+  }
+}
+
+export interface ComponentContribution {
+  // 将组件绑定到一个字符串
+  registerComponent(registry: ComponentRegistry): void;
+}
+
+export const ComponentContribution = Symbol('ComponentContribution');

package/src/layout/view-id.ts

@@ -0,0 +1,18 @@
+const VIEW_CONTAINERS_PREFIX = 'opensumi';
+
+export namespace VIEW_CONTAINERS {
+  export const LEFT_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-left-tabbar-panel`;
+  export const LEFT_TABBAR = `${VIEW_CONTAINERS_PREFIX}-left-tabbar`;
+  export const RIGHT_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-right-tabbar-panel`;
+  export const RIGHT_TABBAR = `${VIEW_CONTAINERS_PREFIX}-right-tabbar`;
+  export const BOTTOM_TABBAR = `${VIEW_CONTAINERS_PREFIX}-bottom-tabbar`;
+  export const BOTTOM_TABBAR_PANEL = `${VIEW_CONTAINERS_PREFIX}-bottom-tabbar-panel`;
+  export const STATUSBAR = `${VIEW_CONTAINERS_PREFIX}-statusbar`;
+  export const MENUBAR = `${VIEW_CONTAINERS_PREFIX}-menubar`;
+  export const EDITOR = `${VIEW_CONTAINERS_PREFIX}-editor`;
+  export const EDITOR_TABS = `${VIEW_CONTAINERS_PREFIX}-editor-tabs`;
+  export const QUICKPICK = `${VIEW_CONTAINERS_PREFIX}-quickpick`;
+  export const QUICKPICK_INPUT = `${VIEW_CONTAINERS_PREFIX}-quickpick-input`;
+  export const QUICKPICK_TABS = `${VIEW_CONTAINERS_PREFIX}-quickpick-tabs`;
+  export const QUICKPICK_ITEM = `${VIEW_CONTAINERS_PREFIX}-quickpick-item`;
+}

package/src/logger/browser-logger.ts

@@ -0,0 +1,51 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { ILoggerManagerClient, SupportLogNamespace, ILogServiceClient, LogLevel } from '@opensumi/ide-core-common';
+
+export { ILogger } from '@opensumi/ide-core-common';
+
+@Injectable()
+export class Logger implements ILogServiceClient {
+  @Autowired(ILoggerManagerClient)
+  private LoggerManager: ILoggerManagerClient;
+
+  private logger: ILogServiceClient;
+
+  constructor() {
+    this.logger = this.LoggerManager.getLogger(SupportLogNamespace.Browser);
+  }
+
+  public getLevel() {
+    return this.getLevel();
+  }
+
+  public setLevel(level: LogLevel) {
+    return this.logger.setLevel(level);
+  }
+
+  public error(...args) {
+    return this.logger.error(...args);
+  }
+
+  public warn(...args) {
+    return this.logger.warn(...args);
+  }
+
+  public log(...args) {
+    return this.logger.log(...args);
+  }
+  public debug(...args) {
+    return this.logger.debug(...args);
+  }
+
+  public verbose(...args) {
+    return this.logger.verbose(...args);
+  }
+
+  public critical(...args) {
+    return this.logger.critical(...args);
+  }
+
+  public dispose() {
+    return this.logger.dispose();
+  }
+}

package/src/logger/index.ts

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

package/src/markdown/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import { DATA_SET_COMMAND, RenderWrapper } from '@opensumi/ide-components/lib/markdown/render';
+import { createMarkedRenderer, toMarkdownHtml as toHtml } from '@opensumi/ide-components/lib/utils';
+
+import { IOpenerService } from '../opener';
+
+export const toMarkdown = (message: string | React.ReactNode, opener?: IOpenerService): React.ReactNode =>
+  typeof message === 'string' ? (
+    <RenderWrapper opener={opener} html={toMarkdownHtml(message)}></RenderWrapper>
+  ) : (
+    message
+  );
+
+export const toMarkdownHtml = (message: string): string => {
+  const renderer = createMarkedRenderer();
+
+  renderer.link = (href, title, text) =>
+    `<a rel="noopener" ${DATA_SET_COMMAND}="${href}" href="javascript:void(0)" title="${title}">${text}</a>`;
+
+  return toHtml(message, {
+    gfm: true,
+    breaks: false,
+    pedantic: false,
+    sanitize: true,
+    smartLists: true,
+    smartypants: false,
+    renderer,
+  });
+};