@opensumi/ide-outline 2.21.13 → 2.22.0

package/src/browser/outline.contribution.ts

@@ -0,0 +1,146 @@
+import { Autowired } from '@opensumi/di';
+import {
+  OUTLINE_COMMANDS,
+  Domain,
+  localize,
+  TabBarToolbarContribution,
+  ToolbarRegistry,
+  CommandContribution,
+  CommandRegistry,
+  IContextKeyService,
+} from '@opensumi/ide-core-browser';
+import { getIcon } from '@opensumi/ide-core-browser';
+import { OutlineSortTypeContext, OutlineFollowCursorContext } from '@opensumi/ide-core-browser/lib/contextkey';
+import { EXPLORER_CONTAINER_ID } from '@opensumi/ide-explorer/lib/browser/explorer-contribution';
+import { MainLayoutContribution, IMainLayoutService } from '@opensumi/ide-main-layout';
+
+import { OutlineSortOrder, OUTLINE_VIEW_ID } from '../common';
+
+import { OutlinePanel } from './outline';
+import { OutlineModelService } from './services/outline-model.service';
+import { OutlineTreeService } from './services/outline-tree.service';
+
+@Domain(MainLayoutContribution, TabBarToolbarContribution, CommandContribution)
+export class OutlineContribution implements MainLayoutContribution, TabBarToolbarContribution, CommandContribution {
+  @Autowired(IMainLayoutService)
+  private mainLayoutService: IMainLayoutService;
+
+  @Autowired()
+  private outlineTreeService: OutlineTreeService;
+
+  @Autowired()
+  private outlineTreeModelService: OutlineModelService;
+
+  @Autowired(IContextKeyService)
+  contextKey: IContextKeyService;
+
+  onDidRender() {
+    this.mainLayoutService.collectViewComponent(
+      {
+        component: OutlinePanel,
+        collapsed: true,
+        id: OUTLINE_VIEW_ID,
+        name: localize('outline.title'),
+      },
+      EXPLORER_CONTAINER_ID,
+    );
+  }
+
+  registerCommands(registry: CommandRegistry) {
+    registry.registerCommand(
+      {
+        id: OUTLINE_COMMANDS.OUTLINE_COLLAPSE_ALL.id,
+        iconClass: getIcon('collapse-all'),
+        label: localize('outline.collapse.all'),
+      },
+      {
+        execute: () => {
+          this.outlineTreeModelService.collapseAll();
+        },
+      },
+    );
+    registry.registerCommand(
+      {
+        id: OUTLINE_COMMANDS.OUTLINE_FOLLOW_CURSOR.id,
+        iconClass: getIcon('follow-cursor'),
+        toogleIconClass: getIcon('follow-cursor', { fill: true }),
+        label: localize('outline.follow.cursor'),
+      },
+      {
+        execute: () => {
+          this.outlineTreeService.followCursor = !this.outlineTreeService.followCursor;
+        },
+      },
+    );
+    registry.registerCommand(
+      {
+        id: OUTLINE_COMMANDS.OUTLINE_SORT_KIND.id,
+        label: localize('outline.sort.kind'),
+      },
+      {
+        execute: () => {
+          this.outlineTreeService.sortType = OutlineSortOrder.ByKind;
+        },
+      },
+    );
+    registry.registerCommand(
+      {
+        id: OUTLINE_COMMANDS.OUTLINE_SORT_NAME.id,
+        label: localize('outline.sort.name'),
+      },
+      {
+        execute: () => {
+          this.outlineTreeService.sortType = OutlineSortOrder.ByName;
+        },
+      },
+    );
+    registry.registerCommand(
+      {
+        id: OUTLINE_COMMANDS.OUTLINE_SORT_POSITION.id,
+        label: localize('outline.sort.position'),
+      },
+      {
+        execute: () => {
+          this.outlineTreeService.sortType = OutlineSortOrder.ByPosition;
+        },
+      },
+    );
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry) {
+    registry.registerItem({
+      id: 'outline.action.follow.cursor',
+      viewId: 'outline-view',
+      command: OUTLINE_COMMANDS.OUTLINE_FOLLOW_CURSOR.id,
+      label: localize('outline.follow.cursor'),
+      toggledWhen: OutlineFollowCursorContext.raw,
+    });
+    registry.registerItem({
+      id: 'outline.action.collapse.all',
+      viewId: 'outline-view',
+      command: OUTLINE_COMMANDS.OUTLINE_COLLAPSE_ALL.id,
+      label: localize('outline.collapse.all'),
+    });
+    registry.registerItem({
+      id: 'outline.menu.sort.kind',
+      viewId: 'outline-view',
+      command: OUTLINE_COMMANDS.OUTLINE_SORT_KIND.id,
+      group: 'inline',
+      toggledWhen: `${OutlineSortTypeContext.raw} == ${OutlineSortOrder.ByKind}`,
+    });
+    registry.registerItem({
+      id: 'outline.menu.sort.name',
+      viewId: 'outline-view',
+      command: OUTLINE_COMMANDS.OUTLINE_SORT_NAME.id,
+      group: 'inline',
+      toggledWhen: `${OutlineSortTypeContext.raw} == ${OutlineSortOrder.ByName}`,
+    });
+    registry.registerItem({
+      id: 'outline.menu.sort.position',
+      viewId: 'outline-view',
+      command: OUTLINE_COMMANDS.OUTLINE_SORT_POSITION.id,
+      group: 'inline',
+      toggledWhen: `${OutlineSortTypeContext.raw} == ${OutlineSortOrder.ByPosition}`,
+    });
+  }
+}

package/src/browser/outline.module.less

@@ -0,0 +1,11 @@
+.outline_empty_text {
+  display: block;
+  text-align: center;
+  padding-top: 12px;
+  user-select: none;
+  color: var(--descriptionForeground);
+}
+
+.outline_container {
+  overflow: hidden;
+}

package/src/browser/outline.tsx

@@ -0,0 +1,159 @@
+import React, {
+  PropsWithChildren,
+  useCallback,
+  RefObject,
+  MouseEvent,
+  useState,
+  createRef,
+  useEffect,
+  memo,
+} from 'react';
+
+import { RecycleTree, IRecycleTreeHandle, INodeRendererWrapProps, TreeNodeType } from '@opensumi/ide-components';
+import { ViewState } from '@opensumi/ide-core-browser';
+import { localize } from '@opensumi/ide-core-browser';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks';
+
+import { OUTLINE_TREE_NODE_HEIGHT, OutlineNode } from './outline-node';
+import { OutlineCompositeTreeNode, OutlineTreeNode } from './outline-node.define';
+import styles from './outline.module.less';
+import { OutlineTreeModel } from './services/outline-model';
+import { OutlineModelService } from './services/outline-model.service';
+
+export const OutlinePanel = ({ viewState }: PropsWithChildren<{ viewState: ViewState }>) => {
+  const [model, setModel] = useState<OutlineTreeModel | undefined>();
+
+  const { height } = viewState;
+
+  const wrapperRef: RefObject<HTMLDivElement> = createRef();
+
+  const outlineModelService = useInjectable<OutlineModelService>(OutlineModelService);
+
+  const handleTreeReady = useCallback(
+    (handle: IRecycleTreeHandle) => {
+      outlineModelService.handleTreeHandler({
+        ...handle,
+        getModel: () => outlineModelService.treeModel,
+        hasDirectFocus: () => wrapperRef.current === document.activeElement,
+      });
+    },
+    [outlineModelService, wrapperRef.current],
+  );
+
+  const handleItemClicked = useCallback(
+    (ev: MouseEvent, item: OutlineTreeNode | OutlineCompositeTreeNode, type: TreeNodeType) => {
+      // 阻止点击事件冒泡
+      ev.stopPropagation();
+
+      const { handleItemClick } = outlineModelService;
+      if (!item) {
+        return;
+      }
+      handleItemClick(item, type);
+    },
+    [outlineModelService],
+  );
+
+  const handleTwistierClicked = useCallback(
+    (ev: MouseEvent, item: OutlineTreeNode | OutlineCompositeTreeNode) => {
+      // 阻止点击事件冒泡
+      ev.stopPropagation();
+
+      const { toggleDirectory } = outlineModelService;
+      if (!item) {
+        return;
+      }
+      toggleDirectory(item as OutlineCompositeTreeNode);
+    },
+    [outlineModelService],
+  );
+
+  const handleOuterClick = useCallback(() => {
+    // 空白区域点击，取消焦点状态
+    const { enactiveNodeDecoration } = outlineModelService;
+    enactiveNodeDecoration();
+  }, [outlineModelService]);
+
+  useEffect(() => {
+    setModel(outlineModelService.treeModel);
+    const disposable = outlineModelService.onDidUpdateTreeModel((model?: OutlineTreeModel) => {
+      setModel(model);
+    });
+    return () => {
+      disposable.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleBlur = () => {
+      outlineModelService.handleTreeBlur();
+    };
+    wrapperRef.current?.addEventListener('blur', handleBlur, true);
+    return () => {
+      wrapperRef.current?.removeEventListener('blur', handleBlur, true);
+      outlineModelService.handleTreeBlur();
+    };
+  }, [wrapperRef.current]);
+
+  return (
+    <div className={styles.outline_container} tabIndex={-1} ref={wrapperRef} onClick={handleOuterClick}>
+      <OutlineTreeView
+        height={height}
+        model={model}
+        onItemClick={handleItemClicked}
+        onTwistierClick={handleTwistierClicked}
+        onDidTreeReady={handleTreeReady}
+      />
+    </div>
+  );
+};
+
+interface IOutlineTreeViewProps {
+  height: number;
+  model?: OutlineTreeModel;
+  onDidTreeReady(handle: IRecycleTreeHandle): void;
+  onItemClick(ev: MouseEvent, item: OutlineTreeNode | OutlineCompositeTreeNode, type: TreeNodeType): void;
+  onTwistierClick(ev: MouseEvent, item: OutlineTreeNode | OutlineCompositeTreeNode): void;
+}
+
+export const OutlineTreeView = memo(
+  ({ height, model, onItemClick, onTwistierClick, onDidTreeReady }: IOutlineTreeViewProps) => {
+    const outlineModelService = useInjectable<OutlineModelService>(OutlineModelService);
+    const { decorationService, commandService } = outlineModelService;
+
+    const renderTreeNode = useCallback(
+      (props: INodeRendererWrapProps) => (
+        <OutlineNode
+          item={props.item}
+          itemType={props.itemType}
+          decorationService={decorationService}
+          commandService={commandService}
+          decorations={outlineModelService.decorations.getDecorations(props.item as any)}
+          onClick={onItemClick}
+          onTwistierClick={onTwistierClick}
+          defaultLeftPadding={8}
+          leftPadding={8}
+        />
+      ),
+      [model],
+    );
+
+    if (!model) {
+      return <span className={styles.outline_empty_text}>{localize('outline.noinfo')}</span>;
+    } else {
+      return (
+        <RecycleTree
+          height={height}
+          itemHeight={OUTLINE_TREE_NODE_HEIGHT}
+          onReady={onDidTreeReady}
+          model={model}
+          placeholder={() => <span className={styles.outline_empty_text}>{localize('outline.noinfo')}</span>}
+        >
+          {renderTreeNode}
+        </RecycleTree>
+      );
+    }
+  },
+);
+
+OutlineTreeView.displayName = 'OutlineTreeView';

package/src/browser/services/outline-contextkey.service.ts

@@ -0,0 +1,18 @@
+import { Optional, Injectable, Autowired } from '@opensumi/di';
+import { IContextKeyService, IContextKey } from '@opensumi/ide-core-browser';
+import { OutlineSortTypeContext, OutlineFollowCursorContext } from '@opensumi/ide-core-browser/lib/contextkey';
+
+@Injectable()
+export class OutlineContextKeyService {
+  @Autowired(IContextKeyService)
+  private readonly globalContextKeyService: IContextKeyService;
+
+  public readonly outlineSortTypeContext: IContextKey<number>;
+  public readonly outlineFollowCursorContext: IContextKey<boolean>;
+
+  constructor(@Optional() contextKeyService: IContextKeyService) {
+    contextKeyService = contextKeyService || this.globalContextKeyService;
+    this.outlineSortTypeContext = OutlineSortTypeContext.bind(contextKeyService);
+    this.outlineFollowCursorContext = OutlineFollowCursorContext.bind(contextKeyService);
+  }
+}

package/src/browser/services/outline-decoration.service.ts

@@ -0,0 +1,60 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import { URI, MarkerManager, MarkerSeverity, IMarker } from '@opensumi/ide-core-browser';
+import { IThemeService, listErrorForeground, listWarningForeground } from '@opensumi/ide-theme';
+
+import { IOutlineMarker } from '../../common';
+import { OutlineTreeNode } from '../outline-node.define';
+
+@Injectable()
+export class OutlineDecorationService {
+  @Autowired()
+  private markerManager: MarkerManager;
+
+  @Autowired(IThemeService)
+  private themeService: IThemeService;
+
+  private _diagnosisInfo: IOutlineMarker[] = [];
+
+  updateDiagnosisInfo(uri?: URI) {
+    this._diagnosisInfo = uri ? this.markerManager.getMarkers({ resource: uri.toString(), opened: true }) : [];
+  }
+
+  getDecoration(node: OutlineTreeNode) {
+    const markers: IOutlineMarker[] = [];
+    let topMarker: IOutlineMarker | undefined;
+    // 根据 node.raw.range 判断相交情况
+    // 这里的相交判断实际上可以做一下数据裁剪
+    const diagnosisInfos = this._diagnosisInfo.filter((marker: IMarker) => {
+      if (
+        marker.startLineNumber <= node.raw.range.startLineNumber &&
+        marker.endLineNumber >= node.raw.range.startLineNumber
+      ) {
+        return true;
+      } else if (
+        node.raw.range.startLineNumber <= marker.startLineNumber &&
+        node.raw.range.endLineNumber >= marker.startLineNumber
+      ) {
+        return true;
+      }
+      return false;
+    });
+    for (const marker of diagnosisInfos) {
+      if (marker.severity === MarkerSeverity.Error || marker.severity === MarkerSeverity.Warning) {
+        markers.push(marker);
+      }
+      if (!topMarker || marker.severity > topMarker.severity) {
+        topMarker = marker;
+      }
+    }
+    return {
+      color:
+        topMarker?.severity === MarkerSeverity.Error || topMarker?.severity === MarkerSeverity.Warning
+          ? this.themeService.getColor({
+              id: topMarker.severity === MarkerSeverity.Error ? listErrorForeground : listWarningForeground,
+            })
+          : undefined,
+      tooltip: topMarker?.message,
+      badge: markers.length > 0 ? (markers.length > 9 ? '9+' : markers.length + '') : '',
+    };
+  }
+}

package/src/browser/services/outline-event.service.ts

@@ -0,0 +1,45 @@
+import { Injectable } from '@opensumi/di';
+import { Emitter, WithEventBus, OnEvent, URI, Event } from '@opensumi/ide-core-browser';
+import { IResource, IEditorGroup } from '@opensumi/ide-editor';
+import { EditorActiveResourceStateChangedEvent, EditorSelectionChangeEvent } from '@opensumi/ide-editor/lib/browser';
+import { DocumentSymbolChangedEvent } from '@opensumi/ide-editor/lib/browser/breadcrumb/document-symbol';
+
+export type OpenedEditorData = IEditorGroup | IResource;
+export interface OpenedEditorEvent {
+  group: IEditorGroup;
+  resource: IResource;
+}
+
+@Injectable()
+export class OutlineEventService extends WithEventBus {
+  private _onDidChange: Emitter<URI | null> = new Emitter();
+  private _onDidSelectionChange: Emitter<URI | null> = new Emitter();
+  private _onDidActiveChange: Emitter<URI | null> = new Emitter();
+
+  get onDidChange(): Event<URI | null> {
+    return this._onDidChange.event;
+  }
+
+  get onDidActiveChange(): Event<URI | null> {
+    return this._onDidActiveChange.event;
+  }
+
+  get onDidSelectionChange(): Event<URI | null> {
+    return this._onDidSelectionChange.event;
+  }
+
+  @OnEvent(EditorActiveResourceStateChangedEvent)
+  onEditorActiveResourceStateChangedEvent(e: EditorActiveResourceStateChangedEvent) {
+    this._onDidActiveChange.fire(e.payload.editorUri!);
+  }
+
+  @OnEvent(EditorSelectionChangeEvent)
+  onEditorSelectionChangeEvent(e: EditorSelectionChangeEvent) {
+    this._onDidSelectionChange.fire(e.payload.editorUri);
+  }
+
+  @OnEvent(DocumentSymbolChangedEvent)
+  onDocumentSymbolChange(e: DocumentSymbolChangedEvent) {
+    this._onDidChange.fire(e.payload);
+  }
+}