Mouse Scroll overlay (#515)

Display Up/Down arrow when scrolling.

**New options added in Settings/Overlays/Mouse:**
- Display Scroll
- Scroll Circle Color
- Scroll Arrow Color

fixes #480 

#### Known Issues
- Horizontal scroll is displayed incorrectly as vertical scroll. The MouseKeyHook library doesn't tell whether the scroll was vertical or horizontal.
- Some touchpad scrolls may not be detected. This is an issue with how the touchpad drivers work. I can't really do much about that.

src/Captura.MouseKeyHook/Models/MouseClickSettings.cs

@@ -15,5 +15,23 @@ public Color MiddleClickColor
             get => Get(Color.FromArgb(76, 175, 80));
             set => Set(value);
         }
+
+        public bool DisplayScroll
+        {
+            get => Get(true);
+            set => Set(value);
+        }
+
+        public Color ScrollCircleColor
+        {
+            get => Get(Color.FromArgb(239, 83, 80));
+            set => Set(value);
+        }
+
+        public Color ScrollArrowColor
+        {
+            get => Get(Color.FromArgb(33, 33, 33));
+            set => Set(value);
+        }
     }
 }

src/Captura.MouseKeyHook/MouseKeyOverlay.cs

@@ -13,8 +13,9 @@ public class MouseKeyOverlay : IOverlay
         #region Fields
         readonly IMouseKeyHook _hook;
         readonly KeystrokesSettings _keystrokesSettings;
-        readonly IOverlay _mouseClickOverlay;
-        readonly IOverlay _keyOverlay;
+        readonly IOverlay _mouseClickOverlay,
+            _keyOverlay,
+            _scrollOverlay;
 
         readonly KeymapViewModel _keymap;
         readonly TextWriter _textWriter;
@@ -35,6 +36,7 @@ public MouseKeyOverlay(IMouseKeyHook Hook,
 
             _hook = Hook;
             _mouseClickOverlay = new MouseClickOverlay(_hook, MouseClickSettings);
+            _scrollOverlay = new ScrollOverlay(_hook, MouseClickSettings);
 
             if (KeystrokesSettings.SeparateTextFile)
             {
@@ -76,6 +78,7 @@ TextWriter InitKeysToTextFile(string FileName, Func<TimeSpan> Elapsed)
         public void Draw(IEditableFrame Editor, Func<Point, Point> Transform = null)
         {
             _mouseClickOverlay?.Draw(Editor, Transform);
+            _scrollOverlay?.Draw(Editor, Transform);
 
             _keyOverlay?.Draw(Editor, Transform);
         }
@@ -88,6 +91,7 @@ public void Dispose()
             _hook?.Dispose();
 
             _mouseClickOverlay?.Dispose();
+            _scrollOverlay?.Dispose();
             _keyOverlay?.Dispose();
 
             _textWriter?.Dispose();

src/Captura.MouseKeyHook/ScrollOverlay.cs

@@ -0,0 +1,54 @@
+using System;
+using System.Drawing;
+using System.Windows.Forms;
+using Captura.Video;
+
+namespace Captura.MouseKeyHook
+{
+    // TODO: Shows horizontal scroll incorrectly as vertical.
+    // The MouseKeyHook library doesn't provide an option
+    // to distinguish between horizontal and vertical scrolls.
+    public class ScrollOverlay : IOverlay
+    {
+        readonly MouseClickSettings _settings;
+        MouseEventArgs _lastArgs;
+
+        public ScrollOverlay(IMouseKeyHook Hook,
+            MouseClickSettings Settings)
+        {
+            _settings = Settings;
+
+            Hook.MouseWheel += (S, E) => _lastArgs = E;
+        }
+
+        public void Dispose() { }
+
+        public void Draw(IEditableFrame Editor, Func<Point, Point> PointTransform = null)
+        {
+            if (!_settings.DisplayScroll)
+                return;
+
+            if (_lastArgs is { } args)
+            {
+                var p = args.Location;
+                var r = _settings.Radius;
+                var d = 2 * r;
+
+                Editor.FillEllipse(_settings.ScrollCircleColor, new RectangleF(p.X - r, p.Y - r, d, d));
+
+                var above = new Point(p.X, p.Y + r / 2);
+                var below = new Point(p.X, p.Y - r / 2);
+
+                // Scroll down
+                if (args.Delta < 0)
+                {
+                    (above, below) = (below, above);
+                }
+
+                Editor.DrawArrow(above, below, _settings.ScrollArrowColor, r / 4f);
+
+                _lastArgs = null;
+            }
+        }
+    }
+}

src/Captura.MouseKeyHook/Steps/ScrollStep.cs

@@ -37,7 +37,7 @@ public override void Draw(IEditableFrame Editor, Func<Point, Point> PointTransfo
                 (above, below) = (below, above);
             }
 
-            Editor.DrawArrow(above, below, _settings.BorderColor, r / 2);
+            Editor.DrawArrow(above, below, _settings.BorderColor, r / 4f);
 
             base.Draw(Editor, PointTransform);
         }

src/Captura.Windows/Imaging/Direct2D/Direct2DEditor.cs

@@ -123,15 +123,32 @@ public void DrawLine(Point Start, Point End, Color Color, float Width)
 
         public void DrawArrow(Point Start, Point End, Color Color, float Width)
         {
-            // HACK: Not really an arrow
             var props = new StrokeStyleProperties
             {
-                EndCap = CapStyle.Triangle
+                EndCap = CapStyle.Round,
+                LineJoin = LineJoin.Round
             };
 
             var style = new StrokeStyle(_editorSession.RenderTarget.Factory, props);
 
             _editorSession.RenderTarget.DrawLine(Convert(Start), Convert(End), Convert(Color), Width, style);
+
+            var direction = new Vector2(End.X - Start.X, End.Y - Start.Y);
+            var theta = Math.Atan2(direction.Y, direction.X);
+
+            const double rotateBy = 3 * Math.PI / 4;
+            var sideLen = Width * 2;
+
+            // Start drawing from ending point
+            Start = End;
+
+            var ltheta = theta - rotateBy;
+            End = new Point((int)(Start.X + sideLen * Math.Cos(ltheta)), (int)(Start.Y + sideLen * Math.Sin(ltheta)));
+            _editorSession.RenderTarget.DrawLine(Convert(Start), Convert(End), Convert(Color), Width, style);
+
+            var rtheta = theta + rotateBy;
+            End = new Point((int)(Start.X + sideLen * Math.Cos(rtheta)), (int)(Start.Y + sideLen * Math.Sin(rtheta)));
+            _editorSession.RenderTarget.DrawLine(Convert(Start), Convert(End), Convert(Color), Width, style);
         }
 
         public void FillRectangle(Color Color, RectangleF Rectangle)

src/Captura/Pages/MouseOverlayPage.xaml

@@ -82,7 +82,7 @@
 
                 <StackPanel Margin="5"
                             DataContext="{Binding Settings.Clicks}">
-                    <CheckBox Content="Display"
+                    <CheckBox Content="Display Clicks"
                               IsChecked="{Binding Display, Mode=TwoWay}"
                               Margin="0,5"/>
 
@@ -164,6 +164,51 @@
                                           Margin="0,5"/>
                     </Grid>
                 </StackPanel>
+
+                <Label Content="Mouse Scroll"
+                       FontWeight="DemiBold"
+                       Margin="5,10,5,0"/>
+                <Label Content="Horizontal scrolls aren't displayed correctly"
+                       FontWeight="Light"
+                       FontSize="9"
+                       Margin="5,0"/>
+
+                <StackPanel Margin="5"
+                            DataContext="{Binding Settings.Clicks}"
+                            IsEnabled="{Binding Display}">
+                    <CheckBox Content="Display Scroll"
+                              IsChecked="{Binding DisplayScroll, Mode=TwoWay}"
+                              Margin="0,5"/>
+
+                    <Grid>
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition Width="Auto"/>
+                            <ColumnDefinition Width="*"/>
+                        </Grid.ColumnDefinitions>
+                        <Grid.RowDefinitions>
+                            <RowDefinition/>
+                            <RowDefinition/>
+                        </Grid.RowDefinitions>
+
+                        <Label Content="Circle Color"
+                               ContentStringFormat="{}{0}: "
+                               Margin="0,5,5,5"/>
+                        <xctk:ColorPicker SelectedColor="{Binding ScrollCircleColor, Converter={StaticResource WpfColorConverter}, Mode=TwoWay}"
+                                          Grid.Row="0"
+                                          Grid.Column="1"
+                                          Margin="0,5"/>
+
+                        <Label Content="Arrow Color"
+                               ContentStringFormat="{}{0}: "
+                               Margin="0,5,5,5"
+                               Grid.Row="1"
+                               Grid.Column="0"/>
+                        <xctk:ColorPicker SelectedColor="{Binding ScrollArrowColor, Converter={StaticResource WpfColorConverter}, Mode=TwoWay}"
+                                          Grid.Row="1"
+                                          Grid.Column="1"
+                                          Margin="0,5"/>
+                    </Grid>
+                </StackPanel>
             </StackPanel>
         </ScrollViewer>
     </Grid>