Merge pull request #14088 from bdach/colour-palette-add-remove

Add support for adding/removing colours to editor palette

osu.Game.Tests/Visual/UserInterface/TestSceneLabelledColourPalette.cs

@@ -1,16 +1,21 @@
 // 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.Linq;
 using NUnit.Framework;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Testing;
 using osu.Framework.Utils;
+using osu.Game.Graphics.Cursor;
+using osu.Game.Graphics.UserInterface;
 using osu.Game.Graphics.UserInterfaceV2;
 using osuTK.Graphics;
+using osuTK.Input;
 
 namespace osu.Game.Tests.Visual.UserInterface
 {
-    public class TestSceneLabelledColourPalette : OsuTestScene
+    public class TestSceneLabelledColourPalette : OsuManualInputManagerTestScene
     {
         private LabelledColourPalette component;
 
@@ -30,21 +35,41 @@ namespace osu.Game.Tests.Visual.UserInterface
             }, 8);
         }
 
+        [Test]
+        public void TestUserInteractions()
+        {
+            createColourPalette();
+            assertColourCount(4);
+
+            clickAddColour();
+            assertColourCount(5);
+
+            deleteFirstColour();
+            assertColourCount(4);
+
+            clickFirstColour();
+            AddAssert("colour picker spawned", () => this.ChildrenOfType<OsuColourPicker>().Any());
+        }
+
         private void createColourPalette(bool hasDescription = false)
         {
             AddStep("create component", () =>
             {
-                Child = new Container
+                Child = new OsuContextMenuContainer
                 {
-                    Anchor = Anchor.Centre,
+                    RelativeSizeAxes = Axes.Both,
-                    Origin = Anchor.Centre,
+                    Child = new Container
-                    Width = 500,
-                    AutoSizeAxes = Axes.Y,
-                    Child = component = new LabelledColourPalette
                     {
                         Anchor = Anchor.Centre,
                         Origin = Anchor.Centre,
-                        ColourNamePrefix = "My colour #"
+                        Width = 500,
+                        AutoSizeAxes = Axes.Y,
+                        Child = component = new LabelledColourPalette
+                        {
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            ColourNamePrefix = "My colour #"
+                        }
                     }
                 };
 
@@ -66,5 +91,36 @@ namespace osu.Game.Tests.Visual.UserInterface
             RNG.NextSingle(),
             RNG.NextSingle(),
             1);
+
+        private void assertColourCount(int count) => AddAssert($"colour count is {count}", () => component.Colours.Count == count);
+
+        private void clickAddColour() => AddStep("click new colour button", () =>
+        {
+            InputManager.MoveMouseTo(this.ChildrenOfType<ColourPalette.AddColourButton>().Single());
+            InputManager.Click(MouseButton.Left);
+        });
+
+        private void clickFirstColour() => AddStep("click first colour", () =>
+        {
+            InputManager.MoveMouseTo(this.ChildrenOfType<ColourDisplay>().First());
+            InputManager.Click(MouseButton.Left);
+        });
+
+        private void deleteFirstColour()
+        {
+            AddStep("right-click first colour", () =>
+            {
+                InputManager.MoveMouseTo(this.ChildrenOfType<ColourDisplay>().First());
+                InputManager.Click(MouseButton.Right);
+            });
+
+            AddUntilStep("wait for menu", () => this.ChildrenOfType<OsuContextMenu>().Any());
+
+            AddStep("click delete", () =>
+            {
+                InputManager.MoveMouseTo(this.ChildrenOfType<DrawableOsuMenuItem>().Single());
+                InputManager.Click(MouseButton.Left);
+            });
+        }
     }
 }

osu.Game/Graphics/UserInterfaceV2/ColourDisplay.cs

@@ -1,6 +1,7 @@
 // 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 osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Extensions;
@@ -12,6 +13,7 @@ using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Localisation;
 using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
+using osu.Game.Graphics.UserInterface;
 using osuTK;
 
 namespace osu.Game.Graphics.UserInterfaceV2
@@ -19,12 +21,16 @@ namespace osu.Game.Graphics.UserInterfaceV2
     /// <summary>
     /// A component which displays a colour along with related description text.
     /// </summary>
-    public class ColourDisplay : CompositeDrawable, IHasCurrentValue<Colour4>, IHasPopover
+    public class ColourDisplay : CompositeDrawable, IHasCurrentValue<Colour4>
     {
+        /// <summary>
+        /// Invoked when the user has requested the colour corresponding to this <see cref="ColourDisplay"/>
+        /// to be removed from its palette.
+        /// </summary>
+        public event Action<ColourDisplay> DeleteRequested;
+
         private readonly BindableWithCurrent<Colour4> current = new BindableWithCurrent<Colour4>();
 
-        private Box fill;
-        private OsuSpriteText colourHexCode;
         private OsuSpriteText colourName;
 
         public Bindable<Colour4> Current
@@ -63,26 +69,10 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 Spacing = new Vector2(0, 10),
                 Children = new Drawable[]
                 {
-                    new OsuClickableContainer
+                    new ColourCircle
                     {
-                        RelativeSizeAxes = Axes.X,
+                        Current = { BindTarget = Current },
-                        Height = 100,
+                        DeleteRequested = () => DeleteRequested?.Invoke(this)
-                        CornerRadius = 50,
-                        Masking = true,
-                        Children = new Drawable[]
-                        {
-                            fill = new Box
-                            {
-                                RelativeSizeAxes = Axes.Both
-                            },
-                            colourHexCode = new OsuSpriteText
-                            {
-                                Anchor = Anchor.Centre,
-                                Origin = Anchor.Centre,
-                                Font = OsuFont.Default.With(size: 12)
-                            }
-                        },
-                        Action = this.ShowPopover
                     },
                     colourName = new OsuSpriteText
                     {
@@ -93,26 +83,64 @@ namespace osu.Game.Graphics.UserInterfaceV2
             };
         }
 
-        protected override void LoadComplete()
+        private class ColourCircle : OsuClickableContainer, IHasPopover, IHasContextMenu
         {
-            base.LoadComplete();
+            public Bindable<Colour4> Current { get; } = new Bindable<Colour4>();
 
-            current.BindValueChanged(_ => updateColour(), true);
+            public Action DeleteRequested { get; set; }
-        }
 
-        private void updateColour()
+            private readonly Box fill;
-        {
+            private readonly OsuSpriteText colourHexCode;
-            fill.Colour = current.Value;
-            colourHexCode.Text = current.Value.ToHex();
-            colourHexCode.Colour = OsuColour.ForegroundTextColourFor(current.Value);
-        }
 
-        public Popover GetPopover() => new OsuPopover(false)
+            public ColourCircle()
-        {
-            Child = new OsuColourPicker
             {
-                Current = { BindTarget = Current }
+                RelativeSizeAxes = Axes.X;
+                Height = 100;
+                CornerRadius = 50;
+                Masking = true;
+                Action = this.ShowPopover;
+
+                Children = new Drawable[]
+                {
+                    fill = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both
+                    },
+                    colourHexCode = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.Default.With(size: 12)
+                    }
+                };
             }
-        };
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                Current.BindValueChanged(_ => updateColour(), true);
+            }
+
+            private void updateColour()
+            {
+                fill.Colour = Current.Value;
+                colourHexCode.Text = Current.Value.ToHex();
+                colourHexCode.Colour = OsuColour.ForegroundTextColourFor(Current.Value);
+            }
+
+            public Popover GetPopover() => new OsuPopover(false)
+            {
+                Child = new OsuColourPicker
+                {
+                    Current = { BindTarget = Current }
+                }
+            };
+
+            public MenuItem[] ContextMenuItems => new MenuItem[]
+            {
+                new OsuMenuItem("Delete", MenuItemType.Destructive, () => DeleteRequested?.Invoke())
+            };
+        }
     }
 }

osu.Game/Graphics/UserInterfaceV2/ColourPalette.cs

@@ -1,12 +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.Collections.Generic;
 using System.Collections.Specialized;
 using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Bindables;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Containers;
 using osu.Game.Graphics.Sprites;
 using osuTK;
 
@@ -36,36 +41,24 @@ namespace osu.Game.Graphics.UserInterfaceV2
             }
         }
 
-        private FillFlowContainer<ColourDisplay> palette;
+        private FillFlowContainer palette;
-        private Container placeholder;
+
+        private IEnumerable<ColourDisplay> colourDisplays => palette.OfType<ColourDisplay>();
 
         [BackgroundDependencyLoader]
         private void load()
         {
             RelativeSizeAxes = Axes.X;
             AutoSizeAxes = Axes.Y;
+            AutoSizeDuration = fade_duration;
+            AutoSizeEasing = Easing.OutQuint;
 
-            InternalChildren = new Drawable[]
+            InternalChild = palette = new FillFlowContainer
             {
-                palette = new FillFlowContainer<ColourDisplay>
+                RelativeSizeAxes = Axes.X,
-                {
+                AutoSizeAxes = Axes.Y,
-                    RelativeSizeAxes = Axes.X,
+                Spacing = new Vector2(10),
-                    AutoSizeAxes = Axes.Y,
+                Direction = FillDirection.Full
-                    Spacing = new Vector2(10),
-                    Direction = FillDirection.Full
-                },
-                placeholder = new Container
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Child = new OsuSpriteText
-                    {
-                        Anchor = Anchor.CentreRight,
-                        Origin = Anchor.CentreRight,
-                        Text = "(none)",
-                        Font = OsuFont.Default.With(weight: FontWeight.Bold)
-                    }
-                }
             };
         }
 
@@ -73,30 +66,20 @@ namespace osu.Game.Graphics.UserInterfaceV2
         {
             base.LoadComplete();
 
-            Colours.BindCollectionChanged((_, args) => updatePalette(args), true);
+            Colours.BindCollectionChanged((_, args) =>
+            {
+                if (args.Action != NotifyCollectionChangedAction.Replace)
+                    updatePalette();
+            }, true);
             FinishTransforms(true);
         }
 
         private const int fade_duration = 200;
 
-        private void updatePalette(NotifyCollectionChangedEventArgs args)
+        private void updatePalette()
         {
-            if (args.Action == NotifyCollectionChangedAction.Replace)
-                return;
-
             palette.Clear();
 
-            if (Colours.Any())
-            {
-                palette.FadeIn(fade_duration, Easing.OutQuint);
-                placeholder.FadeOut(fade_duration, Easing.OutQuint);
-            }
-            else
-            {
-                palette.FadeOut(fade_duration, Easing.OutQuint);
-                placeholder.FadeIn(fade_duration, Easing.OutQuint);
-            }
-
             for (int i = 0; i < Colours.Count; ++i)
             {
                 // copy to avoid accesses to modified closure.
@@ -109,20 +92,91 @@ namespace osu.Game.Graphics.UserInterfaceV2
                 });
 
                 display.Current.BindValueChanged(colour => Colours[colourIndex] = colour.NewValue);
+                display.DeleteRequested += colourDeletionRequested;
             }
 
+            palette.Add(new AddColourButton
+            {
+                Action = () => Colours.Add(Colour4.White)
+            });
+
             reindexItems();
         }
 
+        private void colourDeletionRequested(ColourDisplay display) => Colours.RemoveAt(palette.IndexOf(display));
+
         private void reindexItems()
         {
             int index = 1;
 
-            foreach (var colour in palette)
+            foreach (var colourDisplay in colourDisplays)
             {
-                colour.ColourName = $"{colourNamePrefix} {index}";
+                colourDisplay.ColourName = $"{colourNamePrefix} {index}";
                 index += 1;
             }
         }
+
+        internal class AddColourButton : CompositeDrawable
+        {
+            public Action Action
+            {
+                set => circularButton.Action = value;
+            }
+
+            private readonly OsuClickableContainer circularButton;
+
+            public AddColourButton()
+            {
+                AutoSizeAxes = Axes.Y;
+                Width = 100;
+
+                InternalChild = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(0, 10),
+                    Children = new Drawable[]
+                    {
+                        circularButton = new OsuClickableContainer
+                        {
+                            RelativeSizeAxes = Axes.X,
+                            Height = 100,
+                            CornerRadius = 50,
+                            Masking = true,
+                            BorderThickness = 5,
+                            Children = new Drawable[]
+                            {
+                                new Box
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Colour = Colour4.Transparent,
+                                    AlwaysPresent = true
+                                },
+                                new SpriteIcon
+                                {
+                                    Anchor = Anchor.Centre,
+                                    Origin = Anchor.Centre,
+                                    Size = new Vector2(20),
+                                    Icon = FontAwesome.Solid.Plus
+                                }
+                            }
+                        },
+                        new OsuSpriteText
+                        {
+                            Anchor = Anchor.TopCentre,
+                            Origin = Anchor.TopCentre,
+                            Text = "New"
+                        }
+                    }
+                };
+            }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                circularButton.BorderColour = colours.BlueDarker;
+            }
+        }
     }
 }