BarSettings: reworking drag&drop

Modules/SettingsPanel/Extras/BarSectionEditor.qml

@@ -115,11 +115,17 @@ NBox {
     }
 
     // Drag and Drop Widget Area
-    Flow {
+    // Replace your Flow section with this:
-      id: widgetFlow
+
+// Drag and Drop Widget Area - use Item container
+Item {
   Layout.fillWidth: true
   Layout.fillHeight: true
   Layout.minimumHeight: 65 * scaling
+
+  Flow {
+    id: widgetFlow
+    anchors.fill: parent
     spacing: Style.marginS * scaling
     flow: Flow.LeftToRight
 
@@ -137,12 +143,6 @@ NBox {
         border.color: Color.mOutline
         border.width: Math.max(1, Style.borderS * scaling)
 
-          // Drag properties
-          Drag.keys: ["widget"]
-          Drag.active: mouseArea.drag.active
-          Drag.hotSpot.x: width / 2
-          Drag.hotSpot.y: height / 2
-
         // Store the widget index for drag operations
         property int widgetIndex: index
         readonly property int buttonsWidth: Math.round(20 * scaling)
@@ -150,7 +150,7 @@ NBox {
 
         // Visual feedback during drag
         states: State {
-            when: mouseArea.drag.active
+          when: flowDragArea.draggedIndex === index
           PropertyChanges {
             target: widgetItem
             scale: 1.1
@@ -161,7 +161,6 @@ NBox {
 
         RowLayout {
           id: widgetContent
-
           anchors.centerIn: parent
           spacing: Style.marginXXS * scaling
 
@@ -177,6 +176,7 @@ NBox {
           RowLayout {
             spacing: 0
             Layout.preferredWidth: buttonsCount * buttonsWidth
+            
             Loader {
               active: BarWidgetRegistry.widgetHasUserSettings(modelData.id)
               sourceComponent: NIconButton {
@@ -188,7 +188,6 @@ NBox {
                 colorBgHover: Color.applyOpacity(Color.mOnPrimary, "40")
                 colorFgHover: Color.mOnPrimary
                 onClicked: {
-                    // Open widget settings dialog
                   var dialog = Qt.createComponent("BarWidgetSettingsDialog.qml").createObject(root, {
                                                                                                 "widgetIndex": index,
                                                                                                 "widgetData": modelData,
@@ -214,143 +213,155 @@ NBox {
             }
           }
         }
+      }
+    }
+  }
 
-          // Mouse area for drag and drop
+// MouseArea outside Flow, covering the same area
-          property int mouseXStartDrag: 0
-
   MouseArea {
-            id: mouseArea
+    id: flowDragArea
     anchors.fill: parent
-            drag.target: parent
+    z: 999  // Above all widgets to ensure it gets events first
+    
+    // Critical properties for proper event handling
+    acceptedButtons: Qt.LeftButton
+    preventStealing: true  // Prevent child items from stealing events
+    propagateComposedEvents: false  // Don't propagate to children during drag
+    hoverEnabled: true
+    
+    property point startPos: Qt.point(0, 0)
+    property bool dragStarted: false
+    property int draggedIndex: -1
+    property real dragThreshold: 15 * scaling
+    property Item draggedWidget: null
+    property point clickOffsetInWidget: Qt.point(0, 0)  // Add this line
     
     onPressed: mouse => {
-                         // Check if the click is on the settings or close button area
+      startPos = Qt.point(mouse.x, mouse.y)
-                         const buttonsX = widgetContent.x + widgetContent.width - (buttonsWidth * buttonsCount)
+      dragStarted = false
-                         if (mouseX >= buttonsX) {
+      draggedIndex = -1
-                           // Click is on the buttons, don't start drag
+      draggedWidget = null
+      
+      console.log("Mouse pressed at:", mouse.x, mouse.y)
+      
+      // Find which widget was clicked
+      for (var i = 0; i < widgetModel.length; i++) {
+        const widget = widgetFlow.children[i]
+        if (widget && widget.widgetIndex !== undefined) {
+          if (mouse.x >= widget.x && mouse.x <= widget.x + widget.width &&
+              mouse.y >= widget.y && mouse.y <= widget.y + widget.height) {
+            
+            const localX = mouse.x - widget.x
+            const buttonsStartX = widget.width - (widget.buttonsCount * widget.buttonsWidth)
+            
+            if (localX < buttonsStartX) {
+              draggedIndex = widget.widgetIndex
+              draggedWidget = widget
+              
+              // Calculate and store where within the widget the user clicked
+              const clickOffsetX = mouse.x - widget.x  // Distance from widget's left edge
+              const clickOffsetY = mouse.y - widget.y  // Distance from widget's top edge
+              clickOffsetInWidget = Qt.point(clickOffsetX, clickOffsetY)
+              
+              Logger.log("BarSectionEditor", "Selected widget:", widgetModel[i].id, "at index", i)
+              Logger.log("BarSectionEditor", "Widget position:", widget.x, widget.y)
+              Logger.log("BarSectionEditor", "Mouse position:", mouse.x, mouse.y)
+              Logger.log("BarSectionEditor", "Click offset within widget:", clickOffsetInWidget.x, clickOffsetInWidget.y)
+              
+              // Immediately set prevent stealing to true when drag candidate is found
+              preventStealing = true
+              break
+            }else {
+              // Click was on buttons - allow event propagation
               mouse.accepted = false
               return
             }
+          }
+        }
+      }
+    }
 
-                         //Logger.log("BarSectionEditor", `Started dragging widget: ${modelData.id} at index ${index}`)
+    onPositionChanged: mouse => {
-                         // Bring to front when starting drag
+      if (draggedIndex !== -1) {
-                         widgetItem.z = 1000
+        const deltaX = mouse.x - startPos.x
-                         mouseXStartDrag = mouseX
+        const deltaY = mouse.y - startPos.y
+        const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY)
+        
+        //Logger.log("BarSectionEditor", "Position changed - distance:", distance.toFixed(2))
+        
+        if (!dragStarted && distance > dragThreshold) {
+          dragStarted = true
+          Logger.log("BarSectionEditor", "Drag started")
+          
+          // Enable visual feedback
+          if (draggedWidget) {
+            draggedWidget.z = 1000
+          }
+        }
+        
+        if (dragStarted && draggedWidget) {
+          // Adjust position to account for where within the widget the user clicked
+          draggedWidget.x = mouse.x - clickOffsetInWidget.x
+          draggedWidget.y = mouse.y - clickOffsetInWidget.y
+        }
+      }
     }
 
     onReleased: mouse => {
-              //Logger.log("BarSectionEditor", `Released widget: ${modelData.id} at index ${index}`)
+      if (dragStarted && draggedWidget) {
-              // Reset z-index when drag ends
+        // Find drop target using current mouse position
-              widgetItem.z = 0
-
-              console.log(mouseXStartDrag - mouse.x)
-
-
-
-              // Get the global mouse position
-              const globalDropX = mouseArea.mouseX + widgetItem.x + widgetFlow.x
-              const globalDropY = mouseArea.mouseY + widgetItem.y + widgetFlow.y
-
-              // Find which widget the drop position is closest to
         let targetIndex = -1
         let minDistance = Infinity
         
         for (var i = 0; i < widgetModel.length; i++) {
-                if (i !== index) {
+          if (i !== draggedIndex) {
-                  // Get the position of other widgets
+            const widget = widgetFlow.children[i]
-                  const otherWidget = widgetFlow.children[i]
+            if (widget && widget.widgetIndex !== undefined) {
-                  if (otherWidget && otherWidget.widgetIndex !== undefined) {
+              const centerX = widget.x + widget.width / 2
-                    // Calculate the center of the other widget
+              const centerY = widget.y + widget.height / 2
-                    const otherCenterX = otherWidget.x + otherWidget.width / 2 + widgetFlow.x
+              const distance = Math.sqrt(Math.pow(mouse.x - centerX, 2) + Math.pow(mouse.y - centerY, 2))
-                    const otherCenterY = otherWidget.y + otherWidget.height / 2 + widgetFlow.y
-
-                    // Calculate distance to the center of this widget
-                    const distance = Math.sqrt(Math.pow(globalDropX - otherCenterX,
-                                                        2) + Math.pow(globalDropY - otherCenterY, 2))
               
               if (distance < minDistance) {
                 minDistance = distance
-                      targetIndex = otherWidget.widgetIndex
+                targetIndex = widget.widgetIndex
               }
             }
           }
         }
         
-              // Only reorder if we found a valid target and it's different from current position
+        Logger.log("BarSectionEditor", "Drop target index:", targetIndex)
-              if (targetIndex !== -1 && targetIndex !== index) {
+        
-                const fromIndex = index
+        // Reset widget position and z-order
-                const toIndex = targetIndex
+        draggedWidget.x = 0
-                reorderWidget(sectionId, fromIndex, toIndex)
+        draggedWidget.y = 0
-              }
+        draggedWidget.z = 0
-            }
+        
-          }
+        if (targetIndex !== -1 && targetIndex !== draggedIndex) {
+          reorderWidget(sectionId, draggedIndex, targetIndex)
         }
+      } else if (draggedIndex !== -1 && !dragStarted) {
+        // This was a click without drag - simulate click on the widget
+        // Find the clicked widget and trigger appropriate action
+        const widget = draggedWidget
+        if (widget) {
+          // Could add click handling here if needed
         }
       }
       
-    // Drop zone at the beginning (positioned absolutely)
+      // Reset everything
-    DropArea {
+      dragStarted = false
-      id: startDropZone
+      draggedIndex = -1
-      width: 40 * scaling
+      draggedWidget = null
-      height: 40 * scaling
+      preventStealing = false  // Allow normal event propagation again
-      x: widgetFlow.x
-      y: widgetFlow.y + (widgetFlow.height - height) / 2
-      keys: ["widget"]
-      z: 1001 // Above the Flow
-
-      Rectangle {
-        anchors.fill: parent
-        color: startDropZone.containsDrag ? Color.applyOpacity(Color.mPrimary, "20") : Color.transparent
-        border.color: startDropZone.containsDrag ? Color.mPrimary : Color.transparent
-        border.width: startDropZone.containsDrag ? 2 : 0
-        radius: Style.radiusS * scaling
     }
     
-      onEntered: function (drag) {//Logger.log("BarSectionEditor", "Entered start drop zone")
+    // Handle case where mouse leaves the area during drag
-      }
+    onExited: {
-
+      if (dragStarted && draggedWidget) {
-      onDropped: function (drop) {
+        // Reset position but keep drag state until release
-        //Logger.log("BarSectionEditor", "Dropped on start zone")
+        draggedWidget.x = 0
-        if (drop.source && drop.source.widgetIndex !== undefined) {
+        draggedWidget.y = 0
-          const fromIndex = drop.source.widgetIndex
+        draggedWidget.z = 0
-          const toIndex = 0 // Insert at the beginning
-          if (fromIndex !== toIndex) {
-            //Logger.log("BarSectionEditor", `Dropped widget from index ${fromIndex} to beginning`)
-            reorderWidget(sectionId, fromIndex, toIndex)
-          }
-        }
-      }
-    }
-
-    // Drop zone at the end (positioned absolutely)
-    DropArea {
-      id: endDropZone
-      width: 40 * scaling
-      height: 40 * scaling
-      x: widgetFlow.x + widgetFlow.width - width
-      y: widgetFlow.y + (widgetFlow.height - height) / 2
-      keys: ["widget"]
-      z: 1001 // Above the Flow
-
-      Rectangle {
-        anchors.fill: parent
-        color: endDropZone.containsDrag ? Color.applyOpacity(Color.mPrimary, "20") : Color.transparent
-        border.color: endDropZone.containsDrag ? Color.mPrimary : Color.transparent
-        border.width: endDropZone.containsDrag ? 2 : 0
-        radius: Style.radiusS * scaling
-      }
-
-      onEntered: function (drag) {//Logger.log("BarSectionEditor", "Entered end drop zone")
-      }
-
-      onDropped: function (drop) {
-        //Logger.log("BarSectionEditor", "Dropped on end zone")
-        if (drop.source && drop.source.widgetIndex !== undefined) {
-          const fromIndex = drop.source.widgetIndex
-          const toIndex = widgetModel.length // Insert at the end
-          if (fromIndex !== toIndex) {
-            //Logger.log("BarSectionEditor", `Dropped widget from index ${fromIndex} to end`)
-            reorderWidget(sectionId, fromIndex, toIndex)
       }
     }
   }