region selector: dashed border, move action indicator to cursor

This commit is contained in:
end-4
2026-01-11 12:04:52 +01:00
parent d8018e97fe
commit 803500c4b0
4 changed files with 151 additions and 56 deletions
@@ -0,0 +1,112 @@
import qs.services
import qs.modules.common
import qs.modules.common.widgets
import QtQuick
Item {
id: root
property var action
property var selectionMode
property string description: switch (root.action) {
case RegionSelection.SnipAction.Copy:
case RegionSelection.SnipAction.Edit:
return Translation.tr("Copy region (LMB) or annotate (RMB)");
case RegionSelection.SnipAction.Search:
return Translation.tr("Search with Google Lens");
case RegionSelection.SnipAction.CharRecognition:
return Translation.tr("Recognize text");
case RegionSelection.SnipAction.Record:
case RegionSelection.SnipAction.RecordWithSound:
return Translation.tr("Record region");
}
property string materialSymbol: switch (root.action) {
case RegionSelection.SnipAction.Copy:
case RegionSelection.SnipAction.Edit:
return "content_cut";
case RegionSelection.SnipAction.Search:
return "image_search";
case RegionSelection.SnipAction.CharRecognition:
return "document_scanner";
case RegionSelection.SnipAction.Record:
case RegionSelection.SnipAction.RecordWithSound:
return "videocam";
default:
return "";
}
property bool showDescription: true
function hideDescription() {
root.showDescription = false
}
Timer {
id: descTimeout
interval: 1000
running: true
onTriggered: {
root.hideDescription()
}
}
onActionChanged: {
root.showDescription = true
descTimeout.restart()
}
property int margins: 8
implicitWidth: content.implicitWidth + margins * 2
implicitHeight: content.implicitHeight + margins * 2
Rectangle {
id: content
anchors.centerIn: parent
property real padding: 8
implicitHeight: 38
implicitWidth: root.showDescription ? contentRow.implicitWidth + padding * 2 : implicitHeight
clip: true
topLeftRadius: root.showDescription ? implicitHeight / 2 : 6
bottomLeftRadius: implicitHeight - topLeftRadius
bottomRightRadius: bottomLeftRadius
topRightRadius: bottomLeftRadius
color: Appearance.colors.colPrimary
Behavior on topLeftRadius {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
Behavior on implicitWidth {
animation: Appearance.animation.elementMove.numberAnimation.createObject(this)
}
Row {
id: contentRow
anchors {
verticalCenter: parent.verticalCenter
left: parent.left
leftMargin: content.padding
}
spacing: 10
MaterialSymbol {
anchors.verticalCenter: parent.verticalCenter
iconSize: 22
color: Appearance.colors.colOnPrimary
animateChange: true
text: root.materialSymbol
}
FadeLoader {
id: descriptionLoader
anchors.verticalCenter: parent.verticalCenter
shown: root.showDescription
sourceComponent: StyledText {
color: Appearance.colors.colOnPrimary
text: root.description
anchors.right: parent.right
anchors.rightMargin: 6
}
}
}
}
}
@@ -23,48 +23,6 @@ Toolbar {
// Signals
signal dismiss()
MaterialShape {
Layout.fillHeight: true
Layout.leftMargin: 2
Layout.rightMargin: 2
implicitSize: 36 // Intentionally smaller because this one is brighter than others
shape: switch (root.action) {
case RegionSelection.SnipAction.Copy:
case RegionSelection.SnipAction.Edit:
return MaterialShape.Shape.Cookie4Sided;
case RegionSelection.SnipAction.Search:
return MaterialShape.Shape.Pentagon;
case RegionSelection.SnipAction.CharRecognition:
return MaterialShape.Shape.Sunny;
case RegionSelection.SnipAction.Record:
case RegionSelection.SnipAction.RecordWithSound:
return MaterialShape.Shape.Gem;
default:
return MaterialShape.Shape.Cookie12Sided;
}
color: Appearance.colors.colPrimary
MaterialSymbol {
anchors.centerIn: parent
iconSize: 22
color: Appearance.colors.colOnPrimary
animateChange: true
text: switch (root.action) {
case RegionSelection.SnipAction.Copy:
case RegionSelection.SnipAction.Edit:
return "content_cut";
case RegionSelection.SnipAction.Search:
return "image_search";
case RegionSelection.SnipAction.CharRecognition:
return "document_scanner";
case RegionSelection.SnipAction.Record:
case RegionSelection.SnipAction.RecordWithSound:
return "videocam";
default:
return "";
}
}
}
ToolbarTabBar {
id: tabBar
tabButtonList: [
@@ -76,5 +34,4 @@ Toolbar {
root.selectionMode = currentIndex === 0 ? RegionSelection.SelectionMode.RectCorners : RegionSelection.SelectionMode.Circle;
}
}
}
@@ -33,22 +33,40 @@ Item {
}
// Selection border
Rectangle {
// Rectangle {
// id: selectionBorder
// z: 1
// anchors {
// left: parent.left
// top: parent.top
// leftMargin: root.regionX
// topMargin: root.regionY
// }
// width: root.regionWidth
// height: root.regionHeight
// color: "transparent"
// border.color: root.color
// border.width: 2
// // radius: root.standardRounding
// radius: 0 // TODO: figure out how to make the overlay thing work with rounding
// }
DashedBorder {
id: selectionBorder
z: 1
z: 9
anchors {
left: parent.left
top: parent.top
leftMargin: root.regionX
topMargin: root.regionY
leftMargin: Math.round(root.regionX) - borderWidth
topMargin: Math.round(root.regionY) - borderWidth
}
width: root.regionWidth
height: root.regionHeight
color: "transparent"
border.color: root.color
border.width: 2
// radius: root.standardRounding
radius: 0 // TODO: figure out how to make the overlay thing work with rounding
width: Math.round(root.regionWidth) + borderWidth * 2
height: Math.round(root.regionHeight) + borderWidth * 2
color: root.color
dashLength: 6
gapLength: 3
borderWidth: 1
}
StyledText {
@@ -35,7 +35,7 @@ PanelWindow {
signal dismiss()
property string screenshotDir: Directories.screenshotTemp
property color overlayColor: "#88111111"
property color overlayColor: ColorUtils.transparentize("#000000", 0.4)
property color brightText: Appearance.m3colors.darkmode ? Appearance.colors.colOnLayer0 : Appearance.colors.colLayer0
property color brightSecondary: Appearance.m3colors.darkmode ? Appearance.colors.colSecondary : Appearance.colors.colOnSecondary
property color brightTertiary: Appearance.m3colors.darkmode ? Appearance.colors.colTertiary : Qt.lighter(Appearance.colors.colPrimary)
@@ -375,6 +375,14 @@ PanelWindow {
}
}
CursorGuide {
z: 9999
x: root.dragging ? root.regionX + root.regionWidth : mouseArea.mouseX
y: root.dragging ? root.regionY + root.regionHeight : mouseArea.mouseY
action: root.action
selectionMode: root.selectionMode
}
// Window regions
Repeater {
model: ScriptModel {
@@ -447,7 +455,7 @@ PanelWindow {
// Controls
Row {
id: regionSelectionControls
z: 9999
z: 10
anchors {
horizontalCenter: parent.horizontalCenter
bottom: parent.bottom