[GitHub] [flink] yangjunhan commented on a change in pull request #17619: [FLINK-23990][runtime-web] Replace custom monaco editor with nz-code-editor

[GitBox <gi...@apache.org>]

yangjunhan commented on a change in pull request #17619:
URL: https://github.com/apache/flink/pull/17619#discussion_r741735964



##########
File path: flink-runtime-web/web-dashboard/src/app/share/common/editor/auto-resize.directive.ts
##########
@@ -0,0 +1,76 @@
+import { Directive, ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { animationFrameScheduler, interval, Observable, Subject } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+
+import { NzCodeEditorComponent } from 'ng-zorro-antd/code-editor';
+
+@Directive({
+  selector: 'nz-code-editor[flinkAutoResize]'
+})
+export class AutoResizeDirective implements OnDestroy, OnInit {
+  private destroy$ = new Subject();
+  hiddenMinimap = false;
+
+  constructor(
+    private elementRef: ElementRef<HTMLElement>,
+    private nzCodeEditorComponent: NzCodeEditorComponent,
+    private renderer: Renderer2
+  ) {}
+
+  public ngOnInit(): void {
+    this.createResizeObserver()
+      .pipe(
+        distinctUntilChanged((prev, curr) => {
+          const { width: prevWidth, height: prevHeight } = prev;
+          const { width: currWidth, height: currHeight } = curr;
+          return prevWidth === currWidth && prevHeight === currHeight;
+        }),
+        debounceTime(50, animationFrameScheduler),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(curr => {
+        const curWidth = curr.width;
+        this.hiddenMinimap = curWidth <= 65;

Review comment:
       This part of codes can in fact be removed. I was testing the behaviour of enabling miniMap locally, the miniMap covered the whole editor when I resized the horizontal space to an extremely small size. But since all editors disable the miniMap, this issue will not actually happen.




-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org

For queries about this service, please contact Infrastructure at:
users@infra.apache.org