Fixed shape movement

Added shape resizing
Cleaned up edit tool code
Edit tool controls scale to compensate zooming out

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

@@ -13,172 +13,72 @@
     <Canvas UseLayoutRounding="False">
         <!-- The part of the layer's shape that is inside the layer -->
         <Path Data="{Binding ShapeGeometry, Mode=OneWay}"
-                  Fill="Transparent"
+              Fill="Transparent"
-                  Stroke="{DynamicResource PrimaryHueMidBrush}"
+              Stroke="{DynamicResource PrimaryHueMidBrush}"
-                  StrokeThickness="1"
+              StrokeThickness="{Binding OutlineThickness}"
-                  StrokeDashArray="2 2"
+              StrokeDashArray="2 2"
-                  Cursor="Hand"
+              Cursor="Hand"
-                  MouseDown="{s:Action ShapeEditMouseDown}"
+              MouseDown="{s:Action ShapeEditMouseDown}"
-                  MouseUp="{s:Action ShapeEditMouseUp}"
+              MouseUp="{s:Action ShapeEditMouseUp}"
-                  MouseMove="{s:Action Move}" />
+              MouseMove="{s:Action Move}" />
 
         <!-- Mutation points -->
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding TopLeft.X}" Canvas.Top="{Binding TopLeft.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <Rectangle Width="{Binding ControlSize}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding TopRight.X}" Canvas.Top="{Binding TopRight.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   Height="{Binding ControlSize}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding BottomRight.X}" Canvas.Top="{Binding BottomRight.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   Margin="{Binding ControlOffset}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding BottomLeft.X}" Canvas.Top="{Binding BottomLeft.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   Canvas.Left="{Binding TopCenter.X}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding TopCenter.X}" Canvas.Top="{Binding TopCenter.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   Canvas.Top="{Binding TopCenter.Y}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding RightCenter.X}" Canvas.Top="{Binding RightCenter.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding BottomCenter.X}" Canvas.Top="{Binding BottomCenter.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action TopCenterResize}" />
-        <Rectangle Width="4" Height="4" Canvas.Left="{Binding LeftCenter.X}" Canvas.Top="{Binding LeftCenter.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
+        <Rectangle Width="{Binding ControlSize}"
-
+                   Height="{Binding ControlSize}"
-        <Canvas>
+                   Margin="{Binding ControlOffset}"
-            <Canvas.RenderTransform>
+                   Canvas.Left="{Binding RightCenter.X}"
-                <TransformGroup Children="{Binding ShapeTransformCollection}" />
+                   Canvas.Top="{Binding RightCenter.Y}"
-            </Canvas.RenderTransform>
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-            <!-- Top left rotate handle -->
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action RightCenterResize}" />
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+        <Rectangle Width="{Binding ControlSize}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
+                   Height="{Binding ControlSize}"
-                       MouseMove="{s:Action TopLeftRotate}"
+                   Margin="{Binding ControlOffset}"
-                       Width="15" Height="15"
+                   Canvas.Left="{Binding BottomCenter.X}"
-                       Canvas.Left="{Binding ShapeRectangle.Left}"
+                   Canvas.Top="{Binding BottomCenter.Y}"
-                       Canvas.Top="{Binding ShapeRectangle.Top}"
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-                       Fill="Transparent"
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action BottomCenterResize}" />
-                       Margin="-12,-12,0,0"
+        <Rectangle Width="{Binding ControlSize}"
-                       Cursor="/Resources/aero_rotate_tl.cur" />
+                   Height="{Binding ControlSize}"
-            <!-- Top left resize handle -->
+                   Margin="{Binding ControlOffset}"
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   Canvas.Left="{Binding LeftCenter.X}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
+                   Canvas.Top="{Binding LeftCenter.Y}" 
-                       MouseMove="{s:Action TopLeftResize}"
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-                       Width="6"
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action LeftCenterResize}" />
-                       Height="6"
+        <Rectangle Width="{Binding ControlSize}"
-                       Canvas.Left="{Binding ShapeRectangle.Left}"
+                   Height="{Binding ControlSize}"
-                       Canvas.Top="{Binding ShapeRectangle.Top}"
+                   Margin="{Binding ControlOffset}" 
-                       Fill="Transparent"
+                   Canvas.Left="{Binding TopLeft.X}"
-                       Margin="-3,-3,0,0"
+                   Canvas.Top="{Binding TopLeft.Y}"
-                       Cursor="SizeNWSE" />
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action TopLeftResize}" />
-            <!-- Top center resize handle -->
+        <Rectangle Width="{Binding ControlSize}"
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   Height="{Binding ControlSize}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
+                   Margin="{Binding ControlOffset}"
-                       MouseMove="{s:Action TopCenterResize}"
+                   Canvas.Left="{Binding TopRight.X}" 
-                       Width="10"
+                   Canvas.Top="{Binding TopRight.Y}"
-                       Height="10"
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-                       Canvas.Left="{Binding ShapeRectangle.MidX}"
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action TopRightResize}" />
-                       Canvas.Top="{Binding ShapeRectangle.Top}"
+        <Rectangle Width="{Binding ControlSize}"
-                       Fill="Transparent"
+                   Height="{Binding ControlSize}"
-                       Margin="-5,-5,0,0"
+                   Margin="{Binding ControlOffset}"
-                       Cursor="SizeNS" />
+                   Canvas.Left="{Binding BottomRight.X}" 
-
+                   Canvas.Top="{Binding BottomRight.Y}" 
-            <!-- Top right rotate handle -->
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action BottomRightResize}" />
-                       MouseUp="{s:Action ShapeEditMouseUp}"
+        <Rectangle Width="{Binding ControlSize}"
-                       MouseMove="{s:Action TopRightRotate}"
+                   Height="{Binding ControlSize}"
-                       Width="15"
+                   Margin="{Binding ControlOffset}" 
-                       Height="15"
+                   Canvas.Left="{Binding BottomLeft.X}"
-                       Canvas.Left="{Binding ShapeRectangle.Right}"
+                   Canvas.Top="{Binding BottomLeft.Y}" 
-                       Canvas.Top="{Binding ShapeRectangle.Top}"
+                   Fill="{DynamicResource SecondaryAccentBrush}"
-                       Fill="Transparent"
+                   MouseDown="{s:Action ShapeEditMouseDown}" MouseUp="{s:Action ShapeEditMouseUp}" MouseMove="{s:Action BottomLeftResize}" />
-                       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 ShapeRectangle.Right}"
-                       Canvas.Top="{Binding ShapeRectangle.Top}"
-                       Fill="Transparent"
-                       Margin="-3,-3,0,0"
-                       Cursor="SizeNESW" />
-
-            <!-- Center right resize handle -->
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
-                       MouseMove="{s:Action CenterRightResize}"
-                       Width="10"
-                       Height="10"
-                       Canvas.Left="{Binding ShapeRectangle.Right}"
-                       Canvas.Top="{Binding ShapeRectangle.MidY}"
-                       Fill="Transparent"
-                       Margin="-5,-5,0,0"
-                       Cursor="SizeWE" />
-
-
-            <!-- Bottom right rotate handle -->
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
-                       MouseMove="{s:Action BottomRightRotate}"
-                       Width="15"
-                       Height="15"
-                       Canvas.Left="{Binding ShapeRectangle.Right}"
-                       Canvas.Top="{Binding ShapeRectangle.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 ShapeRectangle.Right}"
-                       Canvas.Top="{Binding ShapeRectangle.Bottom}"
-                       Fill="Transparent"
-                       Margin="-3,-3,0,0"
-                       Cursor="SizeNWSE" />
-
-
-            <!-- Bottom center resize handle -->
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
-                       MouseMove="{s:Action BottomCenterResize}"
-                       Width="10"
-                       Height="10"
-                       Canvas.Left="{Binding ShapeRectangle.MidX}"
-                       Canvas.Top="{Binding ShapeRectangle.Bottom}"
-                       Fill="Transparent"
-                       Margin="-5,-5,0,0"
-                       Cursor="SizeNS" />
-
-
-            <!-- Bottom left rotate handle -->
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
-                       MouseMove="{s:Action BottomLeftRotate}"
-                       Width="15"
-                       Height="15"
-                       Canvas.Left="{Binding ShapeRectangle.Left}"
-                       Canvas.Top="{Binding ShapeRectangle.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 ShapeRectangle.Left}"
-                       Canvas.Top="{Binding ShapeRectangle.Bottom}"
-                       Fill="Transparent"
-                       Margin="-3, -3, 0,0"
-                       Cursor="SizeNESW" />
-
-
-            <!-- Center left resize handle -->
-            <Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
-                       MouseUp="{s:Action ShapeEditMouseUp}"
-                       MouseMove="{s:Action CenterLeftResize}"
-                       Width="10"
-                       Height="10"
-                       Canvas.Left="{Binding ShapeRectangle.Left}"
-                       Canvas.Top="{Binding ShapeRectangle.MidY}"
-                       Fill="Transparent"
-                       Margin="-5,-5,0,0"
-                       Cursor="SizeWE" />
-        </Canvas>
      
         <!-- Anchor point -->
         <materialDesign:PackIcon Kind="Crosshairs"
@@ -197,8 +97,7 @@
                  Canvas.Left="{Binding ShapeAnchor.X}"
                  Canvas.Top="{Binding ShapeAnchor.Y}"
                  Margin="-4,-4,0,0"
-                 Cursor="SizeAll">
+                 Cursor="SizeAll" />
-        </Ellipse>
     </Canvas>
 
 </UserControl>

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

@@ -1,5 +1,4 @@
 using System;
-using System.Diagnostics;
 using System.Windows;
 using System.Windows.Input;
 using System.Windows.Media;
@@ -18,8 +17,9 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
         private bool _draggingHorizontally;
         private bool _draggingVertically;
         private SKPoint _dragOffset;
-        private Point _dragStart;
+        private SKPoint _dragStart;
         private SKPoint _dragStartAnchor;
+        private SKSize _dragStartScale;
         private bool _isDragging;
 
         public EditToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService, ILayerEditorService layerEditorService)
@@ -28,12 +28,19 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             _layerEditorService = layerEditorService;
             Cursor = Cursors.Arrow;
             Update();
+            UpdateControls();
 
+            ProfileViewModel.PanZoomViewModel.PropertyChanged += (sender, args) => UpdateControls();
             profileEditorService.SelectedProfileChanged += (sender, args) => Update();
             profileEditorService.SelectedProfileElementUpdated += (sender, args) => Update();
             profileEditorService.ProfilePreviewUpdated += (sender, args) => Update();
         }
 
+
+        public double ControlSize { get; set; }
+        public Thickness ControlOffset { get; set; }
+        public double OutlineThickness { get; set; }
+
         public SKRect ShapeRectangle { get; set; }
         public SKPoint ShapeAnchor { get; set; }
         public RectangleGeometry ShapeGeometry { get; set; }
@@ -77,32 +84,107 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
                 shapeGeometry.Freeze();
                 ShapeGeometry = shapeGeometry;
                 ShapeTransformCollection = _layerEditorService.GetLayerTransformGroup(layer).Children;
+                ShapeTransformCollection.Freeze();
+            });
+        }
+
+        private void UpdateControls()
+        {
+            Execute.PostToUIThread(() =>
+            {
+                ControlSize = Math.Max(8 / ProfileViewModel.PanZoomViewModel.Zoom, 4);
+                ControlOffset = new Thickness(ControlSize / 2 * -1, ControlSize / 2 * -1, 0, 0);
+                OutlineThickness = Math.Max(2 / ProfileViewModel.PanZoomViewModel.Zoom, 1);
             });
         }
 
         public void ShapeEditMouseDown(object sender, MouseButtonEventArgs e)
         {
-            if (_isDragging)
+            if (_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            if (ProfileEditorService.SelectedProfileElement is Layer layer)
+            // The path starts at 0,0 so there's no simple way to get the position relative to the top-left of the path
-            {
+            _dragStart = GetRelativePosition(sender, e).ToSKPoint();
-                // The path starts at 0,0 so there's no simple way to get the position relative to the top-left of the path
+            _dragStartScale = layer.SizeProperty.CurrentValue;
-                var dragStartPosition = GetRelativePosition(sender, e);
-                var anchor = _layerEditorService.GetLayerAnchor(layer, true);
 
-//                _dragOffset = new Point(dragStartPosition.X - anchor.X - 1.45, dragStartPosition.Y - anchor.Y - 1.45);
+            // Store the original position and do a test to figure out the mouse offset
-                _dragStart = dragStartPosition;
+            var originalPosition = layer.PositionProperty.CurrentValue;
-            }
+            var scaledDragStart = _layerEditorService.GetScaledPoint(layer, _dragStart, true);
+            layer.PositionProperty.SetCurrentValue(scaledDragStart, ProfileEditorService.CurrentTime);
+
+            // TopLeft is not updated yet and acts as a snapshot of the top-left before changing the position
+            // GetLayerPath will return the updated position with all transformations applied, the difference is the offset
+            _dragOffset = TopLeft - _layerEditorService.GetLayerPath(layer, true, true, true).Points[0];
+            _dragStart += _dragOffset;
+
+            // Restore the position back to before the test was done
+            layer.PositionProperty.SetCurrentValue(originalPosition, ProfileEditorService.CurrentTime);
 
             _isDragging = true;
-            _draggingHorizontally = false;
-            _draggingVertically = false;
-
             ((IInputElement) sender).CaptureMouse();
             e.Handled = true;
         }
 
+        public void ShapeEditMouseUp(object sender, MouseButtonEventArgs e)
+        {
+            ProfileEditorService.UpdateSelectedProfileElement();
+
+            _dragOffset = SKPoint.Empty;
+            _dragStartAnchor = SKPoint.Empty;
+
+            _isDragging = false;
+            _draggingHorizontally = false;
+            _draggingVertically = false;
+
+            ((IInputElement) sender).ReleaseMouseCapture();
+            e.Handled = true;
+        }
+
+        #region Position
+
+        public void Move(object sender, MouseEventArgs e)
+        {
+            if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
+                return;
+
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
+            // Allow the user to move the shape only horizontally or vertically when holding down shift
+            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            {
+                // Keep the X position static if dragging vertically
+                if (_draggingVertically)
+                    position.X = _dragStart.X;
+                // Keep the Y position static if dragging horizontally
+                else if (_draggingHorizontally)
+                    position.Y = _dragStart.Y;
+                // Snap into place only if the mouse moved atleast a full pixel
+                else if (Math.Abs(position.X - _dragStart.X) > 1 || Math.Abs(position.Y - _dragStart.Y) > 1)
+                {
+                    // Pick between X and Y by comparing which moved the furthers from the starting point
+                    _draggingHorizontally = Math.Abs(position.X - _dragStart.X) > Math.Abs(position.Y - _dragStart.Y);
+                    _draggingVertically = Math.Abs(position.X - _dragStart.X) < Math.Abs(position.Y - _dragStart.Y);
+                    return;
+                }
+            }
+            // Reset both states when shift is not held down
+            else
+            {
+                _draggingVertically = false;
+                _draggingHorizontally = false;
+            }
+
+            // Scale down the resulting position and make it relative
+            var scaled = _layerEditorService.GetScaledPoint(layer, position, true);
+            // Update the position property
+            layer.PositionProperty.SetCurrentValue(scaled, ProfileEditorService.CurrentTime);
+
+            ProfileEditorService.UpdateProfilePreview();
+        }
+
+        #endregion
+
+        #region Anchor
+
         public void AnchorEditMouseDown(object sender, MouseButtonEventArgs e)
         {
             if (_isDragging)
@@ -125,28 +207,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             }
 
             _isDragging = true;
-            _draggingHorizontally = false;
-            _draggingVertically = false;
-
             ((IInputElement) sender).CaptureMouse();
             e.Handled = true;
         }
 
-        public void ShapeEditMouseUp(object sender, MouseButtonEventArgs e)
-        {
-            ProfileEditorService.UpdateSelectedProfileElement();
-
-            _dragOffset = SKPoint.Empty;
-            _dragStartAnchor = SKPoint.Empty;
-            
-            _isDragging = false;
-            _draggingHorizontally = false;
-            _draggingVertically = false;
-
-            ((IInputElement) sender).ReleaseMouseCapture();
-            e.Handled = true;
-        }
-
         public void AnchorMove(object sender, MouseEventArgs e)
         {
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
@@ -157,7 +221,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             // Add the current position to the start anchor to determine the new position
             var current = start + (GetRelativePosition(sender, e).ToSKPoint() - _dragOffset);
             // In order to keep the mouse movement unrotated, counter-act the active rotation
-            var countered = UnTransformPoints(new[] {start, current}, layer, start);
+            var countered = UnTransformPoints(new[] {start, current}, layer, start, true);
             var scaled = _layerEditorService.GetScaledPoint(layer, countered[1], false);
 
             // Update the anchor point, this causes the shape to move
@@ -172,58 +236,21 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             ProfileEditorService.UpdateProfilePreview();
         }
 
-        public void Move(object sender, MouseEventArgs e)
+        #endregion
-        {
-            if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
-                return;
 
-            var position = GetRelativePosition(sender, e);
+        #region Size
-            var x = (float) (position.X - _dragOffset.X);
-            var y = (float) (position.Y - _dragOffset.Y);
-
-            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
-            {
-                if (_draggingVertically)
-                    x = (float) (_dragStart.X - _dragOffset.X);
-                else if (_draggingHorizontally)
-                    y = (float) (_dragStart.Y - _dragOffset.Y);
-                else
-                {
-                    _draggingHorizontally = Math.Abs(position.X - _dragStart.X) > Math.Abs(position.Y - _dragStart.Y);
-                    _draggingVertically = Math.Abs(position.X - _dragStart.X) < Math.Abs(position.Y - _dragStart.Y);
-                    return;
-                }
-            }
-
-            var scaled = _layerEditorService.GetScaledPoint(layer, new SKPoint(x, y), true);
-            layer.PositionProperty.SetCurrentValue(scaled, ProfileEditorService.CurrentTime);
-
-            ProfileEditorService.UpdateProfilePreview();
-        }
-
-        public void TopLeftRotate(object sender, MouseEventArgs e)
-        {
-        }
 
         public void TopLeftResize(object sender, MouseEventArgs e)
         {
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
-            var skRect = layer.LayerShape.RenderRectangle;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Left);
-            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            var height = VerticalResize(layer, position, ResizeOrigin.Top);
-            {
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
-                // Take the greatest difference
-                // Base the smallest difference on the greatest difference, maintaining aspect ratio
-            }
-            else
-            {
-                skRect.Top = (float) Math.Min(position.Y, skRect.Bottom);
-                skRect.Left = (float) Math.Min(position.X, skRect.Bottom);
-            }
 
-            ApplyShapeResize(skRect);
+            ProfileEditorService.UpdateProfilePreview();
         }
 
         public void TopCenterResize(object sender, MouseEventArgs e)
@@ -231,15 +258,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
+            var width = layer.SizeProperty.CurrentValue.Width;
+            var height = VerticalResize(layer, position, ResizeOrigin.Top);
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
 
-            var skRect = layer.LayerShape.RenderRectangle;
+            ProfileEditorService.UpdateProfilePreview();
-            skRect.Top = (float) Math.Min(position.Y, skRect.Bottom);
-            ApplyShapeResize(skRect);
-        }
-
-        public void TopRightRotate(object sender, MouseEventArgs e)
-        {
         }
 
         public void TopRightResize(object sender, MouseEventArgs e)
@@ -247,36 +271,25 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
-            var skRect = layer.LayerShape.RenderRectangle;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Right);
-            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            var height = VerticalResize(layer, position, ResizeOrigin.Top);
-            {
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
-                // Take the greatest difference
-                // Base the smallest difference on the greatest difference, maintaining aspect ratio
-            }
-            else
-            {
-                skRect.Top = (float) Math.Min(position.Y, skRect.Bottom);
-                skRect.Right = (float) Math.Max(position.X, skRect.Left);
-            }
 
-            ApplyShapeResize(skRect);
+            ProfileEditorService.UpdateProfilePreview();
         }
 
-        public void CenterRightResize(object sender, MouseEventArgs e)
+        public void RightCenterResize(object sender, MouseEventArgs e)
         {
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Right);
+            var height = layer.SizeProperty.CurrentValue.Height;
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
 
-            var skRect = layer.LayerShape.RenderRectangle;
+            ProfileEditorService.UpdateProfilePreview();
-            skRect.Right = (float) Math.Max(position.X, skRect.Left);
-            ApplyShapeResize(skRect);
-        }
-
-        public void BottomRightRotate(object sender, MouseEventArgs e)
-        {
         }
 
         public void BottomRightResize(object sender, MouseEventArgs e)
@@ -284,20 +297,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
-            var skRect = layer.LayerShape.RenderRectangle;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Right);
-            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            var height = VerticalResize(layer, position, ResizeOrigin.Bottom);
-            {
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
-                // Take the greatest difference
-                // Base the smallest difference on the greatest difference, maintaining aspect ratio
-            }
-            else
-            {
-                skRect.Bottom = (float) Math.Max(position.Y, skRect.Top);
-                skRect.Right = (float) Math.Max(position.X, skRect.Left);
-            }
 
-            ApplyShapeResize(skRect);
+            ProfileEditorService.UpdateProfilePreview();
         }
 
         public void BottomCenterResize(object sender, MouseEventArgs e)
@@ -305,15 +310,12 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
+            var width = layer.SizeProperty.CurrentValue.Width;
+            var height = VerticalResize(layer, position, ResizeOrigin.Bottom);
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
 
-            var skRect = layer.LayerShape.RenderRectangle;
+            ProfileEditorService.UpdateProfilePreview();
-            skRect.Bottom = (float) Math.Max(position.Y, skRect.Top);
-            ApplyShapeResize(skRect);
-        }
-
-        public void BottomLeftRotate(object sender, MouseEventArgs e)
-        {
         }
 
         public void BottomLeftResize(object sender, MouseEventArgs e)
@@ -321,40 +323,68 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
-            var skRect = layer.LayerShape.RenderRectangle;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Left);
-            if (Keyboard.IsKeyDown(Key.LeftShift) || Keyboard.IsKeyDown(Key.RightShift))
+            var height = VerticalResize(layer, position, ResizeOrigin.Bottom);
-            {
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
-                // Take the greatest difference
-                // Base the smallest difference on the greatest difference, maintaining aspect ratio
-            }
-            else
-            {
-                skRect.Bottom = (float) Math.Max(position.Y, skRect.Top);
-                skRect.Left = (float) Math.Min(position.X, skRect.Right);
-            }
 
-            ApplyShapeResize(skRect);
+            ProfileEditorService.UpdateProfilePreview();
         }
 
-        public void CenterLeftResize(object sender, MouseEventArgs e)
+        public void LeftCenterResize(object sender, MouseEventArgs e)
         {
             if (!_isDragging || !(ProfileEditorService.SelectedProfileElement is Layer layer))
                 return;
 
-            var position = GetRelativePosition(sender, e);
+            var position = GetRelativePosition(sender, e).ToSKPoint() + _dragOffset;
+            var width = HorizontalResize(layer, position, ResizeOrigin.Left);
+            var height = layer.SizeProperty.CurrentValue.Height;
+            layer.SizeProperty.SetCurrentValue(new SKSize(width, height), ProfileEditorService.CurrentTime);
 
-            var skRect = layer.LayerShape.RenderRectangle;
+            ProfileEditorService.UpdateProfilePreview();
-            skRect.Left = (float) Math.Min(position.X, skRect.Right);
-            ApplyShapeResize(skRect);
         }
 
-        private SKPoint[] UnTransformPoints(SKPoint[] skPoints, Layer layer, SKPoint pivot)
+        #endregion
+
+        #region Rotation
+
+        public void TopLeftRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void TopRightRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void BottomRightRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        public void BottomLeftRotate(object sender, MouseEventArgs e)
+        {
+        }
+
+        #endregion
+
+        #region Private methods
+
+        private SKPoint[] TransformPoints(SKPoint[] skPoints, Layer layer, SKPoint pivot)
+        {
+            var counterRotatePath = new SKPath();
+            counterRotatePath.AddPoly(skPoints, false);
+            counterRotatePath.Transform(SKMatrix.MakeRotationDegrees(layer.RotationProperty.CurrentValue, pivot.X, pivot.Y));
+            // counterRotatePath.Transform(SKMatrix.MakeScale(layer.SizeProperty.CurrentValue.Width, layer.SizeProperty.CurrentValue.Height));
+
+            return counterRotatePath.Points;
+        }
+
+        private SKPoint[] UnTransformPoints(SKPoint[] skPoints, Layer layer, SKPoint pivot, bool includeScale)
         {
             var counterRotatePath = new SKPath();
             counterRotatePath.AddPoly(skPoints, false);
             counterRotatePath.Transform(SKMatrix.MakeRotationDegrees(layer.RotationProperty.CurrentValue * -1, pivot.X, pivot.Y));
-            counterRotatePath.Transform(SKMatrix.MakeScale(1f / layer.SizeProperty.CurrentValue.Width, 1f / layer.SizeProperty.CurrentValue.Height));
+            if (includeScale)
+                counterRotatePath.Transform(SKMatrix.MakeScale(1f / layer.SizeProperty.CurrentValue.Width, 1f / layer.SizeProperty.CurrentValue.Height));
 
             return counterRotatePath.Points;
         }
@@ -365,24 +395,54 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
             return mouseEventArgs.GetPosition((IInputElement) parent);
         }
 
-        private void ApplyShapeResize(SKRect newRect)
+        private float HorizontalResize(Layer layer, SKPoint position, ResizeOrigin origin)
         {
-            if (!(ProfileEditorService.SelectedProfileElement is Layer layer))
+            // Apply rotation to the mouse
-                return;
+            var points = UnTransformPoints(new[] {position, _dragStart}, layer, ShapeAnchor, false);
+            position = points[0];
+            var dragStart = points[1];
 
-            // TODO: Apply the translation
+            var shapePath = _layerEditorService.GetLayerPath(layer, true, false, false);
-            // Store the original position to create an offset for the anchor
+            var scalePerPixel = 1f / shapePath.Bounds.Width;
-            // var original = layer.PositionProperty.CurrentValue;
+            var anchorDistance = origin == ResizeOrigin.Left
-            // layer.LayerShape.SetFromUnscaledRectangle(newRect, ProfileEditorService.CurrentTime);
+                ? shapePath.Bounds.Left - ShapeAnchor.X
-            // var updated = layer.PositionProperty.CurrentValue;
+                : shapePath.Bounds.Right - ShapeAnchor.X;
-            // // Apply the offset to the anchor so it stays in at same spot
+            var anchorOffset = anchorDistance / shapePath.Bounds.Width;
-            // layer.AnchorPointProperty.SetCurrentValue(new SKPoint(
-            //     layer.AnchorPointProperty.CurrentValue.X + (original.X - updated.X),
-            //     layer.AnchorPointProperty.CurrentValue.Y + (original.Y - updated.Y)
-            // ), ProfileEditorService.CurrentTime);
 
-            // Update the preview
+            var pixelsToAdd = (position - dragStart).X / anchorOffset;
-            ProfileEditorService.UpdateProfilePreview();
+            var scaleToAdd = scalePerPixel * pixelsToAdd;
+
+            return Math.Max(0.001f, _dragStartScale.Width + scaleToAdd);
         }
+
+        private float VerticalResize(Layer layer, SKPoint position, ResizeOrigin origin)
+        {
+            // Apply rotation to the mouse
+            var points = UnTransformPoints(new[] {position, _dragStart}, layer, ShapeAnchor, false);
+            position = points[0];
+            var dragStart = points[1];
+
+            var shapePath = _layerEditorService.GetLayerPath(layer, true, false, false);
+            var scalePerPixel = 1f / shapePath.Bounds.Height;
+            var anchorDistance = origin == ResizeOrigin.Top
+                ? shapePath.Bounds.Top - ShapeAnchor.Y
+                : shapePath.Bounds.Bottom - ShapeAnchor.Y;
+            var anchorOffset = anchorDistance / shapePath.Bounds.Height;
+
+            var pixelsToAdd = (position - dragStart).Y / anchorOffset;
+            var scaleToAdd = scalePerPixel * pixelsToAdd;
+
+            return Math.Max(0.001f, _dragStartScale.Height + scaleToAdd);
+        }
+
+        #endregion
+    }
+
+    internal enum ResizeOrigin
+    {
+        Left,
+        Right,
+        Top,
+        Bottom
     }
 }