Added brush picker previews

src/Drawie

@@ -1 +1 @@
-Subproject commit 14fd0668a819034a8e2171152abe1088f29594d6
+Subproject commit 8aa2b51c530d7e9e558206b48f114d742dd4d864

src/PixiEditor.ChangeableDocument/Changeables/Graph/Interfaces/IReadOnlyNode.cs

@@ -44,6 +44,6 @@ public interface IReadOnlyNode : ICacheable
 
     public IInputProperty? GetInputProperty(string internalName);
     public IOutputProperty? GetOutputProperty(string internalName);
-    public void SerializeAdditionalData(Dictionary<string, object> additionalData);
+    public void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData);
     public string GetNodeTypeUniqueName();
 }

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

@@ -17,7 +17,7 @@ public class BlackboardVariableValueNode : Node
 
     protected override void OnExecute(RenderContext context)
     {
-        var variable = context.Graph.Blackboard.GetVariable(VariableName.Value);
+        var variable = context.Graph?.Blackboard.GetVariable(VariableName.Value);
         Value.Value = variable?.Value;
     }
 

src/PixiEditor.ChangeableDocument/Changeables/Graph/Nodes/Brushes/BrushOutputNode.cs

@@ -7,6 +7,7 @@ using Drawie.Backend.Core.Surfaces.ImageData;
 using Drawie.Backend.Core.Surfaces.PaintImpl;
 using Drawie.Backend.Core.Vector;
 using Drawie.Numerics;
+using PixiEditor.ChangeableDocument.Changeables.Animations;
 using PixiEditor.ChangeableDocument.Changeables.Brushes;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Context;
 using PixiEditor.ChangeableDocument.Changeables.Graph.Interfaces;
@@ -25,7 +26,9 @@ public class BrushOutputNode : Node
     public const string NodeId = "BrushOutput";
     public const string BrushNameProperty = "BrushName";
     public const string FitToStrokeSizeProperty = "FitToStrokeSize";
-    public const int AutoGeneratedPreviewSize = 128;
+    public const int PointPreviewSize = 50;
+    public const int StrokePreviewSizeX = 200;
+    public const int StrokePreviewSizeY = 50;
 
     public InputProperty<string> BrushName { get; }
     public InputProperty<ShapeVectorData> VectorShape { get; }
@@ -45,7 +48,8 @@ public class BrushOutputNode : Node
 
     public InputProperty<IReadOnlyNodeGraph> Previous { get; }
 
-    public Texture AutoGeneratedPreview { get; private set; }
+    public Texture PointPreviewTexture { get; private set; }
+    public Texture StrokePreviewTexture { get; private set; }
 
     internal Texture ContentTexture;
 
@@ -133,24 +137,18 @@ public class BrushOutputNode : Node
             previewChunkyImage = new ChunkyImage(new VecI(200, 200), context.ProcessingColorSpace);
         }
 
-        if (previewVectorPath == null)
-        {
-            previewVectorPath = VectorPath.FromSvgPath(previewSvg);
-        }
-
         RectI rect;
 
         previewChunkyImage.EnqueueClear();
         previewChunkyImage.CommitChanges();
 
-        float pressure;
         int maxSize = 50;
         float offset = 0;
 
         int[] sizes = new int[] { 10, 25, 50 };
         const int spacing = 10;
         const int marginEdges = 30;
-        VecD pos;
+        VecD pos = VecD.Zero;
         for (var i = 0; i < sizes.Length; i++)
         {
             var size = sizes[i];
@@ -165,14 +163,31 @@ public class BrushOutputNode : Node
                 new EditorData(Colors.White, Colors.Black));
         }
 
-        while (offset <= previewChunkyImage.CommittedSize.X)
+        DrawStrokePreview(previewChunkyImage, context, maxSize);
+
+        previewChunkyImage.CommitChanges();
+        previewChunkyImage.DrawCommittedChunkOn(
+            VecI.Zero, ChunkResolution.Full, surface.Canvas, VecD.Zero);
+    }
+
+    private void DrawStrokePreview(ChunkyImage target, RenderContext context, int maxSize, VecD shift = default)
+    {
+        if (previewVectorPath == null)
+        {
+            previewVectorPath = VectorPath.FromSvgPath(previewSvg);
+        }
+
+        float offset = 0;
+        float pressure;
+        VecD pos;
+        while (offset <= target.CommittedSize.X)
         {
-            pressure = (float)Math.Sin((offset / previewChunkyImage.CommittedSize.X) * Math.PI);
+            pressure = (float)Math.Sin((offset / target.CommittedSize.X) * Math.PI);
             var vec4D = previewVectorPath.GetPositionAndTangentAtDistance(offset, false);
             pos = vec4D.XY;
-            pos = new VecD(pos.X, pos.Y + maxSize / 2f);
+            pos = new VecD(pos.X, pos.Y + maxSize / 2f) + shift;
 
-            previewEngine.ExecuteBrush(previewChunkyImage,
+            previewEngine.ExecuteBrush(target,
                 new BrushData(context.Graph, Id) { StrokeWidth = maxSize, AntiAliasing = true },
                 [(VecI)pos], context.FrameTime, context.ProcessingColorSpace, context.DesiredSamplingOptions,
                 new PointerInfo(pos, pressure, 0, VecD.Zero, vec4D.ZW),
@@ -181,40 +196,80 @@ public class BrushOutputNode : Node
 
             offset += 1;
         }
+    }
 
-        previewChunkyImage.CommitChanges();
-        previewChunkyImage.DrawCommittedChunkOn(
-            VecI.Zero, ChunkResolution.Full, surface.Canvas, VecD.Zero);
+    private void DrawPointPreview(ChunkyImage img, RenderContext context, int size, VecD pos)
+    {
+        previewEngine.ExecuteBrush(img,
+            new BrushData(context.Graph, Id) { StrokeWidth = size, AntiAliasing = true },
+            pos, context.FrameTime, context.ProcessingColorSpace, context.DesiredSamplingOptions,
+            new PointerInfo(pos, 1, 0, VecD.Zero, new VecD(0, 1)),
+            new KeyboardInfo(),
+            new EditorData(Colors.White, Colors.Black));
+    }
 
-        if (AutoGeneratedPreview == null || AutoGeneratedPreview.Size.X != AutoGeneratedPreviewSize ||
-            AutoGeneratedPreview.Size.Y != AutoGeneratedPreviewSize)
+    private void GeneratePreviews(IReadOnlyDocument doc)
+    {
+        if (PointPreviewTexture == null || PointPreviewTexture.Size.X != PointPreviewSize ||
+            PointPreviewTexture.Size.Y != PointPreviewSize)
         {
-            AutoGeneratedPreview?.Dispose();
-            AutoGeneratedPreview = Texture.ForDisplay(new VecI(AutoGeneratedPreviewSize));
+            PointPreviewTexture?.Dispose();
+            PointPreviewTexture = Texture.ForDisplay(new VecI(PointPreviewSize, PointPreviewSize));
         }
 
-        AutoGeneratedPreview.DrawingSurface.Canvas.Clear();
-        AutoGeneratedPreview.DrawingSurface.Canvas.Save();
-        AutoGeneratedPreview.DrawingSurface.Canvas.Scale(
-            AutoGeneratedPreviewSize / (float)previewChunkyImage.CommittedSize.X,
-            AutoGeneratedPreviewSize / (float)previewChunkyImage.CommittedSize.Y);
-        previewChunkyImage.DrawCommittedChunkOn(
-            VecI.Zero, ChunkResolution.Full, AutoGeneratedPreview.DrawingSurface.Canvas, VecD.Zero, null, SamplingOptions.Bilinear);
-        AutoGeneratedPreview.DrawingSurface.Canvas.Restore();
+        if (StrokePreviewTexture == null || StrokePreviewTexture.Size.X != StrokePreviewSizeX ||
+            StrokePreviewTexture.Size.Y != StrokePreviewSizeY)
+        {
+            StrokePreviewTexture?.Dispose();
+            StrokePreviewTexture = Texture.ForDisplay(new VecI(StrokePreviewSizeX, StrokePreviewSizeY));
+        }
+
+        PointPreviewTexture.DrawingSurface.Canvas.Clear();
+        StrokePreviewTexture.DrawingSurface.Canvas.Clear();
+
+        RenderContext context = new RenderContext(PointPreviewTexture.DrawingSurface.Canvas, 0, ChunkResolution.Full,
+            new VecI(PointPreviewSize, PointPreviewSize), new VecI(PointPreviewSize), ColorSpace.CreateSrgb(),
+            SamplingOptions.Default,
+           doc.NodeGraph);
+
+        using var chunkyImage = new ChunkyImage(new VecI(PointPreviewSize, PointPreviewSize), context.ProcessingColorSpace);
+
+        DrawPointPreview(chunkyImage, context, PointPreviewSize, new VecD(PointPreviewSize / 2f, PointPreviewSize / 2f));
+        chunkyImage.CommitChanges();
+        chunkyImage.DrawCommittedChunkOn(
+            VecI.Zero, ChunkResolution.Full, PointPreviewTexture.DrawingSurface.Canvas, VecD.Zero);
+
+        context.RenderOutputSize = new VecI(StrokePreviewSizeX, StrokePreviewSizeY);
+        context.DocumentSize = new VecI(StrokePreviewSizeX, StrokePreviewSizeY);
+        context.RenderSurface = StrokePreviewTexture.DrawingSurface.Canvas;
+
+        using var strokeChunkyImage = new ChunkyImage(new VecI(StrokePreviewSizeX, StrokePreviewSizeY), context.ProcessingColorSpace);
+        DrawStrokePreview(strokeChunkyImage, context, StrokePreviewSizeY / 2, new VecD(0, -88));
+        strokeChunkyImage.CommitChanges();
+        strokeChunkyImage.DrawCommittedChunkOn(
+            VecI.Zero, ChunkResolution.Full, StrokePreviewTexture.DrawingSurface.Canvas, VecD.Zero);
     }
 
-    public override void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public override void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
-        base.SerializeAdditionalData(additionalData);
-        additionalData["PreviewTexture"] = AutoGeneratedPreview;
+        base.SerializeAdditionalData(target, additionalData);
+        GeneratePreviews(target);
+        additionalData["PointPreviewTexture"] = PointPreviewTexture;
+        additionalData["StrokePreviewTexture"] = StrokePreviewTexture;
     }
 
-    internal override void DeserializeAdditionalData(IReadOnlyDocument target, IReadOnlyDictionary<string, object> data, List<IChangeInfo> infos)
+    internal override void DeserializeAdditionalData(IReadOnlyDocument target, IReadOnlyDictionary<string, object> data,
+        List<IChangeInfo> infos)
     {
         base.DeserializeAdditionalData(target, data, infos);
-        if (data.TryGetValue("PreviewTexture", out var texObj) && texObj is Texture tex)
+        if (data.TryGetValue("PointPreviewTexture", out var texObj) && texObj is Texture tex)
         {
-            AutoGeneratedPreview = tex;
+            PointPreviewTexture = tex;
+        }
+
+        if (data.TryGetValue("StrokePreviewTexture", out var strokeTexObj) && strokeTexObj is Texture strokeTex)
+        {
+            StrokePreviewTexture = strokeTex;
         }
     }
 
@@ -227,6 +282,11 @@ public class BrushOutputNode : Node
     public override void Dispose()
     {
         previewEngine.Dispose();
+        previewChunkyImage?.Dispose();
+        previewChunkyImage = null;
+
+        previewVectorPath?.Dispose();
+        previewVectorPath = null;
         cache.Dispose();
         base.Dispose();
     }

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

@@ -399,9 +399,9 @@ public class NestedDocumentNode : LayerNode, IInputDependentOutputs, ITransforma
             .WithMatrix(TransformationMatrix);
     }
 
-    public override void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public override void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
-        base.SerializeAdditionalData(additionalData);
+        base.SerializeAdditionalData(target, additionalData);
         additionalData["lastDocument"] = lastDocument;
         additionalData["TransformationMatrix"] = TransformationMatrix;
     }

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

@@ -580,7 +580,7 @@ public abstract class Node : IReadOnlyNode, IDisposable
         return GetOutputProperty(outputProperty);
     }
 
-    public virtual void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public virtual void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
     }
 

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

@@ -150,9 +150,9 @@ public abstract class RenderNode : Node, IHighDpiRenderNode
         return textureCache.RequestTexture(id, size, processingCs, clear);
     }
 
-    public override void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public override void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
-        base.SerializeAdditionalData(additionalData);
+        base.SerializeAdditionalData(target, additionalData);
         additionalData["AllowHighDpiRendering"] = AllowHighDpiRendering;
     }
 

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

@@ -277,9 +277,9 @@ public abstract class StructureNode : RenderNode, IReadOnlyStructureNode, IRende
     public abstract RectD? GetTightBounds(KeyFrameTime frameTime);
     public abstract RectD? GetApproxBounds(KeyFrameTime frameTime);
 
-    public override void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public override void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
-        base.SerializeAdditionalData(additionalData);
+        base.SerializeAdditionalData(target, additionalData);
         if (EmbeddedMask != null)
         {
             additionalData["embeddedMask"] = EmbeddedMask;

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

@@ -154,9 +154,9 @@ public class VectorLayerNode : LayerNode, ITransformableObject, IReadOnlyVectorN
         return GetTightBounds(frameTime);
     }
 
-    public override void SerializeAdditionalData(Dictionary<string, object> additionalData)
+    public override void SerializeAdditionalData(IReadOnlyDocument target, Dictionary<string, object> additionalData)
     {
-        base.SerializeAdditionalData(additionalData);
+        base.SerializeAdditionalData(target, additionalData);
         additionalData["ShapeData"] = EmbeddedShapeData;
     }
 

src/PixiEditor/Models/BrushEngine/Brush.cs

@@ -16,7 +16,8 @@ internal class Brush : IBrush
     public string Name { get; set; }
     public string? FilePath { get; }
     public Guid Id { get; }
-    public Texture Preview { get; }
+    public Texture StrokePreview { get; }
+    public Texture? PointPreview { get; }
 
     public Brush(Uri uri)
     {
@@ -51,7 +52,9 @@ internal class Brush : IBrush
 
         Name = name;
         Document = doc;
-        Preview = ExtractPreview(doc);
+        var previews = ExtractPreviews(doc);
+        StrokePreview = previews.strokePreview;
+        PointPreview = previews.pointPreview;
 
         stream.Close();
         stream.Dispose();
@@ -63,7 +66,9 @@ internal class Brush : IBrush
         Document = brushDocument;
         FilePath = brushDocument.FullFilePath;
         Id = brushDocument.NodeGraphHandler.AllNodes.OfType<BrushOutputNodeViewModel>().FirstOrDefault()?.Id ?? Guid.NewGuid();
-        Preview = ExtractPreview(brushDocument);
+        var previews = ExtractPreviews(brushDocument);
+        StrokePreview = previews.strokePreview;
+        PointPreview = previews.pointPreview;
     }
 
     public Brush(string name, IDocument brushDocument, Guid id)
@@ -72,20 +77,24 @@ internal class Brush : IBrush
         Document = brushDocument;
         FilePath = brushDocument.FullFilePath;
         Id = id;
-        Preview = ExtractPreview(brushDocument);
+        var previews = ExtractPreviews(brushDocument);
+        StrokePreview = previews.strokePreview;
+        PointPreview = previews.pointPreview;
     }
 
-    private Texture? ExtractPreview(IDocument brushDocument)
+    private (Texture? strokePreview, Texture? pointPreview) ExtractPreviews(IDocument brushDocument)
     {
         using var graph = brushDocument.ShareGraph();
         BrushOutputNode outputNode =
             graph.TryAccessData().AllNodes.OfType<BrushOutputNode>().FirstOrDefault();
-        if (outputNode != null && outputNode.AutoGeneratedPreview != null)
+        if (outputNode != null)
         {
-            return outputNode.AutoGeneratedPreview;
+            Texture? strokePreview = outputNode.StrokePreviewTexture;
+            Texture? pointPreview = outputNode.PointPreviewTexture;
+            return (strokePreview, pointPreview);
         }
 
-        return null;
+        return (null, null);
     }
 
     public override string ToString()

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

@@ -75,7 +75,7 @@ internal partial class DocumentViewModel
         }
 
         AddBlackboard(doc.Blackboard, graph, serializationConfig, factories);
-        AddNodes(doc.NodeGraph, graph, nodeIdMap, keyFrameIdMap, serializationConfig, factories);
+        AddNodes(doc, graph, nodeIdMap, keyFrameIdMap, serializationConfig, factories);
 
         var preview = TryRenderWholeImage(0);
         byte[]? previewBytes = null;
@@ -477,7 +477,7 @@ internal partial class DocumentViewModel
         return image;
     }
 
-    private static void AddNodes(IReadOnlyNodeGraph graph, NodeGraph targetGraph,
+    private static void AddNodes(IReadOnlyDocument doc, NodeGraph targetGraph,
         Dictionary<Guid, int> nodeIdMap,
         Dictionary<Guid, int> keyFrameIdMap,
         SerializationConfig config, IReadOnlyList<SerializationFactory> allFactories)
@@ -486,13 +486,13 @@ internal partial class DocumentViewModel
 
         int id = 0;
         int keyFrameId = 0;
-        foreach (var node in graph.AllNodes)
+        foreach (var node in doc.NodeGraph.AllNodes)
         {
             nodeIdMap[node.Id] = id + 1;
             id++;
         }
 
-        foreach (var node in graph.AllNodes)
+        foreach (var node in doc.NodeGraph.AllNodes)
         {
             NodePropertyValue[] properties = new NodePropertyValue[node.InputProperties.Count];
 
@@ -507,7 +507,7 @@ internal partial class DocumentViewModel
             }
 
             Dictionary<string, object> additionalData = new();
-            node.SerializeAdditionalData(additionalData);
+            node.SerializeAdditionalData(doc, additionalData);
 
             KeyFrameData[] keyFrames = new KeyFrameData[node.KeyFrames.Count];
 

src/PixiEditor/Views/Input/BrushItem.axaml

@@ -20,11 +20,14 @@
     <Grid>
         <DockPanel LastChildFill="True"
                    DataContext="{Binding RelativeSource={RelativeSource AncestorType=UserControl, Mode=FindAncestor}}">
-            <controls:DrawieTextureControl Height="32" Width="32"
-                                    SamplingOptions="Bilinear"
-                                    Margin="0, 0, 5, 0"
-                                    Texture="{Binding Brush.Preview}" DockPanel.Dock="Left" />
+            <controls:DrawieTextureControl Height="30" Width="30"
+                                           SamplingOptions="Bilinear"
+                                           Margin="0, 0, 5, 0"
+                                           Texture="{Binding Brush.PointPreview}" DockPanel.Dock="Left" />
             <TextBlock VerticalAlignment="Center"
+                       Width="70"
+                       ToolTip.Tip="{Binding Brush.Name}"
+                       TextTrimming="CharacterEllipsis"
                        Text="{Binding Brush.Name}" />
 
             <StackPanel Orientation="Horizontal" DockPanel.Dock="Right">
@@ -38,18 +41,11 @@
                         </Style>
                     </Button.Styles>
                 </Button>
-                <Button Name="deleteButton"
-                        Classes="pixi-icon" Width="28" Height="28"
-                        Content="{DynamicResource icon-trash}"
-                        localization:Translator.TooltipKey="DELETE" Padding="2" Margin="0" Cursor="Hand">
-                    <Button.Styles>
-                        <Style Selector="Button:pointerover">
-                            <Setter Property="Background" Value="Red" />
-                        </Style>
-                    </Button.Styles>
-                </Button>
             </StackPanel>
-            <Panel />
+            <controls:DrawieTextureControl Height="50" Width="100"
+                                           SamplingOptions="Bilinear"
+                                           Margin="0, 0, 5, 0"
+                                           Texture="{Binding Brush.StrokePreview}" DockPanel.Dock="Left" />
         </DockPanel>
     </Grid>
 </UserControl>

src/PixiEditor/Views/Input/BrushPicker.axaml

@@ -11,10 +11,10 @@
              x:Class="PixiEditor.Views.Input.BrushPicker">
     <Panel>
         <controls:DrawieTextureControl
-            Width="40" Height="20"
+            Width="36" Height="16"
             ZIndex="1"
             SamplingOptions="Bilinear"
-            Texture="{Binding $parent[input:BrushPicker].SelectedBrush.Preview, FallbackValue={x:Null}}" />
+            Texture="{Binding Path=SelectedBrush.PointPreview, RelativeSource={RelativeSource FindAncestor, AncestorType=input:BrushPicker}}" />
         <ToggleButton Name="PopupToggle" Width="40" Height="20">
             <ToggleButton.Styles>
                 <Style Selector="FlyoutPresenter">