Percussion panel - implement keyboard swapping

musescore · Nov 28, 2024 · 61198de · 61198de
1 parent 3c00846
commit 61198de
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 18 deletions.
diff --git a/src/notation/qml/MuseScore/NotationScene/PercussionPanel.qml b/src/notation/qml/MuseScore/NotationScene/PercussionPanel.qml
@@ -58,6 +58,15 @@ Item {
         Component.onCompleted: {
             percModel.init()
         }
+
+        onCurrentPanelModeChanged: {
+            // Cancel any active keyboard swaps when the panel mode changes
+            if (padGrid.isKeyboardSwapActive) {
+                padGrid.swapOriginPad = null
+                padGrid.isKeyboardSwapActive = false
+                padGrid.model.endPadSwap(-1)
+            }
+        }
     }
 
     // TODO: Will live inside percussion panel until #22050 is implemented
@@ -122,6 +131,7 @@ Item {
                 width: rowLayout.sideColumnsWidth
 
                 visible: percModel.currentPanelMode === PanelMode.EDIT_LAYOUT
+                enabled: !padGrid.isKeyboardSwapActive
 
                 Repeater {
                     id: deleteRepeater
@@ -175,6 +185,7 @@ Item {
                 readonly property int spacing: 12
 
                 property Item swapOriginPad: null
+                property bool isKeyboardSwapActive: false
 
                 QtObject {
                     id: gridPrv
@@ -247,29 +258,32 @@ Item {
 
                         // When swapping, only show the outline for the swap origin  and the swap target...
                         showEditOutline: percModel.currentPanelMode === PanelMode.EDIT_LAYOUT
-                                         && (!Boolean(padGrid.swapOriginPad) || padGrid.swapOriginPad === pad || pad.containsDrag)
-                        showOriginBackground: pad.containsDrag || pad === padGrid.swapOriginPad
+                                         && (!Boolean(padGrid.swapOriginPad) || padGrid.swapOriginPad === pad)
+                        showOriginBackground: pad.containsDrag || (pad === padGrid.swapOriginPad && !padGrid.isKeyboardSwapActive)
 
+                        panelHasActiveKeyboardSwap: padGrid.isKeyboardSwapActive
                         dragParent: root
 
                         navigationRow: index / padGrid.numColumns
                         navigationColumn: index % padGrid.numColumns
                         padNavigationCtrl.panel: padsNavPanel
                         footerNavigationCtrl.panel: padFootersNavPanel
 
-                        onStartPadSwapRequested: {
+                        onStartPadSwapRequested: function(isKeyboardSwap) {
                             padGrid.swapOriginPad = pad
+                            padGrid.isKeyboardSwapActive = isKeyboardSwap
                             padGrid.model.startPadSwap(index)
                         }
 
-                        onDropped: function(dropEvent) {
+                        onEndPadSwapRequested: {
                             padGrid.swapOriginPad = null
+                            padGrid.isKeyboardSwapActive = false
                             padGrid.model.endPadSwap(index)
-                            dropEvent.accepted = true
                         }
 
                         onCancelPadSwapRequested: {
                             padGrid.swapOriginPad = null
+                            padGrid.isKeyboardSwapActive = false
                             padGrid.model.endPadSwap(-1)
                         }
 
@@ -285,7 +299,8 @@ Item {
                         // If this is the swap target - move the swappable area to the swap origin (preview the swap)
                         State {
                             name: "SWAP_TARGET"
-                            when: Boolean(padGrid.swapOriginPad) && pad.containsDrag && padGrid.swapOriginPad !== pad
+                            when: Boolean(padGrid.swapOriginPad) && (pad.containsDrag || pad.padNavigationCtrl.active) && padGrid.swapOriginPad !== pad
+
                             ParentChange {
                                 target: pad.swappableArea
                                 parent: padGrid.swapOriginPad
@@ -295,11 +310,27 @@ Item {
                                 anchors.verticalCenter: padGrid.swapOriginPad.verticalCenter
                                 anchors.horizontalCenter: padGrid.swapOriginPad.horizontalCenter
                             }
+                            PropertyChanges {
+                                target: pad
+                                showEditOutline: true
+                            }
+
                             // Origin background not needed for the dragged pad when a preview is taking place...
                             PropertyChanges {
                                 target: padGrid.swapOriginPad
                                 showOriginBackground: false
                             }
+
+                            // In the case of a keyboard swap, we also need to move the origin pad
+                            ParentChange {
+                                target: padGrid.isKeyboardSwapActive && Boolean(padGrid.swapOriginPad) ? padGrid.swapOriginPad.swappableArea : null
+                                parent: pad
+                            }
+                            AnchorChanges {
+                                target: padGrid.isKeyboardSwapActive && Boolean(padGrid.swapOriginPad) ? padGrid.swapOriginPad.swappableArea : null
+                                anchors.verticalCenter: pad.verticalCenter
+                                anchors.horizontalCenter: pad.horizontalCenter
+                            }
                         }
                     ]
                 }
@@ -323,6 +354,7 @@ Item {
                 Layout.bottomMargin: (padGrid.cellHeight / 2) - (height / 2)
 
                 visible: percModel.currentPanelMode === PanelMode.EDIT_LAYOUT
+                enabled: !padGrid.isKeyboardSwapActive
 
                 icon: IconCode.PLUS
                 text: qsTrc("notation", "Add row")

diff --git a/src/notation/qml/MuseScore/NotationScene/internal/PercussionPanelPad.qml b/src/notation/qml/MuseScore/NotationScene/internal/PercussionPanelPad.qml
@@ -48,10 +48,18 @@ DropArea {
 
     readonly property bool hasActiveControl: padNavCtrl.active || footerNavCtrl.active
 
+    property bool panelHasActiveKeyboardSwap: false
+
     property var dragParent: null
-    signal startPadSwapRequested()
+    signal startPadSwapRequested(var isKeyboardSwap)
+    signal endPadSwapRequested()
     signal cancelPadSwapRequested()
 
+    onDropped: function(dropEvent)  {
+        root.endPadSwapRequested()
+        dropEvent.accepted = true
+    }
+
     QtObject {
         id: prv
         readonly property color enabledBackgroundColor: Utils.colorWithAlpha(ui.theme.buttonColor, ui.theme.buttonOpacityNormal)
@@ -88,10 +96,11 @@ DropArea {
         accessible.enabled: padNavCtrl.enabled
 
         onTriggered: {
-            if (!Boolean(root.padModel)) {
+            if (Boolean(root.padModel) && root.panelMode !== PanelMode.EDIT_LAYOUT) {
+                root.padModel.triggerPad()
                 return
             }
-            root.padModel.triggerPad()
+            root.panelHasActiveKeyboardSwap ? root.endPadSwapRequested() : root.startPadSwapRequested(true)
         }
     }
 
@@ -136,13 +145,13 @@ DropArea {
             id: dragHandler
 
             target: swappableArea
-            enabled: Boolean(root.padModel) && root.panelMode === PanelMode.EDIT_LAYOUT
+            enabled: Boolean(root.padModel) && root.panelMode === PanelMode.EDIT_LAYOUT && !root.panelHasActiveKeyboardSwap
 
             dragThreshold: 0 // prevents the flickable from stealing drag events
 
             onActiveChanged: {
                 if (dragHandler.active) {
-                    root.startPadSwapRequested()
+                    root.startPadSwapRequested(false)
                     return
                 }
                 if (!swappableArea.Drag.drop()) {
@@ -199,13 +208,6 @@ DropArea {
             }
         }
 
-        NavigationFocusBorder {
-            id: padFocusBorder
-
-            padding: root.panelMode === PanelMode.EDIT_LAYOUT ? 0 : root.totalBorderWidth * -1
-            navigationCtrl: padNavCtrl
-        }
-
         NavigationFocusBorder {
             id: footerFocusBorder
 
@@ -250,6 +252,27 @@ DropArea {
         ]
     }
 
+    //! NOTE: Ideally this would be swappableArea's child, but we don't want it to move when "previewing" a drop
+    NavigationFocusBorder {
+        id: padFocusBorder
+
+        property real extraSize: root.showEditOutline ? padFocusBorder.border.width * 2 : 0
+        property real extraRadius: root.showEditOutline ? root.totalBorderWidth + padFocusBorder.anchors.margins : 0
+
+        anchors {
+            fill: null
+            centerIn: parent
+        }
+
+        width: swappableArea.width + padFocusBorder.extraSize
+        height: swappableArea.height + padFocusBorder.extraSize
+
+        radius: swappableArea.radius + padFocusBorder.extraRadius
+
+        padding: root.showEditOutline ? 0 : root.totalBorderWidth * -1
+        navigationCtrl: padNavCtrl
+    }
+
     Rectangle {
         id: originBackground