fix: improve the forceUpdate after editor open and close (#441)

DTStack · Sep 22, 2021 · 50e0de2 · 50e0de2
1 parent 8ad91e0
commit 50e0de2
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 10 deletions.
diff --git a/src/controller/editor.tsx b/src/controller/editor.tsx
@@ -22,9 +22,7 @@ import { editor as MonacoEditor, Uri } from 'mo/monaco';
 
 import {
     EditorService,
-    ExplorerService,
     IEditorService,
-    IExplorerService,
     IStatusBarService,
     StatusBarService,
 } from 'mo/services';
@@ -60,13 +58,11 @@ export class EditorController extends Controller implements IEditorController {
     private editorStates = new Map();
     private readonly editorService: IEditorService;
     private readonly statusBarService: IStatusBarService;
-    private readonly explorerService: IExplorerService;
 
     constructor() {
         super();
         this.editorService = container.resolve(EditorService);
         this.statusBarService = container.resolve(StatusBarService);
-        this.explorerService = container.resolve(ExplorerService);
     }
 
     public open<T>(tab: IEditorTab<any>, groupId?: number) {
@@ -117,7 +113,6 @@ export class EditorController extends Controller implements IEditorController {
     public onCloseTab = (tabId?: string, groupId?: number) => {
         if (tabId && groupId) {
             this.editorService.closeTab(tabId, groupId);
-            this.explorerService.forceUpdate();
             this.emit(EditorEvent.OnCloseTab, tabId, groupId);
         }
     };

diff --git a/src/extensions/editorTree/index.ts b/src/extensions/editorTree/index.ts
@@ -9,12 +9,10 @@ export const ExtendsEditorTree: IExtension = {
 
         molecule.editorTree.onClose((tabId, groupId) => {
             molecule.editor.closeTab(tabId, groupId);
-            molecule.explorer.forceUpdate();
         });
 
         molecule.editorTree.onCloseOthers((tabItem, groupId) => {
             molecule.editor.closeOther(tabItem, groupId);
-            molecule.explorer.forceUpdate();
         });
 
         molecule.editorTree.onCloseSaved((groupId) => {
@@ -30,7 +28,6 @@ export const ExtendsEditorTree: IExtension = {
                     molecule.editor.closeAll(group.id!);
                 });
             }
-            molecule.explorer.forceUpdate();
         });
 
         molecule.editorTree.onSaveAll((groupId) => {

diff --git a/src/react/component.ts b/src/react/component.ts
@@ -1,3 +1,4 @@
+import { cloneDeep } from 'lodash';
 import { EventEmitter, GlobalEvent } from 'mo/common/event';
 
 enum componentEvents {
@@ -55,7 +56,7 @@ export abstract class Component<S = any>
     }
 
     public forceUpdate() {
-        this.setState(Object.assign({}, this.state));
+        this.setState(cloneDeep(this.state));
     }
 
     public getState(): S {

diff --git a/src/services/workbench/editorService.ts b/src/services/workbench/editorService.ts
@@ -17,6 +17,7 @@ import {
 import { searchById } from '../helper';
 import { editor as MonacoEditor, Uri } from 'mo/monaco';
 import { IMenuItemProps } from 'mo/components';
+import { ExplorerService, IExplorerService } from './explorer/explorerService';
 
 export interface IEditorService extends Component<IEditor> {
     /**
@@ -196,10 +197,12 @@ export class EditorService
     implements IEditorService {
     protected state: IEditor;
     protected defaultActions: IEditorActionsProps[];
+    protected explorerService: IExplorerService;
     constructor() {
         super();
         this.state = container.resolve(EditorModel);
         this.defaultActions = getEditorInitialActions();
+        this.explorerService = container.resolve(ExplorerService);
     }
 
     public updateEditorOptions(options: IEditorOptions): void {
@@ -378,6 +381,7 @@ export class EditorService
             () => {
                 const isOpened = this.isOpened(tabId);
                 !isOpened && this.disposeModel(tab);
+                this.explorerService.forceUpdate();
             }
         );
     }
@@ -411,6 +415,7 @@ export class EditorService
         this.setActive(groupId, tabId!);
 
         this.disposeModel(removedTabs);
+        this.explorerService.forceUpdate();
     }
 
     public closeToRight(tab: IEditorTab, groupId: number) {
@@ -442,6 +447,7 @@ export class EditorService
         });
         this.setActive(groupId, tabId!);
         this.disposeModel(removedTabs || []);
+        this.explorerService.forceUpdate();
     }
 
     public closeToLeft(tab: IEditorTab, groupId: number) {
@@ -473,6 +479,7 @@ export class EditorService
         });
         this.setActive(groupId, tabId!);
         this.disposeModel(removedTabs || []);
+        this.explorerService.forceUpdate();
     }
 
     public getGroupById(groupId: number): IEditorGroup | undefined {
@@ -591,6 +598,7 @@ export class EditorService
             current: group,
             groups: [...groups],
         });
+        this.explorerService.forceUpdate();
     }
 
     public onOpenTab(callback: (tab: IEditorTab) => void): void {
@@ -626,6 +634,7 @@ export class EditorService
                 () => {
                     // dispose all models in specific group
                     this.disposeModel(removed);
+                    this.explorerService.forceUpdate();
                 }
             );
         }

diff --git a/src/services/workbench/explorer/folderTreeService.ts b/src/services/workbench/explorer/folderTreeService.ts
@@ -343,7 +343,6 @@ export class FolderTreeService
 
     public onSelectFile(callback: (file: ITreeNodeItemProps) => void) {
         this.subscribe(FolderTreeEvent.onSelectFile, callback);
-        this.explorerService.render();
     }
 
     public onDropTree = (treeData: ITreeNodeItemProps[]) => {