Some attempts at proper anchor movement..

This commit is contained in:
SpoinkyNL committed 2020-01-20 08:53:17 +01:00
1 parent d79437b3fd
commit 41fbbbd87a
6 files changed
+269 -153

No files matched your search

@@ -5,12 +5,13 @@
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"
xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
mc:Ignorable="d"
d:DesignHeight="450"
d:DesignWidth="800"
d:DataContext="{d:DesignInstance {x:Type local:EditToolViewModel}}">
<Canvas UseLayoutRounding="False">
<Canvas >
<Canvas>
<!-- The part of the layer's shape that is inside the layer -->
<Path Data="{Binding ShapeGeometry, Mode=OneWay}"
Fill="Transparent"
@@ -20,8 +21,7 @@
Cursor="Hand"
MouseDown="{s:Action ShapeEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action Move}">
</Path>
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" />
@@ -34,11 +34,25 @@
<Rectangle Width="4" Height="4" Canvas.Left="{Binding LeftCenter.X}" Canvas.Top="{Binding LeftCenter.Y}" Fill="{DynamicResource SecondaryAccentBrush}" Margin="-2,-2,0,0" />
<!-- Anchor point -->
<materialDesign:PackIcon Kind="Crosshairs"
Width="8"
Height="8"
Foreground="{DynamicResource SecondaryAccentBrush}"
Canvas.Left="{Binding ShapeAnchor.X}"
Canvas.Top="{Binding ShapeAnchor.Y}"
Margin="-4,-4,0,0" />
<Ellipse MouseDown="{s:Action AnchorEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action AnchorMove}"
Width="6" Height="6" Fill="{DynamicResource SecondaryAccentBrush}" Canvas.Left="{Binding ShapeAnchor.X}" Canvas.Top="{Binding ShapeAnchor.Y}" Margin="-3,-3,0,0"
Cursor="SizeAll" />
Width="8"
Height="8"
Fill="Transparent"
Canvas.Left="{Binding ShapeAnchor.X}"
Canvas.Top="{Binding ShapeAnchor.Y}"
Margin="-4,-4,0,0"
Cursor="SizeAll">
</Ellipse>
</Canvas>
<Canvas>
<Canvas.RenderTransform>
@@ -48,45 +62,45 @@
<Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action TopLeftRotate}"
Width="15" Height="15"
Width="15" Height="15"
Canvas.Left="{Binding ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Blue"
Canvas.Top="{Binding ShapeRectangle.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 ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Red"
Margin="-3,-3,0,0"
Width="6"
Height="6"
Canvas.Left="{Binding ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Transparent"
Margin="-3,-3,0,0"
Cursor="SizeNWSE" />
<!-- Top center resize handle -->
<Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action TopCenterResize}"
Width="10"
Height="10"
Width="10"
Height="10"
Canvas.Left="{Binding ShapeRectangle.MidX}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Red"
Margin="-5,-5,0,0"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Transparent"
Margin="-5,-5,0,0"
Cursor="SizeNS" />
<!-- Top right rotate handle -->
<Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action TopRightRotate}"
Width="15"
Height="15"
Canvas.Left="{Binding ShapeRectangle.Right}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Blue"
Width="15"
Height="15"
Canvas.Left="{Binding ShapeRectangle.Right}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Transparent"
Margin="-3,-12,0,0"
Cursor="/Resources/aero_rotate_tr.cur" />
<!-- Top right resize handle -->
@@ -95,62 +109,62 @@
MouseMove="{s:Action TopRightResize}"
Width="6"
Height="6"
Canvas.Left="{Binding ShapeRectangle.Right}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Red"
Margin="-3,-3,0,0"
Canvas.Left="{Binding ShapeRectangle.Right}"
Canvas.Top="{Binding ShapeRectangle.Top}"
Fill="Transparent"
Margin="-3,-3,0,0"
Cursor="SizeNESW" />
<!-- Center right resize handle -->
<!-- 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="Red"
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="Blue"
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="Red"
Margin="-3,-3,0,0"
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"
Width="10"
Height="10"
Canvas.Left="{Binding ShapeRectangle.MidX}"
Canvas.Left="{Binding ShapeRectangle.MidX}"
Canvas.Top="{Binding ShapeRectangle.Bottom}"
Fill="Red"
Margin="-5,-5,0,0"
Fill="Transparent"
Margin="-5,-5,0,0"
Cursor="SizeNS" />
<!-- Bottom left rotate handle -->
<Rectangle MouseDown="{s:Action ShapeEditMouseDown}"
MouseUp="{s:Action ShapeEditMouseUp}"
@@ -158,8 +172,8 @@
Width="15"
Height="15"
Canvas.Left="{Binding ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.Bottom}"
Fill="Blue"
Canvas.Top="{Binding ShapeRectangle.Bottom}"
Fill="Transparent"
Margin="-12,-3,0,0"
Cursor="/Resources/aero_rotate_bl.cur" />
<!-- Bottom left resize handle -->
@@ -167,26 +181,26 @@
MouseUp="{s:Action ShapeEditMouseUp}"
MouseMove="{s:Action BottomLeftResize}"
Width="6"
Height="6"
Canvas.Left="{Binding ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.Bottom}"
Fill="Red"
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="Red"
Margin="-5,-5,0,0"
Canvas.Left="{Binding ShapeRectangle.Left}"
Canvas.Top="{Binding ShapeRectangle.MidY}"
Fill="Transparent"
Margin="-5,-5,0,0"
Cursor="SizeWE" />
</Canvas>
</Canvas>
</UserControl>
@@ -16,10 +16,10 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
private readonly ILayerEditorService _layerEditorService;
private bool _draggingHorizontally;
private bool _draggingVertically;
private double _dragOffsetX;
private double _dragOffsetY;
private Point _dragStart;
private bool _isDragging;
private Point _dragStart;
private Point _dragOffset;
private SKPoint _dragStartAnchor;
public EditToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService, ILayerEditorService layerEditorService)
: base(profileViewModel, profileEditorService)
@@ -38,6 +38,15 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
public RectangleGeometry ShapeGeometry { get; set; }
public TransformCollection ShapeTransformCollection { get; set; }
public SKPoint TopLeft { get; set; }
public SKPoint TopRight { get; set; }
public SKPoint BottomRight { get; set; }
public SKPoint BottomLeft { get; set; }
public SKPoint TopCenter { get; set; }
public SKPoint RightCenter { get; set; }
public SKPoint BottomCenter { get; set; }
public SKPoint LeftCenter { get; set; }
private void Update()
{
if (ProfileEditorService.SelectedProfileElement is Layer layer)
@@ -71,27 +80,18 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
}
}
public SKPoint TopLeft { get; set; }
public SKPoint TopRight { get; set; }
public SKPoint BottomRight { get; set; }
public SKPoint BottomLeft { get; set; }
public SKPoint TopCenter { get; set; }
public SKPoint RightCenter { get; set; }
public SKPoint BottomCenter { get; set; }
public SKPoint LeftCenter { get; set; }
public void ShapeEditMouseDown(object sender, MouseButtonEventArgs e)
{
if (_isDragging)
return;
((IInputElement) sender).CaptureMouse();
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
var dragStartPosition = GetRelativePosition(sender, e);
var skRect = layer.LayerShape.RenderRectangle;
_dragOffsetX = skRect.Left - dragStartPosition.X;
_dragOffsetY = skRect.Top - dragStartPosition.Y;
var anchor = _layerEditorService.GetLayerAnchor(layer, true);
_dragOffset = new Point(dragStartPosition.X - anchor.X - 1.45, dragStartPosition.Y - anchor.Y - 1.45);
_dragStart = dragStartPosition;
}
@@ -99,21 +99,31 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
_draggingHorizontally = false;
_draggingVertically = false;
((IInputElement) sender).CaptureMouse();
e.Handled = true;
}
public void AnchorEditMouseDown(object sender, MouseButtonEventArgs e)
{
if (_isDragging)
return;
// Use the regular mousedown
ShapeEditMouseDown(sender, e);
// Override the drag offset
var dragStartPosition = GetRelativePosition(sender, e);
// _dragOffsetX = AnchorSkPoint.X - dragStartPosition.X;
// _dragOffsetY = AnchorSkPoint.Y - dragStartPosition.Y;
_dragStart = dragStartPosition;
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
var dragStartPosition = GetRelativePosition(sender, e);
_dragOffset = new Point(TopLeft.X + (dragStartPosition.X - TopLeft.X), TopLeft.Y + (dragStartPosition.Y - TopLeft.Y));
_dragStartAnchor = _layerEditorService.GetLayerAnchor(layer, false);
_dragStart = dragStartPosition;
}
_isDragging = true;
_draggingHorizontally = false;
_draggingVertically = false;
((IInputElement) sender).CaptureMouse();
e.Handled = true;
}
public void ShapeEditMouseUp(object sender, MouseButtonEventArgs e)
@@ -134,9 +144,19 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
return;
var position = GetRelativePosition(sender, e);
var x = (float) (position.X + _dragOffsetX);
var y = (float) (position.Y + _dragOffsetY);
layer.LayerShape.SetFromUnscaledAnchor(new SKPoint(x, y), ProfileEditorService.CurrentTime);
var x = (float)(position.X - _dragOffset.X + _dragStartAnchor.X);
var y = (float)(position.Y - _dragOffset.Y + _dragStartAnchor.Y);
// Convert the desired X and Y position to a translation
var scaled = _layerEditorService.GetScaledPoint(layer, new SKPoint(x, y), false);
var currentAnchor = layer.AnchorPointProperty.CurrentValue;
var currentPos = layer.PositionProperty.CurrentValue;
layer.AnchorPointProperty.SetCurrentValue(scaled, ProfileEditorService.CurrentTime);
var positionOffsetX = (scaled.X - currentAnchor.X) * layer.SizeProperty.CurrentValue.Width;
var positionOffsetY = (scaled.Y - currentAnchor.Y) * layer.SizeProperty.CurrentValue.Height;
layer.PositionProperty.SetCurrentValue(new SKPoint(currentPos.X + positionOffsetX, currentPos.Y + positionOffsetY), ProfileEditorService.CurrentTime);
ProfileEditorService.UpdateProfilePreview();
}
@@ -146,16 +166,15 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
return;
var position = GetRelativePosition(sender, e);
var skRect = _layerEditorService.GetShapeRenderRect(layer.LayerShape).ToSKRect();
var x = (float) (position.X + _dragOffsetX);
var y = (float) (position.Y + _dragOffsetY);
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 = skRect.Left;
x = (float) (_dragStart.X - _dragOffset.X);
else if (_draggingHorizontally)
y = skRect.Top;
y = (float) (_dragStart.Y - _dragOffset.Y);
else
{
_draggingHorizontally = Math.Abs(position.X - _dragStart.X) > Math.Abs(position.Y - _dragStart.Y);
@@ -164,11 +183,7 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
}
}
// Convert the desired X and Y position to a translation
var layerRect = _layerEditorService.GetLayerRenderRect(layer).ToSKRect();
var translation = layer.PositionProperty.CurrentValue;
var scaled = _layerEditorService.GetScaledPoint(layer, new SKPoint(x , y));
Console.WriteLine(scaled);
var scaled = _layerEditorService.GetScaledPoint(layer, new SKPoint(x, y), true);
layer.PositionProperty.SetCurrentValue(scaled, ProfileEditorService.CurrentTime);
ProfileEditorService.UpdateProfilePreview();