Refactor Editor UI style for selection and drag drop interactions

#1741

Source/Editor/Content/GUI/ContentNavigation.cs

@@ -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);
         }

Source/Editor/Content/GUI/ContentView.cs

@@ -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.FillRectangle(_rubberBandRectangle, style.Selection);
-                Render2D.DrawRectangle(_rubberBandRectangle, Color.Orange);
+                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();
 

Source/Editor/Content/Items/ContentFolder.cs

@@ -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)

Source/Editor/CustomEditors/Dedicated/ScriptsEditor.cs

@@ -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.FillRectangle(area, style.Selection);
-                Render2D.DrawRectangle(area, Color.Black);
+                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);
         }
 

Source/Editor/CustomEditors/Editors/CollectionEditor.cs

@@ -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.FillRectangle(area, style.Selection);
-                    Render2D.DrawRectangle(area, Color.Black);
+                    Render2D.DrawRectangle(area, style.SelectionBorder);
                 }
 
                 base.Draw();

Source/Editor/CustomEditors/Editors/FlaxObjectRefEditor.cs

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

Source/Editor/CustomEditors/Editors/TypeEditor.cs

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

Source/Editor/GUI/AssetPicker.cs

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

Source/Editor/GUI/CurveEditor.cs

@@ -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.FillRectangle(selectionRect, style.Selection);
-                Render2D.DrawRectangle(selectionRect, Color.Orange);
+                Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
             }
 
             base.Draw();

Source/Editor/GUI/Input/ValueBox.cs

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

Source/Editor/GUI/NavigationButton.cs

@@ -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)
             {

Source/Editor/GUI/Timeline/GUI/Background.cs

@@ -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.FillRectangle(selectionRect, style.Selection);
-                Render2D.DrawRectangle(selectionRect, Color.Orange);
+                Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
             }
 
             DrawChildren();

Source/Editor/GUI/Timeline/GUI/KeyframesEditor.cs

@@ -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.FillRectangle(selectionRect, style.Selection);
-                Render2D.DrawRectangle(selectionRect, Color.Orange);
+                Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
             }
 
             base.Draw();

Source/Editor/GUI/Timeline/Timeline.UI.cs

@@ -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();

Source/Editor/GUI/Timeline/Track.cs

@@ -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();

Source/Editor/GUI/Tree/TreeNode.cs

@@ -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;
+                    Render2D.FillRectangle(textRect, style.Selection);
-                    rect = textRect;
+                    Render2D.DrawRectangle(textRect, style.SelectionBorder);
                     break;
                 case DragItemPositioning.Above:
-                    dragOverColor *= 1.2f;
+                    Render2D.DrawRectangle(new Rectangle(textRect.X, textRect.Top - DefaultDragInsertPositionMargin * 0.5f - DefaultNodeOffsetY - _margin.Top, textRect.Width, DefaultDragInsertPositionMargin), style.SelectionBorder);
-                    rect = new Rectangle(textRect.X, textRect.Top - DefaultDragInsertPositionMargin - DefaultNodeOffsetY - _margin.Top, textRect.Width, DefaultDragInsertPositionMargin * 2.0f);
                     break;
                 case DragItemPositioning.Below:
-                    dragOverColor *= 1.2f;
+                    Render2D.DrawRectangle(new Rectangle(textRect.X, textRect.Bottom + _margin.Bottom - DefaultDragInsertPositionMargin * 0.5f, textRect.Width, DefaultDragInsertPositionMargin), style.SelectionBorder);
-                    rect = new Rectangle(textRect.X, textRect.Bottom + _margin.Bottom - DefaultDragInsertPositionMargin, textRect.Width, DefaultDragInsertPositionMargin * 2.0f);
-                    break;
-                default:
-                    rect = Rectangle.Empty;
                     break;
                 }
-                Render2D.FillRectangle(rect, dragOverColor);
             }
 
             // Base

Source/Editor/Options/OptionsModule.cs

@@ -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(),

Source/Editor/Surface/Archetypes/Animation.StateMachine.cs

@@ -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;

Source/Editor/Surface/Archetypes/ParticleModules.cs

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

Source/Editor/Surface/SurfaceComment.cs

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

Source/Editor/Surface/VisjectSurface.Draw.cs

@@ -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.FillRectangle(selectionRect, style.Selection);
-            Render2D.DrawRectangle(selectionRect, Color.Orange);
+            Render2D.DrawRectangle(selectionRect, style.SelectionBorder);
         }
 
         /// <summary>

Source/Editor/Windows/GameWindow.cs

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

Source/Engine/UI/GUI/Style.cs

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