WIP Virtual tree view

martin-strecker-sonarsource · Dec 21, 2023 · 5531a75 · 5531a75
1 parent e4f075e
commit 5531a75
Show file tree

Hide file tree

Showing 3 changed files with 171 additions and 2 deletions.
diff --git a/ProtoBufViewer.Blazor/Components/VirtualTreeView.razor b/ProtoBufViewer.Blazor/Components/VirtualTreeView.razor
@@ -0,0 +1,101 @@
+@inherits ComponentBase
+@typeparam T
+
+
+<ul style="flex-shrink:0">
+    <Virtualize Items="viewList" ItemSize="50" Context="viewListItem">
+        <li @key="@viewListItem" style="height:50px; flex-shrink:0; margin-left:@(viewListItem.level * 48)pt;">
+            @if (ChildrenSelector?.Invoke(viewListItem.item)?.Count > 0)
+            {
+                <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" OnClick="() => OnClick(viewListItem)" />
+            }
+            @if (ItemTemplate == null)
+            {
+                @viewListItem.item
+            }
+            else
+            {
+                @ItemTemplate(viewListItem.item)
+            }
+        </li>
+    </Virtualize>
+</ul>
+
+
+@code {
+    [Parameter]
+    public RenderFragment<T>? ItemTemplate { get; set; }
+
+    [Parameter]
+    public IReadOnlyCollection<T>? Items { get; set; }
+
+    [Parameter]
+    public Func<T, IReadOnlyCollection<T>>? ChildrenSelector { get; set; }
+
+
+    private List<(T item, bool isExpanded, int level)> viewList = new();
+
+    protected override void OnParametersSet()
+    {
+        base.OnParametersSet();
+        SynchronizeViewList();
+    }
+
+    private void SynchronizeViewList()
+    {
+        if (Items is { } items)
+        {
+            viewList.Clear();
+            viewList.AddRange(items.Select(x => (x, false, 0)));
+        }
+    }
+
+    private void OnClick((T item, bool isExpanded, int level) item)
+    {
+        var current = Items;
+        var viewListIndex = 0;
+        IterateCurrent(Items ?? []);
+
+        bool IterateCurrent(IReadOnlyCollection<T> current)
+        {
+            foreach (var currentItem in current)
+            {
+                var currentViewItem = viewList[viewListIndex];
+                if (!EqualityComparer<T>.Default.Equals(currentItem, currentViewItem.item))
+                {
+                    SynchronizeViewList();
+                    return false;
+                }
+                else if (EqualityComparer<T>.Default.Equals(currentItem, item.item))
+                {
+                    var newIsExpanded = !item.isExpanded;
+                    viewList[viewListIndex] = item with { isExpanded = newIsExpanded };
+                    var children = ChildrenSelector?.Invoke(currentItem) ?? [];
+                    if (newIsExpanded)
+                    {
+                        viewList.InsertRange(viewListIndex + 1, children.Select(x => (x, false, item.level + 1)));
+                    }
+                    else
+                    {
+                        viewList.RemoveRange(viewListIndex +1, children.Count);
+                    }
+                    return false;
+                }
+                else
+                {
+                    viewListIndex++;
+                    if (currentViewItem.isExpanded)
+                    {
+                        var children = ChildrenSelector?.Invoke(currentItem) ?? [];
+                        var doContinue = IterateCurrent(children);
+                        if (!doContinue)
+                        {
+                            return doContinue;
+                        }
+                    }
+                }
+            }
+            return true;
+        }
+    }
+}
diff --git a/ProtoBufViewer.Blazor/Pages/Index.razor b/ProtoBufViewer.Blazor/Pages/Index.razor
@@ -81,8 +81,75 @@
                 </ButtonTemplate>
             </MudFileUpload>
         }
-
-        <MudTreeView T="ProtoType" Items="TypedMessages" Context="typedValue">
+        <VirtualTreeView T="ProtoType" Items="TypedMessages" ChildrenSelector="x => x switch {
+            TypedMessage message => message.Fields,
+            TypedField { Value: TypedMessage message } => message.Fields,
+            _ => []
+            }">
+            <ItemTemplate>
+                @switch (context)
+                {
+                    case TypedMessage message:
+                        @message.MessageType
+                        break;
+                    case TypedField field:
+                        <b>@field.Name:&nbsp;</b>
+                        @switch (field.Value)
+                        {
+                            case TypedFloat x:
+                                @x.Value
+                                break;
+                            case TypedInt32 x:
+                                @x.Value
+                                break;
+                            case TypedInt64 x:
+                                @x.Value
+                                break;
+                            case TypedUint32 x:
+                                @x.Value
+                                break;
+                            case TypedUint64 x:
+                                @x.Value
+                                break;
+                            case TypedSint32 x:
+                                @x.Value
+                                break;
+                            case TypedSint64 x:
+                                @x.Value
+                                break;
+                            case TypedFixed32 x:
+                                @x.Value
+                                break;
+                            case TypedFixed64 x:
+                                @x.Value
+                                break;
+                            case TypedSfixed32 x:
+                                @x.Value
+                                break;
+                            case TypedSfixed64 x:
+                                @x.Value
+                                break;
+                            case TypedBool x:
+                                @x.Value
+                                break;
+                            case TypedString x:
+                                @x.Value
+                                break;
+                            case TypedBytes x:
+                                @x.Value
+                                break;
+                            case TypedUnknown x:
+                                @x.Value
+                                break;
+                            case TypedEnum x:
+                                @x.EnumValue
+                                break;
+                        }
+                        break;
+                }
+            </ItemTemplate>
+        </VirtualTreeView>
+        <MudTreeView T="ProtoType" Context="typedValue">
             <ItemTemplate>
                 @switch (typedValue)
                 {

diff --git a/ProtoBufViewer.Blazor/_Imports.razor b/ProtoBufViewer.Blazor/_Imports.razor
@@ -9,3 +9,4 @@
 @using MudBlazor
 @using ProtoBufViewer.Blazor
 @using ProtoBufViewer.Blazor.Shared
+@using ProtoBufViewer.Blazor.Components