Added toggle hud and aligned buttons

src/PixiEditor/Data/Localization/Languages/en.json

@@ -797,4 +797,8 @@
   "CREATE_CEL_DESCRIPTIVE": "Create a new cel",
   "DUPLICATE_CEL": "Duplicate cel",
   "DUPLICATE_CEL_DESCRIPTIVE": "Duplicate cel in the current frame",
+  "RENDER_PREVIEW": "Render preview",
+  "OUTPUT_NAME": "Preview name",
+  "CUSTOM_OUTPUT_NODE": "Preview Node",
+  "TOGGLE_HUD": "Toggle HUD"
 }

src/PixiEditor/ViewModels/Document/Nodes/CustomOutputNodeViewModel.cs

@@ -4,5 +4,5 @@ using PixiEditor.ViewModels.Nodes;
 
 namespace PixiEditor.ViewModels.Document.Nodes;
 
-[NodeViewModel("CUSTOM_OUTPUT_NODE", "MISC", null)]
+[NodeViewModel("CUSTOM_OUTPUT_NODE", null, null)]
 internal class CustomOutputNodeViewModel : NodeViewModel<CustomOutputNode>;

src/PixiEditor/ViewModels/SubViewModels/LayoutViewModel.cs

@@ -1,5 +1,7 @@
 using System.Collections.ObjectModel;
+using Avalonia.Input;
 using PixiDocks.Core.Docking;
+using PixiEditor.Models.Commands.Attributes.Commands;
 using PixiEditor.ViewModels.Dock;
 
 namespace PixiEditor.ViewModels.SubViewModels;

src/PixiEditor/ViewModels/SubViewModels/ViewportWindowViewModel.cs

@@ -75,6 +75,18 @@ internal class ViewportWindowViewModel : SubViewModel<WindowViewModel>, IDockabl
         set => SetProperty(ref _channels, value);
     }
 
+    private bool hudVisible = true;
+
+    public bool HudVisible
+    {
+        get => hudVisible;
+        set
+        {
+            hudVisible = value;
+            OnPropertyChanged(nameof(HudVisible));
+        }
+    }
+
     private PreviewPainterControl previewPainterControl;
 
     public void IndexChanged()

src/PixiEditor/ViewModels/SubViewModels/WindowViewModel.cs

@@ -31,6 +31,7 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
     public event Action<ViewportWindowViewModel> ViewportClosed;
 
     private object? activeWindow;
+
     public object? ActiveWindow
     {
         get => activeWindow;
@@ -62,16 +63,29 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
             return;
         CreateNewViewport(doc);
     }
-    
-    [Commands_Command.Basic("PixiEditor.Window.CenterActiveViewport", "CENTER_ACTIVE_VIEWPORT", "CENTER_ACTIVE_VIEWPORT", CanExecute = "PixiEditor.HasDocument",
+
+    [Commands_Command.Basic("PixiEditor.Window.CenterActiveViewport", "CENTER_ACTIVE_VIEWPORT",
+        "CENTER_ACTIVE_VIEWPORT", CanExecute = "PixiEditor.HasDocument",
         Icon = PixiPerfectIcons.Center, AnalyticsTrack = true)]
     public void CenterCurrentViewport()
     {
         if (ActiveWindow is ViewportWindowViewModel viewport)
             viewport.CenterViewportTrigger.Execute(this, viewport.Document.SizeBindable);
     }
-    
-    [Commands_Command.Basic("PixiEditor.Window.FlipHorizontally", "FLIP_VIEWPORT_HORIZONTALLY", "FLIP_VIEWPORT_HORIZONTALLY", CanExecute = "PixiEditor.HasDocument",
+
+
+    [Command.Basic("PixiEditor.Viewport.ToggleHud", "TOGGLE_HUD", "TOGGLE_HUD_DESCRIPTION",
+        AnalyticsTrack = true, Key = Key.H, Modifiers = KeyModifiers.Shift, MenuItemPath = "VIEW/TOGGLE_HUD")]
+    public void ToggleHudOfCurrentViewport()
+    {
+        if (ActiveWindow is ViewportWindowViewModel viewport)
+        {
+            viewport.HudVisible = !viewport.HudVisible;
+        }
+    }
+
+    [Commands_Command.Basic("PixiEditor.Window.FlipHorizontally", "FLIP_VIEWPORT_HORIZONTALLY",
+        "FLIP_VIEWPORT_HORIZONTALLY", CanExecute = "PixiEditor.HasDocument",
         Icon = PixiPerfectIcons.YFlip, AnalyticsTrack = true)]
     public void FlipViewportHorizontally()
     {
@@ -80,8 +94,9 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
             viewport.FlipX = !viewport.FlipX;
         }
     }
-    
-    [Commands_Command.Basic("PixiEditor.Window.FlipVertically", "FLIP_VIEWPORT_VERTICALLY", "FLIP_VIEWPORT_VERTICALLY", CanExecute = "PixiEditor.HasDocument",
+
+    [Commands_Command.Basic("PixiEditor.Window.FlipVertically", "FLIP_VIEWPORT_VERTICALLY", "FLIP_VIEWPORT_VERTICALLY",
+        CanExecute = "PixiEditor.HasDocument",
         Icon = PixiPerfectIcons.XFlip, AnalyticsTrack = true)]
     public void FlipViewportVertically()
     {
@@ -154,7 +169,8 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
         }
     }
 
-    [Commands_Command.Basic("PixiEditor.Window.OpenSettingsWindow", "OPEN_SETTINGS", "OPEN_SETTINGS_DESCRIPTIVE", Key = Key.OemComma, Modifiers = KeyModifiers.Control,
+    [Commands_Command.Basic("PixiEditor.Window.OpenSettingsWindow", "OPEN_SETTINGS", "OPEN_SETTINGS_DESCRIPTIVE",
+        Key = Key.OemComma, Modifiers = KeyModifiers.Control,
         MenuItemPath = "EDIT/SETTINGS", MenuItemOrder = 16, Icon = PixiPerfectIcons.Settings, AnalyticsTrack = true)]
     public static void OpenSettingsWindow(int page)
     {
@@ -168,21 +184,24 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
     }
 
     [Commands_Command.Basic("PixiEditor.Window.OpenStartupWindow", "OPEN_STARTUP_WINDOW", "OPEN_STARTUP_WINDOW",
-        Icon = PixiPerfectIcons.Home, MenuItemPath = "VIEW/OPEN_STARTUP_WINDOW", MenuItemOrder = 1, AnalyticsTrack = true)]
+        Icon = PixiPerfectIcons.Home, MenuItemPath = "VIEW/OPEN_STARTUP_WINDOW", MenuItemOrder = 1,
+        AnalyticsTrack = true)]
     public void OpenHelloThereWindow()
     {
         new HelloTherePopup(Owner.FileSubViewModel).Show(MainWindow.Current);
     }
 
-    [Commands_Command.Basic("PixiEditor.Window.OpenShortcutWindow", "OPEN_SHORTCUT_WINDOW", "OPEN_SHORTCUT_WINDOW", Key = Key.F1,
-        Icon = PixiPerfectIcons.Book, MenuItemPath = "VIEW/OPEN_SHORTCUT_WINDOW", MenuItemOrder = 2, AnalyticsTrack = true)]
+    [Commands_Command.Basic("PixiEditor.Window.OpenShortcutWindow", "OPEN_SHORTCUT_WINDOW", "OPEN_SHORTCUT_WINDOW",
+        Key = Key.F1,
+        Icon = PixiPerfectIcons.Book, MenuItemPath = "VIEW/OPEN_SHORTCUT_WINDOW", MenuItemOrder = 2,
+        AnalyticsTrack = true)]
     public void ShowShortcutWindow()
     {
         var popup = new ShortcutsPopup(commandController);
         popup.Show();
         popup.Activate();
     }
-        
+
     [Commands_Command.Basic("PixiEditor.Window.OpenAboutWindow", "OPEN_ABOUT_WINDOW", "OPEN_ABOUT_WINDOW",
         Icon = PixiPerfectIcons.Info, MenuItemPath = "HELP/ABOUT", MenuItemOrder = 5, AnalyticsTrack = true)]
     public void OpenAboutWindow()
@@ -191,7 +210,8 @@ internal class WindowViewModel : SubViewModel<ViewModelMain>
     }
 
     [Commands_Command.Internal("PixiEditor.Window.ShowDockWindow")]
-    [Commands_Command.Basic("PixiEditor.Window.OpenNavigationWindow", "Navigator", "OPEN_NAVIGATION_WINDOW", "OPEN_NAVIGATION_WINDOW")]
+    [Commands_Command.Basic("PixiEditor.Window.OpenNavigationWindow", "Navigator", "OPEN_NAVIGATION_WINDOW",
+        "OPEN_NAVIGATION_WINDOW")]
     public void ShowDockWindow(string id)
     {
         Owner.LayoutSubViewModel.LayoutManager.ShowDockable(id);

src/PixiEditor/Views/Dock/DocumentTemplate.axaml

@@ -39,6 +39,7 @@
         SnappingEnabled="{Binding ViewportSubViewModel.SnappingEnabled, Source={viewModels1:MainVM}, Mode=TwoWay}"
         AvailableRenderOutputs="{Binding ActiveDocument.NodeGraph.AvailableRenderOutputs, Source={viewModels1:MainVM DocumentManagerSVM}}"
         ViewportRenderOutput="{Binding RenderOutputName, Mode=TwoWay}"
+        HudVisible="{Binding HudVisible}"
         Document="{Binding Document}">
     </viewportControls:Viewport>
 </UserControl>

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml

@@ -42,7 +42,8 @@
                                         PassEventArgsToCommand="True"/>
             </EventTriggerBehavior>-->
         </Interaction.Behaviors>
-        <overlays:TogglableFlyout Margin="5" Icon="{DynamicResource icon-tool}"
+        <overlays:TogglableFlyout IsVisible="{Binding HudVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}" 
+                                  Margin="5" Icon="{DynamicResource icon-tool}"
                                   ZIndex="2" HorizontalAlignment="Right" VerticalAlignment="Top">
             <overlays:TogglableFlyout.Child>
                 <Border Padding="5"
@@ -51,8 +52,8 @@
                         BorderThickness="{DynamicResource ThemeBorderThickness}"
                         Background="{DynamicResource ThemeBackgroundBrush1}" ZIndex="2">
                     <StackPanel Orientation="Vertical">
-                        <StackPanel Orientation="Horizontal">
-                            <Border Width="35" Height="35" Margin="5 0"
+                        <StackPanel Orientation="Horizontal" Spacing="10" HorizontalAlignment="Center">
+                            <Border Width="35" Height="35"
                                     BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                                     BorderThickness="{DynamicResource ThemeBorderThickness}"
                                     CornerRadius="{DynamicResource ControlCornerRadius}"
@@ -74,14 +75,14 @@
                                     Cursor="Hand" />
                         </StackPanel>
                         <Separator />
-                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Right">
+                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
                             <ToggleButton Width="32" Height="32" ui:Translator.TooltipKey="HIGH_RES_PREVIEW"
                                           Classes="OverlayButton pixi-icon"
                                           BorderBrush="{DynamicResource ThemeBorderMidBrush}"
                                           Content="{DynamicResource icon-circle}"
                                           IsChecked="{Binding HighResPreview, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
                                           Cursor="Hand" />
-                            <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
+                            <ToggleButton Width="32" Height="32"
                                           ui:Translator.TooltipKey="LOW_RES_PREVIEW"
                                           Classes="OverlayButton pixi-icon"
                                           BorderBrush="{DynamicResource ThemeBorderMidBrush}"
@@ -90,13 +91,13 @@
                                           Cursor="Hand" />
                         </StackPanel>
                         <Separator />
-                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+                        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Spacing="10">
                             <ToggleButton Width="32" Height="32" ui:Translator.TooltipKey="TOGGLE_VERTICAL_SYMMETRY"
                                           Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding Document.VerticalSymmetryAxisEnabledBindable, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
                                           Content="{DynamicResource icon-y-symmetry}"
                                           Cursor="Hand" />
-                            <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
+                            <ToggleButton Width="32" Height="32"
                                           ui:Translator.TooltipKey="TOGGLE_HORIZONTAL_SYMMETRY"
                                           Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding Document.HorizontalSymmetryAxisEnabledBindable, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
@@ -104,13 +105,13 @@
                                           Cursor="Hand" />
                         </StackPanel>
                         <Separator />
-                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
+                        <StackPanel HorizontalAlignment="Center" Orientation="Horizontal" Spacing="10">
                             <ToggleButton Width="32" Height="32" ui:Translator.TooltipKey="FLIP_VIEWPORT_HORIZONTALLY"
                                           Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding FlipX, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
                                           Content="{DynamicResource icon-y-flip}"
                                           Cursor="Hand" />
-                            <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
+                            <ToggleButton  Width="32" Height="32"
                                           ui:Translator.TooltipKey="FLIP_VIEWPORT_VERTICALLY"
                                           Classes="OverlayToggleButton pixi-icon"
                                           IsChecked="{Binding FlipY, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}"
@@ -118,28 +119,30 @@
                                           Cursor="Hand" />
                         </StackPanel>
                         <Separator />
-                        <StackPanel HorizontalAlignment="Right" Orientation="Horizontal">
-                            <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
+                        <StackPanel Spacing="10" HorizontalAlignment="Center" Orientation="Horizontal">
+                            <ToggleButton Width="32" Height="32"
                                           ui:Translator.TooltipKey="TOGGLE_GRIDLINES"
                                           Classes="OverlayToggleButton pixi-icon"
                                           Content="{DynamicResource icon-gridlines}"
                                           IsChecked="{Binding GridLinesVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
 
-                            <ToggleButton Margin="10 0 0 0" Width="32" Height="32"
+                            <ToggleButton Width="32" Height="32"
                                           ui:Translator.TooltipKey="TOGGLE_SNAPPING"
                                           Classes="OverlayToggleButton pixi-icon"
                                           Content="{DynamicResource icon-snapping}"
                                           IsChecked="{Binding SnappingEnabled, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=TwoWay}" />
                         </StackPanel>
-                        <Separator/>
-                        <ComboBox ItemsSource="{Binding AvailableRenderOutputs, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}"
-                                  SelectedValue="{Binding ViewportRenderOutput, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=OneWay}"
-                                  SelectionChanged="RenderOutput_SelectionChanged"
-                                  ui:Translator.TooltipKey="RENDER_OUTPUT"
-                                  Margin="0 10 0 0">
+                        <Separator />
+                        <TextBlock ui:Translator.Key="RENDER_PREVIEW" />
+                        <ComboBox
+                            ItemsSource="{Binding AvailableRenderOutputs, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}"
+                            SelectedValue="{Binding ViewportRenderOutput, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=OneWay}"
+                            SelectionChanged="RenderOutput_SelectionChanged"
+                            ui:Translator.TooltipKey="RENDER_OUTPUT"
+                            Margin="0 10 0 0">
                             <ComboBox.ItemTemplate>
                                 <DataTemplate>
-                                    <TextBlock ui:Translator.Key="{Binding}" />
+                                    <TextBlock Cursor="Arrow" ui:Translator.Key="{Binding}" />
                                 </DataTemplate>
                             </ComboBox.ItemTemplate>
                         </ComboBox>
@@ -147,7 +150,8 @@
                 </Border>
             </overlays:TogglableFlyout.Child>
         </overlays:TogglableFlyout>
-        <Grid ZIndex="100" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10">
+        <Grid IsVisible="{Binding HudVisible, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}}"
+            ZIndex="100" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10">
             <Grid.RowDefinitions>
                 <RowDefinition MinHeight="40" MaxHeight="120" />
                 <RowDefinition Height="35" />

src/PixiEditor/Views/Main/ViewportControls/Viewport.axaml.cs

@@ -225,6 +225,15 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         set => SetValue(FlipYProperty, value);
     }
 
+    public static readonly StyledProperty<bool> HudVisibleProperty = AvaloniaProperty.Register<Viewport, bool>(
+        nameof(HudVisible), true);
+
+    public bool HudVisible
+    {
+        get => GetValue(HudVisibleProperty);
+        set => SetValue(HudVisibleProperty, value);
+    }
+
     public ViewportColorChannels Channels
     {
         get => GetValue(ChannelsProperty);