@difizen/libro-terminal 0.1.0 → 0.1.2

package/src/view.tsx

@@ -1,109 +1,158 @@
 import { CodeOutlined } from '@ant-design/icons';
-import { isFirefox } from '@difizen/mana-app';
 import {
-  BaseView,
-  view,
-  transient,
-  inject,
   Disposable,
-  KeyCode,
-  isOSX,
   DisposableCollection,
   Emitter,
+  KeyCode,
+  ViewInstance,
+  ViewOption,
+  inject,
+  isFirefox,
+  isOSX,
+  transient,
+  useInject,
+  view,
 } from '@difizen/mana-app';
 import { forwardRef } from 'react';
-import type { RendererType } from 'xterm';
+import type { ITerminalOptions } from 'xterm';
 import { Terminal } from 'xterm';
+import { CanvasAddon } from 'xterm-addon-canvas';
 import { FitAddon } from 'xterm-addon-fit';
+import { WebLinksAddon } from 'xterm-addon-web-links';
+import { WebglAddon } from 'xterm-addon-webgl';
 
 import type { CursorStyle, TerminalRendererType } from './configuration.js';
 import {
   DEFAULT_TERMINAL_RENDERER_TYPE,
+  TerminalConfiguration,
   isTerminalRendererType,
 } from './configuration.js';
-import { TerminalConfiguration } from './configuration.js';
 import type { TerminalConnection } from './connection.js';
 import { TerminalManager } from './manager.js';
-import type { TerminalMessage } from './protocol.js';
-import { TerminalViewOption } from './protocol.js';
+import type { TerminalMessage, TerminalViewOption } from './protocol.js';
+import 'xterm/css/xterm.css';
+import { BaseStatefulView } from './stateful-view.js';
 import { TerminalThemeService } from './theme-service.js';
 
 export const TerminalComponent = forwardRef<HTMLDivElement>(function TerminalComponent(
   _props: { top?: number },
   ref,
 ) {
-  // const instance = useInject<LibroTerminalView>(ViewInstance);
+  const instance = useInject<LibroTerminalView>(ViewInstance);
+
   return (
-    <div tabIndex={1} className="libro-terminal" ref={ref}>
-      /
-    </div>
+    <div
+      id={instance.id}
+      //  tabIndex={1}
+      className="libro-terminal"
+      ref={ref}
+    ></div>
   );
 });
 
 @transient()
 @view('libro-terminal-view')
-export class LibroTerminalView extends BaseView {
+export class LibroTerminalView extends BaseStatefulView {
   protected term: Terminal;
   override view = TerminalComponent;
   protected options: TerminalViewOption;
   protected termOpened = false;
   protected initialData = '';
   protected fitAddon: FitAddon;
-  @inject(TerminalConfiguration)
   protected readonly config: TerminalConfiguration;
-  @inject(TerminalThemeService)
   protected readonly themeService: TerminalThemeService;
-  @inject(TerminalManager)
   protected readonly terminalManager: TerminalManager;
 
   protected readonly toDisposeOnConnect = new DisposableCollection();
 
-  protected readonly onDidOpenEmitter = new Emitter<void>();
+  protected readonly onDidOpenEmitter = new Emitter<boolean>();
   readonly onDidOpen = this.onDidOpenEmitter.event;
 
-  protected readonly onDidOpenFailureEmitter = new Emitter<void>();
-  readonly onDidOpenFailure = this.onDidOpenFailureEmitter.event;
+  protected readonly onDidOpenFailureEmitter = new Emitter<unknown>();
 
   protected readonly onSizeChangedEmitter = new Emitter<{
     cols: number;
     rows: number;
   }>();
-  readonly onSizeChanged = this.onSizeChangedEmitter.event;
 
   protected readonly onDataEmitter = new Emitter<string>();
-  readonly onData = this.onDataEmitter.event;
 
   protected readonly onKeyEmitter = new Emitter<{
     key: string;
     domEvent: KeyboardEvent;
   }>();
-  readonly onKey = this.onKeyEmitter.event;
+
   protected readonly onDidCloseEmitter = new Emitter<LibroTerminalView>();
-  readonly onDidClose = this.onDidCloseEmitter.event;
+
+  protected readonly onTitleChangeEmitter = new Emitter<string>();
 
   protected connection?: TerminalConnection;
 
-  constructor(@inject(TerminalViewOption) options: TerminalViewOption) {
+  protected restoreObj?: object;
+
+  protected _isReady = false;
+
+  protected onReadyEmitter = new Emitter<boolean>();
+
+  constructor(
+    @inject(ViewOption) options: TerminalViewOption, // 这里是 server需要的配置
+    @inject(TerminalConfiguration) config: TerminalConfiguration,
+    @inject(TerminalThemeService) themeService: TerminalThemeService,
+    @inject(TerminalManager) terminalManager: TerminalManager,
+  ) {
     super();
     this.options = options;
     this.title.icon = CodeOutlined;
+    this.config = config;
+    this.themeService = themeService;
+    this.terminalManager = terminalManager;
+
     this.createTerm();
-    this.createConnection();
+    // 设置自定义事件
+    this.term.attachCustomKeyEventHandler((e) => {
+      return this.customKeyHandler(e);
+    });
+
+    // 输入
+    this.onData((data) => {
+      if (this.isDisposed) {
+        return;
+      }
+      if (this.connection) {
+        this.connection.send({
+          type: 'stdin',
+          content: [data],
+        });
+      }
+    });
+
+    // dispose tern
     if (this.options.destroyOnClose === true) {
-      this.toDispose.push(Disposable.create(() => this.term.dispose()));
+      this.toDispose.push(
+        Disposable.create(() => {
+          this.term.dispose();
+        }),
+      );
     }
+
+    // 主题
     this.toDispose.push(
-      this.themeService.onDidChange(() =>
-        this.term.setOption('theme', this.themeService.theme),
+      this.themeService.onDidChange(
+        () => (this.term.options.theme = this.themeService.getTheme()),
       ),
     );
+
+    // server title
     this.toDispose.push(
       this.term.onTitleChange((title: string) => {
         if (this.options.useServerTitle) {
           this.title.label = title;
+          this.onTitleChangeEmitter.fire(title);
         }
       }),
     );
+
+    // dispose Emitter
     this.toDispose.push(this.onDidCloseEmitter);
     this.toDispose.push(this.onDidOpenEmitter);
     this.toDispose.push(this.onDidOpenFailureEmitter);
@@ -111,12 +160,14 @@ export class LibroTerminalView extends BaseView {
     this.toDispose.push(this.onDataEmitter);
     this.toDispose.push(this.onKeyEmitter);
 
+    // bind onSizeChanged
     this.toDispose.push(
       this.term.onResize((data) => {
         this.onSizeChangedEmitter.fire(data);
       }),
     );
 
+    // bind ondata
     this.toDispose.push(
       this.term.onData((data) => {
         this.onDataEmitter.fire(data);
@@ -124,32 +175,90 @@ export class LibroTerminalView extends BaseView {
     );
 
     this.toDispose.push(
-      this.term.onBinary((data) => {
-        this.onDataEmitter.fire(data);
-      }),
+      (() => {
+        //  xterm 的 SGR（Select Graphic Rendition）鼠标模式（SGR Mouse Mode），对于特定类型的鼠标事件，xterm 将会发送相应的二进制数据到终端
+        /**
+         * Adds an event listener for when a binary event fires. This is used to
+         * enable non UTF-8 conformant binary messages to be sent to the backend.
+         * Currently this is only used for a certain type of mouse reports that
+         * happen to be not UTF-8 compatible.
+         * The event value is a JS string, pass it to the underlying pty as
+         * binary data, e.g. `pty.write(Buffer.from(data, 'binary'))`.
+         * @returns an `IDisposable` to stop listening.
+         */
+        return this.term.onBinary((data) => {
+          this.onDataEmitter.fire(data);
+        });
+      })(),
     );
 
+    // bind onKey
     this.toDispose.push(
       this.term.onKey((data) => {
         this.onKeyEmitter.fire(data);
       }),
     );
   }
+
+  override afterRestore() {
+    this.initConnection()
+      .then((connection) => {
+        this._isReady = true;
+        this.connection = connection;
+        this.onReadyEmitter.fire(true);
+
+        this.toDispose.push(connection.messageReceived(this.onMessage));
+        this.toDispose.push(connection);
+
+        const dispose = connection.connectionStatusChanged(() => {
+          this.initOnceAfterConnected(dispose);
+        });
+        return connection;
+      })
+      .catch((e) => {
+        console.error(e);
+      });
+  }
+  async initConnection() {
+    if (!this.restoreObj) {
+      const connection = await this.createConnection();
+      return connection;
+    } else {
+      const options = { ...this.options, ...this.restoreObj };
+      const restoreConnection = await this.terminalManager.getOrCreate(options);
+      return restoreConnection;
+    }
+  }
+
+  storeState(): object {
+    return { name: this.name };
+  }
+
+  restoreState(oldState: object): void {
+    const state = oldState as { name: string };
+    this.restoreObj = state;
+  }
+
+  // todo merge options to initcommand
+
+  override dispose(): void {
+    if (!this.connection?.disposed) {
+      this.connection?.shutdown().catch((reason) => {
+        console.error(`Terminal not shut down: ${reason}`);
+      });
+    }
+    super.dispose();
+  }
+
   protected createConnection = async () => {
     const connection = await this.terminalManager.getOrCreate(this.options);
-    this.connection = connection;
-    connection.messageReceived(this.onMessage);
-    if (this.isDisposed) {
-      return;
-    }
-    this.initialConnection();
-    this.toDispose.push(connection.connectionStatusChanged(this.initialConnection));
+    return connection;
   };
 
   /**
    * Handle a message from the terminal session.
    */
-  protected onMessage(msg: TerminalMessage): void {
+  protected onMessage = (msg: TerminalMessage) => {
     switch (msg.type) {
       case 'stdout':
         if (msg.content) {
@@ -162,26 +271,47 @@ export class LibroTerminalView extends BaseView {
       default:
         break;
     }
-  }
+  };
 
-  protected initialConnection() {
+  protected initOnceAfterConnected(dispose: Disposable) {
     if (this.isDisposed) {
       return;
     }
     if (this.connection?.connectionStatus !== 'connected') {
       return;
     }
-    this.title.label = `Terminal ${this.connection.name}`;
+
+    this.initialTitle();
+    this.setSessionSize();
+    this.initialCommand();
+    // 只执行一次
+    if (dispose) {
+      dispose.dispose();
+    }
+  }
+
+  // 设置初始命令
+  protected initialCommand = () => {
     if (this.connection && this.options.initialCommand) {
       this.connection?.send({
         type: 'stdin',
         content: [this.options.initialCommand + '\r'],
       });
     }
+  };
+
+  // default title
+  protected initialTitle() {
+    if (this.connection?.connectionStatus !== 'connected') {
+      return;
+    }
+    const title = `Terminal ${this.connection.name}`;
+    this.title.label = title;
+    this.onTitleChangeEmitter.fire(title);
   }
 
   protected createTerm = () => {
-    const term = new Terminal({
+    const options = {
       cursorBlink: this.config.get('terminal.integrated.cursorBlinking'),
       cursorStyle: this.getCursorStyle(),
       cursorWidth: this.config.get('terminal.integrated.cursorWidth'),
@@ -201,14 +331,14 @@ export class LibroTerminalView extends BaseView {
       rendererType: this.getTerminalRendererType(
         this.config.get('terminal.integrated.rendererType'),
       ),
-      theme: this.themeService.theme,
-    });
-    const fitAddon = new FitAddon();
-    term.loadAddon(fitAddon);
+      theme: this.themeService.getTheme(),
+    };
+
+    const [term, fitAddon] = this.createTerminal(options);
     this.fitAddon = fitAddon;
     this.term = term;
-    this.term.attachCustomKeyEventHandler((e) => this.customKeyHandler(e));
   };
+
   protected get enableCopy(): boolean {
     return this.config.get('terminal.enableCopy');
   }
@@ -216,16 +346,19 @@ export class LibroTerminalView extends BaseView {
   protected get enablePaste(): boolean {
     return this.config.get('terminal.enablePaste');
   }
+
   protected get copyOnSelection(): boolean {
     return this.config.get('terminal.integrated.copyOnSelection');
   }
 
   protected customKeyHandler = (event: KeyboardEvent): boolean => {
-    const keyBindings = KeyCode.createKeyCode(event).toString();
+    const keycode = KeyCode.createKeyCode(event);
+    const keyBindings = keycode.toString();
     const ctrlCmdCopy =
       (isOSX && keyBindings === 'meta+c') || (!isOSX && keyBindings === 'ctrl+c');
     const ctrlCmdPaste =
       (isOSX && keyBindings === 'meta+v') || (!isOSX && keyBindings === 'ctrl+v');
+
     if (ctrlCmdCopy && this.enableCopy && this.term.hasSelection()) {
       return false;
     }
@@ -249,79 +382,222 @@ export class LibroTerminalView extends BaseView {
    */
   protected getTerminalRendererType = (
     terminalRendererType?: string | TerminalRendererType,
-  ): RendererType => {
+  ): TerminalRendererType => {
     if (terminalRendererType && isTerminalRendererType(terminalRendererType)) {
       return terminalRendererType;
     }
     return DEFAULT_TERMINAL_RENDERER_TYPE;
   };
 
+  override onViewMount(): void {
+    this.open();
+  }
+
+  override onViewUnmount(): void {
+    this.termOpened = false;
+  }
+
+  /**
+   * Refresh the terminal session.
+   *
+   * #### Notes
+   * Failure to reconnect to the session should be caught appropriately
+   */
+  public refresh = async (): Promise<void> => {
+    if (!this.isDisposed && this._isReady) {
+      await this.connection?.reconnect();
+      this.term.clear();
+    }
+  };
+
   protected resizeTerminal = (): void => {
-    const geo = this.fitAddon.proposeDimensions();
-    const cols = geo.cols;
-    const rows = geo.rows - 1; // subtract one row for margin
-    this.term.resize(cols, rows);
+    this.fitAddon.fit();
   };
 
+  /**
+   * Set the size of the terminal in the session.
+   */
+  protected setSessionSize(): void {
+    if (this.container && this.container.current) {
+      const content = [
+        this.term.rows,
+        this.term.cols,
+        this.container.current.offsetHeight,
+        this.container.current.offsetWidth,
+      ];
+      if (!this.isDisposed && this.connection) {
+        this.connection.send({ type: 'set_size', content });
+      }
+    }
+  }
+
   override onViewResize = (): void => {
-    if (!this.isVisible || !this.isAttached) {
+    // todo 这里为什么没有触发isAttached
+    // if (!this.isVisible || !this.isAttached) {
+    //   return;
+    // }
+
+    if (!this.isVisible) {
       return;
     }
+    this.processResize();
+  };
+
+  protected processResize = () => {
     this.open();
     this.resizeTerminal();
+    this.setSessionSize();
   };
 
   protected open = (): void => {
-    if (this.termOpened) {
-      return;
+    try {
+      if (this.termOpened) {
+        return;
+      }
+      const node = this.container?.current;
+      if (node) {
+        this.term.open(node);
+      }
+      if (this.initialData) {
+        this.term.write(this.initialData);
+      }
+      this.termOpened = true;
+      this.onDidOpenEmitter.fire(true);
+      this.initialData = '';
+
+      if (isFirefox) {
+        // The software scrollbars don't work with xterm.js, so we disable the scrollbar if we are on firefox.
+        if (this.term.element) {
+          (this.term.element?.children.item(0) as HTMLElement).style.overflow =
+            'hidden';
+        }
+      }
+    } catch (e) {
+      this.onDidOpenFailureEmitter.fire(e);
+      throw e;
     }
-    const node = this.container?.current;
-    if (node) {
-      this.term.open(node);
+  };
+
+  protected hasWebGLContext(): boolean {
+    // Create canvas element. The canvas is not added to the
+    // document itself, so it is never displayed in the
+    // browser window.
+    const canvas = document.createElement('canvas');
+
+    // Get WebGLRenderingContext from canvas element.
+    const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+
+    // Report the result.
+    try {
+      return gl instanceof WebGLRenderingContext;
+    } catch (error) {
+      return false;
     }
-    if (this.initialData) {
-      this.term.write(this.initialData);
+  }
+
+  /**
+   * Create a xterm.js terminal
+   */
+  protected createTerminal(options: ITerminalOptions): [Terminal, FitAddon] {
+    const term = new Terminal(options);
+    this.addRenderer(term);
+    const fitAddon = new FitAddon();
+    term.loadAddon(fitAddon);
+    term.loadAddon(new WebLinksAddon());
+    return [term, fitAddon];
+  }
+
+  protected addRenderer(term: Terminal): void {
+    const supportWebGL = this.hasWebGLContext();
+    const renderer = this.hasWebGLContext() ? new WebglAddon() : new CanvasAddon();
+    term.loadAddon(renderer);
+    if (supportWebGL) {
+      (renderer as WebglAddon).onContextLoss((event) => {
+        // console.debug('WebGL context lost - reinitialize Xtermjs renderer.');
+        renderer.dispose();
+        // If the Webgl context is lost, reinitialize the addon
+        this.addRenderer(term);
+      });
     }
-    this.termOpened = true;
-    this.initialData = '';
+  }
 
-    if (isFirefox) {
-      // The software scrollbars don't work with xterm.js, so we disable the scrollbar if we are on firefox.
-      if (this.term.element) {
-        (this.term.element?.children.item(0) as HTMLElement).style.overflow = 'hidden';
-      }
+  public readonly onDidOpenFailure = this.onDidOpenFailureEmitter.event;
+  public readonly onSizeChanged = this.onSizeChangedEmitter.event;
+  public readonly onData = this.onDataEmitter.event;
+  public readonly onKey = this.onKeyEmitter.event;
+  public readonly onDidClose = this.onDidCloseEmitter.event;
+  public readonly onTitleChange = this.onTitleChangeEmitter.event;
+  /**
+   * Terminal is ready event
+   */
+  public get name() {
+    return this.connection?.name || '';
+  }
+
+  public onReady = this.onReadyEmitter.event;
+
+  /**
+   * Check if terminal has any text selected.
+   */
+  public hasSelection(): boolean {
+    if (!this.isDisposed && this._isReady) {
+      return this.term.hasSelection();
     }
-  };
+    return false;
+  }
+
+  /**
+   * Paste text into terminal.
+   */
+  public paste(data: string): void {
+    if (!this.isDisposed && this._isReady) {
+      return this.term.paste(data);
+    }
+  }
 
-  scrollLineUp = (): void => {
+  /**
+   * Get selected text from terminal.
+   */
+  public getSelection(): string | null {
+    if (!this.isDisposed && this._isReady) {
+      return this.term.getSelection();
+    }
+    return null;
+  }
+
+  public scrollLineUp = (): void => {
     this.term.scrollLines(-1);
   };
 
-  scrollLineDown = (): void => {
+  public scrollLineDown = (): void => {
     this.term.scrollLines(1);
   };
 
-  scrollToTop = (): void => {
+  public scrollToTop = (): void => {
     this.term.scrollToTop();
   };
 
-  scrollToBottom = (): void => {
+  public scrollToBottom = (): void => {
     this.term.scrollToBottom();
   };
 
-  scrollPageUp = (): void => {
+  public scrollPageUp = (): void => {
     this.term.scrollPages(-1);
   };
 
-  scrollPageDown = (): void => {
+  public scrollPageDown = (): void => {
     this.term.scrollPages(1);
   };
 
-  resetTerminal = (): void => {
+  public resetTerminal = (): void => {
     this.term.reset();
   };
 
-  writeLine = (text: string): void => {
-    this.term.writeln(text);
+  public writeLine = (data: string): void => {
+    this.term.writeln(data);
+  };
+
+  public write = (data: string | Uint8Array): void => {
+    this.term.write(data);
   };
 }