Merge pull request #335 from zowe/v2.x/event-listener-diffEditor

Used ViewPort Events to Resize the DiffEditor
zowe · Oct 16, 2024 · 4cc2f6f · 4cc2f6f
2 parents e1807c1 + b11588a
commit 4cc2f6f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 13 deletions.
diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.component.ts b/webClient/src/app/editor/code-editor/monaco/monaco.component.ts
@@ -25,6 +25,7 @@ import { EditorKeybindingService } from '../../../shared/editor-keybinding.servi
 import { KeyCode } from '../../../shared/keycode-enum';
 import { SnackBarService } from '../../../shared/snack-bar.service';
 import { MessageDuration } from "../../../shared/message-duration";
+import { debounceTime } from 'rxjs/operators';
 const ReconnectingWebSocket = require('reconnecting-websocket');
 
 @Component({
@@ -61,6 +62,7 @@ export class MonacoComponent implements OnInit, OnChanges {
   private showEditor: boolean;
   private showDiffViewer: boolean;
   private keyBindingSub: Subscription = new Subscription();
+  private diffEditor: monaco.editor.IStandaloneDiffEditor | null ;
 
   constructor(
     private monacoService: MonacoService,
@@ -82,7 +84,7 @@ export class MonacoComponent implements OnInit, OnChanges {
     this.monacoConfig = new MonacoConfig();
     let options = this._options ? Object.assign({}, this._options) : {};
     const hasModel = !!options.model;
-    
+
     if (hasModel) {
       const model = monaco.editor.getModel(options.model.uri || '');
       if(model) {
@@ -92,7 +94,7 @@ export class MonacoComponent implements OnInit, OnChanges {
         options.model = monaco.editor.createModel(options.model.value, options.model.language, options.model.uri);
       }
     }
-    this.log.debug("New editor with options=",options);
+    this.log.debug("New editor with options=", options);
     let editor = monaco.editor.create(this.monacoEditorRef.nativeElement, options);
     if (options.theme) {
       this.editorControl._setDefaultTheme(options.theme);
@@ -112,13 +114,12 @@ export class MonacoComponent implements OnInit, OnChanges {
       this.toggleDiffViewer();
     });
 
-    this.editorControl.enableDiffViewer.subscribe(() =>{
+    this.editorControl.enableDiffViewer.subscribe(() => {
       this.showEditor = !this.monacoService.spawnDiffViewer();
       this.showDiffViewer = !this.showEditor;
-    });
-
-    this.editorControl.refreshLayout.subscribe(() =>{
-      setTimeout(() => this.editor.layout(), 1);
+      if (this.showDiffViewer) {
+        this.diffEditor = this.monacoService.getDiffEditor();
+      }
     });
 
     this.editor.onContextMenu((e: any) => {
@@ -137,12 +138,17 @@ export class MonacoComponent implements OnInit, OnChanges {
     });
   }
 
+
+  handleDiffEditorResize() {
+    if (this.showDiffViewer && this.diffEditor) {
+      this.diffEditor.layout();
+    }
+  }
+
   focus(e: any) {
     this.editor.focus();
   }
-  layout(e: any) {
-    this.editor.layout();
-  }
+
 
   ngOnChanges(changes: SimpleChanges) {
     for (const input in changes) {
@@ -152,11 +158,13 @@ export class MonacoComponent implements OnInit, OnChanges {
           changes[input].currentValue['reload'],
           changes[input].currentValue['line']);
         //TODO: This is a workaround to instruct the editor to remeasure its container when switching from diff-viewer to code-editor
-        if(this.showDiffViewer) {
+        if (this.showDiffViewer) {
+          console.log("ngOnChanges: refreshing layout")
           setTimeout(() => this.editor.layout(), 1);
         }
         this.showEditor = true;
         this.showDiffViewer = false;
+        this.diffEditor = null;
       }
     }
   }
@@ -165,8 +173,13 @@ export class MonacoComponent implements OnInit, OnChanges {
   onMonacoInit(editor) {
     this.editorControl.editor.next(editor);
     this.keyBinds(editor);
-    this.viewportEvents.resized.subscribe(()=> {
-      editor.layout()
+    this.viewportEvents.resized
+      .pipe(debounceTime(100))
+      .subscribe(()=> {
+        if (!this.showDiffViewer) {
+          editor.layout()
+        }
+        this.handleDiffEditorResize();
     });
       /* disable for now...
     this.editorControl.connToLS.subscribe((lang) => {
@@ -386,10 +399,14 @@ export class MonacoComponent implements OnInit, OnChanges {
     if (this.showDiffViewer) {
       this.showDiffViewer = false;
       this.showEditor = true;
+      this.diffEditor.dispose();
     }
     else {
       this.showEditor = !this.monacoService.spawnDiffViewer();
       this.showDiffViewer = !this.showEditor;
+      if (this.showDiffViewer) {
+        this.diffEditor = this.monacoService.getDiffEditor();
+      }
     }
   }
 

diff --git a/webClient/src/app/editor/code-editor/monaco/monaco.service.ts b/webClient/src/app/editor/code-editor/monaco/monaco.service.ts
@@ -348,6 +348,10 @@ export class MonacoService implements OnDestroy {
     return true;
   }
 
+  getDiffEditor(): monaco.editor.IStandaloneDiffEditor {
+    return this.diffEditor;
+  }
+
   closeFile(fileNode: ProjectContext) {
     const editorCore = this.editorControl.editorCore.getValue();
     if (!editorCore) {