From ff3bc557b212e8734c5bc53c77448ecd1cde331d Mon Sep 17 00:00:00 2001 From: Olly Rybak Date: Wed, 17 May 2023 14:05:31 +1000 Subject: [PATCH 1/4] Added pivot relative resizing to GUI Controls --- Source/Engine/UI/GUI/Control.Bounds.cs | 22 ++++++++++++++++++++-- 1 file changed, 20 insertions(+), 2 deletions(-) diff --git a/Source/Engine/UI/GUI/Control.Bounds.cs b/Source/Engine/UI/GUI/Control.Bounds.cs index 9d0dafeb7..c94bdf80c 100644 --- a/Source/Engine/UI/GUI/Control.Bounds.cs +++ b/Source/Engine/UI/GUI/Control.Bounds.cs @@ -169,6 +169,12 @@ namespace FlaxEngine.GUI set => Bounds = new Rectangle(value + (_parent != null ? _parent.Bounds.Size * (_anchorMax + _anchorMin) * 0.5f : Float2.Zero) - _bounds.Size * _pivot, _bounds.Size); } + /// + /// Whether to resize the UI Control based on where the pivot is rather than just the top-left. + /// + [ExpandGroups, EditorDisplay("Transform"), EditorOrder(1060)] + public bool PivotRelative = false; + /// /// Gets or sets width of the control. /// @@ -180,7 +186,13 @@ namespace FlaxEngine.GUI { if (Mathf.NearEqual(_bounds.Size.X, value)) return; - var bounds = new Rectangle(_bounds.Location, value, _bounds.Size.Y); + var rectLocation = _bounds.Location; + if (PivotRelative) + { + var delta = _bounds.Size.X - value; + rectLocation.X += delta * Pivot.X; + } + var bounds = new Rectangle(rectLocation, value, _bounds.Size.Y); SetBounds(ref bounds); } } @@ -196,7 +208,13 @@ namespace FlaxEngine.GUI { if (Mathf.NearEqual(_bounds.Size.Y, value)) return; - var bounds = new Rectangle(_bounds.Location, _bounds.Size.X, value); + var rectLocation = _bounds.Location; + if (PivotRelative) + { + var delta = _bounds.Size.Y - value; + rectLocation.Y += delta * Pivot.Y; + } + var bounds = new Rectangle(rectLocation, _bounds.Size.X, value); SetBounds(ref bounds); } } From c92a3e566e47fd05639e8aa5a5c7a0020c928d8d Mon Sep 17 00:00:00 2001 From: Olly Rybak Date: Sun, 21 May 2023 09:57:39 +1000 Subject: [PATCH 2/4] New button styling --- .../Dedicated/UIControlEditor.cs | 27 +++++++++++++++++++ Source/Engine/UI/GUI/Control.Bounds.cs | 9 +++++-- Source/Engine/UI/GUI/Control.cs | 1 + 3 files changed, 35 insertions(+), 2 deletions(-) diff --git a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs index f71a9e020..d61fea7f6 100644 --- a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs @@ -487,10 +487,37 @@ namespace FlaxEditor.CustomEditors.Dedicated BuildLocationSizeOffsets(horUp, horDown, _cachedXEq, _cachedYEq, valueTypes); + BuildExtraButtons(group); + main.Space(10); BuildAnchorsDropper(main, valueTypes); } + private void BuildExtraButtons(VerticalPanelElement group) + { + var panel = group.CustomContainer(); + panel.CustomControl.Height = TextBoxBase.DefaultHeight; + panel.CustomControl.ClipChildren = false; + panel.CustomControl.Parent = group.ContainerControl; + panel.CustomControl.Y += 50; + + var pivotSizeRelativeBtn = new Button() + { + Parent = panel.ContainerControl, + Width = 18, + Height = 18, + BackgroundBrush = new SpriteBrush(Editor.Instance.Icons.Scale32), + AnchorPreset = AnchorPresets.TopRight, + }; + pivotSizeRelativeBtn.Clicked += () => + { + var current = (Values[0] as Control).PivotRelative; + (Values[0] as Control).PivotRelative = !current; + pivotSizeRelativeBtn.BorderColor = current ? Color.Transparent : Color.AliceBlue; + pivotSizeRelativeBtn.BackgroundColor = current ? Color.Gray : Color.White; + }; + } + private void BuildAnchorsDropper(LayoutElementsContainer main, ScriptType[] valueTypes) { ScriptMemberInfo minInfo = valueTypes[0].GetProperty("AnchorMin"); diff --git a/Source/Engine/UI/GUI/Control.Bounds.cs b/Source/Engine/UI/GUI/Control.Bounds.cs index c94bdf80c..878b8285f 100644 --- a/Source/Engine/UI/GUI/Control.Bounds.cs +++ b/Source/Engine/UI/GUI/Control.Bounds.cs @@ -1,6 +1,7 @@ // Copyright (c) 2012-2023 Wojciech Figat. All rights reserved. using System; +using System.Runtime.Remoting.Messaging; namespace FlaxEngine.GUI { @@ -172,8 +173,12 @@ namespace FlaxEngine.GUI /// /// Whether to resize the UI Control based on where the pivot is rather than just the top-left. /// - [ExpandGroups, EditorDisplay("Transform"), EditorOrder(1060)] - public bool PivotRelative = false; + [NoSerialize, HideInEditor] + public bool PivotRelative + { + get => _pivotRelativeSizing; + set => _pivotRelativeSizing = value; + } /// /// Gets or sets width of the control. diff --git a/Source/Engine/UI/GUI/Control.cs b/Source/Engine/UI/GUI/Control.cs index 49b7f65d3..b3e0dc990 100644 --- a/Source/Engine/UI/GUI/Control.cs +++ b/Source/Engine/UI/GUI/Control.cs @@ -76,6 +76,7 @@ namespace FlaxEngine.GUI private float _rotation; internal Matrix3x3 _cachedTransform; internal Matrix3x3 _cachedTransformInv; + private bool _pivotRelativeSizing = false; // Style From 522015c2d75b78f199d4bc56071e4d586abd93ec Mon Sep 17 00:00:00 2001 From: Olly Rybak Date: Mon, 29 May 2023 00:43:14 +1000 Subject: [PATCH 3/4] Better functionality + styling --- .../Dedicated/UIControlEditor.cs | 33 ++++++++++++++----- 1 file changed, 24 insertions(+), 9 deletions(-) diff --git a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs index d61fea7f6..aa2735e87 100644 --- a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs @@ -408,6 +408,8 @@ namespace FlaxEditor.CustomEditors.Dedicated { private Type _cachedType; private bool _anchorDropDownClosed = true; + private Button _pivotRelativeButton; + /// public override void Initialize(LayoutElementsContainer layout) @@ -495,27 +497,40 @@ namespace FlaxEditor.CustomEditors.Dedicated private void BuildExtraButtons(VerticalPanelElement group) { + // Set to default for UI editing + (Values[0] as Control).PivotRelative = true; + var panel = group.CustomContainer(); panel.CustomControl.Height = TextBoxBase.DefaultHeight; panel.CustomControl.ClipChildren = false; panel.CustomControl.Parent = group.ContainerControl; - panel.CustomControl.Y += 50; - var pivotSizeRelativeBtn = new Button() + _pivotRelativeButton = new Button() { Parent = panel.ContainerControl, Width = 18, Height = 18, BackgroundBrush = new SpriteBrush(Editor.Instance.Icons.Scale32), AnchorPreset = AnchorPresets.TopRight, + X = 77, }; - pivotSizeRelativeBtn.Clicked += () => - { - var current = (Values[0] as Control).PivotRelative; - (Values[0] as Control).PivotRelative = !current; - pivotSizeRelativeBtn.BorderColor = current ? Color.Transparent : Color.AliceBlue; - pivotSizeRelativeBtn.BackgroundColor = current ? Color.Gray : Color.White; - }; + + SetStyle(true); + _pivotRelativeButton.Clicked += PivotRelativeClicked; + } + + private void PivotRelativeClicked() + { + var current = (Values[0] as Control).PivotRelative; + (Values[0] as Control).PivotRelative = !current; + SetStyle((Values[0] as Control).PivotRelative); + } + + private void SetStyle(bool current) + { + var style = FlaxEngine.GUI.Style.Current; + var backgroundColor = current ? style.Foreground : style.ForegroundDisabled; + _pivotRelativeButton.SetColors(backgroundColor); } private void BuildAnchorsDropper(LayoutElementsContainer main, ScriptType[] valueTypes) From fce41b95f6545e65297dd5fcf85f6352b6d9f003 Mon Sep 17 00:00:00 2001 From: Olly Rybak Date: Mon, 29 May 2023 20:55:55 +1000 Subject: [PATCH 4/4] Added bool to properties window to carry value between controls --- Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs | 8 +++++--- Source/Editor/Windows/PropertiesWindow.cs | 5 +++++ 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs index aa2735e87..0a78240f2 100644 --- a/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs +++ b/Source/Editor/CustomEditors/Dedicated/UIControlEditor.cs @@ -497,8 +497,9 @@ namespace FlaxEditor.CustomEditors.Dedicated private void BuildExtraButtons(VerticalPanelElement group) { - // Set to default for UI editing - (Values[0] as Control).PivotRelative = true; + (Values[0] as Control).PivotRelative = Editor.Instance.Windows.PropertiesWin.PivotRelativeSize; + + var current = Editor.Instance.Windows.PropertiesWin.PivotRelativeSize; var panel = group.CustomContainer(); panel.CustomControl.Height = TextBoxBase.DefaultHeight; @@ -515,7 +516,7 @@ namespace FlaxEditor.CustomEditors.Dedicated X = 77, }; - SetStyle(true); + SetStyle(current); _pivotRelativeButton.Clicked += PivotRelativeClicked; } @@ -523,6 +524,7 @@ namespace FlaxEditor.CustomEditors.Dedicated { var current = (Values[0] as Control).PivotRelative; (Values[0] as Control).PivotRelative = !current; + Editor.Instance.Windows.PropertiesWin.PivotRelativeSize = !current; SetStyle((Values[0] as Control).PivotRelative); } diff --git a/Source/Editor/Windows/PropertiesWindow.cs b/Source/Editor/Windows/PropertiesWindow.cs index 601717f38..69fac31d7 100644 --- a/Source/Editor/Windows/PropertiesWindow.cs +++ b/Source/Editor/Windows/PropertiesWindow.cs @@ -30,6 +30,11 @@ namespace FlaxEditor.Windows /// public bool ScaleLinked = false; + /// + /// Indictation of if UI elements should size relative to the pivot point + /// + public bool PivotRelativeSize = true; + /// /// Initializes a new instance of the class. ///