From 044614dcf3ee25ccae09fc263a1f11e9da7dbb2d Mon Sep 17 00:00:00 2001 From: Lily Ge <59737208+lily-ge@users.noreply.github.com> Date: Sat, 22 May 2021 06:30:02 -0400 Subject: [PATCH] perf: Improve arrow head sizing (#3480) Co-authored-by: Steve Ruiz --- src/element/bounds.ts | 26 ++++++++++++++++++++------ 1 file changed, 20 insertions(+), 6 deletions(-) diff --git a/src/element/bounds.ts b/src/element/bounds.ts index 0958db1b..417a4d4a 100644 --- a/src/element/bounds.ts +++ b/src/element/bounds.ts @@ -260,14 +260,28 @@ export const getArrowheadPoints = ( dot: 15, }[arrowhead]; // pixels (will differ for each arrowhead) - const length = element.points.reduce((total, [cx, cy], idx, points) => { - const [px, py] = idx > 0 ? points[idx - 1] : [0, 0]; - return total + Math.hypot(cx - px, cy - py); - }, 0); + let length = 0; + + if (arrowhead === "arrow") { + // 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. - // This value is selected by minimizing a minimum size with the whole length of the - // arrowhead instead of last segment of the arrowhead. + // This value is selected by minimizing a minimum size with the last segment of the arrowhead const minSize = Math.min(size, length / 2); const xs = x2 - nx * minSize; const ys = y2 - ny * minSize;