diff --git a/src/element/bounds.ts b/src/element/bounds.ts index 4739e41d..b57c3105 100644 --- a/src/element/bounds.ts +++ b/src/element/bounds.ts @@ -119,12 +119,48 @@ export function getLinearElementAbsoluteBounds(element: ExcalidrawElement) { } export function getArrowPoints(element: ExcalidrawElement) { - const points = element.points; - const [x1, y1] = points.length >= 2 ? points[points.length - 2] : [0, 0]; - const [x2, y2] = points[points.length - 1]; + const shape = element.shape as Drawable[]; + const ops = shape[0].sets[0].ops; + + const data = ops[ops.length - 1].data; + const p3 = [data[4], data[5]] as Point; + const p2 = [data[2], data[3]] as Point; + const p1 = [data[0], data[1]] as Point; + + // we need to find p0 of the bezier curve + // it is typically the last point of the previous + // curve; it can also be the position of moveTo operation + const prevOp = ops[ops.length - 2]; + let p0: Point = [0, 0]; + if (prevOp.op === "move") { + p0 = prevOp.data as Point; + } else if (prevOp.op === "bcurveTo") { + p0 = [prevOp.data[4], prevOp.data[5]]; + } + + // B(t) = p0 * (1-t)^3 + 3p1 * t * (1-t)^2 + 3p2 * t^2 * (1-t) + p3 * t^3 + const equation = (t: number, idx: number) => + Math.pow(1 - t, 3) * p3[idx] + + 3 * t * Math.pow(1 - t, 2) * p2[idx] + + 3 * Math.pow(t, 2) * (1 - t) * p1[idx] + + p0[idx] * Math.pow(t, 3); + + // we know the last point of the arrow + const [x2, y2] = p3; + + // by using cubic bezier equation (B(t)) and the given parameters, + // we calculate a point that is closer to the last point + // The value 0.3 is chosen arbitrarily and it works best for all + // the tested cases + const [x1, y1] = [equation(0.3, 0), equation(0.3, 1)]; + + // find the normalized direction vector based on the + // previously calculated points + const distance = Math.hypot(x2 - x1, y2 - y1); + const nx = (x2 - x1) / distance; + const ny = (y2 - y1) / distance; const size = 30; // pixels - const distance = Math.hypot(x2 - x1, y2 - y1); const arrowLength = 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); @@ -134,8 +170,8 @@ export function getArrowPoints(element: ExcalidrawElement) { // This value is selected by minizing a minmum size with the whole length of the arrow // intead of last segment of the arrow const minSize = Math.min(size, arrowLength / 2); - const xs = x2 - ((x2 - x1) / distance) * minSize; - const ys = y2 - ((y2 - y1) / distance) * minSize; + const xs = x2 - nx * minSize; + const ys = y2 - ny * minSize; const angle = 20; // degrees const [x3, y3] = rotate(xs, ys, x2, y2, (-angle * Math.PI) / 180);