feat(mobile-ux): optimize layout synchronization and stabilize D3 knowledge graph on mobile viewports

This commit is contained in:
2026-05-27 10:12:23 +02:00
parent e42546d82f
commit ee87014fee
5 changed files with 129 additions and 11 deletions
@@ -282,6 +282,7 @@
private string _platformClass = "platform-desktop";
private bool _isMobile = false;
private DotNetObjectReference<ReaderLayout>? _selfReference;
protected override void OnInitialized()
{
@@ -370,6 +371,47 @@
{
Logger.LogError(ex, "Failed to initialize layout resizer JS module.");
}
await InitViewportDetectionAsync();
}
}
private async Task InitViewportDetectionAsync()
{
try
{
_selfReference = DotNetObjectReference.Create(this);
var isMobileViewport = await JS.InvokeAsync<bool>("eval", "window.innerWidth < 768");
await OnViewportChanged(isMobileViewport);
await JS.InvokeVoidAsync("eval", @"
window.registerViewportObserver = (dotNetHelper) => {
let currentIsMobile = window.innerWidth < 768;
window.addEventListener('resize', () => {
let isMobile = window.innerWidth < 768;
if (isMobile !== currentIsMobile) {
currentIsMobile = isMobile;
dotNetHelper.invokeMethodAsync('OnViewportChanged', isMobile);
}
});
}
");
await JS.InvokeVoidAsync("registerViewportObserver", _selfReference);
}
catch (Exception ex)
{
Logger.LogWarning(ex, "Failed to initialize viewport detection.");
}
}
[JSInvokable]
public async Task OnViewportChanged(bool isMobile)
{
if (_isMobile != isMobile)
{
_isMobile = isMobile;
_platformClass = _isMobile ? "platform-mobile" : "platform-desktop";
await InvokeAsync(StateHasChanged);
}
}
@@ -383,5 +425,6 @@
InteractionService.OnNodeSelected -= HandleNodeSelectedAsync;
InteractionService.OnAssistantRequested -= HandleAssistantRequestedAsync;
GraphService.OnGraphUpdated -= HandleGraphUpdatedAsync;
_selfReference?.Dispose();
}
}