GoaLitiuM/FlaxEngine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add highlighting to layers matrix editor to improve UX

Browse Source
This commit is contained in:
Zode
2025-06-07 16:57:28 +03:00
committed by GitHub
parent eee4e55cf0
commit 6ee3b23261
1 changed files with 70 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
Source/Editor/CustomEditors/Dedicated/LayersMatrixEditor.cs
View File

@@ -16,6 +16,11 @@ namespace FlaxEditor.CustomEditors.Dedicated
{ {
private int _layersCount; private int _layersCount;
private List<CheckBox> _checkBoxes; private List<CheckBox> _checkBoxes;
private VerticalPanel _upperRightCell;
private VerticalPanel _bottomLeftCell;
private UniformGridPanel _grid;
private Border _horizontalHighlight;
private Border _verticalHighlight;
/// <inheritdoc /> /// <inheritdoc />
public override DisplayStyle Style => DisplayStyle.InlineIntoParent; public override DisplayStyle Style => DisplayStyle.InlineIntoParent;
@@ -37,12 +42,29 @@ namespace FlaxEditor.CustomEditors.Dedicated
Parent = panel, Parent = panel,
}; };
var style = FlaxEngine.GUI.Style.Current;
_horizontalHighlight = new Border()
{
Parent = panel,
BorderColor = style.Foreground,
BorderWidth = 1.0f,
Visible = false,
};
_verticalHighlight = new Border()
{
Parent = panel,
BorderColor = style.Foreground,
BorderWidth = 1.0f,
Visible = false,
};
var upperLeftCell = new Label var upperLeftCell = new Label
{ {
Parent = gridPanel, Parent = gridPanel,
}; };
var upperRightCell = new VerticalPanel _upperRightCell = new VerticalPanel
{ {
ClipChildren = false, ClipChildren = false,
Pivot = new Float2(0.00001f, 0.0f), Pivot = new Float2(0.00001f, 0.0f),
@@ -54,7 +76,7 @@ namespace FlaxEditor.CustomEditors.Dedicated
Parent = gridPanel, Parent = gridPanel,
}; };
var bottomLeftCell = new VerticalPanel _bottomLeftCell = new VerticalPanel
{ {
Pivot = Float2.Zero, Pivot = Float2.Zero,
Spacing = 0, Spacing = 0,
@@ -63,7 +85,7 @@ namespace FlaxEditor.CustomEditors.Dedicated
Parent = gridPanel, Parent = gridPanel,
}; };
var grid = new UniformGridPanel(0) _grid = new UniformGridPanel(0)
{ {
SlotsHorizontally = layersCount, SlotsHorizontally = layersCount,
SlotsVertically = layersCount, SlotsVertically = layersCount,
@@ -74,13 +96,13 @@ namespace FlaxEditor.CustomEditors.Dedicated
int layerIndex = 0; int layerIndex = 0;
for (; layerIndex < layerNames.Length; layerIndex++) for (; layerIndex < layerNames.Length; layerIndex++)
{ {
upperRightCell.AddChild(new Label _upperRightCell.AddChild(new Label
{ {
Height = labelsHeight, Height = labelsHeight,
Text = layerNames[layerNames.Length - layerIndex - 1], Text = layerNames[layerNames.Length - layerIndex - 1],
HorizontalAlignment = TextAlignment.Near, HorizontalAlignment = TextAlignment.Near,
}); });
bottomLeftCell.AddChild(new Label _bottomLeftCell.AddChild(new Label
{ {
Height = labelsHeight, Height = labelsHeight,
Text = layerNames[layerIndex], Text = layerNames[layerIndex],
@@ -90,13 +112,13 @@ namespace FlaxEditor.CustomEditors.Dedicated
for (; layerIndex < layersCount; layerIndex++) for (; layerIndex < layersCount; layerIndex++)
{ {
string name = "Layer " + layerIndex; string name = "Layer " + layerIndex;
upperRightCell.AddChild(new Label _upperRightCell.AddChild(new Label
{ {
Height = labelsHeight, Height = labelsHeight,
Text = name, Text = name,
HorizontalAlignment = TextAlignment.Near, HorizontalAlignment = TextAlignment.Near,
}); });
bottomLeftCell.AddChild(new Label _bottomLeftCell.AddChild(new Label
{ {
Height = labelsHeight, Height = labelsHeight,
Text = name, Text = name,
@@ -118,7 +140,7 @@ namespace FlaxEditor.CustomEditors.Dedicated
var box = new CheckBox(0, 0, true) var box = new CheckBox(0, 0, true)
{ {
Tag = new Float2(_layersCount - column - 1, row), Tag = new Float2(_layersCount - column - 1, row),
Parent = grid, Parent = _grid,
Checked = GetBit(column, row), Checked = GetBit(column, row),
}; };
box.StateChanged += OnCheckBoxChanged; box.StateChanged += OnCheckBoxChanged;
@@ -126,7 +148,7 @@ namespace FlaxEditor.CustomEditors.Dedicated
} }
for (; column < layersCount; column++) for (; column < layersCount; column++)
{ {
grid.AddChild(new Label()); _grid.AddChild(new Label());
} }
} }
} }
@@ -141,6 +163,12 @@ namespace FlaxEditor.CustomEditors.Dedicated
/// <inheritdoc /> /// <inheritdoc />
public override void Refresh() public override void Refresh()
{ {
_horizontalHighlight.Visible = false;
_verticalHighlight.Visible = false;
int selectedColumn = -1;
int selectedRow = -1;
var style = FlaxEngine.GUI.Style.Current;
// Sync check boxes // Sync check boxes
for (int i = 0; i < _checkBoxes.Count; i++) for (int i = 0; i < _checkBoxes.Count; i++)
{ {
@@ -148,6 +176,39 @@ namespace FlaxEditor.CustomEditors.Dedicated
int column = (int)((Float2)box.Tag).X; int column = (int)((Float2)box.Tag).X;
int row = (int)((Float2)box.Tag).Y; int row = (int)((Float2)box.Tag).Y;
box.Checked = GetBit(column, row); box.Checked = GetBit(column, row);
box.ImageColor = style.BorderSelected * 1.2f;
if(box.IsMouseOver)
{
selectedColumn = column;
selectedRow = row;
_horizontalHighlight.X = _grid.X - _bottomLeftCell.Width;
_horizontalHighlight.Y = _grid.Y + box.Y;
_horizontalHighlight.Width = _bottomLeftCell.Width + box.Width + box.X;
_horizontalHighlight.Height = box.Height;
_horizontalHighlight.Visible = true;
_verticalHighlight.X = _grid.X + box.X;
_verticalHighlight.Y = _grid.Y - _upperRightCell.Height;
_verticalHighlight.Width = box.Width;
_verticalHighlight.Height = _upperRightCell.Height + box.Height + box.Y;
_verticalHighlight.Visible = true;
}
}
if(selectedColumn > -1 && selectedRow > -1)
{
for (int i = 0; i < _checkBoxes.Count; i++)
{
var box = _checkBoxes[i];
int column = (int)((Float2)box.Tag).X;
int row = (int)((Float2)box.Tag).Y;
if(column == selectedColumn || row == selectedRow)
continue;
box.ImageColor = style.BorderSelected * 0.75f;
}
} }
} }