Fixed viewport context menu

src/PixiEditor.AvaloniaUI/Helpers/Converters/PaletteItemsToWidthConverter.cs

@@ -1,6 +1,8 @@
 using System.Collections.Generic;
+using System.Collections.ObjectModel;
 using System.Globalization;
 using PixiEditor.DrawingApi.Core.ColorsImpl;
+using PixiEditor.Extensions.Palettes;
 
 namespace PixiEditor.AvaloniaUI.Helpers.Converters;
 
@@ -8,11 +10,11 @@ internal class PaletteItemsToWidthConverter : SingleInstanceConverter<PaletteIte
 {
     public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
     {
-        if (value is IList<Color> colors && colors.Count == 0)
+        if (value is IList<PaletteColor> { Count: > 0 })
         {
-            return 0;
+            return 120;
         }
 
-        return 120;
+        return 0;
     }
 }

src/PixiEditor.AvaloniaUI/ViewModels/Document/DocumentViewModel.cs

@@ -160,8 +160,8 @@ internal partial class DocumentViewModel : PixiObservableObject, IDocument
 
     private VectorPath selectionPath = new VectorPath();
     public VectorPath SelectionPathBindable => selectionPath;
-    public ObservableCollection<PaletteColor> Swatches { get; set; } = new(); // TODO: Replaced WPFObservableCollection, make sure it works
-    public ObservableRangeCollection<PaletteColor> Palette { get; set; } = new(); // TODO: Same
+    public ObservableCollection<PaletteColor> Swatches { get; set; } = new();
+    public ObservableRangeCollection<PaletteColor> Palette { get; set; } = new();
     public DocumentTransformViewModel TransformViewModel { get; }
     public ReferenceLayerViewModel ReferenceLayerViewModel { get; }
     public LineToolOverlayViewModel LineToolOverlayViewModel { get; }

src/PixiEditor.AvaloniaUI/ViewModels/SubViewModels/ColorsViewModel.cs

@@ -3,6 +3,8 @@ using System.Collections.ObjectModel;
 using System.Linq;
 using System.Threading.Tasks;
 using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Media;
 using CommunityToolkit.Mvvm.Input;
@@ -10,7 +12,6 @@ using Microsoft.Extensions.DependencyInjection;
 using PixiEditor.AvaloniaUI.Helpers.Extensions;
 using PixiEditor.AvaloniaUI.Models.Commands.Attributes.Evaluators;
 using PixiEditor.AvaloniaUI.Models.Commands.Search;
-using PixiEditor.AvaloniaUI.Models.Commands.XAML;
 using PixiEditor.AvaloniaUI.Models.Controllers;
 using PixiEditor.AvaloniaUI.Models.Dialogs;
 using PixiEditor.AvaloniaUI.Models.ExtensionServices;
@@ -25,6 +26,7 @@ using PixiEditor.Extensions.Palettes.Parsers;
 using Color = PixiEditor.DrawingApi.Core.ColorsImpl.Color;
 using Colors = PixiEditor.DrawingApi.Core.ColorsImpl.Colors;
 using Command = PixiEditor.AvaloniaUI.Models.Commands.Attributes.Commands.Command;
+using ContextMenu = PixiEditor.AvaloniaUI.Models.Commands.XAML.ContextMenu;
 
 namespace PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 

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

@@ -9,13 +9,17 @@
              xmlns:palettes1="clr-namespace:PixiEditor.AvaloniaUI.Views.Palettes"
              xmlns:viewportControls="clr-namespace:PixiEditor.AvaloniaUI.Views.Main.ViewportControls"
              xmlns:subViewModels="clr-namespace:PixiEditor.AvaloniaUI.ViewModels.SubViewModels"
+             xmlns:document="clr-namespace:PixiEditor.AvaloniaUI.ViewModels.Document"
+             xmlns:palettes="clr-namespace:PixiEditor.Extensions.Palettes;assembly=PixiEditor.Extensions"
              mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
              x:DataType="subViewModels:ViewportWindowViewModel"
              x:Class="PixiEditor.AvaloniaUI.Views.Dock.DocumentTemplate">
     <Design.DataContext>
         <subViewModels:ViewportWindowViewModel />
     </Design.DataContext>
+
     <viewportControls:Viewport
+        x:Name="Viewport"
         CenterViewportTrigger="{Binding DockCenterViewportTrigger}"
         ZoomViewportTrigger="{Binding ZoomViewportTrigger}"
         MouseDownCommand="{Binding Path=IoSubViewModel.MouseDownCommand, Source={viewModels1:MainVM}}"
@@ -31,87 +35,82 @@
         FlipY="{Binding FlipY, Mode=TwoWay}"
         ContextRequested="Viewport_OnContextMenuOpening"
         Document="{Binding Document}">
-        <viewportControls:Viewport.ContextMenu>
-            <ContextMenu DataContext="{Binding PlacementTarget.Document, RelativeSource={RelativeSource Self}}">
-                <ContextMenu.Template>
-                    <ControlTemplate>
-                        <Border Background="{DynamicResource ThemeAccentBrush}" BorderBrush="Black" BorderThickness="1"
-                                CornerRadius="5">
-                            <Grid Height="235">
-                                <Grid.ColumnDefinitions>
-                                    <ColumnDefinition
-                                        Width="{Binding Palette, Converter={converters:PaletteItemsToWidthConverter}}" />
-                                    <ColumnDefinition />
-                                </Grid.ColumnDefinitions>
-                                <Border Grid.Column="1" BorderThickness="0 0 1 0" BorderBrush="Black">
-                                    <StackPanel Orientation="Vertical" Grid.Column="0">
-                                        <MenuItem
-                                            ui:Translator.Key="SELECT_ALL"
-                                            xaml:Menu.Command="PixiEditor.Selection.SelectAll" />
-                                        <MenuItem
-                                            ui:Translator.Key="DESELECT"
-                                            xaml:Menu.Command="PixiEditor.Selection.Clear" />
-                                        <Separator />
-                                        <MenuItem
-                                            ui:Translator.Key="CUT"
-                                            xaml:Menu.Command="PixiEditor.Clipboard.Cut" />
-                                        <MenuItem
-                                            ui:Translator.Key="COPY"
-                                            xaml:Menu.Command="PixiEditor.Clipboard.Copy" />
-                                        <MenuItem
-                                            ui:Translator.Key="PASTE"
-                                            xaml:Menu.Command="PixiEditor.Clipboard.Paste" />
-                                        <Separator />
-                                        <MenuItem ui:Translator.Key="FLIP_LAYERS_HORIZONTALLY"
-                                                  xaml:Menu.Command="PixiEditor.Document.FlipLayersHorizontal" />
-                                        <MenuItem ui:Translator.Key="FLIP_LAYERS_VERTICALLY"
-                                                  xaml:Menu.Command="PixiEditor.Document.FlipLayersVertical" />
-                                        <Separator />
-                                        <MenuItem ui:Translator.Key="ROT_LAYERS_90_D"
-                                                  xaml:Menu.Command="PixiEditor.Document.Rotate90DegLayers" />
-                                        <MenuItem ui:Translator.Key="ROT_LAYERS_180_D"
-                                                  xaml:Menu.Command="PixiEditor.Document.Rotate180DegLayers" />
-                                        <MenuItem ui:Translator.Key="ROT_LAYERS_-90_D"
-                                                  xaml:Menu.Command="PixiEditor.Document.Rotate270DegLayers" />
-                                    </StackPanel>
-                                </Border>
-                                <ScrollViewer Margin="5" Grid.Column="0" HorizontalScrollBarVisibility="Disabled"
-                                              VerticalScrollBarVisibility="Auto">
-                                    <ItemsControl ItemsSource="{Binding Palette}">
-                                        <ItemsControl.ItemsPanel>
-                                            <ItemsPanelTemplate>
-                                                <WrapPanel Orientation="Horizontal"
-                                                           HorizontalAlignment="Left" VerticalAlignment="Top" />
-                                            </ItemsPanelTemplate>
-                                        </ItemsControl.ItemsPanel>
-                                        <ItemsControl.ItemTemplate>
-                                            <DataTemplate>
-                                                <palettes1:PaletteColorControl Cursor="Hand" CornerRadius="0"
-                                                                               ui:Translator.TooltipKey="CLICK_SELECT_PRIMARY"
-                                                                               Width="22" Height="22" Color="{Binding}">
-                                                    <Interaction.Behaviors>
-                                                        <EventTriggerBehavior EventName="MouseLeftButtonUp">
-                                                            <InvokeCommandAction
-                                                                Command="{xaml:Command PixiEditor.Colors.SelectColor, UseProvided=True}"
-                                                                CommandParameter="{Binding}" />
-                                                        </EventTriggerBehavior>
-                                                        <EventTriggerBehavior EventName="MouseLeftButtonUp">
-                                                            <InvokeCommandAction
-                                                                Command="{xaml:Command PixiEditor.CloseContextMenu, UseProvided=True}"
-                                                                CommandParameter="{Binding RelativeSource={RelativeSource FindAncestor,
-                                                                                                     AncestorType={x:Type ContextMenu}}}" />
-                                                        </EventTriggerBehavior>
-                                                    </Interaction.Behaviors>
-                                                </palettes1:PaletteColorControl>
-                                            </DataTemplate>
-                                        </ItemsControl.ItemTemplate>
-                                    </ItemsControl>
-                                </ScrollViewer>
-                            </Grid>
+        <viewportControls:Viewport.ContextFlyout>
+            <Flyout x:CompileBindings="True" x:DataType="subViewModels:ViewportWindowViewModel" ShowMode="Transient">
+                <Border CornerRadius="{DynamicResource ControlCornerRadius}">
+                    <Grid Height="235">
+                        <Grid.ColumnDefinitions>
+                            <ColumnDefinition
+                                Width="{Binding Document.Palette, Converter={converters:PaletteItemsToWidthConverter}}" />
+                            <ColumnDefinition />
+                        </Grid.ColumnDefinitions>
+                        <Border Grid.Column="1" BorderThickness="0 0 1 0">
+                            <ContextMenu BorderBrush="Transparent" BorderThickness="0" Margin="0" Padding="0">
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                    ui:Translator.Key="SELECT_ALL"
+                                    xaml:Menu.Command="PixiEditor.Selection.SelectAll" />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="DESELECT"
+                                          xaml:Menu.Command="PixiEditor.Selection.Clear" />
+                                <Separator />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="CUT"
+                                          xaml:Menu.Command="PixiEditor.Clipboard.Cut" />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="COPY"
+                                          xaml:Menu.Command="PixiEditor.Clipboard.Copy" />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="PASTE"
+                                          xaml:Menu.Command="PixiEditor.Clipboard.Paste" />
+                                <Separator />
+                                <MenuItem  PointerReleased="MenuItem_OnClick"
+                                           ui:Translator.Key="FLIP_LAYERS_HORIZONTALLY"
+                                           xaml:Menu.Command="PixiEditor.Document.FlipLayersHorizontal" />
+                                <MenuItem  PointerReleased="MenuItem_OnClick"
+                                           ui:Translator.Key="FLIP_LAYERS_VERTICALLY"
+                                           xaml:Menu.Command="PixiEditor.Document.FlipLayersVertical" />
+                                <Separator />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="ROT_LAYERS_90_D"
+                                          xaml:Menu.Command="PixiEditor.Document.Rotate90DegLayers" />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="ROT_LAYERS_180_D"
+                                          xaml:Menu.Command="PixiEditor.Document.Rotate180DegLayers" />
+                                <MenuItem PointerReleased="MenuItem_OnClick"
+                                          ui:Translator.Key="ROT_LAYERS_-90_D"
+                                          xaml:Menu.Command="PixiEditor.Document.Rotate270DegLayers" />
+                            </ContextMenu>
                         </Border>
-                    </ControlTemplate>
-                </ContextMenu.Template>
-            </ContextMenu>
-        </viewportControls:Viewport.ContextMenu>
+                        <ScrollViewer Margin="5" Grid.Column="0" HorizontalScrollBarVisibility="Disabled"
+                                      VerticalScrollBarVisibility="Auto">
+                            <ItemsControl ItemsSource="{Binding Document.Palette}">
+                                <ItemsControl.ItemsPanel>
+                                    <ItemsPanelTemplate>
+                                        <WrapPanel MaxWidth="{Binding Document.Palette, Converter={converters:PaletteItemsToWidthConverter}}" Orientation="Horizontal"
+                                                   HorizontalAlignment="Left" VerticalAlignment="Top" />
+                                    </ItemsPanelTemplate>
+                                </ItemsControl.ItemsPanel>
+                                <ItemsControl.ItemTemplate>
+                                    <DataTemplate x:DataType="palettes:PaletteColor">
+                                        <palettes1:PaletteColorControl Cursor="Hand" CornerRadius="0"
+                                                                       ui:Translator.TooltipKey="CLICK_SELECT_PRIMARY"
+                                                                       PointerReleased="InputElement_OnPointerReleased"
+                                                                       Width="22" Height="22" Color="{Binding}">
+                                            <Interaction.Behaviors>
+                                                <EventTriggerBehavior EventName="PointerPressed">
+                                                    <InvokeCommandAction
+                                                        Command="{xaml:Command PixiEditor.Colors.SelectColor, UseProvided=True}"
+                                                        CommandParameter="{Binding}" />
+                                                </EventTriggerBehavior>
+                                            </Interaction.Behaviors>
+                                        </palettes1:PaletteColorControl>
+                                    </DataTemplate>
+                                </ItemsControl.ItemTemplate>
+                            </ItemsControl>
+                        </ScrollViewer>
+                    </Grid>
+                </Border>
+            </Flyout>
+        </viewportControls:Viewport.ContextFlyout>
     </viewportControls:Viewport>
 </UserControl>

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

@@ -1,8 +1,12 @@
-using Avalonia.Controls;
+using System.ComponentModel;
+using Avalonia.Controls;
+using Avalonia.Input;
+using Avalonia.Interactivity;
 using PixiEditor.AvaloniaUI.Models.Preferences;
 using PixiEditor.AvaloniaUI.ViewModels.Dock;
 using PixiEditor.AvaloniaUI.ViewModels.SubViewModels;
 using PixiEditor.AvaloniaUI.ViewModels.Tools.Tools;
+using PixiEditor.AvaloniaUI.Views.Palettes;
 
 namespace PixiEditor.AvaloniaUI.Views.Dock;
 
@@ -36,5 +40,15 @@ public partial class DocumentTemplate : UserControl
             e.Handled = true;
         }
     }
+
+    private void InputElement_OnPointerReleased(object? sender, PointerReleasedEventArgs e)
+    {
+        Viewport?.ContextFlyout?.Hide();
+    }
+
+    private void MenuItem_OnClick(object? sender, PointerReleasedEventArgs e)
+    {
+        Viewport?.ContextFlyout?.Hide();
+    }
 }