Fixed folder and layer context menu and mask

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

@@ -11,6 +11,8 @@
              xmlns:converters="clr-namespace:PixiEditor.AvaloniaUI.Helpers.Converters"
              xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
              xmlns:helpers="clr-namespace:PixiEditor.AvaloniaUI.Helpers.UI"
+             xmlns:input1="clr-namespace:PixiEditor.AvaloniaUI.Views.Input;assembly=PixiEditor.UI.Common"
+             xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
              mc:Ignorable="d" 
              Focusable="True"
              d:DesignHeight="35" 
@@ -62,14 +64,14 @@
                                     </ImageBrush.Transform>
                                 </ImageBrush>
                             </Border.Background>
-                            <Image Source="{Binding Folder.PreviewBitmap, ElementName=folderControl}" Stretch="Uniform" Width="30" Height="30">
+                            <visuals:SurfaceControl Surface="{Binding Folder.PreviewSurface, ElementName=folderControl}" Stretch="Uniform" Width="30" Height="30">
                                 <ui:RenderOptionsBindable.BitmapInterpolationMode>
                                     <MultiBinding Converter="{converters:WidthToBitmapScalingModeConverter}">
-                                        <Binding Path="Folder.PreviewBitmap.PixelSize.Width" ElementName="folderControl"/>
+                                        <Binding Path="Folder.PreviewSurface.Size.X" ElementName="folderControl"/>
                                         <Binding RelativeSource="{RelativeSource Mode=Self}" Path="Bounds.Width"/>
                                     </MultiBinding>
                                 </ui:RenderOptionsBindable.BitmapInterpolationMode>
-                            </Image>
+                            </visuals:SurfaceControl>
                         </Border>
                         <Border 
                             Width="32" Height="32" 
@@ -86,7 +88,7 @@
                                 </ImageBrush>
                             </Border.Background>
                             <Grid IsHitTestVisible="False">
-                                <Image Source="{Binding Folder.MaskPreviewBitmap,ElementName=folderControl}" Stretch="Uniform" Width="30" Height="30"
+                                <visuals:SurfaceControl Surface="{Binding Folder.MaskPreviewSurface, ElementName=folderControl}" Stretch="Uniform" Width="30" Height="30"
                                     RenderOptions.BitmapInterpolationMode="None" IsHitTestVisible="False"/>
                                 <Path 
                                 Data="M 2 0 L 10 8 L 18 0 L 20 2 L 12 10 L 20 18 L 18 20 L 10 12 L 2 20 L 0 18 L 8 10 L 0 2 Z" 
@@ -135,23 +137,19 @@
             <ContextMenu>
                 <MenuItem ui:Translator.Key="DELETE" Command="{xaml:Command PixiEditor.Layer.DeleteAllSelected}"/>
                 <MenuItem ui:Translator.Key="RENAME" Click="RenameMenuItem_Click"/>
-                <!--TODO: Add checkable menu item-->
-                <!--<MenuItem
-                    IsCheckable="True" 
-                    IsChecked="{Binding PlacementTarget.Tag.Folder.ClipToMemberBelowEnabledBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
-                    ui:Translator.Key="CLIP_TO_BELOW"/>-->
+                <input1:ToggleableMenuItem
+                    IsChecked="{Binding $parent[UserControl].Folder.ClipToMemberBelowEnabledBindable, Mode=TwoWay}" 
+                    ui:Translator.Key="CLIP_TO_BELOW"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="MOVE_UPWARDS" Command="{xaml:Command PixiEditor.Layer.MoveSelectedMemberUpwards}"/>
                 <MenuItem ui:Translator.Key="MOVE_DOWNWARDS" Command="{xaml:Command PixiEditor.Layer.MoveSelectedMemberDownwards}"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="CREATE_MASK" Command="{xaml:Command PixiEditor.Layer.CreateMask}"/>
                 <MenuItem ui:Translator.Key="DELETE_MASK" Command="{xaml:Command PixiEditor.Layer.DeleteMask}"/>
-                <!--TODO: Add checkable menu item-->
-                <!--<MenuItem
-                    IsCheckable="True" 
-                    IsChecked="{Binding PlacementTarget.Tag.Folder.MaskIsVisibleBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
-                    IsEnabled="{Binding PlacementTarget.Tag.Folder.HasMaskBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
-                    ui:Translator.Key="ENABLE_MASK"/>-->
+                <input1:ToggleableMenuItem
+                    IsChecked="{Binding $parent[UserControl].Folder.MaskIsVisibleBindable, Mode=TwoWay}" 
+                    IsEnabled="{Binding $parent[UserControl].Folder.HasMaskBindable}"
+                    ui:Translator.Key="ENABLE_MASK"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="MERGE_SELECTED" Command="{xaml:Command PixiEditor.Layer.MergeSelected}"/>
                 <MenuItem ui:Translator.Key="MERGE_WITH_ABOVE" Command="{xaml:Command PixiEditor.Layer.MergeWithAbove}"/>

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

@@ -12,6 +12,7 @@
              xmlns:input="clr-namespace:PixiEditor.AvaloniaUI.Views.Input"
              xmlns:xaml="clr-namespace:PixiEditor.AvaloniaUI.Models.Commands.XAML"
              xmlns:visuals="clr-namespace:PixiEditor.AvaloniaUI.Views.Visuals"
+             xmlns:input1="clr-namespace:PixiEditor.AvaloniaUI.Views.Input;assembly=PixiEditor.UI.Common"
              mc:Ignorable="d" 
              Focusable="True"
              d:DesignHeight="35" d:DesignWidth="250" Name="uc"
@@ -163,27 +164,22 @@
                 <MenuItem ui:Translator.Key="DUPLICATE" Command="{xaml:Command PixiEditor.Layer.DuplicateSelectedLayer}"/>
                 <MenuItem ui:Translator.Key="DELETE" Command="{xaml:Command PixiEditor.Layer.DeleteAllSelected}"/>
                 <MenuItem ui:Translator.Key="RENAME" Click="RenameMenuItem_Click"/>
-                <!--TODO: Add checkable menu item-->
-                <!--<MenuItem
-                    IsCheckable="True" 
-                    IsChecked="{Binding PlacementTarget.Tag.Layer.ClipToMemberBelowEnabledBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
+                <input1:ToggleableMenuItem
+                    IsChecked="{Binding $parent[UserControl].Layer.ClipToMemberBelowEnabledBindable, Mode=TwoWay}" 
                     ui:Translator.Key="CLIP_TO_BELOW"/>
-                <MenuItem
-                    IsCheckable="True" 
-                    IsChecked="{Binding PlacementTarget.Tag.Layer.LockTransparencyBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
-                    ui:Translator.Key="LOCK_TRANSPARENCY"/>-->
+                <input1:ToggleableMenuItem
+                    IsChecked="{Binding $parent[UserControl].Layer.LockTransparencyBindable, Mode=TwoWay}" 
+                    ui:Translator.Key="LOCK_TRANSPARENCY"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="MOVE_UPWARDS" Command="{xaml:Command PixiEditor.Layer.MoveSelectedMemberUpwards}"/>
                 <MenuItem ui:Translator.Key="MOVE_DOWNWARDS" Command="{xaml:Command PixiEditor.Layer.MoveSelectedMemberDownwards}"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="CREATE_MASK" Command="{xaml:Command PixiEditor.Layer.CreateMask}"/>
                 <MenuItem ui:Translator.Key="DELETE_MASK" Command="{xaml:Command PixiEditor.Layer.DeleteMask}"/>
-                <!--TODO: Add checkable menu item-->
-                <!--<MenuItem
-                    IsCheckable="True" 
-                    IsChecked="{Binding PlacementTarget.Tag.Layer.MaskIsVisibleBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}" 
-                    IsEnabled="{Binding PlacementTarget.Tag.Layer.HasMaskBindable, RelativeSource={RelativeSource AncestorType=ContextMenu}}"
-                    ui:Translator.Key="ENABLE_MASK"/>-->
+                <input1:ToggleableMenuItem
+                    IsChecked="{Binding $parent[UserControl].Layer.MaskIsVisibleBindable, Mode=TwoWay}" 
+                    IsEnabled="{Binding $parent[UserControl].Layer.HasMaskBindable}"
+                    ui:Translator.Key="ENABLE_MASK"/>
                 <MenuItem ui:Translator.Key="APPLY_MASK" Command="{xaml:Command PixiEditor.Layer.ApplyMask}"/>
                 <Separator/>
                 <MenuItem ui:Translator.Key="MERGE_SELECTED" Command="{xaml:Command PixiEditor.Layer.MergeSelected}"/>

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

@@ -32,66 +32,48 @@
                     DockPanel.Dock="Left"
                     Height="24" Width="24" Cursor="Hand" uiExt:Translator.TooltipKey="NEW_LAYER"
                     HorizontalAlignment="Stretch" Margin="0,0,5,0"
-                    Classes="ImageButtonStyle"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Layer-add.png"/>
-                    </Button.Background>
-                </Button>
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-file-plus}"
+                    FlowDirection="LeftToRight"/>
                 <Button 
                     Command="{xaml:Command PixiEditor.Layer.NewFolder}" 
                     Height="24" Width="24" uiExt:Translator.TooltipKey="NEW_FOLDER" Cursor="Hand"
                     DockPanel.Dock="Left"
                     HorizontalAlignment="Stretch"  Margin="0,0,5,0"
-                    Classes="ImageButtonStyle"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Folder-add.png"/>
-                    </Button.Background>
-                </Button>
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-folder-plus}"
+                    FlowDirection="LeftToRight"/>
                 <Button 
                     Command="{xaml:Command PixiEditor.Layer.DeleteSelected}" Height="24" Width="24" uiExt:Translator.TooltipKey="LAYER_DELETE_ALL_SELECTED"
                     Cursor="Hand"
                     HorizontalAlignment="Stretch" Margin="0,0,5,0"
                     DockPanel.Dock="Left"
-                    Classes="ImageButtonStyle"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Trash.png"/>
-                    </Button.Background>
-                </Button>
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-trash}"
+                    FlowDirection="LeftToRight"/>
                 <Button 
                     Command="{xaml:Command PixiEditor.Layer.MergeWithBelow}" Height="24" Width="24" uiExt:Translator.TooltipKey="MERGE_WITH_BELOW" Cursor="Hand"
                     DockPanel.Dock="Right"
                     HorizontalAlignment="Stretch" Margin="5,0,0,0"
-                    Classes="ImageButtonStyle"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Merge-downwards.png"/>
-                    </Button.Background>
-                </Button>
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-merge}"
+                    FlowDirection="LeftToRight"/>
                 <Button 
                     Height="24" Width="24" uiExt:Translator.TooltipKey="CREATE_MASK" Cursor="Hand"
                     DockPanel.Dock="Right"
                     HorizontalAlignment="Stretch" Margin="5,0,0,0"
-                    Classes="ImageButtonStyle"
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-create-mask}"
                     Command="{xaml:Command PixiEditor.Layer.CreateMask}"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Create-mask.png"/>
-                    </Button.Background>
-                </Button>
+                    FlowDirection="LeftToRight"/>
                 <Button 
                     Height="24" Width="24" uiExt:Translator.TooltipKey="LOCK_TRANSPARENCY" Cursor="Hand"
                     DockPanel.Dock="Right"
                     HorizontalAlignment="Stretch" Margin="5,0,0,0"
-                    Classes="ImageButtonStyle"
+                    Classes="pixi-icon"
+                    Content="{DynamicResource icon-alpha-lock}"
                     Command="{xaml:Command PixiEditor.Layer.ToggleLockTransparency}"
-                    FlowDirection="LeftToRight">
-                    <Button.Background>
-                        <ImageBrush Source="/Images/Lock-alpha.png"/>
-                    </Button.Background>
-                </Button>
+                    FlowDirection="LeftToRight"/>
                 <Grid/>
             </DockPanel>
             <DockPanel Margin="3,0">

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml

@@ -67,8 +67,8 @@
             <system:String x:Key="icon-lock">&#xE93B;</system:String>
             <system:String x:Key="icon-log-out">&#xE93C;</system:String>
             <system:String x:Key="icon-magic-wand">&#xE93D;</system:String>
-            <system:String x:Key="icon-minimize-2">&#xE93E;</system:String>
-            <system:String x:Key="icon-minimize">&#xE93F;</system:String>
+            <system:String x:Key="icon-minimize">&#xE93E;</system:String>
+            <system:String x:Key="icon-merge">&#xE93F;</system:String>
             <system:String x:Key="icon-mouse-pointer">&#xE940;</system:String>
             <system:String x:Key="icon-move-view">&#xE942;</system:String>
             <system:String x:Key="icon-new-mask">&#xE943;</system:String>

src/PixiEditor.UI.Common/Fonts/PixiPerfectIcons.axaml.cs

@@ -74,8 +74,8 @@ public static class PixiPerfectIcons
     public const string Lock = "\uE93B";
     public const string LogOut = "\uE93C";
     public const string MagicWand = "\uE93D";
-    public const string Minimize2 = "\uE93E";
-    public const string Minimize = "\uE93F";
+    public const string Minimize = "\uE93E";
+    public const string Merge = "\uE93F";
     public const string MousePointer = "\uE940";
     public const string MoveView = "\uE942";
     public const string NewMask = "\uE943";