Added SwatchesView

src/PixiEditor.AvaloniaUI/ViewModels/Dock/DockFactory.cs

@@ -155,11 +155,17 @@ internal class DockFactory : Factory
             Title = "PaletteViewerPane",
         };
 
+        SwatchesDockViewModel swatchesVm = new(fileVm.Owner.DocumentManagerSubViewModel)
+        {
+            Id = "SwatchesPane",
+            Title = "SwatchesPane",
+        };
+
         ToolDock colorPicker = new()
         {
             Id = "ColorPickerPane",
             Title = "ColorPickerPane",
-            VisibleDockables = new List<IDockable>() { colorPickerVm, paletteViewerVm },
+            VisibleDockables = new List<IDockable>() { colorPickerVm, paletteViewerVm, swatchesVm },
             ActiveDockable = colorPickerVm,
         };
 

src/PixiEditor.AvaloniaUI/ViewModels/Dock/SwatchesDockViewModel.cs

@@ -0,0 +1,23 @@
+using System.ComponentModel;
+using Avalonia;
+using Dock.Model.Avalonia.Controls;
+using PixiEditor.AvaloniaUI.ViewModels.Document;
+
+namespace PixiEditor.AvaloniaUI.ViewModels.Dock;
+
+internal class SwatchesDockViewModel : Tool
+{
+    public static readonly StyledProperty<DocumentManagerViewModel> DocumentManagerSubViewModelProperty = AvaloniaProperty.Register<PaletteViewerDockViewModel, DocumentManagerViewModel>(
+        "DocumentManagerSubViewModel");
+
+    public DocumentManagerViewModel DocumentManagerSubViewModel
+    {
+        get => GetValue(DocumentManagerSubViewModelProperty);
+        set => SetValue(DocumentManagerSubViewModelProperty, value);
+    }
+
+    public SwatchesDockViewModel(DocumentManagerViewModel documentManagerViewModel)
+    {
+        DocumentManagerSubViewModel = documentManagerViewModel;
+    }
+}

src/PixiEditor.AvaloniaUI/Views/Dock/SwatchesDockView.axaml

@@ -0,0 +1,12 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:palettes="clr-namespace:PixiEditor.AvaloniaUI.Views.Palettes"
+             xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.AvaloniaUI.Views.Dock.SwatchesDockView">
+    <palettes:SwatchesView
+        SelectSwatchCommand="{xaml:Command PixiEditor.Colors.SelectColor, UseProvided=True}"
+        Swatches="{Binding DocumentManagerSubViewModel.ActiveDocument.Swatches}" />
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Dock/SwatchesDockView.axaml.cs

@@ -0,0 +1,14 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.AvaloniaUI.Views.Dock;
+
+public partial class SwatchesDockView : UserControl
+{
+    public SwatchesDockView()
+    {
+        InitializeComponent();
+    }
+}
+

src/PixiEditor.AvaloniaUI/Views/Palettes/SwatchesView.axaml

@@ -0,0 +1,42 @@
+<UserControl xmlns="https://github.com/avaloniaui"
+             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
+             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
+             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
+             xmlns:system="clr-namespace:System;assembly=System.Runtime"
+             xmlns:palettes="clr-namespace:PixiEditor.AvaloniaUI.Views.Palettes"
+             xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="PixiEditor.AvaloniaUI.Views.Palettes.SwatchesView"
+             x:ClassModifier="internal"
+             Name="swatchesView">
+    <ScrollViewer HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto">
+        <ItemsControl ItemsSource="{Binding Swatches, ElementName=swatchesView}">
+            <ItemsControl.ItemsPanel>
+                <ItemsPanelTemplate>
+                    <WrapPanel Margin="10,10,0,10" Orientation="Horizontal"
+                               HorizontalAlignment="Left" VerticalAlignment="Top"/>
+                </ItemsPanelTemplate>
+            </ItemsControl.ItemsPanel>
+            <ItemsControl.ItemTemplate>
+                <DataTemplate>
+                    <palettes:PaletteColorControl Cursor="Hand" Color="{Binding}" Margin="0 5 5 5">
+                        <Interaction.Behaviors>
+                            <EventTriggerBehavior EventName="PointerReleased">
+                                <InvokeCommandAction
+                                    Command="{Binding SelectSwatchCommand, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type palettes:SwatchesView}}}"
+                                    CommandParameter="{Binding}" />
+                            </EventTriggerBehavior>
+                        </Interaction.Behaviors>
+                        <palettes:PaletteColorControl.ContextMenu>
+                            <ContextMenu>
+                                <MenuItem Header="Remove" Foreground="{DynamicResource ThemeForegroundBrush}"
+                                          Command="{xaml:Command PixiEditor.Colors.RemoveSwatch, UseProvided=True}"
+                                          CommandParameter="{Binding}" />
+                            </ContextMenu>
+                        </palettes:PaletteColorControl.ContextMenu>
+                    </palettes:PaletteColorControl>
+                </DataTemplate>
+            </ItemsControl.ItemTemplate>
+        </ItemsControl>
+    </ScrollViewer>
+</UserControl>

src/PixiEditor.AvaloniaUI/Views/Palettes/SwatchesView.axaml.cs

@@ -0,0 +1,45 @@
+using System.Collections.ObjectModel;
+using System.Windows.Input;
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+using PixiEditor.Extensions.Palettes;
+
+namespace PixiEditor.AvaloniaUI.Views.Palettes;
+
+internal partial class SwatchesView : UserControl
+{
+    public static readonly StyledProperty<ObservableCollection<PaletteColor>> SwatchesProperty =
+        AvaloniaProperty.Register<SwatchesView, ObservableCollection<PaletteColor>>(
+            nameof(Swatches));
+
+    public ObservableCollection<PaletteColor> Swatches
+    {
+        get => GetValue(SwatchesProperty);
+        set => SetValue(SwatchesProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand> MouseDownCommandProperty = AvaloniaProperty.Register<SwatchesView, ICommand>(
+        nameof(MouseDownCommand));
+
+    public ICommand MouseDownCommand
+    {
+        get => GetValue(MouseDownCommandProperty);
+        set => SetValue(MouseDownCommandProperty, value);
+    }
+
+    public static readonly StyledProperty<ICommand> SelectSwatchCommandProperty = AvaloniaProperty.Register<SwatchesView, ICommand>(
+        "SelectSwatchCommand");
+
+    public ICommand SelectSwatchCommand
+    {
+        get => GetValue(SelectSwatchCommandProperty);
+        set => SetValue(SelectSwatchCommandProperty, value);
+    }
+
+    public SwatchesView()
+    {
+        InitializeComponent();
+    }
+}
+