From a9e662a2b6d593681acb0e54058cec9635f013ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Tue, 18 Jun 2024 14:55:59 +0200 Subject: [PATCH 1/4] Add break display to editor timeline --- .../Components/Timeline/TimelineBreak.cs | 87 +++++++++++++++++ .../Timeline/TimelineBreakDisplay.cs | 94 +++++++++++++++++++ .../Screens/Edit/Compose/ComposeScreen.cs | 10 +- 3 files changed, 190 insertions(+), 1 deletion(-) create mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs create mode 100644 osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreakDisplay.cs diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs new file mode 100644 index 000000000000..dc5466164400 --- /dev/null +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs @@ -0,0 +1,87 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. +// See the LICENCE file in the repository root for full licence text. + +using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Containers; +using osu.Framework.Graphics.Shapes; +using osu.Game.Beatmaps.Timing; +using osu.Game.Graphics; +using osu.Game.Graphics.Sprites; + +namespace osu.Game.Screens.Edit.Compose.Components.Timeline +{ + public partial class TimelineBreak : CompositeDrawable + { + public BreakPeriod Break { get; } + + public TimelineBreak(BreakPeriod b) + { + Break = b; + } + + [BackgroundDependencyLoader] + private void load(OsuColour colours) + { + RelativePositionAxes = Axes.X; + RelativeSizeAxes = Axes.Both; + Origin = Anchor.TopLeft; + X = (float)Break.StartTime; + Width = (float)Break.Duration; + CornerRadius = 10; + Masking = true; + + InternalChildren = new Drawable[] + { + new Box + { + RelativeSizeAxes = Axes.Both, + Colour = colours.GreyCarmineLight, + Alpha = 0.4f, + }, + new Circle + { + Anchor = Anchor.CentreLeft, + Origin = Anchor.CentreLeft, + RelativeSizeAxes = Axes.Y, + Width = 10, + CornerRadius = 5, + Colour = colours.GreyCarmineLighter, + }, + new OsuSpriteText + { + Anchor = Anchor.TopLeft, + Origin = Anchor.TopLeft, + Text = "Break", + Margin = new MarginPadding + { + Left = 16, + Top = 3, + }, + Colour = colours.GreyCarmineLighter, + }, + new Circle + { + Anchor = Anchor.CentreRight, + Origin = Anchor.CentreRight, + RelativeSizeAxes = Axes.Y, + Width = 10, + CornerRadius = 5, + Colour = colours.GreyCarmineLighter, + }, + new OsuSpriteText + { + Anchor = Anchor.TopRight, + Origin = Anchor.TopRight, + Text = "Break", + Margin = new MarginPadding + { + Right = 16, + Top = 3, + }, + Colour = colours.GreyCarmineLighter, + }, + }; + } + } +} diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreakDisplay.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreakDisplay.cs new file mode 100644 index 000000000000..587db23e9ad9 --- /dev/null +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreakDisplay.cs @@ -0,0 +1,94 @@ +// Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. +// See the LICENCE file in the repository root for full licence text. + +using osu.Framework.Allocation; +using osu.Framework.Bindables; +using osu.Framework.Caching; +using osu.Game.Beatmaps.Timing; +using osu.Game.Screens.Edit.Components.Timelines.Summary.Parts; + +namespace osu.Game.Screens.Edit.Compose.Components.Timeline +{ + public partial class TimelineBreakDisplay : TimelinePart + { + [Resolved] + private Timeline timeline { get; set; } = null!; + + /// + /// The visible time/position range of the timeline. + /// + private (float min, float max) visibleRange = (float.MinValue, float.MaxValue); + + private readonly Cached breakCache = new Cached(); + + private readonly BindableList breaks = new BindableList(); + + protected override void LoadBeatmap(EditorBeatmap beatmap) + { + base.LoadBeatmap(beatmap); + + // TODO: this will have to be mutable soon enough + breaks.AddRange(beatmap.Breaks); + } + + protected override void Update() + { + base.Update(); + + if (DrawWidth <= 0) return; + + (float, float) newRange = ( + (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopLeft).X) / DrawWidth * Content.RelativeChildSize.X, + (ToLocalSpace(timeline.ScreenSpaceDrawQuad.TopRight).X) / DrawWidth * Content.RelativeChildSize.X); + + if (visibleRange != newRange) + { + visibleRange = newRange; + breakCache.Invalidate(); + } + + if (!breakCache.IsValid) + { + recreateBreaks(); + breakCache.Validate(); + } + } + + private void recreateBreaks() + { + // Remove groups outside the visible range + foreach (TimelineBreak drawableBreak in this) + { + if (!shouldBeVisible(drawableBreak.Break)) + drawableBreak.Expire(); + } + + // Add remaining ones + for (int i = 0; i < breaks.Count; i++) + { + var breakPeriod = breaks[i]; + + if (!shouldBeVisible(breakPeriod)) + continue; + + bool alreadyVisible = false; + + foreach (var b in this) + { + if (ReferenceEquals(b.Break, breakPeriod)) + { + alreadyVisible = true; + break; + } + } + + if (alreadyVisible) + continue; + + Add(new TimelineBreak(breakPeriod)); + } + } + + private bool shouldBeVisible(BreakPeriod breakPeriod) => breakPeriod.EndTime >= visibleRange.min && breakPeriod.StartTime <= visibleRange.max; + } +} diff --git a/osu.Game/Screens/Edit/Compose/ComposeScreen.cs b/osu.Game/Screens/Edit/Compose/ComposeScreen.cs index 0a58b34da61b..ed4ef896f5b4 100644 --- a/osu.Game/Screens/Edit/Compose/ComposeScreen.cs +++ b/osu.Game/Screens/Edit/Compose/ComposeScreen.cs @@ -69,7 +69,15 @@ protected override Drawable CreateTimelineContent() if (ruleset == null || composer == null) return base.CreateTimelineContent(); - return wrapSkinnableContent(new TimelineBlueprintContainer(composer)); + return wrapSkinnableContent(new Container + { + RelativeSizeAxes = Axes.Both, + Children = new Drawable[] + { + new TimelineBreakDisplay { RelativeSizeAxes = Axes.Both, }, + new TimelineBlueprintContainer(composer) + } + }); } private Drawable wrapSkinnableContent(Drawable content) From 814f1e552fdfafddad2868e8cccbf4c721bd6c3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Tue, 18 Jun 2024 15:41:43 +0200 Subject: [PATCH 2/4] Implement ability to manually adjust breaks --- .../Components/Timeline/TimelineBreak.cs | 211 ++++++++++++++---- .../Screens/Edit/Compose/ComposeScreen.cs | 2 +- 2 files changed, 171 insertions(+), 42 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs index dc5466164400..785eba204207 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs @@ -1,13 +1,20 @@ // Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. // See the LICENCE file in the repository root for full licence text. +using System; +using System.Diagnostics; +using System.Linq; using osu.Framework.Allocation; +using osu.Framework.Extensions.Color4Extensions; using osu.Framework.Graphics; using osu.Framework.Graphics.Containers; using osu.Framework.Graphics.Shapes; +using osu.Framework.Input.Events; using osu.Game.Beatmaps.Timing; using osu.Game.Graphics; using osu.Game.Graphics.Sprites; +using osu.Game.Rulesets.Objects; +using osuTK; namespace osu.Game.Screens.Edit.Compose.Components.Timeline { @@ -26,62 +33,184 @@ private void load(OsuColour colours) RelativePositionAxes = Axes.X; RelativeSizeAxes = Axes.Both; Origin = Anchor.TopLeft; - X = (float)Break.StartTime; - Width = (float)Break.Duration; - CornerRadius = 10; - Masking = true; + Padding = new MarginPadding { Horizontal = -5 }; InternalChildren = new Drawable[] { - new Box + new Container { RelativeSizeAxes = Axes.Both, - Colour = colours.GreyCarmineLight, - Alpha = 0.4f, - }, - new Circle - { - Anchor = Anchor.CentreLeft, - Origin = Anchor.CentreLeft, - RelativeSizeAxes = Axes.Y, - Width = 10, - CornerRadius = 5, - Colour = colours.GreyCarmineLighter, - }, - new OsuSpriteText - { - Anchor = Anchor.TopLeft, - Origin = Anchor.TopLeft, - Text = "Break", - Margin = new MarginPadding + Padding = new MarginPadding { Horizontal = 5 }, + Child = new Box { - Left = 16, - Top = 3, + RelativeSizeAxes = Axes.Both, + Colour = colours.GreyCarmineLight, + Alpha = 0.4f, }, - Colour = colours.GreyCarmineLighter, }, - new Circle + new DragHandle(Break, isStartHandle: true) { - Anchor = Anchor.CentreRight, - Origin = Anchor.CentreRight, - RelativeSizeAxes = Axes.Y, - Width = 10, - CornerRadius = 5, - Colour = colours.GreyCarmineLighter, + Anchor = Anchor.TopLeft, + Origin = Anchor.TopLeft, + Action = (time, breakPeriod) => breakPeriod.StartTime = time, }, - new OsuSpriteText + new DragHandle(Break, isStartHandle: false) { Anchor = Anchor.TopRight, Origin = Anchor.TopRight, - Text = "Break", - Margin = new MarginPadding - { - Right = 16, - Top = 3, - }, - Colour = colours.GreyCarmineLighter, + Action = (time, breakPeriod) => breakPeriod.EndTime = time, }, }; } + + protected override void Update() + { + base.Update(); + + X = (float)Break.StartTime; + Width = (float)Break.Duration; + } + + private partial class DragHandle : FillFlowContainer + { + public new Anchor Anchor + { + get => base.Anchor; + init => base.Anchor = value; + } + + public Action? Action { get; init; } + + private readonly BreakPeriod breakPeriod; + private readonly bool isStartHandle; + + private Container handle = null!; + private (double min, double max)? allowedDragRange; + + [Resolved] + private EditorBeatmap beatmap { get; set; } = null!; + + [Resolved] + private Timeline timeline { get; set; } = null!; + + [Resolved] + private IEditorChangeHandler? changeHandler { get; set; } + + [Resolved] + private OsuColour colours { get; set; } = null!; + + public DragHandle(BreakPeriod breakPeriod, bool isStartHandle) + { + this.breakPeriod = breakPeriod; + this.isStartHandle = isStartHandle; + } + + [BackgroundDependencyLoader] + private void load() + { + AutoSizeAxes = Axes.X; + RelativeSizeAxes = Axes.Y; + Direction = FillDirection.Horizontal; + Spacing = new Vector2(5); + + Children = new Drawable[] + { + handle = new Container + { + Anchor = Anchor, + Origin = Anchor, + RelativeSizeAxes = Axes.Y, + CornerRadius = 5, + Masking = true, + Child = new Box + { + RelativeSizeAxes = Axes.Both, + Colour = Colour4.White, + }, + }, + new OsuSpriteText + { + BypassAutoSizeAxes = Axes.X, + Anchor = Anchor, + Origin = Anchor, + Text = "Break", + Margin = new MarginPadding { Top = 2, }, + }, + }; + } + + protected override void LoadComplete() + { + base.LoadComplete(); + + updateState(); + FinishTransforms(true); + } + + protected override bool OnHover(HoverEvent e) + { + updateState(); + return true; + } + + protected override void OnHoverLost(HoverLostEvent e) + { + updateState(); + base.OnHoverLost(e); + } + + protected override bool OnDragStart(DragStartEvent e) + { + changeHandler?.BeginChange(); + updateState(); + + double min = beatmap.HitObjects.Last(ho => ho.GetEndTime() <= breakPeriod.StartTime).GetEndTime(); + double max = beatmap.HitObjects.First(ho => ho.StartTime >= breakPeriod.EndTime).StartTime; + + if (isStartHandle) + max = Math.Min(max, breakPeriod.EndTime - BreakPeriod.MIN_BREAK_DURATION); + else + min = Math.Max(min, breakPeriod.StartTime + BreakPeriod.MIN_BREAK_DURATION); + + allowedDragRange = (min, max); + + return true; + } + + protected override void OnDrag(DragEvent e) + { + base.OnDrag(e); + + Debug.Assert(allowedDragRange != null); + + if (timeline.FindSnappedPositionAndTime(e.ScreenSpaceMousePosition).Time is double time + && time > allowedDragRange.Value.min + && time < allowedDragRange.Value.max) + { + Action?.Invoke(time, breakPeriod); + } + + updateState(); + } + + protected override void OnDragEnd(DragEndEvent e) + { + changeHandler?.EndChange(); + updateState(); + base.OnDragEnd(e); + } + + private void updateState() + { + bool active = IsHovered || IsDragged; + + var colour = colours.GreyCarmineLighter; + if (active) + colour = colour.Lighten(0.3f); + + this.FadeColour(colour, 400, Easing.OutQuint); + handle.ResizeWidthTo(active ? 20 : 10, 400, Easing.OutElastic); + } + } } } diff --git a/osu.Game/Screens/Edit/Compose/ComposeScreen.cs b/osu.Game/Screens/Edit/Compose/ComposeScreen.cs index ed4ef896f5b4..9b945e1d6d27 100644 --- a/osu.Game/Screens/Edit/Compose/ComposeScreen.cs +++ b/osu.Game/Screens/Edit/Compose/ComposeScreen.cs @@ -74,8 +74,8 @@ protected override Drawable CreateTimelineContent() RelativeSizeAxes = Axes.Both, Children = new Drawable[] { + new TimelineBlueprintContainer(composer), new TimelineBreakDisplay { RelativeSizeAxes = Axes.Both, }, - new TimelineBlueprintContainer(composer) } }); } From f88f05717a9d147da880720e8b3bf9df8f3d9a36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bart=C5=82omiej=20Dach?= Date: Tue, 18 Jun 2024 15:54:34 +0200 Subject: [PATCH 3/4] Fix bottom timeline break visualisations not updating --- .../Timelines/Summary/Parts/BreakPart.cs | 20 +++++++++++++--- .../Visualisations/DurationVisualisation.cs | 23 ------------------- 2 files changed, 17 insertions(+), 26 deletions(-) delete mode 100644 osu.Game/Screens/Edit/Components/Timelines/Summary/Visualisations/DurationVisualisation.cs diff --git a/osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/BreakPart.cs b/osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/BreakPart.cs index e502dd951b2d..41ecb44d9ddd 100644 --- a/osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/BreakPart.cs +++ b/osu.Game/Screens/Edit/Components/Timelines/Summary/Parts/BreakPart.cs @@ -2,9 +2,10 @@ // See the LICENCE file in the repository root for full licence text. using osu.Framework.Allocation; +using osu.Framework.Graphics; +using osu.Framework.Graphics.Shapes; using osu.Game.Beatmaps.Timing; using osu.Game.Graphics; -using osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations; namespace osu.Game.Screens.Edit.Components.Timelines.Summary.Parts { @@ -20,11 +21,24 @@ protected override void LoadBeatmap(EditorBeatmap beatmap) Add(new BreakVisualisation(breakPeriod)); } - private partial class BreakVisualisation : DurationVisualisation + private partial class BreakVisualisation : Circle { + private readonly BreakPeriod breakPeriod; + public BreakVisualisation(BreakPeriod breakPeriod) - : base(breakPeriod.StartTime, breakPeriod.EndTime) { + this.breakPeriod = breakPeriod; + + RelativePositionAxes = Axes.X; + RelativeSizeAxes = Axes.Both; + } + + protected override void Update() + { + base.Update(); + + X = (float)breakPeriod.StartTime; + Width = (float)breakPeriod.Duration; } [BackgroundDependencyLoader] diff --git a/osu.Game/Screens/Edit/Components/Timelines/Summary/Visualisations/DurationVisualisation.cs b/osu.Game/Screens/Edit/Components/Timelines/Summary/Visualisations/DurationVisualisation.cs deleted file mode 100644 index bfb50a05eaa7..000000000000 --- a/osu.Game/Screens/Edit/Components/Timelines/Summary/Visualisations/DurationVisualisation.cs +++ /dev/null @@ -1,23 +0,0 @@ -// Copyright (c) ppy Pty Ltd . Licensed under the MIT Licence. -// See the LICENCE file in the repository root for full licence text. - -using osu.Framework.Graphics; -using osu.Framework.Graphics.Shapes; - -namespace osu.Game.Screens.Edit.Components.Timelines.Summary.Visualisations -{ - /// - /// Represents a spanning point on a timeline part. - /// - public partial class DurationVisualisation : Circle - { - protected DurationVisualisation(double startTime, double endTime) - { - RelativePositionAxes = Axes.X; - RelativeSizeAxes = Axes.Both; - - X = (float)startTime; - Width = (float)(endTime - startTime); - } - } -} From 00a866b699403367fdf8de66e1a7e0e8e5f55af3 Mon Sep 17 00:00:00 2001 From: Dean Herbert Date: Wed, 19 Jun 2024 20:30:43 +0800 Subject: [PATCH 4/4] Change colour to match bottom timeline (and adjust tween sligthly) --- .../Edit/Compose/Components/Timeline/TimelineBreak.cs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs index 785eba204207..ec963d08c97b 100644 --- a/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs +++ b/osu.Game/Screens/Edit/Compose/Components/Timeline/TimelineBreak.cs @@ -44,7 +44,7 @@ private void load(OsuColour colours) Child = new Box { RelativeSizeAxes = Axes.Both, - Colour = colours.GreyCarmineLight, + Colour = colours.PurpleLight, Alpha = 0.4f, }, }, @@ -204,12 +204,12 @@ private void updateState() { bool active = IsHovered || IsDragged; - var colour = colours.GreyCarmineLighter; + var colour = colours.PurpleLighter; if (active) colour = colour.Lighten(0.3f); this.FadeColour(colour, 400, Easing.OutQuint); - handle.ResizeWidthTo(active ? 20 : 10, 400, Easing.OutElastic); + handle.ResizeWidthTo(active ? 20 : 10, 400, Easing.OutElasticHalf); } } }