control center: improve drag handling

misc: fix layer shell enum usage
2026-06-15 15:45:20 -04:00 · 2026-06-01 13:13:17 -04:00
parent 0a668df138
commit 8c20f448ed
20 changed files with 634 additions and 208 deletions
@@ -0,0 +1,242 @@
+import QtQuick
+import qs.Common
+import qs.Services
+import qs.Widgets
+
+Item {
+    id: root
+
+    property var grid: null
+    property int sourceIndex: -1
+    property var widgetData: null
+    property Component widgetComponent: null
+    property bool isSlider: false
+
+    property real slotX: 0
+    property real slotY: 0
+    property real cellW: 100
+    property real cellH: 60
+
+    property bool dragging: !!grid && grid.draggingSourceIndex === sourceIndex
+
+    signal removeWidget(int index)
+    signal toggleWidgetSize(int index)
+    signal configRequested(int index, var widgetData, var anchor)
+
+    width: cellW
+    height: cellH
+    z: dragging ? 10000 : 1
+
+    Binding {
+        target: root
+        property: "x"
+        value: root.slotX
+        when: !root.dragging
+        restoreMode: Binding.RestoreNone
+    }
+    Binding {
+        target: root
+        property: "y"
+        value: root.slotY
+        when: !root.dragging
+        restoreMode: Binding.RestoreNone
+    }
+
+    onXChanged: {
+        if (dragging && grid)
+            grid.updateDragTarget(x + width / 2, y + height / 2);
+    }
+    onYChanged: {
+        if (dragging && grid)
+            grid.updateDragTarget(x + width / 2, y + height / 2);
+    }
+
+    Behavior on x {
+        enabled: !root.dragging
+        NumberAnimation {
+            duration: Theme.expressiveDurations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.expressiveEffects
+        }
+    }
+    Behavior on y {
+        enabled: !root.dragging
+        NumberAnimation {
+            duration: Theme.expressiveDurations.normal
+            easing.type: Easing.BezierSpline
+            easing.bezierCurve: Theme.expressiveCurves.expressiveEffects
+        }
+    }
+
+    Rectangle {
+        id: dragIndicator
+        anchors.fill: parent
+        color: "transparent"
+        border.color: Theme.primary
+        border.width: root.dragging ? 2 : 0
+        radius: Theme.cornerRadius
+        opacity: root.dragging ? 0.8 : 1.0
+        z: root.dragging ? 10000 : 1
+
+        Behavior on border.width {
+            NumberAnimation {
+                duration: 150
+            }
+        }
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 150
+            }
+        }
+    }
+
+    Loader {
+        id: widgetLoader
+        anchors.fill: parent
+        sourceComponent: root.widgetComponent
+        property var widgetData: root.widgetData
+        property int widgetIndex: root.sourceIndex
+        property int globalWidgetIndex: root.sourceIndex
+        property int widgetWidth: root.widgetData?.width || 50
+
+        MouseArea {
+            id: editModeBlocker
+            anchors.fill: parent
+            enabled: true
+            acceptedButtons: Qt.AllButtons
+            onPressed: function (mouse) {
+                mouse.accepted = true;
+            }
+            onWheel: function (wheel) {
+                wheel.accepted = true;
+            }
+            z: 100
+        }
+    }
+
+    MouseArea {
+        id: dragArea
+        anchors.fill: parent
+        cursorShape: Qt.OpenHandCursor
+        drag.target: root
+        drag.axis: Drag.XAndYAxis
+        drag.smoothed: false
+
+        onPressed: function (mouse) {
+            cursorShape = Qt.ClosedHandCursor;
+            if (root.grid)
+                root.grid.beginDrag(root.sourceIndex);
+        }
+
+        onReleased: function (mouse) {
+            cursorShape = Qt.OpenHandCursor;
+            if (root.grid)
+                root.grid.endDrag();
+        }
+    }
+
+    Rectangle {
+        id: removeButton
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.error
+        anchors.top: parent.top
+        anchors.right: parent.right
+        anchors.margins: -4
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "close"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.removeWidget(root.sourceIndex)
+        }
+    }
+
+    SizeControls {
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+        anchors.margins: -6
+        z: 10
+        currentSize: root.widgetData?.width || 50
+        isSlider: root.isSlider
+        widgetIndex: root.sourceIndex
+        onSizeChanged: newSize => {
+            var widgets = SettingsData.controlCenterWidgets.slice();
+            if (root.sourceIndex >= 0 && root.sourceIndex < widgets.length) {
+                widgets[root.sourceIndex].width = newSize;
+                SettingsData.set("controlCenterWidgets", widgets);
+            }
+        }
+    }
+
+    readonly property bool hasConfigMenu: widgetData?.id === "diskUsage"
+
+    Rectangle {
+        id: configButton
+        width: 16
+        height: 16
+        radius: 8
+        color: Theme.primary
+        anchors.top: removeButton.top
+        anchors.right: removeButton.left
+        anchors.rightMargin: 4
+        visible: root.hasConfigMenu
+        z: 10
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "settings"
+            size: 12
+            color: Theme.primaryText
+        }
+
+        MouseArea {
+            anchors.fill: parent
+            cursorShape: Qt.PointingHandCursor
+            onClicked: root.configRequested(root.sourceIndex, root.widgetData, configButton)
+        }
+    }
+
+    Rectangle {
+        id: dragHandle
+        width: 16
+        height: 12
+        radius: 2
+        color: Theme.primary
+        anchors.top: parent.top
+        anchors.left: parent.left
+        anchors.margins: 4
+        z: 15
+        opacity: root.dragging ? 1.0 : 0.7
+
+        DankIcon {
+            anchors.centerIn: parent
+            name: "drag_indicator"
+            size: 10
+            color: Theme.primaryText
+        }
+
+        Behavior on opacity {
+            NumberAnimation {
+                duration: 150
+            }
+        }
+    }
+
+    Rectangle {
+        anchors.fill: parent
+        color: Qt.rgba(Theme.primary.r, Theme.primary.g, Theme.primary.b, 0.08)
+        radius: Theme.cornerRadius
+        border.color: "transparent"
+        border.width: 0
+        z: -1
+    }
+}