@opensumi/ide-editor 3.3.1-next-1725521092.0 → 3.3.1-next-1725534862.0

package/src/browser/workbench-editor.service.ts

@@ -1,3 +1,5 @@
+import { observable } from 'mobx';
+
 import { Autowired, INJECTOR_TOKEN, Injectable, Injector } from '@opensumi/di';
 import {
   AppConfig,
@@ -16,7 +18,6 @@ import {
   toMarkdown,
 } from '@opensumi/ide-core-browser';
 import { ResourceContextKey } from '@opensumi/ide-core-browser/lib/contextkey/resource';
-import { IDimension } from '@opensumi/ide-core-browser/lib/dom/resize-observer';
 import { IMergeEditorEditor, MergeEditorInputData } from '@opensumi/ide-core-browser/lib/monaco/merge-editor-widget';
 import {
   CUSTOM_EDITOR_SCHEME,
@@ -161,8 +162,6 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
 
   public editorContextKeyService: IScopedContextKeyService;
 
-  private _domNode: HTMLElement;
-
   @Autowired(IOpenerService)
   openner: IOpenerService;
 
@@ -278,7 +277,7 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
   createEditorGroup(): EditorGroup {
     const editorGroup = this.injector.get(EditorGroup, [this.generateRandomEditorGroupName(), this.editorGroupIdGen++]);
     this.editorGroups.push(editorGroup);
-    editorGroup.addDispose([
+    const currentWatchDisposer = new Disposable(
       editorGroup.onDidEditorGroupBodyChanged(() => {
         if (editorGroup === this.currentEditorGroup) {
           if (!editorGroup.currentOpenType && editorGroup.currentResource) {
@@ -297,15 +296,25 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
           }
         }
       }),
-      editorGroup.onDidEditorGroupTabChanged(() => {
-        this.saveOpenedResourceState();
-      }),
-      editorGroup.onCurrentEditorCursorChange((e) => {
-        if (this._currentEditorGroup === editorGroup) {
-          this._onCursorChange.fire(e);
-        }
-      }),
-    ]);
+    );
+    editorGroup.addDispose({
+      dispose: () => {
+        currentWatchDisposer.dispose();
+      },
+    });
+    const groupChangeDisposer = editorGroup.onDidEditorGroupTabChanged(() => {
+      this.saveOpenedResourceState();
+    });
+    editorGroup.addDispose({
+      dispose: () => {
+        groupChangeDisposer.dispose();
+      },
+    });
+    editorGroup.onCurrentEditorCursorChange((e) => {
+      if (this._currentEditorGroup === editorGroup) {
+        this._onCursorChange.fire(e);
+      }
+    });
 
     return editorGroup;
   }
@@ -463,7 +472,6 @@ export class WorkbenchEditorServiceImpl extends WithEventBus implements Workbenc
   }
 
   onDomCreated(domNode: HTMLElement) {
-    this._domNode = domNode;
     if (this.editorContextKeyService) {
       this.editorContextKeyService.attachToDomNode(domNode);
     }
@@ -677,25 +685,25 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   /**
    * 当编辑器的tab部分发生变更
    */
-  _onDidEditorGroupTabChanged = this.registerDispose(new EventEmitter<void>());
+  _onDidEditorGroupTabChanged = new EventEmitter<void>();
   onDidEditorGroupTabChanged: Event<void> = this._onDidEditorGroupTabChanged.event;
 
   /**
    * 当编辑器的tab部分发生变更
    */
-  _onDidEditorGroupTabOperation = this.registerDispose(new EventEmitter<IResourceTabOperation>());
+  _onDidEditorGroupTabOperation = new EventEmitter<IResourceTabOperation>();
   onDidEditorGroupTabOperation: Event<IResourceTabOperation> = this._onDidEditorGroupTabOperation.event;
 
   /**
    * 当编辑器的主体部分发生变更
    */
-  _onDidEditorGroupBodyChanged = this.registerDispose(new EventEmitter<void>());
+  _onDidEditorGroupBodyChanged = new EventEmitter<void>();
   onDidEditorGroupBodyChanged: Event<void> = this._onDidEditorGroupBodyChanged.event;
 
   /**
    * 当编辑器有内容处于加载状态
    */
-  _onDidEditorGroupContentLoading = this.registerDispose(new EventEmitter<IResource>());
+  _onDidEditorGroupContentLoading = new EventEmitter<IResource>();
   onDidEditorGroupContentLoading: Event<IResource> = this._onDidEditorGroupContentLoading.event;
 
   /**
@@ -721,6 +729,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   private cachedResourcesOpenTypes = new Map<string, IEditorOpenType[]>();
 
+  @observable.shallow
   availableOpenTypes: IEditorOpenType[] = [];
 
   activeComponents = new Map<IEditorComponent, IResource[]>();
@@ -731,6 +740,8 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   private holdDocumentModelRefs: Map<string, IEditorDocumentModelRef> = new Map();
 
+  private readonly toDispose: monaco.IDisposable[] = [];
+
   private _contextKeyService: IContextKeyService;
 
   private _resourceContext: ResourceContextKey;
@@ -749,7 +760,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   private _prevDomWidth = 0;
 
   // 当前为EditorComponent，且monaco光标变化时触发
-  private _onCurrentEditorCursorChange = this.registerDispose(new EventEmitter<CursorStatus>());
+  private _onCurrentEditorCursorChange = new EventEmitter<CursorStatus>();
   public onCurrentEditorCursorChange = this._onCurrentEditorCursorChange.event;
 
   private resourceOpenHistory: URI[] = [];
@@ -776,28 +787,21 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
 
   constructor(public readonly name: string, public readonly groupId: number) {
     super();
-
-    this.addDispose(
-      this.eventBus.onDirective(
-        ResizeEvent.createDirective(getSlotLocation('@opensumi/ide-editor', this.config.layoutConfig)),
-        () => {
-          this.layoutEditors();
-        },
-      ),
-    );
-    this.addDispose(
-      this.eventBus.on(GridResizeEvent, (e: GridResizeEvent) => {
-        if (e.payload.gridId === this.grid.uid) {
-          this.layoutEditors();
-        }
-      }),
-    );
-    this.addDispose(
-      this.eventBus.on(EditorComponentDisposeEvent, (e: EditorComponentDisposeEvent) => {
-        this.activeComponents.delete(e.payload);
-        this.activateComponentsProps.delete(e.payload);
-      }),
+    this.eventBus.onDirective(
+      ResizeEvent.createDirective(getSlotLocation('@opensumi/ide-editor', this.config.layoutConfig)),
+      () => {
+        this.doLayoutEditors();
+      },
     );
+    this.eventBus.on(GridResizeEvent, (e: GridResizeEvent) => {
+      if (e.payload.gridId === this.grid.uid) {
+        this.doLayoutEditors();
+      }
+    });
+    this.eventBus.on(EditorComponentDisposeEvent, (e: EditorComponentDisposeEvent) => {
+      this.activeComponents.delete(e.payload);
+      this.activateComponentsProps.delete(e.payload);
+    });
 
     this.listenToExplorerAutoRevealConfig();
   }
@@ -806,8 +810,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   private listenToExplorerAutoRevealConfig() {
     this.explorerAutoRevealConfig = !!this.preferenceService.get<boolean>('explorer.autoReveal');
     this.disposables.push(
-      this.preferenceService.onSpecificPreferenceChange('explorer.autoReveal', (change) => {
-        this.explorerAutoRevealConfig = change.newValue;
+      this.preferenceService.onPreferenceChanged((change) => {
+        if (change.preferenceName === 'explorer.autoReveal') {
+          this.explorerAutoRevealConfig = change.newValue;
+        }
       }),
     );
   }
@@ -839,32 +845,48 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   layoutEditors() {
     fastdom.measure(() => {
       if (this._domNode) {
-        this._prevDomWidth = this._domNode.offsetWidth;
-        this._prevDomHeight = this._domNode.offsetHeight;
-        this.doLayoutEditors(
-          {
-            width: this._prevDomWidth,
-            height: this._prevDomHeight,
-          },
-          true,
-        );
+        const currentWidth = this._domNode.offsetWidth;
+        const currentHeight = this._domNode.offsetHeight;
+        if (currentWidth !== this._prevDomWidth || currentHeight !== this._prevDomHeight) {
+          this.doLayoutEditors();
+        }
+        this._prevDomWidth = currentWidth;
+        this._prevDomHeight = currentHeight;
       }
     });
   }
 
-  private doLayoutEditors(e: IDimension, postponeRendering?: boolean) {
-    if (this.codeEditor) {
-      if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
-        this.codeEditor.layout(e, postponeRendering);
-      }
+  private _layoutEditorWorker() {
+    if (!this.currentOpenType) {
+      return;
     }
-    if (this.diffEditor) {
-      if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.diff) {
-        this.diffEditor.layout(e, postponeRendering);
-      }
+
+    switch (this.currentOpenType.type) {
+      case EditorOpenType.code:
+        if (this.codeEditor) {
+          this.codeEditor.layout();
+        }
+        break;
+      case EditorOpenType.diff:
+        if (this.diffEditor) {
+          this.diffEditor.layout();
+        }
+        break;
+      default:
+        break;
     }
   }
 
+  protected _measure: IDisposable | undefined;
+  doLayoutEditors() {
+    if (this._measure) {
+      this._measure.dispose();
+    }
+    this._measure = fastdom.mutate(() => {
+      this._layoutEditorWorker();
+    });
+  }
+
   setContextKeys() {
     if (!this._resourceContext) {
       const getLanguageFromModel = (uri: URI) => {
@@ -875,24 +897,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
         }
         return result;
       };
-      this._resourceContext = new ResourceContextKey(this.contextKeyService, (uri: URI) => {
-        const res = getLanguageFromModel(uri);
-        if (res) {
-          return res;
-        } else {
-          return getLanguageFromModel(uri);
-        }
-      });
+      this._resourceContext = new ResourceContextKey(this.contextKeyService, (uri: URI) => getLanguageFromModel(uri));
       this._diffResourceContextKey = new ResourceContextKey(
         this.contextKeyService,
-        (uri: URI) => {
-          const res = getLanguageFromModel(uri);
-          if (res) {
-            return res;
-          } else {
-            return getLanguageFromModel(uri);
-          }
-        },
+        (uri: URI) => getLanguageFromModel(uri),
         'diffResource',
       );
       this._editorLangIDContextKey = this.contextKeyService.createKey<string>('editorLangId', '');
@@ -988,6 +996,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     }
   }
 
+  resetOpenType() {
+    this._currentOpenType = null;
+  }
+
   @OnEvent(ResourceOpenTypeChangedEvent)
   oResourceOpenTypeChangedEvent(e: ResourceOpenTypeChangedEvent) {
     const uri = e.payload;
@@ -995,7 +1007,8 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       this.cachedResourcesOpenTypes.delete(uri.toString());
     }
     if (this.currentResource && this.currentResource.uri.isEqual(uri)) {
-      this._currentOpenType = null;
+      this.resetOpenType();
+
       this.notifyBodyChanged();
       this.displayResourceComponent(this.currentResource, {});
     }
@@ -1101,23 +1114,20 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
         [ServiceNames.CONTEXT_KEY_SERVICE]: this.contextKeyService.contextKeyService,
       },
     );
-
     setTimeout(() => {
-      fastdom.mutate(() => {
-        this.codeEditor.layout();
-      });
+      this.doLayoutEditors();
     });
     this.addDispose(
       this.codeEditor.onRefOpen(() => {
-        this.codeEditor.layout();
+        this.doLayoutEditors();
       }),
     );
-    this.addDispose(
+    this.toDispose.push(
       this.codeEditor.onCursorPositionChanged((e) => {
         this._onCurrentEditorCursorChange.fire(e);
       }),
     );
-    this.addDispose(
+    this.toDispose.push(
       this.codeEditor.onSelectionsChanged((e) => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
           this.eventBus.fire(
@@ -1132,7 +1142,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
         }
       }),
     );
-    this.addDispose(
+    this.toDispose.push(
       this.codeEditor.onVisibleRangesChanged((e) => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
           this.eventBus.fire(
@@ -1146,7 +1156,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
         }
       }),
     );
-    this.addDispose(
+    this.toDispose.push(
       this.codeEditor.onConfigurationChanged(() => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.code) {
           this.eventBus.fire(
@@ -1189,15 +1199,10 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       },
     );
     setTimeout(() => {
-      fastdom.mutate(() => {
-        this.diffEditor.layout();
-      });
+      this.doLayoutEditors();
     });
-
     this.diffEditor.onRefOpen(() => {
-      fastdom.mutate(() => {
-        this.diffEditor.layout();
-      });
+      this.doLayoutEditors();
     });
 
     this.addDiffEditorEventListeners(this.diffEditor.originalEditor, 'original');
@@ -1222,7 +1227,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
   }
 
   private addDiffEditorEventListeners(editor: IEditor, side?: 'modified' | 'original') {
-    this.addDispose(
+    this.toDispose.push(
       editor.onSelectionsChanged((e) => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.diff) {
           this.eventBus.fire(
@@ -1239,7 +1244,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       }),
     );
 
-    this.addDispose(
+    this.toDispose.push(
       editor.onVisibleRangesChanged((e) => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.diff) {
           this.eventBus.fire(
@@ -1254,7 +1259,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       }),
     );
 
-    this.addDispose(
+    this.toDispose.push(
       editor.onConfigurationChanged(() => {
         if (this.currentOpenType && this.currentOpenType.type === EditorOpenType.diff) {
           this.eventBus.fire(
@@ -1809,8 +1814,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
       this.resolveTabChanged(_resource, this.currentResource);
       this._currentOpenType = activeOpenType;
       this.notifyBodyChanged();
-
-      this.layoutEditors();
+      this.doLayoutEditors();
 
       this.cachedResourcesActiveOpenTypes.set(resource.uri.toString(), activeOpenType);
     }
@@ -1962,7 +1966,8 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     const oldResource = this._currentResource;
 
     this._currentResource = null;
-    this._currentOpenType = null;
+
+    this.resetOpenType();
     this.notifyTabChanged();
     this.notifyBodyChanged();
     this._currentOrPreviousFocusedEditor = null;
@@ -2208,6 +2213,7 @@ export class EditorGroup extends WithEventBus implements IGridEditorGroup {
     super.dispose();
     this.codeEditor && this.codeEditor.dispose();
     this.diffEditor && this.diffEditor.dispose();
+    this.toDispose.forEach((disposable) => disposable.dispose());
     this.eventBus.fire(
       new EditorGroupDisposeEvent({
         group: this,

package/src/common/editor.ts

@@ -310,7 +310,7 @@ export interface IDiffEditor extends IDisposable {
 
   modifiedEditor: IEditor;
 
-  layout(dimension?: IDimension, postponeRendering?: boolean): void;
+  layout(): void;
 
   focus(): void;