Merge pull request #15 from WiseTechGlobal/RAL/WI00681235/Pointer_bas…

…ed_behaviors_should_support_pan_changed_new Ral/wi00681235/pointer based behaviors should support pan changed new
WiseTechGlobal · Feb 20, 2024 · 97ae0b1 · 97ae0b1
2 parents 3ad39d9 + 965a28b
commit 97ae0b1
Show file tree

Hide file tree

Showing 28 changed files with 475 additions and 354 deletions.
diff --git a/site/Site/Pages/Documentation/Controls/Overview.razor b/site/Site/Pages/Documentation/Controls/Overview.razor
@@ -141,7 +141,7 @@ Diagram.Controls.AddFor(SomeModel)
 
 <p>
 	The <code>ResizeControl</code> adds a resizer which is a box that when dragged, can resize the node. The resizer position and movement of the node is controlled using a Resizer Provider.<br />
-	There are four <code>ResizerProvider</code>s, one for each corner. Custom resizing behavior can be created by implementing <code>IResizerProvider</code>.
+	There are four <code>ResizerProvider</code>s, one for each corner. Custom resizing behavior can be created by inheriting and overriding <code>ResizerProvider</code>.
 </p>
 
 <pre><code class="language-cs">

diff --git a/site/Site/Pages/Documentation/Diagram/Api.razor b/site/Site/Pages/Documentation/Diagram/Api.razor
@@ -148,7 +148,7 @@
         </tr>
         <tr>
             <td>PanChanged</td>
-            <td>Action?</td>
+            <td>Action&lt;double, double&gt;?</td>
             <td></td>
         </tr>
         <tr>

diff --git a/src/Blazor.Diagrams.Core/Behaviors/DebugEventsBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/DebugEventsBehavior.cs
@@ -52,7 +52,7 @@ private void Nodes_Added(NodeModel obj)
         Console.WriteLine($"Nodes.Added, Nodes=[{obj}]");
     }
 
-    private void Diagram_PanChanged()
+    private void Diagram_PanChanged(double deltaX, double deltaY)
     {
         Console.WriteLine($"PanChanged, Pan={Diagram.Pan}");
     }

diff --git a/src/Blazor.Diagrams.Core/Behaviors/DragMovablesBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/DragMovablesBehavior.cs
@@ -1,10 +1,10 @@
-using Blazor.Diagrams.Core.Geometry;
-using Blazor.Diagrams.Core.Models.Base;
+using Blazor.Diagrams.Core.Behaviors.Base;
 using Blazor.Diagrams.Core.Events;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
 using System;
 using System.Collections.Generic;
-using Blazor.Diagrams.Core.Models;
-using Blazor.Diagrams.Core.Behaviors.Base;
 
 namespace Blazor.Diagrams.Core.Behaviors;
 
@@ -14,13 +14,16 @@ public class DragMovablesBehavior : Behavior
     private double? _lastClientX;
     private double? _lastClientY;
     private bool _moved;
+    private double _totalMovedX = 0;
+    private double _totalMovedY = 0;
 
     public DragMovablesBehavior(Diagram diagram) : base(diagram)
     {
         _initialPositions = new Dictionary<MovableModel, Point>();
         Diagram.PointerDown += OnPointerDown;
         Diagram.PointerMove += OnPointerMove;
         Diagram.PointerUp += OnPointerUp;
+        Diagram.PanChanged += OnPanChanged;
     }
 
     private void OnPointerDown(Model? model, PointerEventArgs e)
@@ -62,6 +65,30 @@ private void OnPointerMove(Model? model, PointerEventArgs e)
         var deltaX = (e.ClientX - _lastClientX.Value) / Diagram.Zoom;
         var deltaY = (e.ClientY - _lastClientY.Value) / Diagram.Zoom;
 
+        _totalMovedX += deltaX;
+        _totalMovedY += deltaY;
+
+        MoveNodes(model, _totalMovedX, _totalMovedY);
+
+        _lastClientX = e.ClientX;
+        _lastClientY = e.ClientY;
+
+    }
+    public void OnPanChanged(double deltaX, double deltaY)
+    {
+        if (_initialPositions.Count == 0 || _lastClientX == null || _lastClientY == null)
+            return;
+
+        _moved = true;
+
+        _totalMovedX += deltaX;
+        _totalMovedY += deltaY;
+
+        MoveNodes(null, _totalMovedX, _totalMovedY);
+    }
+
+    private void MoveNodes(Model? model, double deltaX, double deltaY)
+    {
         foreach (var (movable, initialPosition) in _initialPositions)
         {
             var ndx = ApplyGridSize(deltaX + initialPosition.X);
@@ -89,8 +116,9 @@ private void OnPointerUp(Model? model, PointerEventArgs e)
                 movable.TriggerMoved();
             }
         }
-
         _initialPositions.Clear();
+        _totalMovedX = 0;
+        _totalMovedY = 0;
         _lastClientX = null;
         _lastClientY = null;
     }
@@ -107,9 +135,9 @@ private double ApplyGridSize(double n)
     public override void Dispose()
     {
         _initialPositions.Clear();
-
         Diagram.PointerDown -= OnPointerDown;
         Diagram.PointerMove -= OnPointerMove;
         Diagram.PointerUp -= OnPointerUp;
+        Diagram.PanChanged -= OnPanChanged;
     }
 }
diff --git a/src/Blazor.Diagrams.Core/Behaviors/DragNewLinkBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/DragNewLinkBehavior.cs
@@ -1,10 +1,10 @@
-using Blazor.Diagrams.Core.Models;
-using Blazor.Diagrams.Core.Models.Base;
-using Blazor.Diagrams.Core.Events;
-using System.Linq;
-using Blazor.Diagrams.Core.Anchors;
+using Blazor.Diagrams.Core.Anchors;
 using Blazor.Diagrams.Core.Behaviors.Base;
+using Blazor.Diagrams.Core.Events;
 using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models;
+using Blazor.Diagrams.Core.Models.Base;
+using System.Linq;
 
 namespace Blazor.Diagrams.Core.Behaviors;
 
@@ -13,12 +13,15 @@ public class DragNewLinkBehavior : Behavior
     private PositionAnchor? _targetPositionAnchor;
 
     public BaseLinkModel? OngoingLink { get; private set; }
+    private double? _lastClientX;
+    private double? _lastClientY;
 
     public DragNewLinkBehavior(Diagram diagram) : base(diagram)
     {
         Diagram.PointerDown += OnPointerDown;
         Diagram.PointerMove += OnPointerMove;
         Diagram.PointerUp += OnPointerUp;
+        Diagram.PanChanged += OnPanChanged;
     }
 
     public void StartFrom(ILinkable source, double clientX, double clientY)
@@ -67,14 +70,35 @@ private void OnPointerDown(Model? model, MouseEventArgs e)
             OngoingLink.SetTarget(_targetPositionAnchor);
             Diagram.Links.Add(OngoingLink);
         }
+        _lastClientX = e.ClientX;
+        _lastClientY = e.ClientY;
     }
 
     private void OnPointerMove(Model? model, MouseEventArgs e)
     {
-        if (OngoingLink == null || model != null)
+        if (OngoingLink == null || model != null || _lastClientX == null || _lastClientY == null)
+            return;
+
+        _lastClientX = e.ClientX;
+        _lastClientY = e.ClientY;
+
+        UpdateLinkPosition((double)_lastClientX, (double)_lastClientY);
+    }
+
+    private void OnPanChanged(double deltaX, double deltaY)
+    {
+        if (OngoingLink == null || _lastClientX == null || _lastClientY == null)
+            return;
+
+        UpdateLinkPosition((double)_lastClientX, (double)_lastClientY);
+    }
+
+    private void UpdateLinkPosition(double clientX, double clientY)
+    {
+        if (OngoingLink == null)
             return;
 
-        _targetPositionAnchor!.SetPosition(CalculateTargetPosition(e.ClientX, e.ClientY));
+        _targetPositionAnchor!.SetPosition(CalculateTargetPosition(clientX, clientY));
 
         if (Diagram.Options.Links.EnableSnapping)
         {
@@ -119,6 +143,8 @@ private void OnPointerUp(Model? model, MouseEventArgs e)
         }
 
         OngoingLink = null;
+        _lastClientX = null;
+        _lastClientY = null;
     }
 
     private Point CalculateTargetPosition(double clientX, double clientY)
@@ -168,5 +194,6 @@ public override void Dispose()
         Diagram.PointerDown -= OnPointerDown;
         Diagram.PointerMove -= OnPointerMove;
         Diagram.PointerUp -= OnPointerUp;
+        Diagram.PanChanged -= OnPanChanged;
     }
 }
diff --git a/src/Blazor.Diagrams.Core/Behaviors/PanBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/PanBehavior.cs
@@ -1,7 +1,7 @@
-using Blazor.Diagrams.Core.Geometry;
-using Blazor.Diagrams.Core.Models.Base;
+using Blazor.Diagrams.Core.Behaviors.Base;
 using Blazor.Diagrams.Core.Events;
-using Blazor.Diagrams.Core.Behaviors.Base;
+using Blazor.Diagrams.Core.Geometry;
+using Blazor.Diagrams.Core.Models.Base;
 
 namespace Blazor.Diagrams.Core.Behaviors;
 

diff --git a/src/Blazor.Diagrams.Core/Behaviors/ScrollBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/ScrollBehavior.cs
@@ -1,6 +1,5 @@
 using Blazor.Diagrams.Core.Behaviors.Base;
 using Blazor.Diagrams.Core.Events;
-using Blazor.Diagrams.Core.Options;
 
 namespace Blazor.Diagrams.Core.Behaviors
 {
@@ -16,10 +15,7 @@ protected override void OnDiagramWheel(WheelEventArgs e)
             if (Diagram.Container == null || !IsBehaviorEnabled(e))
                 return;
 
-            var x = Diagram.Pan.X - (e.DeltaX / Diagram.Options.Zoom.ScaleFactor);
-            var y = Diagram.Pan.Y - (e.DeltaY / Diagram.Options.Zoom.ScaleFactor);
-
-            Diagram.SetPan(x, y);
+            Diagram.UpdatePan(-e.DeltaX / Diagram.Zoom, -e.DeltaY / Diagram.Zoom);
         }
     }
 }
diff --git a/src/Blazor.Diagrams.Core/Behaviors/VirtualizationBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/VirtualizationBehavior.cs
@@ -12,11 +12,16 @@ public VirtualizationBehavior(Diagram diagram) : base(diagram)
         Diagram.ContainerChanged += CheckVisibility;
     }
 
+    private void CheckVisibility(double deltaX, double deltaY)
+    {
+        CheckVisibility();
+    }
+
     private void CheckVisibility()
     {
         if (!Diagram.Options.Virtualization.Enabled)
             return;
-        
+
         if (Diagram.Container == null)
             return;
 
@@ -49,11 +54,11 @@ private void CheckVisibility(Model model)
     {
         if (model is not IHasBounds ihb)
             return;
-        
+
         var bounds = ihb.GetBounds();
         if (bounds == null)
             return;
-        
+
         var left = bounds.Left * Diagram.Zoom + Diagram.Pan.X;
         var top = bounds.Top * Diagram.Zoom + Diagram.Pan.Y;
         var right = left + bounds.Width * Diagram.Zoom;

diff --git a/src/Blazor.Diagrams.Core/Behaviors/ZoomBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/ZoomBehavior.cs
@@ -15,27 +15,27 @@ protected override void OnDiagramWheel(WheelEventArgs e)
         if (Diagram.Container == null || e.DeltaY == 0 || !Diagram.Options.Zoom.Enabled || !IsBehaviorEnabled(e))
             return;
 
-    var scale = Diagram.Options.Zoom.ScaleFactor;
-    var oldZoom = Diagram.Zoom;
-    var deltaY = Diagram.Options.Zoom.Inverse ? e.DeltaY * -1 : e.DeltaY;
-    var newZoom = deltaY > 0 ? oldZoom * scale : oldZoom / scale;
-    newZoom = Math.Clamp(newZoom, Diagram.Options.Zoom.Minimum, Diagram.Options.Zoom.Maximum);
+        var scale = Diagram.Options.Zoom.ScaleFactor;
+        var oldZoom = Diagram.Zoom;
+        var deltaY = Diagram.Options.Zoom.Inverse ? e.DeltaY * -1 : e.DeltaY;
+        var newZoom = deltaY > 0 ? oldZoom * scale : oldZoom / scale;
+        newZoom = Math.Clamp(newZoom, Diagram.Options.Zoom.Minimum, Diagram.Options.Zoom.Maximum);
 
-    if (newZoom < 0 || newZoom == Diagram.Zoom)
-        return;
+        if (newZoom < 0 || newZoom == Diagram.Zoom)
+            return;
 
-    // Other algorithms (based only on the changes in the zoom) don't work for our case
-    // This solution is taken as is from react-diagrams (ZoomCanvasAction)
-    var clientWidth = Diagram.Container.Width;
-    var clientHeight = Diagram.Container.Height;
-    var widthDiff = clientWidth * newZoom - clientWidth * oldZoom;
-    var heightDiff = clientHeight * newZoom - clientHeight * oldZoom;
-    var clientX = e.ClientX - Diagram.Container.Left;
-    var clientY = e.ClientY - Diagram.Container.Top;
-    var xFactor = (clientX - Diagram.Pan.X) / oldZoom / clientWidth;
-    var yFactor = (clientY - Diagram.Pan.Y) / oldZoom / clientHeight;
-    var newPanX = Diagram.Pan.X - widthDiff * xFactor;
-    var newPanY = Diagram.Pan.Y - heightDiff * yFactor;
+        // Other algorithms (based only on the changes in the zoom) don't work for our case
+        // This solution is taken as is from react-diagrams (ZoomCanvasAction)
+        var clientWidth = Diagram.Container.Width;
+        var clientHeight = Diagram.Container.Height;
+        var widthDiff = clientWidth * newZoom - clientWidth * oldZoom;
+        var heightDiff = clientHeight * newZoom - clientHeight * oldZoom;
+        var clientX = e.ClientX - Diagram.Container.Left;
+        var clientY = e.ClientY - Diagram.Container.Top;
+        var xFactor = (clientX - Diagram.Pan.X) / oldZoom / clientWidth;
+        var yFactor = (clientY - Diagram.Pan.Y) / oldZoom / clientHeight;
+        var newPanX = Diagram.Pan.X - widthDiff * xFactor;
+        var newPanY = Diagram.Pan.Y - heightDiff * yFactor;
 
         Diagram.Batch(() =>
         {

diff --git a/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs b/src/Blazor.Diagrams.Core/Controls/Default/ResizeControl.cs
@@ -8,9 +8,9 @@ namespace Blazor.Diagrams.Core.Controls.Default
 {
     public class ResizeControl : ExecutableControl
     {
-        private readonly IResizerProvider _resizeProvider;
+        private readonly ResizerProvider _resizeProvider;
 
-        public ResizeControl(IResizerProvider resizeProvider)
+        public ResizeControl(ResizerProvider resizeProvider)
         {
             _resizeProvider = resizeProvider;
         }
@@ -23,6 +23,7 @@ public override ValueTask OnPointerDown(Diagram diagram, Model model, PointerEve
         {
             _resizeProvider.OnResizeStart(diagram, model, e);
             diagram.PointerMove += _resizeProvider.OnPointerMove;
+            diagram.PanChanged += _resizeProvider.OnPanChanged;
             diagram.PointerUp += _resizeProvider.OnResizeEnd;
             diagram.PointerUp += (_, _) => OnResizeEnd(diagram);
 
@@ -32,6 +33,7 @@ public override ValueTask OnPointerDown(Diagram diagram, Model model, PointerEve
         void OnResizeEnd(Diagram diagram)
         {
             diagram.PointerMove -= _resizeProvider.OnPointerMove;
+            diagram.PanChanged -= _resizeProvider.OnPanChanged;
             diagram.PointerUp -= _resizeProvider.OnResizeEnd;
         }
     }