fix: 修复acr内代码折叠问题

Author: guqiankun

packages/acr/src/modules/client-modules.ts

@@ -5,6 +5,7 @@ import { toGitUri } from '../merge-request/changes-tree/util';
 import { URI } from '@opensumi/ide-core-browser';
 import { THREAD_TYPE } from './index';
 
+// 代码扫描数据
 @Injectable()
 export class AnnotationService {
   @Autowired(IAntcodeService)
@@ -67,4 +68,8 @@ export class AnnotationService {
       (thread) => thread.data?.type === THREAD_TYPE.ANNOTATION && thread.uri.isEqual(annotationUri)
     ).length;
   }
+
+  public getAllAnnotations() {
+    return this._annotations;
+  }
 }

packages/acr/src/modules/comments/annotation.service.ts

@@ -26,13 +26,20 @@ export const CommentFilter = () => {
     ],
     []
   );
-  const [type, setType] = React.useState(options[0].label);
   const antCodeCommentsService = useInjectable<AntcodeCommentsService>(AntcodeCommentsService);
-
+  const commentsType = options.find(
+    (item) => item.value === antCodeCommentsService.commentFilterType
+  );
+  const [type, setType] = React.useState(commentsType?.value);
   const onChange = React.useCallback((value) => {
     setType(value);
     antCodeCommentsService.commentFilterType = value;
+    if (value === COMMENT_FILTER_TYPE.ALL) {
+      antCodeCommentsService.showAll();
+    }
   }, []);
 
-  return <Select options={options} value={type} onChange={onChange} />;
+  return (
+    <Select options={options} value={type} defaultValue={commentsType?.value} onChange={onChange} />
+  );
 };

packages/acr/src/modules/comments/comment-filter.view.tsx

@@ -15,3 +15,13 @@ export interface IAnnotationThreadData extends IAnnotationData {
 export interface IAntcodeCommentThread extends ICommentsThread {
   data: ICommentsThreadData | IAnnotationThreadData;
 }
+
+export interface FoldingRegion {
+  index: number;
+  ranges: any;
+  endLineNumber: number;
+  isCollapsed: boolean;
+  parentIndex: number;
+  regionIndex: number;
+  startLineNumber: number;
+}

packages/acr/src/modules/comments/comment.interface.ts

@@ -16,12 +16,15 @@ import {
   getIcon,
   Disposable,
   toDisposable,
+  WithEventBus,
+  OnEvent,
 } from '@opensumi/ide-core-browser';
 import {
   IEditorDocumentModel,
   DidApplyEditorDecorationFromProvider,
   IEditor,
 } from '@opensumi/ide-editor/lib/browser';
+import { WorkbenchEditorService } from '@opensumi/ide-editor';
 import { AntcodeCommentsService } from './comments.service';
 import { IAntcodeService, IPullRequestChangeDiff } from '../antcode-service/base';
 import { COMMENT_FILTER_TYPE, THREAD_TYPE } from '.';
@@ -32,11 +35,14 @@ import { MouseWheelBlock } from './components/MouseWheelBlock';
 import { AnnotationService } from './annotation.service';
 import * as styles from './index.module.less';
 import { Portal } from '../../portal';
-import { IAntcodeCommentThread, ICommentsThreadData } from './comment.interface';
+import { IAntcodeCommentThread, ICommentsThreadData, FoldingRegion } from './comment.interface';
 import { getChangeRangeByDiff } from './utils';
-
+import { OpenDiffEditorEvent } from '../../common/events';
 @Domain(ClientAppContribution, CoreCommentsContribution)
-export class CommentsContribution implements ClientAppContribution, CoreCommentsContribution {
+export class CommentsContribution
+  extends WithEventBus
+  implements ClientAppContribution, CoreCommentsContribution
+{
   @Autowired(AnnotationService)
   private readonly annotationService: AnnotationService;
 
@@ -52,8 +58,34 @@ export class CommentsContribution implements ClientAppContribution, CoreComments
   @Autowired(IIconService)
   private readonly iconService: IIconService;
 
+  @Autowired(WorkbenchEditorService)
+  private readonly workbenchEditorService: WorkbenchEditorService;
+
   @Autowired(IEventBus)
-  private readonly eventBus: IEventBus;
+  readonly eventBus: IEventBus;
+
+  @OnEvent(OpenDiffEditorEvent)
+  onEditorGroupOpenEvent(e: OpenDiffEditorEvent) {
+    const openType = this.workbenchEditorService.currentEditorGroup.currentOpenType?.type;
+    this.registerOnDidChangeFolding();
+    // TODO 目前重新打开 会导致展开全部代码 如果 annotation 已经折叠那就再也打不开了
+    // 展开全部annotation
+    let currentUri: URI | null | undefined;
+    if (openType === 'code') {
+      currentUri = this.workbenchEditorService.currentEditor?.currentUri;
+    } else if (openType === 'diff') {
+      currentUri =
+        this.workbenchEditorService.currentEditorGroup.diffEditor.modifiedEditor.currentUri;
+    }
+    if (currentUri) {
+      for (let [, thread] of this.annotationService.getAllAnnotations()) {
+        thread.show();
+        if (thread.uri.isEqual(currentUri)) {
+          thread.show();
+        }
+      }
+    }
+  }
 
   async onStart() {
     // 初始化评论数据
@@ -252,19 +284,94 @@ export class CommentsContribution implements ClientAppContribution, CoreComments
         const onlyShowChangeLineRelatedComment =
           commentFilterType === COMMENT_FILTER_TYPE.CHANGE_LINE_RELATED;
 
+        const showAll = commentFilterType === COMMENT_FILTER_TYPE.ALL;
         // 隐藏全部评论 | 仅展示问题评论
         if (
           isHideAll ||
           (onlyShowProblem && !treadData?.isProblem) ||
           (onlyShowChangeLineRelatedComment && !treadData?.isChangeLineRelated)
         ) {
-          thread.hideAll();
-        } else {
-          thread.show();
+          thread.hide();
         }
         // 只有在已有评论才出现用户头像
         return !!treadData?.noteId;
       },
     });
   }
+
+  private registerOnDidChangeFolding() {
+    const openType = this.workbenchEditorService.currentEditorGroup.currentOpenType?.type;
+    if (openType === 'code') {
+      const foldingContrib =
+        this.workbenchEditorService.currentEditor?.monacoEditor.getContribution(
+          'editor.contrib.folding'
+        );
+      if (foldingContrib) {
+        const currentUri = this.workbenchEditorService.currentEditor!.currentUri as URI;
+        this.hideOrShowThread(foldingContrib, currentUri);
+      }
+    } else if (openType === 'diff') {
+      const { diffEditor } = this.workbenchEditorService.currentEditorGroup;
+      const { originalEditor, modifiedEditor } = diffEditor;
+      const originalFoldingContrib =
+        originalEditor.monacoEditor.getContribution('editor.contrib.folding');
+      const modifyFoldingContrib =
+        modifiedEditor.monacoEditor.getContribution('editor.contrib.folding');
+      if (originalFoldingContrib) {
+        const currentUri = originalEditor.currentUri as URI;
+        this.hideOrShowThread(originalFoldingContrib, currentUri);
+      }
+      if (modifyFoldingContrib) {
+        const currentUri = modifiedEditor.currentUri as URI;
+        this.hideOrShowThread(modifyFoldingContrib, currentUri);
+      }
+    }
+  }
+
+  private hideOrShowThread(foldingContrib, currentUri: URI) {
+    foldingContrib.getFoldingModel()?.then((foldingModel) => {
+      foldingModel.onDidChange((e) => {
+        if (e.collapseStateChanged) {
+          const foldingRegin = e.collapseStateChanged[0] as FoldingRegion;
+          // 折叠隐藏折叠区域评论块
+          const { startLineNumber, endLineNumber } = foldingRegin;
+          if (foldingRegin.isCollapsed) {
+            for (let [, commentThread] of this.antcodeCommentsService.getAllComments()) {
+              if (commentThread.uri.isEqual(currentUri) && !commentThread.isCollapsed) {
+                if (
+                  commentThread.range.startLineNumber > startLineNumber &&
+                  commentThread.range.endLineNumber <= endLineNumber
+                ) {
+                  commentThread.hide();
+                }
+              }
+            }
+
+            for (let [, commentThread] of this.annotationService.getAllAnnotations()) {
+              if (commentThread.uri.isEqual(currentUri) && !commentThread.isCollapsed) {
+                if (
+                  commentThread.range.startLineNumber > startLineNumber &&
+                  commentThread.range.endLineNumber <= endLineNumber
+                ) {
+                  commentThread.hide();
+                }
+              }
+            }
+          } else {
+            // annotation 没有展开按钮所以折叠后需展开
+            for (let [, commentThread] of this.annotationService.getAllAnnotations()) {
+              if (commentThread.uri.isEqual(currentUri)) {
+                if (
+                  commentThread.range.startLineNumber > startLineNumber &&
+                  commentThread.range.endLineNumber <= endLineNumber
+                ) {
+                  commentThread.show();
+                }
+              }
+            }
+          }
+        }
+      });
+    });
+  }
 }

packages/acr/src/modules/comments/comments.contribution.tsx

@@ -39,14 +39,17 @@ export class AntcodeCommentsService {
     return this._comments.get(id);
   }
 
+  public getAllComments() {
+    return this._comments;
+  }
+
   /**
    * 创建一个评论
    * @param commentId noteId
    * @param data note data
    */
   public createComment(comment: IComment) {
     const [, leftLineNumberStr, rightLineNumberStr] = comment.lineCode.split('_');
-
     const [leftLineNumber, rightLineNumber] = [
       parseInt(leftLineNumberStr, 10),
       parseInt(rightLineNumberStr, 10),
@@ -108,4 +111,9 @@ export class AntcodeCommentsService {
       this._comments.delete(commentId);
     }
   }
+  public showAll() {
+    for (let [, thread] of this._comments) {
+      thread.show();
+    }
+  }
 }

packages/acr/src/modules/comments/comments.service.ts

@@ -23,6 +23,21 @@
     background: rgba(#687687, 45%) !important;
   }
 }
+:global {
+  // 覆盖评论样式 展开收起按钮样式
+  .comments-decoration.comments-add {
+    width: 20px !important;
+  }
+  .codicon.codicon-folding-expanded {
+    margin-left: 20px !important;
+    width: 20px !important;
+
+  }
+  .codicon.codicon-folding-collapsed {
+    margin-left: 20px !important;
+    width: 20px !important;
+  }
+}
 
 .comment_avatar {
   background-size: cover !important;

packages/acr/src/modules/comments/index.module.less

@@ -37,7 +37,7 @@ export const EditorEmptyComponent: React.FC = () => {
       <div className={styles.description}>{localize('misc.ide-mode.description')}</div>
       <div className={styles.keybindings}>
         {keyList.map((item) => (
-          <div key={item.value} className={styles.keybinding}>
+          <div key={item.name} className={styles.keybinding}>
             <div className={styles.desc}>{item.name}</div>
             <div className={styles.key}>
               {item.value &&

packages/acr/src/modules/edtior-empty/editor-empty.view.tsx

@@ -6357,6 +6357,11 @@ image-size@~0.5.0:
   resolved "https://registry.npm.alibaba-inc.com/image-size/download/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
+immediate@~3.0.5:
+  version "3.0.6"
+  resolved "https://registry.npm.alibaba-inc.com/immediate/download/immediate-3.0.6.tgz#9db1dbd0faf8de6fbe0f5dd5e56bb606280de69b"
+  integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
+
 immutable@^3.7.4:
   version "3.8.2"
   resolved "https://registry.npm.alibaba-inc.com/immutable/download/immutable-3.8.2.tgz#c2439951455bb39913daf281376f1530e104adf3"
@@ -7727,6 +7732,13 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lie@3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npm.alibaba-inc.com/lie/download/lie-3.1.1.tgz#9a436b2cc7746ca59de7a41fa469b3efb76bd87e"
+  integrity sha1-mkNrLMd0bKWd56QfpGmz77dr2H4=
+  dependencies:
+    immediate "~3.0.5"
+
 liftoff@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npm.alibaba-inc.com/liftoff/download/liftoff-3.1.0.tgz#c9ba6081f908670607ee79062d700df062c52ed3"
@@ -7828,6 +7840,13 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+localforage@^1.10.0:
+  version "1.10.0"
+  resolved "https://registry.npm.alibaba-inc.com/localforage/download/localforage-1.10.0.tgz#5c465dc5f62b2807c3a84c0c6a1b1b3212781dd4"
+  integrity sha1-XEZdxfYrKAfDqEwMahsbMhJ4HdQ=
+  dependencies:
+    lie "3.1.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npm.alibaba-inc.com/locate-path/download/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"