Blazor-Diagrams · SebastianWachsmuth · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024 · Mar 19, 2024
diff --git a/docs/CustomNodesLinks/Pages/_Host.cshtml b/docs/CustomNodesLinks/Pages/_Host.cshtml
@@ -23,8 +23,6 @@
 </head>
 
 <body>
-<!-- in the body element -->
-<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 
 <component type="typeof(App)" render-mode="ServerPrerendered"/>
 

diff --git a/docs/Diagram-Demo/Pages/_Host.cshtml b/docs/Diagram-Demo/Pages/_Host.cshtml
@@ -27,7 +27,6 @@
 
 <body>
 <!-- in the body element -->
-<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 
 <component type="typeof(App)" render-mode="ServerPrerendered"/>
 

diff --git a/docs/Diagram-Demo/README.md b/docs/Diagram-Demo/README.md
@@ -18,7 +18,6 @@ This is a minimal example of intergration into a _Blazor_ app.
 
 <body>
   <!-- in the body element -->
-  <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 
   <!-- ... -->
 <body>

diff --git a/docs/Layouts/Pages/_Host.cshtml b/docs/Layouts/Pages/_Host.cshtml
@@ -27,7 +27,6 @@
 
 <body>
 <!-- in the body element -->
-<script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 
 <component type="typeof(App)" render-mode="ServerPrerendered"/>
 

diff --git a/samples/ServerSide/Pages/_Host.cshtml b/samples/ServerSide/Pages/_Host.cshtml
@@ -44,6 +44,5 @@
     <script type="text/javascript" src="_content/SharedDemo/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
     <script type="text/javascript" src="_content/SharedDemo/plugins/stickyfill/dist/stickyfill.min.js"></script>
     <script type="text/javascript" src="_content/SharedDemo/js/main.js"></script>
-    <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 </body>
 </html>
diff --git a/samples/SharedDemo/QuickStart.razor b/samples/SharedDemo/QuickStart.razor
@@ -42,7 +42,7 @@
 &lt;!-- if you want the default styling --&gt;
 &lt;link href="_content/Z.Blazor.Diagrams/default.styles.min.css" rel="stylesheet" /&gt;
 &lt;!-- in the body element --&gt;
-&lt;script src="_content/Z.Blazor.Diagrams/script.min.js"&gt;&lt;/script&gt;</code></pre>
+</code></pre>
                 <div class="callout-block callout-info">
                     <div class="icon-holder">
                         <i class="fas fa-info-circle"></i>

diff --git a/samples/Wasm/wwwroot/index.html b/samples/Wasm/wwwroot/index.html
@@ -85,7 +85,6 @@
     <script type="text/javascript" src="_content/SharedDemo/plugins/jquery-scrollTo/jquery.scrollTo.min.js"></script>
     <script type="text/javascript" src="_content/SharedDemo/plugins/stickyfill/dist/stickyfill.min.js"></script>
     <script type="text/javascript" src="_content/SharedDemo/js/main.js"></script>
-    <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
 </body>
 
 </html>
diff --git a/site/Site/Pages/Documentation/GettingStarted/Installation.razor b/site/Site/Pages/Documentation/GettingStarted/Installation.razor
@@ -42,7 +42,6 @@ Install-Package Z.Blazor.Diagrams
 
 &lt;body&gt;
     &lt;!-- ... --&gt;
-    &lt;script src=&quot;_content/Z.Blazor.Diagrams/script.min.js&quot;&gt;&lt;/script&gt;
 &lt;/body&gt;
 
 &lt;/html&gt;

diff --git a/site/Site/wwwroot/index.html b/site/Site/wwwroot/index.html
@@ -79,7 +79,6 @@
         });
     </script>
     <script src="js/prism.js" data-manual></script>
-    <script src="_content/Z.Blazor.Diagrams/script.min.js"></script>
     <script>
 
     </script>

diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Diagnostics.CodeAnalysis;
 using System.Threading.Tasks;
 using Blazor.Diagrams.Core.Geometry;
 using Blazor.Diagrams.Extensions;
@@ -8,7 +9,7 @@
 
 namespace Blazor.Diagrams.Components;
 
-public partial class DiagramCanvas : IDisposable
+public partial class DiagramCanvas : IAsyncDisposable
 {
     private DotNetObjectReference<DiagramCanvas>? _reference;
     private bool _shouldRender;
@@ -27,15 +28,22 @@ public partial class DiagramCanvas : IDisposable
 
     [Inject] public IJSRuntime JSRuntime { get; set; } = null!;
 
-    public void Dispose()
+    private IJSObjectReference? _module;
+
+    public async ValueTask DisposeAsync()
     {
         BlazorDiagram.Changed -= OnDiagramChanged;
 
         if (_reference == null)
+        {
             return;
-
-        if (elementReference.Id != null)
-            _ = JSRuntime.UnobserveResizes(elementReference);
+        }
+        if (elementReference.Id != null && _module is not null)
+            await _module.UnobserveResizes(elementReference);
+        if(_module is not null)
+        {
+            await _module.DisposeAsync();
+        }
 
         _reference.Dispose();
     }
@@ -60,8 +68,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
 
         if (firstRender)
         {
-            BlazorDiagram.SetContainer(await JSRuntime.GetBoundingClientRect(elementReference));
-            await JSRuntime.ObserveResizes(elementReference, _reference!);
+            _module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import","./_content/Z.Blazor.Diagrams/script.min.js");
+            BlazorDiagram.SetContainer(await _module.GetBoundingClientRect(elementReference));
+
+            await _module.ObserveResizes(elementReference, _reference!);
         }
     }
 

diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.js b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.js
@@ -0,0 +1,65 @@
+let boundListener = {};
+let isObservingResize = false;
+
+const mo = new MutationObserver(() => {
+    for (const id in boundListener) {
+        const canvas = boundListener[id];
+        const lastBounds = canvas.lastBounds;
+        const bounds = canvas.elem.getBoundingClientRect();
+        if (lastBounds.left !== bounds.left ||
+            lastBounds.top !== bounds.top ||
+            lastBounds.width !== bounds.width ||
+            lastBounds.height !== bounds.height) {
+            updateBounds(canvas);
+        }
+    }
+})
+
+const ro = new ResizeObserver(entries => {
+    for (const entry of entries) {
+        let id = Array.from(entry.target.attributes).find(e => e.name.startsWith('_bl')).name.substring(4);
+        let element = boundListener[id];
+        if (element) {
+            updateBounds(element);
+        }
+    }
+})
+
+export function getBoundingClientRect(el) {
+    return el.getBoundingClientRect();
+}
+
+function updateBounds(canvas) {
+
+    canvas.lastBounds = canvas.elem.getBoundingClientRect();
+    canvas.ref.invokeMethodAsync('OnResize', canvas.lastBounds)
+}
+
+export function observe(element, ref, id) {
+    if (isObservingResize === false) {
+        mo.observe(document.body, { childList: true, subtree: true });
+        window.addEventListener('scroll', () => {
+            for (id in boundListener) {
+                const canvas = boundListener[id];
+                updateBounds(canvas)
+            }
+        })
+
+        isObservingResize = true;
+    }
+
+    if (!element) return;
+    ro.observe(element);
+    boundListener[id] = {
+        elem: element,
+        ref: ref,
+        lastBounds: element.getBoundingClientRect()
+    };
+}
+
+export function unobserve(element, id) {
+    if (element) {
+        ro.unobserve(element);
+    }
+    delete boundListener[id];
+}
diff --git a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs b/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs
@@ -1,4 +1,5 @@
 using System;
+using System.Reflection;
 using System.Text;
 using System.Threading.Tasks;
 using Blazor.Diagrams.Core.Extensions;
@@ -14,28 +15,33 @@
 
 namespace Blazor.Diagrams.Components.Renderers;
 
-public class NodeRenderer : ComponentBase, IDisposable
+public class NodeRenderer : ComponentBase
 {
     private bool _becameVisible;
     private ElementReference _element;
     private bool _isSvg;
     private DotNetObjectReference<NodeRenderer>? _reference;
     private bool _shouldRender;
+    private IJSObjectReference? _module;
 
     [CascadingParameter] public BlazorDiagram BlazorDiagram { get; set; } = null!;
 
     [Parameter] public NodeModel Node { get; set; } = null!;
 
     [Inject] private IJSRuntime JsRuntime { get; set; } = null!;
 
-    public void Dispose()
+    public async ValueTask DisposeAsync()
     {
         Node.Changed -= OnNodeChanged;
         Node.VisibilityChanged -= OnVisibilityChanged;
 
+
         if (_element.Id != null && !Node.ControlledSize)
         {
-            _ = JsRuntime.UnobserveResizes(_element);
+            if(_module is not null)
+            {
+                await  _module.UnobserveResizes(_element);
+            }
         }
 
         _reference?.Dispose();
@@ -61,6 +67,8 @@ public void OnResize(Size size)
         Node.ReinitializePorts();
     }
 
+
+
     protected override void OnInitialized()
     {
         base.OnInitialized();
@@ -129,13 +137,18 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (firstRender)
+        {
+            _module ??= await JsRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Z.Blazor.Diagrams/script.min.js");
+        }
+
         if (firstRender || _becameVisible)
         {
             _becameVisible = false;
 
-            if (!Node.ControlledSize)
+            if (!Node.ControlledSize && _module is not null)
             {
-                await JsRuntime.ObserveResizes(_element, _reference!);
+                await _module.ObserveResizes(_element, _reference!);
             }
         }
     }

diff --git a/src/Blazor.Diagrams/Components/Renderers/PortRenderer.cs b/src/Blazor.Diagrams/Components/Renderers/PortRenderer.cs
@@ -1,25 +1,24 @@
-using System;
-using System.Linq;
-using System.Threading.Tasks;
-using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Geometry;
 using Blazor.Diagrams.Core.Models;
 using Blazor.Diagrams.Core.Models.Base;
 using Blazor.Diagrams.Extensions;
 using Blazor.Diagrams.Models;
+
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.Web;
 using Microsoft.JSInterop;
 
 namespace Blazor.Diagrams.Components.Renderers;
 
-public class PortRenderer : ComponentBase, IDisposable
+public class PortRenderer : ComponentBase, IAsyncDisposable
 {
     private ElementReference _element;
     private bool _isParentSvg;
     private bool _shouldRefreshPort;
     private bool _shouldRender = true;
     private bool _updatingDimensions;
+    private IJSObjectReference? _module;
 
     [CascadingParameter] public BlazorDiagram BlazorDiagram { get; set; } = null!;
     [Inject] private IJSRuntime JSRuntime { get; set; } = null!;
@@ -28,8 +27,12 @@ public class PortRenderer : ComponentBase, IDisposable
     [Parameter] public string? Style { get; set; }
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
-    public void Dispose()
+    public async ValueTask DisposeAsync()
     {
+        if (_module != null)
+        {
+            await _module.DisposeAsync();
+        }
         Port.Changed -= OnPortChanged;
         Port.VisibilityChanged -= OnPortChanged;
     }
@@ -62,7 +65,7 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
     {
         if (!Port.Visible)
             return;
-        
+
         builder.OpenElement(0, _isParentSvg ? "g" : "div");
         builder.AddAttribute(1, "style", Style);
         builder.AddAttribute(2, "class",
@@ -80,6 +83,10 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
 
     protected override async Task OnAfterRenderAsync(bool firstRender)
     {
+        if (firstRender)
+        {
+            _module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Z.Blazor.Diagrams/script.min.js");
+        }
         if (!Port.Initialized)
         {
             await UpdateDimensions();
@@ -123,12 +130,15 @@ private async Task UpdateDimensions()
         _updatingDimensions = true;
         var zoom = BlazorDiagram.Zoom;
         var pan = BlazorDiagram.Pan;
-        var rect = await JSRuntime.GetBoundingClientRect(_element);
 
+        _module ??= await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./_content/Z.Blazor.Diagrams/script.min.js");
+
+        var rect = await _module.GetBoundingClientRect(_element);
         Port.Size = new Size(rect.Width / zoom, rect.Height / zoom);
         Port.Position = new Point((rect.Left - BlazorDiagram.Container.Left - pan.X) / zoom,
             (rect.Top - BlazorDiagram.Container.Top - pan.Y) / zoom);
 
+
         Port.Initialized = true;
         _updatingDimensions = false;
 

diff --git a/src/Blazor.Diagrams/Extensions/JSObjectReferenceExtensions.cs b/src/Blazor.Diagrams/Extensions/JSObjectReferenceExtensions.cs
@@ -0,0 +1,36 @@
+using System;
+using System.Threading.Tasks;
+
+using Blazor.Diagrams.Core.Geometry;
+
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace Blazor.Diagrams.Extensions;
+
+public static class JSObjectReferenceExtensions
+{
+    public static async Task<Rectangle> GetBoundingClientRect(this IJSObjectReference jsRuntime, ElementReference element)
+    {
+        return await jsRuntime.InvokeAsync<Rectangle>("getBoundingClientRect", element);
+    }
+
+    public static async Task ObserveResizes<T>(this IJSObjectReference jsRuntime, ElementReference element,
+        DotNetObjectReference<T> reference) where T : class
+    {
+        try
+        {
+            await jsRuntime.InvokeVoidAsync("observe", element, reference, element.Id);
+        }
+        catch (ObjectDisposedException)
+        {
+            // Ignore, DotNetObjectReference was likely disposed
+        }
+    }
+
+    public static async Task UnobserveResizes(this IJSObjectReference jsRuntime, ElementReference element)
+    {
+        await jsRuntime.InvokeVoidAsync("unobserve", element, element.Id);
+    }
+}
+
diff --git a/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs b/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs
@@ -8,11 +8,6 @@ namespace Blazor.Diagrams.Extensions;
 
 public static class JSRuntimeExtensions
 {
-    public static async Task<Rectangle> GetBoundingClientRect(this IJSRuntime jsRuntime, ElementReference element)
-    {
-        return await jsRuntime.InvokeAsync<Rectangle>("ZBlazorDiagrams.getBoundingClientRect", element);
-    }
-
     public static async Task ObserveResizes<T>(this IJSRuntime jsRuntime, ElementReference element,
         DotNetObjectReference<T> reference) where T : class
     {