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

34
Content.Client/Stylesheets/StyleNano.cs
View File

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

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

BIN
Resources/Textures/Interface/Nano/triangle_right.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 252 B

3
Resources/Textures/Interface/Nano/triangle_right.png.yml Normal file
View File

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

132
Resources/Textures/Interface/Nano/triangle_right_hollow.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
Resources/Textures/Interface/Nano/triangle_right_hollow.svg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 209 B

2
Resources/Textures/Interface/Nano/triangle_right_hollow.svg.png.yml Normal file
View File

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