remove a lot of unused things in blazor

the main change is stop listening for size changes, use the skiasharp canvas size to detect that, this should make things cleaner and faster

Author: beto-rodriguez

src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/ChartControl.razor

@@ -22,24 +22,12 @@
 	SOFTWARE.
 *@
 
-<!--
-    the first wrapper <div/> is required so blazor is able to the isolate the css, do not remove!
-    blazor bug?
--->
 
-<div class="lvc-content">
-    <JsFlexibleContainer @ref="_jsFlexibleContainer">
-        <Content>
-            <div class="lvc-canvas-container" @ref="CanvasContainerElement">
-                <MotionCanvas
-                    @ref="_motionCanvas"
-                    OnPointerDownCallback="OnPointerDown"
-                    OnPointerMoveCallback="OnPointerMove"
-                    OnPointerUpCallback="OnPointerUp"
-                    OnPointerOutCallback="OnPointerOut"
-                    OnWheelCallback="OnWheel">
-                </MotionCanvas>
-            </div>
-        </Content>
-    </JsFlexibleContainer>
-</div>
+<MotionCanvas
+    @ref="_motionCanvas"
+    OnPointerDownCallback="OnPointerDown"
+    OnPointerMoveCallback="OnPointerMove"
+    OnPointerUpCallback="OnPointerUp"
+    OnPointerOutCallback="OnPointerOut"
+    OnWheelCallback="OnWheel">
+</MotionCanvas>

src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/ChartControl.razor.cs

@@ -37,7 +37,6 @@ namespace LiveChartsCore.SkiaSharpView.Blazor;
 /// <inheritdoc cref="IChartView" />
 public abstract partial class ChartControl : IBlazorChart, IDisposable, IChartView
 {
-    private JsFlexibleContainer _jsFlexibleContainer = null!;
 #pragma warning disable IDE0032 // Use auto property, blazor ref
     private MotionCanvas _motionCanvas = null!;
 #pragma warning restore IDE0032 // Use auto property
@@ -71,21 +70,23 @@ protected override void OnAfterRender(bool firstRender)
         InitializeChartControl();
         StartObserving();
 
-        _jsFlexibleContainer.Resized +=
-            container =>
-                CoreChart?.Update();
+        _motionCanvas.SizeChanged +=
+            () =>
+                CoreChart.Update();
 
         CoreChart.Canvas.Sync = SyncContext;
         CoreChart.Load();
-
-        var size = ((IChartView)this).ControlSize;
     }
 
     bool IChartView.DesignerMode => false;
     bool IChartView.IsDarkMode => false; // Is this possible in Blazor?
     LvcColor IChartView.BackColor { get; }
 
-    LvcSize IChartView.ControlSize => new() { Width = (float)_jsFlexibleContainer.Width, Height = (float)_jsFlexibleContainer.Height };
+    LvcSize IChartView.ControlSize => new()
+    {
+        Width = _motionCanvas.Width,
+        Height = _motionCanvas.Height
+    };
 
     /// <summary>
     /// Gets or sets the pointer down callback.

src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/ChartControl.razor.css

@@ -22,17 +22,4 @@
 	SOFTWARE.
 *@
 
-<!--
-	the first wrapper <div/> is required so blazor is able to the isolate the css, do not remove!
-	blazor bug?
--->
-
-<div>
-	<JsFlexibleContainer @ref="_jsFlexibleContainer">
-		<Content>
-			<div class="lvc-canvas-container" @ref="_canvasContainer">
-				<MotionCanvas @ref="_motionCanvas"></MotionCanvas>
-			</div>
-		</Content>
-	</JsFlexibleContainer>
-</div>
+<MotionCanvas @ref="_motionCanvas"/>

src/skiasharp/LiveChartsCore.SkiaSharpView.Blazor/GeoMap.razor

@@ -24,26 +24,18 @@
 using LiveChartsCore.Kernel.Observers;
 using LiveChartsCore.Motion;
 using LiveChartsCore.Painting;
-using LiveChartsCore.SkiaSharpView.Blazor.JsInterop;
 using LiveChartsCore.SkiaSharpView.Painting;
 using Microsoft.AspNetCore.Components;
-using Microsoft.JSInterop;
 using SkiaSharp;
 
 namespace LiveChartsCore.SkiaSharpView.Blazor;
 
 /// <inheritdoc cref="IGeoMapView"/>
 public partial class GeoMap : IGeoMapView, IDisposable
 {
-    [Inject]
-    private IJSRuntime JS { get; set; } = null!;
-
-    private DomJsInterop? _dom;
-    private JsFlexibleContainer _jsFlexibleContainer = null!;
-    private ElementReference _canvasContainer;
-    private MotionCanvas? _motionCanvas;
-    private double _canvasWidth;
-    private double _canvasHeight;
+#pragma warning disable IDE0032 // Use auto property, blazor ref
+    private MotionCanvas _motionCanvas = null!;
+#pragma warning restore IDE0032 // Use auto property
     private CollectionDeepObserver? _seriesObserver;
     private GeoMapChart? _core;
     private DrawnMap? _activeMap;
@@ -64,23 +56,20 @@ protected override void OnInitialized()
     /// <param name="firstRender"></param>
     /// <returns></returns>
     /// <exception cref="Exception"></exception>
-    protected override async Task OnAfterRenderAsync(bool firstRender)
+    protected override void OnAfterRender(bool firstRender)
     {
         if (!firstRender) return;
 
         _core = new GeoMapChart(this);
 
-        _seriesObserver = new CollectionDeepObserver(() => _core?.Update());
-
-        _dom ??= new DomJsInterop(JS);
-        var canvasBounds = await _dom.GetBoundingClientRect(_canvasContainer);
-        _canvasWidth = canvasBounds.Width;
-        _canvasHeight = canvasBounds.Height;
+        _motionCanvas.SizeChanged +=
+            () =>
+                _core.Update();
 
+        _seriesObserver = new CollectionDeepObserver(() => _core?.Update());
         _core.Update();
 
         if (_motionCanvas is null) throw new Exception("MotionCanvas not found");
-        _jsFlexibleContainer.Resized += OnResized;
     }
 
     /// <inheritdoc cref="IGeoMapView.Canvas"/>
@@ -108,6 +97,7 @@ public object? ViewCommand
             if (value is not null) _core?.ViewTo(value);
         }
     } = null;
+
     /// <inheritdoc cref="IGeoMapView.ActiveMap"/>
     [Parameter]
     public DrawnMap ActiveMap
@@ -121,10 +111,10 @@ public DrawnMap ActiveMap
     }
 
     /// <inheritdoc cref="IGeoMapView.Width"/>
-    float IGeoMapView.Width => (float)_canvasWidth;
+    float IGeoMapView.Width => _motionCanvas.Width;
 
     /// <inheritdoc cref="IGeoMapView.Height"/>
-    float IGeoMapView.Height => (float)_canvasHeight;
+    float IGeoMapView.Height => _motionCanvas.Height;
 
     /// <inheritdoc cref="IGeoMapView.MapProjection"/>
     [Parameter]
@@ -171,33 +161,21 @@ public IEnumerable<IGeoSeries> Series
     } = [];
 
     void IGeoMapView.InvokeOnUIThread(Action action) =>
-        _ = InvokeAsync(action); //.Wait();
+        _ = InvokeAsync(action);
 
     /// <summary>
     /// Called when a property changes.
     /// </summary>
     protected void OnPropertyChanged() =>
         _core?.Update();
 
-    private async void OnResized(JsFlexibleContainer motionCanvas)
-    {
-        if (_dom is null) return;
-
-        var canvasBounds = await _dom.GetBoundingClientRect(_canvasContainer);
-        _canvasWidth = canvasBounds.Width;
-        _canvasHeight = canvasBounds.Height;
-
-        _core?.Update();
-    }
-
-    async void IDisposable.Dispose()
+    void IDisposable.Dispose()
     {
         Series = [];
         _seriesObserver = null!;
 
         Canvas.Dispose();
 
         _core?.Unload();
-        if (_dom is not null) await ((IAsyncDisposable)_dom).DisposeAsync();
     }
 }