Split device views/VMs for surface and profile editors

Added support for devices without images to the surface editor

src/Artemis.Core/RGB.NET/DirectBitmap.cs

@@ -43,10 +43,14 @@ namespace Artemis.Core.RGB.NET
         public Color GetPixel(int x, int y)
         {
             var index = x + y * Width;
-            var col = Bits[index];
+            if (index >= 0 && index - 1 <= Bits.Length)
-            var result = Color.FromArgb(col);
+            {
+                var col = Bits[index];
+                var result = Color.FromArgb(col);
 
-            return result;
+                return result;
+            }
+            return Color.Black;
         }
     }
 }

src/Artemis.UI/Artemis.UI.csproj

@@ -148,16 +148,19 @@
     <Compile Include="Adorners\BoundingBoxAdorner.cs" />
     <Compile Include="Bootstrapper.cs" />
     <Compile Include="Converters\ColorToSolidColorBrushConverter.cs" />
+    <Compile Include="Converters\NullToVisibilityConverter.cs" />
     <Compile Include="Extensions\RgbColorExtensions.cs" />
     <Compile Include="Extensions\RgbRectangleExtensions.cs" />
     <Compile Include="Ninject\UIModule.cs" />
     <Compile Include="Services\Interfaces\IArtemisUIService.cs" />
     <Compile Include="Stylet\ArtemisViewManager.cs" />
     <Compile Include="Stylet\NinjectBootstrapper.cs" />
+    <Compile Include="ViewModels\Controls\ProfileEditor\ProfileDeviceViewModel.cs" />
+    <Compile Include="ViewModels\Controls\ProfileEditor\ProfileLedViewModel.cs" />
+    <Compile Include="ViewModels\Controls\SurfaceEditor\SurfaceLedViewModel.cs" />
+    <Compile Include="ViewModels\Controls\SurfaceEditor\SurfaceDeviceViewModel.cs" />
     <Compile Include="ViewModels\Screens\SurfaceEditorViewModel.cs" />
     <Compile Include="ViewModels\Interfaces\IEditorViewModel.cs" />
-    <Compile Include="ViewModels\Controls\RgbDevice\RgbDeviceViewModel.cs" />
-    <Compile Include="ViewModels\Controls\RgbDevice\RgbLedViewModel.cs" />
     <Compile Include="ViewModels\Controls\Settings\RgbDeviceSettingsViewModel.cs" />
     <Compile Include="ViewModels\Interfaces\IHomeViewModel.cs" />
     <Compile Include="ViewModels\Interfaces\IScreenViewModel.cs" />
@@ -169,15 +172,23 @@
       <SubType>Code</SubType>
     </Compile>
     <Compile Include="ViewModels\Screens\SettingsViewModel.cs" />
+    <Page Include="Views\Controls\SurfaceEditor\SurfaceLedView.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
+    <Page Include="Views\Controls\SurfaceEditor\SurfaceDeviceView.xaml">
+      <Generator>MSBuild:Compile</Generator>
+      <SubType>Designer</SubType>
+    </Page>
     <Page Include="Views\Screens\HomeView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Views\Controls\RgbDevice\RgbDeviceView.xaml">
+    <Page Include="Views\Controls\ProfileEditor\ProfileDeviceView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
-    <Page Include="Views\Controls\RgbDevice\RgbLedView.xaml">
+    <Page Include="Views\Controls\ProfileEditor\ProfileLedView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
@@ -248,6 +259,9 @@
   <ItemGroup>
     <Resource Include="logo-512.ico" />
   </ItemGroup>
+  <ItemGroup>
+    <Folder Include="Views\Controls\RgbDevice\" />
+  </ItemGroup>
   <Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" />
   <PropertyGroup>
     <PostBuildEvent>

src/Artemis.UI/Converters/NullToVisibilityConverter.cs

@@ -0,0 +1,35 @@
+using System;
+using System.Globalization;
+using System.Windows;
+using System.Windows.Data;
+
+namespace Artemis.UI.Converters
+{
+    public class NullToVisibilityConverter : IValueConverter
+    {
+        private enum Parameters
+        {
+            Normal,
+            Inverted
+        }
+
+        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            var direction = (Parameters) Enum.Parse(typeof(Parameters), (string) parameter ?? throw new InvalidOperationException());
+            if (direction == Parameters.Normal)
+            {
+                if (value == null)
+                    return Visibility.Hidden;
+                return Visibility.Visible;
+            }
+            if (value == null)
+                return Visibility.Visible;
+            return Visibility.Hidden;
+        }
+
+        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+        {
+            throw new NotImplementedException();
+        }
+    }
+}

src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileDeviceViewModel.cs

@@ -0,0 +1,29 @@
+using System.Collections.Generic;
+using RGB.NET.Core;
+using Stylet;
+
+namespace Artemis.UI.ViewModels.Controls.ProfileEditor
+{
+    public class ProfileDeviceViewModel : PropertyChangedBase
+    {
+        private readonly List<ProfileLedViewModel> _leds;
+
+        public ProfileDeviceViewModel(IRGBDevice device)
+        {
+            Device = device;
+            _leds = new List<ProfileLedViewModel>();
+
+            foreach (var led in Device)
+                _leds.Add(new ProfileLedViewModel(led));
+        }
+
+        public IRGBDevice Device { get; }
+        public IReadOnlyCollection<ProfileLedViewModel> Leds => _leds.AsReadOnly();
+
+        public void Update()
+        {
+            foreach (var ledViewModel in _leds)
+                ledViewModel.Update();
+        }
+    }
+}

src/Artemis.UI/ViewModels/Controls/ProfileEditor/ProfileLedViewModel.cs

@@ -1,18 +1,16 @@
 using System;
 using System.Windows;
-using System.Windows.Input;
 using System.Windows.Media;
 using Artemis.UI.Extensions;
-using PropertyChanged;
 using RGB.NET.Core;
 using Stylet;
 using Color = System.Windows.Media.Color;
 
-namespace Artemis.UI.ViewModels.Controls.RgbDevice
+namespace Artemis.UI.ViewModels.Controls.ProfileEditor
 {
-    public class RgbLedViewModel : PropertyChangedBase
+    public class ProfileLedViewModel : PropertyChangedBase
     {
-        public RgbLedViewModel(Led led)
+        public ProfileLedViewModel(Led led)
         {
             Led = led;
             

src/Artemis.UI/ViewModels/Controls/SurfaceEditor/SurfaceDeviceViewModel.cs

@@ -6,40 +6,29 @@ using RGB.NET.Core;
 using Stylet;
 using Point = System.Windows.Point;
 
-namespace Artemis.UI.ViewModels.Controls.RgbDevice
+namespace Artemis.UI.ViewModels.Controls.SurfaceEditor
 {
-    public class RgbDeviceViewModel : PropertyChangedBase
+    public class SurfaceDeviceViewModel : PropertyChangedBase
     {
-        private readonly List<RgbLedViewModel> _leds;
         private double _dragOffsetX;
         private double _dragOffsetY;
+        private readonly List<SurfaceLedViewModel> _leds;
 
-        public RgbDeviceViewModel(IRGBDevice device)
+        public SurfaceDeviceViewModel(IRGBDevice device)
         {
             Device = device;
-            _leds = new List<RgbLedViewModel>();
+            _leds = new List<SurfaceLedViewModel>();
 
             foreach (var led in Device)
-                _leds.Add(new RgbLedViewModel(led));
+                _leds.Add(new SurfaceLedViewModel(led));
         }
 
-        public Cursor Cursor { get; set; }
-        public SelectionStatus SelectionStatus { get; set; }
-
         public IRGBDevice Device { get; }
-        public IReadOnlyCollection<RgbLedViewModel> Leds => _leds.AsReadOnly();
+        public SelectionStatus SelectionStatus { get; set; }
+        public Cursor Cursor { get; set; }
 
-        public void Update()
+        public IReadOnlyCollection<SurfaceLedViewModel> Leds => _leds.AsReadOnly();
-        {
+        public Rect DeviceRectangle => new Rect(Device.Location.X, Device.Location.Y, Device.Size.Width, Device.Size.Height);
-            foreach (var rgbLedViewModel in _leds)
-                rgbLedViewModel.Update();
-        }
-
-        public void SetColorsEnabled(bool enabled)
-        {
-            foreach (var rgbLedViewModel in _leds)
-                rgbLedViewModel.ColorsEnabled = enabled;
-        }
 
         public void StartMouseDrag(Point mouseStartPosition)
         {
@@ -51,7 +40,7 @@ namespace Artemis.UI.ViewModels.Controls.RgbDevice
         {
             var roundedX = Math.Round((mousePosition.X + _dragOffsetX) / 10, 0, MidpointRounding.AwayFromZero) * 10;
             var roundedY = Math.Round((mousePosition.Y + _dragOffsetY) / 10, 0, MidpointRounding.AwayFromZero) * 10;
-            this.Device.Location = new RGB.NET.Core.Point(roundedX, roundedY);
+            Device.Location = new RGB.NET.Core.Point(roundedX, roundedY);
         }
 
         public void FinishMouseDrag(Point mouseEndPosition)
@@ -78,8 +67,6 @@ namespace Artemis.UI.ViewModels.Controls.RgbDevice
                 Cursor = Cursors.Arrow;
             }
         }
-
-        public Rect DeviceRectangle => new Rect(Device.Location.X, Device.Location.Y, Device.Size.Width, Device.Size.Height);
     }
 
     public enum SelectionStatus

src/Artemis.UI/ViewModels/Controls/SurfaceEditor/SurfaceLedViewModel.cs

@@ -0,0 +1,37 @@
+using System;
+using RGB.NET.Core;
+using Stylet;
+
+namespace Artemis.UI.ViewModels.Controls.SurfaceEditor
+{
+    public class SurfaceLedViewModel : PropertyChangedBase
+    {
+        public SurfaceLedViewModel(Led led)
+        {
+            Led = led;
+            Update();
+        }
+
+        public Led Led { get; }
+
+        public double X { get; private set; }
+        public double Y { get; private set; }
+        public double Width { get; private set; }
+        public double Height { get; private set; }
+
+        public void Update()
+        {
+            if (Math.Abs(Led.LedRectangle.X - X) > 0.1)
+                X = Led.LedRectangle.X;
+
+            if (Math.Abs(Led.LedRectangle.Y - Y) > 0.1)
+                Y = Led.LedRectangle.Y;
+
+            if (Math.Abs(Led.LedRectangle.Width - Width) > 0.1)
+                Width = Led.LedRectangle.Width;
+
+            if (Math.Abs(Led.LedRectangle.Height - Height) > 0.1)
+                Height = Led.LedRectangle.Height;
+        }
+    }
+}

src/Artemis.UI/ViewModels/Screens/SurfaceEditorViewModel.cs

@@ -1,4 +1,5 @@
-using System.Collections.ObjectModel;
+using System;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Threading.Tasks;
 using System.Windows;
@@ -8,7 +9,7 @@ using Artemis.Core.Events;
 using Artemis.Core.Models.Surface;
 using Artemis.Core.Services.Interfaces;
 using Artemis.Core.Services.Storage;
-using Artemis.UI.ViewModels.Controls.RgbDevice;
+using Artemis.UI.ViewModels.Controls.SurfaceEditor;
 using Artemis.UI.ViewModels.Interfaces;
 using RGB.NET.Core;
 using Stylet;
@@ -23,26 +24,23 @@ namespace Artemis.UI.ViewModels.Screens
 
         public SurfaceEditorViewModel(IRgbService rgbService, ISurfaceService surfaceService)
         {
-            Devices = new ObservableCollection<RgbDeviceViewModel>();
+            Devices = new ObservableCollection<SurfaceDeviceViewModel>();
             SurfaceConfigurations = new ObservableCollection<SurfaceConfiguration>();
             SelectionRectangle = new RectangleGeometry();
 
             _rgbService = rgbService;
             _surfaceService = surfaceService;
             _rgbService.DeviceLoaded += RgbServiceOnDeviceLoaded;
-            _rgbService.Surface.Updated += SurfaceOnUpdated;
 
             foreach (var surfaceDevice in _rgbService.Surface.Devices)
             {
-                var device = new RgbDeviceViewModel(surfaceDevice) {Cursor = Cursors.Hand};
+                var device = new SurfaceDeviceViewModel(surfaceDevice) {Cursor = Cursors.Hand};
-                device.SetColorsEnabled(false);
-
                 Devices.Add(device);
             }
         }
 
         public RectangleGeometry SelectionRectangle { get; set; }
-        public ObservableCollection<RgbDeviceViewModel> Devices { get; set; }
+        public ObservableCollection<SurfaceDeviceViewModel> Devices { get; set; }
 
         public SurfaceConfiguration SelectedSurfaceConfiguration { get; set; }
         public ObservableCollection<SurfaceConfiguration> SurfaceConfigurations { get; set; }
@@ -56,47 +54,32 @@ namespace Artemis.UI.ViewModels.Screens
             {
                 if (Devices.All(d => d.Device != e.Device))
                 {
-                    var device = new RgbDeviceViewModel(e.Device) {Cursor = Cursors.Hand};
+                    var device = new SurfaceDeviceViewModel(e.Device) {Cursor = Cursors.Hand};
-                    device.SetColorsEnabled(false);
                     Devices.Add(device);
                 }
             });
         }
 
-        private void SurfaceOnUpdated(UpdatedEventArgs args)
-        {
-            foreach (var rgbDeviceViewModel in Devices)
-                rgbDeviceViewModel.Update();
-        }
-
-        #region Overrides of Screen
-
-        protected override void OnActivate()
-        {
-            Task.Run(LoadSurfaceConfigurations);
-            base.OnActivate();
-        }
-
-        #endregion
-
         private async Task LoadSurfaceConfigurations()
         {
-            SurfaceConfigurations.Clear();
+            Execute.OnUIThread(async () =>
+            {
+                SurfaceConfigurations.Clear();
 
-            // Get surface configs
+                // Get surface configs
-            var configs = await _surfaceService.GetSurfaceConfigurations();
+                var configs = await _surfaceService.GetSurfaceConfigurations();
-            // Populate the UI collection
+                // Populate the UI collection
-            foreach (var surfaceConfiguration in configs)
+                foreach (var surfaceConfiguration in configs)
-                SurfaceConfigurations.Add(surfaceConfiguration);
+                    SurfaceConfigurations.Add(surfaceConfiguration);
-            // Select either the first active surface or the first available surface
+                // Select either the first active surface or the first available surface
-            SelectedSurfaceConfiguration = SurfaceConfigurations.FirstOrDefault(s => s.IsActive) ?? SurfaceConfigurations.FirstOrDefault();
+                SelectedSurfaceConfiguration = SurfaceConfigurations.FirstOrDefault(s => s.IsActive) ?? SurfaceConfigurations.FirstOrDefault();
 
-            // Create a default if there is none
+                // Create a default if there is none
-            if (SelectedSurfaceConfiguration == null)
+                if (SelectedSurfaceConfiguration == null)
-                SelectedSurfaceConfiguration = AddSurfaceConfiguration("Default");
+                    SelectedSurfaceConfiguration = AddSurfaceConfiguration("Default");
+            });
         }
-
+        
-
         public SurfaceConfiguration AddSurfaceConfiguration(string name)
         {
             var config = new SurfaceConfiguration(name);
@@ -111,9 +94,34 @@ namespace Artemis.UI.ViewModels.Screens
                 var newConfig = AddSurfaceConfiguration(NewConfigurationName);
                 SelectedSurfaceConfiguration = newConfig;
             }
+
             NewConfigurationName = null;
         }
 
+        #region Context menu actions
+
+        public void BringToFront(SurfaceDeviceViewModel surfaceDeviceViewModel)
+        {
+            Console.WriteLine("Bring to front");
+        }
+
+        public void BringForward(SurfaceDeviceViewModel surfaceDeviceViewModel)
+        {
+            Console.WriteLine("Bring forward");
+        }
+
+        public void SendToBack(SurfaceDeviceViewModel surfaceDeviceViewModel)
+        {
+            Console.WriteLine("Send to back");
+        }
+
+        public void SendBackward(SurfaceDeviceViewModel surfaceDeviceViewModel)
+        {
+            Console.WriteLine("Send backward");
+        }
+
+        #endregion
+
         #region Mouse actions
 
         private MouseDragStatus _mouseDragStatus;
@@ -215,6 +223,16 @@ namespace Artemis.UI.ViewModels.Screens
         }
 
         #endregion
+
+        #region Overrides of Screen
+
+        protected override void OnActivate()
+        {
+            Task.Run(LoadSurfaceConfigurations);
+            base.OnActivate();
+        }
+
+        #endregion
     }
 
     internal enum MouseDragStatus

src/Artemis.UI/Views/Controls/ProfileEditor/ProfileDeviceView.xaml

@@ -0,0 +1,36 @@
+<UserControl x:Class="Artemis.UI.Views.Controls.ProfileEditor.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:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:profileEditor="clr-namespace:Artemis.UI.ViewModels.Controls.ProfileEditor"
+             mc:Ignorable="d"
+             d:DataContext="{d:DesignInstance profileEditor:ProfileDeviceViewModel}"
+             d:DesignHeight="450" d:DesignWidth="800"
+             Cursor="{Binding Cursor}"
+             MouseEnter="{s:Action MouseEnter}"
+             MouseLeave="{s:Action MouseLeave}">
+    <Grid>
+        <Image Source="{Binding Device.DeviceInfo.Image}" />
+        <ItemsControl ItemsSource="{Binding Leds}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <Canvas />
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemContainerStyle>
+                <Style TargetType="ContentPresenter">
+                    <Setter Property="Canvas.Left" Value="{Binding X}" />
+                    <Setter Property="Canvas.Top" Value="{Binding Y}" />
+                </Style>
+            </ItemsControl.ItemContainerStyle>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <ContentControl Width="{Binding Width}" Height="{Binding Height}" s:View.Model="{Binding}" />
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </Grid>
+</UserControl>

src/Artemis.UI/Views/Controls/ProfileEditor/ProfileLedView.xaml

@@ -1,11 +1,11 @@
-<UserControl x:Class="Artemis.UI.Views.Controls.RgbDevice.RgbLedView"
+<UserControl x:Class="Artemis.UI.Views.Controls.ProfileEditor.ProfileLedView"
              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:rgbDevice="clr-namespace:Artemis.UI.ViewModels.Controls.RgbDevice"
+             xmlns:profileEditor="clr-namespace:Artemis.UI.ViewModels.Controls.ProfileEditor"
              mc:Ignorable="d"
-             d:DataContext="{d:DesignInstance rgbDevice:RgbLedViewModel}"
+             d:DataContext="{d:DesignInstance profileEditor:ProfileLedViewModel}"
              d:DesignHeight="25" d:DesignWidth="25"
              ToolTip="{Binding Tooltip}"
              ToolTipService.IsEnabled="{Binding ColorsEnabled}">

src/Artemis.UI/Views/Controls/SurfaceEditor/SurfaceDeviceView.xaml

@@ -1,18 +1,35 @@
-<UserControl x:Class="Artemis.UI.Views.Controls.RgbDevice.RgbDeviceView"
+<UserControl x:Class="Artemis.UI.Views.Controls.SurfaceEditor.SurfaceDeviceView"
              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:rgbDevice="clr-namespace:Artemis.UI.ViewModels.Controls.RgbDevice"
              xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:surfaceEditor="clr-namespace:Artemis.UI.ViewModels.Controls.SurfaceEditor"
+             xmlns:converters="clr-namespace:Artemis.UI.Converters"
              mc:Ignorable="d"
-             d:DataContext="{d:DesignInstance rgbDevice:RgbDeviceViewModel}"
+             d:DataContext="{d:DesignInstance {x:Type surfaceEditor:SurfaceDeviceViewModel}}"
              d:DesignHeight="450" d:DesignWidth="800"
              Cursor="{Binding Cursor}"
              MouseEnter="{s:Action MouseEnter}"
              MouseLeave="{s:Action MouseLeave}">
+    <UserControl.Resources>
+        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
+    </UserControl.Resources>
     <Grid>
         <Image Source="{Binding Device.DeviceInfo.Image}" />
+
+        <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
+                   Stroke="{DynamicResource ControlBorderBrush}"
+                   StrokeThickness="1"
+                   Visibility="{Binding Device.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}" />
+        <TextBlock Text="{Binding Device.DeviceInfo.DeviceName}"
+                   Visibility="{Binding Device.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   TextWrapping="Wrap"
+                   TextAlignment="Center" />
+
         <ItemsControl ItemsSource="{Binding Leds}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
@@ -20,7 +37,7 @@
                 </ItemsPanelTemplate>
             </ItemsControl.ItemsPanel>
             <ItemsControl.ItemContainerStyle>
-                <Style TargetType="ContentPresenter">
+                <Style TargetType="{x:Type ContentPresenter}">
                     <Setter Property="Canvas.Left" Value="{Binding X}" />
                     <Setter Property="Canvas.Top" Value="{Binding Y}" />
                 </Style>
@@ -31,39 +48,40 @@
                 </DataTemplate>
             </ItemsControl.ItemTemplate>
         </ItemsControl>
+
         <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
             <Rectangle.Stroke>
-                <SolidColorBrush Color="{StaticResource IdealForegroundColor}"/>
+                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" />
             </Rectangle.Stroke>
             <Rectangle.Fill>
-                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" Opacity="0.25"/>
+                <SolidColorBrush Color="{StaticResource IdealForegroundColor}" Opacity="0.25" />
             </Rectangle.Fill>
             <Rectangle.Style>
-                <Style TargetType="Rectangle">
+                <Style TargetType="{x:Type Rectangle}">
                     <Style.Triggers>
-                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static rgbDevice:SelectionStatus.Hover}">
+                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.Hover}">
                             <DataTrigger.EnterActions>
-                                <StopStoryboard BeginStoryboardName="ToSelected"></StopStoryboard>
+                                <StopStoryboard BeginStoryboardName="ToSelected" />
                                 <BeginStoryboard x:Name="ToHover">
                                     <Storyboard>
-                                        <ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
+                                        <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
-                                        <ColorAnimation Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Color)" To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
+                                        <ColorAnimation Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="{StaticResource IdealForegroundColor}" Duration="0:0:0.25" />
                                     </Storyboard>
                                 </BeginStoryboard>
                             </DataTrigger.EnterActions>
                         </DataTrigger>
-                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static rgbDevice:SelectionStatus.Selected}">
+                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.Selected}">
                             <DataTrigger.EnterActions>
-                                <StopStoryboard BeginStoryboardName="ToHover"></StopStoryboard>
+                                <StopStoryboard BeginStoryboardName="ToHover" />
                                 <BeginStoryboard x:Name="ToSelected">
                                     <Storyboard>
-                                        <ColorAnimation Storyboard.TargetProperty="(Rectangle.Fill).(SolidColorBrush.Color)" To="{StaticResource Primary400}" Duration="0:0:0.25" />
+                                        <ColorAnimation Storyboard.TargetProperty="(Shape.Fill).(SolidColorBrush.Color)" To="{StaticResource Primary400}" Duration="0:0:0.25" />
-                                        <ColorAnimation Storyboard.TargetProperty="(Rectangle.Stroke).(SolidColorBrush.Color)" To="{StaticResource Primary400}" Duration="0:0:0.25" />
+                                        <ColorAnimation Storyboard.TargetProperty="(Shape.Stroke).(SolidColorBrush.Color)" To="{StaticResource Primary400}" Duration="0:0:0.25" />
                                     </Storyboard>
                                 </BeginStoryboard>
                             </DataTrigger.EnterActions>
                         </DataTrigger>
-                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static rgbDevice:SelectionStatus.None}">
+                        <DataTrigger Binding="{Binding SelectionStatus}" Value="{x:Static surfaceEditor:SelectionStatus.None}">
                             <DataTrigger.EnterActions>
                                 <BeginStoryboard>
                                     <Storyboard>
@@ -82,7 +100,6 @@
                     </Style.Triggers>
                 </Style>
             </Rectangle.Style>
-
         </Rectangle>
     </Grid>
 </UserControl>

src/Artemis.UI/Views/Controls/SurfaceEditor/SurfaceLedView.xaml

@@ -0,0 +1,15 @@
+<UserControl x:Class="Artemis.UI.Views.Controls.SurfaceEditor.SurfaceLedView"
+             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:surfaceEditor="clr-namespace:Artemis.UI.ViewModels.Controls.SurfaceEditor"
+             mc:Ignorable="d"
+             d:DataContext="{d:DesignInstance {x:Type surfaceEditor:SurfaceLedViewModel}}"
+             d:DesignHeight="25" d:DesignWidth="25">
+    <Grid Width="{Binding Width}" Height="{Binding Height}">
+        <Grid.Background>
+            <ImageBrush AlignmentX="Center" AlignmentY="Center" Stretch="Fill" ImageSource="{Binding Led.Image}" />
+        </Grid.Background>        
+    </Grid>
+</UserControl>

src/Artemis.UI/Views/Screens/SurfaceEditorView.xaml

@@ -39,14 +39,14 @@
                   MouseDown="{s:Action EditorGridMouseClick}"
                   MouseMove="{s:Action EditorGridMouseMove}">
                 <Grid.Triggers>
-                    <EventTrigger RoutedEvent="Grid.MouseDown">
+                    <EventTrigger RoutedEvent="Grid.MouseLeftButtonDown">
                         <BeginStoryboard>
                             <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
                                 <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
                             </Storyboard>
                         </BeginStoryboard>
                     </EventTrigger>
-                    <EventTrigger RoutedEvent="Grid.MouseUp">
+                    <EventTrigger RoutedEvent="Grid.MouseLeftButtonUp">
                         <BeginStoryboard>
                             <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
                                 <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
@@ -71,13 +71,48 @@
                     </ItemsControl.ItemContainerStyle>
                     <ItemsControl.ItemTemplate>
                         <DataTemplate>
-                            <ContentControl Width="{Binding Device.Size.Width}" Height="{Binding Device.Size.Height}" s:View.Model="{Binding }" />
+                            <ContentControl Width="{Binding Device.Size.Width}" Height="{Binding Device.Size.Height}" s:View.Model="{Binding }">
+                                <ContentControl.ContextMenu>
+                                    <ContextMenu>
+                                        <MenuItem Header="Bring to Front">
+                                            <MenuItem.Icon>
+                                                <materialDesign:PackIcon Kind="ArrangeBringToFront" />
+                                            </MenuItem.Icon>
+                                            <MenuItem Header="Bring to Front" Command="{s:Action BringToFront}" CommandParameter="{Binding}">
+                                                <MenuItem.Icon>
+                                                    <materialDesign:PackIcon Kind="ArrangeBringToFront" />
+                                                </MenuItem.Icon>
+                                            </MenuItem>
+                                            <MenuItem Header="Bring Forward" Command="{s:Action BringForward}" CommandParameter="{Binding}">
+                                                <MenuItem.Icon>
+                                                    <materialDesign:PackIcon Kind="ArrangeBringForward" />
+                                                </MenuItem.Icon>
+                                            </MenuItem>
+                                        </MenuItem>
+                                        <MenuItem Header="Send to Back">
+                                            <MenuItem.Icon>
+                                                <materialDesign:PackIcon Kind="ArrangeSendToBack" />
+                                            </MenuItem.Icon>
+                                            <MenuItem Header="Send to Back" Command="{s:Action SendToBack}" CommandParameter="{Binding}">
+                                                <MenuItem.Icon>
+                                                    <materialDesign:PackIcon Kind="ArrangeSendToBack" />
+                                                </MenuItem.Icon>
+                                            </MenuItem>
+                                            <MenuItem Header="Send Backward" Command="{s:Action SendBackward}" CommandParameter="{Binding}">
+                                                <MenuItem.Icon>
+                                                    <materialDesign:PackIcon Kind="ArrangeSendBackward" />
+                                                </MenuItem.Icon>
+                                            </MenuItem>
+                                        </MenuItem>
+                                    </ContextMenu>
+                                </ContentControl.ContextMenu>
+                            </ContentControl>
                         </DataTemplate>
                     </ItemsControl.ItemTemplate>
                 </ItemsControl>
 
                 <!-- Multi-selection rectangle -->
-                <Path Data="{Binding SelectionRectangle}" Opacity="0" Stroke="{DynamicResource PrimaryHueLightBrush}" StrokeThickness="1" Name="MultiSelectionPath">
+                <Path Data="{Binding SelectionRectangle}" Opacity="0" Stroke="{DynamicResource PrimaryHueLightBrush}" StrokeThickness="1" Name="MultiSelectionPath" IsHitTestVisible="False">
                     <Path.Fill>
                         <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
                     </Path.Fill>
@@ -117,7 +152,7 @@
                     <materialDesign:DialogHost.DialogContent>
                         <StackPanel Margin="16">
                             <TextBlock>
-                            Add a new surface layout.
+                                Add a new surface layout.
                             </TextBlock>
                             <TextBox Margin="0 8 0 0" HorizontalAlignment="Stretch" Text="{Binding NewConfigurationName}" />
                             <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
@@ -153,16 +188,16 @@
                             </ListBox.Resources>
                         </ListBox>
                         <materialDesign:PopupBox
-                        Grid.Row="0"
+                            Grid.Row="0"
-                        Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
+                            Style="{StaticResource MaterialDesignMultiFloatingActionPopupBox}"
-                        PlacementMode="LeftAndAlignMiddles"
+                            PlacementMode="LeftAndAlignMiddles"
-                        UnfurlOrientation="Horizontal"
+                            UnfurlOrientation="Horizontal"
-                        ToolTip="Manage surface layouts"
+                            ToolTip="Manage surface layouts"
-                        Margin="0 0 10 10"
+                            Margin="0 0 10 10"
-                        HorizontalAlignment="Right"
+                            HorizontalAlignment="Right"
-                        VerticalAlignment="Bottom">
+                            VerticalAlignment="Bottom">
                             <StackPanel
-                            Orientation="Horizontal">
+                                Orientation="Horizontal">
                                 <Button ToolTip="Add a new surface layout" Command="{x:Static materialDesign:DialogHost.OpenDialogCommand}">
                                     <materialDesign:PackIcon Kind="Add" />
                                 </Button>