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

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

@ -207,65 +207,59 @@ 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),
pointFrom(topX, topY), pointFrom(topX, topY),
pointFrom(topX + verticalRadius, topY + horizontalRadius), pointFrom(topX + verticalRadius, topY + horizontalRadius),
padding, padding,
); );
const rightApprox = offsetBezier( const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY - horizontalRadius), pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
pointFrom(rightX, rightY), pointFrom(rightX, rightY),
pointFrom(rightX, rightY), pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY + horizontalRadius), pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
padding, padding,
); );
const bottomApprox = offsetBezier( const bottomApprox = offsetBezier(
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius), pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY), pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY), pointFrom(bottomX, bottomY),
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius), pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
padding, padding,
); );
const leftApprox = offsetBezier( const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY + horizontalRadius), pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
pointFrom(leftX, leftY), pointFrom(leftX, leftY),
pointFrom(leftX, leftY), pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY - horizontalRadius), pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
padding, padding,
); );
context.moveTo( context.moveTo(
topApprox[topApprox.length - 1][0], topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1], topApprox[topApprox.length - 1][1],
); );
context.lineTo(rightApprox[0][0], rightApprox[0][1]); context.lineTo(rightApprox[0][0], rightApprox[0][1]);
drawCatmullRom(context, rightApprox); drawCatmullRom(context, rightApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]); context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox); drawCatmullRom(context, bottomApprox);
context.lineTo(leftApprox[0][0], leftApprox[0][1]); context.lineTo(leftApprox[0][0], leftApprox[0][1]);
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,59 +268,53 @@ 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),
pointFrom(topX, topY), pointFrom(topX, topY),
pointFrom(topX - verticalRadius, topY + horizontalRadius), pointFrom(topX - verticalRadius, topY + horizontalRadius),
-5, -5,
); );
const rightApprox = offsetBezier( const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY + horizontalRadius), pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
pointFrom(rightX, rightY), pointFrom(rightX, rightY),
pointFrom(rightX, rightY), pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY - horizontalRadius), pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
-5, -5,
); );
const bottomApprox = offsetBezier( const bottomApprox = offsetBezier(
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius), pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY), pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY), pointFrom(bottomX, bottomY),
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius), pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
-5, -5,
); );
const leftApprox = offsetBezier( const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY - horizontalRadius), pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
pointFrom(leftX, leftY), pointFrom(leftX, leftY),
pointFrom(leftX, leftY), pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY + horizontalRadius), pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
-5, -5,
); );
context.moveTo( context.moveTo(
topApprox[topApprox.length - 1][0], topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1], topApprox[topApprox.length - 1][1],
); );
context.lineTo(leftApprox[0][0], leftApprox[0][1]); context.lineTo(leftApprox[0][0], leftApprox[0][1]);
drawCatmullRom(context, leftApprox); drawCatmullRom(context, leftApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]); context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox); drawCatmullRom(context, bottomApprox);
context.lineTo(rightApprox[0][0], rightApprox[0][1]); context.lineTo(rightApprox[0][0], rightApprox[0][1]);
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();