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.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 topApprox = offsetBezier(
pointFrom(topX - verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
pointFrom(topX, topY),
pointFrom(topX + verticalRadius, topY + horizontalRadius),
padding,
);
const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
padding,
);
const bottomApprox = offsetBezier(
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
padding,
);
const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
padding,
);
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),
pointFrom(topX, topY),
pointFrom(topX + verticalRadius, topY + horizontalRadius),
padding,
);
const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
padding,
);
const bottomApprox = offsetBezier(
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
padding,
);
const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
padding,
);
context.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(rightApprox[0][0], rightApprox[0][1]);
drawCatmullRom(context, rightApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox);
context.lineTo(leftApprox[0][0], leftApprox[0][1]);
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);
}
context.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(rightApprox[0][0], rightApprox[0][1]);
drawCatmullRom(context, rightApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox);
context.lineTo(leftApprox[0][0], leftApprox[0][1]);
drawCatmullRom(context, leftApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox);
}
// 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] =
getDiamondPoints(element);
if (element.roundness) {
const verticalRadius = getCornerRadius(Math.abs(topX - leftX), element);
const horizontalRadius = getCornerRadius(
Math.abs(rightY - topY),
element,
);
const topApprox = offsetBezier(
pointFrom(topX + verticalRadius, topY + horizontalRadius),
pointFrom(topX, topY),
pointFrom(topX, topY),
pointFrom(topX - verticalRadius, topY + horizontalRadius),
-5,
);
const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
-5,
);
const bottomApprox = offsetBezier(
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
-5,
);
const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
-5,
);
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),
pointFrom(topX, topY),
pointFrom(topX - verticalRadius, topY + horizontalRadius),
-5,
);
const rightApprox = offsetBezier(
pointFrom(rightX - verticalRadius, rightY + horizontalRadius),
pointFrom(rightX, rightY),
pointFrom(rightX, rightY),
pointFrom(rightX - verticalRadius, rightY - horizontalRadius),
-5,
);
const bottomApprox = offsetBezier(
pointFrom(bottomX - verticalRadius, bottomY - horizontalRadius),
pointFrom(bottomX, bottomY),
pointFrom(bottomX, bottomY),
pointFrom(bottomX + verticalRadius, bottomY - horizontalRadius),
-5,
);
const leftApprox = offsetBezier(
pointFrom(leftX + verticalRadius, leftY - horizontalRadius),
pointFrom(leftX, leftY),
pointFrom(leftX, leftY),
pointFrom(leftX + verticalRadius, leftY + horizontalRadius),
-5,
);
context.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(leftApprox[0][0], leftApprox[0][1]);
drawCatmullRom(context, leftApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox);
context.lineTo(rightApprox[0][0], rightApprox[0][1]);
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.moveTo(
topApprox[topApprox.length - 1][0],
topApprox[topApprox.length - 1][1],
);
context.lineTo(leftApprox[0][0], leftApprox[0][1]);
drawCatmullRom(context, leftApprox);
context.lineTo(bottomApprox[0][0], bottomApprox[0][1]);
drawCatmullRom(context, bottomApprox);
context.lineTo(rightApprox[0][0], rightApprox[0][1]);
drawCatmullRom(context, rightApprox);
context.lineTo(topApprox[0][0], topApprox[0][1]);
drawCatmullRom(context, topApprox);
}
context.closePath();
context.fill();