From 0e2dc7ea5b7d3fe3e02142adaf138bb2fa410734 Mon Sep 17 00:00:00 2001
From: chlorospingus <paul@sayson.com>
Date: Sun, 5 Jul 2026 14:42:10 -0700
Subject: [PATCH] Overlay works perfectly with multiple running at once

---
 Overlay.qml                   |  90 ++++++++++++++++++++++++++++------
 assets/picker.svg             |   8 +++
 discord.frag => colorkey.frag |   2 +
 colorkey.frag.qsb             | Bin 0 -> 1794 bytes
 discord.frag.qsb              | Bin 1607 -> 0 bytes
 shell.qml                     |  10 +++-
 6 files changed, 94 insertions(+), 16 deletions(-)
 create mode 100644 assets/picker.svg
 rename discord.frag => colorkey.frag (90%)
 create mode 100644 colorkey.frag.qsb
 delete mode 100644 discord.frag.qsb

diff --git a/Overlay.qml b/Overlay.qml
index 1bf1d2d..7a6948f 100644
--- a/Overlay.qml
+++ b/Overlay.qml
@@ -10,27 +10,44 @@ FloatingWindow {
     id: overlay
     visible: toplevel
     color: "transparent"
+    title: bgcol ? "monoverlay-t" : "monoverlay"
     property var toplevel: null
-    title: "monoverlay"
+    property var bgcol: null
+    onClosed: {
+        this.destroy()
+    } 
+    mask: Region {}
 
     Process {
         id: slurp
+        running: true
         command: ['sh', '-c', "slurp -f %x,%y,%w,%h </dev/null"]
         stdout: StdioCollector { onStreamFinished: {
-            let [x, y, w, h] = this.text.split(',')
+            let [x, y, w, h] = this.text.split(',').map(n => parseInt(n))
             const toplevel = Hyprland.activeToplevel
             const {at, size} = toplevel.lastIpcObject
             x -= at[0]
             y -= at[1]
+            if (
+                x < 0           ||
+                y < 0           ||
+                x + w > size[0] ||
+                y + h > size[1]
+            ) {
+                overlay.destroy()
+                return
+            }
             source.sourceRect = Qt.rect(x, y, w, h)
-            console.log(x, y, w, h, toplevel)
+            overlay.implicitWidth = w
+            overlay.implicitHeight = h
             overlay.toplevel = toplevel.wayland
         }}
     }
 
-    IpcHandler {
-        target: "overlay"
-        function open() {slurp.running = true}
+    Process {
+        id: hyprpicker
+        command: ['hyprpicker']
+        stdout: StdioCollector { onStreamFinished: { overlay.bgcol = Qt.color(this.text.trim()) }}
     }
 
     ScreencopyView {
@@ -39,18 +56,61 @@ FloatingWindow {
         layer.enabled: true
         width: sourceSize.width
         height: sourceSize.height
-        // layer.effect: ShaderEffect {
-        //     fragmentShader: "discord.frag.qsb"
-        //     property color bgcol: "#111111"
-        // }
         live: true
         captureSource: overlay.toplevel
     }
-    ShaderEffectSource {
-        id: source
+    Item {
         anchors.fill: parent
-        sourceItem: view
+        ShaderEffectSource {
+            id: source
+            visible: true
+            anchors.fill: parent
+            sourceItem: view
+            sourceRect: overlay.sourceRect
+            layer.enabled: true
+            layer.effect: ShaderEffect {
+                id: colorkey
+                fragmentShader: "colorkey.frag.qsb"
+                property color bgcol: overlay.bgcol
+                property bool key_enabled: !!overlay.bgcol
+            }
+        }
+        layer.enabled: true
+        layer.effect: MultiEffect {
+            anchors.fill: parent
+            shadowEnabled: true
+            blurMax: 12
+        }
+    }
+    HoverHandler { id: hover }
+    Rectangle {
+        visible: hover.hovered
+        color: "#111"
+        anchors {
+            top: parent.top
+            right: parent.right
+            margins: 4
+        }
+        radius: 8
+        width: 24
+        height: 24
+        TapHandler { 
+            acceptedButtons: Qt.LeftButton | Qt.RightButton
+            onTapped: (_, button) => {
+                if (button == 1) hyprpicker.running = true
+                else if (button == 2) overlay.bgcol = null
+            }
+        }
+        Image {
+            anchors {
+                fill: parent
+                margins: 2
+            }
+            source: Quickshell.shellPath("assets/picker.svg")
+            sourceSize: {
+                width: this.width
+                height: this.height
+            }
+        }
     }
-
-    onClosed: toplevel = null
 }
diff --git a/assets/picker.svg b/assets/picker.svg
new file mode 100644
index 0000000..402c59b
--- /dev/null
+++ b/assets/picker.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#ffffff" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  
+  <g id="Picker_Half" data-name="Picker Half">
+    <path  d="M20.936,5.889a2.825,2.825,0,0,0-4.81-2.02l-2.21,2.22-.75-.75a.771.771,0,0,0-.55-.22.8.8,0,0,0-.55.22.785.785,0,0,0,0,1.1l.75.75-8.76,8.76a3.154,3.154,0,0,0-.92,2.13l-.07,1.52a1.316,1.316,0,0,0,1.28,1.35h.06l1.52-.07a3.21,3.21,0,0,0,2.13-.93l8.76-8.76.75.75a.8.8,0,0,0,1.1,0,.785.785,0,0,0,0-1.1l-.75-.75,2.18-2.18A2.845,2.845,0,0,0,20.936,5.889Zm-8.56,8.33H7.2l6.33-6.32,2.59,2.59ZM19.4,7.2l-2.18,2.19L14.626,6.8l2.21-2.22a1.823,1.823,0,0,1,2.56,0,1.859,1.859,0,0,1,0,2.62Z"/>
+  </g>
+</svg>
diff --git a/discord.frag b/colorkey.frag
similarity index 90%
rename from discord.frag
rename to colorkey.frag
index 7591bef..c8c7eb4 100644
--- a/discord.frag
+++ b/colorkey.frag
@@ -5,11 +5,13 @@ layout(std140, binding = 0) uniform buf {
     mat4 qt_Matrix;
     float qt_Opacity;
     vec4 bgcol;
+    bool key_enabled;
 };
 layout(binding = 1) uniform sampler2D source;
 void main() {
     vec4 p = texture(source, qt_TexCoord0);
     if (
+        key_enabled    &&
         p.r == bgcol.r &&
         p.g == bgcol.g &&
         p.b == bgcol.b
diff --git a/colorkey.frag.qsb b/colorkey.frag.qsb
new file mode 100644
index 0000000000000000000000000000000000000000..9b9ac48f512a77ff6b3f99200ed0ac810d54ef16
GIT binary patch
literal 1794
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

literal 0
HcmV?d00001

diff --git a/discord.frag.qsb b/discord.frag.qsb
deleted file mode 100644
index 7991470afaf3a9f38da40df44c4f53432cbdc0ad..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1607
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
FwL;CcF`xhd

diff --git a/shell.qml b/shell.qml
index 00734f3..0da918a 100644
--- a/shell.qml
+++ b/shell.qml
@@ -32,5 +32,13 @@ ShellRoot {
     }
     Shell.Corners { }
     // Shell.Keystrokes { }
-    Shell.Overlay { }
+
+    Component {
+        id: overlay
+        Shell.Overlay {}
+    }
+    IpcHandler {
+        target: 'overlay'
+        function open() {overlay.createObject(this, {})}
+    }
 }