Draggable numberbox - Added and use in editor

src/.idea/.idea.Artemis/.idea/avalonia.xml

@@ -15,13 +15,22 @@
         <entry key="Artemis.UI.Avalonia/Screens/SidebarView.axaml" value="Artemis.UI.Avalonia/Artemis.UI.Avalonia.csproj" />
         <entry key="Artemis.UI.Avalonia/Views/MainWindow.axaml" value="Artemis.UI.Avalonia/Artemis.UI.Avalonia.csproj" />
         <entry key="Artemis.UI.Shared/Controls/ArtemisIcon.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI.Shared/Controls/DraggableNumberBox.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI.Shared/Controls/EnumComboBox.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI.Shared/Controls/HotkeyBox.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI.Shared/Controls/ProfileConfigurationIcon.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI.Shared/Styles/Border.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI.Shared/Styles/Condensed.axaml" value="Artemis.UI.Windows/Artemis.UI.Windows.csproj" />
         <entry key="Artemis.UI.Shared/Styles/TextBlock.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI.Windows/App.axaml" value="Artemis.UI.Windows/Artemis.UI.Windows.csproj" />
         <entry key="Artemis.UI/DefaultTypes/PropertyInput/ColorGradientPropertyInputView.axaml" value="Artemis.UI.Windows/Artemis.UI.Windows.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/FloatPropertyInputView.axaml" value="Artemis.UI.Windows/Artemis.UI.Windows.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/FloatRangePropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/IntPropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/IntRangePropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/PropertyInputStyles.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI/DefaultTypes/PropertyInput/SKColorPropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
+        <entry key="Artemis.UI/DefaultTypes/PropertyInput/SKPointPropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI/DefaultTypes/PropertyInput/SKSizePropertyInputView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI/MainWindow.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />
         <entry key="Artemis.UI/Screens/Device/DevicePropertiesView.axaml" value="Artemis.UI.Linux/Artemis.UI.Linux.csproj" />

src/Artemis.Core/Models/Profile/LayerTransformProperties.cs

@@ -12,13 +12,13 @@ namespace Artemis.Core
         /// <summary>
         ///     The point at which the shape is attached to its position
         /// </summary>
-        [PropertyDescription(Description = "The point at which the shape is attached to its position", InputAffix = "%")]
+        [PropertyDescription(Description = "The point at which the shape is attached to its position", InputAffix = "%", InputStepSize = 0.001f)]
         public SKPointLayerProperty AnchorPoint { get; set; }
 
         /// <summary>
         ///     The position of the shape
         /// </summary>
-        [PropertyDescription(Description = "The position of the shape", InputAffix = "%")]
+        [PropertyDescription(Description = "The position of the shape", InputAffix = "%", InputStepSize = 0.001f)]
         public SKPointLayerProperty Position { get; set; }
 
         /// <summary>

src/Artemis.UI.Shared/Controls/DraggableNumberBox.axaml

@@ -0,0 +1,40 @@
+<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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
+             xmlns:sharedControls="clr-namespace:Artemis.UI.Shared.Controls"
+             xmlns:attachedProperties="clr-namespace:Artemis.UI.Shared.AttachedProperties"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="Artemis.UI.Shared.Controls.DraggableNumberBox">
+    <UserControl.Styles>
+        <Styles>
+            <Style Selector="sharedControls|DraggableNumberBox:not(:focus-within)">
+                <Setter Property="Cursor" Value="{DynamicResource DragHorizontalCursor}" />
+            </Style>
+
+            <Style Selector="sharedControls|DraggableNumberBox:focus-within Rectangle#DragCollider">
+                <Setter Property="IsHitTestVisible" Value="False" />
+            </Style>
+            <Style Selector="sharedControls|DraggableNumberBox:not(:focus-within) controls|NumberBox#NumberBox">
+                <Setter Property="IsHitTestVisible" Value="False" />
+            </Style>
+        </Styles>
+    </UserControl.Styles>
+
+    <Panel>
+        <controls:NumberBox Name="NumberBox"
+                            AcceptsExpression="True"
+                            Value="{Binding $parent[sharedControls:DraggableNumberBox].Value}"
+                            Minimum="{Binding $parent[sharedControls:DraggableNumberBox].Minimum}"
+                            Maximum="{Binding $parent[sharedControls:DraggableNumberBox].Maximum}"
+                            LargeChange="{Binding $parent[sharedControls:DraggableNumberBox].LargeChange}"
+                            SmallChange="{Binding $parent[sharedControls:DraggableNumberBox].SmallChange}"
+                            SimpleNumberFormat="{Binding $parent[sharedControls:DraggableNumberBox].SimpleNumberFormat}"
+                            attachedProperties:NumberBoxAssist.PrefixText="{Binding $parent[sharedControls:DraggableNumberBox].Prefix}"
+                            attachedProperties:NumberBoxAssist.SuffixText="{Binding $parent[sharedControls:DraggableNumberBox].Suffix}"
+                            HorizontalAlignment="{Binding $parent[sharedControls:DraggableNumberBox].HorizontalAlignment}" />
+        <Rectangle Name="DragCollider" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Fill="Transparent"></Rectangle>
+    </Panel>
+
+</UserControl>

src/Artemis.UI.Shared/Controls/DraggableNumberBox.axaml.cs

@@ -0,0 +1,179 @@
+using System;
+using System.Diagnostics;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Data;
+using Avalonia.Input;
+using Avalonia.Interactivity;
+using Avalonia.Markup.Xaml;
+using Avalonia.VisualTree;
+using FluentAvalonia.Core;
+using FluentAvalonia.UI.Controls;
+
+namespace Artemis.UI.Shared.Controls;
+
+public partial class DraggableNumberBox : UserControl
+{
+    /// <summary>
+    ///    Gets or sets the value of the number box.
+    /// </summary>
+    public static readonly StyledProperty<double> ValueProperty = AvaloniaProperty.Register<DraggableNumberBox, double>(nameof(Value), defaultBindingMode: BindingMode.TwoWay);
+
+    /// <summary>
+    ///     Gets or sets the value of the number box.
+    /// </summary>
+    public double Value
+    {
+        get => GetValue(ValueProperty);
+        set => SetValue(ValueProperty, value);
+    }
+
+    /// <summary>
+    ///    Gets or sets the minimum of the number box.
+    /// </summary>
+    public static readonly StyledProperty<double> MinimumProperty = AvaloniaProperty.Register<DraggableNumberBox, double>(nameof(Minimum), double.MinValue);
+
+    /// <summary>
+    ///     Gets or sets the minimum of the number box.
+    /// </summary>
+    public double Minimum
+    {
+        get => GetValue(MinimumProperty);
+        set => SetValue(MinimumProperty, value);
+    }
+
+    /// <summary>
+    ///    Gets or sets the maximum of the number box.
+    /// </summary>
+    public static readonly StyledProperty<double> MaximumProperty = AvaloniaProperty.Register<DraggableNumberBox, double>(nameof(Maximum), double.MaxValue);
+
+    /// <summary>
+    ///     Gets or sets the maximum of the number box.
+    /// </summary>
+    public double Maximum
+    {
+        get => GetValue(MaximumProperty);
+        set => SetValue(MaximumProperty, value);
+    }
+
+    public static readonly StyledProperty<double> LargeChangeProperty = AvaloniaProperty.Register<DraggableNumberBox, double>(nameof(LargeChange));
+
+    public double LargeChange
+    {
+        get => GetValue(LargeChangeProperty);
+        set => SetValue(LargeChangeProperty, value);
+    }
+
+    public static readonly StyledProperty<double> SmallChangeProperty = AvaloniaProperty.Register<DraggableNumberBox, double>(nameof(SmallChange));
+
+    public double SmallChange
+    {
+        get => GetValue(SmallChangeProperty);
+        set => SetValue(SmallChangeProperty, value);
+    }
+
+    public static readonly StyledProperty<string> SimpleNumberFormatProperty = AvaloniaProperty.Register<DraggableNumberBox, string>(nameof(SimpleNumberFormat));
+
+    public string SimpleNumberFormat
+    {
+        get => GetValue(SimpleNumberFormatProperty);
+        set => SetValue(SimpleNumberFormatProperty, value);
+    }
+
+    public static readonly StyledProperty<string> PrefixProperty = AvaloniaProperty.Register<DraggableNumberBox, string>(nameof(Prefix));
+
+    public string Prefix
+    {
+        get => GetValue(PrefixProperty);
+        set => SetValue(PrefixProperty, value);
+    }
+
+    public static readonly StyledProperty<string> SuffixProperty = AvaloniaProperty.Register<DraggableNumberBox, string>(nameof(Suffix));
+
+    public string Suffix
+    {
+        get => GetValue(SuffixProperty);
+        set => SetValue(SuffixProperty, value);
+    }
+
+    public event TypedEventHandler<DraggableNumberBox, EventArgs>? DragStarted;
+    public event TypedEventHandler<DraggableNumberBox, EventArgs>? DragFinished;
+
+    private readonly NumberBox _numberBox;
+    private TextBox? _inputTextBox;
+    private bool _moved;
+    private double _lastX;
+    private double _startX;
+
+    public DraggableNumberBox()
+    {
+        InitializeComponent();
+        _numberBox = this.Get<NumberBox>("NumberBox");
+
+        PointerPressed += OnPointerPressed;
+        PointerMoved += OnPointerMoved;
+        PointerReleased += OnPointerReleased;
+
+        AddHandler(KeyUpEvent, HandleKeyUp, RoutingStrategies.Direct | RoutingStrategies.Tunnel | RoutingStrategies.Bubble, true);
+    }
+
+    private void HandleKeyUp(object? sender, KeyEventArgs e)
+    {
+        if (e.Key == Key.Enter || e.Key == Key.Escape)
+            Parent?.Focus();
+    }
+
+    private void InitializeComponent()
+    {
+        AvaloniaXamlLoader.Load(this);
+    }
+
+    private void OnPointerPressed(object? sender, PointerPressedEventArgs e)
+    {
+        PointerPoint point = e.GetCurrentPoint(this);
+        _inputTextBox = _numberBox.FindDescendantOfType<TextBox>();
+        _moved = false;
+        _startX = point.Position.X;
+        e.Handled = true;
+    }
+
+    private void OnPointerMoved(object? sender, PointerEventArgs e)
+    {
+        PointerPoint point = e.GetCurrentPoint(this);
+        if (!_moved && Math.Abs(point.Position.X - _startX) < 2 || !point.Properties.IsLeftButtonPressed || _inputTextBox == null || _inputTextBox.IsFocused)
+        {
+            _lastX = point.Position.X;
+            return;
+        }
+
+        if (!_moved)
+        {
+            // Let our parent take focus, it would make more sense to take focus ourselves but that hides the collider
+            Parent?.Focus();
+            _moved = true;
+            e.Pointer.Capture(this);
+            DragStarted?.Invoke(this, EventArgs.Empty);
+        }
+
+        double smallChange = SmallChange != 0 ? SmallChange : 0.1;
+        double largeChange = LargeChange != 0 ? LargeChange : smallChange * 10;
+        double changeMultiplier = e.KeyModifiers.HasFlag(KeyModifiers.Shift) ? smallChange : largeChange;
+
+        Value += (point.Position.X - _lastX) * changeMultiplier;
+        _lastX = point.Position.X;
+        e.Handled = true;
+    }
+
+    private void OnPointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        if (!_moved)
+            _inputTextBox?.Focus();
+        else
+        {
+            _moved = false;
+            DragFinished?.Invoke(this, EventArgs.Empty);
+        }
+
+        e.Handled = true;
+    }
+}

src/Artemis.UI.Shared/Styles/Condensed.axaml

@@ -3,7 +3,8 @@
         xmlns:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
         xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.GradientPicker"
         xmlns:dataModelPicker="clr-namespace:Artemis.UI.Shared.DataModelPicker"
-        xmlns:controls1="clr-namespace:Artemis.UI.Shared">
+        xmlns:controls1="clr-namespace:Artemis.UI.Shared"
+        xmlns:controls2="clr-namespace:Artemis.UI.Shared.Controls">
     <Design.PreviewWith>
         <Border Padding="50">
             <StackPanel Spacing="5">
@@ -15,7 +16,9 @@
                 <TextBox Classes="condensed" Watermark="Watermark" />
 
                 <controls:NumberBox Value="1337"></controls:NumberBox>
-                <controls:NumberBox Classes="condensed" Value="1337"></controls:NumberBox>
+                <controls2:DraggableNumberBox Value="1337" HorizontalAlignment="Left"></controls2:DraggableNumberBox>
+                <controls:NumberBox Classes="condensed" Value="1337" ></controls:NumberBox>
+                <controls2:DraggableNumberBox Classes="condensed" Value="1337" HorizontalAlignment="Left"></controls2:DraggableNumberBox>
 
 				<ComboBox SelectedIndex="1">
                     <ComboBoxItem>Bluasdadseheh</ComboBoxItem>
@@ -42,25 +45,31 @@
 
     <!-- Add Styles Here -->
     <Style Selector="TextBox.condensed">
-        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Padding" Value="2" />
         <Setter Property="FontSize" Value="13" />
         <Setter Property="MinHeight" Value="24" />
     </Style>
 
     <Style Selector="controls|NumberBox.condensed /template/ TextBox#InputBox">
-        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Padding" Value="6 2" />
+        <Setter Property="FontSize" Value="13" />
+        <Setter Property="MinHeight" Value="24" />
+    </Style>
+    
+    <Style Selector="controls2|DraggableNumberBox.condensed controls|NumberBox /template/ TextBox#InputBox">
+        <Setter Property="Padding" Value="6 2" />
         <Setter Property="FontSize" Value="13" />
         <Setter Property="MinHeight" Value="24" />
     </Style>
 
     <Style Selector="ComboBox.condensed">
-        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Padding" Value="6 2" />
         <Setter Property="FontSize" Value="13" />
         <Setter Property="Height" Value="24" />
     </Style>
 
     <Style Selector="controls1|EnumComboBox.condensed > ComboBox">
-        <Setter Property="Padding" Value="4 2" />
+        <Setter Property="Padding" Value="6 2" />
         <Setter Property="FontSize" Value="13" />
         <Setter Property="Height" Value="24" />
     </Style>

src/Artemis.UI/DefaultTypes/PropertyInput/FloatPropertyInputView.axaml

@@ -2,22 +2,24 @@
              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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-             xmlns:shared="clr-namespace:Artemis.UI.Shared.AttachedProperties;assembly=Artemis.UI.Shared"
              xmlns:propertyInput="clr-namespace:Artemis.UI.DefaultTypes.PropertyInput"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.DefaultTypes.PropertyInput.FloatPropertyInputView"
              x:DataType="propertyInput:FloatPropertyInputViewModel">
 	<UserControl.Styles>
 		<StyleInclude Source="/DefaultTypes/PropertyInput/PropertyInputStyles.axaml" />
 	</UserControl.Styles>
-    <controls:NumberBox Classes="condensed tooltip-validation-left"
+    <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
                         MinWidth="80"
                         Value="{CompiledBinding InputValue}"
-                        SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}" 
+                        Prefix="{CompiledBinding Prefix}"
-                        AcceptsExpression="True"
+                        Suffix="{CompiledBinding Affix}"
+                        Minimum="{CompiledBinding MinInputValue}"
+                        Maximum="{CompiledBinding MaxInputValue}"
+                        SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
                         SimpleNumberFormat="F3"
                         VerticalAlignment="Center"
-                        shared:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                        DragStarted="DraggableNumberBox_OnDragStarted"
-                        shared:NumberBoxAssist.SuffixText="{CompiledBinding Affix}" />
+                        DragFinished="DraggableNumberBox_OnDragFinished"/>
 </UserControl>

src/Artemis.UI/DefaultTypes/PropertyInput/FloatPropertyInputView.axaml.cs

@@ -1,4 +1,5 @@
-using Avalonia.Input;
+using System;
+using Artemis.UI.Shared.Controls;
 using Avalonia.Markup.Xaml;
 using Avalonia.ReactiveUI;
 
@@ -9,7 +10,6 @@ public class FloatPropertyInputView : ReactiveUserControl<FloatPropertyInputView
     public FloatPropertyInputView()
     {
         InitializeComponent();
-        AddHandler(KeyUpEvent, OnRoutedKeyUp, handledEventsToo: true);
     }
 
     private void InitializeComponent()
@@ -17,9 +17,13 @@ public class FloatPropertyInputView : ReactiveUserControl<FloatPropertyInputView
         AvaloniaXamlLoader.Load(this);
     }
 
-    private void OnRoutedKeyUp(object? sender, KeyEventArgs e)
+    private void DraggableNumberBox_OnDragStarted(DraggableNumberBox sender, EventArgs args)
     {
-        if (e.Key == Key.Enter || e.Key == Key.Escape)
+        ViewModel?.StartPreview();
-            FocusManager.Instance!.Focus(null);
+    }
+
+    private void DraggableNumberBox_OnDragFinished(DraggableNumberBox sender, EventArgs args)
+    {
+        ViewModel?.ApplyPreview();
     }
 }

src/Artemis.UI/DefaultTypes/PropertyInput/FloatPropertyInputViewModel.cs

@@ -12,10 +12,20 @@ public class FloatPropertyInputViewModel : PropertyInputViewModel<float>
         : base(layerProperty, profileEditorService, propertyInputService)
     {
         if (LayerProperty.PropertyDescription.MinInputValue.IsNumber())
-            this.ValidationRule(vm => vm.InputValue, i => i >= Convert.ToSingle(LayerProperty.PropertyDescription.MinInputValue),
+        {
-                $"Value must be equal to or greater than {LayerProperty.PropertyDescription.MinInputValue}.");
+            float minInputValue = Convert.ToSingle(LayerProperty.PropertyDescription.MinInputValue);
+            this.ValidationRule(vm => vm.InputValue, i => i >= minInputValue, $"Value must be equal to or greater than {LayerProperty.PropertyDescription.MinInputValue}.");
+            MinInputValue = minInputValue;
+        }
+
         if (LayerProperty.PropertyDescription.MaxInputValue.IsNumber())
-            this.ValidationRule(vm => vm.InputValue, i => i <= Convert.ToSingle(LayerProperty.PropertyDescription.MaxInputValue),
+        {
-                $"Value must be smaller than {LayerProperty.PropertyDescription.MaxInputValue}.");
+            float maxInputValue = Convert.ToSingle(LayerProperty.PropertyDescription.MaxInputValue);
+            this.ValidationRule(vm => vm.InputValue, i => i <= maxInputValue, $"Value must be smaller than {LayerProperty.PropertyDescription.MaxInputValue}.");
+            MaxInputValue = maxInputValue;
+        }
     }
+
+    public float MinInputValue { get; } = float.MinValue;
+    public float MaxInputValue { get; } = float.MaxValue;
 }

src/Artemis.UI/DefaultTypes/PropertyInput/IntPropertyInputView.axaml

@@ -2,18 +2,24 @@
              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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-             xmlns:shared="clr-namespace:Artemis.UI.Shared.AttachedProperties;assembly=Artemis.UI.Shared"
              xmlns:propertyInput="clr-namespace:Artemis.UI.DefaultTypes.PropertyInput"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.DefaultTypes.PropertyInput.IntPropertyInputView"
              x:DataType="propertyInput:IntPropertyInputViewModel">
-    <controls:NumberBox Classes="condensed" 
+    <UserControl.Styles>
-                        MinWidth="80"
+        <StyleInclude Source="/DefaultTypes/PropertyInput/PropertyInputStyles.axaml" />
-                        Value="{CompiledBinding InputValue}"
+    </UserControl.Styles>
-                        SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+    <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
-                        AcceptsExpression="True"
+                                 MinWidth="80"
-                        VerticalAlignment="Center"
+                                 Value="{CompiledBinding InputValue}"
-                        shared:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                                 Prefix="{CompiledBinding Prefix}"
-                        shared:NumberBoxAssist.SuffixText="{CompiledBinding Affix}"/>
+                                 Suffix="{CompiledBinding Affix}"
+                                 Minimum="{CompiledBinding MinInputValue}"
+                                 Maximum="{CompiledBinding MaxInputValue}"
+                                 SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                 SimpleNumberFormat="F1"
+                                 VerticalAlignment="Center"
+                                 DragStarted="DraggableNumberBox_OnDragStarted"
+                                 DragFinished="DraggableNumberBox_OnDragFinished"/>
 </UserControl>

src/Artemis.UI/DefaultTypes/PropertyInput/IntPropertyInputView.axaml.cs

@@ -1,4 +1,5 @@
-using Avalonia.Input;
+using System;
+using Artemis.UI.Shared.Controls;
 using Avalonia.Markup.Xaml;
 using Avalonia.ReactiveUI;
 
@@ -9,17 +10,20 @@ public class IntPropertyInputView : ReactiveUserControl<IntPropertyInputViewMode
     public IntPropertyInputView()
     {
         InitializeComponent();
-        AddHandler(KeyUpEvent, OnRoutedKeyUp, handledEventsToo: true);
     }
 
     private void InitializeComponent()
     {
         AvaloniaXamlLoader.Load(this);
     }
-
+    
-    private void OnRoutedKeyUp(object? sender, KeyEventArgs e)
+    private void DraggableNumberBox_OnDragStarted(DraggableNumberBox sender, EventArgs args)
     {
-        if (e.Key == Key.Enter || e.Key == Key.Escape)
+        ViewModel?.StartPreview();
-            FocusManager.Instance!.Focus(null);
+    }
+
+    private void DraggableNumberBox_OnDragFinished(DraggableNumberBox sender, EventArgs args)
+    {
+        ViewModel?.ApplyPreview();
     }
 }

src/Artemis.UI/DefaultTypes/PropertyInput/IntPropertyInputViewModel.cs

@@ -12,10 +12,20 @@ public class IntPropertyInputViewModel : PropertyInputViewModel<int>
         : base(layerProperty, profileEditorService, propertyInputService)
     {
         if (LayerProperty.PropertyDescription.MinInputValue.IsNumber())
-            this.ValidationRule(vm => vm.InputValue, i => i >= Convert.ToInt32(LayerProperty.PropertyDescription.MinInputValue),
+        {
-                $"Value must be equal to or greater than {LayerProperty.PropertyDescription.MinInputValue}.");
+            int minInputValue = Convert.ToInt32(LayerProperty.PropertyDescription.MinInputValue);
+            this.ValidationRule(vm => vm.InputValue, i => i >= minInputValue, $"Value must be equal to or greater than {LayerProperty.PropertyDescription.MinInputValue}.");
+            MinInputValue = minInputValue;
+        }
+
         if (LayerProperty.PropertyDescription.MaxInputValue.IsNumber())
-            this.ValidationRule(vm => vm.InputValue, i => i < Convert.ToInt32(LayerProperty.PropertyDescription.MaxInputValue), 
+        {
-                $"Value must be smaller than {LayerProperty.PropertyDescription.MaxInputValue}.");
+            int maxInputValue = Convert.ToInt32(LayerProperty.PropertyDescription.MaxInputValue);
+            this.ValidationRule(vm => vm.InputValue, i => i < maxInputValue, $"Value must be smaller than {LayerProperty.PropertyDescription.MaxInputValue}.");
+            MaxInputValue = maxInputValue;
+        }
     }
+
+    public int MinInputValue { get; } = int.MinValue;
+    public int MaxInputValue { get; } = int.MaxValue;
 }

src/Artemis.UI/DefaultTypes/PropertyInput/SKPointPropertyInputView.axaml

@@ -2,31 +2,35 @@
              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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-             xmlns:attachedProperties="clr-namespace:Artemis.UI.Shared.AttachedProperties;assembly=Artemis.UI.Shared"
              xmlns:propertyInput="clr-namespace:Artemis.UI.DefaultTypes.PropertyInput"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.DefaultTypes.PropertyInput.SKPointPropertyInputView"
              x:DataType="propertyInput:SKPointPropertyInputViewModel">
+    
     <StackPanel Orientation="Horizontal" Spacing="5">
-        <controls:NumberBox Classes="condensed"
+        <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
-                            Value="{CompiledBinding X}"
+                                     MinWidth="80"
-                            MinWidth="80"
+                                     Value="{CompiledBinding X}"
-                            SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                     Prefix="{CompiledBinding Prefix}"
-                            ToolTip.Tip="X-coordinate (horizontal)"
+                                     Suffix="{CompiledBinding Affix}"
-                            SimpleNumberFormat="F3"
+                                     SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
-                            VerticalAlignment="Center"
+                                     SimpleNumberFormat="F3"
-                            attachedProperties:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                                     VerticalAlignment="Center"
-                            attachedProperties:NumberBoxAssist.SuffixText="{CompiledBinding Affix}"/>
+                                     ToolTip.Tip="X-coordinate (horizontal)"
+                                     DragStarted="DraggableNumberBox_OnDragStarted"
+                                     DragFinished="DraggableNumberBox_OnDragFinished"/>
         <TextBlock VerticalAlignment="Center">,</TextBlock>
-        <controls:NumberBox Classes="condensed"
+        <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
-                            Value="{CompiledBinding Y}"
+                                     MinWidth="80"
-                            MinWidth="80"
+                                     Value="{CompiledBinding Y}"
-                            SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                     Prefix="{CompiledBinding Prefix}"
-                            ToolTip.Tip="Y-coordinate (vertical)"
+                                     Suffix="{CompiledBinding Affix}"
-                            SimpleNumberFormat="F3"
+                                     SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
-                            VerticalAlignment="Center"
+                                     SimpleNumberFormat="F3"
-                            attachedProperties:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                                     VerticalAlignment="Center"
-                            attachedProperties:NumberBoxAssist.SuffixText="{CompiledBinding Affix}"/>
+                                     ToolTip.Tip="Y-coordinate (vertical)"
+                                     DragStarted="DraggableNumberBox_OnDragStarted"
+                                     DragFinished="DraggableNumberBox_OnDragFinished"/>
     </StackPanel>
 </UserControl>

src/Artemis.UI/DefaultTypes/PropertyInput/SKPointPropertyInputView.axaml.cs

@@ -1,6 +1,5 @@
-using Avalonia;
+using System;
-using Avalonia.Controls;
+using Artemis.UI.Shared.Controls;
-using Avalonia.Input;
 using Avalonia.Markup.Xaml;
 using Avalonia.ReactiveUI;
 
@@ -11,7 +10,6 @@ namespace Artemis.UI.DefaultTypes.PropertyInput
         public SKPointPropertyInputView()
         {
             InitializeComponent();
-            AddHandler(KeyUpEvent, OnRoutedKeyUp, handledEventsToo: true);
         }
 
         private void InitializeComponent()
@@ -19,10 +17,14 @@ namespace Artemis.UI.DefaultTypes.PropertyInput
             AvaloniaXamlLoader.Load(this);
         }
 
-        private void OnRoutedKeyUp(object? sender, KeyEventArgs e)
+        private void DraggableNumberBox_OnDragStarted(DraggableNumberBox sender, EventArgs args)
         {
-            if (e.Key == Key.Enter || e.Key == Key.Escape)
+            ViewModel?.StartPreview();
-                FocusManager.Instance!.Focus(null);
+        }
+
+        private void DraggableNumberBox_OnDragFinished(DraggableNumberBox sender, EventArgs args)
+        {
+            ViewModel?.ApplyPreview();
         }
     }
 }

src/Artemis.UI/DefaultTypes/PropertyInput/SKSizePropertyInputView.axaml

@@ -2,30 +2,34 @@
              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:controls="clr-namespace:FluentAvalonia.UI.Controls;assembly=FluentAvalonia"
-             xmlns:attachedProperties="clr-namespace:Artemis.UI.Shared.AttachedProperties;assembly=Artemis.UI.Shared"
              xmlns:propertyInput="clr-namespace:Artemis.UI.DefaultTypes.PropertyInput"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:Class="Artemis.UI.DefaultTypes.PropertyInput.SKSizePropertyInputView"
              x:DataType="propertyInput:SKSizePropertyInputViewModel">
     <StackPanel Orientation="Horizontal" Spacing="5">
-        <controls:NumberBox Classes="condensed"
+        <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
-                            Value="{CompiledBinding Height}"
+                                      MinWidth="80"
-                            MinWidth="80"
+                                      Value="{CompiledBinding Height}"
-                            SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                      Prefix="{CompiledBinding Prefix}"
-                            ToolTip.Tip="Height"
+                                      Suffix="{CompiledBinding Affix}"
-                            SimpleNumberFormat="F3"
+                                      SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
-                            VerticalAlignment="Center"
+                                      SimpleNumberFormat="F3"
-                            attachedProperties:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                                      VerticalAlignment="Center"
-                            attachedProperties:NumberBoxAssist.SuffixText="{CompiledBinding Affix}"/>
+                                      ToolTip.Tip="Height"
+                                      DragStarted="DraggableNumberBox_OnDragStarted"
+                                      DragFinished="DraggableNumberBox_OnDragFinished"/>
         <TextBlock VerticalAlignment="Center">,</TextBlock>
-        <controls:NumberBox Classes="condensed"
+        <controls:DraggableNumberBox Classes="condensed tooltip-validation-left"
-                            Value="{CompiledBinding Width}"
+                                      MinWidth="80"
-                            MinWidth="80"
+                                      Value="{CompiledBinding Width}"
-                            SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
+                                      Prefix="{CompiledBinding Prefix}"
-                            SimpleNumberFormat="F3"
+                                      Suffix="{CompiledBinding Affix}"
-                            VerticalAlignment="Center"
+                                      SmallChange="{Binding LayerProperty.PropertyDescription.InputStepSize}"
-                            attachedProperties:NumberBoxAssist.PrefixText="{CompiledBinding Prefix}"
+                                      SimpleNumberFormat="F3"
-                            attachedProperties:NumberBoxAssist.SuffixText="{CompiledBinding Affix}"/>
+                                      VerticalAlignment="Center"
+                                      ToolTip.Tip="Width"
+                                      DragStarted="DraggableNumberBox_OnDragStarted"
+                                      DragFinished="DraggableNumberBox_OnDragFinished"/>
     </StackPanel>
 </UserControl>

src/Artemis.UI/DefaultTypes/PropertyInput/SKSizePropertyInputView.axaml.cs

@@ -1,6 +1,5 @@
-using Avalonia;
+using System;
-using Avalonia.Controls;
+using Artemis.UI.Shared.Controls;
-using Avalonia.Input;
 using Avalonia.Markup.Xaml;
 using Avalonia.ReactiveUI;
 
@@ -11,7 +10,6 @@ namespace Artemis.UI.DefaultTypes.PropertyInput
         public SKSizePropertyInputView()
         {
             InitializeComponent();
-            AddHandler(KeyUpEvent, OnRoutedKeyUp, handledEventsToo: true);
         }
 
         private void InitializeComponent()
@@ -19,10 +17,14 @@ namespace Artemis.UI.DefaultTypes.PropertyInput
             AvaloniaXamlLoader.Load(this);
         }
 
-        private void OnRoutedKeyUp(object? sender, KeyEventArgs e)
+        private void DraggableNumberBox_OnDragStarted(DraggableNumberBox sender, EventArgs args)
         {
-            if (e.Key == Key.Enter || e.Key == Key.Escape)
+            ViewModel?.StartPreview();
-                FocusManager.Instance!.Focus(null);
+        }
+
+        private void DraggableNumberBox_OnDragFinished(DraggableNumberBox sender, EventArgs args)
+        {
+            ViewModel?.ApplyPreview();
         }
     }
-}
+}

src/Artemis.UI/Screens/Workshop/WorkshopView.axaml

@@ -8,6 +8,7 @@
              xmlns:workshop="clr-namespace:Artemis.UI.Screens.Workshop"
              xmlns:shared="clr-namespace:Artemis.UI.Shared;assembly=Artemis.UI.Shared"
              xmlns:gradientPicker="clr-namespace:Artemis.UI.Shared.GradientPicker;assembly=Artemis.UI.Shared"
+             xmlns:controls="clr-namespace:Artemis.UI.Shared.Controls;assembly=Artemis.UI.Shared"
              mc:Ignorable="d" d:DesignWidth="800"
              x:Class="Artemis.UI.Screens.Workshop.WorkshopView"
              x:DataType="workshop:WorkshopViewModel">
@@ -41,6 +42,10 @@
                             attachedProperties:TextBoxAssist.PrefixText="$"
                             attachedProperties:TextBoxAssist.SuffixText="%">
                         </TextBox>
+                        
+                        <TextBlock Classes="h4" Text="{CompiledBinding TestValue}"/>
+                        <controls:DraggableNumberBox Value="{CompiledBinding TestValue}"/>
+                        <controls:DraggableNumberBox Value="{CompiledBinding TestValue}" Classes="condensed"/>
 
                         <StackPanel Orientation="Horizontal" Spacing="5">
                             <Border Classes="card" Cursor="{CompiledBinding Cursor}">

src/Artemis.UI/Screens/Workshop/WorkshopViewModel.cs

@@ -25,6 +25,7 @@ public class WorkshopViewModel : MainScreenViewModel
     };
 
     private StandardCursorType _selectedCursor;
+    private double _testValue;
 
     public WorkshopViewModel(IScreen hostScreen, INotificationService notificationService) : base(hostScreen, "workshop")
     {
@@ -51,6 +52,12 @@ public class WorkshopViewModel : MainScreenViewModel
         set => RaiseAndSetIfChanged(ref _colorGradient, value);
     }
 
+    public double TestValue
+    {
+        get => _testValue;
+        set => RaiseAndSetIfChanged(ref _testValue, value);
+    }
+
     public void CreateRandomGradient()
     {
         ColorGradient = ColorGradient.GetRandom(6);