Add component list to main editor interface and enable basic placement

osu.Game.Tests/Visual/Gameplay/TestSceneSkinEditor.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using NUnit.Framework;
+using osu.Framework.Graphics;
 using osu.Framework.Testing;
 using osu.Game.Rulesets;
 using osu.Game.Rulesets.Osu;
@@ -21,6 +22,7 @@ namespace osu.Game.Tests.Visual.Gameplay
             AddStep("add editor overlay", () =>
             {
                 skinEditor?.Expire();
+                Player.ScaleTo(SkinEditorContainer.VISIBLE_TARGET_SCALE);
                 LoadComponentAsync(skinEditor = new SkinEditor(Player), Add);
             });
         }

osu.Game/Skinning/Editor/SkinComponentToolbox.cs

@@ -8,6 +8,8 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osu.Game.Screens.Play.HUD;
@@ -18,10 +20,12 @@ namespace osu.Game.Skinning.Editor
 {
     public class SkinComponentToolbox : CompositeDrawable
     {
+        public Action<Type> RequestPlacement;
+
         public SkinComponentToolbox()
         {
             RelativeSizeAxes = Axes.Y;
-            Width = 500;
+            Width = 200;
         }
 
         [BackgroundDependencyLoader]
@@ -36,9 +40,6 @@ namespace osu.Game.Skinning.Editor
                 {
                     RelativeSizeAxes = Axes.X,
                     AutoSizeAxes = Axes.Y,
-                    Anchor = Anchor.TopCentre,
-                    Origin = Anchor.TopCentre,
-                    Width = 0.5f,
                     Direction = FillDirection.Vertical,
                     Spacing = new Vector2(20)
                 }
@@ -48,13 +49,17 @@ namespace osu.Game.Skinning.Editor
 
             foreach (var type in skinnableTypes)
             {
-                var container = attemptAddComponent(type);
+                var component = attemptAddComponent(type);
-                if (container != null)
+
-                    fill.Add(container);
+                if (component != null)
+                {
+                    component.RequestPlacement = t => RequestPlacement?.Invoke(t);
+                    fill.Add(component);
+                }
             }
         }
 
-        private static Drawable attemptAddComponent(Type type)
+        private static ToolboxComponent attemptAddComponent(Type type)
         {
             try
             {
@@ -66,15 +71,20 @@ namespace osu.Game.Skinning.Editor
             }
             catch
             {
+                return null;
             }
-
-            return null;
         }
 
         private class ToolboxComponent : CompositeDrawable
         {
-            public ToolboxComponent(Drawable instance)
+            private readonly Drawable component;
+            private readonly Box box;
+
+            public Action<Type> RequestPlacement;
+
+            public ToolboxComponent(Drawable component)
             {
+                this.component = component;
                 Container innerContainer;
 
                 RelativeSizeAxes = Axes.X;
@@ -86,7 +96,7 @@ namespace osu.Game.Skinning.Editor
                     AutoSizeAxes = Axes.Y,
                     Children = new Drawable[]
                     {
-                        new OsuSpriteText { Text = instance.GetType().Name },
+                        new OsuSpriteText { Text = component.GetType().Name },
                         innerContainer = new Container
                         {
                             RelativeSizeAxes = Axes.X,
@@ -95,13 +105,13 @@ namespace osu.Game.Skinning.Editor
                             CornerRadius = 10,
                             Children = new[]
                             {
-                                new Box
+                                box = new Box
                                 {
                                     Colour = Color4.Black,
                                     Alpha = 0.5f,
                                     RelativeSizeAxes = Axes.Both,
                                 },
-                                instance
+                                component
                             }
                         },
                     }
@@ -109,16 +119,16 @@ namespace osu.Game.Skinning.Editor
 
                 // adjust provided component to fit / display in a known state.
 
-                instance.Anchor = Anchor.Centre;
+                component.Anchor = Anchor.Centre;
-                instance.Origin = Anchor.Centre;
+                component.Origin = Anchor.Centre;
 
-                if (instance.RelativeSizeAxes != Axes.None)
+                if (component.RelativeSizeAxes != Axes.None)
                 {
                     innerContainer.AutoSizeAxes = Axes.None;
                     innerContainer.Height = 100;
                 }
 
-                switch (instance)
+                switch (component)
                 {
                     case IScoreCounter score:
                         score.Current.Value = 133773;
@@ -129,6 +139,27 @@ namespace osu.Game.Skinning.Editor
                         break;
                 }
             }
+
+            [Resolved]
+            private OsuColour colours { get; set; }
+
+            protected override bool OnClick(ClickEvent e)
+            {
+                RequestPlacement?.Invoke(component.GetType());
+                return true;
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                box.FadeColour(colours.Yellow, 100);
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                box.FadeColour(Color4.Black, 100);
+                base.OnHoverLost(e);
+            }
         }
     }
 }

osu.Game/Skinning/Editor/SkinEditor.cs

@@ -1,13 +1,17 @@
 // Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System;
+using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Input.Events;
+using osu.Framework.Testing;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Cursor;
+using osu.Game.Screens.Play;
 
 namespace osu.Game.Skinning.Editor
 {
@@ -45,6 +49,12 @@ namespace osu.Game.Skinning.Editor
                         RelativeSizeAxes = Axes.X
                     },
                     new SkinBlueprintContainer(target),
+                    new SkinComponentToolbox
+                    {
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        RequestPlacement = placeComponent
+                    }
                 }
             };
 
@@ -56,6 +66,15 @@ namespace osu.Game.Skinning.Editor
             });
         }
 
+        private void placeComponent(Type type)
+        {
+            var instance = (Drawable)Activator.CreateInstance(type);
+
+            var targetContainer = target.ChildrenOfType<HUDOverlay>().FirstOrDefault();
+
+            targetContainer?.Add(instance);
+        }
+
         protected override void LoadComplete()
         {
             base.LoadComplete();

osu.Game/Skinning/Editor/SkinEditorContainer.cs

@@ -20,7 +20,7 @@ namespace osu.Game.Skinning.Editor
         private readonly ScalingContainer target;
         private SkinEditor skinEditor;
 
-        private const float visible_target_scale = 0.8f;
+        public const float VISIBLE_TARGET_SCALE = 0.8f;
 
         [Resolved]
         private OsuColour colours { get; set; }
@@ -63,12 +63,14 @@ namespace osu.Game.Skinning.Editor
         {
             if (visibility.NewValue == Visibility.Visible)
             {
-                target.ScaleTo(visible_target_scale, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
-
                 target.Masking = true;
                 target.BorderThickness = 5;
                 target.BorderColour = colours.Yellow;
                 target.AllowScaling = false;
+                target.RelativePositionAxes = Axes.Both;
+
+                target.ScaleTo(VISIBLE_TARGET_SCALE, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
+                target.MoveToX(0.1f, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
             }
             else
             {
@@ -76,6 +78,7 @@ namespace osu.Game.Skinning.Editor
                 target.AllowScaling = true;
 
                 target.ScaleTo(1, SkinEditor.TRANSITION_DURATION, Easing.OutQuint).OnComplete(_ => target.Masking = false);
+                target.MoveToX(0f, SkinEditor.TRANSITION_DURATION, Easing.OutQuint);
             }
         }