avalonia: Added dimensions to the image editor

InABox.Avalonia/Components/ImageEditor/ImageEditor.axaml

@@ -17,6 +17,17 @@
 				<RowDefinition Height="Auto"/>
 			</Grid.RowDefinitions>
 			<Canvas Name="OuterCanvas" Background="White">
+				<Canvas.Styles>
+					<Style Selector="Thumb">
+						<Setter Property="Template">
+							<ControlTemplate>
+								<Border Background="LightGray"
+										BorderBrush="Black"
+										BorderThickness="1"/>
+							</ControlTemplate>
+						</Setter>
+					</Style>
+				</Canvas.Styles>
 				<Border Name="ImageBorder" Background="White"
 						BoxShadow="0 0 10 Gray">
 					<Grid>

InABox.Avalonia/Components/ImageEditor/ImageEditor.axaml.cs

@@ -17,6 +17,7 @@ using InABox.Core;
 using SkiaSharp;
 using System.Collections.ObjectModel;
 using System.Threading.Tasks;
+using Avalonia.LogicalTree;
 
 namespace InABox.Avalonia.Components;
 
@@ -181,7 +182,16 @@ public partial class ImageEditor : UserControl
 
     private ObservableCollection<IImageEditorObject> Objects = new();
 
-    private IImageEditorObject? CurrentObject;
+    private IImageEditorObject? _currentObject;
+    private IImageEditorObject? CurrentObject
+    {
+        get => _currentObject;
+        set
+        {
+            _currentObject?.SetActive(false);
+            _currentObject = value;
+        }
+    }
 
     private Stack<IImageEditorObject> RedoStack = new();
 
@@ -297,6 +307,7 @@ public partial class ImageEditor : UserControl
         Mode = mode;
         ShapeButton.Content = CreateModeButtonContent(mode);
         SecondaryColour.IsVisible = HasSecondaryColour();
+        LineThicknessButton.IsVisible = HasLineThickness();
     }
 
     private bool HasSecondaryColour()
@@ -304,6 +315,14 @@ public partial class ImageEditor : UserControl
         return Mode == ImageEditingMode.Rectangle || Mode == ImageEditingMode.Ellipse;
     }
 
+    private bool HasLineThickness()
+    {
+        return Mode == ImageEditingMode.Rectangle
+            || Mode == ImageEditingMode.Ellipse
+            || Mode == ImageEditingMode.Polyline
+            || Mode == ImageEditingMode.Dimension;
+    }
+
     #endregion
 
     #region Mode Buttons
@@ -314,6 +333,7 @@ public partial class ImageEditor : UserControl
         AddModeButton(ImageEditingMode.Rectangle);
         AddModeButton(ImageEditingMode.Ellipse);
         AddModeButton(ImageEditingMode.Text);
+        AddModeButton(ImageEditingMode.Dimension);
     }
 
     private void AddModeButton(ImageEditingMode mode)
@@ -327,27 +347,29 @@ public partial class ImageEditor : UserControl
         {
             case ImageEditingMode.Polyline:
                 var canvas = new Canvas();
-                var points = new Point[] { new(0, 0), new(20, 8), new(5, 16), new(25, 25) };
-                var line1 = new Polyline { Points = points, Width = 25, Height = 25 };
-                var line2 = new Polyline { Points = points, Width = 25, Height = 25 };
-                line1.StrokeThickness = 4;
-                line1.StrokeLineCap = PenLineCap.Round;
-                line1.StrokeJoin = PenLineJoin.Round;
-                line1.Stroke = new SolidColorBrush(Colors.Black);
-                canvas.Children.Add(line1);
-
-                if (bindColour)
                 {
-                    line1.StrokeThickness = 5;
-                    line2.StrokeThickness = 4;
-                    line2.StrokeLineCap = PenLineCap.Round;
-                    line2.StrokeJoin = PenLineJoin.Round;
-                    line2.Bind(Polyline.StrokeProperty, new Binding(nameof(PrimaryBrush))
+                    var points = new Point[] { new(0, 0), new(20, 8), new(5, 16), new(25, 25) };
+                    var line1 = new Polyline { Points = points, Width = 25, Height = 25 };
+                    var line2 = new Polyline { Points = points, Width = 25, Height = 25 };
+                    line1.StrokeThickness = 4;
+                    line1.StrokeLineCap = PenLineCap.Round;
+                    line1.StrokeJoin = PenLineJoin.Round;
+                    line1.Stroke = new SolidColorBrush(Colors.Black);
+                    canvas.Children.Add(line1);
+
+                    if (bindColour)
                     {
-                        Source = this,
-                        Converter = ImageEditorRemoveOpacityConverter.Instance
-                    });
-                    canvas.Children.Add(line2);
+                        line1.StrokeThickness = 5;
+                        line2.StrokeThickness = 4;
+                        line2.StrokeLineCap = PenLineCap.Round;
+                        line2.StrokeJoin = PenLineJoin.Round;
+                        line2.Bind(Polyline.StrokeProperty, new Binding(nameof(PrimaryBrush))
+                        {
+                            Source = this,
+                            Converter = ImageEditorRemoveOpacityConverter.Instance
+                        });
+                        canvas.Children.Add(line2);
+                    }
                 }
                 return canvas;
             case ImageEditingMode.Rectangle:
@@ -417,7 +439,122 @@ public partial class ImageEditor : UserControl
                 textBox.TextAlignment = TextAlignment.Center;
                 textBox.HorizontalAlignment = HorizontalAlignment.Center;
                 textBox.VerticalAlignment = VerticalAlignment.Center;
+                if (bindColour)
+                {
+                    textBox.Bind(TextBlock.ForegroundProperty, new Binding(nameof(PrimaryBrush))
+                    {
+                        Source = this,
+                        Converter = ImageEditorRemoveOpacityConverter.Instance
+                    });
+                }
                 return textBox;
+            case ImageEditingMode.Dimension:
+                canvas = new Canvas();
+                canvas.Width = 25;
+                canvas.Height = 25;
+
+                {
+                    var dimLines = new List<Line>();
+
+                    dimLines.Add(new Line
+                    {
+                        StartPoint = new(2, 10),
+                        EndPoint = new(23, 10),
+                        StrokeLineCap = PenLineCap.Round
+                    });
+                    dimLines.Add(new Line
+                    {
+                        StartPoint = new(2, 10),
+                        EndPoint = new(5, 7),
+                        StrokeLineCap = PenLineCap.Square
+                    });
+                    dimLines.Add(new Line
+                    {
+                        StartPoint = new(2, 10),
+                        EndPoint = new(5, 13),
+                        StrokeLineCap = PenLineCap.Square
+                    });
+                    dimLines.Add(new Line
+                    {
+                        StartPoint = new(23, 10),
+                        EndPoint = new(20, 7),
+                        StrokeLineCap = PenLineCap.Square
+                    });
+                    dimLines.Add(new Line
+                    {
+                        StartPoint = new(23, 10),
+                        EndPoint = new(20, 13),
+                        StrokeLineCap = PenLineCap.Square
+                    });
+
+                    var dotLines = new List<Line>();
+                    dotLines.Add(new Line
+                    {
+                        StartPoint = new(2, 10),
+                        EndPoint = new(2, 24),
+                        StrokeDashArray = [2, 2]
+                    });
+                    dotLines.Add(new Line
+                    {
+                        StartPoint = new(23, 10),
+                        EndPoint = new(23, 24),
+                        StrokeDashArray = [2, 2]
+                    });
+
+                    var number = new TextBlock
+                    {
+                        Text = "10",
+                        FontSize = 9,
+                        TextAlignment = TextAlignment.Center,
+                        Width = 25
+                    };
+                    Canvas.SetLeft(number, 0);
+                    Canvas.SetTop(number, -1);
+
+                    foreach (var line in dimLines)
+                    {
+                        line.StrokeThickness = 2;
+                        line.Stroke = new SolidColorBrush(Colors.Black);
+                    }
+
+                    foreach (var line in dotLines)
+                    {
+                        line.StrokeThickness = 1;
+                        line.Stroke = new SolidColorBrush(Colors.Black);
+                    }
+
+                    if (bindColour)
+                    {
+                        foreach (var line in dimLines)
+                        {
+                            line.Bind(Polyline.StrokeProperty, new Binding(nameof(PrimaryBrush))
+                            {
+                                Source = this,
+                                Converter = ImageEditorRemoveOpacityConverter.Instance
+                            });
+                        }
+                        foreach (var line in dotLines)
+                        {
+                            line.Bind(Polyline.StrokeProperty, new Binding(nameof(PrimaryBrush))
+                            {
+                                Source = this,
+                                Converter = ImageEditorRemoveOpacityConverter.Instance
+                            });
+                        }
+                    }
+
+                    foreach (var line in dimLines)
+                    {
+                        canvas.Children.Add(line);
+                    }
+                    foreach (var line in dotLines)
+                    {
+                        canvas.Children.Add(line);
+                    }
+                    canvas.Children.Add(number);
+                }
+
+                return canvas;
             default:
                 return null;
         }
@@ -445,19 +582,53 @@ public partial class ImageEditor : UserControl
             context.DrawImage(Source, new(0, 0, ImageWidth, ImageHeight));
         }
 
+        CurrentObject = null;
+
         foreach (var obj in Objects)
         {
             var control = obj.GetControl();
-            var left = Canvas.GetLeft(control);
-            var top = Canvas.GetTop(control);
-            if (double.IsNaN(left)) left = 0;
-            if (double.IsNaN(top)) top = 0;
-            using (context.PushTransform(Matrix.CreateTranslation(new(left, top))))
+            Render(context, control);
+        }
+        return renderBitmap;
+    }
+    private void Render(DrawingContext context, Control control)
+    {
+        var left = Canvas.GetLeft(control);
+        var top = Canvas.GetTop(control);
+        if (double.IsNaN(left)) left = 0;
+        if (double.IsNaN(top)) top = 0;
+
+        var matrix = Matrix.CreateTranslation(new(left, top));
+
+        if(control.RenderTransform is not null)
+        {
+            Vector offset;
+            if(control.RenderTransformOrigin.Unit == RelativeUnit.Relative)
             {
-                control.Render(context);
+                offset = new Vector(
+                    control.Bounds.Width * control.RenderTransformOrigin.Point.X,
+                    control.Bounds.Height * control.RenderTransformOrigin.Point.Y);
             }
+            else
+            {
+                offset = new Vector(control.RenderTransformOrigin.Point.X, control.RenderTransformOrigin.Point.Y);
+            }
+
+            matrix = (Matrix.CreateTranslation(-offset) * control.RenderTransform.Value * Matrix.CreateTranslation(offset)) * matrix;
         }
-        return renderBitmap;
+
+        using (context.PushTransform(matrix))
+        {
+            control.Render(context);
+            if(control is Panel panel)
+            {
+                foreach(var child in panel.Children)
+                {
+                    Render(context, child);
+                }
+            }
+        }
+
     }
 
     public byte[] SaveImage()
@@ -495,6 +666,7 @@ public partial class ImageEditor : UserControl
 
     private void Canvas_PointerPressed(object? sender, PointerPressedEventArgs e)
     {
+        CurrentObject = null;
         var position = ConvertToImageCoordinates(e.GetPosition(Canvas));
         switch (Mode)
         {
@@ -538,6 +710,18 @@ public partial class ImageEditor : UserControl
                 };
                 AddObject(CurrentObject);
                 break;
+            case ImageEditingMode.Dimension:
+                CurrentObject = new DimensionObject
+                {
+                    Point1 = position,
+                    Point2 = position,
+                    PrimaryBrush = PrimaryBrush,
+                    Text = "",
+                    Offset = 30,
+                    LineThickness = LineThickness
+                };
+                AddObject(CurrentObject);
+                break;
         }
     }
 
@@ -566,6 +750,14 @@ public partial class ImageEditor : UserControl
                 textSelection.Update();
                 Changed?.Invoke(this, new EventArgs());
                 break;
+            case DimensionObject dimension:
+                if (!dimension.Complete)
+                {
+                    dimension.Point2 = position;
+                    dimension.Update();
+                    Changed?.Invoke(this, new EventArgs());
+                }
+                break;
         }
     }
 
@@ -606,8 +798,24 @@ public partial class ImageEditor : UserControl
                     }
                 });
                 break;
-        }
+            case DimensionObject dimension:
+                dimension.Point2 = position;
+                if(dimension.Point1 == dimension.Point2)
+                {
+                    Objects.Remove(dimension);
+                    CurrentObject = null;
+                    return;
+                }
+                dimension.Complete = true;
 
+                Navigation.Popup<TextEditViewModel, string?>(x => { }).ContinueWith(task =>
+                {
+                    dimension.Text = task.Result ?? "";
+                    dimension.Update();
+                }, TaskScheduler.FromCurrentSynchronizationContext());
+                Changed?.Invoke(this, new EventArgs());
+                break;
+        }
     }
 
     private async Task CreateObjectFromSelection(SelectionObject selection)

InABox.Avalonia/Components/ImageEditor/Objects/DimensionObject.cs

@@ -0,0 +1,217 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
+using Avalonia.Controls.Shapes;
+using Avalonia.Input;
+using Avalonia.Media;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Xml;
+
+namespace InABox.Avalonia.Components.ImageEditing;
+
+internal class DimensionObject : IImageEditorObject
+{
+    public IBrush? PrimaryBrush { get; set; }
+
+    public Point Point1 { get; set; }
+
+    public Point Point2 { get; set; }
+
+    public double LineThickness { get; set; }
+
+    public string Text { get; set; } = "";
+
+    public double Offset { get; set; } = 10;
+
+    public bool Complete { get; set; } = false;
+
+    private Canvas Control = new();
+
+    private Thumb? Thumb;
+
+    private bool _active = true;
+
+    public Control GetControl() => Control;
+
+    private Vector GetMainVec()
+    {
+        var p1 = new Vector(Point1.X, Point1.Y);
+        var p2 = new Vector(Point2.X, Point2.Y);
+
+        var mainVec = p2 - p1;
+        var length = mainVec.Length;
+        if(length == 0)
+        {
+            mainVec = new Vector(0, 0);
+        }
+        else
+        {
+            mainVec /= length;
+        }
+
+        return mainVec;
+    }
+
+    private Vector GetPerpVec()
+    {
+        var mainVec = GetMainVec();
+        return new Vector(mainVec.Y, -mainVec.X);
+    }
+
+    public void Update()
+    {
+        Control.Children.RemoveAll(Control.Children.Where(x => !(x is Thumb)));
+
+        Point Point(Vector v) => new(v.X, v.Y);
+
+        var p1 = new Vector(Point1.X, Point1.Y);
+        var p2 = new Vector(Point2.X, Point2.Y);
+
+        var mainVec = p2 - p1;
+        var length = mainVec.Length;
+        if(length == 0)
+        {
+            mainVec = new Vector(0, 0);
+        }
+        else
+        {
+            mainVec /= length;
+        }
+        var perpVec = new Vector(mainVec.Y, -mainVec.X);
+
+        var arrowLength = LineThickness * 2;
+        var offset = perpVec * Offset;
+
+        var mainLines = new List<Line>()
+        {
+            new()
+            {
+                StartPoint = Point(p1 + offset),
+                EndPoint = Point(p2 + offset),
+                StrokeLineCap = PenLineCap.Round
+            },
+            new()
+            {
+                StartPoint = Point(p1 + offset),
+                EndPoint = Point(p1 + mainVec * arrowLength + perpVec * arrowLength + offset),
+                StrokeLineCap = PenLineCap.Square
+            },
+            new()
+            {
+                StartPoint = Point(p1 + offset),
+                EndPoint = Point(p1 + mainVec * arrowLength - perpVec * arrowLength + offset),
+                StrokeLineCap = PenLineCap.Square
+            },
+            new()
+            {
+                StartPoint = Point(p2 + offset),
+                EndPoint = Point(p2 - mainVec * arrowLength + perpVec * arrowLength + offset),
+                StrokeLineCap = PenLineCap.Square
+            },
+            new()
+            {
+                StartPoint = Point(p2 + offset),
+                EndPoint = Point(p2 - mainVec * arrowLength - perpVec * arrowLength + offset),
+                StrokeLineCap = PenLineCap.Square
+            }
+        };
+
+        var dotLines = new List<Line>()
+        {
+            new()
+            {
+                StartPoint = Point(p1),
+                EndPoint = Point(p1 + offset)
+            },
+            new()
+            {
+                StartPoint = Point(p2),
+                EndPoint = Point(p2 + offset)
+            },
+        };
+
+        foreach (var line in dotLines)
+        {
+            line.StrokeThickness = LineThickness;
+            line.Stroke = PrimaryBrush;
+            line.StrokeDashArray = [2, 2];
+            Control.Children.Add(line);
+        }
+
+        foreach (var line in mainLines)
+        {
+            line.StrokeThickness = LineThickness;
+            line.Stroke = PrimaryBrush;
+            Control.Children.Add(line);
+        }
+
+        var textHeight = 20;
+
+        var text = new TextBlock
+        {
+            Text = Text,
+            FontSize = textHeight,
+            TextAlignment = TextAlignment.Center,
+            Width = length,
+            Foreground = PrimaryBrush
+        };
+        text.RenderTransform = new RotateTransform(Math.Atan2(mainVec.Y, mainVec.X) * 180 / Math.PI);
+        var textPos = p1 + offset + mainVec * length / 2 + perpVec * (textHeight / 2 + 5);
+        Canvas.SetLeft(text, textPos.X - length / 2);
+        Canvas.SetTop(text, textPos.Y - textHeight / 2);
+
+        Control.Children.Add(text);
+
+        if(Thumb is null && _active && length > 0)
+        {
+            Thumb = new();
+            Thumb.Width = 10;
+            Thumb.Height = 10;
+            Thumb.Cursor = new(StandardCursorType.SizeAll);
+            Thumb.DragDelta += Thumb_DragDelta;
+            Thumb.ZIndex = 1;
+
+            Control.Children.Add(Thumb);
+        }
+
+        if(Thumb is not null)
+        {
+            Thumb.RenderTransform = new RotateTransform(Math.Atan2(mainVec.Y, mainVec.X) * 180 / Math.PI);
+
+            var thumbPos = p1 + offset + mainVec * length / 2;
+            Canvas.SetLeft(Thumb, thumbPos.X - 5);
+            Canvas.SetTop(Thumb, thumbPos.Y - 5);
+        }
+    }
+
+    private Vector Rotate(Vector v, double angle)
+    {
+        angle = Math.Atan2(v.Y, v.X) + angle;
+        var length = v.Length;
+        return new Vector(
+            length * Math.Cos(angle),
+            length * Math.Sin(angle));
+    }
+
+    private void Thumb_DragDelta(object? sender, VectorEventArgs e)
+    {
+        var main = GetMainVec();
+        var v = Vector.Dot(Rotate(e.Vector, Math.Atan2(main.Y, main.X)), GetPerpVec());
+        Offset += v;
+        Update();
+    }
+
+    public void SetActive(bool active)
+    {
+        _active = active;
+        if(Thumb is not null)
+        {
+            Control.Children.Remove(Thumb);
+            Thumb = null;
+        }
+    }
+}

InABox.Avalonia/Components/ImageEditor/Objects/EllipseObject.cs

@@ -41,4 +41,8 @@ internal class EllipseObject : IImageEditorObject
         Control.Width = Math.Abs(Point2.X - Point1.X);
         Control.Height = Math.Abs(Point2.Y - Point1.Y);
     }
+
+    public void SetActive(bool active)
+    {
+    }
 }

InABox.Avalonia/Components/ImageEditor/Objects/IImageEditorObject.cs

@@ -13,6 +13,8 @@ internal interface IImageEditorObject
 {
     IBrush? PrimaryBrush { get; set; }
 
+    void SetActive(bool active);
+
     Control GetControl();
 
     void Update();

InABox.Avalonia/Components/ImageEditor/Objects/Polyline.cs

@@ -28,4 +28,8 @@ internal class PolylineObject : IImageEditorObject
         Control.StrokeLineCap = PenLineCap.Round;
         Control.StrokeJoin = PenLineJoin.Round;
     }
+
+    public void SetActive(bool active)
+    {
+    }
 }

InABox.Avalonia/Components/ImageEditor/Objects/RectangleObject.cs

@@ -41,4 +41,8 @@ internal class RectangleObject : IImageEditorObject
         Control.Width = Math.Abs(Point2.X - Point1.X);
         Control.Height = Math.Abs(Point2.Y - Point1.Y);
     }
+
+    public void SetActive(bool active)
+    {
+    }
 }

InABox.Avalonia/Components/ImageEditor/Objects/SelectionObject.cs

@@ -88,4 +88,8 @@ internal class SelectionObject : IImageEditorObject
         brush.Visual = canvas;
         return brush;
     }
+
+    public void SetActive(bool active)
+    {
+    }
 }

InABox.Avalonia/Components/ImageEditor/Objects/TextObject.cs

@@ -40,10 +40,23 @@ internal class TextObject : IImageEditorObject
         var width = formatted.WidthIncludingTrailingWhitespace;
         var height = formatted.Height;
 
+        if(Size.Width == 0)
+        {
+            Size = Size.WithWidth(width);
+        }
+        if(Size.Height == 0)
+        {
+            Size = Size.WithHeight(height);
+        }
+
         var scaleFactor = Math.Min(Size.Width / width, Size.Height / height);
 
         Control.FontSize = 12 * scaleFactor;
         Control.Text = Text;
         Control.Foreground = PrimaryBrush;
     }
+
+    public void SetActive(bool active)
+    {
+    }
 }