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

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

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