call on size changed when window resizes

STARIONGROUP · Sep 20, 2023 · 19b8b84 · 19b8b84
1 parent f96a6b8
commit 19b8b84
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 8 deletions.
diff --git a/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs b/COMETwebapp/Components/BookEditor/BookEditorColumn.razor.cs
@@ -158,7 +158,9 @@ public partial class BookEditorColumn<TItem>
         protected override async Task OnInitializedAsync()
         {
             await base.OnInitializedAsync();
-            await this.DomDataService.SubscribeToResizeEvent(nameof(OnSizeChanged));
+            var dotnetReference = DotNetObjectReference.Create(this);
+            await this.DomDataService.LoadDotNetHelper(dotnetReference);
+            await this.DomDataService.SubscribeToResizeEvent("OnSizeChanged");
         }
 
         /// <summary>
@@ -169,6 +171,7 @@ protected override async Task OnInitializedAsync()
         /// <returns>an asynchronous operation</returns>
         private async Task OnSelectedValueChanged(TItem item, int itemIndex)
         {
+            this.SelectedValue = item;
             this.firstItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(0, this.CssClass, false);
             this.lastItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(this.Items.Count - 1, this.CssClass, false);
             this.selectedItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(itemIndex, this.CssClass, true);
@@ -256,10 +259,16 @@ private string GenerateHorizontalPathPoints()
             return $"{x1},{y},{x2},{y}";
         }
 
+        /// <summary>
+        /// Method called when the size of the window changes
+        /// </summary>
+        /// <returns>an asynchronous operation</returns>
         [JSInvokable]
-        public static async Task OnSizeChanged()
+        public async Task OnSizeChanged()
         {
-
+            this.firstItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(0, this.CssClass, false);
+            this.lastItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(this.Items.Count - 1, this.CssClass, false);
+            this.selectedItemSizeAndPosition = await this.DomDataService.GetElementSizeAndPosition(0, this.CssClass, true);
         }
     }
 }
diff --git a/COMETwebapp/Pages/BookEditor/BookEditor.razor b/COMETwebapp/Pages/BookEditor/BookEditor.razor
@@ -26,6 +26,6 @@ Copyright (c) 2023 RHEA System S.A.
 
 <SingleIterationApplicationTemplate IterationId="@this.RequestedIteration" ShowActiveModel="true">
     <Body>
-        <BookEditorBody/>
+    <BookEditorBody/>
     </Body>
-</SingleIterationApplicationTemplate>
+</SingleIterationApplicationTemplate>
diff --git a/COMETwebapp/Services/Interoperability/DomDataService.cs b/COMETwebapp/Services/Interoperability/DomDataService.cs
@@ -24,6 +24,8 @@
 
 namespace COMETwebapp.Services.Interoperability
 {
+    using COMETwebapp.Components.BookEditor;
+    using COMETwebapp.Components.ModelEditor;
     using Microsoft.JSInterop;
 
     /// <summary>
@@ -39,6 +41,16 @@ public DomDataService(IJSRuntime jsRuntime) : base(jsRuntime)
         {
         }
 
+        /// <summary>
+        /// Set the dotnet helper
+        /// </summary>
+        /// <param name="dotNetHelper">the dotnet helper</param>
+        /// <returns>A <see cref="Task" /></returns>
+        public async Task LoadDotNetHelper<TItem>(DotNetObjectReference<BookEditorColumn<TItem>> dotNetHelper)
+        {
+            await this.JsRuntime.InvokeVoidAsync("setDotNetHelper", dotNetHelper);
+        }
+
         /// <summary>
         /// Gets an element size and position
         /// </summary>

diff --git a/COMETwebapp/Services/Interoperability/IDomDataService.cs b/COMETwebapp/Services/Interoperability/IDomDataService.cs
@@ -24,6 +24,10 @@
 
 namespace COMETwebapp.Services.Interoperability
 {
+    using COMETwebapp.Components.BookEditor;
+
+    using Microsoft.JSInterop;
+
     /// <summary>
     /// The service used to retrieve several data from the DOM
     /// </summary>
@@ -44,5 +48,12 @@ public interface IDomDataService
         /// <param name="callbackMethodName">the callback method name</param>
         /// <returns>an asynchronous operation</returns>
         Task SubscribeToResizeEvent(string callbackMethodName);
+
+        /// <summary>
+        /// Set the dotnet helper
+        /// </summary>
+        /// <param name="dotNetHelper">the dotnet helper</param>
+        /// <returns>A <see cref="Task" /></returns>
+        Task LoadDotNetHelper<TItem>(DotNetObjectReference<BookEditorColumn<TItem>> dotNetHelper);
     }
 }
diff --git a/COMETwebapp/wwwroot/Scripts/DomData.js b/COMETwebapp/wwwroot/Scripts/DomData.js
@@ -1,4 +1,12 @@
-function GetElementSizeAndPosition(index, cssSelector, useScroll)
+/**
+ * Sets the dotnet helper
+ * @param {any} helper
+ */
+function setDotNetHelper(helper) {
+    dotNetHelper = helper;
+}
+
+function GetElementSizeAndPosition(index, cssSelector, useScroll)
 {
     var elements = document.getElementsByClassName(cssSelector);
     var element = elements[index];
@@ -24,9 +32,16 @@
     return [0, 0, 0, 0];
 }
 
-function SubscribeToResizeEvent(callbackMethodName) {
+function SubscribeToResizeEvent(callbackMethodName)
+{
     window.addEventListener("resize", () =>
     {
-        DotNet.invokeMethodAsync('COMETwebapp', callbackMethodName);
+        try
+        {
+            dotNetHelper.invokeMethodAsync(callbackMethodName);
+        }
+        catch (error) {
+            console.log(error);
+        }
     });
 }