ZoomIn ZoomOut throws JSException

[VladislavAntonyuk]

1. ZoomIn, ZoomOut multiple times using the mouse wheel

2. Error: Microsoft.JSInterop.JSException: Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element'.
   TypeError: Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element'.
   at Object.unobserve (https://localhost:5001/_content/Z.Blazor.Diagrams/script.min.js:1:747)
   at https://localhost:5001/_framework/blazor.server.js:1:3501
   at new Promise (<anonymous>)
   at It.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:3475)
   at https://localhost:5001/_framework/blazor.server.js:1:71331
   at Array.forEach (<anonymous>)
   at It._invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:71317)
   at It._processIncomingData (https://localhost:5001/_framework/blazor.server.js:1:69359)
   at wt.It.connection.onreceive (https://localhost:5001/_framework/blazor.server.js:1:63759)
   at WebSocket.o.onmessage (https://localhost:5001/_framework/blazor.server.js:1:48075)
   at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
   at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
   at Blazor.Diagrams.Extensions.JSRuntimeExtensions.UnobserveResizes(IJSRuntime jsRuntime, ElementReference element)
   at Blazor.Diagrams.Components.Renderers.NodeRenderer.CheckVisibility()
   at System.Threading.Tasks.Task.<>c.<ThrowAsync>b__127_0(Object state)
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteSynchronously(TaskCompletionSource`1 completion, SendOrPostCallback d, Object state)
   at System.Threading.ExecutionContext.RunInternal(ExecutionContext executionContext, ContextCallback callback, Object state)
   --- End of stack trace from previous location ---
   at Microsoft.AspNetCore.Components.Rendering.RendererSynchronizationContext.ExecuteBackground(WorkItem item)

[314159265meow]

We had the same problem and ended up disabling virtualization (EnableVirtualization = false in DiagramOptions).

I did some debugging and it looked like a timing problem. In Blazor the element exists, but the JavaScript function gets null

[1]NodeRenderer.CheckVisibility() ->!_isVisible 05196a63-a9c9-4bf8-847e-cb890713b090
[2]await jsRuntime.InvokeVoidAsync(ZBlazorDiagrams.unobserve, 05196a63-a9c9-4bf8-847e-cb890713b090)
[3]JS.unobserve( <div class=​"node" data-node-id=​"d4be2795-7844-4793-a64c-742d59d1db7a" style=​"top:​ 386px;​ left:​ 58px" _bl_05196a63-a9c9-4bf8-847e-cb890713b090>​…​</div>​ 05196a63-a9c9-4bf8-847e-cb890713b090 )

[1]NodeRenderer.CheckVisibility() ->!_isVisible 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523
[2]await jsRuntime.InvokeVoidAsync(ZBlazorDiagrams.unobserve, 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523)
[3]JS.unobserve( <div class=​"node" data-node-id=​"a1beef81-3dde-4065-9613-3ddcb6c2e488" style=​"top:​ 306px;​ left:​ 1490px" _bl_3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523>​…​</div>​ 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523 )

[1]NodeRenderer.CheckVisibility() ->!_isVisible 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523
[2]await jsRuntime.InvokeVoidAsync(ZBlazorDiagrams.unobserve, 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523)
[3]JS.unobserve( null 3d5ea2ab-47f9-4e5b-863f-2dc7b02aa523 )  // <- exception

[1] is _element.Id in NodeRenderer.cs line 157 [2] is element.id in JSRuntimeExtensions.cs line 24 [3] is element, id in script.js line 42

[zHaytam]

I have come to the same conclusion. Although I'm not sure why it started happening only now, I will investigate it more!

[tomglover24]

Hi @zHaytam,

I can confirm with default options and a few nodes zooming in and out via scroll or _diagram.SetZoom() functions will trigger this.

Disabling Virtualization seems to be a temporary fix, and WASM performance seems to be comparable.

As a temporary workaround could this be caught in one of the two functions below as all operations seem to be nominal in WASM, even after this has triggered one or more stacktrace's in Console, and the default "Error Banner" appears in the UI.

Blazor.Diagrams.Extensions.JSRuntimeExtensions.UnobserveResizes(IJSRuntime jsRuntime, ElementReference element)
Blazor.Diagrams.Components.Renderers.NodeRenderer.CheckVisibility()

Caveat I've only tested this with WASM and not Server Side Blazor.

Thanks, Tom

[rogue6800]

I can reproduce this error on blazor serverside. Zooming in then error on zooming out on a default installation.

Disabling virtualization also fixed that for me, thanks to @314159265meow for the work around!