Example #1
0
            private void beatmapChanged(WorkingBeatmap newBeatmap)
            {
                beatmap = newBeatmap;

                modFlow.Clear();

                ruleset = newBeatmap.BeatmapInfo.Ruleset.CreateInstance();
                foreach (var mod in ruleset.GetAllMods())
                {
                    var checkBox = new OsuCheckbox
                    {
                        RelativeSizeAxes = Axes.None,
                        Width            = 50,
                        LabelText        = mod.ShortenedName
                    };

                    checkBox.Current.ValueChanged += v => informationCache.Invalidate();
                    modFlow.Add(checkBox);
                }

                informationCache.Invalidate();
            }
        private void load()
        {
            Masking      = true;
            CornerRadius = 5;

            OsuCheckbox waveformCheckbox;
            OsuCheckbox controlPointsCheckbox;
            OsuCheckbox ticksCheckbox;

            InternalChildren = new Drawable[]
            {
                new Box
                {
                    RelativeSizeAxes = Axes.Both,
                    Colour           = Color4Extensions.FromHex("111")
                },
                new GridContainer
                {
                    RelativeSizeAxes = Axes.Both,
                    Content          = new[]
                    {
                        new Drawable[]
                        {
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = Color4Extensions.FromHex("222")
                                    },
                                    new FillFlowContainer
                                    {
                                        Anchor       = Anchor.CentreLeft,
                                        Origin       = Anchor.CentreLeft,
                                        AutoSizeAxes = Axes.Y,
                                        Width        = 160,
                                        Padding      = new MarginPadding {
                                            Horizontal = 10
                                        },
                                        Direction = FillDirection.Vertical,
                                        Spacing   = new Vector2(0, 4),
                                        Children  = new[]
                                        {
                                            waveformCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Waveform",
                                                Current   = { Value = true },
                                            },
                                            controlPointsCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Control Points",
                                                Current   = { Value = true },
                                            },
                                            ticksCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Ticks",
                                                Current   = { Value = true },
                                            }
                                        }
                                    }
                                }
                            },
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = Color4Extensions.FromHex("333")
                                    },
                                    new Container <TimelineButton>
                                    {
                                        Anchor           = Anchor.CentreLeft,
                                        Origin           = Anchor.CentreLeft,
                                        RelativeSizeAxes = Axes.Y,
                                        AutoSizeAxes     = Axes.X,
                                        Masking          = true,
                                        Children         = new[]
                                        {
                                            new TimelineButton
                                            {
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchPlus,
                                                Action           = () => changeZoom(1)
                                            },
                                            new TimelineButton
                                            {
                                                Anchor           = Anchor.BottomLeft,
                                                Origin           = Anchor.BottomLeft,
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchMinus,
                                                Action           = () => changeZoom(-1)
                                            },
                                        }
                                    }
                                }
                            },
                            Timeline
                        },
                    },
                    ColumnDimensions = new[]
                    {
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(GridSizeMode.Distributed),
                    }
                }
            };

            Timeline.WaveformVisible.BindTo(waveformCheckbox.Current);
            Timeline.ControlPointsVisible.BindTo(controlPointsCheckbox.Current);
            Timeline.TicksVisible.BindTo(ticksCheckbox.Current);
        }
Example #3
0
        public TimelineArea()
        {
            Masking      = true;
            CornerRadius = 5;

            OsuCheckbox hitObjectsCheckbox;
            OsuCheckbox hitSoundsCheckbox;
            OsuCheckbox waveformCheckbox;

            InternalChildren = new Drawable[]
            {
                new Box
                {
                    RelativeSizeAxes = Axes.Both,
                    Colour           = OsuColour.FromHex("111")
                },
                new GridContainer
                {
                    RelativeSizeAxes = Axes.Both,
                    Content          = new[]
                    {
                        new Drawable[]
                        {
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = OsuColour.FromHex("222")
                                    },
                                    new FillFlowContainer
                                    {
                                        Anchor       = Anchor.CentreLeft,
                                        Origin       = Anchor.CentreLeft,
                                        AutoSizeAxes = Axes.Y,
                                        Width        = 160,
                                        Padding      = new MarginPadding {
                                            Horizontal = 15
                                        },
                                        Direction = FillDirection.Vertical,
                                        Spacing   = new Vector2(0, 4),
                                        Children  = new[]
                                        {
                                            hitObjectsCheckbox = new OsuCheckbox {
                                                LabelText = "Hit objects"
                                            },
                                            hitSoundsCheckbox = new OsuCheckbox {
                                                LabelText = "Hit sounds"
                                            },
                                            waveformCheckbox = new OsuCheckbox {
                                                LabelText = "Waveform"
                                            }
                                        }
                                    }
                                }
                            },
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = OsuColour.FromHex("333")
                                    },
                                    new Container <TimelineButton>
                                    {
                                        Anchor           = Anchor.CentreLeft,
                                        Origin           = Anchor.CentreLeft,
                                        RelativeSizeAxes = Axes.Y,
                                        AutoSizeAxes     = Axes.X,
                                        Masking          = true,
                                        Children         = new[]
                                        {
                                            new TimelineButton
                                            {
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchPlus,
                                                Action           = () => changeZoom(1)
                                            },
                                            new TimelineButton
                                            {
                                                Anchor           = Anchor.BottomLeft,
                                                Origin           = Anchor.BottomLeft,
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchMinus,
                                                Action           = () => changeZoom(-1)
                                            },
                                        }
                                    }
                                }
                            },
                            timeline = new Timeline {
                                RelativeSizeAxes = Axes.Both
                            }
                        },
                    },
                    ColumnDimensions = new[]
                    {
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(GridSizeMode.Distributed),
                    }
                }
            };

            hitObjectsCheckbox.Current.Value = true;
            hitSoundsCheckbox.Current.Value  = true;
            waveformCheckbox.Current.Value   = true;

            timeline.WaveformVisible.BindTo(waveformCheckbox.Current);
        }
Example #4
0
 protected override Drawable CreateControl() => checkbox = new OsuCheckbox();
Example #5
0
        private void load(OverlayColourProvider colourProvider)
        {
            Masking = true;

            OsuCheckbox waveformCheckbox;
            OsuCheckbox controlPointsCheckbox;
            OsuCheckbox ticksCheckbox;

            InternalChildren = new Drawable[]
            {
                new Box
                {
                    RelativeSizeAxes = Axes.Both,
                    Colour           = colourProvider.Background5
                },
                new GridContainer
                {
                    RelativeSizeAxes = Axes.X,
                    AutoSizeAxes     = Axes.Y,
                    Content          = new[]
                    {
                        new Drawable[]
                        {
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Name             = @"Toggle controls",
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = colourProvider.Background2,
                                    },
                                    new FillFlowContainer
                                    {
                                        AutoSizeAxes = Axes.Y,
                                        Width        = 160,
                                        Padding      = new MarginPadding(10),
                                        Direction    = FillDirection.Vertical,
                                        Spacing      = new Vector2(0, 4),
                                        Children     = new[]
                                        {
                                            waveformCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Waveform",
                                                Current   = { Value = true },
                                            },
                                            controlPointsCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Control Points",
                                                Current   = { Value = true },
                                            },
                                            ticksCheckbox = new OsuCheckbox
                                            {
                                                LabelText = "Ticks",
                                                Current   = { Value = true },
                                            }
                                        }
                                    }
                                }
                            },
                            new Container
                            {
                                RelativeSizeAxes = Axes.Y,
                                AutoSizeAxes     = Axes.X,
                                Name             = @"Zoom controls",
                                Children         = new Drawable[]
                                {
                                    new Box
                                    {
                                        RelativeSizeAxes = Axes.Both,
                                        Colour           = colourProvider.Background3,
                                    },
                                    new Container <TimelineButton>
                                    {
                                        Anchor           = Anchor.CentreLeft,
                                        Origin           = Anchor.CentreLeft,
                                        RelativeSizeAxes = Axes.Y,
                                        AutoSizeAxes     = Axes.X,
                                        Masking          = true,
                                        Children         = new[]
                                        {
                                            new TimelineButton
                                            {
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchPlus,
                                                Action           = () => changeZoom(1)
                                            },
                                            new TimelineButton
                                            {
                                                Anchor           = Anchor.BottomLeft,
                                                Origin           = Anchor.BottomLeft,
                                                RelativeSizeAxes = Axes.Y,
                                                Height           = 0.5f,
                                                Icon             = FontAwesome.Solid.SearchMinus,
                                                Action           = () => changeZoom(-1)
                                            },
                                        }
                                    }
                                }
                            },
                            Timeline = new Timeline(userContent),
                        },
                    },
                    RowDimensions = new[]
                    {
                        new Dimension(GridSizeMode.AutoSize),
                    },
                    ColumnDimensions = new[]
                    {
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(GridSizeMode.AutoSize),
                        new Dimension(),
                    }
                }
            };

            Timeline.WaveformVisible.BindTo(waveformCheckbox.Current);
            Timeline.ControlPointsVisible.BindTo(controlPointsCheckbox.Current);
            Timeline.TicksVisible.BindTo(ticksCheckbox.Current);
        }
Example #6
0
        public ScrollableTimeline()
        {
            Masking      = true;
            CornerRadius = 5;

            OsuCheckbox hitObjectsCheckbox;
            OsuCheckbox hitSoundsCheckbox;
            OsuCheckbox waveformCheckbox;

            InternalChildren = new Drawable[]
            {
                new Box
                {
                    RelativeSizeAxes = Axes.Both,
                    Colour           = OsuColour.FromHex("111")
                },
                new FillFlowContainer
                {
                    RelativeSizeAxes = Axes.Both,
                    Direction        = FillDirection.Horizontal,
                    Children         = new Drawable[]
                    {
                        new Container
                        {
                            AutoSizeAxes     = Axes.X,
                            RelativeSizeAxes = Axes.Y,
                            Children         = new Drawable[]
                            {
                                new Box
                                {
                                    RelativeSizeAxes = Axes.Both,
                                    Colour           = OsuColour.FromHex("222")
                                },
                                new FillFlowContainer
                                {
                                    Anchor       = Anchor.CentreLeft,
                                    Origin       = Anchor.CentreLeft,
                                    AutoSizeAxes = Axes.Y,
                                    Width        = 160,
                                    Padding      = new MarginPadding {
                                        Horizontal = 15
                                    },
                                    Direction = FillDirection.Vertical,
                                    Spacing   = new Vector2(0, 4),
                                    Children  = new[]
                                    {
                                        hitObjectsCheckbox = new OsuCheckbox {
                                            LabelText = "Hitobjects"
                                        },
                                        hitSoundsCheckbox = new OsuCheckbox {
                                            LabelText = "Hitsounds"
                                        },
                                        waveformCheckbox = new OsuCheckbox {
                                            LabelText = "Waveform"
                                        }
                                    }
                                }
                            }
                        },
                        new Container
                        {
                            AutoSizeAxes     = Axes.X,
                            RelativeSizeAxes = Axes.Y,
                            Children         = new Drawable[]
                            {
                                new Box
                                {
                                    RelativeSizeAxes = Axes.Both,
                                    Colour           = OsuColour.FromHex("333")
                                },
                                new Container <TimelineButton>
                                {
                                    Anchor           = Anchor.CentreLeft,
                                    Origin           = Anchor.CentreLeft,
                                    RelativeSizeAxes = Axes.Y,
                                    AutoSizeAxes     = Axes.X,
                                    Masking          = true,
                                    Children         = new[]
                                    {
                                        new TimelineButton
                                        {
                                            RelativeSizeAxes = Axes.Y,
                                            Height           = 0.5f,
                                            Icon             = FontAwesome.fa_search_plus,
                                            Action           = () => timelineContainer.Zoom++
                                        },
                                        new TimelineButton
                                        {
                                            Anchor           = Anchor.BottomLeft,
                                            Origin           = Anchor.BottomLeft,
                                            RelativeSizeAxes = Axes.Y,
                                            Height           = 0.5f,
                                            Icon             = FontAwesome.fa_search_minus,
                                            Action           = () => timelineContainer.Zoom--
                                        },
                                    }
                                }
                            }
                        },
                        timelineContainer = new ScrollingTimelineContainer {
                            RelativeSizeAxes = Axes.Y
                        }
                    }
                }
            };

            hitObjectsCheckbox.Current.Value = true;
            hitSoundsCheckbox.Current.Value  = true;
            waveformCheckbox.Current.Value   = true;

            timelineContainer.WaveformVisible.BindTo(waveformCheckbox.Current);
        }
Example #7
0
        public TestSceneLyricLineStyle()
        {
            Child = new GridContainer
            {
                RelativeSizeAxes = Axes.Both,
                ColumnDimensions = new[]
                {
                    new Dimension(GridSizeMode.Absolute, 410f)
                },
                Content = new[]
                {
                    new Drawable[]
                    {
                        new GridContainer
                        {
                            Name             = "Edit container",
                            RelativeSizeAxes = Axes.Both,
                            Content          = new[]
                            {
                                new Drawable[]
                                {
                                    new Container
                                    {
                                        Name             = "Color section",
                                        RelativeSizeAxes = Axes.Both,
                                        Children         = new Drawable[]
                                        {
                                            new Box
                                            {
                                                Name             = "Setting background",
                                                RelativeSizeAxes = Axes.Both,
                                                Colour           = Color4.Gray
                                            },
                                            new FillFlowContainer
                                            {
                                                RelativeSizeAxes = Axes.Both,
                                                Padding          = new MarginPadding(5),
                                                Spacing          = new Vector2(10),
                                                Children         = new Drawable[]
                                                {
                                                    new EditSection
                                                    {
                                                        Name     = "Color",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Color"
                                                            },
                                                            colorAreaDropdown = new OsuDropdown <ColorArea>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Items            = EnumUtils.GetValues <ColorArea>()
                                                            }
                                                        }
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Brush type",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Brush type"
                                                            },
                                                            brushTypeDropdown = new OsuDropdown <BrushType>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Items            = EnumUtils.GetValues <BrushType>()
                                                            }
                                                        }
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Color picker",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Color picker"
                                                            },
                                                            colorPicker = new ColorPicker
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                            }
                                                        }
                                                    },
                                                }
                                            }
                                        }
                                    }
                                },
                                new Drawable[]
                                {
                                    new Container
                                    {
                                        Name             = "Font section",
                                        RelativeSizeAxes = Axes.Both,
                                        Children         = new Drawable[]
                                        {
                                            new Box
                                            {
                                                Name             = "Setting background",
                                                RelativeSizeAxes = Axes.Both,
                                                Colour           = Color4.Gray
                                            },
                                            fontSection = new FillFlowContainer
                                            {
                                                RelativeSizeAxes = Axes.Both,
                                                Padding          = new MarginPadding(5),
                                                Spacing          = new Vector2(10),
                                                Children         = new Drawable[]
                                                {
                                                    new EditSection
                                                    {
                                                        Name     = "Font area",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Font area"
                                                            },
                                                            fontAreaDropdown = new OsuDropdown <FontArea>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Items            = EnumUtils.GetValues <FontArea>()
                                                            }
                                                        }
                                                    },
                                                    new EditSection
                                                    {
                                                        // TODO : implement
                                                        Name     = "Font",
                                                        Alpha    = 0,
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Font"
                                                            },
                                                            fontDropdown = new OsuDropdown <Font>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Items            = EnumUtils.GetValues <Font>()
                                                            }
                                                        }
                                                    },
                                                    boldCheckbox = new OsuCheckbox
                                                    {
                                                        LabelText = "Bold"
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Font size",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Font size"
                                                            },
                                                            fontSizeSliderBar = new OsuSliderBar <float>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Current          = new BindableFloat
                                                                {
                                                                    Value    = 30,
                                                                    MinValue = 10,
                                                                    MaxValue = 70
                                                                }
                                                            }
                                                        }
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Border size",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Border size"
                                                            },
                                                            borderSliderBar = new OsuSliderBar <int>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Current          = new BindableInt
                                                                {
                                                                    Value    = 10,
                                                                    MinValue = 0,
                                                                    MaxValue = 20
                                                                }
                                                            }
                                                        }
                                                    },
                                                    displayShaderCheckbox = new OsuCheckbox
                                                    {
                                                        LabelText = "Display shadow"
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Shadow X",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Shadow X"
                                                            },
                                                            shadowXSliderBar = new OsuSliderBar <float>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Current          = new BindableFloat
                                                                {
                                                                    Value    = 10,
                                                                    MinValue = 0,
                                                                    MaxValue = 20
                                                                }
                                                            }
                                                        }
                                                    },
                                                    new EditSection
                                                    {
                                                        Name     = "Shadow Y",
                                                        Children = new Drawable[]
                                                        {
                                                            new OsuSpriteText {
                                                                Text = "Shadow Y"
                                                            },
                                                            shadowYSliderBar = new OsuSliderBar <float>
                                                            {
                                                                RelativeSizeAxes = Axes.X,
                                                                Current          = new BindableFloat
                                                                {
                                                                    Value    = 10,
                                                                    MinValue = 0,
                                                                    MaxValue = 20
                                                                }
                                                            }
                                                        }
                                                    }
                                                }
                                            }
                                        }
                                    }
                                }
                            }
                        },
                        new Container
                        {
                            Name             = "Preview container",
                            RelativeSizeAxes = Axes.Both,
                            Children         = new Drawable[]
                            {
                                new Box
                                {
                                    Name             = "Preview background",
                                    RelativeSizeAxes = Axes.Both,
                                    Colour           = Color4.WhiteSmoke
                                },
                                layoutArea = new SkinProvidingContainer(new KaraokeStyleEditorSkin())
                                {
                                    RelativeSizeAxes = Axes.Both,
                                }
                            }
                        }
                    },
                }
            };

            colorAreaDropdown.Current.BindValueChanged(value => { brushTypeDropdown.Current.Value = drawableLyricLine.GetBrushInfo(value.NewValue).Type; });

            brushTypeDropdown.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(selectedColorArea, x => x.Type = value.NewValue));

            fontAreaDropdown.Current.BindValueChanged(value =>
            {
                var fontInfo = drawableLyricLine.GetFontInfo(value.NewValue);
                boldCheckbox.Current.Value      = fontInfo.Bold;
                fontSizeSliderBar.Current.Value = fontInfo.CharSize;
                borderSliderBar.Current.Value   = fontInfo.EdgeSize;
            });

            boldCheckbox.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(selectedFontArea, x => x.Bold          = value.NewValue));
            fontSizeSliderBar.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(selectedFontArea, x => x.CharSize = value.NewValue));
            borderSliderBar.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(selectedFontArea, x => x.EdgeSize   = value.NewValue));

            displayShaderCheckbox.Current.BindValueChanged(value =>
            {
                var karaokeFont = drawableLyricLine.Font;
                shadowXSliderBar.Current.Value = karaokeFont.ShadowOffset.X;
                shadowYSliderBar.Current.Value = karaokeFont.ShadowOffset.Y;

                // Update view
                fontSection.Children.Where(x => x.Name.StartsWith("Shadow ")).ForEach(x => x.Alpha = value.NewValue ? 1 : 0);

                // Update property
                drawableLyricLine.ApplyProperty(x => x.UseShadow = value.NewValue);
            });

            shadowXSliderBar.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(x => x.ShadowOffset = new Vector2(value.NewValue, x.ShadowOffset.Y)));
            shadowYSliderBar.Current.BindValueChanged(value => drawableLyricLine.ApplyProperty(x => x.ShadowOffset = new Vector2(x.ShadowOffset.X, value.NewValue)));

            AddStep("Test", () => initialLyricLine(createDefaultLyricLine()));
        }
Example #8
0
        public TestSceneLyricLineLayout()
        {
            Child = new GridContainer
            {
                RelativeSizeAxes = Axes.Both,
                ColumnDimensions = new[]
                {
                    new Dimension(GridSizeMode.Absolute, 210f)
                },
                Content = new[]
                {
                    new Drawable[]
                    {
                        new Container
                        {
                            RelativeSizeAxes = Axes.Both,
                            Children         = new Drawable[]
                            {
                                new Box
                                {
                                    Name             = "Setting background",
                                    RelativeSizeAxes = Axes.Both,
                                    Colour           = Color4.Gray
                                },
                                new FillFlowContainer
                                {
                                    RelativeSizeAxes = Axes.Both,
                                    Padding          = new MarginPadding(5),
                                    Spacing          = new Vector2(10),
                                    Children         = new Drawable[]
                                    {
                                        new EditSection
                                        {
                                            Name     = "Name section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Name"
                                                },
                                                nameTextBox = new OsuTextBox
                                                {
                                                    Width = 200
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Anchor section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Anchor"
                                                },
                                                alignmentDropdown = new OsuDropdown <Anchor>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Items            = (Anchor[])Enum.GetValues(typeof(Anchor))
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Horizontal margin section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Horizontal margin"
                                                },
                                                horizontalMarginSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 500,
                                                        Value    = 30,
                                                        Default  = 30
                                                    }
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Vertical margin section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Vertical margin"
                                                },
                                                verticalMarginSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 500,
                                                        Value    = 30,
                                                        Default  = 30
                                                    }
                                                }
                                            }
                                        },
                                        continuousCheckbox = new OsuCheckbox
                                        {
                                            Name      = "Continuous section",
                                            LabelText = "Continuous"
                                        },
                                        new EditSection
                                        {
                                            Name     = "Smart horizon section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Smart horizon"
                                                },
                                                smartHorizonDropdown = new OsuDropdown <KaraokeTextSmartHorizon>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Items            = (KaraokeTextSmartHorizon[])Enum.GetValues(typeof(KaraokeTextSmartHorizon))
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Lyrics interval section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Lyrics interval"
                                                },
                                                lyricIntervalSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 30,
                                                        Value    = 10,
                                                        Default  = 10
                                                    }
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Ruby interval section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Ruby interval"
                                                },
                                                rubyIntervalSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 30,
                                                        Value    = 10,
                                                        Default  = 10
                                                    }
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Romaji interval section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Romaji interval"
                                                },
                                                romajiIntervalSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 30,
                                                        Value    = 10,
                                                        Default  = 10
                                                    }
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Ruby alignment section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Ruby alignment"
                                                },
                                                rubyAlignmentDropdown = new OsuDropdown <LyricTextAlignment>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Items            = (LyricTextAlignment[])Enum.GetValues(typeof(LyricTextAlignment))
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Romaji alignment section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Romaji alignment"
                                                },
                                                romajiAlignmentDropdown = new OsuDropdown <LyricTextAlignment>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Items            = (LyricTextAlignment[])Enum.GetValues(typeof(LyricTextAlignment))
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Ruby margin section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Ruby margin"
                                                },
                                                rubyMarginSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 30,
                                                        Value    = 10,
                                                        Default  = 10
                                                    }
                                                }
                                            }
                                        },
                                        new EditSection
                                        {
                                            Name     = "Romaji margin section",
                                            Children = new Drawable[]
                                            {
                                                new OsuSpriteText {
                                                    Text = "Romaji margin"
                                                },
                                                romajiMarginSliderBar = new OsuSliderBar <int>
                                                {
                                                    RelativeSizeAxes = Axes.X,
                                                    Current          = new BindableNumber <int>
                                                    {
                                                        MinValue = 0,
                                                        MaxValue = 30,
                                                        Value    = 10,
                                                        Default  = 10
                                                    }
                                                }
                                            }
                                        },
                                    }
                                }
                            }
                        },
                        new Container
                        {
                            RelativeSizeAxes = Axes.Both,
                            Children         = new Drawable[]
                            {
                                new Box
                                {
                                    Name             = "Setting background",
                                    RelativeSizeAxes = Axes.Both,
                                    Colour           = Color4.WhiteSmoke
                                },
                                layoutArea = new SkinProvidingContainer(new KaraokeLayoutEditorSkin())
                                {
                                    RelativeSizeAxes = Axes.Both,
                                }
                            }
                        }
                    }
                }
            };

            // Initial bindable
            nameTextBox.Current.BindValueChanged(x =>
            {
                /*TODO : maybe do something in the future.*/
            });
            alignmentDropdown.Current.BindValueChanged(x => applyChange(l => l.Alignment = x.NewValue));
            horizontalMarginSliderBar.Current.BindValueChanged(x => applyChange(l => l.HorizontalMargin = x.NewValue));
            verticalMarginSliderBar.Current.BindValueChanged(x => applyChange(l => l.VerticalMargin     = x.NewValue));
            continuousCheckbox.Current.BindValueChanged(x => applyChange(l => l.Continuous           = x.NewValue));
            smartHorizonDropdown.Current.BindValueChanged(x => applyChange(l => l.SmartHorizon       = x.NewValue));
            lyricIntervalSliderBar.Current.BindValueChanged(x => applyChange(l => l.LyricsInterval   = x.NewValue));
            rubyIntervalSliderBar.Current.BindValueChanged(x => applyChange(l => l.RubyInterval      = x.NewValue));
            romajiIntervalSliderBar.Current.BindValueChanged(x => applyChange(l => l.RomajiInterval  = x.NewValue));
            rubyAlignmentDropdown.Current.BindValueChanged(x => applyChange(l => l.RubyAlignment     = x.NewValue));
            romajiAlignmentDropdown.Current.BindValueChanged(x => applyChange(l => l.RomajiAlignment = x.NewValue));
            rubyMarginSliderBar.Current.BindValueChanged(x => applyChange(l => l.RubyMargin          = x.NewValue));
            romajiMarginSliderBar.Current.BindValueChanged(x => applyChange(l => l.RomajiMargin      = x.NewValue));

            AddStep("Small size lyric layout",
                    () => initialLyricLine(createDefaultLyricLine("@カラオケ",
                                                                  new[]
            {
                "@Ruby1=カ,か",
                "@Ruby2=ラ,ら",
                "@Ruby3=オ,お",
                "@Ruby4=ケ,け"
            },
                                                                  new[]
            {
                "@Romaji1=カ,ka",
                "@Romaji2=ラ,ra",
                "@Romaji3=オ,o",
                "@Romaji4=ケ,ke"
            }
                                                                  , "karaoke")));
            AddStep("Medium size lyric layout",
                    () => initialLyricLine(createDefaultLyricLine("@[00:18:58]た[00:18:81]だ[00:19:36]風[00:20:09]に[00:20:29]揺[00:20:49]ら[00:20:68]れ[00:20:89]て[00:20:93]",
                                                                  new[]
            {
                "@Ruby1=風,かぜ",
                "@Ruby2=揺,ゆ"
            },
                                                                  new[]
            {
                "@Romaji1=た,ta",
                "@Romaji2=だ,da",
                "@Romaji3=風,kaze",
                "@Romaji4=に,ni",
                "@Romaji5=揺,yu",
                "@Romaji6=ら,ra",
                "@Romaji7=れ,re",
                "@Romaji8=て,te"
            }
                                                                  , "karaoke")));
            AddStep("Large size lyric layout", () => initialLyricLine(createDefaultLyricLine("@灰色(いろ)(いろ)の景色(いろ)(いろ)さえ色づき始める",
                                                                                             Array.Empty <string>(), Array.Empty <string>(), "karaoke")));
        }