fix: test result editor can not scroll

Postcatlab · Aug 3, 2022 · 2cdeb29 · 2cdeb29
1 parent ea2a3e0
commit 2cdeb29
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 11 deletions.
diff --git a/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html b/...ch/browser/src/app/pages/api/test/result-response/api-test-result-response.component.html
@@ -44,6 +44,6 @@
       and open it with other programs. -->
     </div>
     <eo-monaco-editor *ngSwitchDefault class="mt20" [autoFormat]="true" [(code)]="model.body" [maxLine]="20"
-      [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
+      [readOnly]="true" [eventList]="['type', 'format', 'copy', 'search']"></eo-monaco-editor>
   </div>
 </div>
diff --git a/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts b/src/workbench/browser/src/app/shared/components/monaco-editor/monaco-editor.component.ts
@@ -34,6 +34,7 @@ const eventHash = new Map()
 export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges, OnDestroy {
   @Input() eventList: EventType[] = [];
   @Input() hiddenList: string[] = [];
+  @Input() readOnly = false;
   @Input() set code(val) {
     if (val === this.$$code) {
       return;
@@ -45,10 +46,11 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       code = String(val);
     }
 
-    if (code && this.isFirstFormat) {
+    if (code && this.isFirstFormat && this.autoFormat) {
       this.isFirstFormat = false;
       (async () => {
         this.$$code = await this.formatCode();
+        this.defaultConfig.readOnly = this.readOnly;
       })();
     }
 
@@ -95,6 +97,12 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     minimap: {
       enabled: false,
     },
+    formatOnPaste: true,
+    formatOnType: true,
+    scrollbar: {
+      scrollByPage: true,
+      alwaysConsumeMouseWheel: false,
+    },
     overviewRulerLanes: 0,
     quickSuggestions: { other: true, strings: true },
   };
@@ -219,8 +227,8 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   }
   formatCode() {
     return new Promise<string>((resolve) => {
-      setTimeout(() => {
-        this.codeEdtor?.getAction('editor.action.formatDocument').run();
+      setTimeout(async () => {
+        await this.codeEdtor?.getAction('editor.action.formatDocument').run();
         resolve(this.codeEdtor?.getValue() || '');
       });
     });

diff --git a/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.ts b/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.ts
@@ -1,4 +1,14 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import {
+  Component,
+  OnInit,
+  OnDestroy,
+  ViewChild,
+  ElementRef,
+  AfterViewInit,
+  Input,
+  Output,
+  EventEmitter,
+} from '@angular/core';
 import { throttle } from 'eo/workbench/browser/src/app/utils';
 
 type EventListener = HTMLElement['removeEventListener'] | HTMLElement['addEventListener'];
@@ -7,7 +17,7 @@ type EventListener = HTMLElement['removeEventListener'] | HTMLElement['addEventL
   templateUrl: './split.panel.component.html',
   styleUrls: ['./split.panel.component.scss'],
 })
-export class SplitPanelComponent implements OnInit, OnDestroy {
+export class SplitPanelComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input() direction: 'column' | 'row' = 'column';
   @Input() topStyle;
   @Input() bottomStyle;
@@ -25,33 +35,43 @@ export class SplitPanelComponent implements OnInit, OnDestroy {
   maxRightWidth: number;
 
   constructor() {}
+  ngAfterViewInit(): void {
+    if (this.direction === 'column' && this.topStyle.height) {
+      const bottomEl = this.bottomRef.nativeElement;
+      bottomEl.style.height = `calc(100% - ${this.topStyle.height} - 6px)`;
+    }
+  }
 
   ngOnInit(): void {}
 
   ngOnDestroy(): void {}
 
-  // 拖拽中
-  onDrag = throttle((e: MouseEvent) => {
+  updateLayout = throttle(({ clientY, clientX }) => {
     const scalableEl = this.scalableRef.nativeElement;
     const bottomEl = this.bottomRef.nativeElement;
     const { offsetHeight, offsetWidth } = scalableEl.parentElement;
     if (scalableEl) {
       if (this.direction === 'column') {
-        if (e.clientY >= document.documentElement.offsetHeight - (30 + 6)) {
+        if (clientY >= document.documentElement.offsetHeight - (30 + 6)) {
           return;
         }
-        const h = ((this.startHeight + e.clientY - this.startY) / offsetHeight) * 100;
+        const h = ((this.startHeight + clientY - this.startY) / offsetHeight) * 100;
         scalableEl.style.height = `min(${h}%, calc(100% - 6px))`;
         bottomEl.style.height = `calc(100% - ${scalableEl.style.height} - 6px)`;
       } else {
-        const w = ((this.startWidth + e.clientX - this.startX) / offsetWidth) * 100;
+        const w = ((this.startWidth + clientX - this.startX) / offsetWidth) * 100;
         scalableEl.style.width = `min(${w}%, calc(100% - 6px))`;
         bottomEl.style.width = `calc(100% - ${scalableEl.style.width} - 6px)`;
       }
       this.eoDrag.emit([scalableEl, bottomEl]);
     }
   }, 20);
 
+  // 拖拽中
+  onDrag = (e: MouseEvent) => {
+    this.updateLayout(e);
+  };
+
   // 拖拽结束
   dragEnd = () => {
     document.documentElement.style.removeProperty('user-select');