Added layer shapes, editor is still WIP

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

@@ -0,0 +1,10 @@
+using Stylet;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
+{
+    public class CanvasViewModel : PropertyChangedBase
+    {
+        public double X { get; set; }
+        public double Y { get; set; }
+    }
+}

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

@@ -21,8 +21,8 @@
         </Grid.LayoutTransform>
 
         <!-- Device image with fallback -->
-        <Image VerticalAlignment="Top"
-               HorizontalAlignment="Left"
+        <Image VerticalAlignment="Stretch"
+               HorizontalAlignment="Stretch"
                Source="{Binding Device.RgbDevice.DeviceInfo.Image, Converter={StaticResource NullToImageConverter}}" />
 
         <Rectangle Fill="{DynamicResource MaterialDesignCardBackground}"

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

@@ -7,7 +7,7 @@ using Stylet;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
 {
-    public class ProfileDeviceViewModel : PropertyChangedBase
+    public class ProfileDeviceViewModel : CanvasViewModel 
     {
         public ProfileDeviceViewModel(ArtemisDevice device)
         {
@@ -21,13 +21,13 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
         public ArtemisDevice Device { get; set; }
         public bool AddedLeds { get; private set; }
 
-        public double X
+        public new double X
         {
             get => Device.X;
             set => Device.X = value;
         }
 
-        public double Y
+        public new double Y
         {
             get => Device.Y;
             set => Device.Y = value;

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

@@ -23,7 +23,7 @@
                                     </DoubleAnimation.EasingFunction>
                                 </DoubleAnimation>
                                 <ObjectAnimationUsingKeyFrames BeginTime="0:0:0.5" Storyboard.TargetProperty="Visibility">
-                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}"/>
+                                    <DiscreteObjectKeyFrame KeyTime="00:00:00" Value="{x:Static Visibility.Hidden}" />
                                 </ObjectAnimationUsingKeyFrames>
                             </Storyboard>
                         </BeginStoryboard>
@@ -39,164 +39,151 @@
             </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}"
-          Cursor="{Binding Cursor}"
-          utilities:SizeObserver.Observe="True"
-          utilities:SizeObserver.ObservedWidth="{Binding PanZoomViewModel.CanvasWidth, Mode=OneWayToSource}"
-          utilities:SizeObserver.ObservedHeight="{Binding PanZoomViewModel.CanvasHeight, Mode=OneWayToSource}">
 
-        <Grid.Background>
-            <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
-                <VisualBrush.Visual>
-                    <Grid Width="25" Height="25">
-                        <Grid.RowDefinitions>
-                            <RowDefinition />
-                            <RowDefinition />
-                        </Grid.RowDefinitions>
-                        <Grid.ColumnDefinitions>
-                            <ColumnDefinition />
-                            <ColumnDefinition />
-                        </Grid.ColumnDefinitions>
-                        <Rectangle Grid.Row="0" Grid.Column="0" Fill="{DynamicResource MaterialDesignPaper}" />
-                        <Rectangle Grid.Row="0" Grid.Column="1" />
-                        <Rectangle Grid.Row="1" Grid.Column="0"  />
-                        <Rectangle Grid.Row="1" Grid.Column="1" Fill="{DynamicResource MaterialDesignPaper}" />
-                    </Grid>
-                </VisualBrush.Visual>
-            </VisualBrush>
-        </Grid.Background>
+    <Grid>
+        <Grid.ColumnDefinitions>
+            <ColumnDefinition Width="Auto" />
+            <ColumnDefinition Width="*" />
+        </Grid.ColumnDefinitions>
+        <ToolBarTray Orientation="Vertical" Width="58">
+            <ToolBar Style="{DynamicResource MaterialDesignToolBar}" ClipToBounds="False" ToolBarTray.IsLocked="True" >
+                <ListBox SelectedIndex="{Binding ActiveToolIndex}" ToolBar.OverflowMode="Never">
+                    <ListBox.ItemsPanel>
+                        <ItemsPanelTemplate>
+                            <StackPanel Orientation="Vertical"/>
+                        </ItemsPanelTemplate>
+                    </ListBox.ItemsPanel>
+                    <ListBoxItem ToolTip="Pan over different parts of the surface" >
+                        <materialDesign:PackIcon Kind="HandLeft" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Change layer selection" >
+                        <materialDesign:PackIcon Kind="SelectionDrag" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Add to layer selection">
+                        <materialDesign:PackIcon Kind="PencilPlusOutline" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Remove from layer selection">
+                        <materialDesign:PackIcon Kind="PencilMinusOutline" />
+                    </ListBoxItem>
+                    <Separator />
+                    <ListBoxItem ToolTip="Create round shape in layer">
+                        <materialDesign:PackIcon Kind="ShapeCirclePlus" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Create rectangular shape in layer">
+                        <materialDesign:PackIcon Kind="ShapeRectanglePlus" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Create polygonal shape in layer">
+                        <materialDesign:PackIcon Kind="ShapePolygonPlus" />
+                    </ListBoxItem>
+                    <ListBoxItem ToolTip="Fill entire layer">
+                        <materialDesign:PackIcon Kind="FormatColourFill" />
+                    </ListBoxItem>
+                </ListBox>
+               
+            </ToolBar>
+        </ToolBarTray>
+        <Grid Grid.Column="1"
+              ClipToBounds="True"
+              KeyUp="{s:Action CanvasKeyUp}"
+              KeyDown="{s:Action CanvasKeyDown}"
+              MouseWheel="{s:Action CanvasMouseWheel}"
+              MouseUp="{s:Action CanvasMouseDown}"
+              MouseDown="{s:Action CanvasMouseUp}"
+              MouseMove="{s:Action CanvasMouseMove}"
+              Cursor="{Binding ActiveToolViewModel.Cursor}"
+              utilities:SizeObserver.Observe="True"
+              utilities:SizeObserver.ObservedWidth="{Binding PanZoomViewModel.CanvasWidth, Mode=OneWayToSource}"
+              utilities:SizeObserver.ObservedHeight="{Binding PanZoomViewModel.CanvasHeight, Mode=OneWayToSource}">
 
-        <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.ContextMenu>
-            <ContextMenu>
-                <MenuItem Header="Create new layer for selection" Command="{s:Action CreateLayer}" CommandParameter="{Binding}">
-                    <MenuItem.Icon>
-                        <materialDesign:PackIcon Kind="LayersPlus" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="Apply selection to layer" Command="{s:Action ApplyToLayer}" CommandParameter="{Binding}">
-                    <MenuItem.Icon>
-                        <materialDesign:PackIcon Kind="Selection" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <Separator />
-                <MenuItem Header="Select all" Command="{s:Action SelectAll}" CommandParameter="{Binding}">
-                    <MenuItem.Icon>
-                        <materialDesign:PackIcon Kind="SelectAll" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="Inverse selection" Command="{s:Action InverseSelection}" CommandParameter="{Binding}">
-                    <MenuItem.Icon>
-                        <materialDesign:PackIcon Kind="SelectInverse" />
-                    </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="Clear selection" Command="{s:Action ClearSelection}" CommandParameter="{Binding}">
-                    <MenuItem.Icon>
-                        <materialDesign:PackIcon Kind="SelectOff" />
-                    </MenuItem.Icon>
-                </MenuItem>
-            </ContextMenu>
-        </Grid.ContextMenu>
-
-        <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 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 ZIndex="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10">
-            <materialDesign:Card Padding="8">
-                <StackPanel Orientation="Horizontal">
-                    <CheckBox Style="{StaticResource MaterialDesignCheckBox}" IsChecked="{Binding HighlightSelectedLayer.Value}">
-                        Highlight selected layer
-                    </CheckBox>
-                    <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="10 0 0 0" IsChecked="{Binding PauseRenderingOnFocusLoss.Value}">
-                        Pause visualization on focus loss
-                    </CheckBox>
-                </StackPanel>
-            </materialDesign:Card>
-        </StackPanel>
-
-        <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
-                    Margin="10" ZIndex="1">
-            <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" />
+            <Grid.Background>
+                <VisualBrush TileMode="Tile" Stretch="Uniform" Viewport="{Binding PanZoomViewModel.BackgroundViewport}" ViewportUnits="Absolute">
+                    <VisualBrush.Visual>
+                        <Grid Width="25" Height="25">
+                            <Grid.RowDefinitions>
+                                <RowDefinition />
+                                <RowDefinition />
+                            </Grid.RowDefinitions>
+                            <Grid.ColumnDefinitions>
+                                <ColumnDefinition />
+                                <ColumnDefinition />
+                            </Grid.ColumnDefinitions>
+                            <Rectangle Grid.Row="0" Grid.Column="0" Fill="{DynamicResource MaterialDesignPaper}" />
+                            <Rectangle Grid.Row="0" Grid.Column="1" />
+                            <Rectangle Grid.Row="1" Grid.Column="0" />
+                            <Rectangle Grid.Row="1" Grid.Column="1" Fill="{DynamicResource MaterialDesignPaper}" />
+                        </Grid>
+                    </VisualBrush.Visual>
+                </VisualBrush>
+            </Grid.Background>
+            
+            <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 s:View.Model="{Binding}" />
+                        </DataTemplate>
+                    </ItemsControl.ItemTemplate>
+                </ItemsControl>
+            </Grid>
+          
+            <StackPanel ZIndex="1" VerticalAlignment="Bottom" HorizontalAlignment="Left" Margin="10">
+                <materialDesign:Card Padding="8">
+                    <StackPanel Orientation="Horizontal">
+                        <CheckBox Style="{StaticResource MaterialDesignCheckBox}" IsChecked="{Binding HighlightSelectedLayer.Value}">
+                            Highlight selected layer
+                        </CheckBox>
+                        <CheckBox Style="{StaticResource MaterialDesignCheckBox}" Margin="10 0 0 0" IsChecked="{Binding PauseRenderingOnFocusLoss.Value}">
+                            Pause visualization on focus loss
+                        </CheckBox>
+                    </StackPanel>
+                </materialDesign:Card>
             </StackPanel>
+
+            <StackPanel Orientation="Vertical" VerticalAlignment="Bottom" HorizontalAlignment="Right"
+                        Margin="10" ZIndex="1">
+                <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}" d:IsHidden="True">
+                <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>
     </Grid>
+
 </UserControl>

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

@@ -2,7 +2,6 @@
 using System.Collections.Generic;
 using System.Collections.ObjectModel;
 using System.Linq;
-using System.Windows;
 using System.Windows.Input;
 using System.Windows.Media;
 using Artemis.Core.Events;
@@ -12,13 +11,11 @@ using Artemis.Core.Plugins.Models;
 using Artemis.Core.Services;
 using Artemis.Core.Services.Storage.Interfaces;
 using Artemis.UI.Events;
-using Artemis.UI.Extensions;
+using Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools;
 using Artemis.UI.Screens.Shared;
-using Artemis.UI.Screens.SurfaceEditor;
 using Artemis.UI.Services.Interfaces;
 using RGB.NET.Core;
 using Stylet;
-using Point = System.Windows.Point;
 
 namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
 {
@@ -29,25 +26,21 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
         private readonly ISurfaceService _surfaceService;
         private TimerUpdateTrigger _updateTrigger;
 
-        public ProfileViewModel(IProfileEditorService profileEditorService,
-            ISurfaceService surfaceService,
-            ISettingsService settingsService,
-            IEventAggregator eventAggregator)
+        public ProfileViewModel(IProfileEditorService profileEditorService, ISurfaceService surfaceService, ISettingsService settingsService, IEventAggregator eventAggregator)
         {
             _profileEditorService = profileEditorService;
             _surfaceService = surfaceService;
             _settingsService = settingsService;
-            Devices = new ObservableCollection<ProfileDeviceViewModel>();
-            Cursor = null;
 
-            Execute.PostToUIThread(() =>
+            Execute.OnUIThreadSync(() =>
             {
-                SelectionRectangle = new RectangleGeometry();
+                CanvasViewModels = new ObservableCollection<CanvasViewModel>();
                 PanZoomViewModel = new PanZoomViewModel();
             });
 
             ApplySurfaceConfiguration(surfaceService.ActiveSurface);
             CreateUpdateTrigger();
+            ActivateToolByIndex(0);
 
             _profileEditorService.SelectedProfileElementChanged += OnSelectedProfileElementChanged;
             _profileEditorService.SelectedProfileElementUpdated += OnSelectedProfileElementChanged;
@@ -55,13 +48,42 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
         }
 
         public bool IsInitializing { get; private set; }
-        public ObservableCollection<ProfileDeviceViewModel> Devices { get; set; }
-        public RectangleGeometry SelectionRectangle { get; set; }
+        public ObservableCollection<CanvasViewModel> CanvasViewModels { get; set; }
         public PanZoomViewModel PanZoomViewModel { get; set; }
         public PluginSetting<bool> HighlightSelectedLayer { get; set; }
         public PluginSetting<bool> PauseRenderingOnFocusLoss { get; set; }
 
-        public Cursor Cursor { get; set; }
+        public ReadOnlyCollection<ProfileDeviceViewModel> Devices => CanvasViewModels
+            .Where(vm => vm is ProfileDeviceViewModel)
+            .Cast<ProfileDeviceViewModel>()
+            .ToList()
+            .AsReadOnly();
+
+        public VisualizationToolViewModel ActiveToolViewModel
+        {
+            get => _activeToolViewModel;
+            set
+            {
+                // Remove the tool from the canvas
+                if (_activeToolViewModel != null)
+                    CanvasViewModels.Remove(_activeToolViewModel);
+                // Set the new tool
+                _activeToolViewModel = value;
+                // Add the new tool to the canvas
+                if (_activeToolViewModel != null)
+                    CanvasViewModels.Add(_activeToolViewModel);
+            }
+        }
+
+        public int ActiveToolIndex
+        {
+            get => _activeToolIndex;
+            set
+            {
+                _activeToolIndex = value;
+                ActivateToolByIndex(value);
+            }
+        }
 
         private void CreateUpdateTrigger()
         {
@@ -82,12 +104,8 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
 
         private void ApplySurfaceConfiguration(ArtemisSurface surface)
         {
-            List<ArtemisDevice> devices;
-            lock (Devices)
-            {
-                devices = new List<ArtemisDevice>();
-                devices.AddRange(surface.Devices);
-            }
+            var devices = new List<ArtemisDevice>();
+            devices.AddRange(surface.Devices);
 
             // Make sure all devices have an up-to-date VM
             foreach (var surfaceDeviceConfiguration in devices)
@@ -102,9 +120,9 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                     {
                         // Gotta call IsInitializing on the UI thread or its never gets picked up
                         IsInitializing = true;
-                        lock (Devices)
+                        lock (CanvasViewModels)
                         {
-                            Devices.Add(profileDeviceViewModel);
+                            CanvasViewModels.Add(profileDeviceViewModel);
                         }
                     });
                 }
@@ -112,21 +130,22 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
                 else
                     viewModel.Device = surfaceDeviceConfiguration;
             }
-            
+
+
             // Sort the devices by ZIndex
             Execute.PostToUIThread(() =>
             {
-                lock (Devices)
+                lock (CanvasViewModels)
                 {
                     foreach (var device in Devices.OrderBy(d => d.ZIndex).ToList())
-                        Devices.Move(Devices.IndexOf(device), device.ZIndex - 1);
+                        CanvasViewModels.Move(CanvasViewModels.IndexOf(device), device.ZIndex - 1);
                 }
             });
         }
 
         private void UpdateLeds(object sender, CustomUpdateData customUpdateData)
         {
-            lock (Devices)
+            lock (CanvasViewModels)
             {
                 if (IsInitializing)
                     IsInitializing = Devices.Any(d => !d.AddedLeds);
@@ -165,11 +184,83 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
         {
             HighlightSelectedLayer.Save();
             PauseRenderingOnFocusLoss.Save();
-            
-            _updateTrigger.Stop();
+
+            try
+            {
+                _updateTrigger.Stop();
+            }
+            catch (NullReferenceException)
+            {
+                // TODO: Remove when fixed in RGB.NET, or avoid double stopping
+            }
+
             base.OnDeactivate();
         }
 
+        #region Buttons
+
+        private void ActivateToolByIndex(int value)
+        {
+            switch (value)
+            {
+                case 0:
+                    ActiveToolViewModel = new ViewpointMoveToolViewModel(this, _profileEditorService);
+                    break;
+                case 1:
+                    ActiveToolViewModel = new SelectionToolViewModel(this, _profileEditorService);
+                    break;
+                case 2:
+                    ActiveToolViewModel = new SelectionAddToolViewModel(this, _profileEditorService);
+                    break;
+                case 3:
+                    ActiveToolViewModel = new SelectionRemoveToolViewModel(this, _profileEditorService);
+                    break;
+                case 4:
+                    ActiveToolViewModel = new EllipseToolViewModel(this, _profileEditorService);
+                    break;
+                case 5:
+                    ActiveToolViewModel = new RectangleToolViewModel(this, _profileEditorService);
+                    break;
+                case 6:
+                    ActiveToolViewModel = new PolygonToolViewModel(this, _profileEditorService);
+                    break;
+                case 7:
+                    ActiveToolViewModel = new FillToolViewModel(this, _profileEditorService);
+                    break;
+            }
+        }
+
+        public void ResetZoomAndPan()
+        {
+            PanZoomViewModel.Reset();
+        }
+
+        #endregion
+
+        #region Mouse
+
+        public void CanvasMouseDown(object sender, MouseButtonEventArgs e)
+        {
+            ActiveToolViewModel?.MouseDown(sender, e);
+        }
+
+        public void CanvasMouseUp(object sender, MouseButtonEventArgs e)
+        {
+            ActiveToolViewModel?.MouseUp(sender, e);
+        }
+
+        public void CanvasMouseMove(object sender, MouseEventArgs e)
+        {
+            ActiveToolViewModel?.MouseMove(sender, e);
+        }
+
+        public void CanvasMouseWheel(object sender, MouseWheelEventArgs e)
+        {
+            ActiveToolViewModel?.MouseWheel(sender, e);
+        }
+
+        #endregion
+
         #region Context menu actions
 
         public bool CanApplyToLayer { get; set; }
@@ -209,123 +300,23 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
 
         #endregion
 
-        #region Selection
+        #region Keys
 
-        private MouseDragStatus _mouseDragStatus;
-        private Point _mouseDragStartPoint;
+        private int _previousTool;
+        private int _activeToolIndex;
+        private VisualizationToolViewModel _activeToolViewModel;
 
-        // ReSharper disable once UnusedMember.Global - Called from view
-        public void EditorGridMouseClick(object sender, MouseButtonEventArgs e)
-        {
-            if (IsPanKeyDown() || e.ChangedButton == MouseButton.Right)
-                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);
-            foreach (var device in Devices)
-            {
-                foreach (var profileLedViewModel in device.Leds)
-                {
-                    if (PanZoomViewModel.TransformContainingRect(profileLedViewModel.Led.RgbLed.AbsoluteLedRectangle.ToWindowsRect(1)).IntersectsWith(selectedRect))
-                        profileLedViewModel.IsSelected = true;
-                    else if (!Keyboard.IsKeyDown(Key.LeftShift) && !Keyboard.IsKeyDown(Key.RightShift))
-                        profileLedViewModel.IsSelected = false;
-                }
-            }
-
-            _mouseDragStatus = MouseDragStatus.None;
-        }
-
-        private void UpdateSelection(Point position)
-        {
-            if (IsPanKeyDown())
-                return;
-
-            var selectedRect = new Rect(_mouseDragStartPoint, position);
-            SelectionRectangle.Rect = selectedRect;
-
-            foreach (var device in Devices)
-            {
-                foreach (var profileLedViewModel in device.Leds)
-                {
-                    if (PanZoomViewModel.TransformContainingRect(profileLedViewModel.Led.RgbLed.AbsoluteLedRectangle.ToWindowsRect(1)).IntersectsWith(selectedRect))
-                        profileLedViewModel.IsSelected = true;
-                    else if (!Keyboard.IsKeyDown(Key.LeftShift) && !Keyboard.IsKeyDown(Key.RightShift))
-                        profileLedViewModel.IsSelected = false;
-                }
-            }
-        }
-
-        #endregion
-
-        #region Panning and zooming
-
-        public void EditorGridMouseWheel(object sender, MouseWheelEventArgs e)
-        {
-            PanZoomViewModel.ProcessMouseScroll(sender, e);
-        }
-
-        public void EditorGridKeyDown(object sender, KeyEventArgs e)
+        public void CanvasKeyDown(object sender, KeyEventArgs e)
         {
+            _previousTool = ActiveToolIndex;
             if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsDown)
-                Cursor = Cursors.ScrollAll;
+                ActiveToolViewModel = new ViewpointMoveToolViewModel(this, _profileEditorService);
         }
 
-        public void EditorGridKeyUp(object sender, KeyEventArgs e)
+        public void CanvasKeyUp(object sender, KeyEventArgs e)
         {
             if ((e.Key == Key.LeftCtrl || e.Key == Key.RightCtrl) && e.IsUp)
-                Cursor = 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);
+                ActivateToolByIndex(_previousTool);
         }
 
         #endregion
@@ -348,10 +339,17 @@ namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization
             if (PauseRenderingOnFocusLoss == null || ScreenState != ScreenState.Active)
                 return;
 
-            if (PauseRenderingOnFocusLoss.Value && !message.IsFocused)
-                _updateTrigger.Stop();
-            else if (PauseRenderingOnFocusLoss.Value && message.IsFocused)
-                _updateTrigger.Start();
+            try
+            {
+                if (PauseRenderingOnFocusLoss.Value && !message.IsFocused)
+                    _updateTrigger.Stop();
+                else if (PauseRenderingOnFocusLoss.Value && message.IsFocused)
+                    _updateTrigger.Start();
+            }
+            catch (NullReferenceException)
+            {
+                // TODO: Remove when fixed in RGB.NET, or avoid double stopping
+            }
         }
 
         #endregion

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/EllipseToolView.xaml

@@ -0,0 +1,48 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.EllipseToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             xmlns:s="https://github.com/canton7/Stylet"
+             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
+             mc:Ignorable="d"
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Canvas>
+        <Canvas.Triggers>
+            <EventTrigger RoutedEvent="Canvas.MouseLeftButtonDown">
+                <BeginStoryboard>
+                    <Storyboard TargetName="Preview" TargetProperty="Opacity">
+                        <DoubleAnimation From="0" To="1" Duration="0:0:0.1" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+            <EventTrigger RoutedEvent="Canvas.MouseLeftButtonUp">
+                <BeginStoryboard>
+                    <Storyboard TargetName="Preview" TargetProperty="Opacity">
+                        <DoubleAnimation From="1" To="0" Duration="0:0:0.2" />
+                    </Storyboard>
+                </BeginStoryboard>
+            </EventTrigger>
+        </Canvas.Triggers>
+        <Canvas.ContextMenu>
+            <ContextMenu>
+                <MenuItem Header="Ellipse action 1" Command="{s:Action CreateLayer}" CommandParameter="{Binding}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="LayersPlus" />
+                    </MenuItem.Icon>
+                </MenuItem>
+                <MenuItem Header="Ellipse action 2" Command="{s:Action ApplyToLayer}" CommandParameter="{Binding}">
+                    <MenuItem.Icon>
+                        <materialDesign:PackIcon Kind="Selection" />
+                    </MenuItem.Icon>
+                </MenuItem>
+            </ContextMenu>
+        </Canvas.ContextMenu>
+        <Ellipse Stroke="{DynamicResource PrimaryHueLightBrush}" StrokeThickness="1" IsHitTestVisible="False" x:Name="Preview" Opacity="1" Width="100" Height="100">
+            <Ellipse.Fill>
+                <SolidColorBrush Color="{DynamicResource Primary400}" Opacity="0.25" />
+            </Ellipse.Fill>
+        </Ellipse>
+    </Canvas>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/EllipseToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for EllipseToolView.xaml
+    /// </summary>
+    public partial class EllipseToolView : UserControl
+    {
+        public EllipseToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/EllipseToolViewModel.cs

@@ -0,0 +1,18 @@
+using System.IO;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class EllipseToolViewModel : VisualizationToolViewModel
+    {
+        public EllipseToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_crosshair))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/FillToolView.xaml

@@ -0,0 +1,9 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.FillToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/FillToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for FillToolView.xaml
+    /// </summary>
+    public partial class FillToolView : UserControl
+    {
+        public FillToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/FillToolViewModel.cs

@@ -0,0 +1,39 @@
+using System.IO;
+using System.Linq;
+using System.Windows;
+using System.Windows.Input;
+using Artemis.Core.Models.Profile.LayerShapes;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class FillToolViewModel : VisualizationToolViewModel
+    {
+        public FillToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_fill))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+
+        public override void MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            base.MouseUp(sender, e);
+
+            // Find out if the click is inside a layer and if so, fill it
+            var position = e.GetPosition((IInputElement) sender);
+            var panZoomVm = ProfileViewModel.PanZoomViewModel;
+
+            var layer = ProfileEditorService.SelectedProfile
+                .GetAllLayers()
+                .FirstOrDefault(l => l.Leds.Any(
+                    led => panZoomVm.TransformContainingRect(led.RgbLed.AbsoluteLedRectangle).Contains(position))
+                );
+
+            if (layer != null)
+                layer.LayerShape = new Fill(layer);
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/PolygonToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.PolygonToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/PolygonToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for PolygonToolView.xaml
+    /// </summary>
+    public partial class PolygonToolView : UserControl
+    {
+        public PolygonToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/PolygonToolViewModel.cs

@@ -0,0 +1,18 @@
+using System.IO;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class PolygonToolViewModel : VisualizationToolViewModel
+    {
+        public PolygonToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_crosshair))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/RectangleToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.RectangleToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/RectangleToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for RectangleToolView.xaml
+    /// </summary>
+    public partial class RectangleToolView : UserControl
+    {
+        public RectangleToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/RectangleToolViewModel.cs

@@ -0,0 +1,18 @@
+using System.IO;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class RectangleToolViewModel : VisualizationToolViewModel
+    {
+        public RectangleToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_crosshair))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionAddToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.SelectionAddToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionAddToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for SelectionAddToolView.xaml
+    /// </summary>
+    public partial class SelectionAddToolView : UserControl
+    {
+        public SelectionAddToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionAddToolViewModel.cs

@@ -0,0 +1,36 @@
+using System.IO;
+using System.Windows;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class SelectionAddToolViewModel : VisualizationToolViewModel
+    {
+        public SelectionAddToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_pen_plus))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+
+        public override void MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            base.MouseUp(sender, e);
+
+            var position = e.GetPosition((IInputElement) sender);
+            var selectedRect = new Rect(MouseDownStartPosition, position);
+
+            foreach (var device in ProfileViewModel.Devices)
+            {
+                foreach (var ledViewModel in device.Leds)
+                {
+                    if (ProfileViewModel.PanZoomViewModel.TransformContainingRect(ledViewModel.Led.RgbLed.AbsoluteLedRectangle).IntersectsWith(selectedRect))
+                        ledViewModel.IsSelected = true;
+                }
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionRemoveToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.SelectionRemoveToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionRemoveToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for SelectionRemoveToolView.xaml
+    /// </summary>
+    public partial class SelectionRemoveToolView : UserControl
+    {
+        public SelectionRemoveToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionRemoveToolViewModel.cs

@@ -0,0 +1,36 @@
+using System.IO;
+using System.Windows;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class SelectionRemoveToolViewModel : VisualizationToolViewModel
+    {
+        public SelectionRemoveToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_pen_min))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+
+        public override void MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            base.MouseUp(sender, e);
+
+            var position = e.GetPosition((IInputElement)sender);
+            var selectedRect = new Rect(MouseDownStartPosition, position);
+
+            foreach (var device in ProfileViewModel.Devices)
+            {
+                foreach (var ledViewModel in device.Leds)
+                {
+                    if (ProfileViewModel.PanZoomViewModel.TransformContainingRect(ledViewModel.Led.RgbLed.AbsoluteLedRectangle).IntersectsWith(selectedRect))
+                        ledViewModel.IsSelected = false;
+                }
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.SelectionToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for SelectionToolView.xaml
+    /// </summary>
+    public partial class SelectionToolView : UserControl
+    {
+        public SelectionToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/SelectionToolViewModel.cs

@@ -0,0 +1,64 @@
+using System.IO;
+using System.Windows;
+using System.Windows.Input;
+using Artemis.UI.Properties;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class SelectionToolViewModel : VisualizationToolViewModel
+    {
+        public SelectionToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            using (var stream = new MemoryStream(Resources.aero_crosshair))
+            {
+                Cursor = new Cursor(stream);
+            }
+        }
+
+        public override void MouseDown(object sender, MouseButtonEventArgs e)
+        {
+            base.MouseDown(sender, e);
+//            ProfileViewModel.SelectionRectangle.Rect = new Rect();
+        }
+
+        public override void MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            base.MouseUp(sender, e);
+
+            var position = e.GetPosition((IInputElement) sender);
+            var selectedRect = new Rect(MouseDownStartPosition, position);
+
+            foreach (var device in ProfileViewModel.Devices)
+            {
+                foreach (var ledViewModel in device.Leds)
+                {
+                    if (ProfileViewModel.PanZoomViewModel.TransformContainingRect(ledViewModel.Led.RgbLed.AbsoluteLedRectangle).IntersectsWith(selectedRect))
+                        ledViewModel.IsSelected = true;
+                    else if (!Keyboard.IsKeyDown(Key.LeftShift) && !Keyboard.IsKeyDown(Key.RightShift))
+                        ledViewModel.IsSelected = false;
+                }
+            }
+        }
+
+        public override void MouseMove(object sender, MouseEventArgs e)
+        {
+            base.MouseMove(sender, e);
+
+            var position = e.GetPosition((IInputElement) sender);
+            var selectedRect = new Rect(MouseDownStartPosition, position);
+//            ProfileViewModel.SelectionRectangle.Rect = selectedRect;
+
+            foreach (var device in ProfileViewModel.Devices)
+            {
+                foreach (var ledViewModel in device.Leds)
+                {
+                    if (ProfileViewModel.PanZoomViewModel.TransformContainingRect(ledViewModel.Led.RgbLed.AbsoluteLedRectangle).IntersectsWith(selectedRect))
+                        ledViewModel.IsSelected = true;
+                    else if (!Keyboard.IsKeyDown(Key.LeftShift) && !Keyboard.IsKeyDown(Key.RightShift))
+                        ledViewModel.IsSelected = false;
+                }
+            }
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/ViewpointMoveToolView.xaml

@@ -0,0 +1,12 @@
+<UserControl x:Class="Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools.ViewpointMoveToolView"
+             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:local="clr-namespace:Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools"
+             mc:Ignorable="d" 
+             d:DesignHeight="450" d:DesignWidth="800">
+    <Grid>
+            
+    </Grid>
+</UserControl>

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/ViewpointMoveToolView.xaml.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+using System.Threading.Tasks;
+using System.Windows;
+using System.Windows.Controls;
+using System.Windows.Data;
+using System.Windows.Documents;
+using System.Windows.Input;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
+using System.Windows.Navigation;
+using System.Windows.Shapes;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    /// <summary>
+    /// Interaction logic for ViewpointMoveToolView.xaml
+    /// </summary>
+    public partial class ViewpointMoveToolView : UserControl
+    {
+        public ViewpointMoveToolView()
+        {
+            InitializeComponent();
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/ViewpointMoveToolViewModel.cs

@@ -0,0 +1,26 @@
+using System.Windows.Input;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public class ViewpointMoveToolViewModel : VisualizationToolViewModel
+    {
+        public ViewpointMoveToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService) : base(profileViewModel, profileEditorService)
+        {
+            Cursor = Cursors.Hand;
+        }
+
+        public override void MouseMove(object sender, MouseEventArgs e)
+        {
+            base.MouseMove(sender, e);
+            if (IsMouseDown)
+                ProfileViewModel.PanZoomViewModel.ProcessMouseMove(sender, e);
+        }
+
+        public override void MouseWheel(object sender, MouseWheelEventArgs e)
+        {
+            base.MouseWheel(sender, e);
+            ProfileViewModel.PanZoomViewModel.ProcessMouseScroll(sender, e);
+        }
+    }
+}

src/Artemis.UI/Screens/Module/ProfileEditor/Visualization/Tools/VisualizationToolViewModel.cs

@@ -0,0 +1,45 @@
+using System.Windows;
+using System.Windows.Input;
+using Artemis.UI.Services.Interfaces;
+
+namespace Artemis.UI.Screens.Module.ProfileEditor.Visualization.Tools
+{
+    public abstract class VisualizationToolViewModel : CanvasViewModel
+    {
+        protected VisualizationToolViewModel(ProfileViewModel profileViewModel, IProfileEditorService profileEditorService)
+        {
+            // Not relevant for visualization tools as they overlay the entire canvas
+            X = 0;
+            Y = 0;
+
+            ProfileViewModel = profileViewModel;
+            ProfileEditorService = profileEditorService;
+            Cursor = Cursors.Arrow;
+        }
+
+        public ProfileViewModel ProfileViewModel { get; }
+        public IProfileEditorService ProfileEditorService { get; }
+        public Cursor Cursor { get; protected set; }
+        public bool IsMouseDown { get; protected set; }
+        public Point MouseDownStartPosition { get; protected set; }
+
+        public virtual void MouseDown(object sender, MouseButtonEventArgs e)
+        {
+            IsMouseDown = true;
+            MouseDownStartPosition = e.GetPosition((IInputElement) sender);
+        }
+
+        public virtual void MouseUp(object sender, MouseButtonEventArgs e)
+        {
+            IsMouseDown = false;
+        }
+
+        public virtual void MouseMove(object sender, MouseEventArgs e)
+        {
+        }
+
+        public virtual void MouseWheel(object sender, MouseWheelEventArgs e)
+        {
+        }
+    }
+}