feat: Touch support for dragging movables

joezearing · Mar 20, 2021 · ba8916d · ba8916d
1 parent 6cc9626
commit ba8916d
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 39 deletions.
diff --git a/src/Blazor.Diagrams.Core/Behaviors/DragMovablesBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/DragMovablesBehavior.cs
@@ -14,12 +14,29 @@ public class DragMovablesBehavior : Behavior
 
         public DragMovablesBehavior(Diagram diagram) : base(diagram)
         {
-            Diagram.MouseDown += Diagram_MouseDown;
-            Diagram.MouseMove += Diagram_MouseMove;
-            Diagram.MouseUp += Diagram_MouseUp;
+            Diagram.MouseDown += OnMouseDown;
+            Diagram.MouseMove += OnMouseMove;
+            Diagram.MouseUp += OnMouseUp;
+            Diagram.TouchStart += OnTouchStart;
+            Diagram.TouchMove += OnTouchMove;
+            Diagram.TouchEnd += OnTouchEnd;
         }
 
-        private void Diagram_MouseDown(Model model, MouseEventArgs e)
+        private void OnTouchStart(Model model, TouchEventArgs e)
+            => Start(model, e.ChangedTouches[0].ClientX, e.ChangedTouches[0].ClientY);
+
+        private void OnTouchMove(Model model, TouchEventArgs e)
+            => Move(e.ChangedTouches[0].ClientX, e.ChangedTouches[0].ClientY);
+
+        private void OnTouchEnd(Model model, TouchEventArgs e) => End();
+
+        private void OnMouseDown(Model model, MouseEventArgs e) => Start(model, e.ClientX, e.ClientY);
+
+        private void OnMouseMove(Model model, MouseEventArgs e) => Move(e.ClientX, e.ClientY);
+
+        private void OnMouseUp(Model model, MouseEventArgs e) => End();
+
+        private void Start(Model model, double clientX, double clientY)
         {
             if (!(model is MovableModel))
                 return;
@@ -30,17 +47,17 @@ private void Diagram_MouseDown(Model model, MouseEventArgs e)
                 .Select(m => (m as MovableModel)!.Position)
                 .ToArray();
 
-            _lastClientX = e.ClientX;
-            _lastClientY = e.ClientY;
+            _lastClientX = clientX;
+            _lastClientY = clientY;
         }
 
-        private void Diagram_MouseMove(Model model, MouseEventArgs e)
+        private void Move(double clientX, double clientY)
         {
             if (_initialPositions == null || _lastClientX == null || _lastClientY == null)
                 return;
 
-            var deltaX = (e.ClientX - _lastClientX.Value) / Diagram.Zoom;
-            var deltaY = (e.ClientY - _lastClientY.Value) / Diagram.Zoom;
+            var deltaX = (clientX - _lastClientX.Value) / Diagram.Zoom;
+            var deltaY = (clientY - _lastClientY.Value) / Diagram.Zoom;
             var i = 0;
 
             foreach (var sm in Diagram.GetSelectedModels())
@@ -56,6 +73,13 @@ private void Diagram_MouseMove(Model model, MouseEventArgs e)
             }
         }
 
+        private void End()
+        {
+            _initialPositions = null;
+            _lastClientX = null;
+            _lastClientY = null;
+        }
+
         private double ApplyGridSize(double n)
         {
             if (Diagram.Options.GridSize == null)
@@ -69,18 +93,14 @@ private double ApplyGridSize(double n)
             return gridSize * Math.Floor((n + gridSize / 2) / gridSize);
         }
 
-        private void Diagram_MouseUp(Model model, MouseEventArgs e)
-        {
-            _initialPositions = null;
-            _lastClientX = null;
-            _lastClientY = null;
-        }
-
         public override void Dispose()
         {
-            Diagram.MouseDown -= Diagram_MouseDown;
-            Diagram.MouseMove -= Diagram_MouseMove;
-            Diagram.MouseUp -= Diagram_MouseUp;
+            Diagram.MouseDown -= OnMouseDown;
+            Diagram.MouseMove -= OnMouseMove;
+            Diagram.MouseUp -= OnMouseUp;
+            Diagram.TouchStart -= OnTouchStart;
+            Diagram.TouchMove -= OnTouchMove;
+            Diagram.TouchEnd -= OnTouchEnd;
         }
     }
 }
diff --git a/src/Blazor.Diagrams.Core/Behaviors/PanBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/PanBehavior.cs
@@ -1,7 +1,6 @@
 using Blazor.Diagrams.Core.Geometry;
 using Blazor.Diagrams.Core.Models.Base;
 using Microsoft.AspNetCore.Components.Web;
-using System;
 
 namespace Blazor.Diagrams.Core.Behaviors
 {
@@ -13,32 +12,55 @@ public class PanBehavior : Behavior
 
         public PanBehavior(Diagram diagram) : base(diagram)
         {
-            Diagram.MouseDown += Diagram_MouseDown;
-            Diagram.MouseMove += Diagram_MouseMove;
-            Diagram.MouseUp += Diagram_MouseUp;
+            Diagram.MouseDown += OnMouseDown;
+            Diagram.MouseMove += OnMouseMove;
+            Diagram.MouseUp += OnMouseUp;
+            Diagram.TouchStart += OnTouchStart;
+            Diagram.TouchMove += OnTouchmove;
+            Diagram.TouchEnd += OnTouchEnd;
         }
 
-        private void Diagram_MouseDown(Model model, MouseEventArgs e)
+        private void OnTouchStart(Model model, TouchEventArgs e)
+            => Start(model, e.ChangedTouches[0].ClientX, e.ChangedTouches[0].ClientY, e.ShiftKey);
+
+        private void OnTouchmove(Model model, TouchEventArgs e)
+            => Move(e.ChangedTouches[0].ClientX, e.ChangedTouches[0].ClientY);
+
+        private void OnTouchEnd(Model model, TouchEventArgs e) => End();
+
+        private void OnMouseDown(Model model, MouseEventArgs e)
+        {
+            if (e.Button != (int)MouseEventButton.Left)
+                return;
+
+            Start(model, e.ClientX, e.ClientY, e.ShiftKey);
+        }
+
+        private void OnMouseMove(Model model, MouseEventArgs e) => Move(e.ClientX, e.ClientY);
+
+        private void OnMouseUp(Model model, MouseEventArgs e) => End();
+
+        private void Start(Model model, double clientX, double clientY, bool shiftKey)
         {
-            if (!Diagram.Options.AllowPanning || model != null || e.ShiftKey || e.Button != (int)MouseEventButton.Left)
+            if (!Diagram.Options.AllowPanning || model != null || shiftKey)
                 return;
 
             _initialPan = Diagram.Pan;
-            _lastClientX = e.ClientX;
-            _lastClientY = e.ClientY;
+            _lastClientX = clientX;
+            _lastClientY = clientY;
         }
 
-        private void Diagram_MouseMove(Model model, MouseEventArgs e)
+        private void Move(double clientX, double clientY)
         {
             if (!Diagram.Options.AllowPanning || _initialPan == null)
                 return;
 
-            var deltaX = e.ClientX - _lastClientX - (Diagram.Pan.X - _initialPan.X);
-            var deltaY = e.ClientY - _lastClientY - (Diagram.Pan.Y - _initialPan.Y);
+            var deltaX = clientX - _lastClientX - (Diagram.Pan.X - _initialPan.X);
+            var deltaY = clientY - _lastClientY - (Diagram.Pan.Y - _initialPan.Y);
             Diagram.UpdatePan(deltaX, deltaY);
         }
 
-        private void Diagram_MouseUp(Model model, MouseEventArgs e)
+        private void End()
         {
             if (!Diagram.Options.AllowPanning)
                 return;
@@ -48,9 +70,12 @@ private void Diagram_MouseUp(Model model, MouseEventArgs e)
 
         public override void Dispose()
         {
-            Diagram.MouseDown -= Diagram_MouseDown;
-            Diagram.MouseMove -= Diagram_MouseMove;
-            Diagram.MouseUp -= Diagram_MouseUp;
+            Diagram.MouseDown -= OnMouseDown;
+            Diagram.MouseMove -= OnMouseMove;
+            Diagram.MouseUp -= OnMouseUp;
+            Diagram.TouchStart -= OnTouchStart;
+            Diagram.TouchMove -= OnTouchmove;
+            Diagram.TouchEnd -= OnTouchEnd;
         }
     }
 }
diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor b/src/Blazor.Diagrams/Components/DiagramCanvas.razor
@@ -8,7 +8,10 @@
      @onkeydown="OnKeyDown"
      @onwheel="OnWheel"
      @onwheel:stopPropagation
-     @ontouchmove="OnTouchMove">
+     @ontouchstart="OnTouchStart"
+     @ontouchmove="OnTouchMove"
+     @ontouchend="OnTouchEnd"
+     @ontouchend:preventDefault>
 
     @* Links *@
     <svg class="diagram-svg-layer" style="@LayerStyle">

diff --git a/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs b/src/Blazor.Diagrams/Components/DiagramCanvas.razor.cs
@@ -73,8 +73,12 @@ protected override bool ShouldRender()
 
         private void OnWheel(WheelEventArgs e) => Diagram.OnWheel(e);
 
+        private void OnTouchStart(TouchEventArgs e) => Diagram.OnTouchStart(null, e);
+
         private void OnTouchMove(TouchEventArgs e) => Diagram.OnTouchMove(null, e);
 
+        private void OnTouchEnd(TouchEventArgs e) => Diagram.OnTouchEnd(null, e);
+
         private void OnDiagramChanged()
         {
             _shouldReRender = true;

diff --git a/src/Blazor.Diagrams/Components/LinkVertexWidget.razor b/src/Blazor.Diagrams/Components/LinkVertexWidget.razor
@@ -7,4 +7,9 @@
         @onmousedown="OnMouseDown"
         @onmousedown:stopPropagation
         @onmouseup="OnMouseUp"
-        @onmouseup:stopPropagation />
+        @onmouseup:stopPropagation
+        @ontouchstart="OnTouchStart"
+        @ontouchstart:stopPropagation
+        @ontouchend="OnTouchEnd"
+        @ontouchend:preventDefault
+        @ontouchend:stopPropagation />
diff --git a/src/Blazor.Diagrams/Components/LinkVertexWidget.razor.cs b/src/Blazor.Diagrams/Components/LinkVertexWidget.razor.cs
@@ -48,6 +48,10 @@ private void OnVertexChanged()
 
         private void OnMouseUp(MouseEventArgs e) => Diagram.OnMouseUp(Vertex, e);
 
+        private void OnTouchStart(TouchEventArgs e) => Diagram.OnTouchStart(Vertex, e);
+
+        private void OnTouchEnd(TouchEventArgs e) => Diagram.OnTouchEnd(Vertex, e);
+
         private void OnDoubleClick(MouseEventArgs e)
         {
             Vertex.Parent.Vertices.Remove(Vertex);

diff --git a/src/Blazor.Diagrams/Components/LinkWidget.razor b/src/Blazor.Diagrams/Components/LinkWidget.razor
@@ -32,7 +32,9 @@
               stroke-opacity="0"
               fill="none"
               @onmousedown="e => OnMouseDown(e, index)"
-              @onmousedown:stopPropagation="@Link.Segmentable" />
+              @onmousedown:stopPropagation="@Link.Segmentable"
+              @ontouchstart="e => OnTouchStart(e, index)"
+              @ontouchstart:stopPropagation="@Link.Segmentable"/>
     }
 }
 

diff --git a/src/Blazor.Diagrams/Components/LinkWidget.razor.cs b/src/Blazor.Diagrams/Components/LinkWidget.razor.cs
@@ -20,10 +20,25 @@ private void OnMouseDown(MouseEventArgs e, int index)
             if (!Link.Segmentable)
                 return;
 
-            var rPt = Diagram.GetRelativeMousePoint(e.ClientX, e.ClientY);
+            var vertex = CreateVertex(e.ClientX, e.ClientY, index);
+            Diagram.OnMouseDown(vertex, e);
+        }
+
+        private void OnTouchStart(TouchEventArgs e, int index)
+        {
+            if (!Link.Segmentable)
+                return;
+
+            var vertex = CreateVertex(e.ChangedTouches[0].ClientX, e.ChangedTouches[0].ClientY, index);
+            Diagram.OnTouchStart(vertex, e);
+        }
+
+        private LinkVertexModel CreateVertex(double clientX, double clientY, int index)
+        {
+            var rPt = Diagram.GetRelativeMousePoint(clientX, clientY);
             var vertex = new LinkVertexModel(Link, rPt);
             Link.Vertices.Insert(index, vertex);
-            Diagram.OnMouseDown(vertex, e);
+            return vertex;
         }
 
         private (Point source, Point target) FindConnectionPoints(Point[] route)