Add Visject surface boxes and connections drawing customization via style

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

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

View File

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

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;