Diamond highligh for sharp corners

Signed-off-by: Mark Tolmacs <mark@lazycat.hu>
This commit is contained in:
Mark Tolmacs 2025-04-24 21:11:55 +02:00
parent 769c47af86
commit 043c95fcc0
No known key found for this signature in database

View file

@ -207,18 +207,18 @@ const strokeDiamondWithRotation = (
context.save();
context.translate(x, y);
context.rotate(element.angle);
padding = 45;
{
context.beginPath();
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element);
if (element.roundness) {
const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
const horizontalRadius = getCornerRadius(
Math.abs(rightY - topY),
element,
);
const verticalRadius = element.roundness
? getCornerRadius(Math.abs(topX - leftX), element)
: 1;
const horizontalRadius = element.roundness
? getCornerRadius(Math.abs(rightY - topY), element)
: 1;
const topApprox = offsetBezier(
pointFrom(topX - verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
@ -260,12 +260,6 @@ const strokeDiamondWithRotation = (
drawCatmullRom(context, leftApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox);
} else {
context.moveTo(topX, topY - padding);
context.lineTo(rightX + padding, rightY);
context.lineTo(bottomX, bottomY + padding);
context.lineTo(leftX - padding, leftY);
}
}
// Counter-clockwise for the cutout in the middle. We need to have an "inverse
@ -274,12 +268,12 @@ const strokeDiamondWithRotation = (
{
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element);
if (element.roundness) {
const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
const horizontalRadius = getCornerRadius(
Math.abs(rightY - topY),
element,
);
const verticalRadius = element.roundness
? getCornerRadius(Math.abs(topX - leftX), element)
: 1;
const horizontalRadius = element.roundness
? getCornerRadius(Math.abs(rightY - topY), element)
: 1;
const topApprox = offsetBezier(
pointFrom(topX + verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
@ -321,12 +315,6 @@ const strokeDiamondWithRotation = (
drawCatmullRom(context, rightApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox);
} else {
context.moveTo(topX, topY - 5);
context.lineTo(leftX + 5, leftY);
context.lineTo(bottomX, bottomY + 5);
context.lineTo(rightX - 5, rightY);
}
}
context.closePath();
context.fill();