rope/nixos
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

quickshell: fix concave corners with direct path drawing

Browse source 
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 <noreply@anthropic.com>
This commit is contained in:
rope 2026-05-26 14:49:54 +01:00
parent 8c6ab7984d
commit 5e78dc42dc
1 changed files with 32 additions and 40 deletions
Download patch file Download diff file Expand all files Collapse all files

48
settings/hyprland.nix
View file

@ -856,68 +856,60 @@ in
} }
// Concave corner — left // Concave corner — left
Rectangle { Canvas {
id: cornerLeft id: cornerLeft
anchors.right: calContent.left anchors.right: calContent.left
anchors.top: parent.top anchors.top: parent.top
width: 8 width: 8
height: 8 height: 8
color: "#D1${c.base00}"
visible: calPopup.open visible: calPopup.open
opacity: calPopup.open ? 1.0 : 0.0 opacity: calPopup.open ? 1.0 : 0.0
Behavior on opacity { NumberAnimation { duration: 150 } } 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: { onPaint: {
var ctx = getContext("2d"); var ctx = getContext("2d");
var r = width;
ctx.clearRect(0, 0, width, height); ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#D1${c.base00}"; ctx.fillStyle = "#D1${c.base00}";
ctx.fillRect(0, 0, width, height); // Draw filled area: full square minus quarter-circle cutout
ctx.globalCompositeOperation = "destination-out"; // The quarter circle is centered at top-left (0,0), radius = width
ctx.beginPath(); ctx.beginPath();
ctx.arc(0, 0, width, 0, Math.PI / 2); 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(); ctx.fill();
} }
} }
}
// Concave corner — right // Concave corner — right
Rectangle { Canvas {
id: cornerRight id: cornerRight
anchors.left: calContent.right anchors.left: calContent.right
anchors.top: parent.top anchors.top: parent.top
width: 8 width: 8
height: 8 height: 8
color: "#D1${c.base00}"
visible: calPopup.open visible: calPopup.open
opacity: calPopup.open ? 1.0 : 0.0 opacity: calPopup.open ? 1.0 : 0.0
Behavior on opacity { NumberAnimation { duration: 150 } } Behavior on opacity { NumberAnimation { duration: 150 } }
Canvas {
anchors.fill: parent
onPaint: { onPaint: {
var ctx = getContext("2d"); var ctx = getContext("2d");
var r = width;
ctx.clearRect(0, 0, width, height); ctx.clearRect(0, 0, width, height);
ctx.fillStyle = "#D1${c.base00}"; ctx.fillStyle = "#D1${c.base00}";
ctx.fillRect(0, 0, width, height); // Draw filled area: full square minus quarter-circle cutout
ctx.globalCompositeOperation = "destination-out"; // The quarter circle is centered at top-right (width,0), radius = width
ctx.beginPath(); ctx.beginPath();
ctx.arc(width, 0, width, Math.PI / 2, Math.PI); 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(); ctx.fill();
} }
} }
}
Rectangle { Rectangle {
id: calContent id: calContent