display logs

src/SharpIDE.Photino/Components/TerminalOutputDisplay.razor

@@ -1,8 +1,12 @@
 @using SharpIDE.Application.Features.Build
-@inject BuildService BuildService
 
-<div style="height: 15rem; overflow-y: auto; padding: 1rem; background-color: #303030; border: 1px solid #ccc;">
-	@foreach(var line in _outputLines)
+@inject BuildService BuildService
+@inject IJSRuntime JsRuntime
+
+@implements IDisposable
+
+<div @ref="_logContainer" style="height: 15rem; overflow-y: auto; padding: 1rem; background-color: #303030; border: 1px solid #ccc;">
+	@foreach (var line in _outputLines)
 	{
 		<MudText Typo="Typo.body2">@line</MudText>
 	}
@@ -10,12 +14,32 @@
 
 @code {
 	private List<string> _outputLines = [];
+	private ElementReference _logContainer;
+
 	protected override async Task OnInitializedAsync()
 	{
+		BuildService.BuildStarted += ClearPreviousOutput;
 		await foreach (var logLine in BuildService.BuildOutputChannel.Reader.ReadAllAsync())
 		{
 			_outputLines.Add(logLine);
 			await InvokeAsync(StateHasChanged);
+			await ScrollToBottomAsync();
 		}
 	}
+
+	private async Task ClearPreviousOutput()
+	{
+		_outputLines.Clear();
+		await InvokeAsync(StateHasChanged);
+	}
+
+	private async Task ScrollToBottomAsync()
+	{
+		await JsRuntime.InvokeVoidAsync("scrollToBottom", _logContainer);
+	}
+
+	public void Dispose()
+	{
+		BuildService.BuildStarted -= ClearPreviousOutput;
+	}
 }

src/SharpIDE.Photino/wwwroot/index.html

@@ -18,6 +18,7 @@
         <a class="dismiss">🗙</a>
     </div>
 
+	<script src="scripts2.js"></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>

src/SharpIDE.Photino/wwwroot/scripts2.js

@@ -0,0 +1,6 @@
+
+window.scrollToBottom = function(element) {
+	if (element) {
+		element.scrollTop = element.scrollHeight;
+	}
+}