<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             xmlns:tools="clr-namespace:Artemis.UI.Screens.ProfileEditor.VisualEditor.Tools"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             x:Class="Artemis.UI.Screens.ProfileEditor.VisualEditor.Tools.TransformToolView"
             x:DataType="tools:TransformToolViewModel"
             ClipToBounds="False">
    <UserControl.Styles>
        <Style Selector=":is(Control).unscaled">
            <Setter Property="Transitions">
                <Setter.Value>
                    <Transitions>
                        <TransformOperationsTransition Property="RenderTransform" Duration="0:0:0.2" Easing="CubicEaseOut" />
                    </Transitions>
                </Setter.Value>
            </Setter>
        </Style>

        <!-- Container -->
        <Style Selector="Border#TransformationContainer">
            <Setter Property="ClipToBounds" Value="False" />
        </Style>

        <!-- Resize -->
        <Style Selector="Rectangle.transform-resize-visual">
            <Setter Property="Margin" Value="-5" />
            <Setter Property="Width" Value="10" />
            <Setter Property="Height" Value="10" />
            <Setter Property="Fill" Value="White" />
            <Setter Property="Stroke" Value="{DynamicResource SystemAccentColorLight2}" />
            <Setter Property="StrokeThickness" Value="1" />
            <Setter Property="StrokeJoin" Value="Round" />
        </Style>

        <Style Selector="Ellipse.transform-resize-handle">
            <Setter Property="Margin" Value="-15" />
            <Setter Property="Width" Value="30" />
            <Setter Property="Height" Value="30" />
            <Setter Property="Fill" Value="Transparent" />
        </Style>

        <!-- Rotate -->
        <Style Selector="Ellipse.transform-rotation-handle">
            <Setter Property="Margin" Value="-30" />
            <Setter Property="Width" Value="60" />
            <Setter Property="Height" Value="60" />
            <Setter Property="Fill" Value="Transparent" />
            <Setter Property="Cursor" Value="{DynamicResource RotateCursor}" />
        </Style>

        <!-- Movement -->
        <Style Selector="Rectangle.transform-movement-handle">
            <Setter Property="Fill" Value="Transparent" />
            <Setter Property="Cursor" Value="{DynamicResource DragCursor}" />
        </Style>

        <!-- Anchor -->
        <Style Selector="Panel.transform-anchor-handle">
            <Setter Property="Margin" Value="-18.5" />
            <Setter Property="Width" Value="37" />
            <Setter Property="Height" Value="37" />
            <Setter Property="Cursor" Value="SizeAll" />
        </Style>

        <Style Selector="Panel.transform-anchor-handle :is(Shape)">
            <Setter Property="Fill" Value="White" />
            <Setter Property="Stroke" Value="{DynamicResource SystemAccentColorLight2}" />
            <Setter Property="StrokeThickness" Value="4" />
        </Style>
    </UserControl.Styles>

    <Canvas ClipToBounds="False" UseLayoutRounding="False">
        <Border Name="TransformationContainer"
                Width="{CompiledBinding ShapeBounds.Width}"
                Height="{CompiledBinding ShapeBounds.Height}"
                Canvas.Left="{CompiledBinding ShapeBounds.Left}"
                Canvas.Top="{CompiledBinding ShapeBounds.Top}"
                RenderTransformOrigin="{CompiledBinding RelativeAnchor}">
            <Border.RenderTransform>
                <RotateTransform Angle="{CompiledBinding Rotation}" />
            </Border.RenderTransform>
            <Grid Name="HandleGrid">
                <!-- Render these first so that they are always behind the actual shape -->
                <Panel VerticalAlignment="Top" HorizontalAlignment="Left">
                    <Ellipse Name="RotateTopLeft"
                             Classes="transform-rotation-handle unscaled"
                             PointerPressed="RotationOnPointerPressed"
                             PointerReleased="RotationOnPointerReleased"
                             PointerMoved="RotationOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Top" HorizontalAlignment="Right">
                    <Ellipse Name="RotateTopRight"
                             Classes="transform-rotation-handle unscaled"
                             PointerPressed="RotationOnPointerPressed"
                             PointerReleased="RotationOnPointerReleased"
                             PointerMoved="RotationOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Bottom" HorizontalAlignment="Right">
                    <Ellipse Name="RotateBottomRight"
                             Classes="transform-rotation-handle unscaled"
                             PointerPressed="RotationOnPointerPressed"
                             PointerReleased="RotationOnPointerReleased"
                             PointerMoved="RotationOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Bottom" HorizontalAlignment="Left">
                    <Ellipse Name="RotateBottomLeft"
                             Classes="transform-rotation-handle unscaled"
                             PointerPressed="RotationOnPointerPressed"
                             PointerReleased="RotationOnPointerReleased"
                             PointerMoved="RotationOnPointerMoved" />
                </Panel>

                <Rectangle Classes="transform-movement-handle"
                           VerticalAlignment="Stretch"
                           HorizontalAlignment="Stretch"
                           PointerPressed="MoveOnPointerPressed"
                           PointerReleased="MoveOnPointerReleased"
                           PointerMoved="MoveOnPointerMoved" />

                <!-- Mutation points -->
                <Panel VerticalAlignment="Top" HorizontalAlignment="Center" Name="ResizeTopCenter">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Center" HorizontalAlignment="Right" Name="ResizeRightCenter">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Bottom" HorizontalAlignment="Center" Name="ResizeBottomCenter">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Center" HorizontalAlignment="Left" Name="ResizeLeftCenter">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Top" HorizontalAlignment="Left" Name="ResizeTopLeft">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Top" HorizontalAlignment="Right" Name="ResizeTopRight">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Bottom" HorizontalAlignment="Right" Name="ResizeBottomRight">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>
                <Panel VerticalAlignment="Bottom" HorizontalAlignment="Left" Name="ResizeBottomLeft">
                    <Rectangle Classes="transform-resize-visual unscaled" />
                    <Ellipse Classes="transform-resize-handle unscaled"
                             PointerPressed="ResizeOnPointerPressed"
                             PointerReleased="ResizeOnPointerReleased"
                             PointerMoved="ResizeOnPointerMoved" />
                </Panel>

                <Canvas Name="AnchorCanvas">
                    <Panel Background="Transparent"
                           Name="AnchorPoint"
                           Classes="transform-anchor-handle unscaled"
                           Canvas.Left="{CompiledBinding Anchor.X}"
                           Canvas.Top="{CompiledBinding Anchor.Y}"
                           PointerPressed="AnchorOnPointerPressed"
                           PointerReleased="AnchorOnPointerReleased"
                           PointerMoved="AnchorOnPointerMoved">
                        <Ellipse StrokeThickness="4" Width="14" Height="14" VerticalAlignment="Center" HorizontalAlignment="Center" />
                        <Line StartPoint="0,0" EndPoint="0,10" StrokeThickness="2" VerticalAlignment="Top" HorizontalAlignment="Center" />
                        <Line StartPoint="0,25" EndPoint="0,35" StrokeThickness="2" VerticalAlignment="Bottom" HorizontalAlignment="Center" />
                        <Line StartPoint="0,0" EndPoint="10,0" StrokeThickness="2" VerticalAlignment="Center" HorizontalAlignment="Left" />
                        <Line StartPoint="25,0" EndPoint="35,0" StrokeThickness="2" VerticalAlignment="Center" HorizontalAlignment="Right" />
                    </Panel>
                </Canvas>
            </Grid>
        </Border>
    </Canvas>
</UserControl>