Skip to content

Commit

Permalink
Merge pull request #2111 from andy840119/implement-component-for-able…
Browse files Browse the repository at this point in the history
…-to-switch-edit-mode

Implement the sub-section for able to switch the edit mode in the lyric editor.
  • Loading branch information
andy840119 authored Sep 3, 2023
2 parents 911f959 + f32cb79 commit 09499a5
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 121 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL Licence.
// See the LICENCE file in the repository root for full licence text.

using System;
using System.Collections.Generic;
using System.Linq;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Settings.Components.Markdown;
using osu.Game.Rulesets.Karaoke.Screens.Edit.Components.Markdown;
using osuTK;
using osuTK.Graphics;

namespace osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Settings;

public abstract partial class EditModeSwitchSubsection<TEditMode> : FillFlowContainer, IHasCurrentValue<TEditMode>
where TEditMode : struct, Enum
{
private const int button_vertical_margin = 20;
private const int horizontal_padding = 20;
private const int corner_radius = 15;

private readonly BindableWithCurrent<TEditMode> current = new();

public Bindable<TEditMode> Current
{
get => current.Current;
set => current.Current = value;
}

private readonly Box background;

protected EditModeSwitchSubsection()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Spacing = new Vector2(10);

LyricEditorDescriptionTextFlowContainer lyricEditorDescription;

Children = new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Masking = true,
CornerRadius = corner_radius,
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
new EditModeSwitcher(this)
{
Current = current,
},
},
},
lyricEditorDescription = new LyricEditorDescriptionTextFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Horizontal = horizontal_padding },
},
};

current.BindValueChanged(e =>
{
// update description text.
lyricEditorDescription.Description = GetDescription(e.NewValue);
}, true);
}

[BackgroundDependencyLoader]
private void load(LyricEditorColourProvider colourProvider, ILyricEditorState state)
{
background.Colour = colourProvider.Background4(state.Mode);
}

protected abstract LocalisableString GetButtonTitle(TEditMode mode);

protected abstract Color4 GetButtonColour(OsuColour colours, TEditMode mode, bool active);

protected abstract DescriptionFormat GetDescription(TEditMode mode);

private partial class EditModeSwitcher : CompositeDrawable, IHasCurrentValue<TEditMode>
{
private readonly BindableWithCurrent<TEditMode> current = new();

public Bindable<TEditMode> Current
{
get => current.Current;
set => current.Current = value;
}

private readonly EditModeSwitchSubsection<TEditMode> parent;
private readonly EditModeButton[] buttons;

public EditModeSwitcher(EditModeSwitchSubsection<TEditMode> parent)
{
this.parent = parent;

RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;

InternalChild = new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
buttons = Enum.GetValues<TEditMode>().Select(x => new EditModeButton(x)
{
Text = parent.GetButtonTitle(x),
Margin = new MarginPadding { Vertical = button_vertical_margin },
Padding = new MarginPadding { Horizontal = horizontal_padding },
Action = () => current.Value = x,
}).ToArray(),
},
};
}

[BackgroundDependencyLoader]
private void load(OsuColour colours)
{
current.BindValueChanged(e =>
{
// update button style.
foreach (var button in buttons)
{
bool highLight = EqualityComparer<TEditMode>.Default.Equals(button.Mode, e.NewValue);
button.Alpha = highLight ? 0.8f : 0.4f;
button.BackgroundColour = parent.GetButtonColour(colours, button.Mode, highLight);
}
}, true);
}

private partial class EditModeButton : EditorSectionButton
{
public TEditMode Mode { get; }

public EditModeButton(TEditMode mode)
{
Mode = mode;
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,140 +3,33 @@

using System;
using System.Collections.Generic;
using System.Linq;
using osu.Framework.Allocation;
using osu.Framework.Bindables;
using osu.Framework.Graphics;
using osu.Framework.Graphics.Containers;
using osu.Framework.Graphics.Shapes;
using osu.Framework.Graphics.UserInterface;
using osu.Framework.Localisation;
using osu.Game.Graphics;
using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Settings.Components.Markdown;
using osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.States.Modes;
using osu.Game.Rulesets.Karaoke.Screens.Edit.Components.Markdown;
using osuTK;
using osuTK.Graphics;

namespace osu.Game.Rulesets.Karaoke.Screens.Edit.Beatmaps.Lyrics.Settings.TimeTags;

public partial class TimeTagCreateConfigSubsection : FillFlowContainer, IHasCurrentValue<CreateTimeTagEditMode>
public partial class TimeTagCreateConfigSubsection : EditModeSwitchSubsection<CreateTimeTagEditMode>
{
private const int button_vertical_margin = 20;
private const int horizontal_padding = 20;
private const int corner_radius = 15;

private readonly EditModeButton[] buttons;
private readonly LyricEditorDescriptionTextFlowContainer lyricEditorDescription;

private readonly BindableWithCurrent<CreateTimeTagEditMode> current = new();

public Bindable<CreateTimeTagEditMode> Current
{
get => current.Current;
set => current.Current = value;
}

[Resolved]
private OsuColour colours { get; set; } = null!;

private readonly Box background;

public TimeTagCreateConfigSubsection()
{
RelativeSizeAxes = Axes.X;
AutoSizeAxes = Axes.Y;
Spacing = new Vector2(10);

Children = new Drawable[]
{
new Container
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Masking = true,
CornerRadius = corner_radius,
Children = new Drawable[]
{
background = new Box
{
RelativeSizeAxes = Axes.Both,
},
new GridContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
RowDimensions = new[]
{
new Dimension(GridSizeMode.AutoSize),
},
Content = new[]
{
buttons = Enum.GetValues<CreateTimeTagEditMode>().Select(x => new EditModeButton(x)
{
Text = getButtonTitle(x),
Margin = new MarginPadding { Vertical = button_vertical_margin },
Padding = new MarginPadding { Horizontal = horizontal_padding },
Action = () => current.Value = x,
}).ToArray(),
},
},
},
},
lyricEditorDescription = new LyricEditorDescriptionTextFlowContainer
{
RelativeSizeAxes = Axes.X,
AutoSizeAxes = Axes.Y,
Padding = new MarginPadding { Horizontal = horizontal_padding },
},
};

current.BindValueChanged(e =>
{
Schedule(() =>
{
updateEditMode(e.NewValue);
});
}, true);
}

[BackgroundDependencyLoader]
private void load(LyricEditorColourProvider colourProvider, ILyricEditorState state)
{
background.Colour = colourProvider.Background4(state.Mode);
}

private void updateEditMode(CreateTimeTagEditMode mode)
{
// update button style.
foreach (var button in buttons)
{
bool highLight = EqualityComparer<CreateTimeTagEditMode>.Default.Equals(button.Mode, mode);
button.Alpha = highLight ? 0.8f : 0.4f;
button.BackgroundColour = getButtonColour(button.Mode, highLight);
}

// update description text.
lyricEditorDescription.Description = getDescription(mode);
}

private LocalisableString getButtonTitle(CreateTimeTagEditMode mode)
protected override LocalisableString GetButtonTitle(CreateTimeTagEditMode mode)
=> mode switch
{
CreateTimeTagEditMode.Create => "Create",
CreateTimeTagEditMode.Modify => "Modify",
_ => throw new InvalidOperationException(nameof(mode)),
};

private Color4 getButtonColour(CreateTimeTagEditMode mode, bool active)
protected override Color4 GetButtonColour(OsuColour colours, CreateTimeTagEditMode mode, bool active)
=> mode switch
{
CreateTimeTagEditMode.Create => active ? colours.Green : colours.GreenDarker,
CreateTimeTagEditMode.Modify => active ? colours.Pink : colours.PinkDarker,
_ => throw new InvalidOperationException(nameof(mode)),
};

private DescriptionFormat getDescription(CreateTimeTagEditMode mode) =>
protected override DescriptionFormat GetDescription(CreateTimeTagEditMode mode) =>
mode switch
{
CreateTimeTagEditMode.Create => new DescriptionFormat
Expand Down Expand Up @@ -200,14 +93,4 @@ private DescriptionFormat getDescription(CreateTimeTagEditMode mode) =>
},
_ => throw new InvalidOperationException(nameof(mode)),
};

private partial class EditModeButton : EditorSectionButton
{
public CreateTimeTagEditMode Mode { get; }

public EditModeButton(CreateTimeTagEditMode mode)
{
Mode = mode;
}
}
}

0 comments on commit 09499a5

Please sign in to comment.