Skip to content
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

Open
DanTup opened this issue May 15, 2019 · 10 comments
Open

Add more flexible Decorations or editor overlays for extensions #73780

DanTup opened this issue May 15, 2019 · 10 comments
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality
Milestone

Comments

@DanTup
Copy link
Contributor

DanTup commented May 15, 2019

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

ui guides

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).

May-15-2019 19-12-26

@vscodebot vscodebot bot added the editor-contrib Editor collection of extras label May 15, 2019
@jacob314
Copy link

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

@escamoteur
Copy link

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:
image
The line should normally align with the numbers.

@fisforfaheem
Copy link

This should be focused.

@s-ol
Copy link

s-ol commented Nov 12, 2023

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.mp4

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

@xzbdmw
Copy link

xzbdmw commented Jan 13, 2024

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

@DanTup
Copy link
Contributor Author

DanTup commented Jan 15, 2024

@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
Copy link

Any recent updates?

@fisforfaheem
Copy link

@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
Copy link

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
Copy link

fisforfaheem commented Sep 4, 2024 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
editor-rendering Editor rendering issues feature-request Request for new features or functionality
Projects
None yet
Development

No branches or pull requests

9 participants