Piano Roll UI Improvements: Add toolbar close button, double-click to close, optimize detach mode UXll

OpenUtau.Core/Util/Preferences.cs

@@ -252,7 +252,7 @@ public class SerializablePreferences {
 errors.txt
 ";
             public string RecoveryPath = string.Empty;
-            public bool DetachPianoRoll = false;
+            public bool DetachPianoRoll = true;
 
             // ----- Mix FX (post-processing) -----
             // Per-track FX state lives in UTrack.MixFx and the project ustx.

OpenUtau/Controls/PianoRoll.axaml

@@ -296,6 +296,11 @@
                   <CheckBox IsChecked="{Binding ShowGhostNotes}" />
                 </MenuItem.Icon>
               </MenuItem>
+              <MenuItem Header="{DynamicResource prefs.appearance.detachpianoroll}" Click="OnMenuDetachPianoRoll">
+                <MenuItem.Icon>
+                  <CheckBox IsChecked="{Binding PianoRollDetached}" />
+                </MenuItem.Icon>
+              </MenuItem>
               <MenuItem Header="{DynamicResource prefs.appearance.trackcolor}" Click="OnMenuUseTrackColor">
                 <MenuItem.Icon>
                   <CheckBox IsChecked="{Binding UseTrackColor}" />
@@ -353,14 +358,6 @@
                   </MenuItem.Icon>
                 </MenuItem>
               </MenuItem>
-              <MenuItem Header="{DynamicResource pianoroll.menu.view.pianoroll}">
-                <MenuItem Header="{DynamicResource pianoroll.menu.view.pianoroll.detach}" Click="OnMenuDetachPianoRoll">
-                  <MenuItem.Icon>
-                    <CheckBox IsChecked="{Binding PianoRollDetached}" />
-                  </MenuItem.Icon>
-                </MenuItem>
-                <MenuItem Header="{DynamicResource pianoroll.menu.view.pianoroll.hide}" Click="OnMenuHidePianoRoll"/>
-              </MenuItem>
             </MenuItem>
 
             <MenuItem Header="{DynamicResource pianoroll.menu.batch}">
@@ -538,6 +535,7 @@
             </Button>
           </StackPanel>
         </Border>
+        <Border Grid.Column="3" Background="Transparent" DoubleTapped="OnHidePianoRoll"/>
         <Border Grid.Column="4">
           <StackPanel Orientation="Horizontal">
             <ToggleButton Classes="toolbar" Margin="0" Padding="1" Height="20" Width="20" IsChecked="{Binding NotesViewModel.ShowNoteParams}"
@@ -553,6 +551,10 @@
                 </Path>
               </Grid>
             </ToggleButton>
+            <!-- Hide PianoRoll Padding -->
+            <Border IsVisible="{Binding HideMenuItemVisible}">
+              <Border Width="20" IsVisible="{Binding !NotesViewModel.ShowNoteParams}"/>
+            </Border>
           </StackPanel>
         </Border>
       </Grid>
@@ -626,6 +628,18 @@
         <c:NotePropertiesControl/>
       </Border>
 
+      <Button Grid.Row="0" Grid.Column="0" Grid.ColumnSpan="4"
+              Classes="toolbar clear" Margin="2"
+              HorizontalAlignment="Right" VerticalAlignment="Top"
+              Height="20" Width="20" Padding="1"
+              Click="OnHidePianoRoll"
+              IsVisible="{Binding HideMenuItemVisible}"
+              ToolTip.Tip="{DynamicResource pianoroll.toggle.hidepianoroll}">
+        <Grid Width="18" Height="18">
+          <Path Stroke="{DynamicResource SystemControlForegroundBaseHighBrush}" StrokeThickness="1" Data="M 4 4 L 14 14 M 14 4 L 4 14"/>
+        </Grid>
+      </Button>
+
       <Border Grid.Row="2" Grid.RowSpan="2" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch"
               BoxShadow="inset 0 0 5 1 #3F000000" ClipToBounds="True" IsHitTestVisible="False">
         <Grid>
@@ -678,4 +692,4 @@
       <ProgressBar Grid.Row="6" Grid.ColumnSpan="4" Value="{Binding Progress}" IsVisible="{Binding PianoRollDetached}"/>
     </Grid>
   </Border>
-</UserControl>
+</UserControl>

OpenUtau/Controls/PianoRoll.axaml.cs

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.ComponentModel;
 using System.Linq;
@@ -11,6 +11,7 @@
 using Avalonia.Controls.Primitives;
 using Avalonia.Input;
 using Avalonia.Interactivity;
+using Avalonia.Threading;
 using OpenUtau.App.ViewModels;
 using OpenUtau.App.Views;
 using OpenUtau.Core;
@@ -236,6 +237,14 @@ await MessageBox.ShowProcessing(RootWindow, $"{name} - ? / ?",
                     }
                 });
 
+            MessageBus.Current.Listen<PianorollRefreshEvent>()
+                .Subscribe(e => {
+                    if(e.refreshItem == "Attachment") {
+                        MainWindow?.SetPianoRollAttachment();
+                        ViewModel.RaisePropertyChanged(nameof(ViewModel.PianoRollDetached));
+                    }
+                });
+
             DocManager.Inst.AddSubscriber(this);
         }
 
@@ -347,19 +356,22 @@ void OnMenuSearchNote(object sender, RoutedEventArgs args) {
         }
 
         void OnMenuDetachPianoRoll(object sender, RoutedEventArgs args) {
-            MainWindow?.SetPianoRollAttachment();
-            ViewModel.RaisePropertyChanged(nameof(ViewModel.PianoRollDetached));
+            Preferences.Default.DetachPianoRoll ^= true;
+            Preferences.Save();
+            MessageBus.Current.SendMessage(new PianorollRefreshEvent("Attachment"));
+            Dispatcher.UIThread.Post(() => {
+                ViewModel.RaisePropertyChanged(nameof(ViewModel.HideMenuItemVisible));
+            });
         }
 
-        void OnMenuHidePianoRoll(object sender, RoutedEventArgs args) {
+        void OnHidePianoRoll(object sender, RoutedEventArgs args) {
             if (RootWindow.DataContext is MainWindowViewModel mwvm) {
                 mwvm.ShowPianoRoll = false;
-            } else {
-                RootWindow.Hide();
             }
         }
 
         // Edit Tools
+
         private CancellationTokenSource? _longPressCts;
         private async void OnToolButtonPointerPressed(object? sender, PointerPressedEventArgs args) {
             if (!args.GetCurrentPoint(this).Properties.IsLeftButtonPressed) return;
@@ -2017,4 +2029,4 @@ public void OnNext(UCommand cmd, bool isUndo) {
             }
         }
     }
-}
+}

OpenUtau/Strings/Strings.axaml

@@ -439,9 +439,6 @@ Warning: this option removes custom presets.</system:String>
   <system:String x:Key="phoneticassistant.copy">Copy</system:String>
 
   <system:String x:Key="pianoroll.key">Key (for scale degree display)</system:String>
-  <system:String x:Key="pianoroll.menu.view.pianoroll">Piano Roll</system:String>
-  <system:String x:Key="pianoroll.menu.view.pianoroll.detach">Detach</system:String>
-  <system:String x:Key="pianoroll.menu.view.pianoroll.hide">Hide</system:String>
   <system:String x:Key="pianoroll.menu.batch">Batch Edits</system:String>
   <system:String x:Key="pianoroll.menu.batch.running">Running batch edit</system:String>
   <system:String x:Key="pianoroll.menu.lyrics">Lyrics</system:String>
@@ -516,6 +513,7 @@ Warning: this option removes custom presets.</system:String>
   <system:String x:Key="pianoroll.toggle.vibrato">View Vibrato (U)</system:String>
   <system:String x:Key="pianoroll.toggle.waveform">View Waveform (W)</system:String>
   <system:String x:Key="pianoroll.toggle.expressions">View Expressions (L)</system:String>
+  <system:String x:Key="pianoroll.toggle.hidepianoroll">Hide Piano Roll</system:String>
   <system:String x:Key="pianoroll.tool.drawpitch">Draw Pitch Tool (Shift + 1)
     Left click to draw
     Right click to reset
@@ -573,6 +571,7 @@ Warning: this option removes custom presets.</system:String>
   <system:String x:Key="prefs.appearance.showghostnotes">Show other tracks' notes on piano roll</system:String>
   <system:String x:Key="prefs.appearance.showicon">Show icon on piano roll</system:String>
   <system:String x:Key="prefs.appearance.showportrait">Show portrait on piano roll</system:String>
+  <system:String x:Key="prefs.appearance.detachpianoroll">Show piano roll in separate window</system:String>
   <system:String x:Key="prefs.appearance.sortorder">Singer name display language</system:String>
   <system:String x:Key="prefs.appearance.theme">Theme</system:String>
   <system:String x:Key="prefs.appearance.theme.dark">Dark</system:String>

OpenUtau/ViewModels/MainWindowViewModel.cs

@@ -133,8 +133,8 @@ public MainWindowViewModel() {
 
             this.WhenAnyValue(vm => vm.ShowPianoRoll)
                 .Subscribe(x => {
-                    PianoRollMaxHeight = x ? double.PositiveInfinity : 0;
-                    PianoRollMinHeight = x ? ViewConstants.PianoRollMinHeight : 0;
+                    PianoRollMaxHeight = x ? double.PositiveInfinity : 0.01;
+                    PianoRollMinHeight = x ? ViewConstants.PianoRollMinHeight : 0.01;
                 });
         }
 

OpenUtau/ViewModels/PianoRollViewModel.cs

@@ -1,4 +1,4 @@
-using System;
+using System;
 using System.Collections.Generic;
 using System.Linq;
 using System.Reactive;
@@ -68,6 +68,7 @@ public class PianoRollViewModel : ViewModelBase, ICmdSubscriber {
         public bool PlaybackAutoScroll1 { get => Preferences.Default.PlaybackAutoScroll == 1 ? true : false; }
         public bool PlaybackAutoScroll2 { get => Preferences.Default.PlaybackAutoScroll == 2 ? true : false; }
         public bool PianoRollDetached { get => Preferences.Default.DetachPianoRoll; }
+        public bool HideMenuItemVisible => !Preferences.Default.DetachPianoRoll;
         public bool ShowPhonemizerTags {
             get => Preferences.Default.ShowPhonemizerTags;
             set {
@@ -319,4 +320,4 @@ public void OnNext(UCommand cmd, bool isUndo) {
 
         #endregion
     }
-}
+}

OpenUtau/ViewModels/PreferencesViewModel.cs

@@ -100,6 +100,7 @@ public int SafeMaxThreadCount {
         [Reactive] public bool ShowPortrait { get; set; }
         [Reactive] public bool ShowIcon { get; set; }
         [Reactive] public bool ShowGhostNotes { get; set; }
+        [Reactive] public bool DetachPianoRoll { get; set; }
         [Reactive] public bool ThemeEditable { get; set; }
         public List<string> ThemeItems => ThemeManager.GetAvailableThemes();
         public bool IsThemeEditorOpen => Views.ThemeEditorWindow.IsOpen;
@@ -182,6 +183,7 @@ public PreferencesViewModel() {
             ShowPortrait = Preferences.Default.ShowPortrait;
             ShowIcon = Preferences.Default.ShowIcon;
             ShowGhostNotes = Preferences.Default.ShowGhostNotes;
+            DetachPianoRoll = Preferences.Default.DetachPianoRoll;
             Beta = Preferences.Default.Beta;
             LyricsHelper = LyricsHelpers.FirstOrDefault(option => option.klass.Equals(ActiveLyricsHelper.Inst.GetPreferred()));
             LyricsHelperBrackets = Preferences.Default.LyricsHelperBrackets;
@@ -299,6 +301,12 @@ public PreferencesViewModel() {
                     Preferences.Save();
                     MessageBus.Current.SendMessage(new PianorollRefreshEvent("Part"));
                 });
+            this.WhenAnyValue(vm => vm.DetachPianoRoll)
+                .Subscribe(detachPianoRoll => {
+                    Preferences.Default.DetachPianoRoll = detachPianoRoll;
+                    Preferences.Save();
+                    MessageBus.Current.SendMessage(new PianorollRefreshEvent("Attachment"));
+                });
             this.WhenAnyValue(vm => vm.Beta)
                 .Subscribe(beta => {
                     Preferences.Default.Beta = beta;

OpenUtau/Views/MainWindow.axaml.cs

@@ -1262,21 +1262,18 @@ public void SetPianoRollAttachment() {
                 return;
             }
             if (Preferences.Default.DetachPianoRoll) {
-                pianoRollWindow?.ForceClose();
-                pianoRollWindow = null;
-                PianoRollContainer.Content = pianoRoll;
-                viewModel.ShowPianoRoll = true;
-                Preferences.Default.DetachPianoRoll = false;
-            } else {
                 PianoRollContainer.Content = null;
                 viewModel.ShowPianoRoll = false;
                 if (pianoRollWindow == null) {
                     pianoRollWindow = new(pianoRoll);
                     pianoRollWindow.Show();
                 }
-                Preferences.Default.DetachPianoRoll = true;
+            } else {
+                pianoRollWindow?.ForceClose();
+                pianoRollWindow = null;
+                PianoRollContainer.Content = pianoRoll;
+                viewModel.ShowPianoRoll = true;
             }
-            Preferences.Save();
         }
 
         public void MainPagePointerWheelChanged(object sender, PointerWheelEventArgs args) {

OpenUtau/Views/PreferencesDialog.axaml

@@ -265,6 +265,10 @@
             <TextBlock Text="{DynamicResource prefs.appearance.showghostnotes}" HorizontalAlignment="Left"/>
             <ToggleSwitch IsChecked="{Binding ShowGhostNotes}"/>
           </Grid>
+          <Grid Margin="0,5,0,0">
+            <TextBlock Text="{DynamicResource prefs.appearance.detachpianoroll}" HorizontalAlignment="Left"/>
+            <ToggleSwitch IsChecked="{Binding DetachPianoRoll}"/>
+          </Grid>
         </StackPanel>
 
         <!-- UTAU -->