src/region-select/RegionSelectOverlay.qml

0001 import QtQuick
0002 import QtQuick.Layouts
0003 import QtQuick.Controls as QQC2
0004 import org.kde.kirigami as Kirigami
0005
0006 MouseArea {
0007     // This needs to be a mousearea in orcer for the proper mouse events to be correctly filtered
0008     id: root
0009
0010     anchors.fill: parent
0011     LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
0012     LayoutMirroring.childrenInherit: true
0013
0014     focus: true
0015     acceptedButtons: Qt.LeftButton | Qt.RightButton
0016     hoverEnabled: true
0017     cursorShape: Qt.CrossCursor
0018
0019     readonly property point mousePosition: Qt.point(mouseX, mouseY)
0020
0021     onPressed: mouse => {
0022         if (mouse.button & Qt.RightButton) {
0023             SelectionEditor.dragReset();
0024         }
0025
0026         if (mouse.button & Qt.LeftButton) {
0027             SelectionEditor.dragStart(Screen.name, mouse.x, mouse.y);
0028         }
0029     }
0030     onMousePositionChanged: {
0031         SelectionEditor.setMousePosition(Screen.name, mouseX, mouseY);
0032     }
0033     onReleased: mouse => {
0034         if (mouse.button & Qt.LeftButton) {
0035             SelectionEditor.dragRelease(Screen.name, mouse.x, mouse.y);
0036         }
0037     }
0038
0039     component Overlay: Rectangle {
0040         color: "black"
0041         opacity: 0.5
0042         LayoutMirroring.enabled: false
0043     }
0044
0045     // top and fullscreen if nothing is selected
0046     Overlay {
0047         id: topOverlay
0048         anchors.left: parent.left
0049         anchors.top: parent.top
0050         anchors.right: parent.right
0051         anchors.bottom: selectionRectangle.visible ? selectionRectangle.top : parent.bottom
0052         visible: true
0053     }
0054
0055     Overlay {
0056         id: leftOverlay
0057         anchors.left: parent.left
0058         anchors.top: selectionRectangle.top
0059         anchors.right: selectionRectangle.left
0060         anchors.bottom: selectionRectangle.bottom
0061         visible: selectionRectangle.visible
0062     }
0063
0064     Overlay {
0065         id: rightOverlay
0066         anchors.left: selectionRectangle.right
0067         anchors.top: selectionRectangle.top
0068         anchors.right: parent.right
0069         anchors.bottom: selectionRectangle.bottom
0070         visible: selectionRectangle.visible
0071     }
0072
0073     Overlay {
0074         id: bottomOverlay
0075         anchors.left: parent.left
0076         anchors.top: selectionRectangle.bottom
0077         anchors.right: parent.right
0078         anchors.bottom: parent.bottom
0079         visible: selectionRectangle.visible
0080     }
0081
0082     Rectangle {
0083         id: selectionRectangle
0084         color: "transparent"
0085         border.color: palette.highlight
0086         border.width: 1
0087         visible: SelectionEditor.rect.height > 0 && SelectionEditor.rect.width > 0
0088         x: SelectionEditor.rect.x - border.width - Screen.virtualX
0089         y: SelectionEditor.rect.y - border.width - Screen.virtualY
0090         width: SelectionEditor.rect.width + border.width * 2
0091         height: SelectionEditor.rect.height + border.width * 2
0092         LayoutMirroring.enabled: false
0093         LayoutMirroring.childrenInherit: true
0094
0095         SystemPalette {
0096             id: palette
0097             colorGroup: Kirigami.Theme.Active
0098         }
0099     }
0100
0101     QQC2.Label {
0102         id: metricsLabel
0103         visible: false
0104     }
0105     FontMetrics {
0106         id: fontMetrics
0107         font: metricsLabel.font
0108     }
0109
0110     // drag size
0111     FloatingTextBox {
0112         id: dragSizeBox
0113
0114         anchors {
0115             horizontalCenter: selectionRectangle.horizontalCenter
0116             verticalCenter: selectionRectangle.verticalCenter
0117         }
0118
0119         fontMetrics: fontMetrics
0120         visible: selectionRectangle.visible && dragSizeBox.height < selectionRectangle.height && dragSizeBox.width < selectionRectangle.width
0121         opacity: 1
0122         contents: QQC2.Label {
0123             text: `${SelectionEditor.rect.width}x${SelectionEditor.rect.height}`
0124         }
0125
0126         Behavior on opacity {
0127             NumberAnimation {
0128                 duration: Kirigami.Units.longDuration
0129                 easing.type: Easing.OutCubic
0130             }
0131         }
0132     }
0133
0134     // instructions while dragging
0135     FloatingTextBox {
0136         id: dragBox
0137         anchors {
0138             horizontalCenter: parent.horizontalCenter
0139             bottom: parent.bottom
0140         }
0141         fontMetrics: fontMetrics
0142         visible: SelectionEditor.isDragging && selectionRectangle.y + selectionRectangle.height < dragBox.y
0143         opacity: 1
0144         contents: RowLayout {
0145             ColumnLayout {
0146                 QQC2.Label {
0147                     text: i18n("Start streaming:")
0148                     Layout.alignment: Qt.AlignRight
0149                 }
0150                 QQC2.Label {
0151                     text: i18n("Clear selection:")
0152                     Layout.alignment: Qt.AlignRight
0153                 }
0154                 QQC2.Label {
0155                     text: i18n("Cancel:")
0156                     Layout.alignment: Qt.AlignRight
0157                 }
0158             }
0159             ColumnLayout {
0160                 QQC2.Label {
0161                     text: i18nc("Mouse action", "Release left-click")
0162                     Layout.alignment: Qt.AlignLeft
0163                 }
0164                 QQC2.Label {
0165                     text: i18nc("Mouse action", "Right-click")
0166                     Layout.alignment: Qt.AlignLeft
0167                 }
0168                 QQC2.Label {
0169                     text: i18nc("Keyboard action", "Escape")
0170                     Layout.alignment: Qt.AlignLeft
0171                 }
0172             }
0173         }
0174         Behavior on opacity {
0175             NumberAnimation {
0176                 duration: Kirigami.Units.longDuration
0177                 easing.type: Easing.OutCubic
0178             }
0179         }
0180     }
0181
0182     // instructions not dragging
0183     FloatingTextBox {
0184         anchors {
0185             horizontalCenter: parent.horizontalCenter
0186             verticalCenter: parent.verticalCenter
0187         }
0188         fontMetrics: fontMetrics
0189         visible: !SelectionEditor.isDragging
0190         opacity: 1
0191
0192         contents: RowLayout {
0193             ColumnLayout {
0194                 QQC2.Label {
0195                     text: i18n("Create selection:")
0196                     Layout.alignment: Qt.AlignRight
0197                 }
0198                 QQC2.Label {
0199                     text: i18n("Cancel:")
0200                     Layout.alignment: Qt.AlignRight
0201                 }
0202             }
0203             ColumnLayout {
0204                 QQC2.Label {
0205                     text: i18nc("Mouse action", "Left-click and drag")
0206                     Layout.alignment: Qt.AlignLeft
0207                 }
0208                 QQC2.Label {
0209                     text: i18nc("Keyboard action", "Escape")
0210                     Layout.alignment: Qt.AlignLeft
0211                 }
0212             }
0213         }
0214
0215         Behavior on opacity {
0216             NumberAnimation {
0217                 duration: Kirigami.Units.longDuration
0218                 easing.type: Easing.OutCubic
0219             }
0220         }
0221     }
0222 }