Fit terminal to width

LANCommander/Pages/Servers/Logs.razor

@@ -8,17 +8,23 @@
 @inject NavigationManager NavigationManager
 @implements IAsyncDisposable
 
-<Xterm @ref="Terminal" Options="TerminalOptions" />
+<Xterm @ref="Terminal" Options="TerminalOptions" AddonIds="TerminalAddons" />
 
 @code {
     [Parameter] public Guid Id { get; set; }
 
     Xterm? Terminal;
     HubConnection? HubConnection;
+
     TerminalOptions TerminalOptions = new TerminalOptions
     {
         CursorBlink = true,
-        CursorStyle = CursorStyle.Underline
+        CursorStyle = CursorStyle.Block
+    };
+
+    string[] TerminalAddons = new string[]
+    {
+        "xterm-addon-fit"
     };
 
     protected override async Task OnInitializedAsync()
@@ -34,6 +40,19 @@
         });
 
         await HubConnection.StartAsync();
+
+
+    }
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (firstRender)
+        {
+            await Task.Delay(100);
+
+            if (Terminal != null)
+                await Terminal.InvokeAddonFunctionVoidAsync("xterm-addon-fit", "fit");
+        }
     }
 
     public async ValueTask DisposeAsync()

LANCommander/Pages/_Layout.cshtml

@@ -24,10 +24,14 @@
         <script src="~/_content/AntDesign/js/ant-design-blazor.js"></script>
         <script src="~/_content/AntDesign.Charts/ant-design-charts-blazor.js"></script>
         <script src="~/_framework/blazor.server.js"></script>
+
+        <script src="~/_content/XtermBlazor/XtermBlazor.min.js"></script>
+        <script src="~/lib/xterm-addon-fit/lib/xterm-addon-fit.min.js"></script>
+        <script>XtermBlazor.registerAddons({ "xterm-addon-fit": new FitAddon.FitAddon() });</script>
+
         <script src="~/_content/BlazorMonaco/jsInterop.js"></script>
         <script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/loader.js"></script>
         <script src="~/_content/BlazorMonaco/lib/monaco-editor/min/vs/editor/editor.main.js"></script>
-        <script src="~/_content/XtermBlazor/XtermBlazor.min.js"></script>
         <script src="~/js/site.js"></script>
         <script src="~/js/Upload.js"></script>
         <script>window.Uploader = new Uploader();</script>

LANCommander/libman.json

@@ -58,6 +58,15 @@
         "dist/g2plot.js",
         "dist/g2plot.js.map"
       ]
+    },
+    {
+      "provider": "jsdelivr",
+      "library": "xterm-addon-fit@0.7.0",
+      "destination": "wwwroot/lib/xterm-addon-fit/",
+      "files": [
+        "lib/xterm-addon-fit.min.js",
+        "lib/xterm-addon-fit.js.map"
+      ]
     }
   ]
 }

LANCommander/wwwroot/lib/xterm-addon-fit/lib/xterm-addon-fit.min.js

@@ -0,0 +1,8 @@
+/**
+ * Skipped minification because the original files appears to be already minified.
+ * Original file: /npm/xterm-addon-fit@0.7.0/lib/xterm-addon-fit.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.FitAddon=t():e.FitAddon=t()}(self,(function(){return(()=>{"use strict";var e={};return(()=>{var t=e;Object.defineProperty(t,"__esModule",{value:!0}),t.FitAddon=void 0,t.FitAddon=class{constructor(){}activate(e){this._terminal=e}dispose(){}fit(){const e=this.proposeDimensions();if(!e||!this._terminal||isNaN(e.cols)||isNaN(e.rows))return;const t=this._terminal._core;this._terminal.rows===e.rows&&this._terminal.cols===e.cols||(t._renderService.clear(),this._terminal.resize(e.cols,e.rows))}proposeDimensions(){if(!this._terminal)return;if(!this._terminal.element||!this._terminal.element.parentElement)return;const e=this._terminal._core,t=e._renderService.dimensions;if(0===t.css.cell.width||0===t.css.cell.height)return;const r=0===this._terminal.options.scrollback?0:e.viewport.scrollBarWidth,i=window.getComputedStyle(this._terminal.element.parentElement),o=parseInt(i.getPropertyValue("height")),s=Math.max(0,parseInt(i.getPropertyValue("width"))),n=window.getComputedStyle(this._terminal.element),l=o-(parseInt(n.getPropertyValue("padding-top"))+parseInt(n.getPropertyValue("padding-bottom"))),a=s-(parseInt(n.getPropertyValue("padding-right"))+parseInt(n.getPropertyValue("padding-left")))-r;return{cols:Math.max(2,Math.floor(a/t.css.cell.width)),rows:Math.max(1,Math.floor(l/t.css.cell.height))}}}})(),e})()}));
+//# sourceMappingURL=xterm-addon-fit.js.map