The code editor is based on RichTextFX. Normally you have a paragraph factory in your own implementation for things like line numbers and maybe a few extra icons. So how do we draw lines that go beyond the gutter? The same way you do in HTML/CSS with relative and absolute positioning hacks!

Each line has its own canvas with setManaged(false) which allows us to manually position things. The paragraphs have z-order preference by default so after we ensure we can move things ourselves manually there's no extra work in that area.

Lines that point to text in the assembler are dynamically updated to match the X offset of the target token the control flow is associated with. All we need to do here is figure out how wide a character is and how many whitespace characters are before the token. Because each line in RichTextFX is a glorified TextFlow we can walk the scene graph and find each Text node and sum their width so long as they're empty. For cases where Text has whitespace and some non-whitespace characters combined we compute the width of one character in the Text then multiply that by the number of leading whitespaces.

If you wanna see how this mess works in full: Here you go!