Add fancy tree control (#13426)

* Add fancy tree control

* inject dependencies

Content.Client/Stylesheets/StyleNano.cs

@@ -113,6 +113,11 @@ namespace Content.Client.Stylesheets
         public static readonly Color ExamineButtonColorContextPressed = Color.LightSlateGray;
         public static readonly Color ExamineButtonColorContextDisabled = Color.FromHex("#5A5A5A");
 
+        // Fancy Tree elements
+        public static readonly Color FancyTreeEvenRowColor = Color.FromHex("#25252A");
+        public static readonly Color FancyTreeOddRowColor = FancyTreeEvenRowColor * new Color(0.8f, 0.8f, 0.8f);
+        public static readonly Color FancyTreeSelectedRowColor = new Color(55, 55, 68);
+
         //Used by the APC and SMES menus
         public const string StyleClassPowerStateNone = "PowerStateNone";
         public const string StyleClassPowerStateLow = "PowerStateLow";
@@ -1408,6 +1413,35 @@ namespace Content.Client.Stylesheets
                     .Prop(Label.StylePropertyFont, notoSans10)
                     .Prop(Label.StylePropertyFontColor, Color.FromHex("#333d3b")),
 
+                // Fancy Tree
+                Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
+                    .Class(TreeItem.StyleClassEvenRow)
+                    .Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
+                    {
+                        BackgroundColor = FancyTreeEvenRowColor,
+                    }),
+
+                Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
+                    .Class(TreeItem.StyleClassOddRow)
+                    .Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
+                    {
+                        BackgroundColor = FancyTreeOddRowColor,
+                    }),
+
+                Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
+                    .Class(TreeItem.StyleClassSelected)
+                    .Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
+                    {
+                        BackgroundColor = FancyTreeSelectedRowColor,
+                    }),
+
+                Element<ContainerButton>().Identifier(TreeItem.StyleIdentifierTreeButton)
+                    .Pseudo(ContainerButton.StylePseudoClassHover)
+                    .Prop(ContainerButton.StylePropertyStyleBox, new StyleBoxFlat
+                    {
+                        BackgroundColor = FancyTreeSelectedRowColor,
+                    }),
+
             }).ToList());
         }
     }

Content.Client/UserInterface/Controls/FancyTree/FancyTree.xaml

@@ -0,0 +1,6 @@
+<controls:FancyTree xmlns="https://spacestation14.io"
+                    xmlns:controls="clr-namespace:Content.Client.UserInterface.Controls">
+    <ScrollContainer ReturnMeasure="True">
+        <BoxContainer Orientation="Vertical" Name="Body" Access="Public" Margin="2"/>
+    </ScrollContainer>
+</controls:FancyTree>

Content.Client/UserInterface/Controls/FancyTree/FancyTree.xaml.cs

@@ -0,0 +1,282 @@
+using Content.Client.Resources;
+using Robust.Client.AutoGenerated;
+using Robust.Client.Graphics;
+using Robust.Client.ResourceManagement;
+using Robust.Client.UserInterface;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
+using Robust.Shared.Timing;
+using Robust.Shared.Utility;
+
+namespace Content.Client.UserInterface.Controls;
+
+/// <summary>
+///     Functionally similar to <see cref="Tree"/>, but with collapsible sections, 
+/// </summary>
+[GenerateTypedNameReferences]
+public sealed partial class FancyTree : Control
+{
+    [Dependency] private readonly IResourceCache _resCache = default!;
+
+    public const string StylePropertyLineWidth = "LineWidth";
+    public const string StylePropertyLineColor = "LineColor";
+    public const string StylePropertyIconColor = "IconColor";
+    public const string StylePropertyIconExpanded = "IconExpanded";
+    public const string StylePropertyIconCollapsed = "IconCollapsed";
+    public const string StylePropertyIconNoChildren = "IconNoChildren";
+
+    public readonly List<TreeItem> Items = new();
+
+    public event Action<TreeItem?>? OnSelectedItemChanged;
+
+    public int? SelectedIndex { get; private set; }
+
+    private bool _rowStyleUpdateQueued = true;
+
+    /// <summary>
+    ///     Whether or not to draw the lines connecting parents & children.
+    /// </summary>
+    public bool DrawLines = true;
+
+    /// <summary>
+    ///     Colour of the lines connecting parents & their child entries.
+    /// </summary>
+    public Color LineColor = Color.White;
+
+    /// <summary>
+    ///     Color used to modulate the icon textures.
+    /// </summary>
+    public Color IconColor = Color.White;
+
+    /// <summary>
+    ///     Width of the lines connecting parents & their child entries.
+    /// </summary>
+    public int LineWidth = 2;
+
+    // If people ever want to customize this, this should be a style parameter/
+    public const int Indentation = 16;
+
+    public const string DefaultIconExpanded = "/Textures/Interface/Nano/inverted_triangle.svg.png";
+    public const string DefaultIconCollapsed = "/Textures/Interface/Nano/triangle_right.png";
+    public const string DefaultIconNoChildren = "/Textures/Interface/Nano/triangle_right_hollow.svg.png";
+
+    public Texture? IconExpanded;
+    public Texture? IconCollapsed;
+    public Texture? IconNoChildren;
+
+    /// <summary>
+    ///     If true, tree entries will hide their icon if the texture is set to null. If the icon is hidden then the
+    ///     text of that entry will no longer be aligned with sibling entries that do have an icon.
+    /// </summary>
+    public bool HideEmptyIcon
+    {
+        get => _hideEmptyIcon;
+        set => SetHideEmptyIcon(value);
+    }
+    private bool _hideEmptyIcon;
+
+    public TreeItem? SelectedItem => SelectedIndex == null ? null : Items[SelectedIndex.Value];
+
+    /// <summary>
+    ///     If true, a collapsed item will automatically expand when first selected. If false, it has to be manually expanded by
+    ///     clicking on it a second time.
+    /// </summary>
+    public bool AutoExpand = true;
+
+    public FancyTree()
+    {
+        RobustXamlLoader.Load(this);
+        IoCManager.InjectDependencies(this);
+        LoadIcons();
+    }
+
+    private void LoadIcons()
+    {
+        IconColor = TryGetStyleProperty(StylePropertyIconColor, out Color color) ? color : Color.White;
+        string? path;
+
+        if (!TryGetStyleProperty(StylePropertyIconExpanded, out IconExpanded))
+            IconExpanded = _resCache.GetTexture(DefaultIconExpanded);
+
+        if (!TryGetStyleProperty(StylePropertyIconCollapsed, out IconCollapsed))
+            IconCollapsed = _resCache.GetTexture(DefaultIconCollapsed);
+
+        if (!TryGetStyleProperty(StylePropertyIconNoChildren, out IconNoChildren))
+            IconNoChildren = _resCache.GetTexture(DefaultIconNoChildren);
+
+        foreach (var item in Body.Children)
+        {
+            RecursiveUpdateIcon((TreeItem) item);
+        }
+    }
+
+    public TreeItem AddItem(TreeItem? parent = null)
+    {
+        if (parent != null)
+        {
+            if (parent.Tree != this)
+                throw new ArgumentException("Parent must be owned by this tree.", nameof(parent));
+
+            DebugTools.Assert(Items[parent.Index] == parent);
+        }
+
+        var item = new TreeItem()
+        {
+            Tree = this,
+            Index = Items.Count,
+        };
+
+        Items.Add(item);
+        item.Icon.SetSize = (Indentation, Indentation);
+        item.Button.OnPressed += (_) => OnPressed(item);
+
+        if (parent == null)
+            Body.AddChild(item);
+        else
+        {
+            item.Padding.MinWidth = parent.Padding.MinWidth + Indentation;
+            parent.Body.AddChild(item);
+        }
+
+        item.UpdateIcon();
+        QueueRowStyleUpdate();
+        return item;
+    }
+
+    private void OnPressed(TreeItem item)
+    {
+        if (SelectedIndex == item.Index)
+        {
+            item.SetExpanded(!item.Expanded);
+            return;
+        }
+
+        SetSelectedIndex(item.Index);
+    }
+
+    public void SetSelectedIndex(int? value)
+    {
+        if (value == null || value < 0 || value >= Items.Count)
+            value = null;
+
+        if (SelectedIndex == value)
+            return;
+
+        SelectedItem?.SetSelected(false);
+        SelectedIndex = value;
+
+        var newSelection = SelectedItem;
+        if (newSelection != null)
+        {
+            newSelection.SetSelected(true);
+            if (AutoExpand && !newSelection.Expanded)
+                newSelection.SetExpanded(true);
+        }
+
+        OnSelectedItemChanged?.Invoke(newSelection);
+    }
+
+    public void SetAllExpanded(bool value)
+    {
+        foreach (var item in Body.Children)
+        {
+            RecursiveSetExpanded((TreeItem) item, value);
+        }
+    }
+
+    public void RecursiveSetExpanded(TreeItem item, bool value)
+    {
+        item.SetExpanded(value);
+        foreach (var child in item.Body.Children)
+        {
+            RecursiveSetExpanded((TreeItem) child, value);
+        }
+    }
+
+    public void Clear()
+    {
+        foreach (var item in Items)
+        {
+            item.Dispose();
+        }
+
+        Items.Clear();
+        Body.Children.Clear();
+        SelectedIndex = null;
+    }
+
+    public void QueueRowStyleUpdate()
+    {
+        _rowStyleUpdateQueued = true;
+    }
+
+    protected override void FrameUpdate(FrameEventArgs args)
+    {
+        if (!_rowStyleUpdateQueued)
+            return;
+
+        _rowStyleUpdateQueued = false;
+
+        int index = 0;
+
+        foreach (var item in Body.Children)
+        {
+            RecursivelyUpdateRowStyle((TreeItem) item, ref index);
+        }
+    }
+
+    private void RecursivelyUpdateRowStyle(TreeItem item, ref int index)
+    {
+        if (int.IsOddInteger(index))
+        {
+            item.Button.RemoveStyleClass(TreeItem.StyleClassEvenRow);
+            item.Button.AddStyleClass(TreeItem.StyleClassOddRow);
+        }
+        else
+        {
+            item.Button.AddStyleClass(TreeItem.StyleClassEvenRow);
+            item.Button.RemoveStyleClass(TreeItem.StyleClassOddRow);
+        }
+
+        index++;
+
+        if (!item.Expanded)
+            return;
+
+        foreach (var child in item.Body.Children)
+        {
+            RecursivelyUpdateRowStyle((TreeItem) child, ref index);
+        }
+    }
+
+    private void SetHideEmptyIcon(bool value)
+    {
+        if (value == _hideEmptyIcon)
+            return;
+
+        _hideEmptyIcon = value;
+
+        foreach (var item in Body.Children)
+        {
+            RecursiveUpdateIcon((TreeItem) item);
+        }
+    }
+
+    private void RecursiveUpdateIcon(TreeItem item)
+    {
+        item.UpdateIcon();
+
+        foreach (var child in item.Body.Children)
+        {
+            RecursiveUpdateIcon((TreeItem) child);
+        }
+    }
+
+    protected override void StylePropertiesChanged()
+    {
+        LoadIcons();
+        LineColor = TryGetStyleProperty(StylePropertyLineColor, out Color color) ? color: Color.White;
+        LineWidth = TryGetStyleProperty(StylePropertyLineWidth, out int width) ? width : 2;
+        base.StylePropertiesChanged();
+    }
+}

Content.Client/UserInterface/Controls/FancyTree/TreeItem.xaml

@@ -0,0 +1,14 @@
+<controls:TreeItem xmlns="https://spacestation14.io"
+                   xmlns:controls="clr-namespace:Content.Client.UserInterface.Controls">
+    <BoxContainer Orientation="Vertical">
+        <ContainerButton Name="Button" Access="Public">
+            <BoxContainer Orientation="Horizontal">
+                <Control Name="Padding" Access="Public"/>
+                <TextureRect Name="Icon" Access="Public" Stretch="KeepCentered" Visible="False"/>
+                <Label Margin="2 0 2 0" Name="Label" Access="Public"/>
+            </BoxContainer>
+        </ContainerButton>
+        <BoxContainer Name="Body" Access="Public" Orientation="Vertical" Visible="False"/>
+    </BoxContainer>
+    <controls:TreeLine/>
+</controls:TreeItem>

Content.Client/UserInterface/Controls/FancyTree/TreeItem.xaml.cs

@@ -0,0 +1,92 @@
+using Robust.Client.AutoGenerated;
+using Robust.Client.UserInterface;
+using Robust.Client.UserInterface.Controls;
+using Robust.Client.UserInterface.XAML;
+
+namespace Content.Client.UserInterface.Controls;
+
+/// <summary>
+///     Element of a <see cref="FancyTree"/>
+/// </summary>
+[GenerateTypedNameReferences]
+public sealed partial class TreeItem : PanelContainer
+{
+    public const string StyleClassSelected = "selected";
+    public const string StyleIdentifierTreeButton = "tree-button";
+    public const string StyleClassEvenRow = "even-row";
+    public const string StyleClassOddRow = "odd-row";
+
+    public object? Metadata;
+    public int Index;
+    public FancyTree Tree = default!;
+    public event Action<TreeItem>? OnSelected;
+    public event Action<TreeItem>? OnDeselected;
+
+    public bool Expanded { get; private set; } = false;
+
+    public TreeItem()
+    {
+        RobustXamlLoader.Load(this);
+        Button.StyleIdentifier = StyleIdentifierTreeButton;
+        Body.OnChildAdded += OnItemAdded;
+        Body.OnChildRemoved += OnItemRemoved;
+    }
+
+    private void OnItemRemoved(Control obj)
+    {
+        Tree.QueueRowStyleUpdate();
+
+        if (Body.ChildCount == 0)
+        {
+            Body.Visible = false;
+            UpdateIcon();
+        }
+    }
+
+    private void OnItemAdded(Control obj)
+    {
+        Tree.QueueRowStyleUpdate();
+
+        if (Body.ChildCount == 1)
+        {
+            Body.Visible = Expanded && Body.ChildCount != 0;
+            UpdateIcon();
+        }
+    }
+
+    public void SetExpanded(bool value)
+    {
+        if (Expanded == value)
+            return;
+
+        Expanded = value;
+        Body.Visible = Expanded && Body.ChildCount > 0;
+        UpdateIcon();
+        Tree.QueueRowStyleUpdate();
+    }
+
+    public void SetSelected(bool value)
+    {
+        if (value)
+        {
+            OnSelected?.Invoke(this);
+            Button.AddStyleClass(StyleClassSelected);
+        }
+        else
+        {
+            OnDeselected?.Invoke(this);
+            Button.RemoveStyleClass(StyleClassSelected);
+        }
+    }
+
+    public void UpdateIcon()
+    {
+        if (Body.ChildCount == 0)
+            Icon.Texture = Tree.IconNoChildren;
+        else
+            Icon.Texture = Expanded ? Tree.IconExpanded : Tree.IconCollapsed;
+
+        Icon.Modulate = Tree.IconColor;
+        Icon.Visible = Icon.Texture != null || !Tree.HideEmptyIcon;
+    }
+}

Content.Client/UserInterface/Controls/FancyTree/TreeLine.cs

@@ -0,0 +1,61 @@
+using Robust.Client.Graphics;
+using Robust.Client.UserInterface;
+using Robust.Shared.Utility;
+
+namespace Content.Client.UserInterface.Controls;
+
+/// <summary>
+///     This is a basic control that draws the lines connecting parents & children in a tree.
+/// </summary>
+/// <remarks>
+///     Ideally this would just be a draw method in <see cref="TreeItem"/>, but sadly the draw override gets called BEFORE children are drawn.
+/// </remarks>
+public sealed class TreeLine : Control
+{
+    protected override void Draw(DrawingHandleScreen handle)
+    {
+        base.Draw(handle);
+
+        // This is basically just a shitty hack to call Draw() after children get drawn.
+        if (Parent is not TreeItem parent)
+            return;
+
+        if (!parent.Expanded || !parent.Tree.DrawLines || parent.Body.ChildCount == 0)
+            return;
+
+        var width = Math.Max(1, (int) (parent.Tree.LineWidth * UIScale));
+        var w1 = width / 2;
+        var w2 = width - w1;
+
+        var global = parent.GlobalPixelPosition;
+
+        var iconPos = parent.Icon.GlobalPixelPosition - global;
+        var iconSize = parent.Icon.PixelSize;
+        var x = iconPos.X + iconSize.X / 2;
+        DebugTools.Assert(parent.Icon.Visible);
+
+        var buttonPos = parent.Button.GlobalPixelPosition - global;
+        var buttonSize = parent.Button.PixelSize;
+        var y1 = buttonPos.Y + buttonSize.Y;
+
+        var lastItem = (TreeItem) parent.Body.GetChild(parent.Body.ChildCount - 1);
+
+        var childPos = lastItem.Button.GlobalPixelPosition - global;
+        var y2 = childPos.Y + lastItem.Button.PixelSize.Y / 2;
+
+        // Vertical line
+        var rect = new UIBox2i((x - w1, y1), (x + w2, y2));
+        handle.DrawRect(rect, parent.Tree.LineColor);
+
+        // Horizontal lines
+        var dx = Math.Max(1, (int) (FancyTree.Indentation * UIScale / 2));
+        foreach (var child in parent.Body.Children)
+        {
+            var item = (TreeItem) child;
+            var pos = item.Button.GlobalPixelPosition - global;
+            var y = pos.Y + item.Button.PixelSize.Y / 2;
+            rect = new UIBox2i((x - w1, y - w1), (x + dx, y + w2));
+            handle.DrawRect(rect, parent.Tree.LineColor);
+        }
+    }
+}

Resources/Textures/Interface/Nano/triangle_right.png.yml

@@ -0,0 +1,3 @@
+sample:
+  filter: true
+# for .svg, see inverted_triangle.svg.

Resources/Textures/Interface/Nano/triangle_right_hollow.svg

@@ -0,0 +1,132 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="8"
+   height="12"
+   viewBox="0 0 8.0000001 12"
+   version="1.1"
+   id="svg5650"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="triangle-right-hollow.svg"
+   inkscape:export-filename="H:\Code\GitHub\space-station-14\Resources\Nano\inverted_triangle.svg.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:dc="http://purl.org/dc/elements/1.1/">
+  <defs
+     id="defs5644">
+    <clipPath
+       clipPathUnits="userSpaceOnUse"
+       id="clipPath1632">
+      <use
+         x="0"
+         y="0"
+         xlink:href="#g1628"
+         id="use1634"
+         width="100%"
+         height="100%" />
+    </clipPath>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="64"
+     inkscape:cx="5.1875"
+     inkscape:cy="7.0703125"
+     inkscape:document-units="px"
+     inkscape:current-layer="g1628"
+     showgrid="false"
+     inkscape:snap-global="false"
+     inkscape:snap-bbox="true"
+     inkscape:snap-page="true"
+     inkscape:pagecheckerboard="true"
+     inkscape:window-width="2560"
+     inkscape:window-height="1417"
+     inkscape:window-x="1072"
+     inkscape:window-y="473"
+     inkscape:window-maximized="1"
+     units="px"
+     fit-margin-top="0"
+     fit-margin-left="0"
+     fit-margin-right="0"
+     fit-margin-bottom="0" />
+  <metadata
+     id="metadata5647">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     style="display:inline;opacity:1"
+     transform="translate(-4.3434788,-292.73773)">
+    <g
+       id="g1630"
+       clip-path="url(#clipPath1632)"
+       style="display:inline"
+       inkscape:label="g1630">
+      <g
+         inkscape:label="Clip"
+         id="g1628">
+        <path
+           sodipodi:type="star"
+           style="display:inline;fill:#fffcff;fill-opacity:0;stroke:#ffffff;stroke-width:3.629;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+           id="path6203"
+           sodipodi:sides="3"
+           sodipodi:cx="10.316734"
+           sodipodi:cy="291.04364"
+           sodipodi:r1="8.2837381"
+           sodipodi:r2="4.1418691"
+           sodipodi:arg1="0.52359878"
+           sodipodi:arg2="1.5707963"
+           inkscape:flatsided="true"
+           inkscape:rounded="0"
+           inkscape:randomized="0"
+           d="m 17.490662,295.18551 -14.3478554,0 7.1739274,-12.42561 z"
+           inkscape:transform-center-y="-3.0052336e-06"
+           transform="matrix(0,-0.83636193,-0.64383171,0,194.39327,307.36625)"
+           inkscape:export-xdpi="96"
+           inkscape:export-ydpi="96"
+           inkscape:transform-center-x="-1.3333263" />
+      </g>
+    </g>
+    <path
+       sodipodi:type="star"
+       style="display:inline;fill:#fffcff;fill-opacity:0;stroke:none;stroke-width:3.629;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+       id="path1012"
+       sodipodi:sides="3"
+       sodipodi:cx="10.316734"
+       sodipodi:cy="291.04364"
+       sodipodi:r1="8.2837381"
+       sodipodi:r2="4.1418691"
+       sodipodi:arg1="0.52359878"
+       sodipodi:arg2="1.5707963"
+       inkscape:flatsided="true"
+       inkscape:rounded="0"
+       inkscape:randomized="0"
+       d="m 17.490662,295.18551 -14.3478554,0 7.1739274,-12.42561 z"
+       inkscape:transform-center-y="-3.0052336e-06"
+       transform="matrix(0,-0.83636193,-0.64383171,0,194.39327,307.36625)"
+       inkscape:export-xdpi="96"
+       inkscape:export-ydpi="96"
+       inkscape:transform-center-x="-1.3333263" />
+  </g>
+</svg>

Resources/Textures/Interface/Nano/triangle_right_hollow.svg.png.yml

@@ -0,0 +1,2 @@
+sample:
+  filter: true