h1or4dme8/osu-lazer
1
0
Fork 0
mirror of https://github.com/ppy/osu.git synced 2025-01-15 20:22:55 +08:00
Code Issues Releases Wiki Activity

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

Browse Source 
Add support for adding/removing colours to editor palette
This commit is contained in:
Dan Balasescu 2021-08-02 10:50:34 +09:00 committed by GitHub
commit f3626efcaa
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 223 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
osu.Game.Tests/Visual/UserInterface/TestSceneLabelledColourPalette.cs
View File

@ -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,
Origin = Anchor.Centre,
Width = 500,
AutoSizeAxes = Axes.Y,
Child = component = new LabelledColourPalette
RelativeSizeAxes = Axes.Both,
Child = new Container
{
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);
});
}
}
}

102
osu.Game/Graphics/UserInterfaceV2/ColourDisplay.cs
View File

@ -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,
Height = 100,
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
Current = { BindTarget = Current },
DeleteRequested = () => DeleteRequested?.Invoke(this)
},
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()
{
fill.Colour = current.Value;
colourHexCode.Text = current.Value.ToHex();
colourHexCode.Colour = OsuColour.ForegroundTextColourFor(current.Value);
}
private readonly Box fill;
private readonly OsuSpriteText colourHexCode;
public Popover GetPopover() => new OsuPopover(false)
{
Child = new OsuColourPicker
public ColourCircle()
{
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())
};
}
}
}

134
osu.Game/Graphics/UserInterfaceV2/ColourPalette.cs
View File

@ -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 Container placeholder;
private FillFlowContainer palette;
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,
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)
}
}
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Spacing = new Vector2(10),
Direction = FillDirection.Full
};
}
@ -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;
}
}
}
}