Fixed reference layer conditional image

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

@@ -0,0 +1,52 @@
+using System.Globalization;
+using Avalonia.Media.Imaging;
+using PixiEditor.UI.Common.Converters;
+
+namespace PixiEditor.AvaloniaUI.Helpers.Converters;
+
+internal class BoolToBitmapValueConverter : MarkupConverter
+{
+    public Bitmap FalseValue { get; set; }
+    
+    public Bitmap TrueValue { get; set; }
+    
+    public override object Convert(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value is bool and true)
+        {
+            return GetValue(TrueValue);
+        }
+
+        return GetValue(FalseValue);
+    }
+
+    private Bitmap? GetValue(object value)
+    {
+        if (value is string path)
+        {
+            return ImagePathToBitmapConverter.TryLoadBitmapFromRelativePath(path);
+        }
+
+        return value as Bitmap;
+    }
+
+    public override object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)
+    {
+        if (value == FalseValue)
+        {
+            return false;
+        }
+
+        if (value == TrueValue)
+        {
+            return true;
+        }
+
+        if (targetType == typeof(bool?))
+        {
+            return null;
+        }
+
+        throw new ArgumentException("value was neither FalseValue nor TrueValue and targetType was not a nullable bool");
+    }
+}

src/PixiEditor.AvaloniaUI/Views/Layers/ReferenceLayer.axaml

@@ -9,102 +9,114 @@
              xmlns:behaviours="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Behaviours"
              xmlns:cmds="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
              xmlns:controls="clr-namespace:PixiEditor.UI.Common.Controls;assembly=PixiEditor.UI.Common"
+             xmlns:viewModels="clr-namespace:PixiEditor.AvaloniaUI.ViewModels"
+             xmlns:ui1="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
+             xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
              mc:Ignorable="d"
              d:DesignHeight="60" d:DesignWidth="350" VerticalAlignment="Center" x:Name="uc">
     <Border BorderThickness="0 2 0 0" MinWidth="60"
-            Focusable="True" DragDrop.AllowDrop="True">
+            Focusable="True" DragDrop.AllowDrop="True"
+            ui1:DragDropEvents.DragEnter="ReferenceLayer_DragEnter"
+            ui1:DragDropEvents.Drop="ReferenceLayer_Drop"
+            ui1:DragDropEvents.DragLeave="ReferenceLayer_DragLeave">
         <Interaction.Behaviors>
-            <behaviours:ClearFocusOnClickBehavior/>
+            <behaviours:ClearFocusOnClickBehavior />
         </Interaction.Behaviors>
         <DockPanel Background="Transparent">
             <controls:Shelf>
-            <Grid Height="40" x:Name="mainDockPanel">
-                <Grid
-                    IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"
-                    Panel.ZIndex="5">
-                    <Grid Cursor="Hand" IsVisible="{Binding ElementName=visibilityCheckbox, Path=!IsChecked}" Background="Transparent">
-                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Left">
-                            <Image Margin="5 0 5 0" Width="20" Source="/Images/Add-reference.png"
-                               IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"/>
+                <Grid Height="40" x:Name="mainDockPanel">
+                    <Grid
+                        IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}"
+                        Panel.ZIndex="5">
+                        <Grid Cursor="Hand" IsVisible="{Binding ElementName=visibilityCheckbox, Path=!IsChecked}"
+                              Background="Transparent">
+                            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" DockPanel.Dock="Left">
+                                <Image Margin="5 0 5 0" Width="20" Source="/Images/Add-reference.png"
+                                       IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NullToVisibilityConverter}}" />
 
-                            <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}"
-                                        Margin="0 0 5 0" Foreground="White"
-                                        FontSize="15" VerticalAlignment="Center" ui:Translator.Key="ADD_REFERENCE_LAYER"/>
-                        </StackPanel>
-                        <Interaction.Behaviors>
-                            <EventTriggerBehavior EventName="PointerReleased">
-                                <InvokeCommandAction Command="{cmds:Command PixiEditor.Layer.ImportReferenceLayer}"
-                                        PassEventArgsToCommand="True"/>
-                            </EventTriggerBehavior>
-                        </Interaction.Behaviors>
+                                <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}"
+                                           Margin="0 0 5 0" Foreground="White"
+                                           FontSize="15" VerticalAlignment="Center"
+                                           ui:Translator.Key="ADD_REFERENCE_LAYER" />
+                            </StackPanel>
+                            <Interaction.Behaviors>
+                                <EventTriggerBehavior EventName="PointerReleased">
+                                    <InvokeCommandAction Command="{cmds:Command PixiEditor.Layer.ImportReferenceLayer}"
+                                                         PassEventArgsToCommand="True" />
+                                </EventTriggerBehavior>
+                            </Interaction.Behaviors>
+                        </Grid>
                     </Grid>
-                </Grid>
 
-                <DockPanel Grid.Row="0" VerticalAlignment="Center" Height="40"
-                           IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NotNullToVisibilityConverter}}" >
-                    <Grid Height="16" Name="layerVisibilityCheckboxGrid" DockPanel.Dock="Left" Margin="10,0,5,0">
-                        <CheckBox
-                            Classes="ImageCheckBox"
-                            VerticalAlignment="Center"
-                            IsThreeState="False" HorizontalAlignment="Center"
-                            IsChecked="{Binding Path=Document.ReferenceLayerViewModel.IsVisibleBindable, Mode=TwoWay, ElementName=uc}"/>
-                    </Grid>
-                    <Button Cursor="Hand" DockPanel.Dock="Left"
-                            Command="{cmds:Command PixiEditor.Layer.ToggleReferenceLayerTopMost}"
-                            Classes="ImageButtonStyle"
-                            ToolTip.Tip="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='localized:PUT_REFERENCE_LAYER_ABOVE', TrueValue='localized:PUT_REFERENCE_LAYER_BELOW'}}"
-                            RenderOptions.BitmapInterpolationMode="HighQuality"
-                            Width="20" Height="20" HorizontalAlignment="Right">
-                        <Button.Background>
-                            <ImageBrush Source="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='Images/ReferenceLayerBelow.png', TrueValue='Images/ReferenceLayerAbove.png'}}"/>
-                        </Button.Background>
-                    </Button>
-                    <Border 
-                        HorizontalAlignment="Left" DockPanel.Dock="Left"
-                        Width="30" Height="30"
-                        BorderThickness="1" 
-                        BorderBrush="Black"
-                        Background="{DynamicResource ThemeBackgroundBrush}"
-                        Margin="5, 0, 10, 0">
-                        <Image Source="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap,ElementName=uc}" Stretch="Uniform" Width="26" Height="26"
-                               RenderOptions.BitmapInterpolationMode="HighQuality" IsHitTestVisible="False"/>
-                    </Border>
-                    <Button Cursor="Hand" Grid.Column="1" DockPanel.Dock="Right"
+                    <DockPanel Grid.Row="0" VerticalAlignment="Center" Height="40"
+                               IsVisible="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap, ElementName=uc, Converter={converters:NotNullToVisibilityConverter}}">
+                        <Grid Height="16" Name="layerVisibilityCheckboxGrid" DockPanel.Dock="Left" Margin="10,0,5,0">
+                            <CheckBox
+                                Classes="ImageCheckBox"
+                                VerticalAlignment="Center"
+                                IsThreeState="False" HorizontalAlignment="Center"
+                                IsChecked="{Binding Path=Document.ReferenceLayerViewModel.IsVisibleBindable, Mode=TwoWay, ElementName=uc}" />
+                        </Grid>
+                        <Button Cursor="Hand" DockPanel.Dock="Left"
+                                Command="{cmds:Command PixiEditor.Layer.ToggleReferenceLayerTopMost}"
+                                Classes="ImageButtonStyle"
+                                ToolTip.Tip="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToValueConverter FalseValue='localized:PUT_REFERENCE_LAYER_ABOVE', TrueValue='localized:PUT_REFERENCE_LAYER_BELOW'}}"
+                                RenderOptions.BitmapInterpolationMode="HighQuality"
+                                Width="20" Height="20" HorizontalAlignment="Right">
+                            <Button.Background>
+                                <ImageBrush
+                                    Source="{Binding Document.ReferenceLayerViewModel.IsTopMost, ElementName=uc, Converter={converters:BoolToBitmapValueConverter
+                                    FalseValue='/Images/ReferenceLayerBelow.png',
+                                    TrueValue='/Images/ReferenceLayerAbove.png'}}" />
+                            </Button.Background>
+                        </Button>
+                        <Border
+                            HorizontalAlignment="Left" DockPanel.Dock="Left"
+                            Width="30" Height="30"
+                            BorderThickness="1"
+                            BorderBrush="Black"
+                            Background="{DynamicResource ThemeBackgroundBrush}"
+                            Margin="5, 0, 10, 0">
+                            <visuals:SurfaceControl Surface="{Binding Document.ReferenceLayerViewModel.ReferenceBitmap,ElementName=uc}"
+                                   Stretch="Uniform" Width="26" Height="26"
+                                   RenderOptions.BitmapInterpolationMode="HighQuality" IsHitTestVisible="False" />
+                        </Border>
+                        <Button Cursor="Hand" Grid.Column="1" DockPanel.Dock="Right"
                                 Command="{cmds:Command PixiEditor.Layer.DeleteReferenceLayer}"
                                 Classes="ImageButtonStyle"
                                 RenderOptions.BitmapInterpolationMode="HighQuality"
                                 Margin="3,0,5,0"
                                 Width="20" Height="20" HorizontalAlignment="Right">
-                        <Button.Background>
-                            <ImageBrush Source="/Images/Trash.png"/>
-                        </Button.Background>
-                    </Button>
-                    <Button Cursor="Hand" DockPanel.Dock="Right"
-                            Command="{cmds:Command PixiEditor.Layer.ResetReferenceLayerPosition}"
-                            Classes="ImageButtonStyle"
-                            ui:Translator.TooltipKey="RESET_REFERENCE_LAYER_POS"
-                            RenderOptions.BitmapInterpolationMode="HighQuality"
-                            Width="20" Height="20" HorizontalAlignment="Right">
-                        <Button.Background>
-                            <ImageBrush Source="/Images/Layout.png"/>
-                        </Button.Background>
-                    </Button>
-                    <Button Cursor="Hand" DockPanel.Dock="Right"
-                            Command="{cmds:Command PixiEditor.Layer.TransformReferenceLayer}"
-                            Classes="ImageButtonStyle"
-                            ui:Translator.TooltipKey="TRANSFORM_REFERENCE_LAYER"
-                            RenderOptions.BitmapInterpolationMode="HighQuality"
-                            Width="20" Height="20" HorizontalAlignment="Right">
-                        <Button.Background>
-                            <ImageBrush Source="/Images/Crop.png"/>
-                        </Button.Background>
-                    </Button>
-                    <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" HorizontalAlignment="Center"
-                               Margin="0 0 5 0" Foreground="White" 
-                               FontSize="15" VerticalAlignment="Center" ui:Translator.Key="REFERENCE"/>
-                </DockPanel>
-            </Grid>
-                </controls:Shelf>
+                            <Button.Background>
+                                <ImageBrush Source="/Images/Trash.png" />
+                            </Button.Background>
+                        </Button>
+                        <Button Cursor="Hand" DockPanel.Dock="Right"
+                                Command="{cmds:Command PixiEditor.Layer.ResetReferenceLayerPosition}"
+                                Classes="ImageButtonStyle"
+                                ui:Translator.TooltipKey="RESET_REFERENCE_LAYER_POS"
+                                RenderOptions.BitmapInterpolationMode="HighQuality"
+                                Width="20" Height="20" HorizontalAlignment="Right">
+                            <Button.Background>
+                                <ImageBrush Source="/Images/Layout.png" />
+                            </Button.Background>
+                        </Button>
+                        <Button Cursor="Hand" DockPanel.Dock="Right"
+                                Command="{cmds:Command PixiEditor.Layer.TransformReferenceLayer}"
+                                Classes="ImageButtonStyle"
+                                ui:Translator.TooltipKey="TRANSFORM_REFERENCE_LAYER"
+                                RenderOptions.BitmapInterpolationMode="HighQuality"
+                                Width="20" Height="20" HorizontalAlignment="Right">
+                            <Button.Background>
+                                <ImageBrush Source="/Images/Crop.png" />
+                            </Button.Background>
+                        </Button>
+                        <TextBlock IsEnabled="{Binding ElementName=uc, Path=IsEnabled}" HorizontalAlignment="Center"
+                                   Margin="0 0 5 0" Foreground="White"
+                                   FontSize="15" VerticalAlignment="Center" ui:Translator.Key="REFERENCE" />
+                    </DockPanel>
+                </Grid>
+            </controls:Shelf>
         </DockPanel>
     </Border>
-</UserControl>
+</UserControl>