quickshell: wrap concave corners in clipping Items
Canvas at fixed 8x8 inside a clip Item that grows with calContent.height — corners reveal progressively with the slide animation instead of breaking on dynamic resize. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
36b02fb888
commit
3d79c226ed
1 changed files with 37 additions and 33 deletions
|
|
@ -856,53 +856,57 @@ in
|
|||
}
|
||||
|
||||
// Concave corner — left
|
||||
Canvas {
|
||||
id: cornerLeft
|
||||
Item {
|
||||
anchors.right: calContent.left
|
||||
anchors.top: parent.top
|
||||
width: 8
|
||||
height: Math.min(8, calContent.height)
|
||||
visible: calContent.height > 0
|
||||
clip: true
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
var r = width;
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.fillStyle = "#D1${c.base00}";
|
||||
// Concave: filled at top+right, empty curve at bottom-left
|
||||
// Arc centered at bottom-left (0, r)
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(r, 0);
|
||||
ctx.lineTo(r, r);
|
||||
ctx.arc(0, r, r, 0, -Math.PI / 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
visible: calContent.height > 0
|
||||
Canvas {
|
||||
anchors.top: parent.top
|
||||
width: 8
|
||||
height: 8
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
var r = 8;
|
||||
ctx.clearRect(0, 0, r, r);
|
||||
ctx.fillStyle = "#D1${c.base00}";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(r, 0);
|
||||
ctx.lineTo(r, r);
|
||||
ctx.arc(0, r, r, 0, -Math.PI / 2, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Concave corner — right
|
||||
Canvas {
|
||||
id: cornerRight
|
||||
Item {
|
||||
anchors.left: calContent.right
|
||||
anchors.top: parent.top
|
||||
width: 8
|
||||
height: Math.min(8, calContent.height)
|
||||
visible: calContent.height > 0
|
||||
clip: true
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
var r = width;
|
||||
ctx.clearRect(0, 0, width, height);
|
||||
ctx.fillStyle = "#D1${c.base00}";
|
||||
// Concave: filled at top+left, empty curve at bottom-right
|
||||
// Arc centered at bottom-right (r, r)
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(r, 0);
|
||||
ctx.arc(r, r, r, -Math.PI / 2, Math.PI, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
visible: calContent.height > 0
|
||||
Canvas {
|
||||
anchors.top: parent.top
|
||||
width: 8
|
||||
height: 8
|
||||
onPaint: {
|
||||
var ctx = getContext("2d");
|
||||
var r = 8;
|
||||
ctx.clearRect(0, 0, r, r);
|
||||
ctx.fillStyle = "#D1${c.base00}";
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(r, 0);
|
||||
ctx.arc(r, r, r, -Math.PI / 2, Math.PI, true);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue