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

2026-05-27 10:12:23 +02:00
parent e42546d82f
commit ee87014fee
5 changed files with 129 additions and 11 deletions
@@ -82,6 +82,7 @@
    private bool _isInteractive;
    private string? _currentActiveBlockId;
    private bool _isMobile = false;
+    private DotNetObjectReference<ReaderCanvas>? _selfReference;

    protected override async Task OnInitializedAsync()
    {
@@ -130,6 +131,8 @@
            {
                await Coordinator.ProcessFullPageAsync(GetFullPageContent(), ebookId: ViewModel.EbookId);
            }
+
+            await InitViewportDetectionAsync();
        }

        if (ViewModel != null && !_isJsInitialized)
@@ -140,6 +143,44 @@
        }
    }

+    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.registerCanvasViewportObserver = (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("registerCanvasViewportObserver", _selfReference);
+        }
+        catch (Exception ex)
+        {
+            Logger.LogWarning(ex, "Failed to initialize viewport detection in ReaderCanvas.");
+        }
+    }
+
+    [JSInvokable]
+    public async Task OnViewportChanged(bool isMobile)
+    {
+        if (_isMobile != isMobile)
+        {
+            _isMobile = isMobile;
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+
    private async Task InitializeSelectionListenerAsync()
    {
        try
@@ -326,5 +367,6 @@
        InteractionService.OnHighlightBlockRequested -= HandleHighlightRequested;
        InteractionService.OnTextSelected -= HandleTextSelected;
        SyncService.OnProgressReceived -= HandleSyncProgressReceived;
+        _selfReference?.Dispose();
    }
 }