fix: fixed drag height

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

Hide file tree

Showing 6 changed files with 76 additions and 72 deletions.
diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.html b/src/workbench/browser/src/app/pages/api/test/api-test.component.html
@@ -1,5 +1,5 @@
 <div class="test_wrap">
-  <eo-split-panel [topStyle]="{ height: '45%' }">
+  <eo-split-panel [topStyle]="{ height: initHeight }" (eoDrag)="handleEoDrag($event)">
     <div class="top_container scroll_container" top>
       <form nz-form [nzLayout]="'vertical'" [formGroup]="validateForm">
         <nz-form-item nz-col class="basic_info_container">

diff --git a/src/workbench/browser/src/app/pages/api/test/api-test.component.ts b/src/workbench/browser/src/app/pages/api/test/api-test.component.ts
@@ -40,6 +40,7 @@ import { LanguageService } from 'eo/workbench/browser/src/app/core/services/lang
 import { ViewportScroller } from '@angular/common';
 import { ContentTypeByAbridge } from 'eo/workbench/browser/src/app/shared/services/api-test/api-test.model';
 
+const API_TEST_DRAG_TOP_HEIGHT_KEY = 'API_TEST_DRAG_TOP_HEIGHT';
 @Component({
   selector: 'eo-api-test',
   templateUrl: './api-test.component.html',
@@ -70,6 +71,7 @@ export class ApiTestComponent implements OnInit, OnDestroy {
     request: {},
   };
   scriptCache = {};
+  initHeight = localStorage.getItem(API_TEST_DRAG_TOP_HEIGHT_KEY) || '45%';
   testServer: TestServerLocalNodeService | TestServerServerlessService | TestServerRemoteService;
   REQUEST_METHOD = objectToArray(RequestMethod);
   REQUEST_PROTOCOL = objectToArray(RequestProtocol);
@@ -192,6 +194,11 @@ export class ApiTestComponent implements OnInit, OnDestroy {
   changeBodyType($event) {
     this.initContentType();
   }
+  handleEoDrag([leftEl]: [HTMLDivElement, HTMLDivElement]) {
+    if (leftEl.style.height) {
+      localStorage.setItem(API_TEST_DRAG_TOP_HEIGHT_KEY, leftEl.style.height);
+    }
+  }
   private test() {
     this.scriptCache = {
       beforeScript: this.beforeScript,
@@ -316,11 +323,13 @@ export class ApiTestComponent implements OnInit, OnDestroy {
         requestBody: [],
         queryParams: [],
         restParams: [],
-        requestHeaders: [{
-          required:true,
-          name:'content-type',
-          value:ContentTypeByAbridge.JSON
-        }],
+        requestHeaders: [
+          {
+            required: true,
+            name: 'content-type',
+            value: ContentTypeByAbridge.JSON,
+          },
+        ],
       });
     } else {
       this.getApi(id);

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
@@ -38,11 +38,21 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     if (val === this.$$code) {
       return;
     }
+    let code = '';
     try {
-      this.$$code = typeof val === 'string' ? val : JSON.stringify(val);
+      code = typeof val === 'string' ? val : JSON.stringify(val);
     } catch {
-      this.$$code = String(val);
+      code = String(val);
     }
+
+    if (code && this.isFirstFormat) {
+      this.isFirstFormat = false;
+      (async () => {
+        this.$$code = await this.formatCode();
+      })();
+    }
+
+    this.$$code = code;
   }
   /** Scroll bars appear over 20 lines */
   @Input() maxLine = 200;
@@ -53,6 +63,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
   @Input() completions = [];
   @Output() codeChange = new EventEmitter<string>();
   $$code = '';
+  isFirstFormat = true;
   codeEdtor: editor.IStandaloneCodeEditor;
   isReadOnly = false;
   completionItemProvider: monaco.IDisposable;
@@ -102,13 +113,13 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     console.log('codeEdtor', this.codeEdtor);
     requestIdleCallback(() => this.rerenderEditor());
   }
-  ngOnChanges() {
+  async ngOnChanges() {
     // * update root type
     if (this.eventList.includes('type') && !this.hiddenList.includes('type')) {
       const type = whatTextType(this.$$code || '');
       this.editorType = type;
       if (this.autoFormat) {
-        this.$$code = this.formatCode();
+        // this.$$code = await this.formatCode();
       }
     }
   }
@@ -207,10 +218,14 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
     this.codeEdtor?.layout?.();
   }
   formatCode() {
-    this.codeEdtor.getAction('editor.action.formatDocument').run();
-    return this.codeEdtor.getValue();
+    return new Promise<string>((resolve) => {
+      setTimeout(() => {
+        this.codeEdtor?.getAction('editor.action.formatDocument').run();
+        resolve(this.codeEdtor?.getValue() || '');
+      });
+    });
   }
-  handleAction(event: EventType) {
+  async handleAction(event: EventType) {
     switch (event) {
       case 'format': {
         // * format code
@@ -243,7 +258,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
         {
           const tmpNewWin = window.open();
           const value = this.codeEdtor.getValue();
-          const code = this.formatCode();
+          const code = await this.formatCode();
           tmpNewWin.document.open();
           tmpNewWin.document.write(code);
           tmpNewWin.document.close();
@@ -252,7 +267,7 @@ export class EoMonacoEditorComponent implements AfterViewInit, OnInit, OnChanges
       case 'download':
         {
           const value = this.codeEdtor.getValue();
-          const code = this.formatCode();
+          const code = await this.formatCode();
           const a = document.createElement('a');
           const blob = new Blob([code]);
           const url = window.URL.createObjectURL(blob);

diff --git a/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.html b/src/workbench/browser/src/app/shared/components/split-panel/split.panel.component.html
@@ -1,13 +1,13 @@
 <div class="split-wrapper" [ngStyle]="{ flexDirection: direction }">
-  <div #scalable class="scalable" [style]="topStyle">
+  <div #scalable class="flex-shrink-0 scalable" [style]="topStyle">
     <ng-content select="[top]"></ng-content>
   </div>
-  <div #separator class="separator" (mousedown)="startDrag($event)" [ngClass]="[direction]">
+  <div #separator class="flex-shrink-0 separator" (mousedown)="startDrag($event)" [ngClass]="[direction]">
     <div *ngIf="!hideSeparator" class="trigger-bar-con">
       <i></i><i></i><i></i><i></i>
     </div>
   </div>
-  <div #bottomRef [style]="bottomStyle">
+  <div #bottomRef [style]="bottomStyle" class="flex-shrink-0">
     <ng-content select="[bottom]"></ng-content>
   </div>
 </div>
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,93 +1,60 @@
-import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, AfterViewInit } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, ElementRef, Input, Output, EventEmitter } from '@angular/core';
+import { throttle } from 'eo/workbench/browser/src/app/utils';
 
 type EventListener = HTMLElement['removeEventListener'] | HTMLElement['addEventListener'];
 @Component({
   selector: 'eo-split-panel',
   templateUrl: './split.panel.component.html',
   styleUrls: ['./split.panel.component.scss'],
 })
-export class SplitPanelComponent implements OnInit, OnDestroy, AfterViewInit {
+export class SplitPanelComponent implements OnInit, OnDestroy {
   @Input() direction: 'column' | 'row' = 'column';
   @Input() topStyle;
   @Input() bottomStyle;
   @Input() hideSeparator = false;
+  @Output() eoDrag = new EventEmitter<[HTMLDivElement, HTMLDivElement]>();
 
-  @ViewChild('scalable') scalableRef: ElementRef;
-  @ViewChild('separator') separatorRef: ElementRef;
-  @ViewChild('bottomRef') bottomRef: ElementRef;
+  @ViewChild('scalable') scalableRef: ElementRef<HTMLDivElement>;
+  @ViewChild('separator') separatorRef: ElementRef<HTMLDivElement>;
+  @ViewChild('bottomRef') bottomRef: ElementRef<HTMLDivElement>;
 
   startX: number;
   startY: number;
   startWidth: number;
   startHeight: number;
   maxRightWidth: number;
-  intersectionObserver: IntersectionObserver;
 
   constructor() {}
-  ngAfterViewInit(): void {
-    this.intersectionObserver = new IntersectionObserver(
-      ([change]) => {
-        // @ts-ignore
-        // ⚠️ Feature detection
-        if (typeof change.isVisible === 'undefined') {
-          // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
-          // change.isVisible = true;
-          return;
-        }
-        // @ts-ignore
-        if (change.isIntersecting && change.isVisible) {
-          // console.log('显示了');
-        } else {
-          const scalableEl = this.scalableRef.nativeElement;
-          const bottomEl = this.bottomRef.nativeElement;
-          const { bottom } = change.boundingClientRect;
-          if (this.direction === 'column' && bottom >= document.documentElement.offsetHeight - 30) {
-            const h =
-              document.documentElement.offsetHeight - change.target.parentElement.getBoundingClientRect().top - 30 - 10;
-            scalableEl.style.height = `${h}px`;
-            bottomEl.style.height = `calc(100% - 12px - ${scalableEl.style.height})`;
-          }
-        }
-      },
-      {
-        threshold: [1.0],
-        // @ts-ignore
-        // 🆕 Set a minimum delay between notifications
-        delay: 600,
-        // 🆕 Track the actual visibility of the element
-        trackVisibility: true,
-      }
-    );
-    this.intersectionObserver.observe(this.separatorRef.nativeElement);
-  }
 
   ngOnInit(): void {}
 
-  ngOnDestroy(): void {
-    this.intersectionObserver.disconnect();
-  }
+  ngOnDestroy(): void {}
 
   // 拖拽中
-  onDrag = (e: MouseEvent) => {
+  onDrag = throttle((e: MouseEvent) => {
     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) {
+        if (e.clientY >= document.documentElement.offsetHeight - (30 + 6)) {
           return;
         }
-        scalableEl.style.height = `${this.startHeight + e.clientY - this.startY}px`;
-        bottomEl.style.height = `calc(100% - 12px - ${scalableEl.style.height})`;
+        const h = ((this.startHeight + e.clientY - this.startY) / offsetHeight) * 100;
+        scalableEl.style.height = `min(${h}%, calc(100% - 6px))`;
+        bottomEl.style.height = `calc(100% - ${scalableEl.style.height} - 6px)`;
       } else {
-        scalableEl.style.width = `${this.startWidth + e.clientX - this.startX}px`;
-        bottomEl.style.width = `calc(100% - 12px - ${scalableEl.style.width})`;
+        const w = ((this.startWidth + e.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);
 
   // 拖拽结束
   dragEnd = () => {
-    document.documentElement.style.userSelect = 'unset';
+    document.documentElement.style.removeProperty('user-select');
     this.handleEventListener('remove');
   };
 
@@ -102,7 +69,7 @@ export class SplitPanelComponent implements OnInit, OnDestroy, AfterViewInit {
       this.startHeight = parseInt(window.getComputedStyle(scalableEl).height, 10);
     }
 
-    document.documentElement.style.userSelect = 'none';
+    document.documentElement.style.setProperty('user-select', 'none');
     this.handleEventListener('add');
   };
 

diff --git a/src/workbench/browser/src/app/utils/index.ts b/src/workbench/browser/src/app/utils/index.ts
@@ -175,3 +175,16 @@ export function debounce(fn, wait = 50) {
     }, wait);
   };
 }
+
+export function throttle(fn, gap) {
+  let timerId = null;
+  return function (...rest) {
+    if (timerId === null) {
+      fn(...rest); // 立即执行
+      timerId = setTimeout(() => {
+        // 在间隔时间后清除标识
+        timerId = null;
+      }, gap);
+    }
+  };
+}