Add preview note area.

osu.Game.Rulesets.Karaoke/Edit/Style/LyricFontSection.cs

@@ -49,7 +49,7 @@ private void load(SkinManager manager)
                 },
                 borderSliderBar = new LabelledRealTimeSliderBar<int>
                 {
-                    Label = "Bold",
+                    Label = "Border size",
                     Description = "Adjust border size.",
                     Current = new BindableInt
                     {

osu.Game.Rulesets.Karaoke/Edit/Style/NoteColorSection.cs

@@ -1,10 +1,34 @@
 // 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.Game.Rulesets.Karaoke.Graphics.UserInterface;
+using osu.Game.Skinning;
+
 namespace osu.Game.Rulesets.Karaoke.Edit.Style
 {
     internal class NoteColorSection : StyleSection
     {
+        private ColorPicker noteColorPicker;
+        private ColorPicker blinkColorPicker;
+
         protected override string Title => "Color";
+
+        [BackgroundDependencyLoader]
+        private void load(SkinManager manager)
+        {
+            Children = new Drawable[]
+            {
+                noteColorPicker = new ColorPicker
+                {
+                    RelativeSizeAxes = Axes.X,
+                },
+                blinkColorPicker = new ColorPicker
+                {
+                    RelativeSizeAxes = Axes.X,
+                }
+            };
+        }
     }
 }

osu.Game.Rulesets.Karaoke/Edit/Style/NoteFontSection.cs

@@ -1,10 +1,36 @@
 // 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.Game.Graphics.UserInterfaceV2;
+using osu.Game.Rulesets.Karaoke.Graphics.UserInterface;
+using osu.Game.Skinning;
+
 namespace osu.Game.Rulesets.Karaoke.Edit.Style
 {
     internal class NoteFontSection : StyleSection
     {
+        private ColorPicker textColorPicker;
+        private LabelledSwitchButton boldSwitchButton;
+
         protected override string Title => "Font";
+
+        [BackgroundDependencyLoader]
+        private void load(SkinManager manager)
+        {
+            Children = new Drawable[]
+            {
+                textColorPicker = new ColorPicker
+                {
+                    RelativeSizeAxes = Axes.X,
+                },
+                boldSwitchButton = new LabelledSwitchButton
+                {
+                    Label = "Bold",
+                    Description = "Select bold or not.",
+                }
+            };
+        }
     }
 }

osu.Game.Rulesets.Karaoke/Edit/Style/NoteStylePreview.cs

@@ -0,0 +1,98 @@
+// 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.Bindables;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+using osu.Game.Rulesets.Karaoke.Configuration;
+using osu.Game.Rulesets.Karaoke.UI;
+using osu.Game.Rulesets.Karaoke.UI.Position;
+using osu.Game.Rulesets.UI.Scrolling;
+using osu.Game.Rulesets.UI.Scrolling.Algorithms;
+
+namespace osu.Game.Rulesets.Karaoke.Edit.Style
+{
+    public class NoteStylePreview : Container
+    {
+        private const int preview_column = 9;
+
+        [Cached(Type = typeof(IScrollingInfo))]
+        private readonly PreviewScrollingInfo scrollingInfo = new PreviewScrollingInfo();
+
+        [Cached(Type = typeof(IPositionCalculator))]
+        private readonly PositionCalculator positionCalculator = new PositionCalculator(preview_column);
+
+        protected override IReadOnlyDependencyContainer CreateChildDependencies(IReadOnlyDependencyContainer parent)
+        {
+            var configCache = parent.Get<RulesetConfigCache>();
+            var config = (KaraokeRulesetConfigManager)configCache.GetConfigFor(new KaraokeRuleset());
+            var dependencies = new DependencyContainer(base.CreateChildDependencies(parent));
+            dependencies.Cache(new KaraokeSessionStatics(config, null));
+
+            return dependencies;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider, StyleManager manager)
+        {
+            Masking = true;
+            CornerRadius = 15;
+            FillMode = FillMode.Fit;
+            FillAspectRatio = 2f;
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Colour = colourProvider.Background1,
+                },
+                new PreviewDrawableNoteArea
+                {
+                    Anchor = Anchor.Centre,
+                    Origin = Anchor.Centre
+                }
+            };
+        }
+
+        public class PreviewDrawableNoteArea : NotePlayfield
+        {
+            public PreviewDrawableNoteArea()
+                : base(preview_column)
+            {
+            }
+        }
+
+        public class PreviewScrollingInfo : IScrollingInfo
+        {
+            public IBindable<ScrollingDirection> Direction { get; } = new Bindable<ScrollingDirection>();
+
+            public IBindable<double> TimeRange { get; } = new BindableDouble();
+
+            public IScrollAlgorithm Algorithm { get; set; } = new ZeroScrollAlgorithm();
+
+            private class ZeroScrollAlgorithm : IScrollAlgorithm
+            {
+                protected const double START_TIME = 1000000000;
+
+                public double GetDisplayStartTime(double originTime, float offset, double timeRange, float scrollLength)
+                    => double.MinValue;
+
+                public float GetLength(double startTime, double endTime, double timeRange, float scrollLength)
+                    => scrollLength;
+
+                public float PositionAt(double time, double currentTime, double timeRange, float scrollLength)
+                    => (float)((time - START_TIME) / timeRange) * scrollLength;
+
+                public double TimeAt(float position, double currentTime, double timeRange, float scrollLength)
+                    => 0;
+
+                public void Reset()
+                {
+                }
+            }
+        }
+    }
+}

osu.Game.Rulesets.Karaoke/Edit/Style/StyleScreen.cs

@@ -22,6 +22,9 @@ public class StyleScreen : EditorScreen
         [Cached]
         protected readonly StyleManager StyleManager;
 
+        private StyleSectionsContainer styleSections;
+        private Container previewContainer;
+
         public StyleScreen()
             : base(EditorScreenMode.SongSetup)
         {
@@ -58,60 +61,85 @@ private void load()
                                     Colour = ColourProvider.Background2,
                                     RelativeSizeAxes = Axes.Both,
                                 },
-                                new StyleSectionsContainer
+                                styleSections = new StyleSectionsContainer
                                 {
                                     RelativeSizeAxes = Axes.Both,
                                 }
                             }
                         },
-                        new LyricStylePreview
+                        previewContainer = new Container
                         {
-                            Name = "Layout preview area",
+                            RelativeSizeAxes = Axes.Both,
+                        }
+                    }
+                },
+            };
+
+            styleSections.BindableStyle.BindValueChanged(e =>
+            {
+                switch (e.NewValue)
+                {
+                    case Style.Lyric:
+                        previewContainer.Child = new LyricStylePreview
+                        {
+                            Name = "Lyric style preview area",
                             Anchor = Anchor.Centre,
                             Origin = Anchor.Centre,
                             Size = new Vector2(0.95f),
                             RelativeSizeAxes = Axes.Both
-                        },
-                    }
-                },
-            };
+                        };
+                        break;
+
+                    case Style.Note:
+                        previewContainer.Child = new NoteStylePreview
+                        {
+                            Name = "Note style preview area",
+                            Anchor = Anchor.Centre,
+                            Origin = Anchor.Centre,
+                            Size = new Vector2(0.95f),
+                            RelativeSizeAxes = Axes.Both
+                        };
+                        break;
+                };
+            }, true);
         }
 
         internal class StyleSectionsContainer : SectionsContainer<StyleSection>
         {
+            private readonly StyleScreenHeader header;
+
             private const float section_scale = 0.75f;
 
+            public IBindable<Style> BindableStyle => header.BindableStyle;
+
             public StyleSectionsContainer()
             {
-                FixedHeader = new StyleScreenHeader();
+                FixedHeader = header = new StyleScreenHeader();
 
                 Scale = new Vector2(section_scale);
                 Size = new Vector2(1 / section_scale);
 
-                if (FixedHeader is StyleScreenHeader screenHeader)
+                header.BindableStyle.BindValueChanged(e =>
                 {
-                    screenHeader.BindableStyle.BindValueChanged(e =>
+                    switch (e.NewValue)
                     {
-                        switch (e.NewValue)
-                        {
-                            case Style.Lyric:
-                                Children = new StyleSection[]
-                                {
+                        case Style.Lyric:
+                            Children = new StyleSection[]
+                            {
                                     new LyricColorSection(),
                                     new LyricFontSection(),
                                     new LyricShadowSection(),
-                                };
-                                break;
-                            case Style.Note:
-                                Children = new StyleSection[]
-                                {
+                            };
+                            break;
+                        case Style.Note:
+                            Children = new StyleSection[]
+                            {
                                     new NoteColorSection(),
                                     new NoteFontSection(),
-                                };
-                                break;
-                        }
-                    }, true);
-                }
+                            };
+                            break;
+                    }
+                }, true);
             }
 
             internal class StyleScreenHeader : OverlayHeader