tommy/tbd-station-14
2
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add fancy tree control (#13426)

Browse Source 
* Add fancy tree control

* inject dependencies
This commit is contained in:
Leon Friedrich
2023-01-16 19:45:46 +13:00
committed by GitHub
parent aacdb2ad0c
commit 4102c9cf7c
11 changed files with 626 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Content.Client/UserInterface/Controls/FancyTree/FancyTree.xaml Normal file
View File

@@ -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>

282
Content.Client/UserInterface/Controls/FancyTree/FancyTree.xaml.cs Normal file
View File

@@ -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();
}
}

14
Content.Client/UserInterface/Controls/FancyTree/TreeItem.xaml Normal file
View File

@@ -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>

92
Content.Client/UserInterface/Controls/FancyTree/TreeItem.xaml.cs Normal file
View File

@@ -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;
}
}

61
Content.Client/UserInterface/Controls/FancyTree/TreeLine.cs Normal file
View File

@@ -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);
}
}
}