@opensumi/ide-editor 2.21.13 → 2.22.0

package/src/browser/monaco-contrib/typeHierarchy/typeHierarchy.contribution.ts

@@ -0,0 +1,78 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  CommandContribution,
+  CommandRegistry,
+  Event,
+  IContextKeyService,
+  IContextKey,
+  Uri,
+} from '@opensumi/ide-core-browser';
+import { RawContextKey } from '@opensumi/ide-core-browser/lib/raw-context-key';
+import {
+  ITypeHierarchyService,
+  TypeHierarchyProviderRegistry,
+  TypeHierarchyItem,
+} from '@opensumi/ide-monaco/lib/browser/contrib/typeHierarchy';
+import { Position } from '@opensumi/monaco-editor-core/esm/vs/editor/common/core/position';
+
+import { BrowserEditorContribution, IEditor, IEditorFeatureRegistry } from '../../types';
+
+export const executePrepareTypeHierarchyCommand = {
+  id: '_executePrepareTypeHierarchy',
+};
+
+export const executeProvideSupertypesCommand = {
+  id: '_executeProvideSupertypes',
+};
+
+export const executeProvideSubtypesCommand = {
+  id: '_executeProvideSubtypes',
+};
+
+const _ctxHasCallHierarchyProvider = new RawContextKey<boolean>('editorHasCallHierarchyProvider', false);
+
+@Domain(CommandContribution, BrowserEditorContribution)
+export class TypeHierarchyContribution implements CommandContribution, BrowserEditorContribution {
+  private ctxHasProvider: IContextKey<boolean>;
+
+  @Autowired(IContextKeyService)
+  protected readonly contextKeyService: IContextKeyService;
+
+  @Autowired(ITypeHierarchyService)
+  protected readonly typeHierarchyService: ITypeHierarchyService;
+
+  registerCommands(commands: CommandRegistry) {
+    commands.registerCommand(executePrepareTypeHierarchyCommand, {
+      execute: (resource: Uri, position: Position) =>
+        this.typeHierarchyService.prepareTypeHierarchyProvider(resource, position),
+    });
+
+    commands.registerCommand(executeProvideSupertypesCommand, {
+      execute: (item: TypeHierarchyItem) => this.typeHierarchyService.provideSupertypes(item),
+    });
+
+    commands.registerCommand(executeProvideSubtypesCommand, {
+      execute: (item: TypeHierarchyItem) => this.typeHierarchyService.provideSubtypes(item),
+    });
+  }
+
+  registerEditorFeature(registry: IEditorFeatureRegistry) {
+    this.ctxHasProvider = _ctxHasCallHierarchyProvider.bind(this.contextKeyService);
+
+    registry.registerEditorFeatureContribution({
+      contribute: (editor: IEditor) => {
+        const monacoEditor = editor.monacoEditor;
+        return Event.any<any>(
+          monacoEditor.onDidChangeModel,
+          monacoEditor.onDidChangeModelLanguage,
+          TypeHierarchyProviderRegistry.onDidChange,
+        )(() => {
+          if (monacoEditor.hasModel()) {
+            this.ctxHasProvider.set(TypeHierarchyProviderRegistry.has(monacoEditor.getModel()));
+          }
+        });
+      },
+    });
+  }
+}

package/src/browser/monaco-contrib/typeHierarchy/typeHierarchy.service.ts

@@ -0,0 +1,154 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  CancellationToken,
+  IPosition,
+  IDisposable,
+  arrays,
+  RefCountedDisposable,
+  onUnexpectedExternalError,
+  URI,
+  Uri,
+} from '@opensumi/ide-core-common';
+import {
+  TypeHierarchyItem,
+  ITypeHierarchyService,
+  TypeHierarchyProvider,
+  TypeHierarchyProviderRegistry,
+} from '@opensumi/ide-monaco/lib/browser/contrib/typeHierarchy';
+import { ITextModel, Position } from '@opensumi/ide-monaco/lib/browser/monaco-api/types';
+
+import { IEditorDocumentModelService } from '../../doc-model/types';
+
+const { isNonEmptyArray } = arrays;
+
+export class TypeHierarchyModel {
+  static async create(
+    model: ITextModel,
+    position: IPosition,
+    token: CancellationToken,
+  ): Promise<TypeHierarchyModel | undefined> {
+    const [provider] = TypeHierarchyProviderRegistry.ordered(model);
+    if (!provider) {
+      return undefined;
+    }
+    const session = await provider.prepareTypeHierarchy(model, position, token);
+    if (!session) {
+      return undefined;
+    }
+    return new TypeHierarchyModel(
+      session.roots.reduce((p, c) => p + c._sessionId, ''),
+      provider,
+      session.roots,
+      new RefCountedDisposable(session),
+    );
+  }
+
+  readonly root: TypeHierarchyItem;
+
+  private constructor(
+    readonly id: string,
+    readonly provider: TypeHierarchyProvider,
+    readonly roots: TypeHierarchyItem[],
+    readonly ref: RefCountedDisposable,
+  ) {
+    this.root = roots[0];
+  }
+
+  dispose(): void {
+    this.ref.release();
+  }
+
+  fork(item: TypeHierarchyItem): TypeHierarchyModel {
+    const that = this;
+    return new (class extends TypeHierarchyModel {
+      constructor() {
+        super(that.id, that.provider, [item], that.ref.acquire());
+      }
+    })();
+  }
+
+  async provideSupertypes(item: TypeHierarchyItem, token: CancellationToken): Promise<TypeHierarchyItem[]> {
+    try {
+      const result = await this.provider.provideSupertypes(item, token);
+      if (isNonEmptyArray(result)) {
+        return result;
+      }
+    } catch (e) {
+      onUnexpectedExternalError(e);
+    }
+    return [];
+  }
+
+  async provideSubtypes(item: TypeHierarchyItem, token: CancellationToken): Promise<TypeHierarchyItem[]> {
+    try {
+      const result = await this.provider.provideSubtypes(item, token);
+      if (isNonEmptyArray(result)) {
+        return result;
+      }
+    } catch (e) {
+      onUnexpectedExternalError(e);
+    }
+    return [];
+  }
+}
+
+@Injectable()
+export class TypeHierarchyService implements ITypeHierarchyService {
+  @Autowired(IEditorDocumentModelService)
+  protected readonly modelService: IEditorDocumentModelService;
+
+  private models: Map<string, TypeHierarchyModel> = new Map<string, TypeHierarchyModel>();
+
+  registerTypeHierarchyProvider(selector: any, provider: TypeHierarchyProvider) {
+    TypeHierarchyProviderRegistry.register(selector, provider);
+  }
+
+  async prepareTypeHierarchyProvider(resource: Uri, position: Position) {
+    let textModel = this.modelService.getModelReference(URI.parse(resource.toString()))?.instance.getMonacoModel();
+    let textModelReference: IDisposable | undefined;
+    if (!textModel) {
+      const result = await this.modelService.createModelReference(URI.parse(resource.toString()));
+      textModel = result.instance.getMonacoModel();
+      textModelReference = result;
+    }
+
+    try {
+      const model = await TypeHierarchyModel.create(textModel, position, CancellationToken.None);
+      if (!model) {
+        return [];
+      }
+
+      this.models.set(model.id, model);
+      this.models.forEach((value, key, map) => {
+        if (map.size > 10) {
+          value.dispose();
+          this.models.delete(key);
+        }
+      });
+
+      return [model.root];
+    } finally {
+      textModelReference?.dispose();
+    }
+  }
+
+  async provideSupertypes(item: TypeHierarchyItem) {
+    // find model
+    const model = this.models.get(item._sessionId);
+    if (!model) {
+      return undefined;
+    }
+
+    return model.provideSupertypes(item, CancellationToken.None);
+  }
+
+  async provideSubtypes(item: TypeHierarchyItem) {
+    // find model
+    const model = this.models.get(item._sessionId);
+    if (!model) {
+      return undefined;
+    }
+
+    return model.provideSubtypes(item, CancellationToken.None);
+  }
+}

package/src/browser/navigation.module.less

@@ -0,0 +1,96 @@
+@import '~@opensumi/ide-components/lib/style/mixins.less';
+
+.navigation_container {
+  display: flex;
+  align-items: center;
+  overflow: auto;
+  height: 24px;
+  padding-left: 6px;
+  border-bottom: 1px solid var(--kt-editorBreadcrumb-borderDown);
+
+  &::-webkit-scrollbar {
+    display: none !important;
+    background: rgb(50, 50, 50);
+  }
+
+  .navigation_icon {
+    font-size: 12px;
+    color: var(--breadcrumb-foreground);
+  }
+  .navigation-part {
+    color: var(--breadcrumb-foreground);
+    font-size: 12px;
+    padding: 0 4px;
+    position: relative;
+    line-height: 22px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
+
+    > span:first-child {
+      font-size: 14px;
+      vertical-align: middle;
+      padding-right: 5px;
+
+      &::before {
+        background-size: 12px;
+      }
+    }
+    &:hover {
+      color: var(--breadcrumb-focusForeground);
+    }
+    &:first-child {
+      &::before {
+        content: none;
+      }
+      &::after {
+        content: none;
+      }
+    }
+  }
+}
+
+.navigation_menu {
+  position: fixed;
+  background: var(--breadcrumb-background);
+  width: 350px;
+  .overlay-shadow();
+  .navigation_menu_items {
+    .navigation_menu_item {
+      padding-right: 20px;
+      position: relative;
+      padding-left: 5px;
+      cursor: pointer;
+      height: 22px;
+      display: flex;
+      align-items: center;
+
+      .navigation_menu_item_label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        font-size: 12px;
+      }
+
+      &:hover {
+        background: var(--list-hoverBackground);
+      }
+      > span:first-child {
+        font-size: 14px;
+        vertical-align: middle;
+        padding-right: 5px;
+        line-height: 20px;
+      }
+      .navigation_right {
+        position: absolute;
+        right: 0;
+        width: 20px;
+      }
+      &.navigation_menu_item_current {
+        background: var(--list-focusBackground);
+      }
+    }
+  }
+}

package/src/browser/navigation.view.tsx

@@ -0,0 +1,254 @@
+import classnames from 'classnames';
+import { observable } from 'mobx';
+import { observer } from 'mobx-react-lite';
+import React, { useCallback, useEffect, useRef, memo } from 'react';
+
+import { Injectable } from '@opensumi/di';
+import { Icon } from '@opensumi/ide-components';
+import { Scrollbars } from '@opensumi/ide-components';
+import { useInjectable, DomListener, Disposable, useUpdateOnEvent } from '@opensumi/ide-core-browser';
+import { getIcon } from '@opensumi/ide-core-browser';
+
+import styles from './navigation.module.less';
+import { IBreadCrumbService, IBreadCrumbPart } from './types';
+import { useUpdateOnGroupTabChange } from './view/react-hook';
+import { EditorGroup } from './workbench-editor.service';
+
+export const NavigationBar = ({ editorGroup }: { editorGroup: EditorGroup }) => {
+  const breadCrumbService = useInjectable(IBreadCrumbService) as IBreadCrumbService;
+
+  useUpdateOnGroupTabChange(editorGroup);
+
+  useUpdateOnEvent(breadCrumbService.onDidUpdateBreadCrumbResults, [], (e) => {
+    const editor =
+      editorGroup.currentEditor && editorGroup.currentEditor.currentDocumentModel ? editorGroup.currentEditor : null;
+    const uri =
+      editorGroup.currentEditor && editorGroup.currentEditor.currentDocumentModel
+        ? editorGroup.currentEditor.currentDocumentModel!.uri
+        : editorGroup.currentResource?.uri;
+    return !!uri && e.editor === editor && e.uri.isEqual(uri);
+  });
+
+  if (editorGroup.resources.length === 0 || !editorGroup.currentResource) {
+    return null;
+  }
+
+  let parts: IBreadCrumbPart[] | undefined;
+  if (editorGroup.currentEditor && editorGroup.currentEditor.currentDocumentModel) {
+    parts = breadCrumbService.getBreadCrumbs(
+      editorGroup.currentEditor.currentDocumentModel!.uri,
+      editorGroup.currentEditor,
+    );
+  } else {
+    parts = breadCrumbService.getBreadCrumbs(editorGroup.currentResource.uri, null);
+  }
+
+  if (!parts) {
+    return null;
+  }
+  return parts.length === 0 ? null : (
+    <div className={styles.navigation_container}>
+      {parts.map((p, i) => (
+        <React.Fragment key={i + '-crumb:' + p.name}>
+          {i > 0 && <Icon icon={'right'} size='small' className={styles.navigation_icon} />}
+          <NavigationItem part={p} />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+export const NavigationItem = memo(({ part }: { part: IBreadCrumbPart }) => {
+  const viewService = useInjectable(NavigationBarViewService) as NavigationBarViewService;
+  const itemRef = useRef<HTMLSpanElement>();
+
+  const onClick = useCallback(async () => {
+    if (part.getSiblings && itemRef.current) {
+      const { left, top, height } = itemRef.current.getBoundingClientRect();
+      const siblings = await part.getSiblings!();
+      let leftPos = left;
+      if (window.innerWidth - leftPos < 200 + 10) {
+        // 放左边
+        leftPos = window.innerWidth - 200 - 5;
+      }
+      viewService.showMenu(siblings.parts, leftPos, top + height + 5, siblings.currentIndex);
+    }
+  }, [itemRef.current, part]);
+
+  return (
+    <span onClick={onClick} className={styles['navigation-part']} ref={itemRef as any}>
+      {part.icon && <span className={part.icon}></span>}
+      <span>{part.name}</span>
+    </span>
+  );
+});
+
+export const NavigationMenu = observer(({ model }: { model: NavigationMenuModel }) => {
+  let maxHeight = window.innerHeight - model.y - 20;
+  let top = model.y;
+  const height = model.parts.length * 22;
+  if (maxHeight < 100 && maxHeight < height) {
+    maxHeight = 100;
+    top = window.innerHeight - 20 - maxHeight;
+  }
+
+  const scrollerContainer = useRef<HTMLDivElement | null>();
+
+  const viewService = useInjectable(NavigationBarViewService) as NavigationBarViewService;
+
+  const scrollToCurrent = useCallback(() => {
+    if (scrollerContainer.current) {
+      try {
+        const current = scrollerContainer.current.querySelector(`.${styles.navigation_menu_item_current}`);
+        if (current) {
+          current.scrollIntoView({ behavior: 'auto', block: 'center' });
+        }
+      } catch (e) {
+        // noop
+      }
+    }
+  }, [scrollerContainer.current]);
+
+  return (
+    <div
+      className={styles.navigation_menu}
+      style={{
+        left: model.x + 'px',
+        top: top + 'px',
+        maxHeight: maxHeight + 'px',
+        height: height + 'px',
+      }}
+    >
+      <Scrollbars
+        className={styles.navigation_menu_items}
+        forwardedRef={(el) => {
+          scrollerContainer.current = el;
+          scrollToCurrent();
+        }}
+      >
+        {model.parts.map((p, i) => {
+          let itemRef: HTMLDivElement | null;
+          const clickToGetChild = p.getChildren
+            ? async () => {
+                if (itemRef) {
+                  const { left, top, width } = itemRef.getBoundingClientRect();
+                  let nextLeft = left + width + 5;
+                  if (window.innerWidth - nextLeft < 200 + 10) {
+                    // 放左边
+                    nextLeft = left - width - 5;
+                  }
+                  model.showSubMenu(await p.getChildren!(), nextLeft, top);
+                }
+              }
+            : undefined;
+
+          const clickToNavigate = p.onClick
+            ? () => {
+                p.onClick!();
+                viewService.dispose();
+              }
+            : undefined;
+          return (
+            <div
+              onClick={clickToNavigate || clickToGetChild}
+              ref={(el) => (itemRef = el)}
+              className={classnames(styles.navigation_menu_item, {
+                [styles.navigation_menu_item_current]: i === model.initialIndex,
+              })}
+              key={'menu-' + p.name}
+            >
+              <span className={p.icon || getIcon('smile')}></span>
+              <span className={styles.navigation_menu_item_label}>{p.name}</span>
+              {p.getChildren && (
+                <span
+                  className={styles.navigation_right}
+                  onClick={
+                    // 如果两个都存在，点右侧按钮为展开，点击名称为导航至
+                    clickToNavigate && clickToGetChild
+                      ? (e) => {
+                          e.stopPropagation();
+                          clickToGetChild();
+                        }
+                      : undefined
+                  }
+                >
+                  <Icon icon={'right'} size='small' />
+                </span>
+              )}
+            </div>
+          );
+        })}
+      </Scrollbars>
+      {model.subMenu && <NavigationMenu model={model.subMenu} />}
+    </div>
+  );
+});
+
+export const NavigationMenuContainer = observer(() => {
+  const viewService = useInjectable(NavigationBarViewService) as NavigationBarViewService;
+  const menuRef = useRef<HTMLDivElement>();
+
+  useEffect(() => {
+    if (menuRef.current) {
+      const disposer = new Disposable();
+      disposer.addDispose(
+        new DomListener(window, 'mouseup', () => {
+          viewService.dispose();
+        }),
+      );
+      disposer.addDispose(
+        new DomListener(menuRef.current, 'mouseup', (event) => {
+          event.stopPropagation();
+        }),
+      );
+      return disposer.dispose.bind(disposer);
+    }
+  });
+
+  if (!viewService.current) {
+    return null;
+  } else {
+    return (
+      <div tabIndex={1} ref={menuRef as any}>
+        <NavigationMenu model={viewService.current} />
+      </div>
+    );
+  }
+});
+
+@Injectable()
+export class NavigationBarViewService {
+  @observable.ref current: NavigationMenuModel | undefined;
+
+  showMenu(parts: IBreadCrumbPart[], x, y, currentIndex) {
+    this.current = new NavigationMenuModel(parts, x, y, currentIndex);
+  }
+
+  dispose() {
+    if (this.current) {
+      this.current.dispose();
+    }
+    this.current = undefined;
+  }
+}
+
+export class NavigationMenuModel {
+  @observable.ref subMenu?: NavigationMenuModel;
+
+  constructor(
+    public readonly parts: IBreadCrumbPart[],
+    public readonly x,
+    public readonly y,
+    public readonly initialIndex: number = -1,
+  ) {}
+
+  showSubMenu(parts: IBreadCrumbPart[], x, y) {
+    this.subMenu = new NavigationMenuModel(parts, x, y);
+  }
+
+  dispose() {
+    if (this.subMenu) {
+      this.subMenu.dispose();
+    }
+    this.subMenu = undefined;
+  }
+}

package/src/browser/preference/contribution.ts

@@ -0,0 +1,8 @@
+import { PreferenceContribution, Domain, ClientAppContribution } from '@opensumi/ide-core-browser';
+
+import { editorPreferenceSchema } from './schema';
+
+@Domain(PreferenceContribution, ClientAppContribution)
+export class EditorPreferenceContribution implements PreferenceContribution {
+  schema = editorPreferenceSchema;
+}