Added edit existing shape (WIP)

src/Artemis.UI/Artemis.UI.csproj

@@ -182,6 +182,7 @@
       <DependentUpon>ProfileLayerView.xaml</DependentUpon>
     </Compile>
     <Compile Include="Screens\Module\ProfileEditor\Visualization\ProfileLayerViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\Visualization\Tools\EditToolViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\Visualization\Tools\EllipseToolView.xaml.cs">
       <DependentUpon>EllipseToolView.xaml</DependentUpon>
     </Compile>
@@ -367,6 +368,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Screens\Module\ProfileEditor\Visualization\Tools\EditToolView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Screens\Module\ProfileEditor\Visualization\Tools\EllipseToolView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileLayerView.xaml

@@ -4,6 +4,7 @@
              xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
              xmlns:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
+             xmlns:s="https://github.com/canton7/Stylet"
              mc:Ignorable="d"
              d:DesignHeight="450"
              d:DesignWidth="800"
@@ -63,13 +64,5 @@
                 <SolidColorBrush Color="{StaticResource Accent400}" />
             </Path.Stroke>
         </Path>
-
-        <!-- The rectangle around the shape that allows modification -->
-        <Rectangle Width="{Binding ShapeRectangle.Width}"
-                   Height="{Binding ShapeRectangle.Height}"
-                   Canvas.Left="{Binding ShapeRectangle.X}"
-                   Canvas.Top="{Binding ShapeRectangle.Y}" Stroke="{DynamicResource PrimaryHueMidBrush}" 
-                   StrokeThickness="1"
-                   StrokeDashArray="2 2" />
     </Canvas>
 </UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileLayerViewModel.cs

@@ -1,6 +1,7 @@
 using System;
 using System.Linq;
 using System.Windows;
+using System.Windows.Input;
 using System.Windows.Media;
 using Artemis.Core.Models.Profile;
 using Artemis.Core.Models.Profile.LayerShapes;
@@ -8,6 +9,8 @@ using Artemis.Core.Models.Surface;
 using Artemis.UI.Extensions;
 using Artemis.UI.Services.Interfaces;
 using RGB.NET.Core;
+using SkiaSharp;
+using SkiaSharp.Views.WPF;
 using Rectangle = Artemis.Core.Models.Profile.LayerShapes.Rectangle;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
@@ -27,13 +30,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             _profileEditorService.SelectedProfileElementUpdated += OnSelectedProfileElementUpdated;
             _profileEditorService.CurrentTimeChanged += ProfileEditorServiceOnCurrentTimeChanged;
         }
-        
+
         public Layer Layer { get; }
 
         public Geometry LayerGeometry { get; set; }
         public Geometry OpacityGeometry { get; set; }
         public Geometry ShapeGeometry { get; set; }
-        public Rect ShapeRectangle { get; set; }
         public Rect ViewportRectangle { get; set; }
         public bool IsSelected { get; set; }
 
@@ -100,29 +102,30 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             }
 
             var skRect = Layer.LayerShape.GetUnscaledRectangle();
-            ShapeRectangle = new Rect(skRect.Left, skRect.Top, skRect.Width, skRect.Height);
+            var rect = new Rect(skRect.Left, skRect.Top, Math.Max(0, skRect.Width), Math.Max(0,skRect.Height));
+            
             var shapeGeometry = Geometry.Empty;
             switch (Layer.LayerShape)
             {
                 case Ellipse _:
-                    shapeGeometry = new EllipseGeometry(ShapeRectangle);
+                    shapeGeometry = new EllipseGeometry(rect);
                     break;
                 case Fill _:
                     shapeGeometry = LayerGeometry;
                     break;
                 case Polygon _:
                     // TODO
-                    shapeGeometry = new RectangleGeometry(ShapeRectangle);
+                    shapeGeometry = new RectangleGeometry(rect);
                     break;
                 case Rectangle _:
-                    shapeGeometry = new RectangleGeometry(ShapeRectangle);
+                    shapeGeometry = new RectangleGeometry(rect);
                     break;
             }
 
             shapeGeometry.Freeze();
             ShapeGeometry = shapeGeometry;
         }
-        
+
         private void CreateViewportRectangle()
         {
             if (!Layer.Leds.Any() || Layer.LayerShape == null)
@@ -182,6 +185,13 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             }
         }
 
+        public void Dispose()
+        {
+            Layer.RenderPropertiesUpdated -= LayerOnRenderPropertiesUpdated;
+        }
+        
+        #region Event handlers  
+
         private void LayerOnRenderPropertiesUpdated(object sender, EventArgs e)
         {
             Update();
@@ -206,9 +216,6 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             CreateViewportRectangle();
         }
 
-        public void Dispose()
+        #endregion
-        {
-            Layer.RenderPropertiesUpdated -= LayerOnRenderPropertiesUpdated;
-        }
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileView.xaml

@@ -55,15 +55,18 @@
                     </ListBox.ItemsPanel>
                     <ListBoxItem ToolTip="Pan over different parts of the surface">
                         <materialDesign:PackIcon Kind="HandLeft" />
+                    </ListBoxItem>       
+                    <ListBoxItem ToolTip="Edit shape in layer">
+                        <materialDesign:PackIcon Kind="Edit" />
                     </ListBoxItem>
                     <ListBoxItem ToolTip="Change layer selection">
                         <materialDesign:PackIcon Kind="SelectionDrag" />
                     </ListBoxItem>
                     <ListBoxItem ToolTip="Add to layer selection">
-                        <materialDesign:PackIcon Kind="PencilPlusOutline" />
+                        <materialDesign:PackIcon Kind="AddToPhotos" />
                     </ListBoxItem>
                     <ListBoxItem ToolTip="Remove from layer selection">
-                        <materialDesign:PackIcon Kind="PencilMinusOutline" />
+                        <materialDesign:PackIcon Kind="MinusBoxMultiple" />
                     </ListBoxItem>
                     <Separator />
                     <ListBoxItem ToolTip="Create round shape in layer">

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/ProfileViewModel.cs

@@ -253,24 +253,27 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                     ActiveToolViewModel = new ViewpointMoveToolViewModel(this, _profileEditorService);
                     break;
                 case 1:
-                    ActiveToolViewModel = new SelectionToolViewModel(this, _profileEditorService);
+                    ActiveToolViewModel = new EditToolViewModel(this, _profileEditorService);
                     break;
                 case 2:
-                    ActiveToolViewModel = new SelectionAddToolViewModel(this, _profileEditorService);
+                    ActiveToolViewModel = new SelectionToolViewModel(this, _profileEditorService);
                     break;
                 case 3:
+                    ActiveToolViewModel = new SelectionAddToolViewModel(this, _profileEditorService);
+                    break;
+                case 4:
                     ActiveToolViewModel = new SelectionRemoveToolViewModel(this, _profileEditorService);
                     break;
-                case 5:
+                case 6:
                     ActiveToolViewModel = new EllipseToolViewModel(this, _profileEditorService);
                     break;
-                case 6:
+                case 7:
                     ActiveToolViewModel = new RectangleToolViewModel(this, _profileEditorService);
                     break;
-                case 7:
+                case 8:
                     ActiveToolViewModel = new PolygonToolViewModel(this, _profileEditorService);
                     break;
-                case 8:
+                case 9:
                     ActiveToolViewModel = new FillToolViewModel(this, _profileEditorService);
                     break;
             }

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/EditToolView.xaml

@@ -0,0 +1,110 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.EditToolView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
+             xmlns:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             xmlns:s="https://github.com/canton7/Stylet"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" 
+             d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type local:EditToolViewModel}}">
+    <Canvas>
+        <!-- The rectangle around the shape that allows modification -->
+        <Rectangle Width="{Binding ShapeSkRect.Width}"
+                   Height="{Binding ShapeSkRect.Height}"
+                   Canvas.Left="{Binding ShapeSkRect.Left}"
+                   Canvas.Top="{Binding ShapeSkRect.Top}"
+                   Stroke="{DynamicResource PrimaryHueMidBrush}"
+                   StrokeThickness="1"
+                   StrokeDashArray="2 2" />
+
+        <!-- Top left display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Top left rotate handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action TopLeftRotate}"
+                   Width="15" Height="15" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="Transparent" Margin="-12,-12,0,0"
+                   Cursor="/Resources/aero_rotate_tl.cur" />
+        <!-- Top left resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action TopLeftResize}"
+                   Width="6" Height="6" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="Transparent" Margin="-3,-3,0,0" Cursor="SizeNWSE" />
+
+        <!-- Top center display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.MidX}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Top center resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action TopCenterResize}"
+                   Width="10" Height="10" Canvas.Left="{Binding ShapeSkRect.MidX}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="Transparent" Margin="-5,-5,0,0" Cursor="SizeNS" />
+
+        <!-- Top right display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Top right rotate handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action TopRightRotate}"
+                   Width="15" Height="15" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="Transparent" Margin="-3,-12,0,0"
+                   Cursor="/Resources/aero_rotate_tr.cur" />
+        <!-- Top right resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action TopRightResize}"
+                   Width="6" Height="6" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Top}" Fill="Transparent" Margin="-3,-3,0,0" Cursor="SizeNESW" />
+
+        <!-- Center right display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.MidY}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Center right resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action CenterRightResize}"
+                   Width="10" Height="10" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.MidY}" Fill="Transparent" Margin="-5,-5,0,0" Cursor="SizeWE" />
+
+        <!-- Bottom right display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Bottom right rotate handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action BottomRightRotate}"
+                   Width="15" Height="15" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="Transparent" Margin="-3,-3,0,0"
+                   Cursor="/Resources/aero_rotate_br.cur" />
+        <!-- Bottom right resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action BottomRightResize}"
+                   Width="6" Height="6" Canvas.Left="{Binding ShapeSkRect.Right}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="Transparent" Margin="-3,-3,0,0" Cursor="SizeNWSE" />
+
+        <!-- Bottom center display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.MidX}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Bottom center resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action BottomCenterResize}"
+                   Width="10" Height="10" Canvas.Left="{Binding ShapeSkRect.MidX}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="Transparent" Margin="-5,-5,0,0" Cursor="SizeNS" />
+
+        <!-- Bottom left display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Bottom left rotate handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action BottomLeftRotate}"
+                   Width="15" Height="15" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="Transparent" Margin="-12,-3,0,0"
+                   Cursor="/Resources/aero_rotate_bl.cur" />
+        <!-- Bottom left resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action BottomLeftResize}"
+                   Width="6" Height="6" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.Bottom}" Fill="Transparent" Margin="-3, -3, 0,0" Cursor="SizeNESW" />
+
+        <!-- Center left display -->
+        <Rectangle Width="4" Height="4" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.MidY}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <!-- Center left resize handle -->
+        <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseUp="{s:Action ShapeEditMouseUp}"
+                   MouseMove="{s:Action CenterLeftResize}"
+                   Width="10" Height="10" Canvas.Left="{Binding ShapeSkRect.Left}" Canvas.Top="{Binding ShapeSkRect.MidY}" Fill="Transparent" Margin="-5,-5,0,0" Cursor="SizeWE" />
+    </Canvas>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/EditToolViewModel.cs

@@ -0,0 +1,152 @@
+using System;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Models.Profile;
+using Artemis.UI.Services.Interfaces;
+using SkiaSharp;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class EditToolViewModel : VisualizationToolViewModel
+    {
+        private bool _mouseDown;
+
+        public EditToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            Cursor = Cursors.Arrow;
+            Update();
+
+            profileEditorService.SelectedProfileChanged += (sender, args) => Update();
+            profileEditorService.SelectedProfileElementUpdated += (sender, args) => Update();
+            profileEditorService.CurrentTimeChanged += (sender, args) => Update();
+        }
+
+        private void Update()
+        {
+            if (ProfileEditorService.SelectedProfileElement is Layer layer)
+            {
+                ShapeSkRect = layer.LayerShape.GetUnscaledRectangle();
+            }
+        }
+
+        public SKRect ShapeSkRect { get; set; }
+
+        public void ShapeEditMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            ((IInputElement) sender).CaptureMouse();
+            _mouseDown = true;
+            e.Handled = true;
+        }
+
+        public void ShapeEditMouseUp(object sender, MouseButtonEventArgs e)
+        {
+            ((IInputElement) sender).ReleaseMouseCapture();
+            _mouseDown = false;
+            e.Handled = true;
+        }
+
+        public void TopLeftRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void TopLeftResize(object sender, MouseEventArgs e)
+        {
+            
+        }
+
+        public void TopCenterResize(object sender, MouseEventArgs e)
+        {
+            if (!_mouseDown)
+                return;
+            if (!(ProfileEditorService.SelectedProfileElement is Layer layer))
+                return;
+
+            var position = GetRelativePosition(sender, e);
+
+            var skRect = layer.LayerShape.GetUnscaledRectangle();
+            skRect.Top = (float) Math.Min(position.Y, skRect.Bottom);
+            layer.LayerShape.SetFromUnscaledRectangle(skRect);
+
+            ProfileEditorService.UpdateSelectedProfileElement();
+        }
+
+        public void TopRightRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void TopRightResize(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void CenterRightResize(object sender, MouseEventArgs e)
+        {
+            if (!_mouseDown)
+                return;
+            if (!(ProfileEditorService.SelectedProfileElement is Layer layer))
+                return;
+
+            var position = GetRelativePosition(sender, e);
+
+            var skRect = layer.LayerShape.GetUnscaledRectangle();
+            skRect.Right = (float) Math.Max(position.X, skRect.Left);
+            layer.LayerShape.SetFromUnscaledRectangle(skRect);
+
+            ProfileEditorService.UpdateSelectedProfileElement();
+        }
+
+        private Point GetRelativePosition(object sender, MouseEventArgs mouseEventArgs)
+        {
+            var parent = VisualTreeHelper.GetParent((DependencyObject) sender);
+            return mouseEventArgs.GetPosition((IInputElement) parent);
+        }
+
+        public void BottomRightRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void BottomRightResize(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void BottomCenterResize(object sender, MouseEventArgs e)
+        {
+            if (!_mouseDown)
+                return;
+            if (!(ProfileEditorService.SelectedProfileElement is Layer layer))
+                return;
+
+            var position = GetRelativePosition(sender, e);
+
+            var skRect = layer.LayerShape.GetUnscaledRectangle();
+            skRect.Bottom = (float) Math.Max(position.Y, skRect.Top);
+            layer.LayerShape.SetFromUnscaledRectangle(skRect);
+
+            ProfileEditorService.UpdateSelectedProfileElement();
+        }
+
+        public void BottomLeftRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void BottomLeftResize(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void CenterLeftResize(object sender, MouseEventArgs e)
+        {
+            if (!_mouseDown)
+                return;
+            if (!(ProfileEditorService.SelectedProfileElement is Layer layer))
+                return;
+
+            var position = GetRelativePosition(sender, e);
+
+            var skRect = layer.LayerShape.GetUnscaledRectangle();
+            skRect.Left = (float) Math.Min(position.X, skRect.Right);
+            layer.LayerShape.SetFromUnscaledRectangle(skRect);
+
+            ProfileEditorService.UpdateSelectedProfileElement();
+        }
+    }
+}