From cfa5fecb93c57fea67e5fda777eed6255561cba7 Mon Sep 17 00:00:00 2001 From: Shams Azam Date: Thu, 4 Jul 2024 08:07:31 +0530 Subject: [PATCH 1/4] WI00761833 - Updates for Blazor Diagrams mouse configuration --- .../Pages/Documentation/Diagram/Behaviors.razor | 14 ++++++++++++++ .../Components/DiagramCanvas.razor.cs | 3 ++- .../Extensions/JSRuntimeExtensions.cs | 5 +++++ src/Blazor.Diagrams/wwwroot/script.js | 3 +++ src/Blazor.Diagrams/wwwroot/script.min.js | 2 +- 5 files changed, 25 insertions(+), 2 deletions(-) diff --git a/site/Site/Pages/Documentation/Diagram/Behaviors.razor b/site/Site/Pages/Documentation/Diagram/Behaviors.razor index 540daba7e..4f3785adc 100644 --- a/site/Site/Pages/Documentation/Diagram/Behaviors.razor +++ b/site/Site/Pages/Documentation/Diagram/Behaviors.razor @@ -114,6 +114,20 @@ Diagram.UnregisterBehavior<SelectionBehavior>(); Diagram.RegisterBehavior(new MySelectionBehavior(Diagram)); +

Using Different Behaviors

+ +You can use the following ways to add different behaviors to the diagram. + +

Scroll Behavior

+ +

To scroll the diagram using the mouse wheel you can register the Scroll Behavior.

+ +

+Diagram.UnregisterBehavior<WheelBehavior>();
+Diagram.RegisterBehavior(new ScrollBehavior(Diagram));
+
+ + { + element.addEventListener(eventName, e => e.preventDefault(), { passive: false }); } }; window.ZBlazorDiagrams = s; diff --git a/src/Blazor.Diagrams/wwwroot/script.min.js b/src/Blazor.Diagrams/wwwroot/script.min.js index a4065277c..a900d0005 100644 --- a/src/Blazor.Diagrams/wwwroot/script.min.js +++ b/src/Blazor.Diagrams/wwwroot/script.min.js @@ -1 +1 @@ -var s={canvases:{},tracked:{},getBoundingClientRect:n=>n.getBoundingClientRect(),mo:new MutationObserver(()=>{for(id in s.canvases){const t=s.canvases[id],i=t.lastBounds,n=t.elem.getBoundingClientRect();(i.left!==n.left||i.top!==n.top||i.width!==n.width||i.height!==n.height)&&(t.lastBounds=n,t.ref.invokeMethodAsync("OnResize",n))}}),ro:new ResizeObserver(n=>{for(const t of n){let i=Array.from(t.target.attributes).find(n=>n.name.startsWith("_bl")).name.substring(4),n=s.tracked[i];n&&n.ref.invokeMethodAsync("OnResize",t.target.getBoundingClientRect())}}),observe:(n,t,i)=>{n&&(s.ro.observe(n),s.tracked[i]={ref:t},n.classList.contains("diagram-canvas")&&(s.canvases[i]={elem:n,ref:t,lastBounds:n.getBoundingClientRect()}))},unobserve:(n,t)=>{n&&s.ro.unobserve(n),delete s.tracked[t],delete s.canvases[t]}};window.ZBlazorDiagrams=s;window.addEventListener("scroll",()=>{for(id in s.canvases){const n=s.canvases[id];n.lastBounds=n.elem.getBoundingClientRect();n.ref.invokeMethodAsync("OnResize",n.lastBounds)}});s.mo.observe(document.body,{childList:!0,subtree:!0}); \ No newline at end of file +var s = { canvases: {}, tracked: {}, getBoundingClientRect: e => e.getBoundingClientRect(), mo: new MutationObserver((() => { for (id in s.canvases) { const e = s.canvases[id], t = e.lastBounds, n = e.elem.getBoundingClientRect(); t.left === n.left && t.top === n.top && t.width === n.width && t.height === n.height || (e.lastBounds = n, e.ref.invokeMethodAsync("OnResize", n)) } })), ro: new ResizeObserver((e => { for (const t of e) { let e = Array.from(t.target.attributes).find((e => e.name.startsWith("_bl"))).name.substring(4), n = s.tracked[e]; n && n.ref.invokeMethodAsync("OnResize", t.target.getBoundingClientRect()) } })), observe: (e, t, n) => { e && (s.ro.observe(e), s.tracked[n] = { ref: t }, e.classList.contains("diagram-canvas") && (s.canvases[n] = { elem: e, ref: t, lastBounds: e.getBoundingClientRect() })) }, unobserve: (e, t) => { e && s.ro.unobserve(e), delete s.tracked[t], delete s.canvases[t] }, addDefaultPreventingHandler: (e, s) => { e.addEventListener(s, (e => e.preventDefault()), { passive: !1 }) } }; window.ZBlazorDiagrams = s, window.addEventListener("scroll", (() => { for (id in s.canvases) { const e = s.canvases[id]; e.lastBounds = e.elem.getBoundingClientRect(), e.ref.invokeMethodAsync("OnResize", e.lastBounds) } })), s.mo.observe(document.body, { childList: !0, subtree: !0 }); \ No newline at end of file From 3d0517ef21d97cd692116792a3aaebe65f2cb23c Mon Sep 17 00:00:00 2001 From: Shams Azam Date: Wed, 10 Jul 2024 09:50:12 +0530 Subject: [PATCH 2/4] enabled wheel preventing only for scroll behavior, other pr suggestions addressed --- site/Site/Pages/Documentation/Diagram/Behaviors.razor | 5 ++--- src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs | 8 ++++++-- src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs | 2 +- 3 files changed, 9 insertions(+), 6 deletions(-) diff --git a/site/Site/Pages/Documentation/Diagram/Behaviors.razor b/site/Site/Pages/Documentation/Diagram/Behaviors.razor index 4f3785adc..ff9a5f7d2 100644 --- a/site/Site/Pages/Documentation/Diagram/Behaviors.razor +++ b/site/Site/Pages/Documentation/Diagram/Behaviors.razor @@ -120,11 +120,10 @@ You can use the following ways to add different behaviors to the diagram.

Scroll Behavior

-

To scroll the diagram using the mouse wheel you can register the Scroll Behavior.

+

To scroll the diagram using the mouse wheel use ScrollBehavior.


-Diagram.UnregisterBehavior<WheelBehavior>();
-Diagram.RegisterBehavior(new ScrollBehavior(Diagram));
+_diagram.BehaviorOptions.DiagramWheelBehavior = _diagram.GetBehavior<ScrollBehavior>();
diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs index a970780d9..815e29be8 100644 --- a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs +++ b/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,7 +65,10 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { BlazorDiagram.SetContainer(await JSRuntime.GetBoundingClientRect(elementReference)); await JSRuntime.ObserveResizes(elementReference, _reference!); - await JSRuntime.AddDefaultPreventingHandler(elementReference); + if (BlazorDiagram.GetBehavior() != null) + { + await JSRuntime.AddDefaultPreventingForWheelHandler(elementReference); + } } } @@ -102,7 +106,7 @@ private void OnKeyDown(KeyboardEventArgs e) BlazorDiagram.TriggerKeyDown(e.ToCore()); } - private async void OnWheel(WheelEventArgs e) + private void OnWheel(WheelEventArgs e) { BlazorDiagram.TriggerWheel(e.ToCore()); } diff --git a/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs b/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs index c11886223..5509f7428 100644 --- a/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs +++ b/src/Blazor.Diagrams/Extensions/JSRuntimeExtensions.cs @@ -31,7 +31,7 @@ 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) + public static async Task AddDefaultPreventingForWheelHandler(this IJSRuntime jsRuntime, ElementReference element) { await jsRuntime.InvokeVoidAsync("ZBlazorDiagrams.addDefaultPreventingHandler", element, "wheel"); } From 98da37e10a7542d4b882451d318bcfef93449e39 Mon Sep 17 00:00:00 2001 From: Shams Azam Date: Wed, 10 Jul 2024 10:29:24 +0530 Subject: [PATCH 3/4] fixed scroll behavior checking for preventing default wheel behavior --- src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs index 815e29be8..a6bfda573 100644 --- a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs +++ b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs @@ -65,7 +65,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) { BlazorDiagram.SetContainer(await JSRuntime.GetBoundingClientRect(elementReference)); await JSRuntime.ObserveResizes(elementReference, _reference!); - if (BlazorDiagram.GetBehavior() != null) + if (BlazorDiagram.BehaviorOptions.DiagramWheelBehavior is ScrollBehavior) { await JSRuntime.AddDefaultPreventingForWheelHandler(elementReference); } From 09f824d23dd0dd08d8c244e8580f6ba35995c4d2 Mon Sep 17 00:00:00 2001 From: Shams Azam Date: Thu, 11 Jul 2024 11:38:23 +0530 Subject: [PATCH 4/4] updated documentation for BehaviorOptions. --- site/Site/Pages/Documentation/Diagram/Behaviors.razor | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/site/Site/Pages/Documentation/Diagram/Behaviors.razor b/site/Site/Pages/Documentation/Diagram/Behaviors.razor index ff9a5f7d2..094b33112 100644 --- a/site/Site/Pages/Documentation/Diagram/Behaviors.razor +++ b/site/Site/Pages/Documentation/Diagram/Behaviors.razor @@ -114,13 +114,14 @@ Diagram.UnregisterBehavior<SelectionBehavior>(); Diagram.RegisterBehavior(new MySelectionBehavior(Diagram)); -

Using Different Behaviors

+

Configure behaviors for different actions on input

-You can use the following ways to add different behaviors to the diagram. +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 BehaviorOptions. See the below example. -

Scroll Behavior

+

Scrolling a diagram on mouse wheel

-

To scroll the diagram using the mouse wheel use ScrollBehavior.

+

To scroll a diagram using the mouse wheel set the DiagramWheelBehavior property of BehaviorOptions to use ScrollBehavior.


 _diagram.BehaviorOptions.DiagramWheelBehavior = _diagram.GetBehavior<ScrollBehavior>();