Merge pull request #45 from WiseTechGlobal/M71/WI00761833/Updates-for-Blazor-Diagrams-mouse-configuration

WI00761833 - Updates for Blazor Diagrams mouse configuration

Author: shams-azam-wtg

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

@@ -114,6 +114,20 @@ Diagram.UnregisterBehavior<SelectionBehavior>();
 Diagram.RegisterBehavior(new MySelectionBehavior(Diagram));
 </code></pre>
 
+<h2>Configure behaviors for different actions on input</h2>
+
+You can configure a behavior to perform different actions for an input. Such as scrolling a diagram on mouse wheel instead of zooming in and out.
+This can be done using the <code>BehaviorOptions</code>. See the below example.
+
+<h3>Scrolling a diagram on mouse wheel</h3>
+
+<p>To scroll a diagram using the mouse wheel set the <code>DiagramWheelBehavior</code> property of <code>BehaviorOptions</code> to use <code>ScrollBehavior</code>.</p>
+
+<pre><code class="language-cs">
+_diagram.BehaviorOptions.DiagramWheelBehavior = _diagram.GetBehavior&lt;ScrollBehavior&gt;();
+</code></pre>
+
+
 <NavigationButtons PreviousLink="/documentation/diagram"
                    PreviousTitle="Overview"
                    NextTitle="Ordering"

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

@@ -1,5 +1,6 @@
 using System;
 using System.Threading.Tasks;
+using Blazor.Diagrams.Core.Behaviors;
 using Blazor.Diagrams.Core.Geometry;
 using Blazor.Diagrams.Extensions;
 using Microsoft.AspNetCore.Components;
@@ -64,6 +65,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
         {
             BlazorDiagram.SetContainer(await JSRuntime.GetBoundingClientRect(elementReference));
             await JSRuntime.ObserveResizes(elementReference, _reference!);
+            if (BlazorDiagram.BehaviorOptions.DiagramWheelBehavior is ScrollBehavior)
+            {
+                await JSRuntime.AddDefaultPreventingForWheelHandler(elementReference);
+            }
         }
     }
 

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 AddDefaultPreventingForWheelHandler(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;