Started work on profiles

src/Artemis.Core/Artemis.Core.csproj

@@ -192,8 +192,9 @@
     <Compile Include="Events\PluginEventArgs.cs" />
     <Compile Include="Services\PluginService.cs" />
     <Compile Include="Services\SettingsService.cs" />
-    <Compile Include="Services\StorageService.cs" />
+    <Compile Include="Services\Storage\Interfaces\IProfileService.cs" />
-    <Compile Include="Services\Storage\ISurfaceService.cs" />
+    <Compile Include="Services\Storage\ProfileService.cs" />
+    <Compile Include="Services\Storage\Interfaces\ISurfaceService.cs" />
     <Compile Include="Services\Storage\SurfaceService.cs" />
   </ItemGroup>
   <ItemGroup>

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

@@ -11,9 +11,21 @@ namespace Artemis.Core.Models.Profile
 {
     public class Profile : IProfileElement
     {
-        private Profile(PluginInfo pluginInfo)
+        internal Profile(PluginInfo pluginInfo, ProfileEntity profileEntity, IPluginService pluginService)
         {
             PluginInfo = pluginInfo;
+            Name = profileEntity.Name;
+
+            // Populate the profile starting at the root, the rest is populated recursively
+            Children = new List<IProfileElement> {Folder.FromFolderEntity(this, profileEntity.RootFolder, pluginService)};
+        }
+
+        internal Profile(PluginInfo pluginInfo, string name)
+        {
+            PluginInfo = pluginInfo;
+            Name = name;
+
+            Children = new List<IProfileElement>();
         }
 
         public PluginInfo PluginInfo { get; }
@@ -46,18 +58,6 @@ namespace Artemis.Core.Models.Profile
             }
         }
 
-        public static Profile FromProfileEntity(PluginInfo pluginInfo, ProfileEntity profileEntity, IPluginService pluginService)
-        {
-            var profile = new Profile(pluginInfo) {Name = profileEntity.Name};
-            lock (profile)
-            {
-                // Populate the profile starting at the root, the rest is populated recursively
-                profile.Children.Add(Folder.FromFolderEntity(profile, profileEntity.RootFolder, pluginService));
-
-                return profile;
-            }
-        }
-
         public void Activate()
         {
             lock (this)

src/Artemis.Core/Plugins/Abstract/ModuleViewModel.cs

@@ -4,13 +4,12 @@ namespace Artemis.Core.Plugins.Abstract
 {
     public abstract class ModuleViewModel : Screen
     {
-        protected ModuleViewModel(Module module, string name)
+        protected ModuleViewModel(Module module, string displayName)
         {
             Module = module;
-            Name = name;
+            DisplayName = displayName;
         }
         
-        public string Name { get; }
         public Module Module { get; }
     }
 }

src/Artemis.Core/Plugins/Abstract/ProfileModule.cs

@@ -46,6 +46,19 @@ namespace Artemis.Core.Plugins.Abstract
                 ActiveProfile = profile;
                 ActiveProfile.Activate();
             }
+
+            OnActiveProfileChanged();
         }
+
+        #region Events
+
+        public event EventHandler ActiveProfileChanged;
+        
+        protected virtual void OnActiveProfileChanged()
+        {
+            ActiveProfileChanged?.Invoke(this, EventArgs.Empty);
+        }
+
+        #endregion
     }
 }

src/Artemis.Core/Services/CoreService.cs

@@ -5,6 +5,7 @@ using Artemis.Core.Exceptions;
 using Artemis.Core.Plugins.Abstract;
 using Artemis.Core.Services.Interfaces;
 using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
 using RGB.NET.Core;
 using Serilog;
 using Color = System.Drawing.Color;

src/Artemis.Core/Services/Storage/Interfaces/IProfileService.cs

@@ -0,0 +1,14 @@
+using System.Collections.Generic;
+using System.Threading.Tasks;
+using Artemis.Core.Models.Profile;
+using Artemis.Core.Plugins.Abstract;
+using Artemis.Core.Services.Interfaces;
+
+namespace Artemis.Core.Services.Storage.Interfaces
+{
+    public interface IProfileService : IArtemisService
+    {
+        Task<ICollection<Profile>> GetProfiles(ProfileModule module);
+        Task<Profile> GetActiveProfile(ProfileModule module);
+    }
+}

src/Artemis.Core/Services/Storage/Interfaces/ISurfaceService.cs

@@ -4,7 +4,7 @@ using Artemis.Core.Events;
 using Artemis.Core.Models.Surface;
 using Artemis.Core.Services.Interfaces;
 
-namespace Artemis.Core.Services.Storage
+namespace Artemis.Core.Services.Storage.Interfaces
 {
     public interface ISurfaceService : IArtemisService
     {

src/Artemis.Core/Services/Storage/ProfileService.cs

@@ -1,36 +1,46 @@
 using System.Collections.Generic;
 using System.Threading.Tasks;
 using Artemis.Core.Models.Profile;
-using Artemis.Core.Plugins.Models;
+using Artemis.Core.Plugins.Abstract;
 using Artemis.Core.Services.Interfaces;
+using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.Storage.Repositories;
 
-namespace Artemis.Core.Services
+namespace Artemis.Core.Services.Storage
 {
     /// <summary>
     ///     Provides access to profile storage
     /// </summary>
-    public class StorageService : IStorageService
+    public class ProfileService : IProfileService
     {
         private readonly IPluginService _pluginService;
         private readonly ProfileRepository _profileRepository;
 
-        internal StorageService(IPluginService pluginService)
+        internal ProfileService(IPluginService pluginService)
         {
             _pluginService = pluginService;
             _profileRepository = new ProfileRepository();
         }
 
-        public async Task<ICollection<Profile>> GetModuleProfiles(PluginInfo pluginInfo)
+        public async Task<ICollection<Profile>> GetProfiles(ProfileModule module)
         {
-            var profileEntities = await _profileRepository.GetByPluginGuidAsync(pluginInfo.Guid);
+            var profileEntities = await _profileRepository.GetByPluginGuidAsync(module.PluginInfo.Guid);
             var profiles = new List<Profile>();
             foreach (var profileEntity in profileEntities)
-                profiles.Add(Profile.FromProfileEntity(pluginInfo, profileEntity, _pluginService));
+                profiles.Add(Profile.FromProfileEntity(module.PluginInfo, profileEntity, _pluginService));
 
             return profiles;
         }
 
+        public async Task<Profile> GetActiveProfile(ProfileModule module)
+        {
+            var profileEntity = await _profileRepository.GetActiveProfileByPluginGuidAsync(module.PluginInfo.Guid);
+            if (profileEntity == null)
+                return null;
+
+            return Profile.FromProfileEntity(module.PluginInfo, profileEntity, _pluginService);
+        }
+
         public async Task SaveProfile(Profile profile)
         {
             // Find a matching profile entity to update
@@ -40,9 +50,4 @@ namespace Artemis.Core.Services
             await _profileRepository.SaveAsync();
         }
     }
-
-    public interface IStorageService
-    {
-        Task<ICollection<Profile>> GetModuleProfiles(PluginInfo pluginInfo);
-    }
 }

src/Artemis.Core/Services/Storage/SurfaceService.cs

@@ -8,6 +8,7 @@ using Artemis.Core.Extensions;
 using Artemis.Core.Models.Surface;
 using Artemis.Core.Plugins.Models;
 using Artemis.Core.Services.Interfaces;
+using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.Storage.Repositories.Interfaces;
 using RGB.NET.Core;
 using Serilog;

src/Artemis.Plugins.Modules.General/GeneralModule.cs

@@ -11,7 +11,7 @@ using Device = Artemis.Core.Models.Surface.Device;
 
 namespace Artemis.Plugins.Modules.General
 {
-    public class GeneralModule : Module
+    public class GeneralModule : ProfileModule
     {
         private readonly ColorBlend _rainbowColorBlend;
         private readonly PluginSettings _settings;

src/Artemis.Storage/Entities/ProfileEntity.cs

@@ -11,6 +11,7 @@ namespace Artemis.Storage.Entities
         public Guid PluginGuid { get; set; }
 
         public string Name { get; set; }
+        public bool IsActive { get; set; }
 
         public int RootFolderId { get; set; }
         public virtual FolderEntity RootFolder { get; set; }

src/Artemis.Storage/Repositories/ProfileRepository.cs

@@ -28,6 +28,11 @@ namespace Artemis.Storage.Repositories
             return await _dbContext.Profiles.Where(p => p.PluginGuid == pluginGuid).ToListAsync();
         }
 
+        public async Task<ProfileEntity> GetActiveProfileByPluginGuidAsync(Guid pluginGuid)
+        {
+            return await _dbContext.Profiles.FirstOrDefaultAsync(p => p.PluginGuid == pluginGuid && p.IsActive);
+        }
+
         public async Task<ProfileEntity> GetByGuidAsync(string guid)
         {
             return await _dbContext.Profiles.FirstOrDefaultAsync(p => p.Guid == guid);

src/Artemis.UI/Artemis.UI.csproj

@@ -181,6 +181,8 @@
     <Compile Include="Screens\Module\ProfileEditor\LayerElements\LayerElementsViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\LayerElements\LayerElementViewModel.cs" />
     <Compile Include="Screens\Module\ProfileEditor\Layers\LayersViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\ProfileEditorPanelViewModel.cs" />
+    <Compile Include="Screens\Module\ProfileEditor\Visualization\ProfileViewModel.cs" />
     <Compile Include="Screens\News\NewsViewModel.cs" />
     <Compile Include="Screens\Workshop\WorkshopViewModel.cs" />
     <Compile Include="Services\Dialog\DialogService.cs" />
@@ -245,6 +247,10 @@
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>
     </Page>
+    <Page Include="Screens\Module\ProfileEditor\Visualization\ProfileView.xaml">
+      <SubType>Designer</SubType>
+      <Generator>MSBuild:Compile</Generator>
+    </Page>
     <Page Include="Screens\News\NewsView.xaml">
       <SubType>Designer</SubType>
       <Generator>MSBuild:Compile</Generator>

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

@@ -5,6 +5,6 @@ namespace Artemis.UI.Ninject.Factories
 {
     public interface IProfileEditorViewModelFactory
     {
-        ProfileEditorViewModel CreateModuleViewModel(Module module);
+        ProfileEditorViewModel CreateModuleViewModel(ProfileModule module);
     }
 }

src/Artemis.UI/Ninject/UiModule.cs

@@ -1,5 +1,6 @@
 using Artemis.UI.Ninject.Factories;
 using Artemis.UI.Screens;
+using Artemis.UI.Screens.Module.ProfileEditor;
 using Artemis.UI.Services.Interfaces;
 using Artemis.UI.Stylet;
 using Artemis.UI.ViewModels.Dialogs;
@@ -38,6 +39,15 @@ namespace Artemis.UI.Ninject
             Bind<IModuleViewModelFactory>().ToFactory();
             Bind<IProfileEditorViewModelFactory>().ToFactory();
 
+            // Bind profile editor VMs
+            Kernel.Bind(x =>
+            {
+                x.FromThisAssembly()
+                    .SelectAllClasses()
+                    .InheritedFrom<ProfileEditorPanelViewModel>()
+                    .BindAllBaseClasses();
+            });
+
             // Bind all UI services as singletons
             Kernel.Bind(x =>
             {

src/Artemis.UI/Screens/Module/ModuleRootView.xaml

@@ -14,7 +14,7 @@
     <dragablz:TabablzControl Margin="0 -1 0 0" ItemsSource="{Binding Items}" SelectedItem="{Binding ActiveItem}" FixedHeaderCount="{Binding FixedHeaderCount}">
         <dragablz:TabablzControl.HeaderItemTemplate>
             <DataTemplate>
-                <TextBlock Text="{Binding Name}" />
+                <TextBlock Text="{Binding DisplayName}" />
             </DataTemplate>
         </dragablz:TabablzControl.HeaderItemTemplate>
         <dragablz:TabablzControl.ContentTemplate>

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

@@ -1,11 +1,12 @@
-using System.Threading.Tasks;
+using System.Linq;
+using System.Threading.Tasks;
 using Artemis.Core.Plugins.Abstract;
 using Artemis.UI.Ninject.Factories;
 using Stylet;
 
 namespace Artemis.UI.Screens.Module
 {
-    public class ModuleRootViewModel : Conductor<ModuleViewModel>.Collection.OneActive
+    public class ModuleRootViewModel : Conductor<Screen>.Collection.OneActive
     {
         private readonly IProfileEditorViewModelFactory _profileEditorViewModelFactory;
 
@@ -27,14 +28,16 @@ namespace Artemis.UI.Screens.Module
             await Task.Delay(400);
 
             // Create the profile editor and module VMs
-            var profileEditor = _profileEditorViewModelFactory.CreateModuleViewModel(Module);
+            if (Module is ProfileModule profileModule)
-            var moduleViewModels = Module.GetViewModels();
+            {
-
+                var profileEditor = _profileEditorViewModelFactory.CreateModuleViewModel(profileModule);
                 Items.Add(profileEditor);
+            }
+
+            var moduleViewModels = Module.GetViewModels();
             Items.AddRange(moduleViewModels);
             
-            // Activate the profile editor
+            ActiveItem = Items.FirstOrDefault();
-            ActiveItem = profileEditor;
         }
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/DisplayConditions/DisplayConditionsViewModel.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions
 {
-    class DisplayConditionsViewModel
+    public class DisplayConditionsViewModel : ProfileEditorPanelViewModel
     {
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/ElementProperties/ElementPropertiesViewModel.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.ElementProperties
 {
-    class ElementPropertiesViewModel
+    public class ElementPropertiesViewModel : ProfileEditorPanelViewModel
     {
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/LayerElements/LayerElementsViewModel.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.LayerElements
 {
-    public class LayerElementsViewModel
+    public class LayerElementsViewModel : ProfileEditorPanelViewModel
     {
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/Layers/LayersViewModel.cs

@@ -6,7 +6,7 @@ using System.Threading.Tasks;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.Layers
 {
-    public class LayersViewModel
+    public class LayersViewModel : ProfileEditorPanelViewModel
     {
     }
 }

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorPanelViewModel.cs

@@ -0,0 +1,8 @@
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor
+{
+    public class ProfileEditorPanelViewModel : Screen
+    {
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorView.xaml

@@ -17,31 +17,6 @@
                 <ResourceDictionary
                     Source="pack://application:,,,/MaterialDesignThemes.Wpf;component/Themes/MaterialDesignTheme.PopupBox.xaml" />
             </ResourceDictionary.MergedDictionaries>
-
-            <Style TargetType="Grid" x:Key="InitializingFade">
-                <Style.Triggers>
-                    <DataTrigger Binding="{Binding IsInitializing}" Value="False">
-                        <DataTrigger.EnterActions>
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.5">
-                                        <DoubleAnimation.EasingFunction>
-                                            <QuadraticEase EasingMode="EaseInOut" />
-                                        </DoubleAnimation.EasingFunction>
-                                    </DoubleAnimation>
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </DataTrigger.EnterActions>
-                        <DataTrigger.ExitActions>
-                            <BeginStoryboard>
-                                <Storyboard>
-                                    <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" />
-                                </Storyboard>
-                            </BeginStoryboard>
-                        </DataTrigger.ExitActions>
-                    </DataTrigger>
-                </Style.Triggers>
-            </Style>
         </ResourceDictionary>
     </UserControl.Resources>
 
@@ -58,129 +33,52 @@
             <RowDefinition Height="200" />
         </Grid.RowDefinitions>
 
-        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="3">
+        <StackPanel Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="2">
             <TextBlock>
                 <materialDesign:PackIcon Kind="AboutOutline" Margin="0 0 0 -3" />  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>
-            <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 10" />
+            <Border BorderBrush="{DynamicResource MaterialDesignDivider}" BorderThickness="0 0 0 1" Margin="0 9 0 8" />
         </StackPanel>
+        <Grid Grid.Row="0" Grid.Column="2">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="*" />
+                <ColumnDefinition Width="Auto" />
+                <ColumnDefinition Width="Auto" />
+            </Grid.ColumnDefinitions>
+            <ComboBox Name="LocaleCombo" 
+                      Height="26"
+                      VerticalAlignment="Top" 
+                      ItemsSource="{Binding Profiles}" 
+                      SelectedItem="{Binding SelectedProfile}" 
+                      DisplayMemberPath="Name">
+                <ComboBox.ItemsPanel>
+                    <ItemsPanelTemplate>
+                        <VirtualizingStackPanel />
+                    </ItemsPanelTemplate>
+                </ComboBox.ItemsPanel>
+            </ComboBox>
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniButton}" 
+                    Margin="10 0" 
+                    Grid.Column="1" 
+                    Width="26" 
+                    Height="26" 
+                    VerticalAlignment="Top"
+                    Command="{s:Action AddProfile}">
+                <materialDesign:PackIcon Kind="Add" Height="14" Width="14" />
+            </Button>
+            <Button Style="{StaticResource MaterialDesignFloatingActionMiniDarkButton}" 
+                    Grid.Column="2"
+                    Width="26" 
+                    Height="26" 
+                    VerticalAlignment="Top"
+                    Command="{s:Action DeleteActiveProfile}">
+                <materialDesign:PackIcon Kind="TrashCanOutline" Height="14" Width="14" />
+            </Button>
+        </Grid>
 
         <!-- Design area -->
         <materialDesign:Card materialDesign:ShadowAssist.ShadowDepth="Depth1" Grid.Row="1" Grid.Column="0" VerticalAlignment="Stretch">
-            <Grid ClipToBounds="True"
+            <ContentControl s:View.Model="{Binding ProfileViewModel}" />
-                  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}" />
-                            </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>
-
-                <!-- Loading indicator -->
-                <Grid Background="{StaticResource MaterialDesignPaper}" Style="{StaticResource InitializingFade}">
-                    <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
-                        <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
-                            Initializing LED visualization...
-                        </TextBlock>
-                        <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" />
-                    </StackPanel>
-                </Grid>
-            </Grid>
         </materialDesign:Card>
 
         <GridSplitter Grid.Row="1" Grid.Column="1" Width="5" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeWE" Margin="5 0" />
@@ -194,13 +92,13 @@
             </Grid.RowDefinitions>
 
             <materialDesign:Card Grid.Row="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Right top</TextBlock>
+                <ContentControl s:View.Model="{Binding LayersViewModel}" />
             </materialDesign:Card>
 
             <GridSplitter Grid.Row="1" Height="5" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeNS" Margin="0 5" />
 
             <materialDesign:Card Grid.Row="2" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Right bottom</TextBlock>
+                <ContentControl s:View.Model="{Binding DisplayConditionsViewModel}" />
             </materialDesign:Card>
         </Grid>
 
@@ -214,13 +112,13 @@
                 <ColumnDefinition Width="*" />
             </Grid.ColumnDefinitions>
             <materialDesign:Card Grid.Column="0" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Bottom left</TextBlock>
+                <ContentControl s:View.Model="{Binding LayerElementsViewModel}" />
             </materialDesign:Card>
 
             <GridSplitter Grid.Column="1" Width="5" Margin="5 0" HorizontalAlignment="Stretch" ShowsPreview="True" Cursor="SizeWE" />
 
             <materialDesign:Card Grid.Column="2" materialDesign:ShadowAssist.ShadowDepth="Depth1" VerticalAlignment="Stretch">
-                <TextBlock>Bottom right</TextBlock>
+                <ContentControl s:View.Model="{Binding ElementPropertiesViewModel}" />
             </materialDesign:Card>
         </Grid>
     </Grid>

src/Artemis.UI/Screens/Module/ProfileEditor/ProfileEditorViewModel.cs

@@ -1,220 +1,81 @@
 using System;
-using System.Collections.ObjectModel;
+using System.Collections.Generic;
 using System.Linq;
-using System.Windows;
+using System.Threading.Tasks;
-using System.Windows.Input;
+using Artemis.Core.Models.Profile;
-using System.Windows.Media;
-using Artemis.Core.Events;
-using Artemis.Core.Models.Surface;
 using Artemis.Core.Plugins.Abstract;
-using Artemis.Core.Services;
+using Artemis.Core.Services.Storage.Interfaces;
-using Artemis.Core.Services.Storage;
+using Artemis.UI.Screens.Module.ProfileEditor.DisplayConditions;
+using Artemis.UI.Screens.Module.ProfileEditor.ElementProperties;
+using Artemis.UI.Screens.Module.ProfileEditor.LayerElements;
+using Artemis.UI.Screens.Module.ProfileEditor.Layers;
 using Artemis.UI.Screens.Module.ProfileEditor.Visualization;
-using Artemis.UI.Screens.Shared;
-using Artemis.UI.Screens.SurfaceEditor;
-using RGB.NET.Core;
 using Stylet;
-using Point = System.Windows.Point;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor
 {
-    public class ProfileEditorViewModel : ModuleViewModel
+    public class ProfileEditorViewModel : Conductor<ProfileEditorPanelViewModel>.Collection.AllActive
     {
-        private readonly TimerUpdateTrigger _updateTrigger;
+        private readonly IProfileService _profileService;
 
-        public ProfileEditorViewModel(Core.Plugins.Abstract.Module module, ISurfaceService surfaceService, ISettingsService settingsService) : base(module, "Profile Editor")
+        public ProfileEditorViewModel(ProfileModule module, ICollection<ProfileEditorPanelViewModel> viewModels, IProfileService profileService)
         {
-            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
+            _profileService = profileService;
-            Devices = new ObservableCollection<ProfileDeviceViewModel>();
-            Execute.OnUIThread(() =>
-            {
-                SelectionRectangle = new RectangleGeometry();
-                PanZoomViewModel = new PanZoomViewModel();
-            });
 
-            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
+            DisplayName = "Profile editor";
+            Module = module;
 
-            // Borrow RGB.NET's update trigger but limit the FPS
+            DisplayConditionsViewModel = (DisplayConditionsViewModel) viewModels.First(vm => vm is DisplayConditionsViewModel);
-            var targetFpsSetting = settingsService.GetSetting("TargetFrameRate", 25);
+            ElementPropertiesViewModel = (ElementPropertiesViewModel) viewModels.First(vm => vm is ElementPropertiesViewModel);
-            var editorTargetFpsSetting = settingsService.GetSetting("EditorTargetFrameRate", 15);
+            LayerElementsViewModel = (LayerElementsViewModel) viewModels.First(vm => vm is LayerElementsViewModel);
-            var targetFps = Math.Min(targetFpsSetting.Value, editorTargetFpsSetting.Value);
+            LayersViewModel = (LayersViewModel) viewModels.First(vm => vm is LayersViewModel);
-            _updateTrigger = new TimerUpdateTrigger {UpdateFrequency = 1.0 / targetFps};
+            ProfileViewModel = (ProfileViewModel) viewModels.First(vm => vm is ProfileViewModel);
-            _updateTrigger.Update += UpdateLeds;
+
+            Items.AddRange(viewModels);
+
+            module.ActiveProfileChanged += ModuleOnActiveProfileChanged;
         }
 
-        public ObservableCollection<ProfileDeviceViewModel> Devices { get; set; }
+        public Core.Plugins.Abstract.Module Module { get; }
-        public bool IsInitializing { get; private set; }
+        public DisplayConditionsViewModel DisplayConditionsViewModel { get; }
-        public RectangleGeometry SelectionRectangle { get; set; }
+        public ElementPropertiesViewModel ElementPropertiesViewModel { get; }
-        public PanZoomViewModel PanZoomViewModel { get; set; }
+        public LayerElementsViewModel LayerElementsViewModel { get; }
+        public LayersViewModel LayersViewModel { get; }
+        public ProfileViewModel ProfileViewModel { get; }
 
-        private void OnActiveSurfaceConfigurationChanged(object sender, SurfaceConfigurationEventArgs e)
+        public BindableCollection<Profile> Profiles { get; set; }
+        public Profile SelectedProfile { get; set; }
+        public bool CanDeleteActiveProfile => SelectedProfile != null;
+
+        public async Task AddProfile()
         {
-            ApplySurfaceConfiguration(e.Surface);
         }
 
-        private void UpdateLeds(object sender, CustomUpdateData customUpdateData)
+        public async Task DeleteActiveProfile()
         {
-            if (IsInitializing)
-                IsInitializing = Devices.Any(d => !d.AddedLeds);
-
-            foreach (var profileDeviceViewModel in Devices)
-                profileDeviceViewModel.Update();
         }
 
-        private void ApplySurfaceConfiguration(Surface surface)
+        private void ModuleOnActiveProfileChanged(object sender, EventArgs e)
         {
-            // Make sure all devices have an up-to-date VM
+            SelectedProfile = ((ProfileModule) Module).ActiveProfile;
-            foreach (var surfaceDeviceConfiguration in surface.Devices)
-            {
-                // Create VMs for missing devices
-                var viewModel = Devices.FirstOrDefault(vm => vm.Device.RgbDevice == surfaceDeviceConfiguration.RgbDevice);
-                if (viewModel == null)
-                {
-                    // Create outside the UI thread to avoid slowdowns as much as possible
-                    var profileDeviceViewModel = new ProfileDeviceViewModel(surfaceDeviceConfiguration);
-                    Execute.OnUIThread(() =>
-                    {
-                        // Gotta call IsInitializing on the UI thread or its never gets picked up
-                        IsInitializing = true;
-                        lock (Devices)
-                        {
-                            Devices.Add(profileDeviceViewModel);
-                        }
-                    });
-                }
-                // Update existing devices
-                else
-                    viewModel.Device = surfaceDeviceConfiguration;
-            }
-
-            // Sort the devices by ZIndex
-            Execute.OnUIThread(() =>
-            {
-                lock (Devices)
-                {
-                    foreach (var device in Devices.OrderBy(d => d.ZIndex).ToList())
-                        Devices.Move(Devices.IndexOf(device), device.ZIndex - 1);
-                }
-            });
         }
 
         protected override void OnActivate()
         {
-            _updateTrigger.Start();
+            Task.Run(LoadProfilesAsync);
             base.OnActivate();
         }
 
-        protected override void OnDeactivate()
+        private async Task LoadProfilesAsync()
         {
-            _updateTrigger.Stop();
+            var profiles = await _profileService.GetProfiles((ProfileModule) Module);
-            base.OnDeactivate();
+            Profiles.Clear();
-        }
+            Profiles.AddRange(profiles);
 
-        #region Selection
+            if (!profiles.Any())
-
-        private MouseDragStatus _mouseDragStatus;
-        private Point _mouseDragStartPoint;
-
-        // ReSharper disable once UnusedMember.Global - Called from view
-        public void EditorGridMouseClick(object sender, MouseEventArgs e)
             {
-            if (IsPanKeyDown())
+                var profile = new Profile();
-                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/Screens/Module/ProfileEditor/Visualization/ProfileView.xaml

@@ -0,0 +1,152 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.ProfileView"
+             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.Screens.Module.ProfileEditor.Visualization"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800"
+             d:DataContext="{d:DesignInstance {x:Type profileEditor:ProfileViewModel}}">
+    <UserControl.Resources>
+        <Style TargetType="Grid" x:Key="InitializingFade">
+            <Style.Triggers>
+                <DataTrigger Binding="{Binding IsInitializing}" Value="False">
+                    <DataTrigger.EnterActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="1.0" To="0.0" Duration="0:0:0.5">
+                                    <DoubleAnimation.EasingFunction>
+                                        <QuadraticEase EasingMode="EaseInOut" />
+                                    </DoubleAnimation.EasingFunction>
+                                </DoubleAnimation>
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.EnterActions>
+                    <DataTrigger.ExitActions>
+                        <BeginStoryboard>
+                            <Storyboard>
+                                <DoubleAnimation Storyboard.TargetProperty="Opacity" From="0.0" To="1.0" />
+                            </Storyboard>
+                        </BeginStoryboard>
+                    </DataTrigger.ExitActions>
+                </DataTrigger>
+            </Style.Triggers>
+        </Style>
+    </UserControl.Resources>
+    <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}" />
+                    </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>
+
+        <!-- Loading indicator -->
+        <Grid Background="{StaticResource MaterialDesignPaper}" Style="{StaticResource InitializingFade}">
+            <StackPanel HorizontalAlignment="Center" VerticalAlignment="Center">
+                <TextBlock FontSize="16" HorizontalAlignment="Center" VerticalAlignment="Center">
+                            Initializing LED visualization...
+                </TextBlock>
+                <ProgressBar Style="{StaticResource MaterialDesignCircularProgressBar}" Value="0" IsIndeterminate="True" />
+            </StackPanel>
+        </Grid>
+    </Grid>
+</UserControl>

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

@@ -0,0 +1,220 @@
+using System;
+using System.Collections.ObjectModel;
+using System.Linq;
+using System.Windows;
+using System.Windows.Input;
+using System.Windows.Media;
+using Artemis.Core.Events;
+using Artemis.Core.Models.Surface;
+using Artemis.Core.Services;
+using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
+using Artemis.UI.Screens.Shared;
+using Artemis.UI.Screens.SurfaceEditor;
+using RGB.NET.Core;
+using Stylet;
+using Point = System.Windows.Point;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
+{
+    public class ProfileViewModel : ProfileEditorPanelViewModel
+    {
+        private readonly TimerUpdateTrigger _updateTrigger;
+
+        public ProfileViewModel(ISurfaceService surfaceService, ISettingsService settingsService)
+        {
+            Devices = new ObservableCollection<ProfileDeviceViewModel>();
+            Execute.OnUIThread(() =>
+            {
+                SelectionRectangle = new RectangleGeometry();
+                PanZoomViewModel = new PanZoomViewModel();
+            });
+
+            ApplySurfaceConfiguration(surfaceService.ActiveSurface);
+
+            // Borrow RGB.NET's update trigger but limit the FPS
+            var targetFpsSetting = settingsService.GetSetting("TargetFrameRate", 25);
+            var editorTargetFpsSetting = settingsService.GetSetting("EditorTargetFrameRate", 15);
+            var targetFps = Math.Min(targetFpsSetting.Value, editorTargetFpsSetting.Value);
+            _updateTrigger = new TimerUpdateTrigger {UpdateFrequency = 1.0 / targetFps};
+            _updateTrigger.Update += UpdateLeds;
+
+            surfaceService.ActiveSurfaceConfigurationChanged += OnActiveSurfaceConfigurationChanged;
+        }
+
+        public bool IsInitializing { get; private set; }
+        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 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)
+                {
+                    // Create outside the UI thread to avoid slowdowns as much as possible
+                    var profileDeviceViewModel = new ProfileDeviceViewModel(surfaceDeviceConfiguration);
+                    Execute.OnUIThread(() =>
+                    {
+                        // Gotta call IsInitializing on the UI thread or its never gets picked up
+                        IsInitializing = true;
+                        lock (Devices)
+                        {
+                            Devices.Add(profileDeviceViewModel);
+                        }
+                    });
+                }
+                // Update existing devices
+                else
+                    viewModel.Device = surfaceDeviceConfiguration;
+            }
+
+            // Sort the devices by ZIndex
+            Execute.OnUIThread(() =>
+            {
+                lock (Devices)
+                {
+                    foreach (var device in Devices.OrderBy(d => d.ZIndex).ToList())
+                        Devices.Move(Devices.IndexOf(device), device.ZIndex - 1);
+                }
+            });
+        }
+
+        private void UpdateLeds(object sender, CustomUpdateData customUpdateData)
+        {
+            if (IsInitializing)
+                IsInitializing = Devices.Any(d => !d.AddedLeds);
+
+            foreach (var profileDeviceViewModel in Devices)
+                profileDeviceViewModel.Update();
+        }
+
+        protected override void OnActivate()
+        {
+            _updateTrigger.Start();
+            base.OnActivate();
+        }
+
+        protected override void OnDeactivate()
+        {
+            _updateTrigger.Stop();
+            base.OnDeactivate();
+        }
+
+        #region Selection
+
+        private MouseDragStatus _mouseDragStatus;
+        private System.Windows.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(System.Windows.Point position, System.Windows.Point relative)
+        {
+            _mouseDragStatus = MouseDragStatus.Selecting;
+            _mouseDragStartPoint = position;
+
+            // Any time dragging starts, start with a new rect
+            SelectionRectangle.Rect = new Rect();
+        }
+
+        private void StopMouseDrag(System.Windows.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/Screens/Settings/SettingsViewModel.cs

@@ -1,6 +1,7 @@
 using Artemis.Core.Services;
 using Artemis.Core.Services.Interfaces;
 using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.UI.Screens.Settings.Debug;
 using Artemis.UI.Screens.Settings.Tabs.Devices;
 using Ninject;

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

@@ -9,6 +9,7 @@ using Artemis.Core.Models.Surface;
 using Artemis.Core.Plugins.Models;
 using Artemis.Core.Services;
 using Artemis.Core.Services.Storage;
+using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.UI.Screens.Shared;
 using Artemis.UI.Screens.SurfaceEditor.Dialogs;
 using Artemis.UI.Screens.SurfaceEditor.Visualization;