Fit terminal to width

This commit is contained in:
Pat Hartl 2023-04-15 00:16:38 -05:00
parent 9fae96bc9e
commit 4b48b4c45c
5 changed files with 44 additions and 3 deletions

View file

@ -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()

View file

@ -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>

View file

@ -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"
]
}
]
}

File diff suppressed because one or more lines are too long

View file

@ -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