Restructured the VM/Vs folder layout while it's still feasible

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

@@ -0,0 +1,51 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileDeviceView"
+             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:converters="clr-namespace:Artemis.UI.Converters"
+             xmlns:visualization="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
+             mc:Ignorable="d"
+             d:DataContext="{d:DesignInstance {x:Type visualization:ProfileDeviceViewModel}}"
+             d:DesignHeight="450" d:DesignWidth="800">
+    <UserControl.Resources>
+        <converters:NullToImageConverter x:Key="NullToImageConverter" />
+        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
+    </UserControl.Resources>
+    <Grid>
+        <!-- Device image with fallback -->
+        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}, Mode=OneWay}" />
+
+        <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
+                   Stroke="{DynamicResource ControlBorderBrush}"
+                   StrokeThickness="1"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}, Mode=OneWay}" />
+        <TextBlock Text="{Binding Device.RgbDevice.DeviceInfo.DeviceName}"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}, Mode=OneWay}"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   TextWrapping="Wrap"
+                   TextAlignment="Center" />
+
+        <!-- LEDs -->
+        <ItemsControl ItemsSource="{Binding Leds}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemContainerStyle>
+                <Style TargetType="{x:Type ContentPresenter}">
+                    <Setter Property="Canvas.Left" Value="{Binding X, Mode=OneWay}" />
+                    <Setter Property="Canvas.Top" Value="{Binding Y, Mode=OneWay}" />
+                </Style>
+            </ItemsControl.ItemContainerStyle>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl Width="{Binding Width, Mode=OneWay}" Height="{Binding Height, Mode=OneWay}" s:View.Model="{Binding}" />
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,79 @@
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Threading.Tasks;
+using System.Windows;
+using Artemis.Core.Models.Surface;
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
+{
+    public class ProfileDeviceViewModel : PropertyChangedBase
+    {
+        public ProfileDeviceViewModel(Device device)
+        {
+            Device = device;
+            Leds = new ObservableCollection<ProfileLedViewModel>();
+
+            if (Device.RgbDevice != null)
+                Task.Run(AddLedsAsync);
+        }
+
+        public ObservableCollection<ProfileLedViewModel> Leds { get; set; }
+        public Device Device { get; set; }
+        public bool AddedLeds { get; private set; }
+
+        public double X
+        {
+            get => Device.X;
+            set => Device.X = value;
+        }
+
+        public double Y
+        {
+            get => Device.Y;
+            set => Device.Y = value;
+        }
+
+        public int ZIndex
+        {
+            get => Device.ZIndex;
+            set => Device.ZIndex = value;
+        }
+
+
+        public Rect DeviceRectangle => Device.RgbDevice == null
+            ? new Rect()
+            : new Rect(X, Y, Device.RgbDevice.Size.Width, Device.RgbDevice.Size.Height);
+
+        /// <summary>
+        ///     Adds LEDs in batches of 5 to avoid UI freezes
+        /// </summary>
+        /// <returns></returns>
+        private async Task AddLedsAsync()
+        {
+            var index = 0;
+            foreach (var led in Device.RgbDevice.ToList())
+            {
+                Execute.OnUIThreadSync(() => Leds.Add(new ProfileLedViewModel(led)));
+                if (index % 5 == 0)
+                    await Task.Delay(1);
+
+                index++;
+            }
+
+            AddedLeds = true;
+        }
+
+        /// <summary>
+        ///     Update the color of all LEDs if finished adding
+        /// </summary>
+        public void Update()
+        {
+            if (!AddedLeds)
+                return;
+
+            foreach (var ledViewModel in Leds)
+                ledViewModel.Update();
+        }
+    }
+}

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

@@ -0,0 +1,32 @@
+<UserControl
+    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
+    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+    xmlns:converters="clr-namespace:Artemis.UI.Converters"
+    xmlns:visualization="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization"
+    x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileLedView"
+    mc:Ignorable="d"
+    d:DataContext="{d:DesignInstance {x:Type visualization:ProfileLedViewModel}}"
+    d:DesignHeight="25" d:DesignWidth="25">
+    <UserControl.Resources>
+        <converters:NullToImageConverter x:Key="NullToImageConverter" />
+    </UserControl.Resources>
+    <Canvas Width="{Binding Width, Mode=OneWay}" Height="{Binding Height, Mode=OneWay}">
+        <Canvas.Background>
+            <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="Fill"
+                        ImageSource="{Binding Led.Image, Converter={StaticResource NullToImageConverter}, Mode=OneWay}" />
+        </Canvas.Background>
+
+        <Path Data="{Binding DisplayGeometry, Mode=OneWay}" ClipToBounds="False">
+            <Path.Fill>
+                <SolidColorBrush Color="{Binding DisplayColor, Mode=OneWay}" Opacity="0.333" />
+            </Path.Fill>
+        </Path>
+        <Path Data="{Binding StrokeGeometry, Mode=OneWay}" ClipToBounds="False">
+            <Path.Fill>
+                <SolidColorBrush Color="{Binding DisplayColor, Mode=OneWay}" />
+            </Path.Fill>
+        </Path>
+    </Canvas>
+</UserControl>

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

@@ -0,0 +1,113 @@
+using System;
+using System.Windows;
+using System.Windows.Media;
+using Artemis.UI.Extensions;
+using RGB.NET.Core;
+using Stylet;
+using Color = System.Windows.Media.Color;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
+{
+    public class ProfileLedViewModel : PropertyChangedBase
+    {
+        public ProfileLedViewModel(Led led)
+        {
+            Led = led;
+            X = Led.LedRectangle.X;
+            Y = Led.LedRectangle.Y;
+            Width = Led.LedRectangle.Width;
+            Height = Led.LedRectangle.Height;
+
+            Execute.OnUIThread(CreateLedGeometry);
+        }
+
+        public Led Led { get; }
+
+        public double X { get; }
+        public double Y { get; }
+        public double Width { get; }
+        public double Height { get; }
+
+        public Geometry DisplayGeometry { get; private set; }
+        public Geometry StrokeGeometry { get; private set; }
+        public Color DisplayColor { get; private set; }
+
+        private void CreateLedGeometry()
+        {
+            switch (Led.Shape)
+            {
+                case Shape.Custom:
+                    if (Led.Device.DeviceInfo.DeviceType == RGBDeviceType.Keyboard || Led.Device.DeviceInfo.DeviceType == RGBDeviceType.Keypad)
+                        CreateCustomGeometry(2.0);
+                    else
+                        CreateCustomGeometry(1.0);
+                    break;
+                case Shape.Rectangle:
+                    if (Led.Device.DeviceInfo.DeviceType == RGBDeviceType.Keyboard || Led.Device.DeviceInfo.DeviceType == RGBDeviceType.Keypad)
+                        CreateKeyCapGeometry();
+                    else
+                        CreateRectangleGeometry();
+                    break;
+                case Shape.Circle:
+                    CreateCircleGeometry();
+                    break;
+                default:
+                    throw new ArgumentOutOfRangeException();
+            }
+
+            // Stroke geometry is the display geometry excluding the inner geometry
+            StrokeGeometry = DisplayGeometry.GetWidenedPathGeometry(new Pen(null, 1.0), 0.1, ToleranceType.Absolute);
+            DisplayGeometry.Freeze();
+            StrokeGeometry.Freeze();
+        }
+
+        private void CreateRectangleGeometry()
+        {
+            DisplayGeometry = new RectangleGeometry(new Rect(0.5, 0.5, Led.LedRectangle.Width - 1, Led.LedRectangle.Height - 1));
+        }
+
+        private void CreateCircleGeometry()
+        {
+            DisplayGeometry = new EllipseGeometry(new Rect(0.5, 0.5, Led.LedRectangle.Width - 1, Led.LedRectangle.Height - 1));
+        }
+
+        private void CreateKeyCapGeometry()
+        {
+            DisplayGeometry = new RectangleGeometry(new Rect(1, 1, Led.LedRectangle.Width - 2, Led.LedRectangle.Height - 2), 1.6, 1.6);
+        }
+
+        private void CreateCustomGeometry(double deflateAmount)
+        {
+            try
+            {
+                DisplayGeometry = Geometry.Combine(
+                    Geometry.Empty,
+                    Geometry.Parse(Led.ShapeData),
+                    GeometryCombineMode.Union,
+                    new TransformGroup
+                    {
+                        Children = new TransformCollection
+                        {
+                            new ScaleTransform(Led.LedRectangle.Width - deflateAmount, Led.LedRectangle.Height - deflateAmount),
+                            new TranslateTransform(deflateAmount / 2, deflateAmount / 2)
+                        }
+                    }
+                );
+            }
+            catch (Exception)
+            {
+                CreateRectangleGeometry();
+            }
+        }
+
+        public void Update()
+        {
+            var newColor = Led.Color.ToMediaColor();
+            Execute.OnUIThread(() =>
+            {
+                if (!DisplayColor.Equals(newColor))
+                    DisplayColor = newColor;
+            });
+        }
+    }
+}