feat: Touch support on selection

joezearing · Mar 20, 2021 · b021dc5 · b021dc5
1 parent 472f618
commit b021dc5
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 15 deletions.
diff --git a/samples/SharedDemo/Demos/Events.razor.cs b/samples/SharedDemo/Demos/Events.razor.cs
@@ -42,21 +42,32 @@ private void RegisterEvents()
 
             diagram.Links.Added += (l) => events.Add($"Links.Added, LinkId={l.Id}");
 
-            // Todo: replace with TargetPortChanged
-            //diagram.LinkAttached += (l) =>
-            //{
-            //    events.Add($"LinkAttached, LinkId={l.Id}");
-            //    StateHasChanged();
-            //};
-
             diagram.Links.Removed += (l) => events.Add($"Links.Removed, LinkId={l.Id}");
 
+            diagram.MouseDown += (m, e) =>
+            {
+                events.Add($"MouseDown, Type={m?.GetType().Name}, ModelId={m?.Id}");
+                StateHasChanged();
+            };
+
             diagram.MouseUp += (m, e) =>
             {
                 events.Add($"MouseUp, Type={m?.GetType().Name}, ModelId={m?.Id}");
                 StateHasChanged();
             };
 
+            diagram.TouchStart += (m, e) =>
+            {
+                events.Add($"TouchStart, Type={m?.GetType().Name}, ModelId={m?.Id}");
+                StateHasChanged();
+            };
+
+            diagram.TouchEnd += (m, e) =>
+            {
+                events.Add($"TouchEnd, Type={m?.GetType().Name}, ModelId={m?.Id}");
+                StateHasChanged();
+            };
+
             diagram.MouseClick += (m, e) =>
             {
                 events.Add($"MouseClick, Type={m?.GetType().Name}, ModelId={m?.Id}");

diff --git a/src/Blazor.Diagrams.Core/Behaviors/SelectionBehavior.cs b/src/Blazor.Diagrams.Core/Behaviors/SelectionBehavior.cs
@@ -7,31 +7,37 @@ public class SelectionBehavior : Behavior
     {
         public SelectionBehavior(Diagram diagram) : base(diagram)
         {
-            Diagram.MouseDown += Diagram_MouseDown;
+            Diagram.MouseDown += OnMouseDown;
+            Diagram.TouchStart += OnTouchStart;
         }
 
-        private void Diagram_MouseDown(Model model, MouseEventArgs e)
+        private void OnTouchStart(Model model, TouchEventArgs e) => Process(model, e.CtrlKey);
+
+        private void OnMouseDown(Model model, MouseEventArgs e) => Process(model, e.CtrlKey);
+
+        private void Process(Model model, bool ctrlKey)
         {
             if (model == null)
             {
                 Diagram.UnselectAll();
             }
             else if (model is SelectableModel sm)
             {
-                if (e.CtrlKey && sm.Selected)
+                if (ctrlKey && sm.Selected)
                 {
                     Diagram.UnselectModel(sm);
                 }
                 else if (!sm.Selected)
                 {
-                    Diagram.SelectModel(sm, !e.CtrlKey || !Diagram.Options.AllowMultiSelection);
+                    Diagram.SelectModel(sm, !ctrlKey || !Diagram.Options.AllowMultiSelection);
                 }
             }
         }
 
         public override void Dispose()
         {
-            Diagram.MouseDown -= Diagram_MouseDown;
+            Diagram.MouseDown -= OnMouseDown;
+            Diagram.TouchStart -= OnTouchStart;
         }
     }
 }
diff --git a/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs b/src/Blazor.Diagrams/Components/Renderers/NodeRenderer.cs
@@ -107,9 +107,14 @@ protected override void BuildRenderTree(RenderTreeBuilder builder)
             builder.AddEventStopPropagationAttribute(5, "onmousedown", true);
             builder.AddAttribute(6, "onmouseup", EventCallback.Factory.Create<MouseEventArgs>(this, OnMouseUp));
             builder.AddEventStopPropagationAttribute(7, "onmouseup", true);
-            builder.AddElementReferenceCapture(8, value => _element = value);
-            builder.OpenComponent(9, componentType);
-            builder.AddAttribute(10, "Node", Node);
+            builder.AddAttribute(8, "ontouchstart", EventCallback.Factory.Create<TouchEventArgs>(this, OnTouchStart));
+            builder.AddEventStopPropagationAttribute(9, "ontouchstart", true);
+            builder.AddAttribute(10, "ontouchend", EventCallback.Factory.Create<TouchEventArgs>(this, OnTouchEnd));
+            builder.AddEventStopPropagationAttribute(11, "ontouchend", true);
+            builder.AddEventPreventDefaultAttribute(12, "ontouchend", true);
+            builder.AddElementReferenceCapture(13, value => _element = value);
+            builder.OpenComponent(14, componentType);
+            builder.AddAttribute(15, "Node", Node);
             builder.CloseComponent();
             builder.CloseElement();
         }
@@ -165,5 +170,9 @@ private void ReRender()
         private void OnMouseDown(MouseEventArgs e) => Diagram.OnMouseDown(Node, e);
 
         private void OnMouseUp(MouseEventArgs e) => Diagram.OnMouseUp(Node, e);
+
+        private void OnTouchStart(TouchEventArgs e) => Diagram.OnTouchStart(Node, e);
+
+        private void OnTouchEnd(TouchEventArgs e) => Diagram.OnTouchEnd(Node, e);
     }
 }