smig/excalidraw
1
0
Fork 0
mirror of https://github.com/excalidraw/excalidraw.git synced 2025-05-03 10:00:07 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Diamond highligh for sharp corners

Browse source 
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
1 changed files with 93 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

38
packages/excalidraw/renderer/interactiveScene.ts
View file

@ -207,18 +207,18 @@ const strokeDiamondWithRotation = (
context.save(); context.save();
context.translate(x, y); context.translate(x, y);
context.rotate(element.angle); context.rotate(element.angle);
padding = 45;
{ {
context.beginPath(); context.beginPath();
const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] = const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element); getDiamondPoints(element);
if (element.roundness) { const verticalRadius = element.roundness
const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element); ? getCornerRadius(Math.abs(topX - leftX), element)
const horizontalRadius = getCornerRadius( : 1;
Math.abs(rightY - topY), const horizontalRadius = element.roundness
element, ? getCornerRadius(Math.abs(rightY - topY), element)
); : 1;
const topApprox = offsetBezier( const topApprox = offsetBezier(
pointFrom(topX - verticalRadius, topY + horizontalRadius), pointFrom(topX - verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY), pointFrom(topX, topY),
@ -260,12 +260,6 @@ const strokeDiamondWithRotation = (
drawCatmullRom(context, leftApprox); drawCatmullRom(context, leftApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]); context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox); 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 // 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] = const [topX, topY, rightX, rightY, bottomX, bottomY, leftX, leftY] =
getDiamondPoints(element); getDiamondPoints(element);
if (element.roundness) { const verticalRadius = element.roundness
const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element); ? getCornerRadius(Math.abs(topX - leftX), element)
const horizontalRadius = getCornerRadius( : 1;
Math.abs(rightY - topY), const horizontalRadius = element.roundness
element, ? getCornerRadius(Math.abs(rightY - topY), element)
); : 1;
const topApprox = offsetBezier( const topApprox = offsetBezier(
pointFrom(topX + verticalRadius, topY + horizontalRadius), pointFrom(topX + verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY), pointFrom(topX, topY),
@ -321,12 +315,6 @@ const strokeDiamondWithRotation = (
drawCatmullRom(context, rightApprox); drawCatmullRom(context, rightApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]); context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox); 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.closePath();
context.fill(); context.fill();