Flutter in IntelliJ/Android Studio has this new feature that draws guide lines between parent/child widgets in the code editor:

The feedback has been great and many have asked for the same in VS Code (for ex. see https://twitter.com/brwngrldev/status/1128300139980959745).

I've tried to implement this in VS Code using decorations, but it's been a struggle because the decorations API wasn't really designed for this. Some of the quirks I found while trying to implement this:

• Blank lines will only render the first decoration
• Decorations that span multiple lines are appear individually to each line (eg. a bottom border would appear on every line in the range, not just the bottom)
• Unable to render a vertical line starting at the top of an editors line other than border (which has little control over positioning)
• Images that fill the whole line height will cause some lines (usually the first in a block with the decoration) to grow by a few pixels (so you have some lines in the editor taller than others)
• No way to render a horizontal line that will extend automatically with its range (borders seem like they'd work, but positioning them within lines is difficult).

I also noticed there are other extensions that try to do similar things in the editor that have similar quirks (things like Indent Rainbow).

I'm not very confident in shipping what I've built so far because it's very quirky, but it would be a shame for VS Code users to miss out on this feature. It would be great if we had a more flexible way of drawing in the editor (without affecting the layout/positioning of code). I don't know exactly what the API/feature to support this better might look like, but for example if we could draw to a canvas and had an API to get the coordinates/size of a given character/Position I think we could make this much more reliable.

I did look up how VS Code draws its indent guides hoping for some inspiration, but it seems like it uses features/APIs unavailable to extensions (like its own custom CSS).

Here's what I have now. There are gaps between lines because I'm using ascii characters to draw (if you reduce your line height, you can eliminate these, at the expense of your lines being crushed) and because of how we have to draw it, there's also a noticeable delay when code is moved around (#54147 would also help with that).