sambruk/excalidraw
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: Improve arrow head sizing (#3480)

Browse Source 
Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
This commit is contained in:
Lily Ge 2021-05-22 06:30:02 -04:00 committed by GitHub
parent 9ec15989ab
commit 044614dcf3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/element/bounds.ts
View File

@ -260,14 +260,28 @@ export const getArrowheadPoints = (
dot: 15, dot: 15,
}[arrowhead]; // pixels (will differ for each arrowhead) }[arrowhead]; // pixels (will differ for each arrowhead)
const length = element.points.reduce((total, [cx, cy], idx, points) => { let length = 0;
const [px, py] = idx > 0 ? points[idx - 1] : [0, 0];
return total + Math.hypot(cx - px, cy - py); if (arrowhead === "arrow") {
}, 0); // Length for -> arrows is based on the length of the last section
const [cx, cy] = element.points[element.points.length - 1];
const [px, py] =
element.points.length > 1
? element.points[element.points.length - 2]
: [0, 0];
length = Math.hypot(cx - px, cy - py);
} else {
// Length for other arrowhead types is based on the total length of the line
for (let i = 0; i < element.points.length; i++) {
const [px, py] = element.points[i - 1] || [0, 0];
const [cx, cy] = element.points[i];
length += Math.hypot(cx - px, cy - py);
}
}
// Scale down the arrowhead until we hit a certain size so that it doesn't look weird. // Scale down the arrowhead until we hit a certain size so that it doesn't look weird.
// This value is selected by minimizing a minimum size with the whole length of the // This value is selected by minimizing a minimum size with the last segment of the arrowhead
// arrowhead instead of last segment of the arrowhead.
const minSize = Math.min(size, length / 2); const minSize = Math.min(size, length / 2);
const xs = x2 - nx * minSize; const xs = x2 - nx * minSize;
const ys = y2 - ny * minSize; const ys = y2 - ny * minSize;