Skip to content

fix: render elbow arrows with sharp corners#23

Merged
JonRC merged 1 commit intomainfrom
fix/elbow-arrow-rendering
Feb 10, 2026
Merged

fix: render elbow arrows with sharp corners#23
JonRC merged 1 commit intomainfrom
fix/elbow-arrow-rendering

Conversation

@JonRC
Copy link
Copy Markdown
Owner

@JonRC JonRC commented Feb 10, 2026

Summary

  • Elbow arrows (elbowed: true) were rendered as smooth curves instead of right-angle paths
  • Ported generateElbowArrowShape() from original Excalidraw — uses straight lines with small quadratic corners (16px radius)
  • Fixed both PNG (rc.path()) and SVG (gen.path()) renderers
  • Added visual regression fixture with L/Z/U elbow shapes + regular curved arrow for regression

Test plan

  • All 87 unit tests pass
  • All 56 visual regression tests pass at 0.00% diff
  • Elbow arrows render with sharp corners in PNG and SVG
  • Regular curved arrows unchanged

Elbow arrows (elbowed: true) were rendered using roughjs rc.curve() which
produces smooth Bézier curves. Now uses rc.path()/gen.path() with an SVG
path of straight lines and small quadratic corners (radius 16px), matching
the original Excalidraw rendering.

- Port generateElbowArrowShape() from excalidraw to src/shared.ts
- Add elbow check in renderLine() (PNG) and svgLine() (SVG)
- Add visual regression fixture with L/Z/U elbow shapes
@JonRC JonRC merged commit 09ab642 into main Feb 10, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant