highlight selected

Author: menvae

fluXis/Screens/Edit/Tabs/Storyboarding/Animations/StoryboardAnimationEntry.cs

@@ -2,13 +2,15 @@
 using System.Linq;
 using fluXis.Graphics.Containers;
 using fluXis.Graphics.Sprites.Icons;
+using fluXis.Graphics.Sprites.Outline;
 using fluXis.Screens.Edit.Tabs.Shared.Points.Settings;
 using fluXis.Screens.Edit.Tabs.Shared.Points.Settings.Preset;
 using fluXis.Screens.Edit.Tabs.Storyboarding.Timeline;
 using fluXis.Storyboards;
 using fluXis.Utils;
 using JetBrains.Annotations;
 using osu.Framework.Allocation;
+using osu.Framework.Bindables;
 using osu.Framework.Extensions;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
@@ -30,13 +32,17 @@ public partial class StoryboardAnimationEntry : CompositeDrawable, IHasPopover
 
     private float beatLength => map.MapInfo.GetTimingPoint(Animation.StartTime).MsPerBeat;
 
+    private BindableBool isSelected = new(false);
+
     [CanBeNull]
     public Action<StoryboardAnimation> RequestRemove { get; init; }
 
     public StoryboardAnimation Animation { get; }
     private readonly StoryboardAnimationRow row;
 
     private readonly Circle length;
+    private readonly OutlinedCircle outlineLength;
+    private readonly FluXisSpriteIcon outlineDiamond;
 
     public StoryboardAnimationEntry(StoryboardAnimation animation, StoryboardAnimationRow row, Colour4 color)
     {
@@ -49,6 +55,35 @@ public StoryboardAnimationEntry(StoryboardAnimation animation, StoryboardAnimati
         Size = new Vector2(StoryboardAnimationsList.ROW_HEIGHT);
         InternalChildren = new Drawable[]
         {
+            length = new Circle
+            {
+                RelativeSizeAxes = Axes.Y,
+                Height = 0.5f,
+                Colour = color,
+                Alpha = 0.5f,
+                Anchor = Anchor.Centre,
+                Origin = Anchor.CentreLeft,
+            },
+            outlineLength = new OutlinedCircle
+            {
+                RelativeSizeAxes = Axes.Y,
+                Height = 0.5f,
+                BorderThickness = 2f,
+                Anchor = Anchor.Centre,
+                Origin = Anchor.CentreLeft,
+                Colour = color.Lighten(2f),
+                Alpha = 0
+            },
+            outlineDiamond =new FluXisSpriteIcon
+            {
+                Icon = FontAwesome6.Solid.Diamond,
+                RelativeSizeAxes = Axes.Both,
+                Size = new Vector2(0.75f),
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Colour = color.Lighten(1.5f),
+                Alpha = 0
+            },
             new FluXisSpriteIcon
             {
                 Icon = FontAwesome6.Solid.Diamond,
@@ -58,36 +93,41 @@ public StoryboardAnimationEntry(StoryboardAnimation animation, StoryboardAnimati
                 Origin = Anchor.Centre,
                 Colour = color
             },
-            length = new Circle
-            {
-                RelativeSizeAxes = Axes.Y,
-                Height = 0.5f,
-                Colour = color,
-                Alpha = 0.5f,
-                Anchor = Anchor.Centre,
-                Origin = Anchor.CentreLeft,
-            }
         };
     }
 
+    protected override void LoadComplete()
+    {
+        base.LoadComplete();
+        isSelected.BindValueChanged(e =>
+        {
+            outlineDiamond.Alpha = e.NewValue ? 1f : 0f;
+            outlineLength.Alpha = e.NewValue ? 1f : 0f;
+        });
+    }
+
     protected override void Update()
     {
         base.Update();
 
         X = Math.Clamp(timeline.PositionAtTime(Animation.StartTime, Parent!.DrawWidth), -DrawWidth / 2f, Parent.DrawWidth + DrawWidth / 2f);
 
         var endX = timeline.PositionAtTime(Animation.EndTime, Parent!.DrawWidth);
-        length.Width = Math.Max(endX - X, 0);
+        var clamped = Math.Max(endX - X, 0);
+        length.Width = clamped;
+        outlineLength.Width = clamped;
     }
 
     protected override bool OnClick(ClickEvent e)
     {
         this.ShowPopover();
+        isSelected.Value = true;
         return true;
     }
 
     public Popover GetPopover() => new FluXisPopover
     {
+        OnClose = () => isSelected.Value = false,
         Child = new FillFlowContainer
         {
             Width = 380,