Merge pull request #6634 from peppy/editor-timing-screen

Add editor timing screen

osu.Game.Tests/Visual/Editor/TestSceneTimingScreen.cs

@@ -0,0 +1,35 @@
+// 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 NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Game.Rulesets.Osu;
+using osu.Game.Screens.Edit.Timing;
+
+namespace osu.Game.Tests.Visual.Editor
+{
+    [TestFixture]
+    public class TestSceneTimingScreen : EditorClockTestScene
+    {
+        public override IReadOnlyList<Type> RequiredTypes => new[]
+        {
+            typeof(ControlPointTable),
+            typeof(ControlPointSettings),
+            typeof(Section<>),
+            typeof(TimingSection),
+            typeof(EffectSection),
+            typeof(SampleSection),
+            typeof(DifficultySection),
+            typeof(RowAttribute)
+        };
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Beatmap.Value = CreateWorkingBeatmap(new OsuRuleset().RulesetInfo);
+            Child = new TimingScreen();
+        }
+    }
+}

osu.Game/Beatmaps/ControlPoints/TimingControlPoint.cs

@@ -43,6 +43,11 @@ namespace osu.Game.Beatmaps.ControlPoints
             set => BeatLengthBindable.Value = value;
         }
 
+        /// <summary>
+        /// The BPM at this control point.
+        /// </summary>
+        public double BPM => 60000 / BeatLength;
+
         public override bool EquivalentTo(ControlPoint other) =>
             other is TimingControlPoint otherTyped
             && TimeSignature == otherTyped.TimeSignature && BeatLength.Equals(otherTyped.BeatLength);

osu.Game/Screens/Edit/Timing/ControlPointSettings.cs

@@ -0,0 +1,50 @@
+// 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.Collections.Generic;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    public class ControlPointSettings : CompositeDrawable
+    {
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            RelativeSizeAxes = Axes.Both;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Colour = colours.Gray3,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new OsuScrollContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = new FillFlowContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Direction = FillDirection.Vertical,
+                        Children = createSections()
+                    },
+                }
+            };
+        }
+
+        private IReadOnlyList<Drawable> createSections() => new Drawable[]
+        {
+            new TimingSection(),
+            new DifficultySection(),
+            new SampleSection(),
+            new EffectSection(),
+        };
+    }
+}

osu.Game/Screens/Edit/Timing/ControlPointTable.cs

@@ -0,0 +1,247 @@
+// 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.Collections.Generic;
+using System.Linq;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.Sprites;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    public class ControlPointTable : TableContainer
+    {
+        private const float horizontal_inset = 20;
+        private const float row_height = 25;
+        private const int text_size = 14;
+
+        private readonly FillFlowContainer backgroundFlow;
+
+        [Resolved]
+        private Bindable<ControlPointGroup> selectedGroup { get; set; }
+
+        public ControlPointTable()
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeAxes = Axes.Y;
+
+            Padding = new MarginPadding { Horizontal = horizontal_inset };
+            RowSize = new Dimension(GridSizeMode.Absolute, row_height);
+
+            AddInternal(backgroundFlow = new FillFlowContainer
+            {
+                RelativeSizeAxes = Axes.Both,
+                Depth = 1f,
+                Padding = new MarginPadding { Horizontal = -horizontal_inset },
+                Margin = new MarginPadding { Top = row_height }
+            });
+        }
+
+        public IEnumerable<ControlPointGroup> ControlGroups
+        {
+            set
+            {
+                Content = null;
+                backgroundFlow.Clear();
+
+                if (value?.Any() != true)
+                    return;
+
+                foreach (var group in value)
+                {
+                    backgroundFlow.Add(new RowBackground(group));
+                }
+
+                Columns = createHeaders();
+                Content = value.Select((g, i) => createContent(i, g)).ToArray().ToRectangular();
+            }
+        }
+
+        private TableColumn[] createHeaders()
+        {
+            var columns = new List<TableColumn>
+            {
+                new TableColumn(string.Empty, Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("Time", Anchor.Centre, new Dimension(GridSizeMode.AutoSize)),
+                new TableColumn("Attributes", Anchor.Centre),
+            };
+
+            return columns.ToArray();
+        }
+
+        private Drawable[] createContent(int index, ControlPointGroup group) => new Drawable[]
+        {
+            new OsuSpriteText
+            {
+                Text = $"#{index + 1}",
+                Font = OsuFont.GetFont(size: text_size, weight: FontWeight.Bold),
+                Margin = new MarginPadding(10)
+            },
+            new OsuSpriteText
+            {
+                Text = $"{group.Time:n0}ms",
+                Font = OsuFont.GetFont(size: text_size, weight: FontWeight.Bold)
+            },
+            new ControlGroupAttributes(group),
+        };
+
+        private class ControlGroupAttributes : CompositeDrawable
+        {
+            private readonly IBindableList<ControlPoint> controlPoints;
+
+            private readonly FillFlowContainer fill;
+
+            public ControlGroupAttributes(ControlPointGroup group)
+            {
+                InternalChild = fill = new FillFlowContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Direction = FillDirection.Horizontal,
+                    Padding = new MarginPadding(10),
+                    Spacing = new Vector2(2)
+                };
+
+                controlPoints = group.ControlPoints.GetBoundCopy();
+                controlPoints.ItemsAdded += _ => createChildren();
+                controlPoints.ItemsRemoved += _ => createChildren();
+
+                createChildren();
+            }
+
+            private void createChildren()
+            {
+                fill.ChildrenEnumerable = controlPoints.Select(createAttribute).Where(c => c != null);
+            }
+
+            private Drawable createAttribute(ControlPoint controlPoint)
+            {
+                switch (controlPoint)
+                {
+                    case TimingControlPoint timing:
+                        return new RowAttribute("timing", $"{60000 / timing.BeatLength:n1}bpm {timing.TimeSignature}");
+
+                    case DifficultyControlPoint difficulty:
+
+                        return new RowAttribute("difficulty", $"{difficulty.SpeedMultiplier:n2}x");
+
+                    case EffectControlPoint effect:
+                        return new RowAttribute("effect", $"{(effect.KiaiMode ? "Kiai " : "")}{(effect.OmitFirstBarLine ? "NoBarLine " : "")}");
+
+                    case SampleControlPoint sample:
+                        return new RowAttribute("sample", $"{sample.SampleBank} {sample.SampleVolume}%");
+                }
+
+                return null;
+            }
+        }
+
+        protected override Drawable CreateHeader(int index, TableColumn column) => new HeaderText(column?.Header ?? string.Empty);
+
+        private class HeaderText : OsuSpriteText
+        {
+            public HeaderText(string text)
+            {
+                Text = text.ToUpper();
+                Font = OsuFont.GetFont(size: 12, weight: FontWeight.Black);
+            }
+        }
+
+        public class RowBackground : OsuClickableContainer
+        {
+            private readonly ControlPointGroup controlGroup;
+            private const int fade_duration = 100;
+
+            private readonly Box hoveredBackground;
+
+            [Resolved]
+            private Bindable<ControlPointGroup> selectedGroup { get; set; }
+
+            public RowBackground(ControlPointGroup controlGroup)
+            {
+                this.controlGroup = controlGroup;
+                RelativeSizeAxes = Axes.X;
+                Height = 25;
+
+                AlwaysPresent = true;
+
+                CornerRadius = 3;
+                Masking = true;
+
+                Children = new Drawable[]
+                {
+                    hoveredBackground = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0,
+                    },
+                };
+
+                Action = () => selectedGroup.Value = controlGroup;
+            }
+
+            private Color4 colourHover;
+            private Color4 colourSelected;
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                hoveredBackground.Colour = colourHover = colours.BlueDarker;
+                colourSelected = colours.YellowDarker;
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                selectedGroup.BindValueChanged(group => { Selected = controlGroup == group.NewValue; }, true);
+            }
+
+            private bool selected;
+
+            protected bool Selected
+            {
+                get => selected;
+                set
+                {
+                    if (value == selected)
+                        return;
+
+                    selected = value;
+                    updateState();
+                }
+            }
+
+            protected override bool OnHover(HoverEvent e)
+            {
+                updateState();
+                return base.OnHover(e);
+            }
+
+            protected override void OnHoverLost(HoverLostEvent e)
+            {
+                updateState();
+                base.OnHoverLost(e);
+            }
+
+            private void updateState()
+            {
+                hoveredBackground.FadeColour(selected ? colourSelected : colourHover, 450, Easing.OutQuint);
+
+                if (selected || IsHovered)
+                    hoveredBackground.FadeIn(fade_duration, Easing.OutQuint);
+                else
+                    hoveredBackground.FadeOut(fade_duration, Easing.OutQuint);
+            }
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/DifficultySection.cs

@@ -0,0 +1,39 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal class DifficultySection : Section<DifficultyControlPoint>
+    {
+        private OsuSpriteText multiplier;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Flow.AddRange(new[]
+            {
+                multiplier = new OsuSpriteText(),
+            });
+        }
+
+        protected override void OnControlPointChanged(ValueChangedEvent<DifficultyControlPoint> point)
+        {
+            multiplier.Text = $"Multiplier: {point.NewValue?.SpeedMultiplier:0.##}x";
+        }
+
+        protected override DifficultyControlPoint CreatePoint()
+        {
+            var reference = Beatmap.Value.Beatmap.ControlPointInfo.DifficultyPointAt(SelectedGroup.Value.Time);
+
+            return new DifficultyControlPoint
+            {
+                SpeedMultiplier = reference.SpeedMultiplier,
+            };
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/EffectSection.cs

@@ -0,0 +1,43 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal class EffectSection : Section<EffectControlPoint>
+    {
+        private OsuSpriteText kiai;
+        private OsuSpriteText omitBarLine;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Flow.AddRange(new[]
+            {
+                kiai = new OsuSpriteText(),
+                omitBarLine = new OsuSpriteText(),
+            });
+        }
+
+        protected override void OnControlPointChanged(ValueChangedEvent<EffectControlPoint> point)
+        {
+            kiai.Text = $"Kiai: {(point.NewValue?.KiaiMode == true ? "on" : "off")}";
+            omitBarLine.Text = $"Skip Bar Line: {(point.NewValue?.OmitFirstBarLine == true ? "on" : "off")}";
+        }
+
+        protected override EffectControlPoint CreatePoint()
+        {
+            var reference = Beatmap.Value.Beatmap.ControlPointInfo.EffectPointAt(SelectedGroup.Value.Time);
+
+            return new EffectControlPoint
+            {
+                KiaiMode = reference.KiaiMode,
+                OmitFirstBarLine = reference.OmitFirstBarLine
+            };
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/RowAttribute.cs

@@ -0,0 +1,59 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Cursor;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    public class RowAttribute : CompositeDrawable, IHasTooltip
+    {
+        private readonly string header;
+        private readonly string content;
+
+        public RowAttribute(string header, string content)
+        {
+            this.header = header;
+            this.content = content;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            AutoSizeAxes = Axes.X;
+
+            Height = 20;
+
+            Anchor = Anchor.CentreLeft;
+            Origin = Anchor.CentreLeft;
+
+            Masking = true;
+            CornerRadius = 5;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Colour = colours.Yellow,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new OsuSpriteText
+                {
+                    Padding = new MarginPadding(2),
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre,
+                    Font = OsuFont.Default.With(weight: FontWeight.SemiBold, size: 12),
+                    Text = header,
+                    Colour = colours.Gray3
+                },
+            };
+        }
+
+        public string TooltipText => content;
+    }
+}

osu.Game/Screens/Edit/Timing/SampleSection.cs

@@ -0,0 +1,43 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal class SampleSection : Section<SampleControlPoint>
+    {
+        private OsuSpriteText bank;
+        private OsuSpriteText volume;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Flow.AddRange(new[]
+            {
+                bank = new OsuSpriteText(),
+                volume = new OsuSpriteText(),
+            });
+        }
+
+        protected override void OnControlPointChanged(ValueChangedEvent<SampleControlPoint> point)
+        {
+            bank.Text = $"Bank: {point.NewValue?.SampleBank}";
+            volume.Text = $"Volume: {point.NewValue?.SampleVolume}%";
+        }
+
+        protected override SampleControlPoint CreatePoint()
+        {
+            var reference = Beatmap.Value.Beatmap.ControlPointInfo.SamplePointAt(SelectedGroup.Value.Time);
+
+            return new SampleControlPoint
+            {
+                SampleBank = reference.SampleBank,
+                SampleVolume = reference.SampleVolume,
+            };
+        }
+    }
+}

osu.Game/Screens/Edit/Timing/Section.cs

@@ -0,0 +1,130 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.UserInterface;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal abstract class Section<T> : CompositeDrawable
+        where T : ControlPoint
+    {
+        private OsuCheckbox checkbox;
+        private Container content;
+
+        protected FillFlowContainer Flow { get; private set; }
+
+        protected Bindable<T> ControlPoint { get; } = new Bindable<T>();
+
+        private const float header_height = 20;
+
+        [Resolved]
+        protected IBindable<WorkingBeatmap> Beatmap { get; private set; }
+
+        [Resolved]
+        protected Bindable<ControlPointGroup> SelectedGroup { get; private set; }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            RelativeSizeAxes = Axes.X;
+            AutoSizeDuration = 200;
+            AutoSizeEasing = Easing.OutQuint;
+            AutoSizeAxes = Axes.Y;
+
+            Masking = true;
+
+            InternalChildren = new Drawable[]
+            {
+                new Box
+                {
+                    Colour = colours.Gray1,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    Height = header_height,
+                    Children = new Drawable[]
+                    {
+                        checkbox = new OsuCheckbox
+                        {
+                            LabelText = typeof(T).Name.Replace(typeof(ControlPoint).Name, string.Empty)
+                        }
+                    }
+                },
+                content = new Container
+                {
+                    Y = header_height,
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Children = new Drawable[]
+                    {
+                        new Box
+                        {
+                            Colour = colours.Gray2,
+                            RelativeSizeAxes = Axes.Both,
+                        },
+                        Flow = new FillFlowContainer
+                        {
+                            Padding = new MarginPadding(10),
+                            RelativeSizeAxes = Axes.X,
+                            AutoSizeAxes = Axes.Y,
+                            Direction = FillDirection.Vertical,
+                        },
+                    }
+                }
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            checkbox.Current.BindValueChanged(selected =>
+            {
+                if (selected.NewValue)
+                {
+                    if (SelectedGroup.Value == null)
+                    {
+                        checkbox.Current.Value = false;
+                        return;
+                    }
+
+                    if (ControlPoint.Value == null)
+                        SelectedGroup.Value.Add(ControlPoint.Value = CreatePoint());
+                }
+                else
+                {
+                    if (ControlPoint.Value != null)
+                    {
+                        SelectedGroup.Value.Remove(ControlPoint.Value);
+                        ControlPoint.Value = null;
+                    }
+                }
+
+                content.BypassAutoSizeAxes = selected.NewValue ? Axes.None : Axes.Y;
+            }, true);
+
+            SelectedGroup.BindValueChanged(points =>
+            {
+                ControlPoint.Value = points.NewValue?.ControlPoints.OfType<T>().FirstOrDefault();
+                checkbox.Current.Value = ControlPoint.Value != null;
+            }, true);
+
+            ControlPoint.BindValueChanged(OnControlPointChanged, true);
+        }
+
+        protected abstract void OnControlPointChanged(ValueChangedEvent<T> point);
+
+        protected abstract T CreatePoint();
+    }
+}

osu.Game/Screens/Edit/Timing/TimingScreen.cs

@@ -1,13 +1,151 @@
 // 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Timing;
+using osu.Game.Beatmaps;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Graphics.UserInterface;
+using osuTK;
+
 namespace osu.Game.Screens.Edit.Timing
 {
-    public class TimingScreen : EditorScreen
+    public class TimingScreen : EditorScreenWithTimeline
     {
-        public TimingScreen()
+        [Cached]
+        private Bindable<ControlPointGroup> selectedGroup = new Bindable<ControlPointGroup>();
+
+        [Resolved]
+        private IAdjustableClock clock { get; set; }
+
+        protected override Drawable CreateMainContent() => new GridContainer
         {
-            Child = new ScreenWhiteBox.UnderConstructionMessage("Timing mode");
+            RelativeSizeAxes = Axes.Both,
+            ColumnDimensions = new[]
+            {
+                new Dimension(),
+                new Dimension(GridSizeMode.Absolute, 200),
+            },
+            Content = new[]
+            {
+                new Drawable[]
+                {
+                    new ControlPointList(),
+                    new ControlPointSettings(),
+                },
+            }
+        };
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            selectedGroup.BindValueChanged(selected =>
+            {
+                if (selected.NewValue != null)
+                    clock.Seek(selected.NewValue.Time);
+            });
+        }
+
+        public class ControlPointList : CompositeDrawable
+        {
+            private OsuButton deleteButton;
+            private ControlPointTable table;
+
+            private IBindableList<ControlPointGroup> controlGroups;
+
+            [Resolved]
+            private IFrameBasedClock clock { get; set; }
+
+            [Resolved]
+            protected IBindable<WorkingBeatmap> Beatmap { get; private set; }
+
+            [Resolved]
+            private Bindable<ControlPointGroup> selectedGroup { get; set; }
+
+            [BackgroundDependencyLoader]
+            private void load(OsuColour colours)
+            {
+                RelativeSizeAxes = Axes.Both;
+
+                InternalChildren = new Drawable[]
+                {
+                    new Box
+                    {
+                        Colour = colours.Gray0,
+                        RelativeSizeAxes = Axes.Both,
+                    },
+                    new OsuScrollContainer
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Child = table = new ControlPointTable(),
+                    },
+                    new FillFlowContainer
+                    {
+                        AutoSizeAxes = Axes.Both,
+                        Anchor = Anchor.BottomRight,
+                        Origin = Anchor.BottomRight,
+                        Direction = FillDirection.Horizontal,
+                        Margin = new MarginPadding(10),
+                        Spacing = new Vector2(5),
+                        Children = new Drawable[]
+                        {
+                            deleteButton = new OsuButton
+                            {
+                                Text = "-",
+                                Size = new Vector2(30, 30),
+                                Action = delete,
+                                Anchor = Anchor.BottomRight,
+                                Origin = Anchor.BottomRight,
+                            },
+                            new OsuButton
+                            {
+                                Text = "+",
+                                Action = addNew,
+                                Size = new Vector2(30, 30),
+                                Anchor = Anchor.BottomRight,
+                                Origin = Anchor.BottomRight,
+                            },
+                        }
+                    },
+                };
+            }
+
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                selectedGroup.BindValueChanged(selected => { deleteButton.Enabled.Value = selected.NewValue != null; }, true);
+
+                controlGroups = Beatmap.Value.Beatmap.ControlPointInfo.Groups.GetBoundCopy();
+                controlGroups.ItemsAdded += _ => createContent();
+                controlGroups.ItemsRemoved += _ => createContent();
+                createContent();
+            }
+
+            private void createContent() => table.ControlGroups = controlGroups;
+
+            private void delete()
+            {
+                if (selectedGroup.Value == null)
+                    return;
+
+                Beatmap.Value.Beatmap.ControlPointInfo.RemoveGroup(selectedGroup.Value);
+
+                selectedGroup.Value = Beatmap.Value.Beatmap.ControlPointInfo.Groups.FirstOrDefault(g => g.Time >= clock.CurrentTime);
+            }
+
+            private void addNew()
+            {
+                selectedGroup.Value = Beatmap.Value.Beatmap.ControlPointInfo.GroupAt(clock.CurrentTime, true);
+            }
         }
     }
 }

osu.Game/Screens/Edit/Timing/TimingSection.cs

@@ -0,0 +1,43 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Game.Beatmaps.ControlPoints;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Screens.Edit.Timing
+{
+    internal class TimingSection : Section<TimingControlPoint>
+    {
+        private OsuSpriteText bpm;
+        private OsuSpriteText timeSignature;
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Flow.AddRange(new[]
+            {
+                bpm = new OsuSpriteText(),
+                timeSignature = new OsuSpriteText(),
+            });
+        }
+
+        protected override void OnControlPointChanged(ValueChangedEvent<TimingControlPoint> point)
+        {
+            bpm.Text = $"BPM: {point.NewValue?.BPM:0.##}";
+            timeSignature.Text = $"Signature: {point.NewValue?.TimeSignature}";
+        }
+
+        protected override TimingControlPoint CreatePoint()
+        {
+            var reference = Beatmap.Value.Beatmap.ControlPointInfo.TimingPointAt(SelectedGroup.Value.Time);
+
+            return new TimingControlPoint
+            {
+                BeatLength = reference.BeatLength,
+                TimeSignature = reference.TimeSignature
+            };
+        }
+    }
+}