Changed selection from rectangle to layer and color picker WIP

PixiEditor/Models/DataHolders/Selection.cs

@@ -1,28 +1,69 @@
-using PixiEditor.Models.Position;
+using PixiEditor.Helpers;
+using PixiEditor.Models.Enums;
+using PixiEditor.Models.Layers;
+using PixiEditor.Models.Position;
+using PixiEditor.Models.Tools;
+using PixiEditor.ViewModels;
 using System;
+using System.Collections.ObjectModel;
 using System.Linq;
 using System.Windows;
+using System.Windows.Media;
+using System.Windows.Media.Imaging;
 
 namespace PixiEditor.Models.DataHolders
 {
-    public class Selection
+    public class Selection : NotifyableObject
     {
-        public Coordinates[] SelectedPoints { get; set; } = null;
-        public int VisualCanvasTop => SelectedPoints != null ? SelectedPoints.Min(x => x.Y) : -1;
-        public int VisualCanvasLeft => SelectedPoints != null ? SelectedPoints.Min(x => x.X) : -1;
-        public int VisualWidth => SelectedPoints != null ? Math.Abs(VisualCanvasLeft + 1 - (SelectedPoints.Max(x => x.X) + 1)) + 1 : 0;
+        public ObservableCollection<Coordinates> SelectedPoints { get; private set; }       
+        private Layer _selectionLayer;
+        private Color _selectionBlue;
 
-        public int VisualHeight => SelectedPoints != null ? Math.Abs(VisualCanvasTop + 1 - (SelectedPoints.Max(x => x.Y) + 1)) + 1 : 0;
-        public Visibility Visibility => SelectedPoints != null ? Visibility.Visible : Visibility.Collapsed;
+        public Layer SelectionLayer
+        {
+            get => _selectionLayer;
+            set
+            {
+                _selectionLayer = value;
+                RaisePropertyChanged("SelectionLayer");
+            }
+        }
 
-        public Selection()
+        public void SetSelection(Coordinates[] selection, SelectionType mode)
         {
+            Color _selectionColor = _selectionBlue;
+            switch (mode)
+            {
+                case SelectionType.New:
+                    SelectedPoints = new ObservableCollection<Coordinates>(selection);
+                    SelectionLayer.Clear();
+                    break;
+                case SelectionType.Add:
+                    SelectedPoints = new ObservableCollection<Coordinates>(SelectedPoints.Concat(selection).Distinct());
+                    break;
+                case SelectionType.Substract:
+                    SelectedPoints = new ObservableCollection<Coordinates>(SelectedPoints.Except(selection));
+                    _selectionColor = System.Windows.Media.Colors.Transparent;
+                    break;
+                default:
+                    break;
+            }
+            
+            SelectionLayer.ApplyPixels(BitmapPixelChanges.FromSingleColoredArray(selection, _selectionColor));
+        }
 
+        public void Clear()
+        {
+            SelectionLayer.Clear();
+            SelectedPoints.Clear();
         }
 
         public Selection(Coordinates[] selectedPoints)
         {
-            SelectedPoints = selectedPoints;
+            SelectedPoints = new ObservableCollection<Coordinates>(selectedPoints);
+            SelectionLayer = new Layer("_selectionLayer", ViewModelMain.Current.BitmapManager.ActiveDocument.Width,
+                ViewModelMain.Current.BitmapManager.ActiveDocument.Height);
+            _selectionBlue = Color.FromArgb(127,142, 202, 255); 
         }
     }
 }

PixiEditor/Models/Tools/ToolSettings/Toolbars/SelectToolToolbar.cs

@@ -9,7 +9,7 @@ namespace PixiEditor.Models.Tools.ToolSettings.Toolbars
     {
         public SelectToolToolbar()
         {
-            Settings.Add(new DropdownSetting("Mode", new string[] {"New"}, "Selection type"));
+            Settings.Add(new DropdownSetting("Mode", new string[] {"New", "Add", "Substract"}, "Selection type"));
         }
     }
 }

PixiEditor/Models/Tools/Tools/MoveTool.cs

@@ -59,7 +59,7 @@ namespace PixiEditor.Models.Tools.Tools
             if (_lastStartMousePos != start) //I am aware that this could be moved to OnMouseDown, but it is executed before Use, so I didn't want to complicate for now
             {
                 ResetSelectionValues(start);
-                if (ViewModelMain.Current.ActiveSelection.SelectedPoints == null) //Move every pixel if none is selected
+                if (ViewModelMain.Current.ActiveSelection.SelectedPoints.Count == 0) //Move every pixel if none is selected
                 {
                     SelectTool select = new SelectTool();
                     _currentSelection = select.GetAllSelection();
@@ -67,7 +67,7 @@ namespace PixiEditor.Models.Tools.Tools
                 }
                 else
                 {
-                    _currentSelection = ViewModelMain.Current.ActiveSelection.SelectedPoints;
+                    _currentSelection = ViewModelMain.Current.ActiveSelection.SelectedPoints.ToArray();
                 }
 
                 if (Keyboard.IsKeyDown(Key.LeftCtrl))
@@ -111,7 +111,7 @@ namespace PixiEditor.Models.Tools.Tools
             _currentSelection = TranslateSelection(end, out Coordinates[] previousSelection);
             if (_updateViewModelSelection)
             {
-                ViewModelMain.Current.ActiveSelection = new Selection(_currentSelection);
+                ViewModelMain.Current.ActiveSelection.SetSelection(_currentSelection, Enums.SelectionType.New);
             }
             ClearSelectedPixels(layer, previousSelection);
 

PixiEditor/Models/Tools/Tools/SelectTool.cs

@@ -33,7 +33,6 @@ namespace PixiEditor.Models.Tools.Tools
             if (ViewModelMain.Current.ActiveSelection != null && ViewModelMain.Current.ActiveSelection.SelectedPoints != null)
             {
                 _oldSelection = ViewModelMain.Current.ActiveSelection;
-                _oldSelection.SelectedPoints = _oldSelection.SelectedPoints.ToArray();
             }
         }
 
@@ -51,22 +50,7 @@ namespace PixiEditor.Models.Tools.Tools
         private void Select(Coordinates[] pixels)
         {
             Coordinates[] selection = GetRectangleSelectionForPoints(pixels[^1], pixels[0]);
-            switch (SelectionType)
-            {
-                case SelectionType.New:
-                    ViewModelMain.Current.ActiveSelection = new Selection(selection.ToArray());
-                    break;
-                case SelectionType.Add:
-                    ViewModelMain.Current.ActiveSelection = new Selection(ViewModelMain.Current.ActiveSelection.
-                        SelectedPoints.Concat(selection).Distinct().ToArray());
-                    break;
-                case SelectionType.Substract:
-                    ViewModelMain.Current.ActiveSelection = new Selection(ViewModelMain.Current.ActiveSelection.
-                        SelectedPoints.Except(selection).ToArray());
-                    break;
-                default:
-                    break;
-            }
+            ViewModelMain.Current.ActiveSelection.SetSelection(selection.ToArray(), SelectionType);
         }
 
         public Coordinates[] GetRectangleSelectionForPoints(Coordinates start, Coordinates end)

PixiEditor/PixiEditor.csproj

@@ -16,10 +16,12 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <None Remove="Images\ColorPalette.png" />
     <None Remove="Images\MoveImage.png" />
     <None Remove="Images\PixiEditorLogo.png" />
     <None Remove="Images\SelectImage.png" />
     <None Remove="Images\SwapArrows.png" />
+    <None Remove="Views\ColorPalette.png" />
     <None Include="..\icon.ico">
       <Pack>True</Pack>
       <PackagePath></PackagePath>
@@ -46,6 +48,7 @@
   <ItemGroup>
     <Resource Include="Images\BucketImage.png" />
     <Resource Include="Images\CircleImage.png" />
+    <Resource Include="Images\ColorPalette.png" />
     <Resource Include="Images\Cross.png" />
     <Resource Include="Images\EarserImage.png" />
     <Resource Include="Images\BrightnessImage.png" />
@@ -60,6 +63,7 @@
     <Resource Include="Images\SelectImage.png" />
     <Resource Include="Images\SwapArrows.png" />
     <Resource Include="Images\transparentbg.png" />
+    <Resource Include="Views\ColorPalette.png" />
   </ItemGroup>
   <ItemGroup>
     <None Include="..\LICENSE">

PixiEditor/ViewModels/ViewModelMain.cs

@@ -143,7 +143,7 @@ namespace PixiEditor.ViewModels
         public PixelChangesController ChangesController { get; set; }
 
         public ShortcutController ShortcutController { get; set; }
-        private Selection _selection = new Selection();
+        private Selection _selection = null;
 
         public Selection ActiveSelection
         {
@@ -230,7 +230,8 @@ namespace PixiEditor.ViewModels
 
         private void DeletePixels(object parameter)
         {
-            BitmapManager.BitmapOperations.DeletePixels(new Layer[] { BitmapManager.ActiveLayer }, ActiveSelection.SelectedPoints);
+            BitmapManager.BitmapOperations.DeletePixels(new Layer[] { BitmapManager.ActiveLayer }, 
+                ActiveSelection.SelectedPoints.ToArray());
         }
 
         public void ClipCanvas(object parameter)
@@ -249,7 +250,7 @@ namespace PixiEditor.ViewModels
         {
             Copy(null);
             BitmapManager.ActiveLayer.
-                ApplyPixels(BitmapPixelChanges.FromSingleColoredArray(ActiveSelection.SelectedPoints, Colors.Transparent));
+                ApplyPixels(BitmapPixelChanges.FromSingleColoredArray(ActiveSelection.SelectedPoints.ToArray(), Colors.Transparent));
         }
 
         public void Paste(object parameter)
@@ -264,7 +265,8 @@ namespace PixiEditor.ViewModels
 
         private void Copy(object parameter)
         {
-            ClipboardController.CopyToClipboard(BitmapManager.ActiveDocument.Layers.ToArray(), ActiveSelection.SelectedPoints);
+            ClipboardController.CopyToClipboard(BitmapManager.ActiveDocument.Layers.ToArray(), 
+                ActiveSelection.SelectedPoints.ToArray());
         }
 
         public void SelectAll(object parameter)
@@ -285,7 +287,7 @@ namespace PixiEditor.ViewModels
 
         public void Deselect(object parameter)
         {
-            ActiveSelection = new Selection();
+            ActiveSelection.Clear();
         }
 
         private bool SelectionIsNotEmpty(object property)
@@ -379,7 +381,7 @@ namespace PixiEditor.ViewModels
 
         public bool CanDeleteLayer(object property)
         {
-            return BitmapManager.ActiveDocument.Layers.Count > 1;
+            return BitmapManager.ActiveDocument != null && BitmapManager.ActiveDocument.Layers.Count > 1;
         }
 
         #region Undo/Redo
@@ -548,6 +550,7 @@ namespace PixiEditor.ViewModels
             BitmapManager.PreviewLayer = null;
             UndoManager.UndoStack.Clear();
             UndoManager.RedoStack.Clear();
+            ActiveSelection = new Selection(Array.Empty<Coordinates>());
         }
 
         /// <summary>

PixiEditor/Views/ColorPicker.xaml

@@ -0,0 +1,47 @@
+<UserControl x:Class="PixiEditor.Views.ColorPicker"
+             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:PixiEditor.Views"
+             mc:Ignorable="d" 
+             Width="270" Height="325">
+    <Grid Background="#FF252424" >
+        <Grid.RowDefinitions>
+            <RowDefinition Height="265"/>
+            <RowDefinition Height="8*"/>
+            <RowDefinition Height="17*"/>
+        </Grid.RowDefinitions>
+        <Image Source="/Views/ColorPalette.png" Stretch="Uniform" VerticalAlignment="Center" Height="255" Margin="8,0,7,0"/>
+        <StackPanel Grid.Row="1" Orientation="Horizontal" VerticalAlignment="Center" HorizontalAlignment="Center">
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                <TextBlock Text="R" Foreground="White" Padding="5,0,5,0"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="40" Text="255"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                <TextBlock Text="G" Foreground="White" Padding="5,0,5,0"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="255"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                <TextBlock Text="B" Foreground="White" Padding="5,0,5,0"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="255"/>
+            </StackPanel>
+            <StackPanel Orientation="Horizontal" VerticalAlignment="Center">
+                <TextBlock Text="A" Foreground="White" Padding="5,0,5,0"/>
+                <TextBox Style="{StaticResource DarkTextBoxStyle}" Width="50" Text="255"/>
+            </StackPanel>
+        </StackPanel>
+        <Grid Grid.Row="2">
+            <Grid.ColumnDefinitions>
+                <ColumnDefinition Width="39*"/>
+                <ColumnDefinition Width="28*"/>
+                <ColumnDefinition Width="23*"/>
+            </Grid.ColumnDefinitions>
+            <StackPanel Orientation="Horizontal" Grid.Column="0" VerticalAlignment="Center" Margin="10,0,0,0" Height="26">
+                <Label Content="Hex" Foreground="White"/>
+                <TextBox VerticalAlignment="Center" Style="{StaticResource DarkTextBoxStyle}" Width="65" Text="#FFFFFFFF"/>
+            </StackPanel>
+            <Rectangle Fill="White" Stroke="#FF3C3C3C" StrokeThickness="2" Grid.Column="2"/>
+        </Grid>
+    </Grid>
+</UserControl>

PixiEditor/Views/ColorPicker.xaml.cs

@@ -0,0 +1,26 @@
+using System;
+using System.Collections.Generic;
+using System.Text;
+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 PixiEditor.Views
+{
+    /// <summary>
+    /// Interaction logic for ColorPicker.xaml
+    /// </summary>
+    public partial class ColorPicker : UserControl
+    {
+        public ColorPicker()
+        {
+            InitializeComponent();
+        }
+    }
+}

PixiEditor/Views/MainWindow.xaml

@@ -44,8 +44,8 @@
     <Grid Name="mainGrid" Margin="5">
         <Grid.ColumnDefinitions>
             <ColumnDefinition Width="37*"/>
-            <ColumnDefinition Width="1416*"/>
-            <ColumnDefinition Width="147*"/>
+            <ColumnDefinition Width="1263*"/>
+            <ColumnDefinition Width="290"/>
         </Grid.ColumnDefinitions>
         <Grid.RowDefinitions>
             <RowDefinition Height="35*"/>
@@ -148,9 +148,9 @@
                                     </DataTemplate>
                                 </ItemsControl.ItemTemplate>
                             </ItemsControl>
-                            <Rectangle Stroke="#7F8ECAFF" Height="{Binding ActiveSelection.VisualHeight}" Width="{Binding ActiveSelection.VisualWidth}" 
-                                       Canvas.Left="{Binding ActiveSelection.VisualCanvasLeft}" Canvas.Top="{Binding ActiveSelection.VisualCanvasTop}" Visibility="{Binding ActiveSelection.Visibility}" 
-                                       Fill="#7F8ECAFF" StrokeThickness="0" SnapsToDevicePixels="True"/>
+                            <Image Source="{Binding ActiveSelection.SelectionLayer.LayerBitmap}"
+                                   RenderOptions.BitmapScalingMode="NearestNeighbor" Stretch="Uniform" 
+                                   Width="{Binding ActiveSelection.SelectionLayer.Width}" Height="{Binding ActiveSelection.SelectionLayer.Height}"/>
                         </Canvas>
                     </vws:MainDrawingPanel.Item>
                 </vws:MainDrawingPanel>
@@ -177,26 +177,26 @@
         </StackPanel>
 
         <DockPanel Grid.Column="2" Background="#404040" Margin="0,30,0,0" Grid.RowSpan="3">
-            <Grid DockPanel.Dock="Top" HorizontalAlignment="Center" Width="100"  Margin="0,20,0,0" Height="100">
-                <Rectangle Height="70" Width="70" HorizontalAlignment="Left" VerticalAlignment="Top" Stroke="Black" StrokeThickness="1" Panel.ZIndex="1">
+            <Grid DockPanel.Dock="Top" HorizontalAlignment="Center" Width="70"  Margin="0,20,0,0" Height="70">
+                <Rectangle Height="40" Width="40" HorizontalAlignment="Left" VerticalAlignment="Top" Stroke="Black" StrokeThickness="1" Panel.ZIndex="1">
                     <Rectangle.Fill>
                         <SolidColorBrush Color="{Binding PrimaryColor, Mode=OneWay}"/>
                     </Rectangle.Fill>
                 </Rectangle>
-                <xctk:ColorPicker Width="70" Panel.ZIndex="2" Height="70" VerticalAlignment="Top" HorizontalAlignment="Left" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}"></xctk:ColorPicker>
+                <xctk:ColorPicker Width="40" Panel.ZIndex="2" Height="40" VerticalAlignment="Top" HorizontalAlignment="Left" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" SelectedColor="{Binding PrimaryColor, Mode=TwoWay}"></xctk:ColorPicker>
                 <Button Opacity="0.3" ToolTip="Swap colors (X)" Command="{Binding SwapColorsCommand}" Width="25" Height="25" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0 0 0 3" Style="{StaticResource ImageButtonStyle}">
                     <Button.Background>
                         <ImageBrush ImageSource="/Images/SwapArrows.png" Stretch="Fill"/>
                     </Button.Background>
                 </Button>
-                <Rectangle Height="70" Width="70" HorizontalAlignment="Right" VerticalAlignment="Bottom" Stroke="Black" StrokeThickness="1" Margin="0,0,4,5">
+                <Rectangle Height="40" Width="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" Stroke="Black" StrokeThickness="1" Margin="0,0,4,5">
                     <Rectangle.Fill>
                         <SolidColorBrush Color="{Binding SecondaryColor, Mode=OneWay}"/>
                     </Rectangle.Fill>
                 </Rectangle>
-                <xctk:ColorPicker Width="70" Height="70" HorizontalAlignment="Right" VerticalAlignment="Bottom" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" Margin="0,0,4,5" SelectedColor="{Binding SecondaryColor, Mode=TwoWay}"/>
+                <xctk:ColorPicker Width="40" Height="40" HorizontalAlignment="Right" VerticalAlignment="Bottom" UsingAlphaChannel="True" AvailableColorsSortingMode="Alphabetical" ShowDropDownButton="False" Background="Transparent" BorderThickness="0" ShowRecentColors="True" Margin="0,0,4,5" SelectedColor="{Binding SecondaryColor, Mode=TwoWay}"/>
             </Grid>
-
+            <vws:ColorPicker Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top"/>
             <xcad:DockingManager Grid.Column="2" Grid.Row="1" DockPanel.Dock="Top">
                 <xcad:DockingManager.Style>
                     <Style TargetType="xcad:DockingManager">