refactor: use custom BranchTree instead of TreeView to improve performance

Author: love-linger

src/Converters/IntConverters.cs

@@ -1,4 +1,5 @@
-using Avalonia.Data.Converters;
+using Avalonia;
+using Avalonia.Data.Converters;
 
 namespace SourceGit.Converters
 {
@@ -24,5 +25,8 @@ public static class IntConverters
 
         public static readonly FuncValueConverter<int, bool> IsSubjectLengthGood =
             new FuncValueConverter<int, bool>(v => v <= ViewModels.Preference.Instance.SubjectGuideLength);
+
+        public static readonly FuncValueConverter<int, Thickness> ToTreeMargin =
+            new FuncValueConverter<int, Thickness>(v => new Thickness(v * 16, 0, 0, 0));
     }
 }

src/ViewModels/BranchTreeNode.cs

@@ -1,122 +1,62 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.IO;
 
 using Avalonia;
 using Avalonia.Collections;
+using Avalonia.Media;
 
 using CommunityToolkit.Mvvm.ComponentModel;
 
 namespace SourceGit.ViewModels
 {
-    public enum BranchTreeNodeType
-    {
-        DetachedHead,
-        Remote,
-        Folder,
-        Branch,
-    }
-
     public class BranchTreeNode : ObservableObject
     {
-        public const double DEFAULT_CORNER = 4.0;
-
-        public string Name { get; set; }
-        public BranchTreeNodeType Type { get; set; }
-        public object Backend { get; set; }
-        public bool IsFiltered { get; set; }
-        public List<BranchTreeNode> Children { get; set; } = new List<BranchTreeNode>();
-
-        public bool IsUpstreamTrackStatusVisible
-        {
-            get => IsBranch && !string.IsNullOrEmpty((Backend as Models.Branch).UpstreamTrackStatus);
-        }
-
-        public string UpstreamTrackStatus
-        {
-            get => Type == BranchTreeNodeType.Branch ? (Backend as Models.Branch).UpstreamTrackStatus : "";
-        }
-
-        public bool IsRemote
+        public string Name { get; private set; } = string.Empty;
+        public object Backend { get; private set; } = null;
+        public int Depth { get; set; } = 0;
+        public bool IsFiltered { get; set; } = false;
+        public List<BranchTreeNode> Children { get; private set; } = new List<BranchTreeNode>();
+        
+        public bool IsExpanded
         {
-            get => Type == BranchTreeNodeType.Remote;
+            get => _isExpanded;
+            set => SetProperty(ref _isExpanded, value);
         }
-
-        public bool IsFolder
+        
+        public CornerRadius CornerRadius
         {
-            get => Type == BranchTreeNodeType.Folder;
+            get => _cornerRadius;
+            set => SetProperty(ref _cornerRadius, value);
         }
-
+        
         public bool IsBranch
         {
-            get => Type == BranchTreeNodeType.Branch;
+            get => Backend is Models.Branch;
         }
 
-        public bool IsDetachedHead
-        {
-            get => Type == BranchTreeNodeType.DetachedHead;
-        }
-
-        public bool IsCurrent
+        public bool IsUpstreamTrackStatusVisible
         {
-            get => IsBranch && (Backend as Models.Branch).IsCurrent;
+            get => Backend is Models.Branch { IsLocal: true } branch && !string.IsNullOrEmpty(branch.UpstreamTrackStatus);
         }
 
-        public bool IsSelected
+        public string UpstreamTrackStatus
         {
-            get => _isSelected;
-            set => SetProperty(ref _isSelected, value);
+            get => Backend is Models.Branch branch ? branch.UpstreamTrackStatus : "";
         }
 
-        public bool IsExpanded
+        public FontWeight NameFontWeight
         {
-            get => _isExpanded;
-            set => SetProperty(ref _isExpanded, value);
+            get => Backend is Models.Branch { IsCurrent: true } ? FontWeight.Bold : FontWeight.Regular;
         }
 
         public string Tooltip
         {
-            get
-            {
-                if (Backend is Models.Branch b)
-                    return b.FriendlyName;
-
-                return null;
-            }
-        }
-
-        public CornerRadius CornerRadius
-        {
-            get => _cornerRadius;
-            set => SetProperty(ref _cornerRadius, value);
+            get => Backend is Models.Branch b ? b.FriendlyName : null;
         }
-
-        public void UpdateCornerRadius(ref BranchTreeNode prev)
-        {
-            if (_isSelected && prev != null && prev.IsSelected)
-            {
-                var prevTop = prev.CornerRadius.TopLeft;
-                prev.CornerRadius = new CornerRadius(prevTop, 0);
-                CornerRadius = new CornerRadius(0, DEFAULT_CORNER);
-            }
-            else if (CornerRadius.TopLeft != DEFAULT_CORNER ||
-                CornerRadius.BottomLeft != DEFAULT_CORNER)
-            {
-                CornerRadius = new CornerRadius(DEFAULT_CORNER);
-            }
-
-            prev = this;
-
-            if (!IsBranch && IsExpanded)
-            {
-                foreach (var child in Children)
-                    child.UpdateCornerRadius(ref prev);
-            }
-        }
-
-        private bool _isSelected = false;
+        
         private bool _isExpanded = false;
-        private CornerRadius _cornerRadius = new CornerRadius(DEFAULT_CORNER);
+        private CornerRadius _cornerRadius = new CornerRadius(4);
 
         public class Builder
         {
@@ -133,7 +73,6 @@ public void Run(List<Models.Branch> branches, List<Models.Remote> remotes, bool
                     var node = new BranchTreeNode()
                     {
                         Name = remote.Name,
-                        Type = BranchTreeNodeType.Remote,
                         Backend = remote,
                         IsExpanded = bForceExpanded || _expanded.Contains(path),
                     };
@@ -176,9 +115,13 @@ private void CollectExpandedNodes(List<BranchTreeNode> nodes, string prefix)
             {
                 foreach (var node in nodes)
                 {
+                    if (node.Backend is Models.Branch)
+                        continue;
+                    
                     var path = prefix + "/" + node.Name;
-                    if (node.Type != BranchTreeNodeType.Branch && node.IsExpanded)
+                    if (node.IsExpanded)
                         _expanded.Add(path);
+                    
                     CollectExpandedNodes(node.Children, path);
                 }
             }
@@ -191,7 +134,6 @@ private void MakeBranchNode(Models.Branch branch, List<BranchTreeNode> roots, Di
                     roots.Add(new BranchTreeNode()
                     {
                         Name = branch.Name,
-                        Type = BranchTreeNodeType.Branch,
                         Backend = branch,
                         IsExpanded = false,
                         IsFiltered = isFiltered,
@@ -215,7 +157,6 @@ private void MakeBranchNode(Models.Branch branch, List<BranchTreeNode> roots, Di
                         lastFolder = new BranchTreeNode()
                         {
                             Name = name,
-                            Type = BranchTreeNodeType.Folder,
                             IsExpanded = bForceExpanded || branch.IsCurrent || _expanded.Contains(folder),
                         };
                         roots.Add(lastFolder);
@@ -226,7 +167,6 @@ private void MakeBranchNode(Models.Branch branch, List<BranchTreeNode> roots, Di
                         var cur = new BranchTreeNode()
                         {
                             Name = name,
-                            Type = BranchTreeNodeType.Folder,
                             IsExpanded = bForceExpanded || branch.IsCurrent || _expanded.Contains(folder),
                         };
                         lastFolder.Children.Add(cur);
@@ -238,10 +178,9 @@ private void MakeBranchNode(Models.Branch branch, List<BranchTreeNode> roots, Di
                     sepIdx = branch.Name.IndexOf('/', start);
                 }
 
-                lastFolder.Children.Add(new BranchTreeNode()
+                lastFolder?.Children.Add(new BranchTreeNode()
                 {
                     Name = Path.GetFileName(branch.Name),
-                    Type = branch.IsHead ? BranchTreeNodeType.DetachedHead : BranchTreeNodeType.Branch,
                     Backend = branch,
                     IsExpanded = false,
                     IsFiltered = isFiltered,
@@ -252,16 +191,13 @@ private void SortNodes(List<BranchTreeNode> nodes)
             {
                 nodes.Sort((l, r) =>
                 {
-                    if (l.Type == BranchTreeNodeType.DetachedHead)
-                    {
+                    if (l.Backend is Models.Branch { IsHead: true })
                         return -1;
-                    }
-                    if (l.Type == r.Type)
-                    {
-                        return l.Name.CompareTo(r.Name);
-                    }
 
-                    return (int)l.Type - (int)r.Type;
+                    if (l.Backend is Models.Branch)
+                        return r.Backend is Models.Branch ? string.Compare(l.Name, r.Name, StringComparison.Ordinal) : 1;
+                    
+                    return r.Backend is Models.Branch ? -1 : string.Compare(l.Name, r.Name, StringComparison.Ordinal);
                 });
 
                 foreach (var node in nodes)

src/ViewModels/Repository.cs

@@ -1905,7 +1905,7 @@ private BranchTreeNode.Builder BuildBranchTree(List<Models.Branch> branches, Lis
                         visibles.Add(b);
                 }
 
-                builder.Run(visibles, remotes, visibles.Count <= 20);
+                builder.Run(visibles, remotes, true);
             }
 
             return builder;

src/Views/BranchTree.axaml

@@ -0,0 +1,110 @@
+<UserControl 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:c="using:SourceGit.Converters"
+             xmlns:v="using:SourceGit.Views"
+             xmlns:vm="using:SourceGit.ViewModels"
+             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
+             x:Class="SourceGit.Views.BranchTree"
+             x:Name="ThisControl">
+  <DataGrid x:Name="BranchesPresenter"
+            ItemsSource="{Binding #ThisControl.Rows}"
+            Height="{Binding #ThisControl.Height}"
+            Background="Transparent"
+            RowHeight="24"
+            CanUserReorderColumns="False"
+            CanUserResizeColumns="False"
+            CanUserSortColumns="False"
+            HorizontalAlignment="Stretch"
+            HorizontalScrollBarVisibility="Disabled"
+            VerticalScrollBarVisibility="Auto"
+            HeadersVisibility="None"
+            SelectionChanged="OnNodesSelectionChanged"
+            ContextRequested="OnTreeContextRequested">
+    <DataGrid.Styles>
+      <Style Selector="DataGridRow" x:DataType="vm:BranchTreeNode">
+        <Setter Property="CornerRadius" Value="{Binding CornerRadius}" />
+      </Style>
+
+      <Style Selector="DataGridRow /template/ Border#RowBorder">
+        <Setter Property="ClipToBounds" Value="True" />
+      </Style>
+
+      <Style Selector="Grid.repository_leftpanel DataGridRow:pointerover /template/ Rectangle#BackgroundRectangle">
+        <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
+        <Setter Property="Opacity" Value=".5"/>
+      </Style>
+      <Style Selector="Grid.repository_leftpanel DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
+        <Setter Property="Fill" Value="{DynamicResource Brush.AccentHovered}" />
+        <Setter Property="Opacity" Value="1"/>
+      </Style>
+      <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected /template/ Rectangle#BackgroundRectangle">
+        <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
+        <Setter Property="Opacity" Value=".65"/>
+      </Style>
+      <Style Selector="Grid.repository_leftpanel:focus-within DataGridRow:selected:pointerover /template/ Rectangle#BackgroundRectangle">
+        <Setter Property="Fill" Value="{DynamicResource Brush.Accent}" />
+        <Setter Property="Opacity" Value=".8"/>
+      </Style>
+    </DataGrid.Styles>
+    
+    <DataGrid.Columns>
+      <DataGridTemplateColumn Width="*">
+        <DataGridTemplateColumn.CellTemplate>
+          <DataTemplate x:DataType="vm:BranchTreeNode">
+            <Grid Height="24"
+                  Margin="{Binding Depth, Converter={x:Static c:IntConverters.ToTreeMargin}}" 
+                  ColumnDefinitions="16,20,*,Auto,Auto" 
+                  Background="Transparent" 
+                  DoubleTapped="OnDoubleTappedBranchNode" 
+                  ToolTip.Tip="{Binding Tooltip}">
+              
+              <!-- Tree Expander -->
+              <ToggleButton Grid.Column="0" 
+                            Classes="tree_expander"
+                            Focusable="False"
+                            HorizontalAlignment="Center"
+                            IsChecked="{Binding IsExpanded}"
+                            IsHitTestVisible="False"
+                            IsVisible="{Binding !IsBranch}"/>
+              
+              <!-- Icon -->
+              <v:BranchTreeNodeIcon Grid.Column="1"
+                                    Node="{Binding}"
+                                    IsExpanded="{Binding IsExpanded}"/>
+
+              <!-- Name -->
+              <TextBlock Grid.Column="2"
+                         Text="{Binding Name}"
+                         Classes="monospace"
+                         FontWeight="{Binding NameFontWeight}"/>
+              
+              <!-- Tracking status -->
+              <Border Grid.Column="3" 
+                      Margin="8,0" 
+                      Height="18" 
+                      CornerRadius="9" 
+                      VerticalAlignment="Center" 
+                      Background="{DynamicResource Brush.Badge}" 
+                      IsVisible="{Binding IsUpstreamTrackStatusVisible}">
+                <TextBlock Classes="monospace" FontSize="10" HorizontalAlignment="Center" Margin="9,0" Text="{Binding UpstreamTrackStatus}" Foreground="{DynamicResource Brush.BadgeFG}"/>
+              </Border>
+
+              <!-- Filter Toggle Button -->
+              <ToggleButton Grid.Column="4"
+                            Classes="filter"
+                            Margin="0,0,8,0"
+                            Background="Transparent"
+                            IsCheckedChanged="OnToggleFilter"
+                            IsVisible="{Binding IsBranch}"
+                            IsChecked="{Binding IsFiltered}"
+                            ToolTip.Tip="{DynamicResource Text.Filter}"/>
+            </Grid>
+          </DataTemplate>
+        </DataGridTemplateColumn.CellTemplate>
+      </DataGridTemplateColumn>
+    </DataGrid.Columns>
+  </DataGrid>
+</UserControl>
+