Update resize

Indemos · Feb 11, 2024 · 9901116 · 9901116
1 parent 45502d5
commit 9901116
Show file tree

Hide file tree

Showing 6 changed files with 113 additions and 37 deletions.
diff --git a/Libs/ScriptContainer.csproj b/Libs/ScriptContainer.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk.Razor">
+<Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
     <TargetFramework>net7.0</TargetFramework>
@@ -8,7 +8,7 @@
 
   <PropertyGroup>
     <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
-    <Version>1.1.9</Version>
+    <Version>1.2.0</Version>
     <Authors>artemiusgreat</Authors>
     <Copyright>indemos.com</Copyright>
     <PackageProjectUrl>http://indemos.com</PackageProjectUrl>

diff --git a/Libs/ScriptControl.razor.js b/Libs/ScriptControl.razor.js
@@ -1,44 +1,105 @@
 function ScriptModule(instance, options) {
 
   this.events = [];
-  this.sizeScheduler = null;
+  this.sizeObservers = [];
   this.serviceInstance = instance;
 
-  this.getDocBounds = () => {
+  /// <summary>
+  /// Get window size
+  /// </summary>
+  this.getDocBounds = () => this.getElementBounds(document.body);
+
+  /// <summary>
+  /// Get element size
+  /// </summary>
+  /// <param name="element"></param>
+  this.getElementBounds = element => {
+    const bounds = element.getBoundingClientRect();
     return {
-      X: document.body.clientWidth,
-      Y: document.body.clientHeight
+      X: element.clientWidth || element.scrollWidth || bounds.width,
+      Y: element.clientHeight || element.scrollHeight || bounds.height
     };
   };
 
-  this.getElementBounds = (element) => {
-    const bounds = element.getBoundingClientRect();
-    return {
-      X: bounds.width,
-      Y: bounds.height
+  /// <summary>
+  /// Subscribe to custom event
+  /// </summary>
+  /// <param name="element"></param>
+  /// <param name="event"></param>
+  /// <param name="action"></param>
+  this.subscribe = (element, event, action) => {
+    let scheduler = null;
+    let index = this.sizeObservers.length;
+    let change = e => {
+      clearTimeout(scheduler);
+      scheduler = setTimeout(() => {
+        this.serviceInstance && this
+          .serviceInstance
+          .invokeMethodAsync(action, e, index, event)
+          .catch(o => this.unsubscribe());
+      }, options.interval || 100);
     };
+    element.addEventListener(event, change, false);
+    this.events.push({ element, event, change });
+    return this.events.length - 1;
   };
 
-  this.onSize = () => {
-    clearTimeout(this.sizeScheduler);
-    this.sizeScheduler = setTimeout(() => {
-      this
-        .serviceInstance
-        .invokeMethodAsync("OnSizeChange", this.getDocBounds())
-        .catch(o => this.unsubscribe());
-    }, options.interval);
+  /// <summary>
+  /// Unsubscribe from custom event
+  /// </summary>
+  /// <param name="index"></param>
+  this.unsubscribe = index => {
+    this.events.forEach((o, i) => {
+      if (this.events[index] || i === index) {
+        o.element.removeEventListener(o.event, o.change);
+        this.events[i] = null;
+      }
+    });
+    this.events = this.events.filter(o => o);
   };
 
-  this.subscribe = (element, e, done) => {
-    element.addEventListener(e, done, false);
-    this.events.push({ element, e, done });
+  /// <summary>
+  /// Subscribe to element resize
+  /// </summary>
+  /// <param name="element"></param>
+  /// <param name="action"></param>
+  this.subscribeToSize = (element, action) => {
+    let scheduler = null;
+    let index = this.sizeObservers.length;
+    let change = e => {
+      clearTimeout(scheduler);
+      scheduler = setTimeout(() => {
+        this.serviceInstance && this
+          .serviceInstance
+          .invokeMethodAsync(action, e, index, "resize")
+          .catch(o => this.unsubscribeFromSize());
+      }, options.interval || 100);
+    };
+    this.sizeObservers.push(new ResizeObserver(change).observe(element));
+    return this.sizeObservers.length - 1;
   };
 
-  this.unsubscribe = () => {
-    this.events.forEach(o => o.element.removeEventListener(o.e, o.done));
+  /// <summary>
+  /// Unsubscribe from size observer
+  /// </summary>
+  /// <param name="index"></param>
+  this.unsubscribeFromSize = index => {
+    this.sizeObservers.forEach((o, i) => {
+      if (this.sizeObservers[index] || i === index) {
+        this.sizeObservers[i].disconnect();
+        this.sizeObservers[i] = null;
+      }
+    });
+    this.sizeObservers = this.sizeObservers.filter(o => o);
   };
 
-  this.subscribe(window, "resize", this.onSize);
+  try {
+    this.unsubscribeFromSize();
+    this.subscribeToSize(document.body, "OnChangeAction");
+  } catch (e) {
+    this.unsubscribe();
+    this.subscribe(window, "resize", "OnChangeAction");
+  }
 };
 
 export function getScriptModule(instance, options) {

diff --git a/Libs/ScriptService.cs b/Libs/ScriptService.cs
@@ -2,7 +2,9 @@
 using Microsoft.JSInterop;
 using System;
 using System.Collections.Generic;
+using System.Reflection;
 using System.Threading.Tasks;
+using static System.Collections.Specialized.BitVector32;
 
 namespace ScriptContainer
 {
@@ -40,7 +42,7 @@ public class ScriptService : IAsyncDisposable
     /// <summary>
     /// On size event
     /// </summary>
-    public Action<ScriptMessage> OnSize { get; set; } = o => { };
+    public Action<dynamic, int, string> OnChange { get; set; } = (o, i, action) => { };
 
     /// <summary>
     /// Get document bounds
@@ -81,11 +83,6 @@ public async Task<ScriptService> CreateModule(IDictionary<string, object> option
 
       options ??= new Dictionary<string, object>();
 
-      if (options.TryGetValue("interval", out var interval) is false)
-      {
-        options["interval"] = 100;
-      }
-
       _serviceInstance = DotNetObjectReference.Create(this);
       _scriptModule = await _runtime.InvokeAsync<IJSObjectReference>("import", "./_content/ScriptContainer/ScriptControl.razor.js");
       _scriptInstance = await _scriptModule.InvokeAsync<IJSObjectReference>("getScriptModule", _serviceInstance, options);
@@ -97,17 +94,19 @@ public async Task<ScriptService> CreateModule(IDictionary<string, object> option
     /// Script proxy
     /// </summary>
     /// <param name="message"></param>
+    /// <param name="index"></param>
+    /// <param name="action"></param>
     /// <returns></returns>
     [JSInvokable]
-    public void OnSizeChange(ScriptMessage message) => OnSize(message);
+    public void OnChangeAction(dynamic message, int index, string action) => OnChange(message, index, action);
 
     /// <summary>
     /// Dispose
     /// </summary>
     /// <returns></returns>
     public async ValueTask DisposeAsync()
     {
-      OnSize = o => { };
+      OnChange = (o, i, action) => { };
 
       if (_scriptInstance is not null)
       {

diff --git a/Samples/SampleClient/Pages/Index.razor b/Samples/SampleClient/Pages/Index.razor
@@ -59,7 +59,7 @@
     await ScaleService.CreateModule();
     await GetBounds();
 
-    ScaleService.OnSize = async message => await GetBounds();
+    ScaleService.OnChange = async (message, index, action) => await GetBounds();
   }
 
   protected async Task GetBounds()

diff --git a/Samples/SampleServer/Pages/Index.razor b/Samples/SampleServer/Pages/Index.razor
@@ -3,7 +3,7 @@
 @inject IJSRuntime runtime
 
 <div class="element-container">
-  <button @onclick="Setup">
+  <button @onclick="Increase">
     Setup
   </button>
   <div class="doc">
@@ -27,6 +27,15 @@
       <li>@ItemBH</li>
     </ul>
   </div>
+  @if (Rows.Any())
+  {
+    <ul>
+    @foreach (var row in Rows)
+    {
+      <li>@row</li>
+    }
+    </ul>
+  }
 </div>
 
 @code
@@ -42,6 +51,7 @@
   public ElementReference ElementB { get; set; }
   public ElementReference CanvasA { get; set; }
   public ElementReference CanvasB { get; set; }
+  public IList<string> Rows { get; set; } = new string[0];
 
   protected override async Task OnAfterRenderAsync(bool setup)
   {
@@ -53,6 +63,13 @@
     await base.OnAfterRenderAsync(setup);
   }
 
+  protected void Increase()
+  {
+    Rows = Rows.Any() ?
+      new string[0] : 
+      Enumerable.Range(0, 50).Select(o => $"{o}").ToList();
+  }
+
   protected async Task Setup()
   {
     ScaleService?.DisposeAsync();
@@ -61,7 +78,7 @@
     await ScaleService.CreateModule();
     await GetBounds();
 
-    ScaleService.OnSize = async message => await GetBounds();
+    ScaleService.OnChange = async (message, index, action) => await GetBounds();
   }
 
   protected async Task GetBounds()

diff --git a/Samples/SampleServer/wwwroot/css/site.css b/Samples/SampleServer/wwwroot/css/site.css
@@ -8,7 +8,6 @@ html, body {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   height: 100%;
   overflow: auto;
-  display: grid;
 }
 
 main, article, .element-container {