From 8713e9442827b0438213864955f7eab003e14cef Mon Sep 17 00:00:00 2001
From: end-4 <97237370+end-4@users.noreply.github.com>
Date: Sun, 28 Sep 2025 18:44:05 +0200
Subject: [PATCH] screenshot tool: make dark overlay clipped by selection, add
 selection size indicator

---
 .config/quickshell/ii/screenshot.qml | 38 ++++++++++++++++++++++------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/.config/quickshell/ii/screenshot.qml b/.config/quickshell/ii/screenshot.qml
index 5c930f0c6..13e07bb5e 100644
--- a/.config/quickshell/ii/screenshot.qml
+++ b/.config/quickshell/ii/screenshot.qml
@@ -15,6 +15,7 @@ import qs.modules.common.functions
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
+import Qt5Compat.GraphicalEffects
 import Quickshell
 import Quickshell.Io
 import Quickshell.Widgets
@@ -137,7 +138,8 @@ ShellRoot {
             })
             readonly property list<var> layerRegions: {
                 const layersOfThisMonitor = root.layers[panelWindow.hyprlandMonitor.name]
-                const topLayers = layersOfThisMonitor.levels["2"]
+                const topLayers = layersOfThisMonitor?.levels["2"]
+                if (!topLayers) return [];
                 const nonBarTopLayers = topLayers
                     .filter(layer => !(layer.namespace.includes(":bar") || layer.namespace.includes(":verticalBar") || layer.namespace.includes(":dock")))
                     .map(layer => {
@@ -390,14 +392,24 @@ ShellRoot {
 
                     // Overlay to darken screen
                     Rectangle { // Base
-                        id: overlayRect
-                        z: 0
-                        anchors.fill: parent
-                        color: root.overlayColor
-                        layer.enabled: true
+                        id: darkenOverlay
+                        z: 1
+                        anchors {
+                            left: parent.left
+                            top: parent.top
+                            leftMargin: panelWindow.regionX - darkenOverlay.border.width
+                            topMargin: panelWindow.regionY - darkenOverlay.border.width
+                        }
+                        width: panelWindow.regionWidth + darkenOverlay.border.width * 2
+                        height: panelWindow.regionHeight + darkenOverlay.border.width * 2
+                        color: "transparent"
+                        // border.color: root.selectionBorderColor
+                        border.color: root.overlayColor
+                        border.width: Math.max(panelWindow.width, panelWindow.height)
+                        radius: root.standardRounding
                     }
                     Rectangle {
-                        // TODO: Make this mask the base instead of just overlaying a border
+                        id: selectionBorder
                         z: 1
                         anchors {
                             left: parent.left
@@ -410,11 +422,21 @@ ShellRoot {
                         color: "transparent"
                         border.color: root.selectionBorderColor
                         border.width: 2
-                        radius: root.standardRounding
+                        // radius: root.standardRounding
+                        radius: 0 // TODO: figure out how to make the overlay thing work with rounding
+                    }
+                    StyledText {
+                        anchors {
+                            bottom: selectionBorder.bottom
+                            right: selectionBorder.right
+                            margins: 8
+                        }
+                        text: `${Math.round(panelWindow.regionWidth)} x ${Math.round(panelWindow.regionHeight)}`
                     }
 
                     // Instructions
                     Rectangle {
+                        z: 9999
                         anchors {
                             top: parent.top
                             horizontalCenter: parent.horizontalCenter