Merge pull request #20 from WiseTechGlobal/M71/WI00642713/NCN-Cursors

Introduced cursor change based on allow panning.
WiseTechGlobal · Jan 17, 2024 · 81a7838 · 81a7838
2 parents 5f6626c + 4f97ed2
commit 81a7838
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor b/src/Blazor.Diagrams/Components/DiagramCanvas.razor
@@ -1,5 +1,6 @@
 <div class="diagram-canvas @Class"
      tabindex="-1"
+     style="@Style"
      @ref="elementReference"
      @onpointerdown="OnPointerDown"
      @onpointermove="OnPointerMove"

diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs
@@ -12,6 +12,7 @@ public partial class DiagramCanvas : IDisposable
 {
     private DotNetObjectReference<DiagramCanvas>? _reference;
     private bool _shouldRender;
+    private string? Style;
 
     protected ElementReference elementReference;
 
@@ -52,6 +53,7 @@ protected override void OnInitialized()
 
         _reference = DotNetObjectReference.Create(this);
         BlazorDiagram.Changed += OnDiagramChanged;
+        Style = BlazorDiagram.Options.AllowPanning ? "cursor: grab; cursor: -webkit-grab;" : "cursor: default;";
     }
 
     protected override async Task OnAfterRenderAsync(bool firstRender)

diff --git a/src/Blazor.Diagrams/wwwroot/style.css b/src/Blazor.Diagrams/wwwroot/style.css
diff --git a/tests/Blazor.Diagrams.Tests/Components/DiagramCursorTests.cs b/tests/Blazor.Diagrams.Tests/Components/DiagramCursorTests.cs
@@ -0,0 +1,49 @@
+using AngleSharp.Css.Dom;
+using Blazor.Diagrams.Components;
+using Blazor.Diagrams.Core.Geometry;
+using Bunit;
+using FluentAssertions;
+using Xunit;
+
+namespace Blazor.Diagrams.Core.Tests.Behaviors
+{
+    public class DiagramCursorTests
+    {
+        [Fact]
+        public void Behavior_WhenPanningOptionIsAllowed_CursorShouldBeGrab()
+        {
+            // Arrange
+            using var ctx = new TestContext();
+            var diagram = new BlazorDiagram();
+            diagram.Options.AllowPanning = true;
+            ctx.JSInterop.Setup<Rectangle>("ZBlazorDiagrams.getBoundingClientRect", _ => true);
+
+            // Act
+            var cut = ctx.RenderComponent<DiagramCanvas>(parameters => parameters
+            .Add(n => n.BlazorDiagram, diagram));
+            var diagramCanvas = cut.Find(".diagram-canvas");
+
+            // Assert
+            diagramCanvas.ToMarkup().Should().Contain("cursor: grab; cursor: -webkit-grab;");
+        }
+
+        [Fact]
+        public void Behavior_WhenPanningOptionIsNotAllowed_CursorShouldBeDefault()
+        {
+            // Arrange
+            using var ctx = new TestContext();
+            var diagram = new BlazorDiagram();
+            diagram.Options.AllowPanning = false;
+            ctx.JSInterop.Setup<Rectangle>("ZBlazorDiagrams.getBoundingClientRect", _ => true);
+
+            // Act
+            var cut = ctx.RenderComponent<DiagramCanvas>(parameters => parameters
+            .Add(n => n.BlazorDiagram, diagram));
+            var diagramCanvas = cut.Find(".diagram-canvas");
+            var canvasStyle = diagramCanvas.GetStyle().CssText;
+
+            // Assert
+            canvasStyle.Should().Contain("cursor: default");
+        }
+    }
+}