mirror of
https://github.com/kossLAN/dots.git
synced 2025-11-04 22:49:50 -05:00
refactor: wip refactor on color scheme, make screenshots suck less, etc.
This commit is contained in:
parent
0052b00904
commit
21969cf5a9
8 changed files with 214 additions and 49 deletions
|
|
@ -1,54 +1,106 @@
|
|||
import QtQuick
|
||||
import ".."
|
||||
import qs
|
||||
|
||||
Canvas {
|
||||
Item {
|
||||
id: root
|
||||
width: 800
|
||||
height: 600
|
||||
|
||||
property color overlayColor: "#80000000"
|
||||
property color outlineColor: ShellSettings.colors["primary"]
|
||||
property rect selectionRect
|
||||
property point startPosition
|
||||
property rect selectionRect: Qt.rect(0, 0, 0, 0)
|
||||
property point startPosition: Qt.point(0, 0)
|
||||
signal areaSelected(rect selection)
|
||||
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
|
||||
// grey overlay
|
||||
ctx.fillStyle = overlayColor;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
// cut out the selection rectangle
|
||||
ctx.globalCompositeOperation = "destination-out";
|
||||
ctx.fillRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
|
||||
ctx.globalCompositeOperation = "source-over";
|
||||
ctx.strokeStyle = outlineColor;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeRect(selectionRect.x, selectionRect.y, selectionRect.width, selectionRect.height);
|
||||
}
|
||||
|
||||
// only send signal when selection rectangle has finished
|
||||
onVisibleChanged: areaSelected(selectionRect)
|
||||
|
||||
MouseArea {
|
||||
id: selectionArea
|
||||
anchors.fill: parent
|
||||
hoverEnabled: true
|
||||
|
||||
onReleased: root.visible = false
|
||||
|
||||
onPressed: mouse => {
|
||||
root.startPosition = Qt.point(mouse.x, mouse.y);
|
||||
rectangle.x = mouse.x;
|
||||
rectangle.y = mouse.y;
|
||||
rectangle.width = 0;
|
||||
rectangle.height = 0;
|
||||
root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
|
||||
}
|
||||
|
||||
onPositionChanged: mouse => {
|
||||
if (pressed) {
|
||||
var x = Math.min(root.startPosition.x, mouse.x);
|
||||
var y = Math.min(root.startPosition.y, mouse.y);
|
||||
var width = Math.abs(mouse.x - root.startPosition.x);
|
||||
var height = Math.abs(mouse.y - root.startPosition.y);
|
||||
rectangle.x = Math.min(root.startPosition.x, mouse.x);
|
||||
rectangle.y = Math.min(root.startPosition.y, mouse.y);
|
||||
rectangle.width = Math.abs(mouse.x - root.startPosition.x);
|
||||
rectangle.height = Math.abs(mouse.y - root.startPosition.y);
|
||||
|
||||
root.selectionRect = Qt.rect(x, y, width, height);
|
||||
root.requestPaint();
|
||||
root.selectionRect = Qt.rect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onReleased: mouse => {
|
||||
root.visible = false;
|
||||
root.areaSelected(root.selectionRect);
|
||||
}
|
||||
Rectangle {
|
||||
id: overlayStart
|
||||
color: root.overlayColor
|
||||
visible: !selectionArea.containsPress
|
||||
anchors.fill: parent
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: overlayTop
|
||||
color: root.overlayColor
|
||||
x: 0
|
||||
y: 0
|
||||
width: parent.width
|
||||
height: Math.max(0, rectangle.y)
|
||||
visible: selectionArea.containsPress
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: overlayLeft
|
||||
color: root.overlayColor
|
||||
x: 0
|
||||
y: rectangle.y
|
||||
width: Math.max(0, rectangle.x)
|
||||
height: Math.max(0, rectangle.height)
|
||||
visible: selectionArea.containsPress
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: overlayRight
|
||||
color: root.overlayColor
|
||||
x: rectangle.x + rectangle.width
|
||||
y: rectangle.y
|
||||
width: Math.max(0, parent.width - (rectangle.x + rectangle.width))
|
||||
height: Math.max(0, rectangle.height)
|
||||
visible: selectionArea.containsPress
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
id: overlayBottom
|
||||
color: root.overlayColor
|
||||
x: 0
|
||||
y: rectangle.y + rectangle.height
|
||||
width: parent.width
|
||||
height: Math.max(0, parent.height - (rectangle.y + rectangle.height))
|
||||
visible: selectionArea.containsPress
|
||||
}
|
||||
|
||||
// The visible selection rectangle with border drawn above overlays
|
||||
Rectangle {
|
||||
id: rectangle
|
||||
color: "transparent"
|
||||
radius: 8
|
||||
border.color: ShellSettings.colors.active_translucent
|
||||
border.width: 2
|
||||
x: 0
|
||||
y: 0
|
||||
width: 0
|
||||
height: 0
|
||||
z: 1
|
||||
visible: selectionArea.containsPress
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue