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

Add Visject surface boxes and connections drawing customization via style

Browse Source
This commit is contained in:
Wojtek Figat
2023-08-13 19:14:23 +02:00
parent e27f1a8a41
commit ae4bce7a68
8 changed files with 78 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
Source/Editor/Surface/Archetypes/Animation.StateMachine.cs
View File

@@ -484,7 +484,7 @@ namespace FlaxEditor.Surface.Archetypes
var startPos = PointToParent(ref center);
targetState.GetConnectionEndPoint(ref startPos, out var endPos);
var color = style.Foreground;
StateMachineState.DrawConnection(Surface, ref startPos, ref endPos, ref color);
StateMachineState.DrawConnection(ref startPos, ref endPos, ref color);
}
}
@@ -514,7 +514,7 @@ namespace FlaxEditor.Surface.Archetypes
/// <inheritdoc />
public void DrawConnectingLine(ref Float2 startPos, ref Float2 endPos, ref Color color)
{
StateMachineState.DrawConnection(Surface, ref startPos, ref endPos, ref color);
StateMachineState.DrawConnection(ref startPos, ref endPos, ref color);
}
/// <inheritdoc />
@@ -680,11 +680,10 @@ namespace FlaxEditor.Surface.Archetypes
/// <summary>
/// Draws the connection between two state machine nodes.
/// </summary>
/// <param name="surface">The surface.</param>
/// <param name="startPos">The start position.</param>
/// <param name="endPos">The end position.</param>
/// <param name="color">The line color.</param>
public static void DrawConnection(VisjectSurface surface, ref Float2 startPos, ref Float2 endPos, ref Color color)
public static void DrawConnection(ref Float2 startPos, ref Float2 endPos, ref Color color)
{
var sub = endPos - startPos;
var length = sub.Length;
@@ -1293,7 +1292,7 @@ namespace FlaxEditor.Surface.Archetypes
isMouseOver = Float2.DistanceSquared(ref mousePosition, ref point) < 25.0f;
}
var color = isMouseOver ? Color.Wheat : t.LineColor;
DrawConnection(Surface, ref t.StartPos, ref t.EndPos, ref color);
DrawConnection(ref t.StartPos, ref t.EndPos, ref color);
}
}
@@ -1322,7 +1321,7 @@ namespace FlaxEditor.Surface.Archetypes
/// <inheritdoc />
public void DrawConnectingLine(ref Float2 startPos, ref Float2 endPos, ref Color color)
{
DrawConnection(Surface, ref startPos, ref endPos, ref color);
DrawConnection(ref startPos, ref endPos, ref color);
}
/// <inheritdoc />

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

@@ -1237,7 +1237,7 @@ namespace FlaxEditor.Surface.Archetypes
/// <inheritdoc />
public void DrawConnectingLine(ref Float2 startPos, ref Float2 endPos, ref Color color)
{
OutputBox.DrawConnection(ref startPos, ref endPos, ref color, 2);
OutputBox.DrawConnection(Surface.Style, ref startPos, ref endPos, ref color, 2);
}
/// <inheritdoc />

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

@@ -133,6 +133,11 @@ namespace FlaxEditor.Surface.Elements
}
}
/// <summary>
/// Cached color for <see cref="CurrentType"/>.
/// </summary>
public Color CurrentTypeColor => _currentTypeColor;
/// <summary>
/// The collection of the attributes used by the box. Assigned externally. Can be used to control the default value editing for the <see cref="InputBox"/> or to provide more metadata for the surface UI.
/// </summary>
@@ -544,44 +549,6 @@ namespace FlaxEditor.Surface.Elements
}
}
/// <summary>
/// Draws the box GUI using <see cref="Render2D"/>.
/// </summary>
protected void DrawBox()
{
var rect = new Rectangle(Float2.Zero, Size);
// Size culling
const float minBoxSize = 5.0f;
if (rect.Size.LengthSquared < minBoxSize * minBoxSize)
return;
// Debugging boxes size
//Render2D.DrawRectangle(rect, Color.Orange); return;
// Draw icon
bool hasConnections = HasAnyConnection;
float alpha = Enabled ? 1.0f : 0.6f;
Color color = _currentTypeColor * alpha;
var style = Surface.Style;
SpriteHandle icon;
if (_currentType.Type == typeof(void))
icon = hasConnections ? style.Icons.ArrowClose : style.Icons.ArrowOpen;
else
icon = hasConnections ? style.Icons.BoxClose : style.Icons.BoxOpen;
color *= ConnectionsHighlightIntensity + 1;
Render2D.DrawSprite(icon, rect, color);
// Draw selection hint
if (_isSelected)
{
float outlineAlpha = Mathf.Sin(Time.TimeSinceStartup * 4.0f) * 0.5f + 0.5f;
float outlineWidth = Mathf.Lerp(1.5f, 4.0f, outlineAlpha);
var outlineRect = new Rectangle(rect.X - outlineWidth, rect.Y - outlineWidth, rect.Width + outlineWidth * 2, rect.Height + outlineWidth * 2);
Render2D.DrawSprite(icon, outlineRect, FlaxEngine.GUI.Style.Current.BorderSelected.RGBMultiplied(1.0f + outlineAlpha * 0.4f));
}
}
/// <inheritdoc />
public override void OnMouseEnter(Float2 location)
{
@@ -813,7 +780,7 @@ namespace FlaxEditor.Surface.Elements
/// <inheritdoc />
public void DrawConnectingLine(ref Float2 startPos, ref Float2 endPos, ref Color color)
{
OutputBox.DrawConnection(ref startPos, ref endPos, ref color, 2);
OutputBox.DrawConnection(Surface.Style, ref startPos, ref endPos, ref color, 2);
}
/// <inheritdoc />

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

@@ -1438,7 +1438,7 @@ namespace FlaxEditor.Surface.Elements
base.Draw();
// Box
DrawBox();
Surface.Style.DrawBox(this);
// Draw text
var style = Style.Current;

18
Source/Editor/Surface/Elements/OutputBox.cs
View File

@@ -27,12 +27,19 @@ namespace FlaxEditor.Surface.Elements
/// <summary>
/// Draws the connection between two boxes.
/// </summary>
/// <param name="style">The Visject surface style.</param>
/// <param name="start">The start location.</param>
/// <param name="end">The end location.</param>
/// <param name="color">The connection color.</param>
/// <param name="thickness">The connection thickness.</param>
public static void DrawConnection(ref Float2 start, ref Float2 end, ref Color color, float thickness = 1)
public static void DrawConnection(SurfaceStyle style, ref Float2 start, ref Float2 end, ref Color color, float thickness = 1)
{
if (style.DrawConnection != null)
{
style.DrawConnection(start, end, color, thickness);
return;
}
// Calculate control points
var dst = (end - start) * new Float2(0.5f, 0.05f);
var control1 = new Float2(start.X + dst.X, start.Y + dst.Y);
@@ -122,8 +129,9 @@ namespace FlaxEditor.Surface.Elements
/// </summary>
public void DrawConnections(ref Float2 mousePosition)
{
float mouseOverDistance = MouseOverConnectionDistance;
// Draw all the connections
var style = Surface.Style;
var mouseOverDistance = MouseOverConnectionDistance;
var startPos = Parent.PointToParent(Center);
var startHighlight = ConnectionsHighlightIntensity;
for (int i = 0; i < Connections.Count; i++)
@@ -139,7 +147,7 @@ namespace FlaxEditor.Surface.Elements
highlight += 0.5f;
}
DrawConnection(ref startPos, ref endPos, ref color, highlight);
DrawConnection(style, ref startPos, ref endPos, ref color, highlight);
}
}
@@ -151,7 +159,7 @@ namespace FlaxEditor.Surface.Elements
// Draw all the connections
var startPos = Parent.PointToParent(Center);
var endPos = targetBox.Parent.PointToParent(targetBox.Center);
DrawConnection(ref startPos, ref endPos, ref _currentTypeColor, 2.5f);
DrawConnection(Surface.Style, ref startPos, ref endPos, ref _currentTypeColor, 2.5f);
}
/// <inheritdoc />
@@ -163,7 +171,7 @@ namespace FlaxEditor.Surface.Elements
base.Draw();
// Box
DrawBox();
Surface.Style.DrawBox(this);
// Draw text
var style = Style.Current;

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

@@ -165,25 +165,22 @@ namespace FlaxEditor.Surface
{
if (Surface == null)
return;
Size = CalculateNodeSize(width, height);
// Update boxes on width change
//if (!Mathf.NearEqual(prevSize.X, Size.X))
for (int i = 0; i < Elements.Count; i++)
{
for (int i = 0; i < Elements.Count; i++)
if (Elements[i] is OutputBox box)
{
if (Elements[i] is OutputBox box)
{
box.Location = box.Archetype.Position + new Float2(width, 0);
}
box.Location = box.Archetype.Position + new Float2(width, 0);
}
}
Size = CalculateNodeSize(width, height);
}
/// <summary>
/// Automatically resizes the node to match the title size and all the elements for best fit of the node dimensions.
/// </summary>
public void ResizeAuto()
public virtual void ResizeAuto()
{
if (Surface == null)
return;

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

@@ -140,6 +140,16 @@ namespace FlaxEditor.Surface
/// </summary>
public Texture Background;
/// <summary>
/// Boxes drawing callback.
/// </summary>
public Action<Elements.Box> DrawBox = DefaultDrawBox;
/// <summary>
/// Custom box connection drawing callback (null by default).
/// </summary>
public Action<Float2, Float2, Color, float> DrawConnection = null;
/// <summary>
/// Gets the color for the connection.
/// </summary>
@@ -204,6 +214,41 @@ namespace FlaxEditor.Surface
color = Colors.Default;
}
private static void DefaultDrawBox(Elements.Box box)
{
var rect = new Rectangle(Float2.Zero, box.Size);
// Size culling
const float minBoxSize = 5.0f;
if (rect.Size.LengthSquared < minBoxSize * minBoxSize)
return;
// Debugging boxes size
//Render2D.DrawRectangle(rect, Color.Orange); return;
// Draw icon
bool hasConnections = box.HasAnyConnection;
float alpha = box.Enabled ? 1.0f : 0.6f;
Color color = box.CurrentTypeColor * alpha;
var style = box.Surface.Style;
SpriteHandle icon;
if (box.CurrentType.Type == typeof(void))
icon = hasConnections ? style.Icons.ArrowClose : style.Icons.ArrowOpen;
else
icon = hasConnections ? style.Icons.BoxClose : style.Icons.BoxOpen;
color *= box.ConnectionsHighlightIntensity + 1;
Render2D.DrawSprite(icon, rect, color);
// Draw selection hint
if (box.IsSelected)
{
float outlineAlpha = Mathf.Sin(Time.TimeSinceStartup * 4.0f) * 0.5f + 0.5f;
float outlineWidth = Mathf.Lerp(1.5f, 4.0f, outlineAlpha);
var outlineRect = new Rectangle(rect.X - outlineWidth, rect.Y - outlineWidth, rect.Width + outlineWidth * 2, rect.Height + outlineWidth * 2);
Render2D.DrawSprite(icon, outlineRect, FlaxEngine.GUI.Style.Current.BorderSelected.RGBMultiplied(1.0f + outlineAlpha * 0.4f));
}
}
/// <summary>
/// Function used to create style for the given surface type. Can be overriden to provide some customization via user plugin.
/// </summary>

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

@@ -176,7 +176,7 @@ namespace FlaxEditor.Surface
var bezierStartPoint = new Float2(upperRight.X + offsetX * 0.75f, (upperRight.Y + bottomRight.Y) * 0.5f);
var bezierEndPoint = inputBracket.Box.ParentNode.PointToParent(_rootControl.Parent, inputBracket.Box.Center);
Elements.OutputBox.DrawConnection(ref bezierStartPoint, ref bezierEndPoint, ref fadedColor);
Elements.OutputBox.DrawConnection(Style, ref bezierStartPoint, ref bezierEndPoint, ref fadedColor);
// Debug Area
//Rectangle drawRect = Rectangle.FromPoints(upperLeft, bottomRight);