Merge pull request #18587 from peppy/skin-editor-fix-sizing

Fix skin editor not accounting for aspect ratios in base-game sizing logic

osu.Game/Graphics/Containers/ScalingContainer.cs

@@ -21,7 +21,7 @@ namespace osu.Game.Graphics.Containers
     /// </summary>
     public class ScalingContainer : Container
     {
-        private const float duration = 500;
+        internal const float TRANSITION_DURATION = 500;
 
         private Bindable<float> sizeX;
         private Bindable<float> sizeY;
@@ -99,7 +99,7 @@ namespace osu.Game.Graphics.Containers
                 if (applyUIScale)
                 {
                     uiScale = osuConfig.GetBindable<float>(OsuSetting.UIScale);
-                    uiScale.BindValueChanged(args => this.TransformTo(nameof(CurrentScale), args.NewValue, duration, Easing.OutQuart), true);
+                    uiScale.BindValueChanged(args => this.TransformTo(nameof(CurrentScale), args.NewValue, TRANSITION_DURATION, Easing.OutQuart), true);
                 }
             }
 
@@ -163,10 +163,10 @@ namespace osu.Game.Graphics.Containers
                         backgroundStack.Push(new ScalingBackgroundScreen());
                     }
 
-                    backgroundStack.FadeIn(duration);
+                    backgroundStack.FadeIn(TRANSITION_DURATION);
                 }
                 else
-                    backgroundStack?.FadeOut(duration);
+                    backgroundStack?.FadeOut(TRANSITION_DURATION);
             }
 
             RectangleF targetRect = new RectangleF(Vector2.Zero, Vector2.One);
@@ -195,13 +195,13 @@ namespace osu.Game.Graphics.Containers
             if (requiresMasking)
                 sizableContainer.Masking = true;
 
-            sizableContainer.MoveTo(targetRect.Location, duration, Easing.OutQuart);
+            sizableContainer.MoveTo(targetRect.Location, TRANSITION_DURATION, Easing.OutQuart);
-            sizableContainer.ResizeTo(targetRect.Size, duration, Easing.OutQuart);
+            sizableContainer.ResizeTo(targetRect.Size, TRANSITION_DURATION, Easing.OutQuart);
 
             // Of note, this will not work great in the case of nested ScalingContainers where multiple are applying corner radius.
             // Masking and corner radius should likely only be applied at one point in the full game stack to fix this.
             // An example of how this can occur is when the skin editor is visible and the game screen scaling is set to "Everything".
-            sizableContainer.TransformTo(nameof(CornerRadius), requiresMasking ? corner_radius : 0, duration, requiresMasking ? Easing.OutQuart : Easing.None)
+            sizableContainer.TransformTo(nameof(CornerRadius), requiresMasking ? corner_radius : 0, TRANSITION_DURATION, requiresMasking ? Easing.OutQuart : Easing.None)
                             .OnComplete(_ => { sizableContainer.Masking = requiresMasking; });
         }
 

osu.Game/Screens/Edit/Components/EditorSidebar.cs

@@ -16,13 +16,15 @@ namespace osu.Game.Screens.Edit.Components
     /// </summary>
     internal class EditorSidebar : Container<EditorSidebarSection>
     {
+        public const float WIDTH = 250;
+
         private readonly Box background;
 
         protected override Container<EditorSidebarSection> Content { get; }
 
         public EditorSidebar()
         {
-            Width = 250;
+            Width = WIDTH;
             RelativeSizeAxes = Axes.Y;
 
             InternalChildren = new Drawable[]

osu.Game/Skinning/Editor/SkinEditor.cs

@@ -29,6 +29,8 @@ namespace osu.Game.Skinning.Editor
     {
         public const double TRANSITION_DURATION = 500;
 
+        public const float MENU_HEIGHT = 40;
+
         public readonly BindableList<ISkinnableDrawable> SelectedComponents = new BindableList<ISkinnableDrawable>();
 
         protected override bool StartHidden => true;
@@ -78,8 +80,6 @@ namespace osu.Game.Skinning.Editor
         {
             RelativeSizeAxes = Axes.Both;
 
-            const float menu_height = 40;
-
             InternalChild = new OsuContextMenuContainer
             {
                 RelativeSizeAxes = Axes.Both,
@@ -102,7 +102,7 @@ namespace osu.Game.Skinning.Editor
                                 Name = "Menu container",
                                 RelativeSizeAxes = Axes.X,
                                 Depth = float.MinValue,
-                                Height = menu_height,
+                                Height = MENU_HEIGHT,
                                 Children = new Drawable[]
                                 {
                                     new EditorMenuBar
@@ -322,7 +322,10 @@ namespace osu.Game.Skinning.Editor
 
         protected override void PopIn()
         {
-            this.FadeIn(TRANSITION_DURATION, Easing.OutQuint);
+            this
+                // align animation to happen after the majority of the ScalingContainer animation completes.
+                .Delay(ScalingContainer.TRANSITION_DURATION * 0.3f)
+                .FadeIn(TRANSITION_DURATION, Easing.OutQuint);
         }
 
         protected override void PopOut()

osu.Game/Skinning/Editor/SkinEditorOverlay.cs

@@ -12,6 +12,8 @@ using osu.Framework.Input.Events;
 using osu.Game.Graphics.Containers;
 using osu.Game.Input.Bindings;
 using osu.Game.Screens;
+using osu.Game.Screens.Edit.Components;
+using osuTK;
 
 namespace osu.Game.Skinning.Editor
 {
@@ -33,6 +35,8 @@ namespace osu.Game.Skinning.Editor
 
         private OsuScreen lastTargetScreen;
 
+        private Vector2 lastDrawSize;
+
         public SkinEditorOverlay(ScalingContainer scalingContainer)
         {
             this.scalingContainer = scalingContainer;
@@ -81,15 +85,42 @@ namespace osu.Game.Skinning.Editor
 
         protected override void PopOut() => skinEditor?.Hide();
 
+        protected override void Update()
+        {
+            base.Update();
+
+            if (game.DrawSize != lastDrawSize)
+            {
+                lastDrawSize = game.DrawSize;
+                updateScreenSizing();
+            }
+        }
+
+        private void updateScreenSizing()
+        {
+            if (skinEditor?.State.Value != Visibility.Visible) return;
+
+            const float padding = 10;
+
+            float relativeSidebarWidth = (EditorSidebar.WIDTH + padding) / DrawWidth;
+            float relativeToolbarHeight = (SkinEditorSceneLibrary.HEIGHT + SkinEditor.MENU_HEIGHT + padding) / DrawHeight;
+
+            var rect = new RectangleF(
+                relativeSidebarWidth,
+                relativeToolbarHeight,
+                1 - relativeSidebarWidth * 2,
+                1f - relativeToolbarHeight - padding / DrawHeight);
+
+            scalingContainer.SetCustomRect(rect, true);
+        }
+
         private void updateComponentVisibility()
         {
             Debug.Assert(skinEditor != null);
 
-            const float toolbar_padding_requirement = 0.18f;
-
             if (skinEditor.State.Value == Visibility.Visible)
             {
-                scalingContainer.SetCustomRect(new RectangleF(toolbar_padding_requirement, 0.2f, 0.8f - toolbar_padding_requirement, 0.7f), true);
+                Scheduler.AddOnce(updateScreenSizing);
 
                 game?.Toolbar.Hide();
                 game?.CloseAllOverlays();

osu.Game/Skinning/Editor/SkinEditorSceneLibrary.cs

@@ -27,6 +27,8 @@ namespace osu.Game.Skinning.Editor
 {
     public class SkinEditorSceneLibrary : CompositeDrawable
     {
+        public const float HEIGHT = BUTTON_HEIGHT + padding * 2;
+
         public const float BUTTON_HEIGHT = 40;
 
         private const float padding = 10;
@@ -42,7 +44,7 @@ namespace osu.Game.Skinning.Editor
 
         public SkinEditorSceneLibrary()
         {
-            Height = BUTTON_HEIGHT + padding * 2;
+            Height = HEIGHT;
         }
 
         [BackgroundDependencyLoader]