-
Notifications
You must be signed in to change notification settings - Fork 28.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add more flexible Decorations or editor overlays for extensions #73780
Comments
This should be focused. |
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: a66e6f0270555ded.mp4The only workaround would be generating a SVG data-uri every frame, but that is ridiculously expensive compared to modifying DOM nodes directly. |
I think the ascii line is cool, can you upload your extension? |
@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: 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 🙃). |
Any recent updates? |
can u release it on extensions |
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 |
That sounds like a great idea. Let me know if you need any assistance with
that.
|
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:
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).
The text was updated successfully, but these errors were encountered: