Merge pull request #709 from PixiEditor/custom-outputs

Added preview node and viewport options

src/PixiDocks

@@ -1 +1 @@
-Subproject commit 68dafe4747a6cead83359ede8e0bbc65cdda02a8
+Subproject commit 42b1f6939f7b56726ed6aba09e49897b507f569d

src/PixiEditor.ChangeableDocument/Changeables/Graph/NodeGraph.cs

@@ -11,7 +11,8 @@ public class NodeGraph : IReadOnlyNodeGraph, IDisposable
 {
     private readonly List<Node> _nodes = new();
     public IReadOnlyCollection<Node> Nodes => _nodes;
-    public OutputNode? OutputNode => Nodes.OfType<OutputNode>().FirstOrDefault();
+    public Node? OutputNode => CustomOutputNode ?? Nodes.OfType<OutputNode>().FirstOrDefault();
+    public Node? CustomOutputNode { get; set; }
 
     IReadOnlyCollection<IReadOnlyNode> IReadOnlyNodeGraph.AllNodes => Nodes;
     IReadOnlyNode IReadOnlyNodeGraph.OutputNode => OutputNode;

src/PixiEditor.ChangeableDocument/Changeables/Graph/Nodes/CustomOutputNode.cs

@@ -0,0 +1,70 @@
+using PixiEditor.ChangeableDocument.Changeables.Animations;
+using PixiEditor.ChangeableDocument.Changeables.Graph.Interfaces;
+using PixiEditor.ChangeableDocument.Rendering;
+using Drawie.Backend.Core;
+using Drawie.Backend.Core.Surfaces;
+using Drawie.Numerics;
+
+namespace PixiEditor.ChangeableDocument.Changeables.Graph.Nodes;
+
+[NodeInfo("CustomOutput")]
+public class CustomOutputNode : Node, IRenderInput, IPreviewRenderable
+{
+    public const string OutputNamePropertyName = "OutputName";
+    public RenderInputProperty Input { get; } 
+    public InputProperty<string> OutputName { get; }
+    
+    private VecI? lastDocumentSize;
+    public CustomOutputNode()
+    {
+        Input = new RenderInputProperty(this, OutputNode.InputPropertyName, "BACKGROUND", null);
+        AddInputProperty(Input);
+        
+        OutputName = CreateInput(OutputNamePropertyName, "OUTPUT_NAME", "");
+    }
+
+    public override Node CreateCopy()
+    {
+        return new CustomOutputNode();
+    }
+
+    protected override void OnExecute(RenderContext context)
+    {
+        if (context.TargetOutput == OutputName.Value)
+        {
+            lastDocumentSize = context.DocumentSize;
+
+            int saved = context.RenderSurface.Canvas.Save();
+            context.RenderSurface.Canvas.ClipRect(new RectD(0, 0, context.DocumentSize.X, context.DocumentSize.Y));
+            Input.Value?.Paint(context, context.RenderSurface);
+
+            context.RenderSurface.Canvas.RestoreToCount(saved);
+        }
+    }
+
+    RenderInputProperty IRenderInput.Background => Input;
+    public RectD? GetPreviewBounds(int frame, string elementToRenderName = "")
+    {
+        if (lastDocumentSize == null)
+        {
+            return null;
+        }
+        
+        return new RectD(0, 0, lastDocumentSize.Value.X, lastDocumentSize.Value.Y); 
+    }
+
+    public bool RenderPreview(DrawingSurface renderOn, RenderContext context, string elementToRenderName)
+    {
+        if (Input.Value == null)
+        {
+            return false;
+        }
+        
+        int saved = renderOn.Canvas.Save();
+        Input.Value.Paint(context, renderOn);
+        
+        renderOn.Canvas.RestoreToCount(saved);
+        
+        return true;
+    }
+}

src/PixiEditor.ChangeableDocument/Changeables/Graph/Nodes/OutputNode.cs

@@ -28,6 +28,8 @@ public class OutputNode : Node, IRenderInput, IPreviewRenderable
 
     protected override void OnExecute(RenderContext context)
     {
+        if(!string.IsNullOrEmpty(context.TargetOutput)) return;
+        
         lastDocumentSize = context.DocumentSize;
         
         int saved = context.RenderSurface.Canvas.Save();

src/PixiEditor.ChangeableDocument/Rendering/DocumentRenderer.cs

@@ -202,7 +202,12 @@ public class DocumentRenderer : IPreviewRenderable
         NodeGraph membersOnlyGraph,
         Dictionary<Guid, Guid> nodeMapping)
     {
-        if(input == null) return membersOnlyGraph.OutputNode.Input;
+        if (input == null)
+        {
+            if(membersOnlyGraph.OutputNode is IRenderInput inputNode) return inputNode.Background;
+
+            return null;
+        }
         
         if (nodeMapping.ContainsKey(input.Node?.Id ?? Guid.Empty))
         {
@@ -228,6 +233,6 @@ public class DocumentRenderer : IPreviewRenderable
             return true;
         });
         
-        return found ?? membersOnlyGraph.OutputNode.Input;
+        return found ?? (membersOnlyGraph.OutputNode as IRenderInput)?.Background;
     }
 }

src/PixiEditor.ChangeableDocument/Rendering/RenderContext.cs

@@ -18,7 +18,8 @@ public class RenderContext
     public DrawingSurface RenderSurface { get; set; }
     public bool FullRerender { get; set; } = false;
     
-    public ColorSpace ProcessingColorSpace { get; set; } 
+    public ColorSpace ProcessingColorSpace { get; set; }
+    public string? TargetOutput { get; set; }   
 
 
     public RenderContext(DrawingSurface renderSurface, KeyFrameTime frameTime, ChunkResolution chunkResolution,

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/Models/DocumentModels/DocumentUpdater.cs

@@ -666,6 +666,11 @@ internal class DocumentUpdater
         ProcessStructureMemberProperty(info, property);
         
         property.InternalSetValue(info.Value);
+        
+        if (info.Property == CustomOutputNode.OutputNamePropertyName)
+        {
+            doc.NodeGraphHandler.UpdateAvailableRenderOutputs();
+        }
     }
     
     private void ProcessStructureMemberProperty(PropertyValueUpdated_ChangeInfo info, INodePropertyHandler property)

src/PixiEditor/Models/Handlers/INodeGraphHandler.cs

@@ -20,4 +20,5 @@ internal interface INodeGraphHandler
    public void SetConnection(NodeConnectionViewModel connection);
    public void RemoveConnection(Guid nodeId, string property);
    public void RemoveConnections(Guid nodeId);
+   public void UpdateAvailableRenderOutputs();
 }

src/PixiEditor/Models/Rendering/SceneRenderer.cs

@@ -4,6 +4,7 @@ using PixiEditor.ChangeableDocument.Changeables.Interfaces;
 using PixiEditor.ChangeableDocument.Rendering;
 using Drawie.Backend.Core.Surfaces;
 using Drawie.Backend.Core.Surfaces.ImageData;
+using PixiEditor.ChangeableDocument.Changeables.Graph;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Interfaces;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Nodes;
 using PixiEditor.Models.Handlers;
@@ -22,14 +23,14 @@ internal class SceneRenderer
         DocumentViewModel = documentViewModel;
     }
 
-    public void RenderScene(DrawingSurface target, ChunkResolution resolution)
+    public void RenderScene(DrawingSurface target, ChunkResolution resolution, string? targetOutput = null)
     {
         if(Document.Renderer.IsBusy || DocumentViewModel.Busy) return;
-        RenderOnionSkin(target, resolution);
-        RenderGraph(target, resolution);
+        RenderOnionSkin(target, resolution, targetOutput);
+        RenderGraph(target, resolution, targetOutput);
     }
 
-    private void RenderGraph(DrawingSurface target, ChunkResolution resolution)
+    private void RenderGraph(DrawingSurface target, ChunkResolution resolution, string? targetOutput)
     {
         DrawingSurface renderTarget = target;
         Texture? texture = null;
@@ -42,7 +43,8 @@ internal class SceneRenderer
 
         RenderContext context = new(renderTarget, DocumentViewModel.AnimationHandler.ActiveFrameTime,
             resolution, Document.Size, Document.ProcessingColorSpace);
-        Document.NodeGraph.Execute(context);
+        context.TargetOutput = targetOutput;
+        SolveFinalNodeGraph(context.TargetOutput).Execute(context);
         
         if(texture != null)
         {
@@ -51,6 +53,43 @@ internal class SceneRenderer
         }
     }
 
+    private IReadOnlyNodeGraph SolveFinalNodeGraph(string? targetOutput)
+    {
+        if (targetOutput == null)
+        {
+            return Document.NodeGraph;
+        }
+
+        CustomOutputNode[] outputNodes = Document.NodeGraph.AllNodes.OfType<CustomOutputNode>().ToArray();
+        
+        foreach (CustomOutputNode outputNode in outputNodes)
+        {
+            if (outputNode.OutputName.Value == targetOutput)
+            {
+                return GraphFromOutputNode(outputNode);
+            }
+        }
+
+        return Document.NodeGraph;
+    }
+
+    private IReadOnlyNodeGraph GraphFromOutputNode(CustomOutputNode outputNode)
+    {
+        NodeGraph graph = new();
+        outputNode.TraverseBackwards(n =>
+        {
+            if (n is Node node)
+            {
+                graph.AddNode(node);
+            }
+            
+            return true;
+        });
+        
+        graph.CustomOutputNode = outputNode;
+        return graph;
+    }
+
     private bool HighDpiRenderNodePresent(IReadOnlyNodeGraph documentNodeGraph)
     {
         bool highDpiRenderNodePresent = false;
@@ -65,7 +104,7 @@ internal class SceneRenderer
         return highDpiRenderNodePresent;
     }
 
-    private void RenderOnionSkin(DrawingSurface target, ChunkResolution resolution)
+    private void RenderOnionSkin(DrawingSurface target, ChunkResolution resolution, string? targetOutput)
     {
         var animationData = Document.AnimationData;
         if (!DocumentViewModel.AnimationHandler.OnionSkinningEnabledBindable)
@@ -76,6 +115,8 @@ internal class SceneRenderer
         double onionOpacity = animationData.OnionOpacity / 100.0;
         double alphaFalloffMultiplier = 1.0 / animationData.OnionFrames;
 
+        var finalGraph = SolveFinalNodeGraph(targetOutput);
+        
         // Render previous frames'
         for (int i = 1; i <= animationData.OnionFrames; i++)
         {
@@ -88,7 +129,8 @@ internal class SceneRenderer
             double finalOpacity = onionOpacity * alphaFalloffMultiplier * (animationData.OnionFrames - i + 1);
 
             RenderContext onionContext = new(target, frame, resolution, Document.Size, Document.ProcessingColorSpace, finalOpacity);
-            Document.NodeGraph.Execute(onionContext);
+            onionContext.TargetOutput = targetOutput;
+            finalGraph.Execute(onionContext);
         }
 
         // Render next frames
@@ -102,7 +144,8 @@ internal class SceneRenderer
 
             double finalOpacity = onionOpacity * alphaFalloffMultiplier * (animationData.OnionFrames - i + 1);
             RenderContext onionContext = new(target, frame, resolution, Document.Size, Document.ProcessingColorSpace, finalOpacity);
-            Document.NodeGraph.Execute(onionContext);
+            onionContext.TargetOutput = targetOutput;
+            finalGraph.Execute(onionContext);
         }
     }
 }

src/PixiEditor/ViewModels/Document/NodeGraphViewModel.cs

@@ -22,6 +22,7 @@ internal class NodeGraphViewModel : ViewModelBase, INodeGraphHandler
     public ObservableCollection<INodeHandler> AllNodes { get; } = new();
     public ObservableCollection<NodeConnectionViewModel> Connections { get; } = new();
     public ObservableCollection<NodeFrameViewModelBase> Frames { get; } = new();
+    public ObservableCollection<string> AvailableRenderOutputs { get; } = new();
     public StructureTree StructureTree { get; } = new();
     public INodeHandler? OutputNode { get; private set; }
 
@@ -43,6 +44,7 @@ internal class NodeGraphViewModel : ViewModelBase, INodeGraphHandler
 
         AllNodes.Add(node);
         StructureTree.Update(this);
+        UpdateAvailableRenderOutputs();
     }
 
     public void RemoveNode(Guid nodeId)
@@ -55,6 +57,7 @@ internal class NodeGraphViewModel : ViewModelBase, INodeGraphHandler
         }
 
         StructureTree.Update(this);
+        UpdateAvailableRenderOutputs();
     }
 
     public void AddFrame(Guid frameId, IEnumerable<Guid> nodes)
@@ -322,4 +325,53 @@ internal class NodeGraphViewModel : ViewModelBase, INodeGraphHandler
 
         Internals.ActionAccumulator.AddFinishedActions(action);
     }
+    
+    public void UpdateAvailableRenderOutputs()
+    {
+        List<string> outputs = new();
+        foreach (var node in AllNodes)
+        {
+            if (node.InternalName == typeof(CustomOutputNode).GetCustomAttribute<NodeInfoAttribute>().UniqueName)
+            {
+                var nameInput =
+                    node.Inputs.FirstOrDefault(x => x.PropertyName == CustomOutputNode.OutputNamePropertyName);
+
+                if (nameInput is { Value: string name } && !string.IsNullOrEmpty(name))
+                {
+                    if(outputs.Contains(name)) continue;
+                    
+                    outputs.Add(name);
+                }
+            }
+            else if (node.InternalName == typeof(OutputNode).GetCustomAttribute<NodeInfoAttribute>().UniqueName)
+            {
+                outputs.Insert(0, "DEFAULT");
+            }
+        }
+        
+        RemoveExcessiveRenderOutputs(outputs);
+        AddMissingRenderOutputs(outputs);
+    }
+
+    private void RemoveExcessiveRenderOutputs(List<string> outputs)
+    {
+        for (int i = AvailableRenderOutputs.Count - 1; i >= 0; i--)
+        {
+            if (!outputs.Contains(AvailableRenderOutputs[i]))
+            {
+                AvailableRenderOutputs.RemoveAt(i);
+            }
+        }
+    }
+    
+    private void AddMissingRenderOutputs(List<string> outputs)
+    {
+        foreach (var output in outputs)
+        {
+            if (!AvailableRenderOutputs.Contains(output))
+            {
+                AvailableRenderOutputs.Add(output);
+            }
+        }
+    }
 }

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

@@ -0,0 +1,8 @@
+using PixiEditor.ChangeableDocument.Changeables.Graph.Nodes;
+using PixiEditor.Extensions.Common.Localization;
+using PixiEditor.ViewModels.Nodes;
+
+namespace PixiEditor.ViewModels.Document.Nodes;
+
+[NodeViewModel("CUSTOM_OUTPUT_NODE", null, null)]
+internal class CustomOutputNodeViewModel : NodeViewModel<CustomOutputNode>;

src/PixiEditor/ViewModels/Nodes/Properties/StringPropertyViewModel.cs

@@ -0,0 +1,25 @@
+using System.ComponentModel;
+
+namespace PixiEditor.ViewModels.Nodes.Properties;
+
+internal class StringPropertyViewModel : NodePropertyViewModel<string>
+{
+    public string StringValue
+    {
+        get => Value;
+        set => Value = value;
+    }
+    
+    public StringPropertyViewModel(NodeViewModel node, Type valueType) : base(node, valueType)
+    {
+        PropertyChanged += StringPropertyViewModel_PropertyChanged;
+    }
+    
+    private void StringPropertyViewModel_PropertyChanged(object sender, PropertyChangedEventArgs e)
+    {
+        if (e.PropertyName == nameof(Value))
+        {
+            OnPropertyChanged(nameof(StringValue));
+        }
+    }
+}

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

@@ -32,6 +32,7 @@ internal class ViewportWindowViewModel : SubViewModel<WindowViewModel>, IDockabl
     private string _index = "";
 
     private bool _flipX;
+    private string renderOutputName = "DEFAULT";
     private string id = Guid.NewGuid().ToString();
 
     public bool FlipX
@@ -55,6 +56,16 @@ internal class ViewportWindowViewModel : SubViewModel<WindowViewModel>, IDockabl
             OnPropertyChanged(nameof(FlipY));
         }
     }
+    
+    public string RenderOutputName
+    {
+        get => renderOutputName;
+        set
+        {
+            renderOutputName = value;
+            OnPropertyChanged(nameof(RenderOutputName));
+        }
+    }
 
     private ViewportColorChannels _channels = ViewportColorChannels.Default;
     
@@ -64,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

@@ -37,6 +37,9 @@
         Channels="{Binding Channels, Mode=TwoWay}"
         SnappingViewModel="{Binding ActiveDocument.SnappingViewModel, Source={viewModels1:MainVM DocumentManagerSVM}}"
         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/Dock/DocumentTemplate.axaml.cs

@@ -1,14 +1,4 @@
-using System.ComponentModel;
-using Avalonia.Controls;
-using Avalonia.Controls.Primitives;
-using Avalonia.Input;
-using Avalonia.Interactivity;
-using PixiEditor.Models.Preferences;
-using PixiEditor.ViewModels.Dock;
-using PixiEditor.Views.Palettes;
-using PixiEditor.Extensions.CommonApi.UserPreferences.Settings.PixiEditor;
-using PixiEditor.ViewModels.SubViewModels;
-using PixiEditor.ViewModels.Tools.Tools;
+using Avalonia.Controls;
 
 namespace PixiEditor.Views.Dock;
 

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

@@ -128,6 +128,8 @@ internal partial class FixedViewport : UserControl, INotifyPropertyChanged
         {
             newDoc.SizeChanged += viewport.DocSizeChanged;
         }
+        
+        viewport.ForceRefreshFinalImage();
     }
 
     private void DocSizeChanged(object? sender, DocumentSizeChangedEventArgs e)

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,24 +119,39 @@
                                           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 />
+                        <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 Cursor="Arrow" ui:Translator.Key="{Binding}" />
+                                </DataTemplate>
+                            </ComboBox.ItemTemplate>
+                        </ComboBox>
                     </StackPanel>
                 </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" />
@@ -179,6 +195,7 @@
             AllOverlays="{Binding ElementName=vpUc, Path=ActiveOverlays}"
             FadeOut="{Binding Source={viewModels:ToolVM ColorPickerToolViewModel}, Path=PickOnlyFromReferenceLayer, Mode=OneWay}"
             DefaultCursor="{Binding Source={viewModels:MainVM}, Path=ToolsSubViewModel.ToolCursor, Mode=OneWay}"
+            RenderOutput="{Binding ViewportRenderOutput, RelativeSource={RelativeSource Mode=FindAncestor, AncestorType=viewportControls:Viewport}, Mode=OneWay}"
             CheckerImagePath="/Images/CheckerTile.png"
             PointerPressed="Scene_OnContextMenuOpening"
             ui:RenderOptionsBindable.BitmapInterpolationMode="{Binding Scale, Converter={converters:ScaleToBitmapScalingModeConverter}, RelativeSource={RelativeSource Self}}">

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

@@ -5,6 +5,7 @@ using Avalonia;
 using Avalonia.Controls;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.VisualTree;
 using ChunkyImageLib;
 using ChunkyImageLib.DataHolders;
 using PixiEditor.Helpers;
@@ -224,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);
@@ -288,6 +298,18 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         }
     }
 
+    public static readonly StyledProperty<ObservableCollection<string>> AvailableRenderOutputsProperty =
+        AvaloniaProperty.Register<Viewport, ObservableCollection<string>>(nameof(AvailableRenderOutputs));
+
+    public static readonly StyledProperty<string> ViewportRenderOutputProperty = AvaloniaProperty.Register<Viewport, string>(
+        nameof(ViewportRenderOutput), "DEFAULT");
+
+    public string ViewportRenderOutput
+    {
+        get => GetValue(ViewportRenderOutputProperty);
+        set => SetValue(ViewportRenderOutputProperty, value);
+    }
+
     public ObservableCollection<Overlay> ActiveOverlays { get; } = new();
 
     public Guid GuidValue { get; } = Guid.NewGuid();
@@ -350,6 +372,12 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         set { SetValue(SnappingEnabledProperty, value); }
     }
 
+    public ObservableCollection<string> AvailableRenderOutputs
+    {
+        get { return (ObservableCollection<string>)GetValue(AvailableRenderOutputsProperty); }
+        set { SetValue(AvailableRenderOutputsProperty, value); }
+    }
+
     private void ForceRefreshFinalImage()
     {
         Scene.InvalidateVisual();
@@ -521,8 +549,8 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
 
     private void Scene_OnContextMenuOpening(object? sender, PointerPressedEventArgs e)
     {
-        if(e.GetMouseButton(this) != MouseButton.Right) return;
-        
+        if (e.GetMouseButton(this) != MouseButton.Right) return;
+
         ViewportWindowViewModel vm = ((ViewportWindowViewModel)DataContext);
         var tools = vm.Owner.Owner.ToolsSubViewModel;
 
@@ -548,4 +576,17 @@ internal partial class Viewport : UserControl, INotifyPropertyChanged
         Scene?.ContextFlyout?.ShowAt(Scene);
         e.Handled = true;
     }
+
+    private void RenderOutput_SelectionChanged(object? sender, SelectionChangedEventArgs e)
+    {
+        if (e.Source is ComboBox comboBox)
+        {
+            if(!comboBox.IsAttachedToVisualTree()) return;
+
+            if (e.AddedItems.Count > 0)
+            {
+                ViewportRenderOutput = (string)e.AddedItems[0];
+            }
+        }
+    }
 }

src/PixiEditor/Views/Nodes/Properties/StringPropertyView.axaml

@@ -0,0 +1,23 @@
+<properties:NodePropertyView 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:properties="clr-namespace:PixiEditor.Views.Nodes.Properties"
+                             xmlns:ui="clr-namespace:PixiEditor.Extensions.UI;assembly=PixiEditor.Extensions"
+                             xmlns:converters="clr-namespace:PixiEditor.Helpers.Converters"
+                             xmlns:behaviours="clr-namespace:PixiEditor.Helpers.Behaviours"
+                             xmlns:system="clr-namespace:System;assembly=System.Runtime"
+                             xmlns:properties1="clr-namespace:PixiEditor.ViewModels.Nodes.Properties"
+                             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+                             x:DataType="properties1:StringPropertyViewModel"
+                             x:Class="PixiEditor.Views.Nodes.Properties.StringPropertyView">
+    <DockPanel LastChildFill="True"
+        HorizontalAlignment="{Binding IsInput, Converter={converters:BoolToValueConverter FalseValue='Right', TrueValue='Stretch'}}">
+        <TextBlock VerticalAlignment="Center" ui:Translator.Key="{Binding DisplayName}" />
+        <TextBox Text="{CompiledBinding StringValue, Mode=TwoWay}" IsVisible="{Binding ShowInputField}">
+            <Interaction.Behaviors>
+                <behaviours:GlobalShortcutFocusBehavior />
+            </Interaction.Behaviors>
+        </TextBox>
+    </DockPanel>
+</properties:NodePropertyView>

src/PixiEditor/Views/Nodes/Properties/StringPropertyView.axaml.cs

@@ -0,0 +1,14 @@
+using Avalonia;
+using Avalonia.Controls;
+using Avalonia.Markup.Xaml;
+
+namespace PixiEditor.Views.Nodes.Properties;
+
+public partial class StringPropertyView : NodePropertyView
+{
+    public StringPropertyView()
+    {
+        InitializeComponent();
+    }
+}
+

src/PixiEditor/Views/Rendering/Scene.cs

@@ -106,6 +106,12 @@ internal class Scene : Zoombox.Zoombox, ICustomHitTest
         set => SetValue(ChannelsProperty, value);
     }
 
+    public string RenderOutput
+    {
+        get { return (string)GetValue(RenderOutputProperty); }
+        set { SetValue(RenderOutputProperty, value); }
+    }
+
 
     private Bitmap? checkerBitmap;
 
@@ -134,6 +140,7 @@ internal class Scene : Zoombox.Zoombox, ICustomHitTest
 
     private PixelSize lastSize = PixelSize.Empty;
     private Cursor lastCursor;
+    public static readonly StyledProperty<string> RenderOutputProperty = AvaloniaProperty.Register<Scene, string>("RenderOutput");
 
     static Scene()
     {
@@ -254,7 +261,7 @@ internal class Scene : Zoombox.Zoombox, ICustomHitTest
     {
         DrawCheckerboard(renderTexture.DrawingSurface, bounds);
         DrawOverlays(renderTexture.DrawingSurface, bounds, OverlayRenderSorting.Background);
-        SceneRenderer.RenderScene(renderTexture.DrawingSurface, CalculateResolution());
+        SceneRenderer.RenderScene(renderTexture.DrawingSurface, CalculateResolution(), RenderOutput == "DEFAULT" ? null : RenderOutput);
         DrawOverlays(renderTexture.DrawingSurface, bounds, OverlayRenderSorting.Foreground);
     }