Add more flexible Decorations or editor overlays for extensions

[DanTup]

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 (https://github.com/microsoft/vscode/issues/54147 would also help with that).

[jacob314]

Here is the same example in Android Studio where we can avoid any flicker. Here is a similar example showing that with edits as well as indent changes we avoid flicker in IntelliJ.

[escamoteur]

Also as we discovered today it does not work well if the user uses a font that does not support the used box-drawing characters which leads to a fallback to another font which may have another character width with the result like this here: The line should normally align with the numbers.

[fisforfaheem]

This should be focused.

[s-ol]

In Atom, I could replace text ranges with custom DOM elements. This is very useful for advanced editor integrations, e.g. here showing the values in real-time from a running program:

https://github.com/microsoft/vscode/assets/1731279/b180335a-0826-44fa-8266-8a961e942bcc

The only workaround would be generating a SVG data-uri every frame, but that is ridiculously expensive compared to modifying DOM nodes directly.

[xzbdmw]

I think the ascii line is cool, can you upload your extension?

[DanTup]

@xzbdmw if you're referring to the ascii lines shown in my original post here, they're in the Dart extension (behind a preview flag). Code is here:

https://github.com/Dart-Code/Dart-Code/blob/master/src/extension/decorations/flutter_ui_guides_decorations.ts

It was written pretty specifically for Flutter and uses data from custom messages from the language server though, so it might not be easily reusable. I'm not sure I'd recommend doing things this... it's kinda quirky (which is why it's still behind a preview flag).. I don't think there are any other options right now (besides implementing a custom editor in a webview 🙃).

[fisforfaheem]

Any recent updates?

[fisforfaheem]

@xzbdmw if you're referring to the ascii lines shown in my original post here, they're in the Dart extension (behind a preview flag). Code is here:

https://github.com/Dart-Code/Dart-Code/blob/master/src/extension/decorations/flutter_ui_guides_decorations.ts

It was written pretty specifically for Flutter and uses data from custom messages from the language server though, so it might not be easily reusable. I'm not sure I'd recommend doing things this... it's kinda quirky (which is why it's still behind a preview flag).. I don't think there are any other options right now (besides implementing a custom editor in a webview 🙃).

can u release it on extensions

[darianmorat]

This kind of feature would be pretty helpful in other languages for a better visualization of the code... I'll see if I can get something with the current options available

[fisforfaheem]

That sounds like a great idea. Let me know if you need any assistance with that.

Written with Magical https://www.getmagical.com/?utm_source=getmagical&utm_medium=product&utm_campaign=written-with-magical

On Fri, Aug 30, 2024 at 7:34 PM Darian Toledo @.***> wrote:

This kind of feature would be pretty helpful in other languages for a better visualization of the code... I'll see if I can get something with the current options available

— Reply to this email directly, view it on GitHub https://github.com/microsoft/vscode/issues/73780#issuecomment-2321455131, or unsubscribe https://github.com/notifications/unsubscribe-auth/AIRXJSD6MPF4HHTOMDNO3Q3ZUB7GBAVCNFSM4HNFB45KU5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TEMZSGE2DKNJRGMYQ . You are receiving this because you commented.Message ID: @.***>