feat(Term): add Term component

src/components/BootstrapBlazor.Term/BootstrapBlazor.Term.csproj

@@ -0,0 +1,16 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+  <PropertyGroup>
+    <PackageTags>Bootstrap Blazor WebAssembly wasm UI Components Xterm Term Terminal</PackageTags>
+    <Description>Bootstrap UI components extensions of Term (xterm.js)</Description>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="BootstrapBlazor" Version="$(BBVersion)" />
+  </ItemGroup>
+
+  <ItemGroup>
+    <Using Include="Microsoft.JSInterop" />
+  </ItemGroup>
+
+</Project>

src/components/BootstrapBlazor.Term/Components/Term/Term.razor

@@ -0,0 +1,4 @@
+@namespace BootstrapBlazor.Components
+@inherits BootstrapModuleComponentBase
+
+<div @ref="Element" id="@Id" class="@GetClassString()" style="@GetStyleString()"></div>

src/components/BootstrapBlazor.Term/Components/Term/Term.razor.cs

@@ -0,0 +1,208 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+using Microsoft.AspNetCore.Components;
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Term 终端组件
+/// </summary>
+[JSModuleAutoLoader("./_content/BootstrapBlazor.Term/Components/Term/Term.razor.js", JSObjectReference = true)]
+public partial class Term
+{
+    /// <summary>
+    /// 获得/设置 UI Element
+    /// </summary>
+    private ElementReference Element { get; set; }
+
+    /// <summary>
+    /// 获得/设置 Options
+    /// </summary>
+    [Parameter]
+    public TermOptions Options { get; set; } = new TermOptions();
+
+    /// <summary>
+    /// 获得/设置 收到数据回调
+    /// </summary>
+    [Parameter]
+    public Func<string, Task>? OnData { get; set; }
+
+    /// <summary>
+    /// 获得/设置 终端 Resize 回调
+    /// </summary>
+    [Parameter]
+    public Func<int, int, Task>? OnResize { get; set; }
+
+    /// <summary>
+    /// 获得/设置 高度 默认 300px
+    /// </summary>
+    [Parameter]
+    public string Height { get; set; } = "300px";
+
+    /// <summary>
+    /// GetClassString
+    /// </summary>
+    /// <returns></returns>
+    private string? GetClassString() => CssBuilder.Default("bb-term")
+        .AddClassFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// GetStyleString
+    /// </summary>
+    /// <returns></returns>
+    private string? GetStyleString() => CssBuilder.Default()
+        .AddClass($"height: {Height};", !string.IsNullOrEmpty(Height))
+        .AddStyleFromAttributes(AdditionalAttributes)
+        .Build();
+
+    /// <summary>
+    /// OnInitialized
+    /// </summary>
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+    }
+
+    /// <summary>
+    /// InvokeInitAsync
+    /// </summary>
+    /// <returns></returns>
+    protected override async Task InvokeInitAsync()
+    {
+        await InvokeVoidAsync("init", Id, Interop, Options);
+    }
+
+    /// <summary>
+    /// 写入数据
+    /// </summary>
+    /// <param name="data"></param>
+    /// <returns></returns>
+    public async Task Write(string data)
+    {
+        await InvokeVoidAsync("write", Id, data);
+    }
+
+    /// <summary>
+    /// 写入一行数据
+    /// </summary>
+    /// <param name="data"></param>
+    /// <returns></returns>
+    public async Task WriteLine(string data)
+    {
+        await InvokeVoidAsync("writeln", Id, data);
+    }
+
+    /// <summary>
+    /// 清空终端
+    /// </summary>
+    /// <returns></returns>
+    public async Task Clear()
+    {
+        await InvokeVoidAsync("clear", Id);
+    }
+
+    /// <summary>
+    /// 连接流
+    /// </summary>
+    /// <param name="stream"></param>
+    /// <returns></returns>
+    public async Task Open(Stream stream)
+    {
+        _stream = stream;
+        _cancellationTokenSource = new CancellationTokenSource();
+        _ = ReadStreamAsync();
+
+        await Task.CompletedTask;
+    }
+
+    private Stream? _stream;
+    private CancellationTokenSource? _cancellationTokenSource;
+
+    private async Task ReadStreamAsync()
+    {
+        if (_stream == null) return;
+
+        var buffer = new byte[1024];
+        try
+        {
+            while (!_cancellationTokenSource!.IsCancellationRequested)
+            {
+                var read = await _stream.ReadAsync(buffer, _cancellationTokenSource.Token);
+                if (read == 0) break;
+                var data = System.Text.Encoding.UTF8.GetString(buffer, 0, read);
+                await Write(data);
+            }
+        }
+        catch (TaskCanceledException)
+        {
+            // ignored
+        }
+        catch (Exception ex)
+        {
+            // Handle error
+            await WriteLine($"\r\nError: {ex.Message}");
+        }
+    }
+
+    /// <summary>
+    /// 收到数据 JSInvoke
+    /// </summary>
+    /// <param name="data"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task OnDataAsync(string data)
+    {
+        if (_stream != null && _stream.CanWrite)
+        {
+            var buffer = System.Text.Encoding.UTF8.GetBytes(data);
+            await _stream.WriteAsync(buffer);
+            await _stream.FlushAsync();
+        }
+
+        if (OnData != null)
+        {
+            await OnData(data);
+        }
+    }
+
+    /// <summary>
+    /// Dispose
+    /// </summary>
+    /// <param name="disposing"></param>
+    protected override async ValueTask DisposeAsync(bool disposing)
+    {
+        _cancellationTokenSource?.Cancel();
+        _cancellationTokenSource?.Dispose();
+        await base.DisposeAsync(disposing);
+    }
+
+    /// <summary>
+    /// 获得/设置 终端行数
+    /// </summary>
+    public int Rows { get; private set; }
+
+    /// <summary>
+    /// 获得/设置 终端列数
+    /// </summary>
+    public int Columns { get; private set; }
+
+    /// <summary>
+    /// Resize JSInvoke
+    /// </summary>
+    /// <param name="rows"></param>
+    /// <param name="cols"></param>
+    /// <returns></returns>
+    [JSInvokable]
+    public async Task OnResizeAsync(int rows, int cols)
+    {
+        Rows = rows;
+        Columns = cols;
+        if (OnResize != null)
+        {
+            await OnResize(rows, cols);
+        }
+    }
+}

src/components/BootstrapBlazor.Term/Components/Term/Term.razor.js

@@ -0,0 +1,96 @@
+import "../../lib/xterm/xterm.js";
+import "../../lib/xterm/xterm-addon-fit.js";
+
+export function init(id, invoke, options) {
+    const el = document.getElementById(id);
+    if (el === null) {
+        return;
+    }
+
+    // Load CSS
+    const linkId = "bb-term-css";
+    if (!document.getElementById(linkId)) {
+        const link = document.createElement('link');
+        link.id = linkId;
+        link.rel = 'stylesheet';
+        link.href = './_content/BootstrapBlazor.Term/lib/xterm/xterm.css';
+        document.head.appendChild(link);
+    }
+
+    const term = new Terminal({
+        fontFamily: options.fontFamily || "Consolas, 'Courier New', monospace",
+        fontSize: options.fontSize || 14,
+        cursorBlink: options.cursorBlink,
+        lineHeight: options.lineHeight || 1.0,
+        theme: options.theme || {}
+    });
+
+    const fitAddon = new FitAddon.FitAddon();
+    term.loadAddon(fitAddon);
+
+    term.open(el);
+    fitAddon.fit();
+
+    term.onData(data => {
+        invoke.invokeMethodAsync("OnDataAsync", data);
+    });
+
+    term.onResize(size => {
+        invoke.invokeMethodAsync("OnResizeAsync", size.rows, size.cols);
+    });
+
+    // Store instance
+    el.term = term;
+    el.fitAddon = fitAddon;
+    el.invoke = invoke;
+
+    // Window resize handling
+    const resizeHandler = () => {
+        try {
+            fitAddon.fit();
+            const dims = fitAddon.proposeDimensions();
+            if (dims) {
+               invoke.invokeMethodAsync("OnResizeAsync", dims.rows, dims.cols);
+            }
+        } catch (e) { }
+    };
+    window.addEventListener('resize', resizeHandler);
+    el.resizeHandler = resizeHandler;
+}
+
+export function write(id, data) {
+    const el = document.getElementById(id);
+    if (el && el.term) {
+        el.term.write(data);
+    }
+}
+
+export function writeln(id, data) {
+    const el = document.getElementById(id);
+    if (el && el.term) {
+        el.term.writeln(data);
+    }
+}
+
+export function clear(id) {
+    const el = document.getElementById(id);
+    if (el && el.term) {
+        el.term.clear();
+    }
+}
+
+export function dispose(id) {
+    const el = document.getElementById(id);
+    if (el) {
+        if (el.resizeHandler) {
+            window.removeEventListener('resize', el.resizeHandler);
+        }
+        if (el.term) {
+            el.term.dispose();
+            delete el.term;
+        }
+        if (el.fitAddon) {
+            delete el.fitAddon;
+        }
+    }
+}

src/components/BootstrapBlazor.Term/Components/Term/TermOptions.cs

@@ -0,0 +1,62 @@
+// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
+// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
+// Website: https://www.blazor.zone or https://argozhang.github.io/
+
+namespace BootstrapBlazor.Components;
+
+/// <summary>
+/// Term Options
+/// </summary>
+public class TermOptions
+{
+    /// <summary>
+    /// 获得/设置 终端字体大小 默认 14
+    /// </summary>
+    public int FontSize { get; set; } = 14;
+
+    /// <summary>
+    /// 获得/设置 终端字体
+    /// </summary>
+    public string FontFamily { get; set; } = "Consolas, 'Courier New', monospace";
+
+    /// <summary>
+    /// 获得/设置 终端主题 默认 null 使用默认主题
+    /// </summary>
+    public TermTheme? Theme { get; set; }
+
+    /// <summary>
+    /// 获得/设置 光标闪烁 默认 true
+    /// </summary>
+    public bool CursorBlink { get; set; } = true;
+
+    /// <summary>
+    /// 获得/设置 行高 默认 1.0
+    /// </summary>
+    public double LineHeight { get; set; } = 1.0;
+}
+
+/// <summary>
+/// Term Theme
+/// </summary>
+public class TermTheme
+{
+    /// <summary>
+    /// Background color
+    /// </summary>
+    public string? Background { get; set; }
+
+    /// <summary>
+    /// Foreground color
+    /// </summary>
+    public string? Foreground { get; set; }
+
+    /// <summary>
+    /// Cursor color
+    /// </summary>
+    public string? Cursor { get; set; }
+
+    /// <summary>
+    /// Selection color
+    /// </summary>
+    public string? Selection { get; set; }
+}