Merge pull request #2277 from andy840119/improve-caret-style

Make the idol/hover caret looks better.

osu.Game.Rulesets.Karaoke.Tests/Screens/Edit/Beatmap/Lyrics/Content/TestSceneInteractableLyric.cs

@@ -11,6 +11,7 @@
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Cursor;
 using osu.Framework.Graphics.Shapes;
+using osu.Framework.IO.Stores;
 using osu.Framework.Testing;
 using osu.Game.Graphics;
 using osu.Game.Rulesets.Karaoke.Beatmaps;
@@ -24,6 +25,7 @@
 using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.States.Modes;
 using osu.Game.Rulesets.Karaoke.Tests.Helper;
 using osu.Game.Screens.Edit;
+using osu.Game.Skinning;
 using osu.Game.Tests.Visual;
 using osuTK;
 
@@ -170,14 +172,16 @@ public void TestBlueprintLayer()
     }
 
     [BackgroundDependencyLoader]
-    private void load()
+    private void load(OsuGameBase game)
     {
         Dependencies.CacheAs<ILyricsProvider>(new LyricsProvider().With(Add));
         Dependencies.CacheAs<ILyricsChangeHandler>(new LyricsChangeHandler().With(Add));
         Dependencies.CacheAs<ILyricTextChangeHandler>(new LyricTextChangeHandler().With(Add));
         Dependencies.CacheAs<ILyricRubyTagsChangeHandler>(new LyricRubyTagsChangeHandler().With(Add));
         Dependencies.CacheAs<ILyricTimeTagsChangeHandler>(new LyricTimeTagsChangeHandler().With(Add));
         Dependencies.Cache(new KaraokeRulesetLyricEditorConfigManager());
+
+        game.Resources.AddStore(new NamespacedResourceStore<byte[]>(new ShaderResourceStore(), "Resources"));
     }
 
     #region Testing tools
@@ -276,7 +280,6 @@ private void updateInteractableLyric()
             Anchor = Anchor.Centre,
             Origin = Anchor.Centre,
             AutoSizeAxes = Axes.Both,
-            Scale = new Vector2(2),
             Children = new Drawable[]
             {
                 new Box
@@ -288,7 +291,15 @@ private void updateInteractableLyric()
                 {
                     AutoSizeAxes = Axes.Both,
                     Padding = new MarginPadding(48),
-                    Child = createInteractableLyric(loaders.ToArray()),
+                    Child = new SkinProvidingContainer(new LyricEditorSkin(null)
+                    {
+                        FontSize = 48,
+                    })
+                    {
+                        RelativeSizeAxes = Axes.None,
+                        AutoSizeAxes = Axes.Both,
+                        Child = createInteractableLyric(loaders.ToArray()),
+                    },
                 },
             },
         });

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableCreateRemoveTimeTagCaret.cs

@@ -27,8 +27,8 @@ public partial class DrawableCreateRemoveTimeTagCaret : DrawableCaret<CreateRemo
 {
     private const float border_spacing = 5;
 
-    private readonly TimeTagsInfo startTimeTagInfo;
-    private readonly TimeTagsInfo endTimeTagInfo;
+    private readonly TimeTagsInfo? startTimeTagInfo;
+    private readonly TimeTagsInfo? endTimeTagInfo;
 
     public DrawableCreateRemoveTimeTagCaret(DrawableCaretState state)
         : base(state)
@@ -42,13 +42,21 @@ public DrawableCreateRemoveTimeTagCaret(DrawableCaretState state)
                 BorderThickness = border_spacing,
                 BorderColour = Colour4.White,
                 RelativeSizeAxes = Axes.Both,
+                Alpha = GetAlpha(state),
                 Child = new Box
                 {
                     RelativeSizeAxes = Axes.Both,
                     Colour = Colour4.White,
                     Alpha = 0.1f,
                 },
             },
+        };
+
+        if (state != DrawableCaretState.Idle)
+            return;
+
+        AddRangeInternal(new[]
+        {
             startTimeTagInfo = new TimeTagsInfo(TextIndex.IndexState.Start)
             {
                 X = 18,
@@ -63,7 +71,7 @@ public DrawableCreateRemoveTimeTagCaret(DrawableCaretState state)
                 Origin = Anchor.CentreLeft,
                 Alpha = GetAlpha(state),
             },
-        };
+        });
     }
 
     protected override void ApplyCaretPosition(CreateRemoveTimeTagCaretPosition caret)
@@ -73,8 +81,8 @@ protected override void ApplyCaretPosition(CreateRemoveTimeTagCaretPosition care
         Position = rect.TopLeft - new Vector2(border_spacing);
         Size = rect.Size + new Vector2(border_spacing * 2);
 
-        startTimeTagInfo.UpdateCaretPosition(caret);
-        endTimeTagInfo.UpdateCaretPosition(caret);
+        startTimeTagInfo?.UpdateCaretPosition(caret);
+        endTimeTagInfo?.UpdateCaretPosition(caret);
     }
 
     protected override void TriggerDisallowEditEffect(OsuColour colour)

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableCreateRubyTagCaret.cs

@@ -28,9 +28,6 @@ public partial class DrawableCreateRubyTagCaret : DrawableRangeCaret<CreateRubyT
     private const float caret_move_time = 60;
     private const float caret_resize_time = 60;
 
-    [Resolved]
-    private ILyricCaretState lyricCaretState { get; set; } = null!;
-
     private readonly SpriteIcon icon;
 
     public DrawableCreateRubyTagCaret(DrawableCaretState state)
@@ -74,19 +71,6 @@ private void load(OsuColour colours)
 
     protected override void ApplyCaretPosition(CreateRubyTagCaretPosition caret)
     {
-        // should not show the hover caret if already contains the selected range.
-        if (State == DrawableCaretState.Hover)
-        {
-            bool isClickToThisCaret = lyricCaretState.CaretPosition?.Lyric == caret.Lyric;
-            bool isDraggingToThisCaret = lyricCaretState.RangeCaretPosition?.IsInRange(caret.Lyric) ?? false;
-
-            if (isClickToThisCaret || isDraggingToThisCaret)
-            {
-                Hide();
-                return;
-            }
-        }
-
         startCharIndex = caret.CharIndex;
         endCharIndex = caret.CharIndex;
 

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableCuttingCaret.cs

@@ -15,13 +15,15 @@ namespace osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Content.Compone
 
 public partial class DrawableCuttingCaret : DrawableCaret<CuttingCaretPosition>
 {
+    private const float caret_width = 10;
+
     private readonly Container splitter;
     private readonly SpriteIcon splitIcon;
 
     public DrawableCuttingCaret(DrawableCaretState state)
         : base(state)
     {
-        Width = 10;
+        Width = caret_width;
         Origin = Anchor.TopCentre;
 
         InternalChildren = new Drawable[]
@@ -87,7 +89,7 @@ protected override void ApplyCaretPosition(CuttingCaretPosition caret)
     {
         var rect = LyricPositionProvider.GetRectByCharIndicator(caret.CharGap);
 
-        Position = rect.TopLeft;
+        Position = rect.TopLeft + new Vector2(rect.Width / 2 - caret_width / 2, 0);
         Height = rect.Height;
     }
 

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableRangeCaret.cs

@@ -2,6 +2,8 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.CaretPosition;
 using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.States;
 
@@ -10,9 +12,26 @@ namespace osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Content.Compone
 public abstract partial class DrawableRangeCaret<TCaretPosition> : DrawableCaret, ICanAcceptRangeIndex
     where TCaretPosition : struct, IIndexCaretPosition
 {
+    private readonly IBindable<RangeCaretPosition?> bindableRangeCaretPosition = new Bindable<RangeCaretPosition?>();
+
     protected DrawableRangeCaret(DrawableCaretState state)
         : base(state)
     {
+        // should auto hide the hover caret if selecting.
+        bindableRangeCaretPosition.BindValueChanged(x =>
+        {
+            if (State != DrawableCaretState.Hover)
+                return;
+
+            if (x.NewValue != null)
+                Hide();
+        });
+    }
+
+    [BackgroundDependencyLoader]
+    private void load(ILyricCaretState lyricCaretState)
+    {
+        bindableRangeCaretPosition.BindTo(lyricCaretState.BindableRangeCaretPosition);
     }
 
     public sealed override void ApplyCaretPosition(ICaretPosition caret)

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableRecordingTimeTagCaret.cs

@@ -21,8 +21,8 @@ public partial class DrawableRecordingTimeTagCaret : DrawableCaret<RecordingTime
     private const float caret_resize_time = 60;
 
     // should be list of indexes.
-    private readonly TextIndexInfo textIndexInfo;
-    private readonly Box indicator;
+    private readonly TextIndexInfo? textIndexInfo;
+    private readonly Box? indicator;
 
     public DrawableRecordingTimeTagCaret(DrawableCaretState state)
         : base(state)
@@ -43,18 +43,25 @@ public DrawableRecordingTimeTagCaret(DrawableCaretState state)
                     Alpha = 0.1f,
                 },
             },
-            textIndexInfo = new TextIndexInfo
-            {
-                Y = -10,
-                Alpha = GetAlpha(state),
-            },
-            indicator = new Box
-            {
-                Width = border_spacing,
-                RelativeSizeAxes = Axes.Y,
-                Alpha = GetAlpha(state),
-            },
         };
+
+        if (state == DrawableCaretState.Idle)
+        {
+            AddRangeInternal(new Drawable[]
+            {
+                textIndexInfo = new TextIndexInfo
+                {
+                    Y = -10,
+                    Alpha = GetAlpha(state),
+                },
+                indicator = new Box
+                {
+                    Width = border_spacing,
+                    RelativeSizeAxes = Axes.Y,
+                    Alpha = GetAlpha(state),
+                },
+            });
+        }
     }
 
     protected override void ApplyCaretPosition(RecordingTimeTagCaretPosition caret)
@@ -67,13 +74,21 @@ protected override void ApplyCaretPosition(RecordingTimeTagCaretPosition caret)
 
         // update the caret.
         changeTheSizeByRect(rect);
-        textIndexInfo.Anchor = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.TopLeft, Anchor.TopRight);
-        textIndexInfo.Origin = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.BottomLeft, Anchor.BottomRight);
-        textIndexInfo.X = TextIndexUtils.GetValueByState(timeTag.Index, -10, 10);
-        textIndexInfo.UpdateCaret(caret);
-        indicator.Colour = Colours.GetRecordingTimeTagCaretColour(timeTag);
-        indicator.Anchor = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.CentreLeft, Anchor.CentreRight);
-        indicator.Origin = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.CentreLeft, Anchor.CentreRight);
+
+        if (textIndexInfo != null)
+        {
+            textIndexInfo.Anchor = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.TopLeft, Anchor.TopRight);
+            textIndexInfo.Origin = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.BottomLeft, Anchor.BottomRight);
+            textIndexInfo.X = TextIndexUtils.GetValueByState(timeTag.Index, -10, 10);
+            textIndexInfo.UpdateCaret(caret);
+        }
+
+        if (indicator != null)
+        {
+            indicator.Colour = Colours.GetRecordingTimeTagCaretColour(timeTag);
+            indicator.Anchor = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.CentreLeft, Anchor.CentreRight);
+            indicator.Origin = TextIndexUtils.GetValueByState(timeTag.Index, Anchor.CentreLeft, Anchor.CentreRight);
+        }
     }
 
     private void changeTheSizeByRect(RectangleF rect)

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/Carets/DrawableTypingCaret.cs

@@ -24,7 +24,7 @@ public partial class DrawableTypingCaret : DrawableRangeCaret<TypingCaretPositio
     private const float fading_time = 200;
     private const float caret_move_time = 60;
     private const float caret_resize_time = 60;
-    private const float caret_width = 3;
+    private const float caret_width = 2;
 
     private readonly Box drawableCaret;
     private readonly TypingCaretEventHandler? typingCaretEventHandler;
@@ -75,7 +75,7 @@ protected override void ApplyCaretPosition(TypingCaretPosition caret)
         typingCaretEventHandler?.ChangeCharGapAndOffset(caret.CharGap);
         typingCaretEventHandler?.FocusInputCaretTextBox();
 
-        var rect = LyricPositionProvider.GetRectByCharIndicator(caret.CharGap);
+        var rect = toRectWithFixedWidth(LyricPositionProvider.GetRectByCharIndicator(caret.CharGap));
         changeTheSizeByRect(rect);
     }
 
@@ -88,10 +88,21 @@ protected override void ApplyRangeCaretPosition(RangeCaretPosition<TypingCaretPo
         typingCaretEventHandler?.ChangeCharGapAndOffset(maxGap, maxGap - minGap);
         typingCaretEventHandler?.FocusInputCaretTextBox();
 
-        var rect = RectangleF.Union(LyricPositionProvider.GetRectByCharIndicator(minGap), LyricPositionProvider.GetRectByCharIndicator(maxGap));
+        var minGapRect = toRectWithFixedWidth(LyricPositionProvider.GetRectByCharIndicator(minGap));
+        var maxGapRect = toRectWithFixedWidth(LyricPositionProvider.GetRectByCharIndicator(maxGap));
+
+        var rect = RectangleF.Union(minGapRect, maxGapRect);
         changeTheSizeByRect(rect);
     }
 
+    private RectangleF toRectWithFixedWidth(RectangleF rect)
+    {
+        var position = rect.TopLeft + new Vector2(rect.Width / 2 - caret_width / 2, 0);
+        var size = new Vector2(caret_width, rect.Height);
+
+        return new RectangleF(position, size);
+    }
+
     private void changeTheSizeByRect(RectangleF rect)
     {
         var position = rect.TopLeft - new Vector2(caret_width / 2, 0);

osu.Game.Rulesets.Karaoke/Screens/Edit/Beatmaps/Lyrics/Content/Components/Lyrics/EditLyricLayer.cs

@@ -1,6 +1,7 @@
 // Copyright (c) andy840119 <[email protected]>. Licensed under the GPL Licence.
 // See the LICENCE file in the repository root for full licence text.
 
+using System.Linq;
 using osu.Framework.Allocation;
 using osu.Framework.Input.Events;
 using osu.Game.Rulesets.Karaoke.Edit.ChangeHandlers.Lyrics;
@@ -125,9 +126,13 @@ protected override void OnDragEnd(DragEndEvent e)
             TypingCaretPositionAlgorithm => previewLyricPositionProvider.GetCharIndicatorByPosition(position),
             NavigateCaretPositionAlgorithm => null,
             CreateRubyTagCaretPositionAlgorithm => previewLyricPositionProvider.GetCharIndexByPosition(position),
+            RecordingTimeTagCaretPositionAlgorithm => getTimeTagByIndex(Lyric, previewLyricPositionProvider.GetCharIndexByPosition(position)),
             CreateRemoveTimeTagCaretPositionAlgorithm => previewLyricPositionProvider.GetCharIndexByPosition(position),
             _ => null,
         };
+
+        TimeTag? getTimeTagByIndex(Lyric lyric, int? charIndex)
+            => lyric.TimeTags.FirstOrDefault(tag => tag.Index.Index == charIndex);
     }
 
     #region Double click