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

improve visject graph readability

Browse Source 
- Separate size for boxes (the circle thingie to connect to) and box rows
- Smaller boxes (circle thingie)
- Smaller footer
- Smaller and color header
- Left align header text
- Replace background with solid color
- Adjust node `ArchetypeColor`s (former `FooterColor`) to keep header title readable over colored header
This commit is contained in:
Saas
2025-12-17 18:54:37 +01:00
parent e257f9e4a0
commit b714668f4c
11 changed files with 56 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
Source/Editor/Surface/Archetypes/BehaviorTree.cs
View File

@@ -415,8 +415,8 @@ namespace FlaxEditor.Surface.Archetypes
// Setup boxes
_input = (InputBox)GetBox(0);
_output = (OutputBox)GetBox(1);
_input.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxSize * -0.5f);
_output.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxSize * 0.5f);
_input.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxRowHeight * -0.5f);
_output.ConnectionOffset = new Float2(0, FlaxEditor.Surface.Constants.BoxRowHeight * 0.5f);
// Setup node type and data
var flagsRoot = NodeFlags.NoRemove | NodeFlags.NoCloseButton | NodeFlags.NoSpawnViaPaste;
@@ -667,7 +667,7 @@ namespace FlaxEditor.Surface.Archetypes
}
}
protected override Color FooterColor => Color.Transparent;
protected override Color ArchetypeColor => Color.Transparent;
protected override Float2 CalculateNodeSize(float width, float height)
{

2
Source/Editor/Surface/Archetypes/Function.cs
View File

@@ -631,7 +631,7 @@ namespace FlaxEditor.Surface.Archetypes
}
/// <inheritdoc />
protected override Color FooterColor => new Color(200, 11, 112);
protected override Color ArchetypeColor => new Color(200, 11, 112);
/// <inheritdoc />
public override void OnLoaded(SurfaceNodeActions action)

2
Source/Editor/Surface/Archetypes/Textures.cs
View File

@@ -204,7 +204,7 @@ namespace FlaxEditor.Surface.Archetypes
NodeElementArchetype.Factory.Input(3, "Max Steps", true, typeof(float), 3, 2),
NodeElementArchetype.Factory.Input(4, "Heightmap Texture", true, typeof(FlaxEngine.Object), 4),
NodeElementArchetype.Factory.Output(0, "Parallax UVs", typeof(Float2), 5),
NodeElementArchetype.Factory.Text(Surface.Constants.BoxSize + 4, 5 * Surface.Constants.LayoutOffsetY, "Channel"),
NodeElementArchetype.Factory.Text(Surface.Constants.BoxRowHeight + 4, 5 * Surface.Constants.LayoutOffsetY, "Channel"),
NodeElementArchetype.Factory.ComboBox(70, 5 * Surface.Constants.LayoutOffsetY, 50, 3, new[]
{
"R",

2
Source/Editor/Surface/Archetypes/Tools.cs
View File

@@ -1058,7 +1058,7 @@ namespace FlaxEditor.Surface.Archetypes
internal class RerouteNode : SurfaceNode, IConnectionInstigator
{
internal static readonly Float2 DefaultSize = new Float2(FlaxEditor.Surface.Constants.BoxSize);
internal static readonly Float2 DefaultSize = new Float2(FlaxEditor.Surface.Constants.BoxRowHeight);
private Rectangle _localBounds;
private InputBox _input;
private OutputBox _output;

15
Source/Editor/Surface/Constants.cs
View File

@@ -23,12 +23,14 @@ namespace FlaxEditor.Surface
/// <summary>
/// The node header height.
/// </summary>
public const float NodeHeaderSize = 28.0f;
public const float NodeHeaderSize = 20.0f;
public const float NodeHeaderTextScale = 0.65f;
/// <summary>
/// The node footer height.
/// </summary>
public const float NodeFooterSize = 4.0f;
public const float NodeFooterSize = 2.0f;
/// <summary>
/// The node left margin.
@@ -45,14 +47,19 @@ namespace FlaxEditor.Surface
/// </summary>
public const float BoxOffsetX = 2.0f;
/// <summary>
/// The width of the row that is started by a box.
/// </summary>
public const float BoxRowHeight = 18.0f;
/// <summary>
/// The box size (with and height).
/// </summary>
public const float BoxSize = 20.0f;
public const float BoxSize = 12.0f;
/// <summary>
/// The node layout offset on the y axis (height of the boxes rows, etc.). It's used to make the design more consistent.
/// </summary>
public const float LayoutOffsetY = 20.0f;
public const float LayoutOffsetY = 22.0f;
}
}

2
Source/Editor/Surface/Elements/Box.cs
View File

@@ -196,7 +196,7 @@ namespace FlaxEditor.Surface.Elements
/// <inheritdoc />
protected Box(SurfaceNode parentNode, NodeElementArchetype archetype, Float2 location)
: base(parentNode, archetype, location, new Float2(Constants.BoxSize), false)
: base(parentNode, archetype, location, new Float2(Constants.BoxRowHeight), false)
{
_currentType = DefaultType;
_isSingle = Archetype.Single;

4
Source/Editor/Surface/NodeElementArchetype.cs
View File

@@ -157,7 +157,7 @@ namespace FlaxEditor.Surface
{
Type = NodeElementType.Output,
Position = new Float2(
Constants.NodeMarginX - Constants.BoxSize + Constants.BoxOffsetX,
Constants.NodeMarginX - Constants.BoxRowHeight + Constants.BoxOffsetX,
Constants.NodeMarginY + Constants.NodeHeaderSize + yLevel * Constants.LayoutOffsetY),
Text = text,
Single = single,
@@ -182,7 +182,7 @@ namespace FlaxEditor.Surface
{
Type = NodeElementType.Output,
Position = new Float2(
Constants.NodeMarginX - Constants.BoxSize + Constants.BoxOffsetX,
Constants.NodeMarginX - Constants.BoxRowHeight + Constants.BoxOffsetX,
Constants.NodeMarginY + Constants.NodeHeaderSize + yLevel * Constants.LayoutOffsetY),
Text = text,
Single = single,

22
Source/Editor/Surface/NodeFactory.cs
View File

@@ -60,56 +60,56 @@ namespace FlaxEditor.Surface
{
GroupID = 1,
Name = "Material",
Color = new Color(231, 76, 60),
Color = new Color(181, 89, 49),
Archetypes = Archetypes.Material.Nodes
},
new GroupArchetype
{
GroupID = 2,
Name = "Constants",
Color = new Color(243, 156, 18),
Color = new Color(163, 106, 21),
Archetypes = Archetypes.Constants.Nodes
},
new GroupArchetype
{
GroupID = 3,
Name = "Math",
Color = new Color(52, 152, 219),
Color = new Color(45, 126, 181),
Archetypes = Archetypes.Math.Nodes
},
new GroupArchetype
{
GroupID = 4,
Name = "Packing",
Color = new Color(155, 89, 182),
Color = new Color(124, 66, 143),
Archetypes = Archetypes.Packing.Nodes
},
new GroupArchetype
{
GroupID = 5,
Name = "Textures",
Color = new Color(46, 204, 113),
Color = new Color(43, 130, 83),
Archetypes = Archetypes.Textures.Nodes
},
new GroupArchetype
{
GroupID = 6,
Name = "Parameters",
Color = new Color(52, 73, 94),
Color = new Color(55, 78, 99),
Archetypes = Archetypes.Parameters.Nodes
},
new GroupArchetype
{
GroupID = 7,
Name = "Tools",
Color = new Color(149, 165, 166),
Color = new Color(88, 96, 97),
Archetypes = Archetypes.Tools.Nodes
},
new GroupArchetype
{
GroupID = 8,
Name = "Layers",
Color = new Color(249, 105, 116),
Color = new Color(189, 75, 81),
Archetypes = Archetypes.Layers.Nodes
},
new GroupArchetype
@@ -123,21 +123,21 @@ namespace FlaxEditor.Surface
{
GroupID = 10,
Name = "Boolean",
Color = new Color(237, 28, 36),
Color = new Color(166, 27, 32),
Archetypes = Archetypes.Boolean.Nodes
},
new GroupArchetype
{
GroupID = 11,
Name = "Bitwise",
Color = new Color(181, 230, 29),
Color = new Color(96, 125, 34),
Archetypes = Archetypes.Bitwise.Nodes
},
new GroupArchetype
{
GroupID = 12,
Name = "Comparisons",
Color = new Color(148, 30, 34),
Color = new Color(166, 33, 57),
Archetypes = Archetypes.Comparisons.Nodes
},
// GroupID = 13 -> Custom Nodes provided externally

16
Source/Editor/Surface/SurfaceNode.cs
View File

@@ -55,6 +55,11 @@ namespace FlaxEditor.Surface
/// </summary>
protected Rectangle _headerRect;
/// <summary>
/// The header text rectangle (local space).
/// </summary>
protected Rectangle _headerTextRect;
/// <summary>
/// The close button rectangle (local space).
/// </summary>
@@ -132,7 +137,7 @@ namespace FlaxEditor.Surface
AutoFocus = false;
TooltipText = GetTooltip();
CullChildren = false;
BackgroundColor = Style.Current.BackgroundNormal;
BackgroundColor = Color.Lerp(Style.Current.Background, Style.Current.BackgroundHighlighted, 0.55f);
if (Archetype.DefaultValues != null)
{
@@ -149,7 +154,7 @@ namespace FlaxEditor.Surface
/// <summary>
/// Gets the color of the footer of the node.
/// </summary>
protected virtual Color FooterColor => GroupArchetype.Color;
protected virtual Color ArchetypeColor => GroupArchetype.Color;
private Float2 mouseDownMousePosition;
@@ -1032,6 +1037,7 @@ namespace FlaxEditor.Surface
const float closeButtonMargin = Constants.NodeCloseButtonMargin;
const float closeButtonSize = Constants.NodeCloseButtonSize;
_headerRect = new Rectangle(0, 0, Width, headerSize);
_headerTextRect = _headerRect with { Width = _headerRect.Width - 5f, X = _headerRect.X + 5f };
_closeButtonRect = new Rectangle(Width - closeButtonSize - closeButtonMargin, closeButtonMargin, closeButtonSize, closeButtonSize);
_footerRect = new Rectangle(0, Height - footerSize, Width, footerSize);
}
@@ -1058,8 +1064,8 @@ namespace FlaxEditor.Surface
var headerColor = style.BackgroundHighlighted;
if (_headerRect.Contains(ref _mousePosition) && !Surface.IsConnecting && !Surface.IsSelecting)
headerColor *= 1.07f;
Render2D.FillRectangle(_headerRect, headerColor);
Render2D.DrawText(style.FontLarge, Title, _headerRect, style.Foreground, TextAlignment.Center, TextAlignment.Center);
Render2D.FillRectangle(_headerRect, ArchetypeColor);
Render2D.DrawText(style.FontLarge, Title, _headerTextRect, style.Foreground, TextAlignment.Near, TextAlignment.Center, TextWrapping.NoWrap, 1f, Constants.NodeHeaderTextScale);
// Close button
if ((Archetype.Flags & NodeFlags.NoCloseButton) == 0 && Surface.CanEdit)
@@ -1069,7 +1075,7 @@ namespace FlaxEditor.Surface
}
// Footer
Render2D.FillRectangle(_footerRect, FooterColor);
Render2D.FillRectangle(_footerRect, ArchetypeColor);
DrawChildren();

8
Source/Editor/Surface/SurfaceStyle.cs
View File

@@ -140,6 +140,11 @@ namespace FlaxEditor.Surface
/// </summary>
public Texture Background;
/// <summary>
/// The color used as a surface background.
/// </summary>
public Color BackgroundColor;
/// <summary>
/// Boxes drawing callback.
/// </summary>
@@ -216,7 +221,7 @@ namespace FlaxEditor.Surface
private static void DefaultDrawBox(Elements.Box box)
{
var rect = new Rectangle(Float2.Zero, box.Size);
var rect = new Rectangle(0.0f, box.Height * 0.5f - Constants.BoxSize * 0.5f, new Float2(Constants.BoxSize));
// Size culling
const float minBoxSize = 5.0f;
@@ -293,6 +298,7 @@ namespace FlaxEditor.Surface
ArrowClose = editor.Icons.VisjectArrowClosed32,
},
Background = editor.UI.VisjectSurfaceBackground,
BackgroundColor = new Color(31, 31, 31),
};
}

8
Source/Editor/Surface/VisjectSurface.Draw.cs
View File

@@ -65,7 +65,7 @@ namespace FlaxEditor.Surface
/// </summary>
protected virtual void DrawBackground()
{
DrawBackgroundDefault(Style.Background, Width, Height);
DrawBackgroundSolidColor(Style.BackgroundColor, Width, Height);
}
internal static void DrawBackgroundDefault(Texture background, float width, float height)
@@ -95,6 +95,12 @@ namespace FlaxEditor.Surface
}
}
internal static void DrawBackgroundSolidColor(Color color, float width, float height)
{
Rectangle backgroundRect = new Rectangle(0f, 0f, width, height);
Render2D.FillRectangle(backgroundRect, color);
}
/// <summary>
/// Draws the selection background.
/// </summary>