Skip to content

Fix piano roll UI bugs #2207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
stakira merged 1 commit into from
Jun 17, 2026
Merged

Fix piano roll UI bugs #2207

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions OpenUtau/Controls/NotePropertiesControl.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@

<Grid>
<TextBlock Text="{Binding Title}" Height="24" Padding="4" HorizontalAlignment="Left" VerticalAlignment="Top"/>
<ScrollViewer Margin="0,48,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Visible" AllowAutoHide="False">
<StackPanel Margin="0,0,4,0">
<ScrollViewer Margin="0,48,0,0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" AllowAutoHide="True">
<StackPanel Margin="0">
<Expander Header="{DynamicResource noteproperty.basic}" HorizontalAlignment="Stretch" Margin="0,0,4,2">
<StackPanel IsEnabled="{Binding IsNoteSelected}">
<Grid ColumnDefinitions="143,*">
Expand Down
40 changes: 22 additions & 18 deletions OpenUtau/Controls/PianoRoll.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@
Fill="{DynamicResource NeutralAccentBrushSemi}"
Data="M -6.5 0 L 6.5 0 L 6.5 3 L 0 9 L -6.5 3 Z"/>
</Canvas>
<!-- Notes backgrounds -->
<c:TrackBackground Grid.Row="3" Grid.Column="1" IsHitTestVisible="False"
Foreground="{DynamicResource TrackBackgroundAltBrush}"
DataContext="{Binding NotesViewModel}"
Expand All @@ -131,9 +132,27 @@
TickOffset="{Binding NotesViewModel.TickOffset}"
SnapDiv="{Binding NotesViewModel.SnapDiv, Mode=OneWay}"
SnapTicks="{Binding NotesViewModel.SnapTicks}"
ShowBarNumber="True"/>
<Image Grid.Row="3" Grid.RowSpan="3" Grid.Column="1" HorizontalAlignment="Right" Margin="0,0,100,0"
Source="{Binding NotesViewModel.Portrait}" OpacityMask="{Binding NotesViewModel.PortraitMask}" Stretch="None"/>
ShowBar="True"/>
<!-- Notes backgrounds end -->
<!-- Expression backgrounds (to rendered below portrait) -->
<c:TrackBackground Grid.Row="5" Grid.Column="1" IsHitTestVisible="False"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Foreground="{DynamicResource TrackBackgroundAltBrush}"
TrackHeight="{Binding NotesViewModel.ExpTrackHeight}"/>
<c:TickBackground Grid.Row="5" Grid.Column="1" IsHitTestVisible="False"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Foreground="{DynamicResource TickLineBrush}"
Background="{DynamicResource TickLineBrushLow}"
Resolution="{Binding PlaybackViewModel.Resolution}"
TickWidth="{Binding NotesViewModel.TickWidth}"
TickOrigin="{Binding NotesViewModel.TickOrigin}"
TickOffset="{Binding NotesViewModel.TickOffset}"
SnapDiv="{Binding NotesViewModel.SnapDiv, Mode=OneWay}"
ShowBar="False"/>
<!-- Expression backgrounds end -->
<Canvas Name="PortraitCanvas" Grid.Row="3" Grid.Column="1" HorizontalAlignment="Stretch" IsHitTestVisible="False">
<Image Name="PortraitImage" Source="{Binding NotesViewModel.Portrait}" OpacityMask="{Binding NotesViewModel.PortraitMask}" Stretch="None"/>
</Canvas>
<Border Grid.Row="3" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Bottom"
Margin="0,0,0,60" Height="60" IsHitTestVisible="False">
<c:WaveformImage DataContext="{Binding NotesViewModel, Mode=OneWay}"
Expand Down Expand Up @@ -558,30 +577,15 @@
<GridSplitter Grid.Row="4" Grid.ColumnSpan="3" Height="10" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
Background="{DynamicResource SystemControlBackgroundAltHighBrush}" IsVisible="{Binding NotesViewModel.ShowExpressions}"
Focusable="False" Cursor="SizeNorthSouth"/>
<c:TrackBackground Grid.Row="5" Grid.Column="1" IsHitTestVisible="False"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Foreground="{DynamicResource TrackBackgroundAltBrush}"
TrackHeight="{Binding NotesViewModel.ExpTrackHeight}"/>
<c:TickBackground Grid.Row="5" Grid.Column="1" IsHitTestVisible="False"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Foreground="{DynamicResource TickLineBrush}"
Background="{DynamicResource TickLineBrushLow}"
Resolution="{Binding PlaybackViewModel.Resolution}"
TickWidth="{Binding NotesViewModel.TickWidth}"
TickOrigin="{Binding NotesViewModel.TickOrigin}"
TickOffset="{Binding NotesViewModel.TickOffset}"
SnapDiv="{Binding NotesViewModel.SnapDiv, Mode=OneWay}"/>
<c:ExpressionCanvas Grid.Row="5" Grid.Column="1" Opacity="{Binding NotesViewModel.ExpShadowOpacity}"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Margin="0,24,0,0"
TickWidth="{Binding NotesViewModel.TickWidth}"
TickOffset="{Binding NotesViewModel.TickOffset}"
Part="{Binding NotesViewModel.Part}"
Key="{Binding NotesViewModel.SecondaryKey}"
ShowRealCurve="False"/>
<c:ExpressionCanvas Grid.Row="5" Grid.Column="1"
IsVisible="{Binding NotesViewModel.ShowExpressions}"
Margin="0,24,0,0"
Bounds="{Binding NotesViewModel.ExpBounds, Mode=OneWayToSource}"
TickWidth="{Binding NotesViewModel.TickWidth}"
TickOffset="{Binding NotesViewModel.TickOffset}"
Expand Down
12 changes: 12 additions & 0 deletions OpenUtau/Controls/PianoRoll.axaml.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,18 @@ public PianoRoll(PianoRollViewModel model) {
penTool.AddHandler(PointerPressedEvent, OnToolButtonPointerPressed, RoutingStrategies.Tunnel | RoutingStrategies.Bubble, true);
drawPitchTool.AddHandler(PointerPressedEvent, OnToolButtonPointerPressed, RoutingStrategies.Tunnel | RoutingStrategies.Bubble, true);
drawLinePitchTool.AddHandler(PointerPressedEvent, OnToolButtonPointerPressed, RoutingStrategies.Tunnel | RoutingStrategies.Bubble, true);
this.LayoutUpdated += PianoRollLayoutUpdated;
}

private void PianoRollLayoutUpdated(object? sender, EventArgs e) {
UpdatePortraitPosition();
}

private void UpdatePortraitPosition() {
if (PortraitImage.DesiredSize.Width == 0 || PortraitCanvas.Bounds.Width == 0) return;
// Position at top-right of row 3, with 100px margin from right
Canvas.SetTop(PortraitImage, 0);
Canvas.SetLeft(PortraitImage, PortraitCanvas.Bounds.Width - PortraitImage.DesiredSize.Width - 100);
}
Comment on lines +65 to 70

public void InitializePianoRollWindowAsync() {
Expand Down
62 changes: 33 additions & 29 deletions OpenUtau/Controls/TickBackground.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ class TickBackground : TemplatedControl {
nameof(SnapTicks),
o => o.SnapTicks,
(o, v) => o.SnapTicks = v);
public static readonly DirectProperty<TickBackground, bool> ShowBarNumberProperty =
public static readonly DirectProperty<TickBackground, bool> ShowBarProperty =
AvaloniaProperty.RegisterDirect<TickBackground, bool>(
nameof(ShowBarNumber),
o => o.ShowBarNumber,
(o, v) => o.ShowBarNumber = v);
nameof(ShowBar),
o => o.ShowBar,
(o, v) => o.ShowBar = v);

public int Resolution {
get => _resolution;
Expand All @@ -72,9 +72,9 @@ public ObservableCollection<int>? SnapTicks {
get => _snapTicks;
set => SetAndRaise(SnapTicksProperty, ref _snapTicks, value);
}
public bool ShowBarNumber {
get => _showBarNumber;
set => SetAndRaise(ShowBarNumberProperty, ref _showBarNumber, value);
public bool ShowBar {
get => _showBar;
set => SetAndRaise(ShowBarProperty, ref _showBar, value);
}

private int _resolution = 480;
Expand All @@ -83,7 +83,7 @@ public bool ShowBarNumber {
private int _tickOrigin;
private int _snapDiv;
private ObservableCollection<int>? _snapTicks;
private bool _showBarNumber;
private bool _showBar = true;

private Pen penBar;
private Pen penBeatUnit;
Expand Down Expand Up @@ -116,7 +116,8 @@ protected override void OnPropertyChanged(AvaloniaPropertyChangedEventArgs chang
change.Property == TickOriginProperty ||
change.Property == TickWidthProperty ||
change.Property == TickOffsetProperty ||
change.Property == SnapDivProperty) {
change.Property == SnapDivProperty ||
change.Property == ShowBarProperty) {
InvalidateVisual();
}
}
Expand All @@ -143,14 +144,15 @@ public override void Render(DrawingContext context) {
SnapTicks?.Clear();
while (barTick <= rightTick) {
SnapTicks?.Add(barTick);
// Bar lines and numbers.
double x = Math.Round(barTick * TickWidth - pixelOffset) + 0.5;
double y = -0.5;
var textLayout = TextLayoutCache.Get((bar + 1).ToString(), ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 10))) {
textLayout.Draw(context, new Point());
if (ShowBar) {
var textLayout = TextLayoutCache.Get((bar + 1).ToString(), ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 10))) {
textLayout.Draw(context, new Point());
}
context.DrawLine(penBar, new Point(x, y), new Point(x, Bounds.Height + 0.5f));
}
context.DrawLine(penBar, new Point(x, y), new Point(x, Bounds.Height + 0.5f));
// Lines between bars.
var timeSig = project.timeAxis.TimeSignatureAtBar(bar);
int nextBarTick = project.timeAxis.BarBeatToTickPos(bar + 1, 0);
Expand All @@ -171,7 +173,7 @@ public override void Render(DrawingContext context) {
project.timeAxis.TickPosToBarBeat(tick, out int snapBar, out int snapBeat, out int snapRemainingTicks);
var pen = snapRemainingTicks != 0 ? penDanshed : penBeatUnit;
x = Math.Round(tick * TickWidth - pixelOffset) + 0.5;
y = 24;
y = ShowBar ? 24 : 0;
context.DrawLine(pen, new Point(x, y), new Point(x, Bounds.Height + 0.5f));
}
}
Expand All @@ -180,22 +182,24 @@ public override void Render(DrawingContext context) {
}
SnapTicks?.Add(barTick);

foreach (var tempo in project.tempos) {
double x = Math.Round(tempo.position * TickWidth - pixelOffset) + 0.5;
context.DrawLine(penDanshed, new Point(x, 0), new Point(x, 24));
var textLayout = TextLayoutCache.Get(tempo.bpm.ToString("#0.00"), ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 0))) {
textLayout.Draw(context, new Point());
if (ShowBar) {
foreach (var tempo in project.tempos) {
double x = Math.Round(tempo.position * TickWidth - pixelOffset) + 0.5;
context.DrawLine(penDanshed, new Point(x, 0), new Point(x, 24));
var textLayout = TextLayoutCache.Get(tempo.bpm.ToString("#0.00"), ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 0))) {
textLayout.Draw(context, new Point());
}
}
}

foreach (var timeSig in project.timeSignatures) {
int tick = project.timeAxis.BarBeatToTickPos(timeSig.barPosition, 0);
var barTextLayout = TextLayoutCache.Get((timeSig.barPosition + 1).ToString(), ThemeManager.BarNumberBrush, 10);
double x = Math.Round(tick * TickWidth - pixelOffset) + 0.5 + barTextLayout.Width + 4;
var textLayout = TextLayoutCache.Get($"{timeSig.beatPerBar}/{timeSig.beatUnit}", ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 10))) {
textLayout.Draw(context, new Point());
foreach (var timeSig in project.timeSignatures) {
int tick = project.timeAxis.BarBeatToTickPos(timeSig.barPosition, 0);
var barTextLayout = TextLayoutCache.Get((timeSig.barPosition + 1).ToString(), ThemeManager.BarNumberBrush, 10);
double x = Math.Round(tick * TickWidth - pixelOffset) + 0.5 + barTextLayout.Width + 4;
var textLayout = TextLayoutCache.Get($"{timeSig.beatPerBar}/{timeSig.beatUnit}", ThemeManager.BarNumberBrush, 10);
using (var state = context.PushTransform(Matrix.CreateTranslation(x + 3, 10))) {
textLayout.Draw(context, new Point());
}
}
}
}
Expand Down
38 changes: 26 additions & 12 deletions OpenUtau/ViewModels/NotesViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,10 +153,24 @@ public NotesViewModel() {
});
this.WhenAnyValue(x => x.ExpBounds, x => x.PrimaryKey)
.Subscribe(t => {
if (t.Item2 != null && Project.expressions.TryGetValue(t.Item2, out var descriptor)) {
if (descriptor.type == UExpressionType.Options && descriptor.options.Length > 0) {
ExpTrackHeight = t.Item1.Height / descriptor.options.Length;
UExpressionDescriptor? descriptor = null;
if (t.Item2 != null) {
UExpressionDescriptor trackDesc = default!;
bool hasTrackDesc = Part != null && Project.tracks[Part.trackNo]
.TryGetExpDescriptor(Project, t.Item2, out trackDesc);
if (hasTrackDesc) {
descriptor = trackDesc;
} else if (Project.expressions.TryGetValue(t.Item2, out var projDesc)) {
descriptor = projDesc;
}
}
if (descriptor != null) {
if (descriptor.type == UExpressionType.Options) {
int numOptions = Math.Max(descriptor.options.Length, 1);
ExpTrackHeight = t.Item1.Height / numOptions;
ExpShadowOpacity = 0;
} else {
ExpTrackHeight = 0;
}
Comment on lines +172 to 174
ShowCurveToolbar = descriptor.type == UExpressionType.Curve;
} else {
Expand Down Expand Up @@ -312,9 +326,9 @@ private void UpdateSnapDiv() {
SnapDivText = $"(1/{div})";
}

private void UpdateKey(){
private void UpdateKey() {
Key = userKey;
KeyText = "1="+MusicMath.KeysInOctave[userKey].Item1;
KeyText = "1=" + MusicMath.KeysInOctave[userKey].Item1;
}

public void OnXZoomed(Point position, double delta) {
Expand Down Expand Up @@ -451,7 +465,7 @@ private Bitmap ResizePortrait(Bitmap Portrait, int PortraitHeight) {
targetHeight = PortraitHeight;
}
int targetWidth = (int)Math.Round(targetHeight * Portrait.Size.Width / Portrait.Size.Height);
if(targetWidth == 0){
if (targetWidth == 0) {
targetWidth = 1;
}
return Portrait.CreateScaledBitmap(new PixelSize(targetWidth, targetHeight));
Expand Down Expand Up @@ -504,7 +518,7 @@ private void LoadPortrait(UPart? part, UProject? project) {
Portrait = null;
portraitSource = null;
} else {
using (var stream = new MemoryStream(data)) {
using (var stream = new MemoryStream(data)) {
Portrait = ResizePortrait(new Bitmap(stream), singer.PortraitHeight);
portraitSource = singer.Portrait;
}
Expand Down Expand Up @@ -599,18 +613,18 @@ public void MoveSelection(int delta) {
if (Selection.Move(delta)) {
MessageBus.Current.SendMessage(new NotesSelectionEvent(Selection));
ScrollIntoView(Selection.Head!);
};
}
}
public void ExtendSelection(int delta) {
if (Selection.Resize(delta)) {
MessageBus.Current.SendMessage(new NotesSelectionEvent(Selection));
ScrollIntoView(Selection.Head!);
};
}
}
public void ExtendSelection(UNote note) {
if (Selection.SelectTo(note)) {
MessageBus.Current.SendMessage(new NotesSelectionEvent(Selection));
};
}
}

public void MoveCursor(int delta) {
Expand Down Expand Up @@ -783,7 +797,7 @@ public void MergeSelectedNotes() {
notes.Sort((a, b) => a.position.CompareTo(b.position));
//Ignore slur lyrics
var mergedLyrics = String.Join("", notes.Select(x => x.lyric).Where(l => !l.StartsWith("+")));
if(mergedLyrics == ""){ //If all notes are slur, the merged note is single slur note
if (mergedLyrics == "") { //If all notes are slur, the merged note is single slur note
mergedLyrics = notes[0].lyric;
}
DocManager.Inst.StartUndoGroup("command.note.edit");
Expand Down Expand Up @@ -893,7 +907,7 @@ UNote toPlainNote(UNote note) {
public async void PasteSelectedParams(Window window) {
if (Part != null && DocManager.Inst.NotesClipboard != null && DocManager.Inst.NotesClipboard.Count > 0) {
var selectedNotes = Selection.ToList();
if(selectedNotes.Count == 0) {
if (selectedNotes.Count == 0) {
return;
}

Expand Down
2 changes: 1 addition & 1 deletion OpenUtau/Views/MainWindow.axaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@
TickOffset="{Binding TracksViewModel.TickOffset}"
SnapDiv="{Binding TracksViewModel.SnapDiv}"
SnapTicks="{Binding TracksViewModel.SnapTicks}"
ShowBarNumber="True"/>
ShowBar="True"/>
<c:PartsCanvas x:Name="partsCanvas" Grid.Row="2" Grid.Column="1" ClipToBounds="True" Background="Transparent"
DataContext="{Binding TracksViewModel}"
TickWidth="{Binding TickWidth}"
Expand Down
Loading