@opensumi/ide-opened-editor 2.21.13 → 2.22.0

package/src/browser/opened-editor.tsx

@@ -0,0 +1,183 @@
+import React, { useState, useEffect, useCallback } from 'react';
+
+import {
+  RecycleTree,
+  IRecycleTreeHandle,
+  INodeRendererWrapProps,
+  TreeNodeType,
+  TreeModel,
+} from '@opensumi/ide-components';
+import { ViewState, CancellationToken, localize, CancellationTokenSource } from '@opensumi/ide-core-browser';
+import { Progress } from '@opensumi/ide-core-browser/lib/progress/progress-bar';
+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 = useCallback(
+    (ev: React.MouseEvent, item: EditorFile | EditorFileGroup, type: TreeNodeType) => {
+      // 阻止点击事件冒泡
+      ev.stopPropagation();
+
+      const { handleItemClick } = openedEditorModelService;
+      if (!item) {
+        return;
+      }
+      handleItemClick(item, type);
+    },
+    [openedEditorModelService],
+  );
+
+  const handlerContextMenu = useCallback((ev: React.MouseEvent, node: EditorFile | EditorFileGroup) => {
+    const { handleContextMenu } = openedEditorModelService;
+    handleContextMenu(ev, node);
+  }, []);
+
+  const handleOuterContextMenu = useCallback(
+    (ev: React.MouseEvent) => {
+      const { handleContextMenu } = openedEditorModelService;
+      // 空白区域右键菜单
+      handleContextMenu(ev);
+    },
+    [openedEditorModelService],
+  );
+
+  const handleOuterClick = useCallback(() => {
+    // 空白区域点击，取消焦点状态
+    const { enactiveFileDecoration } = openedEditorModelService;
+    enactiveFileDecoration();
+  }, []);
+
+  const ensureIsReady = useCallback(
+    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);
+    },
+    [isLoading, isReady, openedEditorModelService],
+  );
+
+  useEffect(() => {
+    if (isReady) {
+      openedEditorModelService.onTreeModelChange(async (treeModel) => {
+        setIsLoading(true);
+        if (treeModel) {
+          // 确保数据初始化完毕，减少初始化数据过程中多次刷新视图
+          await treeModel.ensureReady;
+        }
+        setModel(treeModel);
+        setIsLoading(false);
+      });
+    }
+  }, [isReady]);
+
+  useEffect(() => {
+    const tokenSource = new CancellationTokenSource();
+    ensureIsReady(tokenSource.token);
+    return () => {
+      tokenSource.cancel();
+    };
+  }, []);
+
+  useEffect(() => {
+    const handleBlur = () => {
+      openedEditorModelService.handleTreeBlur();
+    };
+    wrapperRef.current?.addEventListener('blur', handleBlur, true);
+    return () => {
+      wrapperRef.current?.removeEventListener('blur', handleBlur, true);
+      openedEditorModelService.handleTreeBlur();
+    };
+  }, [wrapperRef.current]);
+
+  const renderTreeNode = 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 <Progress 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);
+  }
+}