WI00761833 - Updates for Blazor Diagrams mouse configuration

site/Site/Pages/Documentation/Diagram/Behaviors.razor

@@ -114,6 +114,20 @@ Diagram.UnregisterBehavior<SelectionBehavior>();
 Diagram.RegisterBehavior(new MySelectionBehavior(Diagram));
 </code></pre>
 
+<h2>Using Different Behaviors</h2>
+
+You can use the following ways to add different behaviors to the diagram.
+
+<h3>Scroll Behavior</h3>
+
+<p>To scroll the diagram using the mouse wheel you can register the Scroll Behavior.</p>
+
+<pre><code class="language-cs">
+Diagram.UnregisterBehavior&lt;WheelBehavior&gt;();
+Diagram.RegisterBehavior(new ScrollBehavior(Diagram));
+</code></pre>
+
+
 <NavigationButtons PreviousLink="/documentation/diagram"
                    PreviousTitle="Overview"
                    NextTitle="Ordering"

src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs

@@ -64,6 +64,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             BlazorDiagram.SetContainer(await JSRuntime.GetBoundingClientRect(elementReference));
             await JSRuntime.ObserveResizes(elementReference, _reference!);
+            await JSRuntime.AddDefaultPreventingHandler(elementReference);
         }
     }
 
@@ -101,7 +102,7 @@ private void OnKeyDown(KeyboardEventArgs e)
         BlazorDiagram.TriggerKeyDown(e.ToCore());
     }
 
-    private void OnWheel(WheelEventArgs e)
+    private async void OnWheel(WheelEventArgs e)
     {
         BlazorDiagram.TriggerWheel(e.ToCore());
     }

src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs

@@ -30,4 +30,9 @@ public static async Task UnobserveResizes(this IJSRuntime jsRuntime, ElementRefe
     {
         await jsRuntime.InvokeVoidAsync("ZBlazorDiagrams.unobserve", element, element.Id);
     }
+
+    public static async Task AddDefaultPreventingHandler(this IJSRuntime jsRuntime, ElementReference element)
+    {
+        await jsRuntime.InvokeVoidAsync("ZBlazorDiagrams.addDefaultPreventingHandler", element, "wheel");
+    }
 }

src/Blazor.Diagrams/wwwroot/script.js

@@ -45,6 +45,9 @@ var s = {
         }
         delete s.tracked[id];
         delete s.canvases[id];
+    },
+    addDefaultPreventingHandler: (element, eventName) => {
+        element.addEventListener(eventName, e => e.preventDefault(), { passive: false });
     }
 };
 window.ZBlazorDiagrams = s;