@opensumi/ide-opened-editor 2.21.6 → 2.21.7-rc-1669780664.0

package/src/browser/opened-editor.contribution.ts

@@ -0,0 +1,193 @@
+import { Autowired } from '@opensumi/di';
+import {
+  Domain,
+  localize,
+  CommandContribution,
+  CommandRegistry,
+  OPEN_EDITORS_COMMANDS,
+  CommandService,
+  FILE_COMMANDS,
+  EDITOR_COMMANDS,
+} from '@opensumi/ide-core-browser';
+import { ClientAppContribution } from '@opensumi/ide-core-browser';
+import { ToolbarRegistry, TabBarToolbarContribution } from '@opensumi/ide-core-browser/lib/layout';
+import { MenuContribution, IMenuRegistry, MenuId } from '@opensumi/ide-core-browser/lib/menu/next';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
+import { EXPLORER_CONTAINER_ID } from '@opensumi/ide-explorer/lib/browser/explorer-contribution';
+import { IMainLayoutService } from '@opensumi/ide-main-layout';
+
+import { ExplorerOpenEditorPanel } from './opened-editor';
+import { EditorFile, EditorFileGroup } from './opened-editor-node.define';
+import { OpenedEditorModelService } from './services/opened-editor-model.service';
+
+export const ExplorerOpenedEditorViewId = 'file-opened-editor';
+
+@Domain(ClientAppContribution, TabBarToolbarContribution, CommandContribution, MenuContribution)
+export class OpenedEditorContribution
+  implements ClientAppContribution, TabBarToolbarContribution, CommandContribution, MenuContribution
+{
+  @Autowired(IMainLayoutService)
+  private readonly mainLayoutService: IMainLayoutService;
+
+  @Autowired(WorkbenchEditorService)
+  private readonly workbenchEditorService: WorkbenchEditorService;
+
+  @Autowired(OpenedEditorModelService)
+  private readonly openedEditorModelService: OpenedEditorModelService;
+
+  @Autowired(CommandService)
+  private readonly commandService: CommandService;
+
+  async onStart() {
+    this.mainLayoutService.collectViewComponent(
+      {
+        id: ExplorerOpenedEditorViewId,
+        name: localize('opened.editors.title'),
+        weight: 1,
+        priority: 10,
+        collapsed: true,
+        component: ExplorerOpenEditorPanel,
+      },
+      EXPLORER_CONTAINER_ID,
+    );
+  }
+
+  registerCommands(commands: CommandRegistry) {
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.SAVE_ALL, {
+      execute: () => {
+        this.workbenchEditorService.saveAll();
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE_ALL, {
+      execute: async () => {
+        await this.workbenchEditorService.closeAll();
+        this.openedEditorModelService.clear();
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE_BY_GROUP, {
+      execute: (node: EditorFileGroup) => {
+        this.openedEditorModelService.closeAllByGroup(node);
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.SAVE_BY_GROUP, {
+      execute: (node: EditorFileGroup) => {
+        this.openedEditorModelService.saveAllByGroup(node);
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.CLOSE, {
+      execute: async (node: EditorFile) => {
+        let group;
+        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
+          group = (node.parent as EditorFileGroup).group;
+        }
+        await this.commandService.executeCommand(EDITOR_COMMANDS.CLOSE.id, { group, uri: node.uri });
+        // 提前移除节点
+        (node.parent as EditorFileGroup).unlinkItem(node);
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.OPEN, {
+      execute: (node: EditorFile) => {
+        let groupIndex = 0;
+        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
+          groupIndex = (node.parent as EditorFileGroup).group.index;
+        }
+        this.commandService.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, node.uri, { groupIndex });
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.OPEN_TO_THE_SIDE, {
+      execute: (node: EditorFile) => {
+        let groupIndex = 0;
+        if (node.parent && EditorFileGroup.is(node.parent as EditorFileGroup)) {
+          groupIndex = (node.parent as EditorFileGroup).group.index;
+        }
+        this.commandService.executeCommand(EDITOR_COMMANDS.OPEN_RESOURCE.id, node.uri, {
+          groupIndex,
+          split: 4 /** right */,
+          focus: true,
+        });
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.COMPARE_SELECTED, {
+      execute: (node: EditorFile) => {
+        this.commandService.executeCommand(FILE_COMMANDS.COMPARE_SELECTED.id, node.uri, [node.uri]);
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.COPY_PATH, {
+      execute: (node: EditorFile) => {
+        this.commandService.executeCommand(FILE_COMMANDS.COPY_PATH.id, node.uri, [node.uri]);
+      },
+    });
+
+    commands.registerCommand(OPEN_EDITORS_COMMANDS.COPY_RELATIVE_PATH, {
+      execute: (node: EditorFile) => {
+        this.commandService.executeCommand(FILE_COMMANDS.COPY_RELATIVE_PATH.id, node.uri, [node.uri]);
+      },
+    });
+  }
+
+  registerToolbarItems(registry: ToolbarRegistry) {
+    registry.registerItem({
+      id: OPEN_EDITORS_COMMANDS.SAVE_ALL.id,
+      command: OPEN_EDITORS_COMMANDS.SAVE_ALL.id,
+      viewId: ExplorerOpenedEditorViewId,
+      label: localize('opened.editors.save.all'),
+    });
+    registry.registerItem({
+      id: OPEN_EDITORS_COMMANDS.CLOSE_ALL.id,
+      command: OPEN_EDITORS_COMMANDS.CLOSE_ALL.id,
+      viewId: ExplorerOpenedEditorViewId,
+      label: localize('opened.editors.close.all'),
+    });
+  }
+
+  registerMenus(menuRegistry: IMenuRegistry): void {
+    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
+      command: {
+        id: OPEN_EDITORS_COMMANDS.OPEN.id,
+        label: localize('opened.editors.open'),
+      },
+      order: 1,
+      group: '1_open',
+    });
+
+    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
+      command: {
+        id: OPEN_EDITORS_COMMANDS.OPEN_TO_THE_SIDE.id,
+        label: localize('opened.editors.openToTheSide'),
+      },
+      order: 2,
+      group: '1_open',
+    });
+
+    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
+      command: {
+        id: OPEN_EDITORS_COMMANDS.COMPARE_SELECTED.id,
+        label: localize('opened.editors.compare'),
+      },
+      group: '2_operator',
+    });
+
+    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
+      command: {
+        id: OPEN_EDITORS_COMMANDS.COPY_PATH.id,
+        label: localize('opened.editors.copyPath'),
+      },
+      group: '3_path',
+    });
+    menuRegistry.registerMenuItem(MenuId.OpenEditorsContext, {
+      command: {
+        id: OPEN_EDITORS_COMMANDS.COPY_RELATIVE_PATH.id,
+        label: localize('opened.editors.copyRelativePath'),
+      },
+      group: '3_path',
+    });
+  }
+}

package/src/browser/opened-editor.tsx

@@ -0,0 +1,174 @@
+import React, { useState, useEffect } from 'react';
+
+import {
+  RecycleTree,
+  IRecycleTreeHandle,
+  INodeRendererWrapProps,
+  TreeNodeType,
+  TreeModel,
+} from '@opensumi/ide-components';
+import { ViewState, CancellationToken, localize, CancellationTokenSource } from '@opensumi/ide-core-browser';
+import { ProgressBar } from '@opensumi/ide-core-browser/lib/components/progressbar';
+import { useInjectable } from '@opensumi/ide-core-browser/lib/react-hooks';
+
+import styles from './index.module.less';
+import { EditorTreeNode } from './opened-editor-node';
+import { EditorFile, EditorFileGroup } from './opened-editor-node.define';
+import { OpenedEditorModelService } from './services/opened-editor-model.service';
+
+export const ExplorerOpenEditorPanel = ({ viewState }: React.PropsWithChildren<{ viewState: ViewState }>) => {
+  const OPEN_EDITOR_NODE_HEIGHT = 22;
+  const [isReady, setIsReady] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(true);
+  const [model, setModel] = useState<TreeModel | null>();
+
+  const { width, height } = viewState;
+
+  const wrapperRef: React.RefObject<HTMLDivElement> = React.createRef();
+
+  const openedEditorModelService = useInjectable<OpenedEditorModelService>(OpenedEditorModelService);
+  const { decorationService, labelService, commandService } = openedEditorModelService;
+
+  const handleTreeReady = (handle: IRecycleTreeHandle) => {
+    openedEditorModelService.handleTreeHandler({
+      ...handle,
+      hasDirectFocus: () => wrapperRef.current === document.activeElement,
+    });
+  };
+
+  const handleItemClicked = (ev: React.MouseEvent, item: EditorFile | EditorFileGroup, type: TreeNodeType) => {
+    // 阻止点击事件冒泡
+    ev.stopPropagation();
+
+    const { handleItemClick } = openedEditorModelService;
+    if (!item) {
+      return;
+    }
+    handleItemClick(item, type);
+  };
+
+  const handlerContextMenu = (ev: React.MouseEvent, node: EditorFile | EditorFileGroup) => {
+    const { handleContextMenu } = openedEditorModelService;
+    handleContextMenu(ev, node);
+  };
+
+  const handleOuterContextMenu = (ev: React.MouseEvent) => {
+    const { handleContextMenu } = openedEditorModelService;
+    // 空白区域右键菜单
+    handleContextMenu(ev);
+  };
+
+  const handleOuterClick = (ev: React.MouseEvent) => {
+    // 空白区域点击，取消焦点状态
+    const { enactiveFileDecoration } = openedEditorModelService;
+    enactiveFileDecoration();
+  };
+
+  const ensureIsReady = async (token: CancellationToken) => {
+    await openedEditorModelService.whenReady;
+    if (token.isCancellationRequested) {
+      return;
+    }
+    if (openedEditorModelService.treeModel) {
+      setModel(openedEditorModelService.treeModel);
+      // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
+      // 这里需要重新取一下treeModel的值确保为最新的TreeModel
+      await openedEditorModelService.treeModel.ensureReady;
+      if (token.isCancellationRequested) {
+        return;
+      }
+    }
+    setIsLoading(false);
+    setIsReady(true);
+  };
+
+  useEffect(() => {
+    if (isReady) {
+      openedEditorModelService.onTreeModelChange(async (treeModel) => {
+        setIsLoading(true);
+        if (treeModel) {
+          // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
+          await treeModel.ensureReady;
+        }
+        setModel(treeModel);
+        setIsLoading(false);
+      });
+    }
+  }, [isReady]);
+
+  React.useEffect(() => {
+    const tokenSource = new CancellationTokenSource();
+    ensureIsReady(tokenSource.token);
+    return () => {
+      tokenSource.cancel();
+    };
+  }, []);
+
+  React.useEffect(() => {
+    const handleBlur = () => {
+      openedEditorModelService.handleTreeBlur();
+    };
+    wrapperRef.current?.addEventListener('blur', handleBlur, true);
+    return () => {
+      wrapperRef.current?.removeEventListener('blur', handleBlur, true);
+      openedEditorModelService.handleTreeBlur();
+    };
+  }, [wrapperRef.current]);
+
+  const renderTreeNode = React.useCallback(
+    (props: INodeRendererWrapProps) => (
+      <EditorTreeNode
+        item={props.item}
+        itemType={props.itemType}
+        decorationService={decorationService}
+        labelService={labelService}
+        commandService={commandService}
+        decorations={openedEditorModelService.decorations.getDecorations(props.item as any)}
+        onClick={handleItemClicked}
+        onContextMenu={handlerContextMenu}
+        defaultLeftPadding={22}
+        leftPadding={0}
+      />
+    ),
+    [openedEditorModelService.treeModel],
+  );
+
+  const renderContent = () => {
+    if (!isReady) {
+      return <span className={styles.opened_editor_empty_text}>{localize('opened.editors.empty')}</span>;
+    } else {
+      if (isLoading) {
+        return <ProgressBar loading />;
+      } else if (model) {
+        return (
+          <RecycleTree
+            height={height}
+            width={width}
+            itemHeight={OPEN_EDITOR_NODE_HEIGHT}
+            onReady={handleTreeReady}
+            model={model}
+            placeholder={() => (
+              <span className={styles.opened_editor_empty_text}>{localize('opened.editors.empty')}</span>
+            )}
+          >
+            {renderTreeNode}
+          </RecycleTree>
+        );
+      } else {
+        return <span className={styles.opened_editor_empty_text}>{localize('opened.editors.empty')}</span>;
+      }
+    }
+  };
+
+  return (
+    <div
+      className={styles.opened_editor_container}
+      tabIndex={-1}
+      ref={wrapperRef}
+      onContextMenu={handleOuterContextMenu}
+      onClick={handleOuterClick}
+    >
+      {renderContent()}
+    </div>
+  );
+};

package/src/browser/services/opened-editor-decoration.service.ts

@@ -0,0 +1,63 @@
+import { Injectable, Autowired } from '@opensumi/di';
+import {
+  URI,
+  Uri,
+  FileDecorationsProvider,
+  IFileDecoration,
+  Emitter,
+  DisposableCollection,
+} from '@opensumi/ide-core-browser';
+import { IDecorationsService } from '@opensumi/ide-decoration';
+import { IThemeService } from '@opensumi/ide-theme';
+
+@Injectable()
+export class OpenedEditorDecorationService implements FileDecorationsProvider {
+  @Autowired(IDecorationsService)
+  private readonly decorationsService: IDecorationsService;
+
+  @Autowired(IThemeService)
+  public readonly themeService: IThemeService;
+
+  private disposeCollection: DisposableCollection = new DisposableCollection();
+
+  private readonly onDidChangeEmitter: Emitter<void> = new Emitter();
+
+  constructor() {
+    this.disposeCollection.pushAll([
+      this.decorationsService.onDidChangeDecorations(() => {
+        this.onDidChangeEmitter.fire();
+      }),
+      this.themeService.onThemeChange(() => {
+        this.onDidChangeEmitter.fire();
+      }),
+    ]);
+  }
+
+  get onDidChange() {
+    return this.onDidChangeEmitter.event;
+  }
+
+  getDecoration(uri, hasChildren = false) {
+    // 转换URI为vscode.uri
+    if (uri instanceof URI) {
+      uri = Uri.parse(uri.toString());
+    }
+    const decoration = this.decorationsService.getDecoration(uri, hasChildren);
+    if (decoration) {
+      return {
+        ...decoration,
+        // 通过ThemeService获取颜色值
+        color: this.themeService.getColor({ id: decoration.color as string }),
+      } as IFileDecoration;
+    }
+    return {
+      color: '',
+      tooltip: '',
+      badge: '',
+    } as IFileDecoration;
+  }
+
+  dispose() {
+    this.disposeCollection.dispose();
+  }
+}

package/src/browser/services/opened-editor-event.service.ts

@@ -0,0 +1,51 @@
+import { Injectable } from '@opensumi/di';
+import { Event, Emitter, WithEventBus, OnEvent } from '@opensumi/ide-core-browser';
+import {
+  IResource,
+  IEditorGroup,
+  ResourceDecorationChangeEvent,
+  IResourceDecorationChangeEventPayload,
+} from '@opensumi/ide-editor';
+import { EditorGroupOpenEvent, EditorGroupCloseEvent, EditorGroupDisposeEvent } from '@opensumi/ide-editor/lib/browser';
+
+export type OpenedEditorData = IEditorGroup | IResource;
+export interface OpenedEditorEvent {
+  group: IEditorGroup;
+  resource: IResource;
+}
+
+@Injectable()
+export class OpenedEditorEventService extends WithEventBus {
+  private _onDidChange: Emitter<OpenedEditorEvent | null> = new Emitter();
+  private _onDidDecorationChange: Emitter<IResourceDecorationChangeEventPayload | null> = new Emitter();
+  private _onDidActiveChange: Emitter<OpenedEditorEvent | null> = new Emitter();
+
+  public onDidChange: Event<OpenedEditorEvent | null> = this._onDidChange.event;
+  public onDidDecorationChange: Event<IResourceDecorationChangeEventPayload | null> = this._onDidDecorationChange.event;
+  public onDidActiveChange: Event<OpenedEditorEvent | null> = this._onDidActiveChange.event;
+
+  constructor() {
+    super();
+  }
+
+  @OnEvent(EditorGroupOpenEvent)
+  onEditorGroupOpenEvent(e: EditorGroupOpenEvent) {
+    this._onDidActiveChange.fire(e.payload);
+  }
+
+  @OnEvent(EditorGroupCloseEvent)
+  onEditorGroupCloseEvent() {
+    this._onDidChange.fire(null);
+  }
+
+  @OnEvent(EditorGroupDisposeEvent)
+  onEditorGroupDisposeEvent() {
+    this._onDidChange.fire(null);
+  }
+
+  // 为修改的文件添加dirty装饰
+  @OnEvent(ResourceDecorationChangeEvent)
+  onResourceDecorationChangeEvent(e: ResourceDecorationChangeEvent) {
+    this._onDidDecorationChange.fire(e.payload);
+  }
+}