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

Refactor Editor UI style for selection and drag drop interactions

Browse Source 
#1741
This commit is contained in:
Wojtek Figat
2024-03-07 16:45:09 +01:00
parent 9518d77da9
commit 8de2249ed8
23 changed files with 92 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
Source/Editor/Content/GUI/ContentNavigation.cs
View File

@@ -161,7 +161,7 @@ namespace FlaxEditor.Content.GUI
{
var style = Style.Current;
var rect = new Rectangle(Float2.Zero, Size);
var color = IsDragOver ? style.BackgroundSelected * 0.6f : (_mouseDown ? style.BackgroundSelected : (IsMouseOver ? style.BackgroundHighlighted : Color.Transparent));
var color = IsDragOver ? Color.Transparent : (_mouseDown ? style.BackgroundSelected : (IsMouseOver ? style.BackgroundHighlighted : Color.Transparent));
Render2D.FillRectangle(rect, color);
Render2D.DrawSprite(Editor.Instance.Icons.ArrowRight12, new Rectangle(rect.Location.X, rect.Y + rect.Size.Y * 0.25f, rect.Size.X, rect.Size.X), EnabledInHierarchy ? style.Foreground : style.ForegroundDisabled);
}

16
Source/Editor/Content/GUI/ContentView.cs
View File

@@ -54,11 +54,11 @@ namespace FlaxEditor.Content.GUI
public partial class ContentView : ContainerControl, IContentItemOwner
{
private readonly List<ContentItem> _items = new List<ContentItem>(256);
private readonly List<ContentItem> _selection = new List<ContentItem>(16);
private readonly List<ContentItem> _selection = new List<ContentItem>();
private float _viewScale = 1.0f;
private ContentViewType _viewType = ContentViewType.Tiles;
private bool _isRubberBandSpanning = false;
private bool _isRubberBandSpanning;
private Float2 _mousePressLocation;
private Rectangle _rubberBandRectangle;
@@ -615,7 +615,9 @@ namespace FlaxEditor.Content.GUI
// Check if drag is over
if (IsDragOver && _validDragOver)
{
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), style.BackgroundSelected * 0.4f);
var bounds = new Rectangle(Float2.One, Size - Float2.One * 2);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
// Check if it's an empty thing
@@ -624,10 +626,11 @@ namespace FlaxEditor.Content.GUI
Render2D.DrawText(style.FontSmall, IsSearching ? "No results" : "Empty", new Rectangle(Float2.Zero, Size), style.ForegroundDisabled, TextAlignment.Center, TextAlignment.Center);
}
// Selection
if (_isRubberBandSpanning)
{
Render2D.FillRectangle(_rubberBandRectangle, Color.Orange * 0.4f);
Render2D.DrawRectangle(_rubberBandRectangle, Color.Orange);
Render2D.FillRectangle(_rubberBandRectangle, style.Selection);
Render2D.DrawRectangle(_rubberBandRectangle, style.SelectionBorder);
}
}
@@ -961,6 +964,9 @@ namespace FlaxEditor.Content.GUI
/// <inheritdoc />
public override void OnDestroy()
{
if (IsDisposing)
return;
// Ensure to unlink all items
ClearItems();

7
Source/Editor/Content/Items/ContentFolder.cs
View File

@@ -241,7 +241,12 @@ namespace FlaxEditor.Content
// Check if drag is over
if (IsDragOver && _validDragOver)
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), Style.Current.BackgroundSelected * 0.6f);
{
var style = Style.Current;
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
}
private bool ValidateDragItem(ContentItem item)

6
Source/Editor/CustomEditors/Dedicated/ScriptsEditor.cs
View File

@@ -151,8 +151,8 @@ namespace FlaxEditor.CustomEditors.Dedicated
if (IsDragOver && _dragHandlers != null && _dragHandlers.HasValidDrag)
{
var area = new Rectangle(Float2.Zero, size);
Render2D.FillRectangle(area, Color.Orange * 0.5f);
Render2D.DrawRectangle(area, Color.Black);
Render2D.FillRectangle(area, style.Selection);
Render2D.DrawRectangle(area, style.SelectionBorder);
}
base.Draw();
@@ -520,7 +520,7 @@ namespace FlaxEditor.CustomEditors.Dedicated
{
base.Draw();
var color = FlaxEngine.GUI.Style.Current.BackgroundSelected * (IsDragOver ? 0.9f : 0.1f);
var color = Style.Current.BackgroundSelected * (IsDragOver ? 0.9f : 0.1f);
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), color);
}

5
Source/Editor/CustomEditors/Editors/CollectionEditor.cs
View File

@@ -542,9 +542,10 @@ namespace FlaxEditor.CustomEditors.Editors
{
if (_dragHandlers is { HasValidDrag: true })
{
var style = FlaxEngine.GUI.Style.Current;
var area = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(area, Color.Orange * 0.5f);
Render2D.DrawRectangle(area, Color.Black);
Render2D.FillRectangle(area, style.Selection);
Render2D.DrawRectangle(area, style.SelectionBorder);
}
base.Draw();

6
Source/Editor/CustomEditors/Editors/FlaxObjectRefEditor.cs
View File

@@ -220,7 +220,11 @@ namespace FlaxEditor.CustomEditors.Editors
// Check if drag is over
if (IsDragOver && _hasValidDragOver)
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), style.BackgroundSelected * 0.4f);
{
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
}
/// <inheritdoc />

6
Source/Editor/CustomEditors/Editors/TypeEditor.cs
View File

@@ -175,7 +175,11 @@ namespace FlaxEditor.CustomEditors.Editors
// Check if drag is over
if (IsDragOver && _hasValidDragOver)
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), style.BackgroundSelected * 0.4f);
{
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
}
/// <inheritdoc />

6
Source/Editor/GUI/AssetPicker.cs
View File

@@ -182,7 +182,11 @@ namespace FlaxEditor.GUI
// Check if drag is over
if (IsDragOver && _dragOverElement != null && _dragOverElement.HasValidDrag)
Render2D.FillRectangle(iconRect, style.BackgroundSelected * 0.4f);
{
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
}
/// <inheritdoc />

4
Source/Editor/GUI/CurveEditor.cs
View File

@@ -913,8 +913,8 @@ namespace FlaxEditor.GUI
_mainPanel.PointToParent(_contents.PointToParent(_contents._leftMouseDownPos)),
_mainPanel.PointToParent(_contents.PointToParent(_contents._mousePos))
);
Render2D.FillRectangle(selectionRect, Color.Orange * 0.4f);
Render2D.DrawRectangle(selectionRect, Color.Orange);
Render2D.FillRectangle(selectionRect, style.Selection);
Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
}
base.Draw();

5
Source/Editor/GUI/Input/ValueBox.cs
View File

@@ -201,8 +201,9 @@ namespace FlaxEditor.GUI.Input
if (_isSliding)
{
// Draw overlay
// TODO: render nicer overlay with some glow from the borders (inside)
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), Color.Orange * 0.3f);
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
}
}

3
Source/Editor/GUI/NavigationButton.cs
View File

@@ -45,7 +45,8 @@ namespace FlaxEditor.GUI
// Draw background
if (IsDragOver && _validDragOver)
{
Render2D.FillRectangle(clientRect, Style.Current.BackgroundSelected * 0.6f);
Render2D.FillRectangle(clientRect, style.Selection);
Render2D.DrawRectangle(clientRect, style.SelectionBorder);
}
else if (_isPressed)
{

4
Source/Editor/GUI/Timeline/GUI/Background.cs
View File

@@ -227,8 +227,8 @@ namespace FlaxEditor.GUI.Timeline.GUI
if (_isSelecting)
{
var selectionRect = Rectangle.FromPoints(_selectingStartPos, _mousePos);
Render2D.FillRectangle(selectionRect, Color.Orange * 0.4f);
Render2D.DrawRectangle(selectionRect, Color.Orange);
Render2D.FillRectangle(selectionRect, style.Selection);
Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
}
DrawChildren();

4
Source/Editor/GUI/Timeline/GUI/KeyframesEditor.cs
View File

@@ -1256,8 +1256,8 @@ namespace FlaxEditor.GUI
_mainPanel.PointToParent(_contents.PointToParent(_contents._leftMouseDownPos)),
_mainPanel.PointToParent(_contents.PointToParent(_contents._mousePos))
);
Render2D.FillRectangle(selectionRect, Color.Orange * 0.4f);
Render2D.DrawRectangle(selectionRect, Color.Orange);
Render2D.FillRectangle(selectionRect, style.Selection);
Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
}
base.Draw();

4
Source/Editor/GUI/Timeline/Timeline.UI.cs
View File

@@ -304,7 +304,9 @@ namespace FlaxEditor.GUI.Timeline
if (IsDragOver && _currentDragEffect != DragDropEffect.None)
{
var style = Style.Current;
Render2D.FillRectangle(new Rectangle(Float2.Zero, Size), style.BackgroundSelected * 0.4f);
var bounds = new Rectangle(Float2.Zero, Size);
Render2D.FillRectangle(bounds, style.Selection);
Render2D.DrawRectangle(bounds, style.SelectionBorder);
}
base.Draw();

4
Source/Editor/GUI/Timeline/Track.cs
View File

@@ -977,7 +977,6 @@ namespace FlaxEditor.GUI.Timeline
// Draw drag and drop effect
if (IsDragOver && _isDragOverHeader)
{
Color dragOverColor = style.BackgroundSelected * 0.6f;
Rectangle rect;
switch (_dragOverMode)
{
@@ -994,7 +993,8 @@ namespace FlaxEditor.GUI.Timeline
rect = Rectangle.Empty;
break;
}
Render2D.FillRectangle(rect, dragOverColor);
Render2D.FillRectangle(rect, style.Selection);
Render2D.DrawRectangle(rect, style.SelectionBorder);
}
base.Draw();

16
Source/Editor/GUI/Tree/TreeNode.cs
View File

@@ -681,27 +681,19 @@ namespace FlaxEditor.GUI.Tree
// Draw drag and drop effect
if (IsDragOver && _tree.DraggedOverNode == this)
{
Color dragOverColor = style.BackgroundSelected;
Rectangle rect;
switch (_dragOverMode)
{
case DragItemPositioning.At:
dragOverColor *= 0.6f;
rect = textRect;
Render2D.FillRectangle(textRect, style.Selection);
Render2D.DrawRectangle(textRect, style.SelectionBorder);
break;
case DragItemPositioning.Above:
dragOverColor *= 1.2f;
rect = new Rectangle(textRect.X, textRect.Top - DefaultDragInsertPositionMargin - DefaultNodeOffsetY - _margin.Top, textRect.Width, DefaultDragInsertPositionMargin * 2.0f);
Render2D.DrawRectangle(new Rectangle(textRect.X, textRect.Top - DefaultDragInsertPositionMargin * 0.5f - DefaultNodeOffsetY - _margin.Top, textRect.Width, DefaultDragInsertPositionMargin), style.SelectionBorder);
break;
case DragItemPositioning.Below:
dragOverColor *= 1.2f;
rect = new Rectangle(textRect.X, textRect.Bottom + _margin.Bottom - DefaultDragInsertPositionMargin, textRect.Width, DefaultDragInsertPositionMargin * 2.0f);
break;
default:
rect = Rectangle.Empty;
Render2D.DrawRectangle(new Rectangle(textRect.X, textRect.Bottom + _margin.Bottom - DefaultDragInsertPositionMargin * 0.5f, textRect.Width, DefaultDragInsertPositionMargin), style.SelectionBorder);
break;
}
Render2D.FillRectangle(rect, dragOverColor);
}
// Base

12
Source/Editor/Options/OptionsModule.cs
View File

@@ -212,6 +212,14 @@ namespace FlaxEditor.Options
string styleName = themeOptions.SelectedStyle;
if (styleName != ThemeOptions.DefaultName && styleName != ThemeOptions.LightDefault && themeOptions.Styles.TryGetValue(styleName, out var style) && style != null)
{
// Setup defaults for newly added components that might be missing
if (style.Selection == Color.Transparent && style.SelectionBorder == Color.Transparent)
{
// [Deprecated on 6.03.2024, expires on 6.03.2026]
style.Selection = Color.Orange * 0.4f;
style.SelectionBorder = Color.Orange;
}
Style.Current = style;
}
else
@@ -258,6 +266,8 @@ namespace FlaxEditor.Options
TextBoxBackgroundSelected = Color.FromBgra(0xFF3F3F46),
CollectionBackgroundColor = Color.FromBgra(0x14CCCCCC),
ProgressNormal = Color.FromBgra(0xFF0ad328),
Selection = Color.Orange * 0.4f,
SelectionBorder = Color.Orange,
Statusbar = new Style.StatusbarStyle
{
@@ -318,6 +328,8 @@ namespace FlaxEditor.Options
TextBoxBackgroundSelected = new Color(0.73f, 0.73f, 0.80f, 1f),
CollectionBackgroundColor = new Color(0.85f, 0.85f, 0.88f, 1f),
ProgressNormal = new Color(0.03f, 0.65f, 0.12f, 1f),
Selection = Color.Orange * 0.4f,
SelectionBorder = Color.Orange,
// Fonts
FontTitle = options.Interface.TitleFont.GetFont(),

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

@@ -350,7 +350,7 @@ namespace FlaxEditor.Surface.Archetypes
// Paint Background
if (_isSelected)
Render2D.DrawRectangle(_textRect, Color.Orange);
Render2D.DrawRectangle(_textRect, style.SelectionBorder);
BackgroundColor = style.BackgroundNormal;
var dragAreaColor = BackgroundColor / 2.0f;
@@ -1078,7 +1078,7 @@ namespace FlaxEditor.Surface.Archetypes
// Paint Background
if (_isSelected)
Render2D.DrawRectangle(_textRect, Color.Orange);
Render2D.DrawRectangle(_textRect, style.SelectionBorder);
BackgroundColor = style.BackgroundNormal;
var dragAreaColor = BackgroundColor / 2.0f;

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

@@ -128,7 +128,7 @@ namespace FlaxEditor.Surface.Archetypes
Render2D.DrawSprite(Editor.Instance.Icons.DragBar12, _arrangeButtonRect, _arrangeButtonInUse ? Color.Orange : dragBarColor);
if (_arrangeButtonInUse && ArrangeAreaCheck(out _, out var arrangeTargetRect))
{
Render2D.FillRectangle(arrangeTargetRect, Color.Orange * 0.8f);
Render2D.FillRectangle(arrangeTargetRect, style.Selection);
}
// Disabled overlay

3
Source/Editor/Surface/SurfaceComment.cs
View File

@@ -181,7 +181,8 @@ namespace FlaxEditor.Surface
if (_isResizing)
{
// Draw overlay
Render2D.FillRectangle(_resizeButtonRect, Color.Orange * 0.3f);
Render2D.FillRectangle(_resizeButtonRect, style.Selection);
Render2D.DrawRectangle(_resizeButtonRect, style.SelectionBorder);
}
// Resize button

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

@@ -96,9 +96,10 @@ namespace FlaxEditor.Surface
/// <remarks>Called only when user is selecting nodes using rectangle tool.</remarks>
protected virtual void DrawSelection()
{
var style = FlaxEngine.GUI.Style.Current;
var selectionRect = Rectangle.FromPoints(_leftMouseDownPos, _mousePos);
Render2D.FillRectangle(selectionRect, Color.Orange * 0.4f);
Render2D.DrawRectangle(selectionRect, Color.Orange);
Render2D.FillRectangle(selectionRect, style.Selection);
Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
}
/// <summary>

2
Source/Editor/Windows/GameWindow.cs
View File

@@ -968,7 +968,7 @@ namespace FlaxEditor.Windows
if (animTime < 0)
{
float alpha = Mathf.Saturate(-animTime / fadeOutTime);
Render2D.DrawRectangle(new Rectangle(new Float2(4), Size - 8), Color.Orange * alpha);
Render2D.DrawRectangle(new Rectangle(new Float2(4), Size - 8), style.SelectionBorder * alpha);
}
// Add overlay during debugger breakpoint hang

12
Source/Engine/UI/GUI/Style.cs
View File

@@ -170,6 +170,18 @@ namespace FlaxEngine.GUI
[EditorOrder(200)]
public Color ProgressNormal;
/// <summary>
/// The selection and drag drop highlights colors.
/// </summary>
[EditorOrder(205)]
public Color Selection;
/// <summary>
/// The selection and drag drop highlights border colors.
/// </summary>
[EditorOrder(206)]
public Color SelectionBorder;
/// <summary>
/// The status bar style
/// </summary>