Implemented devices and LEDs in profile editor

src/Artemis.UI/Artemis.UI.csproj

@@ -166,7 +166,8 @@
     <Compile Include="Converters\NullToVisibilityConverter.cs" />
     <Compile Include="Extensions\RgbColorExtensions.cs" />
     <Compile Include="Extensions\RgbRectangleExtensions.cs" />
-    <Compile Include="Ninject\Factories\ModuleViewModelFactory.cs" />
+    <Compile Include="Ninject\Factories\IModuleViewModelFactory.cs" />
+    <Compile Include="Ninject\Factories\IProfileEditorViewModelFactory.cs" />
     <Compile Include="Ninject\UIModule.cs" />
     <Compile Include="Properties\Resources.Designer.cs">
       <AutoGen>True</AutoGen>

src/Artemis.UI/Ninject/Factories/IProfileEditorViewModelFactory.cs

@@ -0,0 +1,10 @@
+using Artemis.Core.Plugins.Abstract;
+using Artemis.UI.ViewModels.Controls.ProfileEditor;
+
+namespace Artemis.UI.Ninject.Factories
+{
+    public interface IProfileEditorViewModelFactory
+    {
+        ProfileEditorViewModel CreateModuleViewModel(Module module);
+    }
+}

src/Artemis.UI/Ninject/UiModule.cs

@@ -36,6 +36,7 @@ namespace Artemis.UI.Ninject
 
             // Bind the module VM
             Bind<IModuleViewModelFactory>().ToFactory();
+            Bind<IProfileEditorViewModelFactory>().ToFactory();
             
             // Bind all UI services as singletons
             Kernel.Bind(x =>

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

@@ -1,5 +1,6 @@
 using System.Collections.Generic;
-using RGB.NET.Core;
+using System.Windows;
+using Artemis.Core.Models.Surface;
 using Stylet;
 
 namespace Artemis.UI.ViewModels.Controls.ProfileEditor
@@ -8,18 +9,44 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
     {
         private readonly List<ProfileLedViewModel> _leds;
 
-        public ProfileDeviceViewModel(IRGBDevice device)
+        public ProfileDeviceViewModel(Device device)
         {
             Device = device;
             _leds = new List<ProfileLedViewModel>();
 
-            foreach (var led in Device)
+            if (Device.RgbDevice != null)
-                _leds.Add(new ProfileLedViewModel(led));
+            {
+                foreach (var led in Device.RgbDevice)
+                    _leds.Add(new ProfileLedViewModel(led));
+            }
+        }
+
+        public Device Device { get; 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 IRGBDevice Device { get; }
         public IReadOnlyCollection<ProfileLedViewModel> Leds => _leds.AsReadOnly();
 
+        public Rect DeviceRectangle => Device.RgbDevice == null
+            ? new Rect()
+            : new Rect(X, Y, Device.RgbDevice.Size.Width, Device.RgbDevice.Size.Height);
+
         public void Update()
         {
             foreach (var ledViewModel in _leds)

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

@@ -1,16 +1,170 @@
-using System;
+using System.Collections.ObjectModel;
-using System.Collections.Generic;
 using System.Linq;
-using System.Text;
+using System.Windows;
-using System.Threading.Tasks;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Surface;
 using Artemis.Core.Plugins.Abstract;
+using Artemis.Core.Services.Interfaces;
+using Artemis.Core.Services.Storage;
+using Artemis.UI.ViewModels.Screens;
+using Artemis.UI.ViewModels.Utilities;
+using Stylet;
 
 namespace Artemis.UI.ViewModels.Controls.ProfileEditor
 {
-   public class ProfileEditorViewModel : ModuleViewModel
+    public class ProfileEditorViewModel : ModuleViewModel
     {
-        public ProfileEditorViewModel(Module module) : base(module, "Profile Editor")
+        public ProfileEditorViewModel(Module module, ISurfaceService surfaceService, ICoreService coreService) : base(module, "Profile Editor")
         {
+            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
+            coreService.FrameRendered += CoreServiceOnFrameRendered;
+            Devices = new ObservableCollection<ProfileDeviceViewModel>();
+            Execute.OnUIThread(() =>
+            {
+                SelectionRectangle = new RectangleGeometry();
+                PanZoomViewModel = new PanZoomViewModel();
+            });
+
+            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
         }
+        
+        public ObservableCollection<ProfileDeviceViewModel> Devices { get; set; }
+        public RectangleGeometry SelectionRectangle { get; set; }
+        public PanZoomViewModel PanZoomViewModel { get; set; }
+
+        private void OnActiveSurfaceConfigurationChanged(object sender, SurfaceConfigurationEventArgs e)
+        {
+            ApplySurfaceConfiguration(e.Surface);
+        }
+
+        private void CoreServiceOnFrameRendered(object sender, FrameRenderedEventArgs e)
+        {
+            foreach (var profileDeviceViewModel in Devices)
+                profileDeviceViewModel.Update();
+        }
+
+        private void ApplySurfaceConfiguration(Surface surface)
+        {
+            // Make sure all devices have an up-to-date VM
+            foreach (var surfaceDeviceConfiguration in surface.Devices)
+            {
+                // Create VMs for missing devices
+                var viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
+                if (viewModel == null)
+                    Execute.OnUIThread(() => Devices.Add(new ProfileDeviceViewModel(surfaceDeviceConfiguration)));
+                // Update existing devices
+                else
+                    viewModel.Device = surfaceDeviceConfiguration;
+            }
+        }
+
+        #region Selection
+
+        private MouseDragStatus _mouseDragStatus;
+        private Point _mouseDragStartPoint;
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void EditorGridMouseClick(object sender, MouseEventArgs e)
+        {
+            if (IsPanKeyDown())
+                return;
+
+            var position = e.GetPosition((IInputElement) sender);
+            var relative = PanZoomViewModel.GetRelativeMousePosition(sender, e);
+            if (e.LeftButton == MouseButtonState.Pressed)
+                StartMouseDrag(position, relative);
+            else
+                StopMouseDrag(position);
+        }
+
+        // ReSharper disable once UnusedMember.Global - Called from view
+        public void EditorGridMouseMove(object sender, MouseEventArgs e)
+        {
+            // If holding down Ctrl, pan instead of move/select
+            if (IsPanKeyDown())
+            {
+                Pan(sender, e);
+                return;
+            }
+
+            var position = e.GetPosition((IInputElement) sender);
+            if (_mouseDragStatus == MouseDragStatus.Selecting)
+                UpdateSelection(position);
+        }
+
+        private void StartMouseDrag(Point position, Point relative)
+        {
+            _mouseDragStatus = MouseDragStatus.Selecting;
+            _mouseDragStartPoint = position;
+
+            // Any time dragging starts, start with a new rect
+            SelectionRectangle.Rect = new Rect();
+        }
+
+        private void StopMouseDrag(Point position)
+        {
+            var selectedRect = new Rect(_mouseDragStartPoint, position);
+            // TODO: Select LEDs
+
+            Mouse.OverrideCursor = null;
+            _mouseDragStatus = MouseDragStatus.None;
+        }
+
+        private void UpdateSelection(Point position)
+        {
+            if (IsPanKeyDown())
+                return;
+
+            lock (Devices)
+            {
+                var selectedRect = new Rect(_mouseDragStartPoint, position);
+                SelectionRectangle.Rect = selectedRect;
+
+                // TODO: Highlight LEDs
+            }
+        }
+
+        #endregion
+
+        #region Panning and zooming
+
+        public void EditorGridMouseWheel(object sender, MouseWheelEventArgs e)
+        {
+            PanZoomViewModel.ProcessMouseScroll(sender, e);
+        }
+
+        public void EditorGridKeyDown(object sender, KeyEventArgs e)
+        {
+            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsDown)
+                Mouse.OverrideCursor = Cursors.ScrollAll;
+        }
+
+        public void EditorGridKeyUp(object sender, KeyEventArgs e)
+        {
+            if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsUp)
+                Mouse.OverrideCursor = null;
+        }
+
+        public void Pan(object sender, MouseEventArgs e)
+        {
+            PanZoomViewModel.ProcessMouseMove(sender, e);
+
+            // Empty the selection rect since it's shown while mouse is down
+            SelectionRectangle.Rect = Rect.Empty;
+        }
+
+        public void ResetZoomAndPan()
+        {
+            PanZoomViewModel.Reset();
+        }
+
+        private bool IsPanKeyDown()
+        {
+            return Keyboard.IsKeyDown(Key.LeftCtrl) || Keyboard.IsKeyDown(Key.RightCtrl);
+        }
+
+        #endregion
     }
 }

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

@@ -92,13 +92,9 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
 
         public void Update()
         {
-            if (ColorsEnabled)
+            var newColor = Led.Color.ToMediaColor();
-            {
+            if (!DisplayColor.Equals(newColor))
-                if (Led.Id == LedId.Keyboard_Y)
+                DisplayColor = newColor;
-                    Console.WriteLine();
-                var newColor = Led.Color.ToMediaColor();
-                SetColor(newColor);
-            }
 
             if (Math.Abs(Led.LedRectangle.X - X) > 0.1)
                 X = Led.LedRectangle.X;
@@ -112,11 +108,5 @@ namespace Artemis.UI.ViewModels.Controls.ProfileEditor
             if (Math.Abs(Led.LedRectangle.Height - Height) > 0.1)
                 Height = Led.LedRectangle.Height;
         }
-
-        public void SetColor(Color color)
-        {
-            if (!DisplayColor.Equals(color))
-                DisplayColor = color;
-        }
     }
 }

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

@@ -3,17 +3,15 @@ using System.Collections.Generic;
 using System.Windows;
 using System.Windows.Input;
 using Artemis.Core.Models.Surface;
-using RGB.NET.Core;
 using Stylet;
-using Point = System.Windows.Point;
 
 namespace Artemis.UI.ViewModels.Controls.SurfaceEditor
 {
     public class SurfaceDeviceViewModel : PropertyChangedBase
     {
+        private readonly List<SurfaceLedViewModel> _leds;
         private double _dragOffsetX;
         private double _dragOffsetY;
-        private readonly List<SurfaceLedViewModel> _leds;
 
         public SurfaceDeviceViewModel(Device device)
         {

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

@@ -1,4 +1,5 @@
 using Artemis.Core.Plugins.Abstract;
+using Artemis.UI.Ninject.Factories;
 using Artemis.UI.ViewModels.Controls.ProfileEditor;
 using Stylet;
 
@@ -6,10 +7,10 @@ namespace Artemis.UI.ViewModels.Screens
 {
     public class ModuleRootViewModel : Screen
     {
-        public ModuleRootViewModel(Module module)
+        public ModuleRootViewModel(Module module, IProfileEditorViewModelFactory profileEditorViewModelFactory)
         {
             Module = module;
-            ModuleViewModels = new BindableCollection<ModuleViewModel> {new ProfileEditorViewModel(Module)};
+            ModuleViewModels = new BindableCollection<ModuleViewModel> {profileEditorViewModelFactory.CreateModuleViewModel(Module)};
             ModuleViewModels.AddRange(Module.GetViewModels());
         }
 

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

@@ -1,5 +1,4 @@
 using System;
-using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
 using System.Threading.Tasks;
@@ -33,9 +32,10 @@ namespace Artemis.UI.ViewModels.Screens
             _dialogService = dialogService;
         }
 
-        public RectangleGeometry SelectionRectangle { get; set; }
         public ObservableCollection<SurfaceDeviceViewModel> Devices { get; set; }
         public ObservableCollection<Surface> SurfaceConfigurations { get; set; }
+        public RectangleGeometry SelectionRectangle { get; set; }
+        public PanZoomViewModel PanZoomViewModel { get; set; }
         
         public Surface SelectedSurface
         {
@@ -47,7 +47,6 @@ namespace Artemis.UI.ViewModels.Screens
             }
         }
 
-        public PanZoomViewModel PanZoomViewModel { get; set; }
         public string Title => "Surface Editor";
 
         public Surface CreateSurfaceConfiguration(string name)
@@ -189,7 +188,7 @@ namespace Artemis.UI.ViewModels.Screens
 
         #endregion
 
-        #region RgbDevice selection
+        #region Selection
 
         private MouseDragStatus _mouseDragStatus;
         private Point _mouseDragStartPoint;

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

@@ -1,23 +1,34 @@
-<UserControl
+<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"
-             xmlns:Converters="clr-namespace:Artemis.UI.Converters" x:Class="Artemis.UI.Views.Controls.ProfileEditor.ProfileDeviceView"
+             xmlns:converters="clr-namespace:Artemis.UI.Converters"
              mc:Ignorable="d"
              d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileDeviceViewModel}}"
-             d:DesignHeight="450" d:DesignWidth="800"
+             d:DesignHeight="450" d:DesignWidth="800">
-             Cursor="{Binding Cursor}"
-             MouseEnter="{s:Action MouseEnter}"
-             MouseLeave="{s:Action MouseLeave}">
     <UserControl.Resources>
-        <Converters:NullToImageConverter x:Key="NullToImageConverter"/>
+        <converters:NullToImageConverter x:Key="NullToImageConverter"/>
+        <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
     </UserControl.Resources>
     <Grid>
-        <Image Source="{Binding Device.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
+        <!-- Device image with fallback -->
+        <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
+
+        <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
+                   Stroke="{DynamicResource ControlBorderBrush}"
+                   StrokeThickness="1"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}" />
+        <TextBlock Text="{Binding Device.RgbDevice.DeviceInfo.DeviceName}"
+                   Visibility="{Binding Device.RgbDevice.DeviceInfo.Image, ConverterParameter=Inverted, Converter={StaticResource NullToVisibilityConverter}}"
+                   HorizontalAlignment="Center"
+                   VerticalAlignment="Center"
+                   TextWrapping="Wrap"
+                   TextAlignment="Center" />
+
+        <!-- LEDs -->
         <ItemsControl ItemsSource="{Binding Leds}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>

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

@@ -5,10 +5,168 @@
              xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
              xmlns:local="clr-namespace:Artemis.UI.Views.Controls.ProfileEditor"
              xmlns:profileEditor="clr-namespace:Artemis.UI.ViewModels.Controls.ProfileEditor"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:models="clr-namespace:Artemis.Core.Models.Surface;assembly=Artemis.Core"
              mc:Ignorable="d" 
              d:DesignHeight="450" d:DesignWidth="800"
              d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileEditorViewModel}}">
-    <Grid>
+    <UserControl.Resources>
+        <ResourceDictionary>
+            <ResourceDictionary.MergedDictionaries>
+                <ResourceDictionary
+                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.TextBlock.xaml" />
+                <ResourceDictionary
+                    Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
+            </ResourceDictionary.MergedDictionaries>
+        </ResourceDictionary>
+    </UserControl.Resources>
+    <Grid Margin="16">
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="*" />
+            <ColumnDefinition Width="300" />
+        </Grid.ColumnDefinitions>
+        <Grid.RowDefinitions>
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="Auto" />
+            <RowDefinition Height="*" />
+            <RowDefinition Height="Auto" />
+        </Grid.RowDefinitions>
 
+        <TextBlock Grid.Row="0" Grid.Column="0" Style="{StaticResource MaterialDesignDisplay1TextBlock}">Profile editor</TextBlock>
+        <TextBlock Grid.Row="1" Grid.Column="0" Style="{StaticResource MaterialDesignCaptionTextBlock}"
+                   Margin="0,0,0,5">
+            The profile defines what colors the LEDs will have. Multiple groups of LEDs are defined into layers. On these layers you can apply effects.
+        </TextBlock>
+
+        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="2" Grid.Column="0"
+                             VerticalAlignment="Stretch" Margin="0,0,5,0">
+            <Grid ClipToBounds="True"
+                  KeyUp="{s:Action EditorGridKeyUp}"
+                  KeyDown="{s:Action EditorGridKeyDown}"
+                  MouseWheel="{s:Action EditorGridMouseWheel}"
+                  MouseUp="{s:Action EditorGridMouseClick}"
+                  MouseDown="{s:Action EditorGridMouseClick}"
+                  MouseMove="{s:Action EditorGridMouseMove}">
+                <Grid.Background>
+                    <VisualBrush TileMode="Tile" Stretch="Uniform"
+                                 Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
+                        <VisualBrush.Visual>
+                            <Grid Width="20" Height="20">
+                                <Grid.RowDefinitions>
+                                    <RowDefinition />
+                                    <RowDefinition />
+                                </Grid.RowDefinitions>
+                                <Grid.ColumnDefinitions>
+                                    <ColumnDefinition />
+                                    <ColumnDefinition />
+                                </Grid.ColumnDefinitions>
+                                <Rectangle Grid.Row="0" Grid.Column="0" Fill="LightGray" />
+                                <Rectangle Grid.Row="0" Grid.Column="1" />
+                                <Rectangle Grid.Row="1" Grid.Column="0" />
+                                <Rectangle Grid.Row="1" Grid.Column="1" Fill="LightGray" />
+                            </Grid>
+                        </VisualBrush.Visual>
+                    </VisualBrush>
+                </Grid.Background>
+
+                <Grid.Triggers>
+                    <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.MouseLeftButtonUp">
+                        <BeginStoryboard>
+                            <Storyboard TargetName="MultiSelectionPath" TargetProperty="Opacity">
+                                <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </EventTrigger>
+                </Grid.Triggers>
+                
+                 <Grid Name="EditorDisplayGrid"> 
+                     <Grid.RenderTransform> 
+                         <TransformGroup> 
+                             <ScaleTransform ScaleX="{Binding PanZoomViewModel.Zoom}" 
+                                             ScaleY="{Binding PanZoomViewModel.Zoom}" /> 
+                             <TranslateTransform X="{Binding PanZoomViewModel.PanX}" Y="{Binding PanZoomViewModel.PanY}" /> 
+                         </TransformGroup> 
+                     </Grid.RenderTransform> 
+                     <ItemsControl ItemsSource="{Binding Devices}"> 
+                         <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 Device.RgbDevice.Size.Width}" 
+                                                 Height="{Binding Device.RgbDevice.Size.Height}" 
+                                                 s:View.Model="{Binding}"> 
+                                 </ContentControl> 
+                             </DataTemplate> 
+                         </ItemsControl.ItemTemplate> 
+                     </ItemsControl> 
+                 </Grid> 
+          
+                 <!-- Multi-selection rectangle -->
+                 <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> 
+                 </Path> 
+                 
+                 <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
+                             Margin="0, 0, 15, 15">
+                     <Slider Margin="0,0,14,0"
+                             Orientation="Vertical"
+                             Minimum="10"
+                             Maximum="400"
+                             Height="100"
+                             FocusVisualStyle="{x:Null}"
+                             Value="{Binding PanZoomViewModel.ZoomPercentage}"
+                             Style="{StaticResource MaterialDesignDiscreteSlider}" />
+                     <Button Command="{s:Action ResetZoomAndPan}"
+                             Style="{StaticResource MaterialDesignFloatingActionMiniButton}"
+                             HorizontalAlignment="Right"
+                             ToolTip="Reset zoom &amp; position">
+                         <materialDesign:PackIcon Kind="ImageFilterCenterFocus" Height="24" Width="24" />
+                     </Button>
+                 </StackPanel>
+            </Grid>
+        </materialDesign:Card>
+
+        <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="2" Grid.Column="1" VerticalAlignment="Stretch" Margin="5,0,0,0">
+            <materialDesign:DialogHost Identifier="SurfaceListDialogHost" CloseOnClickAway="True" UseLayoutRounding="True">
+                <Grid>
+                    <Grid.RowDefinitions>
+                        <RowDefinition Height="*" />
+                        <RowDefinition Height="Auto" />
+                    </Grid.RowDefinitions>
+                </Grid>
+            </materialDesign:DialogHost>
+        </materialDesign:Card>
+
+        <TextBlock Grid.Row="3" Grid.Column="0" Grid.ColumnSpan="2"
+                   Style="{StaticResource MaterialDesignCaptionTextBlock}" Margin="0,5,0,0">
+            <Run Text="Hold" />
+            <Run FontWeight="Bold" Text="shift" />
+            <Run Text="or click and drag to select multiple LEDs at once. To move around the surface hold down" />
+            <Run FontWeight="Bold" Text="ctrl" />
+            <Run Text="and drag." />
+        </TextBlock>
     </Grid>
 </UserControl>

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

@@ -19,6 +19,7 @@
         <converters:NullToVisibilityConverter x:Key="NullToVisibilityConverter" />
     </UserControl.Resources>
     <Grid>
+        <!-- Device image with fallback -->
         <Image Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
 
         <Rectangle Fill="{DynamicResource ControlBackgroundBrush}"
@@ -32,6 +33,7 @@
                    TextWrapping="Wrap"
                    TextAlignment="Center" />
 
+        <!-- LEDs -->
         <ItemsControl ItemsSource="{Binding Leds}">
             <ItemsControl.ItemsPanel>
                 <ItemsPanelTemplate>
@@ -51,6 +53,7 @@
             </ItemsControl.ItemTemplate>
         </ItemsControl>
 
+        <!-- Selection rectangle -->
         <Rectangle Width="Auto" Height="Auto" StrokeThickness="2">
             <Rectangle.Stroke>
                 <SolidColorBrush Color="{StaticResource IdealForegroundColor}" />