Merge pull request #284 from andy840119/lyric-editor/implement-time-t…

…ag-display Implement time tag display in lyric editor.
karaoke-dev · Dec 5, 2020 · 6a85e53 · 6a85e53
2 parents d0cebe2 + fb9cbc9
commit 6a85e53
Show file tree

Hide file tree

Showing 15 changed files with 311 additions and 147 deletions.
diff --git a/osu.Game.Rulesets.Karaoke/Edit/ImportLyric/AssignLanguage/AssignLanguageSubScreen.cs b/osu.Game.Rulesets.Karaoke/Edit/ImportLyric/AssignLanguage/AssignLanguageSubScreen.cs
@@ -38,7 +38,6 @@ protected override Drawable CreateContent()
                 RelativeSizeAxes = Axes.Both,
                 Mode = Mode.EditMode,
                 LyricFastEditMode = LyricFastEditMode.Language,
-                FontSize = 26
             };
 
         protected override void LoadComplete()

diff --git a/osu.Game.Rulesets.Karaoke/Edit/ImportLyric/GenerateTimeTag/GenerateTimeTagSubScreen.cs b/osu.Game.Rulesets.Karaoke/Edit/ImportLyric/GenerateTimeTag/GenerateTimeTagSubScreen.cs
@@ -38,7 +38,6 @@ protected override Drawable CreateContent()
                 RelativeSizeAxes = Axes.Both,
                 Mode = Mode.TimeTagEditMode,
                 LyricFastEditMode = LyricFastEditMode.Language,
-                FontSize = 26
             };
 
         protected override void LoadComplete()

diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/Components/LyricControl.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/Components/LyricControl.cs
@@ -4,16 +4,19 @@
 using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Sprites;
 using osu.Framework.Timing;
+using osu.Game.Rulesets.Karaoke.Edit.Lyrics.Components.TimeTags;
 using osu.Game.Rulesets.Karaoke.Objects;
 using osu.Game.Rulesets.Karaoke.Objects.Drawables;
 using osu.Game.Rulesets.Karaoke.Skinning.Components;
+using System;
 
 namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics.Components
 {
     public class LyricControl : Container
     {
-        private readonly DrawableLyric drawableLyric;
+        private readonly DrawableEditorLyric drawableLyric;
 
         public Lyric Lyric { get; }
 
@@ -22,6 +25,7 @@ public LyricControl(Lyric lyric)
             Lyric = lyric;
             CornerRadius = 5;
             AutoSizeAxes = Axes.Y;
+            Padding = new MarginPadding { Bottom = 10 };
             InternalChildren = new Drawable[]
             {
                 drawableLyric = new DrawableEditorLyric(lyric)
@@ -36,13 +40,41 @@ private void load(IFrameBasedClock framedClock)
 
         public class DrawableEditorLyric : DrawableLyric
         {
+            private readonly Container timeTagContainer;
+
             public DrawableEditorLyric(Lyric lyric)
                 : base(lyric)
             {
+                AddInternal(timeTagContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both
+                });
+
                 DisplayRuby = true;
                 DisplayRomaji = true;
             }
 
+            protected override void LoadComplete()
+            {
+                base.LoadComplete();
+
+                TimeTagsBindable.BindValueChanged(e =>
+                {
+                    UpdateTimeTags();
+                }, true);
+            }
+
+            protected override void ApplyFont(KaraokeFont font)
+            {
+                base.ApplyFont(font);
+
+                if (TimeTagsBindable.Value == null)
+                    return;
+
+                // todo : need to delay until karaoke text has been calculated.
+                ScheduleAfterChildren(() => UpdateTimeTags());
+            }
+
             protected override void ApplyLayout(KaraokeLayout layout)
             {
                 base.ApplyLayout(layout);
@@ -65,6 +97,24 @@ public override double LifetimeEnd
                 get => double.MaxValue;
                 set => base.LifetimeEnd = double.MaxValue;
             }
+
+            protected void UpdateTimeTags()
+            {
+                timeTagContainer.Clear();
+                foreach (var timeTag in TimeTagsBindable.Value)
+                {
+                    var index = Math.Min(timeTag.Item1.Index, HitObject.Text.Length - 1);
+                    var percentage = timeTag.Item1.State == TimeTagIndex.IndexState.Start ? 0 : 1;
+                    var position = karaokeText.GetPercentageWidth(index, index + 1, percentage);
+
+                    timeTagContainer.Add(new DrawableTimeTag(timeTag)
+                    {
+                        Anchor = Anchor.BottomLeft,
+                        Origin = Anchor.BottomLeft,
+                        X = position
+                    });
+                }
+            }
         }
     }
 }
diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/Components/TimeTags/DrawableTimeTag.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/Components/TimeTags/DrawableTimeTag.cs
@@ -0,0 +1,44 @@
+// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL 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.Sprites;
+using osu.Game.Graphics;
+using osu.Game.Rulesets.Karaoke.Graphics.Shapes;
+using osuTK;
+using System;
+
+namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics.Components.TimeTags
+{
+    public class DrawableTimeTag : CompositeDrawable
+    {
+        /// <summary>
+        /// Height of major bar line triangles.
+        /// </summary>
+        private const float triangle_width = 3;
+
+        private readonly Tuple<TimeTagIndex, double?> timeTag;
+
+        public DrawableTimeTag(Tuple<TimeTagIndex, double?> timeTag)
+        {
+            this.timeTag = timeTag;
+
+            InternalChild = new RightTriangle
+            {
+                Name = "Time tag triangle",
+                Anchor = Anchor.TopCentre,
+                Origin = Anchor.Centre,
+                Size = new Vector2(triangle_width),
+                Scale = new Vector2(timeTag.Item1.State == TimeTagIndex.IndexState.Start ? 1 : -1, 1)
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            InternalChild.Colour = timeTag.Item2.HasValue ? colours.Yellow : colours.Gray7;
+        }
+    }
+}
diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/DrawableLyricEditList.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/DrawableLyricEditList.cs
@@ -0,0 +1,14 @@
+// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Game.Graphics.Containers;
+using osu.Game.Rulesets.Karaoke.Objects;
+
+namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics
+{
+    public class DrawableLyricEditList : OsuRearrangeableListContainer<Lyric>
+    {
+        protected override OsuRearrangeableListItem<Lyric> CreateOsuDrawable(Lyric item)
+            => new DrawableLyricEditListItem(item);
+    }
+}
diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/DrawableLyricEditListItem.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/DrawableLyricEditListItem.cs
@@ -0,0 +1,131 @@
+// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL 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.Framework.Input.Events;
+using osu.Game.Graphics;
+using osu.Game.Graphics.Containers;
+using osu.Game.Rulesets.Karaoke.Edit.Lyrics.Components;
+using osu.Game.Rulesets.Karaoke.Edit.Lyrics.Components.Badges;
+using osu.Game.Rulesets.Karaoke.Objects;
+using osuTK;
+
+namespace osu.Game.Rulesets.Karaoke.Edit.Lyrics
+{
+    public class DrawableLyricEditListItem : OsuRearrangeableListItem<Lyric>
+    {
+        private Box background;
+        private Box dragAlert;
+        private Box headerBackground;
+
+        public DrawableLyricEditListItem(Lyric item)
+            : base(item)
+        {
+        }
+
+        protected override Drawable CreateContent()
+        {
+            return new Container
+            {
+                Masking = true,
+                CornerRadius = 5,
+                AutoSizeAxes = Axes.Y,
+                RelativeSizeAxes = Axes.X,
+                Children = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0.3f
+                    },
+                    dragAlert = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Alpha = 0
+                    },
+                    new GridContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Content = new[]
+                        {
+                            new[]
+                            {
+                                new Container
+                                {
+                                    RelativeSizeAxes = Axes.Both,
+                                    Children = new Drawable[]
+                                    {
+                                        headerBackground = new Box
+                                        {
+                                            RelativeSizeAxes = Axes.Both,
+                                            Alpha = 0.7f
+                                        },
+                                        new BadgeFillFlowContainer
+                                        {
+                                            Direction = FillDirection.Vertical,
+                                            AutoSizeAxes = Axes.Both,
+                                            Anchor = Anchor.TopRight,
+                                            Origin = Anchor.TopRight,
+                                            Spacing = new Vector2(5),
+                                            Padding = new MarginPadding(10),
+                                            Children = new Badge[]
+                                            {
+                                                new TimeInfoBadge(Model),
+                                                new StyleInfoBadge(Model),
+                                                new LayoutInfoBadge(Model),
+                                            }
+                                        },
+                                    }
+                                },
+                                new LyricControl(Model)
+                                {
+                                    Margin = new MarginPadding { Left = 10 },
+                                    RelativeSizeAxes = Axes.X,
+                                }
+                            }
+                        },
+                        ColumnDimensions = new[] { new Dimension(GridSizeMode.Absolute, 200) },
+                        RowDimensions = new[] { new Dimension(GridSizeMode.AutoSize) }
+                    }
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OsuColour colours)
+        {
+            background.Colour = colours.Gray7;
+            dragAlert.Colour = colours.YellowDarker;
+            headerBackground.Colour = colours.Gray2;
+        }
+
+        protected override bool OnDragStart(DragStartEvent e)
+        {
+            if (!base.OnDragStart(e))
+                return false;
+
+            dragAlert.Show();
+            return true;
+        }
+
+        protected override void OnDragEnd(DragEndEvent e)
+        {
+            dragAlert.Hide();
+            base.OnDragEnd(e);
+        }
+
+        public class BadgeFillFlowContainer : FillFlowContainer<Badge>
+        {
+            public override void Add(Badge drawable)
+            {
+                drawable.Anchor = Anchor.TopRight;
+                drawable.Origin = Anchor.TopRight;
+                base.Add(drawable);
+            }
+        }
+    }
+}
diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/KaraokeLyricEditorSkin.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/KaraokeLyricEditorSkin.cs
@@ -16,6 +16,11 @@ public class KaraokeLyricEditorSkin : KaraokeInternalSkin
 
         protected override string ResourceName => @"osu.Game.Rulesets.Karaoke.Resources.Skin.editor.skin";
 
+        public KaraokeLyricEditorSkin()
+        {
+            FontSize = 26;
+        }
+
         public float FontSize
         {
             get => BindableFont.Value.LyricTextFontInfo.LyricTextFontInfo.CharSize;

diff --git a/osu.Game.Rulesets.Karaoke/Edit/Lyrics/LyricEditor.cs b/osu.Game.Rulesets.Karaoke/Edit/Lyrics/LyricEditor.cs
@@ -17,14 +17,14 @@ public class LyricEditor : Container
         private EditorBeatmap beatmap { get; set; }
 
         private readonly KaraokeLyricEditorSkin skin;
-        private readonly LyricRearrangeableListContainer container;
+        private readonly DrawableLyricEditList container;
 
         public LyricEditor()
         {
             Child = new SkinProvidingContainer(skin = new KaraokeLyricEditorSkin())
             {
                 RelativeSizeAxes = Axes.Both,
-                Child = container = new LyricRearrangeableListContainer
+                Child = container = new DrawableLyricEditList
                 {
                     RelativeSizeAxes = Axes.Both,
                 }