From 5e78dc42dcac152ec8a3739e170794c6ac2cd251 Mon Sep 17 00:00:00 2001 From: rope Date: Tue, 26 May 2026 14:49:54 +0100 Subject: [PATCH] quickshell: fix concave corners with direct path drawing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace broken destination-out compositing with direct Canvas path fill — draws only the concave shape without alpha tricks. Co-Authored-By: Claude Opus 4.6 --- settings/hyprland.nix | 72 +++++++++++++++++++------------------------ 1 file changed, 32 insertions(+), 40 deletions(-) diff --git a/settings/hyprland.nix b/settings/hyprland.nix index c9cbea0..35086ba 100644 --- a/settings/hyprland.nix +++ b/settings/hyprland.nix @@ -856,66 +856,58 @@ in } // Concave corner — left - Rectangle { + Canvas { id: cornerLeft anchors.right: calContent.left anchors.top: parent.top width: 8 height: 8 - color: "#D1${c.base00}" visible: calPopup.open opacity: calPopup.open ? 1.0 : 0.0 Behavior on opacity { NumberAnimation { duration: 150 } } - - Rectangle { - anchors.fill: parent - color: "transparent" - radius: 8 - Rectangle { - anchors.fill: parent - color: "transparent" - } - } - - Canvas { - anchors.fill: parent - onPaint: { - var ctx = getContext("2d"); - ctx.clearRect(0, 0, width, height); - ctx.fillStyle = "#D1${c.base00}"; - ctx.fillRect(0, 0, width, height); - ctx.globalCompositeOperation = "destination-out"; - ctx.beginPath(); - ctx.arc(0, 0, width, 0, Math.PI / 2); - ctx.fill(); - } + onPaint: { + var ctx = getContext("2d"); + var r = width; + ctx.clearRect(0, 0, width, height); + ctx.fillStyle = "#D1${c.base00}"; + // Draw filled area: full square minus quarter-circle cutout + // The quarter circle is centered at top-left (0,0), radius = width + ctx.beginPath(); + ctx.moveTo(r, 0); // top-right corner + ctx.lineTo(r, r); // bottom-right corner + ctx.lineTo(0, r); // bottom-left corner + // Arc from bottom-left back to top-right, curving inward + ctx.arc(0, 0, r, Math.PI / 2, 0, true); + ctx.closePath(); + ctx.fill(); } } // Concave corner — right - Rectangle { + Canvas { id: cornerRight anchors.left: calContent.right anchors.top: parent.top width: 8 height: 8 - color: "#D1${c.base00}" visible: calPopup.open opacity: calPopup.open ? 1.0 : 0.0 Behavior on opacity { NumberAnimation { duration: 150 } } - - Canvas { - anchors.fill: parent - onPaint: { - var ctx = getContext("2d"); - ctx.clearRect(0, 0, width, height); - ctx.fillStyle = "#D1${c.base00}"; - ctx.fillRect(0, 0, width, height); - ctx.globalCompositeOperation = "destination-out"; - ctx.beginPath(); - ctx.arc(width, 0, width, Math.PI / 2, Math.PI); - ctx.fill(); - } + onPaint: { + var ctx = getContext("2d"); + var r = width; + ctx.clearRect(0, 0, width, height); + ctx.fillStyle = "#D1${c.base00}"; + // Draw filled area: full square minus quarter-circle cutout + // The quarter circle is centered at top-right (width,0), radius = width + ctx.beginPath(); + ctx.moveTo(0, 0); // top-left corner + ctx.lineTo(0, r); // bottom-left corner + ctx.lineTo(r, r); // bottom-right corner + // Arc from bottom-right back to top-left, curving inward + ctx.arc(r, 0, r, Math.PI / 2, Math.PI, false); + ctx.closePath(); + ctx.fill(); } }